@expokit/cli 0.3.0 → 0.4.0

package/registry/_docs/assistant-app.json

@@ -0,0 +1,47 @@
+{
+  "name": "assistant-app",
+  "category": "Templates",
+  "aliases": [],
+  "exportName": null,
+  "files": [
+    "src/app/(tabs)/_layout.tsx",
+    "src/app/(tabs)/history.tsx",
+    "src/app/(tabs)/index.tsx",
+    "src/app/(tabs)/profile.tsx",
+    "src/app/_layout.tsx",
+    "src/app/onboarding.tsx",
+    "src/app/settings.tsx",
+    "src/app/sign-in.tsx",
+    "src/components/assistant-app/tabs.tsx",
+    "src/lib/assistant-app/assistant.ts",
+    "src/lib/assistant-app/conversations.tsx",
+    "src/lib/assistant-app/data.ts",
+    "src/lib/assistant-app/session.tsx"
+  ],
+  "summary": null,
+  "props": [],
+  "behavior": [
+    [
+      "Flow",
+      "Onboarding shows once, then sign in (Apple, Google or a 6-digit email code), then the tabs. Signing out returns to sign in. The session is saved on the device (AsyncStorage) and guarded with Expo Router’s Stack.Protected."
+    ],
+    [
+      "Chat",
+      "Fully controlled: your message goes in, the reply streams in word by word with a Stop button, and suggestion chips fill the empty state. The tab bar steps aside while the keyboard is up."
+    ],
+    [
+      "History",
+      "Every conversation, newest first. Tap to reopen it in Chat, swipe to delete, or compose a new one."
+    ],
+    [
+      "Settings",
+      "Pushed from Profile. Appearance (System / Light / Dark) re-themes every kit component instantly."
+    ],
+    [
+      "Your model",
+      "lib/assistant-app/assistant.ts streams a canned answer so the app runs with no backend. Replace `reply` with a call to your server, which calls the model API — never ship an API key in the app."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/avatar.json

@@ -186,7 +186,7 @@
     {
       "name": "ProfileHeader",
       "title": "Profile Header",
-      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function ProfileHeader() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        alignItems: 'center',\n        gap: 12,\n        paddingVertical: 20,\n        paddingHorizontal: 16,\n        borderRadius: radius.xl,\n        backgroundColor: colors.card,\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n      }}\n    >\n      <Avatar\n        size={88}\n        src=\"https://i.pravatar.cc/240?img=47\"\n        name=\"Ava Rossi\"\n        ring=\"story\"\n        verified\n        surface={colors.card}\n        elevated\n      />\n      <View style={{ alignItems: 'center', gap: 2 }}>\n        <Text style={{ fontSize: 19, fontWeight: '400', letterSpacing: -0.3, color: colors.foreground }}>Ava Rossi</Text>\n        <Text style={{ fontSize: 14, color: colors.mutedForeground }}>Product designer · Milan</Text>\n      </View>\n      <View style={{ flexDirection: 'row', gap: 24, marginTop: 4 }}>\n        {[\n          ['248', 'Posts'],\n          ['12.4k', 'Followers'],\n          ['311', 'Following'],\n        ].map(([n, l]) => (\n          <View key={l} style={{ alignItems: 'center' }}>\n            <Text style={{ fontSize: 16, color: colors.foreground, fontVariant: ['tabular-nums'] }}>{n}</Text>\n            <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{l}</Text>\n          </View>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function ProfileHeader({ screen }: DemoProps) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignItems: 'center', gap: 12, paddingVertical: 20, paddingHorizontal: 16 },\n        screen\n          ? { flex: 1, justifyContent: 'center', backgroundColor: colors.background }\n          : { borderRadius: radius.xl, backgroundColor: colors.card, borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <Avatar\n        size={88}\n        src=\"https://i.pravatar.cc/240?img=47\"\n        name=\"Ava Rossi\"\n        ring=\"story\"\n        verified\n        surface={screen ? colors.background : colors.card}\n        elevated\n      />\n      <View style={{ alignItems: 'center', gap: 2 }}>\n        <Text style={{ fontSize: 19, fontWeight: '400', letterSpacing: -0.3, color: colors.foreground }}>Ava Rossi</Text>\n        <Text style={{ fontSize: 14, color: colors.mutedForeground }}>Product designer · Milan</Text>\n      </View>\n      <View style={{ flexDirection: 'row', gap: 24, marginTop: 4 }}>\n        {[\n          ['248', 'Posts'],\n          ['12.4k', 'Followers'],\n          ['311', 'Following'],\n        ].map(([n, l]) => (\n          <View key={l} style={{ alignItems: 'center' }}>\n            <Text style={{ fontSize: 16, color: colors.foreground, fontVariant: ['tabular-nums'] }}>{n}</Text>\n            <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{l}</Text>\n          </View>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
     },
     {
       "name": "ChatList",

package/registry/_docs/badge.json

@@ -2,7 +2,7 @@
   "name": "badge",
   "category": "Display",
   "aliases": [],
-  "exportName": "BadgeIcon",
+  "exportName": "Badge",
   "files": [
     "src/components/ui/badge.tsx"
   ],

package/registry/_docs/bottom-nav.json

@@ -112,32 +112,32 @@
     {
       "name": "MinimalClean",
       "title": "Minimal Clean",
-      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function MinimalClean() {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'explore', label: 'Explore', icon: 'explore' },\n    { key: 'projects', label: 'Projects', icon: 'projects' },\n    { key: 'saved', label: 'Saved', icon: 'saved' },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('home');\n  return (\n    <Screen title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"minimal\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, screen, children }: { title: string; rows: Row[]; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignSelf: 'stretch', overflow: 'hidden', backgroundColor: colors.background, justifyContent: 'space-between' },\n        screen\n          ? { flex: 1 }\n          : { height: 300, borderRadius: radius.scale(28), borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function MinimalClean({ screen, bottomInset }: DemoProps) {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'explore', label: 'Explore', icon: 'explore' },\n    { key: 'projects', label: 'Projects', icon: 'projects' },\n    { key: 'saved', label: 'Saved', icon: 'saved' },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('home');\n  return (\n    <Screen screen={screen} title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav bottomInset={bottomInset} variant=\"minimal\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
     },
     {
       "name": "Floating",
       "title": "Floating",
-      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function Floating() {\n  const [tab, setTab] = useState('home');\n  const [unread, setUnread] = useState(3);\n  const [drafts, setDrafts] = useState(0);\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'search', label: 'Search', icon: 'search' },\n    { key: 'create', label: 'New note', icon: 'create', action: true },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: unread || undefined },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const open = (k: string) => {\n    setTab(k);\n    if (k === 'inbox') setUnread(0);\n  };\n  return (\n    <Screen title={drafts ? `${drafts} new ${drafts === 1 ? 'draft' : 'drafts'}` : titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"floating\" items={items} value={tab} onValueChange={open} onAction={() => setDrafts((n) => n + 1)} />\n    </Screen>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, screen, children }: { title: string; rows: Row[]; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignSelf: 'stretch', overflow: 'hidden', backgroundColor: colors.background, justifyContent: 'space-between' },\n        screen\n          ? { flex: 1 }\n          : { height: 300, borderRadius: radius.scale(28), borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function Floating({ screen, bottomInset }: DemoProps) {\n  const [tab, setTab] = useState('home');\n  const [unread, setUnread] = useState(3);\n  const [drafts, setDrafts] = useState(0);\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'search', label: 'Search', icon: 'search' },\n    { key: 'create', label: 'New note', icon: 'create', action: true },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: unread || undefined },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const open = (k: string) => {\n    setTab(k);\n    if (k === 'inbox') setUnread(0);\n  };\n  return (\n    <Screen screen={screen} title={drafts ? `${drafts} new ${drafts === 1 ? 'draft' : 'drafts'}` : titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav bottomInset={bottomInset} variant=\"floating\" items={items} value={tab} onValueChange={open} onAction={() => setDrafts((n) => n + 1)} />\n    </Screen>\n  );\n}\n"
     },
     {
       "name": "PillHighlight",
       "title": "Pill Highlight",
-      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function PillHighlight() {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'projects', label: 'Projects', icon: 'projects' },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: true },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('home');\n  return (\n    <Screen title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"pill\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, screen, children }: { title: string; rows: Row[]; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignSelf: 'stretch', overflow: 'hidden', backgroundColor: colors.background, justifyContent: 'space-between' },\n        screen\n          ? { flex: 1 }\n          : { height: 300, borderRadius: radius.scale(28), borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function PillHighlight({ screen, bottomInset }: DemoProps) {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'projects', label: 'Projects', icon: 'projects' },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: true },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('home');\n  return (\n    <Screen screen={screen} title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav bottomInset={bottomInset} variant=\"pill\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
     },
     {
       "name": "CenterFab",
       "title": "Center Fab",
-      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function CenterFab() {\n  const [tab, setTab] = useState('home');\n  const [posts, setPosts] = useState(0);\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'explore', label: 'Explore', icon: 'explore' },\n    { key: 'create', label: 'Post', icon: 'create', action: true },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: 12 + posts },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  return (\n    <Screen title={posts ? `Posted ${posts} ${posts === 1 ? 'time' : 'times'}` : titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"center-fab\" items={items} value={tab} onValueChange={setTab} onAction={() => setPosts((n) => n + 1)} />\n    </Screen>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, screen, children }: { title: string; rows: Row[]; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignSelf: 'stretch', overflow: 'hidden', backgroundColor: colors.background, justifyContent: 'space-between' },\n        screen\n          ? { flex: 1 }\n          : { height: 300, borderRadius: radius.scale(28), borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function CenterFab({ screen, bottomInset }: DemoProps) {\n  const [tab, setTab] = useState('home');\n  const [posts, setPosts] = useState(0);\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'explore', label: 'Explore', icon: 'explore' },\n    { key: 'create', label: 'Post', icon: 'create', action: true },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: 12 + posts },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  return (\n    <Screen screen={screen} title={posts ? `Posted ${posts} ${posts === 1 ? 'time' : 'times'}` : titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav bottomInset={bottomInset} variant=\"center-fab\" items={items} value={tab} onValueChange={setTab} onAction={() => setPosts((n) => n + 1)} />\n    </Screen>\n  );\n}\n"
     },
     {
       "name": "TabWithIndicator",
       "title": "Tab With Indicator",
-      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function TabWithIndicator() {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'analytics', label: 'Insights', icon: 'analytics' },\n    { key: 'activity', label: 'Activity', icon: 'activity' },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: 5 },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('analytics');\n  return (\n    <Screen title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"indicator\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, screen, children }: { title: string; rows: Row[]; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignSelf: 'stretch', overflow: 'hidden', backgroundColor: colors.background, justifyContent: 'space-between' },\n        screen\n          ? { flex: 1 }\n          : { height: 300, borderRadius: radius.scale(28), borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function TabWithIndicator({ screen, bottomInset }: DemoProps) {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'analytics', label: 'Insights', icon: 'analytics' },\n    { key: 'activity', label: 'Activity', icon: 'activity' },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: 5 },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('analytics');\n  return (\n    <Screen screen={screen} title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav bottomInset={bottomInset} variant=\"indicator\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
     },
     {
       "name": "MusicIconsOnly",
       "title": "Music Icons Only",
-      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function MusicIconsOnly() {\n  const items: BottomNavItem[] = [\n    { key: 'home2', label: 'Listen now', icon: 'music' },\n    { key: 'browse', label: 'Browse', icon: 'browse' },\n    { key: 'library', label: 'Library', icon: 'library' },\n    { key: 'find', label: 'Search', icon: 'search' },\n  ];\n  const [tab, setTab] = useState('home2');\n  return (\n    <Screen title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"floating\" showLabels={false} items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, screen, children }: { title: string; rows: Row[]; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignSelf: 'stretch', overflow: 'hidden', backgroundColor: colors.background, justifyContent: 'space-between' },\n        screen\n          ? { flex: 1 }\n          : { height: 300, borderRadius: radius.scale(28), borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function MusicIconsOnly({ screen, bottomInset }: DemoProps) {\n  const items: BottomNavItem[] = [\n    { key: 'home2', label: 'Listen now', icon: 'music' },\n    { key: 'browse', label: 'Browse', icon: 'browse' },\n    { key: 'library', label: 'Library', icon: 'library' },\n    { key: 'find', label: 'Search', icon: 'search' },\n  ];\n  const [tab, setTab] = useState('home2');\n  return (\n    <Screen screen={screen} title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav bottomInset={bottomInset} variant=\"floating\" showLabels={false} items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/button-3d.json

@@ -112,7 +112,7 @@
     {
       "name": "OnPhoto",
       "title": "On Photo",
-      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\n/** A screen title, as it sits above the content in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function OnPhoto() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 18 }}>\n      <Header\n        title=\"Good morning, Maya\"\n        sub=\"Your trip starts in 3 days\"\n        right={\n          <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n            <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '700' }}>MP</Text>\n          </View>\n        }\n      />\n      <View style={{ height: 440, borderRadius: 28, overflow: 'hidden', backgroundColor: '#1a2a22' }}>\n        <Image alt=\"\" source={photo(1039, 700, 880)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n        <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.28)' }} />\n        <View style={{ flex: 1, justifyContent: 'flex-end', padding: 22, gap: 16 }}>\n          <View>\n            <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 12, fontWeight: '700', letterSpacing: 1.2 }}>OREGON · 3 DAYS</Text>\n            <Text style={{ color: '#fff', fontSize: 30, fontWeight: '800', letterSpacing: -0.8 }}>Multnomah Falls</Text>\n            <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 13, marginTop: 2 }}>Waterfalls, old-growth forest and a lodge by the river</Text>\n          </View>\n          <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"pill\" style={{ flex: 1 }} block>\n              Start the trip\n            </Button3D>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"circle\" accessibilityLabel=\"Save\">\n              ♡\n            </Button3D>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"circle\" accessibilityLabel=\"Share\">\n              ↗\n            </Button3D>\n          </View>\n        </View>\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { GrainGradient } from '@/components/ui/grain';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** A screen title, as it sits above the content in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function OnPhoto({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <View style={[{ gap: 18 }, screen && { flex: 1 }]}>\n      <Header\n        title=\"Good morning, Maya\"\n        sub=\"Your trip starts in 3 days\"\n        right={\n          <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n            <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '700' }}>MP</Text>\n          </View>\n        }\n      />\n      <View style={[{ borderRadius: 28, overflow: 'hidden', backgroundColor: '#1a2a22' }, screen ? { flex: 1, minHeight: 440 } : { height: 440 }]}>\n        <GrainGradient palette=\"aurora\" seed={2} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n        <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.28)' }} />\n        <View style={{ flex: 1, justifyContent: 'flex-end', padding: 22, gap: 16 }}>\n          <View>\n            <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 12, fontWeight: '700', letterSpacing: 1.2 }}>NORTHERN LIGHTS · 4 NIGHTS</Text>\n            <Text style={{ color: '#fff', fontSize: 30, fontWeight: '800', letterSpacing: -0.8 }}>Aurora Weekend</Text>\n            <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 13, marginTop: 2 }}>Glass cabins, hot springs and skies that glow green</Text>\n          </View>\n          <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"pill\" style={{ flex: 1 }} block>\n              Start the trip\n            </Button3D>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"circle\" accessibilityLabel=\"Save\">\n              ♡\n            </Button3D>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"circle\" accessibilityLabel=\"Share\">\n              ↗\n            </Button3D>\n          </View>\n        </View>\n      </View>\n    </View>\n  );\n}\n"
     },
     {
       "name": "Keypad",
@@ -132,7 +132,7 @@
     {
       "name": "Materials",
       "title": "Materials",
-      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\n/** A screen title, as it sits above the content in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Materials() {\n  return (\n    <View style={{ gap: 18 }}>\n      <Header title=\"Materials\" sub=\"Light, dark, frosted glass — or any colour\" />\n      <View style={{ flexDirection: 'row', gap: 10, justifyContent: 'center' }}>\n        <Button3D appearance=\"light\">Light</Button3D>\n        <Button3D appearance=\"dark\">Dark</Button3D>\n        <Button3D color=\"#ff5a5f\">Custom</Button3D>\n      </View>\n      <View style={{ borderRadius: 22, overflow: 'hidden', padding: 18, alignItems: 'center', backgroundColor: '#3a2b55' }}>\n        <Image alt=\"\" source={photo(888, 300, 160, true)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n        <View style={{ flexDirection: 'row', gap: 10 }}>\n          <Button3D appearance=\"glass\">Glass</Button3D>\n          <Button3D appearance=\"glass\" shape=\"pill\">\n            On any photo\n          </Button3D>\n        </View>\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { GrainGradient } from '@/components/ui/grain';\nimport { useKit } from '@/lib/kit';\n\n/** A screen title, as it sits above the content in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Materials() {\n  return (\n    <View style={{ gap: 18 }}>\n      <Header title=\"Materials\" sub=\"Light, dark, frosted glass — or any colour\" />\n      <View style={{ flexDirection: 'row', gap: 10, justifyContent: 'center' }}>\n        <Button3D appearance=\"light\">Light</Button3D>\n        <Button3D appearance=\"dark\">Dark</Button3D>\n        <Button3D color=\"#ff5a5f\">Custom</Button3D>\n      </View>\n      <View style={{ borderRadius: 22, overflow: 'hidden', padding: 18, alignItems: 'center', backgroundColor: '#3a2b55' }}>\n        <GrainGradient palette=\"candy\" seed={1} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n        <View style={{ flexDirection: 'row', gap: 10 }}>\n          <Button3D appearance=\"glass\">Glass</Button3D>\n          <Button3D appearance=\"glass\" shape=\"pill\">\n            On any backdrop\n          </Button3D>\n        </View>\n      </View>\n    </View>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/calendar.json

@@ -172,27 +172,27 @@
     {
       "name": "Single",
       "title": "Single",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Single() {\n  const [date, setDate] = useState<Date>(addDays(today, 3));\n  return (\n    <Card>\n      <Ink style={s.title}>Delivery day</Ink>\n      <Calendar value={date} onChange={setDate} minDate={today} />\n      <View style={s.summary}>\n        <Ink tone=\"muted\" style={s.muted}>Arriving</Ink>\n        <Ink style={s.strong}>{day(date)}</Ink>\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Single({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date>(addDays(today, 3));\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Delivery day</Ink>\n      <Calendar value={date} onChange={setDate} minDate={today} />\n      <View style={s.summary}>\n        <Ink tone=\"muted\" style={s.muted}>Arriving</Ink>\n        <Ink style={s.strong}>{day(date)}</Ink>\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Range",
       "title": "Range",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Range() {\n  const [stay, setStay] = useState<DateRange>({ start: addDays(today, 4), end: addDays(today, 8) });\n  const { colors, radius } = useKit();\n  const nights = stay.start && stay.end ? Math.round((stay.end.getTime() - stay.start.getTime()) / 86400000) : 0;\n  return (\n    <Card>\n      <Ink style={s.title}>Your stay · Lisbon</Ink>\n      <Calendar mode=\"range\" value={stay} onChange={setStay} minDate={today} />\n      <View style={s.row}>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-in</Ink>\n          <Ink style={s.strong}>{day(stay.start)}</Ink>\n        </View>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-out</Ink>\n          <Ink style={s.strong}>{stay.end ? day(stay.end) : 'Select a date'}</Ink>\n        </View>\n        <View style={[s.pill, { opacity: nights ? 1 : 0.4, backgroundColor: alpha(colors.accent, 0.14), borderRadius: radius.capsule(30) }]}>\n          <Text style={[s.pillText, { color: colors.accent }]}>{nights ? `${nights} night${nights > 1 ? 's' : ''}` : '0 nights'}</Text>\n        </View>\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Range({ screen }: DemoProps) {\n  const [stay, setStay] = useState<DateRange>({ start: addDays(today, 4), end: addDays(today, 8) });\n  const { colors, radius } = useKit();\n  const nights = stay.start && stay.end ? Math.round((stay.end.getTime() - stay.start.getTime()) / 86400000) : 0;\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Your stay · Lisbon</Ink>\n      <Calendar mode=\"range\" value={stay} onChange={setStay} minDate={today} />\n      <View style={s.row}>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-in</Ink>\n          <Ink style={s.strong}>{day(stay.start)}</Ink>\n        </View>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-out</Ink>\n          <Ink style={s.strong}>{stay.end ? day(stay.end) : 'Select a date'}</Ink>\n        </View>\n        <View style={[s.pill, { opacity: nights ? 1 : 0.4, backgroundColor: alpha(colors.accent, 0.14), borderRadius: radius.capsule(30) }]}>\n          <Text style={[s.pillText, { color: colors.accent }]}>{nights ? `${nights} night${nights > 1 ? 's' : ''}` : '0 nights'}</Text>\n        </View>\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Marked",
       "title": "Marked",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst MEETING = '#38bdf8';\n\nconst BIRTHDAY = '#f472b6';\n\nconst TRIP = '#f59e0b';\n\nconst DONE = '#22c55e';\n\nconst DUE = '#ef4444';\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Marked() {\n  const [date, setDate] = useState<Date>(today);\n  const { highlights, marks } = useMemo(() => {\n    const y = today.getFullYear();\n    const m = today.getMonth();\n    const k = (d: number) => toDateKey(new Date(y, m, d));\n    return {\n      // Whole-day fills: who / what owns the day.\n      highlights: { [k(2)]: MEETING, [k(14)]: BIRTHDAY, [k(18)]: TRIP, [k(21)]: MEETING, [k(31)]: BIRTHDAY },\n      // Dots underneath: smaller things on that day.\n      marks: { [k(3)]: DONE, [k(8)]: DUE, [k(12)]: DONE, [k(17)]: DONE, [k(22)]: [DONE, DUE], [k(26)]: DUE },\n    };\n  }, []);\n  return (\n    <Card>\n      <Ink style={s.title}>Schedule</Ink>\n      <Calendar value={date} onChange={setDate} highlightedDates={highlights} markedDates={marks} weekStartsOn={1} />\n      <View style={s.legend}>\n        {[\n          ['Meeting', MEETING],\n          ['Birthday', BIRTHDAY],\n          ['Trip', TRIP],\n          ['Done', DONE],\n          ['Due', DUE],\n        ].map(([label, color]) => (\n          <View key={label} style={s.legendItem}>\n            <View style={[s.dot, { backgroundColor: color }]} />\n            <Ink tone=\"muted\" style={s.muted}>{label}</Ink>\n          </View>\n        ))}\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst MEETING = '#38bdf8';\n\nconst BIRTHDAY = '#f472b6';\n\nconst TRIP = '#f59e0b';\n\nconst DONE = '#22c55e';\n\nconst DUE = '#ef4444';\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Marked({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date>(today);\n  const { highlights, marks } = useMemo(() => {\n    const y = today.getFullYear();\n    const m = today.getMonth();\n    const k = (d: number) => toDateKey(new Date(y, m, d));\n    return {\n      // Whole-day fills: who / what owns the day.\n      highlights: { [k(2)]: MEETING, [k(14)]: BIRTHDAY, [k(18)]: TRIP, [k(21)]: MEETING, [k(31)]: BIRTHDAY },\n      // Dots underneath: smaller things on that day.\n      marks: { [k(3)]: DONE, [k(8)]: DUE, [k(12)]: DONE, [k(17)]: DONE, [k(22)]: [DONE, DUE], [k(26)]: DUE },\n    };\n  }, []);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Schedule</Ink>\n      <Calendar value={date} onChange={setDate} highlightedDates={highlights} markedDates={marks} weekStartsOn={1} />\n      <View style={s.legend}>\n        {[\n          ['Meeting', MEETING],\n          ['Birthday', BIRTHDAY],\n          ['Trip', TRIP],\n          ['Done', DONE],\n          ['Due', DUE],\n        ].map(([label, color]) => (\n          <View key={label} style={s.legendItem}>\n            <View style={[s.dot, { backgroundColor: color }]} />\n            <Ink tone=\"muted\" style={s.muted}>{label}</Ink>\n          </View>\n        ))}\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Booking",
       "title": "Booking",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Booking() {\n  const booked = useMemo(() => new Set([2, 5, 6, 11, 19].map((n) => toDateKey(addDays(today, n)))), []);\n  const [date, setDate] = useState<Date | null>(null);\n  return (\n    <Card>\n      <Ink style={s.title}>Book a consultation</Ink>\n      <Calendar\n        value={date}\n        onChange={setDate}\n        minDate={today}\n        maxDate={addDays(today, 45)}\n        isDateDisabled={(d) => d.getDay() === 0 || booked.has(toDateKey(d))}\n        showOutsideDays\n        fixedWeeks\n      />\n      <Ink tone=\"muted\" style={s.muted}>\n        {date ? `Next: choose a time on ${day(date)}` : 'Faded days are fully booked or closed on Sundays.'}\n      </Ink>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Booking({ screen }: DemoProps) {\n  const booked = useMemo(() => new Set([2, 5, 6, 11, 19].map((n) => toDateKey(addDays(today, n)))), []);\n  const [date, setDate] = useState<Date | null>(null);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Book a consultation</Ink>\n      <Calendar\n        value={date}\n        onChange={setDate}\n        minDate={today}\n        maxDate={addDays(today, 45)}\n        isDateDisabled={(d) => d.getDay() === 0 || booked.has(toDateKey(d))}\n        showOutsideDays\n        fixedWeeks\n      />\n      <Ink tone=\"muted\" style={s.muted}>\n        {date ? `Next: choose a time on ${day(date)}` : 'Faded days are fully booked or closed on Sundays.'}\n      </Ink>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "WeekStartsMonday",
       "title": "Week Starts Monday",
-      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function WeekStartsMonday() {\n  const [days, setDays] = useState<Date[]>([addDays(today, 1), addDays(today, 3)]);\n  return (\n    <Card>\n      <Ink style={s.title}>Training days · pick up to 3</Ink>\n      <Calendar mode=\"multiple\" value={days} onChange={setDays} max={3} weekStartsOn={1} locale=\"en-GB\" showOutsideDays />\n      <Ink tone=\"muted\" style={s.muted}>{days.length ? days.map((d) => day(d)).join('  ·  ') : 'No sessions planned'}</Ink>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. In `screen` mode it is the page itself. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  if (screen) return <View style={[s.screen, { backgroundColor: colors.background }, style]} {...rest} />;\n  return <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  screen: { flex: 1, justifyContent: 'center', padding: 16, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function WeekStartsMonday({ screen }: DemoProps) {\n  const [days, setDays] = useState<Date[]>([addDays(today, 1), addDays(today, 3)]);\n  return (\n    <Card screen={screen}>\n      <Ink style={s.title}>Training days · pick up to 3</Ink>\n      <Calendar mode=\"multiple\" value={days} onChange={setDays} max={3} weekStartsOn={1} locale=\"en-GB\" showOutsideDays />\n      <Ink tone=\"muted\" style={s.muted}>{days.length ? days.map((d) => day(d)).join('  ·  ') : 'No sessions planned'}</Ink>\n    </Card>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/checkout.json

@@ -12,7 +12,7 @@
       "items",
       "{ id, name, variant?, price, quantity, image? }[]",
       "3 sample products",
-      "Initial bag. Quantities and removals are kept in state."
+      "Initial bag. Quantities and removals are kept in state. Each item can carry a `thumbnail` node (your own drawing) instead of an `image` URL."
     ],
     [
       "onItemsChange",
@@ -50,6 +50,12 @@
       "—",
       "Return the discount fraction (0.1 = 10%) or null. Omit to hide the promo row."
     ],
+    [
+      "defaultPromo",
+      "string",
+      "—",
+      "A code to apply on mount (checked with onApplyPromo), e.g. a coupon picked on another screen."
+    ],
     [
       "taxRate",
       "number",

package/registry/_docs/confetti.json

@@ -86,17 +86,17 @@
     {
       "name": "Celebrate",
       "title": "Celebrate",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function Celebrate() {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View style={{ height: 420, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 }}>\n      <Text style={{ fontSize: 44 }}>🎉</Text>\n      <Text style={{ color: colors.foreground, fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>Order placed!</Text>\n      <Text style={{ color: colors.mutedForeground, fontSize: 14, textAlign: 'center' }}>You saved ₹240 with coupon GLOW50. Arriving Thursday.</Text>\n      <Pressable\n        onPress={() => confetti.current?.burst()}\n        accessibilityRole=\"button\"\n        style={{ marginTop: 12, paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, backgroundColor: colors.primary }}\n      >\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '700' }}>Celebrate again</Text>\n      </Pressable>\n      <Confetti ref={confetti} autoplay />\n    </View>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function Celebrate({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 420, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      <Text style={{ fontSize: 44 }}>🎉</Text>\n      <Text style={{ color: colors.foreground, fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>Order placed!</Text>\n      <Text style={{ color: colors.mutedForeground, fontSize: 14, textAlign: 'center' }}>You saved ₹240 with coupon GLOW50. Arriving Thursday.</Text>\n      <Pressable\n        onPress={() => confetti.current?.burst()}\n        accessibilityRole=\"button\"\n        style={{ marginTop: 12, paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, backgroundColor: colors.primary }}\n      >\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '700' }}>Celebrate again</Text>\n      </Pressable>\n      <Confetti ref={confetti} autoplay />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Rain",
       "title": "Rain",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function Rain() {\n  const { colors, radius } = useKit();\n  const [shower, setShower] = useState(0);\n  return (\n    <View style={{ height: 360, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}>\n      <Pressable onPress={() => setShower((n) => n + 1)} accessibilityRole=\"button\" style={{ paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, borderWidth: 1.5, borderColor: colors.foreground }}>\n        <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '700' }}>Make it rain</Text>\n      </Pressable>\n      <Confetti origin=\"top\" count={120} trigger={shower} colors={['#ffd23f', '#ffb000', '#fff3b0', '#ffffff']} />\n    </View>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function Rain({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [shower, setShower] = useState(0);\n  return (\n    <View\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 360, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      <Pressable onPress={() => setShower((n) => n + 1)} accessibilityRole=\"button\" style={{ paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, borderWidth: 1.5, borderColor: colors.foreground }}>\n        <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '700' }}>Make it rain</Text>\n      </Pressable>\n      <Confetti origin=\"top\" count={120} trigger={shower} colors={['#ffd23f', '#ffb000', '#fff3b0', '#ffffff']} />\n    </View>\n  );\n}\n"
     },
     {
       "name": "TapToPop",
       "title": "Tap To Pop",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function TapToPop() {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <Pressable\n      onPress={(e) => confetti.current?.burst({ origin: 'center', x: e.nativeEvent.locationX, y: e.nativeEvent.locationY, count: 50 })}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Tap to pop confetti\"\n      style={{ height: 360, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}\n    >\n      {/* Not touchable, so locationX/Y are always relative to the panel. */}\n      <View pointerEvents=\"none\">\n        <Text style={{ color: colors.mutedForeground, fontSize: 15, fontWeight: '600' }}>Tap anywhere</Text>\n      </View>\n      <Confetti ref={confetti} />\n    </Pressable>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function TapToPop({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <Pressable\n      onPress={(e) => confetti.current?.burst({ origin: 'center', x: e.nativeEvent.locationX, y: e.nativeEvent.locationY, count: 50 })}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Tap to pop confetti\"\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 360, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      {/* Not touchable, so locationX/Y are always relative to the panel. */}\n      <View pointerEvents=\"none\">\n        <Text style={{ color: colors.mutedForeground, fontSize: 15, fontWeight: '600' }}>Tap anywhere</Text>\n      </View>\n      <Confetti ref={confetti} />\n    </Pressable>\n  );\n}\n"
     }
   ]
 }