Component Events

Base components emit normalized events so flows can branch, data can be captured, and analytics stay consistent. The lists below map directly to components that exist in src/components/* (excluding games and diagram tooling).

Visibility lifecycle

Event	Fired by	Payload highlights
`component_viewed`	Any visual component (Banner, CardsPack, etc.) when it becomes visible on screen.	`{ componentId, viewport: "full" \| "partial" }`
`component_hidden`	Same components when they exit the viewport or the page closes.	`{ componentId, reason: "scroll" \| "page_exit" }`

These lifecycle events power simple “impression” metrics without relying on page-level events.

Action & CTA events

Event	Fired by	Payload highlights
`button_clicked`	`Button.vue`, `Banner.vue`/`PrizeBanner.vue` CTA slots.	`{ componentId, label, value? }`
`banner_dismissed`	ConnectionBanner when the user closes the notice.	`{ componentId }`
`card_selected`	CardsPack, TaskList when a card or task is tapped.	`{ componentId, itemId }`
`photo_slider_changed`	PhotoSlider after swipe/arrow navigation.	`{ componentId, index }`
`achievement_viewed`	AchievementsList when a badge details view opens.	`{ componentId, achievementId }`
`leaderboard_viewed`	Leaderboard when a user scrolls into the widget or expands it.	`{ componentId }`

Game events

Event	Fired by	Payload highlights
`lottery:check`	`Daily Reward Picks` when the player confirms their selected cards.	`{ componentId, selectedCards, introPayloadUrl, balanceRemaining }`
`lottery:completed`	`Daily Reward Picks` when the check action finishes the game flow.	`{ componentId, balanceRemaining }`

Input & form events

Event	Fired by	Payload highlights
`textinput_changed`	TextInput inside LeadForm/AuthPanel.	`{ componentId, field, valueLength }`
`checkbox_changed`	Checkbox, typically bound to consent fields.	`{ componentId, value: boolean }`
`codeinput_completed`	CodeInput when all slots are filled.	`{ componentId, digits }`
`form_submitted`	LeadForm when validation succeeds.	`{ componentId, fields, valid }`
`auth_submitted`	AuthPanel when credentials/OTP sent.	`{ componentId, flow: "magic_link" \| "otp" }`

These events feed node logic (branch, compute) to continue the flow only after successful submissions.

Status & utility events

Event	Fired by	Payload highlights
`timer_started` / `timer_expired`	Timer component; helps gate limited-time offers.	`{ componentId, durationMs }`
`confetti_shown`	ConfettiOverlay when celebration animation plays.	`{ componentId, trigger }`
`status_badge_updated`	StatusBadge when bound data changes state.	`{ componentId, state }`
`skeleton_replaced`	Skeleton when real data arrived and placeholder disappears.	`{ componentId }`

Page/system anchors

Event	Purpose
`page_displayed`	Fired whenever a page node becomes active. Includes `pageId`, experiment metadata, and preview flag.
`page_closed`	Emitted on navigation away (success, dismissal, timeout).
`preview_time_override_applied`	Logged when Time Travelling offsets the preview clock, so downstream analytics can ignore synthetic timestamps.

Using the catalog

Node transitions can listen for these events directly (e.g., move to “Next Page” only after card_selected firs for a specific componentId).
Analytics gets a consistent schema regardless of which base component triggered the event.
Partners can extend the catalog with custom events, but aligning with these base names keeps Studio automation (validation, wiring) working out of the box.