@usableapp/cardds 0.7.73 → 0.7.75

package/dist/templates/Home.d.ts

@@ -46,7 +46,7 @@ export interface HomeProps extends Omit<ComponentProps<typeof Screen>, 'children
     base?: ReactNode;
     /** keep a sheet's body mounted after it closes (it opens again at once, scrolled where it was); default: dropped */
     keep?: boolean;
-    /** the open sheet's back button label */
+    /** the open sheet's back button label — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     backLabel?: string;
     /** the open sheet's back button — see `StackSheet backAt` (default `none`: hidden for now) */
     backAt?: StackSheetProps['backAt'];

package/dist/templates/Walkthrough.d.ts

@@ -23,8 +23,8 @@ export interface WalkthroughProps extends Omit<ComponentProps<typeof Screen>, 'c
     defaultAt?: number;
     /** a page was turned to: its index */
     onAtChange?: (at: number) => void;
-    /** the ONE row of the bottom panel. Omitted: the round pager (back · next). A function gets `{ at, count, go }`,
-     *  e.g. the pager until the last page, then one wide Btn. */
+    /** the ONE row of the bottom panel. Omitted: the round pager bar (back · next). A function gets `{ at, count, go }`,
+     *  e.g. the pager bar until the last page, then one wide Btn. */
     cta?: ReactNode | ((c: WalkthroughCta) => ReactNode);
     /** rows of controls ABOVE the CTA row (a text-size Slider…), one row each, top to bottom — keep them few */
     controls?: ReactNode[];
@@ -32,9 +32,9 @@ export interface WalkthroughProps extends Omit<ComponentProps<typeof Screen>, 'c
     ctaLink?: ReactNode;
     /** layers over the screen: the app's `SheetStage dim` + `Modal` that a link or button opens (the app wires it) */
     children?: ReactNode;
