@usableapp/cardds 0.7.94 → 0.7.96

package/dist/choice/Calendar.d.ts

@@ -32,5 +32,5 @@ export interface CalendarProps extends Omit<ComponentProps<'div'>, 'title' | 'on
     nav?: ReactNode;
 }
 /** Calendar — a month grid of 44px round cells: one accent day, optional marks; prev/next in the head. It shows ONE month and knows no dates:
- *  the app owns which month (`title`, `days`, `start` + `onPrev` / `onNext`) and which day (`selected` + `onSelect`, or `defaultSelected`). */
+ *  the app owns which month (`title`, `days`, `start` + `onPrev` / `onNext`) and which day (`selected` + `onSelect`, or `defaultSelected`). On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export declare function Calendar({ title, days, start, selected, defaultSelected, onSelect, onPrev, onNext, prevLabel, nextLabel, marks, marks2, disabled, weekdays, nav, className, ...rest }: CalendarProps): import("react").JSX.Element;

package/dist/choice/Calendar.js

@@ -4,7 +4,7 @@ import { cx } from '../cx.js';
 import { IconBtn } from '../actions/IconBtn.js';
 import { word } from '../words.js';
 /** Calendar — a month grid of 44px round cells: one accent day, optional marks; prev/next in the head. It shows ONE month and knows no dates:
- *  the app owns which month (`title`, `days`, `start` + `onPrev` / `onNext`) and which day (`selected` + `onSelect`, or `defaultSelected`). */
+ *  the app owns which month (`title`, `days`, `start` + `onPrev` / `onNext`) and which day (`selected` + `onSelect`, or `defaultSelected`). On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export function Calendar({ title, days = 30, start = 1, selected, defaultSelected, onSelect, onPrev, onNext, prevLabel = word('previous'), nextLabel = word('next'), marks = [], marks2 = [], disabled = [], weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], nav, className, ...rest }) {
     const [day, pick] = useControlled(selected, defaultSelected, onSelect);
     return (_jsxs("div", { className: cx('calendar', className), ...rest, children: [_jsxs("div", { className: "calendar__head", children: [_jsx("span", { className: "t-title", children: title }), nav ?? (_jsxs("span", { className: "icon-row", children: [_jsx(IconBtn, { sm: true, icon: "chevron-left", label: prevLabel, onClick: onPrev }), _jsx(IconBtn, { sm: true, icon: "chevron-right", label: nextLabel, onClick: onNext })] }))] }), _jsxs("div", { className: "calendar__grid", children: [weekdays.map((d) => _jsx("span", { className: "calendar__wd", children: d }, d)), Array.from({ length: days }, (_, i) => i + 1).map((d) => (_jsx("button", { type: "button", className: cx('calendar__day', marks.includes(d) && 'calendar__day--mark', marks2.includes(d) && 'calendar__day--mark2'), "aria-selected": d === day ? 'true' : undefined, onClick: () => pick(d), disabled: disabled.includes(d), style: d === 1 ? { '--start': start } : undefined, children: d }, d)))] })] }));

package/dist/choice/Check.d.ts

@@ -5,7 +5,7 @@ export interface CheckProps extends ComponentProps<'input'> {
     /** accessible name */
     label?: string;
 }
-/** Check — the round check circle at a Row's end (48px); the row's label wraps it. */
+/** Check — the round check circle at a Row's end (48px); the row's label wraps it. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export declare function Check({ sm, label, className, ...rest }: CheckProps): import("react").JSX.Element;
 export interface ToggleProps extends ComponentProps<'input'> {
     /** accessible name, when no words show */
@@ -13,5 +13,5 @@ export interface ToggleProps extends ComponentProps<'input'> {
     /** WORDS shown before the switch, naming it ("อยู่บ้าน") — the switch and its words are one label, one tap target */
     text?: ReactNode;
 }
-/** Toggle — the big switch (64×36) at a Row's end; with `text`, a switch that names itself (a bar's own switch — "at home"). */
+/** Toggle — the big switch (64×36) at a Row's end; with `text`, a switch that names itself (a bar's own switch — "at home"). In a row it stands on a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export declare function Toggle({ label, text, className, ...rest }: ToggleProps): import("react").JSX.Element;

package/dist/choice/Check.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** Check — the round check circle at a Row's end (48px); the row's label wraps it. */
+/** Check — the round check circle at a Row's end (48px); the row's label wraps it. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export function Check({ sm, label, className, ...rest }) {
     return _jsx("input", { type: "checkbox", className: cx('check', sm && 'check--sm', className), "aria-label": label, ...rest });
 }
-/** Toggle — the big switch (64×36) at a Row's end; with `text`, a switch that names itself (a bar's own switch — "at home"). */
+/** Toggle — the big switch (64×36) at a Row's end; with `text`, a switch that names itself (a bar's own switch — "at home"). In a row it stands on a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export function Toggle({ label, text, className, ...rest }) {
     const input = _jsx("input", { type: "checkbox", role: "switch", className: cx('toggle', className), "aria-label": text == null ? label : undefined, ...rest });
     if (text == null)

package/dist/choice/DayStrip.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react';
 export interface DayStripProps extends ComponentProps<'div'> {
 }
-/** DayStrip — a week of Days, one selected, today marked. */
+/** DayStrip — a week of Days, one selected, today marked. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export declare function DayStrip({ className, ...rest }: DayStripProps): import("react").JSX.Element;
 export interface DayProps extends Omit<ComponentProps<'button'>, 'name'> {
     /** weekday name (Thu) */

package/dist/choice/DayStrip.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** DayStrip — a week of Days, one selected, today marked. */
+/** DayStrip — a week of Days, one selected, today marked. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export function DayStrip({ className, ...rest }) {
     return _jsx("div", { className: cx('day-strip', className), role: "tablist", ...rest });
 }

package/dist/choice/Mood.d.ts

@@ -12,6 +12,6 @@ export interface MoodProps extends Omit<ComponentProps<'fieldset'>, 'onChange' |
     /** the dot the member tapped */
     onChange?: (value: MoodValue) => void;
 }
