kynjal-cli 2.0.6 → 3.1.0

package/dist/templates/demo/audio-waveform/audio-waveform-interactive.tsx

@@ -1,114 +0,0 @@
-import { AudioWaveform } from '@/components/ui/audio-waveform';
-import { Button } from '@/components/ui/button';
-import { Text } from '@/components/ui/text';
-import { View } from '@/components/ui/view';
-import React, { useEffect, useState } from 'react';
-
-export function AudioWaveformInteractive() {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [isSeeking, setIsSeeking] = useState(false);
-
-  // Sample audio data - more realistic pattern
-  const audioData = [
-    0.2, 0.4, 0.3, 0.6, 0.8, 0.5, 0.7, 0.9, 0.4, 0.3, 0.5, 0.7, 0.6, 0.8, 0.9,
-    0.7, 0.5, 0.3, 0.4, 0.6, 0.8, 0.9, 0.7, 0.5, 0.4, 0.6, 0.8, 0.7, 0.5, 0.3,
-    0.4, 0.6, 0.9, 0.8, 0.6, 0.4, 0.2, 0.3, 0.5, 0.7,
-  ];
-
-  // Auto-play simulation
-  useEffect(() => {
-    let interval: number;
-    if (isPlaying && !isSeeking) {
-      interval = setInterval(() => {
-        setProgress((prev) => {
-          if (prev >= 100) {
-            setIsPlaying(false);
-            return 100;
-          }
-          return prev + 1;
-        });
-      }, 100);
-    }
-    return () => clearInterval(interval);
-  }, [isPlaying, isSeeking]);
-
-  const handleSeek = (position: number) => {
-    setProgress(position);
-  };
-
-  const handleSeekStart = () => {
-    setIsSeeking(true);
-  };
-
-  const handleSeekEnd = () => {
-    setIsSeeking(false);
-  };
-
-  const togglePlayback = () => {
-    setIsPlaying(!isPlaying);
-  };
-
-  const formatTime = (percentage: number) => {
-    const totalSeconds = 180; // 3 minutes total
-    const currentSeconds = (percentage / 100) * totalSeconds;
-    const minutes = Math.floor(currentSeconds / 60);
-    const seconds = Math.floor(currentSeconds % 60);
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-  };
-
-  return (
-    <View style={{ gap: 16 }}>
-      <AudioWaveform
-        data={audioData}
-        isPlaying={isPlaying}
-        progress={progress}
-        showProgress={true}
-        interactive={true}
-        onSeek={handleSeek}
-        onSeekStart={handleSeekStart}
-        onSeekEnd={handleSeekEnd}
-        height={80}
-        barCount={40}
-        barWidth={4}
-        barGap={2}
-        activeColor='#007AFF'
-        inactiveColor='#E5E5E7'
-      />
-
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginTop: 12,
-        }}
-      >
-        <Text variant='caption' style={{ opacity: 0.6 }}>
-          {formatTime(progress)}
-        </Text>
-        <Text variant='caption' style={{ opacity: 0.6 }}>
-          3:00
-        </Text>
-      </View>
-
-      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <Button onPress={togglePlayback}>{isPlaying ? 'Pause' : 'Play'}</Button>
-
-        <Button
-          variant='outline'
-          onPress={() => setProgress(0)}
-          disabled={progress === 0}
-        >
-          Reset
-        </Button>
-
-        {isSeeking && (
-          <Text variant='caption' style={{ color: '#007AFF' }}>
-            Seeking...
-          </Text>
-        )}
-      </View>
-    </View>
-  );
-}

package/dist/templates/demo/audio-waveform/audio-waveform-realtime.tsx

