Base Components

Base components represent the everyday UI blocks that editors drag into ResultFly pages. Each control respects the workspace style_set, exposes bindings for data/state, and keeps logic minimal so they compose easily.

UI primitives

Component	Purpose
Button.vue	Primary/secondary CTA with loading, disabled, and icon states.
TextBlock.vue	Rich text renderer for headings, paragraphs, and legal copy.
Image.vue	Static or dynamic media with focal point, object-fit, and lazy load controls.
Checkbox.vue	Boolean toggle used in forms or preference screens.
TextInput.vue	Single-line input for names, codes, or short answers.
CodeInput.vue	PIN/OTP capture with fixed-length slots and auto-advance behavior.
Avatar.vue / AvatarLabel.vue	User identity visuals combining pictures, initials, and labels.

Layout & containers

Component	Purpose
Columns.vue	Responsive multi-column layout with adjustable gutters.
Panel.vue	Card-like container with padding, elevation, and header slots.
Cover.vue	Full-width hero section mixing media, overlay gradients, and CTA slots.
PageContainer.vue / PageStage.vue	Shell components that enforce safe areas, scrolling, and responsive breakpoints for entire pages.

Content & messaging

Component	Purpose
Banner.vue / PrizeBanner.vue	Hero or reward banners with headline, description, and CTA buttons.
ConnectionBanner.vue	Inline notice urging users to authenticate or reconnect services.
IconText.vue	Compact row combining iconography and copy for feature callouts.
IconBadge.vue / StatusBadge.vue	Small status pills (e.g., “new”, “locked”, “in progress”).
QuestionText.vue / QuestionImage.vue	Blocks used by quizzes/forms to present prompts and supporting visuals.
PhotoSlider.vue	Carousel for showcasing multiple photos with swipe/arrow controls.
TaskList.vue / CardsPack.vue	Structured lists for missions or card-like content collections.
AchievementsList.vue / Leaderboard.vue	Gamified social proof widgets for earned badges and rankings.

Forms & identity

Component	Purpose
LeadForm.vue	Multi-field form wrapper with validation, consent text, and submission handling.
AuthPanel.vue	Authentication-focused form (email/OTP) with helper text and error states.

Utility & feedback

Component	Purpose
Timer.vue	Countdown or stopwatch surface that can trigger follow-up actions.
ConfettiOverlay.vue	Celebration overlay triggered after milestones.
Skeleton.vue	Loading placeholder that mirrors component shapes.
ComponentMock.vue	Lightweight placeholder used inside Studio when source data is missing.
EmailPreviewModal.vue	Modal view that previews outbound email content.
PropFieldsEditor.vue	Internal helper allowing authors to tweak component props within Studio.

All of these blocks can be combined on page nodes without writing code. Larger experiences (MemoryGame, SnakeGame, etc.) are described separately under UI Games or External Games because they implement dedicated mechanics rather than general-purpose UI.