newcandies 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newcandies",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "Scaffold Expo Router + Uniwind React Native apps with layered templates.",
   "type": "module",
   "bin": {

package/templates/app-briefs/expo-router/flourish/src/app/_layout.tsx

@@ -13,9 +13,8 @@ export default function RootLayout() {
       <KeyboardProvider>
         <BottomSheetModalProvider>
           <Stack>
-           <Stack>
             <Stack.Screen name="index" />
-           </Stack>
+          </Stack>
           <Toaster />
         </BottomSheetModalProvider>
       </KeyboardProvider>

package/templates/app-briefs/expo-router/flourish-auth/README.md

@@ -1,6 +1,6 @@
-# Flourish Auth - Expo Router Tab Navigation with Authentication
+# Flourish Auth - Expo Router Authentication App Brief
 
-Learn to implement **Protected Routes** and authentication flows with Expo Router.
+A beautiful plant care app built with React Native, Expo, and Expo Router for learning authentication flows.
 
 ## Getting Started
 
@@ -19,135 +19,88 @@ bun start
 ```
 src/
 ├── app/
-│   ├── _layout.tsx           # Root layout (TODO: add Protected guards)
-│   ├── (auth)/               # Auth route group
-│   │   ├── _layout.tsx       # Auth stack navigator
-│   │   ├── welcome.tsx       # TODO: Build landing screen
-│   │   ├── sign-in.tsx       # TODO: Build sign in form
-│   │   └── sign-up.tsx       # TODO: Build sign up form
-│   ├── (tabs)/               # Tab group (from flourish)
-│   │   ├── _layout.tsx       # Tab navigator (complete)
-│   │   ├── index.tsx         # Home tab (complete)
-│   │   ├── explore.tsx       # TODO
-│   │   ├── search.tsx        # TODO
-│   │   └── profile.tsx       # TODO: Add logout button
-│   └── plant/
-│       └── [id].tsx          # TODO
-├── components/ui/            # Complete
+│   ├── _layout.tsx           # Root layout with Stack
+│   ├── (tabs)/               # Tab group
+│   │   ├── _layout.tsx       # Tab navigator config
+│   │   ├── index.tsx         # Home tab
+│   │   ├── explore.tsx       # Explore tab
+│   │   ├── search.tsx        # Search tab
+│   │   └── profile.tsx       # Profile tab
+├── components/ui/
+│   ├── screen.tsx
+│   ├── squircle.tsx
+│   └── text.tsx
 ├── lib/
-│   ├── constants/            # Plant data (complete)
-│   ├── stores/
-│   │   └── README.md         # TODO: Create auth.ts store
-│   └── utils/                # Complete
+│   ├── constants/index.ts    # Plant data
+│   └── utils/index.ts        # Date helpers
 └── types/
+    └── plant.d.ts
 ```
 
-## Your Tasks
+## Your Task
 
-### 1. Create Auth Store (`src/lib/stores/auth.ts`)
+This app brief teaches **Expo Router Authentication Flows**. The base app has tab navigation already set up. Your task is to add authentication.
 
-```typescript
-import { create } from 'zustand';
+### Screens to Build
 
-interface AuthState {
-  isLoggedIn: boolean;
-  login: () => void;
-  logout: () => void;
-}
-
-const useAuth = create<AuthState>((set) => ({
-  isLoggedIn: false,
-  login: () => set({ isLoggedIn: true }),
-  logout: () => set({ isLoggedIn: false }),
-}));
-
-export default useAuth;
-```
-
-### 2. Implement Protected Routes (`src/app/_layout.tsx`)
+1. **`(auth)/welcome.tsx`** - Welcome/landing screen
+   - App branding and logo
+   - "Sign In" and "Sign Up" buttons
+   - Navigate to respective auth screens
 
-```tsx
-import useAuth from "~/lib/stores/auth";
-
-export default function RootLayout() {
-  const { isLoggedIn } = useAuth();
-
-  return (
-    <Stack screenOptions={{ headerShown: false }}>
-      {/* Show auth screens when NOT logged in */}
-      <Stack.Protected guard={!isLoggedIn}>
-        <Stack.Screen name="(auth)" />
-      </Stack.Protected>
-
-      {/* Show app screens when logged in */}
-      <Stack.Protected guard={isLoggedIn}>
-        <Stack.Screen name="(tabs)" />
-        <Stack.Screen name="plant/[id]" />
-      </Stack.Protected>
-    </Stack>
-  );
-}
-```
+2. **`(auth)/sign-in.tsx`** - Sign in form
+   - Email and password inputs
+   - Sign in button
+   - Link to sign up page
+   - Back button to welcome
 
-### 3. Build Auth Screens
+3. **`(auth)/sign-up.tsx`** - Sign up form
+   - Name, email, and password inputs
+   - Sign up button
+   - Link to sign in page
+   - Back button to welcome
 
-**welcome.tsx** - Landing page with:
-- App logo and tagline
-- "Get Started" → sign-up
-- "Sign In" link → sign-in
+4. **`(auth)/_layout.tsx`** - Auth group layout
+   - Stack navigator for auth screens
+   - Configure screen options
 
-**sign-in.tsx** - Login form with:
-- Email & password inputs
-- Sign In button → calls `login()`
-- Link to sign-up
+### Authentication Concepts
 
-**sign-up.tsx** - Registration form with:
-- Name, email & password inputs
-- Create Account button → calls `login()`
-- Link to sign-in
+You'll need to implement:
+- Protected routes (redirect unauthenticated users)
+- Auth state management (using Zustand or Context)
+- Conditional navigation based on auth status
+- Route groups for organization: `(auth)` and `(tabs)`
 
-### 4. Add Logout to Profile
+### Navigation Flow
 
-```tsx
-import useAuth from "~/lib/stores/auth";
-
-export default function Profile() {
-  const { logout } = useAuth();
-  
-  return (
-    // ... profile content ...
-    <Pressable onPress={logout}>
-      <Text>Sign Out</Text>
-    </Pressable>
-  );
-}
 ```
+Unauthenticated:
+  welcome -> sign-in -> (tabs)
+  welcome -> sign-up -> (tabs)
 
-## Key Concepts
+Authenticated:
+  (tabs) directly
+```
 
-### Route Groups
-- `(auth)` - Screens for unauthenticated users
-- `(tabs)` - Main app for authenticated users
+### Protecting Routes
 
-### Stack.Protected
-Conditionally shows screens based on a guard boolean:
+In `_layout.tsx`, check auth state and redirect:
 ```tsx
-<Stack.Protected guard={condition}>
-  <Stack.Screen name="..." />
-</Stack.Protected>
+// Redirect to welcome if not authenticated
+if (!isAuthenticated && !isAuthRoute) {
+  return <Redirect href="/welcome" />;
+}
 ```
 
-### Auth Flow
-1. User opens app → sees welcome (not logged in)
-2. User signs in → `login()` sets `isLoggedIn: true`
-3. Protected Routes automatically show `(tabs)` 
-4. User taps Sign Out → `logout()` → back to `(auth)`
+## Design System
 
-No manual navigation needed - Protected Routes handle it!
+- 🌿 Green nature theme (`#234823` primary)
+- ☀️ Golden accent (`#ffce47`)
+- 🟢 Squircle cards with smooth corners
 
-## Available Resources
+## Available Data
 
-- Plant data in `lib/constants`
-- UI components (Screen, Text, Squircle)
-- Tab navigation already configured
-- Home screen fully implemented
+- `customPlants` - Array of 5 plants with full details
+- `getWeekDays(date)` - Helper for calendar display
+- `Plant` interface - TypeScript type for plants

package/templates/app-briefs/expo-router/flourish-auth/app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "Flourish Auth",
+    "name": "flourish-auth",
     "slug": "flourish-auth",
     "version": "1.0.0",
     "orientation": "portrait",
@@ -39,4 +39,3 @@
     }
   }
 }
