@idealyst/cli 1.0.87 → 1.0.88

package/package.json

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

package/templates/shared/src/components/App.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient } from '../trpc/client';
-import AppRouter from '../navigation/AppRouter';
+import { NavigatorProvider } from "@idealyst/navigation";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+import AppRouter from "../navigation/AppRouter";
+import { createTRPCClient, trpc } from "../trpc/client";
 
 interface AppProps {
   apiUrl?: string;
@@ -15,7 +15,6 @@ const defaultQueryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 1000 * 60 * 5, // 5 minutes
-      cacheTime: 1000 * 60 * 10, // 10 minutes
     },
   },
 });
@@ -24,10 +23,10 @@ const defaultQueryClient = new QueryClient({
  * Unified App component that sets up tRPC, React Query providers, and Navigation
  * This component can be used by both web and mobile platforms
  */
-export const App: React.FC<AppProps> = ({ 
-  apiUrl = 'http://localhost:3000/trpc',
+export const App: React.FC<AppProps> = ({
+  apiUrl = "http://localhost:3000/trpc",
   queryClient = defaultQueryClient,
-  headers
+  headers,
 }) => {
   // Create tRPC client with the provided configuration
   const trpcClient = createTRPCClient({

package/templates/shared/src/components/HelloWorld.tsx

@@ -79,7 +79,7 @@ export const HelloWorld = ({
           {platformText}
         </Text>
         {/* Framework Branding Card */}
-        <Card variant="elevated" padding="lg" intent="primary">
+        <Card type="elevated" padding="lg" intent="primary">
           <View style={{ alignItems: "center" }}>
             <Text style={{ fontSize: 32, marginBottom: 16 }}>🚀</Text>
             <Text
@@ -89,10 +89,7 @@ export const HelloWorld = ({
             >
               Idealyst Framework
             </Text>
-            <Text
-              size="md"
-              style={{ marginBottom: 16, textAlign: "center" }}
-            >
+            <Text size="md" style={{ marginBottom: 16, textAlign: "center" }}>
               Hello, {name}! Welcome to your cross-platform workspace.
             </Text>
 
@@ -106,7 +103,7 @@ export const HelloWorld = ({
               }}
             >
               <Card
-                variant="filled"
+                type="filled"
                 padding="sm"
                 style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
               >
@@ -115,7 +112,7 @@ export const HelloWorld = ({
                 </Text>
               </Card>
               <Card
-                variant="filled"
+                type="filled"
                 padding="sm"
                 style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
               >
@@ -124,7 +121,7 @@ export const HelloWorld = ({
                 </Text>
               </Card>
               <Card
-                variant="filled"
+                type="filled"
                 padding="sm"
                 style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
               >
@@ -137,7 +134,7 @@ export const HelloWorld = ({
         </Card>
 
         {/* Quick Start Guide Card */}
-        <Card variant="outlined" padding="lg" style={{ marginTop: 16 }}>
+        <Card type="outlined" padding="lg" style={{ marginTop: 16 }}>
           <Text size="lg" weight="bold" style={{ marginBottom: 16 }}>
             🎯 Quick Start Guide
           </Text>
@@ -182,7 +179,7 @@ export const HelloWorld = ({
             </Text>
           </View>
 
-          <Card variant="filled" intent="success" padding="md">
+          <Card type="filled" intent="success" padding="md">
             <Text size="sm" weight="semibold" style={{ marginBottom: 4 }}>
               ✨ Framework Features:
             </Text>
@@ -194,7 +191,7 @@ export const HelloWorld = ({
         </Card>
 
         {/* API Testing Section */}
-        <Card variant="outlined" padding="lg" style={{ marginTop: 16 }}>
+        <Card type="outlined" padding="lg" style={{ marginTop: 16 }}>
           <Text size="lg" weight="bold" style={{ marginBottom: 16 }}>
             🚀 API Demo - Database Integration
           </Text>
@@ -205,7 +202,7 @@ export const HelloWorld = ({
 
           {/* Create New Test Form */}
           <Card
-            variant="filled"
+            type="filled"
             padding="md"
             style={{ marginBottom: 16, backgroundColor: "#f8fafc" }}
           >
@@ -229,11 +226,11 @@ export const HelloWorld = ({
                 disabled={
                   !newTestName ||
                   !newTestMessage ||
-                  createTestMutation.isLoading
+                  createTestMutation.isPending
                 }
                 style={{ alignSelf: "flex-start" }}
               >
-                {createTestMutation.isLoading ? "Creating..." : "Create Test"}
+                {createTestMutation.isPending ? "Creating..." : "Create Test"}
               </Button>
             </View>
           </Card>
@@ -244,14 +241,14 @@ export const HelloWorld = ({
               Database Records ({tests.data?.length || 0})
             </Text>
 
-            {tests.isLoading ? (
-              <Card variant="outlined" padding="md">
+            {tests.isPending ? (
+              <Card type="outlined" padding="md">
                 <Text size="sm" style={{ color: "#64748b" }}>
                   Loading tests...
                 </Text>
               </Card>
             ) : tests.data?.length === 0 ? (
-              <Card variant="outlined" padding="md">
+              <Card type="outlined" padding="md">
                 <Text size="sm" style={{ color: "#64748b" }}>
                   No tests found. Create one above!
                 </Text>
@@ -259,7 +256,7 @@ export const HelloWorld = ({
             ) : (
               <View style={{ gap: 8 }}>
                 {tests.data?.map((test: any) => (
-                  <Card key={test.id} variant="outlined" padding="md">
+                  <Card key={test.id} type="outlined" padding="md">
                     <View
                       style={{
                         flexDirection: "row",
@@ -287,10 +284,10 @@ export const HelloWorld = ({
                         </Text>
                       </View>
                       <Button
-                        variant="destructive"
+                        intent="error"
                         size="sm"
                         onPress={() => handleDeleteTest(test.id)}
-                        disabled={deleteTestMutation.isLoading}
+                        disabled={deleteTestMutation.isPending}
                       >
                         Delete
                       </Button>

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

@@ -1,98 +1,565 @@
-import React from 'react';
-import { NavigatorParam } from '@idealyst/navigation';
-import { Screen, Text, View, Icon } from '@idealyst/components';
-import { HelloWorld } from '../components/HelloWorld';
+import {
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Chip,
+  Icon,
+  Progress,
+  Screen,
+  Slider,
+  Switch,
+  Text,
+  View,
+} from "@idealyst/components";
+import { NavigatorParam } from "@idealyst/navigation";
+import { useState } from "react";
+import { HelloWorld } from "../components/HelloWorld";
 
-const HomeScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xl" weight="bold">Home</Text>
-      <Text size="md">Welcome to your {{projectName}} app!</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="sm">
-          This app uses tab navigation. Navigate between tabs using the bottom bar on mobile or the top tabs on web.
-        </Text>
+// Dashboard Screen - Overview with stats and quick info
+const DashboardScreen = () => {
+  const [progress] = useState(68);
+
+  return (
+    <Screen>
+      <View spacing="lg">
+        <View spacing="sm">
+          <Text size="xl" weight="bold">
+            Dashboard
+          </Text>
+          <Text size="md" style={{ opacity: 0.7 }}>
+            Idealyst Framework Showcase
+          </Text>
+        </View>
+
+        {/* Stats Cards */}
+        <View
+          style={{
+            flexDirection: "row",
+            gap: 16,
+            flexWrap: "wrap",
+            marginTop: 16,
+          }}
+        >
+          <Card type="elevated" style={{ flex: 1, minWidth: 150, padding: 16 }}>
+            <View spacing="sm">
+              <Icon name="toy-brick" size="lg" />
+              <Text size="xl" weight="bold">
+                34
+              </Text>
+              <Text size="sm" style={{ opacity: 0.7 }}>
+                Components
+              </Text>
+            </View>
+          </Card>
+
+          <Card type="elevated" style={{ flex: 1, minWidth: 150, padding: 16 }}>
+            <View spacing="sm">
+              <Icon name="palette" size="lg" />
+              <Text size="xl" weight="bold">
+                5
+              </Text>
+              <Text size="sm" style={{ opacity: 0.7 }}>
+                Intent Colors
+              </Text>
+            </View>
+          </Card>
+
+          <Card type="elevated" style={{ flex: 1, minWidth: 150, padding: 16 }}>
+            <View spacing="sm">
+              <Icon name="devices" size="lg" />
+              <Text size="xl" weight="bold">
+                2
+              </Text>
+              <Text size="sm" style={{ opacity: 0.7 }}>
+                Platforms
+              </Text>
+            </View>
+          </Card>
+        </View>
+
+        {/* Progress Section */}
+        <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+          <View spacing="md">
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Text size="lg" weight="semibold">
+                Framework Adoption
+              </Text>
+              <Badge type="filled" color="green">
+                Active
+              </Badge>
+            </View>
+            <Progress value={progress} variant="linear" intent="primary" showLabel />
+            <Text size="sm" style={{ opacity: 0.7 }}>
+              You're making great progress exploring the framework!
+            </Text>
+          </View>
+        </Card>
+
+        {/* Quick Info Alert */}
+        <Alert
+          intent="info"
+          title="Welcome to Idealyst"
+          message="This showcase demonstrates drawer navigation and various components from the framework. Explore the different screens using the drawer menu."
+          type="soft"
+        />
       </View>
-      
-      {/* API Testing Component */}
-      <View spacing="md" style={{ marginTop: 32 }}>
-        <Text size="md" weight="semibold">API Test</Text>
-        <HelloWorld name="{{projectName}}" />
+    </Screen>
+  );
+};
+
+// Component Gallery - Showcase UI components
+const ComponentGalleryScreen = () => {
+  return (
+    <Screen>
+      <View spacing="lg">
+        <View spacing="sm">
+          <Text size="xl" weight="bold">
+            Component Gallery
+          </Text>
+          <Text size="md" style={{ opacity: 0.7 }}>
+            Explore various UI components
+          </Text>
+        </View>
+
+        {/* Avatars Section */}
+        <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+          <View spacing="md">
+            <Text size="lg" weight="semibold">
+              Avatars
+            </Text>
+            <View style={{ flexDirection: "row", gap: 12, flexWrap: "wrap" }}>
+              <Avatar fallback="JD" size="sm" shape="circle" color="blue" />
+              <Avatar fallback="AS" size="md" shape="circle" color="purple" />
+              <Avatar fallback="MK" size="lg" shape="circle" color="green" />
+              <Avatar fallback="RC" size="xl" shape="circle" color="orange" />
+            </View>
+          </View>
+        </Card>
+
+        {/* Badges & Chips */}
+        <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+          <View spacing="md">
+            <Text size="lg" weight="semibold">
+              Badges & Chips
+            </Text>
+            <View spacing="sm">
+              <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap" }}>
+                <Badge type="filled" color="red">
+                  5
+                </Badge>
+                <Badge type="filled" color="blue">
+                  New
+                </Badge>
+                <Badge type="outlined" color="green">
+                  Active
+                </Badge>
+                <Badge type="dot" color="orange" />
+              </View>
+              <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap", marginTop: 8 }}>
+                <Chip label="React" />
+                <Chip label="React Native" />
+                <Chip label="TypeScript" />
+                <Chip label="Cross-platform" />
+              </View>
+            </View>
+          </View>
+        </Card>
+
+        {/* Buttons */}
+        <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+          <View spacing="md">
+            <Text size="lg" weight="semibold">
+              Buttons
+            </Text>
+            <View style={{ gap: 12 }}>
+              <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap" }}>
+                <Button type="contained" intent="primary" leftIcon="check">
+                  Primary
+                </Button>
+                <Button type="outlined" intent="neutral" leftIcon="heart">
+                  Neutral
+                </Button>
+                <Button type="text" intent="error" leftIcon="delete">
+                  Delete
+                </Button>
+              </View>
+              <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap" }}>
+                <Button type="contained" intent="success" size="sm">
+                  Success
+                </Button>
+                <Button type="contained" intent="warning" size="md">
+                  Warning
+                </Button>
+                <Button type="contained" intent="error" size="lg">
+                  Error
+                </Button>
+              </View>
+            </View>
+          </View>
+        </Card>
+
+        {/* Accordion */}
+        <Accordion
+          type="bordered"
+          items={[
+            {
+              id: "1",
+              title: "What is Idealyst?",
+              content: (
+                <Text size="sm">
+                  Idealyst is a cross-platform React framework with 34+ components,
+                  built for both web and mobile applications.
+                </Text>
+              ),
+            },
+            {
+              id: "2",
+              title: "Key Features",
+              content: (
+                <View spacing="sm">
+                  <Text size="sm">• Cross-platform (React & React Native)</Text>
+                  <Text size="sm">• 7,447+ Material Design Icons</Text>
+                  <Text size="sm">• Consistent API patterns</Text>
+                  <Text size="sm">• Built-in theming system</Text>
+                </View>
+              ),
+            },
+          ]}
+          defaultExpanded={["1"]}
+        />
       </View>
-    </View>
-  </Screen>
-);
+    </Screen>
+  );
+};
 
-const ProfileScreen = () => (
-  <Screen>
-    <View spacing="lg">
-      <Text size="xl" weight="bold">Profile</Text>
-      <Text size="md">User profile and account settings</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="sm">
-          Manage your account details and preferences here.
-        </Text>
+// Interactive Demo - Forms and interactive elements
+const InteractiveDemoScreen = () => {
+  const [switchValue, setSwitchValue] = useState(true);
+  const [sliderValue, setSliderValue] = useState(50);
+  const [loading, setLoading] = useState(false);
+
+  const handleAction = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 2000);
+  };
+
+  return (
+    <Screen>
+      <View spacing="lg">
+        <View spacing="sm">
+          <Text size="xl" weight="bold">
+            Interactive Demo
+          </Text>
+          <Text size="md" style={{ opacity: 0.7 }}>
+            Try out interactive components
+          </Text>
+        </View>
+
+        {/* Switch Control */}
+        <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+          <View spacing="md">
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <View spacing="xs" style={{ flex: 1 }}>
+                <Text size="md" weight="semibold">
+                  Enable Notifications
+                </Text>
+                <Text size="sm" style={{ opacity: 0.7 }}>
+                  Receive updates and alerts
+                </Text>
+              </View>
+              <Switch checked={switchValue} onCheckedChange={setSwitchValue} />
+            </View>
+          </View>
+        </Card>
+
+        {/* Slider Control */}
+        <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+          <View spacing="md">
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Text size="md" weight="semibold">
+                Volume
+              </Text>
+              <Badge type="filled" color="blue">
+                {sliderValue}%
+              </Badge>
+            </View>
+            <Slider
+              value={sliderValue}
+              onValueChange={setSliderValue}
+              min={0}
+              max={100}
+            />
+          </View>
+        </Card>
+
+        {/* Action Buttons */}
+        <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+          <View spacing="md">
+            <Text size="md" weight="semibold">
+              Actions
+            </Text>
+            <View style={{ flexDirection: "row", gap: 12, flexWrap: "wrap" }}>
+              <Button
+                type="contained"
+                intent="primary"
+                leftIcon="rocket"
+                onPress={handleAction}
+              >
+                Launch
+              </Button>
+              <Button type="outlined" intent="neutral" leftIcon="refresh">
+                Refresh
+              </Button>
+              <Button type="text" intent="error" leftIcon="close">
+                Cancel
+              </Button>
+            </View>
+          </View>
+        </Card>
+
+        {/* Status Alerts */}
+        <View spacing="sm" style={{ marginTop: 16 }}>
+          <Alert
+            intent="success"
+            title="Success"
+            message="Your changes have been saved successfully."
+            type="soft"
+          />
+          <Alert
+            intent="warning"
+            title="Warning"
+            message="Please review your settings before continuing."
+            type="outlined"
+          />
+        </View>
       </View>
-    </View>
-  </Screen>
-);
+    </Screen>
+  );
+};
+
+// Theme Showcase - Different variants and intents
+const ThemeShowcaseScreen = () => {
+  return (
+    <Screen>
+      <View spacing="lg">
+        <View spacing="sm">
+          <Text size="xl" weight="bold">
+            Theme Showcase
+          </Text>
+          <Text size="md" style={{ opacity: 0.7 }}>
+            Explore variants and intent colors
+          </Text>
+        </View>
 
-const SettingsScreen = () => (
+        {/* Card Variants */}
+        <View spacing="sm" style={{ marginTop: 16 }}>
+          <Text size="lg" weight="semibold">
+            Card Variants
+          </Text>
+          <Card type="default" style={{ padding: 16 }}>
+            <Text weight="semibold">Default Card</Text>
+            <Text size="sm" style={{ opacity: 0.7 }}>
+              Standard card with minimal styling
+            </Text>
+          </Card>
+          <Card type="outlined" style={{ padding: 16 }}>
+            <Text weight="semibold">Outlined Card</Text>
+            <Text size="sm" style={{ opacity: 0.7 }}>
+              Card with visible border
+            </Text>
+          </Card>
+          <Card type="elevated" style={{ padding: 16 }}>
+            <Text weight="semibold">Elevated Card</Text>
+            <Text size="sm" style={{ opacity: 0.7 }}>
+              Card with shadow elevation
+            </Text>
+          </Card>
+          <Card type="filled" style={{ padding: 16 }}>
+            <Text weight="semibold">Filled Card</Text>
+            <Text size="sm" style={{ opacity: 0.7 }}>
+              Card with background fill
+            </Text>
+          </Card>
+        </View>
+
+        {/* Intent Colors */}
+        <View spacing="sm" style={{ marginTop: 16 }}>
+          <Text size="lg" weight="semibold">
+            Intent Colors
+          </Text>
+          <View style={{ gap: 12 }}>
+            <Button type="contained" intent="primary">
+              Primary Intent
+            </Button>
+            <Button type="contained" intent="neutral">
+              Neutral Intent
+            </Button>
+            <Button type="contained" intent="success">
+              Success Intent
+            </Button>
+            <Button type="contained" intent="warning">
+              Warning Intent
+            </Button>
+            <Button type="contained" intent="error">
+              Error Intent
+            </Button>
+          </View>
+        </View>
+
+        {/* Progress Indicators */}
+        <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+          <View spacing="md">
+            <Text size="lg" weight="semibold">
+              Progress Indicators
+            </Text>
+            <View spacing="sm">
+              <Progress value={80} variant="linear" intent="primary" showLabel />
+              <Progress value={60} variant="linear" intent="success" showLabel />
+              <Progress value={40} variant="linear" intent="warning" showLabel />
+              <Progress value={20} variant="linear" intent="error" showLabel />
+            </View>
+          </View>
+        </Card>
+      </View>
+    </Screen>
+  );
+};
+
+// API Integration - HelloWorld component showcase
+const APIIntegrationScreen = () => (
   <Screen>
     <View spacing="lg">
-      <Text size="xl" weight="bold">Settings</Text>
-      <Text size="md">App configuration and preferences</Text>
-      <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="sm">
-          Customize your app experience with various settings and options.
+      <View spacing="sm">
+        <Text size="xl" weight="bold">
+          API Integration
+        </Text>
+        <Text size="md" style={{ opacity: 0.7 }}>
+          RPC communication example
         </Text>
       </View>
+
+      <Card type="outlined" style={{ marginTop: 16, padding: 16 }}>
+        <View spacing="md">
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Icon name="api" size="md" />
+            <Text size="lg" weight="semibold">
+              Server Communication
+            </Text>
+          </View>
+          <Text size="sm" style={{ opacity: 0.7 }}>
+            This component demonstrates RPC integration between the client and server.
+          </Text>
+        </View>
+      </Card>
+
+      <HelloWorld name="Idealyst Framework" />
+
+      <Alert
+        intent="info"
+        title="How it works"
+        message="The HelloWorld component uses RPC to communicate with the backend server, showcasing the framework's built-in API integration capabilities."
+        type="soft"
+        style={{ marginTop: 16 }}
+      />
     </View>
   </Screen>
 );
 
 const AppRouter: NavigatorParam = {
-  type: 'navigator',
-  path: '/',
-  layout: 'tab',
+  type: "navigator",
+  path: "/",
+  layout: "drawer",
   routes: [
     {
-      type: 'screen',
-      path: '/',
-      component: HomeScreen,
+      type: "screen",
+      path: "/",
+      component: DashboardScreen,
+      options: {
+        title: "Dashboard",
+        tabBarLabel: "Dashboard",
+        tabBarIcon: ({ focused }: { focused: boolean }) => (
+          <Icon
+            name="view-dashboard"
+            color={focused ? "blue" : "gray"}
+            size="md"
+          />
+        ),
+      },
+    },
+    {
+      type: "screen",
+      path: "/gallery",
+      component: ComponentGalleryScreen,
+      options: {
+        title: "Component Gallery",
+        tabBarLabel: "Gallery",
+        tabBarIcon: ({ focused }: { focused: boolean }) => (
+          <Icon name="toy-brick" color={focused ? "blue" : "gray"} size="md" />
+        ),
+      },
+    },
+    {
+      type: "screen",
+      path: "/interactive",
+      component: InteractiveDemoScreen,
       options: {
-        title: 'Home',
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        title: "Interactive Demo",
+        tabBarLabel: "Interactive",
+        tabBarIcon: ({ focused }: { focused: boolean }) => (
+          <Icon
+            name="gesture-tap"
+            color={focused ? "blue" : "gray"}
+            size="md"
+          />
         ),
       },
     },
     {
-      type: 'screen',
-      path: '/profile',
-      component: ProfileScreen,
+      type: "screen",
+      path: "/theme",
+      component: ThemeShowcaseScreen,
       options: {
-        title: 'Profile',
-        tabBarLabel: 'Profile',
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        title: "Theme Showcase",
+        tabBarLabel: "Themes",
+        tabBarIcon: ({ focused }: { focused: boolean }) => (
+          <Icon name="palette" color={focused ? "blue" : "gray"} size="md" />
         ),
       },
     },
     {
-      type: 'screen',
-      path: '/settings',
-      component: SettingsScreen,
+      type: "screen",
+      path: "/api",
+      component: APIIntegrationScreen,
       options: {
-        title: 'Settings',
-        tabBarLabel: 'Settings', 
-        tabBarIcon: ({ focused, size }) => (
-          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        title: "API Integration",
+        tabBarLabel: "API",
+        tabBarIcon: ({ focused }: { focused: boolean }) => (
+          <Icon name="api" color={focused ? "blue" : "gray"} size="md" />
         ),
       },
     },
   ],
 };
 
-export default AppRouter;
+export default AppRouter;

package/templates/workspace/package.json

@@ -27,6 +27,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
+    "@idealyst/mcp-server": "^{{idealystVersion}}",
+    "@mobilenext/mobile-mcp": "^0.2.0",
+    "@playwright/mcp": "^0.2.1",
     "@types/jest": "^29.5.12",
     "jest": "^29.7.0",
     "ts-jest": "^29.1.2",