@usableapp/cardds 0.7.34 → 0.7.35

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.35 — 2026-10-01
+
+### Fixed
+- **`CallSheet`: a sheet on its way out keeps its body until it has slid away** (Lh 2026-10-01). Before, the body was taken out the moment `open` turned null (or another way was called), so an empty sheet slid down. Nothing to change in a screen.
+
 ## 0.7.34 — 2026-10-01
 
 ### Changed

package/dist/templates/CallSheet.d.ts

@@ -4,7 +4,7 @@ import { type SheetProps } from '../sheets/Sheet.js';
 export interface CallSheetSheet {
     /** the sheet head's title */
     title: ReactNode;
-    /** the sheet body — rendered only while the sheet is up; a function is called then */
+    /** the sheet body — rendered only while the sheet is up (and while it slides away); a function is called then */
     body: ReactNode | (() => ReactNode);
     /** the sheet foot: the one button that finishes the sheet */
     foot?: ReactNode;

package/dist/templates/CallSheet.js

@@ -21,8 +21,16 @@ export function CallSheet({ media, heading, body, action, sheet, ways, open: ope
     const list = ways ?? (sheet ? [{ action, sheet }] : []);
     const [on, set] = useControlled(openProp === undefined ? undefined : index(openProp), index(defaultOpen), onOpenChange && ((next) => onOpenChange(next !== null, next)));
     const [at, setAt] = useState('full');
+    // a sheet on its way out keeps its body until it has slid away — an emptied sheet sliding down read as a broken one
+    const [leaving, setLeaving] = useState(null), [was, setWas] = useState(on);
+    if (was !== on) {
+        setWas(on);
+        if (was !== null)
+            setLeaving(was);
+    }
     return (_jsxs(Screen, { fill: true, ...rest, children: [_jsxs(Step, { children: [_jsxs(Page, { children: [media, _jsx(CardHead, { level: "h1", heading: heading }), typeof body === 'string' ? _jsx(Text, { level: "body", children: body }) : body, _jsx(CtaPack, { children: list.map((w, i) => (_jsx(Btn, { primary: i === 0, quiet: i > 0, "aria-expanded": on === i, onClick: () => { setAt('full'); set(i); }, children: w.action }, i))) })] }), list.map(({ sheet: sh }, i) => (_jsxs(Sheet, { state: on === i ? at : 'away', onStateChange: (s) => { if (s === 'away')
                             set(null);
                         else
-                            setAt(s); }, states: states, handle: sh.handle ?? handle, children: [_jsx(CardHead, { heading: sh.title }), _jsx(SheetBody, { children: on === i ? (typeof sh.body === 'function' ? sh.body() : sh.body) : null }), (sh.foot != null || sh.footLink != null) && _jsx(CardFoot, { link: sh.footLink, children: sh.foot })] }, i)))] }), children] }));
+                            setAt(s); }, onSettled: (s) => { if (s === 'away' && leaving === i)
+                            setLeaving(null); }, states: states, handle: sh.handle ?? handle, children: [_jsx(CardHead, { heading: sh.title }), _jsx(SheetBody, { children: on === i || leaving === i ? (typeof sh.body === 'function' ? sh.body() : sh.body) : null }), (sh.foot != null || sh.footLink != null) && _jsx(CardFoot, { link: sh.footLink, children: sh.foot })] }, i)))] }), children] }));
 }

package/package.json

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