vibefast-cli 0.6.2 → 0.7.1

package/recipes/0/apps/native/src/components/advanced-ui/timeline/timeline-view.tsx

@@ -1,355 +0,0 @@
-/* eslint-disable */
-
-import { Feather } from '@expo/vector-icons';
-import React, { useEffect } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import Animated, {
-  FadeInDown,
-  interpolateColor,
-  LinearTransition,
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { useThemeConfig } from '../../../lib/use-theme-config';
-import type { TimelineProps } from './types';
-
-const AnimatedTouchableOpacity =
-  Animated.createAnimatedComponent(TouchableOpacity);
-const AnimatedFeather = Animated.createAnimatedComponent(Feather);
-
-export const Timeline: React.FC<TimelineProps> &
-  React.FunctionComponent<TimelineProps> = ({
-  items = [],
-  activeColor: propsActiveColor,
-  inactiveColor: propsInactiveColor,
-  animated = true,
-  animationType = 'bounce',
-  onItemPress,
-  containerStyle,
-  titleStyle,
-  descriptionStyle,
-  timestampStyle,
-  lineWidth = 2,
-  iconSize = 20,
-  metaContainerStyle,
-  metaTextStyle,
-}: TimelineProps): React.ReactNode & React.JSX.Element => {
-  const { colors } = useThemeConfig();
-  const activeColor = propsActiveColor ?? colors.primary;
-  const inactiveColor = propsInactiveColor ?? colors.muted;
-
-  const statusRefs = React.useRef<Record<string | number, string>>({});
-
-  useEffect(() => {
-    items.forEach((item) => {
-      statusRefs.current[item.id] = item.status || 'upcoming';
-    });
-
-    return () => {
-      statusRefs.current = {};
-    };
-  }, [items]);
-
-  if (!items || items.length === 0) {
-    return null as unknown as React.ReactNode & React.JSX.Element;
-  }
-
-  return (
-    <Animated.View style={[styles.container, containerStyle]}>
-      {items.map((item, index) => {
-        const isFirst = index === 0;
-        const isLast = index === items.length - 1;
-        const isComplete = item.status === 'complete';
-        const isCurrent = item.status === 'current';
-        const isUpcoming = item.status === 'upcoming' || !item.status;
-
-        const prevStatus = statusRefs.current[item.id];
-        const wasComplete = prevStatus === 'complete';
-        const statusChanged = prevStatus && prevStatus !== item.status;
-        statusRefs.current[item.id] = item.status || 'upcoming';
-
-        const dotScale = useSharedValue(statusChanged ? 1.5 : 1);
-        const dotColorAnimated = useSharedValue(
-          isComplete ? 1 : isCurrent ? 0.5 : 0,
-        );
-        const lineProgress = useSharedValue(isComplete ? 1 : 0);
-        const iconRotate = useSharedValue(statusChanged ? 0 : 1);
-
-        useEffect(() => {
-          if (statusChanged) {
-            switch (animationType) {
-              case 'bounce':
-                dotScale.value = withSequence(
-                  withTiming(1.5, { duration: 200 }),
-                  withSpring(1),
-                );
-                break;
-              case 'spring':
-                dotScale.value = withSpring(1.2, { damping: 2, stiffness: 80 });
-                break;
-              case 'rotate':
-                iconRotate.value = withSequence(
-                  withTiming(0, { duration: 10 }),
-                  withTiming(4, { duration: 800 }),
-                );
-                dotScale.value = withSequence(
-                  withTiming(1.6, { duration: 200 }),
-                  withSpring(1),
-                );
-                dotColorAnimated.value = withSequence(
-                  withTiming(0, { duration: 200 }),
-                  withTiming(isComplete ? 1 : isCurrent ? 0.5 : 0, {
-                    duration: 400,
-                  }),
-                );
-                break;
-              case 'fade':
-                dotColorAnimated.value = withSequence(
-                  withTiming(0, { duration: 200 }),
-                  withTiming(isComplete ? 1 : isCurrent ? 0.5 : 0, {
-                    duration: 400,
-                  }),
-                );
-                break;
-              case 'scale':
-                dotScale.value = withSequence(
-                  withTiming(0.5, { duration: 200 }),
-                  withTiming(1.2, { duration: 200 }),
-                  withTiming(1, { duration: 200 }),
-                );
-                break;
-              default:
-                dotScale.value = withSequence(
-                  withTiming(1.5, { duration: 200 }),
-                  withSpring(1),
-                );
-            }
-
-            dotColorAnimated.value = withTiming(
-              isComplete ? 1 : isCurrent ? 0.5 : 0,
-              { duration: 400 },
-            );
-
-            iconRotate.value = withSequence(
-              withTiming(0, { duration: 10 }),
-              withTiming(1, { duration: 400 }),
-            );
-
-            if (isComplete) {
-              lineProgress.value = withTiming(1, { duration: 600 });
-            } else if (wasComplete) {
-              lineProgress.value = withTiming(0, { duration: 600 });
-            }
-          } else {
-            lineProgress.value = isComplete ? 1 : 0;
-          }
-        }, [
-          item.status,
-          isComplete,
-          isCurrent,
-          animationType,
-          dotColorAnimated,
-          dotScale,
-          iconRotate,
-          lineProgress,
-          statusChanged,
-          wasComplete,
-        ]);
-
-        const dotAnimatedStyle = useAnimatedStyle(() => {
-          return {
-            transform: [{ scale: dotScale.value }],
-            backgroundColor: interpolateColor(
-              dotColorAnimated.value,
-              [0, 0.5, 1],
-              [inactiveColor, activeColor, activeColor],
-            ),
-          };
-        });
-
-        const lineAnimatedStyle = useAnimatedStyle(() => {
-          return {
-            backgroundColor: interpolateColor(
-              lineProgress.value,
-              [0, 1],
-              [inactiveColor, activeColor],
-            ),
-            width: lineWidth,
-            transform: [{ scaleY: lineProgress.value }],
-            opacity: 0.6 + lineProgress.value * 0.4,
-          };
-        });
-
-        const iconAnimatedStyle = useAnimatedStyle(() => {
-          return {
-            transform: [{ rotate: `${iconRotate.value * 360}deg` }],
-            opacity: 0.8 + iconRotate.value * 0.2,
-          };
-        });
-
-        const iconName =
-          item.icon ||
-          (isComplete ? 'check' : isCurrent ? 'activity' : 'circle');
-
-        const textColor =
-          isComplete || isCurrent ? colors.foreground : colors.mutedForeground;
-
-        return (
-          <AnimatedTouchableOpacity
-            key={item.id}
-            style={styles.itemContainer}
-            activeOpacity={onItemPress ? 0.7 : 1}
-            onPress={() => onItemPress && onItemPress(item)}
-            entering={
-              animated ? FadeInDown.delay(index * 100).springify() : undefined
-            }
-            layout={LinearTransition.springify()}
-          >
-            <View style={styles.timelineColumn}>
-              <Animated.View style={[styles.dot, dotAnimatedStyle]}>
-                <Animated.View style={[{}, iconAnimatedStyle]}>
-                  <AnimatedFeather
-                    name={iconName as any}
-                    size={iconSize * 0.7}
-                    color={colors.primaryForeground}
-                  />
-                </Animated.View>
-              </Animated.View>
-
-              {!isLast && (
-                <Animated.View style={[styles.line, lineAnimatedStyle]} />
-              )}
-            </View>
-
-            <View style={styles.contentColumn}>
-              <View style={styles.itemHeader}>
-                <Text style={[styles.title, { color: textColor }, titleStyle]}>
-                  {item.title}
-                </Text>
-
-                {item.timestamp && (
-                  <Text
-                    style={[
-                      styles.timestamp,
-                      { color: colors.mutedForeground },
-                      timestampStyle,
-                    ]}
-                  >
-                    {item.timestamp}
-                  </Text>
-                )}
-              </View>
-
-              {item.description && (
-                <Text
-                  style={[
-                    styles.description,
-                    { color: colors.mutedForeground },
-                    descriptionStyle,
-                  ]}
-                >
-                  {item.description}
-                </Text>
-              )}
-
-              {item.meta && (
-                <View style={[styles.metaContainer, metaContainerStyle]}>
-                  <Text
-                    style={[
-                      styles.metaText,
-                      { color: colors.mutedForeground },
-                      metaTextStyle,
-                    ]}
-                  >
-                    {item.meta}
-                  </Text>
-                </View>
-              )}
-
-              {item.children && (
-                <View
-                  style={[styles.childrenContainer, item.childrenContainer]}
-                >
-                  {item.children}
-                </View>
-              )}
-            </View>
-          </AnimatedTouchableOpacity>
-        );
-      })}
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-  },
-  itemContainer: {
-    flexDirection: 'row',
-    marginBottom: 24,
-  },
-  timelineColumn: {
-    alignItems: 'center',
-    width: 40,
-  },
-  contentColumn: {
-    flex: 1,
-    marginLeft: 12,
-    marginTop: -4,
-  },
-  dot: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    justifyContent: 'center',
-    alignItems: 'center',
-    elevation: 2,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 1,
-  },
-  line: {
-    flex: 1,
-    marginTop: 4,
-  },
-  itemHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: 6,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: '600',
-    flex: 1,
-  },
-  description: {
-    fontSize: 14,
-    lineHeight: 20,
-    marginBottom: 8,
-  },
-  timestamp: {
-    fontSize: 12,
-    marginLeft: 8,
-  },
-  metaContainer: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 6,
-    alignSelf: 'flex-start',
-    marginTop: 4,
-    marginBottom: 8,
-  },
-  metaText: {
-    fontSize: 12,
-  },
-  childrenContainer: {
-    padding: 12,
-  },
-});

