@idealyst/cli 1.0.61 → 1.0.63

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,26 +1,20 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc } from './utils/trpc';
-import { AppRouter } from '@{{workspaceScope}}/shared';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
-// Create tRPC client
+// Create tRPC client using shared factory
 const queryClient = new QueryClient();
 
-const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: 'http://localhost:3000/trpc', // Update this to your API URL
-      // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
-      // Optional: Add headers for authentication
-      // headers() {
-      //   return {
-      //     authorization: getAuthToken(),
-      //   };
-      // },
-    }),
-  ],
+const trpcClient = createTRPCClient({
+  apiUrl: 'http://localhost:3000/trpc', // Update this to your API URL
+  // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
+  // Optional: Add headers for authentication
+  // headers() {
+  //   return {
+  //     authorization: getAuthToken(),
+  //   };
+  // },
 });
 
 function App() {

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

@@ -1,26 +1,20 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc } from './utils/trpc';
-import AppRouter from './navigation/AppRouter';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
-// Create tRPC client
+// Create tRPC client using shared factory
 const queryClient = new QueryClient();
 
-const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: 'http://localhost:3000/trpc', // Update this to your API URL
-      // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
-      // Optional: Add headers for authentication
-      // headers() {
-      //   return {
-      //     authorization: getAuthToken(),
-      //   };
-      // },
-    }),
-  ],
+const trpcClient = createTRPCClient({
+  apiUrl: 'http://localhost:3000/trpc', // Update this to your API URL
+  // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
+  // Optional: Add headers for authentication
+  // headers() {
+  //   return {
+  //     authorization: getAuthToken(),
+  //   };
+  // },
 });
 
 function App() {

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,13 +20,15 @@
   },
   "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",
     "@trpc/react-query": "^11.5.1",
     "@trpc/server": "^11.5.1",
     "react": "^19.1.0",
