Bon-po Counter

Foundations

Roles come from the current calm source. Changing the theme changes these shared values everywhere; text and actions keep their meaning.

Actions

+N remains the main counting action. A compact visual control can have a larger touch area. Every example below is a call to the shared component library.

Spacing & form actions

One owner per space: the container supplies the outer inset, the component supplies its inner padding, and the group supplies the gap. Compact forms share 12px between groups, 6px from label to field and 8px from field to suggestions. Cancel and Save share equal columns, target size, padding and typography; Save keeps the primary action colour.

These are incumbent measurements and semantic aliases of shared tokens. Border compensation stays inside the component. Sheet footer safe-area is applied once. Reading controls retain their adaptive inset; slider-thumb alignment is geometry, not spacing.

Equal actions · long labels

A long label wraps inside its column; both buttons grow to the same height. The footer stays outside the form scroll area.

Forms

A label names the value; the error sits beside its field. All quick-fill chips share a light contour, including material, date, Count and Step. Chip labels use neutral text in both themes: selection is shown by fill, a stronger contour or a check, never red lettering. Disabled quick values use secondary text. This rule covers material, date, Count, Step and sound choices through the shared components. This example exercises presentation and validation feedback without storing an entry.

Material choice

The Diary entry form and this specimen share MaterialChoice: whole artwork, full source name with a personal display name, and whole-row single selection without radio circles. A check marks only the current value. MaterialSelect retains that same whole preview after selection. Four MaterialSuggestions reuse the Date/Count quick-fill treatment. Each chip follows its name width: short names share a row, long names wrap naturally without an ellipsis. MaterialSelect and MaterialChoice keep the full name, a whole preview and a separate trailing control. The anchored MaterialPicker keeps name search and a single scrolling result list.

Collapsed field → choose → return

Tap a row to select and close. Arrow keys move focus; Enter selects. Escape closes without changing the value. The form is saved separately.

Errors & recovery

ErrorState owns error codes and field state. ErrorMessage owns presentation, accessibility and placement. These are explicit fixtures: no data is saved and no network request is made.

CoverImage

Full covers fill their own column with natural proportions. Portrait, square and landscape sources share the same component; thumbnails retain their compact slot. A tall cover scrolls inside a short player while its transport stays fixed. No crop or distortion.

The existing responsive candidates may not meet 2×/3× density at full width, especially for portrait sources. Display size is not a claim of extra source detail.

Practice & dates

Opening a material, recording a step and opening its menu are separate actions. Today and Total stay light. A prayer never acquires a +N button. Display Name follows the original title in parentheses and replaces the Tibetan duplicate in that row.

Audio

One source identity, Play/Pause, timeline, visible speed and Loop. Photographs are used only for verified sources; missing photos have initials.

Recording launch

On a material page, every recording has its own Play/Pause. Teachers use portraits; song versions show the material artwork with title and performer below it. The same RecordingLaunch factory renders this specimen and the interactive stand.

Panels

Reusable containers and action rows. These specimens are shown in the document so their contents remain easy to inspect.

Entry sheet

Diary opens a partial-height sheet above the list. Date, a collapsed mantra choice and Count stay compact; the same BottomSheet shell keeps the header and actions outside the scrollable body. The controller owns yesterday, ranking and Save.

Reading

Approved 4 November: one 44 px row with independent languages and a neutral numeric font size between minus/plus. No size caption or additional line; settings disclose to the left without moving the source text.

Icon controls and the material title stay outside the double rule. The rule contains only the source text, including its original headings. Tibetan, Transliteration and Russian are independent layers.

<link rel="stylesheet" href="system/tokens.css">
<link rel="stylesheet" href="system/components.css">
<script src="system/tokens.js"></script>
<script src="system/icons.js"></script>
<script src="system/components.js"></script>

Reuse & native

The catalogue imports the library used by calm. It never imports the prototype's counters, accounts or audio state machine. HTML is a visual and interaction reference, not ready-to-ship TSX.

CalmSystem.incrementButton({ count: 100 });
CalmSystem.speedButton({ value: "1x", next: "1.5x" });
CalmSystem.practiceRow({ name, displayName, image, today, total, step });

PracticeSkeleton

Initial account load, accepted 9 November 2026. Static placeholders use PracticeRow columns and keep unknown totals hidden. Date and tabs are paused; Profile stays available. Three decorative rows do not predict the number of practices.

ContentSkeleton / LoadingRegion

Accepted 10 November 2026. Unknown content only; known controls and email stay visible. Ready uses the control crossfade; Reduced Motion is immediate. These are live shared factories.

Diary

Source text — no ReadingFrame

Unknown Profile name

Account delivery & review

Author’s account steps 1–8, accepted 11 November 2026. These specimens call the shared templates. Data and account results remain with the host.