@symbiote-native/cli 0.0.1 → 0.1.1

package/templates/styling/navigation/svelte/stylesheet/DetailsScreen.svelte

@@ -1,11 +1,48 @@
 <script>
+  import { useStackNavigation } from '@symbiote-native/navigation/svelte';
   import { StyleSheet } from '@symbiote-native/svelte';
 
+  const navigation = useStackNavigation();
   const styles = StyleSheet.create({
-    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    screen: {
+      flex: 1,
+      backgroundColor: '#0b1622',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 24,
+      paddingVertical: 24,
+      paddingHorizontal: 32,
+    },
+    detailsCard: {
+      alignItems: 'center',
+      gap: 10,
+      padding: 24,
+      borderRadius: 16,
+      backgroundColor: '#13243a',
+    },
+    detailsTitle: { color: '#ffffff', fontSize: 18, fontWeight: 'bold' },
+    detailsBody: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
+    buttonSecondary: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+      paddingVertical: 14,
+      paddingHorizontal: 22,
+      borderWidth: 1.5,
+      borderColor: '#41506a',
+    },
+    buttonSecondaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
   });
 </script>
 
-<view style={styles.container}>
-  <text>Details screen</text>
-</view>
+<safe-area-view style={styles.screen}>
+  <view style={styles.detailsCard}>
+    <text style={styles.detailsTitle}>You made it!</text>
+    <text style={styles.detailsBody}>
+      This screen was pushed by the Stack navigator — proof navigation actually works.
+    </text>
+  </view>
+  <pressable style={styles.buttonSecondary} onPress={() => navigation.current.pop()}>
+    <text style={styles.buttonSecondaryText}>Go back</text>
+  </pressable>
+</safe-area-view>

package/templates/styling/navigation/svelte/stylesheet/DetailsScreen.typescript.svelte

@@ -1,11 +1,48 @@
 <script lang="ts">
+  import { useStackNavigation } from '@symbiote-native/navigation/svelte';
   import { StyleSheet } from '@symbiote-native/svelte';
 
+  const navigation = useStackNavigation();
   const styles = StyleSheet.create({
-    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    screen: {
+      flex: 1,
+      backgroundColor: '#0b1622',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 24,
+      paddingVertical: 24,
+      paddingHorizontal: 32,
+    },
+    detailsCard: {
+      alignItems: 'center',
+      gap: 10,
+      padding: 24,
+      borderRadius: 16,
+      backgroundColor: '#13243a',
+    },
+    detailsTitle: { color: '#ffffff', fontSize: 18, fontWeight: 'bold' },
+    detailsBody: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
+    buttonSecondary: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+      paddingVertical: 14,
+      paddingHorizontal: 22,
+      borderWidth: 1.5,
+      borderColor: '#41506a',
+    },
+    buttonSecondaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
   });
 </script>
 
-<view style={styles.container}>
-  <text>Details screen</text>
-</view>
+<safe-area-view style={styles.screen}>
+  <view style={styles.detailsCard}>
+    <text style={styles.detailsTitle}>You made it!</text>
+    <text style={styles.detailsBody}>
+      This screen was pushed by the Stack navigator — proof navigation actually works.
+    </text>
+  </view>
+  <pressable style={styles.buttonSecondary} onPress={() => navigation.current.pop()}>
+    <text style={styles.buttonSecondaryText}>Go back</text>
+  </pressable>
+</safe-area-view>

package/templates/styling/navigation/svelte/stylesheet/MenuScreen.svelte

@@ -1,16 +1,89 @@
 <script>
   import { useStackNavigation } from '@symbiote-native/navigation/svelte';
+  import { PLUS_ICON_URI, REACT_NATIVE_LOGO_URI, SVELTE_LOGO_URI } from './image-uris';
   import { StyleSheet } from '@symbiote-native/svelte';
 
   const navigation = useStackNavigation();
