Component Library

← Back

This page is a lightweight reference for the shared shells, frames, and components used across pAPPi.

AppShell

Provides the phone-shell chrome, document metadata, and shared global styling for top-level pages.

ActivityFrame

Neutral scroll container for playable experiences with an optional title and top slot for actions.

ToolFrame

Wraps ActivityFrame with the standard back action used by lab and tool-style pages.

GameFrame

Adds game-specific controls such as difficulty handling and footer wiring on top of the shared shell.

Interactive Element

Color Swatches

Single-select color swatches with native radio semantics for selection and a press-and-hold editor that keeps the color input directly tappable on iOS. This demo includes locked preset swatches with contrast-aware lock icons.

Choose a color swatch