vibefast-cli 0.7.0 → 0.7.1

package/recipes/ios-widget/recipe.json

@@ -53,6 +53,30 @@
     "npm": ["@bacons/apple-targets"],
     "expo": []
   },
+  "env": [
+    {
+      "key": "APPLE_TEAM_ID",
+      "description": "Apple Developer Team ID (used to sign widgets).",
+      "example": "ABCDE12345",
+      "link": "https://developer.apple.com/account/#/membership",
+      "file": "apps/native/.env.local"
+    }
+  ],
+  "configuration": {
+    "env": {
+      "constants": [
+        "const APPLE_TEAM_ID = 'replace_me';"
+      ],
+      "buildTime": {
+        "schema": [
+          "  APPLE_TEAM_ID: z.string(),"
+        ],
+        "env": [
+          "  APPLE_TEAM_ID: process.env.APPLE_TEAM_ID,"
+        ]
+      }
+    }
+  },
   "manualSteps": [
     {
       "title": "Configure Widget Plugin",

package/recipes/number-stepper/recipe.json

@@ -0,0 +1,15 @@
+{
+  "name": "number-stepper",
+  "version": "1.0.0",
+  "description": "Multi-step number stepper with context management",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/stepper",
+      "to": "apps/native/src/components/advanced-ui/stepper"
+    }
+  ],
+  "dependencies": {
+    "expo": ["react-native-reanimated"]
+  }
+}

package/recipes/payments/recipe.json

@@ -24,6 +24,36 @@
       "react-native-purchases"
     ]
   },
+  "env": [
+    {
+      "key": "REVENUECAT_API_KEY_APPLE",
+      "description": "RevenueCat public API key for iOS (client).",
+      "example": "revenuecat_apple_key",
+      "link": "https://app.revenuecat.com/settings/api-keys",
+      "file": "apps/native/.env.local"
+    },
+    {
+      "key": "REVENUECAT_API_KEY_GOOGLE",
+      "description": "RevenueCat public API key for Android (client).",
+      "example": "revenuecat_google_key",
+      "link": "https://app.revenuecat.com/settings/api-keys",
+      "file": "apps/native/.env.local"
+    }
+  ],
+  "configuration": {
+    "env": {
+      "client": {
+        "schema": [
+          "  REVENUECAT_API_KEY_APPLE: z.string(),",
+          "  REVENUECAT_API_KEY_GOOGLE: z.string(),"
+        ],
+        "env": [
+          "  REVENUECAT_API_KEY_APPLE: process.env.REVENUECAT_API_KEY_APPLE,",
+          "  REVENUECAT_API_KEY_GOOGLE: process.env.REVENUECAT_API_KEY_GOOGLE,"
+        ]
+      }
+    }
+  },
   "manualSteps": [
     {
       "title": "Create RevenueCat Account",

package/recipes/posthog.json

@@ -37,7 +37,8 @@
       "description": "PostHog project API key - get from your PostHog project settings",
       "example": "phc_abc123def456ghi789",
       "required": true,
-      "link": "https://app.posthog.com/project/settings"
+      "link": "https://app.posthog.com/project/settings",
+      "file": "apps/native/.env.local"
     }
   ],
   "postInstall": {

package/recipes/progress-circle/recipe.json

@@ -0,0 +1,15 @@
+{
+  "name": "progress-circle",
+  "version": "1.0.0",
+  "description": "Animated circular progress indicator",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/progress-bars",
+      "to": "apps/native/src/components/advanced-ui/progress-bars"
+    }
+  ],
+  "dependencies": {
+    "expo": ["react-native-reanimated", "react-native-svg"]
+  }
+}

package/recipes/sentry.json

@@ -37,7 +37,8 @@
       "description": "Sentry Data Source Name - get from your Sentry project settings",
       "example": "https://abc123@o0.ingest.sentry.io/123456",
       "required": true,
-      "link": "https://sentry.io/settings/projects/"
+      "link": "https://sentry.io/settings/projects/",
+      "file": "apps/native/.env.local"
     }
   ],
   "postInstall": {

package/recipes/swipe-slider/recipe.json

@@ -0,0 +1,15 @@
+{
+  "name": "swipe-slider",
+  "version": "1.0.0",
+  "description": "Swipeable slider component with gesture controls",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/sliders",
+      "to": "apps/native/src/components/advanced-ui/sliders"
+    }
+  ],
+  "dependencies": {
+    "expo": ["react-native-reanimated", "react-native-gesture-handler"]
+  }
+}

