{"$schema":"https://api.vp0.com/schema/vp0-bundle.v1.json","schemaVersion":"vp0-bundle.v1","id":"vp0.lingo-language","title":"Lingo — Language","type":"registry:block","version":"2.0.0","author":"@vp0","categories":["Education"],"styleTags":["Colorful","Gamified"],"category":"Education","registryDependencies":[],"docs":"This is an iOS app UI starter built with React Native. Paste the design link into your AI app builder (Claude Code, Rork, Lovable) and ask it to start from this design. Add your own backend/data logic. These are UI starters.","license":null,"kind":"app_template","createdAt":"2026-05-25T19:40:49.707Z","updatedAt":"2026-10-12T13:25:49.375Z","installHints":{"defaultTarget":"react-native","mcp":"claude mcp add vp0 -- npx -y vp0-mcp","shadcn":"npx shadcn@latest add https://api.vp0.com/r/lingo-language.json","cli":"npx vp0com add lingo-language --target react-native","openInV0":"https://v0.dev/chat/api/open?url=https://api.vp0.com/r/lingo-language.json","downloadExpo":"https://api.vp0.com/export/lingo-language/expo.zip"},"sourceHash":"sha256:ae3a3ef50d896d27bbdfd9cd2a0b52e14c63c588e75d481028869dfdf770520e","meta":{"com.vp0.contentId":"4df9f5cd-b10b-495f-b50b-b16c8d6a280c","com.vp0.platform":"ios","com.vp0.availableLanguages":["react-native"],"com.vp0.defaultLanguage":"react-native","com.vp0.contentType":"template","com.vp0.kind":"app_template","com.vp0.category":"Education","com.vp0.sourceToken":"vp0_85a2c25e343bc30cb3b0170c","com.vp0.sourceHash":"sha256:ae3a3ef50d896d27bbdfd9cd2a0b52e14c63c588e75d481028869dfdf770520e","com.vp0.simulator":{"target":"react-native","entrypoint":"App.tsx","simulatable":true,"buildStatus":null,"embedUrl":null,"provider":null}},"name":"lingo-language","slug":"lingo-language","sourceToken":"vp0_85a2c25e343bc30cb3b0170c","contentType":"template","platform":"ios","description":"A gamified language app: a daily XP ring and streak, a winding unit path with locked and completed rings, a multiple choice lesson with instant feedback and a results screen, practice modes and a league leaderboard.","createdBy":"vp0","tags":["Education","Colorful","Gamified"],"availableLanguages":["react-native"],"defaultLanguage":"react-native","targets":[{"name":"react-native","entrypoint":"App.tsx"}],"files":[{"language":"react-native","path":"App.tsx","type":"registry:page","target":"app/App.tsx","rawUrl":"https://api.vp0.com/designs/lingo-language/raw?language=react-native&path=App.tsx","content":"import React, { useState, createContext, useContext } from 'react';\nimport { View, Text, Pressable } from 'react-native';\nimport { ThemeProvider, useT, T, Screen, Scroll, Header, NavBar, Card, Group, Row, Button, Chip, Pill, Stat, Ring, Bars, Progress, Avatar, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, Gradient, alpha } from './ui/kit';\n\nconst ACCENT = '#22C55E';\nconst THEME = { dark: { bg: '#07110A', card: '#0F1D13', card2: '#182A1D', line: '#1B2F20', text2: '#93B09A', text3: '#58715E' }, light: { bg: '#EEF7F0', card: '#FFFFFF', card2: '#DCEBDF' } };\nconst UNITS = [\n  { id: 1, name: 'Greetings', icon: 'Hand', c: '#22C55E', done: 5, total: 5 },\n  { id: 2, name: 'Café orders', icon: 'Coffee', c: '#F59E42', done: 3, total: 5 },\n  { id: 3, name: 'Directions', icon: 'Navigation', c: '#38BDF8', done: 1, total: 5 },\n  { id: 4, name: 'Numbers', icon: 'Hash', c: '#A78BFA', done: 0, total: 5 },\n  { id: 5, name: 'At the market', icon: 'ShoppingBag', c: '#FF6B9D', done: 0, total: 5 },\n];\nconst QUIZ = [\n  { q: 'How do you say \"a coffee, please\"?', a: ['Un café, por favor', 'Una mesa, por favor', 'La cuenta, por favor', 'Buenos días'], ok: 0 },\n  { q: 'What does \"la cuenta\" mean?', a: ['The table', 'The bill', 'The menu', 'The water'], ok: 1 },\n  { q: 'Pick the translation of \"to the left\"', a: ['A la derecha', 'Todo recto', 'A la izquierda', 'Aquí'], ok: 2 },\n];\nconst Store = createContext(null);\n\nfunction LearnScreen({ nav }) {\n  const t = useT();\n  const { xp } = useContext(Store);\n  return (\n    <Scroll pad={0}>\n      <Header kicker=\"Spanish · Unit 2\" title=\"Getting around\" right={<View style={{ flexDirection: 'row', gap: 8 }}><Pill label={'🔥 14'} color=\"#F59E42\" /><Pill label={xp + ' XP'} color={ACCENT} /></View>} />\n      <View style={{ paddingHorizontal: 20 }}>\n        <Card pad={0} style={{ overflow: 'hidden' }}>\n          <Gradient colors={['#166534', '#22C55E']} style={{ padding: 18, flexDirection: 'row', alignItems: 'center', gap: 16 }}>\n            <Ring progress={Math.min(1, xp / 50)} size={78} stroke={8} color=\"#fff\" track={alpha('#fff', 0.3)}><Text style={[T.headline, T.num, { color: '#fff' }]}>{Math.min(50, xp)}</Text></Ring>\n            <View style={{ flex: 1 }}>\n              <Text style={[T.title3, { color: '#fff' }]}>{xp >= 50 ? 'Daily goal reached' : (50 - xp) + ' XP to your daily goal'}</Text>\n              <Text style={[T.footnote, { color: alpha('#fff', 0.85), marginTop: 4 }]}>One short lesson keeps the 14 day streak alive.</Text>\n            </View>\n          </Gradient>\n        </Card>\n        <SectionTitle title=\"Path\" />\n        <View style={{ alignItems: 'center', gap: 18, marginTop: 4 }}>\n          {UNITS.map((u, i) => {\n            const locked = i > 0 && UNITS[i - 1].done < UNITS[i - 1].total;\n            const current = !locked && u.done < u.total;\n            return (\n              <Pressable key={u.id} disabled={locked} onPress={() => nav.push('lesson', { id: u.id })} style={({ pressed }) => [{ alignItems: 'center', marginLeft: (i % 2 ? 90 : -90) }, pressed && { transform: [{ scale: 0.95 }] }]}>\n                <Ring progress={u.done / u.total} size={92} stroke={8} color={locked ? t.text3 : u.c} track={t.card2}>\n                  <View style={{ width: 64, height: 64, borderRadius: 32, backgroundColor: locked ? t.card2 : u.c, alignItems: 'center', justifyContent: 'center', shadowColor: u.c, shadowOpacity: current ? 0.6 : 0, shadowRadius: 16, shadowOffset: { width: 0, height: 6 } }}>\n                    <Icon name={locked ? 'Lock' : u.done >= u.total ? 'Check' : u.icon} size={28} color={locked ? t.text3 : '#fff'} strokeWidth={2.4} />\n                  </View>\n                </Ring>\n                <Text style={[T.subhead, { color: locked ? t.text3 : t.text, fontWeight: '600', marginTop: 6 }]}>{u.name}</Text>\n                {current ? <Pill label=\"Continue\" color={u.c} small style={{ marginTop: 4 }} /> : null}\n              </Pressable>\n            );\n          })}\n        </View>\n      </View>\n    </Scroll>\n  );\n}\n\nfunction PracticeScreen({ nav }) {\n  const t = useT();\n  return (\n    <Scroll pad={0}>\n      <Header kicker=\"Review\" title=\"Practice\" />\n      <View style={{ paddingHorizontal: 20 }}>\n        <Card>\n          <View style={{ flexDirection: 'row' }}><Stat label=\"Words learned\" value=\"186\" delta=\"+12 this week\" /><Stat label=\"Due today\" value=\"24\" color=\"#F59E42\" /><Stat label=\"Accuracy\" value=\"91%\" /></View>\n          <Spacer h={14} />\n          <Button label=\"Review 24 words\" icon=\"Repeat\" full onPress={() => nav.push('lesson', { id: 2 })} />\n        </Card>\n        <SectionTitle title=\"Modes\" />\n        <Group>\n          <Row icon=\"Headphones\" iconColor=\"#38BDF8\" iconBg={alpha('#38BDF8', 0.2)} title=\"Listening\" subtitle=\"Short dialogues, native speed\" chevron onPress={() => {}} />\n          <Row icon=\"Mic\" iconColor=\"#FF6B9D\" iconBg={alpha('#FF6B9D', 0.2)} title=\"Speaking\" subtitle=\"Repeat and get scored\" chevron onPress={() => {}} />\n          <Row icon=\"MessageCircle\" iconColor=\"#A78BFA\" iconBg={alpha('#A78BFA', 0.2)} title=\"Conversation\" subtitle=\"Role play ordering at a café\" chevron onPress={() => {}} />\n          <Row icon=\"Pencil\" iconColor=\"#F59E42\" iconBg={alpha('#F59E42', 0.2)} title=\"Writing\" subtitle=\"Type what you hear\" chevron onPress={() => {}} />\n        </Group>\n        <SectionTitle title=\"Weak spots\" />\n        <Card>\n          {[['Ser vs estar', 0.55], ['Numbers 20 to 100', 0.62], ['Past tense', 0.4]].map((w) => (\n            <View key={w[0]} style={{ marginBottom: 12 }}>\n              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}><Text style={[T.subhead, { color: t.text }]}>{w[0]}</Text><Text style={[T.subhead, T.num, { color: t.text2 }]}>{Math.round(w[1] * 100)}%</Text></View>\n              <Progress value={w[1]} color={w[1] < 0.5 ? t.danger : '#F59E42'} style={{ marginTop: 6 }} />\n            </View>\n          ))}\n        </Card>\n      </View>\n    </Scroll>\n  );\n}\n\nfunction LeagueScreen() {\n  const t = useT();\n  const people = [['Lena Park', 1240, '#A78BFA'], ['You', 1180, ACCENT], ['Sam Ortiz', 1120, '#F59E42'], ['Noah Reed', 980, '#38BDF8'], ['Ava Chen', 940, '#FF6B9D'], ['Dana Reyes', 870, '#E8B04B']];\n  return (\n    <Scroll pad={0}>\n      <Header kicker=\"Gold league · 3 days left\" title=\"Leaderboard\" />\n      <View style={{ paddingHorizontal: 20 }}>\n        <Card>\n          <Bars values={[40, 60, 50, 80, 70, 90, 30]} labels={['M', 'T', 'W', 'T', 'F', 'S', 'S']} height={80} highlight={1} />\n          <Text style={[T.footnote, { color: t.text2, marginTop: 8 }]}>Top 3 promote to Diamond. You are 60 XP behind first.</Text>\n        </Card>\n        <Spacer h={16} />\n        <Group>\n          {people.map((p, i) => <Row key={p[0]} leading={<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}><Text style={[T.headline, T.num, { color: i < 3 ? '#E8B04B' : t.text2, width: 18 }]}>{i + 1}</Text><Avatar name={p[0] === 'You' ? 'Maya K' : p[0]} size={38} color={p[2]} /></View>} title={p[0]} titleStyle={p[0] === 'You' ? { color: ACCENT, fontWeight: '700' } : null} value={p[1] + ' XP'} />)}\n        </Group>\n      </View>\n    </Scroll>\n  );\n}\n\nfunction Lesson({ nav, params }) {\n  const t = useT();\n  const { addXp } = useContext(Store);\n  const u = UNITS.find((x) => x.id === params.id) || UNITS[1];\n  const [i, setI] = useState(0);\n  const [pick, setPick] = useState(null);\n  const [score, setScore] = useState(0);\n  const q = QUIZ[i];\n  const finished = i >= QUIZ.length;\n  const answer = (j) => { if (pick != null) return; setPick(j); if (j === q.ok) setScore((s) => s + 1); };\n  const next = () => { if (i + 1 >= QUIZ.length) addXp(10 + score * 5); setI(i + 1); setPick(null); };\n  return (\n    <Screen>\n      <NavBar title={u.name} onBack={nav.pop} right={<Pill label={'❤️ 5'} color={t.danger} small />} />\n      <View style={{ paddingHorizontal: 20 }}><Progress value={Math.min(1, i / QUIZ.length)} color={u.c} height={10} /></View>\n      {finished ? (\n        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 28 }}>\n          <View style={{ width: 120, height: 120, borderRadius: 60, backgroundColor: alpha(u.c, 0.2), alignItems: 'center', justifyContent: 'center' }}><Icon name=\"Trophy\" size={56} color={u.c} /></View>\n          <Text style={[T.largeTitle, { color: t.text, marginTop: 20 }]}>Lesson complete</Text>\n          <Text style={[T.body, { color: t.text2, marginTop: 8, textAlign: 'center' }]}>{score} of {QUIZ.length} correct · +{10 + score * 5} XP</Text>\n          <View style={{ flexDirection: 'row', gap: 12, marginTop: 20 }}><Card style={{ flex: 1 }}><Stat label=\"Accuracy\" value={Math.round((score / QUIZ.length) * 100) + '%'} /></Card><Card style={{ flex: 1 }}><Stat label=\"Streak\" value=\"14 days\" color=\"#F59E42\" /></Card></View>\n          <Spacer h={24} />\n          <Button label=\"Continue\" icon=\"ArrowRight\" color={u.c} full onPress={nav.pop} />\n        </View>\n      ) : (\n        <Scroll pad={20}>\n          <Text style={[T.caption, { color: u.c, textTransform: 'uppercase', letterSpacing: 1, marginTop: 10 }]}>Question {i + 1} of {QUIZ.length}</Text>\n          <Text style={[T.title1, { color: t.text, marginTop: 6 }]}>{q.q}</Text>\n          <View style={{ gap: 10, marginTop: 22 }}>\n            {q.a.map((a, j) => {\n              const state = pick == null ? 'idle' : j === q.ok ? 'ok' : j === pick ? 'bad' : 'dim';\n              const bg = state === 'ok' ? alpha(t.success, 0.2) : state === 'bad' ? alpha(t.danger, 0.2) : t.card;\n              const border = state === 'ok' ? t.success : state === 'bad' ? t.danger : 'transparent';\n              return (\n                <Pressable key={j} onPress={() => answer(j)} style={({ pressed }) => [{ backgroundColor: bg, borderRadius: 18, padding: 16, borderWidth: 2, borderColor: border, flexDirection: 'row', alignItems: 'center', gap: 12, opacity: state === 'dim' ? 0.5 : 1 }, pressed && pick == null && { transform: [{ scale: 0.98 }] }]}>\n                  <View style={{ width: 28, height: 28, borderRadius: 8, backgroundColor: t.card2, alignItems: 'center', justifyContent: 'center' }}><Text style={[T.caption, { color: t.text, fontWeight: '700' }]}>{j + 1}</Text></View>\n                  <Text style={[T.body, { color: t.text, flex: 1, fontWeight: '500' }]}>{a}</Text>\n                  {state === 'ok' ? <Icon name=\"Check\" size={20} color={t.success} /> : state === 'bad' ? <Icon name=\"X\" size={20} color={t.danger} /> : null}\n                </Pressable>\n              );\n            })}\n          </View>\n          {pick != null ? (\n            <Card style={{ marginTop: 18, backgroundColor: alpha(pick === q.ok ? t.success : t.danger, 0.15) }}>\n              <Text style={[T.headline, { color: pick === q.ok ? t.success : t.danger }]}>{pick === q.ok ? 'Correct' : 'Not quite'}</Text>\n              <Text style={[T.subhead, { color: t.text, marginTop: 4 }]}>{q.a[q.ok]}</Text>\n            </Card>\n          ) : null}\n          <Spacer h={16} />\n          <Button label={pick == null ? 'Check' : i + 1 >= QUIZ.length ? 'Finish' : 'Continue'} color={u.c} full disabled={pick == null} onPress={next} />\n        </Scroll>\n      )}\n    </Screen>\n  );\n}\n\nfunction Root({ nav }) {\n  const [tab, setTab] = useState('learn');\n  return (\n    <Screen>\n      <Tabs active={tab} screens={{ learn: <LearnScreen nav={nav} />, practice: <PracticeScreen nav={nav} />, league: <LeagueScreen /> }} />\n      <TabBar active={tab} onChange={setTab} tabs={[\n        { key: 'learn', label: 'Learn', icon: 'GraduationCap' },\n        { key: 'practice', label: 'Practice', icon: 'Repeat' },\n        { key: 'league', label: 'League', icon: 'Trophy' },\n      ]} />\n    </Screen>\n  );\n}\nconst SCREENS = { root: Root, lesson: Lesson };\n\nexport default function App() {\n  const [xp, setXp] = useState(30);\n  const addXp = (n) => setXp((x) => x + n);\n  return (\n    <ThemeProvider accent={ACCENT} overrides={THEME}>\n      <Store.Provider value={{ xp, addXp }}>\n        <Stack screens={SCREENS} initial=\"root\" />\n      </Store.Provider>\n    </ThemeProvider>\n  );\n}\n"},{"language":"react-native","path":"ui/kit.tsx","type":"registry:component","target":"ui/kit.tsx","rawUrl":"https://api.vp0.com/designs/lingo-language/raw?language=react-native&path=ui%2Fkit.tsx","content":"import React, { useState, useEffect, useRef, useMemo, createContext, useContext } from 'react';\nimport { View, Text, Pressable, ScrollView, StyleSheet, Animated, Easing, Modal, Dimensions, useColorScheme, TextInput } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport Svg, { Circle, Path, Rect, Line, Polyline, Defs, LinearGradient as SvgGradient, Stop } from 'react-native-svg';\nimport * as Lucide from 'lucide-react-native';\nimport { LinearGradient } from 'expo-linear-gradient';\n\n// ─── colour helpers ─────────────────────────────────────────────────────────\nexport function alpha(hex, a) {\n  const h = hex.replace('#', '');\n  const n = parseInt(h.length === 3 ? h.split('').map((c) => c + c).join('') : h, 16);\n  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;\n  return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';\n}\nexport function mix(hexA, hexB, p) {\n  const pa = parseInt(hexA.replace('#', ''), 16), pb = parseInt(hexB.replace('#', ''), 16);\n  const ch = (sh) => Math.round(((pa >> sh) & 255) * (1 - p) + ((pb >> sh) & 255) * p);\n  const to = (v) => ('0' + v.toString(16)).slice(-2);\n  return '#' + to(ch(16)) + to(ch(8)) + to(ch(0));\n}\nfunction luminance(hex) {\n  const n = parseInt(hex.replace('#', ''), 16);\n  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;\n  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;\n}\n\n// ─── theme ──────────────────────────────────────────────────────────────────\nconst DARK = { bg: '#000000', card: '#1C1C1E', card2: '#2C2C2E', text: '#F2F2F7', text2: '#9A9AA3', text3: '#636369', line: '#2A2A2E' };\nconst LIGHT = { bg: '#F2F2F7', card: '#FFFFFF', card2: '#EDEDF2', text: '#111114', text2: '#6E6E76', text3: '#A6A6AE', line: '#E3E3E8' };\nconst SEMANTIC = { success: '#30D158', warning: '#FFB340', danger: '#FF453A', info: '#4DA3FF' };\nconst ThemeCtx = createContext(null);\n\nexport function makeTheme(accent, isDark, overrides) {\n  const base = isDark ? DARK : LIGHT;\n  const o = (overrides && (isDark ? overrides.dark : overrides.light)) || {};\n  const t = Object.assign({}, base, SEMANTIC, o, { accent: accent, isDark: isDark });\n  t.onAccent = luminance(accent) > 0.6 ? '#0B0B10' : '#FFFFFF';\n  t.accentSoft = alpha(accent, isDark ? 0.22 : 0.14);\n  t.accentFaint = alpha(accent, isDark ? 0.12 : 0.08);\n  return t;\n}\nexport function ThemeProvider({ accent, overrides, children }) {\n  const scheme = useColorScheme();\n  const t = useMemo(() => makeTheme(accent, scheme !== 'light', overrides), [accent, scheme, overrides]);\n  return <ThemeCtx.Provider value={t}>{children}</ThemeCtx.Provider>;\n}\nexport function useT() {\n  const t = useContext(ThemeCtx);\n  return t || makeTheme('#7C5CFF', true, null);\n}\nexport const useInsets = useSafeAreaInsets;\nexport const win = () => Dimensions.get('window');\n\n// ─── type scale (iOS) ───────────────────────────────────────────────────────\nexport const T = StyleSheet.create({\n  largeTitle: { fontSize: 34, fontWeight: '700', letterSpacing: -0.7, lineHeight: 40 },\n  title1: { fontSize: 28, fontWeight: '700', letterSpacing: -0.5, lineHeight: 34 },\n  title2: { fontSize: 22, fontWeight: '700', letterSpacing: -0.35, lineHeight: 28 },\n  title3: { fontSize: 20, fontWeight: '600', letterSpacing: -0.25, lineHeight: 25 },\n  headline: { fontSize: 17, fontWeight: '600', letterSpacing: -0.2, lineHeight: 22 },\n  body: { fontSize: 17, fontWeight: '400', letterSpacing: -0.2, lineHeight: 22 },\n  callout: { fontSize: 16, fontWeight: '400', lineHeight: 21 },\n  subhead: { fontSize: 15, fontWeight: '400', lineHeight: 20 },\n  footnote: { fontSize: 13, fontWeight: '400', lineHeight: 18 },\n  caption: { fontSize: 12, fontWeight: '500', lineHeight: 16 },\n  caption2: { fontSize: 11, fontWeight: '600', lineHeight: 13, letterSpacing: 0.3 },\n  num: { fontVariant: ['tabular-nums'] },\n});\n\n// ─── motion ─────────────────────────────────────────────────────────────────\nexport function useTween(target, ms) {\n  const dur = ms || 650;\n  const [v, setV] = useState(target);\n  const ref = useRef({ raf: 0 });\n  useEffect(() => {\n    const from = v, to = target, t0 = Date.now();\n    if (from === to) return;\n    cancelAnimationFrame(ref.current.raf);\n    const tick = () => {\n      const p = Math.min(1, (Date.now() - t0) / dur);\n      const e = 1 - Math.pow(1 - p, 3);\n      setV(from + (to - from) * e);\n      if (p < 1) ref.current.raf = requestAnimationFrame(tick);\n    };\n    ref.current.raf = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(ref.current.raf);\n  }, [target]);\n  return v;\n}\nexport function usePressScale(to) {\n  const scale = useRef(new Animated.Value(1)).current;\n  const onPressIn = () => Animated.spring(scale, { toValue: to || 0.96, useNativeDriver: false, speed: 40, bounciness: 2 }).start();\n  const onPressOut = () => Animated.spring(scale, { toValue: 1, useNativeDriver: false, speed: 20, bounciness: 8 }).start();\n  return { scale, onPressIn, onPressOut };\n}\n\n// ─── icons ──────────────────────────────────────────────────────────────────\nexport function Icon({ name, size, color, strokeWidth, fill, style }) {\n  const t = useT();\n  const Cmp = Lucide[name] || Lucide.Circle;\n  return <Cmp size={size || 22} color={color || t.text} strokeWidth={strokeWidth || 2} fill={fill || 'none'} style={style} />;\n}\n\n// ─── layout primitives ──────────────────────────────────────────────────────\nexport function Screen({ children, style, bg }) {\n  const t = useT();\n  return <View style={[{ flex: 1, backgroundColor: bg || t.bg }, style]}>{children}</View>;\n}\nexport function Scroll({ children, style, contentStyle, pad, horizontal, bottom }) {\n  const p = pad == null ? 20 : pad;\n  return (\n    <ScrollView\n      horizontal={!!horizontal}\n      style={[{ flex: 1 }, style]}\n      showsVerticalScrollIndicator={false}\n      showsHorizontalScrollIndicator={false}\n      contentContainerStyle={[horizontal ? { paddingHorizontal: p, gap: 12 } : { paddingHorizontal: p, paddingBottom: bottom == null ? 28 : bottom }, contentStyle]}\n    >\n      {children}\n    </ScrollView>\n  );\n}\nexport function Spacer({ h, w }) { return <View style={{ height: h || 0, width: w || 0 }} />; }\nexport function Divider({ inset, style }) {\n  const t = useT();\n  return <View style={[{ height: StyleSheet.hairlineWidth, backgroundColor: t.line, marginLeft: inset || 0 }, style]} />;\n}\n\n/** Large-title header for a tab/root screen: kicker, 34pt title, optional trailing slot. */\nexport function Header({ kicker, title, subtitle, right, style, kickerColor }) {\n  const t = useT();\n  const ins = useInsets();\n  return (\n    <View style={[{ paddingTop: ins.top + 6, paddingHorizontal: 20, paddingBottom: 12, flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }, style]}>\n      <View style={{ flex: 1, minWidth: 0 }}>\n        {kicker ? <Text style={[T.caption2, { color: kickerColor || t.accent, textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 4 }]}>{kicker}</Text> : null}\n        <Text style={[T.largeTitle, { color: t.text }]} numberOfLines={1}>{title}</Text>\n        {subtitle ? <Text style={[T.subhead, { color: t.text2, marginTop: 3 }]}>{subtitle}</Text> : null}\n      </View>\n      {right ? <View style={{ marginLeft: 12, marginBottom: 4 }}>{right}</View> : null}\n    </View>\n  );\n}\n\n/** Inline navigation bar for a pushed screen: back chevron, centred title, trailing slot. */\nexport function NavBar({ title, onBack, right, transparent, tint }) {\n  const t = useT();\n  const ins = useInsets();\n  const color = tint || t.text;\n  return (\n    <View style={{ paddingTop: ins.top + 2, height: ins.top + 46, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 8, backgroundColor: transparent ? 'transparent' : t.bg }}>\n      <Pressable onPress={onBack} hitSlop={10} style={({ pressed }) => [{ width: 44, height: 40, alignItems: 'center', justifyContent: 'center', borderRadius: 20 }, pressed && { opacity: 0.5 }]}>\n        <Icon name=\"ChevronLeft\" size={26} color={color} strokeWidth={2.4} />\n      </Pressable>\n      <Text style={[T.headline, { color: color, flex: 1, textAlign: 'center' }]} numberOfLines={1}>{title}</Text>\n      <View style={{ width: 44, alignItems: 'flex-end' }}>{right || null}</View>\n    </View>\n  );\n}\n\n/** Section label (iOS grouped header) with optional trailing action. */\nexport function SectionTitle({ title, action, onAction, style }) {\n  const t = useT();\n  return (\n    <View style={[{ flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 22, marginBottom: 10 }, style]}>\n      <Text style={[T.title3, { color: t.text }]}>{title}</Text>\n      {action ? (\n        <Pressable onPress={onAction} hitSlop={8}>\n          <Text style={[T.subhead, { color: t.accent, fontWeight: '600' }]}>{action}</Text>\n        </Pressable>\n      ) : null}\n    </View>\n  );\n}\n\nexport function Card({ children, style, onPress, pad, bg }) {\n  const t = useT();\n  const base = [{ backgroundColor: bg || t.card, borderRadius: 20, padding: pad == null ? 16 : pad }, style];\n  if (!onPress) return <View style={base}>{children}</View>;\n  return (\n    <Pressable onPress={onPress} style={({ pressed }) => [base, pressed && { opacity: 0.86, transform: [{ scale: 0.985 }] }]}>\n      {children}\n    </Pressable>\n  );\n}\n\n/** Inset-grouped list: wraps rows in a card, drawing hairline separators. */\nexport function Group({ children, style }) {\n  const t = useT();\n  const kids = React.Children.toArray(children).filter(Boolean);\n  return (\n    <View style={[{ backgroundColor: t.card, borderRadius: 20, overflow: 'hidden' }, style]}>\n      {kids.map((k, i) => (\n        <View key={i}>\n          {k}\n          {i < kids.length - 1 ? <Divider inset={60} /> : null}\n        </View>\n      ))}\n    </View>\n  );\n}\n\n/** A list row: leading icon tile (lucide or emoji/custom), title, subtitle, trailing value, chevron. */\nexport function Row({ icon, emoji, iconColor, iconBg, leading, title, subtitle, value, valueColor, sub2, chevron, onPress, right, pad, titleStyle }) {\n  const t = useT();\n  const body = (\n    <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: pad == null ? 12 : pad, paddingHorizontal: 14 }}>\n      {leading ? leading : (icon || emoji) ? (\n        <View style={{ width: 40, height: 40, borderRadius: 12, backgroundColor: iconBg || t.accentSoft, alignItems: 'center', justifyContent: 'center' }}>\n          {emoji ? <Text style={{ fontSize: 20 }}>{emoji}</Text> : <Icon name={icon} size={20} color={iconColor || t.accent} strokeWidth={2.2} />}\n        </View>\n      ) : null}\n      <View style={{ flex: 1, minWidth: 0, marginLeft: (leading || icon || emoji) ? 12 : 0 }}>\n        <Text style={[T.body, { color: t.text, fontWeight: '500' }, titleStyle]} numberOfLines={1}>{title}</Text>\n        {subtitle ? <Text style={[T.footnote, { color: t.text2, marginTop: 1 }]} numberOfLines={1}>{subtitle}</Text> : null}\n      </View>\n      {value != null ? (\n        <View style={{ alignItems: 'flex-end', marginLeft: 10 }}>\n          <Text style={[T.body, T.num, { color: valueColor || t.text, fontWeight: '600' }]}>{value}</Text>\n          {sub2 ? <Text style={[T.caption, { color: t.text3 }]}>{sub2}</Text> : null}\n        </View>\n      ) : null}\n      {right ? <View style={{ marginLeft: 10 }}>{right}</View> : null}\n      {chevron ? <Icon name=\"ChevronRight\" size={18} color={t.text3} style={{ marginLeft: 6 }} /> : null}\n    </View>\n  );\n  if (!onPress) return body;\n  return <Pressable onPress={onPress} style={({ pressed }) => [pressed && { backgroundColor: t.card2 }]}>{body}</Pressable>;\n}\n\n// ─── controls ───────────────────────────────────────────────────────────────\nexport function Button({ label, onPress, kind, icon, small, full, color, style, disabled }) {\n  const t = useT();\n  const { scale, onPressIn, onPressOut } = usePressScale(0.96);\n  const k = kind || 'primary';\n  const accent = color || t.accent;\n  const bg = k === 'primary' ? accent : k === 'secondary' ? t.card2 : k === 'soft' ? alpha(accent, t.isDark ? 0.22 : 0.14) : 'transparent';\n  const fg = k === 'primary' ? (luminance(accent) > 0.6 ? '#0B0B10' : '#FFFFFF') : k === 'secondary' ? t.text : accent;\n  return (\n    <Animated.View style={[{ transform: [{ scale }] }, full && { alignSelf: 'stretch' }, style]}>\n      <Pressable\n        onPress={onPress}\n        onPressIn={onPressIn}\n        onPressOut={onPressOut}\n        disabled={disabled}\n        style={{ backgroundColor: bg, borderRadius: small ? 14 : 18, paddingVertical: small ? 9 : 15, paddingHorizontal: small ? 14 : 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, opacity: disabled ? 0.5 : 1 }}\n      >\n        {icon ? <Icon name={icon} size={small ? 16 : 18} color={fg} strokeWidth={2.4} /> : null}\n        <Text style={[small ? T.subhead : T.headline, { color: fg, fontWeight: '600' }]}>{label}</Text>\n      </Pressable>\n    </Animated.View>\n  );\n}\n\nexport function IconButton({ name, onPress, size, bg, color, style }) {\n  const t = useT();\n  const s = size || 40;\n  return (\n    <Pressable onPress={onPress} hitSlop={6} style={({ pressed }) => [{ width: s, height: s, borderRadius: s / 2, backgroundColor: bg || t.card2, alignItems: 'center', justifyContent: 'center' }, pressed && { opacity: 0.6 }, style]}>\n      <Icon name={name} size={Math.round(s * 0.5)} color={color || t.text} strokeWidth={2.2} />\n    </Pressable>\n  );\n}\n\nexport function Chip({ label, active, onPress, icon, color, style }) {\n  const t = useT();\n  const c = color || t.accent;\n  return (\n    <Pressable onPress={onPress} style={({ pressed }) => [{ paddingHorizontal: 14, paddingVertical: 8, borderRadius: 999, backgroundColor: active ? c : t.card, flexDirection: 'row', alignItems: 'center', gap: 6 }, pressed && { opacity: 0.7 }, style]}>\n      {icon ? <Icon name={icon} size={14} color={active ? (luminance(c) > 0.6 ? '#0B0B10' : '#fff') : t.text2} strokeWidth={2.4} /> : null}\n      <Text style={[T.subhead, { color: active ? (luminance(c) > 0.6 ? '#0B0B10' : '#fff') : t.text, fontWeight: '600' }]}>{label}</Text>\n    </Pressable>\n  );\n}\n\nexport function Pill({ label, color, style, small }) {\n  const t = useT();\n  const c = color || t.accent;\n  return (\n    <View style={[{ alignSelf: 'flex-start', paddingHorizontal: small ? 7 : 9, paddingVertical: small ? 2 : 4, borderRadius: 8, backgroundColor: alpha(c, t.isDark ? 0.24 : 0.14) }, style]}>\n      <Text style={[small ? T.caption2 : T.caption, { color: t.isDark ? mix(c, '#FFFFFF', 0.25) : mix(c, '#000000', 0.2), fontWeight: '700' }]}>{label}</Text>\n    </View>\n  );\n}\n\n/** iOS segmented control with a sliding thumb. */\nexport function Segmented({ options, value, onChange, style }) {\n  const t = useT();\n  const idx = Math.max(0, options.findIndex((o) => (o.value == null ? o : o.value) === value));\n  const x = useRef(new Animated.Value(idx)).current;\n  const [w, setW] = useState(0);\n  useEffect(() => { Animated.spring(x, { toValue: idx, useNativeDriver: false, speed: 24, bounciness: 4 }).start(); }, [idx]);\n  const segW = options.length ? (w - 4) / options.length : 0;\n  return (\n    <View onLayout={(e) => setW(e.nativeEvent.layout.width)} style={[{ height: 36, borderRadius: 11, backgroundColor: t.isDark ? t.card2 : '#E2E2E8', padding: 2, flexDirection: 'row' }, style]}>\n      {w > 0 ? (\n        <Animated.View style={{ position: 'absolute', top: 2, left: 2, width: segW, height: 32, borderRadius: 9, backgroundColor: t.isDark ? '#5A5A5F' : '#FFFFFF', transform: [{ translateX: Animated.multiply(x, segW) }], shadowColor: '#000', shadowOpacity: t.isDark ? 0 : 0.12, shadowRadius: 4, shadowOffset: { width: 0, height: 2 } }} />\n      ) : null}\n      {options.map((o, i) => {\n        const v = o.value == null ? o : o.value;\n        const label = o.label == null ? o : o.label;\n        return (\n          <Pressable key={String(v)} onPress={() => onChange(v)} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n            <Text style={[T.footnote, { color: t.text, fontWeight: i === idx ? '600' : '500' }]}>{label}</Text>\n          </Pressable>\n        );\n      })}\n    </View>\n  );\n}\n\n/** iOS toggle (own implementation so both appearances look native). */\nexport function Toggle({ value, onChange, color }) {\n  const t = useT();\n  const x = useRef(new Animated.Value(value ? 1 : 0)).current;\n  useEffect(() => { Animated.spring(x, { toValue: value ? 1 : 0, useNativeDriver: false, speed: 30, bounciness: 3 }).start(); }, [value]);\n  const bg = x.interpolate({ inputRange: [0, 1], outputRange: [t.isDark ? '#39393D' : '#E9E9EB', color || t.success] });\n  return (\n    <Pressable onPress={() => onChange(!value)} hitSlop={8}>\n      <Animated.View style={{ width: 51, height: 31, borderRadius: 16, backgroundColor: bg, padding: 2 }}>\n        <Animated.View style={{ width: 27, height: 27, borderRadius: 14, backgroundColor: '#fff', transform: [{ translateX: x.interpolate({ inputRange: [0, 1], outputRange: [0, 20] }) }], shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 3, shadowOffset: { width: 0, height: 2 } }} />\n      </Animated.View>\n    </Pressable>\n  );\n}\n\nexport function Checkbox({ checked, onChange, color, size }) {\n  const t = useT();\n  const s = size || 26;\n  const c = color || t.accent;\n  return (\n    <Pressable onPress={() => onChange && onChange(!checked)} hitSlop={8} style={{ width: s, height: s, borderRadius: s / 2, borderWidth: 2, borderColor: checked ? c : t.text3, backgroundColor: checked ? c : 'transparent', alignItems: 'center', justifyContent: 'center' }}>\n      {checked ? <Icon name=\"Check\" size={s * 0.6} color={luminance(c) > 0.6 ? '#0B0B10' : '#fff'} strokeWidth={3.2} /> : null}\n    </Pressable>\n  );\n}\n\nexport function SearchBar({ placeholder, value, onChange, style }) {\n  const t = useT();\n  return (\n    <View style={[{ height: 40, borderRadius: 12, backgroundColor: t.isDark ? t.card : '#E4E4E9', flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, gap: 8 }, style]}>\n      <Icon name=\"Search\" size={18} color={t.text3} strokeWidth={2.2} />\n      <TextInput value={value} onChangeText={onChange} placeholder={placeholder || 'Search'} placeholderTextColor={t.text3} style={[T.body, { flex: 1, color: t.text, paddingVertical: 0 }]} />\n    </View>\n  );\n}\n\n// ─── data display ───────────────────────────────────────────────────────────\nexport function Stat({ label, value, delta, up, style, color, big }) {\n  const t = useT();\n  return (\n    <View style={[{ flex: 1 }, style]}>\n      <Text style={[T.caption, { color: t.text2 }]}>{label}</Text>\n      <Text style={[big ? T.title1 : T.title2, T.num, { color: color || t.text, marginTop: 2 }]}>{value}</Text>\n      {delta ? <Text style={[T.caption, { color: up === false ? t.danger : t.success, marginTop: 2, fontWeight: '600' }]}>{delta}</Text> : null}\n    </View>\n  );\n}\n\nexport function Avatar({ name, size, color, style, uri }) {\n  const t = useT();\n  const s = size || 40;\n  const c = color || t.accent;\n  const initials = (name || '?').split(' ').map((p) => p[0]).join('').slice(0, 2).toUpperCase();\n  return (\n    <View style={[{ width: s, height: s, borderRadius: s / 2, backgroundColor: alpha(c, 0.25), alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }, style]}>\n      <View style={{ position: 'absolute', left: -s * 0.2, top: -s * 0.2, width: s * 0.9, height: s * 0.9, borderRadius: s, backgroundColor: alpha(c, 0.35) }} />\n      <Text style={{ color: t.isDark ? mix(c, '#FFFFFF', 0.45) : mix(c, '#000000', 0.25), fontSize: s * 0.38, fontWeight: '700' }}>{initials}</Text>\n    </View>\n  );\n}\n\nexport function Progress({ value, color, height, track, style }) {\n  const t = useT();\n  const v = useTween(Math.max(0, Math.min(1, value)));\n  const h = height || 8;\n  return (\n    <View style={[{ height: h, borderRadius: h / 2, backgroundColor: track || t.card2, overflow: 'hidden' }, style]}>\n      <View style={{ width: (v * 100) + '%', height: h, borderRadius: h / 2, backgroundColor: color || t.accent }} />\n    </View>\n  );\n}\n\n/** Circular progress ring (SVG). progress 0..1. Children render in the middle. */\nexport function Ring({ progress, size, stroke, color, track, children, style }) {\n  const t = useT();\n  const s = size || 160;\n  const sw = stroke || 14;\n  const r = (s - sw) / 2;\n  const c = 2 * Math.PI * r;\n  const p = useTween(Math.max(0, Math.min(1, progress)));\n  return (\n    <View style={[{ width: s, height: s, alignItems: 'center', justifyContent: 'center' }, style]}>\n      <Svg width={s} height={s} style={{ position: 'absolute', transform: [{ rotate: '-90deg' }] }}>\n        <Circle cx={s / 2} cy={s / 2} r={r} stroke={track || t.card2} strokeWidth={sw} fill=\"none\" />\n        <Circle cx={s / 2} cy={s / 2} r={r} stroke={color || t.accent} strokeWidth={sw} fill=\"none\" strokeLinecap=\"round\" strokeDasharray={c + ' ' + c} strokeDashoffset={c * (1 - p)} />\n      </Svg>\n      {children}\n    </View>\n  );\n}\n\n/** Bar chart (SVG). values: numbers; labels optional; highlight index. */\nexport function Bars({ values, labels, height, color, dim, highlight, gap, radius, style, max }) {\n  const t = useT();\n  const h = height || 120;\n  const [w, setW] = useState(0);\n  const m = max || Math.max(1, ...values);\n  const n = values.length;\n  const g = gap == null ? 8 : gap;\n  const bw = n ? (w - g * (n - 1)) / n : 0;\n  const rad = radius == null ? Math.min(6, bw / 2) : radius;\n  const lh = labels ? 18 : 0;\n  return (\n    <View onLayout={(e) => setW(e.nativeEvent.layout.width)} style={[{ height: h + lh }, style]}>\n      {w > 0 ? (\n        <Svg width={w} height={h}>\n          {values.map((v, i) => {\n            const bh = Math.max(4, (v / m) * h);\n            const on = highlight == null || highlight === i;\n            return <Rect key={i} x={i * (bw + g)} y={h - bh} width={bw} height={bh} rx={rad} fill={on ? (color || t.accent) : (dim || t.card2)} />;\n          })}\n        </Svg>\n      ) : null}\n      {labels ? (\n        <View style={{ flexDirection: 'row', marginTop: 4 }}>\n          {labels.map((l, i) => <Text key={i} style={[T.caption2, { color: highlight === i ? t.text : t.text3, flex: 1, textAlign: 'center' }]}>{l}</Text>)}\n        </View>\n      ) : null}\n    </View>\n  );\n}\n\n/** Sparkline / area line (SVG). */\nexport function Spark({ values, height, color, fill, stroke, style, dot }) {\n  const t = useT();\n  const h = height || 80;\n  const [w, setW] = useState(0);\n  const c = color || t.accent;\n  const min = Math.min(...values), max = Math.max(...values);\n  const span = max - min || 1;\n  const pts = values.map((v, i) => [values.length > 1 ? (i / (values.length - 1)) * w : 0, 6 + (1 - (v - min) / span) * (h - 12)]);\n  const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');\n  const area = d + ' L' + w + ' ' + h + ' L0 ' + h + ' Z';\n  const last = pts[pts.length - 1] || [0, 0];\n  return (\n    <View onLayout={(e) => setW(e.nativeEvent.layout.width)} style={[{ height: h }, style]}>\n      {w > 0 ? (\n        <Svg width={w} height={h}>\n          <Defs>\n            <SvgGradient id=\"sparkfill\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <Stop offset=\"0\" stopColor={c} stopOpacity={t.isDark ? 0.35 : 0.25} />\n              <Stop offset=\"1\" stopColor={c} stopOpacity=\"0\" />\n            </SvgGradient>\n          </Defs>\n          {fill !== false ? <Path d={area} fill=\"url(#sparkfill)\" /> : null}\n          <Path d={d} stroke={c} strokeWidth={stroke || 2.5} fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          {dot !== false ? <Circle cx={last[0]} cy={last[1]} r={4} fill={c} stroke={t.card} strokeWidth={2} /> : null}\n        </Svg>\n      ) : null}\n    </View>\n  );\n}\n\n// ─── navigation ─────────────────────────────────────────────────────────────\n/** Bottom tab bar. tabs: [{ key, label, icon }]. */\nexport function TabBar({ tabs, active, onChange, style, accent }) {\n  const t = useT();\n  const ins = useInsets();\n  const c = accent || t.accent;\n  return (\n    <View style={[{ paddingBottom: Math.max(ins.bottom, 10), paddingTop: 8, backgroundColor: t.isDark ? alpha(t.card, 0.96) : alpha('#FFFFFF', 0.96), borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: t.line, flexDirection: 'row' }, style]}>\n      {tabs.map((tab) => {\n        const on = tab.key === active;\n        return (\n          <Pressable key={tab.key} onPress={() => onChange(tab.key)} style={({ pressed }) => [{ flex: 1, alignItems: 'center', gap: 3, paddingVertical: 2 }, pressed && { opacity: 0.6 }]}>\n            <Icon name={tab.icon} size={24} color={on ? c : t.text3} strokeWidth={on ? 2.4 : 2} fill={on && tab.fillOnActive ? c : 'none'} />\n            <Text style={[{ fontSize: 10, fontWeight: on ? '600' : '500', color: on ? c : t.text3 }]}>{tab.label}</Text>\n          </Pressable>\n        );\n      })}\n    </View>\n  );\n}\n\n/** Tab screens: every tab stays mounted (state + scroll position survive a switch); only the active one is displayed. */\nexport function Tabs({ active, screens }) {\n  return (\n    <View style={{ flex: 1 }}>\n      {Object.keys(screens).map((k) => (\n        <View key={k} style={{ flex: 1, display: k === active ? 'flex' : 'none' }}>{screens[k]}</View>\n      ))}\n    </View>\n  );\n}\n\n/**\n * Minimal navigation stack: screens = { name: Component }, each rendered with\n * { nav: { push, pop, canPop }, params }. Pushed screens slide in from the right\n * while the screen beneath parallaxes left (iOS push transition).\n */\nexport function Stack({ screens, initial, params }) {\n  const t = useT();\n  const [stack, setStack] = useState([{ key: 'root', name: initial, params: params || {} }]);\n  const [leavingKey, setLeavingKey] = useState(null);\n  const nav = useMemo(() => ({\n    push: (name, p) => setStack((s) => [...s, { key: name + '-' + Date.now(), name: name, params: p || {} }]),\n    pop: () => setStack((s) => { if (s.length > 1) setLeavingKey(s[s.length - 1].key); return s; }),\n    reset: (name, p) => setStack([{ key: 'root-' + Date.now(), name: name, params: p || {} }]),\n    canPop: stack.length > 1,\n  }), [stack.length]);\n  const width = win().width;\n  const finishPop = (key) => { setStack((s) => s.filter((e) => e.key !== key)); setLeavingKey(null); };\n  return (\n    <View style={{ flex: 1, overflow: 'hidden', backgroundColor: t.bg }}>\n      {stack.map((entry, i) => {\n        const Cmp = screens[entry.name];\n        const isTop = i === stack.length - 1;\n        const under = i === stack.length - 2 && stack.length > 1;\n        return (\n          <StackLayer key={entry.key} width={width} index={i} isTop={isTop} under={under} leaving={entry.key === leavingKey} onLeft={() => finishPop(entry.key)}>\n            {Cmp ? <Cmp nav={nav} params={entry.params} /> : null}\n          </StackLayer>\n        );\n      })}\n    </View>\n  );\n}\nfunction StackLayer({ children, width, index, isTop, under, leaving, onLeft }) {\n  const prog = useRef(new Animated.Value(index === 0 ? 1 : 0)).current;\n  const t = useT();\n  useEffect(() => {\n    if (index === 0) return;\n    Animated.timing(prog, { toValue: 1, duration: 320, easing: Easing.out(Easing.cubic), useNativeDriver: false }).start();\n  }, []);\n  useEffect(() => {\n    if (!leaving) return;\n    Animated.timing(prog, { toValue: 0, duration: 280, easing: Easing.inOut(Easing.cubic), useNativeDriver: false }).start(() => onLeft());\n  }, [leaving]);\n  const tx = index === 0 ? 0 : prog.interpolate({ inputRange: [0, 1], outputRange: [width, 0] });\n  return (\n    <Animated.View pointerEvents={isTop ? 'auto' : 'none'} style={[StyleSheet.absoluteFill, { backgroundColor: t.bg, transform: [{ translateX: tx }], shadowColor: '#000', shadowOpacity: index === 0 ? 0 : 0.25, shadowRadius: 16, shadowOffset: { width: -4, height: 0 } }]}>\n      {children}\n      {under ? <View pointerEvents=\"none\" style={[StyleSheet.absoluteFill, { backgroundColor: alpha('#000000', t.isDark ? 0.35 : 0.12) }]} /> : null}\n    </Animated.View>\n  );\n}\n\n/** Bottom sheet over a dimmed backdrop. */\nexport function Sheet({ visible, onClose, title, children, height }) {\n  const t = useT();\n  const ins = useInsets();\n  const y = useRef(new Animated.Value(1)).current;\n  const [mounted, setMounted] = useState(visible);\n  useEffect(() => {\n    if (visible) { setMounted(true); Animated.spring(y, { toValue: 0, useNativeDriver: false, speed: 18, bounciness: 2 }).start(); }\n    else Animated.timing(y, { toValue: 1, duration: 220, easing: Easing.in(Easing.cubic), useNativeDriver: false }).start(() => setMounted(false));\n  }, [visible]);\n  if (!mounted) return null;\n  const h = height || 420;\n  return (\n    <Modal transparent visible animationType=\"none\" onRequestClose={onClose}>\n      <Pressable onPress={onClose} style={{ flex: 1, backgroundColor: alpha('#000000', 0.45) }} />\n      <Animated.View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: h + ins.bottom, backgroundColor: t.isDark ? t.card : '#FFFFFF', borderTopLeftRadius: 28, borderTopRightRadius: 28, paddingHorizontal: 20, paddingBottom: ins.bottom + 12, transform: [{ translateY: y.interpolate({ inputRange: [0, 1], outputRange: [0, h + 60] }) }] }}>\n        <View style={{ alignSelf: 'center', width: 36, height: 5, borderRadius: 3, backgroundColor: t.text3, opacity: 0.5, marginTop: 8, marginBottom: 12 }} />\n        {title ? <Text style={[T.title3, { color: t.text, marginBottom: 12 }]}>{title}</Text> : null}\n        {children}\n      </Animated.View>\n    </Modal>\n  );\n}\n\n/** Linear gradient surface (expo-linear-gradient, vendored). colors: 2+ hex. */\nexport function Gradient({ colors, style, children, start, end, angle }) {\n  const a = angle == null ? 135 : angle;\n  const rad = (a * Math.PI) / 180;\n  const s = start || { x: 0.5 - Math.sin(rad) / 2, y: 0.5 + Math.cos(rad) / 2 };\n  const e = end || { x: 0.5 + Math.sin(rad) / 2, y: 0.5 - Math.cos(rad) / 2 };\n  return <LinearGradient colors={colors} start={s} end={e} style={style}>{children}</LinearGradient>;\n}\n\n/** Soft radial-ish glow block for hero areas (two stacked translucent circles). */\nexport function Glow({ color, size, style, opacity }) {\n  const s = size || 260;\n  return (\n    <View pointerEvents=\"none\" style={[{ position: 'absolute', width: s, height: s, borderRadius: s / 2, backgroundColor: alpha(color, opacity == null ? 0.18 : opacity) }, style]}>\n      <View style={{ position: 'absolute', left: s * 0.2, top: s * 0.2, width: s * 0.6, height: s * 0.6, borderRadius: s, backgroundColor: alpha(color, (opacity == null ? 0.18 : opacity) * 0.9) }} />\n    </View>\n  );\n}\n"}],"assets":[{"kind":"cover","url":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/83f53199-5079-4b64-9340-c1eb6ee06ac1/full.webp","width":1206,"height":2622,"lqip":"B9gFAwRIjoeYdHMwBHuCCWg=","variants":{"avif":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/83f53199-5079-4b64-9340-c1eb6ee06ac1/avif.avif","card":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/83f53199-5079-4b64-9340-c1eb6ee06ac1/card.webp","full":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/83f53199-5079-4b64-9340-c1eb6ee06ac1/full.webp","thumb":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/83f53199-5079-4b64-9340-c1eb6ee06ac1/thumb.webp","light_avif":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/65c62e38-31b8-4990-ab7f-5a3830e5c648/avif.avif","light_card":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/65c62e38-31b8-4990-ab7f-5a3830e5c648/card.webp","light_full":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/65c62e38-31b8-4990-ab7f-5a3830e5c648/full.webp","light_thumb":"https://storage.vp0.com/vp0/covers/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/65c62e38-31b8-4990-ab7f-5a3830e5c648/thumb.webp"}},{"kind":"screenshot","url":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-0.png","width":1206,"height":2622,"alt":"(root)","lqip":"B9gFAwRIjoeYdHMwBHuCCWg="},{"kind":"screenshot","url":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-1.png","width":1206,"height":2622,"alt":"view-2","lqip":"BegFCwBamheXe3WgZ3NwBzc="},{"kind":"screenshot","url":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-2.png","width":1206,"height":2622,"alt":"view-3","lqip":"R/gFCwJohmiHeXCLZ3CFBkc="},{"kind":"screenshot","url":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-3.png","width":1206,"height":2622,"alt":"view-4","lqip":"BugBAwBcqgZ5mHWBf2UyDKA="},{"kind":"screenshot","url":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-4.png","width":1206,"height":2622,"alt":"view-5","lqip":"B9gBAwJeeFeHkHB1DCCNCrc="},{"kind":"video","url":"https://storage.vp0.com/vp0/clips/91/0a209ae5-9fb5-49e7-82a7-8091d3f642d1/clip.mp4","variants":{"mp4":"https://storage.vp0.com/vp0/clips/91/0a209ae5-9fb5-49e7-82a7-8091d3f642d1/clip.mp4","webm":"https://storage.vp0.com/vp0/clips/91/0a209ae5-9fb5-49e7-82a7-8091d3f642d1/clip.webm","poster":"https://storage.vp0.com/vp0/clips/91/0a209ae5-9fb5-49e7-82a7-8091d3f642d1/poster.jpg"}},{"kind":"share_video","url":"https://storage.vp0.com/vp0/share/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/b56cdc7e-e5f9-452e-b3d1-e655e3698baa/share.mp4"}],"screens":[{"name":"(root)","image":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-0.png","order":0},{"name":"view-2","image":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-1.png","order":1},{"name":"view-3","image":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-2.png","order":2},{"name":"view-4","image":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-3.png","order":3},{"name":"view-5","image":"https://storage.vp0.com/vp0/screens/4df9f5cd-b10b-495f-b50b-b16c8d6a280c/7994884a-4e05-4c7c-85e8-c5f9455b7092/screen-4.png","order":4}],"dependencies":{},"devDependencies":{},"componentsUsed":[],"notes":"This is an iOS app UI starter built with React Native. Paste the design link into your AI app builder (Claude Code, Rork, Lovable) and ask it to start from this design. Add your own backend/data logic. These are UI starters.","importUrl":"https://vp0.com/source/lingo-language","manifestUrl":"https://api.vp0.com/designs/lingo-language/manifest","installCommand":null,"aiInstructions":"This is an iOS app UI starter for Expo React Native (\"Lingo — Language\").\nIntegrate it into the user's Expo project as follows:\n1. No extra dependencies are required.\n2. Create the following file(s) and paste each provided \"content\" exactly:\n   - App.tsx\n   - ui/kit.tsx\n3. Render the exported component from a screen (e.g. app/(tabs)/index.tsx). It targets iOS — keep SafeAreaView / safe-area insets and the existing styling.\n4. These are UI starters: reproduce the visual layout faithfully, then wire the user's own data/navigation/backend afterward.","promptText":"Build this iOS app design in my project: \"Lingo — Language\" — A gamified language app: a daily XP ring and streak, a winding unit path with locked and completed rings, a multiple choice lesson with instant feedback and a results screen, practice modes and a league leaderboard..\n1. Fetch https://api.vp0.com/designs/lingo-language/manifest — a JSON manifest whose files[] array contains EVERY source file inline (path + content).\n2. Create each file at its exact files[].path and paste its content VERBATIM. Do not re-imagine or restyle the UI — the provided code IS the design.\n3. Install dependencies exactly as given by the manifest's installCommand field (skip if null).\n4. Render the entry component (targets[].entrypoint) from a screen. Keep SafeAreaView / safe-area insets and the existing styling untouched.\n5. It is a UI starter: once it renders pixel-perfect, wire my own data, navigation and backend on top.\nHuman-readable source page: https://vp0.com/source/lingo-language"}