@idealyst/cli 1.0.62 → 1.0.64

package/dist/templates/native/package.json

@@ -21,7 +21,8 @@
     "@trpc/react-query": "^11.5.1",
     "@trpc/server": "^11.5.1",
     "react": "^18.2.0",
-    "react-native": "^0.73.0"
+    "react-native": "^0.73.0",
+    "react-native-svg": "^15.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package/dist/templates/native/src/App-with-trpc-and-shared.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from './utils/trpc';
-import { AppRouter } from '@{{workspaceScope}}/shared';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
 // Create tRPC client using shared factory
 const queryClient = new QueryClient();

package/dist/templates/native/src/App-with-trpc.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from './utils/trpc';
-import AppRouter from './navigation/AppRouter';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
 // Create tRPC client using shared factory
 const queryClient = new QueryClient();

package/dist/templates/native/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavigatorProvider } from '@idealyst/navigation';
-import AppRouter from './navigation/AppRouter';
+import { AppRouter } from '{{workspaceScope}}/shared';
 
 function App() {
   return (

package/dist/templates/shared/package.json

@@ -20,6 +20,7 @@
   },
   "peerDependencies": {
     "@idealyst/components": "^1.0.21",
+    "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
     "@tanstack/react-query": "^5.83.0",
     "@trpc/client": "^11.5.1",
@@ -36,6 +37,7 @@
   },
   "devDependencies": {
     "@idealyst/components": "^1.0.21",
+    "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
     "@tanstack/react-query": "^5.83.0",
     "@trpc/client": "^11.5.1",

package/dist/templates/web/src/App-with-trpc-and-shared.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router-dom';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from './utils/trpc';
-import { AppRouter } from '@{{workspaceScope}}/shared';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
 // Create tRPC client using shared factory
 const queryClient = new QueryClient();

package/dist/templates/web/src/App-with-trpc.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router-dom';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from './utils/trpc';
-import AppRouterWithTrpc from './navigation/AppRouterWithTrpc';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
 // Create tRPC client using shared factory
 const queryClient = new QueryClient();
@@ -23,7 +22,7 @@ function App() {
     <trpc.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
-          <NavigatorProvider route={AppRouterWithTrpc} />
+          <NavigatorProvider route={AppRouter} />
         </BrowserRouter>
       </QueryClientProvider>
     </trpc.Provider>

package/dist/templates/web/src/App.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter } from 'react-router-dom';
 import { NavigatorProvider } from '@idealyst/navigation';
-import AppRouter from './navigation/AppRouter';
+import { AppRouter } from '{{workspaceScope}}/shared';
 
 function App() {
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/cli",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "CLI tool for generating Idealyst Framework projects",
   "readme": "README.md",
   "main": "dist/index.js",

package/templates/native/package.json

@@ -21,7 +21,8 @@
     "@trpc/react-query": "^11.5.1",
     "@trpc/server": "^11.5.1",
     "react": "^18.2.0",
-    "react-native": "^0.73.0"
+    "react-native": "^0.73.0",
+    "react-native-svg": "^15.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package/templates/native/src/App-with-trpc-and-shared.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from './utils/trpc';
-import { AppRouter } from '@{{workspaceScope}}/shared';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
 // Create tRPC client using shared factory
 const queryClient = new QueryClient();

package/templates/native/src/App-with-trpc.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from './utils/trpc';
-import AppRouter from './navigation/AppRouter';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
 // Create tRPC client using shared factory
 const queryClient = new QueryClient();

package/templates/native/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavigatorProvider } from '@idealyst/navigation';
-import AppRouter from './navigation/AppRouter';
+import { AppRouter } from '{{workspaceScope}}/shared';
 
 function App() {
   return (

package/templates/shared/package.json

@@ -20,6 +20,7 @@
   },
   "peerDependencies": {
     "@idealyst/components": "^1.0.21",
+    "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
     "@tanstack/react-query": "^5.83.0",
     "@trpc/client": "^11.5.1",
@@ -36,6 +37,7 @@
   },
   "devDependencies": {
     "@idealyst/components": "^1.0.21",
+    "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
     "@tanstack/react-query": "^5.83.0",
     "@trpc/client": "^11.5.1",

package/templates/web/src/App-with-trpc-and-shared.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router-dom';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from './utils/trpc';
-import { AppRouter } from '@{{workspaceScope}}/shared';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
 // Create tRPC client using shared factory
 const queryClient = new QueryClient();

package/templates/web/src/App-with-trpc.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router-dom';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from './utils/trpc';
-import AppRouterWithTrpc from './navigation/AppRouterWithTrpc';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
 // Create tRPC client using shared factory
 const queryClient = new QueryClient();
@@ -23,7 +22,7 @@ function App() {
     <trpc.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
-          <NavigatorProvider route={AppRouterWithTrpc} />
+          <NavigatorProvider route={AppRouter} />
         </BrowserRouter>
       </QueryClientProvider>
     </trpc.Provider>

package/templates/web/src/App.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter } from 'react-router-dom';
 import { NavigatorProvider } from '@idealyst/navigation';
-import AppRouter from './navigation/AppRouter';
+import { AppRouter } from '{{workspaceScope}}/shared';
 
 function App() {
   return (

package/dist/templates/native/src/navigation/AppRouter.tsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { NavigatorParam } from '@idealyst/navigation';
-import { Screen, Text, View, Icon, Button } from '@idealyst/components';
-
-// Simple API test component for native-only projects
-const ApiTest = () => {
-  const [result, setResult] = React.useState<string>('Tap to test API');
-  
-  const testApi = async () => {
-    try {
-      setResult('Testing...');
-      // Simple fetch test - replace with actual API endpoint  
-      const response = await fetch('http://localhost:3000/api/test');
-      if (response.ok) {
-        setResult('✅ API connection successful!');
-      } else {
-        setResult('❌ API connection failed');
-      }
-    } catch (error) {
-      setResult('❌ API connection failed');
-    }
-  };
-
-  return (
-    <View spacing="sm">
-      <Text size="small">{result}</Text>
-      <Button variant="outlined" onPress={testApi} size="small">
-        Test API
-      </Button>
-    </View>
-  );
-};
-
-const HomeScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Home</Text>
-      <Text size="medium">Welcome to {{appName}}!</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          This app uses tab navigation. Navigate between tabs using the bottom bar.
-        </Text>
-      </View>
-      
-      {/* API Testing Component */}
-      <View spacing="md" style={{ marginTop: 32 }}>
-        <Text size="medium" weight="semibold">API Test</Text>
-        <ApiTest />
-      </View>
-    </View>
-  </Screen>
-);
-
-const ProfileScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Profile</Text>
-      <Text size="medium">User profile and account settings</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Manage your account details and preferences here.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const SettingsScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Settings</Text>
-      <Text size="medium">App configuration and preferences</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Customize your app experience with various settings and options.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const AppRouter: NavigatorParam = {
-  type: 'navigator',
-  path: '/',
-  layout: 'tab',
-  routes: [
-    {
-      type: 'screen',
-      path: '/',
-      component: HomeScreen,
-      options: {
-        title: 'Home',
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/profile',
-      component: ProfileScreen,
-      options: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/settings',
-      component: SettingsScreen,
-      options: {
-        title: 'Settings',
-        tabBarLabel: 'Settings', 
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-  ],
-};
-
-export default AppRouter;

package/dist/templates/web/src/navigation/AppRouter.tsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { NavigatorParam } from '@idealyst/navigation';
-import { Screen, Text, View, Icon } from '@idealyst/components';
-
-// Simple API test component for web-only projects  
-const ApiTest = () => {
-  const [result, setResult] = React.useState<string>('Click to test API');
-  
-  const testApi = async () => {
-    try {
-      setResult('Testing...');
-      // Simple fetch test - replace with actual API endpoint
-      const response = await fetch('/api/test');
-      if (response.ok) {
-        setResult('✅ API connection successful!');
-      } else {
-        setResult('❌ API connection failed');
-      }
-    } catch (error) {
-      setResult('❌ API connection failed');
-    }
-  };
-
-  return (
-    <View spacing="sm">
-      <Text size="small">{result}</Text>
-      <button onClick={testApi} style={{ padding: '8px 16px', marginTop: '8px' }}>
-        Test API
-      </button>
-    </View>
-  );
-};
-
-const HomeScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Home</Text>
-      <Text size="medium">Welcome to your {{projectName}} app!</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          This app uses tab navigation. Navigate between tabs using the top bar or menu.
-        </Text>
-      </View>
-      
-      {/* API Testing Component */}
-      <View spacing="md" style={{ marginTop: 32 }}>
-        <Text size="medium" weight="semibold">API Test</Text>
-        <ApiTest />
-      </View>
-    </View>
-  </Screen>
-);
-
-const ProfileScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Profile</Text>
-      <Text size="medium">User profile and account settings</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Manage your account details and preferences here.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const SettingsScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Settings</Text>
-      <Text size="medium">App configuration and preferences</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Customize your app experience with various settings and options.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const AppRouter: NavigatorParam = {
-  type: 'navigator',
-  path: '/',
-  layout: 'tab',
-  routes: [
-    {
-      type: 'screen',
-      path: '/',
-      component: HomeScreen,
-      options: {
-        title: 'Home',
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/profile',
-      component: ProfileScreen,
-      options: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/settings',
-      component: SettingsScreen,
-      options: {
-        title: 'Settings',
-        tabBarLabel: 'Settings', 
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-  ],
-};
-
-export default AppRouter;

package/dist/templates/web/src/navigation/AppRouterWithTrpc.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import { NavigatorParam } from '@idealyst/navigation';
-import { Screen, Text, View, Icon, Button } from '@idealyst/components';
-import { trpc } from '../utils/trpc';
-
-const HomeScreen = () => {
-  // Example tRPC usage
-  const [name, setName] = React.useState('{{projectName}}');
-  const { data, isLoading, error, refetch } = trpc.hello.useQuery({ name });
-
-  return (
-    <Screen>
-      <View spacing="lg">
-        <Text size="xlarge" weight="bold">Home</Text>
-        <Text size="medium">Welcome to your {{projectName}} app!</Text>
-        <View spacing="md" style={{ marginTop: 24 }}>
-          <Text size="small">
-            This app uses tab navigation with tRPC integration. Navigate between tabs using the top bar or menu.
-          </Text>
-          
-          {/* tRPC API Test */}
-          <View spacing="sm" style={{ marginTop: 20 }}>
-            <Text size="medium" weight="semibold">API Test (tRPC):</Text>
-            <View spacing="xs">
-              <input 
-                type="text" 
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Enter your name"
-                style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
-              />
-              <Button variant="outlined" onPress={() => refetch()} size="small">
-                Test tRPC API
-              </Button>
-            </View>
-            
-            {/* Results */}
-            <View style={{ marginTop: 12 }}>
-              {isLoading && <Text size="small">Loading...</Text>}
-              {error && <Text size="small" color="error">Error: {error.message}</Text>}
-              {data && <Text size="small">✅ {data.greeting}</Text>}
-            </View>
-          </View>
-        </View>
-      </View>
-    </Screen>
-  );
-};
-
-const ProfileScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Profile</Text>
-      <Text size="medium">User profile and account settings</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Manage your account details and preferences here.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const SettingsScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Settings</Text>
-      <Text size="medium">App configuration and preferences</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Customize your app experience with various settings and options.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const AppRouterWithTrpc: NavigatorParam = {
-  type: 'navigator',
-  path: '/',
-  layout: 'tab',
-  routes: [
-    {
-      type: 'screen',
-      path: '/',
-      component: HomeScreen,
-      options: {
-        title: 'Home',
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/profile',
-      component: ProfileScreen,
-      options: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/settings',
-      component: SettingsScreen,
-      options: {
-        title: 'Settings',
-        tabBarLabel: 'Settings', 
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-  ],
-};
-
-export default AppRouterWithTrpc;

package/templates/native/src/navigation/AppRouter.tsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { NavigatorParam } from '@idealyst/navigation';
-import { Screen, Text, View, Icon, Button } from '@idealyst/components';
-
-// Simple API test component for native-only projects
-const ApiTest = () => {
-  const [result, setResult] = React.useState<string>('Tap to test API');
-  
-  const testApi = async () => {
-    try {
-      setResult('Testing...');
-      // Simple fetch test - replace with actual API endpoint  
-      const response = await fetch('http://localhost:3000/api/test');
-      if (response.ok) {
-        setResult('✅ API connection successful!');
-      } else {
-        setResult('❌ API connection failed');
-      }
-    } catch (error) {
-      setResult('❌ API connection failed');
-    }
-  };
-
-  return (
-    <View spacing="sm">
-      <Text size="small">{result}</Text>
-      <Button variant="outlined" onPress={testApi} size="small">
-        Test API
-      </Button>
-    </View>
-  );
-};
-
-const HomeScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Home</Text>
-      <Text size="medium">Welcome to {{appName}}!</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          This app uses tab navigation. Navigate between tabs using the bottom bar.
-        </Text>
-      </View>
-      
-      {/* API Testing Component */}
-      <View spacing="md" style={{ marginTop: 32 }}>
-        <Text size="medium" weight="semibold">API Test</Text>
-        <ApiTest />
-      </View>
-    </View>
-  </Screen>
-);
-
-const ProfileScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Profile</Text>
-      <Text size="medium">User profile and account settings</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Manage your account details and preferences here.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const SettingsScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Settings</Text>
-      <Text size="medium">App configuration and preferences</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Customize your app experience with various settings and options.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const AppRouter: NavigatorParam = {
-  type: 'navigator',
-  path: '/',
-  layout: 'tab',
-  routes: [
-    {
-      type: 'screen',
-      path: '/',
-      component: HomeScreen,
-      options: {
-        title: 'Home',
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/profile',
-      component: ProfileScreen,
-      options: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/settings',
-      component: SettingsScreen,
-      options: {
-        title: 'Settings',
-        tabBarLabel: 'Settings', 
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-  ],
-};
-
-export default AppRouter;

package/templates/web/src/navigation/AppRouter.tsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { NavigatorParam } from '@idealyst/navigation';
-import { Screen, Text, View, Icon } from '@idealyst/components';
-
-// Simple API test component for web-only projects  
-const ApiTest = () => {
-  const [result, setResult] = React.useState<string>('Click to test API');
-  
-  const testApi = async () => {
-    try {
-      setResult('Testing...');
-      // Simple fetch test - replace with actual API endpoint
-      const response = await fetch('/api/test');
-      if (response.ok) {
-        setResult('✅ API connection successful!');
-      } else {
-        setResult('❌ API connection failed');
-      }
-    } catch (error) {
-      setResult('❌ API connection failed');
-    }
-  };
-
-  return (
-    <View spacing="sm">
-      <Text size="small">{result}</Text>
-      <button onClick={testApi} style={{ padding: '8px 16px', marginTop: '8px' }}>
-        Test API
-      </button>
-    </View>
-  );
-};
-
-const HomeScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Home</Text>
-      <Text size="medium">Welcome to your {{projectName}} app!</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          This app uses tab navigation. Navigate between tabs using the top bar or menu.
-        </Text>
-      </View>
-      
-      {/* API Testing Component */}
-      <View spacing="md" style={{ marginTop: 32 }}>
-        <Text size="medium" weight="semibold">API Test</Text>
-        <ApiTest />
-      </View>
-    </View>
-  </Screen>
-);
-
-const ProfileScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Profile</Text>
-      <Text size="medium">User profile and account settings</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Manage your account details and preferences here.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const SettingsScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Settings</Text>
-      <Text size="medium">App configuration and preferences</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Customize your app experience with various settings and options.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const AppRouter: NavigatorParam = {
-  type: 'navigator',
-  path: '/',
-  layout: 'tab',
-  routes: [
-    {
-      type: 'screen',
-      path: '/',
-      component: HomeScreen,
-      options: {
-        title: 'Home',
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/profile',
-      component: ProfileScreen,
-      options: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/settings',
-      component: SettingsScreen,
-      options: {
-        title: 'Settings',
-        tabBarLabel: 'Settings', 
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-  ],
-};
-
-export default AppRouter;

package/templates/web/src/navigation/AppRouterWithTrpc.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import { NavigatorParam } from '@idealyst/navigation';
-import { Screen, Text, View, Icon, Button } from '@idealyst/components';
-import { trpc } from '../utils/trpc';
-
-const HomeScreen = () => {
-  // Example tRPC usage
-  const [name, setName] = React.useState('{{projectName}}');
-  const { data, isLoading, error, refetch } = trpc.hello.useQuery({ name });
-
-  return (
-    <Screen>
-      <View spacing="lg">
-        <Text size="xlarge" weight="bold">Home</Text>
-        <Text size="medium">Welcome to your {{projectName}} app!</Text>
-        <View spacing="md" style={{ marginTop: 24 }}>
-          <Text size="small">
-            This app uses tab navigation with tRPC integration. Navigate between tabs using the top bar or menu.
-          </Text>
-          
-          {/* tRPC API Test */}
-          <View spacing="sm" style={{ marginTop: 20 }}>
-            <Text size="medium" weight="semibold">API Test (tRPC):</Text>
-            <View spacing="xs">
-              <input 
-                type="text" 
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Enter your name"
-                style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
-              />
-              <Button variant="outlined" onPress={() => refetch()} size="small">
-                Test tRPC API
-              </Button>
-            </View>
-            
-            {/* Results */}
-            <View style={{ marginTop: 12 }}>
-              {isLoading && <Text size="small">Loading...</Text>}
-              {error && <Text size="small" color="error">Error: {error.message}</Text>}
-              {data && <Text size="small">✅ {data.greeting}</Text>}
-            </View>
-          </View>
-        </View>
-      </View>
-    </Screen>
-  );
-};
-
-const ProfileScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Profile</Text>
-      <Text size="medium">User profile and account settings</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Manage your account details and preferences here.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const SettingsScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xlarge" weight="bold">Settings</Text>
-      <Text size="medium">App configuration and preferences</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
-          Customize your app experience with various settings and options.
-        </Text>
-      </View>
-    </View>
-  </Screen>
-);
-
-const AppRouterWithTrpc: NavigatorParam = {
-  type: 'navigator',
-  path: '/',
-  layout: 'tab',
-  routes: [
-    {
-      type: 'screen',
-      path: '/',
-      component: HomeScreen,
-      options: {
-        title: 'Home',
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/profile',
-      component: ProfileScreen,
-      options: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    {
-      type: 'screen',
-      path: '/settings',
-      component: SettingsScreen,
-      options: {
-        title: 'Settings',
-        tabBarLabel: 'Settings', 
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-  ],
-};
-
-export default AppRouterWithTrpc;