@usableapp/cardds 0.7.106 → 0.7.108

package/dist/media/MapArea.js

@@ -4,7 +4,7 @@ import { Icon } from '../type/Icon.js';
 /**
  * MapArea — the box a map engine draws in: the first child is the engine's mount and fills it; before tiles arrive (or
  * offline) the box shows the wireframe street pattern, never a hole. Two places: behind a stage sheet (the default), or
- * `inline`, in flow inside a card or a sheet's body — as a SheetBody's only child it fills the body, so the open sheet
+ * `inline`, in flow inside a card or a sheet's body — as a sheet's Body's only child it fills the body, so the open sheet
  * becomes the map while its head stays. The ring marks the rough area: behind a stage it is centred in the band a half
  * sheet leaves open, inline at the centre of its own box. Dragging the map underneath is that choice, never a pin to place;
  * `ringRef` is how the engine learns where that is. Places to pick go after the mount, as `MapPick`s.

package/dist/media/Tile.d.ts

@@ -13,9 +13,7 @@ export interface TileProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     icon?: IconName;
     /** the label at the bottom */
     label?: ReactNode;
-    /** a big value (stat tiles) */
-    value?: ReactNode;
-    /** a caption under the label or value */
+    /** a caption under the label */
     sub?: ReactNode;
     /** a pick tile: a checkbox (or radio) inside, filled when checked */
     pick?: boolean;
@@ -31,8 +29,6 @@ export interface TileProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /** filled accent (a static "on" tile) */
     on?: boolean;
-    /** icon beside a value + caption, shorter */
-    stat?: boolean;
     /** dashed, centred: an upload slot */
     upload?: boolean;
     /** spans the whole grid */
@@ -42,8 +38,8 @@ export interface TileProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /** div (default), button for a tap tile — pick tiles render as a label */
     as?: 'div' | 'button';
 }
-/** Tile — a big square: icon top, label bottom; `pick` toggles, `stat` shows a value, `upload` is the dashed slot. A `pick` or `upload` tile is filled in: On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
-export declare function Tile({ icon, label, value, sub, pick, type, name, checked, defaultChecked, onChange, on, stat, upload, wide, tone, as, className, children, ...rest }: TileProps): import("react").DetailedReactHTMLElement<{
+/** Tile — a big square: icon top, label bottom; `pick` toggles, `upload` is the dashed slot. A `pick` or `upload` tile is filled in: On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). A number with its icon and label in a cell is a `KvCell` (Lh 2026-10-20). */
+export declare function Tile({ icon, label, sub, pick, type, name, checked, defaultChecked, onChange, on, upload, wide, tone, as, className, children, ...rest }: TileProps): import("react").DetailedReactHTMLElement<{
     translate?: "yes" | "no" | undefined | undefined;
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;

package/dist/media/Tile.js

@@ -6,11 +6,11 @@ import { Icon } from '../type/Icon.js';
 export function TileGrid({ cols3, bleed, className, ...rest }) {
     return _jsx("div", { className: cx('tile-grid', cols3 && 'tile-grid--3', bleed && 'bleed', className), ...rest });
 }
-/** Tile — a big square: icon top, label bottom; `pick` toggles, `stat` shows a value, `upload` is the dashed slot. A `pick` or `upload` tile is filled in: On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
-export function Tile({ icon, label, value, sub, pick, type = 'checkbox', name, checked, defaultChecked, onChange, on, stat, upload, wide, tone, as, className, children, ...rest }) {
+/** Tile — a big square: icon top, label bottom; `pick` toggles, `upload` is the dashed slot. A `pick` or `upload` tile is filled in: On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). A number with its icon and label in a cell is a `KvCell` (Lh 2026-10-20). */
+export function Tile({ icon, label, sub, pick, type = 'checkbox', name, checked, defaultChecked, onChange, on, upload, wide, tone, as, className, children, ...rest }) {
     const el = pick ? 'label' : as ?? 'div';
-    const text = value != null || (label != null && sub != null)
-        ? _jsxs("span", { className: "tile__text", children: [value != null && _jsx("span", { className: "tile__value", children: value }), label != null && _jsx("span", { className: "tile__label", children: label }), sub != null && _jsx("span", { className: "tile__sub", children: sub })] })
+    const text = label != null && sub != null
+        ? _jsxs("span", { className: "tile__text", children: [_jsx("span", { className: "tile__label", children: label }), _jsx("span", { className: "tile__sub", children: sub })] })
         : label != null && _jsx("span", { className: "tile__label", children: label });
-    return createElement(el, { type: el === 'button' ? 'button' : undefined, className: cx('tile', pick && 'tile--pick', on && 'tile--on', stat && 'tile--stat', upload && 'tile--upload', wide && 'tile--wide', tone && `tile--${tone}`, className), ...rest }, pick && _jsx("input", { type: type, name: name, checked: checked, defaultChecked: defaultChecked, onChange: onChange }), icon && _jsx(Icon, { name: icon }), text, children);
+    return createElement(el, { type: el === 'button' ? 'button' : undefined, className: cx('tile', pick && 'tile--pick', on && 'tile--on', upload && 'tile--upload', wide && 'tile--wide', tone && `tile--${tone}`, className), ...rest }, pick && _jsx("input", { type: type, name: name, checked: checked, defaultChecked: defaultChecked, onChange: onChange }), icon && _jsx(Icon, { name: icon }), text, children);
 }

package/dist/parts/Body.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps } from 'react';
+export interface BodyProps extends ComponentProps<'div'> {
+}
+/** Body — the content row, under the `Head` and over the `Foot`: what the member reads or fills in. In a `Sheet` and a stack sheet it is the one thing that
+ *  scrolls, and its scroll padding keeps a focused control above the cut; content never goes straight into the Sheet. In a `Modal` it is the light part the
+ *  question is about, scrolling inside when tall; a Modal with no Body is the confirm. Knobs `--body-gap`, `--body-pad-top`. */
+export declare function Body({ className, ...rest }: BodyProps): import("react").JSX.Element;

