@digilogiclabs/create-saas-app 1.17.0 → 1.17.1

package/dist/templates/mobile/ui-auth-payments-ai/template/metro.config.js

@@ -0,0 +1,11 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+// Add SVG support
+config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer');
+config.resolver.assetExts = config.resolver.assetExts.filter((ext) => ext !== 'svg');
+config.resolver.sourceExts = [...config.resolver.sourceExts, 'svg'];
+
+module.exports = config;

package/dist/templates/mobile/ui-auth-payments-ai/template/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "{{packageName}}",
+  "version": "1.0.0",
+  "description": "{{description}} - Mobile AI App with UI, Auth, Payments, and AI Generation",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "dev": "expo start --dev-client",
+    "android": "expo start --android",
+    "ios": "expo start --ios", 
+    "web": "expo start --web",
+    "build": "eas build",
+    "build:android": "eas build --platform android",
+    "build:ios": "eas build --platform ios",
+    "preview": "eas build --profile preview",
+    "submit": "eas submit",
+    "test": "jest",
+    "lint": "expo lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "expo": "~50.0.0",
+    "react": "18.2.0",
+    "react-native": "0.73.4",
+    
+    "@expo/vector-icons": "^14.0.0",
+    "@expo/config-plugins": "~7.8.0",
+    
+    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/stack": "^6.3.20",
+    "@react-navigation/bottom-tabs": "^6.5.11",
+    "@react-navigation/drawer": "^6.6.6",
+    "react-native-screens": "~3.29.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-reanimated": "~3.6.2",
+    
+    "@digilogiclabs/saas-factory-ui": "^0.22.0",
+    "@digilogiclabs/saas-factory-auth": "^1.0.1", 
+    "@digilogiclabs/saas-factory-payments": "^1.1.0",
+    "@digilogiclabs/saas-factory-ai": "^3.0.0",
+    "@digilogiclabs/saas-factory-ai-types": "^3.0.0",
+    
+    "@supabase/supabase-js": "^2.39.0",
+    "@react-native-async-storage/async-storage": "1.21.0",
+    
+    "@stripe/stripe-react-native": "0.37.2",
+    
+    "expo-router": "~3.4.0",
+    "expo-font": "~11.10.0",
+    "expo-linking": "~6.2.2",
+    "expo-constants": "~15.4.0",
+    "expo-status-bar": "~1.11.1",
+    "expo-splash-screen": "~0.26.4",
+    "expo-system-ui": "~2.9.3",
+    "expo-web-browser": "~12.8.2",
+    "expo-haptics": "~12.8.1",
+    "expo-device": "~5.9.3",
+    "expo-location": "~16.5.3",
+    "expo-image-picker": "~14.7.1",
+    "expo-camera": "~14.1.3",
+    "expo-barcode-scanner": "~12.9.3",
+    "expo-notifications": "~0.27.6",
+    "expo-secure-store": "~12.8.1",
+    "expo-file-system": "~16.0.6",
+    "expo-updates": "~0.24.11",
+    "expo-linear-gradient": "~12.7.2",
+    "expo-blur": "~12.9.2",
+    
+    "@react-native-community/netinfo": "11.2.1",
+    "react-native-mmkv": "^2.12.2",
+    "react-native-svg": "14.1.0",
+    "react-native-url-polyfill": "^2.0.0",
+    
+    "zustand": "^4.4.7",
+    "react-hook-form": "^7.48.2",
+    "@hookform/resolvers": "^3.3.2",
+    "zod": "^3.22.4",
+    "date-fns": "^3.0.6",
+    "react-native-heroicons": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.6",
+    "@types/react": "~18.2.45",
+    "@types/react-native": "~0.73.0",
+    "typescript": "~5.3.3",
+    "jest": "^29.7.0",
+    "@testing-library/react-native": "^12.4.2",
+    "@testing-library/jest-native": "^5.4.3",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-expo": "^7.0.0",
+    "prettier": "^3.1.1"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "setupFilesAfterEnv": ["<rootDir>/jest-setup.ts"],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
+    ]
+  },
+  "private": true,
+  "expo": {
+    "install": {
+      "exclude": ["react-native-safe-area-context"]
+    }
+  }
+}