@@ -1,223 +0,0 @@
-import { AudioWaveform } from '@/components/ui/audio-waveform';
-import { Button } from '@/components/ui/button';
-import { Text } from '@/components/ui/text';
-import { View } from '@/components/ui/view';
-import React, { useEffect, useState } from 'react';
-
-export function AudioWaveformRealtime() {
-  const [isActive, setIsActive] = useState(false);
-  const [realtimeData, setRealtimeData] = useState<number[]>([]);
-  const [frequency, setFrequency] = useState(1);
-  const [amplitude, setAmplitude] = useState(0.5);
-
-  // Simulate real-time audio data with different patterns
-  useEffect(() => {
-    let interval: number;
-    if (isActive) {
-      interval = setInterval(() => {
-        const time = Date.now() / 1000;
-
-        // Generate different wave patterns based on frequency and amplitude
-        let newLevel = 0;
-
-        if (frequency === 1) {
-          // Sine wave
-          newLevel = Math.abs(Math.sin(time * 2) * amplitude);
-        } else if (frequency === 2) {
-          // Multiple frequencies combined
-          newLevel = Math.abs(
-            ((Math.sin(time * 3) +
-              Math.sin(time * 1.5) +
-              Math.sin(time * 0.8)) /
-              3) *
-              amplitude
-          );
-        } else {
-          // Random with trend
-          newLevel = Math.max(
-            0,
-            Math.min(1, Math.random() * amplitude + Math.sin(time * 0.5) * 0.3)
-          );
-        }
-
-        setRealtimeData((prev) => {
-          const newData = [...prev, newLevel];
-          // Keep only the last 60 data points for smooth animation
-          return newData.slice(-60);
-        });
-      }, 50);
-    }
-    return () => clearInterval(interval);
-  }, [isActive, frequency, amplitude]);
-
-  const resetData = () => {
-    setRealtimeData([]);
-  };
-
-  const patternButtons = [
-    { id: 1, label: 'Sine Wave', color: '#007AFF' },
-    { id: 2, label: 'Complex', color: '#34C759' },
-    { id: 3, label: 'Random', color: '#FF9500' },
-  ];
-
-  return (
-    <View style={{ gap: 16 }}>
-      <View
-        style={{
-          padding: 16,
-          backgroundColor: isActive
-            ? 'rgba(0, 122, 255, 0.05)'
-            : 'rgba(142, 142, 147, 0.05)',
-          borderRadius: 12,
-          borderWidth: 2,
-          borderColor: isActive ? '#007AFF' : '#E5E5E7',
-          borderStyle: isActive ? 'solid' : 'dashed',
-        }}
-      >
-        <Text variant='body' style={{ marginBottom: 12, fontWeight: 'bold' }}>
-          Real-time Audio Visualization
-        </Text>
-
-        <AudioWaveform
-          data={realtimeData}
-          isPlaying={isActive}
-          animated={true}
-          showProgress={false}
-          height={80}
-          barCount={60}
-          barWidth={2}
-          barGap={1}
-          activeColor={
-            frequency === 1
-              ? '#007AFF'
-              : frequency === 2
-              ? '#34C759'
-              : '#FF9500'
-          }
-          inactiveColor='#E5E5E7'
-        />
-
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginTop: 12,
-          }}
-        >
-          <Text variant='caption' style={{ opacity: 0.6 }}>
-            {realtimeData.length} data points
-          </Text>
-          <Text variant='caption' style={{ opacity: 0.6 }}>
-            {isActive ? 'Live' : 'Stopped'}
-          </Text>
-        </View>
-      </View>
-
-      {/* Controls */}
-      <View style={{ gap: 12 }}>
-        <View style={{ flexDirection: 'row', gap: 8 }}>
-          <Button
-            onPress={() => setIsActive(!isActive)}
-            style={{
-              backgroundColor: isActive ? '#FF3B30' : '#34C759',
-              flex: 1,
-            }}
-          >
-            {isActive ? 'Stop Stream' : 'Start Stream'}
-          </Button>
-          <Button
-            onPress={resetData}
-            variant='outline'
-            disabled={realtimeData.length === 0}
-          >
-            Clear
-          </Button>
-        </View>
-
-        {/* Pattern Selection */}
-        <View>
-          <Text variant='caption' style={{ marginBottom: 8, opacity: 0.7 }}>
-            Wave Pattern:
-          </Text>
-          <View style={{ flexDirection: 'row', gap: 8 }}>
-            {patternButtons.map((pattern) => (
-              <Button
-                key={pattern.id}
-                onPress={() => setFrequency(pattern.id)}
-                variant={frequency === pattern.id ? 'default' : 'outline'}
-                style={{
-                  flex: 1,
-                  backgroundColor:
-                    frequency === pattern.id ? pattern.color : 'transparent',
-                  borderColor: pattern.color,
-                }}
-              >
-                <Text
-                  style={{
-                    color: frequency === pattern.id ? 'white' : pattern.color,
-                    fontSize: 12,
-                  }}
-                >
-                  {pattern.label}
-                </Text>
-              </Button>
-            ))}
-          </View>
-        </View>
-
-        {/* Amplitude Control */}
-        <View>
-          <Text variant='caption' style={{ marginBottom: 8, opacity: 0.7 }}>
-            Amplitude: {Math.round(amplitude * 100)}%
-          </Text>
-          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-            <Button
-              size='icon'
-              variant='outline'
-              onPress={() => setAmplitude(Math.max(0.1, amplitude - 0.1))}
-            >
-              -
-            </Button>
-            <View
-              style={{
-                flex: 1,
-                height: 4,
-                backgroundColor: '#E5E5E7',
-                borderRadius: 2,
-                overflow: 'hidden',
-              }}
-            >
-              <View
-                style={{
-                  width: `${amplitude * 100}%`,
-                  height: '100%',
-                  backgroundColor: '#007AFF',
-                }}
-              />
-            </View>
-            <Button
-              size='icon'
-              variant='outline'
-              onPress={() => setAmplitude(Math.min(1, amplitude + 0.1))}
-            >
-              +
-            </Button>
-          </View>
-        </View>
-      </View>
-
-      <View
-        style={{
-          padding: 12,
-          backgroundColor: 'rgba(255, 149, 0, 0.05)',
-          borderRadius: 8,
-        }}
-      >
-        <Text variant='caption' style={{ textAlign: 'center', opacity: 0.7 }}>
-          Simulates real-time audio input with different wave patterns
-        </Text>
-      </View>
-    </View>
-  );
-}