+  let count = $state(0);
   const styles = StyleSheet.create({
-    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    screen: {
+      flex: 1,
+      backgroundColor: '#0b1622',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 24,
+      paddingVertical: 24,
+      paddingHorizontal: 32,
+    },
+    brandRow: { flexDirection: 'row', alignItems: 'center', gap: 28 },
+    brandLogo: { height: 64 },
+    brandLogoReact: { width: 70 },
+    brandLogoSvelte: { width: 54 },
+    plusIcon: { width: 48, height: 48 },
+    title: { color: '#ffffff', fontSize: 22, fontWeight: 'bold', textAlign: 'center' },
+    subtitle: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
+    counterCard: {
+      alignItems: 'center',
+      gap: 4,
+      paddingVertical: 20,
+      paddingHorizontal: 28,
+      borderRadius: 16,
+      backgroundColor: '#13243a',
+    },
+    counterLabel: { color: '#41506a', fontSize: 12, letterSpacing: 1 },
+    counterValue: { color: '#ff3e00', fontSize: 32, fontWeight: 'bold' },
+    buttonRow: { flexDirection: 'row', gap: 12 },
+    buttonPrimary: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+      paddingVertical: 14,
+      paddingHorizontal: 22,
+      backgroundColor: '#ff3e00',
+    },
+    buttonSecondary: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+      paddingVertical: 14,
+      paddingHorizontal: 22,
+      borderWidth: 1.5,
+      borderColor: '#41506a',
+    },
+    buttonPrimaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
+    buttonSecondaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
   });
 </script>
 
-<view style={styles.container}>
-  <text>Welcome to SymbioteNative!</text>
-  <pressable onPress={() => navigation.current.push('Details')}>
-    <text>Go to Details</text>
-  </pressable>
-</view>
+<safe-area-view style={styles.screen}>
+  <view style={styles.brandRow}>
+    <image
+      style={[styles.brandLogo, styles.brandLogoReact]}
+      resizeMode="contain"
+      source={{ uri: REACT_NATIVE_LOGO_URI }}
+    />
+    <image style={styles.plusIcon} resizeMode="contain" source={{ uri: PLUS_ICON_URI }} />
+    <image
+      style={[styles.brandLogo, styles.brandLogoSvelte]}
+      resizeMode="contain"
+      source={{ uri: SVELTE_LOGO_URI }}
+    />
+  </view>
+
+  <text style={styles.title}>Welcome to SymbioteNative!</text>
+  <text style={styles.subtitle}>Framework-agnostic React Native, driven by Svelte.</text>
+
+  <view style={styles.counterCard}>
+    <text style={styles.counterLabel}>TAPS</text>
+    <text style={styles.counterValue}>{count}</text>
+  </view>
+
+  <view style={styles.buttonRow}>
+    <pressable style={styles.buttonPrimary} onPress={() => (count += 1)}>
+      <text style={styles.buttonPrimaryText}>Tap me</text>
+    </pressable>
+    <pressable style={styles.buttonSecondary} onPress={() => navigation.current.push('Details')}>
+      <text style={styles.buttonSecondaryText}>Go to Details</text>
+    </pressable>
+  </view>
+</safe-area-view>

package/templates/styling/navigation/svelte/stylesheet/MenuScreen.typescript.svelte

@@ -1,16 +1,89 @@
 <script lang="ts">
   import { useStackNavigation } from '@symbiote-native/navigation/svelte';
+  import { PLUS_ICON_URI, REACT_NATIVE_LOGO_URI, SVELTE_LOGO_URI } from './image-uris';
   import { StyleSheet } from '@symbiote-native/svelte';
 
   const navigation = useStackNavigation();
+  let count = $state<number>(0);
   const styles = StyleSheet.create({
-    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    screen: {
+      flex: 1,
+      backgroundColor: '#0b1622',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 24,
+      paddingVertical: 24,
+      paddingHorizontal: 32,
+    },
+    brandRow: { flexDirection: 'row', alignItems: 'center', gap: 28 },
+    brandLogo: { height: 64 },
+    brandLogoReact: { width: 70 },
+    brandLogoSvelte: { width: 54 },
+    plusIcon: { width: 48, height: 48 },
+    title: { color: '#ffffff', fontSize: 22, fontWeight: 'bold', textAlign: 'center' },
+    subtitle: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
+    counterCard: {
+      alignItems: 'center',
+      gap: 4,
+      paddingVertical: 20,
+      paddingHorizontal: 28,
+      borderRadius: 16,
+      backgroundColor: '#13243a',
+    },
+    counterLabel: { color: '#41506a', fontSize: 12, letterSpacing: 1 },
+    counterValue: { color: '#ff3e00', fontSize: 32, fontWeight: 'bold' },
+    buttonRow: { flexDirection: 'row', gap: 12 },
+    buttonPrimary: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+      paddingVertical: 14,
+      paddingHorizontal: 22,
+      backgroundColor: '#ff3e00',
+    },
+    buttonSecondary: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+      paddingVertical: 14,
+      paddingHorizontal: 22,
+      borderWidth: 1.5,
+      borderColor: '#41506a',
+    },
+    buttonPrimaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
+    buttonSecondaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
   });
 </script>
 
