expo-bbase 1.1.1 → 1.3.0

package/dist/index.js

@@ -30,8 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  addModule: () => addModule,
   createProject: () => createProject,
-  run: () => run
+  run: () => run,
+  upgradeProject: () => upgradeProject
 });
 module.exports = __toCommonJS(src_exports);
 var import_chalk = __toESM(require("chalk"));
@@ -47,6 +49,16 @@ function registerCreateCommand(program) {
     await createProject(projectName);
   });
 }
+function registerUpgradeCommand(program) {
+  program.command("upgrade").description("Upgrade an existing expo-bbase project to the latest module versions").option("--dir <path>", "Project directory (default: current directory)", process.cwd()).action(async (options) => {
+    await upgradeProject(options.dir);
+  });
+}
+function registerAddCommand(program) {
+  program.command("add [modules...]").description("Add one or more modules to an existing expo-bbase project").option("--dir <path>", "Project directory (default: current directory)", process.cwd()).action(async (moduleIds, options) => {
+    await addModule(moduleIds, options.dir);
+  });
+}
 
 // src/utils/lines.ts
 function lines(...args) {
@@ -2508,267 +2520,594 @@ var flashlist_default = flashlistModule;
 var uiReusablesModule = {
   id: "ui-reusables",
   name: "reactnative.reusables UI",
-  description: "\u9884\u7F6E UI \u7EC4\u4EF6",
+  description: "\u9884\u7F6E UI \u7EC4\u4EF6 (Button, AlertDialog, Card, Input, Label, Text, Separator)",
   defaultChecked: false,
   dependencies: {
-    "reactnative.reusables": "^0.1.0",
-    "react-native-svg": "^15.8.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
     "@rn-primitives/slot": "^1.1.0",
-    "@rn-primitives/types": "^1.1.0"
+    "@rn-primitives/types": "^1.1.0",
+    "@rn-primitives/label": "^1.1.0",
+    "@rn-primitives/separator": "^1.1.0",
+    "@rn-primitives/alert-dialog": "^1.1.0",
+    "react-native-svg": "^15.8.0"
   },
   devDependencies: {},
   files: [
+    // ─── lib/utils.ts ────────────────────────────────────────────────────
     {
-      path: "src/components/ui/button.tsx",
+      path: "src/lib/utils.ts",
       content: lines(
-        'import React from "react";',
-        'import { Text, Pressable, type PressableProps, type StyleProp, type ViewStyle, type TextStyle } from "react-native";',
-        'import { Slot } from "@rn-primitives/slot";',
-        "",
-        'type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";',
-        'type ButtonSize = "default" | "sm" | "lg" | "icon";',
+        'import { type ClassValue, clsx } from "clsx";',
+        'import { twMerge } from "tailwind-merge";',
         "",
-        "interface ButtonProps extends PressableProps {",
-        "  variant?: ButtonVariant;",
-        "  size?: ButtonSize;",
-        "  asChild?: boolean;",
-        "  style?: StyleProp<ViewStyle>;",
-        "  textStyle?: StyleProp<TextStyle>;",
-        "  children: React.ReactNode;",
+        "export function cn(...inputs: ClassValue[]) {",
+        "  return twMerge(clsx(inputs));",
         "}",
+        ""
+      )
+    },
+    // ─── components/ui/text.tsx ──────────────────────────────────────────
+    {
+      path: "src/components/ui/text.tsx",
+      content: lines(
+        'import { cn } from "@/src/lib/utils";',
+        'import { Slot } from "@rn-primitives/slot";',
+        'import { cva, type VariantProps } from "class-variance-authority";',
+        'import * as React from "react";',
+        'import { Platform, Text as RNText, type Role } from "react-native";',
+        "",
+        "const textVariants = cva(",
+        "  cn(",
+        '    "text-foreground text-base",',
+        "    Platform.select({",
+        '      web: "select-text",',
+        "    })",
+        "  ),",
+        "  {",
+        "    variants: {",
+        "      variant: {",
+        '        default: "",',
+        "        h1: cn(",
+        '          "text-center text-4xl font-extrabold tracking-tight",',
+        '          Platform.select({ web: "scroll-m-20 text-balance" })',
+        "        ),",
+        "        h2: cn(",
+        '          "border-border border-b pb-2 text-3xl font-semibold tracking-tight",',
+        '          Platform.select({ web: "scroll-m-20 first:mt-0" })',
+        "        ),",
+        "        h3: cn(",
+        '          "text-2xl font-semibold tracking-tight",',
+        '          Platform.select({ web: "scroll-m-20" })',
+        "        ),",
+        "        h4: cn(",
+        '          "text-xl font-semibold tracking-tight",',
+        '          Platform.select({ web: "scroll-m-20" })',
+        "        ),",
+        '        p: "mt-3 leading-7 sm:mt-6",',
+        '        blockquote: "mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6",',
+        "        code: cn(",
+        '          "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"',
+        "        ),",
+        '        lead: "text-muted-foreground text-xl",',
+        '        large: "text-lg font-semibold",',
+        '        small: "text-sm font-medium leading-none",',
+        '        muted: "text-muted-foreground text-sm",',
+        "      },",
+        "    },",
+        "    defaultVariants: {",
+        '      variant: "default",',
+        "    },",
+        "  }",
+        ");",
         "",
-        "const variantStyles: Record<ButtonVariant, ViewStyle> = {",
-        '  default: { backgroundColor: "#0f172a" },',
-        '  destructive: { backgroundColor: "#ef4444" },',
-        '  outline: { backgroundColor: "transparent", borderWidth: 1, borderColor: "#d4d4d8" },',
-        '  secondary: { backgroundColor: "#f4f4f5" },',
-        '  ghost: { backgroundColor: "transparent" },',
-        '  link: { backgroundColor: "transparent" },',
-        "};",
+        "type TextVariantProps = VariantProps<typeof textVariants>;",
         "",
-        "const variantTextStyles: Record<ButtonVariant, TextStyle> = {",
-        '  default: { color: "#fafafa" },',
-        '  destructive: { color: "#fafafa" },',
-        '  outline: { color: "#18181b" },',
-        '  secondary: { color: "#18181b" },',
-        '  ghost: { color: "#18181b" },',
-        '  link: { color: "#2563eb", textDecorationLine: "underline" },',
-        "};",
+        'type TextVariant = NonNullable<TextVariantProps["variant"]>;',
         "",
-        "const sizeStyles: Record<ButtonSize, ViewStyle> = {",
-        "  default: { height: 44, paddingHorizontal: 16 },",
-        "  sm: { height: 36, paddingHorizontal: 12 },",
-        "  lg: { height: 52, paddingHorizontal: 24 },",
-        "  icon: { height: 44, width: 44 },",
+        "const ROLE: Partial<Record<TextVariant, Role>> = {",
+        '  h1: "heading",',
+        '  h2: "heading",',
+        '  h3: "heading",',
+        '  h4: "heading",',
+        '  blockquote: Platform.select({ web: "blockquote" as Role }),',
+        '  code: Platform.select({ web: "code" as Role }),',
         "};",
         "",
-        "const sizeTextStyles: Record<ButtonSize, TextStyle> = {",
-        "  default: { fontSize: 16 },",
-        "  sm: { fontSize: 14 },",
-        "  lg: { fontSize: 18 },",
-        "  icon: { fontSize: 16 },",
+        "const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {",
+        '  h1: "1",',
+        '  h2: "2",',
+        '  h3: "3",',
+        '  h4: "4",',
         "};",
         "",
-        "export function Button({",
-        '  variant = "default",',
-        '  size = "default",',
+        "const TextClassContext = React.createContext<string | undefined>(undefined);",
+        "",
+        "function Text({",
+        "  className,",
         "  asChild = false,",
-        "  style,",
-        "  textStyle,",
-        "  children,",
-        "  ...rest",
-        "}: ButtonProps) {",
-        "  const containerStyle: StyleProp<ViewStyle> = [",
-        "    {",
-        "      borderRadius: 8,",
-        '      flexDirection: "row",',
-        '      alignItems: "center",',
-        '      justifyContent: "center",',
-        "    },",
-        "    variantStyles[variant],",
-        "    sizeStyles[size],",
-        "    style,",
-        "  ];",
+        '  variant = "default",',
+        "  ...props",
+        "}: React.ComponentProps<typeof RNText> &",
+        "  React.RefAttributes<typeof RNText> &",
+        "  TextVariantProps & { asChild?: boolean }) {",
+        "  const textClass = React.useContext(TextClassContext);",
+        "  const Component = asChild ? Slot : RNText;",
+        "  return (",
+        "    <Component",
+        "      className={cn(textVariants({ variant }), textClass, className)}",
+        "      role={variant ? ROLE[variant] : undefined}",
+        "      aria-level={variant ? ARIA_LEVEL[variant] : undefined}",
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
         "",
-        "  const textStyling: StyleProp<TextStyle> = [",
-        "    {",
-        '      fontWeight: "600",',
-        '      textAlign: "center",',
+        "export { Text, TextClassContext };",
+        ""
+      )
+    },
+    // ─── components/ui/button.tsx ────────────────────────────────────────
+    {
+      path: "src/components/ui/button.tsx",
+      content: lines(
+        'import { TextClassContext } from "@/src/components/ui/text";',
+        'import { cn } from "@/src/lib/utils";',
+        'import { cva, type VariantProps } from "class-variance-authority";',
+        'import { Platform, Pressable } from "react-native";',
+        "",
+        "const buttonVariants = cva(",
+        "  cn(",
+        '    "group shrink-0 flex-row items-center justify-center gap-2 rounded-md shadow-none",',
+        "    Platform.select({",
+        `      web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",`,
+        "    })",
+        "  ),",
+        "  {",
+        "    variants: {",
+        "      variant: {",
+        "        default: cn(",
+        '          "bg-primary active:bg-primary/90 shadow-sm shadow-black/5",',
+        '          Platform.select({ web: "hover:bg-primary/90" })',
+        "        ),",
+        "        destructive: cn(",
+        '          "bg-destructive active:bg-destructive/90 dark:bg-destructive/60 shadow-sm shadow-black/5",',
+        "          Platform.select({",
+        '            web: "hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",',
+        "          })",
+        "        ),",
+        "        outline: cn(",
+        '          "border-border bg-background active:bg-accent dark:bg-input/30 dark:border-input dark:active:bg-input/50 border shadow-sm shadow-black/5",',
+        "          Platform.select({",
+        '            web: "hover:bg-accent dark:hover:bg-input/50",',
+        "          })",
+        "        ),",
+        "        secondary: cn(",
+        '          "bg-secondary active:bg-secondary/80 shadow-sm shadow-black/5",',
+        '          Platform.select({ web: "hover:bg-secondary/80" })',
+        "        ),",
+        "        ghost: cn(",
+        '          "active:bg-accent dark:active:bg-accent/50",',
+        '          Platform.select({ web: "hover:bg-accent dark:hover:bg-accent/50" })',
+        "        ),",
+        '        link: "",',
+        "      },",
+        "      size: {",
+        "        default: cn(",
+        '          "h-10 px-4 py-2 sm:h-9",',
+        '          Platform.select({ web: "has-[>svg]:px-3" })',
+        "        ),",
+        "        sm: cn(",
+        '          "h-9 gap-1.5 rounded-md px-3 sm:h-8",',
+        '          Platform.select({ web: "has-[>svg]:px-2.5" })',
+        "        ),",
+        "        lg: cn(",
+        '          "h-11 rounded-md px-6 sm:h-10",',
+        '          Platform.select({ web: "has-[>svg]:px-4" })',
+        "        ),",
+        '        icon: "h-10 w-10 sm:h-9 sm:w-9",',
+        "      },",
+        "    },",
+        "    defaultVariants: {",
+        '      variant: "default",',
+        '      size: "default",',
         "    },",
-        "    variantTextStyles[variant],",
-        "    sizeTextStyles[size],",
-        "    textStyle,",
-        "  ];",
+        "  }",
+        ");",
         "",
-        "  if (asChild && React.isValidElement(children)) {",
-        "    return (",
-        "      <Pressable style={containerStyle} {...rest}>",
-        "        <Slot>{children}</Slot>",
-        "      </Pressable>",
-        "    );",
+        "const buttonTextVariants = cva(",
+        "  cn(",
+        '    "text-foreground text-sm font-medium",',
+        '    Platform.select({ web: "pointer-events-none transition-colors" })',
+        "  ),",
+        "  {",
+        "    variants: {",
+        "      variant: {",
+        '        default: "text-primary-foreground",',
+        '        destructive: "text-white",',
+        "        outline: cn(",
+        '          "group-active:text-accent-foreground",',
+        '          Platform.select({ web: "group-hover:text-accent-foreground" })',
+        "        ),",
+        '        secondary: "text-secondary-foreground",',
+        '        ghost: "group-active:text-accent-foreground",',
+        "        link: cn(",
+        '          "text-primary group-active:underline",',
+        '          Platform.select({ web: "underline-offset-4 hover:underline group-hover:underline" })',
+        "        ),",
+        "      },",
+        "      size: {",
+        '        default: "",',
+        '        sm: "",',
+        '        lg: "",',
+        '        icon: "",',
+        "      },",
+        "    },",
+        "    defaultVariants: {",
+        '      variant: "default",',
+        '      size: "default",',
+        "    },",
         "  }",
+        ");",
+        "",
+        "type ButtonProps = React.ComponentProps<typeof Pressable> &",
+        "  React.RefAttributes<typeof Pressable> &",
+        "  VariantProps<typeof buttonVariants>;",
         "",
+        "function Button({ className, variant, size, ...props }: ButtonProps) {",
         "  return (",
-        "    <Pressable style={containerStyle} {...rest}>",
-        '      {typeof children === "string" ? (',
-        "        <Text style={textStyling}>{children}</Text>",
-        "      ) : (",
-        "        children",
-        "      )}",
-        "    </Pressable>",
+        "    <TextClassContext.Provider value={buttonTextVariants({ variant, size })}>",
+        "      <Pressable",
+        '        className={cn(props.disabled && "opacity-50", buttonVariants({ variant, size }), className)}',
+        '        role="button"',
+        "        {...props}",
+        "      />",
+        "    </TextClassContext.Provider>",
         "  );",
         "}",
         "",
-        "export default Button;"
+        "export { Button, buttonTextVariants, buttonVariants };",
+        "export type { ButtonProps };",
+        ""
       )
     },
+    // ─── components/ui/input.tsx ──────────────────────────────────────────
     {
       path: "src/components/ui/input.tsx",
       content: lines(
-        'import React, { forwardRef } from "react";',
-        "import {",
-        "  TextInput,",
-        "  type TextInputProps,",
-        "  type StyleProp,",
-        "  type ViewStyle,",
-        "  type TextStyle,",
-        "  View,",
-        "  Text,",
-        '} from "react-native";',
-        "",
-        "interface InputProps extends TextInputProps {",
-        "  label?: string;",
-        "  error?: string;",
-        "  containerStyle?: StyleProp<ViewStyle>;",
-        "  inputStyle?: StyleProp<TextStyle>;",
-        "}",
-        "",
-        "export const Input = forwardRef<TextInput, InputProps>(",
-        "  ({ label, error, containerStyle, inputStyle, ...rest }, ref) => {",
-        "    return (",
-        "      <View style={containerStyle}>",
-        "        {label && <Text style={styles.label}>{label}</Text>}",
-        "        <TextInput",
-        "          ref={ref}",
-        "          style={[",
-        "            styles.input,",
-        "            error && styles.inputError,",
-        "            inputStyle,",
-        "          ]}",
-        '          placeholderTextColor="#a1a1aa"',
-        "          {...rest}",
-        "        />",
-        "        {error && <Text style={styles.errorText}>{error}</Text>}",
-        "      </View>",
-        "    );",
-        "  }",
-        ");",
+        'import { cn } from "@/src/lib/utils";',
+        'import { Platform, TextInput } from "react-native";',
         "",
-        'Input.displayName = "Input";',
+        "function Input({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof TextInput> & React.RefAttributes<TextInput>) {",
+        "  return (",
+        "    <TextInput",
+        "      className={cn(",
+        '        "dark:bg-input/30 border-input bg-background text-foreground flex h-10 w-full min-w-0 flex-row items-center rounded-md border px-3 py-1 text-base leading-5 shadow-sm shadow-black/5 sm:h-9",',
+        "        props.editable === false &&",
+        "          cn(",
+        '            "opacity-50",',
+        '            Platform.select({ web: "disabled:pointer-events-none disabled:cursor-not-allowed" })',
+        "          ),",
+        "        Platform.select({",
+        "          web: cn(",
+        '            "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground outline-none transition-[color,box-shadow] md:text-sm",',
+        '            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",',
+        '            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"',
+        "          ),",
+        '          native: "placeholder:text-muted-foreground/50",',
+        "        }),",
+        "        className",
+        "      )}",
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
         "",
-        "const styles = {",
-        "  label: {",
-        "    fontSize: 14,",
-        '    fontWeight: "500",',
-        '    color: "#18181b",',
-        "    marginBottom: 6,",
-        "  } as TextStyle,",
-        "  input: {",
-        "    height: 44,",
-        "    borderWidth: 1,",
-        '    borderColor: "#d4d4d8",',
-        "    borderRadius: 8,",
-        "    paddingHorizontal: 12,",
-        "    fontSize: 16,",
-        '    color: "#18181b",',
-        '    backgroundColor: "#ffffff",',
-        "  } as TextStyle,",
-        "  inputError: {",
-        '    borderColor: "#ef4444",',
-        "  } as TextStyle,",
-        "  errorText: {",
-        "    fontSize: 12,",
-        '    color: "#ef4444",',
-        "    marginTop: 4,",
-        "  } as TextStyle,",
-        "};",
+        "export { Input };",
+        ""
+      )
+    },
+    // ─── components/ui/label.tsx ─────────────────────────────────────────
+    {
+      path: "src/components/ui/label.tsx",
+      content: lines(
+        'import { cn } from "@/src/lib/utils";',
+        'import * as LabelPrimitive from "@rn-primitives/label";',
+        'import { Platform } from "react-native";',
+        "",
+        "function Label({",
+        "  className,",
+        "  onPress,",
+        "  onLongPress,",
+        "  onPressIn,",
+        "  onPressOut,",
+        "  disabled,",
+        "  ...props",
+        "}: React.ComponentProps<typeof LabelPrimitive.Text>) {",
+        "  return (",
+        "    <LabelPrimitive.Root",
+        "      className={cn(",
+        '        "flex select-none flex-row items-center gap-2",',
+        "        Platform.select({",
+        '          web: "cursor-default leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",',
+        "        }),",
+        '        disabled && "opacity-50"',
+        "      )}",
+        "      onPress={onPress}",
+        "      onLongPress={onLongPress}",
+        "      onPressIn={onPressIn}",
+        "      onPressOut={onPressOut}",
+        "      disabled={disabled}",
+        "    >",
+        "      <LabelPrimitive.Text",
+        "        className={cn(",
+        '          "text-foreground text-sm font-medium",',
+        '          Platform.select({ web: "leading-none" }),',
+        "          className",
+        "        )}",
+        "        {...props}",
+        "      />",
+        "    </LabelPrimitive.Root>",
+        "  );",
+        "}",
         "",
-        "export default Input;"
+        "export { Label };",
+        ""
       )
     },
+    // ─── components/ui/card.tsx ──────────────────────────────────────────
     {
       path: "src/components/ui/card.tsx",
       content: lines(
-        'import React from "react";',
-        'import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from "react-native";',
+        'import { Text, TextClassContext } from "@/src/components/ui/text";',
+        'import { cn } from "@/src/lib/utils";',
+        'import { View } from "react-native";',
+        "",
+        "function Card({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {",
+        "  return (",
+        '    <TextClassContext.Provider value="text-card-foreground">',
+        "      <View",
+        "        className={cn(",
+        '          "bg-card border-border flex flex-col gap-6 rounded-xl border py-6 shadow-sm shadow-black/5",',
+        "          className",
+        "        )}",
+        "        {...props}",
+        "      />",
+        "    </TextClassContext.Provider>",
+        "  );",
+        "}",
         "",
-        "interface CardProps {",
-        "  title?: string;",
-        "  description?: string;",
-        "  children: React.ReactNode;",
-        "  style?: StyleProp<ViewStyle>;",
-        "  titleStyle?: StyleProp<TextStyle>;",
-        "  descriptionStyle?: StyleProp<TextStyle>;",
-        '  padding?: "none" | "sm" | "md" | "lg";',
+        "function CardHeader({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {",
+        "  return (",
+        '    <View className={cn("flex flex-col gap-1.5 px-6", className)} {...props} />',
+        "  );",
         "}",
         "",
-        'const paddingMap: Record<NonNullable<CardProps["padding"]>, number> = {',
-        "  none: 0,",
-        "  sm: 8,",
-        "  md: 16,",
-        "  lg: 24,",
-        "};",
+        "function CardTitle({",
+        "  className,",
+        "  ref,",
+        "  ...props",
+        "}: React.ComponentProps<typeof Text> & React.RefAttributes<typeof Text>) {",
+        "  return (",
+        "    <Text",
+        "      ref={ref}",
+        '      role="heading"',
+        "      aria-level={3}",
+        '      className={cn("font-semibold leading-none", className)}',
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
         "",
-        "export function Card({",
-        "  title,",
-        "  description,",
-        "  children,",
-        "  style,",
-        "  titleStyle,",
-        "  descriptionStyle,",
-        '  padding = "md",',
-        "}: CardProps) {",
+        "function CardDescription({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof Text> & React.RefAttributes<typeof Text>) {",
         "  return (",
-        "    <View",
-        "      style={[",
-        "        {",
-        '          backgroundColor: "#ffffff",',
-        "          borderRadius: 12,",
-        "          borderWidth: 1,",
-        '          borderColor: "#e4e4e7",',
-        "          padding: paddingMap[padding],",
-        "        },",
-        "        style,",
-        "      ]}",
-        "    >",
-        "      {title && (",
-        "        <Text style={[styles.title, titleStyle]}>{title}</Text>",
+        '    <Text className={cn("text-muted-foreground text-sm", className)} {...props} />',
+        "  );",
+        "}",
+        "",
+        "function CardContent({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {",
+        "  return (",
+        '    <View className={cn("px-6", className)} {...props} />',
+        "  );",
+        "}",
+        "",
+        "function CardFooter({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {",
+        "  return (",
+        '    <View className={cn("flex flex-row items-center px-6", className)} {...props} />',
+        "  );",
+        "}",
+        "",
+        "export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };",
+        ""
+      )
+    },
+    // ─── components/ui/separator.tsx ──────────────────────────────────────
+    {
+      path: "src/components/ui/separator.tsx",
+      content: lines(
+        'import { cn } from "@/src/lib/utils";',
+        'import * as SeparatorPrimitive from "@rn-primitives/separator";',
+        "",
+        "function Separator({",
+        "  className,",
+        '  orientation = "horizontal",',
+        "  decorative = true,",
+        "  ...props",
+        "}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {",
+        "  return (",
+        "    <SeparatorPrimitive.Root",
+        "      decorative={decorative}",
+        "      orientation={orientation}",
+        "      className={cn(",
+        '        "bg-border shrink-0",',
+        '        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",',
+        "        className",
         "      )}",
-        "      {description && (",
-        "        <Text style={[styles.description, descriptionStyle]}>",
-        "          {description}",
-        "        </Text>",
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
+        "",
+        "export { Separator };",
+        ""
+      )
+    },
+    // ─── components/ui/alert-dialog.tsx ──────────────────────────────────
+    {
+      path: "src/components/ui/alert-dialog.tsx",
+      content: lines(
+        'import { buttonTextVariants, buttonVariants } from "@/src/components/ui/button";',
+        'import { TextClassContext } from "@/src/components/ui/text";',
+        'import { cn } from "@/src/lib/utils";',
+        'import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";',
+        'import * as React from "react";',
+        'import { Platform, View, type ViewProps } from "react-native";',
+        "",
+        "const AlertDialog = AlertDialogPrimitive.Root;",
+        "",
+        "const AlertDialogTrigger = AlertDialogPrimitive.Trigger;",
+        "",
+        "const AlertDialogPortal = AlertDialogPrimitive.Portal;",
+        "",
+        "function AlertDialogOverlay({",
+        "  className,",
+        "  ...props",
+        '}: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Overlay>, "asChild"> & {',
+        "  children?: React.ReactNode;",
+        "}) {",
+        "  return (",
+        "    <AlertDialogPrimitive.Overlay",
+        "      className={cn(",
+        '        "absolute bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 p-2",',
+        "        Platform.select({",
+        '          web: "animate-in fade-in-0 fixed",',
+        "        }),",
+        "        className",
         "      )}",
-        "      {children}",
-        "    </View>",
+        "      {...props}",
+        "    />",
         "  );",
         "}",
         "",
-        "const styles = {",
-        "  title: {",
-        "    fontSize: 18,",
-        '    fontWeight: "600",',
-        '    color: "#18181b",',
-        "    marginBottom: 4,",
-        "  } as TextStyle,",
-        "  description: {",
-        "    fontSize: 14,",
-        '    color: "#71717a",',
-        "    marginBottom: 12,",
-        "  } as TextStyle,",
-        "};",
+        "function AlertDialogContent({",
+        "  className,",
+        "  portalHost,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {",
+        "  portalHost?: string;",
+        "}) {",
+        "  return (",
+        "    <AlertDialogPortal hostName={portalHost}>",
+        "      <AlertDialogOverlay>",
+        "        <AlertDialogPrimitive.Content",
+        "          className={cn(",
+        '            "bg-background border-border z-50 flex w-full max-w-[calc(100%-2rem)] flex-col gap-4 rounded-lg border p-6 shadow-lg shadow-black/5 sm:max-w-lg",',
+        "            Platform.select({",
+        '              web: "animate-in fade-in-0 zoom-in-95 duration-200",',
+        "            }),",
+        "            className",
+        "          )}",
+        "          {...props}",
+        "        />",
+        "      </AlertDialogOverlay>",
+        "    </AlertDialogPortal>",
+        "  );",
+        "}",
+        "",
+        "function AlertDialogHeader({ className, ...props }: ViewProps) {",
+        "  return (",
+        '    <TextClassContext.Provider value="text-center sm:text-left">',
+        '      <View className={cn("flex flex-col gap-2", className)} {...props} />',
+        "    </TextClassContext.Provider>",
+        "  );",
+        "}",
+        "",
+        "function AlertDialogFooter({ className, ...props }: ViewProps) {",
+        "  return (",
+        '    <View className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props} />',
+        "  );",
+        "}",
+        "",
+        "function AlertDialogTitle({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {",
+        "  return (",
+        "    <AlertDialogPrimitive.Title",
+        '      className={cn("text-foreground text-lg font-semibold", className)}',
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
+        "",
+        "function AlertDialogDescription({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {",
+        "  return (",
+        "    <AlertDialogPrimitive.Description",
+        '      className={cn("text-muted-foreground text-sm", className)}',
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
+        "",
+        "function AlertDialogAction({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {",
+        "  return (",
+        "    <TextClassContext.Provider value={buttonTextVariants({ className })}>",
+        "      <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />",
+        "    </TextClassContext.Provider>",
+        "  );",
+        "}",
         "",
-        "export default Card;"
+        "function AlertDialogCancel({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {",
+        "  return (",
+        '    <TextClassContext.Provider value={buttonTextVariants({ className, variant: "outline" })}>',
+        "      <AlertDialogPrimitive.Cancel",
+        '          className={cn(buttonVariants({ variant: "outline" }), className)} {...props} />',
+        "    </TextClassContext.Provider>",
+        "  );",
+        "}",
+        "",
+        "export {",
+        "  AlertDialog,",
+        "  AlertDialogAction,",
+        "  AlertDialogCancel,",
+        "  AlertDialogContent,",
+        "  AlertDialogDescription,",
+        "  AlertDialogFooter,",
+        "  AlertDialogHeader,",
+        "  AlertDialogOverlay,",
+        "  AlertDialogPortal,",
+        "  AlertDialogTitle,",
+        "  AlertDialogTrigger,",
+        "};",
+        ""
       )
     }
   ]
@@ -2814,7 +3153,8 @@ function generateBaseTemplates(projectName) {
     // ─── app/_layout.tsx ────────────────────────────────────────────────
     {
       path: "app/_layout.tsx",
-      content: `import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
+      content: `import "../global.css";
+import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
@@ -3239,8 +3579,45 @@ module.exports = {
     "./app/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  presets: [require("nativewind/preset")],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+    },
   },
   plugins: [],
 };
@@ -3250,10 +3627,11 @@ module.exports = {
     {
       path: "metro.config.js",
       content: `const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 
 const config = getDefaultConfig(__dirname);
 
-module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });
 `
     },
     // ─── babel.config.js ─────────────────────────────────────────────────
@@ -3262,10 +3640,67 @@ module.exports = config;
       content: `module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+    plugins: ["react-native-reanimated/plugin"],
   };
 };
+`
+    },
+    // ─── global.css (NativeWind CSS variables for rnr components) ─────────
+    {
+      path: "global.css",
+      content: `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
 `
     },
     // ─── .gitignore ─────────────────────────────────────────────────────
@@ -3314,6 +3749,392 @@ expo-env.d.ts
   ];
 }
 
+// src/templates/login-tabs.ts
+function generateLoginTabsTemplates(projectName) {
+  return [
+    // ─── app/_layout.tsx (overwrite base) ────────────────────────────────
+    {
+      path: "app/_layout.tsx",
+      content: lines(
+        'import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";',
+        'import { useFonts } from "expo-font";',
+        'import { Stack } from "expo-router";',
+        'import * as SplashScreen from "expo-splash-screen";',
+        'import { useEffect } from "react";',
+        'import { useColorScheme } from "react-native";',
+        "",
+        'import { Colors } from "@/src/constants/Colors";',
+        "",
+        "SplashScreen.preventAutoHideAsync();",
+        "",
+        "export default function RootLayout() {",
+        "  const colorScheme = useColorScheme();",
+        "  const [loaded] = useFonts({",
+        '    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),',
+        "  });",
+        "",
+        "  useEffect(() => {",
+        "    if (loaded) {",
+        "      SplashScreen.hideAsync();",
+        "    }",
+        "  }, [loaded]);",
+        "",
+        "  if (!loaded) {",
+        "    return null;",
+        "  }",
+        "",
+        "  return (",
+        '    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>',
+        "      <Stack>",
+        '        <Stack.Screen name="login" options={{ headerShown: false }} />',
+        '        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />',
+        '        <Stack.Screen name="+not-found" />',
+        "      </Stack>",
+        "    </ThemeProvider>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/login.tsx ───────────────────────────────────────────────────
+    {
+      path: "app/login.tsx",
+      content: lines(
+        'import { SignInForm } from "@/src/components/SignInForm";',
+        'import { View } from "react-native";',
+        "",
+        "export default function LoginScreen() {",
+        "  return (",
+        '    <View className="flex-1 items-center justify-center p-4">',
+        "      <SignInForm />",
+        "    </View>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/(tabs)/_layout.tsx (overwrite base) ───────────────────────
+    {
+      path: "app/(tabs)/_layout.tsx",
+      content: lines(
+        'import { Tabs } from "expo-router";',
+        'import { Platform } from "react-native";',
+        "",
+        'import { Colors } from "@/src/constants/Colors";',
+        'import { useColorScheme } from "@/src/hooks/useColorScheme";',
+        "",
+        "export default function TabLayout() {",
+        "  const colorScheme = useColorScheme();",
+        "",
+        "  return (",
+        "    <Tabs",
+        "      screenOptions={{",
+        '        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,',
+        "        headerStyle: {",
+        '          backgroundColor: Colors[colorScheme ?? "light"].background,',
+        "        },",
+        "        headerShadowVisible: false,",
+        "        tabBarStyle: Platform.select({",
+        "          ios: {",
+        '            position: "absolute",',
+        "          },",
+        "          default: {},",
+        "        }),",
+        "      }}",
+        "    >",
+        "      <Tabs.Screen",
+        '        name="home"',
+        "        options={{",
+        '          title: "Home",',
+        "          tabBarIcon: () => null,",
+        "        }}",
+        "      />",
+        "      <Tabs.Screen",
+        '        name="list"',
+        "        options={{",
+        '          title: "List",',
+        "          tabBarIcon: () => null,",
+        "        }}",
+        "      />",
+        "      <Tabs.Screen",
+        '        name="mine"',
+        "        options={{",
+        '          title: "Mine",',
+        "          tabBarIcon: () => null,",
+        "        }}",
+        "      />",
+        "    </Tabs>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/(tabs)/home.tsx ────────────────────────────────────────────
+    {
+      path: "app/(tabs)/home.tsx",
+      content: lines(
+        'import { Button } from "@/src/components/ui/button";',
+        "import {",
+        "  AlertDialog,",
+        "  AlertDialogAction,",
+        "  AlertDialogCancel,",
+        "  AlertDialogContent,",
+        "  AlertDialogDescription,",
+        "  AlertDialogFooter,",
+        "  AlertDialogHeader,",
+        "  AlertDialogTitle,",
+        "  AlertDialogTrigger,",
+        '} from "@/src/components/ui/alert-dialog";',
+        'import { Text } from "@/src/components/ui/text";',
+        'import { View } from "react-native";',
+        "",
+        "export default function HomeScreen() {",
+        "  return (",
+        '    <View className="flex-1 gap-6 p-6">',
+        '      <Text variant="h3">UI Components</Text>',
+        '      <Text variant="muted">React Native Reusables components showcase</Text>',
+        "",
+        "      {/* Button variants */}",
+        '      <View className="gap-3">',
+        '        <Text variant="large">Buttons</Text>',
+        '        <View className="flex-row flex-wrap gap-2">',
+        "          <Button onPress={() => {}}>",
+        "            <Text>Default</Text>",
+        "          </Button>",
+        '          <Button variant="secondary" onPress={() => {}}>',
+        "            <Text>Secondary</Text>",
+        "          </Button>",
+        '          <Button variant="destructive" onPress={() => {}}>',
+        "            <Text>Destructive</Text>",
+        "          </Button>",
+        '          <Button variant="outline" onPress={() => {}}>',
+        "            <Text>Outline</Text>",
+        "          </Button>",
+        '          <Button variant="ghost" onPress={() => {}}>',
+        "            <Text>Ghost</Text>",
+        "          </Button>",
+        '          <Button variant="link" onPress={() => {}}>',
+        "            <Text>Link</Text>",
+        "          </Button>",
+        "        </View>",
+        "      </View>",
+        "",
+        "      {/* AlertDialog */}",
+        '      <View className="gap-3">',
+        '        <Text variant="large">Alert Dialog</Text>',
+        "        <AlertDialog>",
+        "          <AlertDialogTrigger asChild>",
+        '            <Button variant="outline">',
+        "              <Text>Show Alert</Text>",
+        "            </Button>",
+        "          </AlertDialogTrigger>",
+        "          <AlertDialogContent>",
+        "            <AlertDialogHeader>",
+        "              <AlertDialogTitle>Are you sure?</AlertDialogTitle>",
+        "              <AlertDialogDescription>",
+        "                This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+        "              </AlertDialogDescription>",
+        "            </AlertDialogHeader>",
+        "            <AlertDialogFooter>",
+        "              <AlertDialogCancel>",
+        "                <Text>Cancel</Text>",
+        "              </AlertDialogCancel>",
+        "              <AlertDialogAction>",
+        "                <Text>Continue</Text>",
+        "              </AlertDialogAction>",
+        "            </AlertDialogFooter>",
+        "          </AlertDialogContent>",
+        "        </AlertDialog>",
+        "      </View>",
+        "    </View>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/(tabs)/list.tsx ────────────────────────────────────────────
+    {
+      path: "app/(tabs)/list.tsx",
+      content: lines(
+        'import { Text } from "@/src/components/ui/text";',
+        'import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/src/components/ui/card";',
+        'import { View, ScrollView } from "react-native";',
+        "",
+        "const ITEMS = Array.from({ length: 20 }, (_, i) => ({",
+        "  id: String(i + 1),",
+        "  title: `Item ${i + 1}`,",
+        "  description: `Description for item ${i + 1}`,",
+        "}));",
+        "",
+        "export default function ListScreen() {",
+        "  return (",
+        '    <ScrollView className="flex-1 p-4">',
+        '      <Text variant="h3" className="mb-4">List</Text>',
+        '      <View className="gap-3">',
+        "        {ITEMS.map((item) => (",
+        "          <Card key={item.id}>",
+        "            <CardHeader>",
+        "              <CardTitle>{item.title}</CardTitle>",
+        "              <CardDescription>{item.description}</CardDescription>",
+        "            </CardHeader>",
+        "            <CardContent />",
+        "          </Card>",
+        "        ))}",
+        "      </View>",
+        "    </ScrollView>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/(tabs)/mine.tsx ────────────────────────────────────────────
+    {
+      path: "app/(tabs)/mine.tsx",
+      content: lines(
+        'import { Button } from "@/src/components/ui/button";',
+        'import { Card, CardContent, CardHeader, CardTitle } from "@/src/components/ui/card";',
+        'import { Text } from "@/src/components/ui/text";',
+        'import { View } from "react-native";',
+        'import { router } from "expo-router";',
+        "",
+        "export default function MineScreen() {",
+        "  return (",
+        '    <View className="flex-1 p-6">',
+        '      <Text variant="h3" className="mb-6">Mine</Text>',
+        "",
+        '      <Card className="mb-6">',
+        "        <CardHeader>",
+        "          <CardTitle>Profile</CardTitle>",
+        "        </CardHeader>",
+        "        <CardContent>",
+        '          <View className="gap-2">',
+        '            <Text variant="muted">User Name</Text>',
+        "            <Text>user@example.com</Text>",
+        "          </View>",
+        "        </CardContent>",
+        "      </Card>",
+        "",
+        "      <Button",
+        '        variant="destructive"',
+        '        className="w-full"',
+        "        onPress={() => {",
+        '          router.replace("/login");',
+        "        }}",
+        "      >",
+        "        <Text>Sign Out</Text>",
+        "      </Button>",
+        "    </View>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── src/components/SignInForm.tsx ───────────────────────────────────
+    {
+      path: "src/components/SignInForm.tsx",
+      content: lines(
+        'import { Button } from "@/src/components/ui/button";',
+        "import {",
+        "  Card,",
+        "  CardContent,",
+        "  CardDescription,",
+        "  CardHeader,",
+        "  CardTitle,",
+        '} from "@/src/components/ui/card";',
+        'import { Input } from "@/src/components/ui/input";',
+        'import { Label } from "@/src/components/ui/label";',
+        'import { Separator } from "@/src/components/ui/separator";',
+        'import { Text } from "@/src/components/ui/text";',
+        'import * as React from "react";',
+        'import { Pressable, type TextInput, View } from "react-native";',
+        'import { router } from "expo-router";',
+        "",
+        "export function SignInForm() {",
+        "  const passwordInputRef = React.useRef<TextInput>(null);",
+        "",
+        "  function onEmailSubmitEditing() {",
+        "    passwordInputRef.current?.focus();",
+        "  }",
+        "",
+        "  function onSubmit() {",
+        "    // TODO: Submit form and navigate to protected screen if successful",
+        '    router.replace("/(tabs)/home");',
+        "  }",
+        "",
+        "  return (",
+        '    <View className="gap-6 w-full max-w-sm">',
+        '      <Card className="shadow-none sm:shadow-sm sm:shadow-black/5">',
+        "        <CardHeader>",
+        '          <CardTitle className="text-center text-xl sm:text-left">Sign in to your app</CardTitle>',
+        '          <CardDescription className="text-center sm:text-left">',
+        "            Welcome back! Please sign in to continue",
+        "          </CardDescription>",
+        "        </CardHeader>",
+        '        <CardContent className="gap-6">',
+        '          <View className="gap-6">',
+        '            <View className="gap-1.5">',
+        '              <Label nativeID="email">Email</Label>',
+        "              <Input",
+        '                placeholder="m@example.com"',
+        '                keyboardType="email-address"',
+        '                autoComplete="email"',
+        '                autoCapitalize="none"',
+        "                onSubmitEditing={onEmailSubmitEditing}",
+        '                returnKeyType="next"',
+        '                submitBehavior="submit"',
+        "              />",
+        "            </View>",
+        '            <View className="gap-1.5">',
+        '              <View className="flex-row items-center">',
+        '                <Label nativeID="password">Password</Label>',
+        "                <Button",
+        '                  variant="link"',
+        '                  size="sm"',
+        '                  className="ml-auto h-4 px-1 py-0 sm:h-4"',
+        "                  onPress={() => {",
+        "                    // TODO: Navigate to forgot password screen",
+        "                  }}",
+        "                >",
+        '                  <Text className="font-normal leading-4">Forgot your password?</Text>',
+        "                </Button>",
+        "              </View>",
+        "              <Input",
+        "                ref={passwordInputRef}",
+        "                secureTextEntry",
+        '                returnKeyType="send"',
+        "                onSubmitEditing={onSubmit}",
+        "              />",
+        "            </View>",
+        '            <Button className="w-full" onPress={onSubmit}>',
+        "              <Text>Continue</Text>",
+        "            </Button>",
+        "          </View>",
+        '          <Text className="text-center text-sm">',
+        '            Don&apos;t have an account?{" "}',
+        "            <Pressable",
+        "              onPress={() => {",
+        "                // TODO: Navigate to sign up screen",
+        "              }}",
+        "            >",
+        '              <Text className="text-sm underline underline-offset-4">Sign up</Text>',
+        "            </Pressable>",
+        "          </Text>",
+        '          <View className="flex-row items-center">',
+        '            <Separator className="flex-1" />',
+        '            <Text className="text-muted-foreground px-4 text-sm">or</Text>',
+        '            <Separator className="flex-1" />',
+        "          </View>",
+        "        </CardContent>",
+        "      </Card>",
+        "    </View>",
+        "  );",
+        "}",
+        ""
+      )
+    }
+  ];
+}
+
 // src/utils/file.ts
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_path = __toESM(require("path"));
@@ -3322,6 +4143,9 @@ async function writeFile(filePath, content) {
   await import_fs_extra.default.ensureDir(dir);
   await import_fs_extra.default.writeFile(filePath, content, "utf-8");
 }
+async function readJson(filePath) {
+  return import_fs_extra.default.readJson(filePath);
+}
 async function writeJson(filePath, data, spaces = 2) {
   const dir = import_path.default.dirname(filePath);
   await import_fs_extra.default.ensureDir(dir);
@@ -3337,6 +4161,18 @@ function replaceTemplateVars(content, vars) {
 }
 
 // src/utils/package.ts
+async function mergeDependencies(pkgPath, deps, devDeps) {
+  const pkg = await readJson(pkgPath);
+  pkg.dependencies = {
+    ...pkg.dependencies || {},
+    ...deps
+  };
+  pkg.devDependencies = {
+    ...pkg.devDependencies || {},
+    ...devDeps
+  };
+  await writeJson(pkgPath, pkg);
+}
 function generateBasePackageJson(projectName) {
   return {
     name: projectName,
@@ -3361,7 +4197,8 @@ function generateBasePackageJson(projectName) {
       "react-native-safe-area-context": "~5.6.0",
       "react-native-screens": "~4.16.0",
       nativewind: "^4.1.0",
-      tailwindcss: "^3.4.0"
+      tailwindcss: "^3.4.0",
+      "react-native-svg": "^15.8.0"
     },
     devDependencies: {
       "@types/react": "~19.1.0",
@@ -3372,9 +4209,11 @@ function generateBasePackageJson(projectName) {
 
 // src/index.ts
 var import_execa = require("execa");
+var CLI_VERSION = "1.3.0";
+var CONFIG_FILE = ".expo-bbase.json";
 async function run() {
   const program = new import_commander.Command();
-  program.name("expo-bbase").description("Expo SDK 54+ \u811A\u624B\u67B6 CLI \u5DE5\u5177").version("1.0.0");
+  program.name("expo-bbase").description("Expo SDK 54+ scaffolding CLI tool").version(CLI_VERSION);
   program.argument("[project-name]", "Name of the project to create").action(async (projectName) => {
     if (!projectName) {
       console.error(import_chalk.default.red("Error: Please provide a project name."));
@@ -3384,71 +4223,120 @@ async function run() {
     await createProject(projectName);
   });
   registerCreateCommand(program);
+  registerUpgradeCommand(program);
+  registerAddCommand(program);
   await program.parseAsync(process.argv);
 }
+async function readProjectConfig(targetDir) {
+  const configPath = import_path2.default.join(targetDir, CONFIG_FILE);
+  if (!await import_fs_extra2.default.pathExists(configPath)) {
+    return null;
+  }
+  return import_fs_extra2.default.readJson(configPath);
+}
+async function writeProjectConfig(targetDir, config) {
+  const configPath = import_path2.default.join(targetDir, CONFIG_FILE);
+  await writeJson(configPath, config);
+}
 async function createProject(projectName) {
   console.log();
   console.log(
     import_chalk.default.bold.cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557")
   );
   console.log(
-    import_chalk.default.bold.cyan("  \u2551     expo-bbase \u2014 Expo \u811A\u624B\u67B6\u5DE5\u5177      \u2551")
+    import_chalk.default.bold.cyan("  \u2551     expo-bbase \u2014 Expo Scaffolding     \u2551")
   );
   console.log(
     import_chalk.default.bold.cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D")
   );
   console.log();
+  const { uiTemplate } = await (0, import_prompts.default)({
+    type: "select",
+    name: "uiTemplate",
+    message: "Choose a UI template",
+    choices: [
+      {
+        title: `${import_chalk.default.bold("Login + Tabs")} \u2014 Login page, Home/List/Mine tabs with rnr components`,
+        value: "login-tabs",
+        description: "Pre-built login form, 3-tab layout with Button & AlertDialog demos"
+      },
+      {
+        title: `${import_chalk.default.bold("Default")} \u2014 Blank tabs (Home + Explore)`,
+        value: "default",
+        description: "Minimal starter with basic tab navigation"
+      }
+    ],
+    initial: 0
+  });
+  if (uiTemplate === void 0) {
+    console.log(import_chalk.default.yellow("\nCancelled."));
+    process.exit(0);
+  }
+  const isLoginTabs = uiTemplate === "login-tabs";
   const choices = modules.map((m) => ({
     title: `${import_chalk.default.bold(m.name)} \u2014 ${import_chalk.default.gray(m.description)}`,
     value: m.id,
-    selected: m.defaultChecked
+    // Auto-select ui-reusables when login-tabs template is chosen
+    selected: isLoginTabs && m.id === "ui-reusables" ? true : m.defaultChecked
   }));
   const { selectedModules } = await (0, import_prompts.default)({
     type: "multiselect",
     name: "selectedModules",
-    message: "\u9009\u62E9\u9700\u8981\u7684\u529F\u80FD\u6A21\u5757\uFF08\u7A7A\u683C\u5207\u6362\uFF0C\u56DE\u8F66\u786E\u8BA4\uFF09",
+    message: "Select modules (Space to toggle, Enter to confirm)",
     choices,
-    hint: "- \u7A7A\u683C\u5207\u6362\u9009\u62E9 \xB7 a \u5168\u9009/\u53D6\u6D88 \xB7 \u56DE\u8F66\u786E\u8BA4",
+    hint: "- Space toggle \xB7 a select all/none \xB7 Enter confirm",
     instructions: false
   });
   if (selectedModules === void 0) {
-    console.log(import_chalk.default.yellow("\n\u5DF2\u53D6\u6D88\u521B\u5EFA\u9879\u76EE\u3002"));
+    console.log(import_chalk.default.yellow("\nCancelled."));
     process.exit(0);
   }
-  const selectedModuleDefs = getModulesByIds(selectedModules);
+  let finalModuleIds = selectedModules;
+  if (isLoginTabs && !finalModuleIds.includes("ui-reusables")) {
+    finalModuleIds = ["ui-reusables", ...finalModuleIds];
+  }
+  const selectedModuleDefs = getModulesByIds(finalModuleIds);
   const targetDir = import_path2.default.resolve(process.cwd(), projectName);
   console.log();
-  console.log(import_chalk.default.white(`  \u{1F4E6} \u9879\u76EE\u540D\u79F0: ${import_chalk.default.bold(projectName)}`));
+  console.log(import_chalk.default.white(`  \u{1F4E6} Project: ${import_chalk.default.bold(projectName)}`));
+  console.log(import_chalk.default.white(`  \u{1F4C2} Path:    ${import_chalk.default.gray(targetDir)}`));
   console.log(
-    import_chalk.default.white(`  \u{1F4C2} \u76EE\u6807\u8DEF\u5F84: ${import_chalk.default.gray(targetDir)}`)
+    import_chalk.default.white(
+      `  \u{1F3A8} Template: ${import_chalk.default.green(isLoginTabs ? "Login + Tabs" : "Default")}`
+    )
   );
   console.log(
     import_chalk.default.white(
-      `  \u{1F9E9} \u9009\u62E9\u6A21\u5757: ${import_chalk.default.green(selectedModuleDefs.map((m) => m.name).join(", ") || "\u65E0")}`
+      `  \u{1F9E9} Modules: ${import_chalk.default.green(selectedModuleDefs.map((m) => m.name).join(", ") || "none")}`
     )
   );
   console.log();
-  const spinner = (0, import_ora.default)("\u6B63\u5728\u521B\u5EFA\u9879\u76EE...").start();
+  const spinner = (0, import_ora.default)("Creating project...").start();
   try {
     const baseTemplates = generateBaseTemplates(projectName);
     for (const file of baseTemplates) {
       const filePath = import_path2.default.join(targetDir, file.path);
-      const content = replaceTemplateVars(file.content, {
-        projectName
-      });
+      const content = replaceTemplateVars(file.content, { projectName });
       await writeFile(filePath, content);
     }
-    spinner.text = "\u6B63\u5728\u5199\u5165\u6A21\u5757\u6587\u4EF6...";
+    spinner.text = "Writing module files...";
     for (const mod of selectedModuleDefs) {
       for (const file of mod.files) {
         const filePath = import_path2.default.join(targetDir, file.path);
-        const content = replaceTemplateVars(file.content, {
-          projectName
-        });
+        const content = replaceTemplateVars(file.content, { projectName });
         await writeFile(filePath, content);
       }
     }
-    spinner.text = "\u6B63\u5728\u751F\u6210 package.json...";
+    if (isLoginTabs) {
+      spinner.text = "Writing UI template files...";
+      const loginTabsTemplates = generateLoginTabsTemplates(projectName);
+      for (const file of loginTabsTemplates) {
+        const filePath = import_path2.default.join(targetDir, file.path);
+        const content = replaceTemplateVars(file.content, { projectName });
+        await writeFile(filePath, content);
+      }
+    }
+    spinner.text = "Generating package.json...";
     const pkgJson = generateBasePackageJson(projectName);
     const allDeps = {};
     const allDevDeps = {};
@@ -3463,48 +4351,302 @@ async function createProject(projectName) {
     );
     const pkgPath = import_path2.default.join(targetDir, "package.json");
     await writeJson(pkgPath, pkgJson);
-    spinner.text = "\u6B63\u5728\u914D\u7F6E app.json...";
+    spinner.text = "Configuring app.json...";
     await updateAppJson(targetDir, selectedModuleDefs, projectName);
-    spinner.text = "\u6B63\u5728\u914D\u7F6E Babel...";
+    spinner.text = "Configuring Babel...";
     await updateBabelConfig(targetDir, selectedModuleDefs);
-    spinner.text = "\u6B63\u5728\u914D\u7F6E\u5165\u53E3\u6587\u4EF6...";
+    spinner.text = "Configuring layout...";
     await updateLayoutFile(targetDir, selectedModuleDefs);
-    spinner.text = "\u6B63\u5728\u5B89\u88C5\u4F9D\u8D56 (yarn install)...";
+    await writeProjectConfig(targetDir, {
+      projectName,
+      selectedModules: finalModuleIds,
+      cliVersion: CLI_VERSION,
+      uiTemplate: isLoginTabs ? "login-tabs" : "default"
+    });
+    spinner.text = "Installing dependencies (yarn install)...";
     try {
       await (0, import_execa.execa)("yarn", ["install"], {
         cwd: targetDir,
         timeout: 3e5
-        // 5 minute timeout
       });
     } catch (installError) {
       const errMsg = installError instanceof Error ? installError.message : String(installError);
-      spinner.warn("yarn install \u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u5B89\u88C5\u4F9D\u8D56");
-      console.log(import_chalk.default.red(`  \u9519\u8BEF: ${errMsg}`));
-      console.log(
-        import_chalk.default.gray(`  cd ${projectName} && yarn install`)
-      );
+      spinner.warn("yarn install failed, please install manually");
+      console.log(import_chalk.default.red(`  Error: ${errMsg}`));
+      console.log(import_chalk.default.gray(`  cd ${projectName} && yarn install`));
     }
-    spinner.succeed(import_chalk.default.green("\u9879\u76EE\u521B\u5EFA\u6210\u529F\uFF01"));
+    spinner.succeed(import_chalk.default.green("Project created!"));
     console.log();
-    console.log(import_chalk.default.bold("  \u{1F389} \u4E0B\u4E00\u6B65\uFF1A"));
+    console.log(import_chalk.default.bold("  \u{1F389} Next steps:"));
     console.log(import_chalk.default.white(`     cd ${projectName}`));
     console.log(import_chalk.default.white("     npx expo start"));
+    if (isLoginTabs) {
+      console.log(import_chalk.default.gray("     \u2192 App starts at login page, sign in to see tabs"));
+    }
     console.log();
     if (selectedModuleDefs.length > 0) {
-      console.log(import_chalk.default.bold("  \u{1F4CB} \u5DF2\u9009\u6A21\u5757\uFF1A"));
+      console.log(import_chalk.default.bold("  \u{1F4CB} Selected modules:"));
       for (const mod of selectedModuleDefs) {
         console.log(import_chalk.default.white(`     \u2713 ${mod.name}`));
       }
       console.log();
     }
   } catch (error) {
-    spinner.fail(import_chalk.default.red("\u9879\u76EE\u521B\u5EFA\u5931\u8D25"));
+    spinner.fail(import_chalk.default.red("Project creation failed"));
     console.error(error);
     process.exit(1);
   }
 }
-async function updateAppJson(targetDir, selectedModules, projectName) {
+async function upgradeProject(targetDir) {
+  console.log();
+  console.log(
+    import_chalk.default.bold.cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557")
+  );
+  console.log(
+    import_chalk.default.bold.cyan("  \u2551     expo-bbase \u2014 Upgrade              \u2551")
+  );
+  console.log(
+    import_chalk.default.bold.cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D")
+  );
+  console.log();
+  const absDir = import_path2.default.resolve(targetDir);
+  const config = await readProjectConfig(absDir);
+  if (!config) {
+    console.error(
+      import_chalk.default.red(
+        `  \u2716 No ${CONFIG_FILE} found in ${absDir}
+  This directory doesn't appear to be an expo-bbase project.
+  If it is, run "expo-bbase add" to register modules.`
+      )
+    );
+    process.exit(1);
+  }
+  console.log(
+    import_chalk.default.white(`  \u{1F4C2} Project:    ${import_chalk.default.bold(config.projectName)}`)
+  );
+  console.log(
+    import_chalk.default.white(`  \u{1F4CB} CLI version: ${import_chalk.default.gray(config.cliVersion || "unknown")} \u2192 ${import_chalk.default.green(CLI_VERSION)}`)
+  );
+  console.log(
+    import_chalk.default.white(
+      `  \u{1F9E9} Modules:    ${import_chalk.default.green(config.selectedModules.join(", ") || "none")}`
+    )
+  );
+  console.log();
+  const spinner = (0, import_ora.default)("Upgrading project...").start();
+  try {
+    const selectedModuleDefs = getModulesByIds(config.selectedModules);
+    spinner.text = "Updating module files...";
+    for (const mod of selectedModuleDefs) {
+      for (const file of mod.files) {
+        const filePath = import_path2.default.join(absDir, file.path);
+        const content = replaceTemplateVars(file.content, {
+          projectName: config.projectName
+        });
+        await writeFile(filePath, content);
+      }
+    }
+    spinner.text = "Updating dependencies...";
+    const allDeps = {};
+    const allDevDeps = {};
+    for (const mod of selectedModuleDefs) {
+      Object.assign(allDeps, mod.dependencies);
+      Object.assign(allDevDeps, mod.devDependencies);
+    }
+    const basePkg = generateBasePackageJson(config.projectName);
+    Object.assign(allDeps, basePkg.dependencies);
+    Object.assign(
+      allDevDeps,
+      basePkg.devDependencies
+    );
+    const pkgPath = import_path2.default.join(absDir, "package.json");
+    await mergeDependencies(pkgPath, allDeps, allDevDeps);
+    spinner.text = "Updating app.json...";
+    await updateAppJson(absDir, selectedModuleDefs, config.projectName);
+    spinner.text = "Updating Babel config...";
+    await updateBabelConfig(absDir, selectedModuleDefs);
+    spinner.text = "Updating layout...";
+    await updateLayoutFile(absDir, selectedModuleDefs);
+    config.cliVersion = CLI_VERSION;
+    await writeProjectConfig(absDir, config);
+    spinner.text = "Installing updated dependencies (yarn install)...";
+    try {
+      await (0, import_execa.execa)("yarn", ["install"], {
+        cwd: absDir,
+        timeout: 3e5
+      });
+    } catch (installError) {
+      const errMsg = installError instanceof Error ? installError.message : String(installError);
+      spinner.warn("yarn install failed, please install manually");
+      console.log(import_chalk.default.red(`  Error: ${errMsg}`));
+    }
+    spinner.succeed(import_chalk.default.green("Project upgraded!"));
+    console.log();
+    console.log(import_chalk.default.bold("  \u{1F4CB} Upgrade summary:"));
+    console.log(import_chalk.default.white(`     CLI:      ${import_chalk.default.gray(config.cliVersion)} (before)`));
+    console.log(import_chalk.default.white(`     Modules:  ${import_chalk.default.green(config.selectedModules.join(", "))}`));
+    console.log();
+    console.log(import_chalk.default.bold("  \u{1F389} Run your project:"));
+    console.log(import_chalk.default.white("     npx expo start"));
+    console.log();
+  } catch (error) {
+    spinner.fail(import_chalk.default.red("Upgrade failed"));
+    console.error(error);
+    process.exit(1);
+  }
+}
+async function addModule(moduleIds, targetDir) {
+  console.log();
+  const absDir = import_path2.default.resolve(targetDir);
+  let config = await readProjectConfig(absDir);
+  if (!config) {
+    const pkgPath = import_path2.default.join(absDir, "package.json");
+    if (!await import_fs_extra2.default.pathExists(pkgPath)) {
+      console.error(
+        import_chalk.default.red(`  \u2716 No package.json found in ${absDir}`)
+      );
+      process.exit(1);
+    }
+    const pkg = await import_fs_extra2.default.readJson(pkgPath);
+    config = {
+      projectName: pkg.name || import_path2.default.basename(absDir),
+      selectedModules: [],
+      cliVersion: CLI_VERSION
+    };
+    console.log(
+      import_chalk.default.yellow(
+        `  \u26A0 No ${CONFIG_FILE} found. Creating one for project "${config.projectName}".`
+      )
+    );
+  }
+  if (moduleIds.length === 0) {
+    const availableModules = modules.filter(
+      (m) => !config.selectedModules.includes(m.id)
+    );
+    if (availableModules.length === 0) {
+      console.log(import_chalk.default.green("  \u2713 All modules are already installed!"));
+      process.exit(0);
+    }
+    const choices = availableModules.map((m) => ({
+      title: `${import_chalk.default.bold(m.name)} \u2014 ${import_chalk.default.gray(m.description)}`,
+      value: m.id,
+      selected: false
+    }));
+    const { selected } = await (0, import_prompts.default)({
+      type: "multiselect",
+      name: "selected",
+      message: "Select modules to add (Space to toggle, Enter to confirm)",
+      choices,
+      hint: "- Space toggle \xB7 a select all/none \xB7 Enter confirm",
+      instructions: false
+    });
+    if (selected === void 0 || selected.length === 0) {
+      console.log(import_chalk.default.yellow("  No modules selected."));
+      process.exit(0);
+    }
+    moduleIds = selected;
+  }
+  const invalidIds = moduleIds.filter((id) => !getModuleById(id));
+  if (invalidIds.length > 0) {
+    console.error(
+      import_chalk.default.red(`  \u2716 Unknown module(s): ${invalidIds.join(", ")}`)
+    );
+    console.log(
+      import_chalk.default.gray(
+        `  Available: ${modules.map((m) => m.id).join(", ")}`
+      )
+    );
+    process.exit(1);
+  }
+  const newModuleIds = moduleIds.filter(
+    (id) => !config.selectedModules.includes(id)
+  );
+  if (newModuleIds.length === 0) {
+    console.log(
+      import_chalk.default.yellow("  All specified modules are already installed.")
+    );
+    process.exit(0);
+  }
+  const newModuleDefs = getModulesByIds(newModuleIds);
+  console.log(
+    import_chalk.default.white(`  \u{1F4C2} Project:  ${import_chalk.default.bold(config.projectName)}`)
+  );
+  console.log(
+    import_chalk.default.white(
+      `  \u2795 Adding:   ${import_chalk.default.green(newModuleDefs.map((m) => m.name).join(", "))}`
+    )
+  );
+  console.log();
+  const spinner = (0, import_ora.default)("Adding modules...").start();
+  try {
+    spinner.text = "Writing module files...";
+    for (const mod of newModuleDefs) {
+      for (const file of mod.files) {
+        const filePath = import_path2.default.join(absDir, file.path);
+        const content = replaceTemplateVars(file.content, {
+          projectName: config.projectName
+        });
+        await writeFile(filePath, content);
+      }
+    }
+    spinner.text = "Updating dependencies...";
+    const allDeps = {};
+    const allDevDeps = {};
+    for (const mod of newModuleDefs) {
+      Object.assign(allDeps, mod.dependencies);
+      Object.assign(allDevDeps, mod.devDependencies);
+    }
+    const pkgPath = import_path2.default.join(absDir, "package.json");
+    await mergeDependencies(pkgPath, allDeps, allDevDeps);
+    spinner.text = "Updating app.json...";
+    const existingModules = getModulesByIds(config.selectedModules);
+    await updateAppJson(
+      absDir,
+      [...existingModules, ...newModuleDefs],
+      config.projectName
+    );
+    spinner.text = "Updating Babel config...";
+    await updateBabelConfig(absDir, newModuleDefs);
+    spinner.text = "Updating layout...";
+    await updateLayoutFile(absDir, newModuleDefs);
+    config.selectedModules.push(...newModuleIds);
+    config.cliVersion = CLI_VERSION;
+    await writeProjectConfig(absDir, config);
+    spinner.text = "Installing dependencies (yarn install)...";
+    try {
+      await (0, import_execa.execa)("yarn", ["install"], {
+        cwd: absDir,
+        timeout: 3e5
+      });
+    } catch (installError) {
+      const errMsg = installError instanceof Error ? installError.message : String(installError);
+      spinner.warn("yarn install failed, please install manually");
+      console.log(import_chalk.default.red(`  Error: ${errMsg}`));
+    }
+    spinner.succeed(import_chalk.default.green("Modules added!"));
+    console.log();
+    console.log(import_chalk.default.bold("  \u{1F4CB} Added modules:"));
+    for (const mod of newModuleDefs) {
+      console.log(import_chalk.default.white(`     \u2713 ${mod.name} (${mod.id})`));
+    }
+    console.log();
+    console.log(import_chalk.default.bold("  \u{1F9E9} All installed modules:"));
+    for (const id of config.selectedModules) {
+      const m = getModuleById(id);
+      console.log(import_chalk.default.white(`     \u2022 ${m?.name || id}`));
+    }
+    console.log();
+  } catch (error) {
+    spinner.fail(import_chalk.default.red("Failed to add modules"));
+    console.error(error);
+    process.exit(1);
+  }
+}
+async function updateAppJson(targetDir, selectedModules, _projectName) {
   const appJsonPath = import_path2.default.join(targetDir, "app.json");
+  if (!await import_fs_extra2.default.pathExists(appJsonPath)) {
+    return;
+  }
   const appJson = await import_fs_extra2.default.readJson(appJsonPath);
   const existingPlugins = appJson.expo?.plugins || [];
   for (const mod of selectedModules) {
@@ -3526,41 +4668,55 @@ async function updateAppJson(targetDir, selectedModules, projectName) {
 }
 async function updateBabelConfig(targetDir, selectedModules) {
   const babelPath = import_path2.default.join(targetDir, "babel.config.js");
+  if (!await import_fs_extra2.default.pathExists(babelPath)) {
+    return;
+  }
   let content = await import_fs_extra2.default.readFile(babelPath, "utf-8");
   const extraPlugins = [];
   for (const mod of selectedModules) {
-    if (mod.babelPlugins) {
+    if (mod.babelPlugins && mod.babelPlugins.length > 0) {
       extraPlugins.push(...mod.babelPlugins);
     }
   }
   if (extraPlugins.length > 0) {
-    const pluginStrings = extraPlugins.map((p) => `    "${p}"`).join(",\n");
-    content = content.replace(
-      /plugins:\s*\[([^\]]*)\]/,
-      `plugins: [$1${pluginStrings ? ",\n" + pluginStrings : ""}]`
-    );
-    await import_fs_extra2.default.writeFile(babelPath, content, "utf-8");
+    const pluginsToAdd = extraPlugins.filter((p) => !content.includes(p));
+    if (pluginsToAdd.length > 0) {
+      const pluginStrings = pluginsToAdd.map((p) => `    "${p}"`).join(",\n");
+      content = content.replace(
+        /plugins:\s*\[([^\]]*)\]/,
+        `plugins: [$1${pluginStrings ? ",\n" + pluginStrings : ""}]`
+      );
+      await import_fs_extra2.default.writeFile(babelPath, content, "utf-8");
+    }
   }
 }
 async function updateLayoutFile(targetDir, selectedModules) {
   const layoutPath = import_path2.default.join(targetDir, "app/_layout.tsx");
-  const fs2 = import_fs_extra2.default;
-  let content = await fs2.readFile(layoutPath, "utf-8");
+  if (!await import_fs_extra2.default.pathExists(layoutPath)) {
+    return;
+  }
+  let content = await import_fs_extra2.default.readFile(layoutPath, "utf-8");
   const extraImports = [];
   const extraProviderPairs = [];
   for (const mod of selectedModules) {
     if (mod.layoutImports) {
-      extraImports.push(...mod.layoutImports);
+      for (const imp of mod.layoutImports) {
+        if (!content.includes(imp)) {
+          extraImports.push(imp);
+        }
+      }
     }
     if (mod.layoutProviders) {
       for (const provider of mod.layoutProviders) {
         const match = provider.match(/^<(\w+)/);
         if (match) {
           const tagName = match[1];
-          extraProviderPairs.push({
-            open: `      ${provider}`,
-            close: `      </${tagName}>`
-          });
+          if (!content.includes(`<${tagName}`)) {
+            extraProviderPairs.push({
+              open: `      ${provider}`,
+              close: `      </${tagName}>`
+            });
+          }
         }
       }
     }
@@ -3589,7 +4745,7 @@ async function updateLayoutFile(targetDir, selectedModules) {
       }
     }
   }
-  await fs2.writeFile(layoutPath, content, "utf-8");
+  await import_fs_extra2.default.writeFile(layoutPath, content, "utf-8");
 }
 run().catch((error) => {
   console.error(import_chalk.default.red("Fatal error:"), error);
@@ -3597,7 +4753,9 @@ run().catch((error) => {
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  addModule,
   createProject,
-  run
+  run,
+  upgradeProject
 });
 //# sourceMappingURL=index.js.map