All 33 patterns extracted from ~/Downloads/design-handoff/mobile/ · each shown with 4-state contract per P13. Mocks are static · production renderer (Next.js + descriptor SDK · Slice 1+) consumes descriptor.schema.json and renders live with per-tenant theme swap + a11y + i18n + dark mode.
pattern.topbar.sticky-darktopbar.jsx · sc-1-home/A1
Loading
Empty
— always present (chrome) —
Offline
Success
pattern.dock.bottom-navigationprimitives.jsx · sc-1-home/B1
Loading
Empty
— Home-only fallback —
Error
— degrades gracefully —
Success
🏠
✨
★
💳
👤
pattern.mode-pill.floating-switchermode-pill.jsx · floating above dock
Loading
No mode
— hidden when ctx undefined —
Error
⚠ ฯ
Trip
🌴 Trip
pattern.mode-banner.inline-accentmode-emphasis.jsx · sc-1-home/A2
Loading
No mode
— hidden when modes.js[screen][mode] undefined —
Error
⚠ config load failed
Trip CTA
pattern.hero.ai-plan-cardhome.jsx · sc-1-home/A3 · SVC-W001 · J-AI-PLAN
Loading
No trip
✈️
No trip yet
Error
⚠ AI offline
Success
Let AI plan my trip
family · 3d
pattern.hero.mood-carouselhome.jsx · sc-1-home/A4 · SVC-MOOD
Loading
No mood
😶 Pick a mood
Error
⚠ Try again
Picked
🌅 Chill🎉 Party
pattern.hero.carousel-curatedhome.jsx · sc-1-home/A6 (mode=trip/shopping)
Loading
Empty
No curated trips yet
Error
⚠ Refresh
Success
3-day Pattaya
฿4,800
Spa retreat
฿7,200
pattern.hero.search-barhome.jsx · sc-1-home/A7 · SVC-S035 · J-SEARCH
Loading
No query
Error
Typing
pattern.section.place-gridhome.jsx · sc-1-home/A5
Loading
Empty
📍
No places nearbyError
⚠ Can't load
Success
ส้มตำลำซิ่ง
350m · ⭐4.7
Pier
1.2km · ⭐4.5
pattern.section.place-carouselhome.jsx · horizontal swipe
Loading
Empty
No items in carousel
Error
⚠ Failed to load
Swipe
A
B
C
pattern.section.event-listhome.jsx · mode-section: events
Loading
No events
📅
No events this weekError
⚠ Calendar offline
Success
🎵 Music night
Fri · 19:00 · Pier
pattern.section.tile-grid-2x2home.jsx · mode-section: more-2x2
Loading
No tiles
No quick tiles configured
Error
⚠ Config error
Success
🏨 Hotels
🎁 Rewards
🚗 Ride
💳 Wallet
pattern.modal.sheet-bottomcommon-sheet.jsx · drag-to-dismiss
Slide-in
Empty
No content
Error
⚠ Load failed
Open
Details
Lorem · ipsum
pattern.modal.booking-flowscreens.jsx · sc-4-booking-flow · J-SEARCH-TO-BOOKING
Step 1/4
Start
📋 Pick dates
Validation
⚠ Dates required
Step 3/4
📅 Jun 15-17 · 2 guests
pattern.modal.payment-sheetpayment-sheet.jsx · CPay v2.1 6-channel
Loading
No method
No payment method linked
Declined
⚠ Card declined
Pay ฿4,800
฿4,800
via cpay-card · **1234
pattern.alert.donation-formforms.jsx · donation tax-deductible
Loading
Pick amount
💚 Choose amount
Invalid
⚠ Min ฿20
฿100
💚 ฿100 · tax-deductible
pattern.button.pill-filterprimitives.jsx → Pill · category chips
Loading
No filter
all
Error
⚠
Eat
eatstay
pattern.button.primary-ctaprimitives.jsx → Button variant="primary"
Loading
Disabled
Error
Active
pattern.label.meta-smallprimitives.jsx → TGMetaX · 10-11px caps
Loading
No value
—
Error
ERR
Success
350M · 4.7★
pattern.label.section-titlesection header · 24px display + accent
Loading
Untitled
— No title —
Error
⚠ key missing
Success
Popular places
pattern.form.budget-sliderforms.jsx · trip budget calculator
Loading
Min
฿0
Out of range
⚠ Exceeds limit
฿4,800
฿4,800 / 3 days
pattern.form.multiselect-checkboxforms.jsx · category multi-pick
Loading
None
Required
⚠ Pick 1+
2 picked
pattern.form.validation-inlineforms.jsx · per-field error message
Checking
⟳ checking
Empty
Invalid
⚠ Invalid format
Valid
✓ Available
pattern.state.skeleton-cardsshimmer placeholder · loading state contract
Active
Empty stub
▢▢▢
No anim
Variant
pattern.state.empty-no-resultsillustration + copy + recovery action
Loading
Active
🔍
No results for "x"
Variant
📭
Inbox is empty
No need
— content arrived —
pattern.state.error-networkicon + copy + retry · support_link
Retrying
⟳ attempt 2/3
No error
— content loaded —
Active
📡
Offline
Auto-recover
✓ Back online
pattern.ai-wizard.multi-stagescreens.jsx · sc-6-wizard-premium · 4 stages
AI thinking
✨
Generating...
Generating...
Stage 0
Tell me about your trip
Skip step
⚠ AI fail · skip?
Stage 3/4
Day 1 · Beach + ส้มตำ
pattern.video-player.lazy-youtubescreens-extra.jsx · sc-13 · iframe defer
Buffer
⟳
Poster
▶
404
⚠ Video unavailable
Playing
pattern.qr-code.checkoutqr-lib.jsx · 256×256 svg · expiry timer
Generating
No data
— no QR yet —
Expired
⚠ Expired
5:00
฿4,800 · 5:00 left
pattern.voice-search.speech-recognitiontopbar.jsx + ai-hub.jsx · push-to-talk
Listening
Idle
🎤 Hold to talk
No mic
⚠ Mic denied
Transcribed
"ร้านส้มตำใกล้ๆ"
pattern.alert.context-bannerSlice 7 fixture · augment_alert · ctx-driven
Loading
No ctx
— hidden when no signal —
Error
⚠ ctx fetch failed
Warning
☂️ Rain · reschedule?
33/33 patterns × 4 states = 132 mocks · all patterns from PATTERN_LIBRARY.md
Production renderer (Next.js + descriptor SDK) consumes descriptor.schema.json at runtime · live theme swap + a11y + i18n + dark mode