package/dist/templates/demo/audio-waveform/audio-waveform-recording.tsx

@@ -1,100 +0,0 @@
-import { AudioWaveform } from '@/components/ui/audio-waveform';
-import { Button } from '@/components/ui/button';
-import { Text } from '@/components/ui/text';
-import { View } from '@/components/ui/view';
-import React, { useEffect, useState } from 'react';
-
-export function AudioWaveformRecording() {
-  const [isRecording, setIsRecording] = useState(false);
-  const [recordingData, setRecordingData] = useState<number[]>([]);
-  const [duration, setDuration] = useState(0);
-
-  // Simulate recording with real-time audio levels
-  useEffect(() => {
-    let interval: number;
-    if (isRecording) {
-      interval = setInterval(() => {
-        // Generate random audio level (simulating microphone input)
-        const newLevel = Math.max(
-          0.1,
-          Math.random() * 0.9 + Math.sin(Date.now() / 200) * 0.2
-        );
-
-        setRecordingData((prev) => {
-          const newData = [...prev, newLevel];
-          // Keep only the last 50 data points
-          return newData.slice(-50);
-        });
-
-        setDuration((prev) => prev + 0.1);
-      }, 100);
-    }
-    return () => clearInterval(interval);
-  }, [isRecording]);
-
-  const toggleRecording = () => {
-    if (!isRecording) {
-      setRecordingData([]);
-      setDuration(0);
-    }
-    setIsRecording(!isRecording);
-  };
-
-  const formatDuration = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  };
-
-  return (
-    <View style={{ gap: 16 }}>
-      <View
-        style={{
-          backgroundColor: isRecording ? '#FF3B30' : '#34C759',
-          padding: 12,
-          borderRadius: 12,
-          opacity: 0.1,
-        }}
-      />
-
-      <AudioWaveform
-        data={recordingData}
-        isPlaying={isRecording}
-        animated={true}
-        showProgress={false}
-        height={60}
-        barCount={50}
-        activeColor={isRecording ? '#FF3B30' : '#34C759'}
-        style={{
-          backgroundColor: isRecording
-            ? 'rgba(255, 59, 48, 0.05)'
-            : 'rgba(52, 199, 89, 0.05)',
-          borderRadius: 8,
-          paddingHorizontal: 8,
-        }}
-      />
-
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <Button
-          onPress={toggleRecording}
-          variant={isRecording ? 'destructive' : 'default'}
-        >
-          {isRecording ? 'Stop Recording' : 'Start Recording'}
-        </Button>
-        <Text variant='caption'>{formatDuration(duration)}</Text>
-      </View>
-
-      {recordingData.length > 0 && !isRecording && (
-        <Text variant='caption' style={{ textAlign: 'center', opacity: 0.6 }}>
-          Tap play to preview your recording
-        </Text>
-      )}
-    </View>
-  );
-}