-/** Mood — five dots in a pill from bad to good; the picked one grows. */
+/** Mood — five dots in a pill from bad to good; the picked one grows. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export declare function Mood({ name, value, defaultValue, label, onChange, className, ...rest }: MoodProps): import("react").JSX.Element;
 export {};

package/dist/choice/Mood.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { useControlled } from '../state.js';
 import { word } from '../words.js';
-/** Mood — five dots in a pill from bad to good; the picked one grows. */
+/** Mood — five dots in a pill from bad to good; the picked one grows. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export function Mood({ name = 'mood', value, defaultValue, label = word('mood'), onChange, className, ...rest }) {
     const [picked, pick] = useControlled(value, defaultValue, onChange);
     return (_jsx("fieldset", { className: cx('mood', className), "aria-label": label, ...rest, children: [1, 2, 3, 4, 5].map((n) => (_jsxs("label", { className: "mood__opt", children: [_jsx("input", { type: "radio", name: name, value: n, checked: n === picked, onChange: () => pick(n) }), _jsx("span", { className: "mood__dot" })] }, n))) }));

package/dist/choice/Slider.d.ts

@@ -9,5 +9,5 @@ export interface SliderProps extends Omit<ComponentProps<'input'>, 'className' |
     /** inline style for the label wrapper, not the range input */
     style?: React.CSSProperties;
 }
-/** Slider — one value along a hairline rail with a 48px knob; the whole range is thumb-tall. */
+/** Slider — one value along a hairline rail with a 48px knob; the whole range is thumb-tall. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). (Or the control tier of an `ActionBar variant="tiers"`.) */
 export declare function Slider({ label, glyph, className, style, onInput, ...input }: SliderProps): import("react").JSX.Element;

package/dist/choice/Slider.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { cx } from '../cx.js';
 import { useStepCursor } from '../sheets/stepCursor.js';
 const share = (value, min, max) => (max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0);
