7ss-pbta · Primitive Components
packages/ui — shared design language · Avatar Legends · Seven Stun Studios
Appearance — light · system · dark
Nation Accent
Typography
Cinzel 600Avatar Legends
Cinzel 500Defend and Maneuver
Cinzel 600 smMoment of Balance
Serif 400Pedro stepped between Lin and the soldier.
Serif italicWhen you stand between harm and someone you protect…
Mono 500D&M +2 · A&A −1 · E&O +1
MoveChip
ConditionToggle
Conditions — click to toggle / act to clear
StatusChip
PreparedEmpoweredFavoredImpairedTrappedDoomed
BalanceSlider
FatigueBoxes
Fatigue
2 / 5
NPC Fatigue
1 / 3
ApproachStat
Approaches — click to roll
Defend &
Maneuver
Maneuver
Advance &
Attack
Attack
Evade &
Observe
Observe
BondCard
LIN
Lin
"I would stand between Lin and any harm."
KAO
Kaoru
"Kaoru's recklessness will get us all killed."
DieMesh — Three.js polyhedral die
click to tumble · all dice animate together
Three.js · clear-resin parchment · Roman numerals · d4/d6/d8/d10/d12/d20 supported
DiceRoller — composes 2× DieMesh
Defend & Maneuver +2
+++2
——
Advance & Attack −1
++-1
——
CharacterPortrait — condition modulation
portrait
art
art
Pedro
portrait
art
art
Lin
portrait
art
art
Mako
portrait
art
art
Kaoru
SceneCardFrame
GM-supplied scene art
Can Pedro protect Lin before the captain reaches her?
Earth Kingdom
P
Pedro
L
Lin
C
Captain
TriggerCandidate (Cockpit only)
Defend and Maneuver
87% confidence
"Pedro stepped between Lin and the soldier, arms spread wide."
Read the Room
54% confidence
"Lin's eyes swept the courtyard, reading every exit, every shadow."
MetaTag
small mono pill · meta tags row
ModifierBadge
md · sm
+2-1+0+2-1RollBand
three bands + null state
10+ Full Hit7–9 Partial6– Miss—CollapsibleCard
Tap the header to collapse this card. The chevron rotates and the body collapses with a max-height transition. Used in the Player Scene Viewer; reusable for any collapsible section.
SceneInfoStrip
SheetHeader
portrait
art
art
Pedro
The Bold
"Loud, reckless, and annoyingly hard to dislike."
MoBButton
Sheet — slide-up bottom modal
tap to open · Escape or backdrop to close
A slide-up Sheet
Tap outside, press Escape, or use the button below to close. The sheet handles overlay, panel slide, drag handle, and safe-area insets — composes with any content (RollPanel uses it; HardMovesPanel will too).
RollPanel — composes Sheet + DieMesh + ModifierBadge + RollBand
tap to roll a Defend & Maneuver
Defend and Maneuver
"When you step between harm and someone you protect…"
+++2
——
Tap Roll to find out what happens…
AvatarBadge — portrait + nation ring + playbook chip + condition pips
click button to cycle Pedro's condition tint
P
Bold
L
Idealist
K
Hammer
NationPicker — 4-button accent chooser
Demo (does not write to body)
BYOKField — masked input + show/hide + Test button
paste any text + Test (50/50 ok/fail simulation)
Anthropic API Key
claude.ai/settings → API KeysToggle — rocker switch (notifications, settings)
Roll prompts (on)
Bond shift reminders (off)
Disabled
DangerAction — destructive op with confirm flow
Leave campaign
Remove yourself from The Siege of Ba Sing Se. Your character data is archived; the GM can still access session history.
Delete account
Permanently delete your avatar-PbtA profile, character data, and all associated records. This cannot be undone.
PrimaryBtn / SecondaryBtn
WizardShell — progress bar + step bubbles
3
4
5
6
Approaches
Step content slot — the wizard does not constrain layout below the indicators. Pass any composition.
ChatBubble — assistant · question · player
Sonnet
Welcome, traveler. There are no wrong answers here.
Tell me about a moment your character felt truly unstoppable.
She broke the captain's blade with her bare hands.
ChatInput — textarea + send button
Your answer1 of 4
TypingDots — pulsing 3-dot indicator
Sonnet is thinking
RecommendedBadge
RecommendedTop match
RadioGroup — single-select cards
NPCStatBlock — live stat block (NPC Producer + Cockpit)
Fatigue
1/3
Conditions
afraid
angry
insecure
foolish
guilty
Active Statuses
empowered
Moves
Move Against the Defenders
When the captain has a tactical advantage…
Separate one character from the group and put them in immediate danger.
Invoke Authority
When the captain wants to escalate force or call reinforcements…
Announce that more soldiers are on the way and give the party a hard countdown.
Color tokens
bg
bg-card
bg-deep
ink
ink-2
ink-3
ink-4
accent