@usableapp/cardds 0.7.77 → 0.7.79

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export * from './cards/Card.js';
 export * from './cards/CardHead.js';
 export * from './cards/CardFoot.js';
 export * from './cards/CardParts.js';
+export * from './cards/CardFeed.js';
 export * from './cards/Stat.js';
 export * from './cards/Placeholder.js';
 export * from './sheets/SheetStack.js';

package/dist/index.js

@@ -28,6 +28,7 @@ export * from './cards/Card.js';
 export * from './cards/CardHead.js';
 export * from './cards/CardFoot.js';
 export * from './cards/CardParts.js';
+export * from './cards/CardFeed.js';
 export * from './cards/Stat.js';
 export * from './cards/Placeholder.js';
 export * from './sheets/SheetStack.js';

package/dist/sheets/SheetStack.d.ts

@@ -21,7 +21,7 @@ export interface SheetStackProps extends ComponentProps<'div'> {
     closed?: boolean;
     /** how an OPEN sheet meets the top bar of a closed stack in a `Screen fill`: `under` (default) stops under the bar · `flood` rises over it and fills the WHOLE screen (from the safe-top line down), the bar covered and hidden while a sheet is open. Only for a `closed` tap stack (warns once otherwise). Nothing resizes: the bar is a layer under the sheets */
     rise?: 'under' | 'flood';
-    /** what the base shows in a closed stack's headroom, behind the sheets, laid out against the peeks (a picture, a greeting) */
+    /** what the base shows in a closed stack's headroom, behind the sheets, laid out against the peeks (a picture, a greeting). A room too short for it keeps the upper thing whole and scrolls: the rest lies under the heads until the member scrolls up to it */
     base?: ReactNode;
 }
 /**

package/dist/sheets/SheetStack.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useControlled, warnOnce } from '../state.js';
+import { useControlled, warnOnce, watchSize } from '../state.js';
 import { cx } from '../cx.js';
 import { Card } from '../cards/Card.js';
 import { StackSheet } from './StackSheet.js';
@@ -25,6 +25,19 @@ function measureRests(stack) {
     };
 }
 const SLOP = 8; // px a pointer may travel and still be a tap
+/* the base's room either holds what stands in it or is too short for it (`is-long`). The CSS lays both out the same way, from the
+   room's top once there is no room to spare, so the measure does not feed back; the class only says there is something to scroll. */
+function StackBase({ children }) {
+    const ref = useRef(null);
+    const [long, setLong] = useState(false);
+    useLayoutEffect(() => {
+        const box = ref.current;
+        if (!box)
+            return;
+        return watchSize([box, ...box.children], () => setLong(box.scrollHeight - box.clientHeight > 1));
+    });
+    return _jsx("div", { ref: ref, className: cx('sheet-stack__base', long && 'is-long'), children: children });
+}
 /* one wrapper around a sheet is fine (a host's own box). The props land on the Card or StackSheet inside it, so the card renders them. */
 function stamp(child, place) {
     if (SHEET.has(child.type))
@@ -163,5 +176,5 @@ export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChang
         };
         return stamp(child, place);
     }) : items;
-    return (_jsxs("div", { className: cx('sheet-stack', mode !== 'static' && `sheet-stack--${mode}`, fanned && 'sheet-stack--fanned', closed && 'sheet-stack--closed', flood && 'sheet-stack--flood', className), ...rest, ref: setRef, onClickCapture: clickCapture, onPointerDownCapture: pointerDownCapture, children: [stamped, base != null && _jsx("div", { className: "sheet-stack__base", children: base })] }));
+    return (_jsxs("div", { className: cx('sheet-stack', mode !== 'static' && `sheet-stack--${mode}`, fanned && 'sheet-stack--fanned', closed && 'sheet-stack--closed', flood && 'sheet-stack--flood', className), ...rest, ref: setRef, onClickCapture: clickCapture, onPointerDownCapture: pointerDownCapture, children: [stamped, base != null && _jsx(StackBase, { children: base })] }));
 }