package/dist/templates/mobile/ui-auth-payments-ai/template/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/*": ["./components/*"],
+      "@/hooks/*": ["./hooks/*"], 
+      "@/utils/*": ["./utils/*"],
+      "@/types/*": ["./types/*"],
+      "@/constants/*": ["./constants/*"]
+    },
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/dist/templates/web/base/template/src/app/loading.tsx

@@ -1,34 +1,52 @@
-import { Card } from '@digilogiclabs/saas-factory-ui'
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
 
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
-      <Card className="p-8 max-w-sm w-full mx-4">
-        <div className="flex flex-col items-center space-y-4">
-          {/* Animated spinner */}
-          <div className="relative">
-            <div className="w-12 h-12 border-4 border-gray-200 dark:border-gray-700 rounded-full animate-spin"></div>
-            <div className="absolute top-0 left-0 w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
-          </div>
-          
-          {/* Loading text */}
-          <div className="text-center">
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-              Loading...
-            </h2>
-            <p className="text-sm text-gray-600 dark:text-gray-300">
-              Please wait while we prepare your content
-            </p>
-          </div>
-          
-          {/* Pulsing dots */}
-          <div className="flex space-x-1">
-            <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse"></div>
-            <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
-            <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style={{ animationDelay: '0.4s' }}></div>
-          </div>
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-8">
+        {/* Header skeleton */}
+        <div className="mb-8">
+          <SkeletonText className="h-8 w-64 mb-4" />
+          <SkeletonText className="h-4 w-96" />
         </div>
-      </Card>
+
+        {/* Cards grid skeleton */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* Centered loading spinner */}
+        <div className="flex justify-center">
+          <Card className="p-8 max-w-sm w-full mx-4">
+            <div className="flex flex-col items-center space-y-4">
+              {/* Animated spinner */}
+              <div className="relative">
+                <div className="w-12 h-12 border-4 border-gray-200 dark:border-gray-700 rounded-full animate-spin"></div>
+                <div className="absolute top-0 left-0 w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+              </div>
+              
+              {/* Loading text */}
+              <div className="text-center">
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  Loading...
+                </h2>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Please wait while we prepare your content
+                </p>
+              </div>
+              
+              {/* Pulsing dots */}
+              <div className="flex space-x-1">
+                <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse"></div>
+                <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
+                <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style={{ animationDelay: '0.4s' }}></div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
     </div>
   )
 }

package/dist/templates/web/base/template/src/components/providers/app-providers.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { ThemeProvider } from 'next-themes'
 import { StripeProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -25,6 +26,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         >
           <AppThemeProvider themeColor="{{themeColor}}">
             {children}
+            <Toaster />
           </AppThemeProvider>
         </ThemeProvider>
       </StripeProvider>

package/dist/templates/web/ui-auth/template/src/app/loading.tsx

@@ -1,20 +1,38 @@
-import { Card } from '@digilogiclabs/saas-factory-ui'
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
 import { Loader2 } from 'lucide-react'
 
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md p-8 text-center">
-        <div className="flex flex-col items-center">
-          <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
-          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-            Loading
-          </h2>
-          <p className="text-sm text-gray-600 dark:text-gray-300">
-            Please wait while we load your content...
-          </p>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="container mx-auto px-4 py-8">
+        {/* Header skeleton */}
+        <div className="mb-8">
+          <SkeletonText className="h-8 w-64 mb-4" />
+          <SkeletonText className="h-4 w-96" />
         </div>
-      </Card>
+
+        {/* Cards grid skeleton */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* Centered loading spinner */}
+        <div className="flex justify-center">
+          <Card className="w-full max-w-md p-8 text-center">
+            <div className="flex flex-col items-center">
+              <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
+              <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                Loading
+              </h2>
+              <p className="text-sm text-gray-600 dark:text-gray-300">
+                Please wait while we load your content...
+              </p>
+            </div>
+          </Card>
+        </div>
+      </div>
     </div>
   )
 }