-    /** the pager's back button name (default "Back", by `<html lang>`) */
+    /** the pager bar's back button name — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     backLabel?: string;
-    /** the pager's next button name (default "Next", by `<html lang>`) */
+    /** the pager bar's next button name — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     nextLabel?: string;
 }
 /**

package/dist/templates/Walkthrough.js

@@ -5,7 +5,7 @@ import { Screen } from '../scaffold/Screen.js';
 import { Step } from '../sheets/Step.js';
 import { Page } from '../scaffold/Page.js';
 import { Pages, slideTo } from '../scaffold/Centre.js';
-import { PagerAt } from '../scaffold/PagerAt.js';
+import { Pager } from '../scaffold/Pager.js';
 import { ActionBar, ActionBarTier } from '../scaffold/ActionBar.js';
 import { CardHead } from '../cards/CardHead.js';
 import { Text } from '../type/Text.js';
@@ -50,7 +50,7 @@ export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta,
     const row = typeof cta === 'function' ? cta({ at, count, go }) : cta;
     const custom = row !== undefined && row !== null;
     const pager = (_jsxs(_Fragment, { children: [_jsx(IconBtn, { icon: "arrow-left", label: backLabel, disabled: at === 0, onClick: () => go(at - 1) }), _jsx(IconBtn, { invert: true, icon: "arrow-right", label: nextLabel, disabled: at === count - 1, onClick: () => go(at + 1) })] }));
-    const dots = count > 1 ? _jsx(PagerAt, { at: at + 1, of: count }) : null;
+    const dots = count > 1 ? _jsx(Pager, { at: at + 1, of: count }) : null;
     const bottom = dots || controls.length || ctaLink != null ? (_jsxs(ActionBar, { variant: "tiers", children: [dots, controls.map((c, i) => _jsx(ActionBarTier, { children: c }, i)), _jsx(ActionBarTier, { pager: true, children: custom ? row : pager }), ctaLink != null && _jsx(ActionBarTier, { className: "action-bar__tier--link", children: ctaLink })] })) : (_jsx(ActionBar, { variant: "pager", children: custom ? row : pager }));
     return (_jsxs(Screen, { fill: true, bottom: bottom, ...rest, children: [_jsx(Step, { ref: step, children: _jsx(Pages, { ...swipe, children: pages.map((p, i) => (_jsxs(Page, { "aria-current": i === at ? 'step' : undefined, inert: i !== at || undefined, children: [p.media, _jsx(CardHead, { level: "h1", heading: p.heading }), typeof p.body === 'string' ? _jsx(Text, { level: "body", children: p.body }) : p.body] }, i))) }) }), children] }));
 }

package/lib/catalog.mjs

@@ -5,7 +5,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import { execFileSync } from 'node:child_process';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { checkSource } from '../lint/rules.mjs';
+import { checkSource, tagAt, CONTROL_NAMES } from '../lint/rules.mjs';
 import { SHAPES, KINDS, shapeOf, interactOf } from './role.mjs';
 
 const PKG = join(dirname(fileURLToPath(import.meta.url)), '..');
@@ -167,6 +167,25 @@ export function find(cat, query, axes = {}) {
 // the parts that put themselves where they belong by JS at runtime — over the content, open, at the edge: the static html shows them in the wrong place
 const PLACED_BY_JS = ['Sheet', 'SheetStack', 'SheetSteps', 'SheetStage', 'Step', 'Modal', 'Menu', 'Dropdown', 'Snackbar', 'FloatBar'];
 
+/** a story names cardds's own controls by hand where the gallery's page is not in the story's language (`backLabel="กลับ"` on an
+ *  lang="en" page). In an app that is noise — and a session copies what it is handed (two prototypes did, 2026-10-08): the starting file
+ *  leaves those props, and the note above them, out. The tags are read by the name the import gives them (`Home as HomeScreen`). */
+function ownWords(tsx, imports) {
+  let out = tsx;
+  for (const [name, props] of Object.entries(CONTROL_NAMES)) {
+    const tags = [name, ...[...imports.matchAll(new RegExp(`\\b${name}\\s+as\\s+(\\w+)`, 'g'))].map((m) => m[1])];
+    for (const tag of tags) {
+      for (let at = out.indexOf(`<${tag}`); at >= 0; at = out.indexOf(`<${tag}`, at + 1)) {
+        if (/[\w.]/.test(out[at + tag.length + 1] ?? '')) continue;
+        const was = tagAt(out, at);
+        const now = props.reduce((t, prop) => t.replace(new RegExp(`(\\n[ \\t]*|[ \\t]+)${prop}\\s*=\\s*(?:"[^"]*"|'[^']*'|\\{\\s*(?:"[^"]*"|'[^']*')\\s*\\})`, 'g'), ''), was);
+        if (now !== was) out = out.slice(0, at) + now + out.slice(at + was.length);
+      }
+    }
+  }
+  return out.replace(/^[ \t]*(?:\/\/|\/\*|\{\/\*)[^\n]*cardds-ignore-next-line[^\n]*\n/gm, '');
+}
+
 /** no id: the screens already drawn. With one: a file to start from — `tsx` (the code, a string) or `html` (the look, static: `{ html, warning? }`, the warning when the picture lies) */
 export function scaffold(cat, id, { format = 'tsx', css = CSS } = {}) {
   if (!id) return cat.stories.filter((s) => s.screen).map((s) => ({ id: s.id, summary: sentence(s.description) }));
@@ -196,7 +215,7 @@ ${s.html}
   const taken = /\bScreen\b/.test(s.imports) || /^(?:function|const|class|type|interface) Screen\b/m.test(s.tsx);
   const as = taken ? 'MyScreen' : 'Screen';
   const note = glue.length ? `// story glue from ./_*, not part of the package — replace or drop: ${glue.join(', ')}\n` : '';
-  return `${note}${s.imports}\n\n${s.tsx.replace(new RegExp(`^function ${s.name}\\b`, 'm'), `export default function ${as}`)}\n`;
+  return `${note}${s.imports}\n\n${ownWords(s.tsx, s.imports).replace(new RegExp(`^function ${s.name}\\b`, 'm'), `export default function ${as}`)}\n`;
 }
 
 /** the rules of lint/rules.mjs over a piece of code */

package/lib/guide.mjs

@@ -0,0 +1,16 @@
+// lib/guide.mjs — the few rules of using cardds that no checker can see, for an AI session: ONE text, two doors —
+// `npx cardds guide` (bin/cardds.mjs) prints it, the MCP server (lib/mcp.mjs) hands it over as its `instructions` at start.
+// Short on purpose: an MCP client may truncate server instructions, so the trigger and the order come first. A component's own rules are
+// not here — they are in its JSDoc (get_component) and in lint/rules.mjs (check).
+export const GUIDE = `cardds — BEFORE drawing any phone-width / mobile screen in a project with @usableapp/cardds, or that Lh asks to build "with cardds": load these tools (ToolSearch "cardds" if they are deferred) and call find_components. This holds when the request only says prototype, poc, mock-up, sketch, "show me a design", หน้า, หน้าจอ, ขึ้นหน้า, ขอดู prototype — a screen, card, bottom sheet, sheet stack, form step, sticky note / post-it, chat of notes, stamp, postcard, home. Never hand-write HTML, CSS or emoji for what it has.
+ORDER: find → scaffold or get → write → check. First question: has cardds drawn this screen already? find BOTH ways: by the axes (represents · shape · interact) and by the English noun of the task ("sticky", "stamp", "chat").
+TOOLS: find_components · scaffold_screen · get_component · list_components · check_source. No MCP: npx cardds find|scaffold|get|list|check (all take --json).
+What no checker sees:
+1. cardds is a framework you take from outside. Never edit, commit to or release cardds from a consumer project, never node_modules. What cannot be set from outside is a framework gap: STOP and tell the user exactly what you needed.
+2. Adjust from outside only, widest first: theme.css bases → knobs (--<component>-<what>) → props/slots. The theme's values are the user's call; never pick them.
+3. Every component is controlled like an input (state/open/value + its on…, or default…) and none knows another: the app owns the state and wires them.
+4. Import components, never copy their markup or classes: a component is the look AND the behaviour.
+5. Mobile only, big targets; never adapt it to desktop.
+A prototype in HTML (scaffold --html) is a still picture to look at, never a screen; when it warns, run the tsx. check is for tsx only.
+Everything else (a component's own rules) is in get_component and enforced by check.
+`;

package/lib/mcp.mjs

@@ -5,6 +5,7 @@ import { readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import * as catalog from './catalog.mjs';
+import { GUIDE } from './guide.mjs';
 
 const { version } = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), '..', 'package.json'), 'utf8'));
 const str = (description) => ({ type: 'string', description });