-    "react-native": "^0.80.1"
+    "react-native": "^0.80.1",
+    "{{workspaceScope}}/api": "*"
   },
   "peerDependenciesMeta": {
     "react-native": {
@@ -35,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/shared/src/navigation/AppRouter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteParam } from '@idealyst/navigation';
+import { NavigatorParam } from '@idealyst/navigation';
 import { Screen, Text, View, Icon } from '@idealyst/components';
 import { HelloWorld } from '../components/HelloWorld';
 
@@ -51,24 +51,28 @@ const SettingsScreen = () => (
   </Screen>
 );
 
-const AppRouter: RouteParam = {
-  path: "/",
-  component: HomeScreen,
-  layout: {
-    type: "tab",
-  },
-  screenOptions: {
-    title: 'Home',
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ focused, size }) => (
-      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-    ),
-  },
+const AppRouter: NavigatorParam = {
+  type: 'navigator',
+  path: '/',
+  layout: 'tab',
   routes: [
-    { 
-      path: "profile", 
+    {
+      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,
-      screenOptions: {
+      options: {
         title: 'Profile',
         tabBarLabel: 'Profile',
         tabBarIcon: ({ focused, size }) => (
@@ -76,10 +80,11 @@ const AppRouter: RouteParam = {
         ),
       },
     },
-    { 
-      path: "settings", 
+    {
+      type: 'screen',
+      path: '/settings',
       component: SettingsScreen,
-      screenOptions: {
+      options: {
         title: 'Settings',
         tabBarLabel: 'Settings', 
         tabBarIcon: ({ focused, size }) => (

package/dist/templates/shared/src/trpc/client.ts

@@ -1,9 +1,10 @@
-import { createTRPCReact } from '@trpc/react-query';
-import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
-import type { AppRouter } from '@{{workspaceScope}}/api';
+import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import type { AppRouter } from "@{{workspaceScope}}/api";
 
 // Create the tRPC React hooks with full type safety
-export const trpc = createTRPCReact<AppRouter>();
+export const trpc: ReturnType<typeof createTRPCReact<AppRouter>> =
+  createTRPCReact<AppRouter>();
 
 // Configuration for tRPC client
 export interface TRPCClientConfig {
@@ -12,7 +13,9 @@ export interface TRPCClientConfig {
 }
 
 // Create tRPC client factory
-export function createTRPCClient(config: TRPCClientConfig) {
+export function createTRPCClient(
+  config: TRPCClientConfig
+): ReturnType<typeof trpc.createClient> {
   return trpc.createClient({
     links: [
       httpBatchLink({
@@ -24,7 +27,9 @@ export function createTRPCClient(config: TRPCClientConfig) {
 }
 
 // Create a vanilla client (for use outside of React components)
-export function createVanillaTRPCClient(config: TRPCClientConfig) {
+export function createVanillaTRPCClient(
+  config: TRPCClientConfig
+): ReturnType<typeof createTRPCProxyClient<AppRouter>> {
   return createTRPCProxyClient<AppRouter>({
     links: [
       httpBatchLink({
@@ -36,4 +41,4 @@ export function createVanillaTRPCClient(config: TRPCClientConfig) {
 }
 
 // Export types
-export type { AppRouter } from '@{{workspaceScope}}/api';
+export type { AppRouter } from "@{{workspaceScope}}/api";

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

@@ -1,26 +1,20 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
 import { BrowserRouter } from 'react-router-dom';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc } from './utils/trpc';
-import { AppRouter } from '@{{workspaceScope}}/shared';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
-// Create tRPC client
+// Create tRPC client using shared factory
 const queryClient = new QueryClient();
 
-const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: 'http://localhost:3000/trpc', // Update this to match your API URL
-      // Optional: Add headers for authentication
-      // headers() {
-      //   return {
-      //     authorization: getAuthToken(),
-      //   };
-      // },
-    }),
-  ],
+const trpcClient = createTRPCClient({
+  apiUrl: 'http://localhost:3000/trpc', // Update this to match your API URL
+  // Optional: Add headers for authentication
+  // headers() {
+  //   return {
+  //     authorization: getAuthToken(),
+  //   };
+  // },
 });
 
 function App() {

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

@@ -1,26 +1,20 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
 import { BrowserRouter } from 'react-router-dom';
 import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc } from './utils/trpc';
-import AppRouterWithTrpc from './navigation/AppRouterWithTrpc';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
 
-// Create tRPC client
+// Create tRPC client using shared factory
 const queryClient = new QueryClient();
 
-const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: 'http://localhost:3000/trpc', // Update this to match your API URL
-      // Optional: Add headers for authentication
-      // headers() {
-      //   return {
-      //     authorization: getAuthToken(),
-      //   };
-      // },
-    }),
-  ],
+const trpcClient = createTRPCClient({
+  apiUrl: 'http://localhost:3000/trpc', // Update this to match your API URL
+  // Optional: Add headers for authentication
+  // headers() {
+  //   return {
+  //     authorization: getAuthToken(),
+  //   };
+  // },
 });
 
 function App() {
@@ -28,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.61",
+  "version": "1.0.63",
   "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/shared/src/navigation/AppRouter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteParam } from '@idealyst/navigation';
+import { NavigatorParam } from '@idealyst/navigation';
 import { Screen, Text, View, Icon } from '@idealyst/components';
 import { HelloWorld } from '../components/HelloWorld';
 
@@ -51,24 +51,28 @@ const SettingsScreen = () => (
   </Screen>
 );
 
-const AppRouter: RouteParam = {
-  path: "/",
-  component: HomeScreen,
-  layout: {
-    type: "tab",
-  },
-  screenOptions: {
-    title: 'Home',
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ focused, size }) => (
-      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-    ),
-  },
+const AppRouter: NavigatorParam = {
+  type: 'navigator',
+  path: '/',
+  layout: 'tab',
   routes: [
-    { 
-      path: "profile", 
+    {
+      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,
-      screenOptions: {
+      options: {
         title: 'Profile',
         tabBarLabel: 'Profile',
         tabBarIcon: ({ focused, size }) => (
@@ -76,10 +80,11 @@ const AppRouter: RouteParam = {
         ),
       },
     },
-    { 
-      path: "settings", 
+    {
+      type: 'screen',
+      path: '/settings',
       component: SettingsScreen,
-      screenOptions: {
+      options: {
         title: 'Settings',
         tabBarLabel: 'Settings', 
         tabBarIcon: ({ focused, size }) => (

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,121 +0,0 @@
-import React from 'react';
-import { RouteParam } 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: RouteParam = {
-  path: "/",
-  component: HomeScreen,
-  layout: {
-    type: "tab",
-  },
-  screenOptions: {
-    title: 'Home',
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ focused, size }) => (
-      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-    ),
-  },
-  routes: [
-    { 
-      path: "profile", 
-      component: ProfileScreen,
-      screenOptions: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    { 
-      path: "settings", 
-      component: SettingsScreen,
-      screenOptions: {
-        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,121 +0,0 @@
-import React from 'react';
-import { RouteParam } 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: RouteParam = {
-  path: "/",
-  component: HomeScreen,
-  layout: {
-    type: "tab",
-  },
-  screenOptions: {
-    title: 'Home',
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ focused, size }) => (
-      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-    ),
-  },
-  routes: [
-    { 
-      path: "profile", 
-      component: ProfileScreen,
-      screenOptions: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    { 
-      path: "settings", 
-      component: SettingsScreen,
-      screenOptions: {
-        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,117 +0,0 @@
-import React from 'react';
-import { RouteParam } 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: RouteParam = {
-  path: "/",
-  component: HomeScreen,
-  layout: {
-    type: "tab",
-  },
-  screenOptions: {
-    title: 'Home',
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ focused, size }) => (
-      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-    ),
-  },
-  routes: [
-    { 
-      path: "profile", 
-      component: ProfileScreen,
-      screenOptions: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    { 
-      path: "settings", 
-      component: SettingsScreen,
-      screenOptions: {
-        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,121 +0,0 @@
-import React from 'react';
-import { RouteParam } 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: RouteParam = {
-  path: "/",
-  component: HomeScreen,
-  layout: {
-    type: "tab",
-  },
-  screenOptions: {
-    title: 'Home',
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ focused, size }) => (
-      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-    ),
-  },
-  routes: [
-    { 
-      path: "profile", 
-      component: ProfileScreen,
-      screenOptions: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    { 
-      path: "settings", 
-      component: SettingsScreen,
-      screenOptions: {
-        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,121 +0,0 @@
-import React from 'react';
-import { RouteParam } 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: RouteParam = {
-  path: "/",
-  component: HomeScreen,
-  layout: {
-    type: "tab",
-  },
-  screenOptions: {
-    title: 'Home',
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ focused, size }) => (
-      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-    ),
-  },
-  routes: [
-    { 
-      path: "profile", 
-      component: ProfileScreen,
-      screenOptions: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    { 
-      path: "settings", 
-      component: SettingsScreen,
-      screenOptions: {
-        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,117 +0,0 @@
-import React from 'react';
-import { RouteParam } 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: RouteParam = {
-  path: "/",
-  component: HomeScreen,
-  layout: {
-    type: "tab",
-  },
-  screenOptions: {
-    title: 'Home',
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ focused, size }) => (
-      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
-    ),
-  },
-  routes: [
-    { 
-      path: "profile", 
-      component: ProfileScreen,
-      screenOptions: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-    { 
-      path: "settings", 
-      component: SettingsScreen,
-      screenOptions: {
-        title: 'Settings',
-        tabBarLabel: 'Settings', 
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
-        ),
-      },
-    },
-  ],
-};
-
-export default AppRouterWithTrpc;