-<view style={styles.container}>
-  <text>Welcome to SymbioteNative!</text>
-  <pressable onPress={() => navigation.current.push('Details')}>
-    <text>Go to Details</text>
-  </pressable>
-</view>
+<safe-area-view style={styles.screen}>
+  <view style={styles.brandRow}>
+    <image
+      style={[styles.brandLogo, styles.brandLogoReact]}
+      resizeMode="contain"
+      source={{ uri: REACT_NATIVE_LOGO_URI }}
+    />
+    <image style={styles.plusIcon} resizeMode="contain" source={{ uri: PLUS_ICON_URI }} />
+    <image
+      style={[styles.brandLogo, styles.brandLogoSvelte]}
+      resizeMode="contain"
+      source={{ uri: SVELTE_LOGO_URI }}
+    />
+  </view>
+
+  <text style={styles.title}>Welcome to SymbioteNative!</text>
+  <text style={styles.subtitle}>Framework-agnostic React Native, driven by Svelte.</text>
+
+  <view style={styles.counterCard}>
+    <text style={styles.counterLabel}>TAPS</text>
+    <text style={styles.counterValue}>{count}</text>
+  </view>
+
+  <view style={styles.buttonRow}>
+    <pressable style={styles.buttonPrimary} onPress={() => (count += 1)}>
+      <text style={styles.buttonPrimaryText}>Tap me</text>
+    </pressable>
+    <pressable style={styles.buttonSecondary} onPress={() => navigation.current.push('Details')}>
+      <text style={styles.buttonSecondaryText}>Go to Details</text>
+    </pressable>
+  </view>
+</safe-area-view>

package/templates/styling/navigation/vue-sfc/css-modules/App.module.css