package/dist/templates/demo/audio-waveform/audio-waveform-styled.tsx

@@ -1,195 +0,0 @@
-import { AudioWaveform } from '@/components/ui/audio-waveform';
-import { Button } from '@/components/ui/button';
-import { Text } from '@/components/ui/text';
-import { View } from '@/components/ui/view';
-import React, { useState } from 'react';
-
-export function AudioWaveformStyled() {
-  const [isPlaying1, setIsPlaying1] = useState(false);
-  const [isPlaying2, setIsPlaying2] = useState(false);
-  const [isPlaying3, setIsPlaying3] = useState(false);
-  const [progress1, setProgress1] = useState(35);
-  const [progress2, setProgress2] = useState(60);
-  const [progress3, setProgress3] = useState(80);
-
-  const musicData = [
-    0.1, 0.3, 0.5, 0.4, 0.6, 0.8, 0.7, 0.9, 0.6, 0.4, 0.5, 0.7, 0.8, 0.9, 0.7,
-    0.5, 0.3, 0.4, 0.6, 0.8, 0.9, 0.7, 0.5, 0.4, 0.6, 0.8, 0.7, 0.5, 0.3, 0.4,
-  ];
-
-  const voiceData = [
-    0.2, 0.4, 0.3, 0.5, 0.4, 0.6, 0.5, 0.7, 0.4, 0.3, 0.5, 0.4, 0.6, 0.5, 0.4,
-    0.3, 0.4, 0.5, 0.6, 0.4, 0.3, 0.5, 0.4, 0.3, 0.4, 0.5, 0.4, 0.3, 0.2, 0.3,
-  ];
-
-  const podcastData = [
-    0.3, 0.5, 0.4, 0.6, 0.5, 0.4, 0.6, 0.7, 0.5, 0.4, 0.6, 0.5, 0.7, 0.6, 0.5,
-    0.4, 0.5, 0.6, 0.7, 0.5, 0.4, 0.6, 0.5, 0.4, 0.5, 0.6, 0.5, 0.4, 0.3, 0.4,
-  ];
-
-  return (
-    <View style={{ gap: 24 }}>
-      {/* Music Style - Vibrant gradient colors */}
-      <View
-        style={{
-          padding: 16,
-          backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-          borderRadius: 16,
-          shadowColor: '#667eea',
-          shadowOffset: { width: 0, height: 4 },
-          shadowOpacity: 0.3,
-          shadowRadius: 8,
-        }}
-      >
-        <Text
-          variant='body'
-          style={{ color: 'white', marginBottom: 12, fontWeight: 'bold' }}
-        >
-          🎵 Music Track
-        </Text>
-        <AudioWaveform
-          data={musicData}
-          isPlaying={isPlaying1}
-          progress={progress1}
-          showProgress={true}
-          interactive={true}
-          onSeek={setProgress1}
-          height={60}
-          barCount={30}
-          barWidth={4}
-          barGap={3}
-          activeColor='#FFD700'
-          inactiveColor='rgba(255, 255, 255, 0.3)'
-        />
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            marginTop: 12,
-          }}
-        >
-          <Button
-            onPress={() => setIsPlaying1(!isPlaying1)}
-            style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
-          >
-            {isPlaying1 ? '⏸️' : '▶️'}
-          </Button>
-          <Text style={{ color: 'white', opacity: 0.8 }}>2:15 / 3:45</Text>
-        </View>
-      </View>
-
-      {/* Voice Message Style - Clean and minimal */}
-      <View
-        style={{
-          padding: 16,
-          backgroundColor: 'teal',
-          borderRadius: 12,
-          borderLeftWidth: 4,
-          borderLeftColor: '#34C759',
-        }}
-      >
-        <Text variant='body' style={{ marginBottom: 12, fontWeight: '600' }}>
-          🎙️ Voice Message
-        </Text>
-        <AudioWaveform
-          data={voiceData}
-          isPlaying={isPlaying2}
-          progress={progress2}
-          showProgress={true}
-          interactive={true}
-          onSeek={setProgress2}
-          height={40}
-          barCount={25}
-          barWidth={3}
-          barGap={2}
-          activeColor='#34C759'
-          inactiveColor='#E5E5E7'
-        />
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginTop: 8,
-          }}
-        >
-          <Button
-            onPress={() => setIsPlaying2(!isPlaying2)}
-            variant='outline'
-            style={{
-              borderColor: '#34C759',
-              borderRadius: 20,
-              paddingHorizontal: 16,
-            }}
-          >
-            {isPlaying2 ? 'Pause' : 'Play'}
-          </Button>
-          <Text variant='caption'>0:45</Text>
-        </View>
-      </View>
-
-      {/* Podcast Style - Professional dark theme */}
-      <View
-        style={{
-          padding: 16,
-          backgroundColor: '#1C1C1E',
-          borderRadius: 12,
-          borderWidth: 1,
-          borderColor: '#2C2C2E',
-        }}
-      >
-        <Text
-          variant='body'
-          style={{ color: 'white', marginBottom: 12, fontWeight: 'bold' }}
-        >
-          🎧 Podcast Episode
-        </Text>
-        <AudioWaveform
-          data={podcastData}
-          isPlaying={isPlaying3}
-          progress={progress3}
-          showProgress={true}
-          interactive={true}
-          onSeek={setProgress3}
-          height={70}
-          barCount={35}
-          barWidth={2}
-          barGap={1}
-          activeColor='#FF6B6B'
-          inactiveColor='#48484A'
-        />
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginTop: 12,
-          }}
-        >
-          <View style={{ flexDirection: 'row', gap: 8 }}>
-            <Button
-              onPress={() => setIsPlaying3(!isPlaying3)}
-              style={{
-                backgroundColor: '#FF6B6B',
-                borderRadius: 8,
-                paddingHorizontal: 12,
-              }}
-            >
-              {isPlaying3 ? '⏸️' : '▶️'}
-            </Button>
-            <Button
-              variant='outline'
-              style={{
-                borderColor: '#48484A',
-                borderRadius: 8,
-              }}
-            >
-              1.5x
-            </Button>
-          </View>
-          <Text style={{ color: 'white', opacity: 0.6 }}>45:30 / 58:15</Text>
-        </View>
-      </View>
-    </View>
-  );
-}

