zelune 1.6.2 → 1.6.4

package/src/screens/HomeScreen.tsx

@@ -1,288 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-import { useNavigation } from '../runtime/MockNavigationContext';
-
-export default function HomeScreen() {
-  const navigation = useNavigation();
-  const [activeTab, setActiveTab] = useState<'Featured' | 'Hardware' | 'Audio'>('Featured');
-
-  return (
-    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
-      <View style={styles.topBar}>
-        <View>
-          <Text style={styles.greetingLabel}>CHRONOS ACOUSTIC DIVISION</Text>
-          <Text style={styles.headerTitle}>Reference Hardware</Text>
-        </View>
-        <TouchableOpacity
-          activeOpacity={0.78}
-          style={styles.avatarButton}
-          onPress={() => navigation.navigate('Profile')}
-        >
-          <Text style={styles.avatarButtonText}>AX</Text>
-        </TouchableOpacity>
-      </View>
-
-      <View style={styles.heroBanner}>
-        <View style={styles.heroMetaRow}>
-          <Text style={styles.heroBadge}>SERIES 04 // BERYLLIUM</Text>
-          <Text style={styles.heroSerial}>48H DAC</Text>
-        </View>
-        <Text style={styles.heroTitle}>Chronos Spatial Studio Reference</Text>
-        <Text style={styles.heroSubtitle}>
-          Planar-magnetic acoustic architecture with zero-latency DSP room calibration.
-        </Text>
-        <TouchableOpacity
-          activeOpacity={0.78}
-          style={styles.heroCta}
-          onPress={() => navigation.navigate('ProductDetail')}
-        >
-          <Text style={styles.heroCtaText}>Inspect Spec Sheet — $349</Text>
-        </TouchableOpacity>
-      </View>
-
-      <View style={styles.categoryRow}>
-        {(['Featured', 'Hardware', 'Audio'] as const).map((cat) => (
-          <TouchableOpacity
-            key={cat}
-            activeOpacity={0.78}
-            style={activeTab === cat ? styles.categoryPillActive : styles.categoryPill}
-            onPress={() => setActiveTab(cat)}
-          >
-            <Text
-              style={
-                activeTab === cat ? styles.categoryTextActive : styles.categoryText
-              }
-            >
-              {cat}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-
-      <View style={styles.productList}>
-        <TouchableOpacity
-          activeOpacity={0.78}
-          style={styles.productCard}
-          onPress={() => navigation.navigate('ProductDetail')}
-        >
-          <View style={styles.productIconBox}>
-            <Text style={styles.productMonogram}>CH-01</Text>
-          </View>
-          <View style={styles.productInfo}>
-            <Text style={styles.productName}>Chronos Studio Pro</Text>
-            <Text style={styles.productMeta}>45mm Beryllium · Titanium Matte</Text>
-          </View>
-          <Text style={styles.productPrice}>$349</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          activeOpacity={0.78}
-          style={styles.productCard}
-          onPress={() => navigation.navigate('Checkout')}
-        >
-          <View style={styles.productIconBoxAlt}>
-            <Text style={styles.productMonogramAlt}>KS-75</Text>
-          </View>
-          <View style={styles.productInfo}>
-            <Text style={styles.productName}>Keystone Field Controller</Text>
-            <Text style={styles.productMeta}>CNC Aluminum · Optical Hall Switches</Text>
-          </View>
-          <Text style={styles.productPrice}>$219</Text>
-        </TouchableOpacity>
-      </View>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#0A0B0E',
-  },
-  content: {
-    padding: 20,
-    gap: 20,
-  },
-  topBar: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 6,
-  },
-  greetingLabel: {
-    color: '#38BDF8',
-    fontSize: 10,
-    fontWeight: '700',
-    letterSpacing: 1.1,
-  },
-  headerTitle: {
-    color: '#F8FAFC',
-    fontSize: 24,
-    fontWeight: '700',
-    letterSpacing: -0.4,
-    marginTop: 2,
-  },
-  avatarButton: {
-    width: 42,
-    height: 42,
-    borderRadius: 10,
-    backgroundColor: '#13161E',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: '#222836',
-  },
-  avatarButtonText: {
-    color: '#F8FAFC',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  heroBanner: {
-    backgroundColor: '#11141C',
-    borderRadius: 16,
-    padding: 20,
-    gap: 10,
-    borderWidth: 1,
-    borderColor: '#262D3D',
-  },
-  heroMetaRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  heroBadge: {
-    color: '#38BDF8',
-    fontSize: 10,
-    fontWeight: '700',
-    letterSpacing: 1,
-  },
-  heroSerial: {
-    color: '#10B981',
-    fontSize: 10,
-    fontWeight: '700',
-    letterSpacing: 0.8,
-  },
-  heroTitle: {
-    color: '#F8FAFC',
-    fontSize: 22,
-    fontWeight: '700',
-    letterSpacing: -0.3,
-  },
-  heroSubtitle: {
-    color: '#94A3B8',
-    fontSize: 13,
-    lineHeight: 19,
-  },
-  heroCta: {
-    backgroundColor: '#F8FAFC',
-    borderRadius: 9,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    alignSelf: 'flex-start',
-    marginTop: 6,
-  },
-  heroCtaText: {
-    color: '#08090C',
-    fontSize: 13,
-    fontWeight: '700',
-  },
-  categoryRow: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-  categoryPillActive: {
-    backgroundColor: '#191D28',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#38BDF8',
-  },
-  categoryPill: {
-    backgroundColor: '#11141C',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#1E2433',
-  },
-  categoryTextActive: {
-    color: '#F8FAFC',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  categoryText: {
-    color: '#94A3B8',
-    fontSize: 12,
-    fontWeight: '500',
-  },
-  productList: {
-    gap: 12,
-  },
-  productCard: {
-    backgroundColor: '#11141C',
-    borderRadius: 14,
-    padding: 14,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 14,
-    borderWidth: 1,
-    borderColor: '#1E2433',
-  },
-  productIconBox: {
-    width: 52,
-    height: 52,
-    borderRadius: 10,
-    backgroundColor: '#161A26',
-    borderWidth: 1,
-    borderColor: '#262D3D',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  productIconBoxAlt: {
-    width: 52,
-    height: 52,
-    borderRadius: 10,
-    backgroundColor: '#131720',
-    borderWidth: 1,
-    borderColor: '#222836',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  productMonogram: {
-    color: '#38BDF8',
-    fontSize: 11,
-    fontWeight: '700',
-    letterSpacing: 0.5,
-  },
-  productMonogramAlt: {
-    color: '#10B981',
-    fontSize: 11,
-    fontWeight: '700',
-    letterSpacing: 0.5,
-  },
-  productInfo: {
-    flex: 1,
-    gap: 3,
-  },
-  productName: {
-    color: '#F8FAFC',
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  productMeta: {
-    color: '#64748B',
-    fontSize: 12,
-  },
-  productPrice: {
-    color: '#F8FAFC',
-    fontSize: 15,
-    fontWeight: '700',
-  },
-});

package/src/screens/LoginScreen.tsx

@@ -1,176 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  StyleSheet,
-} from 'react-native';
-import { useNavigation } from '../runtime/MockNavigationContext';
-
-export default function LoginScreen() {
-  const navigation = useNavigation();
-  const [email, setEmail] = useState('alex@zelune.studio');
-  const [password, setPassword] = useState('••••••••••••');
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.brandSection}>
-        <View style={styles.logoBadge}>
-          <Text style={styles.logoText}>CH//01</Text>
-        </View>
-        <Text style={styles.title}>Welcome back</Text>
-        <Text style={styles.subtitle}>
-          Authenticate to access Chronos Acoustic Lab &amp; hardware telemetry
-        </Text>
-      </View>
-
-      <View style={styles.formCard}>
-        <View style={styles.fieldGroup}>
-          <Text style={styles.fieldLabel}>OPERATOR ID / EMAIL</Text>
-          <TextInput
-            style={styles.input}
-            value={email}
-            onChangeText={setEmail}
-            placeholder="operator@chronos.audio"
-            placeholderTextColor="#64748B"
-          />
-        </View>
-
-        <View style={styles.fieldGroup}>
-          <Text style={styles.fieldLabel}>SECURITY KEY</Text>
-          <TextInput
-            style={styles.input}
-            value={password}
-            onChangeText={setPassword}
-            secureTextEntry
-            placeholderTextColor="#64748B"
-          />
-        </View>
-
-        <TouchableOpacity
-          activeOpacity={0.78}
-          style={styles.primaryButton}
-          onPress={() => navigation.navigate('Home')}
-        >
-          <Text style={styles.primaryButtonText}>Enter Acoustic Studio</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          activeOpacity={0.78}
-          style={styles.secondaryButton}
-          onPress={() => navigation.navigate('Profile')}
-        >
-          <Text style={styles.secondaryButtonText}>Hardware Passkey Handshake</Text>
-        </TouchableOpacity>
-      </View>
-
-      <View style={styles.footerRow}>
-        <Text style={styles.footerHint}>SYS-AUTH · ENCRYPTED SESSION 256-GCM</Text>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#0A0B0E',
-    paddingHorizontal: 24,
-    paddingVertical: 38,
-    justifyContent: 'space-between',
-  },
-  brandSection: {
-    marginTop: 22,
-    gap: 10,
-  },
-  logoBadge: {
-    alignSelf: 'flex-start',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 8,
-    backgroundColor: '#13161E',
-    borderWidth: 1,
-    borderColor: '#262D3D',
-    marginBottom: 6,
-  },
-  logoText: {
-    color: '#38BDF8',
-    fontSize: 12,
-    fontWeight: '700',
-    letterSpacing: 1.2,
-  },
-  title: {
-    color: '#F8FAFC',
-    fontSize: 28,
-    fontWeight: '700',
-    letterSpacing: -0.5,
-  },
-  subtitle: {
-    color: '#94A3B8',
-    fontSize: 14,
-    lineHeight: 20,
-  },
-  formCard: {
-    backgroundColor: '#11141C',
-    borderRadius: 16,
-    padding: 20,
-    gap: 16,
-    borderWidth: 1,
-    borderColor: '#1E2433',
-  },
-  fieldGroup: {
-    gap: 6,
-  },
-  fieldLabel: {
-    color: '#64748B',
-    fontSize: 10,
-    fontWeight: '700',
-    letterSpacing: 1,
-  },
-  input: {
-    backgroundColor: '#08090C',
-    borderWidth: 1,
-    borderColor: '#222836',
-    borderRadius: 10,
-    paddingHorizontal: 14,
-    paddingVertical: 13,
-    color: '#F8FAFC',
-    fontSize: 14,
-  },
-  primaryButton: {
-    backgroundColor: '#F8FAFC',
-    borderRadius: 10,
-    paddingVertical: 15,
-    alignItems: 'center',
-    marginTop: 4,
-  },
-  primaryButtonText: {
-    color: '#08090C',
-    fontSize: 14,
-    fontWeight: '700',
-  },
-  secondaryButton: {
-    backgroundColor: '#161A24',
-    borderRadius: 10,
-    paddingVertical: 14,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#262D3D',
-  },
-  secondaryButtonText: {
-    color: '#CBD5E1',
-    fontSize: 13,
-    fontWeight: '600',
-  },
-  footerRow: {
-    alignItems: 'center',
-    paddingBottom: 6,
-  },
-  footerHint: {
-    color: '#475569',
-    fontSize: 10,
-    fontWeight: '600',
-    letterSpacing: 1,
-  },
-});

package/src/screens/ProductDetailScreen.tsx

@@ -1,207 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { useNavigation } from '../runtime/MockNavigationContext';
-export default function ProductDetailScreen() {
-  const navigation = useNavigation();
-  const [selectedFinish, setSelectedFinish] = useState<'Obsidian' | 'Silver'>('Obsidian');
-  return <View style={styles.container}>
-      <View style={styles.headerRow}>
-        <TouchableOpacity activeOpacity={0.78} style={styles.backButton} onPress={() => navigation.navigate('Home')}>
-          <Text style={styles.backButtonText}>← Catalog</Text>
-        </TouchableOpacity>
-        <Text style={styles.headerBadge}>MODEL CH-01 // PRO</Text>
-      </View>
-
-      <View style={styles.showcaseCard}>
-        <Text style={styles.showcaseSpecCode}>45MM BERYLLIUM TRANSDUCER</Text>
-        <Text style={styles.showcaseMonogram}>CH // 01</Text>
-        <Text style={styles.showcaseTag}>48-HOUR BATTERY · DUAL USB-C LOSS-ZERO DAC</Text>
-      </View>
-
-      <View style={styles.detailsSection}>
-        <View style={styles.titlePriceRow}>
-          <Text style={styles.productTitle}>Chronos Studio Pro</Text>
-          <Text style={styles.productPrice}>$349</Text>
-        </View>
-        <Text style={styles.productDescription}>
-          Custom 45mm beryllium drivers paired with dual-chip room calibration and ultra-soft memory foam ear cushions.
-        </Text>
-
-        <View style={styles.specGrid}>
-          <View style={styles.specBox}>
-            <Text style={styles.specValue}>-46 dB</Text>
-            <Text style={styles.specLabel}>HYBRID ANC</Text>
-          </View>
-          <View style={styles.specBox}>
-            <Text style={styles.specValue}>24-bit</Text>
-            <Text style={styles.specLabel}>96KHZ PCM</Text>
-          </View>
-          <View style={styles.specBox}>
-            <Text style={styles.specValue}>265 g</Text>
-            <Text style={styles.specLabel}>MACHINED TI</Text>
-          </View>
-        </View>
-
-        <View style={styles.finishRow}>
-          {(['Obsidian', 'Silver'] as const).map(finish => <TouchableOpacity key={finish} activeOpacity={0.78} style={selectedFinish === finish ? styles.finishPillActive : styles.finishPill} onPress={() => setSelectedFinish(finish)}>
-              <Text style={styles.finishPillText}>{finish} Anodized</Text>
-            </TouchableOpacity>)}
-        </View>
-      </View>
-
-      <TouchableOpacity activeOpacity={0.78} style={styles.buyButton} onPress={() => navigation.navigate('Checkout')}>
-        <Text style={styles.buyButtonText}>Reserve Unit &amp; Express Checkout</Text>
-      </TouchableOpacity>
-    </View>;
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#0A0B0E',
-    padding: 20,
-    justifyContent: 'space-between'
-  },
-  headerRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 6
-  },
-  backButton: {
-    backgroundColor: '#13161E',
-    paddingHorizontal: 14,
-    paddingVertical: 9,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#222836'
-  },
-  backButtonText: {
-    color: '#E2E8F0',
-    fontSize: 12,
-    fontWeight: '600'
-  },
-  headerBadge: {
-    color: '#38BDF8',
-    fontSize: 10,
-    fontWeight: '700',
-    letterSpacing: 1
-  },
-  showcaseCard: {
-    backgroundColor: '#11141C',
-    borderRadius: 16,
-    paddingVertical: 26,
-    paddingHorizontal: 18,
-    alignItems: 'center',
-    gap: 10,
-    borderWidth: 1,
-    borderColor: '#1E2433'
-  },
-  showcaseSpecCode: {
-    color: '#64748B',
-    fontSize: 10,
-    fontWeight: '700',
-    letterSpacing: 1.2
-  },
-  showcaseMonogram: {
-    color: '#F8FAFC',
-    fontSize: 34,
-    fontWeight: '800',
-    letterSpacing: 2
-  },
-  showcaseTag: {
-    color: '#38BDF8',
-    fontSize: 10,
-    fontWeight: '600',
-    letterSpacing: 0.8
-  },
-  detailsSection: {
-    gap: 12
-  },
-  titlePriceRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'baseline'
-  },
-  productTitle: {
-    color: '#F8FAFC',
-    fontSize: 24,
-    fontWeight: '700',
-    letterSpacing: -0.4
-  },
-  productPrice: {
-    color: '#10B981',
-    fontSize: 20,
-    fontWeight: '700'
-  },
-  productDescription: {
-    color: '#94A3B8',
-    fontSize: 13,
-    lineHeight: 19
-  },
-  specGrid: {
-    flexDirection: 'row',
-    gap: 8,
-    marginTop: 2
-  },
-  specBox: {
-    flex: 1,
-    backgroundColor: '#11141C',
-    borderRadius: 10,
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#1E2433'
-  },
-  specValue: {
-    color: '#F8FAFC',
-    fontSize: 15,
-    fontWeight: '700'
-  },
-  specLabel: {
-    color: '#64748B',
-    fontSize: 9,
-    fontWeight: '700',
-    letterSpacing: 0.8,
-    marginTop: 3
-  },
-  finishRow: {
-    flexDirection: 'row',
-    gap: 10,
-    marginTop: 2
-  },
-  finishPillActive: {
-    flex: 1,
-    backgroundColor: '#161A26',
-    borderRadius: 10,
-    paddingVertical: 11,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#38BDF8'
-  },
-  finishPill: {
-    flex: 1,
-    backgroundColor: '#11141C',
-    borderRadius: 10,
-    paddingVertical: 11,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#1E2433'
-  },
-  finishPillText: {
-    color: '#E2E8F0',
-    fontSize: 12,
-    fontWeight: '600'
-  },
-  buyButton: {
-    backgroundColor: '#10B981',
-    borderRadius: 10,
-    paddingVertical: 15,
-    alignItems: 'center'
-  },
-  buyButtonText: {
-    color: '#052E16',
-    fontSize: 14,
-    fontWeight: '700'
-  }
-});