zelune 0.0.0-stage → 1.4.0

package/src/runtime/ScreenErrorBoundary.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+interface ScreenErrorBoundaryProps {
+  screenName: string;
+  children: React.ReactNode;
+}
+
+interface ScreenErrorBoundaryState {
+  hasError: boolean;
+  errorMessage: string | null;
+}
+
+export class ScreenErrorBoundary extends React.Component<
+  ScreenErrorBoundaryProps,
+  ScreenErrorBoundaryState
+> {
+  constructor(props: ScreenErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, errorMessage: null };
+  }
+
+  static getDerivedStateFromError(error: unknown): ScreenErrorBoundaryState {
+    return {
+      hasError: true,
+      errorMessage: error instanceof Error ? error.message : String(error),
+    };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            backgroundColor: '#18181B',
+            color: '#FCA5A5',
+            padding: 24,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            gap: 12,
+            fontFamily: 'JetBrains Mono, monospace',
+          }}
+        >
+          <div style={{ fontSize: 13, fontWeight: 700, color: '#F87171' }}>
+            Runtime Error in {this.props.screenName}
+          </div>
+          <div
+            style={{
+              fontSize: 12,
+              lineHeight: 1.5,
+              backgroundColor: '#09090B',
+              padding: 12,
+              borderRadius: 8,
+              border: '1px solid #7F1D1D',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+            }}
+          >
+            {this.state.errorMessage}
+          </div>
+          <button
+            type="button"
+            onClick={() => this.setState({ hasError: false, errorMessage: null })}
+            style={{
+              alignSelf: 'flex-start',
+              padding: '6px 12px',
+              backgroundColor: '#EF4444',
+              color: '#FFFFFF',
+              border: 'none',
+              borderRadius: 6,
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            Retry Render
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/screens/CheckoutScreen.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { useNavigation } from '../runtime/MockNavigationContext';
+
+export default function CheckoutScreen() {
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerRow}>
+        <TouchableOpacity
+          activeOpacity={0.78}
+          style={styles.backButton}
+          onPress={() => navigation.navigate('ProductDetail')}
+        >
+          <Text style={styles.backButtonText}>← Spec Sheet</Text>
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Dispatch &amp; Settlement</Text>
+      </View>
+
+      <View style={styles.orderCard}>
+        <Text style={styles.sectionHeading}>MANIFEST // ORDER #CH-8841</Text>
+        <View style={styles.itemRow}>
+          <View>
+            <Text style={styles.itemName}>Chronos Studio Pro</Text>
+            <Text style={styles.itemVariant}>Obsidian Anodized · Unit 01</Text>
+          </View>
+          <Text style={styles.itemPrice}>$349.00</Text>
+        </View>
+
+        <View style={styles.divider} />
+
+        <View style={styles.summaryRow}>
+          <Text style={styles.summaryLabel}>Priority Courier Dispatch</Text>
+          <Text style={styles.summaryFree}>INCLUDED</Text>
+        </View>
+        <View style={styles.summaryRow}>
+          <Text style={styles.summaryLabel}>Import &amp; Acoustic Levy</Text>
+          <Text style={styles.summaryValue}>$28.80</Text>
+        </View>
+        <View style={styles.totalRow}>
+          <Text style={styles.totalLabel}>Total Settlement</Text>
+          <Text style={styles.totalAmount}>$377.80</Text>
+        </View>
+      </View>
+
+      <View style={styles.paymentCard}>
+        <Text style={styles.sectionHeading}>CRYPTOGRAPHIC AUTHORIZATION</Text>
+        <View style={styles.cardMethodRow}>
+          <View style={styles.cardBrandBadge}>
+            <Text style={styles.cardBrandText}>G-PAY</Text>
+          </View>
+          <View>
+            <Text style={styles.cardNumber}>Hardware Token ·••• 4829</Text>
+            <Text style={styles.cardSub}>Biometric enclave signature ready</Text>
+          </View>
+        </View>
+      </View>
+
+      <TouchableOpacity
+        activeOpacity={0.78}
+        style={styles.confirmButton}
+        onPress={() => navigation.navigate('Home')}
+      >
+        <Text style={styles.confirmButtonText}>Authorize $377.80 Settlement</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: 12,
+    paddingVertical: 9,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#222836',
+  },
+  backButtonText: {
+    color: '#E2E8F0',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  headerTitle: {
+    color: '#F8FAFC',
+    fontSize: 16,
+    fontWeight: '700',
+    letterSpacing: -0.2,
+  },
+  orderCard: {
+    backgroundColor: '#11141C',
+    borderRadius: 16,
+    padding: 18,
+    gap: 12,
+    borderWidth: 1,
+    borderColor: '#1E2433',
+  },
+  sectionHeading: {
+    color: '#38BDF8',
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+  itemRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  itemName: {
+    color: '#F8FAFC',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  itemVariant: {
+    color: '#64748B',
+    fontSize: 12,
+    marginTop: 2,
+  },
+  itemPrice: {
+    color: '#F8FAFC',
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#1E2433',
+    marginVertical: 4,
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  summaryLabel: {
+    color: '#94A3B8',
+    fontSize: 13,
+  },
+  summaryFree: {
+    color: '#10B981',
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.6,
+  },
+  summaryValue: {
+    color: '#E2E8F0',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  totalRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  totalLabel: {
+    color: '#F8FAFC',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  totalAmount: {
+    color: '#38BDF8',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  paymentCard: {
+    backgroundColor: '#11141C',
+    borderRadius: 14,
+    padding: 16,
+    gap: 10,
+    borderWidth: 1,
+    borderColor: '#1E2433',
+  },
+  cardMethodRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  cardBrandBadge: {
+    backgroundColor: '#161A26',
+    borderWidth: 1,
+    borderColor: '#262D3D',
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 7,
+  },
+  cardBrandText: {
+    color: '#38BDF8',
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 0.8,
+  },
+  cardNumber: {
+    color: '#F8FAFC',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  cardSub: {
+    color: '#64748B',
+    fontSize: 12,
+  },
+  confirmButton: {
+    backgroundColor: '#F8FAFC',
+    borderRadius: 10,
+    paddingVertical: 15,
+    alignItems: 'center',
+  },
+  confirmButtonText: {
+    color: '#08090C',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+});

package/src/screens/HomeScreen.tsx

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