vibefast-cli 1.3.0 → 1.3.1

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/markdown/code-block.tsx

@@ -1,16 +1,43 @@
+// vibefast license: c1e9fcd2-muhammad
 import { Feather } from '@expo/vector-icons';
 import React, { useCallback, useState } from 'react';
 import {
   type ImageStyle,
   Pressable,
+  ScrollView,
+  Text,
   type TextStyle,
   View,
   type ViewStyle,
 } from 'react-native';
-import SyntaxHighlighter from 'react-native-syntax-highlighter';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
+import css from 'react-syntax-highlighter/dist/esm/languages/hljs/css';
+import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
+import ts from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
+import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml';
 
 import { translate } from '@/lib';
 
+// Register languages for the Light build
+SyntaxHighlighter.registerLanguage('javascript', js);
+SyntaxHighlighter.registerLanguage('js', js);
+SyntaxHighlighter.registerLanguage('typescript', ts);
+SyntaxHighlighter.registerLanguage('ts', ts);
+SyntaxHighlighter.registerLanguage('tsx', ts);
+SyntaxHighlighter.registerLanguage('jsx', js);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('py', python);
+SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('sh', bash);
+SyntaxHighlighter.registerLanguage('shell', bash);
+SyntaxHighlighter.registerLanguage('css', css);
+SyntaxHighlighter.registerLanguage('html', xml);
+SyntaxHighlighter.registerLanguage('xml', xml);
+
 type CodeBlockProps = {
   containerStyle: ViewStyle | TextStyle | ImageStyle;
   content: string;
@@ -26,44 +53,51 @@ type CodeBlockProps = {
   onCopyCode: (code: string) => Promise<void>;
 };
 
+/**
+ * Custom renderer for React Native - converts syntax highlighter output to Text components
+ */
+function createNativeRenderer(fontFamily: string, fontSize: number) {
+  return function renderer({
+    rows,
+    stylesheet,
+  }: {
+    rows: any[];
+    stylesheet: Record<string, any>;
+  }) {
+    return rows.map((row, i) => {
+      const children = row.children?.map((child: any, j: number) => {
+        if (child.type === 'text') {
+          return child.value;
+        }
+        const className = child.properties?.className?.[0] || '';
+        const style = stylesheet[className] || {};
+        return (
+          <Text
+            key={j}
+            style={{
+              fontFamily,
+              fontSize,
+              color: style.color,
+              fontWeight: style.fontWeight,
+              fontStyle: style.fontStyle,
+            }}
+          >
+            {child.children?.map((c: any) => c.value).join('') || ''}
+          </Text>
+        );
+      });
+
+      return (
+        <Text key={i} style={{ fontFamily, fontSize }}>
+          {children}
+        </Text>
+      );
+    });
+  };
+}
+
 /**
  * CodeBlock component for rendering syntax-highlighted code with collapse/expand functionality.
- *
- * Features:
- * - Syntax highlighting using react-native-syntax-highlighter
- * - Copy to clipboard functionality
- * - Collapse/expand animation with FlashList preparation
- * - Smooth 220ms easeInEaseOut animation
- * - Independent animation for multiple code blocks
- *
- * Requirements addressed:
- * - 9.1: Prepare FlashList for layout animation before collapse
- * - 9.2: Animate height change over 220ms with easeInEaseOut
- * - 9.3: Animate each code block independently
- * - 9.4: Restore full content with same animation timing
- * - 9.5: Complete animation without interruption during scroll
- *
- * @param props - CodeBlock component props
- * @returns Rendered code block with syntax highlighting and controls
- *
- * @example
- * ```tsx
- * <CodeBlock
- *   containerStyle={styles.code_block}
- *   content="const hello = 'world';"
- *   language="javascript"
- *   codeSyntaxTheme={atomOneDark}
- *   monospaceFontFamily="Menlo"
- *   subtleText="#888"
- *   codeContentStyle={styles.codeContent}
- *   codeActionsContainerStyle={styles.actions}
- *   codeActionButtonBaseStyle={styles.button}
- *   codeToggleButtonSpacingStyle={styles.spacing}
- *   codeContentContainerStyle={styles.container}
- *   onCopyCode={copyToClipboard}
- *   onPrepareLayoutAnimation={prepareFlashList}
- * />
- * ```
  */
 export const CodeBlock = React.memo(function CodeBlock({
   containerStyle,
@@ -81,14 +115,12 @@ export const CodeBlock = React.memo(function CodeBlock({
 }: CodeBlockProps) {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
-  /**
-   * Toggle collapsed state without animation.
-   * LayoutAnimation causes scroll jitter, so we disable it.
-   */
   const toggleCollapsed = useCallback(() => {
     setIsCollapsed((prev) => !prev);
   }, []);
 
+  const renderer = createNativeRenderer(monospaceFontFamily, 15);
+
   return (
     <View
       style={[
@@ -146,18 +178,19 @@ export const CodeBlock = React.memo(function CodeBlock({
         pointerEvents={isCollapsed ? 'none' : 'auto'}
       >
         {isCollapsed ? null : (
-          <SyntaxHighlighter
-            language={language.length > 0 ? language : 'plaintext'}
-            style={codeSyntaxTheme}
-            highlighter="hljs"
-            fontFamily={monospaceFontFamily}
-            fontSize={15}
-            PreTag={View}
-            CodeTag={View}
-            customStyle={codeContentStyle}
-          >
-            {content}
-          </SyntaxHighlighter>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <SyntaxHighlighter
+              language={language.length > 0 ? language : 'plaintext'}
+              style={codeSyntaxTheme}
+              renderer={renderer}
+              customStyle={{
+                ...codeContentStyle,
+                backgroundColor: 'transparent',
+              }}
+            >
+              {content}
+            </SyntaxHighlighter>
+          </ScrollView>
         )}
       </View>
     </View>

package/recipes/chatbot-supabase/recipe.json

@@ -1,7 +1,7 @@
 {
-  "name": "chatbot",
+  "name": "chatbot-supabase",
   "version": "1.0.0",
-  "description": "AI-powered chat assistant with Supabase backend",
+  "description": "AI-powered chat assistant with Supabase",
   "copy": [
     {
       "from": "apps/native/src/app/chatbot",
@@ -11,22 +11,6 @@
       "from": "apps/native/src/features/chatbot",
       "to": "apps/native/src/features/chatbot"
     },
-    {
-      "from": "apps/native/src/api-client/supabase/chatbot.ts",
-      "to": "apps/native/src/api-client/supabase/chatbot.ts"
-    },
-    {
-      "from": "apps/native/src/api-client/supabase/push-notifications.ts",
-      "to": "apps/native/src/api-client/supabase/push-notifications.ts"
-    },
-    {
-      "from": "apps/native/src/api-client/supabase/shared.ts",
-      "to": "apps/native/src/api-client/supabase/shared.ts"
-    },
-    {
-      "from": "apps/native/src/api-client/shared.ts",
-      "to": "apps/native/src/api-client/shared.ts"
-    },
     {
       "from": "packages/backend/supabase/functions/chat-stream",
       "to": "packages/backend/supabase/functions/chat-stream"
@@ -34,42 +18,17 @@
     {
       "from": "packages/backend/supabase/migrations/chatbot.sql",
       "to": "packages/backend/supabase/migrations/chatbot.sql"
-    },
-    {
-      "from": "packages/backend/src/services/conversations.ts",
-      "to": "packages/backend/src/services/conversations.ts"
-    },
-    {
-      "from": "packages/backend/src/services/messages.ts",
-      "to": "packages/backend/src/services/messages.ts"
     }
   ],
   "nav": {
     "href": "/(root)/(protected)/chatbot",
-    "label": "AI Chatbot",
+    "label": "AI Chatbot (Supabase)",
     "icon": "💬",
     "color": "#F43F5E"
   },
   "target": "native",
-  "configuration": {
-    "apiClient": {
-      "exports": [
-        "export { type SupabaseChatbotApi as ChatbotApi, supabaseChatbotApi as chatbotApi } from './supabase/chatbot';"
-      ]
-    },
-    "backend": {
-      "exports": [
-        "export { conversationsService, getOrCreateDefault, create as createConversation, list as listConversations, deleteConversation, getById as getConversationById } from './services/conversations';",
-        "export type { GetConversationResult, ListConversationsResult, DeleteConversationResult } from './services/conversations';",
-        "export { messagesService, storeMessage, listMessages, deleteUserMessage, clearConversationMessages } from './services/messages';",
-        "export type { StoreMessageInput, StoreMessageResult, ListMessagesResult, DeleteMessageResult, ClearMessagesResult } from './services/messages';"
-      ]
-    }
-  },
   "dependencies": {
     "expo": [
-      "@supabase/supabase-js",
-      "@tanstack/react-query",
       "expo-clipboard",
       "markdown-it",
       "react-native-markdown-display",
@@ -77,30 +36,5 @@
       "react-native-reanimated",
       "react-native-safe-area-context"
     ]
-  },
-  "env": [
-    {
-      "key": "OPENAI_API_KEY",
-      "description": "OpenAI API key for chat completions",
-      "example": "sk-...",
-      "link": "https://platform.openai.com/api-keys",
-      "file": "packages/backend/supabase/.env",
-      "required": true
-    }
-  ],
-  "manualSteps": [
-    {
-      "title": "Apply Supabase migration",
-      "description": "Run: cd packages/backend && supabase db push",
-      "content": "supabase db push"
-    },
-    {
-      "title": "Deploy Edge Function",
-      "description": "Run: cd packages/backend && supabase functions deploy chat-stream",
-      "content": "supabase functions deploy chat-stream"
-    }
-  ],
-  "postInstall": {
-    "message": "📦 Remember to run 'supabase db push' and 'supabase functions deploy chat-stream'"
   }
 }

package/recipes/glowing-button/recipe.json

@@ -1,7 +1,7 @@
 {
   "name": "glowing-button",
   "version": "1.0.0",
-  "description": "Animated glowing button with multiple presets",
+  "description": "Advanced UI component: glowing-button",
   "target": "native",
   "copy": [
     {
@@ -10,6 +10,10 @@
     }
   ],
   "dependencies": {
-    "expo": ["react-native-reanimated"]
+    "expo": [
+      "react-native-animated-glow",
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
   }
 }

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/_layout.tsx

@@ -0,0 +1,5 @@
+import { Slot } from 'expo-router';
+
+export default function AnalysisLayout() {
+  return <Slot />;
+}

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/analysis-options.tsx

@@ -0,0 +1,50 @@
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { DynamicAnalysisOptionsScreen } from '@/features/image-analyzer/app/analysis-options-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic analysis options route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicAnalysisOptionsRoute() {
+  const { type } = useLocalSearchParams<{ type: string }>();
+  const theme = useThemeConfig();
+
+  if (!type || typeof type !== 'string') {
+    return <Redirect href="/(protected)/(tabs)" />;
+  }
+
+  const config = getAnalysisFlowConfigSafe(type);
+
+  if (!config) {
+    // Invalid analysis type, redirect to home with a user-friendly message
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-lg font-medium">
+          {translate('common.invalid_analysis_type')}
+        </Text>
+        <Text className="mb-6 text-center text-muted-foreground">
+          {translate('common.redirecting_home')}
+        </Text>
+        <Redirect href="/(protected)/(tabs)" />
+      </View>
+    );
+  }
+
+  return <DynamicAnalysisOptionsScreen config={config} />;
+}

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/camera.tsx

@@ -0,0 +1,2 @@
+// Re-export the camera screen
+export { default } from '@/features/image-analyzer/app/camera';

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/index.tsx

@@ -0,0 +1,50 @@
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { ImageCaptureScreen } from '@/features/image-analyzer/app/image-capture-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic analysis route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicAnalysisScreen() {
+  const { type } = useLocalSearchParams<{ type: string }>();
+  const theme = useThemeConfig();
+
+  if (!type || typeof type !== 'string') {
+    return <Redirect href="/(protected)/(tabs)" />;
+  }
+
+  const config = getAnalysisFlowConfigSafe(type);
+
+  if (!config) {
+    // Invalid analysis type, redirect to home with a user-friendly message
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-lg font-medium">
+          {translate('common.invalid_analysis_type')}
+        </Text>
+        <Text className="mb-6 text-center text-muted-foreground">
+          {translate('common.redirecting_home')}
+        </Text>
+        <Redirect href="/(protected)/(tabs)" />
+      </View>
+    );
+  }
+
+  return <ImageCaptureScreen config={config} />;
+}

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/loading.tsx

@@ -0,0 +1,50 @@
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { LoadingScreen } from '@/features/image-analyzer/app/loading-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic loading route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicLoadingRoute() {
+  const { type } = useLocalSearchParams<{ type: string }>();
+  const theme = useThemeConfig();
+
+  if (!type || typeof type !== 'string') {
+    return <Redirect href="/(protected)/(tabs)" />;
+  }
+
+  const config = getAnalysisFlowConfigSafe(type);
+
+  if (!config) {
+    // Invalid analysis type, redirect to home with a user-friendly message
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-lg font-medium">
+          {translate('common.invalid_analysis_type')}
+        </Text>
+        <Text className="mb-6 text-center text-muted-foreground">
+          {translate('common.redirecting_home')}
+        </Text>
+        <Redirect href="/(protected)/(tabs)" />
+      </View>
+    );
+  }
+
+  return <LoadingScreen config={config} />;
+}

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/results.tsx

@@ -0,0 +1,2 @@
+// Re-export the results screen
+export { default } from '@/features/image-analyzer/app/results';

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/trait-details.tsx

@@ -0,0 +1,3 @@
+import TraitDetailsScreen from '@/features/image-analyzer/app/trait-details';
+
+export default TraitDetailsScreen;

package/recipes/image-analysis/apps/native/src/features/image-analyzer/app/analysis-options-screen.tsx

@@ -88,7 +88,7 @@ export function DynamicAnalysisOptionsScreen({
   config,
 }: DynamicAnalysisOptionsProps) {
   const router = useRouter();
-  const { standard } = useNavigationOptions();
+  const { scrollable } = useNavigationOptions();
   const params = useLocalSearchParams();
 
   const imageUris: string[] = useMemo(
@@ -145,7 +145,7 @@ export function DynamicAnalysisOptionsScreen({
     <>
       <Stack.Screen
         options={{
-          ...standard,
+          ...scrollable,
           title: config.name,
           headerBackButtonDisplayMode: 'generic',
         }}