vibefast-cli 0.1.1

package/dist/index.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { addCommand } from './commands/add.js';
+import { removeCommand } from './commands/remove.js';
+import { listCommand } from './commands/list.js';
+import { doctorCommand } from './commands/doctor.js';
+import { loginCommand } from './commands/login.js';
+import { devicesCommand } from './commands/devices.js';
+import { logoutCommand } from './commands/logout.js';
+const program = new Command();
+program
+    .name('vf')
+    .description('VibeFast CLI - Install features into your monorepo')
+    .version('0.1.0');
+program.addCommand(loginCommand);
+program.addCommand(logoutCommand);
+program.addCommand(devicesCommand);
+program.addCommand(doctorCommand);
+program.addCommand(listCommand);
+program.addCommand(addCommand);
+program.addCommand(removeCommand);
+program.parse();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,IAAI,CAAC;KACV,WAAW,CAAC,oDAAoD,CAAC;KACjE,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AACjC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,OAAO,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;AACnC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AAChC,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;AAC/B,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAElC,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/docs/decisions.md

@@ -0,0 +1,55 @@
+# VibeFast CLI — Decisions & Ground Rules
+
+## Package Details
+- **Package name:** `vibefast-cli`
+- **Binary alias:** `vf`
+- **Default target:** `native` (override with `--target web`)
+
+## Authentication
+- **Method:** Fixed opaque token per customer
+- **Device slots:** 2 by default
+- **Storage:** Cloudflare Worker validates token/seat → issues short-lived signed URL to recipe zip in R2/KV
+
+## Repository Signature
+Requires `.vibefast/starter.json`:
+```json
+{
+  "name": "vibefast",
+  "version": "1.0.0",
+  "targets": ["native", "web"]
+}
+```
+
+## Code Markers
+
+### Native Target
+File: `apps/native/src/app/(root)/(protected)/(tabs)/index.tsx`
+```tsx
+// --- @vibefast:navigation:start ---
+{/* CLI will inject feature links here */}
+// --- @vibefast:navigation:end ---
+```
+
+### Web Target
+File: `apps/web/app/page.tsx`
+```tsx
+{/* @vibefast:nav:start */}
+{/* CLI will inject feature cards here */}
+{/* @vibefast:nav:end */}
+```
+
+## Journal
+- **Location:** `.vibefast/journal.json`
+- **Purpose:** Tracks installed files and nav inserts
+
+## Rate Limits
+- **Daily:** 500 requests per token
+- **Per minute:** 30 requests per token
+- Subject to tuning based on usage patterns
+
+## Delivery Architecture
+1. CLI sends token + device info to Cloudflare Worker
+2. Worker validates token and checks device slots
+3. Worker issues short-lived signed URL to recipe zip in R2/KV
+4. CLI downloads and extracts recipe
+5. CLI applies codemod and updates journal

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "vibefast-cli",
+  "version": "0.1.1",
+  "description": "CLI for installing VibeFast features into your monorepo",
+  "type": "module",
+  "bin": {
+    "vf": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsx src/index.ts",
+    "test": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vibefast",
+    "cli",
+    "expo",
+    "nextjs",
+    "monorepo"
+  ],
+  "author": "VibeFast",
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^12.0.0",
+    "picocolors": "^1.0.0",
+    "yauzl": "^2.10.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/yauzl": "^2.10.3",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/recipes/audio-recorder/apps/native/src/app/audio-recorder/index.tsx

@@ -0,0 +1,5 @@
+import { RecordingListDemo } from '@/features/audio-recorder/demo/with-recording-list-demo';
+
+export default function AudioRecorderScreen() {
+  return <RecordingListDemo />;
+}

package/recipes/audio-recorder/apps/native/src/features/audio-recorder/components/audio-player.tsx