package/dist/parts/Body.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { cx } from '../cx.js';
+import { StackPullCtx } from '../sheets/stackCard.js';
+/** Body — the content row, under the `Head` and over the `Foot`: what the member reads or fills in. In a `Sheet` and a stack sheet it is the one thing that
+ *  scrolls, and its scroll padding keeps a focused control above the cut; content never goes straight into the Sheet. In a `Modal` it is the light part the
+ *  question is about, scrolling inside when tall; a Modal with no Body is the confirm. Knobs `--body-gap`, `--body-pad-top`. */
+export function Body({ className, ...rest }) {
+    const pulling = useContext(StackPullCtx);
+    return _jsx("div", { className: cx('body', pulling && 'is-refreshing', className), ...rest });
+}

package/dist/parts/End.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface EndProps extends ComponentProps<'span'> {
+    /** the trailing value, right-aligned (title type) */
+    value?: ReactNode;
+    /** the muted caption under `value` */
+    caption?: ReactNode;
+}
+/** End — the value at the end of a line over its caption, right-aligned (+1.0 h over Tue); or its children.
+ *  A control at the end (an IconBtn, a Chip, a Check) takes no End: it goes straight in the line after the Words. */
+export declare function End({ value, caption, className, children, ...rest }: EndProps): import("react").JSX.Element;

package/dist/parts/End.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** End — the value at the end of a line over its caption, right-aligned (+1.0 h over Tue); or its children.
+ *  A control at the end (an IconBtn, a Chip, a Check) takes no End: it goes straight in the line after the Words. */
+export function End({ value, caption, className, children, ...rest }) {
+    return (_jsxs("span", { className: cx('end', className), ...rest, children: [value != null && _jsx("span", { className: "t-title", children: value }), caption != null && _jsx("span", { className: "t-caption t-muted", children: caption }), children] }));
+}

package/dist/parts/Foot.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface FootProps extends ComponentProps<'div'> {
+    /** a SMALL LINK under the buttons, centred on its own short row (a `Link sm` — "details for developers") — the same as an
+     *  ActionBar's ctaLink (Lh 2026-09-23). It never takes a share of the buttons' line */
+    link?: ReactNode;
+    /** a foot of a few ROUND buttons (`IconBtn`, a size `lg` / `xl` for the big ones): they keep their own size instead of sharing the line, and
+     *  stand as ONE group in the middle of the foot, a fixed gap apart (wider than the Btns' — `--foot-gap` sets it). The Btn foot is
+     *  unchanged: this is the other foot, for a few big round answers */
+    round?: boolean;
+}
+/** Foot — the last row of a card, a sheet or a stack sheet: what the member can do next, its buttons on one line. One takes the width, up to
+ *  four share it evenly. Btns only in the row; a small link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words,
+ *  centred — for a foot whose one button should not fill the card. With `round` it is the foot of a few round `IconBtn`s (`size="xl"`, one
+ *  `primary` with a word, the others with icons): one centred group, a fixed gap between them. In a `Sheet` it stands on the box's bottom edge
+ *  at every state. A `Card` finds its `Foot` by type (a turning card draws it on both faces), so a consumer's own component that wraps a `Foot`
+ *  is not found. */
+export declare function Foot({ link, round, className, children, ...rest }: FootProps): import("react").JSX.Element;

package/dist/parts/Foot.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** Foot — the last row of a card, a sheet or a stack sheet: what the member can do next, its buttons on one line. One takes the width, up to
+ *  four share it evenly. Btns only in the row; a small link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words,
+ *  centred — for a foot whose one button should not fill the card. With `round` it is the foot of a few round `IconBtn`s (`size="xl"`, one
+ *  `primary` with a word, the others with icons): one centred group, a fixed gap between them. In a `Sheet` it stands on the box's bottom edge
+ *  at every state. A `Card` finds its `Foot` by type (a turning card draws it on both faces), so a consumer's own component that wraps a `Foot`
+ *  is not found. */
+export function Foot({ link, round, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('foot', link != null && 'foot--link', round && 'foot--round', className), ...rest, children: [children, link != null && _jsx("div", { className: "foot__link", children: link })] }));
+}

