Components

This file defines the spec components used across frontend/spec/pages/*.md.

page: Root container for a route-level screen. Carries route metadata like path, auth requirements, and layout shell.
nav: Top navigation area for primary brand and session-aware links.
header: Top content block for a page or section, usually containing a title.
section: Logical grouping of related content within a page.
hero: Prominent introductory content block for a page.
heading: Section heading wrapper that pairs a title with optional supporting copy.
title: Primary label text for a page, section, card, or control.
description: Supporting explanatory text under a title or heading.
text: Generic body text when no more specific semantic component applies.
help_text: Small informational guidance text, usually near forms or auth flows.
brand: Product identity block (name/logo).
badge: Small status/highlight label.
status: Current state indicator for an entity (for example relay status).
meta: Secondary metadata text (IDs, pubkeys, auxiliary attributes).
copyright: Footer legal ownership line.
link: Navigational text/action leading to another route or URL.
links: Group of related link components.
back_link: Explicit “go back” navigation link to a parent/list view.
back_button: Button-style backward navigation within a multi-step screen.
button: Generic clickable action control.
submit_button: Primary form submission control with optional loading label.
actions: Container for action controls associated with a section/card.
controls: Container for filters/search/sort controls.
tabs: Container for tabbed navigation controls.
tab: A selectable tab option within tabs.
screen: Named sub-view/state within a page (e.g., a login subflow).
modal: Overlay dialog for focused temporary interaction.
form: Form container for user input and submission behavior.
field: Structured form field abstraction (label + input type + validation intent).
input: Single input control for user-entered values.
select: Dropdown control for choosing one option from many.
option: A selectable value within select or plan/method groups.
copyable_input: Read-only input-like field designed for quick copy actions.
tooltip_error: Inline or anchored validation error shown near a specific field.
error_message: Message shown when an action fails.
error_state: Full-state error presentation for failed data loading.
loading_state: Full-state loading presentation while data is being fetched.
list: Repeating collection container.
item: Single element within a repeating collection.
grid: Multi-column layout container for repeated items/cards.
card: Bounded content block used in feature grids and summaries.
product: Specialized card describing an external ecosystem product/integration.
relay_detail_card: Composite card summarizing relay properties and management actions.
avatar: User/profile image representation.
bullets: Container for short point-form highlights.
toggle: On/off control for a boolean feature or policy.
toggles: Group of related boolean toggle controls.
plan_selector: Control used to switch between available relay plans.
pricing_table: Plan comparison and pricing presentation block.
member_count: Display of current member usage for a relay.
members: Plan capacity descriptor (member limits).
price: Plan pricing descriptor.
tenant: Tenant identity/value display in admin-oriented contexts.
created_at: Human-readable creation timestamp display.
bolt11: Lightning invoice string display.
qr_code: Visual QR representation of a connection URI.
camera_preview: Live camera viewport used for scanning QR codes.

Control directives used in specs

These appear in the Pug-like spec language but are flow directives rather than UI components:

if / else: Conditional branch based on a boolean condition.
when: Conditional rendering keyed off a selected tab/state/value.

4.2 KiB Raw Blame History

Components

Control directives used in specs

4.2 KiB

Raw Blame History