@usableapp/cardds 0.7.105 → 0.7.107

package/dist/forms/Field.d.ts

@@ -38,7 +38,7 @@ export interface FieldProps extends Omit<ComponentProps<'input'>, 'className' |
 export declare function applyMask(v: string, mask: string): string;
 /**
  * Field — the flat outlined input, and where a form field goes is the SHEET: the paper the member fills in, never a Card (Lh 2026-10-18).
- * It stands on a Sheet's `SheetBody`, in a `SheetStep`, or on a stack sheet, 1–3 per step; a card is for reading and pressing buttons
+ * It stands on a Sheet's `Body`, in a `SheetStep`, or on a stack sheet, 1–3 per step; a card is for reading and pressing buttons
  * (`cardds check` rule `field-in-card` flags a Field, or any control the member fills or picks, inside a `<Card>`).
  * The LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
  * Variation `rows={n}`: several lines in the same frame, for what the member writes in words (the request and its reason on the ask

package/dist/forms/Field.js

@@ -21,7 +21,7 @@ export function applyMask(v, mask) {
 }
 /**
  * Field — the flat outlined input, and where a form field goes is the SHEET: the paper the member fills in, never a Card (Lh 2026-10-18).
- * It stands on a Sheet's `SheetBody`, in a `SheetStep`, or on a stack sheet, 1–3 per step; a card is for reading and pressing buttons
+ * It stands on a Sheet's `Body`, in a `SheetStep`, or on a stack sheet, 1–3 per step; a card is for reading and pressing buttons
  * (`cardds check` rule `field-in-card` flags a Field, or any control the member fills or picks, inside a `<Card>`).
  * The LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
  * Variation `rows={n}`: several lines in the same frame, for what the member writes in words (the request and its reason on the ask

package/dist/index.d.ts

@@ -23,17 +23,12 @@ export * from './scaffold/LayerHistory.js';
 export * from './cards/Card.js';
 export * from './cards/cardGrounds.js';
 export * from './cards/inkGrounds.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';
 export * from './sheets/StackBack.js';
 export * from './sheets/Sheet.js';
-export * from './sheets/SheetHead.js';
-export * from './sheets/SheetBody.js';
 export * from './sheets/SheetStage.js';
 export * from './sheets/Step.js';
 export * from './sheets/SheetSteps.js';
@@ -72,6 +67,12 @@ export * from './numbers/Bars.js';
 export * from './people/Avatar.js';
 export * from './people/AvatarPick.js';
 export * from './lists/Row.js';
+export * from './parts/Head.js';
+export * from './parts/Lead.js';
+export * from './parts/Words.js';
+export * from './parts/Body.js';
+export * from './parts/Foot.js';
+export * from './parts/End.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';

package/dist/index.js

@@ -27,17 +27,12 @@ export * from './scaffold/LayerHistory.js';
 export * from './cards/Card.js';
 export * from './cards/cardGrounds.js';
 export * from './cards/inkGrounds.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';
 export * from './sheets/StackBack.js';
 export * from './sheets/Sheet.js';
-export * from './sheets/SheetHead.js';
-export * from './sheets/SheetBody.js';
 export * from './sheets/SheetStage.js';
 export * from './sheets/Step.js';
 export * from './sheets/SheetSteps.js';
@@ -76,6 +71,12 @@ export * from './numbers/Bars.js';
 export * from './people/Avatar.js';
 export * from './people/AvatarPick.js';
 export * from './lists/Row.js';
+export * from './parts/Head.js';
+export * from './parts/Lead.js';
+export * from './parts/Words.js';
+export * from './parts/Body.js';
+export * from './parts/Foot.js';
+export * from './parts/End.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';

package/dist/lists/Row.d.ts

@@ -1,29 +1,12 @@
 import { type ComponentProps, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon.js';
 export interface RowProps extends Omit<ComponentProps<'div'>, 'title'> {
-    /** the leading visual: an Avatar, an AvatarStack, an Icon */
-    lead?: ReactNode;
-    /** an icon in the outlined 48px lead box (menu rows) */
-    leadIcon?: IconName;
-    /** the title line */
-    title?: ReactNode;
-    /** the caption under it (may hold a Dot) */
-    meta?: ReactNode;
-    /** custom body content instead of (or under) title/meta — a Wave for a voice note */
-    body?: ReactNode;
-    /** the trailing control: an IconBtn, a Chip, a Check, a Toggle, a caption */
-    end?: ReactNode;
-    /** a trailing value, right-aligned (title type) */
-    endValue?: ReactNode;
-    /** the muted caption under `endValue` */
-    endCaption?: ReactNode;
     /** menu row: more air, a bigger title */
     lg?: boolean;