@@ -0,0 +1,118 @@
+.screen {
+  flex: 1;
+  background-color: #0b1622;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 24px 32px;
+}
+
+.brand-row {
+  flex-direction: row;
+  align-items: center;
+  gap: 28px;
+}
+
+.brand-logo {
+  height: 64px;
+}
+
+.brand-logo-react {
+  width: 70px;
+}
+
+.brand-logo-vue {
+  width: 74px;
+}
+
+.plus-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.title {
+  color: #ffffff;
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.subtitle {
+  color: #cbd5e1;
+  font-size: 14px;
+  text-align: center;
+}
+
+.counter-card {
+  align-items: center;
+  gap: 4px;
+  padding: 20px 28px;
+  border-radius: 16px;
+  background-color: #13243a;
+}
+
+.counter-label {
+  color: #41506a;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.counter-value {
+  color: #42b883;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.button-row {
+  flex-direction: row;
+  gap: 12px;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: #42b883;
+}
+
+.button-secondary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  border-width: 1.5px;
+  border-color: #41506a;
+}
+
+.button-primary-text {
+  color: #0b1622;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.button-secondary-text {
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.details-card {
+  align-items: center;
+  gap: 10px;
+  padding: 24px;
+  border-radius: 16px;
+  background-color: #13243a;
+}
+
+.details-title {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.details-body {
+  color: #cbd5e1;
+  font-size: 14px;
+  text-align: center;
+}

package/templates/styling/navigation/vue-sfc/css-modules/DetailsScreen.typescript.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
+import { useStackNavigation } from '@symbiote-native/navigation/vue';
 import styles from './App.module.css';
+
+const navigation = useStackNavigation();
 </script>
 
 <template>
-  <view :class="styles.container">
-    <text>Details screen</text>
-  </view>
+  <safe-area-view :class="styles['screen']">
+    <view :class="styles['details-card']">
+      <text :class="styles['details-title']">You made it!</text>
+      <text :class="styles['details-body']">This screen was pushed by the Stack navigator — proof navigation actually works.</text>
+    </view>
+    <pressable :class="styles['button-secondary']" @press="() => navigation.pop()">
+      <text :class="styles['button-secondary-text']">Go back</text>
+    </pressable>
+  </safe-area-view>
 </template>

package/templates/styling/navigation/vue-sfc/css-modules/DetailsScreen.vue

@@ -1,9 +1,18 @@
 <script setup>
+import { useStackNavigation } from '@symbiote-native/navigation/vue';
 import styles from './App.module.css';
+
+const navigation = useStackNavigation();
 </script>
 
 <template>
-  <view :class="styles.container">
-    <text>Details screen</text>
-  </view>
+  <safe-area-view :class="styles['screen']">
+    <view :class="styles['details-card']">
+      <text :class="styles['details-title']">You made it!</text>
+      <text :class="styles['details-body']">This screen was pushed by the Stack navigator — proof navigation actually works.</text>
+    </view>
+    <pressable :class="styles['button-secondary']" @press="() => navigation.pop()">
+      <text :class="styles['button-secondary-text']">Go back</text>
+    </pressable>
+  </safe-area-view>
 </template>

package/templates/styling/navigation/vue-sfc/css-modules/MenuScreen.typescript.vue

@@ -1,15 +1,47 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useStackNavigation } from '@symbiote-native/navigation/vue';
 import styles from './App.module.css';
 
+const count = ref<number>(0);
 const navigation = useStackNavigation();
 </script>
 
 <template>
-  <view :class="styles.container">
-    <text>Welcome to SymbioteNative!</text>
-    <pressable @press="() => navigation.push('Details')">
-      <text>Go to Details</text>
-    </pressable>
-  </view>
+  <safe-area-view :class="styles['screen']">
+    <view :class="styles['brand-row']">
+      <image
+        :class="[styles['brand-logo'], styles['brand-logo-react']]"
+        resize-mode="contain"
+        :source="require('./assets/react-native-logo.png')"
+      />
+      <image
+        :class="styles['plus-icon']"
+        resize-mode="contain"
+        :source="require('./assets/plus-icon.png')"
+      />
+      <image
+        :class="[styles['brand-logo'], styles['brand-logo-vue']]"
+        resize-mode="contain"
+        :source="require('./assets/vue-logo.png')"
+      />
+    </view>
+
+    <text :class="styles['title']">Welcome to SymbioteNative!</text>
+    <text :class="styles['subtitle']">Framework-agnostic React Native, driven by Vue.</text>
+
+    <view :class="styles['counter-card']">
+      <text :class="styles['counter-label']">TAPS</text>
+      <text :class="styles['counter-value']">{{ count }}</text>
+    </view>
+
+    <view :class="styles['button-row']">
+      <pressable :class="styles['button-primary']" @press="count++">
+        <text :class="styles['button-primary-text']">Tap me</text>
+      </pressable>
+      <pressable :class="styles['button-secondary']" @press="() => navigation.push('Details')">
+        <text :class="styles['button-secondary-text']">Go to Details</text>
+      </pressable>
+    </view>
+  </safe-area-view>
 </template>

package/templates/styling/navigation/vue-sfc/css-modules/MenuScreen.vue

@@ -1,15 +1,47 @@
 <script setup>
+import { ref } from 'vue';
 import { useStackNavigation } from '@symbiote-native/navigation/vue';
 import styles from './App.module.css';
 
+const count = ref(0);
 const navigation = useStackNavigation();
 </script>
 
 <template>
-  <view :class="styles.container">
-    <text>Welcome to SymbioteNative!</text>
-    <pressable @press="() => navigation.push('Details')">
-      <text>Go to Details</text>
-    </pressable>
-  </view>
+  <safe-area-view :class="styles['screen']">
+    <view :class="styles['brand-row']">
+      <image
+        :class="[styles['brand-logo'], styles['brand-logo-react']]"
+        resize-mode="contain"
+        :source="require('./assets/react-native-logo.png')"
+      />
+      <image
+        :class="styles['plus-icon']"
+        resize-mode="contain"
+        :source="require('./assets/plus-icon.png')"
+      />
+      <image
+        :class="[styles['brand-logo'], styles['brand-logo-vue']]"
+        resize-mode="contain"
+        :source="require('./assets/vue-logo.png')"
+      />
+    </view>
+
+    <text :class="styles['title']">Welcome to SymbioteNative!</text>
+    <text :class="styles['subtitle']">Framework-agnostic React Native, driven by Vue.</text>
+
+    <view :class="styles['counter-card']">
+      <text :class="styles['counter-label']">TAPS</text>
+      <text :class="styles['counter-value']">{{ count }}</text>
+    </view>
+
+    <view :class="styles['button-row']">
+      <pressable :class="styles['button-primary']" @press="count++">
+        <text :class="styles['button-primary-text']">Tap me</text>
+      </pressable>
+      <pressable :class="styles['button-secondary']" @press="() => navigation.push('Details')">
+        <text :class="styles['button-secondary-text']">Go to Details</text>
+      </pressable>
+    </view>
+  </safe-area-view>
 </template>

package/templates/styling/navigation/vue-sfc/stylesheet/DetailsScreen.typescript.vue

@@ -1,13 +1,48 @@
 <script setup lang="ts">
+import { useStackNavigation } from '@symbiote-native/navigation/vue';
 import { StyleSheet } from '@symbiote-native/vue';
 
+const navigation = useStackNavigation();
 const styles = StyleSheet.create({
-  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  screen: {
+    flex: 1,
+    backgroundColor: '#0b1622',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 24,
+    paddingVertical: 24,
+    paddingHorizontal: 32,
+  },
+  detailsCard: {
+    alignItems: 'center',
+    gap: 10,
+    padding: 24,
+    borderRadius: 16,
+    backgroundColor: '#13243a',
+  },
+  detailsTitle: { color: '#ffffff', fontSize: 18, fontWeight: 'bold' },
+  detailsBody: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
+  buttonSecondary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    borderWidth: 1.5,
+    borderColor: '#41506a',
+  },
+  buttonSecondaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
 });
 </script>
 
 <template>
