@usableapp/cardds 0.7.81 → 0.7.83

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/sheets/Modal.d.ts

@@ -30,7 +30,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

@@ -58,7 +58,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

@@ -29,7 +29,8 @@ export interface StampPlaceProps extends Omit<ComponentProps<'span'>, 'onClick'>
     onClick?: () => void;
 }
 /**
- * StampPlace — an empty place for a stamp: a dashed 4:5 frame the size a Stamp would be, a word or an Icon inside.
- * The dashes are a stroke, not a border: `--stamp-place-dash` and `--stamp-place-gap` set them.
+ * 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.
+ * 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.
  */
 export declare function StampPlace({ faint, onClick, className, children, ...rest }: StampPlaceProps): import("react").JSX.Element;

package/dist/stamp/Stamp.js

@@ -13,8 +13,9 @@ 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 dashed 4:5 frame the size a Stamp would be, a word or an Icon inside.
- * The dashes are a stroke, not a border: `--stamp-place-dash` and `--stamp-place-gap` set them.
+ * 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.
+ * 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.
  */
 export function StampPlace({ faint, onClick, className, children, ...rest }) {
     const tap = onClick != null;

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.81",
+  "version": "0.7.83",
   "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.",