@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/drawer.json

@@ -0,0 +1,199 @@
+{
+  "name": "drawer",
+  "category": "Overlays",
+  "aliases": [],
+  "exportName": "Drawer",
+  "files": [
+    "src/components/ui/drawer.tsx"
+  ],
+  "summary": "A side drawer that follows your finger, or pushes the screen aside as a card.",
+  "props": [
+    [
+      "content",
+      "ReactNode",
+      "—",
+      "Panel content (usually DrawerItems); scrolls between header and footer."
+    ],
+    [
+      "header / footer",
+      "ReactNode",
+      "—",
+      "Pinned above / below the content (DrawerProfile, DrawerHeader, DrawerFooter…)."
+    ],
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "The screen the drawer belongs to. Enables edge swipe and push; without children the drawer opens in a Modal."
+    ],
+    [
+      "open / defaultOpen",
+      "boolean",
+      "false",
+      "Controlled / uncontrolled visibility."
+    ],
+    [
+      "onOpenChange",
+      "(open: boolean) => void",
+      "—",
+      "Called on drags, scrim tap, Android back and Escape."
+    ],
+    [
+      "side",
+      "\"left\" | \"right\"",
+      "\"left\"",
+      "Edge the drawer slides from."
+    ],
+    [
+      "width",
+      "number | `${number}%`",
+      "\"80%\"",
+      "Panel width in points or percent of the container (max 360)."
+    ],
+    [
+      "variant",
+      "\"overlay\" | \"push\"",
+      "\"overlay\"",
+      "Slide over a dimmed screen, or shrink the screen to a rounded 0.92 card and slide it aside (inline only)."
+    ],
+    [
+      "edgeSwipe",
+      "boolean",
+      "true",
+      "Swipe in from the edge to open (needs children). Taps in the edge zone still reach the screen."
+    ],
+    [
+      "edgeWidth",
+      "number",
+      "24",
+      "Width of the edge-swipe zone."
+    ],
+    [
+      "dismissible",
+      "boolean",
+      "true",
+      "Close on scrim tap and drag."
+    ],
+    [
+      "scaleContent",
+      "boolean",
+      "true",
+      "Overlay variant: scale the screen behind to 0.96 with rounded corners while open (inline)."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light impact on open; DrawerItems tick on press."
+    ],
+    [
+      "topInset / bottomInset",
+      "number",
+      "platform estimate",
+      "Space above the header / below the footer — pass safe-area insets for exact values."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "\"Navigation drawer\"",
+      "Panel label."
+    ],
+    [
+      "style / panelStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root container / panel style."
+    ],
+    [
+      "DrawerProfile",
+      "{ name, email?, src?, status?, layout?: 'row' | 'stacked', onPress?, accessory? }",
+      "—",
+      "Account block: soft solid initials (or image) avatar with presence dot, name and email; pressable as an account / workspace switcher."
+    ],
+    [
+      "DrawerHeader",
+      "{ title?, subtitle?, leading?, showClose?, onClose? }",
+      "—",
+      "Title chrome for the header slot."
+    ],
+    [
+      "DrawerItem",
+      "{ label, icon?, badge?, badgeTone?, active?, tone?, onPress?, closeOnPress?, accent?, haptics?, trailing?, disabled? }",
+      "—",
+      "Nav row with a spring-in accent-tinted active pill, popping icon and count badge (neutral plain count / accent tinted pill / danger solid pill); tone=\"danger\" for Log out."
+    ],
+    [
+      "DrawerSection",
+      "{ title, trailing?, divider? }",
+      "—",
+      "Quiet heading between groups with a hairline divider above (divider={false} for the first group) and an optional trailing node."
+    ],
+    [
+      "DrawerFooter",
+      "{ label, detail?, icon?, progress?, onPress?, trailing? }",
+      "—",
+      "Compact footer row, e.g. a storage meter."
+    ],
+    [
+      "DrawerIcon",
+      "{ name, size?, color?, strokeWidth? }",
+      "—",
+      "The drawer's line icons, for menu buttons and headers."
+    ],
+    [
+      "useDrawer()",
+      "() => { open, setOpen, toggle, close }",
+      "—",
+      "Control the surrounding Drawer from inside it."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Swipe in from the screen edge to open and drag the panel or scrim to close. Release velocity decides where it settles, and it rubber-bands past fully open."
+    ],
+    [
+      "Motion",
+      "The panel springs in over a fading scrim; variant 'push' shrinks the screen into a rounded card and slides it aside. Active items spring in an accent pill and badges pop."
+    ],
+    [
+      "Reduced motion",
+      "Opening and closing use a short timing instead of a spring, the push variant no longer scales the screen, and item and badge pops are skipped."
+    ],
+    [
+      "Haptics",
+      "A light impact when the drawer opens and a selection tick when a DrawerItem is pressed."
+    ],
+    [
+      "Screen readers",
+      "The open panel is marked modal and hides itself when closed. DrawerItems are menu items with selected and disabled states, and the badge is read with the label."
+    ],
+    [
+      "Keyboard",
+      "Escape closes it on web; Android back closes it when it is rendered inline."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Drawer, DrawerItem } from '@/components/ui/drawer';\n\nconst [open, setOpen] = useState(false);\n<Drawer open={open} onOpenChange={setOpen} content={<DrawerItem label=\"Inbox\" icon=\"inbox\" active />}>\n  <InboxScreen onMenuPress={() => setOpen(true)} />\n</Drawer>",
+  "examples": [
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/fab.json

@@ -0,0 +1,144 @@
+{
+  "name": "fab",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "Fab",
+  "files": [
+    "src/components/ui/fab.tsx"
+  ],
+  "summary": "A floating action button that fans out a staggered speed dial as its plus turns to ×.",
+  "props": [
+    [
+      "actions",
+      "{ label, icon, onPress?, color? }[]",
+      "—",
+      "Speed-dial items, bottom → top (arc: first → last). icon can be a node or ({ color }) => node; with color the icon colour contrasts automatically. Omit for a plain FAB."
+    ],
+    [
+      "onPress",
+      "() => void",
+      "—",
+      "Called when there are no actions."
+    ],
+    [
+      "icon",
+      "ReactNode | ({ color }) => ReactNode",
+      "plus",
+      "Main icon (rotates 135° when open). A function is re-coloured as the button turns neutral when open."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Makes it an extended FAB (icon + label)."
+    ],
+    [
+      "extended",
+      "boolean",
+      "true",
+      "Set false (e.g. while scrolling) to collapse the label into a circle."
+    ],
+    [
+      "open / onOpenChange",
+      "boolean",
+      "—",
+      "Controlled speed dial (or use defaultOpen)."
+    ],
+    [
+      "defaultOpen",
+      "boolean",
+      "false",
+      "Speed dial starts open when uncontrolled."
+    ],
+    [
+      "layout",
+      "\"list\" | \"arc\"",
+      "\"list\"",
+      "Labelled column, or mini buttons fanned out on a quarter circle (half circle for bottom-center). Arc hides the chips; labels stay as accessibility labels."
+    ],
+    [
+      "position",
+      "\"bottom-right\" | \"bottom-left\" | \"bottom-center\"",
+      "\"bottom-right\"",
+      "Corner of the parent it sits in."
+    ],
+    [
+      "variant",
+      "\"accent\" | \"gradient\" | \"tonal\" | \"primary\" | \"secondary\"",
+      "\"accent\"",
+      "accent: solid fill + same-colour glow; gradient: opt-in two-tone; tonal: soft tinted surface; primary / secondary: theme surfaces."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Main button 40, 56 or 64pt (speed-dial buttons 36 / 42 / 46pt)."
+    ],
+    [
+      "color",
+      "string",
+      "theme accent",
+      "Tint for accent, gradient and tonal; glow, foreground (and the opt-in gradient stops) are derived from it."
+    ],
+    [
+      "backdrop",
+      "boolean",
+      "true",
+      "Dim the parent while open; tap to close."
+    ],
+    [
+      "pulse",
+      "boolean",
+      "false",
+      "Looping attention ring (skipped with Reduce Motion), e.g. for empty-state calls to action."
+    ],
+    [
+      "offset",
+      "number",
+      "20",
+      "Distance from the parent's edges."
+    ],
+    [
+      "rotate",
+      "boolean",
+      "true",
+      "Rotate the icon into × when open."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Tap on toggle."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the absolutely positioned stack holding the main button and list actions."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tapping the button opens the speed dial over an optional dimmed backdrop; tapping the backdrop closes it. Without actions it just calls onPress."
+    ],
+    [
+      "Motion",
+      "Actions spring out one after another as a labelled list or an arc. An extended FAB springs between a pill and a circle, and pulse loops a ring around it."
+    ],
+    [
+      "Reduced motion",
+      "The pulse ring stays off when reduce motion is on."
+    ],
+    [
+      "Haptics",
+      "A light impact when the button opens or closes the dial, or fires onPress."
+    ],
+    [
+      "Screen readers",
+      "The main button and each action are buttons; the main button reads \"Open actions\" / \"Close actions\" with an expanded state when it has a dial."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/flip-card.json

@@ -0,0 +1,127 @@
+{
+  "name": "flip-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "FlipCard",
+  "files": [
+    "src/components/ui/flip-card.tsx"
+  ],
+  "summary": "A two-sided card that turns over in 3D, lifting toward you half-way through.",
+  "props": [
+    [
+      "front",
+      "ReactNode",
+      "—",
+      "First face. Sets the card's size."
+    ],
+    [
+      "back",
+      "ReactNode",
+      "—",
+      "Second face, filling the same box."
+    ],
+    [
+      "flipped",
+      "boolean",
+      "—",
+      "Controlled side — true shows the back."
+    ],
+    [
+      "defaultFlipped",
+      "boolean",
+      "false",
+      "Uncontrolled initial side."
+    ],
+    [
+      "onFlip",
+      "(flipped: boolean) => void",
+      "—",
+      "Fires when tapped."
+    ],
+    [
+      "direction",
+      "\"horizontal\" | \"vertical\"",
+      "\"horizontal\"",
+      "Turn around the vertical or the horizontal axis."
+    ],
+    [
+      "trigger",
+      "\"press\" | \"none\"",
+      "\"press\"",
+      "Flip on tap, or only through `flipped`."
+    ],
+    [
+      "perspective",
+      "number",
+      "1000",
+      "Depth of the effect — smaller is more dramatic."
+    ],
+    [
+      "radius",
+      "number",
+      "20",
+      "Corner radius of both faces."
+    ],
+    [
+      "shadow",
+      "boolean",
+      "true",
+      "Soft shadow that narrows as the card turns edge-on."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "—",
+      "Label for screen readers."
+    ],
+    [
+      "labels",
+      "{ toBack?: string; toFront?: string }",
+      "English hints",
+      "Screen-reader hints for each side."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root (width, margins)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap to flip. With trigger 'none' it only turns when you change flipped from outside."
+    ],
+    [
+      "Motion",
+      "A gentle spring turns the card around its vertical or horizontal axis while the shadow beneath narrows as it goes edge-on. Faces swap exactly at 90° so Android never flickers."
+    ],
+    [
+      "Screen readers",
+      "The card is a button whose hint says which side is showing, with an expanded state when flipped. The hidden face is hidden from screen readers."
+    ]
+  ],
+  "usage": "import { FlipCard } from '@/components/ui/flip-card';\n\n<FlipCard\n  accessibilityLabel=\"Boarding pass\"\n  front={<PassFront flight=\"LH 402\" />}\n  back={<PassBarcode code=\"ZK7Q2P\" />}\n/>",
+  "examples": [
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}