zelune 0.0.0-stage → 1.4.0

package/src/screens/LoginScreen.tsx

@@ -0,0 +1,176 @@
+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

@@ -0,0 +1,234 @@
+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',
+  },
+});

package/src/screens/ProfileScreen.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { useNavigation } from '../runtime/MockNavigationContext';
+
+export default function ProfileScreen() {
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.profileHeader}>
+        <View style={styles.avatarLarge}>
+          <Text style={styles.avatarInitials}>AX</Text>
+        </View>
+        <Text style={styles.memberName}>Alex Mercer</Text>
+        <Text style={styles.memberTier}>LEAD ACOUSTIC ENGINEER · TIER 01</Text>
+      </View>
+
+      <View style={styles.statsRow}>
+        <View style={styles.statCard}>
+          <Text style={styles.statNumber}>14</Text>
+          <Text style={styles.statCaption}>UNITS</Text>
+        </View>
+        <View style={styles.statCard}>
+          <Text style={styles.statNumber}>4,820</Text>
+          <Text style={styles.statCaption}>CREDITS</Text>
+        </View>
+        <View style={styles.statCard}>
+          <Text style={styles.statNumber}>LAB</Text>
+          <Text style={styles.statCaption}>ACCESS</Text>
+        </View>
+      </View>
+
+      <View style={styles.menuList}>
+        <TouchableOpacity
+          activeOpacity={0.78}
+          style={styles.menuItem}
+          onPress={() => navigation.navigate('Home')}
+        >
+          <Text style={styles.menuItemTitle}>Reference Hardware Catalog</Text>
+          <Text style={styles.menuItemArrow}>→</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          activeOpacity={0.78}
+          style={styles.menuItem}
+          onPress={() => navigation.navigate('Checkout')}
+        >
+          <Text style={styles.menuItemTitle}>Active Allocation &amp; Settlement</Text>
+          <Text style={styles.menuItemArrow}>→</Text>
+        </TouchableOpacity>
+      </View>
+
+      <TouchableOpacity
+        activeOpacity={0.78}
+        style={styles.signOutButton}
+        onPress={() => navigation.navigate('Login')}
+      >
+        <Text style={styles.signOutText}>Terminate Studio Session</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0A0B0E',
+    padding: 20,
+    justifyContent: 'space-between',
+  },
+  profileHeader: {
+    alignItems: 'center',
+    marginTop: 14,
+    gap: 6,
+  },
+  avatarLarge: {
+    width: 68,
+    height: 68,
+    borderRadius: 16,
+    backgroundColor: '#13161E',
+    borderWidth: 1,
+    borderColor: '#262D3D',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 6,
+  },
+  avatarInitials: {
+    color: '#38BDF8',
+    fontSize: 22,
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+  memberName: {
+    color: '#F8FAFC',
+    fontSize: 22,
+    fontWeight: '700',
+    letterSpacing: -0.3,
+  },
+  memberTier: {
+    color: '#64748B',
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  statCard: {
+    flex: 1,
+    backgroundColor: '#11141C',
+    borderRadius: 12,
+    paddingVertical: 14,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#1E2433',
+  },
+  statNumber: {
+    color: '#F8FAFC',
+    fontSize: 17,
+    fontWeight: '700',
+  },
+  statCaption: {
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '700',
+    letterSpacing: 0.8,
+    marginTop: 3,
+  },
+  menuList: {
+    gap: 10,
+  },
+  menuItem: {
+    backgroundColor: '#11141C',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 15,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#1E2433',
+  },
+  menuItemTitle: {
+    color: '#E2E8F0',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  menuItemArrow: {
+    color: '#38BDF8',
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  signOutButton: {
+    backgroundColor: '#16131A',
+    borderRadius: 10,
+    paddingVertical: 14,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#3B1D2A',
+  },
+  signOutText: {
+    color: '#FB7185',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+});

package/src/screens/index.ts

@@ -0,0 +1 @@
+export { SCREEN_COMPONENTS, SCREEN_ORDER } from 'virtual:zelune-screens';