@usableapp/cardds 0.7.105 → 0.7.107

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;

package/dist/sheets/sheetStepsPile.js

@@ -13,7 +13,7 @@ export function usePile(ref, moving) {
        above the open step, and half of the one before — older ones go up out of sight, one row at a time, so what was done never seems to vanish (Lh
        2026-09-24: moving the pile further startled; with two rows or fewer nothing moves) */
     const settle = () => {
-        const list = ref.current, body = list?.closest('.sheet__body'), now = list?.querySelector('.sheet-step--now');
+        const list = ref.current, body = list?.closest('.body'), now = list?.querySelector('.sheet-step--now');
         if (!list || !body || !now)
             return;
         const above = [];
@@ -43,7 +43,7 @@ export function usePile(ref, moving) {
        For a short while after a field in the steps gains or loses the focus, every such jump is played as a quick slide (FLIP: the steps
        are set back by the jump, then eased to rest) so the eye can follow the pile moving out of the way and back. */
     useEffect(() => {
-        const el = ref.current, body = el?.closest('.sheet__body');
+        const el = ref.current, body = el?.closest('.body');
         if (!el || !body)
             return;
         last.current = body.scrollTop;

package/dist/sheets/stackCard.js

@@ -38,13 +38,13 @@ const readFrame = (el) => { el.getBoundingClientRect(); };
 const along = (dir, startY, y) => (dir === 'down' ? Math.max(0, y - startY) : Math.max(0, startY - y));
 /** the head the sheet owns: the card's own child. A card standing in the sheet's body has a head too, and it is that card's */
 export const ownHead = (card, target) => {
-    const head = target.closest('.card__head');
+    const head = target.closest('.head');
     return head?.parentElement === card ? head : null;
 };
 const pullsHead = (target, head) => {
     if (!(target instanceof Element))
         return false;
-    return target === head || !!target.closest('.sheet-stack__back') || !!target.closest('.card__head > :is(h1, h2, h3)');
+    return target === head || !!target.closest('.sheet-stack__back') || !!target.closest('.head > :is(h1, h2, h3)');
 };
 /* once a finger is down the DOCUMENT hears it, not the head or the body it started on: the finger leaves them while it drags.
    One set of move / up / cancel at a time; `stop` takes the set off, and is safe to call with none on */
@@ -160,7 +160,7 @@ export function useStackCard(ref, place, swallow) {
     useEffect(() => {
         if (!place?.open || !ref.current)
             return;
-        const cancel = focusWhenActive(ref.current, { scope: ':scope > .sheet__body' });
+        const cancel = focusWhenActive(ref.current, { scope: ':scope > .body' });
         return () => { cancel(); };
     }, [place?.open, ref]);
     /* open: a pull down on the head folds it; a pull down in the content, already at the top, asks for a reload */
@@ -170,8 +170,8 @@ export function useStackCard(ref, place, swallow) {
         if (!card || !here?.open)
             return;
         const stack = card.closest('.sheet-stack');
-        const head = card.querySelector(':scope > .card__head');
-        const scroller = card.querySelector(':scope > .sheet__body') ?? card;
+        const head = card.querySelector(':scope > .head');
+        const scroller = card.querySelector(':scope > .body') ?? card;
         const doc = docPointer();
         const primary = (e) => e.isPrimary && e.button === 0;
         const onHeadDown = (e) => {
@@ -298,7 +298,7 @@ export function useStackCard(ref, place, swallow) {
         if (!card || !here || here.open || here.before || here.after)
             return;
         const stack = card.closest('.sheet-stack');
-        const head = card.querySelector(':scope > .card__head');
+        const head = card.querySelector(':scope > .head');
         if (!head || !stack)
             return;
         const doc = docPointer();

package/dist/templates/CallSheet.js

@@ -5,9 +5,10 @@ import { Screen } from '../scaffold/Screen.js';
 import { Step } from '../sheets/Step.js';
 import { Page, CtaPack } from '../scaffold/Page.js';
 import { Sheet } from '../sheets/Sheet.js';
-import { SheetBody } from '../sheets/SheetBody.js';
-import { CardHead } from '../cards/CardHead.js';
-import { CardFoot } from '../cards/CardFoot.js';
+import { Body } from '../parts/Body.js';
+import { Head } from '../parts/Head.js';
+import { Words } from '../parts/Words.js';
+import { Foot } from '../parts/Foot.js';
 import { Text } from '../type/Text.js';
 import { Btn } from '../actions/Btn.js';
 const index = (o) => (o === true ? 0 : typeof o === 'number' ? o : null);
@@ -29,9 +30,9 @@ export function CallSheet({ media, heading, body, action, sheet, ways, open: ope
         if (was !== null)
             setLeaving(was);
     }
-    return (_jsxs(Screen, { fill: true, ...rest, children: [_jsxs(Step, { children: [_jsxs(Page, { children: [media, _jsx(CardHead, { level: "h1", heading: heading }), typeof body === 'string' ? _jsx(Text, { level: "body", children: body }) : body, _jsx(CtaPack, { children: list.map((w, i) => w.action == null ? null : (_jsx(Btn, { primary: i === first, quiet: i !== first, "aria-expanded": on === i, onClick: () => { setAt('full'); set(i); }, children: w.action }, i))) })] }), list.map(({ sheet: sh }, i) => (_jsxs(Sheet, { state: on === i ? at : 'away', onStateChange: (s) => { if (s === 'away')
+    return (_jsxs(Screen, { fill: true, ...rest, children: [_jsxs(Step, { children: [_jsxs(Page, { children: [media, _jsx(Head, { children: _jsx(Words, { title: heading, level: "h1" }) }), typeof body === 'string' ? _jsx(Text, { level: "body", children: body }) : body, _jsx(CtaPack, { children: list.map((w, i) => w.action == null ? null : (_jsx(Btn, { primary: i === first, quiet: i !== first, "aria-expanded": on === i, onClick: () => { setAt('full'); set(i); }, children: w.action }, i))) })] }), list.map(({ sheet: sh }, i) => (_jsxs(Sheet, { state: on === i ? at : 'away', onStateChange: (s) => { if (s === 'away')
                             set(null);
                         else
                             setAt(s); }, onSettled: (s) => { if (s === 'away' && leaving === i)
-                            setLeaving(null); }, states: states, handle: sh.handle ?? handle, children: [_jsx(CardHead, { heading: sh.title }), _jsx(SheetBody, { children: on === i || leaving === i ? (typeof sh.body === 'function' ? sh.body() : sh.body) : null }), (sh.foot != null || sh.footLink != null) && _jsx(CardFoot, { link: sh.footLink, children: sh.foot })] }, i)))] }), children] }));
+                            setLeaving(null); }, states: states, handle: sh.handle ?? handle, children: [_jsx(Head, { children: _jsx(Words, { title: sh.title }) }), _jsx(Body, { children: on === i || leaving === i ? (typeof sh.body === 'function' ? sh.body() : sh.body) : null }), (sh.foot != null || sh.footLink != null) && _jsx(Foot, { link: sh.footLink, children: sh.foot })] }, i)))] }), children] }));
 }

package/dist/templates/Walkthrough.js

@@ -7,7 +7,8 @@ import { Page } from '../scaffold/Page.js';
 import { Pages, slideTo } from '../scaffold/Centre.js';
 import { Pager } from '../scaffold/Pager.js';
 import { ActionBar, ActionBarTier } from '../scaffold/ActionBar.js';
-import { CardHead } from '../cards/CardHead.js';
+import { Head } from '../parts/Head.js';
+import { Words } from '../parts/Words.js';
 import { Text } from '../type/Text.js';
 import { IconBtn } from '../actions/IconBtn.js';
 import { word } from '../words.js';
@@ -51,5 +52,5 @@ export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta,
     const pager = (_jsxs(_Fragment, { children: [_jsx(IconBtn, { icon: "arrow-left", label: backLabel, disabled: at === 0, onClick: () => go(at - 1) }), _jsx(IconBtn, { invert: true, icon: "arrow-right", label: nextLabel, disabled: at === count - 1, onClick: () => go(at + 1) })] }));
     const dots = count > 1 ? _jsx(Pager, { at: at + 1, of: count }) : null;
     const bottom = dots || controls.length || ctaLink != null ? (_jsxs(ActionBar, { variant: "tiers", children: [dots, controls.map((c, i) => _jsx(ActionBarTier, { children: c }, i)), _jsx(ActionBarTier, { pager: true, children: custom ? row : pager }), ctaLink != null && _jsx(ActionBarTier, { className: "action-bar__tier--link", children: ctaLink })] })) : (_jsx(ActionBar, { variant: "pager", children: custom ? row : pager }));
-    return (_jsxs(Screen, { fill: true, bottom: bottom, ...rest, children: [_jsx(Step, { ref: step, children: _jsx(Pages, { ...swipe, children: pages.map((p, i) => (_jsxs(Page, { "aria-current": i === at ? 'step' : undefined, inert: i !== at || undefined, children: [p.media, _jsx(CardHead, { level: "h1", heading: p.heading }), typeof p.body === 'string' ? _jsx(Text, { level: "body", children: p.body }) : p.body] }, i))) }) }), children] }));
+    return (_jsxs(Screen, { fill: true, bottom: bottom, ...rest, children: [_jsx(Step, { ref: step, children: _jsx(Pages, { ...swipe, children: pages.map((p, i) => (_jsxs(Page, { "aria-current": i === at ? 'step' : undefined, inert: i !== at || undefined, children: [p.media, _jsx(Head, { children: _jsx(Words, { title: p.heading, level: "h1" }) }), typeof p.body === 'string' ? _jsx(Text, { level: "body", children: p.body }) : p.body] }, i))) }) }), children] }));
 }

package/docs/reference.md

@@ -42,7 +42,7 @@ npm test             # Playwright: the tokens and the step/sheet/centre geometry
 ```
 
 ```tsx
-import { Screen, TopBar, Step, Page, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from '@usableapp/cardds';
+import { Screen, TopBar, Step, Page, Sheet, Head, Words, Body, Field, Pin, ActionBar, Btn } from '@usableapp/cardds';
 import '@usableapp/cardds/dist/cardds.css';
 import './theme.css';   // the project's own look, after the system's — see "A project's theme"
 ```
@@ -95,7 +95,7 @@ npm i @usableapp/cardds
 ```
 
 ```tsx
-import { Card, CardHead, Btn } from '@usableapp/cardds';
+import { Card, Head, Words, Btn } from '@usableapp/cardds';
 import '@usableapp/cardds/dist/cardds.css';   // the CSS, fonts resolve from the package
 import './theme.css';                          // the project's look, after cardds.css
 ```
@@ -177,7 +177,7 @@ A scaffolded tsx may import `./_story` or `./_*Art`: story glue, not in the pack
 ### React adapter — how a component is written
 
 `src/<group>/<Name>.tsx`, one export per class family; sub-parts are their own
-components (`CardHead`, `KvRow`, `TrackStep`, `SheetBody`). A component
+components (`Head`, `KvRow`, `TrackStep`, `Body`). A component
 chooses classes from props (`tone`, `state`, `primary`, `sm`…) and lays the
 contract's children in order. A component that has STATE is controlled like an input
 (`state` / `open` / `value` / `flipped` / `selected` + its `on…`, or a `default…` twin), keeps its own behaviour
@@ -188,6 +188,37 @@ wrapper follows. **Claude Design** builds with these components through
 stories, the conventions the design agent reads) — a new component needs a
 preview story there.
 
+### Outer and inner — a paper holds rows
+
+An outer is the paper and how it behaves: a `Card`, a `Sheet`, a stack sheet (a `Card` in a `SheetStack`), a `Modal`.
+Inside every outer stand the same rows, top to bottom: a `Head` (what this is, and the one thing beside it), a `Body`
+(what the member reads or fills in, the part of a sheet that scrolls) and a `Foot` (what the member can do next).
+A line inside a head or a row is made of `Lead` · `Words` · `End`, the same parts a `Row` and a `Card row` are made of.
+To change the behaviour, change the outer and keep what is inside: the same children read the same in a card and a sheet.
+An outer governs an inner only through the inner's knobs (`--head-*`, `--body-*`, `--foot-*`, `--words-*`) or a rule in
+`css/parts.css` that names both (`.sheet > .foot`), never through a second component (Lh 2026-10-21).
+
+```tsx
+<Card>
+  <Head><Words title="Sunday market" meta="Saturday · 07:00" /><Chip>3 new</Chip></Head>
+  <Text level="body">Neighbours trade what they grew.</Text>
+  <Foot><Btn primary>Join</Btn></Foot>
+</Card>
+
+<Sheet defaultState="half">
+  <Head><Words title="Sunday market" meta="Saturday · 07:00" /><Chip>3 new</Chip></Head>
+  <Body><Text level="body">Neighbours trade what they grew.</Text></Body>
+  <Foot><Btn primary block>Join</Btn></Foot>
+</Sheet>
+```
+
+A card's content stands straight in it, between the head and the foot; a sheet's and a modal's content stands in its
+`Body`, the one part that scrolls (`cardds check` names a control written straight in a `Sheet` or a `Modal`). `ModalAsk`
+is one piece, the question and its answers. The templates take data and draw the parts themselves (`StackSheet title tabs foot`,
+`Home sheets`, `CallSheet`, `Walkthrough pages`). `cardds get Card` lists the parts a card holds; `cardds get Head` the outers it fits.
+A screen written on the retired names (`CardHead`, `SheetHead`, `SheetBody`, `ModalBody`, `CardFoot`, `RowLead`, `RowBody`, `RowEnd`,
+`CardThumb`, `CardBody`, `CardEnd`, `Card heading caption end level foot footLink footRound`) moves with `npx cardds codemod-parts <files>`.
+
 ## Sheet stack markup
 
 The sheet stack (`.sheet-stack`, `stack.css` — the menu, see *Anatomy*) is the
@@ -198,9 +229,9 @@ the card is the material, the sheet is what it is in the stack.
 ```html
 <div class="sheet-stack sheet-stack--tap">   <!-- drop --tap for a static stack -->
   <article class="card card--2">
-    <div class="card__head">
+    <div class="head">
       <button class="icon-btn icon-btn--sm sheet-stack__back" aria-label="Back">…</button>
-      <h2 class="t-h2 t-caps">Shopping</h2>
+      <h2 class="words__title t-h2 t-caps">Shopping</h2>
       <span class="icon-row">…</span>       <!-- optional trailing icons -->
     </div>
     …the sheet's own content…
@@ -279,7 +310,7 @@ of `Screen`:
   covers what is under it — on purpose, nothing is added to the content to make room. The keyboard lifts the layer (`--kb`).
 - **The bar is INSIDE the screen** — `bottom`, never a sibling after `</Screen>`, never pinned with a hand-set `position`.
   A `FloatBar` in `bottom` floats the same way.
-- **A screen with a `Sheet` has no bottom.** The sheet finishes on its own `CardFoot`; `Screen` warns once when both
+- **A screen with a `Sheet` has no bottom.** The sheet finishes on its own `Foot`; `Screen` warns once when both
   are there.
 - **Checked:** `validateScreen` (`scripts/validate.mjs`, run on every story and template by
   `tests/composition.spec.js`) fails a bar after `</Screen>` or a pinned bar, warns on a Sheet + ActionBar.
@@ -297,7 +328,7 @@ whose markup has rules, because the sheet's box is the step itself:
 <!-- reads: the words only -->
 <section class="step">
   <section class="page">
-    <div class="card__head"><h2 class="t-h2">…</h2></div>
+    <div class="head"><h2 class="words__title t-h2">…</h2></div>
     <p class="t-body">…</p>
   </section>
 </section>
@@ -308,12 +339,12 @@ whose markup has rules, because the sheet's box is the step itself:
   <section class="page">…the words…</section>
   <article class="card sheet sheet--half">
     <button class="sheet__handle" type="button" aria-label="ปรับความสูง"></button>
-    <div class="card__head"><h2 class="t-h2">…</h2><span class="chip">…</span></div>
-    <div class="sheet__body">
+    <div class="head"><h2 class="words__title t-h2">…</h2><span class="chip">…</span></div>
+    <div class="body">
       …cardds controls (.field / .pin / .composer / .rows + .check / .segment /
       .chip-grid), or small content cards (.card--sm)…
     </div>
-    <div class="card__foot"><button class="btn btn--primary btn--block">…the one button that finishes the sheet…</button></div>
+    <div class="foot"><button class="btn btn--primary btn--block">…the one button that finishes the sheet…</button></div>
   </article>
 </section>
 <!-- no .action-bar: a bar is the base's, never in front of a sheet -->
@@ -332,10 +363,10 @@ whose markup has rules, because the sheet's box is the step itself:
 - **`.page` first, `.sheet` last.** The block carries the step's words
   ON THE BASE — no frame, no area colour (it was a `.card` until 2026-09-16;
   Lh: a step reads like a page, not a card in a page). It keeps a card's
-  rhythm: a `.card__head`, `--card-gap` between things. The sheet is
-  **handle · head · body**: the handle, then a `.card__head` title row (that
+  rhythm: a `.head`, `--card-gap` between things. The sheet is
+  **handle · head · body**: the handle, then a `.head` title row (that
   row is what `peek` shows — heading left, the contextual thing right), then
-  `.sheet__body` with what the member acts on. The handle and the head are
+  a `.body` with what the member acts on. The handle and the head are
   pinned; the body is the one thing that scrolls, to the card's own edges. The
   handle is a line, or four dots (`mark="dots"`): both sit in the card's top
   padding, the same distance from the edge, so the title stays put. `refreshing`
@@ -367,7 +398,7 @@ whose markup has rules, because the sheet's box is the step itself:
   the button at half and 3q as it does at full.
 - **Layers: the base, the sheet over it, the top bar** (Lh 2026-09-20). The `.action-bar` belongs to the
   BASE — the move of a page of words (a pager bar, or one wide button). It is never in front of a sheet. A
-  screen with a sheet finishes ON the sheet: a `.card__foot`, the sheet's last child — ONE row, the page's
+  screen with a sheet finishes ON the sheet: a `.foot`, the sheet's last child — ONE row, the page's
   conclusion. The foot stands on the screen's bottom edge at half, 3q and full alike (a layer as tall as
   the sheet, slid up by the share the sheet slid down — `sheet.css`), and is gone at peek. Nothing inside
   the sheet's body commits on its own (a `Composer` there takes no `send`). This is how cardds's own screens are
@@ -415,7 +446,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 <div class="screen screen--fill">
   <header class="topbar"><h1 class="t-h1">ธนาคารเวลายินดีต้อนรับ</h1></header>
   <article class="card card--centre">
-    <div class="card__head"><div><h2 class="t-h2">ปรับขนาดตัวหนังสือ</h2></div></div>
+    <div class="head"><h2 class="words__title t-h2">ปรับขนาดตัวหนังสือ</h2></div>
     <p class="t-body">…</p>
   </article>
 </div>
@@ -495,19 +526,28 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   sheet**. Content normally comes in cards; static data (a blurb, a legal
   note, help steps) may sit on the base directly.
 - **A card is head · content · foot.**
-  - **Head** (`.card__head`): the heading on the left; hints, actions or a
-    more-menu — the contextual info — at the far right. With nothing at
-    the far right it runs all the way across. The heading wraps, no
-    squeeze, up to three lines and is cut there with an ellipsis (Lh
-    2026-10-21; `--card-head-title-lines`, default 3). A date
+  - **Head** (`.head`, the `Head` part): the first row, 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), chips, and an end: hints, actions or a more-menu — the
+    contextual info — at the far right (`IconBtn sm`, `Chip`, `Link`, `End`).
+    With nothing at the far right the title runs all the way across. The title
+    wraps, no squeeze, up to three lines and is cut there with an ellipsis (Lh
+    2026-10-21; `--head-title-lines`, default 3). A date
     (`JourneyBadge stretch`) beside it is as tall as the title block up to
-    its own three lines, at the head's top. The head is FLAT markup — heading, then an
-    optional caption as a span, then the far-right thing; no
-    wrapper element, no `<p>`: the head wraps, the caption takes the row
-    below (`order`), the gap tokens do the rest (Lh 2026-09-16).
+    its own three lines, at the head's top. The head is FLAT markup — the
+    title (`h2.words__title`, `h1` with `level="h1"`), then an optional meta
+    as a span (`.words__meta`), then the far-right thing; no
+    wrapper element, no `<p>`: `Words` in a `Head` writes its title and its
+    meta as the head's own children. The head wraps, the meta takes the row
+    below (`order`), the gap tokens do the rest (Lh 2026-09-16). The
+    title's type is the knob `--words-title-font` (default the level's own
+    face), which a stack sheet, a sheet and a page set for their heads. `top`
+    keeps a tall title's control at the top; `centre` is the stage sheet's
+    head, a round button · the title over its meta · a round button.
   - **Content**: whatever the card frames — rows, key-values, a gauge, a
     paragraph. Frameless, per rule 9.
-  - **Foot** (`.card__foot`): the card's action buttons on one line. One
+  - **Foot** (`.foot`): the card's action buttons on one line. One
     button takes the width; up to four share it in even parts; from three
     on they drop their side padding so the labels keep the room. A panel of
     up to four icon buttons (`IconBtnGroup`) takes the foot the same way; with
@@ -515,10 +555,10 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     as `Btn form` does — in a foot, a `Page`, a `Centre` or a `CtaPack` — and
     with `form labelled` its `label` is SHOWN as words at its left, the two
     centred as one line (Lh 2026-10-10).
-  - In React the head and the foot are the card's **slots**:
-    `<Card heading caption end foot footLink>` with the content as children —
-    the card writes the order (head first, foot last). A head of its own shape
-    is a `<CardHead>` child instead; never both (Lh 2026-09-27).
+  - In React the head is the card's first child, a `<Head>` (`<Head><Words title meta /><Chip>…</Chip></Head>`),
+    and the foot its last, a `<Foot>` (`<Foot link={<Link sm>…</Link>}><Btn primary>…</Btn></Foot>`, `round` for a few
+    big round buttons), the content between them. The card finds its `Head` and its `Foot` by their type, so a
+    component of your own that wraps one is not found (Lh 2026-10-21: one head, body and foot for a card, a sheet and a stack sheet).
   - **A card that goes on is pressed whole** (Lh 2026-10-09). A card whose ONLY
     control is its foot's button, or the end button of a row card, is pressed
     anywhere: a touch off the button runs that button's own action once, and the
@@ -566,7 +606,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   sheet.
 - **The sheet is the paper the member fills in** (Lh 2026-10-18). Every
   control the member fills in or picks stands on a sheet: a `Sheet`'s
-  `SheetBody`, a `SheetStep`, or a stack sheet. That is `Field`, `Composer`
+  `Body`, a `SheetStep`, or a stack sheet. That is `Field`, `Composer`
   and `ComposerArea`, `Pin`, `Dropdown`, `Slider`, `Toggle`, `Check`,
   `ChipPick`, `Calendar`, `DayStrip` and `Day`, `Picker`, `Mood`,
   `AvatarPick`, `FileBtn`, `AddRow`, `MapPick`, a `Tile pick` and a
@@ -705,8 +745,7 @@ it up. cardds draws the paper; the pictures, their words and which stamp a membe
   its third, 4:5, the gaps one `--screen-pad` both ways (`--stamp-book-fill-gap`), nothing at the row's sides; with `bare`
   at 375 a stamp is 103.67 × 129.58. A `false` or `null` child holds no place.
 - A stamp stands for a person in three more places. In a `Centre` — a `Stamp` or a `StampPlace` — it stands in the
-  middle and the words and link under it centre. In a card's head — `<Card heading={name} caption={greeting}
-  end={<Stamp bare …/>} foot={<Btn primary block>…</Btn>} />` — the words stand at the left and the stamp at the right,
+  middle and the words and link under it centre. In a card's head — `<Card foot={<Btn primary block>…</Btn>}><Head><Words title={name} meta={greeting} /><Stamp bare …/></Head></Card>` — the words stand at the left and the stamp at the right,
   beside both lines; the card's one button presses it whole. In an `AvatarStack` it is a head, the small size
   (`more="+9"` for the count).
 - **`StampOn`** — a stamp stuck on a surface. `at` is the stamp's middle as a share of the surface (`{ x, y }`, 0 to 1),
@@ -860,7 +899,7 @@ The gallery's `PostScreens` page has the three finished screens (read, write, ke
    state — the stack's rule, inherited. The box clips whatever slid below its
    bottom edge, so a sheet at any height is still a card: rounded top, a
    straight cut at the box's edge — and its shape is handle · head · body:
-   the handle and the title row are pinned, `.sheet__body` scrolls beneath
+   the handle and the title row are pinned, its `.body` scrolls beneath
    them, and the body's `scroll-padding-bottom` is the slid-under part (in
    the sheet's own container units, `--_cover`), so a focused control is
    revealed above the cut, not under it. `--sheet-half` is a share of the
@@ -889,7 +928,7 @@ question and hunts for its answer. Rules 11–13 serve that:
 11. **Everything holds to edges.** Every element touches at least two edges —
     the card's, the column's, or a line made by the thing above it (a row, the
     avatar + name line). Words to READ are aligned start, values end (the
-    receipt: items left, prices right; `.card__head`, `.kv`, `.row`); centred
+    receipt: items left, prices right; `.head`, `.kv`, `.row`); centred
     only what is not read — dots, a lone number, an icon, a mark. Empty room is
     not filled with more content; a new edge is made instead (line the buttons
     up with the avatar). One exception: a small control with its own words
@@ -908,14 +947,14 @@ question and hunts for its answer. Rules 11–13 serve that:
     bolder, never a second colour.
 14. **A frame says "tap me".** Inside a card, only a control draws its own
     edge (a chip, a field, a pick tile, a small `Card sm` to pick). What is
-    only READ never gets a frame — no card in a card: a stat tile stands on
+    only READ never gets a frame — no card in a card: a KvCell stands on
     the card's ground, a note is a `Banner` (a light band, a rule above and
     below, edge to edge), a count is words (`Text caption muted`), never a
     chip. A chip or tile that looks pressable and is not lies.
 15. **A component adjusts another only through its knobs.** A component that
     holds another (a sheet holding a card, a stack holding a sheet) sets the
     child's knobs (`.sheet { --card-pad: … }`), never the child's own
-    property (`.sheet .card__head { color: … }`). The child's file is the one
+    property (`.sheet .head { color: … }`). The child's file is the one
     place its look is written, so what a story shows is what a project gets.
     Missing the knob? Add it in the child's file. No `!important` either, but
     `[hidden]`'s. A component belongs to the file that writes its bare class

package/lib/catalog.mjs

@@ -76,6 +76,8 @@ export function get(cat, name, { html = false, all = false } = {}) {
     ...(c.params && { params: c.params }),
     composes: c.composes,
     composedBy: c.composedBy,
+    parts: c.parts ?? [],
+    fits: c.fits ?? [],
     knobs: c.knobs,
     variations: [...own, ...elsewhere.filter((s) => shown.includes(s))].map(show),
     ...(elsewhere.length > shown.length && { alsoUsedIn: elsewhere.filter((s) => !shown.includes(s)).map((s) => s.id) }),