package/recipes/{0 → timeline}/recipe.json

@@ -1,7 +1,7 @@
 {
-  "name": "0",
+  "name": "timeline",
   "version": "1.0.0",
-  "description": "Advanced UI component: 0",
+  "description": "Vertical timeline view component",
   "target": "native",
   "copy": [
     {
@@ -10,9 +10,6 @@
     }
   ],
   "dependencies": {
-    "expo": [
-      "react-native-reanimated",
-      "react-native-gesture-handler"
-    ]
+    "expo": []
   }
 }

package/recipes/upload-all.sh

@@ -4,13 +4,24 @@ echo "📤 Uploading all recipes to R2..."
 echo ""
 
 recipes=(
+  "animated-chip"
+  "animated-switch"
+  "audio-recorder"
   "charts"
   "chatbot"
-  "voice-bot"
+  "glowing-button"
+  "image-analysis"
   "image-generator"
-  "audio-recorder"
+  "ios-widget"
+  "number-stepper"
+  "payments"
+  "progress-circle"
   "quiz"
+  "swipe-slider"
+  "timeline"
   "tracker-app"
+  "voice-bot"
+  "wake-word"
 )
 
 for recipe in "${recipes[@]}"; do

package/recipes/voice-bot/recipe.json

@@ -37,7 +37,8 @@
       "key": "ELEVENLABS_API_KEY",
       "description": "API key for ElevenLabs Conversational AI (used by the backend token route).",
       "example": "elevenlabs_api_key_example",
-      "link": "https://elevenlabs.io/account"
+      "link": "https://elevenlabs.io/account",
+      "file": "packages/backend/.env.local"
     },
     {
       "key": "ELEVENLABS_AGENT_ID",
@@ -46,6 +47,18 @@
       "link": "https://elevenlabs.io/"
     }
   ],
+  "configuration": {
+    "env": {
+      "client": {
+        "schema": [
+          "  ELEVENLABS_AGENT_ID: z.string(),"
+        ],
+        "env": [
+          "  ELEVENLABS_AGENT_ID: process.env.ELEVENLABS_AGENT_ID,"
+        ]
+      }
+    }
+  },
   "manualSteps": [
     {
       "title": "Create an ElevenLabs Conversational AI agent",
@@ -69,4 +82,4 @@
       "link": "https://docs.expo.dev/build/setup/"
     }
   ]
-}
+}

package/recipes/wake-word/apps/native/src/app/(root)/(protected)/test-wake-word.tsx