-

package/templates/app-briefs/expo-router/flourish-auth/babel.config.js

@@ -5,4 +5,3 @@ module.exports = function (api) {
     plugins: ["react-native-reanimated/plugin"],
   };
 };
-

package/templates/app-briefs/expo-router/flourish-auth/eas.json

@@ -19,4 +19,3 @@
     "production": {}
   }
 }
-

package/templates/app-briefs/expo-router/flourish-auth/global.css

@@ -50,4 +50,3 @@
     }
   }
 }
-

package/templates/app-briefs/expo-router/flourish-auth/metro.config.js

@@ -12,4 +12,3 @@ module.exports = withRozenite(
   }),
   { enabled: process.env.WITH_ROZENITE === "true" }
 );
-

package/templates/app-briefs/expo-router/flourish-auth/package.json

@@ -42,8 +42,7 @@
     "sonner-native": "latest",
     "tailwind-merge": "latest",
     "tailwindcss": "^4.1.16",
-    "uniwind": "^1.0.0",
-    "zustand": "^5.0.9"
+    "uniwind": "^1.0.0"
   },
   "devDependencies": {
     "@rozenite/metro": "^1.0.0-alpha.16",
@@ -52,4 +51,3 @@
     "typescript": "~5.9.2"
   }
 }
-

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/_layout.tsx

