@usableapp/cardds 0.7.85 → 0.7.87

package/dist/sticky/Sticky.d.ts

@@ -13,13 +13,13 @@ export interface StickyProps extends Omit<ComponentProps<'div'>, 'onClick'> {
     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, unless its holder turns it (`StickyBoard`, `StickyThread lapped`) */
+    /** turned a little on its middle (the one note of a start screen); a note is straight otherwise, unless its holder turns it (`StickyBoard`, `StickyPile`, `StickyThread lapped`) */
     tilt?: 'left' | 'right';
     /** a small muted line at the bottom ("From …") */
     foot?: ReactNode;
     /** a control (an IconBtn) standing on the bottom-right corner, half outside the note; the note then has no fold */
     corner?: ReactNode;
-    /** things stuck ON the note, each placing itself over the paper (a `StampOn`) — a layer the size of the note, in front of the words */
+    /** things stuck ON the note, each placing itself over the paper (a `StampOn`: the small stamp, or `main` for the main size) — a layer the size of the note, in front of the words */
     stuck?: ReactNode;
 }
 /**

package/dist/sticky/Sticky.js

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
+import { pressable } from '../pressable.js';
 import { word } from '../words.js';
 /**
  * Sticky — a paper note: a flat pastel SQUARE of one size (168, the knob `--sticky-size`), square corners, a soft shadow under it.
@@ -9,9 +10,7 @@ import { word } from '../words.js';
  */
 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 { tap, Box, boxProps } = pressable(notched ? undefined : onClick, 'div', rest);
     const Part = tap ? 'span' : 'div';
-    const boxProps = (tap ? { type: 'button', onClick, ...rest } : rest);
     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/StickyPile.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentProps } from 'react';
+export interface StickyPileProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+    /** the whole pile is ONE button: it renders a `<button>` over the notes and says that it was pressed — one note or many, and where the press goes, is the app's. Without it the pile only shows. A `Sticky` inside with an `onClick` of its own is misuse (two buttons for one pile): the pile warns once */
+    onClick?: () => void;
+    /** the pile's accessible name, REQUIRED with `onClick` (the notes' words are not read by the button): say how many and from whom, in the app's words. Warns once without it */
+    label?: string;
+}
+/**
+ * StickyPile — ONE to SIX `Sticky` notes lying one over another, as the newest notes of a feed do. The FIRST child is on top (the app passes
+ * the newest first); each note under it is shifted a step right and down, so a strip of it peeks out (`--sticky-pile-step-x`, 24, and
+ * `--sticky-pile-step-y`, 8) and turned a little by the same four angles as `StickyBoard` (−3° · 1.5° · 2.75° · −1.75°, by the child's place,
+ * so the top note's turn is the same whether the pile holds one note or six). Only the top note draws its `foot`: a cut time under another note is
+ * noise. A pile of one is that note, centred, with its foot. A seventh note is not drawn (a warning, once).
+ * The pile is centred in its column and never wider than it: a column too narrow for the steps shortens them (a lone note's width is the least it takes).
+ * It knows nothing of a feed or a home: in a Home's `base` it stands above a `CardFeed`, and the app writes both.
+ * With `onClick` the whole pile is one control with a name (`label`): one Tab stop, a ring round the pile, dimmed while it is held.
+ * A `StampOn` on the TOP note keeps its own touch — dragging it, or pressing its cross, never presses the pile — and the stamps on the notes under it are inert
+ * (no drag, no cross, no focus: they only show what peeks out), whatever the app passed.
+ */
+export declare function StickyPile({ onClick, label, className, style, children, ...rest }: StickyPileProps): import("react").JSX.Element;