package/recipes/0/apps/native/src/components/advanced-ui/timeline/types.ts

@@ -1,31 +0,0 @@
-import type { Feather } from '@expo/vector-icons';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-
-export interface TimelineItem {
-  id: string | number;
-  title: string;
-  description?: string;
-  timestamp?: string;
-  icon?: keyof typeof Feather.glyphMap;
-  status?: 'complete' | 'current' | 'upcoming';
-  meta?: string;
-  children?: React.ReactNode;
-  childrenContainer?: StyleProp<ViewStyle>;
-}
-
-export interface TimelineProps {
-  items: TimelineItem[];
-  activeColor?: string;
-  inactiveColor?: string;
-  animated?: boolean;
-  animationType?: 'bounce' | 'spring' | 'rotate' | 'fade' | 'scale';
-  onItemPress?: (item: TimelineItem) => void;
-  containerStyle?: ViewStyle;
-  metaContainerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: TextStyle;
-  descriptionStyle?: TextStyle;
-  timestampStyle?: TextStyle;
-  lineWidth?: number;
-  iconSize?: number;
-  metaTextStyle?: StyleProp<TextStyle>;
-}

package/recipes/wake-word/scripts/download-vosk-model.mjs

@@ -1,121 +0,0 @@
-import { execSync } from 'child_process';
-import fs from 'fs';
-import https from 'https';
-import path from 'path';
-
-const MODEL_URL =
-  'https://alphacephei.com/vosk/models/vosk-model-small-en-us-0.15.zip';
-const MODEL_NAME = 'model-en-us';
-const ASSETS_DIR = path.resolve('assets/vosk-model');
-const MODEL_PATH = path.join(ASSETS_DIR, MODEL_NAME);
-const ZIP_PATH = path.join(ASSETS_DIR, 'model.zip');
-
-const downloadFile = (url, dest) => {
-  return new Promise((resolve, reject) => {
-    const file = fs.createWriteStream(dest);
-    https
-      .get(url, (response) => {
-        if (response.statusCode === 302 || response.statusCode === 301) {
-          // Follow redirect
-          return downloadFile(response.headers.location, dest)
-            .then(resolve)
-            .catch(reject);
-        }
-
-        const totalSize = parseInt(response.headers['content-length'], 10);
-        let downloaded = 0;
-
-        response.on('data', (chunk) => {
-          downloaded += chunk.length;
-          const percent = ((downloaded / totalSize) * 100).toFixed(1);
-          process.stdout.write(
-            `\r📥 Downloading: ${percent}% (${(downloaded / 1024 / 1024).toFixed(1)}MB / ${(totalSize / 1024 / 1024).toFixed(1)}MB)`
-          );
-        });
-
-        response.pipe(file);
-
-        file.on('finish', () => {
-          file.close(() => {
-            console.log('\n✅ Download complete!');
-            resolve();
-          });
-        });
-      })
-      .on('error', (err) => {
-        fs.unlink(dest, () => {});
-        reject(err);
-      });
-  });
-};
-
-const unzipFile = (zipPath, destDir) => {
-  console.log('📦 Extracting model...');
-  try {
-    // Try unzip command (macOS/Linux)
-    execSync(`unzip -q "${zipPath}" -d "${destDir}"`, { stdio: 'inherit' });
-  } catch {
-    // Fallback: try using node's built-in if available
-    console.error(
-      '❌ unzip command not found. Please install unzip or extract manually.'
-    );
-    throw new Error('Extraction failed');
-  }
-};
-
-(async () => {
-  try {
-    console.log('🎙️  Vosk Model Setup\n');
-
-    // Check if model already exists
-    if (fs.existsSync(MODEL_PATH)) {
-      console.log('✅ Vosk model already exists at:', MODEL_PATH);
-      console.log('   Delete it first if you want to re-download.');
-      process.exit(0);
-    }
-
-    // Create assets directory if it doesn't exist
-    if (!fs.existsSync(ASSETS_DIR)) {
-      fs.mkdirSync(ASSETS_DIR, { recursive: true });
-      console.log('📁 Created directory:', ASSETS_DIR);
-    }
-
-    // Download the model
-    console.log('📥 Downloading Vosk model (~40MB)...');
-    console.log('   From:', MODEL_URL);
-    await downloadFile(MODEL_URL, ZIP_PATH);
-
-    // Extract the model
-    unzipFile(ZIP_PATH, ASSETS_DIR);
-
-    // Rename extracted folder to expected name
-    const extractedFolder = fs
-      .readdirSync(ASSETS_DIR)
-      .find((f) => f.startsWith('vosk-model-small-en-us'));
-
-    if (extractedFolder) {
-      const extractedPath = path.join(ASSETS_DIR, extractedFolder);
-      fs.renameSync(extractedPath, MODEL_PATH);
-      console.log(`✅ Renamed ${extractedFolder} → ${MODEL_NAME}`);
-    } else {
-      throw new Error('Extracted folder not found. The zip structure may have changed.');
-    }
-
-    // Clean up zip file
-    fs.unlinkSync(ZIP_PATH);
-    console.log('🧹 Cleaned up zip file');
-
-    console.log('\n✅ Vosk model setup complete!');
-    console.log('   Model location:', MODEL_PATH);
-    console.log('   You can now use wake word detection features.');
-  } catch (err) {
-    console.error('\n❌ Setup failed:', err.message);
-    console.error('\n💡 Manual setup:');
-    console.error(
-      '   1. Download: https://alphacephei.com/vosk/models/vosk-model-small-en-us-0.15.zip'
-    );
-    console.error('   2. Extract to: assets/vosk-model/');
-    console.error('   3. Rename folder to: model-en-us');
-    process.exit(1);
-  }
-})();