@usableapp/cardds 0.7.76 → 0.7.78

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/stamp/Stamp.d.ts

@@ -28,5 +28,8 @@ export interface StampPlaceProps extends Omit<ComponentProps<'span'>, 'onClick'>
     /** the place is a button ("make yours"): it renders a `<button>` */
     onClick?: () => void;
 }
-/** StampPlace — an empty place for a stamp: a dashed 4:5 frame the size a Stamp would be, a word or an Icon inside. */
-export declare function StampPlace({ faint, onClick, className, ...rest }: StampPlaceProps): import("react").JSX.Element;
+/**
+ * StampPlace — an empty place for a stamp: a dashed 4:5 frame the size a Stamp would be, a word or an Icon inside.
+ * The dashes are a stroke, not a border: `--stamp-place-dash` and `--stamp-place-gap` set them.
+ */
+export declare function StampPlace({ faint, onClick, className, children, ...rest }: StampPlaceProps): import("react").JSX.Element;

package/dist/stamp/Stamp.js

@@ -12,10 +12,13 @@ export function Stamp({ pictures, tone = 'custard', name, words, bare, tilt, onC
     const boxProps = (tap ? { type: 'button', onClick, ...rest } : rest);
     return (_jsx(Box, { className: cx('stamp', `stamp--${shown.length}`, bare && 'stamp--bare', tilt && `stamp--tilt-${tilt}`, tap && 'stamp--tap', className), ...boxProps, children: _jsx("span", { className: "stamp__paper", children: _jsxs("span", { className: cx('stamp__pic', `sticky--${tone}`), children: [shown.map((picture, i) => _jsx("span", { className: "stamp__art", "aria-hidden": "true", children: picture }, i)), (name != null || words != null) && (_jsxs("span", { className: "stamp__cap", children: [words != null && _jsx("span", { className: "stamp__words", children: words }), name != null && _jsx("span", { className: "stamp__name", children: name })] }))] }) }) }));
 }
-/** StampPlace — an empty place for a stamp: a dashed 4:5 frame the size a Stamp would be, a word or an Icon inside. */
-export function StampPlace({ faint, onClick, className, ...rest }) {
+/**
+ * StampPlace — an empty place for a stamp: a dashed 4:5 frame the size a Stamp would be, a word or an Icon inside.
+ * The dashes are a stroke, not a border: `--stamp-place-dash` and `--stamp-place-gap` set them.
+ */
+export function StampPlace({ faint, onClick, className, children, ...rest }) {
     const tap = onClick != null;
     const Box = (tap ? 'button' : 'span');
     const boxProps = (tap ? { type: 'button', onClick, ...rest } : rest);
-    return _jsx(Box, { className: cx('stamp-place', faint && 'stamp-place--faint', className), ...boxProps });
+    return (_jsxs(Box, { className: cx('stamp-place', faint && 'stamp-place--faint', className), ...boxProps, children: [_jsx("svg", { className: "stamp-place__edge", "aria-hidden": "true", focusable: "false", children: _jsx("rect", {}) }), children] }));
 }

package/dist/stamp/StampBook.js

@@ -5,7 +5,7 @@ import { Icon } from '../type/Icon.js';
 import { StampPlace } from './Stamp.js';
 /** StampBook — the album page: StampCells three across on an album ground, the free places drawn empty up to `places`. */
 export function StampBook({ places = 0, strip, bare, className, children, ...rest }) {
-    const free = Math.max(0, places - Children.count(children));
+    const free = Math.max(0, places - Children.toArray(children).length); // toArray drops null / undefined / booleans: `{owned && <StampCell/>}` that is false holds no place (Children.count counts it)
     return (_jsxs("div", { className: cx('stamp-book', strip && 'stamp-book--strip', bare && 'stamp-book--bare', className), ...rest, children: [children, Array.from({ length: free }, (_, i) => _jsx(StampPlace, { faint: true, "aria-hidden": "true" }, i))] }));
 }
 /** StampCell — one place of a StampBook: a Stamp (the child) and a short label under it. */

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.76",
+  "version": "0.7.78",
   "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.",