package/dist/sticky/StickyPile.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { cx } from '../cx.js';
+import { warnOnce } from '../state.js';
+import { UnderNotes } from '../stamp/underNotes.js';
+/** most notes a pile draws; a seventh is dropped, as a Stamp drops a fifth picture */
+const MOST = 6;
+/**
+ * StickyPile — ONE to SIX `Sticky` notes lying one over another, as the newest notes of a feed do. The FIRST child is on top (the app passes
+ * the newest first); each note under it is shifted a step right and down, so a strip of it peeks out (`--sticky-pile-step-x`, 24, and
+ * `--sticky-pile-step-y`, 8) and turned a little by the same four angles as `StickyBoard` (−3° · 1.5° · 2.75° · −1.75°, by the child's place,
+ * so the top note's turn is the same whether the pile holds one note or six). Only the top note draws its `foot`: a cut time under another note is
+ * noise. A pile of one is that note, centred, with its foot. A seventh note is not drawn (a warning, once).
+ * The pile is centred in its column and never wider than it: a column too narrow for the steps shortens them (a lone note's width is the least it takes).
+ * It knows nothing of a feed or a home: in a Home's `base` it stands above a `CardFeed`, and the app writes both.
+ * With `onClick` the whole pile is one control with a name (`label`): one Tab stop, a ring round the pile, dimmed while it is held.
+ * A `StampOn` on the TOP note keeps its own touch — dragging it, or pressing its cross, never presses the pile — and the stamps on the notes under it are inert
+ * (no drag, no cross, no focus: they only show what peeks out), whatever the app passed.
+ */
+export function StickyPile({ onClick, label, className, style, children, ...rest }) {
+    const all = Children.toArray(children).filter((c) => isValidElement(c));
+    if (all.length > MOST)
+        warnOnce('sticky-pile-most', `cardds StickyPile: ${all.length} notes — at most six are drawn; show the rest elsewhere`);
+    const notes = all.slice(0, MOST);
+    const tap = onClick != null;
+    if (tap && label == null)
+        warnOnce('sticky-pile-label', 'cardds StickyPile: onClick without a label — the pile is one button and the notes\' words are not its name');
+    if (tap && notes.some((n) => n.props.onClick != null))
+        warnOnce('sticky-pile-tap', 'cardds StickyPile: a Sticky with its own onClick inside a pile that has one — two buttons for one pile; give the pile the onClick');
+    return (_jsx("div", { className: cx('sticky-pile', tap && 'sticky-pile--tap', className), style: { '--_n': notes.length, ...style }, ...rest, children: _jsxs("div", { className: "sticky-pile__notes", children: [notes.map((note, i) => _jsx(UnderNotes.Provider, { value: i > 0, children: note }, note.key)), tap && _jsx("button", { type: "button", className: "sticky-pile__press", "aria-label": label, onClick: onClick })] }) }));
+}

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' | 'unread';
+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' | 'remove';
 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', unread: 'Unread' },
+        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', remove: 'Remove' },
     th: { resize: 'ปรับความสูง', back: 'กลับ', next: 'ถัดไป', previous: 'ก่อนหน้า', skip: 'ข้าม', digit: 'หลักที่', progress: 'ความคืบหน้า', image: 'รูปภาพ', mood: 'อารมณ์', photos: 'รูปภาพ', voiceNote: 'ข้อความเสียง',
-        play: 'ฟังเสียง', pause: 'หยุดเสียง', to: 'ถึง', turnToBack: 'พลิกดูด้านหลัง', turnToPicture: 'พลิกดูรูป', message: 'ข้อความ', address: 'จ่าหน้า', toMessage: 'เลื่อนกลับไปข้อความ', toAddress: 'เลื่อนไปจ่าหน้า', stampOn: 'ติดแสตมป์', stampOff: 'แกะแสตมป์ออก', stamps: 'เลือกแสตมป์', unread: 'ยังไม่ได้อ่าน' },
+        play: 'ฟังเสียง', pause: 'หยุดเสียง', to: 'ถึง', turnToBack: 'พลิกดูด้านหลัง', turnToPicture: 'พลิกดูรูป', message: 'ข้อความ', address: 'จ่าหน้า', toMessage: 'เลื่อนกลับไปข้อความ', toAddress: 'เลื่อนไปจ่าหน้า', stampOn: 'ติดแสตมป์', stampOff: 'แกะแสตมป์ออก', stamps: 'เลือกแสตมป์', unread: 'ยังไม่ได้อ่าน', remove: 'เอาออก' },
 };
 /** 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

@@ -29,8 +29,10 @@ const representsOf = ({ represents }) => represents.filter((v) => v !== '—');
 
 /** the names only — the first call of nearly every session, so it stays small. `group` is the src folder; `represents`, `shape` and `interact` say what it is for */
 export const list = (cat) => cat.components.map(({ name, group, role }) => ({ name, group, represents: representsOf(role), shape: shapeOf(role), interact: interactOf(role) }));