@@ -0,0 +1,301 @@
+import {
+  type AudioSource,
+  useAudioPlayer,
+  useAudioPlayerStatus,
+} from 'expo-audio';
+import { useCallback, useEffect, useState } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { tv } from 'tailwind-variants';
+
+import { Button, Icon, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+// import { Progress } from '@/components/ui/progress';
+import { AudioWaveform } from './audio-waveform';
+
+const audioPlayerStyles = tv({
+  slots: {
+    container: 'm-2 rounded-2xl p-4',
+    waveformContainer: 'mb-3 items-center',
+    progressBarContainer: 'mb-3 px-1',
+    timerContainer: 'mb-3 flex-row items-center justify-between',
+    timerText: 'font-mono text-sm text-muted',
+    controlsContainer: 'mt-2 flex-row items-center justify-center gap-4',
+    controlButton: 'size-14',
+    playPauseButton: 'size-16 rounded-full',
+    loadingContainer: 'items-center p-2',
+    loadingText: 'text-muted',
+  },
+  variants: {
+    shrinked: {
+      true: {
+        container: 'm-0 rounded-2xl p-2',
+        waveformContainer: 'mb-0 items-center',
+        progressBarContainer: 'mb-0 px-1',
+        timerContainer: 'mb-0 flex-row items-center justify-between',
+        controlsContainer: 'mt-0 flex-row items-center justify-center gap-2',
+      },
+    },
+  },
+});
+
+export interface AudioPlayerProps {
+  source: AudioSource;
+  shrinked?: boolean;
+  style?: ViewStyle & { className?: string };
+  showControls?: boolean;
+  showWaveform?: boolean;
+  showTimer?: boolean;
+  showProgressBar?: boolean;
+  autoPlay?: boolean;
+  onPlaybackStatusUpdate?: (status: any) => void;
+  // Custom sizing props for compact mode
+  waveformHeight?: number;
+  waveformBarCount?: number;
+  waveformBarWidth?: number;
+  waveformBarGap?: number;
+  controlButtonSize?: number;
+  playButtonSize?: number;
+}
+
+export function AudioPlayer({
+  source,
+  style,
+  shrinked = false,
+  showControls = true,
+  showWaveform = true,
+  showTimer = true,
+  // showProgressBar = true,
+  autoPlay = false,
+  onPlaybackStatusUpdate,
+  // Custom sizing with defaults
+  waveformHeight = 80,
+  waveformBarCount = 60,
+  waveformBarWidth = 4,
+  waveformBarGap = 1.5,
+  controlButtonSize = 24,
+  playButtonSize = 28,
+}: AudioPlayerProps) {
+  const {
+    container,
+    waveformContainer,
+    // progressBarContainer,
+    timerContainer,
+    timerText,
+    controlsContainer,
+    controlButton,
+    playPauseButton,
+    loadingContainer,
+    loadingText,
+  } = audioPlayerStyles({ shrinked });
+  const theme = useThemeConfig();
+  const player = useAudioPlayer(source);
+  const status = useAudioPlayerStatus(player);
+  const [duration, setDuration] = useState(0);
+  const [position, setPosition] = useState(0);
+  const [isSeeking, setIsSeeking] = useState(false);
+
+  // Enhanced waveform data - more bars for smoother visualization
+  const [waveformData] = useState<number[]>(
+    Array.from({ length: 60 }, (_, i) => {
+      // Create more varied and realistic waveform pattern
+      const base1 = Math.sin((i / 60) * Math.PI * 6) * 0.4 + 0.5;
+      const base2 = Math.sin((i / 60) * Math.PI * 2.5) * 0.3 + 0.4;
+      const noise = (Math.random() - 0.5) * 0.25;
+      const peak = Math.random() < 0.15 ? Math.random() * 0.4 : 0; // Occasional peaks
+      return Math.max(0.15, Math.min(0.95, (base1 + base2) / 2 + noise + peak));
+    }),
+  );
+
+  useEffect(() => {
+    if (autoPlay && player.isLoaded && !player.playing) {
+      player.play();
+    }
+  }, [autoPlay, player]);
+
+  useEffect(() => {
+    if (!isSeeking && status?.isLoaded) {
+      setDuration(status.duration || 0);
+      setPosition(status.currentTime || 0);
+
+      if (status.didJustFinish && status.duration > 0) {
+        player.seekTo(0);
+        player.pause();
+      }
+
+      onPlaybackStatusUpdate?.(status);
+    }
+  }, [status, isSeeking, player, onPlaybackStatusUpdate]);
+
+  const handlePlayPause = () => {
+    if (player.playing) {
+      player.pause();
+    } else {
+      player.play();
+    }
+  };
+
+  const handleBackFiveSeconds = () => {
+    const newPosition = Math.max(0, position - 5);
+    seekToPosition(newPosition);
+  };
+
+  const handleRestart = () => {
+    seekToPosition(0);
+  };
+
+  // Unified seeking function
+  const seekToPosition = useCallback(
+    (newPosition: number) => {
+      if (player.isLoaded && duration > 0) {
+        const clampedPosition = Math.max(0, Math.min(duration, newPosition));
+        player.seekTo(clampedPosition);
+        setPosition(clampedPosition);
+      }
+    },
+    [player, duration],
+  );
+
+  // Handle waveform seeking
+  const handleWaveformSeek = useCallback(
+    (seekPercentage: number) => {
+      if (duration > 0) {
+        const newPosition = (seekPercentage / 100) * duration;
+        seekToPosition(newPosition);
+      }
+    },
+    [duration, seekToPosition],
+  );
+
+  // Handle progress bar seeking
+  // const handleProgressSeek = useCallback(
+  //   (progressValue: number) => {
+  //     if (duration > 0) {
+  //       const newPosition = (progressValue / 100) * duration;
+  //       seekToPosition(newPosition);
+  //     }
+  //   },
+  //   [duration, seekToPosition]
+  // );
+
+  // Handle seeking start/end for smooth updates
+  const handleSeekStart = useCallback(() => {
+    setIsSeeking(true);
+  }, []);
+
+  const handleSeekEnd = useCallback(() => {
+    setIsSeeking(false);
+  }, []);
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const progressPercentage = duration > 0 ? (position / duration) * 100 : 0;
+
+  return (
+    <View className={container({ class: style?.className })}>
+      {/* Waveform Visualization with seeking capability */}
+      {showWaveform && (
+        <View className={waveformContainer()}>
+          <AudioWaveform
+            data={waveformData}
+            isPlaying={player.playing}
+            progress={progressPercentage}
+            onSeek={handleWaveformSeek}
+            onSeekStart={handleSeekStart}
+            onSeekEnd={handleSeekEnd}
+            height={waveformHeight}
+            barCount={waveformBarCount}
+            barWidth={waveformBarWidth}
+            barGap={waveformBarGap}
+            animated={true}
+            showProgress={true}
+            interactive={true} // Enable seeking
+          />
+        </View>
+      )}
+
+      {/* Interactive Progress Bar */}
+      {/* {showProgressBar && (
+        <View className={progressBarContainer()}>
+          <Progress
+            value={progressPercentage}
+            onValueChange={handleProgressSeek}
+            onSeekStart={handleSeekStart}
+            onSeekEnd={handleSeekEnd}
+            style={{ height: 8 }}
+            indicatorClassName="bg-destructive"
+          />
+        </View>
+      )} */}
+
+      {/* Timer Display */}
+      {showTimer && (
+        <View className={timerContainer()}>
+          <Text className={timerText()}>{formatTime(position)}</Text>
+          <Text className={timerText()}>{formatTime(duration)}</Text>
+        </View>
+      )}
+
+      {/* Playback Controls */}
+      {showControls && (
+        <View className={controlsContainer()}>
+          {/* Back 5s Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className={controlButton()}
+            onPress={handleBackFiveSeconds}
+            disabled={!player.isLoaded}
+          >
+            <Icon name="refresh" size={controlButtonSize} />
+          </Button>
+
+          {/* Play/Pause Button */}
+          <Button
+            variant="default"
+            size="icon"
+            className={playPauseButton()}
+            onPress={handlePlayPause}
+            disabled={!player.isLoaded}
+          >
+            {player.playing ? (
+              <Icon
+                name="pause"
+                size={playButtonSize}
+                color={theme.colors.background}
+              />
+            ) : (
+              <Icon
+                name="play"
+                size={playButtonSize}
+                color={theme.colors.background}
+              />
+            )}
+          </Button>
+
+          {/* Stop Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className={controlButton()}
+            onPress={handleRestart}
+            disabled={!player.isLoaded}
+          >
+            <Icon name="stop" size={controlButtonSize} />
+          </Button>
+        </View>
+      )}
+
+      {/* Loading State */}
+      {!player.isLoaded && (
+        <View className={loadingContainer()}>
+          <Text className={loadingText()}>Loading audio...</Text>
+        </View>
+      )}
+    </View>
+  );
+}