@usableapp/cardds 0.7.82 → 0.7.84

package/dist/index.d.ts

@@ -80,6 +80,8 @@ export * from './sticky/StickyDate.js';
 export * from './sticky/StickyField.js';
 export * from './sticky/StickyPick.js';
 export * from './sticky/StickyThread.js';
+export * from './sticky/StickyBoard.js';
+export * from './sticky/StickyAnswer.js';
 export * from './stamp/Stamp.js';
 export * from './stamp/StampBook.js';
 export * from './stamp/StampOn.js';

package/dist/index.js

@@ -84,6 +84,8 @@ export * from './sticky/StickyDate.js';
 export * from './sticky/StickyField.js';
 export * from './sticky/StickyPick.js';
 export * from './sticky/StickyThread.js';
+export * from './sticky/StickyBoard.js';
+export * from './sticky/StickyAnswer.js';
 export * from './stamp/Stamp.js';
 export * from './stamp/StampBook.js';
 export * from './stamp/StampOn.js';

package/dist/post/PostBox.d.ts

@@ -20,7 +20,7 @@ export interface PostBoxCardProps extends Omit<ComponentProps<'li'>, 'id'> {
     from: ReactNode;
     /** where and when — the edge's small line ("เชียงใหม่ · 3 ม.ค. 69") */
     when?: ReactNode;
-    /** the corner's stamp — a `Stamp` */
+    /** the corner's stamp — a `Stamp`, shown at the postcard's own size (72 × 90, `--post-corner-stamp-w`) */
     stamp?: ReactNode;
     /** the mark struck over the stamp — a `Postmark`; behind another card only its place shows */
     postmark?: ReactNode;

package/dist/post/PostDesk.d.ts

@@ -30,9 +30,9 @@ export interface PostDeskProps extends ComponentProps<'div'> {
     placeholder?: string;
     /** the address lines — `PostDeskLine`s; their values are the app's, like any input's */
     address?: ReactNode;
-    /** the sender's own stamps, shown under the card on the address half */
+    /** the sender's own stamps, shown under the card on the address half: each the standard size (96 × 120, `--stamp-size`), in one line that scrolls sideways when they outrun the screen */
     stamps?: PostDeskStamp[];
-    /** CONTROLLED: the `id` of the stamp in the stamp box, `null` = none — with `onStampChange` */
+    /** CONTROLLED: the `id` of the stamp in the stamp box, `null` = none — with `onStampChange`. The box and its stamp are the postcard's own size (72 × 90, `--post-corner-stamp-w`); the empty box shows its word */
     stamp?: string | null;
     /** UNCONTROLLED: the stamp it starts with */
     defaultStamp?: string | null;

package/dist/post/PostLetter.d.ts

@@ -24,7 +24,7 @@ export interface PostLetterProps extends ComponentProps<'div'> {
     kicker?: ReactNode;
     /** the address lines, top down: the first is the name, the rest where they live */
     to?: ReactNode[];
-    /** the corner's stamp — a `Stamp` */
+    /** the corner's stamp — a `Stamp`, shown at the postcard's own size (72 × 90, `--post-corner-stamp-w`) */
     stamp?: ReactNode;
     /** the mark struck over the stamp — a `Postmark` */
     postmark?: ReactNode;

package/dist/post/Postmark.d.ts

@@ -7,6 +7,6 @@ export interface PostmarkProps extends ComponentProps<'div'> {
 }
 /**
  * Postmark — the round mark the post strikes: where and when, two rings, turned a little, its cancel lines running on to the side.
- * On a card's corner (`postmark` of PostLetter · PostDesk · PostBoxCard) it lies over the edge of the stamp. Information: nothing to press.
+ * On a card's corner (`postmark` of PostLetter · PostDesk · PostBoxCard) it lies over the edge of the stamp, by 0.4 of its own size. Information: nothing to press.
  */
 export declare function Postmark({ place, date, className, ...rest }: PostmarkProps): import("react").JSX.Element;

package/dist/post/Postmark.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
  * Postmark — the round mark the post strikes: where and when, two rings, turned a little, its cancel lines running on to the side.
- * On a card's corner (`postmark` of PostLetter · PostDesk · PostBoxCard) it lies over the edge of the stamp. Information: nothing to press.
+ * On a card's corner (`postmark` of PostLetter · PostDesk · PostBoxCard) it lies over the edge of the stamp, by 0.4 of its own size. Information: nothing to press.
  */
 export function Postmark({ place, date, className, ...rest }) {
     return (_jsxs("div", { className: cx('postmark', className), ...rest, children: [_jsx("span", { children: place }), date != null && _jsx("span", { children: date })] }));

package/dist/post/postCorner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* the corner of a card that proves the journey: the stamp (a `Stamp`, the app's), the postmark struck over its edge.
-   A part of the three post views, never exported: a stamp here shows its pictures only (stamp.css). */
+   A part of the three post views, never exported: a stamp here is the postcard's own size, `--post-corner-stamp-w` (72 × 90, outside the stamp's two sizes), and shows its pictures only (stamp.css, post.css). */
 export function PostCorner({ stamp, postmark, ...rest }) {
     if (stamp == null && postmark == null)
         return null;

package/dist/scaffold/LayerHistory.d.ts

@@ -41,6 +41,8 @@ export interface LayerApi {
  * `const way = useLayer('way')` → `<CallSheet open={way.value} onOpenChange={(up, i) => (up ? way.open(i!) : way.close())}>`.
  * A Modal: `open={ask.value !== null}` + the app's own `mounted` flag cleared in `onClosed`. Opened again a layer starts anew —
  * give what is inside a new `key` per opening.
+ * ONE LAYER PER TICK: `open` builds the new state from the layers read at render, so two layers opened in the same handler lose the
+ * first — `a.open(1); b.open(2)` gives `a.value` null and `b.value` 2, and two new entries. Open the second in a later tick.
  */
 export declare function useLayer(name: string): LayerApi;
 /** useOptionalLayer — the same layer as `useLayer`, or `null` when no `LayerHistory` is above. A missing provider does not warn. */

package/dist/scaffold/LayerHistory.js

@@ -58,6 +58,8 @@ const layerApi = (name, handle) => {
  * `const way = useLayer('way')` → `<CallSheet open={way.value} onOpenChange={(up, i) => (up ? way.open(i!) : way.close())}>`.
  * A Modal: `open={ask.value !== null}` + the app's own `mounted` flag cleared in `onClosed`. Opened again a layer starts anew —
  * give what is inside a new `key` per opening.
+ * ONE LAYER PER TICK: `open` builds the new state from the layers read at render, so two layers opened in the same handler lose the
+ * first — `a.open(1); b.open(2)` gives `a.value` null and `b.value` 2, and two new entries. Open the second in a later tick.
  */
 export function useLayer(name) {
     const handle = useHistory();

package/dist/sheets/Modal.d.ts

@@ -16,6 +16,9 @@ export interface ModalProps extends ComponentProps<'article'> {
  * 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.
+ * MOUNT IT ONLY WHEN IT IS TO SHOW. First mounted with `open={false}` it is drawn in place, then leaves, and calls `onClosed` after about 700ms
+ * (measured at 375, 2026-10-11). KNOWN FAULT, not fixed: under React StrictMode `onClosed` is never called for a Modal mounted that way — the
+ * 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'> {
@@ -30,7 +33,7 @@ export interface ModalAskProps extends Omit<ComponentProps<'div'>, 'title'> {
     /** a LIGHT ModalAsk: the card's paper and dark words instead of the dark end (Lh 2026-09-29) — same layout, same trio; the one solid button turns dark */
     light?: boolean;
 }
-/** ModalAsk — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons
+/** 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
  *  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;

package/dist/sheets/Modal.js

@@ -9,6 +9,9 @@ import { cx } from '../cx.js';
  * 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.
+ * MOUNT IT ONLY WHEN IT IS TO SHOW. First mounted with `open={false}` it is drawn in place, then leaves, and calls `onClosed` after about 700ms
+ * (measured at 375, 2026-10-11). KNOWN FAULT, not fixed: under React StrictMode `onClosed` is never called for a Modal mounted that way — the
+ * effect's first run sets `shown` to false, its cleanup drops the wait, and the second run returns early.
  */
 export function Modal({ open = true, onClosed, onDismiss, className, ...rest }) {
     const ref = useRef(null);
@@ -58,7 +61,7 @@ export function Modal({ open = true, onClosed, onDismiss, className, ...rest })
 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 a `BtnTrio` (or two buttons) — plain buttons
+/** 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
  *  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 }) {

package/dist/stamp/Stamp.d.ts

@@ -7,7 +7,7 @@ export interface StampProps extends Omit<ComponentProps<'span'>, 'onClick'> {
     tone?: StickyTone;
     /** the big line at the foot, on the picture — whose stamp it is */
     name?: ReactNode;
-    /** a small line above the name (the pictures' words); it goes when the stamp is tiny */
+    /** a small line above the name (the pictures' words). It shows only on a stamp WIDER than the standard size (`--stamp-size` set above 6rem): at 96 it would be under 5px, so it is not drawn and the name is larger */
     words?: ReactNode;
     /** the pictures alone: `name` and `words` are not drawn. For a stamp stuck on something (a postcard's corner); in a `StampOn` every stamp is bare already. The words are for the album */
     bare?: boolean;
@@ -18,7 +18,8 @@ export interface StampProps extends Omit<ComponentProps<'span'>, 'onClick'> {
 }
 /**
  * Stamp — a perforated paper stamp, 4:5: the pictures fill the inner frame on a tone, the words sit on the picture's foot.
- * It is sized by its column (up to `--stamp-max-w`) and every inner length follows its width, so it reads from a tray to a sheet.
+ * Every stamp is ONE size wherever it stands (`--stamp-size`, two taps wide: 96 × 120) — what holds it only places it; a holder narrower than that shows it whole, smaller.
+ * The one small stamp is a stamp stuck on something (`StampOn`). Every inner length follows the stamp's width.
  * The outer box holds the size and the shadow; the paper inside is the one whose edge is punched (a mask would cut the shadow too).
  */
 export declare function Stamp({ pictures, tone, name, words, bare, tilt, onClick, className, ...rest }: StampProps): import("react").JSX.Element;
@@ -29,7 +30,7 @@ export interface StampPlaceProps extends Omit<ComponentProps<'span'>, 'onClick'>
     onClick?: () => void;
 }
 /**
- * StampPlace — an empty place for a stamp: a 4:5 frame of round dots the size a Stamp would be, a word or an Icon inside.
+ * StampPlace — an empty place for a stamp: a 4:5 frame of round dots the size a Stamp is (`--stamp-size`), a word or an Icon inside.
  * The dots are a stroke, not a border: `--stamp-place-dot` is their width, `--stamp-place-gap` the distance from one centre to the next,
  * and a `--stamp-place-dash` above 0 stretches each dot into a dash.
  */

package/dist/stamp/Stamp.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
  * Stamp — a perforated paper stamp, 4:5: the pictures fill the inner frame on a tone, the words sit on the picture's foot.
- * It is sized by its column (up to `--stamp-max-w`) and every inner length follows its width, so it reads from a tray to a sheet.
+ * Every stamp is ONE size wherever it stands (`--stamp-size`, two taps wide: 96 × 120) — what holds it only places it; a holder narrower than that shows it whole, smaller.
+ * The one small stamp is a stamp stuck on something (`StampOn`). Every inner length follows the stamp's width.
  * The outer box holds the size and the shadow; the paper inside is the one whose edge is punched (a mask would cut the shadow too).
  */
 export function Stamp({ pictures, tone = 'custard', name, words, bare, tilt, onClick, className, ...rest }) {
@@ -13,7 +14,7 @@ export function Stamp({ pictures, tone = 'custard', name, words, bare, tilt, onC
     return (_jsx(Box, { className: cx('stamp', `stamp--${shown.length}`, bare && 'stamp--bare', tilt && `stamp--tilt-${tilt}`, tap && 'stamp--tap', className), ...boxProps, children: _jsx("span", { className: "stamp__paper", children: _jsxs("span", { className: cx('stamp__pic', `sticky--${tone}`), children: [shown.map((picture, i) => _jsx("span", { className: "stamp__art", "aria-hidden": "true", children: picture }, i)), (name != null || words != null) && (_jsxs("span", { className: "stamp__cap", children: [words != null && _jsx("span", { className: "stamp__words", children: words }), name != null && _jsx("span", { className: "stamp__name", children: name })] }))] }) }) }));
 }
 /**
- * StampPlace — an empty place for a stamp: a 4:5 frame of round dots the size a Stamp would be, a word or an Icon inside.
+ * StampPlace — an empty place for a stamp: a 4:5 frame of round dots the size a Stamp is (`--stamp-size`), a word or an Icon inside.
  * The dots are a stroke, not a border: `--stamp-place-dot` is their width, `--stamp-place-gap` the distance from one centre to the next,
  * and a `--stamp-place-dash` above 0 stretches each dot into a dash.
  */

package/dist/stamp/StampBook.d.ts

@@ -2,12 +2,12 @@ import { type ComponentProps, type ReactNode } from 'react';
 export interface StampBookProps extends ComponentProps<'div'> {
     /** how many places the page shows: the ones no StampCell fills are drawn empty */
     places?: number;
-    /** ONE line of small stamps that scrolls sideways, no ground — the tray a member picks from */
+    /** ONE line of stamps that scrolls sideways, no ground — the tray a member picks from. Each stamp is its own size, as everywhere */
     strip?: boolean;
-    /** the page with NO ground — no fill, no padding, no round: three stamps across fill the whole width of what holds the book, each the full width of its third (the Stamp's width cap is lifted) with the least gap that keeps them apart. Put the name INSIDE the stamp (`Stamp name`), not under it */
+    /** the page with NO ground — no fill, no padding, no round: the stamps lie on what holds the book, three across, each its own size in the middle of its third. Put the name INSIDE the stamp (`Stamp name`), not under it */
     bare?: boolean;
 }
-/** StampBook — the album page: StampCells three across on an album ground, the free places drawn empty up to `places`. */
+/** StampBook — the album page: StampCells three across on an album ground, the free places drawn empty up to `places`. The book places its stamps and never sizes them: each is the one size of a stamp, in the middle of its third. */
 export declare function StampBook({ places, strip, bare, className, children, ...rest }: StampBookProps): import("react").JSX.Element;
 export interface StampCellProps extends Omit<ComponentProps<'span'>, 'onClick'> {
     /** a short line under the stamp — who it is from */

package/dist/stamp/StampBook.js

@@ -3,7 +3,7 @@ import { Children } from 'react';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { StampPlace } from './Stamp.js';
-/** StampBook — the album page: StampCells three across on an album ground, the free places drawn empty up to `places`. */
+/** StampBook — the album page: StampCells three across on an album ground, the free places drawn empty up to `places`. The book places its stamps and never sizes them: each is the one size of a stamp, in the middle of its third. */
 export function StampBook({ places = 0, strip, bare, className, children, ...rest }) {
     const free = Math.max(0, places - Children.toArray(children).length); // toArray drops null / undefined / booleans: `{owned && <StampCell/>}` that is false holds no place (Children.count counts it)
     return (_jsxs("div", { className: cx('stamp-book', strip && 'stamp-book--strip', bare && 'stamp-book--bare', className), ...rest, children: [children, Array.from({ length: free }, (_, i) => _jsx(StampPlace, { faint: true, "aria-hidden": "true" }, i))] }));

package/dist/stamp/StampOn.d.ts

@@ -19,6 +19,7 @@ export interface StampOnProps extends ComponentProps<'div'> {
 /**
  * StampOn — a Stamp (the child) stuck on a surface at the place the member chose. The surface is the nearest positioned box:
  * a Sticky's `stuck`, a postcard's face. `at` is the stamp's middle as a share of that surface, so the note reads the same at any size.
+ * The stamp is the SMALL size: 48 × 60 on any surface, whatever the surface's size (`--stamp-sm-size`, one tap wide).
  * With `onAtChange` the member drags it (finger or mouse; the arrow keys move it too): while the finger holds, the stamp writes its
  * own place, and on letting go it ASKS — the app owns `at`. It never leaves the surface.
  */

package/dist/stamp/StampOn.js

@@ -19,6 +19,7 @@ const write = (el, at) => { el.style.setProperty('--stamp-on-x', String(at.x));
 /**
  * StampOn — a Stamp (the child) stuck on a surface at the place the member chose. The surface is the nearest positioned box:
  * a Sticky's `stuck`, a postcard's face. `at` is the stamp's middle as a share of that surface, so the note reads the same at any size.
+ * The stamp is the SMALL size: 48 × 60 on any surface, whatever the surface's size (`--stamp-sm-size`, one tap wide).
  * With `onAtChange` the member drags it (finger or mouse; the arrow keys move it too): while the finger holds, the stamp writes its
  * own place, and on letting go it ASKS — the app owns `at`. It never leaves the surface.
  */

package/dist/sticky/Sticky.d.ts

@@ -5,15 +5,15 @@ export interface StickyProps extends Omit<ComponentProps<'div'>, 'onClick'> {
     onClick?: () => void;
     /** the paper's colour — one of STICKY_TONES (default custard) */
     tone?: StickyTone;
-    /** no folded corner */
+    /** the note has been READ: no folded corner. A folded corner (the default) says the note is new — not read yet */
     flat?: boolean;
-    /** 1:1, filling its column up to a cap (the write screen); otherwise the note hugs its words */
-    square?: boolean;
+    /** what a folded note says to a screen reader after its words (default: cardds's own word, "Unread" / "ยังไม่ได้อ่าน" by the page's language) */
+    unreadLabel?: string;
     /** a row at the top of the note — a date, a small picture, a label */
     head?: ReactNode;
     /** a StickyDate at the end of the head — the note's top-right corner */
     date?: ReactNode;
-    /** turned a little on its middle (the one note of a start screen); a note is straight otherwise */
+    /** turned a little on its middle (the one note of a start screen); a note is straight otherwise, unless its holder turns it (`StickyBoard`, `StickyThread lapped`) */
     tilt?: 'left' | 'right';
     /** a small muted line at the bottom ("From …") */
     foot?: ReactNode;
@@ -23,7 +23,9 @@ export interface StickyProps extends Omit<ComponentProps<'div'>, 'onClick'> {
     stuck?: ReactNode;
 }
 /**
- * Sticky — a paper note: a flat pastel block, straight, its bottom-right corner folded over, a soft shadow under it.
+ * Sticky — a paper note: a flat pastel SQUARE of one size (168, the knob `--sticky-size`), square corners, a soft shadow under it.
+ * Every note is that one square whatever it says: words it cannot hold are cut, never the note grown.
+ * THE FOLD SAYS UNREAD: the bottom-right corner folded over = not read yet; `flat` = read. A folded note says so to a screen reader too (`unreadLabel`).
  * The outer box holds the tone and the shadow; the paper inside is the part that is cut (a clip would cut the shadow too).
  */
-export declare function Sticky({ tone, flat, square, head, date, tilt, foot, corner, stuck, onClick, className, children, ...rest }: StickyProps): import("react").JSX.Element;
+export declare function Sticky({ tone, flat, unreadLabel, head, date, tilt, foot, corner, stuck, onClick, className, children, ...rest }: StickyProps): import("react").JSX.Element;

package/dist/sticky/Sticky.js

@@ -1,14 +1,17 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
+import { word } from '../words.js';
 /**
- * Sticky — a paper note: a flat pastel block, straight, its bottom-right corner folded over, a soft shadow under it.
+ * Sticky — a paper note: a flat pastel SQUARE of one size (168, the knob `--sticky-size`), square corners, a soft shadow under it.
+ * Every note is that one square whatever it says: words it cannot hold are cut, never the note grown.
+ * THE FOLD SAYS UNREAD: the bottom-right corner folded over = not read yet; `flat` = read. A folded note says so to a screen reader too (`unreadLabel`).
  * The outer box holds the tone and the shadow; the paper inside is the part that is cut (a clip would cut the shadow too).
  */
-export function Sticky({ tone = 'custard', flat, square, head, date, tilt, foot, corner, stuck, onClick, className, children, ...rest }) {
+export function Sticky({ tone = 'custard', flat, unreadLabel, head, date, tilt, foot, corner, stuck, onClick, className, children, ...rest }) {
     const notched = corner != null;
     const tap = onClick != null && !notched;
     const Box = (tap ? 'button' : 'div');
     const Part = tap ? 'span' : 'div';
     const boxProps = (tap ? { type: 'button', onClick, ...rest } : rest);
-    return (_jsxs(Box, { className: cx('sticky', `sticky--${tone}`, flat && 'sticky--flat', square && 'sticky--square', notched && 'sticky--corner', tilt && `sticky--tilt-${tilt}`, tap && 'sticky--tap', className), ...boxProps, children: [_jsxs(Part, { className: "sticky__paper", children: [(head != null || date != null) && _jsxs(Part, { className: "sticky__head", children: [head, date] }), _jsx(Part, { className: "sticky__body", children: children }), foot != null && _jsx(Part, { className: "sticky__foot", children: foot }), !flat && !notched && _jsx("span", { className: "sticky__fold", "aria-hidden": "true" })] }), stuck != null && _jsx(Part, { className: "sticky__stuck", children: stuck }), notched && _jsx("div", { className: "sticky__corner", children: corner })] }));
+    return (_jsxs(Box, { className: cx('sticky', `sticky--${tone}`, flat && 'sticky--flat', notched && 'sticky--corner', tilt && `sticky--tilt-${tilt}`, tap && 'sticky--tap', className), ...boxProps, children: [_jsxs(Part, { className: "sticky__paper", children: [(head != null || date != null) && _jsxs(Part, { className: "sticky__head", children: [head, date] }), _jsx(Part, { className: "sticky__body", children: children }), foot != null && _jsx(Part, { className: "sticky__foot", children: foot }), !flat && !notched && _jsx("span", { className: "sticky__fold", "aria-hidden": "true" }), !flat && !notched && _jsx("span", { className: "sticky__state t-sr", children: unreadLabel ?? word('unread') })] }), stuck != null && _jsx(Part, { className: "sticky__stuck", children: stuck }), notched && _jsx("div", { className: "sticky__corner", children: corner })] }));
 }

package/dist/sticky/StickyAnswer.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export type StickyAnswerReason = 'focus' | 'outside' | 'escape';
+export interface StickyAnswerProps extends ComponentProps<'div'> {
+    /** CONTROLLED: the note is being written on (at the top, the screen behind washed out) — with `onWritingChange`; or `defaultWriting` */
+    writing?: boolean;
+    /** UNCONTROLLED: starts being written on (default false: the note waits at the foot) */
+    defaultWriting?: boolean;
+    /** it asks: to write — the cursor went into the note (`focus`); to stop — a touch outside (`outside`) or Escape (`escape`). The phone's back and sending are the app's: it sets `writing` */
+    onWritingChange?: (writing: boolean, reason: StickyAnswerReason) => void;
+    /** the row under the note while it is written on: the paper chooser at the start (a `StickyPick`), the send button at the end (an `IconBtn`) */
+    tools?: ReactNode;
+    /** what stands under that row — the stamp the writer may stick on the note (a `StampCell on` button), a line of words */
+    tray?: ReactNode;
+}
+/**
+ * StickyAnswer — the note you answer on, and its two places. The child is the note itself: a `Sticky flat` holding a `StickyField` (give it
+ * a `placeholder`: the pale word). AT REST it waits at the screen's foot, near the right, three quarters of it in sight. A touch on it puts
+ * the cursor in the field, and the holder ASKS to write: the note goes to the top of the screen, the screen behind is washed pale and takes
+ * no touch, and `tools` and `tray` wake under it (inert until then). The note keeps the one size in both places. A child of the `Screen`,
+ * a layer over it. Controlled like an input: `writing` + `onWritingChange(writing, reason)`, or `defaultWriting`; the words, the paper and
+ * what is stuck on the note are the app's, on the parts it passes in. When writing ends the cursor leaves the note, so the keyboard goes down.
+ */
+export declare function StickyAnswer({ writing, defaultWriting, onWritingChange, tools, tray, className, children, onKeyDown, ...rest }: StickyAnswerProps): import("react").JSX.Element;

package/dist/sticky/StickyAnswer.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { cx } from '../cx.js';
+import { useControlled } from '../state.js';
+/**
+ * StickyAnswer — the note you answer on, and its two places. The child is the note itself: a `Sticky flat` holding a `StickyField` (give it
+ * a `placeholder`: the pale word). AT REST it waits at the screen's foot, near the right, three quarters of it in sight. A touch on it puts
+ * the cursor in the field, and the holder ASKS to write: the note goes to the top of the screen, the screen behind is washed pale and takes
+ * no touch, and `tools` and `tray` wake under it (inert until then). The note keeps the one size in both places. A child of the `Screen`,
+ * a layer over it. Controlled like an input: `writing` + `onWritingChange(writing, reason)`, or `defaultWriting`; the words, the paper and
+ * what is stuck on the note are the app's, on the parts it passes in. When writing ends the cursor leaves the note, so the keyboard goes down.
+ */
+export function StickyAnswer({ writing, defaultWriting = false, onWritingChange, tools, tray, className, children, onKeyDown, ...rest }) {
+    const [shown, request] = useControlled(writing, defaultWriting, onWritingChange);
+    const box = useRef(null);
+    const note = useRef(null);
+    const was = useRef(shown);
+    /* the cursor follows the state when the app moved it (never on mount: a page of stories must not lose its cursor to one) */
+    useEffect(() => {
+        if (was.current === shown)
+            return;
+        was.current = shown;
+        const held = document.activeElement;
+        if (shown && !note.current?.contains(held))
+            note.current?.querySelector('textarea, input')?.focus();
+        if (!shown && held instanceof HTMLElement && box.current?.contains(held))
+            held.blur();
+    }, [shown]);
+    const key = (e) => {
+        onKeyDown?.(e);
+        if (e.key === 'Escape' && shown)
+            request(false, 'escape');
+    };
+    return (_jsxs("div", { ref: box, className: cx('sticky-answer', shown && 'sticky-answer--writing', className), onKeyDown: key, ...rest, children: [_jsx("div", { className: "sticky-answer__scrim", onClick: () => request(false, 'outside') }), _jsx("div", { ref: note, className: "sticky-answer__note", onFocus: () => request(true, 'focus'), children: children }), (tools != null || tray != null) && (_jsxs("div", { className: "sticky-answer__under", inert: !shown, children: [tools != null && _jsx("div", { className: "sticky-answer__tools", children: tools }), tray != null && _jsx("div", { className: "sticky-answer__tray", children: tray })] }))] }));
+}

package/dist/sticky/StickyBoard.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+export interface StickyBoardProps extends ComponentProps<'div'> {
+}
+/**
+ * StickyBoard — Sticky notes stuck on a page: rows that wrap by the width (two on a phone, three on a wider screen), edge to edge,
+ * each note turned a little by one of four unlike angles in turn, so no two notes that touch lean alike. LATER = ON TOP: where two cross, the right one
+ * lies over the left and the lower over the upper — the order of the children is the order they lie in. A note here is the same note as
+ * where it is opened: its words, breaking exactly as they do there, the stamps really stuck on it, and — laid over the note's foot, taking no room from
+ * the words — its `foot`: whose it is as a small label at the start (`Chip sm`) and the time at the end. Knobs: `--sticky-board-lap` (how far each lies over the one
+ * before, 0), `--sticky-board-turn-1` … `-4` (the four angles), `--sticky-board-drop`.
+ */
+export declare function StickyBoard({ className, ...rest }: StickyBoardProps): import("react").JSX.Element;

package/dist/sticky/StickyBoard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/**
+ * StickyBoard — Sticky notes stuck on a page: rows that wrap by the width (two on a phone, three on a wider screen), edge to edge,
+ * each note turned a little by one of four unlike angles in turn, so no two notes that touch lean alike. LATER = ON TOP: where two cross, the right one
+ * lies over the left and the lower over the upper — the order of the children is the order they lie in. A note here is the same note as
+ * where it is opened: its words, breaking exactly as they do there, the stamps really stuck on it, and — laid over the note's foot, taking no room from
+ * the words — its `foot`: whose it is as a small label at the start (`Chip sm`) and the time at the end. Knobs: `--sticky-board-lap` (how far each lies over the one
+ * before, 0), `--sticky-board-turn-1` … `-4` (the four angles), `--sticky-board-drop`.
+ */
+export function StickyBoard({ className, ...rest }) {
+    return _jsx("div", { className: cx('sticky-board', className), ...rest });
+}

package/dist/sticky/StickyThread.d.ts

@@ -2,21 +2,27 @@ import type { ComponentProps, ReactNode } from 'react';
 export interface StickyThreadProps extends ComponentProps<'div'> {
     /** a dotted line running down under the avatars, post to post (a feed) */
     rail?: boolean;
+    /** a chat with NO head rows: theirs at the left, mine at the right, each turn lying over a corner of the one before, turned a little; a post's `time` stands close under its note, its `who` is not drawn and its `name` is only heard. Not with `rail` */
+    lapped?: boolean;
 }
-/** StickyThread — a stack of StickyPosts: a chat or a feed told in notes. */
-export declare function StickyThread({ rail, className, ...rest }: StickyThreadProps): import("react").JSX.Element;
+/**
+ * StickyThread — a stack of StickyPosts: a chat or a feed told in notes. Two ways: head rows (avatar · name · time above each turn; `rail` for a feed),
+ * or `lapped` — the chat of paper notes lying over one another, the name once in the screen's top bar. Later turns lie on top.
+ */
+export declare function StickyThread({ rail, lapped, className, ...rest }: StickyThreadProps): import("react").JSX.Element;
 export interface StickyPostProps extends ComponentProps<'div'> {
-    /** who wrote it (an Avatar) */
+    /** who wrote it (an Avatar); not drawn in a `lapped` thread */
     who?: ReactNode;
-    /** their name, beside the avatar */
+    /** their name, beside the avatar; in a `lapped` thread it is only heard by a screen reader */
     name?: ReactNode;
-    /** when, at the far end of the head row */
+    /** when, at the far end of the head row; in a `lapped` thread, close under the note on its own side */
     time?: ReactNode;
     /** whose: theirs on the left (default), mine on the right */
     side?: 'left' | 'right';
 }
 /**
  * StickyPost — one person's turn: a head row (avatar · name · time at the far end) and, under the name, their Sticky notes.
- * `side="right"` mirrors it. The rail mark is always there; only a `StickyThread rail` draws it.
+ * `side="right"` mirrors it. The rail mark is always there; only a `StickyThread rail` draws it. In a `StickyThread lapped` the same
+ * turn is the note alone, at its side, with the time under it.
  */
 export declare function StickyPost({ who, name, time, side, className, children, ...rest }: StickyPostProps): import("react").JSX.Element;

package/dist/sticky/StickyThread.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** StickyThread — a stack of StickyPosts: a chat or a feed told in notes. */
-export function StickyThread({ rail, className, ...rest }) {
-    return _jsx("div", { className: cx('sticky-thread', rail && 'sticky-thread--rail', className), ...rest });
+/**
+ * StickyThread — a stack of StickyPosts: a chat or a feed told in notes. Two ways: head rows (avatar · name · time above each turn; `rail` for a feed),
+ * or `lapped` — the chat of paper notes lying over one another, the name once in the screen's top bar. Later turns lie on top.
+ */
+export function StickyThread({ rail, lapped, className, ...rest }) {
+    return _jsx("div", { className: cx('sticky-thread', rail && !lapped && 'sticky-thread--rail', lapped && 'sticky-thread--lapped', className), ...rest });
 }
 /**
  * StickyPost — one person's turn: a head row (avatar · name · time at the far end) and, under the name, their Sticky notes.
- * `side="right"` mirrors it. The rail mark is always there; only a `StickyThread rail` draws it.
+ * `side="right"` mirrors it. The rail mark is always there; only a `StickyThread rail` draws it. In a `StickyThread lapped` the same
+ * turn is the note alone, at its side, with the time under it.
  */
 export function StickyPost({ who, name, time, side = 'left', className, children, ...rest }) {
     return (_jsxs("div", { className: cx('sticky-post', side === 'right' && 'sticky-post--right', className), ...rest, children: [who != null && _jsx("span", { className: "sticky-post__who", children: who }), _jsxs("div", { className: "sticky-post__head", children: [name != null && _jsx("span", { className: "sticky-post__name", children: name }), time != null && _jsx("span", { className: "sticky-post__time", children: time })] }), _jsx("span", { className: "sticky-post__rail", "aria-hidden": "true" }), _jsx("div", { className: "sticky-post__notes", children: children })] }));

package/dist/words.d.ts

@@ -1,4 +1,4 @@
-export type WordKey = 'resize' | 'back' | 'next' | 'previous' | 'skip' | 'digit' | 'progress' | 'image' | 'mood' | 'photos' | 'voiceNote' | 'play' | 'pause' | 'to' | 'turnToBack' | 'turnToPicture' | 'message' | 'address' | 'toMessage' | 'toAddress' | 'stampOn' | 'stampOff' | 'stamps';
+export type WordKey = 'resize' | 'back' | 'next' | 'previous' | 'skip' | 'digit' | 'progress' | 'image' | 'mood' | 'photos' | 'voiceNote' | 'play' | 'pause' | 'to' | 'turnToBack' | 'turnToPicture' | 'message' | 'address' | 'toMessage' | 'toAddress' | 'stampOn' | 'stampOff' | 'stamps' | 'unread';
 type Words = Record<WordKey, string>;
 /** add or retune the words for a language (`'lo'`, or `'th'` to change one) — once, at app start. Missing words fall back to English. */
 export declare function setWords(lang: string, words: Partial<Words>): void;

package/dist/words.js

@@ -1,8 +1,8 @@
 const sets = {
     en: { resize: 'Resize', back: 'Back', next: 'Next', previous: 'Previous', skip: 'Skip', digit: 'Digit', progress: 'Progress', image: 'Image', mood: 'Mood', photos: 'Photos', voiceNote: 'Voice note',
-        play: 'Play', pause: 'Pause', to: 'To', turnToBack: 'See the back', turnToPicture: 'See the picture', message: 'Message', address: 'Address', toMessage: 'Back to the message', toAddress: 'On to the address', stampOn: 'Stick a stamp', stampOff: 'Take the stamp off', stamps: 'Choose a stamp' },
+        play: 'Play', pause: 'Pause', to: 'To', turnToBack: 'See the back', turnToPicture: 'See the picture', message: 'Message', address: 'Address', toMessage: 'Back to the message', toAddress: 'On to the address', stampOn: 'Stick a stamp', stampOff: 'Take the stamp off', stamps: 'Choose a stamp', unread: 'Unread' },
     th: { resize: 'ปรับความสูง', back: 'กลับ', next: 'ถัดไป', previous: 'ก่อนหน้า', skip: 'ข้าม', digit: 'หลักที่', progress: 'ความคืบหน้า', image: 'รูปภาพ', mood: 'อารมณ์', photos: 'รูปภาพ', voiceNote: 'ข้อความเสียง',
-        play: 'ฟังเสียง', pause: 'หยุดเสียง', to: 'ถึง', turnToBack: 'พลิกดูด้านหลัง', turnToPicture: 'พลิกดูรูป', message: 'ข้อความ', address: 'จ่าหน้า', toMessage: 'เลื่อนกลับไปข้อความ', toAddress: 'เลื่อนไปจ่าหน้า', stampOn: 'ติดแสตมป์', stampOff: 'แกะแสตมป์ออก', stamps: 'เลือกแสตมป์' },
+        play: 'ฟังเสียง', pause: 'หยุดเสียง', to: 'ถึง', turnToBack: 'พลิกดูด้านหลัง', turnToPicture: 'พลิกดูรูป', message: 'ข้อความ', address: 'จ่าหน้า', toMessage: 'เลื่อนกลับไปข้อความ', toAddress: 'เลื่อนไปจ่าหน้า', stampOn: 'ติดแสตมป์', stampOff: 'แกะแสตมป์ออก', stamps: 'เลือกแสตมป์', unread: 'ยังไม่ได้อ่าน' },
 };
 /** add or retune the words for a language (`'lo'`, or `'th'` to change one) — once, at app start. Missing words fall back to English. */
 export function setWords(lang, words) {

package/lib/catalog.mjs

@@ -71,6 +71,7 @@ export function get(cat, name, { html = false, all = false } = {}) {
     ...(c.role && { role: c.role }),
     element: c.element,
     props: c.props.map((p) => ({ ...p, ...(isSlot(p.type) && { slot: true }) })),
+    ...(c.params && { params: c.params }),
     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) }),
   };

package/lib/mcp.mjs

@@ -10,7 +10,7 @@ import { GUIDE } from './guide.mjs';
 const { version } = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), '..', 'package.json'), 'utf8'));
 /* A server lives as long as its session — hours, across releases. What it serves must be the catalog as it is NOW (Lh 2026-10-10: a
    session opened the day before did not know CardFeed): `keeper` asks `stamp` before every answer and loads again when it changed. */
-const SOURCES = ['src', 'css', '.design-sync/previews', 'docs', 'lib', 'scripts'];
+const SOURCES = ['src', 'css', '.design-sync/previews', 'docs', 'lib', 'scripts', 'package.json', 'gallery/vite.config.ts']; // the last two are read by the build too: the version, and how the stories render
 const newest = (path) => {
   let st;
   try { st = statSync(path); } catch { return 0; }

package/lib/role.mjs

@@ -1,19 +1,27 @@
 // lib/role.mjs — the role table (docs/roles.md) read, and what a role says a component is FOR. Pure, no fs: the catalog (node), scripts/roles.mjs
 // and the gallery's nav (browser) all read the table through these.
 const AXES = ['represents', 'count', 'density', 'job'];
+/** @returns {never} */
+const fail = (component, stands) => { throw new Error(`roles: ${component}: cannot read "stands in for": ${stands}`); };
 const values = (cell) => cell.trim().split(' · ').map((v) => v.trim()).filter(Boolean);
 
 /** the text of docs/roles.md → `vocabulary` (each axis's closed values) and `rows` (one per component). Hand-written; the vocabulary is the
- *  table's own definition lines, so a value outside it is the test's to catch, not this reader's. */
+ *  table's own definition lines, so a value outside it is the test's to catch, not this reader's.
+ *  @param {string} doc */
 export function parseRoles(doc) {
   const vocabulary = Object.fromEntries([...doc.matchAll(/^- `([a-z]+)`: (.+)$/gm)].filter((m) => AXES.includes(m[1])).map((m) => [m[1], values(m[2])]));
-  const rows = [...doc.matchAll(/^\| (?!component )([A-Za-z]\w*) \| ([a-z]+) \|(.*)\|$/gm)].map((m) => {
+  // every line of the table is a row, its header or its rule: one that is none of them is an error — a regex over the whole text would drop it
+  // and the component would simply have no role.
+  const ROW = /^\| ([A-Za-z]\w*) \| ([a-z]+) \|(.*)\|$/;
+  const rows = doc.split('\n').filter((line) => line.startsWith('|') && !/^\| component \|/.test(line) && !/^\|[-| ]+$/.test(line)).map((line) => {
+    const m = ROW.exec(line);
+    if (!m) throw new Error(`roles: cannot read this table line: ${line}`);
     const [represents, count, density, job, stands, note] = m[3].split('|').map((c) => c.trim());
     return {
       component: m[1],
       group: m[2],
       represents: values(represents), count: values(count), density: values(density), job: values(job),
-      standsInFor: stands ? stands.split(';').map((s) => s.trim().match(/^(\w+)(?: \((.*)\))?$/)).map((x) => ({ name: x[1], condition: x[2] ?? '' })) : [],
+      standsInFor: stands ? stands.split(';').map((s) => s.trim().match(/^(\w+)(?: \((.*)\))?$/) ?? fail(m[1], stands)).map((x) => ({ name: x[1], condition: x[2] ?? '' })) : [],
       note: note.replace(/^\?\s*/, ''),
       unsure: note.startsWith('?'),
     };

package/lint/rules.mjs

@@ -12,7 +12,7 @@ const CSS_DIR = join(dirname(fileURLToPath(import.meta.url)), '..', 'css');
 /** the props whose default is cardds's own word (src/words.ts), per component — a `label` that is a control's required accessible name (IconBtn, Fab, Pin…) is not here */
 export const CONTROL_NAMES = {
   Sheet: ['handle'], CallSheet: ['handle'], StackSheet: ['backLabel'], Home: ['backLabel'], Walkthrough: ['backLabel', 'nextLabel'],
-  Calendar: ['prevLabel', 'nextLabel'], SheetStep: ['skipLabel'], PostLetter: ['backLabel', 'pictureLabel', 'playLabel', 'pauseLabel', 'toLabel'],
+  Calendar: ['prevLabel', 'nextLabel'], SheetStep: ['skipLabel'], Sticky: ['unreadLabel'], PostLetter: ['backLabel', 'pictureLabel', 'playLabel', 'pauseLabel', 'toLabel'],
 };
 
 const lineOf = (text, idx) => text.slice(0, idx).split('\n').length;
@@ -28,7 +28,12 @@ export function carddsClasses(dir = CSS_DIR) {
       .replace(/\/\*[\s\S]*?\*\//g, '')
       .replace(/url\([^)]*\)/g, '')
       .replace(/"[^"]*"|'[^']*'/g, '');
-    for (const m of css.matchAll(/(?<![\w\\-])\.(-?[a-zA-Z_][\w-]*)/g)) if (!/^(is|has)-/.test(m[1])) set.add(m[1]); // a bare state word (`is-open`) is every project's too — it only matters beside a cardds class, which is caught
+    // only a selector can name a class: the text in front of a `{`. A `.` after a word character is a class too (`.field.field--error`) — the lookbehind this
+    // used to have for numbers (`1.5rem`) is not needed here, and it cost every class that only ever stands second in a compound selector.
+    for (const sel of css.matchAll(/([^{};]+)\{/g)) {
+      if (sel[1].trimStart().startsWith('@')) continue;
+      for (const m of sel[1].matchAll(/(?<!\\)\.(-?[a-zA-Z_][\w-]*)/g)) if (!/^(is|has)-/.test(m[1])) set.add(m[1]); // a bare state word (`is-open`) is every project's too — it only matters beside a cardds class, which is caught
+    }
   }
   if (dir === CSS_DIR) classes = set;
   return set;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.82",
+  "version": "0.7.84",
   "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.",