+/** the finishes of the paper (`data-finish`, css/finish.css): a style apart from colour, not a component — each with what it is and its knobs */
+export const finishes = (cat) => cat.finishes ?? [];
 
-const sentence = (text) => {
+export const sentence = (text) => {
   const flat = text.replace(/\s+/g, ' ').trim();
   const one = flat.match(/^.*?[.!?](?=\s|$)/)?.[0] ?? flat;
   return one.length > 160 ? `${one.slice(0, 157)}…` : one;
@@ -56,7 +58,7 @@ const closest = (names, wanted) => {
   return [...names].sort((a, b) => rank(a) - rank(b)).slice(0, 5);
 };
 
-/** one component: its props (a ReactNode prop is a slot) and its variations — the stories of its own file first, then a few that use it */
+/** one component: its props (a ReactNode prop is a slot), what it composes and what composes it, its knobs, and its variations — the stories of its own file first, then a few that use it */
 export function get(cat, name, { html = false, all = false } = {}) {
   const c = cat.components.find((x) => x.name.toLowerCase() === String(name).toLowerCase());
   if (!c) return { error: `no component "${name}"`, closest: closest(cat.components.map((x) => x.name), String(name)) };
@@ -72,6 +74,9 @@ export function get(cat, name, { html = false, all = false } = {}) {
     element: c.element,
     props: c.props.map((p) => ({ ...p, ...(isSlot(p.type) && { slot: true }) })),
     ...(c.params && { params: c.params }),
+    composes: c.composes,
+    composedBy: c.composedBy,
+    knobs: c.knobs,
     variations: [...own, ...elsewhere.filter((s) => shown.includes(s))].map(show),
     ...(elsewhere.length > shown.length && { alsoUsedIn: elsewhere.filter((s) => !shown.includes(s)).map((s) => s.id) }),
   };
@@ -82,6 +87,7 @@ const STOP = new Set(['the', 'and', 'for', 'with', 'from', 'that', 'this', 'into
 const tokens = (query) => [...new Set(words(String(query)).filter((t) => t.length > 1 && !STOP.has(t)))];
 const stem = (t) => (t.length > 3 && t.endsWith('s') ? t.slice(0, -1) : t);
 const hits = (text, token) => words(text).some((w) => w.startsWith(token) || w.startsWith(stem(token)));
+const isName = (name, token) => name.toLowerCase() === token || name.toLowerCase() === stem(token);
 
 const TOP = 8; // answers per kind; the components that match every axis are never cut
 
@@ -119,7 +125,7 @@ const matchesUnion = (roles, want) => roles.length > 0
 /** short ranked answer to "what is there for this?". `axes` ({ represents?, shape?, interact? } — what it represents, how many, what the member can do with it) are
  *  asked first: whatever matches every one of them (a component, or a screen where one component does, then a screen whose parts do between them) ranks above whatever matches only words;
  *  with axes and no words they are the whole answer. Among screens that tie on words, the one whose description says the axes comes first, then the one where a single component matches them all.
- *  Then the words: screens already drawn, then components, then what they are used with.
+ *  Then the words: screens already drawn, then components, then what they are used with — a screen that answers fewer of the words than the best component comes after the components.
  *  A query that matches nothing (another language, say) returns `fallback: true`, a hint and how many screens are drawn — not their ids:
  *  they did not help to choose; ask again in English or by the axes, or `scaffold` with no id lists them. */
 export function find(cat, query, axes = {}) {
@@ -129,11 +135,11 @@ export function find(cat, query, axes = {}) {
   const roles = new Map(cat.components.map((c) => [c.name, roleOf(c)]));
   const toks = tokens(query);
   const axisWords = [...(asked.want.represents ?? []), ...(asked.want.interact || [])]; // the axis values as words: a screen's own description may say them
-  const rank = (items, fields, level, said = () => 0) => {
+  const rank = (items, fields, level, said = () => 0) => { // a field is [text, weight, match = hits]
     const scored = items.map((item) => {
       let matched = 0, score = 0;
       for (const t of toks) {
-        const w = fields(item).filter(([text]) => hits(text, t)).reduce((sum, [, weight]) => sum + weight, 0);
+        const w = fields(item).filter(([text, , match = hits]) => match(text, t)).reduce((sum, [, weight]) => sum + weight, 0);
         if (w) { matched++; score += w; }
       }
       return { item, matched, score, level: active ? level(item) : 0, said: active ? said(item) : 0 };
@@ -152,9 +158,20 @@ export function find(cat, query, axes = {}) {
   };
   const said = (s) => axisWords.filter((v) => hits(s.description, v)).length;
   const [screenAxis, screenRest] = tier(rank(screens, (s) => [[s.id, 5], [s.description, 3], [s.uses.join(' '), 1]], level, said), TOP);
-  const components = rank(cat.components, (c) => [[c.name, 6], [c.description, 2], [c.props.map((p) => p.name).join(' '), 1]], (c) => Number(matches(roles.get(c.name), asked.want)));
+  // a component is found by its name (the name that IS the word counts as much again as one that contains it: "card" is Card before FeedCard, whatever
+  // their other words say), its description, its role's note (what it is FOR, in the words of a request: "a setting turned on or off") and what it stands in for, then its prop names
+  const components = rank(cat.components, (c) => [[c.name, 6, isName], [c.name, 6], [c.description, 2], [c.role?.note ?? '', 2], [(c.role?.standsInFor ?? []).map((s) => `${s.name} ${s.condition}`).join(' '), 1], [c.props.map((p) => p.name).join(' '), 1]], (c) => Number(matches(roles.get(c.name), asked.want)));
   const [componentAxis, componentRest] = tier(components, Math.max(TOP, components.axis.length));
-  const ranked = [...screenAxis.map(screenOf), ...componentAxis.map(componentOf), ...screenRest.map(screenOf), ...componentRest.map(componentOf)];
+  // a screen drawn comes before the components when it answers the words as well as the best component does; one that answers FEWER of them
+  // comes after (a question by intention, "a setting turned on or off", is answered by Toggle, not by eight screens that say "off" or "or")
+  const best = componentRest[0]?.matched ?? 0;
+  // a finish asked for by its name ("printed", "sticker") or by the word finish is the thing itself, so it comes before the screens that only show it;
+  // one that answers a word of its description ("card") is an aside, after the components
+  const finishOf = ({ item: f }) => ({ kind: 'finish', name: f.name, summary: sentence(f.is), knobs: f.knobs.map((k) => k.name) });
+  const named = (text, t) => t.startsWith(text) || text.startsWith(t);
+  const finishRest = rank(finishes(cat), (f) => [[f.name, 6, named], ['finish', 6], [f.is, 2], [f.knobs.map((k) => k.name).join(' '), 1]], () => 0).rest;
+  const ranked = [...screenAxis.map(screenOf), ...componentAxis.map(componentOf), ...finishRest.filter((r) => r.score >= 6).map(finishOf), ...screenRest.filter((r) => r.matched >= best).map(screenOf),
+    ...componentRest.map(componentOf), ...finishRest.filter((r) => r.score < 6).map(finishOf), ...screenRest.filter((r) => r.matched < best).map(screenOf)];
   if (!ranked.length && active && !toks.length) return { query, results: [], hint: 'no component or screen has that role: drop an axis, or add English words' };
   if (!ranked.length) return { query, fallback: true, hint: 'the names and descriptions are English: ask again in English words, or by the axes (represents · shape · interact); `scaffold` with no id lists the screens', screens: screens.length };
 

package/lib/mcp.mjs

@@ -36,19 +36,19 @@ const bool = (description) => ({ type: 'boolean', description });
 const TOOLS = [
   {
     name: 'list_components',
-    description: 'The names of every cardds component and what each is FOR, nothing else. represents is what it stands for (person, group, time…) or, for a control that stands for no one thing, the KIND of data it carries (words, number, picture, signal); the word in parentheses after a name in the text is its represents. Every component shows information; shape says how much: "one" (one thing), "group-brief" (a group read at a glance or in a line), "group-detail" (a group read in detail), "—" (a helper function or structure, not something drawn). interact says whether the member can do something with it: false (it only shows or holds), or the kinds, any of pick, act, write, navigate — alone when shape is one (a Btn acts), as a group when shape is a group (a BtnGroup picks among several). Two kinds mean it does both. group is the src folder, not what it is for. Call this once, first, in a session that will build a UI with cardds, to learn what exists; then get_component for the ones you use.',
+    description: 'The names of every cardds component and what each is FOR, nothing else. represents is what it stands for (person, group, time…) or, for a control that stands for no one thing, the KIND of data it carries (words, number, picture, signal); the word in parentheses after a name in the text is its represents. Every component shows information; shape says how much: "one" (one thing), "group-brief" (a group read at a glance or in a line), "group-detail" (a group read in detail), "—" (a helper function or structure, not something drawn). interact says whether the member can do something with it: false (it only shows or holds), or the kinds, any of pick, act, write, navigate — alone when shape is one (a Btn acts), as a group when shape is a group (a BtnGroup picks among several). Two kinds mean it does both. group is the src folder, not what it is for. Call this once, first, in a session that will build a UI with cardds, to learn what exists; then get_component for the ones you use. The finishes of the paper (data-finish on <html>: lit, print, sticker, ink — a style apart from colour, not a component) are answered by find_components ("printed paper", "finish").',
     inputSchema: { type: 'object', properties: {} },
     run: (cat) => catalog.list(cat),
   },
   {
     name: 'get_component',
-    description: 'One component in full: what it is, its props (a prop marked slot takes children: ReactNode), and its variations, each a working story with its code. Call it before you use a component you have not used yet, and copy a variation rather than guessing a prop. A component used everywhere (Btn, Text) comes with a few of its stories and the ids of the rest (pass all for their code). Names are case-insensitive; a miss returns the closest names.',
+    description: 'One component in full: what it is, its props (a prop marked slot takes children: ReactNode), what it composes and what composes it (composes · composedBy: the catalog names its source renders or calls, and the inverse), its knobs (the CSS custom properties a theme sets to retune it, each with its default, what it sets and the selector that reads it — joined by the classes the component emits, so a knob named for an old name is listed under the component that has it now), and its variations, each a working story with its code. Call it before you use a component you have not used yet, and copy a variation rather than guessing a prop. A component used everywhere (Btn, Text) comes with a few of its stories and the ids of the rest (pass all for their code). Names are case-insensitive; a miss returns the closest names.',
     inputSchema: { type: 'object', properties: { name: str('component name, e.g. Menu'), html: bool('also return each variation\'s rendered HTML — only to see the markup it makes'), all: bool('include the code of every story that uses the component') }, required: ['name'] },
     run: (cat, a) => catalog.get(cat, a.name, { html: a.html, all: a.all }),
   },
   {
     name: 'find_components',
-    description: (cat) => `Find what to build with when you do not know the component name. Ask BOTH ways and read both answers: by the AXES (translated from the request) AND by the English noun of the task ("stamp", "otp", "postcard") — the screen already drawn is often found by the noun. The axes are a closed vocabulary, so ask by them in any language: represents (what it stands for, or for a control the KIND of data it carries${cat ? `: ${catalog.vocabulary(cat).represents.join(' · ')}` : ' — the word in parentheses after a name in list_components'}), shape (one · group-brief · group-detail · group = either group shape), interact (the kinds the member can do with it: ${catalog.KINDS.join(' · ')}, or "none" = it only shows). "Show all the members" is represents [person] + shape group; adding interact [pick] narrows it to the ones the member chooses from. Whatever matches every axis you give comes first, each with its role so you see why; with axes and no words they are the whole answer. Words ("stamp", "otp pin", "bottom sheet") rank what matches only by words, in ENGLISH — the names and descriptions are English, translate first. Answers short: the screens cardds has already drawn (a screen is a composition: it counts when its parts answer the axes between them, one component per axis, and one that answers them all ranks higher), then components, then the components most often used together with them. Call it at the start of a task, before composing a screen from parts: if a screen like it exists, scaffold_screen gives its code. A query that matches nothing returns fallback: true, a hint and the number of screens drawn, not their ids: ask again in English words or by the axes, or call scaffold_screen with no id to list them.`,
+    description: (cat) => `Find what to build with when you do not know the component name. Ask BOTH ways and read both answers: by the AXES (translated from the request) AND by the English noun of the task ("stamp", "otp", "postcard") — the screen already drawn is often found by the noun. The axes are a closed vocabulary, so ask by them in any language: represents (what it stands for, or for a control the KIND of data it carries${cat ? `: ${catalog.vocabulary(cat).represents.join(' · ')}` : ' — the word in parentheses after a name in list_components'}), shape (one · group-brief · group-detail · group = either group shape), interact (the kinds the member can do with it: ${catalog.KINDS.join(' · ')}, or "none" = it only shows). "Show all the members" is represents [person] + shape group; adding interact [pick] narrows it to the ones the member chooses from. Whatever matches every axis you give comes first, each with its role so you see why; with axes and no words they are the whole answer. Words ("stamp", "otp pin", "bottom sheet") rank what matches only by words, in ENGLISH — the names and descriptions are English, translate first; a component's words include its role's note and what it stands in for, so a question by intention ("a setting turned on or off", "a code digit by digit") finds the piece. Answers short: the screens cardds has already drawn (a screen is a composition: it counts when its parts answer the axes between them, one component per axis, and one that answers them all ranks higher), then components, then the components most often used together with them; a screen that answers fewer of the words than the best component comes after the components, so a question by intention ("a setting turned on or off") names the piece first. A FINISH of the paper (data-finish on <html>, beside any palette: lit, print, sticker, ink) is answered too, kind "finish", with its knobs: ask "printed paper", "sticker", or "finish" for all four. Call it at the start of a task, before composing a screen from parts: if a screen like it exists, scaffold_screen gives its code. A query that matches nothing returns fallback: true, a hint and the number of screens drawn, not their ids: ask again in English words or by the axes, or call scaffold_screen with no id to list them.`,
     inputSchema: {
       type: 'object',
       properties: {

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'], Sticky: ['unreadLabel'], PostLetter: ['backLabel', 'pictureLabel', 'playLabel', 'pauseLabel', 'toLabel'],
+  Calendar: ['prevLabel', 'nextLabel'], SheetStep: ['skipLabel'], Sticky: ['unreadLabel'], StampOn: ['removeLabel'], PostLetter: ['backLabel', 'pictureLabel', 'playLabel', 'pauseLabel', 'toLabel'],
 };
 
 const lineOf = (text, idx) => text.slice(0, idx).split('\n').length;

package/package.json

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