package/dist/parts/Head.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps } from 'react';
+export interface HeadProps extends ComponentProps<'div'> {
+    /** top-align a genuinely tall multi-line title with its control */
+    top?: boolean;
+    /** a stage sheet's head: the title and its meta centred between a round button either side (`lead` · `Words` · `trail`), the three columns kept when one is missing */
+    centre?: boolean;
+    /** the sheet measured this title as wider than its line, so the title runs sideways */
+    long?: boolean;
+}
+/**
+ * Head — the first row of a card, a sheet or a stack sheet: what this is, and the one thing beside it. Its children are, in order, an optional
+ * lead (a `Lead`, a `StackBack`, a `JourneyBadge`), the `Words` (the title takes the room, its meta under it), chips, and an end (an `IconBtn`, a `Chip`, an `End`).
+ * Never put buttons here that finish the card: they go in the foot. A `Card` finds its `Head` by type, so a consumer's own component that wraps a `Head` is not found.
+ */
+export declare function Head({ top, centre, long, className, children, ...rest }: HeadProps): import("react").JSX.Element;

package/dist/parts/Head.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useContext } from 'react';
+import { cx } from '../cx.js';
+import { Text } from '../type/Text.js';
+import { StackHeadCtx } from '../sheets/stackCard.js';
+import { HeadCtx, onTitleKey } from './headCtx.js';
+/** a title written by hand (a `Text` h1/h2/display, a bare h1-h3) is the stack's keyboard way in as a `Words` title is. The head renders the tab stop and, when
+ *  the sheet measured it long, `.is-long`. Nothing sets either on the node afterwards */
+function markTitle(node, tab, long) {
+    if (!isValidElement(node))
+        return node;
+    const el = node;
+    const level = el.type === Text ? el.props.level : null;
+    const intrinsic = typeof el.type === 'string' && /^h[1-3]$/.test(el.type);
+    if (level !== 'h1' && level !== 'h2' && level !== 'display' && !intrinsic)
+        return node;
+    return cloneElement(el, {
+        ...(long ? { className: cx(el.props.className, 'is-long') } : {}),
+        ...(tab != null ? {
+            tabIndex: tab,
+            onKeyDown: (e) => { el.props.onKeyDown?.(e); if (!e.defaultPrevented)
+                onTitleKey(e); },
+        } : {}),
+    });
+}
+/**
+ * Head — the first row of a card, a sheet or a stack sheet: what this is, and the one thing beside it. Its children are, in order, an optional
+ * lead (a `Lead`, a `StackBack`, a `JourneyBadge`), the `Words` (the title takes the room, its meta under it), chips, and an end (an `IconBtn`, a `Chip`, an `End`).
+ * Never put buttons here that finish the card: they go in the foot. A `Card` finds its `Head` by type, so a consumer's own component that wraps a `Head` is not found.
+ */
+export function Head({ top, centre, long, className, children, ...rest }) {
+    const tab = useContext(StackHeadCtx);
+    return (_jsx("div", { className: cx('head', top && 'head--top', centre && 'head--centre', className), ...rest, children: _jsx(HeadCtx.Provider, { value: { tab, long: !!long }, children: tab == null && !long ? children : Children.map(children, (c) => markTitle(c, tab, !!long)) }) }));
+}

package/dist/parts/Lead.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import { type IconName } from '../type/Icon.js';
+export interface LeadProps extends ComponentProps<'span'> {
+    /** an icon drawn in the box; without it, the box holds its children (a number, an initial) */
+    icon?: IconName;
+}
+/** Lead — the thing at the start of a line: the outlined box holding an `icon` or its children. In a `Row` it is the 48 box of a menu row;
+ *  in a `Card row` (and a FeedCard's head) the 44 box in the card's own ink, a number or an initial in label type (`.card--row > .lead`, css/parts.css).
+ *  A person's or a group's lead takes no box: an Avatar or an AvatarStack goes straight in the line as its first child. */
+export declare function Lead({ icon, className, children, ...rest }: LeadProps): import("react").JSX.Element;

package/dist/parts/Lead.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
+/** Lead — the thing at the start of a line: the outlined box holding an `icon` or its children. In a `Row` it is the 48 box of a menu row;
+ *  in a `Card row` (and a FeedCard's head) the 44 box in the card's own ink, a number or an initial in label type (`.card--row > .lead`, css/parts.css).
+ *  A person's or a group's lead takes no box: an Avatar or an AvatarStack goes straight in the line as its first child. */
+export function Lead({ icon, className, children, ...rest }) {
+    return _jsx("span", { className: cx('lead', className), ...rest, children: icon ? _jsx(Icon, { name: icon }) : children });
+}

package/dist/parts/Words.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export interface WordsProps extends Omit<ComponentProps<'span'>, 'title'> {
+    /** the title line */
+    title?: ReactNode;
+    /** the caption under it (may hold a Dot) */
+    meta?: ReactNode;
+    /** the title as a heading element in that type level; without it the title is a span in title type. In a `Head` the title is always a heading: `h2` unless this says otherwise (`h1` for the one-feature page) */
+    level?: 'h1' | 'h2' | 'display';
+}
+/** Words — the words of a line, filling the room between the lead and the end: a `title` over a `meta` caption;
+ *  its children come under them, or instead of them (a Wave for a voice note). In a `Head` there is no box round them: the title and the meta
+ *  stand in the head, and a `className`, an `id` or any other attribute goes on the title. */
+export declare function Words({ title, meta, level, className, children, ...rest }: WordsProps): import("react").JSX.Element;