-  <view :style="styles.container">
-    <text>Details screen</text>
-  </view>
+  <safe-area-view :style="styles.screen">
+    <view :style="styles.detailsCard">
+      <text :style="styles.detailsTitle">You made it!</text>
+      <text :style="styles.detailsBody">This screen was pushed by the Stack navigator — proof navigation actually works.</text>
+    </view>
+    <pressable :style="styles.buttonSecondary" @press="() => navigation.pop()">
+      <text :style="styles.buttonSecondaryText">Go back</text>
+    </pressable>
+  </safe-area-view>
 </template>

package/templates/styling/navigation/vue-sfc/stylesheet/DetailsScreen.vue

@@ -1,13 +1,48 @@
 <script setup>
+import { useStackNavigation } from '@symbiote-native/navigation/vue';
 import { StyleSheet } from '@symbiote-native/vue';
 
+const navigation = useStackNavigation();
 const styles = StyleSheet.create({
-  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  screen: {
+    flex: 1,
+    backgroundColor: '#0b1622',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 24,
+    paddingVertical: 24,
+    paddingHorizontal: 32,
+  },
+  detailsCard: {
+    alignItems: 'center',
+    gap: 10,
+    padding: 24,
+    borderRadius: 16,
+    backgroundColor: '#13243a',
+  },
+  detailsTitle: { color: '#ffffff', fontSize: 18, fontWeight: 'bold' },
+  detailsBody: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
+  buttonSecondary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    borderWidth: 1.5,
+    borderColor: '#41506a',
+  },
+  buttonSecondaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
 });
 </script>
 
 <template>
-  <view :style="styles.container">
-    <text>Details screen</text>
-  </view>
+  <safe-area-view :style="styles.screen">
+    <view :style="styles.detailsCard">
+      <text :style="styles.detailsTitle">You made it!</text>
+      <text :style="styles.detailsBody">This screen was pushed by the Stack navigator — proof navigation actually works.</text>
+    </view>
+    <pressable :style="styles.buttonSecondary" @press="() => navigation.pop()">
+      <text :style="styles.buttonSecondaryText">Go back</text>
+    </pressable>
+  </safe-area-view>
 </template>