-/** Slider — one value along a hairline rail with a 48px knob; the whole range is thumb-tall. */
+/** Slider — one value along a hairline rail with a 48px knob; the whole range is thumb-tall. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). (Or the control tier of an `ActionBar variant="tiers"`.) */
 export function Slider({ label, glyph, className, style, onInput, ...input }) {
     const cursor = useStepCursor();
     const min = Number(input.min) || 0, max = Number(input.max) || 100;

package/dist/forms/AddRow.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
 export interface AddRowProps extends ComponentProps<'button'> {
 }
-/** AddRow — the inline "+ add another" action under a list of fields. */
+/** AddRow — the inline "+ add another" action under a list of fields. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export declare function AddRow({ className, children, ...rest }: AddRowProps): import("react").JSX.Element;

package/dist/forms/AddRow.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
-/** AddRow — the inline "+ add another" action under a list of fields. */
+/** AddRow — the inline "+ add another" action under a list of fields. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export function AddRow({ className, children, ...rest }) {
     return (_jsxs("button", { type: "button", className: cx('add-row', className), ...rest, children: [_jsx("span", { className: "add-row__plus", children: _jsx(Icon, { name: "plus" }) }), " ", children] }));
 }

package/dist/forms/Composer.d.ts

@@ -13,7 +13,7 @@ export interface ComposerProps extends Omit<ComponentProps<'textarea'>, 'classNa
     /** inline style for the wrapper, not the textarea */
     style?: React.CSSProperties;
 }
-/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. A second thing to write in the same card (the reason under the request) is a `ComposerArea` child: the same words, behind a dashed rule. The bar is drawn only when it holds a lead, a hint or a send. */
+/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). A second thing to write in the same Composer (the reason under the request) is a `ComposerArea` child: the same words, behind a dashed rule. The bar is drawn only when it holds a lead, a hint or a send. */
 export declare function Composer({ hint, lead, send, children, className, style, ...textarea }: ComposerProps): import("react").JSX.Element;
 export interface ComposerAreaProps extends Omit<ComponentProps<'textarea'>, 'className' | 'children'> {
 }