package/dist/templates/Home.d.ts

@@ -13,8 +13,12 @@ export interface HomeSheet {
     paper?: boolean;
     /** the sheet's pages as icon tabs in its head (a count shows as a small circle over the icon) — see `StackSheet` */
     tabs?: StackSheetTab[];
-    /** the tab shown first (default: the first) */
+    /** CONTROLLED: the tab this sheet shows (its id) — with `onTabChange`. The app sets it to bring the sheet up on a named tab; without it the Home keeps the sheet's tab itself */
+    tab?: string;
+    /** UNCONTROLLED: the tab shown first (default: the first); the Home then keeps its own. Pair of `tab` */
     defaultTab?: string;
+    /** a tab of this sheet was tapped: its id */
+    onTabChange?: (tab: string) => void;
     /** the SHEET BODY — rendered only while the sheet is open (or kept, with `keep`); a function gets the chosen tab */
     body: ReactNode | ((tab?: string) => ReactNode);
     /** the SHEET FOOT: the CTA at the sheet's bottom (one row); a function gets the chosen tab */

package/dist/templates/Home.js

@@ -50,5 +50,6 @@ export function Home({ top, title, sheets, open: openProp, defaultOpen = null, o
     }, [leaving]);
     const [tabs, setTabs] = useState(() => Object.fromEntries(sheets.map((x, i) => [i, x.defaultTab ?? x.tabs?.[0]?.id])));
     const shows = (i) => i === shown || i === leaving || (keep && seen.has(i));
-    return (_jsxs(Screen, { fill: true, top: top, ...rest, children: [_jsx(Text, { level: "h1", as: "h1", sr: true, children: title }), _jsx(SheetStack, { closed: true, open: shown, onOpenChange: request, onRefresh: onRefresh, refreshing: refreshing, mark: mark, rise: rise, base: base, children: sheets.map((s, i) => (_jsx(StackSheet, { tone: s.tone ?? TONES[i], paper: s.paper, title: s.title, icon: s.icon, tabs: s.tabs, tab: tabs[i], onTabChange: (t) => setTabs((v) => ({ ...v, [i]: t })), backLabel: backLabel, backAt: backAt, foot: typeof s.foot === 'function' ? s.foot(tabs[i]) : s.foot, children: shows(i) ? (typeof s.body === 'function' ? s.body(tabs[i]) : s.body) : null }, i))) }), children] }));
+    const tabOf = (i) => sheets[i].tab ?? tabs[i];
+    return (_jsxs(Screen, { fill: true, top: top, ...rest, children: [_jsx(Text, { level: "h1", as: "h1", sr: true, children: title }), _jsx(SheetStack, { closed: true, open: shown, onOpenChange: request, onRefresh: onRefresh, refreshing: refreshing, mark: mark, rise: rise, base: base, children: sheets.map((s, i) => (_jsx(StackSheet, { tone: s.tone ?? TONES[i], paper: s.paper, title: s.title, icon: s.icon, tabs: s.tabs, tab: tabOf(i), onTabChange: (t) => { setTabs((v) => ({ ...v, [i]: t })); s.onTabChange?.(t); }, backLabel: backLabel, backAt: backAt, foot: typeof s.foot === 'function' ? s.foot(tabOf(i)) : s.foot, children: shows(i) ? (typeof s.body === 'function' ? s.body(tabOf(i)) : s.body) : null }, i))) }), children] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.77",
+  "version": "0.7.79",
   "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.",
@@ -13,6 +13,7 @@
     "build": "node scripts/build-icons.mjs && tsc -p tsconfig.json && node scripts/flatten-css.mjs && node scripts/build-catalog.mjs",
     "test": "playwright test",
     "validate:inbox": "node scripts/validate-inbox.mjs",
+    "ci": "npm run validate:inbox && npm run typecheck && npm run check && playwright test",
     "prepack": "npm run build",
     "knobs": "node scripts/knobs.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p gallery/tsconfig.json --noEmit",