package/dist/templates/web/ui-auth/template/src/components/providers/app-providers.tsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -21,6 +22,7 @@ export function AppProviders({ children }: AppProvidersProps) {
       <AuthProvider>
         <AppThemeProvider themeColor="{{themeColor}}">
           {children}
+          <Toaster />
         </AppThemeProvider>
       </AuthProvider>
     </ThemeProvider>

package/dist/templates/web/ui-auth/template/src/components/shared/header.tsx

@@ -1,17 +1,27 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
-import { LogOut } from 'lucide-react';
+import { LogOut, Search, Command } from 'lucide-react';
+import { SearchBar, CommandPalette, useToast } from '@digilogiclabs/saas-factory-ui';
 import { ThemeToggle } from '../ui/theme-toggle';
 
 export function Header() {
   const user = null; // Placeholder for auth state
+  const [showSearch, setShowSearch] = useState(false);
+  const { toast } = useToast();
   
   const handleSignOut = () => {
     alert('Sign out functionality requires @digilogiclabs/saas-factory-auth package');
   };
 
+  const handleSearch = (query: string) => {
+    toast({
+      title: "Search",
+      description: `Searching for: ${query}`,
+    });
+  };
+
   return (
     <header className="bg-white dark:bg-gray-800 shadow-md">
       <div className="container mx-auto px-4 py-4 flex justify-between items-center">
@@ -19,6 +29,25 @@ export function Header() {
           {{titleCaseName}}
         </Link>
         <nav className="flex items-center gap-4">
+          {/* Search Bar */}
+          <div className="hidden md:block">
+            <SearchBar
+              placeholder="Search..."
+              onSearch={handleSearch}
+              debounceMs={300}
+              className="w-64"
+            />
+          </div>
+          
+          {/* Mobile search toggle */}
+          <button
+            onClick={() => setShowSearch(!showSearch)}
+            className="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+          >
+            <Search className="h-5 w-5" />
+          </button>
+
+          <CommandPalette />
           <ThemeToggle />
           {user ? (
             <>
@@ -46,6 +75,18 @@ export function Header() {
             </>
           )}
         </nav>
+        
+        {/* Mobile search bar */}
+        {showSearch && (
+          <div className="md:hidden absolute top-full left-0 right-0 p-4 bg-white dark:bg-gray-800 border-t">
+            <SearchBar
+              placeholder="Search..."
+              onSearch={handleSearch}
+              debounceMs={300}
+              autoFocus
+            />
+          </div>
+        )}
       </div>
     </header>
   );

package/dist/templates/web/ui-auth-ai/template/package.json

@@ -19,7 +19,7 @@
     "clsx": "^2.0.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31"{{#ai.enabled}},
+    "postcss": "^8.4.31",{{#ai.enabled}}
     "@digilogiclabs/saas-factory-ai": "^3.0.0",
     "@digilogiclabs/saas-factory-ai-types": "^3.0.0"{{/ai.enabled}}
   },

package/dist/templates/web/ui-auth-payments/template/src/components/providers/app-providers.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -23,6 +24,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor="{{themeColor}}">
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>

package/dist/templates/web/ui-auth-payments-ai/template/src/components/providers/app-providers.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -27,6 +28,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor={themeColor}>
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>

package/dist/templates/web/ui-auth-payments-audio/template/src/components/providers/app-providers.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -27,6 +28,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor={themeColor}>
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>

package/dist/templates/web/ui-auth-payments-video/template/src/components/providers/app-providers.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -23,6 +24,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor="{{themeColor}}">
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digilogiclabs/create-saas-app",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "description": "Create modern SaaS applications with Digi Logic Labs packages",
   "main": "dist/cli/index.js",
   "bin": {

package/src/templates/mobile/base/template/App.tsx

@@ -11,6 +11,7 @@ import {
   NativeMobileContainer as MobileContainer,
   NativeNetworkAwareContent as NetworkAwareContent,
   NativeOfflineWrapper as OfflineWrapper,
+  NativeToast as Toast,
   useNetworkInfo,
   useOfflineState
 } from '@digilogiclabs/saas-factory-ui/native';
@@ -89,6 +90,7 @@ function AppContent() {
           </NetworkAwareContent>
         </MobileContainer>
       </OfflineWrapper>
+      <Toast />
       <StatusBar style="auto" />
     </PageTransition>
   );

package/src/templates/mobile/ui-auth-payments/template/app/(tabs)/index.tsx

@@ -13,6 +13,8 @@ import {
   NativeProgressRing as ProgressRing,
   NativeChart as Chart,
   NativeStatCard as StatCard,
+  NativeSkeletonCard as SkeletonCard,
+  NativeSkeletonText as SkeletonText,
   PageTransition,
   NetworkAwareContent,
   NativeMobileHero as MobileHero,
@@ -188,11 +190,59 @@ export default function HomeScreen() {
 
   if (loading && !data) {
     return (
-      <MobileContainer style={styles.container}>
-        <View style={styles.loadingContainer}>
-          <Text style={styles.loadingText}>Loading dashboard...</Text>
+      <PageTransition type="fade">
+        <View style={styles.container}>
+          <LinearGradient
+            colors={
+              isDark
+                ? ['#0F172A', '#1E293B', '#334155']
+                : ['#F8FAFC', '#E2E8F0', '#CBD5E1']
+            }
+            style={styles.gradientBackground}
+          />
+          
+          <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent}>
+            <MobileContainer style={styles.content}>
+              {/* Hero skeleton */}
+              <View style={styles.heroSkeleton}>
+                <SkeletonText style={{ width: '60%', height: 24, marginBottom: 16 }} />
+                <SkeletonText style={{ width: '80%', height: 16, marginBottom: 24 }} />
+                <View style={styles.buttonSkeletonRow}>
+                  <SkeletonCard style={styles.buttonSkeleton} />
+                  <SkeletonCard style={styles.buttonSkeleton} />
+                </View>
+              </View>
+              
+              {/* Stats skeleton */}
+              <View style={styles.statsGrid}>
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <SkeletonCard key={i} style={styles.statCard} />
+                ))}
+              </View>
+              
+              {/* Chart skeleton */}
+              <SkeletonCard style={styles.chartCard} />
+              
+              {/* Actions skeleton */}
+              <SkeletonCard style={styles.actionsCard} />
+              
+              {/* Activity skeleton */}
+              <View style={styles.activitySkeleton}>
+                <SkeletonCard style={styles.activityCard} />
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <View key={i} style={styles.activityItemSkeleton}>
+                    <SkeletonCard style={styles.activityIconSkeleton} />
+                    <View style={styles.activityContentSkeleton}>
+                      <SkeletonText style={{ width: '70%', height: 14, marginBottom: 4 }} />
+                      <SkeletonText style={{ width: '40%', height: 12 }} />
+                    </View>
+                  </View>
+                ))}
+              </View>
+            </MobileContainer>
+          </ScrollView>
         </View>
-      </MobileContainer>
+      </PageTransition>
     );
   }
 
@@ -673,4 +723,35 @@ const styles = StyleSheet.create({
     color: '#64748b',
     marginTop: 2,
   },
+  // Skeleton styles
+  heroSkeleton: {
+    marginBottom: 32,
+    paddingHorizontal: 20,
+  },
+  buttonSkeletonRow: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  buttonSkeleton: {
+    flex: 1,
+    height: 44,
+    borderRadius: 22,
+  },
+  activitySkeleton: {
+    padding: 16,
+  },
+  activityItemSkeleton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 16,
+  },
+  activityIconSkeleton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+  },
+  activityContentSkeleton: {
+    flex: 1,
+  },
 });