package/dist/forms/Composer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { useStepCursor } from '../sheets/stepCursor.js';
-/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. A second thing to write in the same card (the reason under the request) is a `ComposerArea` child: the same words, behind a dashed rule. The bar is drawn only when it holds a lead, a hint or a send. */
+/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). A second thing to write in the same Composer (the reason under the request) is a `ComposerArea` child: the same words, behind a dashed rule. The bar is drawn only when it holds a lead, a hint or a send. */
 export function Composer({ hint, lead, send, children, className, style, ...textarea }) {
     const cursor = useStepCursor();
     return (_jsxs("div", { className: cx('composer', className), style: style, children: [_jsx("textarea", { className: "composer__input", ...textarea, ...cursor }), children, (lead != null || hint != null || send != null) && (_jsxs("div", { className: "composer__bar", children: [lead, hint != null && _jsx("span", { className: "composer__hint", children: hint }), send] }))] }));

package/dist/forms/Field.d.ts

@@ -32,7 +32,9 @@ export interface FieldProps extends Omit<ComponentProps<'input'>, 'className' |
 /** the digits of `v`, written into `mask`; a mark is written only when a digit comes after it */
 export declare function applyMask(v: string, mask: string): string;
 /**
- * Field — the flat outlined input: the LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
- * Fields belong in a Sheet (what the member acts on), 1–3 per step, never in a reading card.
+ * 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
+ * (`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).
  */
 export declare function Field({ icon, action, label, error, format, digits, formatError, mask, className, style, onBlur, onInput, onChange, ...input }: FieldProps): import("react").JSX.Element;

package/dist/forms/Field.js

@@ -20,8 +20,10 @@ export function applyMask(v, mask) {
     return out;
 }
 /**
- * Field — the flat outlined input: the LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
- * Fields belong in a Sheet (what the member acts on), 1–3 per step, never in a reading card.
+ * 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
+ * (`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).
  */
 export function Field({ icon, action, label, error, format, digits, formatError, mask, className, style, onBlur, onInput, onChange, ...input }) {
     const ref = useRef(null);

package/dist/forms/FileBtn.d.ts

@@ -14,6 +14,6 @@ export interface FileBtnProps extends Omit<ComponentProps<'input'>, 'type' | 'cl
 /**
  * FileBtn — a Btn that opens the device's file picker: the button IS the label of a hidden file input, so the
  * whole button is the tap target and nothing is forwarded by script. `accept="image/*" capture="environment"`
- * opens the camera; without `capture` the gallery. The picked file arrives in `onChange` like any input.
+ * opens the camera; without `capture` the gallery. The picked file arrives in `onChange` like any input. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  */
 export declare function FileBtn({ primary, quiet, block, className, children, ...input }: FileBtnProps): import("react").JSX.Element;

package/dist/forms/FileBtn.js

@@ -4,7 +4,7 @@ import { useStepCursor } from '../sheets/stepCursor.js';
 /**
  * FileBtn — a Btn that opens the device's file picker: the button IS the label of a hidden file input, so the
  * whole button is the tap target and nothing is forwarded by script. `accept="image/*" capture="environment"`
- * opens the camera; without `capture` the gallery. The picked file arrives in `onChange` like any input.
+ * opens the camera; without `capture` the gallery. The picked file arrives in `onChange` like any input. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  */
 export function FileBtn({ primary, quiet, block, className, children, ...input }) {
     const cursor = useStepCursor();

package/dist/forms/Pin.d.ts

@@ -31,7 +31,7 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
     autoFocus?: boolean;
 }
 /**
- * Pin — big code entry, one digit per pill; a filled cell turns accent. Lives in a Sheet.
+ * Pin — big code entry, one digit per pill; a filled cell turns accent. Lives on a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  * Its own behaviour, inside it: typing a digit moves to the next cell, Backspace in an empty cell moves back and clears, the
  * arrows walk the cells, a pasted code fills them from the one it landed in; only digits stay. The first cell takes the SMS
  * one-time-code autofill. The code is a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`.

package/dist/forms/Pin.js

@@ -7,7 +7,7 @@ import { word } from '../words.js';
 import { useStepCursor } from '../sheets/stepCursor.js';
 const RESET_MS = 900; // a code that does not match: red + shake this long, then the cells empty for a new try
 /**
- * Pin — big code entry, one digit per pill; a filled cell turns accent. Lives in a Sheet.
+ * Pin — big code entry, one digit per pill; a filled cell turns accent. Lives on a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  * Its own behaviour, inside it: typing a digit moves to the next cell, Backspace in an empty cell moves back and clears, the
  * arrows walk the cells, a pasted code fills them from the one it landed in; only digits stay. The first cell takes the SMS
  * one-time-code autofill. The code is a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`.

package/dist/index.d.ts

@@ -21,6 +21,8 @@ export * from './scaffold/Centre.js';
 export * from './scaffold/slideScreen.js';
 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';

package/dist/index.js

@@ -25,6 +25,8 @@ export * from './scaffold/Centre.js';
 export * from './scaffold/slideScreen.js';
 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';

package/dist/media/MapPick.d.ts

@@ -27,6 +27,6 @@ export interface MapPickProps extends Omit<ComponentProps<'label'>, 'onChange'>
  * its point (`top` / `left` in the map's box, as a Callout). Drawn small, so five fit on a phone's map; the tap is the
  * full `--tap` square round the point, and the name takes a tap too. The marks of one choice share a `name` and are one
  * radio group (arrow keys move between them); the picked one fills with accent. It knows nothing of the map or the sheet:
- * it goes in a `MapArea` after the engine's mount, and the app owns which place is picked.
+ * it goes in a `MapArea` after the engine's mount, and the app owns which place is picked. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  */
 export declare function MapPick({ children, icon, top, left, name, value, checked, defaultChecked, onChange, disabled, className, style, ...rest }: MapPickProps): import("react").JSX.Element;

package/dist/media/MapPick.js

@@ -6,7 +6,7 @@ import { Icon } from '../type/Icon.js';
  * its point (`top` / `left` in the map's box, as a Callout). Drawn small, so five fit on a phone's map; the tap is the
  * full `--tap` square round the point, and the name takes a tap too. The marks of one choice share a `name` and are one
  * radio group (arrow keys move between them); the picked one fills with accent. It knows nothing of the map or the sheet:
- * it goes in a `MapArea` after the engine's mount, and the app owns which place is picked.
+ * it goes in a `MapArea` after the engine's mount, and the app owns which place is picked. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  */
 export function MapPick({ children, icon, top, left, name, value, checked, defaultChecked, onChange, disabled, className, style, ...rest }) {
     return (_jsxs("label", { className: cx('map-pick', className), style: { top, left, ...style }, ...rest, children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled }), _jsx("span", { className: "map-pick__mark", children: icon && _jsx(Icon, { name: icon, size: "xs" }) }), _jsx("span", { className: "map-pick__name", children: children })] }));

package/dist/media/Tile.d.ts

@@ -42,7 +42,7 @@ 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. */
+/** 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<{
     translate?: "yes" | "no" | undefined | undefined;
     slot?: string | undefined | undefined;

package/dist/media/Tile.js

@@ -6,7 +6,7 @@ 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. */
+/** 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 }) {
     const el = pick ? 'label' : as ?? 'div';
     const text = value != null || (label != null && sub != null)

package/dist/numbers/Picker.d.ts

@@ -15,7 +15,7 @@ export interface PickerProps extends Omit<ComponentProps<'div'>, 'onChange' | 'd
  * Picker — a horizontal snap picker, the centre value big between two accent rules; children are PickerItems.
  * It holds a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`. The value IS the item standing in the centre
  * of the rail: the picker scrolls the chosen one there, and when the member scrolls (or taps an item) it asks for the one that
- * settled in the centre. The CSS lights the centred item by scroll position; the app never reads the DOM to know what was picked.
+ * settled in the centre. The CSS lights the centred item by scroll position; the app never reads the DOM to know what was picked. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  */
 export declare function Picker({ value, defaultValue, onChange, unit, label, className, children, ...rest }: PickerProps): import("react").JSX.Element;
 export interface PickerItemProps extends Omit<ComponentProps<'button'>, 'value'> {

package/dist/numbers/Picker.js

@@ -7,7 +7,7 @@ const PickerContext = createContext(null);
  * Picker — a horizontal snap picker, the centre value big between two accent rules; children are PickerItems.
  * It holds a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`. The value IS the item standing in the centre
  * of the rail: the picker scrolls the chosen one there, and when the member scrolls (or taps an item) it asks for the one that
- * settled in the centre. The CSS lights the centred item by scroll position; the app never reads the DOM to know what was picked.
+ * settled in the centre. The CSS lights the centred item by scroll position; the app never reads the DOM to know what was picked. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  */
 export function Picker({ value, defaultValue, onChange, unit, label, className, children, ...rest }) {
     const [current, pick] = useControlled(value, defaultValue, onChange);

package/dist/people/AvatarPick.d.ts

@@ -1,11 +1,11 @@
 import type { ComponentProps, ReactNode } from 'react';
 export interface AvatarPickProps extends ComponentProps<'div'> {
-    /** run the strip to the card's edges */
+    /** run the strip to the sheet's edges */
     bleed?: boolean;
     /** the strip's accessible name (aria-label) */
     label?: string;
 }
-/** AvatarPick — the chooser row: big heads with name and role under, scrolling sideways; children are AvatarPickItems. */
+/** AvatarPick — the chooser row: big heads with name and role under, scrolling sideways; children are AvatarPickItems. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export declare function AvatarPick({ bleed, label, className, ...rest }: AvatarPickProps): import("react").JSX.Element;
 export interface AvatarPickItemProps extends Omit<ComponentProps<'button'>, 'name' | 'role'> {
     /** the name under the head */

package/dist/people/AvatarPick.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** AvatarPick — the chooser row: big heads with name and role under, scrolling sideways; children are AvatarPickItems. */
+/** AvatarPick — the chooser row: big heads with name and role under, scrolling sideways; children are AvatarPickItems. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export function AvatarPick({ bleed, label, className, ...rest }) {
     return _jsx("div", { className: cx('avatar-pick', bleed && 'bleed', className), "aria-label": label, ...rest });
 }

package/lib/guide.mjs

@@ -7,7 +7,7 @@ ORDER: find → scaffold or get → write → check. First question: has cardds
 TOOLS: find_components · scaffold_screen · get_component · list_components · check_source. No MCP: npx cardds find|scaffold|get|list|check (all take --json).
 What no checker sees:
 1. cardds is a framework you take from outside. Never edit, commit to or release cardds from a consumer project, never node_modules. What cannot be set from outside is a framework gap: STOP and tell the user exactly what you needed.
-2. Adjust from outside only, widest first: theme.css bases → knobs (--<component>-<what>) → props/slots. The theme's values are the user's call; never pick them.
+2. Adjust from outside only, widest first: theme.css bases → knobs (--<component>-<what>) → props/slots. The theme's values are the user's call; never pick them. cardGrounds() names a card the member cannot see on that theme; inkGrounds() a word or glyph they cannot read (README "Ink follows its ground").
 3. Every component is controlled like an input (state/open/value + its on…, or default…) and none knows another: the app owns the state and wires them.
 4. Import components, never copy their markup or classes: a component is the look AND the behaviour.
 5. Mobile only, big targets; never adapt it to desktop.

package/lint/rules.mjs

@@ -227,5 +227,42 @@ export function checkSource(source, file, { classes = carddsClasses() } = {}) {
     }
   }
 
+  // 10 · the sheet is the paper the member fills in (Lh 2026-10-18): every control the member fills or picks stands on a Sheet's body, a SheetStep
+  //      or a stack sheet; a card is for reading and pressing buttons. A Card that is a sheet of a SheetStack IS a sheet (the stack's material)
+  const span = (re) => [...text.matchAll(re)].map((m) => ({ at: m.index, body: m.index + tagAt(text, m.index).length, end: m.index + elementAt(text, m.index).length }));
+  const stacks = span(/<SheetStack\b(?![\w.])/g), cards = span(/<Card\b(?![\w.])/g);
+  const within = (at, el) => at > el.at && at < el.end;
+  const innermost = (at) => cards.filter((c) => within(at, c)).at(-1);
+  for (const c of text.matchAll(/<(Field|Composer|ComposerArea|Pin|Dropdown|Slider|Toggle|Check|ChipPick|Calendar|DayStrip|Day|Picker|Mood|AvatarPick|FileBtn|AddRow|MapPick|Tile)\b(?![\w.])/g)) {
+    const kind = c[1] === 'Tile' ? tagAt(text, c.index).match(/\s(pick|upload)\b(?!\s*=\s*\{\s*false)/)?.[1] : null;
+    if (c[1] === 'Tile' && !kind) continue; // a plain or stat Tile is read, not filled
+    const card = innermost(c.index);
+    if (!card) continue;
+    const stack = stacks.filter((s) => card.at >= s.body && card.at < s.end).at(-1);
+    if (stack && !cards.some((o) => o !== card && within(card.at, o) && o.at >= stack.body)) continue;
+    const name = kind ? `Tile ${kind}` : c[1];
+    add('field-in-card', 'error', c.index, `<${name}> inside a <Card>: the sheet is the paper the member fills in (Lh 2026-10-18) — a card is for reading and pressing buttons. Put the ${name} straight on a Sheet's <SheetBody>, in a <SheetStep>, or on a stack sheet, with no card round it.`);
+  }
+
+  // 11 · a worded pager bar: back and next never carry the same signal — the forward Btn (the last) is `primary`, the back one is not
+  for (const m of text.matchAll(/<(ActionBar|ActionBarTier)\b(?![\w.])/g)) {
+    const tag = tagAt(text, m.index);
+    if (!(m[1] === 'ActionBar' ? /\svariant\s*=\s*\{?\s*["']pager["']/ : /\spager\b(?!\s*=\s*\{\s*false)/).test(tag)) continue;
+    const el = elementAt(text, m.index);
+    const btns = [...el.slice(tag.length).matchAll(/<Btn\b(?![\w.])/g)].map((b) => m.index + tag.length + b.index);
+    if (btns.length < 2) continue;
+    // the two branches of a conditional (`last ? <Btn primary>Send</Btn> : <Btn primary>Next</Btn>`) are ONE slot: both are the forward one
+    const slot = []; let n = 0;
+    btns.forEach((at, i) => { if (i && /^\s*\)?\s*:\s*\(?\s*$/.test(text.slice(btns[i - 1] + elementAt(text, btns[i - 1]).length, at))) slot.push(n); else slot.push(++n); });
+    if (n < 2) continue;
+    btns.forEach((at, i) => {
+      const forward = slot[i] === n, primary = /\sprimary\b(?!\s*=\s*\{\s*false)/.test(tagAt(text, at));
+      if (primary !== forward) add('pager-forward-primary', 'error', at, forward
+        ? 'the forward <Btn> of a worded pager is not `primary`: back and next carry the same signal. The last Btn (the step it leads to) is <Btn primary>; the back one stays plain.'
+        : 'a back <Btn> of a worded pager is `primary`: only the forward one (the last) is. Drop `primary` here.');
+    });
+  }
+
   return findings.sort((a, b) => a.line - b.line);
 }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.94",
+  "version": "0.7.96",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",