@@ -127,8 +127,6 @@ export default function TestWakeWord() {
           />
         </View>
 
-
-
         {/* Wake Phrases */}
         <View className="mb-6 rounded-lg bg-purple-50 p-4 dark:bg-purple-900/20">
           <Text className="mb-3 text-lg font-semibold text-purple-900 dark:text-purple-100">

package/recipes/wake-word/recipe.json

@@ -16,8 +16,8 @@
       "to": "apps/native/assets/vosk-model/README.md"
     },
     {
-      "from": "scripts/download-vosk-model.mjs",
-      "to": "scripts/download-vosk-model.mjs"
+      "from": "apps/native/scripts/download-vosk-model.mjs",
+      "to": "apps/native/scripts/download-vosk-model.mjs"
     }
   ],
   "nav": {

package/src/__tests__/recipes.test.ts

@@ -5,9 +5,9 @@ import { join } from 'path';
 
 describe('Recipe System', () => {
   describe('Recipe Metadata', () => {
-    it('should have all 10 features defined', () => {
+    it('should have all 11 features defined', () => {
       const features = getRecipesByCategory('feature');
-      expect(features).toHaveLength(10);
+      expect(features).toHaveLength(11);
     });
 
     it('should include ios-widget in features', () => {
@@ -155,14 +155,14 @@ describe('Recipe System', () => {
   });
 
   describe('Recipe Categories', () => {
-    it('should only have feature category (no advanced-ui yet)', () => {
+    it('should have advanced-ui category', () => {
       const advancedUI = getRecipesByCategory('advanced-ui');
-      expect(advancedUI).toHaveLength(0);
+      expect(advancedUI).toHaveLength(7);
     });
 
     it('should have all recipes in RECIPES array', () => {
       expect(RECIPES.length).toBeGreaterThan(0);
-      expect(RECIPES.length).toBe(10); // 10 features
+      expect(RECIPES.length).toBe(21); // 11 features + 7 advanced-ui + 3 integrations
     });
   });
 });

package/src/commands/add.ts

@@ -5,8 +5,23 @@ import { validateSignature, validateTarget } from '../core/validate.js';
 import { getToken, getDeviceInfo } from '../core/auth.js';
 import { fetchRecipe, downloadZip } from '../core/http.js';
 import { addEntry, getEntry, FileEntry } from '../core/journal.js';
-import { copyTree, readFileContent } from '../core/fsx.js';
-import { insertNavLinkNative, insertNavLinkWeb } from '../core/codemod.js';
+import { copyTree, readFileContent, exists } from '../core/fsx.js';
+import { addEnvVars, hasEnvKey, type EnvVar as CoreEnvVar } from '../core/env.js';
+import {
+  insertEnvSnippets,
+  insertNavLinkNative,
+  insertNavLinkWeb,
+  ENV_BUILD_TIME_ENV_END,
+  ENV_BUILD_TIME_ENV_START,
+  ENV_BUILD_TIME_SCHEMA_END,
+  ENV_BUILD_TIME_SCHEMA_START,
+  ENV_CLIENT_ENV_END,
+  ENV_CLIENT_ENV_START,
+  ENV_CLIENT_SCHEMA_END,
+  ENV_CLIENT_SCHEMA_START,
+  ENV_CONSTANTS_END,
+  ENV_CONSTANTS_START,
+} from '../core/codemod.js';
 import { join, resolve } from 'path';
 import { ensureWithinBase } from '../core/pathGuard.js';
 import { extractZipSafe } from '../core/archive.js';
@@ -16,6 +31,22 @@ import { detectTarget } from '../core/detect.js';
 import { withSpinner } from '../core/spinner.js';
 import { showCommandHint } from '../core/errors.js';
 
+interface EnvSchema {
+  constants?: string[];
+  client?: {
+    schema?: string[];
+    env?: string[];
+  };
+  buildTime?: {
+    schema?: string[];
+    env?: string[];
+  };
+}
+
+interface RecipeConfiguration {
+  env?: EnvSchema;
+}
+
 interface RecipeManifest {
   name: string;
   version: string;
@@ -32,6 +63,9 @@ interface RecipeManifest {
     description: string;
     example: string;
     link?: string;
+    file?: string;
+    value?: string;
+    required?: boolean;
   }>;
   manualSteps?: Array<{
     title: string;
@@ -43,12 +77,13 @@ interface RecipeManifest {
   postInstall?: {
     message?: string;
   };
+  configuration?: RecipeConfiguration;
 }
 
 export const addCommand = new Command('add')
   .description('Add VibeFast features, UI components, or integrations')
   .argument('[feature]', 'Feature name to install (optional - will show interactive menu if omitted)')
-  .option('--target <target>', 'Target platform (native or web)', 'native')
+  .option('--target <target>', 'Target platform (native or web)')
   .option('--dry-run', 'Preview changes without applying')
   .option('--force', 'Overwrite existing files without asking')
   .option('--yes', 'Answer yes to all prompts (for automation)')
@@ -186,8 +221,180 @@ async function installFeature(feature: string, options: any, paths: any) {
           log.error('Could not auto-detect target (native/web)');
           log.info('Please specify with --target native or --target web');
           process.exit(1);
-        }
+  }
+}
+
+type EnvGroup = {
+  path: string;
+  relativePath: string;
+  vars: NonNullable<RecipeManifest['env']>;
+};
+
+function groupEnvVars(env: RecipeManifest['env'] | undefined, cwd: string): EnvGroup[] {
+  if (!env?.length) {
+    return [];
+  }
+
+  const groups = new Map<string, EnvGroup>();
+
+  for (const envVar of env) {
+    const relativePath = envVar.file ?? 'apps/native/.env.local';
+    const resolvedPath = resolve(cwd, relativePath);
+    const existing = groups.get(resolvedPath);
+
+    if (existing) {
+      existing.vars.push(envVar);
+    } else {
+      groups.set(resolvedPath, {
+        path: resolvedPath,
+        relativePath,
+        vars: [envVar],
+      });
+    }
+  }
+
+  return [...groups.values()];
+}
+
+async function ensureEnvVarsForGroups(
+  envGroups: EnvGroup[],
+  options: any,
+): Promise<Array<{ relativePath: string; added: string[] }>> {
+  const summary: Array<{ relativePath: string; added: string[] }> = [];
+
+  for (const group of envGroups) {
+    const vars: CoreEnvVar[] = group.vars.map(envVar => ({
+      key: envVar.key,
+      value: envVar.value ?? envVar.example ?? '',
+      comment: envVar.description?.replace(/\s+/g, ' ').trim() || undefined,
+    }));
+
+    const result = await addEnvVars(group.path, vars, { dryRun: options.dryRun });
+
+    if (result.added.length > 0) {
+      summary.push({
+        relativePath: group.relativePath,
+        added: result.added,
+      });
+    }
+  }
+
+  return summary;
+}
+
+async function reportEnvStatus(envGroups: EnvGroup[], options: any): Promise<string[]> {
+  const attention: string[] = [];
+
+  for (const group of envGroups) {
+    const missing: typeof group.vars = [];
+    const existing: string[] = [];
+
+    for (const envVar of group.vars) {
+      const hasKey = await hasEnvKey(group.path, envVar.key);
+      if (hasKey) {
+        existing.push(envVar.key);
+      } else {
+        missing.push(envVar);
       }
+    }
+
+    if (missing.length > 0) {
+      log.plain('');
+      log.warn(`⚠ REQUIRED ENVIRONMENT VARIABLES (${group.relativePath}):`);
+      log.plain('');
+
+      missing.forEach(envVar => {
+        log.plain(`  ${envVar.key}`);
+        log.plain(`    ${envVar.description}`);
+        log.plain(`    Example: ${envVar.example}`);
+        if (envVar.link) {
+          log.plain(`    Get it: ${envVar.link}`);
+        }
+        log.plain('');
+        attention.push(`Add ${envVar.key} to ${group.relativePath}`);
+      });
+
+      log.info(`Add these to ${group.relativePath}`);
+      log.plain('');
+    }
+
+    if (existing.length > 0) {
+      log.success(`✓ Already configured (${group.relativePath}): ${existing.join(', ')}`);
+      log.plain('');
+    }
+  }
+
+  return attention;
+}
+
+async function applyEnvConfiguration(paths: ReturnType<typeof getPaths>, envConfig: EnvSchema, options: any) {
+  const envPath = join(paths.cwd, 'apps', 'native', 'env.js');
+
+  if (!(await exists(envPath))) {
+    return;
+  }
+
+  const suffix = options.dryRun ? ' (dry run)' : '';
+
+  if (envConfig.constants?.length) {
+    const inserted = await insertEnvSnippets(envPath, ENV_CONSTANTS_START, ENV_CONSTANTS_END, envConfig.constants, options);
+    if (inserted) {
+      log.info(`Updated env.js constants${suffix}.`);
+    }
+  }
+
+  if (envConfig.client?.schema?.length) {
+    const inserted = await insertEnvSnippets(
+      envPath,
+      ENV_CLIENT_SCHEMA_START,
+      ENV_CLIENT_SCHEMA_END,
+      envConfig.client.schema,
+      options,
+    );
+    if (inserted) {
+      log.info(`Updated env.js client schema definitions${suffix}.`);
+    }
+  }
+
+  if (envConfig.client?.env?.length) {
+    const inserted = await insertEnvSnippets(
+      envPath,
+      ENV_CLIENT_ENV_START,
+      ENV_CLIENT_ENV_END,
+      envConfig.client.env,
+      options,
+    );
+    if (inserted) {
+      log.info(`Updated env.js client env exports${suffix}.`);
+    }
+  }
+
+  if (envConfig.buildTime?.schema?.length) {
+    const inserted = await insertEnvSnippets(
+      envPath,
+      ENV_BUILD_TIME_SCHEMA_START,
+      ENV_BUILD_TIME_SCHEMA_END,
+      envConfig.buildTime.schema,
+      options,
+    );
+    if (inserted) {
+      log.info(`Updated env.js build-time schema${suffix}.`);
+    }
+  }
+
+  if (envConfig.buildTime?.env?.length) {
+    const inserted = await insertEnvSnippets(
+      envPath,
+      ENV_BUILD_TIME_ENV_START,
+      ENV_BUILD_TIME_ENV_END,
+      envConfig.buildTime.env,
+      options,
+    );
+    if (inserted) {
+      log.info(`Updated env.js build-time exports${suffix}.`);
+    }
+  }
+}
 
       // Validate setup
       const config = await validateSignature(paths.signatureFile);
@@ -348,6 +555,8 @@ async function installFeature(feature: string, options: any, paths: any) {
       }
 
       log.info(`Installing ${manifest.name} v${manifest.version}...`);
+      const envGroups = groupEnvVars(manifest.env, paths.cwd);
+      let envAttention: string[] = [];
 
       // Copy files with interactive confirmation
       const copiedFiles: string[] = [];
@@ -561,6 +770,10 @@ async function installFeature(feature: string, options: any, paths: any) {
         );
       }
 
+      if (manifest.configuration?.env) {
+        await applyEnvConfiguration(paths, manifest.configuration.env, options);
+      }
+
       // Show manual steps with smart detection
       if (manifest.manualSteps && !options.dryRun) {
         const { readFileContent, exists } = await import('../core/fsx.js');
@@ -625,48 +838,21 @@ async function installFeature(feature: string, options: any, paths: any) {
         }
       }
       
-      // Show environment variables with smart detection
-      if (manifest.env && !options.dryRun) {
-        const { hasEnvKey } = await import('../core/env.js');
-        const { join } = await import('path');
-        const envPath = join(paths.cwd, '.env');
-        
-        const missing: typeof manifest.env = [];
-        const existing: string[] = [];
-        
-        // Check which vars already exist
-        for (const envVar of manifest.env) {
-          const exists = await hasEnvKey(envPath, envVar.key);
-          if (exists) {
-            existing.push(envVar.key);
-          } else {
-            missing.push(envVar);
-          }
-        }
-        
-        if (missing.length > 0) {
-          log.plain('');
-          log.warn('⚠ REQUIRED ENVIRONMENT VARIABLES:');
+      if (envGroups.length > 0) {
+        const additions = await ensureEnvVarsForGroups(envGroups, options);
+
+        if (additions.length > 0) {
           log.plain('');
-          
-          missing.forEach(envVar => {
-            log.plain(`  ${envVar.key}`);
-            log.plain(`    ${envVar.description}`);
-            log.plain(`    Example: ${envVar.example}`);
-            if (envVar.link) {
-              log.plain(`    Get it: ${envVar.link}`);
-            }
-            log.plain('');
+          const suffix = options.dryRun ? ' (dry run)' : '';
+          log.info(`✅ Placeholder environment variables added${suffix}:`);
+          additions.forEach(({ relativePath, added }) => {
+            log.plain(`  • ${relativePath}: ${added.join(', ')}`);
           });
-          
-          log.info('Add these to your .env file');
-          log.plain('');
-        }
-        
-        if (existing.length > 0) {
-          log.success(`✓ Already configured: ${existing.join(', ')}`);
+          log.info('Update those files with your real API keys or secrets.');
           log.plain('');
         }
+
+        envAttention = await reportEnvStatus(envGroups, options);
       }
       
       // Post-install message
@@ -679,18 +865,8 @@ async function installFeature(feature: string, options: any, paths: any) {
       if (!options.dryRun) {
         const needsAttention: string[] = [];
         
-        // Check env vars
-        if (manifest.env) {
-          const { hasEnvKey } = await import('../core/env.js');
-          const { join } = await import('path');
-          const envPath = join(paths.cwd, '.env');
-          
-          for (const envVar of manifest.env) {
-            const exists = await hasEnvKey(envPath, envVar.key);
-            if (!exists) {
-              needsAttention.push(`Add ${envVar.key} to .env`);
-            }
-          }
+        if (envGroups.length > 0 && envAttention.length > 0) {
+          needsAttention.push(...envAttention);
         }
         
         // Check manual steps