package/src/templates/mobile/ui-auth-payments/template/app/_layout.tsx

@@ -12,6 +12,7 @@ import {
   OfflineWrapper,
   NetworkAwareContent,
   NativeHapticsProvider as HapticsProvider,
+  NativeToast as Toast,
   AppShell
 } from '@digilogiclabs/saas-factory-ui/native';
 
@@ -112,6 +113,7 @@ export default function RootLayout() {
                         />
                       </Stack>
                     </AppShell>
+                    <Toast />
                     <StatusBar style="auto" />
                   </StripeProvider>
                 </AuthProvider>

package/src/templates/mobile/ui-auth-payments-ai/template/.env.example

@@ -0,0 +1,23 @@
+# Supabase Configuration
+EXPO_PUBLIC_SUPABASE_URL=your_supabase_project_url
+EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+
+# Stripe Configuration
+EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
+
+# AI Configuration - OpenAI
+EXPO_PUBLIC_OPENAI_API_KEY=your_openai_api_key
+
+# AI Configuration - ElevenLabs (for audio generation)
+EXPO_PUBLIC_ELEVENLABS_API_KEY=your_elevenlabs_api_key
+
+# AI Configuration - Replicate (for video/image generation)
+EXPO_PUBLIC_REPLICATE_API_TOKEN=your_replicate_api_token
+
+# Optional: Custom AI model configurations
+EXPO_PUBLIC_AI_MODEL_TEXT=gpt-4
+EXPO_PUBLIC_AI_MODEL_AUDIO=tts-1
+EXPO_PUBLIC_AI_MODEL_VIDEO=stability-ai/stable-video-diffusion
+
+# Development
+EXPO_PUBLIC_DEV_MODE=true