@idealyst/cli 1.0.83 → 1.0.85

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

@@ -55,7 +55,7 @@ export const HelloWorld = ({
     <Screen style={{ flex: 1, padding: 20 }}>
       <View style={{ maxWidth: 600, alignSelf: "center" }}>
         <Text
-          size="xlarge"
+          size="xl"
           weight="bold"
           style={{
             marginBottom: 16,
@@ -67,7 +67,7 @@ export const HelloWorld = ({
         </Text>
 
         <Text
-          size="large"
+          size="lg"
           style={{
             marginBottom: 32,
             textAlign: "center",
@@ -79,18 +79,18 @@ export const HelloWorld = ({
           {platformText}
         </Text>
         {/* Framework Branding Card */}
-        <Card variant="elevated" padding="large" intent="primary">
+        <Card variant="elevated" padding="lg" intent="primary">
           <View style={{ alignItems: "center" }}>
             <Text style={{ fontSize: 32, marginBottom: 16 }}>🚀</Text>
             <Text
-              size="xlarge"
+              size="xl"
               weight="bold"
               style={{ marginBottom: 8, textAlign: "center" }}
             >
               Idealyst Framework
             </Text>
             <Text
-              size="medium"
+              size="md"
               style={{ marginBottom: 16, textAlign: "center" }}
             >
               Hello, {name}! Welcome to your cross-platform workspace.
@@ -107,28 +107,28 @@ export const HelloWorld = ({
             >
               <Card
                 variant="filled"
-                padding="small"
+                padding="sm"
                 style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
               >
-                <Text size="small" weight="semibold">
+                <Text size="sm" weight="semibold">
                   React
                 </Text>
               </Card>
               <Card
                 variant="filled"
-                padding="small"
+                padding="sm"
                 style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
               >
-                <Text size="small" weight="semibold">
+                <Text size="sm" weight="semibold">
                   TypeScript
                 </Text>
               </Card>
               <Card
                 variant="filled"
-                padding="small"
+                padding="sm"
                 style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
               >
-                <Text size="small" weight="semibold">
+                <Text size="sm" weight="semibold">
                   Cross-Platform
                 </Text>
               </Card>
@@ -137,56 +137,56 @@ export const HelloWorld = ({
         </Card>
 
         {/* Quick Start Guide Card */}
-        <Card variant="outlined" padding="large" style={{ marginTop: 16 }}>
-          <Text size="large" weight="bold" style={{ marginBottom: 16 }}>
+        <Card variant="outlined" padding="lg" style={{ marginTop: 16 }}>
+          <Text size="lg" weight="bold" style={{ marginBottom: 16 }}>
             🎯 Quick Start Guide
           </Text>
 
           <View style={{ marginBottom: 16 }}>
-            <Text size="medium" weight="semibold" style={{ marginBottom: 8 }}>
+            <Text size="md" weight="semibold" style={{ marginBottom: 8 }}>
               Your Workspace Overview:
             </Text>
-            <Text size="small" style={{ marginBottom: 4 }}>
+            <Text size="sm" style={{ marginBottom: 4 }}>
               • <Text weight="semibold">packages/web/</Text> - React web
               application
             </Text>
-            <Text size="small" style={{ marginBottom: 4 }}>
+            <Text size="sm" style={{ marginBottom: 4 }}>
               • <Text weight="semibold">packages/mobile/</Text> - React Native
               mobile app
             </Text>
-            <Text size="small" style={{ marginBottom: 4 }}>
+            <Text size="sm" style={{ marginBottom: 4 }}>
               • <Text weight="semibold">packages/shared/</Text> - Cross-platform
               components
             </Text>
-            <Text size="small" style={{ marginBottom: 4 }}>
+            <Text size="sm" style={{ marginBottom: 4 }}>
               • <Text weight="semibold">packages/api/</Text> - tRPC API server
             </Text>
           </View>
 
           <View style={{ marginBottom: 16 }}>
-            <Text size="medium" weight="semibold" style={{ marginBottom: 8 }}>
+            <Text size="md" weight="semibold" style={{ marginBottom: 8 }}>
               Try Editing:
             </Text>
-            <Text size="small" style={{ marginBottom: 4 }}>
+            <Text size="sm" style={{ marginBottom: 4 }}>
               1. Edit this component in{" "}
               <Text weight="semibold">
                 packages/shared/src/components/HelloWorld.tsx
               </Text>
             </Text>
-            <Text size="small" style={{ marginBottom: 4 }}>
+            <Text size="sm" style={{ marginBottom: 4 }}>
               2. Watch changes appear in both web and mobile apps instantly!
             </Text>
-            <Text size="small" style={{ marginBottom: 4 }}>
+            <Text size="sm" style={{ marginBottom: 4 }}>
               3. Run <Text weight="semibold">yarn dev</Text> to start all
               development servers
             </Text>
           </View>
 
-          <Card variant="filled" intent="success" padding="medium">
-            <Text size="small" weight="semibold" style={{ marginBottom: 4 }}>
+          <Card variant="filled" intent="success" padding="md">
+            <Text size="sm" weight="semibold" style={{ marginBottom: 4 }}>
               ✨ Framework Features:
             </Text>
-            <Text size="small">
+            <Text size="sm">
               Shared components • Type safety • Hot reload • Cross-platform
               compatibility
             </Text>
@@ -194,11 +194,11 @@ export const HelloWorld = ({
         </Card>
 
         {/* API Testing Section */}
-        <Card variant="outlined" padding="large" style={{ marginTop: 16 }}>
-          <Text size="large" weight="bold" style={{ marginBottom: 16 }}>
+        <Card variant="outlined" padding="lg" style={{ marginTop: 16 }}>
+          <Text size="lg" weight="bold" style={{ marginBottom: 16 }}>
             🚀 API Demo - Database Integration
           </Text>
-          <Text size="medium" style={{ marginBottom: 16, color: "#64748b" }}>
+          <Text size="md" style={{ marginBottom: 16, color: "#64748b" }}>
             Test your full-stack integration! This section demonstrates
             real-time database operations.
           </Text>
@@ -206,10 +206,10 @@ export const HelloWorld = ({
           {/* Create New Test Form */}
           <Card
             variant="filled"
-            padding="medium"
+            padding="md"
             style={{ marginBottom: 16, backgroundColor: "#f8fafc" }}
           >
-            <Text size="medium" weight="semibold" style={{ marginBottom: 12 }}>
+            <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
               Create New Test Entry
             </Text>
 
@@ -240,26 +240,26 @@ export const HelloWorld = ({
 
           {/* Tests List */}
           <View>
-            <Text size="medium" weight="semibold" style={{ marginBottom: 12 }}>
+            <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
               Database Records ({tests.data?.length || 0})
             </Text>
 
             {tests.isLoading ? (
-              <Card variant="outlined" padding="medium">
-                <Text size="small" style={{ color: "#64748b" }}>
+              <Card variant="outlined" padding="md">
+                <Text size="sm" style={{ color: "#64748b" }}>
                   Loading tests...
                 </Text>
               </Card>
             ) : tests.data?.length === 0 ? (
-              <Card variant="outlined" padding="medium">
-                <Text size="small" style={{ color: "#64748b" }}>
+              <Card variant="outlined" padding="md">
+                <Text size="sm" style={{ color: "#64748b" }}>
                   No tests found. Create one above!
                 </Text>
               </Card>
             ) : (
               <View style={{ gap: 8 }}>
                 {tests.data?.map((test: any) => (
-                  <Card key={test.id} variant="outlined" padding="medium">
+                  <Card key={test.id} variant="outlined" padding="md">
                     <View
                       style={{
                         flexDirection: "row",
@@ -269,26 +269,26 @@ export const HelloWorld = ({
                     >
                       <View style={{ flex: 1 }}>
                         <Text
-                          size="small"
+                          size="sm"
                           weight="semibold"
                           style={{ marginBottom: 4 }}
                         >
                           {test.name}
                         </Text>
                         <Text
-                          size="small"
+                          size="sm"
                           style={{ color: "#64748b", marginBottom: 4 }}
                         >
                           {test.message}
                         </Text>
-                        <Text size="small" style={{ color: "#10b981" }}>
+                        <Text size="sm" style={{ color: "#10b981" }}>
                           Status: {test.status} •{" "}
                           {new Date(test.createdAt).toLocaleDateString()}
                         </Text>
                       </View>
                       <Button
                         variant="destructive"
-                        size="small"
+                        size="sm"
                         onPress={() => handleDeleteTest(test.id)}
                         disabled={deleteTestMutation.isLoading}
                       >

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

@@ -6,17 +6,17 @@ import { HelloWorld } from '../components/HelloWorld';
 const HomeScreen = () => (
   <Screen>
     <View spacing="lg">
-      <Text size="xlarge" weight="bold">Home</Text>
-      <Text size="medium">Welcome to your {{projectName}} app!</Text>
+      <Text size="xl" weight="bold">Home</Text>
+      <Text size="md">Welcome to your {{projectName}} app!</Text>
       <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
+        <Text size="sm">
           This app uses tab navigation. Navigate between tabs using the bottom bar on mobile or the top tabs on web.
         </Text>
       </View>
       
       {/* API Testing Component */}
       <View spacing="md" style={{ marginTop: 32 }}>
-        <Text size="medium" weight="semibold">API Test</Text>
+        <Text size="md" weight="semibold">API Test</Text>
         <HelloWorld name="{{projectName}}" />
       </View>
     </View>
@@ -26,10 +26,10 @@ const HomeScreen = () => (
 const ProfileScreen = () => (
   <Screen>
     <View spacing="lg">
-      <Text size="xlarge" weight="bold">Profile</Text>
-      <Text size="medium">User profile and account settings</Text>
+      <Text size="xl" weight="bold">Profile</Text>
+      <Text size="md">User profile and account settings</Text>
       <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
+        <Text size="sm">
           Manage your account details and preferences here.
         </Text>
       </View>
@@ -40,10 +40,10 @@ const ProfileScreen = () => (
 const SettingsScreen = () => (
   <Screen>
     <View spacing="lg">
-      <Text size="xlarge" weight="bold">Settings</Text>
-      <Text size="medium">App configuration and preferences</Text>
+      <Text size="xl" weight="bold">Settings</Text>
+      <Text size="md">App configuration and preferences</Text>
       <View spacing="md" style={{ marginTop: 24 }}>
-        <Text size="small">
+        <Text size="sm">
           Customize your app experience with various settings and options.
         </Text>
       </View>

package/templates/web/README.md

@@ -122,22 +122,6 @@ The app uses the Idealyst Framework for consistent UI and navigation that works
 
 Edit `src/App.tsx` to start building your application.
 
-### Styling
-
-The app uses Unistyles for cross-platform styling. You can create styles that work on both web and mobile:
-
-```tsx
-import { createStyleSheet } from 'react-native-unistyles';
-
-const styles = createStyleSheet({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-```
-
 ### Learn More
 
 - [Idealyst Framework Documentation](https://github.com/your-username/idealyst-framework)

package/templates/web/package.json

@@ -30,7 +30,7 @@
     "react-dom": "^19.1.0",
     "react-native": "^0.80.1",
     "react-native-edge-to-edge": "^1.6.2",
-    "react-native-nitro-modules": "0.28.0",
+    "react-native-nitro-modules": "0.30.0",
     "react-native-unistyles": "^3.0.10",
     "react-native-web": "^0.20.0",
     "react-router": "^7.6.3",

package/templates/web/src/components/TestDemo.tsx

@@ -37,8 +37,8 @@ export const TestDemo: React.FC = () => {
 
   if (isLoading) {
     return (
-      <Card variant="outlined" padding="large">
-        <Text size="medium">Loading tests...</Text>
+      <Card variant="outlined" padding="lg">
+        <Text size="md">Loading tests...</Text>
       </Card>
     );
   }
@@ -46,21 +46,21 @@ export const TestDemo: React.FC = () => {
   return (
     <View style={{ gap: 16 }}>
       {/* Header */}
-      <Card variant="elevated" padding="large" intent="primary">
+      <Card variant="elevated" padding="lg" intent="primary">
         <View style={{ alignItems: 'center' }}>
           <Text style={{ fontSize: 24, marginBottom: 8 }}>🧪</Text>
-          <Text size="large" weight="bold" style={{ marginBottom: 8, textAlign: 'center' }}>
+          <Text size="lg" weight="bold" style={{ marginBottom: 8, textAlign: 'center' }}>
             tRPC + Database Test
           </Text>
-          <Text size="medium" style={{ textAlign: 'center' }}>
+          <Text size="md" style={{ textAlign: 'center' }}>
             This demonstrates end-to-end type-safe API calls from the web app to the database.
           </Text>
         </View>
       </Card>
 
       {/* Create Test Form */}
-      <Card variant="outlined" padding="large">
-        <Text size="medium" weight="bold" style={{ marginBottom: 16 }}>
+      <Card variant="outlined" padding="lg">
+        <Text size="md" weight="bold" style={{ marginBottom: 16 }}>
           Create New Test
         </Text>
         
@@ -90,15 +90,15 @@ export const TestDemo: React.FC = () => {
       </Card>
 
       {/* Test Results */}
-      <Card variant="outlined" padding="large">
-        <Text size="medium" weight="bold" style={{ marginBottom: 16 }}>
+      <Card variant="outlined" padding="lg">
+        <Text size="md" weight="bold" style={{ marginBottom: 16 }}>
           Test Entries ({tests?.count || 0})
         </Text>
         
         {tests?.data && tests.data.length > 0 ? (
           <View style={{ gap: 12 }}>
             {tests.data.map((test) => (
-              <Card key={test.id} variant="filled" padding="medium">
+              <Card key={test.id} variant="filled" padding="md">
                 <View style={{ 
                   flexDirection: 'row', 
                   justifyContent: 'space-between', 
@@ -106,23 +106,23 @@ export const TestDemo: React.FC = () => {
                   gap: 12
                 }}>
                   <View style={{ flex: 1 }}>
-                    <Text size="medium" weight="semibold" style={{ marginBottom: 4 }}>
+                    <Text size="md" weight="semibold" style={{ marginBottom: 4 }}>
                       {test.name}
                     </Text>
-                    <Text size="small" style={{ marginBottom: 8, opacity: 0.8 }}>
+                    <Text size="sm" style={{ marginBottom: 8, opacity: 0.8 }}>
                       {test.message}
                     </Text>
                     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                       <Card 
                         variant="filled" 
-                        padding="small" 
+                        padding="sm" 
                         intent={test.status === 'active' ? 'success' : 'neutral'}
                       >
-                        <Text size="small" weight="semibold">
+                        <Text size="sm" weight="semibold">
                           {test.status}
                         </Text>
                       </Card>
-                      <Text size="small" style={{ opacity: 0.6 }}>
+                      <Text size="sm" style={{ opacity: 0.6 }}>
                         {new Date(test.createdAt).toLocaleDateString()}
                       </Text>
                     </View>
@@ -130,7 +130,7 @@ export const TestDemo: React.FC = () => {
                   <Button
                     variant="outlined"
                     intent="error"
-                    size="small"
+                    size="sm"
                     onPress={() => handleDeleteTest(test.id)}
                     disabled={deleteTestMutation.isPending}
                   >
@@ -141,8 +141,8 @@ export const TestDemo: React.FC = () => {
             ))}
           </View>
         ) : (
-          <Card variant="filled" padding="medium" style={{ opacity: 0.6 }}>
-            <Text size="small" style={{ textAlign: 'center' }}>
+          <Card variant="filled" padding="md" style={{ opacity: 0.6 }}>
+            <Text size="sm" style={{ textAlign: 'center' }}>
               No tests found. Create one above to get started!
             </Text>
           </Card>
@@ -150,11 +150,11 @@ export const TestDemo: React.FC = () => {
       </Card>
 
       {/* Type Safety Info */}
-      <Card variant="filled" intent="success" padding="medium">
-        <Text size="small" weight="semibold" style={{ marginBottom: 4 }}>
+      <Card variant="filled" intent="success" padding="md">
+        <Text size="sm" weight="semibold" style={{ marginBottom: 4 }}>
           ✨ Type Safety Features:
         </Text>
-        <Text size="small">
+        <Text size="sm">
           • Full TypeScript types from database to frontend • tRPC ensures API type safety • 
           Prisma provides database schema validation • Real-time type checking across the stack
         </Text>

package/templates/web/vite.config.ts

@@ -1,28 +1,43 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import babel from 'vite-plugin-babel'
-import path from 'path'
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
+import babel from "vite-plugin-babel";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     babel({
-      filter: (id) => id.includes("node_modules/@idealyst/") || id.includes("/packages/"),
+      filter: (id) =>
+        id.includes("node_modules/@idealyst/") ||
+        (id.includes("/packages/") &&
+          !id.includes("/packages/web/") &&
+          /\.(tsx?|jsx?)$/.test(id)),
       babelConfig: {
         presets: [
-          ['@babel/preset-typescript', {
-            isTSX: true,
-            allExtensions: true,
-          }]
+          ["@babel/preset-react", { runtime: "automatic" }],
+          [
+            "@babel/preset-typescript",
+            {
+              isTSX: true,
+              allExtensions: true,
+            },
+          ],
         ],
         plugins: [
-          ['react-native-unistyles/plugin', {
-            root: 'src',
-            autoProcessPaths: ['@idealyst/components', '@idealyst/navigation', '@idealyst/theme'],
-          }],
-          ['@idealyst/components/plugin/web', { root: 'src' }]
-        ]
-      }
+          [
+            "react-native-unistyles/plugin",
+            {
+              root: "src",
+              autoProcessPaths: [
+                "@idealyst/components",
+                "@idealyst/navigation",
+                "@idealyst/theme",
+              ],
+            },
+          ],
+          ["@idealyst/components/plugin/web", { root: "src" }],
+        ],
+      },
     }),
     // Then process everything else with React plugin
     react(),
@@ -30,48 +45,54 @@ export default defineConfig({
   resolve: {
     alias: {
       // Use absolute path to resolve react-native-web properly
-      'react-native': path.resolve(__dirname, 'node_modules/react-native-web'),
-      '@react-native/normalize-colors': path.resolve(__dirname, 'node_modules/@react-native/normalize-colors'),
+      "react-native": path.resolve(__dirname, "node_modules/react-native-web"),
+      "@react-native/normalize-colors": path.resolve(
+        __dirname,
+        "../../node_modules/@react-native/normalize-colors"
+      ),
     },
     // Platform-specific file resolution
-    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.js', '.jsx'],
+    extensions: [".web.tsx", ".web.ts", ".tsx", ".ts", ".js", ".jsx"],
     // Ensure proper resolution of package exports
-    conditions: ['browser', 'import', 'module', 'default'],
+    conditions: ["browser", "import", "module", "default"],
     // Ensure workspace dependencies resolve properly
-    preserveSymlinks: false
+    preserveSymlinks: false,
   },
   define: {
-    global: 'globalThis',
+    global: "globalThis",
     __DEV__: JSON.stringify(true),
   },
   optimizeDeps: {
     include: [
-      'react-native-web',
-      '@react-native/normalize-colors',
-      'react-native-unistyles',
-      'react-native-unistyles/web',
-      '@mdi/react',
-      '@mdi/js',
+      "react-native-web",
+      "react-native-unistyles",
+      "react-native-unistyles/web",
+      "@mdi/react",
+      "@mdi/js",
     ],
     exclude: [
-      'react-native-edge-to-edge',
-      'react-native-nitro-modules',
-      '@idealyst/components',
-      '@idealyst/navigation', 
-      '@idealyst/theme',
-      '@{{workspaceScope}}/shared',
+      "react-native-edge-to-edge",
+      "react-native-nitro-modules",
+      "@idealyst/components",
+      "@idealyst/navigation",
+      "@idealyst/theme",
+      "@test/shared",
     ],
     esbuildOptions: {
       loader: {
-        '.tsx': 'tsx',
-        '.ts': 'ts',
-        '.jsx': 'jsx',
-        '.js': 'jsx' // Important: treat .js files as JSX for React Native compatibility
-      }
-    }
+        ".tsx": "tsx",
+        ".ts": "ts",
+        ".jsx": "jsx",
+        ".js": "jsx", // Important: treat .js files as JSX for React Native compatibility
+      },
+      alias: {
+        "react-native": path.resolve(__dirname, "node_modules/react-native-web"),
+        "@react-native/normalize-colors": path.resolve(__dirname, "../../node_modules/@react-native/normalize-colors"),
+      },
+    },
   },
   server: {
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     port: 5173,
   },
-}) 
+});

package/templates/workspace/.devcontainer/Dockerfile

@@ -1,6 +1,6 @@
 FROM node:20-bullseye
 
-# Install additional tools
+# Install additional tools including gosu for proper user switching
 RUN apt-get update && apt-get install -y \
     git \
     postgresql-client \
@@ -18,6 +18,9 @@ RUN git config --global init.defaultBranch main
 # Create workspace directory
 RUN mkdir -p /workspace
 WORKDIR /workspace
+RUN chown -R node:node /workspace
 
-# Keep container running
-CMD ["sleep", "infinity"]
+# Note: We don't switch to node user here anymore - entrypoint.sh will do it
+# This allows the entrypoint to fix permissions as root first
+
+USER node

package/templates/workspace/.devcontainer/devcontainer.json

@@ -106,6 +106,7 @@
       }
     }
   },
+  "remoteUser": "node",
 
   // Post-create command to set up the development environment
   "postCreateCommand": "bash .devcontainer/setup.sh"

package/templates/workspace/.devcontainer/setup.sh

@@ -2,10 +2,6 @@
 
 echo "🚀 Setting up Idealyst development environment..."
 
-# Install dependencies
-echo "📦 Installing dependencies..."
-yarn install
-
 # Create environment file if it doesn't exist
 if [ ! -f ".env" ]; then
     echo "📝 Creating .env file..."
@@ -42,24 +38,6 @@ until pg_isready -h postgres -p 5432 -U postgres; do
     sleep 1
 done
 
-echo "✅ Database is ready!"
-
-# Run database migrations if they exist
-if [ -d "packages" ]; then
-    echo "🗄️ Setting up database..."
-    
-    # Check if any package has prisma
-    for package_dir in packages/*/; do
-        if [ -f "${package_dir}prisma/schema.prisma" ]; then
-            echo "Running Prisma setup for $(basename "$package_dir")..."
-            cd "$package_dir"
-            npx prisma generate
-            npx prisma db push
-            cd /workspace
-        fi
-    done
-fi
-
 echo "Add Figma MCP to Claude Code"
 claude mcp add -t sse figma-mcp http://figma-mcp:3333/sse