package/dist/templates/demo/avatar/avatar-bordered.tsx

@@ -1,64 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { View } from '@/components/ui/view';
-import React from 'react';
-
-export function AvatarBordered() {
-  return (
-    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
-      <Avatar
-        size={64}
-        style={{
-          borderWidth: 4,
-          borderColor: '#3b82f6',
-          shadowColor: '#3b82f6',
-          shadowOffset: { width: 0, height: 4 },
-          shadowOpacity: 0.3,
-          shadowRadius: 8,
-          elevation: 8,
-        }}
-      >
-        <AvatarImage
-          source={{
-            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
-          }}
-        />
-        <AvatarFallback>AB</AvatarFallback>
-      </Avatar>
-
-      <Avatar
-        size={64}
-        style={{
-          borderWidth: 4,
-          borderColor: '#10b981',
-          shadowColor: '#10b981',
-          shadowOffset: { width: 0, height: 4 },
-          shadowOpacity: 0.3,
-          shadowRadius: 8,
-          elevation: 8,
-        }}
-      >
-        <AvatarFallback>BNA</AvatarFallback>
-      </Avatar>
-
-      <Avatar
-        size={64}
-        style={{
-          borderWidth: 4,
-          borderColor: '#f59e0b',
-          shadowColor: '#f59e0b',
-          shadowOffset: { width: 0, height: 4 },
-          shadowOpacity: 0.3,
-          shadowRadius: 8,
-          elevation: 8,
-        }}
-      >
-        <AvatarImage
-          source={{
-            uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
-          }}
-        />
-        <AvatarFallback>EX</AvatarFallback>
-      </Avatar>
-    </View>
-  );
-}