@expokit/cli 0.3.0 → 0.4.1

package/registry/_docs/drawer.json

@@ -178,22 +178,22 @@
     {
       "name": "AppNavigation",
       "title": "App Navigation",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst STATUS_H = 40;\n\n/** Phone-sized frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 600,\n          borderRadius: radius.scale(28),\n          borderWidth: StyleSheet.hairlineWidth,\n          borderColor: colors.border,\n          backgroundColor: colors.background,\n          overflow: 'hidden',\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      <StatusBar />\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nfunction Initials({ name, size = 32, square, ring }: { name: string; size?: number; square?: boolean; ring?: string }) {\n  const { colors, radius } = useKit();\n  const letters = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w[0])\n    .join('');\n  return (\n    <View\n      style={{\n        width: size,\n        height: size,\n        borderRadius: square ? radius.scale(size * 0.28) : radius.capsule(size),\n        backgroundColor: square ? colors.foreground : alpha(colors.accent, 0.14),\n        borderWidth: ring ? 2 : 0,\n        borderColor: ring,\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Text style={{ fontSize: size * 0.38, color: square ? colors.background : colors.accent }}>{letters}</Text>\n    </View>\n  );\n}\n\nfunction Dot({ color, size = 10 }: { color: string; size?: number }) {\n  const { radius } = useKit();\n  return <View style={{ width: size, height: size, borderRadius: radius.capsule(size), backgroundColor: color }} />;\n}\n\n/* Mail ------------------------------------------------------------------------------------------ */\n\nconst MAIL = [\n  { from: 'Lena Fischer', subject: 'Offsite agenda — final draft', snippet: 'Attached the plan for Thursday. Shout if the 10:00 slot clashes.', time: '9:41', unread: true },\n  { from: 'GitHub', service: true, subject: '[northwind/app] PR #482 merged', snippet: 'feat: offline drafts for the editor (#482) was merged into main.', time: '9:12', unread: true },\n  { from: 'Omar Haddad', subject: 'Re: Invoice 2041', snippet: 'Paid this morning — the receipt is in the thread below.', time: '8:03', unread: true },\n  { from: 'Figma', service: true, subject: 'Priya commented on Checkout v3', snippet: '“Can we try the sheet at 90% height here?”', time: 'Tue' },\n  { from: 'Stripe', service: true, subject: 'Your October payout is on its way', snippet: '₹2,48,000 will arrive in your account in 2 business days.', time: 'Mon' },\n  { from: 'Jonas Weber', subject: 'Photos from Lisbon', snippet: 'Finally sorted them — 48 shots, the tram ones came out great.', time: 'Sun' },\n  { from: 'Ana Costa', subject: 'Lunch next week?', snippet: 'There is a new ramen place near the office, Wednesday works.', time: 'Sat' },\n];\n\nfunction MailRow({ from, service, subject, snippet, time, unread }: (typeof MAIL)[number]) {\n  const { colors } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityLabel={`${unread ? 'Unread. ' : ''}${from}, ${subject}`}\n      style={({ pressed }) => ({ flexDirection: 'row', gap: 12, paddingVertical: 11, paddingLeft: 16, paddingRight: 14, backgroundColor: pressed ? colors.muted : 'transparent' })}\n    >\n      <Initials name={from} size={40} square={service} />\n      <View style={{ flex: 1, minWidth: 0, gap: 1 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n          <Text numberOfLines={1} style={{ flex: 1, fontSize: 15, color: unread ? colors.foreground : colors.mutedForeground }}>\n            {from}\n          </Text>\n          <Text style={{ fontSize: 12.5, color: unread ? colors.accent : colors.mutedForeground }}>{time}</Text>\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n          <Text numberOfLines={1} style={{ flex: 1, fontSize: 14, color: colors.foreground, opacity: unread ? 1 : 0.8 }}>\n            {subject}\n          </Text>\n          {unread ? <Dot color={colors.accent} size={8} /> : null}\n        </View>\n        <Text numberOfLines={1} style={{ fontSize: 13.5, color: colors.mutedForeground }}>\n          {snippet}\n        </Text>\n      </View>\n    </Pressable>\n  );\n}\n\nexport default function AppNavigation() {\n  const { colors, radius, dark } = useKit();\n  const [page, setPage] = useState('Inbox');\n  const nav: [DrawerIconName, string, number?][] = [\n    ['inbox', 'Inbox', 12],\n    ['star', 'Starred'],\n    ['send', 'Sent'],\n    ['file', 'Drafts', 2],\n    ['archive', 'Archive'],\n    ['trash', 'Trash'],\n  ];\n  const labels: [string, string, number?][] = [\n    ['Design reviews', colors.accent, 4],\n    ['Receipts', colors.success],\n    ['Travel', colors.warning, 1],\n  ];\n  return (\n    <Frame>\n      <Drawer\n        variant=\"push\"\n        width=\"78%\"\n        topInset={STATUS_H}\n        header={<DrawerProfile name=\"Maya Patel\" email=\"maya@northwind.app\" status=\"online\" onPress={() => {}} />}\n        content={\n          <>\n            {nav.map(([icon, label, badge]) => (\n              <DrawerItem key={label} icon={icon} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n            ))}\n            <DrawerSection title=\"Labels\" trailing={<IconButton icon=\"plus\" label=\"New label\" color={colors.mutedForeground} />} />\n            {labels.map(([label, color, badge]) => (\n              <DrawerItem key={label} icon={<Dot color={color} />} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n            ))}\n          </>\n        }\n        footer={<DrawerFooter icon=\"cloud\" label=\"Storage\" detail=\"12.4 GB of 15 GB used\" progress={0.83} />}\n      >\n        <Phone>\n          <TopBar\n            title={page}\n            subtitle={page === 'Inbox' ? '3 unread · maya@northwind.app' : undefined}\n            right={\n              <>\n                <IconButton icon=\"search\" label=\"Search mail\" />\n                <View style={{ paddingRight: 6 }}>\n                  <Initials name=\"Maya Patel\" size={32} />\n                </View>\n              </>\n            }\n          />\n          <Text style={{ paddingHorizontal: 16, paddingTop: 4, paddingBottom: 2, fontSize: 13, color: colors.mutedForeground }}>Today</Text>\n          {MAIL.map((m) => (\n            <MailRow key={m.subject} {...m} />\n          ))}\n          <View\n            style={{\n              position: 'absolute',\n              right: 16,\n              bottom: 18,\n              height: 52,\n              paddingHorizontal: 18,\n              flexDirection: 'row',\n              alignItems: 'center',\n              gap: 8,\n              borderRadius: radius.scale(18),\n              backgroundColor: colors.accent,\n              shadowColor: dark ? colors.background : colors.foreground,\n              shadowOpacity: 0.18,\n              shadowRadius: 14,\n              shadowOffset: { width: 0, height: 6 },\n              elevation: 6,\n            }}\n          >\n            <DrawerIcon name=\"plus\" size={20} color={colors.accentForeground} strokeWidth={2} />\n            <Text style={{ fontSize: 15, color: colors.accentForeground }}>Compose</Text>\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Workspace ------------------------------------------------------------------------------------- */\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\n\n/* Shared phone chrome --------------------------------------------------------------------------- */\n\nconst STATUS_H = 40;\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/** True when the demo fills a real phone screen: the frame and the fake status bar step aside. */\nconst ScreenMode = React.createContext(false);\n\n/** Phone-sized frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, screen = false, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <ScreenMode.Provider value={screen}>\n      <View\n        style={[\n          { backgroundColor: colors.background, overflow: 'hidden' },\n          screen ? { flex: 1 } : { height: 600, borderRadius: radius.scale(28), borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border },\n          style,\n        ]}\n        {...rest}\n      />\n    </ScreenMode.Provider>\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  const screen = React.useContext(ScreenMode);\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      {screen ? null : <StatusBar />}\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ minHeight: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nfunction Initials({ name, size = 32, square, ring }: { name: string; size?: number; square?: boolean; ring?: string }) {\n  const { colors, radius } = useKit();\n  const letters = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w[0])\n    .join('');\n  return (\n    <View\n      style={{\n        width: size,\n        height: size,\n        borderRadius: square ? radius.scale(size * 0.28) : radius.capsule(size),\n        backgroundColor: square ? colors.foreground : alpha(colors.accent, 0.14),\n        borderWidth: ring ? 2 : 0,\n        borderColor: ring,\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: size * 0.38, color: square ? colors.background : colors.accent }}>{letters}</Text>\n    </View>\n  );\n}\n\nfunction Dot({ color, size = 10 }: { color: string; size?: number }) {\n  const { radius } = useKit();\n  return <View style={{ width: size, height: size, borderRadius: radius.capsule(size), backgroundColor: color }} />;\n}\n\n/* Mail ------------------------------------------------------------------------------------------ */\n\nconst MAIL = [\n  { from: 'Lena Fischer', subject: 'Offsite agenda — final draft', snippet: 'Attached the plan for Thursday. Shout if the 10:00 slot clashes.', time: '9:41', unread: true },\n  { from: 'GitHub', service: true, subject: '[northwind/app] PR #482 merged', snippet: 'feat: offline drafts for the editor (#482) was merged into main.', time: '9:12', unread: true },\n  { from: 'Omar Haddad', subject: 'Re: Invoice 2041', snippet: 'Paid this morning — the receipt is in the thread below.', time: '8:03', unread: true },\n  { from: 'Figma', service: true, subject: 'Priya commented on Checkout v3', snippet: '“Can we try the sheet at 90% height here?”', time: 'Tue' },\n  { from: 'Stripe', service: true, subject: 'Your October payout is on its way', snippet: '₹2,48,000 will arrive in your account in 2 business days.', time: 'Mon' },\n  { from: 'Jonas Weber', subject: 'Photos from Lisbon', snippet: 'Finally sorted them — 48 shots, the tram ones came out great.', time: 'Sun' },\n  { from: 'Ana Costa', subject: 'Lunch next week?', snippet: 'There is a new ramen place near the office, Wednesday works.', time: 'Sat' },\n];\n\nfunction MailRow({ from, service, subject, snippet, time, unread }: (typeof MAIL)[number]) {\n  const { colors } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityLabel={`${unread ? 'Unread. ' : ''}${from}, ${subject}`}\n      style={({ pressed }) => ({ flexDirection: 'row', gap: 12, paddingVertical: 11, paddingLeft: 16, paddingRight: 14, backgroundColor: pressed ? colors.muted : 'transparent' })}\n    >\n      <Initials name={from} size={40} square={service} />\n      <View style={{ flex: 1, minWidth: 0, gap: 1 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n          <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ flex: 1, fontSize: 15, color: unread ? colors.foreground : colors.mutedForeground }}>\n            {from}\n          </Text>\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12.5, color: unread ? colors.accent : colors.mutedForeground }}>{time}</Text>\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n          <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ flex: 1, fontSize: 14, color: colors.foreground, opacity: unread ? 1 : 0.8 }}>\n            {subject}\n          </Text>\n          {unread ? <Dot color={colors.accent} size={8} /> : null}\n        </View>\n        <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 13.5, color: colors.mutedForeground }}>\n          {snippet}\n        </Text>\n      </View>\n    </Pressable>\n  );\n}\n\nexport default function AppNavigation({ screen, bottomInset }: DemoProps) {\n  const { colors, radius, dark } = useKit();\n  const [page, setPage] = useState('Inbox');\n  const nav: [DrawerIconName, string, number?][] = [\n    ['inbox', 'Inbox', 12],\n    ['star', 'Starred'],\n    ['send', 'Sent'],\n    ['file', 'Drafts', 2],\n    ['archive', 'Archive'],\n    ['trash', 'Trash'],\n  ];\n  const labels: [string, string, number?][] = [\n    ['Design reviews', colors.accent, 4],\n    ['Receipts', colors.success],\n    ['Travel', colors.warning, 1],\n  ];\n  return (\n    <Frame screen={screen}>\n      <Drawer\n        variant=\"push\"\n        width=\"78%\"\n        topInset={screen ? undefined : STATUS_H}\n        bottomInset={bottomInset}\n        header={<DrawerProfile name=\"Maya Patel\" email=\"maya@northwind.app\" status=\"online\" onPress={() => {}} />}\n        content={\n          <>\n            {nav.map(([icon, label, badge]) => (\n              <DrawerItem key={label} icon={icon} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n            ))}\n            <DrawerSection title=\"Labels\" trailing={<IconButton icon=\"plus\" label=\"New label\" color={colors.mutedForeground} />} />\n            {labels.map(([label, color, badge]) => (\n              <DrawerItem key={label} icon={<Dot color={color} />} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n            ))}\n          </>\n        }\n        footer={<DrawerFooter icon=\"cloud\" label=\"Storage\" detail=\"12.4 GB of 15 GB used\" progress={0.83} />}\n      >\n        <Phone>\n          <TopBar\n            title={page}\n            subtitle={page === 'Inbox' ? '3 unread · maya@northwind.app' : undefined}\n            right={\n              <>\n                <IconButton icon=\"search\" label=\"Search mail\" />\n                <View style={{ paddingRight: 6 }}>\n                  <Initials name=\"Maya Patel\" size={32} />\n                </View>\n              </>\n            }\n          />\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ paddingHorizontal: 16, paddingTop: 4, paddingBottom: 2, fontSize: 13, color: colors.mutedForeground }}>Today</Text>\n          {MAIL.map((m) => (\n            <MailRow key={m.subject} {...m} />\n          ))}\n          <View\n            style={{\n              position: 'absolute',\n              right: 16,\n              bottom: 18 + (bottomInset ?? 0),\n              minHeight: 52,\n              paddingHorizontal: 18,\n              flexDirection: 'row',\n              alignItems: 'center',\n              gap: 8,\n              borderRadius: radius.scale(18),\n              backgroundColor: colors.accent,\n              shadowColor: dark ? colors.background : colors.foreground,\n              shadowOpacity: 0.18,\n              shadowRadius: 14,\n              shadowOffset: { width: 0, height: 6 },\n              elevation: 6,\n            }}\n          >\n            <DrawerIcon name=\"plus\" size={20} color={colors.accentForeground} strokeWidth={2} />\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 15, color: colors.accentForeground }}>Compose</Text>\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Workspace ------------------------------------------------------------------------------------- */\n"
     },
     {
       "name": "WorkspaceSwitcher",
       "title": "Workspace Switcher",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst STATUS_H = 40;\n\n/** Phone-sized frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 600,\n          borderRadius: radius.scale(28),\n          borderWidth: StyleSheet.hairlineWidth,\n          borderColor: colors.border,\n          backgroundColor: colors.background,\n          overflow: 'hidden',\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      <StatusBar />\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nfunction Initials({ name, size = 32, square, ring }: { name: string; size?: number; square?: boolean; ring?: string }) {\n  const { colors, radius } = useKit();\n  const letters = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w[0])\n    .join('');\n  return (\n    <View\n      style={{\n        width: size,\n        height: size,\n        borderRadius: square ? radius.scale(size * 0.28) : radius.capsule(size),\n        backgroundColor: square ? colors.foreground : alpha(colors.accent, 0.14),\n        borderWidth: ring ? 2 : 0,\n        borderColor: ring,\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Text style={{ fontSize: size * 0.38, color: square ? colors.background : colors.accent }}>{letters}</Text>\n    </View>\n  );\n}\n\nfunction Dot({ color, size = 10 }: { color: string; size?: number }) {\n  const { radius } = useKit();\n  return <View style={{ width: size, height: size, borderRadius: radius.capsule(size), backgroundColor: color }} />;\n}\n\n/* Mail ------------------------------------------------------------------------------------------ */\n\nconst WORKSPACES = [\n  { name: 'Northwind', detail: 'northwind.app · 24 members' },\n  { name: 'Side Quests', detail: 'Personal · 1 member' },\n  { name: 'Acme Studio', detail: 'acme.studio · 8 members' },\n];\n\ntype TaskState = 'In progress' | 'In review' | 'Todo';\n\nconst TASKS: { id: string; title: string; state: TaskState; due: string; done: number; total: number; people: string[] }[] = [\n  { id: 'MOB-212', title: 'Sheet snap points jitter on Android 14', state: 'In progress', due: 'Today', done: 3, total: 5, people: ['Maya Patel', 'Omar Haddad'] },\n  { id: 'MOB-208', title: 'Offline drafts for the editor', state: 'In review', due: 'Thu', done: 6, total: 6, people: ['Lena Fischer'] },\n  { id: 'MOB-199', title: 'Rewrite the push permission prompt', state: 'Todo', due: 'Mon', done: 0, total: 3, people: ['Priya Nair', 'Maya Patel'] },\n  { id: 'MOB-187', title: 'Haptics on tab change', state: 'Todo', due: 'Oct 28', done: 1, total: 2, people: ['Jonas Weber'] },\n];\n\nfunction StatePill({ state }: { state: TaskState }) {\n  const { colors, radius } = useKit();\n  const tone = state === 'In progress' ? colors.accent : state === 'In review' ? colors.warning : colors.mutedForeground;\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, height: 24, paddingHorizontal: 9, borderRadius: radius.capsule(24), backgroundColor: alpha(tone, 0.13) }}>\n      <Dot color={tone} size={7} />\n      <Text style={{ fontSize: 12, color: colors.foreground }}>{state}</Text>\n    </View>\n  );\n}\n\nfunction TaskCard({ id, title, state, due, done, total, people }: (typeof TASKS)[number]) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        padding: 14,\n        gap: 10,\n        borderRadius: radius.scale(16),\n        backgroundColor: colors.card,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        shadowColor: dark ? colors.background : colors.foreground,\n        shadowOpacity: dark ? 0.4 : 0.05,\n        shadowRadius: 10,\n        shadowOffset: { width: 0, height: 3 },\n        elevation: 1,\n      }}\n    >\n      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>\n        <StatePill state={state} />\n        <Text style={{ fontSize: 12, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>{id}</Text>\n      </View>\n      <Text numberOfLines={1} style={{ fontSize: 15.5, letterSpacing: -0.2, color: colors.foreground }}>\n        {title}\n      </Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 14 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>\n          <DrawerIcon name=\"calendar\" size={14} color={due === 'Today' ? colors.danger : colors.mutedForeground} />\n          <Text style={{ fontSize: 12.5, color: due === 'Today' ? colors.danger : colors.mutedForeground }}>{due}</Text>\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>\n          <DrawerIcon name=\"check\" size={14} color={colors.mutedForeground} />\n          <Text style={{ fontSize: 12.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>\n            {done}/{total}\n          </Text>\n        </View>\n        <View style={{ flex: 1 }} />\n        <View style={{ flexDirection: 'row' }}>\n          {people.map((p, i) => (\n            <View key={p} style={{ marginLeft: i ? -8 : 0 }}>\n              <Initials name={p} size={26} ring={colors.card} />\n            </View>\n          ))}\n        </View>\n      </View>\n    </View>\n  );\n}\n\nexport default function WorkspaceSwitcher() {\n  const { colors, radius } = useKit();\n  const [workspace, setWorkspace] = useState(WORKSPACES[0]);\n  const [picking, setPicking] = useState(false);\n  const [page, setPage] = useState('My issues');\n  const [filter, setFilter] = useState('Active');\n  return (\n    <Frame>\n      <Drawer\n        topInset={STATUS_H}\n        header={<DrawerProfile name={workspace.name} email={workspace.detail} onPress={() => setPicking((v) => !v)} accessibilityHint=\"Switch workspace\" />}\n        content={\n          picking ? (\n            <>\n              <DrawerSection title=\"Workspaces\" divider={false} />\n              {WORKSPACES.map((w) => (\n                <DrawerItem\n                  key={w.name}\n                  label={w.name}\n                  icon={w.name === workspace.name ? 'check' : 'layers'}\n                  active={w.name === workspace.name}\n                  closeOnPress={false}\n                  onPress={() => {\n                    setWorkspace(w);\n                    setPicking(false);\n                  }}\n                />\n              ))}\n              <DrawerItem icon=\"plus\" label=\"Create workspace\" closeOnPress={false} />\n            </>\n          ) : (\n            <>\n              {(\n                [\n                  ['inbox', 'Inbox', 5, 'accent'],\n                  ['target', 'My issues', 14],\n                  ['search', 'Search'],\n                ] as [DrawerIconName, string, number?, 'accent'?][]\n              ).map(([icon, label, badge, badgeTone]) => (\n                <DrawerItem key={label} icon={icon} label={label} badge={badge} badgeTone={badgeTone} active={page === label} onPress={() => setPage(label)} />\n              ))}\n              <DrawerSection title=\"Teams\" trailing={<IconButton icon=\"plus\" label=\"New team\" color={colors.mutedForeground} />} />\n              {(\n                [\n                  ['layers', 'Mobile', 8],\n                  ['layers', 'Platform', 3],\n                  ['users', 'Design'],\n                ] as [DrawerIconName, string, number?][]\n              ).map(([icon, label, badge]) => (\n                <DrawerItem key={label} icon={icon} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n              ))}\n            </>\n          )\n        }\n        footer={\n          <>\n            <DrawerItem icon=\"settings\" label=\"Settings\" active={page === 'Settings'} onPress={() => setPage('Settings')} />\n            <DrawerItem icon=\"logout\" label=\"Log out\" tone=\"danger\" />\n          </>\n        }\n      >\n        <Phone>\n          <TopBar title={page} subtitle={`${workspace.name} · Mobile team`} right={<IconButton icon=\"plus\" label=\"New issue\" />} />\n          <View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 16, paddingTop: 2, paddingBottom: 12 }}>\n            {[\n              ['Active', '4'],\n              ['Backlog', '9'],\n              ['Done', '23'],\n            ].map(([label, n]) => {\n              const on = filter === label;\n              return (\n                <Pressable\n                  key={label}\n                  onPress={() => setFilter(label)}\n                  accessibilityRole=\"button\"\n                  accessibilityState={{ selected: on }}\n                  style={{\n                    height: 32,\n                    paddingHorizontal: 12,\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    gap: 6,\n                    borderRadius: radius.capsule(32),\n                    backgroundColor: on ? alpha(colors.accent, 0.13) : 'transparent',\n                    borderWidth: StyleSheet.hairlineWidth,\n                    borderColor: on ? alpha(colors.accent, 0.3) : colors.border,\n                  }}\n                >\n                  <Text style={{ fontSize: 13.5, color: on ? colors.accent : colors.foreground }}>{label}</Text>\n                  <Text style={{ fontSize: 12.5, color: on ? colors.accent : colors.mutedForeground }}>{n}</Text>\n                </Pressable>\n              );\n            })}\n          </View>\n          <View style={{ paddingHorizontal: 16, gap: 10 }}>\n            {TASKS.map((t) => (\n              <TaskCard key={t.id} {...t} />\n            ))}\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Stays (right panel) --------------------------------------------------------------------------- */\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\n\n/* Shared phone chrome --------------------------------------------------------------------------- */\n\nconst STATUS_H = 40;\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/** True when the demo fills a real phone screen: the frame and the fake status bar step aside. */\nconst ScreenMode = React.createContext(false);\n\n/** Phone-sized frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, screen = false, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <ScreenMode.Provider value={screen}>\n      <View\n        style={[\n          { backgroundColor: colors.background, overflow: 'hidden' },\n          screen ? { flex: 1 } : { height: 600, borderRadius: radius.scale(28), borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border },\n          style,\n        ]}\n        {...rest}\n      />\n    </ScreenMode.Provider>\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  const screen = React.useContext(ScreenMode);\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      {screen ? null : <StatusBar />}\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ minHeight: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nfunction Initials({ name, size = 32, square, ring }: { name: string; size?: number; square?: boolean; ring?: string }) {\n  const { colors, radius } = useKit();\n  const letters = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w[0])\n    .join('');\n  return (\n    <View\n      style={{\n        width: size,\n        height: size,\n        borderRadius: square ? radius.scale(size * 0.28) : radius.capsule(size),\n        backgroundColor: square ? colors.foreground : alpha(colors.accent, 0.14),\n        borderWidth: ring ? 2 : 0,\n        borderColor: ring,\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: size * 0.38, color: square ? colors.background : colors.accent }}>{letters}</Text>\n    </View>\n  );\n}\n\nfunction Dot({ color, size = 10 }: { color: string; size?: number }) {\n  const { radius } = useKit();\n  return <View style={{ width: size, height: size, borderRadius: radius.capsule(size), backgroundColor: color }} />;\n}\n\n/* Mail ------------------------------------------------------------------------------------------ */\n\nconst WORKSPACES = [\n  { name: 'Northwind', detail: 'northwind.app · 24 members' },\n  { name: 'Side Quests', detail: 'Personal · 1 member' },\n  { name: 'Acme Studio', detail: 'acme.studio · 8 members' },\n];\n\ntype TaskState = 'In progress' | 'In review' | 'Todo';\n\nconst TASKS: { id: string; title: string; state: TaskState; due: string; done: number; total: number; people: string[] }[] = [\n  { id: 'MOB-212', title: 'Sheet snap points jitter on Android 14', state: 'In progress', due: 'Today', done: 3, total: 5, people: ['Maya Patel', 'Omar Haddad'] },\n  { id: 'MOB-208', title: 'Offline drafts for the editor', state: 'In review', due: 'Thu', done: 6, total: 6, people: ['Lena Fischer'] },\n  { id: 'MOB-199', title: 'Rewrite the push permission prompt', state: 'Todo', due: 'Mon', done: 0, total: 3, people: ['Priya Nair', 'Maya Patel'] },\n  { id: 'MOB-187', title: 'Haptics on tab change', state: 'Todo', due: 'Oct 28', done: 1, total: 2, people: ['Jonas Weber'] },\n];\n\nfunction StatePill({ state }: { state: TaskState }) {\n  const { colors, radius } = useKit();\n  const tone = state === 'In progress' ? colors.accent : state === 'In review' ? colors.warning : colors.mutedForeground;\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minHeight: 24, paddingHorizontal: 9, borderRadius: radius.capsule(24), backgroundColor: alpha(tone, 0.13) }}>\n      <Dot color={tone} size={7} />\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.foreground }}>{state}</Text>\n    </View>\n  );\n}\n\nfunction TaskCard({ id, title, state, due, done, total, people }: (typeof TASKS)[number]) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        padding: 14,\n        gap: 10,\n        borderRadius: radius.scale(16),\n        backgroundColor: colors.card,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        shadowColor: dark ? colors.background : colors.foreground,\n        shadowOpacity: dark ? 0.4 : 0.05,\n        shadowRadius: 10,\n        shadowOffset: { width: 0, height: 3 },\n        elevation: 1,\n      }}\n    >\n      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>\n        <StatePill state={state} />\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>{id}</Text>\n      </View>\n      <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 15.5, letterSpacing: -0.2, color: colors.foreground }}>\n        {title}\n      </Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 14 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>\n          <DrawerIcon name=\"calendar\" size={14} color={due === 'Today' ? colors.danger : colors.mutedForeground} />\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12.5, color: due === 'Today' ? colors.danger : colors.mutedForeground }}>{due}</Text>\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>\n          <DrawerIcon name=\"check\" size={14} color={colors.mutedForeground} />\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>\n            {done}/{total}\n          </Text>\n        </View>\n        <View style={{ flex: 1 }} />\n        <View style={{ flexDirection: 'row' }}>\n          {people.map((p, i) => (\n            <View key={p} style={{ marginLeft: i ? -8 : 0 }}>\n              <Initials name={p} size={26} ring={colors.card} />\n            </View>\n          ))}\n        </View>\n      </View>\n    </View>\n  );\n}\n\nexport default function WorkspaceSwitcher({ screen, bottomInset }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [workspace, setWorkspace] = useState(WORKSPACES[0]);\n  const [picking, setPicking] = useState(false);\n  const [page, setPage] = useState('My issues');\n  const [filter, setFilter] = useState('Active');\n  return (\n    <Frame screen={screen}>\n      <Drawer\n        topInset={screen ? undefined : STATUS_H}\n        bottomInset={bottomInset}\n        header={<DrawerProfile name={workspace.name} email={workspace.detail} onPress={() => setPicking((v) => !v)} accessibilityHint=\"Switch workspace\" />}\n        content={\n          picking ? (\n            <>\n              <DrawerSection title=\"Workspaces\" divider={false} />\n              {WORKSPACES.map((w) => (\n                <DrawerItem\n                  key={w.name}\n                  label={w.name}\n                  icon={w.name === workspace.name ? 'check' : 'layers'}\n                  active={w.name === workspace.name}\n                  closeOnPress={false}\n                  onPress={() => {\n                    setWorkspace(w);\n                    setPicking(false);\n                  }}\n                />\n              ))}\n              <DrawerItem icon=\"plus\" label=\"Create workspace\" closeOnPress={false} />\n            </>\n          ) : (\n            <>\n              {(\n                [\n                  ['inbox', 'Inbox', 5, 'accent'],\n                  ['target', 'My issues', 14],\n                  ['search', 'Search'],\n                ] as [DrawerIconName, string, number?, 'accent'?][]\n              ).map(([icon, label, badge, badgeTone]) => (\n                <DrawerItem key={label} icon={icon} label={label} badge={badge} badgeTone={badgeTone} active={page === label} onPress={() => setPage(label)} />\n              ))}\n              <DrawerSection title=\"Teams\" trailing={<IconButton icon=\"plus\" label=\"New team\" color={colors.mutedForeground} />} />\n              {(\n                [\n                  ['layers', 'Mobile', 8],\n                  ['layers', 'Platform', 3],\n                  ['users', 'Design'],\n                ] as [DrawerIconName, string, number?][]\n              ).map(([icon, label, badge]) => (\n                <DrawerItem key={label} icon={icon} label={label} badge={badge} active={page === label} onPress={() => setPage(label)} />\n              ))}\n            </>\n          )\n        }\n        footer={\n          <>\n            <DrawerItem icon=\"settings\" label=\"Settings\" active={page === 'Settings'} onPress={() => setPage('Settings')} />\n            <DrawerItem icon=\"logout\" label=\"Log out\" tone=\"danger\" />\n          </>\n        }\n      >\n        <Phone>\n          <TopBar title={page} subtitle={`${workspace.name} · Mobile team`} right={<IconButton icon=\"plus\" label=\"New issue\" />} />\n          <View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 16, paddingTop: 2, paddingBottom: 12 }}>\n            {[\n              ['Active', '4'],\n              ['Backlog', '9'],\n              ['Done', '23'],\n            ].map(([label, n]) => {\n              const on = filter === label;\n              return (\n                <Pressable\n                  key={label}\n                  onPress={() => setFilter(label)}\n                  accessibilityRole=\"button\"\n                  accessibilityState={{ selected: on }}\n                  style={{\n                    minHeight: 32,\n                    paddingHorizontal: 12,\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    gap: 6,\n                    borderRadius: radius.capsule(32),\n                    backgroundColor: on ? alpha(colors.accent, 0.13) : 'transparent',\n                    borderWidth: StyleSheet.hairlineWidth,\n                    borderColor: on ? alpha(colors.accent, 0.3) : colors.border,\n                  }}\n                >\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 13.5, color: on ? colors.accent : colors.foreground }}>{label}</Text>\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12.5, color: on ? colors.accent : colors.mutedForeground }}>{n}</Text>\n                </Pressable>\n              );\n            })}\n          </View>\n          <View style={{ paddingHorizontal: 16, gap: 10 }}>\n            {TASKS.map((t) => (\n              <TaskCard key={t.id} {...t} />\n            ))}\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Stays (right panel) --------------------------------------------------------------------------- */\n"
     },
     {
       "name": "RightPanel",
       "title": "Right Panel",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst STATUS_H = 40;\n\n/** Phone-sized frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 600,\n          borderRadius: radius.scale(28),\n          borderWidth: StyleSheet.hairlineWidth,\n          borderColor: colors.border,\n          backgroundColor: colors.background,\n          overflow: 'hidden',\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      <StatusBar />\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\ntype ArtKind = 'sunset' | 'grid' | 'rings' | 'stripes' | 'split';\n\n/**\n * Album art drawn with plain Views in theme colours. `size` 0 stretches to the parent width\n * (then pass `height`).\n */\nfunction Art({ kind, size, height, radiusSize }: { kind: ArtKind; size: number; height?: number; radiusSize?: number }) {\n  const { colors, radius } = useKit();\n  const h = height ?? size;\n  const w = size || undefined;\n  const d = Math.min(size || h, h);\n  const box = {\n    width: w,\n    alignSelf: size ? undefined : ('stretch' as const),\n    height: h,\n    borderRadius: radiusSize ?? radius.scale(size > 60 ? 14 : 8),\n    overflow: 'hidden' as const,\n  };\n  const on = colors.accentForeground;\n  if (kind === 'sunset') {\n    return (\n      <View style={[box, { backgroundColor: colors.accent, alignItems: 'center' }]}>\n        <View style={{ position: 'absolute', top: h * 0.3, width: d * 0.5, height: d * 0.5, borderRadius: radius.capsule(d), backgroundColor: alpha(on, 0.85) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: h * 0.34, backgroundColor: alpha(colors.foreground, 0.35) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: h * 0.22, height: Math.max(1, h * 0.03), backgroundColor: alpha(on, 0.35) }} />\n      </View>\n    );\n  }\n  if (kind === 'grid') {\n    const cell = d * 0.18;\n    return (\n      <View style={[box, { backgroundColor: colors.foreground, alignItems: 'center', justifyContent: 'center' }]}>\n        <View style={{ width: cell * 3 + cell * 0.5 * 2, flexDirection: 'row', flexWrap: 'wrap', gap: cell * 0.5 }}>\n          {[1, 0.25, 0.6, 0.25, 1, 0.25, 0.6, 0.25, 1].map((a, i) => (\n            <View key={i} style={{ width: cell, height: cell, borderRadius: radius.scale(cell * 0.3), backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  if (kind === 'rings') {\n    return (\n      <View style={[box, { backgroundColor: alpha(colors.accent, 0.16), alignItems: 'center', justifyContent: 'center' }]}>\n        {[0.95, 0.7, 0.45, 0.2].map((f) => (\n          <View\n            key={f}\n            style={{\n              position: 'absolute',\n              width: d * f,\n              height: d * f,\n              borderRadius: radius.capsule(d),\n              borderWidth: Math.max(1.5, d * 0.03),\n              borderColor: alpha(colors.accent, 1 - f * 0.6),\n            }}\n          />\n        ))}\n      </View>\n    );\n  }\n  if (kind === 'stripes') {\n    return (\n      <View style={[box, { backgroundColor: colors.muted, justifyContent: 'center', alignItems: 'center' }]}>\n        <View style={{ width: d * 1.6, gap: d * 0.07, transform: [{ rotate: '-30deg' }] }}>\n          {[0.9, 0.55, 0.3, 0.55, 0.9].map((a, i) => (\n            <View key={i} style={{ height: d * 0.1, backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  return (\n    <View style={[box, { backgroundColor: colors.foreground, flexDirection: 'row' }]}>\n      <View style={{ flex: 1, backgroundColor: colors.accent }} />\n      <View style={{ flex: 1 }} />\n      <View\n        style={{\n          position: 'absolute',\n          left: (w ?? d) / 2 - d * 0.22,\n          top: h / 2 - d * 0.22,\n          width: d * 0.44,\n          height: d * 0.44,\n          borderRadius: radius.capsule(d),\n          backgroundColor: colors.background,\n        }}\n      />\n    </View>\n  );\n}\n\nexport default function RightPanel() {\n  const { colors, radius } = useKit();\n  const [open, setOpen] = useState(false);\n  const [price, setPrice] = useState('Any price');\n  const [tags, setTags] = useState<string[]>(['Free cancellation']);\n  const toggle = (t: string) => setTags((s) => (s.includes(t) ? s.filter((x) => x !== t) : [...s, t]));\n  const count = 48 - tags.length * 9 - (price === 'Any price' ? 0 : 11);\n  const active = tags.length + (price !== 'Any price' ? 1 : 0);\n  return (\n    <Frame>\n      <Drawer\n        open={open}\n        onOpenChange={setOpen}\n        side=\"right\"\n        width=\"86%\"\n        topInset={STATUS_H}\n        accessibilityLabel=\"Filters\"\n        header={<DrawerHeader title=\"Filters\" subtitle=\"Porto · Jun 3 – 7 · 2 guests\" showClose onClose={() => setOpen(false)} />}\n        content={\n          <>\n            <DrawerSection title=\"Price per night\" divider={false} />\n            {['Any price', 'Under ₹5,000', '₹5,000 – ₹10,000', '₹10,000+'].map((p) => (\n              <DrawerItem key={p} label={p} icon={price === p ? 'check' : <View />} active={price === p} closeOnPress={false} onPress={() => setPrice(p)} />\n            ))}\n            <DrawerSection title=\"Amenities\" />\n            {['Free cancellation', 'Breakfast included', 'Pet friendly', 'Workspace'].map((t) => (\n              <DrawerItem key={t} label={t} icon={tags.includes(t) ? 'check' : <View />} active={tags.includes(t)} closeOnPress={false} onPress={() => toggle(t)} />\n            ))}\n          </>\n        }\n        footer={\n          <View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 4 }}>\n            <Button\n              variant=\"outline\"\n              style={{ flex: 1 }}\n              onPress={() => {\n                setPrice('Any price');\n                setTags([]);\n              }}\n            >\n              Reset\n            </Button>\n            <Button variant=\"accent\" style={{ flex: 1.4 }} onPress={() => setOpen(false)}>\n              {`Show ${count} stays`}\n            </Button>\n          </View>\n        }\n      >\n        <Phone>\n          <TopBar\n            menu={false}\n            title=\"Stays in Porto\"\n            subtitle={`${count} places · Jun 3 – 7`}\n            right={\n              <Button size=\"sm\" variant=\"secondary\" pill left={<DrawerIcon name=\"filter\" size={16} />} onPress={() => setOpen(true)}>\n                {active ? `Filters · ${active}` : 'Filters'}\n              </Button>\n            }\n          />\n          <View style={{ paddingHorizontal: 16, paddingTop: 4, gap: 16 }}>\n            {[\n              { name: 'Casa da Ribeira', meta: 'River view · 1 bedroom', price: '₹6,800', rating: '4.92', art: 'sunset' as const },\n              { name: 'Azulejo Loft', meta: 'Breakfast included', price: '₹4,800', rating: '4.81', art: 'grid' as const },\n              { name: 'Miradouro Suites', meta: 'Free cancellation', price: '₹12,500', rating: '4.97', art: 'rings' as const },\n            ].map((s) => (\n              <View key={s.name} style={{ gap: 8 }}>\n                <Art kind={s.art} size={0} height={112} radiusSize={radius.scale(18)} />\n                <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>\n                  <View style={{ flex: 1 }}>\n                    <Text style={{ fontSize: 15, color: colors.foreground }}>{s.name}</Text>\n                    <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{s.meta}</Text>\n                  </View>\n                  <View style={{ alignItems: 'flex-end' }}>\n                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>\n                      <DrawerIcon name=\"star\" size={13} color={colors.foreground} />\n                      <Text style={{ fontSize: 13, color: colors.foreground }}>{s.rating}</Text>\n                    </View>\n                    <Text style={{ fontSize: 13, color: colors.mutedForeground }}>\n                      <Text style={{ color: colors.foreground }}>{s.price}</Text> night\n                    </Text>\n                  </View>\n                </View>\n              </View>\n            ))}\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Music ----------------------------------------------------------------------------------------- */\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\n\n/* Shared phone chrome --------------------------------------------------------------------------- */\n\nconst STATUS_H = 40;\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/** True when the demo fills a real phone screen: the frame and the fake status bar step aside. */\nconst ScreenMode = React.createContext(false);\n\n/** Phone-sized frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, screen = false, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <ScreenMode.Provider value={screen}>\n      <View\n        style={[\n          { backgroundColor: colors.background, overflow: 'hidden' },\n          screen ? { flex: 1 } : { height: 600, borderRadius: radius.scale(28), borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border },\n          style,\n        ]}\n        {...rest}\n      />\n    </ScreenMode.Provider>\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  const screen = React.useContext(ScreenMode);\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      {screen ? null : <StatusBar />}\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ minHeight: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\ntype ArtKind = 'sunset' | 'grid' | 'rings' | 'stripes' | 'split';\n\n/**\n * Album art drawn with plain Views in theme colours. `size` 0 stretches to the parent width\n * (then pass `height`).\n */\nfunction Art({ kind, size, height, radiusSize }: { kind: ArtKind; size: number; height?: number; radiusSize?: number }) {\n  const { colors, radius } = useKit();\n  const h = height ?? size;\n  const w = size || undefined;\n  const d = Math.min(size || h, h);\n  const box = {\n    width: w,\n    alignSelf: size ? undefined : ('stretch' as const),\n    height: h,\n    borderRadius: radiusSize ?? radius.scale(size > 60 ? 14 : 8),\n    overflow: 'hidden' as const,\n  };\n  const on = colors.accentForeground;\n  if (kind === 'sunset') {\n    return (\n      <View style={[box, { backgroundColor: colors.accent, alignItems: 'center' }]}>\n        <View style={{ position: 'absolute', top: h * 0.3, width: d * 0.5, height: d * 0.5, borderRadius: radius.capsule(d), backgroundColor: alpha(on, 0.85) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: h * 0.34, backgroundColor: alpha(colors.foreground, 0.35) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: h * 0.22, height: Math.max(1, h * 0.03), backgroundColor: alpha(on, 0.35) }} />\n      </View>\n    );\n  }\n  if (kind === 'grid') {\n    const cell = d * 0.18;\n    return (\n      <View style={[box, { backgroundColor: colors.foreground, alignItems: 'center', justifyContent: 'center' }]}>\n        <View style={{ width: cell * 3 + cell * 0.5 * 2, flexDirection: 'row', flexWrap: 'wrap', gap: cell * 0.5 }}>\n          {[1, 0.25, 0.6, 0.25, 1, 0.25, 0.6, 0.25, 1].map((a, i) => (\n            <View key={i} style={{ width: cell, height: cell, borderRadius: radius.scale(cell * 0.3), backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  if (kind === 'rings') {\n    return (\n      <View style={[box, { backgroundColor: alpha(colors.accent, 0.16), alignItems: 'center', justifyContent: 'center' }]}>\n        {[0.95, 0.7, 0.45, 0.2].map((f) => (\n          <View\n            key={f}\n            style={{\n              position: 'absolute',\n              width: d * f,\n              height: d * f,\n              borderRadius: radius.capsule(d),\n              borderWidth: Math.max(1.5, d * 0.03),\n              borderColor: alpha(colors.accent, 1 - f * 0.6),\n            }}\n          />\n        ))}\n      </View>\n    );\n  }\n  if (kind === 'stripes') {\n    return (\n      <View style={[box, { backgroundColor: colors.muted, justifyContent: 'center', alignItems: 'center' }]}>\n        <View style={{ width: d * 1.6, gap: d * 0.07, transform: [{ rotate: '-30deg' }] }}>\n          {[0.9, 0.55, 0.3, 0.55, 0.9].map((a, i) => (\n            <View key={i} style={{ height: d * 0.1, backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  return (\n    <View style={[box, { backgroundColor: colors.foreground, flexDirection: 'row' }]}>\n      <View style={{ flex: 1, backgroundColor: colors.accent }} />\n      <View style={{ flex: 1 }} />\n      <View\n        style={{\n          position: 'absolute',\n          left: (w ?? d) / 2 - d * 0.22,\n          top: h / 2 - d * 0.22,\n          width: d * 0.44,\n          height: d * 0.44,\n          borderRadius: radius.capsule(d),\n          backgroundColor: colors.background,\n        }}\n      />\n    </View>\n  );\n}\n\nexport default function RightPanel({ screen, bottomInset }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [open, setOpen] = useState(false);\n  const [price, setPrice] = useState('Any price');\n  const [tags, setTags] = useState<string[]>(['Free cancellation']);\n  const toggle = (t: string) => setTags((s) => (s.includes(t) ? s.filter((x) => x !== t) : [...s, t]));\n  const count = 48 - tags.length * 9 - (price === 'Any price' ? 0 : 11);\n  const active = tags.length + (price !== 'Any price' ? 1 : 0);\n  return (\n    <Frame screen={screen}>\n      <Drawer\n        open={open}\n        onOpenChange={setOpen}\n        side=\"right\"\n        width=\"86%\"\n        topInset={screen ? undefined : STATUS_H}\n        bottomInset={bottomInset}\n        accessibilityLabel=\"Filters\"\n        header={<DrawerHeader title=\"Filters\" subtitle=\"Porto · Jun 3 – 7 · 2 guests\" showClose onClose={() => setOpen(false)} />}\n        content={\n          <>\n            <DrawerSection title=\"Price per night\" divider={false} />\n            {['Any price', 'Under ₹5,000', '₹5,000 – ₹10,000', '₹10,000+'].map((p) => (\n              <DrawerItem key={p} label={p} icon={price === p ? 'check' : <View />} active={price === p} closeOnPress={false} onPress={() => setPrice(p)} />\n            ))}\n            <DrawerSection title=\"Amenities\" />\n            {['Free cancellation', 'Breakfast included', 'Pet friendly', 'Workspace'].map((t) => (\n              <DrawerItem key={t} label={t} icon={tags.includes(t) ? 'check' : <View />} active={tags.includes(t)} closeOnPress={false} onPress={() => toggle(t)} />\n            ))}\n          </>\n        }\n        footer={\n          <View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 4 }}>\n            <Button\n              variant=\"outline\"\n              style={{ flex: 1 }}\n              onPress={() => {\n                setPrice('Any price');\n                setTags([]);\n              }}\n            >\n              Reset\n            </Button>\n            <Button variant=\"accent\" style={{ flex: 1.4 }} onPress={() => setOpen(false)}>\n              {`Show ${count} stays`}\n            </Button>\n          </View>\n        }\n      >\n        <Phone>\n          <TopBar\n            menu={false}\n            title=\"Stays in Porto\"\n            subtitle={`${count} places · Jun 3 – 7`}\n            right={\n              <Button size=\"sm\" variant=\"secondary\" pill left={<DrawerIcon name=\"filter\" size={16} />} onPress={() => setOpen(true)}>\n                {active ? `Filters · ${active}` : 'Filters'}\n              </Button>\n            }\n          />\n          <View style={{ paddingHorizontal: 16, paddingTop: 4, gap: 16 }}>\n            {[\n              { name: 'Casa da Ribeira', meta: 'River view · 1 bedroom', price: '₹6,800', rating: '4.92', art: 'sunset' as const },\n              { name: 'Azulejo Loft', meta: 'Breakfast included', price: '₹4,800', rating: '4.81', art: 'grid' as const },\n              { name: 'Miradouro Suites', meta: 'Free cancellation', price: '₹12,500', rating: '4.97', art: 'rings' as const },\n            ].map((s) => (\n              <View key={s.name} style={{ gap: 8 }}>\n                <Art kind={s.art} size={0} height={112} radiusSize={radius.scale(18)} />\n                <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>\n                  <View style={{ flex: 1 }}>\n                    <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 15, color: colors.foreground }}>{s.name}</Text>\n                    <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 13, color: colors.mutedForeground }}>{s.meta}</Text>\n                  </View>\n                  <View style={{ alignItems: 'flex-end' }}>\n                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>\n                      <DrawerIcon name=\"star\" size={13} color={colors.foreground} />\n                      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 13, color: colors.foreground }}>{s.rating}</Text>\n                    </View>\n                    <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 13, color: colors.mutedForeground }}>\n                      <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.foreground }}>{s.price}</Text> night\n                    </Text>\n                  </View>\n                </View>\n              </View>\n            ))}\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n\n/* Music ----------------------------------------------------------------------------------------- */\n"
     },
     {
       "name": "PushLayout",
       "title": "Push Layout",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst STATUS_H = 40;\n\n/** Phone-sized frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          height: 600,\n          borderRadius: radius.scale(28),\n          borderWidth: StyleSheet.hairlineWidth,\n          borderColor: colors.border,\n          backgroundColor: colors.background,\n          overflow: 'hidden',\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      <StatusBar />\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\ntype ArtKind = 'sunset' | 'grid' | 'rings' | 'stripes' | 'split';\n\n/**\n * Album art drawn with plain Views in theme colours. `size` 0 stretches to the parent width\n * (then pass `height`).\n */\nfunction Art({ kind, size, height, radiusSize }: { kind: ArtKind; size: number; height?: number; radiusSize?: number }) {\n  const { colors, radius } = useKit();\n  const h = height ?? size;\n  const w = size || undefined;\n  const d = Math.min(size || h, h);\n  const box = {\n    width: w,\n    alignSelf: size ? undefined : ('stretch' as const),\n    height: h,\n    borderRadius: radiusSize ?? radius.scale(size > 60 ? 14 : 8),\n    overflow: 'hidden' as const,\n  };\n  const on = colors.accentForeground;\n  if (kind === 'sunset') {\n    return (\n      <View style={[box, { backgroundColor: colors.accent, alignItems: 'center' }]}>\n        <View style={{ position: 'absolute', top: h * 0.3, width: d * 0.5, height: d * 0.5, borderRadius: radius.capsule(d), backgroundColor: alpha(on, 0.85) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: h * 0.34, backgroundColor: alpha(colors.foreground, 0.35) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: h * 0.22, height: Math.max(1, h * 0.03), backgroundColor: alpha(on, 0.35) }} />\n      </View>\n    );\n  }\n  if (kind === 'grid') {\n    const cell = d * 0.18;\n    return (\n      <View style={[box, { backgroundColor: colors.foreground, alignItems: 'center', justifyContent: 'center' }]}>\n        <View style={{ width: cell * 3 + cell * 0.5 * 2, flexDirection: 'row', flexWrap: 'wrap', gap: cell * 0.5 }}>\n          {[1, 0.25, 0.6, 0.25, 1, 0.25, 0.6, 0.25, 1].map((a, i) => (\n            <View key={i} style={{ width: cell, height: cell, borderRadius: radius.scale(cell * 0.3), backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  if (kind === 'rings') {\n    return (\n      <View style={[box, { backgroundColor: alpha(colors.accent, 0.16), alignItems: 'center', justifyContent: 'center' }]}>\n        {[0.95, 0.7, 0.45, 0.2].map((f) => (\n          <View\n            key={f}\n            style={{\n              position: 'absolute',\n              width: d * f,\n              height: d * f,\n              borderRadius: radius.capsule(d),\n              borderWidth: Math.max(1.5, d * 0.03),\n              borderColor: alpha(colors.accent, 1 - f * 0.6),\n            }}\n          />\n        ))}\n      </View>\n    );\n  }\n  if (kind === 'stripes') {\n    return (\n      <View style={[box, { backgroundColor: colors.muted, justifyContent: 'center', alignItems: 'center' }]}>\n        <View style={{ width: d * 1.6, gap: d * 0.07, transform: [{ rotate: '-30deg' }] }}>\n          {[0.9, 0.55, 0.3, 0.55, 0.9].map((a, i) => (\n            <View key={i} style={{ height: d * 0.1, backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  return (\n    <View style={[box, { backgroundColor: colors.foreground, flexDirection: 'row' }]}>\n      <View style={{ flex: 1, backgroundColor: colors.accent }} />\n      <View style={{ flex: 1 }} />\n      <View\n        style={{\n          position: 'absolute',\n          left: (w ?? d) / 2 - d * 0.22,\n          top: h / 2 - d * 0.22,\n          width: d * 0.44,\n          height: d * 0.44,\n          borderRadius: radius.capsule(d),\n          backgroundColor: colors.background,\n        }}\n      />\n    </View>\n  );\n}\n\n/** A right-pointing triangle made from borders (play / skip glyphs). */\nfunction Tri({ size, color, flip }: { size: number; color: string; flip?: boolean }) {\n  return (\n    <View\n      style={{\n        width: 0,\n        height: 0,\n        borderTopWidth: size / 2,\n        borderBottomWidth: size / 2,\n        borderLeftWidth: size * 0.85,\n        borderTopColor: 'transparent',\n        borderBottomColor: 'transparent',\n        borderLeftColor: color,\n        transform: flip ? [{ scaleX: -1 }] : undefined,\n      }}\n    />\n  );\n}\n\nfunction Skip({ color, back }: { color: string; back?: boolean }) {\n  const { radius } = useKit();\n  return (\n    <View style={{ flexDirection: back ? 'row-reverse' : 'row', alignItems: 'center', gap: 1 }}>\n      <Tri size={14} color={color} flip={back} />\n      <View style={{ width: 2.5, height: 14, borderRadius: radius.capsule(2.5), backgroundColor: color }} />\n    </View>\n  );\n}\n\nconst TRACKS: { title: string; artist: string; time: string; art: ArtKind; playing?: boolean }[] = [\n  { title: 'Midnight City Lights', artist: 'Nova Arcade', time: '4:12', art: 'sunset', playing: true },\n  { title: 'Paper Planes', artist: 'Juniper Fields', time: '3:27', art: 'rings' },\n  { title: 'Tidal', artist: 'Okra & The Moon', time: '5:03', art: 'stripes' },\n  { title: 'Slow Burn', artist: 'Halcyon Days', time: '3:48', art: 'grid' },\n  { title: 'Northern Line', artist: 'The Lanterns', time: '4:31', art: 'split' },\n];\n\nexport default function PushLayout() {\n  const { colors, radius, dark } = useKit();\n  const [view, setView] = useState('Listen now');\n  const [playing, setPlaying] = useState(true);\n  return (\n    <Frame>\n      <Drawer\n        variant=\"push\"\n        width={252}\n        topInset={STATUS_H}\n        header={<DrawerProfile layout=\"stacked\" name=\"Jonas Weber\" email=\"Premium · 2 devices\" />}\n        content={\n          <>\n            {(\n              [\n                ['home', 'Listen now'],\n                ['search', 'Search'],\n                ['music', 'Library', 3],\n                ['bell', 'New releases', 8, 'accent'],\n              ] as [DrawerIconName, string, number?, 'accent'?][]\n            ).map(([icon, label, badge, badgeTone]) => (\n              <DrawerItem key={label} icon={icon} label={label} badge={badge} badgeTone={badgeTone} active={view === label} onPress={() => setView(label)} />\n            ))}\n            <DrawerSection title=\"Playlists\" />\n            {['Late Night Drive', 'Focus Flow', 'Sunday Coffee'].map((p, i) => (\n              <DrawerItem\n                key={p}\n                icon={<Art kind={(['sunset', 'rings', 'stripes'] as const)[i]} size={22} radiusSize={radius.scale(5)} />}\n                label={p}\n                active={view === p}\n                onPress={() => setView(p)}\n              />\n            ))}\n          </>\n        }\n        footer={<DrawerItem icon=\"help\" label=\"Help & feedback\" closeOnPress={false} />}\n      >\n        <Phone>\n          <TopBar title={view} right={<IconButton icon=\"search\" label=\"Search music\" />} />\n          <View style={{ paddingHorizontal: 16, gap: 14 }}>\n            <View\n              style={{\n                padding: 14,\n                gap: 12,\n                borderRadius: radius.scale(20),\n                backgroundColor: colors.card,\n                borderWidth: StyleSheet.hairlineWidth,\n                borderColor: colors.border,\n                shadowColor: dark ? colors.background : colors.foreground,\n                shadowOpacity: dark ? 0.4 : 0.06,\n                shadowRadius: 14,\n                shadowOffset: { width: 0, height: 4 },\n                elevation: 2,\n              }}\n            >\n              <View style={{ flexDirection: 'row', gap: 14 }}>\n                <Art kind=\"sunset\" size={92} />\n                <View style={{ flex: 1, minWidth: 0, justifyContent: 'center', gap: 2 }}>\n                  <Text style={{ fontSize: 12, color: colors.accent }}>Now playing</Text>\n                  <Text numberOfLines={1} style={{ fontSize: 17, letterSpacing: -0.3, color: colors.foreground }}>\n                    Midnight City Lights\n                  </Text>\n                  <Text numberOfLines={1} style={{ fontSize: 13.5, color: colors.mutedForeground }}>\n                    Nova Arcade · Afterglow\n                  </Text>\n                </View>\n              </View>\n              <View style={{ gap: 6 }}>\n                <View style={{ height: 4, borderRadius: radius.capsule(4), backgroundColor: colors.muted, overflow: 'hidden' }}>\n                  <View style={{ width: '43%', height: '100%', borderRadius: radius.capsule(4), backgroundColor: colors.accent }} />\n                </View>\n                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n                  <Text style={{ fontSize: 11.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>1:48</Text>\n                  <Text style={{ fontSize: 11.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>-2:24</Text>\n                </View>\n              </View>\n              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 36 }}>\n                <Skip color={colors.foreground} back />\n                <Pressable\n                  onPress={() => setPlaying((v) => !v)}\n                  accessibilityRole=\"button\"\n                  accessibilityLabel={playing ? 'Pause' : 'Play'}\n                  style={{ width: 48, height: 48, borderRadius: radius.capsule(48), backgroundColor: colors.accent, alignItems: 'center', justifyContent: 'center' }}\n                >\n                  {playing ? (\n                    <View style={{ flexDirection: 'row', gap: 5 }}>\n                      <View style={{ width: 4.5, height: 16, borderRadius: radius.capsule(4.5), backgroundColor: colors.accentForeground }} />\n                      <View style={{ width: 4.5, height: 16, borderRadius: radius.capsule(4.5), backgroundColor: colors.accentForeground }} />\n                    </View>\n                  ) : (\n                    <View style={{ marginLeft: 3 }}>\n                      <Tri size={17} color={colors.accentForeground} />\n                    </View>\n                  )}\n                </Pressable>\n                <Skip color={colors.foreground} />\n              </View>\n            </View>\n            <View style={{ flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between' }}>\n              <Text style={{ fontSize: 17, letterSpacing: -0.3, color: colors.foreground }}>Up next</Text>\n              <Text style={{ fontSize: 13.5, color: colors.accent }}>See all</Text>\n            </View>\n            <View style={{ gap: 12 }}>\n              {TRACKS.map((t) => (\n                <View key={t.title} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n                  <Art kind={t.art} size={44} />\n                  <View style={{ flex: 1, minWidth: 0 }}>\n                    <Text numberOfLines={1} style={{ fontSize: 15, color: t.playing ? colors.accent : colors.foreground }}>\n                      {t.title}\n                    </Text>\n                    <Text numberOfLines={1} style={{ fontSize: 13, color: colors.mutedForeground }}>\n                      {t.artist}\n                    </Text>\n                  </View>\n                  {t.playing ? (\n                    <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2, height: 14 }}>\n                      {[8, 14, 10].map((hh, i) => (\n                        <View key={i} style={{ width: 3, height: hh, borderRadius: radius.capsule(3), backgroundColor: colors.accent }} />\n                      ))}\n                    </View>\n                  ) : (\n                    <Text style={{ fontSize: 13, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>{t.time}</Text>\n                  )}\n                </View>\n              ))}\n            </View>\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport {\n  Drawer,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerIcon,\n  DrawerItem,\n  DrawerProfile,\n  DrawerSection,\n  useDrawer,\n  type DrawerIconName,\n} from '@/components/ui/drawer';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\n\n/* Shared phone chrome --------------------------------------------------------------------------- */\n\nconst STATUS_H = 40;\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/** True when the demo fills a real phone screen: the frame and the fake status bar step aside. */\nconst ScreenMode = React.createContext(false);\n\n/** Phone-sized frame that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Frame({ style, screen = false, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <ScreenMode.Provider value={screen}>\n      <View\n        style={[\n          { backgroundColor: colors.background, overflow: 'hidden' },\n          screen ? { flex: 1 } : { height: 600, borderRadius: radius.scale(28), borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border },\n          style,\n        ]}\n        {...rest}\n      />\n    </ScreenMode.Provider>\n  );\n}\n\n/** Fake status bar: time, signal and battery, drawn with Views. */\nfunction StatusBar() {\n  const { colors, radius } = useKit();\n  const ink = colors.foreground;\n  return (\n    <View style={{ height: STATUS_H, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>\n      <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 15, color: ink, fontVariant: ['tabular-nums'] }}>9:41</Text>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>\n        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>\n          {[4, 6, 8, 10].map((h) => (\n            <View key={h} style={{ width: 3, height: h, borderRadius: radius.capsule(3), backgroundColor: ink }} />\n          ))}\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n          <View style={{ width: 22, height: 11, padding: 1.5, borderRadius: radius.scale(3.5), borderWidth: 1, borderColor: alpha(ink, 0.4) }}>\n            <View style={{ width: '72%', flex: 1, borderRadius: radius.scale(2), backgroundColor: ink }} />\n          </View>\n          <View style={{ width: 1.5, height: 4, borderRadius: 1, backgroundColor: alpha(ink, 0.4) }} />\n        </View>\n      </View>\n    </View>\n  );\n}\n\n/** The app screen behind the drawer: status bar plus your content. */\nfunction Phone({ children }: { children: React.ReactNode }) {\n  const { colors } = useKit();\n  const screen = React.useContext(ScreenMode);\n  return (\n    <View style={{ flex: 1, backgroundColor: colors.background }}>\n      {screen ? null : <StatusBar />}\n      {children}\n    </View>\n  );\n}\n\nfunction IconButton({ icon, label, onPress, color }: { icon: DrawerIconName; label: string; onPress?: () => void; color?: string }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      style={({ pressed }) => ({\n        width: 44,\n        height: 44,\n        borderRadius: radius.capsule(44),\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: pressed ? colors.muted : 'transparent',\n      })}\n    >\n      <DrawerIcon name={icon} size={22} color={color ?? colors.foreground} />\n    </Pressable>\n  );\n}\n\n/** The hamburger: toggles the surrounding Drawer through useDrawer(). */\nfunction MenuButton() {\n  const { open, setOpen } = useDrawer();\n  return <IconButton icon=\"menu\" label=\"Open navigation\" onPress={() => setOpen(!open)} />;\n}\n\n/** A plain inline top bar: hamburger, title (+ subtitle) and trailing actions. */\nfunction TopBar({ title, subtitle, right, menu = true }: { title: string; subtitle?: string; right?: React.ReactNode; menu?: boolean }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ minHeight: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: menu ? 6 : 16, paddingRight: 8, gap: 4 }}>\n      {menu ? <MenuButton /> : null}\n      <View style={{ flex: 1, minWidth: 0 }}>\n        <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: subtitle ? 19 : 22, letterSpacing: -0.4, color: colors.foreground }}>\n          {title}\n        </Text>\n        {subtitle ? (\n          <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 12.5, color: colors.mutedForeground }}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\ntype ArtKind = 'sunset' | 'grid' | 'rings' | 'stripes' | 'split';\n\n/**\n * Album art drawn with plain Views in theme colours. `size` 0 stretches to the parent width\n * (then pass `height`).\n */\nfunction Art({ kind, size, height, radiusSize }: { kind: ArtKind; size: number; height?: number; radiusSize?: number }) {\n  const { colors, radius } = useKit();\n  const h = height ?? size;\n  const w = size || undefined;\n  const d = Math.min(size || h, h);\n  const box = {\n    width: w,\n    alignSelf: size ? undefined : ('stretch' as const),\n    height: h,\n    borderRadius: radiusSize ?? radius.scale(size > 60 ? 14 : 8),\n    overflow: 'hidden' as const,\n  };\n  const on = colors.accentForeground;\n  if (kind === 'sunset') {\n    return (\n      <View style={[box, { backgroundColor: colors.accent, alignItems: 'center' }]}>\n        <View style={{ position: 'absolute', top: h * 0.3, width: d * 0.5, height: d * 0.5, borderRadius: radius.capsule(d), backgroundColor: alpha(on, 0.85) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: h * 0.34, backgroundColor: alpha(colors.foreground, 0.35) }} />\n        <View style={{ position: 'absolute', left: 0, right: 0, bottom: h * 0.22, height: Math.max(1, h * 0.03), backgroundColor: alpha(on, 0.35) }} />\n      </View>\n    );\n  }\n  if (kind === 'grid') {\n    const cell = d * 0.18;\n    return (\n      <View style={[box, { backgroundColor: colors.foreground, alignItems: 'center', justifyContent: 'center' }]}>\n        <View style={{ width: cell * 3 + cell * 0.5 * 2, flexDirection: 'row', flexWrap: 'wrap', gap: cell * 0.5 }}>\n          {[1, 0.25, 0.6, 0.25, 1, 0.25, 0.6, 0.25, 1].map((a, i) => (\n            <View key={i} style={{ width: cell, height: cell, borderRadius: radius.scale(cell * 0.3), backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  if (kind === 'rings') {\n    return (\n      <View style={[box, { backgroundColor: alpha(colors.accent, 0.16), alignItems: 'center', justifyContent: 'center' }]}>\n        {[0.95, 0.7, 0.45, 0.2].map((f) => (\n          <View\n            key={f}\n            style={{\n              position: 'absolute',\n              width: d * f,\n              height: d * f,\n              borderRadius: radius.capsule(d),\n              borderWidth: Math.max(1.5, d * 0.03),\n              borderColor: alpha(colors.accent, 1 - f * 0.6),\n            }}\n          />\n        ))}\n      </View>\n    );\n  }\n  if (kind === 'stripes') {\n    return (\n      <View style={[box, { backgroundColor: colors.muted, justifyContent: 'center', alignItems: 'center' }]}>\n        <View style={{ width: d * 1.6, gap: d * 0.07, transform: [{ rotate: '-30deg' }] }}>\n          {[0.9, 0.55, 0.3, 0.55, 0.9].map((a, i) => (\n            <View key={i} style={{ height: d * 0.1, backgroundColor: alpha(colors.accent, a) }} />\n          ))}\n        </View>\n      </View>\n    );\n  }\n  return (\n    <View style={[box, { backgroundColor: colors.foreground, flexDirection: 'row' }]}>\n      <View style={{ flex: 1, backgroundColor: colors.accent }} />\n      <View style={{ flex: 1 }} />\n      <View\n        style={{\n          position: 'absolute',\n          left: (w ?? d) / 2 - d * 0.22,\n          top: h / 2 - d * 0.22,\n          width: d * 0.44,\n          height: d * 0.44,\n          borderRadius: radius.capsule(d),\n          backgroundColor: colors.background,\n        }}\n      />\n    </View>\n  );\n}\n\n/** A right-pointing triangle made from borders (play / skip glyphs). */\nfunction Tri({ size, color, flip }: { size: number; color: string; flip?: boolean }) {\n  return (\n    <View\n      style={{\n        width: 0,\n        height: 0,\n        borderTopWidth: size / 2,\n        borderBottomWidth: size / 2,\n        borderLeftWidth: size * 0.85,\n        borderTopColor: 'transparent',\n        borderBottomColor: 'transparent',\n        borderLeftColor: color,\n        transform: flip ? [{ scaleX: -1 }] : undefined,\n      }}\n    />\n  );\n}\n\nfunction Skip({ color, back }: { color: string; back?: boolean }) {\n  const { radius } = useKit();\n  return (\n    <View style={{ flexDirection: back ? 'row-reverse' : 'row', alignItems: 'center', gap: 1 }}>\n      <Tri size={14} color={color} flip={back} />\n      <View style={{ width: 2.5, height: 14, borderRadius: radius.capsule(2.5), backgroundColor: color }} />\n    </View>\n  );\n}\n\nconst TRACKS: { title: string; artist: string; time: string; art: ArtKind; playing?: boolean }[] = [\n  { title: 'Midnight City Lights', artist: 'Nova Arcade', time: '4:12', art: 'sunset', playing: true },\n  { title: 'Paper Planes', artist: 'Juniper Fields', time: '3:27', art: 'rings' },\n  { title: 'Tidal', artist: 'Okra & The Moon', time: '5:03', art: 'stripes' },\n  { title: 'Slow Burn', artist: 'Halcyon Days', time: '3:48', art: 'grid' },\n  { title: 'Northern Line', artist: 'The Lanterns', time: '4:31', art: 'split' },\n];\n\nexport default function PushLayout({ screen, bottomInset }: DemoProps) {\n  const { colors, radius, dark } = useKit();\n  const [view, setView] = useState('Listen now');\n  const [playing, setPlaying] = useState(true);\n  return (\n    <Frame screen={screen}>\n      <Drawer\n        variant=\"push\"\n        width={252}\n        topInset={screen ? undefined : STATUS_H}\n        bottomInset={bottomInset}\n        header={<DrawerProfile layout=\"stacked\" name=\"Jonas Weber\" email=\"Premium · 2 devices\" />}\n        content={\n          <>\n            {(\n              [\n                ['home', 'Listen now'],\n                ['search', 'Search'],\n                ['music', 'Library', 3],\n                ['bell', 'New releases', 8, 'accent'],\n              ] as [DrawerIconName, string, number?, 'accent'?][]\n            ).map(([icon, label, badge, badgeTone]) => (\n              <DrawerItem key={label} icon={icon} label={label} badge={badge} badgeTone={badgeTone} active={view === label} onPress={() => setView(label)} />\n            ))}\n            <DrawerSection title=\"Playlists\" />\n            {['Late Night Drive', 'Focus Flow', 'Sunday Coffee'].map((p, i) => (\n              <DrawerItem\n                key={p}\n                icon={<Art kind={(['sunset', 'rings', 'stripes'] as const)[i]} size={22} radiusSize={radius.scale(5)} />}\n                label={p}\n                active={view === p}\n                onPress={() => setView(p)}\n              />\n            ))}\n          </>\n        }\n        footer={<DrawerItem icon=\"help\" label=\"Help & feedback\" closeOnPress={false} />}\n      >\n        <Phone>\n          <TopBar title={view} right={<IconButton icon=\"search\" label=\"Search music\" />} />\n          <View style={{ paddingHorizontal: 16, gap: 14 }}>\n            <View\n              style={{\n                padding: 14,\n                gap: 12,\n                borderRadius: radius.scale(20),\n                backgroundColor: colors.card,\n                borderWidth: StyleSheet.hairlineWidth,\n                borderColor: colors.border,\n                shadowColor: dark ? colors.background : colors.foreground,\n                shadowOpacity: dark ? 0.4 : 0.06,\n                shadowRadius: 14,\n                shadowOffset: { width: 0, height: 4 },\n                elevation: 2,\n              }}\n            >\n              <View style={{ flexDirection: 'row', gap: 14 }}>\n                <Art kind=\"sunset\" size={92} />\n                <View style={{ flex: 1, minWidth: 0, justifyContent: 'center', gap: 2 }}>\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.accent }}>Now playing</Text>\n                  <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 17, letterSpacing: -0.3, color: colors.foreground }}>\n                    Midnight City Lights\n                  </Text>\n                  <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 13.5, color: colors.mutedForeground }}>\n                    Nova Arcade · Afterglow\n                  </Text>\n                </View>\n              </View>\n              <View style={{ gap: 6 }}>\n                <View style={{ height: 4, borderRadius: radius.capsule(4), backgroundColor: colors.muted, overflow: 'hidden' }}>\n                  <View style={{ width: '43%', height: '100%', borderRadius: radius.capsule(4), backgroundColor: colors.accent }} />\n                </View>\n                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 11.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>1:48</Text>\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 11.5, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>-2:24</Text>\n                </View>\n              </View>\n              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 36 }}>\n                <Skip color={colors.foreground} back />\n                <Pressable\n                  onPress={() => setPlaying((v) => !v)}\n                  accessibilityRole=\"button\"\n                  accessibilityLabel={playing ? 'Pause' : 'Play'}\n                  style={{ width: 48, height: 48, borderRadius: radius.capsule(48), backgroundColor: colors.accent, alignItems: 'center', justifyContent: 'center' }}\n                >\n                  {playing ? (\n                    <View style={{ flexDirection: 'row', gap: 5 }}>\n                      <View style={{ width: 4.5, height: 16, borderRadius: radius.capsule(4.5), backgroundColor: colors.accentForeground }} />\n                      <View style={{ width: 4.5, height: 16, borderRadius: radius.capsule(4.5), backgroundColor: colors.accentForeground }} />\n                    </View>\n                  ) : (\n                    <View style={{ marginLeft: 3 }}>\n                      <Tri size={17} color={colors.accentForeground} />\n                    </View>\n                  )}\n                </Pressable>\n                <Skip color={colors.foreground} />\n              </View>\n            </View>\n            <View style={{ flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between' }}>\n              <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 17, letterSpacing: -0.3, color: colors.foreground }}>Up next</Text>\n              <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 13.5, color: colors.accent }}>See all</Text>\n            </View>\n            <View style={{ gap: 12 }}>\n              {TRACKS.map((t) => (\n                <View key={t.title} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n                  <Art kind={t.art} size={44} />\n                  <View style={{ flex: 1, minWidth: 0 }}>\n                    <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 15, color: t.playing ? colors.accent : colors.foreground }}>\n                      {t.title}\n                    </Text>\n                    <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={{ fontSize: 13, color: colors.mutedForeground }}>\n                      {t.artist}\n                    </Text>\n                  </View>\n                  {t.playing ? (\n                    <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2, height: 14 }}>\n                      {[8, 14, 10].map((hh, i) => (\n                        <View key={i} style={{ width: 3, height: hh, borderRadius: radius.capsule(3), backgroundColor: colors.accent }} />\n                      ))}\n                    </View>\n                  ) : (\n                    <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 13, color: colors.mutedForeground, fontVariant: ['tabular-nums'] }}>{t.time}</Text>\n                  )}\n                </View>\n              ))}\n            </View>\n          </View>\n        </Phone>\n      </Drawer>\n    </Frame>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/fintech-app.json

@@ -0,0 +1,49 @@
+{
+  "name": "fintech-app",
+  "category": "Templates",
+  "aliases": [],
+  "exportName": null,
+  "files": [
+    "src/app/(tabs)/_layout.tsx",
+    "src/app/(tabs)/cards.tsx",
+    "src/app/(tabs)/index.tsx",
+    "src/app/(tabs)/pay.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/fintech-app/cards-screen.tsx",
+    "src/components/fintech-app/pay-screen.tsx",
+    "src/components/fintech-app/tabs.tsx",
+    "src/lib/fintech-app/data.tsx",
+    "src/lib/fintech-app/session.tsx",
+    "src/lib/fintech-app/wallet.tsx"
+  ],
+  "summary": null,
+  "props": [],
+  "behavior": [
+    [
+      "Flow",
+      "Onboarding shows once, then phone number + one-time 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."
+    ],
+    [
+      "Tabs",
+      "Home (scrubbable revenue chart, KPIs, pull to refresh), Cards (swipe between cards, reveal the number or CVV, freeze), Pay (payee, amount, slide to send) and Profile."
+    ],
+    [
+      "Payments",
+      "A transfer made on Pay appears at the top of Home’s transactions straight away. The send itself is a stand-in — call your payments API from the slider’s onConfirm."
+    ],
+    [
+      "Settings",
+      "Pushed from Profile. Appearance (System / Light / Dark) re-themes every kit component instantly."
+    ],
+    [
+      "Your backend",
+      "SMS code handlers in app/sign-in.tsx and the transfer in components/fintech-app/pay-screen.tsx are stand-ins that wait and succeed. Cards, payees and the dashboard numbers live in lib/fintech-app/data.tsx."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/flip-card.json

@@ -106,22 +106,22 @@
     {
       "name": "Polaroid",
       "title": "Polaroid",
-      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\nconst hand = Platform.select({ ios: 'Noteworthy', android: 'casual', default: '\"Bradley Hand\", \"Segoe Print\", cursive' });\n\n/** A screen title, as it sits above the card 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 Polaroid() {\n  const { colors } = useKit();\n  const paper = { width: 240, padding: 12, paddingBottom: 0, backgroundColor: '#f7f5f0' } as const;\n  return (\n    <View style={{ gap: 26 }}>\n      <Header title=\"Memories\" sub=\"Lisbon · June 2025 · 24 photos\" />\n      <FlipCard\n      radius={6}\n      accessibilityLabel=\"Polaroid of a Lisbon tram\"\n      style={{ alignSelf: 'center', transform: [{ rotate: '-2deg' }] }}\n      front={\n        <View style={paper}>\n          <Image alt=\"\" source={photo(419, 480, 480)} style={{ width: 216, height: 216, backgroundColor: '#ddd' }} />\n          <Text style={{ fontFamily: hand, fontSize: 19, color: '#2b2b2b', textAlign: 'center', paddingVertical: 14 }}>Lisbon, June ’25</Text>\n        </View>\n      }\n      back={\n        <View style={[paper, { flex: 1, padding: 22, backgroundColor: '#efe9dc', justifyContent: 'space-between' }]}>\n          <Text style={{ fontFamily: hand, fontSize: 18, lineHeight: 27, color: '#2f2a22' }}>\n            Tram 28 all the way up to Graça. Pastéis de nata still warm. Best trip yet — come back next year?\n          </Text>\n          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }}>\n            <Text style={{ fontFamily: hand, fontSize: 16, color: '#5b5245' }}>— M.</Text>\n            <View style={{ paddingHorizontal: 8, paddingVertical: 4, borderWidth: 1.5, borderColor: '#b04a3a', borderRadius: 4, transform: [{ rotate: '6deg' }] }}>\n              <Text style={{ color: '#b04a3a', fontSize: 10, fontWeight: '800', letterSpacing: 1 }}>LISBOA · 14 JUN</Text>\n            </View>\n          </View>\n        </View>\n      }\n      />\n      <Text style={{ color: colors.mutedForeground, fontSize: 13, textAlign: 'center' }}>Tap the photo to read the note on the back</Text>\n    </View>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\nconst hand = Platform.select({ ios: 'Noteworthy', android: 'casual', default: '\"Bradley Hand\", \"Segoe Print\", cursive' });\n\n/** A screen title, as it sits above the card 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 Polaroid() {\n  const { colors } = useKit();\n  const paper = { width: 240, padding: 12, paddingBottom: 0, backgroundColor: '#f7f5f0' } as const;\n  return (\n    <View style={{ gap: 26 }}>\n      <Header title=\"Memories\" sub=\"Lisbon · June 2025 · 24 photos\" />\n      <FlipCard\n      radius={6}\n      accessibilityLabel=\"Polaroid of a Lisbon tram\"\n      style={{ alignSelf: 'center', transform: [{ rotate: '-2deg' }] }}\n      front={\n        <View style={paper}>\n          <Image alt=\"\" source={photo(419, 480, 480)} style={{ width: 216, height: 216, backgroundColor: '#ddd' }} />\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontFamily: hand, fontSize: 19, color: '#2b2b2b', textAlign: 'center', paddingVertical: 14 }}>Lisbon, June ’25</Text>\n        </View>\n      }\n      back={\n        <View style={[paper, { flex: 1, padding: 22, backgroundColor: '#efe9dc', justifyContent: 'space-between' }]}>\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontFamily: hand, fontSize: 18, lineHeight: 27, color: '#2f2a22' }}>\n            Tram 28 all the way up to Graça. Pastéis de nata still warm. Best trip yet — come back next year?\n          </Text>\n          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }}>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontFamily: hand, fontSize: 16, color: '#5b5245' }}>— M.</Text>\n            <View style={{ paddingHorizontal: 8, paddingVertical: 4, borderWidth: 1.5, borderColor: '#b04a3a', borderRadius: 4, transform: [{ rotate: '6deg' }] }}>\n              <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: '#b04a3a', fontSize: 10, fontWeight: '800', letterSpacing: 1 }}>LISBOA · 14 JUN</Text>\n            </View>\n          </View>\n        </View>\n      }\n      />\n      <Text style={{ color: colors.mutedForeground, fontSize: 13, textAlign: 'center' }}>Tap the photo to read the note on the back</Text>\n    </View>\n  );\n}\n"
     },
     {
       "name": "Recipe",
       "title": "Recipe",
-      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card 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 Recipe() {\n  const { colors } = useKit();\n  const items = ['3 parsnips, halved', '2 red onions, quartered', '4 carrots', 'Parsley & dill', 'Olive oil, salt, cracked pepper'];\n  return (\n    <View style={{ gap: 16 }}>\n      <Header title=\"Tonight’s dinner\" sub=\"Picked for you · vegetarian\" />\n      <FlipCard\n      radius={22}\n      accessibilityLabel=\"Roasted root vegetables recipe\"\n      front={\n        <View style={{ height: 260, backgroundColor: '#222' }}>\n          <Image alt=\"\" source={photo(292, 720, 520)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n          <Scrim />\n          <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18, gap: 2 }}>\n            <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>45 MIN · SERVES 4</Text>\n            <Text style={{ color: '#fff', fontSize: 26, fontWeight: '800', letterSpacing: -0.5 }}>Roasted roots</Text>\n            <Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12 }}>Tap for ingredients</Text>\n          </View>\n        </View>\n      }\n      back={\n        <View style={{ flex: 1, padding: 20, backgroundColor: '#f6f1e7', gap: 10 }}>\n          <Text style={{ color: '#3b3226', fontSize: 12, fontWeight: '800', letterSpacing: 1.2 }}>INGREDIENTS</Text>\n          {items.map((it) => (\n            <View key={it} style={{ flexDirection: 'row', alignItems: 'center', gap: 10, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: 'rgba(59,50,38,0.12)' }}>\n              <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#c9a227' }} />\n              <Text style={{ color: '#3b3226', fontSize: 15 }}>{it}</Text>\n            </View>\n          ))}\n        </View>\n      }\n      />\n      <View style={{ flexDirection: 'row', gap: 8 }}>\n        {['45 min', 'Serves 4', '520 kcal'].map((t) => (\n          <View key={t} style={{ flex: 1, alignItems: 'center', paddingVertical: 9, borderRadius: 12, backgroundColor: colors.muted }}>\n            <Text style={{ color: colors.foreground, fontSize: 13, fontWeight: '600' }}>{t}</Text>\n          </View>\n        ))}\n      </View>\n      <Pressable accessibilityRole=\"button\" style={{ alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.primary }}>\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '600' }}>Start cooking</Text>\n      </Pressable>\n    </View>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card 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 Recipe() {\n  const { colors } = useKit();\n  const items = ['3 parsnips, halved', '2 red onions, quartered', '4 carrots', 'Parsley & dill', 'Olive oil, salt, cracked pepper'];\n  return (\n    <View style={{ gap: 16 }}>\n      <Header title=\"Tonight’s dinner\" sub=\"Picked for you · vegetarian\" />\n      <FlipCard\n      radius={22}\n      accessibilityLabel=\"Roasted root vegetables recipe\"\n      front={\n        <View style={{ height: 260, backgroundColor: '#222' }}>\n          <Image alt=\"\" source={photo(292, 720, 520)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n          <Scrim />\n          <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18, gap: 2 }}>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: 'rgba(255,255,255,0.8)', fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>45 MIN · SERVES 4</Text>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: '#fff', fontSize: 26, fontWeight: '800', letterSpacing: -0.5 }}>Roasted roots</Text>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12 }}>Tap for ingredients</Text>\n          </View>\n        </View>\n      }\n      back={\n        <View style={{ flex: 1, padding: 20, backgroundColor: '#f6f1e7', gap: 10 }}>\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: '#3b3226', fontSize: 12, fontWeight: '800', letterSpacing: 1.2 }}>INGREDIENTS</Text>\n          {items.map((it) => (\n            <View key={it} style={{ flexDirection: 'row', alignItems: 'center', gap: 10, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: 'rgba(59,50,38,0.12)' }}>\n              <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#c9a227' }} />\n              <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: '#3b3226', fontSize: 15 }}>{it}</Text>\n            </View>\n          ))}\n        </View>\n      }\n      />\n      <View style={{ flexDirection: 'row', gap: 8 }}>\n        {['45 min', 'Serves 4', '520 kcal'].map((t) => (\n          <View key={t} style={{ flex: 1, alignItems: 'center', paddingVertical: 9, borderRadius: 12, backgroundColor: colors.muted }}>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.foreground, fontSize: 13, fontWeight: '600' }}>{t}</Text>\n          </View>\n        ))}\n      </View>\n      <Pressable accessibilityRole=\"button\" style={{ alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.primary }}>\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '600' }}>Start cooking</Text>\n      </Pressable>\n    </View>\n  );\n}\n"
     },
     {
       "name": "Profile",
       "title": "Profile",
-      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card 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 Profile() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 20 }}>\n      <Header title=\"Design team\" sub=\"Tap a card to see their year\" />\n      <FlipCard\n      radius={24}\n      accessibilityLabel=\"Ana Lima, lead designer\"\n      style={{ alignSelf: 'center', width: 250 }}\n      front={\n        <View style={{ height: 320, backgroundColor: '#222' }}>\n          <Image alt=\"\" source={photo(1027, 500, 640)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n          <Scrim />\n          <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18 }}>\n            <Text style={{ color: '#fff', fontSize: 24, fontWeight: '800', letterSpacing: -0.4 }}>Ana Lima</Text>\n            <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 13 }}>Lead designer · Lisbon</Text>\n          </View>\n        </View>\n      }\n      back={\n        <View style={{ flex: 1, padding: 22, backgroundColor: '#141416', justifyContent: 'space-between' }}>\n          <Text style={{ color: 'rgba(255,255,255,0.55)', fontSize: 11, fontWeight: '700', letterSpacing: 1.2 }}>THIS YEAR</Text>\n          {[\n            ['Projects shipped', '24'],\n            ['Design reviews', '138'],\n            ['Mentees', '6'],\n          ].map(([k, v]) => (\n            <View key={k}>\n              <Text style={{ color: '#fff', fontSize: 34, fontWeight: '800', letterSpacing: -1 }}>{v}</Text>\n              <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13 }}>{k}</Text>\n            </View>\n          ))}\n        </View>\n      }\n      />\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        <Pressable accessibilityRole=\"button\" style={{ flex: 1, alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.primary }}>\n          <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '600' }}>Message Ana</Text>\n        </Pressable>\n        <Pressable accessibilityRole=\"button\" style={{ flex: 1, alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.muted }}>\n          <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '600' }}>View work</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card 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 Profile() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 20 }}>\n      <Header title=\"Design team\" sub=\"Tap a card to see their year\" />\n      <FlipCard\n      radius={24}\n      accessibilityLabel=\"Ana Lima, lead designer\"\n      style={{ alignSelf: 'center', width: 250 }}\n      front={\n        <View style={{ height: 320, backgroundColor: '#222' }}>\n          <Image alt=\"\" source={photo(1027, 500, 640)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n          <Scrim />\n          <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18 }}>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: '#fff', fontSize: 24, fontWeight: '800', letterSpacing: -0.4 }}>Ana Lima</Text>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: 'rgba(255,255,255,0.8)', fontSize: 13 }}>Lead designer · Lisbon</Text>\n          </View>\n        </View>\n      }\n      back={\n        <View style={{ flex: 1, padding: 22, backgroundColor: '#141416', justifyContent: 'space-between' }}>\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: 'rgba(255,255,255,0.55)', fontSize: 11, fontWeight: '700', letterSpacing: 1.2 }}>THIS YEAR</Text>\n          {[\n            ['Projects shipped', '24'],\n            ['Design reviews', '138'],\n            ['Mentees', '6'],\n          ].map(([k, v]) => (\n            <View key={k}>\n              <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: '#fff', fontSize: 34, fontWeight: '800', letterSpacing: -1 }}>{v}</Text>\n              <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13 }}>{k}</Text>\n            </View>\n          ))}\n        </View>\n      }\n      />\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        <Pressable accessibilityRole=\"button\" style={{ flex: 1, alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.primary }}>\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '600' }}>Message Ana</Text>\n        </Pressable>\n        <Pressable accessibilityRole=\"button\" style={{ flex: 1, alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.muted }}>\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.foreground, fontSize: 15, fontWeight: '600' }}>View work</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n"
     },
     {
       "name": "Flashcard",
       "title": "Flashcard",
-      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card 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 Flashcard() {\n  const { colors } = useKit();\n  const [flipped, setFlipped] = useState(false);\n  return (\n    <View style={{ gap: 14 }}>\n      <Header\n        title=\"Spanish · Fruit\"\n        sub=\"12 cards left today\"\n        right={<Text style={{ color: colors.mutedForeground, fontSize: 13, fontWeight: '600' }}>8 / 20</Text>}\n      />\n      <View style={{ height: 6, borderRadius: 3, backgroundColor: colors.muted, marginBottom: 6 }}>\n        <View style={{ width: '40%', height: 6, borderRadius: 3, backgroundColor: colors.success }} />\n      </View>\n      <FlipCard\n        radius={22}\n        flipped={flipped}\n        onFlip={setFlipped}\n        accessibilityLabel=\"Flashcard\"\n        front={\n          <View style={{ height: 240, backgroundColor: '#3a0d10' }}>\n            <Image alt=\"\" source={photo(1080, 720, 400)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n            <Scrim max={0.8} />\n            <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18 }}>\n              <Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>SPANISH</Text>\n              <Text style={{ color: '#fff', fontSize: 30, fontWeight: '800' }}>la fresa</Text>\n            </View>\n          </View>\n        }\n        back={\n          <View style={{ flex: 1, padding: 20, backgroundColor: colors.card, justifyContent: 'center', gap: 6 }}>\n            <Text style={{ color: colors.mutedForeground, fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>ENGLISH</Text>\n            <Text style={{ color: colors.foreground, fontSize: 30, fontWeight: '800' }}>the strawberry</Text>\n            <Text style={{ color: colors.mutedForeground, fontSize: 14 }}>“Me encantan las fresas con nata.”</Text>\n          </View>\n        }\n      />\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        {['Again', 'Good', 'Easy'].map((label) => (\n          <Pressable\n            key={label}\n            onPress={() => setFlipped((f) => !f)}\n            accessibilityRole=\"button\"\n            style={{ flex: 1, alignItems: 'center', paddingVertical: 12, borderRadius: 12, backgroundColor: colors.muted }}\n          >\n            <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '600' }}>{label}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Image, Platform, Pressable, Text, View } from 'react-native';\nimport { FlipCard } from '@/components/ui/flip-card';\nimport { useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\n\n/** Any photo works (`require()` or a URL). */\nconst photo = (id: number, w: number, h: number) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}` });\n\n/** Smooth darkening toward the bottom of a photo, made from thin bands. */\nfunction Scrim({ height = '55%', max = 0.75 }: { height?: `${number}%` | number; max?: number }) {\n  const steps = 40; // fine steps: coarse ones read as faint lines on iOS\n  return (\n    <View pointerEvents=\"none\" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height }}>\n      {Array.from({ length: steps }, (_, i) => (\n        <View key={i} style={{ flex: 1, backgroundColor: `rgba(0,0,0,${(max * ((i + 0.5) / steps) ** 1.6).toFixed(3)})` }} />\n      ))}\n    </View>\n  );\n}\n\n/** A screen title, as it sits above the card 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 Flashcard() {\n  const { colors } = useKit();\n  const [flipped, setFlipped] = useState(false);\n  return (\n    <View style={{ gap: 14 }}>\n      <Header\n        title=\"Spanish · Fruit\"\n        sub=\"12 cards left today\"\n        right={<Text style={{ color: colors.mutedForeground, fontSize: 13, fontWeight: '600' }}>8 / 20</Text>}\n      />\n      <View style={{ height: 6, borderRadius: 3, backgroundColor: colors.muted, marginBottom: 6 }}>\n        <View style={{ width: '40%', height: 6, borderRadius: 3, backgroundColor: colors.success }} />\n      </View>\n      <FlipCard\n        radius={22}\n        flipped={flipped}\n        onFlip={setFlipped}\n        accessibilityLabel=\"Flashcard\"\n        front={\n          <View style={{ height: 240, backgroundColor: '#3a0d10' }}>\n            <Image alt=\"\" source={photo(1080, 720, 400)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n            <Scrim max={0.8} />\n            <View style={{ flex: 1, justifyContent: 'flex-end', padding: 18 }}>\n              <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: 'rgba(255,255,255,0.75)', fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>SPANISH</Text>\n              <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: '#fff', fontSize: 30, fontWeight: '800' }}>la fresa</Text>\n            </View>\n          </View>\n        }\n        back={\n          <View style={{ flex: 1, padding: 20, backgroundColor: colors.card, justifyContent: 'center', gap: 6 }}>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.mutedForeground, fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>ENGLISH</Text>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.foreground, fontSize: 30, fontWeight: '800' }}>the strawberry</Text>\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.mutedForeground, fontSize: 14 }}>“Me encantan las fresas con nata.”</Text>\n          </View>\n        }\n      />\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        {['Again', 'Good', 'Easy'].map((label) => (\n          <Pressable\n            key={label}\n            onPress={() => setFlipped((f) => !f)}\n            accessibilityRole=\"button\"\n            style={{ flex: 1, alignItems: 'center', paddingVertical: 12, borderRadius: 12, backgroundColor: colors.muted }}\n          >\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.foreground, fontSize: 14, fontWeight: '600' }}>{label}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/floating-input.json

@@ -170,12 +170,12 @@
     {
       "name": "SignUp",
       "title": "Sign Up",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst isEmail = (v: string) => /^\\S+@\\S+\\.\\S{2,}$/.test(v);\n\nexport default function SignUp() {\n  const { colors } = useKit();\n  const [name, setName] = useState('Priya Sharma');\n  const [email, setEmail] = useState('priya@');\n  const [phone, setPhone] = useState('');\n  const emailError = email.length > 0 && !isEmail(email) ? 'Enter a valid email address' : undefined;\n  return (\n    <Card title=\"Create your account\" subtitle=\"It takes less than a minute.\">\n      <FloatingInput label=\"Full name\" value={name} onChangeText={setName} autoComplete=\"name\" clearable />\n      <FloatingInput\n        label=\"Email\"\n        value={email}\n        onChangeText={setEmail}\n        keyboardType=\"email-address\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        error={emailError}\n        success={isEmail(email) ? 'Looks good' : undefined}\n      />\n      <FloatingInput\n        label=\"Mobile number\"\n        prefix=\"+91\"\n        value={phone}\n        onChangeText={(v) => setPhone(v.replace(/\\D/g, ''))}\n        keyboardType=\"phone-pad\"\n        maxLength={10}\n        success={phone.length === 10}\n        helper=\"We'll text you a 6-digit code\"\n      />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>\n        Already have an account? <Text style={{ fontWeight: '400', color: colors.accent }}>Sign in</Text>\n      </Text>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n      ]}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst isEmail = (v: string) => /^\\S+@\\S+\\.\\S{2,}$/.test(v);\n\nexport default function SignUp({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const [name, setName] = useState('Priya Sharma');\n  const [email, setEmail] = useState('priya@');\n  const [phone, setPhone] = useState('');\n  const emailError = email.length > 0 && !isEmail(email) ? 'Enter a valid email address' : undefined;\n  return (\n    <Card title=\"Create your account\" subtitle=\"It takes less than a minute.\" screen={screen}>\n      <FloatingInput label=\"Full name\" value={name} onChangeText={setName} autoComplete=\"name\" clearable />\n      <FloatingInput\n        label=\"Email\"\n        value={email}\n        onChangeText={setEmail}\n        keyboardType=\"email-address\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        error={emailError}\n        success={isEmail(email) ? 'Looks good' : undefined}\n      />\n      <FloatingInput\n        label=\"Mobile number\"\n        prefix=\"+91\"\n        value={phone}\n        onChangeText={(v) => setPhone(v.replace(/\\D/g, ''))}\n        keyboardType=\"phone-pad\"\n        maxLength={10}\n        success={phone.length === 10}\n        helper=\"We'll text you a 6-digit code\"\n      />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>\n        Already have an account? <Text style={{ fontWeight: '400', color: colors.accent }}>Sign in</Text>\n      </Text>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Payment",
       "title": "Payment",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst formatCard = (v: string) =>\n  v\n    .replace(/\\D/g, '')\n    .slice(0, 16)\n    .replace(/(\\d{4})(?=\\d)/g, '$1 ');\n\nconst formatExpiry = (v: string) => {\n  const d = v.replace(/\\D/g, '').slice(0, 4);\n  return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d;\n};\n\nconst cardBrand = (v: string) => {\n  const d = v.replace(/\\D/g, '');\n  if (/^4/.test(d)) return 'VISA';\n  if (/^(5[1-5]|2[2-7])/.test(d)) return 'MC';\n  if (/^3[47]/.test(d)) return 'AMEX';\n  return undefined;\n};\n\n/** '' = not finished yet, otherwise an error message or null when valid. */\nconst expiryError = (v: string): string | null | '' => {\n  if (v.length < 5) return '';\n  const month = Number(v.slice(0, 2));\n  const year = 2000 + Number(v.slice(3));\n  if (month < 1 || month > 12) return 'Month must be 01–12';\n  const now = new Date();\n  if (year < now.getFullYear() || (year === now.getFullYear() && month < now.getMonth() + 1)) return 'This card has expired';\n  return null;\n};\n\nconst rupees = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nexport default function Payment() {\n  const { colors, radius } = useKit();\n  const [amount, setAmount] = useState('1299');\n  const [card, setCard] = useState('4242 4242 4242 4242');\n  const [expiry, setExpiry] = useState('');\n  const [cvc, setCvc] = useState('');\n  const [paid, setPaid] = useState(false);\n  const brand = cardBrand(card);\n  const cvcLen = brand === 'AMEX' ? 4 : 3;\n  const expErr = expiryError(expiry);\n  const ready = Number(amount) > 0 && card.length >= 18 && expErr === null && cvc.length === cvcLen;\n  return (\n    <Card title=\"Add funds\" subtitle=\"Charged securely — you can cancel anytime.\">\n      <FloatingInput label=\"Amount\" prefix=\"₹\" suffix=\"INR\" keyboardType=\"decimal-pad\" value={amount} onChangeText={setAmount} />\n      <FloatingInput\n        label=\"Card number\"\n        keyboardType=\"number-pad\"\n        autoComplete=\"cc-number\"\n        value={card}\n        onChangeText={(v) => setCard(formatCard(v))}\n        maxLength={19}\n        suffix={brand}\n        success={card.length === 19}\n      />\n      <View style={{ flexDirection: 'row', gap: 10, alignItems: 'flex-start' }}>\n        <FloatingInput\n          label=\"MM/YY\"\n          keyboardType=\"number-pad\"\n          autoComplete=\"cc-exp\"\n          value={expiry}\n          onChangeText={(v) => setExpiry(formatExpiry(v))}\n          maxLength={5}\n          error={expErr || undefined}\n          success={expErr === null}\n          style={{ flex: 1 }}\n        />\n        <FloatingInput\n          label=\"CVC\"\n          keyboardType=\"number-pad\"\n          autoComplete=\"cc-csc\"\n          secureTextEntry\n          value={cvc}\n          onChangeText={(v) => setCvc(v.replace(/\\D/g, '').slice(0, cvcLen))}\n          maxLength={cvcLen}\n          helper={`${cvcLen} digits on the ${brand === 'AMEX' ? 'front' : 'back'}`}\n          style={{ flex: 1 }}\n        />\n      </View>\n      <Pressable\n        disabled={!ready}\n        onPress={() => setPaid(true)}\n        accessibilityRole=\"button\"\n        accessibilityState={{ disabled: !ready }}\n        style={({ pressed }) => ({\n          height: 50,\n          marginTop: 4,\n          borderRadius: radius.md,\n          alignItems: 'center',\n          justifyContent: 'center',\n          backgroundColor: ready ? colors.accent : colors.muted,\n          opacity: pressed ? 0.85 : 1,\n        })}\n      >\n        <Text style={{ fontSize: 16, fontWeight: '400', color: ready ? readableOn(colors.accent) : colors.mutedForeground }}>\n          {paid ? 'Paid ✓' : `Pay ${rupees(Number(amount) || 0)}`}\n        </Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\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\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n      ]}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst formatCard = (v: string) =>\n  v\n    .replace(/\\D/g, '')\n    .slice(0, 16)\n    .replace(/(\\d{4})(?=\\d)/g, '$1 ');\n\nconst formatExpiry = (v: string) => {\n  const d = v.replace(/\\D/g, '').slice(0, 4);\n  return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d;\n};\n\nconst cardBrand = (v: string) => {\n  const d = v.replace(/\\D/g, '');\n  if (/^4/.test(d)) return 'VISA';\n  if (/^(5[1-5]|2[2-7])/.test(d)) return 'MC';\n  if (/^3[47]/.test(d)) return 'AMEX';\n  return undefined;\n};\n\n/** '' = not finished yet, otherwise an error message or null when valid. */\nconst expiryError = (v: string): string | null | '' => {\n  if (v.length < 5) return '';\n  const month = Number(v.slice(0, 2));\n  const year = 2000 + Number(v.slice(3));\n  if (month < 1 || month > 12) return 'Month must be 01–12';\n  const now = new Date();\n  if (year < now.getFullYear() || (year === now.getFullYear() && month < now.getMonth() + 1)) return 'This card has expired';\n  return null;\n};\n\nconst rupees = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nexport default function Payment({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [amount, setAmount] = useState('1299');\n  const [card, setCard] = useState('4242 4242 4242 4242');\n  const [expiry, setExpiry] = useState('');\n  const [cvc, setCvc] = useState('');\n  const [paid, setPaid] = useState(false);\n  const brand = cardBrand(card);\n  const cvcLen = brand === 'AMEX' ? 4 : 3;\n  const expErr = expiryError(expiry);\n  const ready = Number(amount) > 0 && card.length >= 18 && expErr === null && cvc.length === cvcLen;\n  return (\n    <Card title=\"Add funds\" subtitle=\"Charged securely — you can cancel anytime.\" screen={screen}>\n      <FloatingInput label=\"Amount\" prefix=\"₹\" suffix=\"INR\" keyboardType=\"decimal-pad\" value={amount} onChangeText={setAmount} />\n      <FloatingInput\n        label=\"Card number\"\n        keyboardType=\"number-pad\"\n        autoComplete=\"cc-number\"\n        value={card}\n        onChangeText={(v) => setCard(formatCard(v))}\n        maxLength={19}\n        suffix={brand}\n        success={card.length === 19}\n      />\n      <View style={{ flexDirection: 'row', gap: 10, alignItems: 'flex-start' }}>\n        <FloatingInput\n          label=\"MM/YY\"\n          keyboardType=\"number-pad\"\n          autoComplete=\"cc-exp\"\n          value={expiry}\n          onChangeText={(v) => setExpiry(formatExpiry(v))}\n          maxLength={5}\n          error={expErr || undefined}\n          success={expErr === null}\n          style={{ flex: 1 }}\n        />\n        <FloatingInput\n          label=\"CVC\"\n          keyboardType=\"number-pad\"\n          autoComplete=\"cc-csc\"\n          secureTextEntry\n          value={cvc}\n          onChangeText={(v) => setCvc(v.replace(/\\D/g, '').slice(0, cvcLen))}\n          maxLength={cvcLen}\n          helper={`${cvcLen} digits on the ${brand === 'AMEX' ? 'front' : 'back'}`}\n          style={{ flex: 1 }}\n        />\n      </View>\n      <Pressable\n        disabled={!ready}\n        onPress={() => setPaid(true)}\n        accessibilityRole=\"button\"\n        accessibilityState={{ disabled: !ready }}\n        style={({ pressed }) => ({\n          minHeight: 50,\n          marginTop: 4,\n          borderRadius: radius.md,\n          alignItems: 'center',\n          justifyContent: 'center',\n          backgroundColor: ready ? colors.accent : colors.muted,\n          opacity: pressed ? 0.85 : 1,\n        })}\n      >\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 16, fontWeight: '400', color: ready ? readableOn(colors.accent) : colors.mutedForeground }}>\n          {paid ? 'Paid ✓' : `Pay ${rupees(Number(amount) || 0)}`}\n        </Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Variants",
@@ -190,7 +190,7 @@
     {
       "name": "Website",
       "title": "Website",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function Website() {\n  const [slug, setSlug] = useState('');\n  return (\n    <Card title=\"Your public page\">\n      <FloatingInput\n        label=\"Website\"\n        prefix=\"https://\"\n        keyboardType=\"url\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        clearable\n      />\n      <FloatingInput\n        label=\"Handle\"\n        prefix=\"@\"\n        suffix=\".expo.page\"\n        value={slug}\n        onChangeText={(v) => setSlug(v.toLowerCase().replace(/[^a-z0-9-]/g, ''))}\n        autoCapitalize=\"none\"\n        maxLength={20}\n        counter\n        helper=\"Letters, numbers and dashes\"\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n      ]}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function Website({ screen }: DemoProps) {\n  const [slug, setSlug] = useState('');\n  return (\n    <Card title=\"Your public page\" screen={screen}>\n      <FloatingInput\n        label=\"Website\"\n        prefix=\"https://\"\n        keyboardType=\"url\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        clearable\n      />\n      <FloatingInput\n        label=\"Handle\"\n        prefix=\"@\"\n        suffix=\".expo.page\"\n        value={slug}\n        onChangeText={(v) => setSlug(v.toLowerCase().replace(/[^a-z0-9-]/g, ''))}\n        autoCapitalize=\"none\"\n        maxLength={20}\n        counter\n        helper=\"Letters, numbers and dashes\"\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Sizes",
@@ -200,12 +200,12 @@
     {
       "name": "LabelAbove",
       "title": "Label Above",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst isEmail = (v: string) => /^\\S+@\\S+\\.\\S{2,}$/.test(v);\n\nexport default function LabelAbove() {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [bio, setBio] = useState('');\n  return (\n    <Card title=\"Edit profile\" subtitle=\"This is how others will see you.\">\n      <FloatingInput floatingLabel={false} label=\"Full name\" placeholder=\"Priya Sharma\" value={name} onChangeText={setName} autoComplete=\"name\" clearable />\n      <FloatingInput\n        floatingLabel={false}\n        label=\"Email\"\n        placeholder=\"you@example.com\"\n        value={email}\n        onChangeText={setEmail}\n        keyboardType=\"email-address\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        error={email.length > 0 && !isEmail(email) ? 'Enter a valid email address' : undefined}\n        helper=\"We'll never share it.\"\n      />\n      <FloatingInput\n        floatingLabel={false}\n        label=\"Bio\"\n        placeholder=\"A line about you\"\n        value={bio}\n        onChangeText={setBio}\n        maxLength={80}\n        counter\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n      ]}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst isEmail = (v: string) => /^\\S+@\\S+\\.\\S{2,}$/.test(v);\n\nexport default function LabelAbove({ screen }: DemoProps) {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [bio, setBio] = useState('');\n  return (\n    <Card title=\"Edit profile\" subtitle=\"This is how others will see you.\" screen={screen}>\n      <FloatingInput floatingLabel={false} label=\"Full name\" placeholder=\"Priya Sharma\" value={name} onChangeText={setName} autoComplete=\"name\" clearable />\n      <FloatingInput\n        floatingLabel={false}\n        label=\"Email\"\n        placeholder=\"you@example.com\"\n        value={email}\n        onChangeText={setEmail}\n        keyboardType=\"email-address\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        error={email.length > 0 && !isEmail(email) ? 'Enter a valid email address' : undefined}\n        helper=\"We'll never share it.\"\n      />\n      <FloatingInput\n        floatingLabel={false}\n        label=\"Bio\"\n        placeholder=\"A line about you\"\n        value={bio}\n        onChangeText={setBio}\n        maxLength={80}\n        counter\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "CustomStyles",
       "title": "Custom Styles",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function CustomStyles() {\n  const { colors, radius } = useKit();\n  const [handle, setHandle] = useState('priya.codes');\n  return (\n    <Card title=\"Custom styles\" subtitle=\"fieldStyle, labelStyle, inputStyle, messageStyle.\">\n      <FloatingInput\n        label=\"Username\"\n        prefix=\"@\"\n        value={handle}\n        onChangeText={setHandle}\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        helper=\"Letters, numbers and dots.\"\n        fieldStyle={{ borderWidth: 2, borderColor: colors.border, borderRadius: radius.lg, backgroundColor: colors.card }}\n        surface={colors.card}\n        labelStyle={{ fontSize: 15, fontWeight: '400', letterSpacing: 0.2 }}\n        inputStyle={{ fontSize: 17, fontWeight: '400', letterSpacing: 0.3 }}\n        prefixStyle={{ color: colors.accent, fontWeight: '400' }}\n        messageStyle={{ fontStyle: 'italic' }}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { readableOn, 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\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n      ]}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function CustomStyles({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [handle, setHandle] = useState('priya.codes');\n  return (\n    <Card title=\"Custom styles\" subtitle=\"fieldStyle, labelStyle, inputStyle, messageStyle.\" screen={screen}>\n      <FloatingInput\n        label=\"Username\"\n        prefix=\"@\"\n        value={handle}\n        onChangeText={setHandle}\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        helper=\"Letters, numbers and dots.\"\n        fieldStyle={{ borderWidth: 2, borderColor: colors.border, borderRadius: radius.lg, backgroundColor: colors.card }}\n        surface={colors.card}\n        labelStyle={{ fontSize: 15, fontWeight: '400', letterSpacing: 0.2 }}\n        inputStyle={{ fontSize: 17, fontWeight: '400', letterSpacing: 0.3 }}\n        prefixStyle={{ color: colors.accent, fontWeight: '400' }}\n        messageStyle={{ fontStyle: 'italic' }}\n      />\n    </Card>\n  );\n}\n"
     }
   ]
 }