@usableapp/cardds 0.7.94 → 0.7.95

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.95 — 2026-10-18
+
+From timebank's help-ask prototype (Lh 2026-10-18): its Composer, Dropdown and map stood on white cards inside the help sheet. Ruled: the sheet is the paper the member fills in.
+
+Nothing in the package's look or behaviour changes: no component, class or knob is added or removed. Two new checks may fail a project's `cardds check`: a control in a card, and a worded pager whose forward button is not the primary one.
+
+### Added
+- **`cardds check` rule `field-in-card` (error): the sheet is the paper the member fills in** (Lh 2026-10-18). Before → after: "Fields belong in a Sheet" was prose in `Field`'s doc, and nothing stopped a form on a card → a control the member fills in or picks, written inside a `<Card>`, is an error that names `Sheet`'s `SheetBody`, `SheetStep` and the stack sheet as its place. The controls: `Field`, `Composer`, `ComposerArea`, `Pin`, `Dropdown`, `Slider`, `Toggle`, `Check`, `ChipPick`, `Calendar`, `DayStrip`, `Day`, `Picker`, `Mood`, `AvatarPick`, `FileBtn`, `AddRow`, `MapPick`, a `Tile pick` and a `Tile upload`. A plain or `stat` Tile, a `Btn`, `IconBtn` or `Link`, and a raw `<input>` (the pickable row card's radio) are not flagged. A `Card` that is a sheet of a `SheetStack` is that stack's sheet and may hold them. To pass: move the controls onto the sheet's body (`<Sheet><CardHead …/><SheetBody>…controls…</SheetBody><CardFoot>…</CardFoot></Sheet>`), with no card round them. The ESLint plugin reports it under `cardds/check`.
+- **`cardds check` rule `pager-forward-primary` (error).** Before → after: a worded pager could carry back and next with the same signal (Lh saw it on a timebank screen) → in an `ActionBar variant="pager"` or an `ActionBarTier pager` with two or more worded `Btn`s, the last (forward) one must be `primary` and the others not. The round pager (`IconBtn`s) is not checked.
+
+### Changed
+- **Every control's doc says where it lives: on a sheet, never in a Card.** `Field`'s doc comment now leads with it, so `cardds get Field` and `cardds find "where does a form field go"` answer with the rule. README's sheet rules gain "The sheet is the paper the member fills in".
+- **The gallery's stories put their controls on sheets.** 60 stories in 19 files moved from a card onto a sheet: a `Step` with a `Page` and a `Sheet` where the story is a step of a flow, a bare `SheetStage` with a `Sheet` for a part shown on its own. Story ids are unchanged. Two samples that stood in two cards of one story now stand on one sheet.
+
 ## 0.7.94 — 2026-10-18
 
 From timebank's help-ask sheet (Lh 2026-10-17). One look changes on existing screens: a row card's corner (41.6 → 13). Everything else is added, and a screen that does not use it is as it was.

package/README.md

@@ -555,8 +555,21 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 - **A bottom sheet holds what the member acts on** — controls, or small
   content cards to pick from or read more — and it opens to the full height
   of its box. **Cards are content the system offers**: the words, the
-  explanation, the thing to read. Do not put a form in a card when a sheet
-  would do, and do not put the step's explanation in a sheet.
+  explanation, the thing to read. Do not put the step's explanation in a
+  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`
+  and `ComposerArea`, `Pin`, `Dropdown`, `Slider`, `Toggle`, `Check`,
+  `ChipPick`, `Calendar`, `DayStrip` and `Day`, `Picker`, `Mood`,
+  `AvatarPick`, `FileBtn`, `AddRow`, `MapPick`, a `Tile pick` and a
+  `Tile upload`. A card is for reading and pressing buttons only; never put
+  a form, or one control of it, in a card. `cardds check` rule
+  `field-in-card` (error) flags a control written inside a `<Card>`. A `Card`
+  that is a sheet of a `SheetStack` is that stack's sheet, so it may hold
+  them. Seen in timebank's help-ask prototype: a Composer, a Dropdown and a
+  map on white cards inside the help sheet, the cards the colour of the
+  ground.
 - **Two sheet systems, one material.** *Sheet single* (`.sheet`, `sheet.css`)
   is ONE sheet the member acts in, whatever it holds: a short entry in front
   of a step's card, a place on a map, a payment on a dim page — in a `.step`

package/dist/actions/Chip.d.ts

@@ -318,7 +318,7 @@ export interface ChipPickProps extends Omit<ComponentProps<'label'>, 'onChange'>
     /** the native input's change event: the chip was picked, or (checkbox) toggled */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-/** ChipPick — a chip that is a choice: full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
+/** ChipPick — a chip that is a choice, on a sheet and never in a Card (the sheet is the paper the member fills in, Lh 2026-10-18): full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
  *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */
 export declare function ChipPick({ type, sign, name, value, checked, defaultChecked, onChange, className, children, ...rest }: ChipPickProps): import("react").JSX.Element;
 export interface ChipRowProps extends ComponentProps<'div'> {

package/dist/actions/Chip.js

@@ -7,7 +7,7 @@ export function Chip({ on, muted, dot, sm, as, href, className, children, ...res
     const el = as ?? (href ? 'a' : 'span');
     return createElement(el, { href, type: el === 'button' ? 'button' : undefined, className: cx('chip', on && 'chip--on', muted && 'chip--muted', sm && 'chip--sm', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b', tone: dot === 'a' || dot === 'b' ? undefined : dot }), children);
 }
-/** ChipPick — a chip that is a choice: full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
+/** ChipPick — a chip that is a choice, on a sheet and never in a Card (the sheet is the paper the member fills in, Lh 2026-10-18): full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
  *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */
 export function ChipPick({ type, sign, name, value, checked, defaultChecked, onChange, className, children, ...rest }) {
     return (_jsxs("label", { className: cx('chip chip--pick', sign && 'chip--sign', className), ...rest, children: [_jsx("input", { type: type ?? (sign ? 'checkbox' : 'radio'), name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: onChange }), children] }));

package/dist/actions/Dropdown.d.ts

@@ -22,7 +22,7 @@ export interface DropdownProps extends Omit<ComponentProps<'div'>, 'onChange' |
  * Dropdown — THE select: a pill trigger + its Menu popover anchored under it (native popover: light dismiss, Esc). Never a native
  * `<select>`. ONE component, like `<select>` is — the pill and the panel are its own anatomy. It holds a VALUE, controlled like an
  * input: `value` + `onChange`, or `defaultValue`. Children are MenuItems with a `value`; the chosen one is marked and names the pill.
- * In a FilterRow dropdowns share the width.
+ * In a FilterRow dropdowns share the width. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  */
 export declare function Dropdown({ id, value, defaultValue, onChange, label, end, muted, className, children, ...rest }: DropdownProps): import("react").JSX.Element;
 export interface MenuProps extends Omit<ComponentProps<'div'>, 'popover' | 'onChange' | 'defaultValue'> {

package/dist/actions/Dropdown.js

@@ -11,7 +11,7 @@ const useValue = (value, defaultValue, onChange) => useControlled(value, default
  * Dropdown — THE select: a pill trigger + its Menu popover anchored under it (native popover: light dismiss, Esc). Never a native
  * `<select>`. ONE component, like `<select>` is — the pill and the panel are its own anatomy. It holds a VALUE, controlled like an
  * input: `value` + `onChange`, or `defaultValue`. Children are MenuItems with a `value`; the chosen one is marked and names the pill.
- * In a FilterRow dropdowns share the width.
+ * In a FilterRow dropdowns share the width. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18).
  */
 export function Dropdown({ id, value, defaultValue, onChange, label, end, muted, className, children, ...rest }) {
     const [current, pick] = useValue(value, defaultValue, onChange);