-    /** a finished checklist item: muted words, a filled tick at the end, no longer a tap target (aria-disabled) — pass no `end` */
+    /** a finished checklist item: muted words, a filled tick at the end, no longer a tap target (aria-disabled) — give it no control at the end */
     done?: boolean;
     /** div (default), a link, a label wrapping a Check/Toggle, li */
     as?: 'div' | 'a' | 'label' | 'li';
-    /** with `as="label"`: the `id` of the control the row presses (its `Check`). Needed when the `end` holds a button BEFORE the check (a picked row's own move, "open the map"): a label presses the first control inside it, so without this a touch on the row's words would press that button */
+    /** with `as="label"`: the `id` of the control the row presses (its `Check`). Needed when a button stands BEFORE the check (a picked row's own move, "open the map"): a label presses the first control inside it, so without this a touch on the row's words would press that button */
     htmlFor?: string;
     /** makes the row a link (an `a`); not with `more`, whose row is a summary */
     href?: string;
@@ -37,13 +20,15 @@ export interface RowProps extends Omit<ComponentProps<'div'>, 'title'> {
     onOpenChange?: (open: boolean) => void;
 }
 /**
- * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
+ * Row — a frameless row inside a card: lead · words · end, its children in that order. 48px+ tall, a tap target.
+ * The lead is a `Lead` box, or a bare Avatar / AvatarStack; the words are a `Words`; the end is an `End` (a value and its caption)
+ * or a bare control (two side by side).
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
  * `done` is the checklist's finished line: ticked, muted, not tappable any more.
  * `more` makes it expand: the row is the summary of a `<details class="row-expand">`, `more` comes out under it; `open` + `onOpenChange`, or `defaultOpen`.
- * An `end` chevron turns when it is open — the app fetches whatever `more` lists; the row only shows it.
+ * A chevron at the end turns when it is open — the app fetches whatever `more` lists; the row only shows it.
  */