@@ -1,29 +1,35 @@
 import IonIcons from "@expo/vector-icons/Ionicons";
 import { Tabs } from "expo-router";
+import React from "react";
 import { useCSSVariable } from "uniwind";
 
-function TabBarIcon(props: {
+type TabBarIconType = {
   name: React.ComponentProps<typeof IonIcons>["name"];
   color: string;
-}) {
-  return <IonIcons size={28} style={{ marginBottom: -4 }} {...props} />;
-}
+};
 
-export default function TabLayout() {
-  const backgroundColor = useCSSVariable("--color-muted") as string;
+const TabBarIcon = (props: TabBarIconType) => {
+  return <IonIcons size={28} {...props} />;
+};
+
+const TabsLayout = () => {
   const primaryColor = useCSSVariable("--color-primary") as string;
-  const tabBarActiveTintColor = useCSSVariable(
+  const tabBarInActiveTintColor = useCSSVariable(
     "--color-muted-foreground"
   ) as string;
 
+  const backgroundColor = useCSSVariable("--color-muted") as string;
+
   return (
     <Tabs
       screenOptions={{
         headerShown: false,
+
         tabBarActiveTintColor: primaryColor,
-        tabBarInactiveTintColor: tabBarActiveTintColor,
+        tabBarInactiveTintColor: tabBarInActiveTintColor,
         tabBarStyle: {
           backgroundColor,
+          paddingTop: 16,
         },
       }}
     >
@@ -31,7 +37,6 @@ export default function TabLayout() {
         name="index"
         options={{
           title: "Home",
-          headerShown: false,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => (
             <TabBarIcon name="partly-sunny" color={color} />
@@ -42,7 +47,6 @@ export default function TabLayout() {
         name="explore"
         options={{
           title: "Explore",
-          headerShown: false,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => <TabBarIcon name="grid" color={color} />,
         }}
@@ -51,7 +55,6 @@ export default function TabLayout() {
         name="search"
         options={{
           title: "Search",
-          headerShown: false,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => <TabBarIcon name="search" color={color} />,
         }}
@@ -60,12 +63,12 @@ export default function TabLayout() {
         name="profile"
         options={{
           title: "Profile",
-          headerShown: false,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => <TabBarIcon name="person" color={color} />,
         }}
       />
     </Tabs>
   );
-}
+};
 
+export default TabsLayout;

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/explore.tsx

@@ -1,24 +1,82 @@
-import { View } from "react-native";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { FlatList, Image, Pressable, ScrollView, View } from "react-native";
+import { twMerge } from "tailwind-merge";
 import { Screen } from "~/components/ui/screen";
+import { Squircle } from "~/components/ui/squircle";
 import Text from "~/components/ui/text";
+import { categories, customPlants } from "~/lib/constants";
 
-export default function Explore() {
-  // TODO: Implement the Explore screen
-  // - Add category filters (Indoor, Outdoor, Low Water, Pet Safe, Beginner)
-  // - Display plants in a vertical list with larger cards
-  // - Navigate to plant detail on press
+type ExploreCardProps = {
+  item: Plant;
+};
+const ExploreCard = ({ item }: ExploreCardProps) => {
+  return (
+    <Pressable className="mx-5">
+      <Squircle
+        cornerSmoothing={1}
+        className="overflow-hidden rounded-3xl bg-primary"
+      >
+        <Image
+          source={{ uri: item.coverImg }}
+          className="w-full h-48"
+          resizeMode="cover"
+        />
+        <View className="p-5">
+          <Text variant="subtitle-secondary">{item.locationType}</Text>
+          <Text variant="caption">{item.name}</Text>
+        </View>
+      </Squircle>
+    </Pressable>
+  );
+};
 
+const ListHeader = () => {
   return (
-    <Screen>
+    <>
       <View className="px-5 pt-4 pb-4">
         <Text variant="display" className="text-primary">
           Explore
         </Text>
-        <Text className="text-muted-foreground mt-2">
-          Build this screen to browse plants by category
-        </Text>
       </View>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerClassName="px-5 gap-2 pb-4"
+      >
+        {categories.map((category) => (
+          <Pressable key={category.id}>
+            <Squircle
+              cornerSmoothing={1}
+              className={twMerge(
+                "flex-row bg-primary items-center gap-2 px-3 py-2 rounded-xl",
+                category.bgColor
+              )}
+            >
+              <Ionicons
+                name={category.icon as any}
+                size={16}
+                color={category.bgColor}
+              />
+              <Text variant="caption-primary">{category.label}</Text>
+            </Squircle>
+          </Pressable>
+        ))}
+      </ScrollView>
+    </>
+  );
+};
+
+const Explore = () => {
+  return (
+    <Screen>
+      <FlatList
+        data={customPlants}
+        renderItem={({ item }) => <ExploreCard item={item} />}
+        contentContainerClassName="pb-8 gap-5 pt-2"
+        ListHeaderComponent={ListHeader}
+      />
     </Screen>
   );
-}
+};
 
+export default Explore;

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/index.tsx

@@ -1,51 +1,71 @@
-import { View, Image, Pressable, FlatList } from "react-native";
+import { format } from "date-fns";
+import { router } from "expo-router";
+import { FlatList, Image, Pressable, View } from "react-native";
 import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
 import { Squircle } from "~/components/ui/squircle";
+import Text from "~/components/ui/text";
 import { customPlants } from "~/lib/constants";
-import { useRouter } from "expo-router";
-import { format } from "date-fns";
 import { getWeekDays } from "~/lib/utils";
 
+type PlantCardProps = {
+  item: Plant;
+  onPress?: () => void;
+};
+
+const PlantCard = ({ item, onPress }: PlantCardProps) => {
+  return (
+    <Pressable onPress={() => router.push(`/`)} className="flex-1">
+      <Squircle
+        className="bg-primary overflow-hidden rounded-3xl p-2"
+        cornerSmoothing={1}
+      >
+        <Squircle className="overflow-hidden rounded-2xl w-full aspect-square">
+          <Image
+            source={{ uri: item.coverImg }}
+            className="w-full h-full aspect-square"
+          />
+        </Squircle>
+        <View className="px-1 py-2">
+          <Text variant="body-secondary">{item.name}</Text>
+        </View>
+      </Squircle>
+    </Pressable>
+  );
+};
+
 const now = new Date();
 const weekDays = getWeekDays(now);
 
 const HomeHeader = () => {
   return (
-    <View className="px-5 pt-4 pb-4">
+    <View className="px-5 py-4">
       <View className="flex-row justify-between items-start mb-5">
         <View className="flex-row items-center gap-2">
-          <Text variant="display" className="text-4xl">{format(now, "EEE")}</Text>
-          <View className="w-3 h-3 rounded-full bg-accent" />
+          <Text variant="display">{format(now, "EEE")}</Text>
+          <View className="w-4 h-4 rounded-full bg-accent"></View>
         </View>
-
         <View className="items-end">
           <Text variant="subtitle">{format(now, "MMMM d")}</Text>
-          <Text className="text-lg text-foreground/70">{format(now, "yyyy")}</Text>
+          <Text>{format(now, "yyyy")}</Text>
         </View>
       </View>
-
       <View className="flex-row justify-between">
         {weekDays.map((day, index) => (
           <View key={index} className="items-center">
             {day.isToday ? (
               <Squircle
-                className="bg-primary px-2 py-2 items-center rounded-xl"
+                className="bg-primary p-2 items-center rounded-xl"
                 cornerSmoothing={1}
               >
-                <Text className="text-lg font-bold text-primary-foreground">
-                  {day.date}
-                </Text>
-                <Text className="text-xs font-medium text-secondary mt-1">
-                  {day.day}
-                </Text>
+                <Text variant="subtitle-secondary">{day.date}</Text>
+                <Text variant="caption">{day.day}</Text>
               </Squircle>
             ) : (
-              <View className="px-2 py-2 items-center">
-                <Text className="text-lg font-medium text-primary/40">
+              <View className="p-2 items-center">
+                <Text variant="subtitle" className="text-primary/40">
                   {day.date}
                 </Text>
-                <Text className="text-xs font-medium text-primary/30 mt-1">
+                <Text variant="caption" className="text-primary/30">
                   {day.day}
                 </Text>
               </View>
@@ -57,46 +77,21 @@ const HomeHeader = () => {
   );
 };
 
-const PlantCard = ({ item, onPress }: { item: Plant; onPress?: () => void }) => (
-  <Pressable onPress={onPress} className="flex-1">
-    <Squircle className="bg-primary overflow-hidden rounded-3xl p-2" cornerSmoothing={1}>
-      <Squircle className="overflow-hidden rounded-2xl w-full aspect-square" cornerSmoothing={1}>
-        <Image source={{ uri: item.coverImg }} className="w-full h-full" resizeMode="cover" />
-      </Squircle>
-      <View className="px-1 py-2">
-        <Text variant="body-secondary" className="text-primary-foreground">{item.name}</Text>
-      </View>
-    </Squircle>
-  </Pressable>
-);
-
-const ListHeader = () => (
-  <>
-    <HomeHeader />
-    <View className="px-5 pb-4">
-      <Text variant="subtitle" className="text-primary">Our Plants</Text>
-    </View>
-  </>
-);
-
-export default function Index() {
-  const router = useRouter();
-
+const Home = () => {
   return (
     <Screen>
       <FlatList
         data={customPlants}
+        renderItem={({ item }) => <PlantCard item={item} />}
         numColumns={2}
+        ListHeaderComponent={HomeHeader}
         keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <PlantCard item={item} onPress={() => router.push(`/plant/${item.id}`)} />
-        )}
-        ListHeaderComponent={ListHeader}
-        columnWrapperClassName="gap-4 px-5"
         contentContainerClassName="gap-4 pb-8"
+        columnWrapperClassName="gap-4 px-5"
         showsVerticalScrollIndicator={false}
       />
     </Screen>
   );
-}
+};
 
+export default Home;

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/profile.tsx

@@ -1,27 +1,109 @@
-import { View } from "react-native";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import { Image, Pressable, ScrollView, View } from "react-native";
+import { useCSSVariable } from "uniwind";
 import { Screen } from "~/components/ui/screen";
+import { Squircle } from "~/components/ui/squircle";
 import Text from "~/components/ui/text";
+import { userData } from "~/lib/constants";
 
-export default function Profile() {
-  // TODO: Build the profile screen
-  // - Import useAuth from ~/lib/stores/auth
-  // - Get logout function from auth store
-  // - Display user avatar and name
-  // - Show plant stats (plants owned, waterings)
-  // - Add "Currently..." status card
-  // - Add Edit Profile button
-  // - Add Sign Out button that calls logout()
+const Profile = () => {
+  const [primaryColor, secondaryColor] = useCSSVariable([
+    "--color-primary",
+    "--color-secondary",
+  ]);
 
   return (
     <Screen>
-      <View className="px-5 pt-4">
-        <Text variant="display" className="text-primary">
-          Profile
-        </Text>
-        <Text className="text-muted-foreground mt-2">
-          Build this screen with user info and Sign Out button
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="pb-8"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="items-center mt-8 px-8">
+          <View className="relative w-36">
+            <Squircle className="absolute -bottom-1.5 -left-1.5 w-full aspect-3/4 bg-primary rounded-3xl -rotate-3" />
+            <Squircle
+              className="w-full aspect-3/4
+          overflow-hidden rounded-3xl z-10
+            "
+            >
+              <Image
+                source={{ uri: userData.avatar }}
+                className="w-full h-full"
+                resizeMode="cover"
+              />
+            </Squircle>
+          </View>
+        </View>
+        <Text variant="title" className="text-primary text-center my-4">
+          {userData.username}
         </Text>
+
+        <View className="px-6 mt-8 pb-4">
+          <View className="relative">
+            <View className="absolute -top-3 left-8 flex-row items-end gap-1 z-10">
+              <View className="size-4 rounded-full bg-primary" />
+              <View className="size-5 rounded-full bg-primary" />
+            </View>
+            <Squircle
+              className="absolute top-1 left-0 right-0 -bottom-2 bg-accent
+            rounded-3xl"
+            />
+
+            <Squircle className="bg-primary p-5 rounded-3xl z-10">
+              <View className="flex-row items-center gap-4">
+                <View className="w-12 h-12 rounded-full bg-secondary/20 items-center justify-center">
+                  <Ionicons
+                    name="chatbubble-outline"
+                    size={26}
+                    color={"white"}
+                  />
+                </View>
+                <View className="flex-1">
+                  <Text className="text-secondary/80">
+                    {userData.plantLoveLabel}
+                  </Text>
+                  <Text className="text-primary-foreground">
+                    {userData.plantLoveValue}
+                  </Text>
+                </View>
+              </View>
+            </Squircle>
+          </View>
+        </View>
+
+        <View className="px-6 mt-6 gap-5">
+          <View className="flex-row items-center gap-4">
+            <MaterialCommunityIcons
+              name="flower-tulip"
+              size={28}
+              color={primaryColor as string}
+            />
+            <Text variant="title" className="text-primary">
+              {userData.plantsOwned} Plants
+            </Text>
+          </View>
+          <View className="flex-row items-center gap-4">
+            <MaterialCommunityIcons
+              name="water"
+              size={28}
+              color={primaryColor as string}
+            />
+            <Text variant="title" className="text-primary">
+              {userData.plantsWatered} Watered
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+
+      <View className="px-6 pb-6 pt-4">
+        <Pressable className="flex-row items-center justify-center gap-3 bg-primary py-4 px-6 rounded-full">
+          <Text variant="button">Edit Profile</Text>
+        </Pressable>
       </View>
     </Screen>
   );
-}
+};
+
+export default Profile;

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/search.tsx

@@ -1,24 +1,25 @@
-import { View } from "react-native";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { TextInput, View } from "react-native";
+import { useCSSVariable } from "uniwind";
 import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
 
-export default function Search() {
-  // TODO: Implement the Search screen
-  // - Add a search input with icon
-  // - Filter plants by name as user types
-  // - Display matching results
+const Search = () => {
+  const [mutedColor] = useCSSVariable(["--color-muted-foreground"]);
 
   return (
     <Screen>
       <View className="px-5 pt-4">
-        <Text variant="display" className="text-primary">
-          Search
-        </Text>
-        <Text className="text-muted-foreground mt-2">
-          Build this screen to search for plants
-        </Text>
+        <View className="flex-row items-center bg-muted/50 rounded-xl px-4 py-3 gap-3">
+          <Ionicons name="search" size={20} />
+          <TextInput
+            placeholder="Search plants..."
+            placeholderTextColor={mutedColor as string}
+            className="flex-1 text-base text-foreground"
+          />
+        </View>
       </View>
     </Screen>
   );
-}
+};
 
+export default Search;

package/templates/app-briefs/expo-router/flourish-auth/src/app/_layout.tsx

@@ -8,31 +8,16 @@ import "../../global.css";
 import { StyleSheet } from "react-native";
 
 export default function RootLayout() {
-  // TODO: Import useAuth from ~/lib/stores/auth
-  // TODO: Get isLoggedIn from the auth store
-
   return (
     <GestureHandlerRootView style={styles.container}>
       <KeyboardProvider>
         <BottomSheetModalProvider>
-          {/* 
-            TODO: Implement Protected Routes
-            
-            Use Stack.Protected to show different screens based on auth state:
-            
-            <Stack.Protected guard={!isLoggedIn}>
-              <Stack.Screen name="(auth)" />
-            </Stack.Protected>
-
-            <Stack.Protected guard={isLoggedIn}>
-              <Stack.Screen name="(tabs)" />
-              <Stack.Screen name="plant/[id]" />
-            </Stack.Protected>
-          */}
-          <Stack screenOptions={{ headerShown: false }}>
-            <Stack.Screen name="(auth)" />
+          <Stack
+            screenOptions={{
+              headerShown: false,
+            }}
+          >
             <Stack.Screen name="(tabs)" />
-            <Stack.Screen name="plant/[id]" />
           </Stack>
           <Toaster />
         </BottomSheetModalProvider>

package/templates/app-briefs/expo-router/flourish-auth/src/components/ui/screen.tsx

@@ -17,4 +17,3 @@ export const Screen = ({ children, className }: ScreenProps) => {
     </SafeAreaView>
   );
 };
-

package/templates/app-briefs/expo-router/flourish-auth/src/components/ui/squircle.tsx

@@ -2,4 +2,3 @@ import { withUniwind } from "uniwind";
 import SquircleView from "react-native-fast-squircle";
 
 export const Squircle = withUniwind(SquircleView);
-

package/templates/app-briefs/expo-router/flourish-auth/src/components/ui/text.tsx

@@ -52,4 +52,3 @@ const Text = ({
 };
 
 export default Text;
-

package/templates/app-briefs/expo-router/flourish-auth/src/lib/constants/index.ts

@@ -146,3 +146,50 @@ export const customPlants: Plant[] = [
   },
 ];
 
+export const categories = [
+  {
+    id: "indoor",
+    label: "Indoor",
+    icon: "home-outline",
+    bgColor: "bg-primary/15",
+    iconColor: "#234823",
+  },
+  {
+    id: "outdoor",
+    label: "Outdoor",
+    icon: "sunny-outline",
+    bgColor: "bg-accent/40",
+    iconColor: "#234823",
+  },
+  {
+    id: "low-water",
+    label: "Low Water",
+    icon: "water-outline",
+    bgColor: "bg-muted",
+    iconColor: "#234823",
+  },
+  {
+    id: "pet-safe",
+    label: "Pet Safe",
+    icon: "paw-outline",
+    bgColor: "bg-secondary",
+    iconColor: "#234823",
+  },
+  {
+    id: "beginner",
+    label: "Beginner",
+    icon: "leaf-outline",
+    bgColor: "bg-primary/10",
+    iconColor: "#234823",
+  },
+];
+
+export const userData = {
+  username: "Olive",
+  level: 5,
+  avatar: customPlants[3].coverImg,
+  plantLoveLabel: "Currently",
+  plantLoveValue: "Talking to my plants",
+  plantsOwned: 12,
+  plantsWatered: 47,
+};

package/templates/app-briefs/expo-router/flourish-auth/src/lib/utils/index.ts

@@ -5,4 +5,3 @@ export const getWeekDays = (from = new Date()) =>
     const date = addDays(from, i);
     return { day: format(date, "EEE").toUpperCase(), date: date.getDate(), isToday: isToday(date) };
   });
-

package/templates/app-briefs/expo-router/flourish-auth/src/types/plant.d.ts

@@ -35,4 +35,3 @@ interface CareSchedule {
   seasonalTiming: string;
   instructions: string;
 }
-

package/templates/app-briefs/expo-router/flourish-auth/tsconfig.json

@@ -14,4 +14,3 @@
     "./uniwind-types.d.ts"
   ]
 }
-

package/templates/app-briefs/expo-router/flourish-auth/src/app/(auth)/_layout.tsx

@@ -1,14 +0,0 @@
-import { Stack } from "expo-router";
-
-export default function AuthLayout() {
-  // This is the auth stack navigator
-  // It wraps the welcome, sign-in, and sign-up screens
-  
-  return (
-    <Stack screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="welcome" />
-      <Stack.Screen name="sign-in" />
-      <Stack.Screen name="sign-up" />
-    </Stack>
-  );
-}

package/templates/app-briefs/expo-router/flourish-auth/src/app/(auth)/sign-in.tsx

@@ -1,25 +0,0 @@
-import { View } from "react-native";
-import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
-
-export default function SignIn() {
-  // TODO: Build the sign-in screen
-  // - Add back button to go back
-  // - Add email input field
-  // - Add password input field  
-  // - Add "Sign In" button that calls login() from auth store
-  // - Add link to sign-up screen
-
-  return (
-    <Screen>
-      <View className="flex-1 px-6 justify-center">
-        <Text variant="display" className="text-primary">
-          Sign In
-        </Text>
-        <Text className="text-muted-foreground mt-2">
-          Build this screen with email/password form
-        </Text>
-      </View>
-    </Screen>
-  );
-}

package/templates/app-briefs/expo-router/flourish-auth/src/app/(auth)/sign-up.tsx

@@ -1,26 +0,0 @@
-import { View } from "react-native";
-import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
-
-export default function SignUp() {
-  // TODO: Build the sign-up screen
-  // - Add back button to go back
-  // - Add name input field
-  // - Add email input field
-  // - Add password input field
-  // - Add "Create Account" button that calls login() from auth store
-  // - Add link to sign-in screen
-
-  return (
-    <Screen>
-      <View className="flex-1 px-6 justify-center">
-        <Text variant="display" className="text-primary">
-          Sign Up
-        </Text>
-        <Text className="text-muted-foreground mt-2">
-          Build this screen with registration form
-        </Text>
-      </View>
-    </Screen>
-  );
-}

package/templates/app-briefs/expo-router/flourish-auth/src/app/(auth)/welcome.tsx

@@ -1,22 +0,0 @@
-import { View } from "react-native";
-import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
-
-export default function Welcome() {
-  // TODO: Build the welcome/landing screen
-  // - Display app logo/icon (use MaterialCommunityIcons "flower")
-  // - Show app name "Flourish" and tagline
-  // - Add "Get Started" button → navigates to sign-up
-  // - Add "Already have an account? Sign In" link → navigates to sign-in
-
-  return (
-    <Screen className="justify-center items-center">
-      <Text variant="display" className="text-primary">
-        Welcome
-      </Text>
-      <Text className="text-muted-foreground mt-2">
-        Build this screen with login/signup buttons
-      </Text>
-    </Screen>
-  );
-}

package/templates/app-briefs/expo-router/flourish-auth/src/app/plant/[id].tsx

@@ -1,48 +0,0 @@
-import { View } from "react-native";
-import { Stack, useLocalSearchParams } from "expo-router";
-import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
-import { customPlants } from "~/lib/constants";
-
-export default function PlantDetails() {
-  const { id } = useLocalSearchParams<{ id: string }>();
-
-  const plant = customPlants.find((p) => p.id === id);
-
-  if (!plant) {
-    return (
-      <>
-        <Stack.Screen options={{ headerShown: false }} />
-        <Screen className="flex-1 items-center justify-center bg-background">
-          <Text>Plant not found</Text>
-        </Screen>
-      </>
-    );
-  }
-
-  // TODO: Implement the Plant Details screen
-  // - Add back button navigation
-  // - Display plant image in a stacked card design
-  // - Show plant name and scientific name
-  // - Add quick info pills (water needs, light needs)
-  // - Display "About this plant" card with description
-  // - Show care details (water frequency, growth rate, maintenance)
-
-  return (
-    <>
-      <Stack.Screen options={{ headerShown: false }} />
-      <Screen className="flex-1 bg-background">
-        <View className="px-5 pt-4">
-          <Text variant="display">{plant.name}</Text>
-          <Text className="text-muted-foreground mt-1">
-            {plant.scientificName}
-          </Text>
-          <Text className="text-muted-foreground mt-4">
-            Build this screen to show plant details
-          </Text>
-        </View>
-      </Screen>
-    </>
-  );
-}
-

package/templates/app-briefs/expo-router/flourish-auth/src/lib/stores/README.md

@@ -1,31 +0,0 @@
-# Stores
-
-This folder is where you'll create your Zustand stores for authentication.
-
-## Your Task
-
-Create an `auth.ts` store here to manage authentication state.
-
-The store should have:
-- `isLoggedIn` - boolean state
-- `login()` - function to set logged in
-- `logout()` - function to set logged out
-
-## Example Structure
-
-```typescript
-import { create } from 'zustand';
-
-interface AuthState {
-  isLoggedIn: boolean;
-  login: () => void;
-  logout: () => void;
-}
-
-const useAuth = create<AuthState>((set) => ({
-  // Your implementation here
-}));
-
-export default useAuth;
-```
-