package/dist/parts/Words.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { cx } from '../cx.js';
+import { HeadCtx, onTitleKey } from './headCtx.js';
+/** Words — the words of a line, filling the room between the lead and the end: a `title` over a `meta` caption;
+ *  its children come under them, or instead of them (a Wave for a voice note). In a `Head` there is no box round them: the title and the meta
+ *  stand in the head, and a `className`, an `id` or any other attribute goes on the title. */
+export function Words({ title, meta, level, className, children, ...rest }) {
+    const head = useContext(HeadCtx);
+    if (head) {
+        const as = level ?? 'h2';
+        const Title = as === 'h1' ? 'h1' : 'h2';
+        const { onKeyDown, ...own } = rest;
+        const attrs = head.tab != null ? { tabIndex: head.tab, onKeyDown: (e) => { onKeyDown?.(e); if (!e.defaultPrevented)
+                onTitleKey(e); } } : { onKeyDown };
+        return (_jsxs(_Fragment, { children: [title != null && _jsx(Title, { className: cx('words__title', `t-${as}`, head.long && 'is-long', className), ...own, ...attrs, children: title }), meta != null && _jsx("span", { className: "words__meta t-caption t-muted", children: meta }), children] }));
+    }
+    const Title = level === 'h1' ? 'h1' : level ? 'h2' : 'span';
+    return (_jsxs("span", { className: cx('words', className), ...rest, children: [title != null && _jsx(Title, { className: cx('words__title', level && `t-${level}`), children: title }), meta != null && _jsx("span", { className: "words__meta", children: meta }), children] }));
+}

package/dist/parts/headCtx.d.ts

@@ -0,0 +1,7 @@
+import { type KeyboardEvent } from 'react';
+/** what a `Words` in a head reads: the stack's tab stop and whether the title runs. `null` outside a head */
+export declare const HeadCtx: import("react").Context<{
+    tab: 0 | -1 | null;
+    long: boolean;
+} | null>;
+export declare const onTitleKey: (e: KeyboardEvent<HTMLElement>) => void;

package/dist/parts/headCtx.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+/** what a `Words` in a head reads: the stack's tab stop and whether the title runs. `null` outside a head */
+export const HeadCtx = createContext(null);
+export const onTitleKey = (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ')
+        return;
+    e.preventDefault();
+    e.currentTarget.click();
+};

package/dist/scaffold/EmptyState.d.ts