-export declare function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }: RowProps): import("react").JSX.Element;
+export declare function Row({ lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }: RowProps): import("react").JSX.Element;
 export interface RowsProps extends ComponentProps<'div'> {
     /** the group's name, above its rows (Today · Tomorrow · Later): a long list is GROUPED, not spaced out — several Rows one after another.
      *  Words = the small label; an ELEMENT (`<Text level="title" as="h3">`) is used as the heading itself — the group is labelled by it. */

package/dist/lists/Row.js

@@ -4,16 +4,18 @@ import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { glide, reducedMotion, setRefs, stopMoves, useDisclosure } from '../state.js';
 /**
- * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
+ * Row — a frameless row inside a card: lead · words · end, its children in that order. 48px+ tall, a tap target.
+ * The lead is a `Lead` box, or a bare Avatar / AvatarStack; the words are a `Words`; the end is an `End` (a value and its caption)
+ * or a bare control (two side by side).
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
  * `done` is the checklist's finished line: ticked, muted, not tappable any more.
  * `more` makes it expand: the row is the summary of a `<details class="row-expand">`, `more` comes out under it; `open` + `onOpenChange`, or `defaultOpen`.
- * An `end` chevron turns when it is open — the app fetches whatever `more` lists; the row only shows it.
+ * A chevron at the end turns when it is open — the app fetches whatever `more` lists; the row only shows it.
  */
-export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }) {
+export function Row({ lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }) {
     const disclosure = useDisclosure(open, defaultOpen, onOpenChange);
     const el = more !== undefined ? 'summary' : as ?? (href ? 'a' : 'div');
-    const row = createElement(el, { href, className: cx('row', lg && 'row--lg', done && 'row--done', className), 'aria-disabled': done || undefined, ...(more === undefined ? rest : {}) }, leadIcon ? _jsx("span", { className: "row__lead", children: _jsx(Icon, { name: leadIcon }) }) : lead, (title != null || meta != null || body != null) && (_jsxs("div", { className: "row__body", children: [title != null && _jsx("span", { className: "row__title", children: title }), meta != null && _jsx("span", { className: "row__meta", children: meta }), body] })), children, (endValue != null || endCaption != null) && (_jsxs("span", { className: "row__end", children: [endValue != null && _jsx("span", { className: "t-title", children: endValue }), endCaption != null && _jsx("span", { className: "t-caption t-muted", children: endCaption })] })), end, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
+    const row = createElement(el, { href, className: cx('row', lg && 'row--lg', done && 'row--done', className), 'aria-disabled': done || undefined, ...(more === undefined ? rest : {}) }, children, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
     if (more === undefined)
         return row;
     return (_jsxs("details", { className: "row-expand", ...rest, ...disclosure, children: [row, _jsx("div", { className: "row-expand__more", children: more })] }));

package/dist/media/MapArea.d.ts

@@ -1,8 +1,11 @@
 import type { ComponentProps, ReactNode, Ref } from 'react';
 export interface MapAreaProps extends ComponentProps<'div'> {
     /** IN FLOW instead of behind a stage: the map is a box in a card or a sheet's body, the ring and the hint in its own box.
-     *  The only thing in a SheetBody, it fills the body: the sheet's head stays on top, its foot under it */
+     *  The only thing in a sheet's Body, it fills the body: the sheet's head stays on top, its foot under it */
     inline?: boolean;
+    /** with `inline`: EDGE TO EDGE of what holds it, the sheet's or the card's inset given back, no corner — the map under a step's
+     *  controls (Lh 2026-10-19, the ask sheet's จุดนัด step). In a `SheetStep` it reaches the sheet's edges; ignored without `inline` */
+    bleed?: boolean;
     /** the words over the map, under the bar's line */
     hint?: ReactNode;
     /** the tile provider's credit, bottom right (OSM requires it) — a caption, never the engine's own control */
@@ -22,11 +25,12 @@ export interface MapAreaProps extends ComponentProps<'div'> {
 /**
  * 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.
  * Variation `mark="pin"`: for a meeting place the centre is an exact point, so a clear pin stands there instead of the ring,
  * its tip on the point the ring's centre would be (the engine reads the pin's bottom-centre). The ring stays for a rough area.
+ * Variation `bleed` (with `inline`): the map edge to edge of what holds it, no corner, for the map under a step's controls.
  */
-export declare function MapArea({ inline, hint, credit, mark, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;
+export declare function MapArea({ inline, bleed, hint, credit, mark, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;

package/dist/media/MapArea.js

@@ -4,15 +4,16 @@ 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.
  * Variation `mark="pin"`: for a meeting place the centre is an exact point, so a clear pin stands there instead of the ring,
  * its tip on the point the ring's centre would be (the engine reads the pin's bottom-centre). The ring stays for a rough area.
+ * Variation `bleed` (with `inline`): the map edge to edge of what holds it, no corner, for the map under a step's controls.
  */
-export function MapArea({ inline, hint, credit, mark = 'ring', ringLabel = mark === 'pin' ? 'จุดนัด' : 'ย่านของคุณโดยประมาณ', ringRef, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('map', inline && 'map--inline', className), ...rest, children: [children, mark === 'pin'
+export function MapArea({ inline, bleed, hint, credit, mark = 'ring', ringLabel = mark === 'pin' ? 'จุดนัด' : 'ย่านของคุณโดยประมาณ', ringRef, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('map', inline && 'map--inline', inline && bleed && 'map--bleed', className), ...rest, children: [children, mark === 'pin'
                 ? _jsx("span", { ref: ringRef, className: "map__pin", role: "img", "aria-label": ringLabel, children: _jsx(Icon, { name: "map-pin" }) })
                 : _jsx("span", { ref: ringRef, className: "map__ring", role: "img", "aria-label": ringLabel }), hint != null && _jsx("span", { className: "map__hint", children: hint }), credit != null && _jsx("span", { className: "map__credit", children: credit })] }));
 }

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/numbers/Spinner.d.ts

@@ -8,6 +8,6 @@ export interface SpinnerProps extends Omit<ComponentProps<'span'>, 'children'> {
     children?: ReactNode;
 }
 /** Spinner — "working on it": a ring that turns, alone or with a line of words beside it. For a wait of unknown length — a known
- *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. In a row's `end`, a card, a
+ *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. At a row's end, a card, a
  *  sheet's body, an `EmptyState`'s `icon`; a whole SCREEN that is not known yet shows nothing instead (`Screen ready`). */
 export declare function Spinner({ size, label, className, children, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/numbers/Spinner.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 /** Spinner — "working on it": a ring that turns, alone or with a line of words beside it. For a wait of unknown length — a known
- *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. In a row's `end`, a card, a
+ *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. At a row's end, a card, a
  *  sheet's body, an `EmptyState`'s `icon`; a whole SCREEN that is not known yet shows nothing instead (`Screen ready`). */
 export function Spinner({ size = 'md', label, className, children, ...rest }) {
     return (_jsxs("span", { className: cx('spinner', className), role: "status", "aria-label": children == null ? label : undefined, ...rest, children: [_jsx(Icon, { name: "loader-circle", size: size }), 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] }));