@@ -13,7 +14,7 @@ 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 Segment 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.',
     inputSchema: { type: 'object', properties: {} },
     run: (cat) => catalog.list(cat),
   },
@@ -83,7 +84,7 @@ export function serve({ root, input = process.stdin, output = process.stdout } =
   function handle(msg) {
     const { id, method, params } = msg;
     switch (method) {
-      case 'initialize': return reply(id, { protocolVersion: params?.protocolVersion ?? '2025-06-18', capabilities: { tools: {} }, serverInfo: { name: 'cardds', version } });
+      case 'initialize': return reply(id, { protocolVersion: params?.protocolVersion ?? '2025-06-18', capabilities: { tools: {} }, serverInfo: { name: 'cardds', version }, instructions: GUIDE }); // the guide: what no checker sees, handed over before the first question
       case 'ping': return reply(id, {});
       case 'tools/list': return reply(id, { tools: TOOLS.map(({ name, description, inputSchema }) => ({ name, description: typeof description === 'function' ? description(loaded()) : description, inputSchema })) });
       case 'tools/call': { const r = call(params); return r ? reply(id, r) : fail(id, -32602, `unknown tool: ${params?.name}`); }

package/lint/eslint.mjs

@@ -18,8 +18,8 @@ const rule = (level, description) => ({
     };
   },
 });
-const check = rule('error', 'cardds used through its components: no hand-written cardds class; the bar is the Screen\'s bottom');
-const advice = rule('warn', 'cardds behaviour kept: a Sheet that can move and slides out; no bar in front of a sheet');
+const check = rule('error', 'cardds used through its components: no hand-written cardds class, no native <select>; the bar is the Screen\'s bottom');
+const advice = rule('warn', 'cardds behaviour kept: a Sheet that can move and slides out; no bar in front of a sheet; the cursor, the control names and the look are cardds\'s and the theme\'s, not the element\'s');
 
 const plugin = { meta: { name: '@usableapp/cardds/eslint' }, rules: { check, advice } };
 plugin.configs = {

package/lint/rules.mjs

@@ -9,6 +9,12 @@ import { fileURLToPath } from 'node:url';
 
 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'],
+};
+
 const lineOf = (text, idx) => text.slice(0, idx).split('\n').length;
 
 /** every class cardds's CSS styles — read from the package's own css/, so the list is never copied by hand */
@@ -29,7 +35,7 @@ export function carddsClasses(dir = CSS_DIR) {
 }
 
 /** the whole of a JSX opening tag from `<Name` — attributes may hold `=>` and nested braces, so a `[^>]*` regex is not enough */
-function tagAt(text, start) {
+export function tagAt(text, start) {
   let depth = 0, quote = null;
   for (let i = start + 1; i < text.length; i++) {
     const c = text[i];
@@ -83,6 +89,23 @@ function classWords(text, at) {
   return words;
 }
 
+/** a style object's or attribute's `key: value` entries from its body (`at` = where the body starts in the text): split on the commas / semicolons that are not inside a string, bracket or call */
+function* styleEntries(body, at, sep) {
+  let depth = 0, quote = null, from = 0;
+  for (let i = 0; i <= body.length; i++) {
+    const c = body[i];
+    if (quote) { if (c === quote && body[i - 1] !== '\\') quote = null; continue; }
+    if (c === '"' || c === "'" || c === '`') quote = c;
+    else if (c === '(' || c === '[' || c === '{') depth++;
+    else if (c === ')' || c === ']' || c === '}') depth--;
+    else if ((c === sep && depth === 0) || i === body.length) {
+      const m = body.slice(from, i).match(/^\s*(?:'([^']+)'|"([^"]+)"|([\w$-]+))\s*:\s*([\s\S]*)$/);
+      if (m) yield { key: m[1] ?? m[2] ?? m[3], value: m[4], at: at + from + m[0].length - m[4].length };
+      from = i + 1;
+    }
+  }
+}
+
 /**
  * @param {string} text  a source file
  * @param {string} file  its name, for the findings
@@ -91,12 +114,18 @@ function classWords(text, at) {
 export function checkSource(source, file, { classes = carddsClasses() } = {}) {
   const findings = [];
   const lines = source.split('\n');
-  const text = source.replace(/\/\*[\s\S]*?\*\/|(?<![:'"`\\])\/\/[^\n]*/g, (c) => c.replace(/[^\n]/g, ' ')); // comments out, lines kept
+  let text = source.replace(/\/\*[\s\S]*?\*\/|(?<![:'"`\\])\/\/[^\n]*/g, (c) => c.replace(/[^\n]/g, ' ')); // comments out, lines kept
   const add = (rule, level, idx, message) => {
     const line = lineOf(text, idx);
     if (!/cardds-ignore-next-line/.test(lines[line - 2] ?? '')) findings.push({ rule, level, file, line, message }); // `// cardds-ignore-next-line` — a deliberate case (a story that shows the wrong way)
   };
 
+  // a component imported under another name (`Home as HomeScreen`) is still that component: its tags read by the name the rules know. Lines kept
+  // (seen 2026-10-08: a prototype's `<HomeScreen backLabel="กลับ">` passed control-name-repeat)
+  for (const imp of text.matchAll(/import\s*(?:type\s*)?\{([^}]*)\}\s*from\s*['"][^'"]*cardds[^'"]*['"]/g)) {
+    for (const [, name, alias] of imp[1].matchAll(/\b([A-Z]\w*)\s+as\s+([A-Z]\w*)/g)) text = text.replace(new RegExp(`(</?)${alias}\\b`, 'g'), `$1${name}`);
+  }
+
   // 1 · a cardds class written by hand: the look comes without the behaviour — import the component
   for (const m of text.matchAll(/\bclass(?:Name)?(?=\s*=)/g)) {
     const hit = [...new Set(classWords(text, m.index + m[0].length).filter((w) => classes.has(w)))];
@@ -131,5 +160,49 @@ export function checkSource(source, file, { classes = carddsClasses() } = {}) {
     if (/<Sheet\b/.test(screen) && /<ActionBar\b/.test(screen)) add('screen.bar-with-sheet', 'warn', m.index, 'a Sheet and an ActionBar on one Screen — a screen with a sheet finishes on the sheet\'s CardFoot, no bar.');
   }
 
+  // 4 · focus: cardds places the cursor when these parts come up — an `autoFocus` or a `.focus(` beside them fights it
+  if (/<(?:Sheet|SheetStep|SheetSteps|SheetStack|StackSheet|Home|Modal|CallSheet)\b/.test(text)) {
+    const msg = (what) => `${what} in a file that uses a Sheet, SheetStep, SheetStack or Modal: cardds already places the cursor when one comes up (the field marked data-autofocus, else the first field, else the heading) — remove it. To choose the field put data-autofocus on it; focus about something else (the field a server error points at) is the app's: then // cardds-ignore-next-line with the reason.`;
+    for (const m of text.matchAll(/(?<![\w)\]])<[A-Za-z][\w.]*/g)) {
+      const hit = tagAt(text, m.index).match(/\sautoFocus\b(?!\s*:)/);
+      if (hit) add('focus-by-hand', 'warn', m.index + hit.index + 1, msg('autoFocus'));
+    }
+    for (const m of text.matchAll(/\.focus\s*\(/g)) add('focus-by-hand', 'warn', m.index, msg('.focus()'));
+  }
+
+  // 5 · control names: cardds names its controls in the page's language — a literal that only repeats them is noise (and English-only)
+  for (const [name, props] of Object.entries(CONTROL_NAMES)) {
+    for (const m of text.matchAll(new RegExp(`<${name}\\b`, 'g'))) {
+      const tag = tagAt(text, m.index);
+      for (const prop of props) {
+        const hit = tag.match(new RegExp(`\\s${prop}\\s*=\\s*(?:"[^"]*"|'[^']*'|\\{\\s*(?:"[^"]*"|'[^']*'|\`[^\`$]*\`)\\s*\\})`));
+        if (hit) add('control-name-repeat', 'warn', m.index + hit.index + 1, `${prop}="…" on <${name}>: cardds names this control itself, in the page's language (<html lang>) — drop it unless the words differ from cardds's. Another language is setWords(lang, {…}) once at app start, not a string on each component.`);
+      }
+    }
+  }
+
+  // 6 · a native <select> opens the platform's picker: not cardds's look, not its words — Dropdown is the one component for it
+  for (const m of text.matchAll(/<select\b/g)) add('native-select', 'error', m.index, '<select> is the platform\'s own picker: it draws outside cardds\'s look and takes none of its knobs — use <Dropdown> (one component, value controlled, the pill named by the chosen item).');
+
+  // 7 · a raw colour or px length in a style prop: the look is the theme's (theme.css · a knob · a prop); a custom property (`'--x': …`) IS a knob, so its value is the app's to set
+  if (/\.[jt]sx$/.test(file)) {
+    const raw = (value) => {
+      const v = value.replace(/var\((?:[^()]|\([^()]*\))*\)/g, '');
+      return /#[0-9a-fA-F]{3,8}\b|\b(?:rgba?|hsla?)\(/.test(v) ? 'raw colour' : /(?<![\w.])\d*\.?\d+px\b/.test(v) ? 'raw px length' : null;
+    };
+    const report = (e) => {
+      const what = !e.key.startsWith('--') && raw(e.value);
+      if (what) add('raw-value', 'warn', e.at, `${what} in style (${e.key}): the look is set in the project's theme.css, by a knob (--<component>-<what>) or by a prop — not on the element. A hairline is var(--border-w), even 1px.`);
+    };
+    for (const m of text.matchAll(/\bstyle\s*=\s*\{\{/g)) {
+      const open = m.index + m[0].length - 2, expr = braceAt(text, open);
+      if (expr.endsWith('}}')) for (const e of styleEntries(expr.slice(2, -2), open + 2, ',')) report(e);
+    }
+    for (const m of text.matchAll(/\bstyle\s*=\s*(?:"([^"]*)"|'([^']*)')/g)) {
+      const body = m[1] ?? m[2];
+      for (const e of styleEntries(body, m.index + m[0].indexOf(body), ';')) report(e);
+    }
+  }
+
   return findings.sort((a, b) => a.line - b.line);
 }

package/package.json

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

package/dist/actions/Segment.d.ts

@@ -1,11 +0,0 @@
-import type { ComponentProps } from 'react';
-export interface SegmentProps extends ComponentProps<'div'> {
-}
-/** Segment — a tab strip / day picker whose items share the width; children are SegmentItems. */
-export declare function Segment({ className, ...rest }: SegmentProps): import("react").JSX.Element;
-export interface SegmentItemProps extends ComponentProps<'button'> {
-    /** the selected tab (filled) */
-    selected?: boolean;
-}
-/** SegmentItem — one tab in a Segment. */
-export declare function SegmentItem({ selected, className, ...rest }: SegmentItemProps): import("react").JSX.Element;

package/dist/numbers/Band.d.ts

@@ -1,18 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { Tone } from '../cards/Card.js';
-export interface BandProps extends ComponentProps<'article'> {
-    /** the two-line label (use a `<br />` to break it) */
-    label: ReactNode;
-    /** the giant number; wrap a unit in `<small>` */
-    num: ReactNode;
-    /** the footnote under the label */
-    foot?: ReactNode;
-    /** the paper — see `Tone` */
-    tone?: Tone;
-}
-/** Band — a data card: 2-line label · giant number · footnote. Stack several in a BandStack for one boundary with hairlines. */
-export declare function Band({ label, num, foot, tone, className, ...rest }: BandProps): import("react").JSX.Element;
-export interface BandStackProps extends ComponentProps<'div'> {
-}
-/** BandStack — several Bands as ONE card boundary, a hairline between each. */
-export declare function BandStack({ className, ...rest }: BandStackProps): import("react").JSX.Element;

package/dist/scaffold/PagerAt.d.ts

@@ -1,11 +0,0 @@
-import type { ComponentProps } from 'react';
-export interface PagerAtProps extends Omit<ComponentProps<'span'>, 'children'> {
-    /** the current page, 1-based */
-    at: number;
-    /** how many pages */
-    of: number;
-    /** accessible name; defaults to "Page {at} of {of}" */
-    label?: string;
-}
-/** PagerAt — the "where am I" dots: one accent dot at the current page. Under the card that changes (a child of Centre), or a Step's child after its Pages — pinned to the base's foot. One per walk, never inside a page; in a Walkthrough it is the bottom layer's first row (an ActionBar child, centred). */
-export declare function PagerAt({ at, of, label, className, ...rest }: PagerAtProps): import("react").JSX.Element;

package/dist/scaffold/PagerAt.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx.js';
-/** PagerAt — the "where am I" dots: one accent dot at the current page. Under the card that changes (a child of Centre), or a Step's child after its Pages — pinned to the base's foot. One per walk, never inside a page; in a Walkthrough it is the bottom layer's first row (an ActionBar child, centred). */
-export function PagerAt({ at, of, label, className, ...rest }) {
-    return (_jsx("span", { className: cx('pager__at', className), role: "img", "aria-label": label ?? `Page ${at} of ${of}`, ...rest, children: Array.from({ length: of }, (_, i) => _jsx("i", { className: i + 1 === at ? 'is-at' : undefined }, i)) }));
-}