@@ -11,5 +11,5 @@ export interface EmptyStateProps extends Omit<ComponentProps<'div'>, 'title'> {
 }
 /** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. A component in the content: alone in a `Step` it stands at the content's human centre, 40% down (Lh 2026-09-23 — no longer a `Centre` over the screen)
  *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in; full ink throughout, never muted (Lh 2026-09-16).
- *  Knob `--empty-state-at`, a number 0–1: the share of the holder's free room that stands above it. In a `Step` the default is 0.4 (two parts above, three below); alone in a `SheetBody` it is 0 (at the top). A theme's `:root { --empty-state-at: 0.2 }` lifts it everywhere, or set it on a `Screen`, `Step` or `Sheet` for the ones inside. */
+ *  Knob `--empty-state-at`, a number 0–1: the share of the holder's free room that stands above it. In a `Step` the default is 0.4 (two parts above, three below); alone in a Sheet's `Body` it is 0 (at the top). A theme's `:root { --empty-state-at: 0.2 }` lifts it everywhere, or set it on a `Screen`, `Step` or `Sheet` for the ones inside. */
 export declare function EmptyState({ icon, title, action, level, className, children, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/scaffold/EmptyState.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. A component in the content: alone in a `Step` it stands at the content's human centre, 40% down (Lh 2026-09-23 — no longer a `Centre` over the screen)
  *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in; full ink throughout, never muted (Lh 2026-09-16).
- *  Knob `--empty-state-at`, a number 0–1: the share of the holder's free room that stands above it. In a `Step` the default is 0.4 (two parts above, three below); alone in a `SheetBody` it is 0 (at the top). A theme's `:root { --empty-state-at: 0.2 }` lifts it everywhere, or set it on a `Screen`, `Step` or `Sheet` for the ones inside. */
+ *  Knob `--empty-state-at`, a number 0–1: the share of the holder's free room that stands above it. In a `Step` the default is 0.4 (two parts above, three below); alone in a Sheet's `Body` it is 0 (at the top). A theme's `:root { --empty-state-at: 0.2 }` lifts it everywhere, or set it on a `Screen`, `Step` or `Sheet` for the ones inside. */
 export function EmptyState({ icon, title, action, level = 'h2', className, children, ...rest }) {
     const H = level;
     return (_jsxs("div", { className: cx('empty-state', className), ...rest, children: [icon, title != null && _jsx(H, { className: "t-h2", children: title }), typeof children === 'string' ? _jsx("p", { className: "t-body", children: children }) : children, action != null && _jsx("div", { className: "empty-state__action", children: action })] }));

package/dist/scaffold/Screen.js

@@ -16,7 +16,7 @@ export function Screen({ fill, palette, as = 'div', top, bottom, ready = true, c
         const el = own.current;
         if (!el || !el.querySelector(':scope > .action-bar') || !el.querySelector(':scope > .step > .sheet'))
             return;
-        warnOnce('screen-sheet-bar', 'cardds Screen: a bottom bar on a screen with a Sheet — the sheet finishes on its own foot (CardFoot); drop the bar.');
+        warnOnce('screen-sheet-bar', 'cardds Screen: a bottom bar on a screen with a Sheet — the sheet finishes on its own foot (Foot); drop the bar.');
     });
     /* the BOTTOM layer's height, published on the screen as --bottom-h (Lh 2026-09-23): the walk's pages end with that much room
        more, so every last word scrolls up clear of the layer. Measured, because the layer is as tall as its rows and the text size. */

package/dist/sheets/Modal.d.ts

@@ -10,9 +10,9 @@ export interface ModalProps extends ComponentProps<'article'> {
     onDismiss?: (reason: 'scrim' | 'escape') => void;
 }
 /**
- * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `ModalBody` (the thing being asked about, light, scrolls
+ * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `Body` (the thing being asked about, light, scrolls
  * when tall) and a `ModalAsk` (the dark end that asks). No border. Two beats on appearing: drops in from above, then the ModalAsk comes
- * out below while the ModalBody moves up.
+ * out below while the Body moves up.
  * A COMPONENT, not a wiring: it does not know its buttons. They are plain `IconBtn`s / `Btn`s with the app's `onClick` — the app
  * records the answer and sets `open={false}`; the modal's one behaviour is how it leaves. `onDismiss` asks to leave unanswered (a tap on
  * the scrim, Esc). When it has arrived, cardds puts the cursor in the field marked `data-autofocus`, else the first field, else the question — write no focus code.
@@ -21,10 +21,6 @@ export interface ModalProps extends ComponentProps<'article'> {
  * effect's first run sets `shown` to false, its cleanup drops the wait, and the second run returns early.
  */
 export declare function Modal({ open, onClosed, onDismiss, className, ...rest }: ModalProps): import("react").JSX.Element;
-export interface ModalBodyProps extends ComponentProps<'div'> {
-}
-/** ModalBody — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
-export declare function ModalBody({ className, ...rest }: ModalBodyProps): import("react").JSX.Element;
 export interface ModalAskProps extends Omit<ComponentProps<'div'>, 'title'> {
     /** the question */
     title: ReactNode;
@@ -34,7 +30,7 @@ export interface ModalAskProps extends Omit<ComponentProps<'div'>, 'title'> {
     light?: boolean;
 }
 /** ModalAsk — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and the answers: a `BtnTrio` of round icon buttons, or a `BtnRow` of word `Btn`s (it fills the card, each button's words on one line; a `Btn quiet` there is edged in the ask's own ink) — plain buttons
- *  with the app's `onClick`; the ModalAsk does nothing with them. A `Modal` holding ONLY a ModalAsk (no `ModalBody`) is the CONFIRM: a question with nothing
+ *  with the app's `onClick`; the ModalAsk does nothing with them. A `Modal` holding ONLY a ModalAsk (no `Body`) is the CONFIRM: a question with nothing
  *  to show above it — the ModalAsk is the whole card and comes in with it in one beat. */
 export declare function ModalAsk({ title, caption, light, className, children, ...rest }: ModalAskProps): import("react").JSX.Element;
 export interface BtnTrioProps extends ComponentProps<'div'> {

package/dist/sheets/Modal.js

@@ -3,9 +3,9 @@ import { Children, Fragment, useEffect, useRef } from 'react';
 import { focusWhenActive, useLatest } from '../state.js';
 import { cx } from '../cx.js';
 /**
- * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `ModalBody` (the thing being asked about, light, scrolls
+ * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `Body` (the thing being asked about, light, scrolls
  * when tall) and a `ModalAsk` (the dark end that asks). No border. Two beats on appearing: drops in from above, then the ModalAsk comes
- * out below while the ModalBody moves up.
+ * out below while the Body moves up.
  * A COMPONENT, not a wiring: it does not know its buttons. They are plain `IconBtn`s / `Btn`s with the app's `onClick` — the app
  * records the answer and sets `open={false}`; the modal's one behaviour is how it leaves. `onDismiss` asks to leave unanswered (a tap on
  * the scrim, Esc). When it has arrived, cardds puts the cursor in the field marked `data-autofocus`, else the first field, else the question — write no focus code.
@@ -57,12 +57,8 @@ export function Modal({ open = true, onClosed, onDismiss, className, ...rest })
     }, [has, open]);
     return _jsx("article", { ref: ref, className: cx('card modal', className), ...rest });
 }
-/** ModalBody — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
-export function ModalBody({ className, ...rest }) {
-    return _jsx("div", { className: cx('modal__lift', className), ...rest });
-}
 /** ModalAsk — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and the answers: a `BtnTrio` of round icon buttons, or a `BtnRow` of word `Btn`s (it fills the card, each button's words on one line; a `Btn quiet` there is edged in the ask's own ink) — plain buttons
- *  with the app's `onClick`; the ModalAsk does nothing with them. A `Modal` holding ONLY a ModalAsk (no `ModalBody`) is the CONFIRM: a question with nothing
+ *  with the app's `onClick`; the ModalAsk does nothing with them. A `Modal` holding ONLY a ModalAsk (no `Body`) is the CONFIRM: a question with nothing
  *  to show above it — the ModalAsk is the whole card and comes in with it in one beat. */
 export function ModalAsk({ title, caption, light, className, children, ...rest }) {
     return (_jsxs("div", { className: cx('modal__drawer', light && 'modal__drawer--light', className), ...rest, children: [_jsx("h2", { className: "t-h2", tabIndex: -1, children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));

package/dist/sheets/Sheet.d.ts

@@ -33,8 +33,8 @@ export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'>
 /**
  * Sheet — the SINGLE sheet: one card as a bottom sheet holding what the member ACTS on. Always the full height of its
  * box — a Step or a SheetStage — a state is only how far it slid (translate; the material never changes size).
- * ONE SHAPE, written top-down: handle · head (a CardHead / SheetHead — pinned, never scrolls) · SheetBody (scrolls, as far as
- * it needs) · CardFoot (the button that finishes the sheet — at the bottom, above the keyboard; gone at peek).
+ * ONE SHAPE, written top-down: handle · head (a Head — pinned, never scrolls) · Body (scrolls, as far as
+ * it needs) · Foot (the button that finishes the sheet — at the bottom, above the keyboard; gone at peek).
  *
  * It is a COMPONENT, not a wiring: it knows nothing of what opens it. The app owns `state` and sets it from whatever it
  * likes — a button, a route, a timer: `<Btn onClick={() => setSheet('full')}>` … `<Sheet state={sheet} onStateChange={setSheet}>`.

package/dist/sheets/Sheet.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
 import { focusWhenActive, useControlled, visibleBottom, watchSize } from '../state.js';
-import { CardHead } from '../cards/CardHead.js';
-import { SheetHead } from './SheetHead.js';
+import { Head } from '../parts/Head.js';
 import { cx } from '../cx.js';
 import { word } from '../words.js';
 import { ORDER, slid, stopsOf, useFootRoom, usePeekStrip, useTitleRun } from './sheetMeasure.js';
@@ -13,15 +12,15 @@ const RANK = { away: 0, peek: 1, half: 2, '3q': 3, full: 4 };
 function markLong(node, long) {
     if (!long || !isValidElement(node))
         return node;
-    if (node.type !== CardHead && node.type !== SheetHead)
+    if (node.type !== Head)
         return node;
     return cloneElement(node, { long: true });
 }
 /**
  * Sheet — the SINGLE sheet: one card as a bottom sheet holding what the member ACTS on. Always the full height of its
  * box — a Step or a SheetStage — a state is only how far it slid (translate; the material never changes size).
- * ONE SHAPE, written top-down: handle · head (a CardHead / SheetHead — pinned, never scrolls) · SheetBody (scrolls, as far as
- * it needs) · CardFoot (the button that finishes the sheet — at the bottom, above the keyboard; gone at peek).
+ * ONE SHAPE, written top-down: handle · head (a Head — pinned, never scrolls) · Body (scrolls, as far as
+ * it needs) · Foot (the button that finishes the sheet — at the bottom, above the keyboard; gone at peek).
  *
  * It is a COMPONENT, not a wiring: it knows nothing of what opens it. The app owns `state` and sets it from whatever it
  * likes — a button, a route, a timer: `<Btn onClick={() => setSheet('full')}>` … `<Sheet state={sheet} onStateChange={setSheet}>`.
@@ -64,7 +63,7 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         was.current = live;
         if (!rose)
             return;
-        const cancel = focusWhenActive(ref.current, { scope: ':scope > .sheet__body', fallback: () => (from === 'away' ? handleRef.current : null) });
+        const cancel = focusWhenActive(ref.current, { scope: ':scope > .body', fallback: () => (from === 'away' ? handleRef.current : null) });
         return () => { if (!cancel())
             was.current = from; }; // cut short (StrictMode's trial run, or a new state mid-slide): the rise still counts from where it began
     }, [live]);
@@ -79,11 +78,11 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         const from = Math.max(list.indexOf(current), atLeast ? list.indexOf(atLeast) : -1, 0);
         const rect = el.getBoundingClientRect();
         const restTop = rect.top - slid(el);
-        const bodyTop = (el.querySelector(':scope > .sheet__body') ?? el).getBoundingClientRect().top - rect.top;
+        const bodyTop = (el.querySelector(':scope > .body') ?? el).getBoundingClientRect().top - rect.top;
         const box = el.parentElement.getBoundingClientRect(); // what clips it: the Step or the SheetStage
         const edge = Math.min(box.bottom, restTop + rect.height); // the sheet's own bottom edge at rest — above the box's on a stage that gave the keyboard its room
         const cut = Math.min(edge, visibleBottom());
-        const button = el.querySelector(':scope > .card__foot')?.firstElementChild; // the foot's button stands on that edge at every state: the control has to clear its strip too
+        const button = el.querySelector(':scope > .foot')?.firstElementChild; // the foot's button stands on that edge at every state: the control has to clear its strip too
         const need = control.getBoundingClientRect().height + (button ? edge - button.getBoundingClientRect().top : 0);
         let to = list[list.length - 1];
         for (let i = from; i < list.length; i++)
@@ -121,7 +120,7 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         onFocus?.(e);
         if (current !== 'peek' || e.target.closest('.sheet__handle'))
             return;
-        const body = ref.current?.querySelector(':scope > .sheet__body');
+        const body = ref.current?.querySelector(':scope > .body');
         if (body)
             body.scrollTop = 0; // the browser's own reveal scrolled it against the peek strip: start over
         reveal(e.target, 'focus', home.current);

package/dist/sheets/SheetStack.d.ts

@@ -27,9 +27,9 @@ export interface SheetStackProps extends ComponentProps<'div'> {
 /**
  * SheetStack — the MENU: sheets stacked like paper at the middle of the home screen, every one a main section.
  * Children are Cards, direct children only, at most five: first = the back of the stack, last = the front (open) sheet.
- * Every sheet is the stack's full height; a peek is the strip the next sheet doesn't cover. A stack head is a CardHead
- * with CHILDREN, in this order: `<StackBack />` (tap mode), `<Text level="h2" caps>Shopping</Text>`, an `<IconRow>` of Icons —
- * never the `heading` prop (a stack head is back · h2 · tabs on ONE line — StackSheet builds it). Put it last in a `Screen fill`, it bleeds
+ * Every sheet is the stack's full height; a peek is the strip the next sheet doesn't cover. A stack head is a Head
+ * with CHILDREN, in this order: `<StackBack />` (tap mode), the title (`<Words title="Shopping" />`, or a bare `<Text level="h2" caps>`), an `<IconRow>` of Icons —
+ * a stack head is back · title · tabs on ONE line (StackSheet builds it). Put it last in a `Screen fill`, it bleeds
  * off the bottom. `closed`: nothing open on arrival — every head peeks at the bottom and the base above shows `base` (a home screen
  * with a picture over the menu); the `base` slot is rendered after the sheets, so it never takes a sheet's slot. An open sheet fills everything under the top bar,
  * or with `rise="flood"` the whole screen, covering the bar. This is the sheet STACK; a single bottom sheet is `Sheet`.

package/dist/sheets/SheetStack.js

@@ -18,7 +18,7 @@ function measureRests(stack) {
     return {
         height: box.height,
         strips: cards.map((c, i) => {
-            const head = c.querySelector(':scope > .card__head')?.getBoundingClientRect();
+            const head = c.querySelector(':scope > .head')?.getBoundingClientRect();
             const own = head ? head.bottom - box.top + (head.top - box.top - tops[i]) : tops[i];
             return { top: tops[i], end: i < cards.length - 1 ? tops[i + 1] : own };
         }),
@@ -57,9 +57,9 @@ function stamp(child, place) {
 /**
  * SheetStack — the MENU: sheets stacked like paper at the middle of the home screen, every one a main section.
  * Children are Cards, direct children only, at most five: first = the back of the stack, last = the front (open) sheet.
- * Every sheet is the stack's full height; a peek is the strip the next sheet doesn't cover. A stack head is a CardHead
- * with CHILDREN, in this order: `<StackBack />` (tap mode), `<Text level="h2" caps>Shopping</Text>`, an `<IconRow>` of Icons —
- * never the `heading` prop (a stack head is back · h2 · tabs on ONE line — StackSheet builds it). Put it last in a `Screen fill`, it bleeds
+ * Every sheet is the stack's full height; a peek is the strip the next sheet doesn't cover. A stack head is a Head
+ * with CHILDREN, in this order: `<StackBack />` (tap mode), the title (`<Words title="Shopping" />`, or a bare `<Text level="h2" caps>`), an `<IconRow>` of Icons —
+ * a stack head is back · title · tabs on ONE line (StackSheet builds it). Put it last in a `Screen fill`, it bleeds
  * off the bottom. `closed`: nothing open on arrival — every head peeks at the bottom and the base above shows `base` (a home screen
  * with a picture over the menu); the `base` slot is rendered after the sheets, so it never takes a sheet's slot. An open sheet fills everything under the top bar,
  * or with `rise="flood"` the whole screen, covering the bar. This is the sheet STACK; a single bottom sheet is `Sheet`.

package/dist/sheets/SheetSteps.d.ts

@@ -29,7 +29,7 @@ export interface SheetStepsProps extends ComponentProps<'div'> {
  * SheetSteps — one task taken in steps INSIDE one sheet (phone · code · PIN · PIN again · face · notices). The done steps pile up
  * on top, each one line (title · summary · ✓); the current step is open under them, its form at the form's own spacing; the next
  * steps wait below as their titles. A thin rule over every step. The last step's own action sends, or a `finish` stands under the
- * steps on the last one. Goes in a `SheetBody`.
+ * steps on the last one. Goes in a Sheet's `Body`.
  * The sheet may be dragged down to peek and back — the body keeps where it was scrolled.
  */
 export declare function SheetSteps({ at, reached, defaultAt, onAtChange, reversible, numbered, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }: SheetStepsProps): import("react").JSX.Element;

package/dist/sheets/SheetSteps.js

@@ -19,7 +19,7 @@ const StepCtx = createContext(null);
  * SheetSteps — one task taken in steps INSIDE one sheet (phone · code · PIN · PIN again · face · notices). The done steps pile up
  * on top, each one line (title · summary · ✓); the current step is open under them, its form at the form's own spacing; the next
  * steps wait below as their titles. A thin rule over every step. The last step's own action sends, or a `finish` stands under the
- * steps on the last one. Goes in a `SheetBody`.
+ * steps on the last one. Goes in a Sheet's `Body`.
  * The sheet may be dragged down to peek and back — the body keeps where it was scrolled.
  */
 export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible = false, numbered = false, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }) {
@@ -115,7 +115,7 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
         if (!typing(e.target) || performance.now() < moving.current)
             return; // the old step's field losing the cursor to the new one
         glideNow();
-        const body = ref.current?.closest('.sheet__body');
+        const body = ref.current?.closest('.body');
         setTimeout(() => { if (!typing(document.activeElement) && body)
             body.scrollTo({ top: 0 }); }, 0); // Tab to the next field keeps it up
     };

package/dist/sheets/StackBack.d.ts

@@ -6,6 +6,6 @@ export interface StackBackProps extends ComponentProps<'button'> {
      *  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.
+/** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's Head. 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, end, className, ...rest }: StackBackProps): import("react").JSX.Element;

package/dist/sheets/StackBack.js

@@ -3,7 +3,7 @@ import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { IconBtn } from '../actions/IconBtn.js';
 import { word } from '../words.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.
+/** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's Head. 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 = word('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.js

@@ -4,11 +4,11 @@ import { useControlled, watchSize } from '../state.js';
 import { cx } from '../cx.js';
 import { Card } from '../cards/Card.js';
 import { IconBtn } from '../actions/IconBtn.js';
-import { CardHead } from '../cards/CardHead.js';
-import { CardFoot } from '../cards/CardFoot.js';
-import { SheetBody } from './SheetBody.js';
+import { Head } from '../parts/Head.js';
+import { Words } from '../parts/Words.js';
+import { Foot } from '../parts/Foot.js';
+import { Body } from '../parts/Body.js';
 import { StackBack } from './StackBack.js';
-import { Text } from '../type/Text.js';
 import { Icon } from '../type/Icon.js';
 import { Badge } from '../numbers/Badge.js';
 import { word } from '../words.js';
@@ -24,15 +24,15 @@ export function StackSheet({ title, tone, paper, icon, tabs, tab: tabProp, defau
     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 / --_run, the Sheet's measurer
-    const titleRef = useRef(null);
+    const headRef = useRef(null);
     const [long, setLong] = useState(false);
     useEffect(() => {
-        const h = titleRef.current, run = h?.firstElementChild;
+        const h = headRef.current?.querySelector(':scope > .words__title'), run = h?.firstElementChild;
         if (!h || !run)
             return;
         const measure = () => setLong(runOver(h, run));
         measure();
         return watchSize([h, run], measure);
     }, [title]);
-    return (_jsxs(Card, { stack: stack, tone: tone, paper: paper, className: cx('stack-sheet', className), ...rest, children: [_jsxs(CardHead, { children: [backAt === 'start' && _jsx(StackBack, { label: backLabel }), _jsx(Text, { level: "h2", ref: titleRef, className: cx('stack-sheet__title', long && 'is-long'), 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 })] }));
+    return (_jsxs(Card, { stack: stack, tone: tone, paper: paper, className: cx('stack-sheet', className), ...rest, children: [_jsxs(Head, { ref: headRef, long: long, children: [backAt === 'start' && _jsx(StackBack, { label: backLabel }), _jsx(Words, { title: _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(Body, { role: tabs?.length ? 'tabpanel' : undefined, children: children }), foot != null && _jsx(Foot, { children: foot })] }));
 }

package/dist/sheets/sheetMeasure.js

@@ -23,7 +23,7 @@ export const stopsOf = (el) => {
    22-base type scale). Removed when the head fits the floor again, so the CSS number is the one in force. */
 export function usePeekStrip(ref) {
     useEffect(() => {
-        const el = ref.current, box = el?.parentElement, head = el?.querySelector(':scope > .card__head, :scope > .sheet__head');
+        const el = ref.current, box = el?.parentElement, head = el?.querySelector(':scope > .head');
         if (!el || !box || !head)
             return;
         const publish = () => {
@@ -53,7 +53,7 @@ export function runOver(line, words = line) {
 /* the Sheet's title: the app's own heading, measured whole (sheet.css runs it with text-indent) */
 export function useTitleRun(ref, onLong) {
     useEffect(() => {
-        const el = ref.current, title = el?.querySelector(':scope > .card__head > :is(h1, h2, h3):first-child, :scope > .sheet__head .sheet__title');
+        const el = ref.current, title = el?.querySelector(':scope > .head > :is(.words__title, :is(h1, h2, h3):first-child)');
         if (!el || !title)
             return;
         let was = false;
@@ -75,7 +75,7 @@ export function useTitleRun(ref, onLong) {
    sheet measures its foot's rows and publishes --sheet-foot-h; the strip, its ground and the body's stop all read it. */
 export function useFootRoom(ref) {
     useEffect(() => {
-        const el = ref.current, foot = el?.querySelector(':scope > .card__foot');
+        const el = ref.current, foot = el?.querySelector(':scope > .foot');
         if (!el || !foot) {
             el?.style.removeProperty('--sheet-foot-h');
             return;