@symbiote-native/cli 0.1.0 → 0.1.1

package/templates/styling/js/vue-tsx/stylesheet/App.jsx

@@ -5,16 +5,70 @@ export default {
   setup() {
     const count = ref(0);
     return () => (
-      <view style={styles.container}>
-        <text>Welcome to SymbioteNative!</text>
-        <pressable onPress={() => count.value++}>
-          <text>Taps: {count.value}</text>
+      <safe-area-view style={styles.screen}>
+        <view style={styles.brandRow}>
+          <image
+            style={[styles.brandLogo, styles.brandLogoReact]}
+            resizeMode="contain"
+            source={require('./assets/react-native-logo.png')}
+          />
+          <image style={styles.plusIcon} resizeMode="contain" source={require('./assets/plus-icon.png')} />
+          <image
+            style={[styles.brandLogo, styles.brandLogoVue]}
+            resizeMode="contain"
+            source={require('./assets/vue-logo.png')}
+          />
+        </view>
+        <text style={styles.title}>Welcome to SymbioteNative!</text>
+        <text style={styles.subtitle}>Framework-agnostic React Native, driven by Vue.</text>
+
+        <view style={styles.counterCard}>
+          <text style={styles.counterLabel}>TAPS</text>
+          <text style={styles.counterValue}>{count.value}</text>
+        </view>
+
+        <pressable style={styles.buttonPrimary} onPress={() => count.value++}>
+          <text style={styles.buttonPrimaryText}>Tap me</text>
         </pressable>
-      </view>
+      </safe-area-view>
     );
   },
 };
 
 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 },
+  brandLogoVue: { width: 74 },
+  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: '#42b883', fontSize: 32, fontWeight: 'bold' },
+  buttonPrimary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    backgroundColor: '#42b883',
+  },
+  buttonPrimaryText: { color: '#0b1622', fontSize: 15, fontWeight: 'bold' },
 });

package/templates/styling/js/vue-tsx/stylesheet/App.tsx

@@ -5,16 +5,70 @@ export default {
   setup() {
     const count = ref(0);
     return () => (
-      <view style={styles.container}>
-        <text>Welcome to SymbioteNative!</text>
-        <pressable onPress={() => count.value++}>
-          <text>Taps: {count.value}</text>
+      <safe-area-view style={styles.screen}>
+        <view style={styles.brandRow}>
+          <image
+            style={[styles.brandLogo, styles.brandLogoReact]}
+            resizeMode="contain"
+            source={require('./assets/react-native-logo.png')}
+          />
+          <image style={styles.plusIcon} resizeMode="contain" source={require('./assets/plus-icon.png')} />
+          <image
+            style={[styles.brandLogo, styles.brandLogoVue]}
+            resizeMode="contain"
+            source={require('./assets/vue-logo.png')}
+          />
+        </view>
+        <text style={styles.title}>Welcome to SymbioteNative!</text>
+        <text style={styles.subtitle}>Framework-agnostic React Native, driven by Vue.</text>
+
+        <view style={styles.counterCard}>
+          <text style={styles.counterLabel}>TAPS</text>
+          <text style={styles.counterValue}>{count.value}</text>
+        </view>
+
+        <pressable style={styles.buttonPrimary} onPress={() => count.value++}>
+          <text style={styles.buttonPrimaryText}>Tap me</text>
         </pressable>
-      </view>
+      </safe-area-view>
     );
   },
 };
 
 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 },
+  brandLogoVue: { width: 74 },
+  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: '#42b883', fontSize: 32, fontWeight: 'bold' },
+  buttonPrimary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    backgroundColor: '#42b883',
+  },
+  buttonPrimaryText: { color: '#0b1622', fontSize: 15, fontWeight: 'bold' },
 });

package/templates/styling/navigation/angular/css-modules/src/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-angular {
+  width: 61px;
+}
+
+.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: #dd0031;
+  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: #dd0031;
+}
+
+.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: #ffffff;
+  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/angular/css-modules/src/DetailsScreen.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
+import { injectStackNavigation } from '@symbiote-native/navigation/angular';
 import stylesModule from './App.module.css';
 
 @Component({
@@ -7,11 +8,18 @@ import stylesModule from './App.module.css';
   standalone: true,
   imports: [SYMBIOTE_ELEMENTS],
   template: `
-    <view [class]="containerClass">
-      <text>Details screen</text>
-    </view>
+    <safe-area-view [class]="stylesModule['screen']">
+      <view [class]="stylesModule['details-card']">
+        <text [class]="stylesModule['details-title']">You made it!</text>
+        <text [class]="stylesModule['details-body']">This screen was pushed by the Stack navigator — proof navigation actually works.</text>
+      </view>
+      <pressable [class]="stylesModule['button-secondary']" (press)="navigation.pop()">
+        <text [class]="stylesModule['button-secondary-text']">Go back</text>
+      </pressable>
+    </safe-area-view>
   `,
 })
 export class DetailsScreen {
-  readonly containerClass = stylesModule.container;
+  readonly stylesModule = stylesModule;
+  readonly navigation = injectStackNavigation();
 }

package/templates/styling/navigation/angular/css-modules/src/MenuScreen.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
 import { injectStackNavigation } from '@symbiote-native/navigation/angular';
 import stylesModule from './App.module.css';
@@ -8,15 +8,45 @@ import stylesModule from './App.module.css';
   standalone: true,
   imports: [SYMBIOTE_ELEMENTS],
   template: `
-    <view [class]="containerClass">
-      <text>Welcome to SymbioteNative!</text>
-      <pressable (press)="navigation.push('Details')">
-        <text>Go to Details</text>
-      </pressable>
-    </view>
+    <safe-area-view [class]="stylesModule['screen']">
+      <view [class]="stylesModule['brand-row']">
+        <image
+          [class]="stylesModule['brand-logo'] + ' ' + stylesModule['brand-logo-react']"
+          resizeMode="contain"
+          [source]="reactNativeLogo"
+        ></image>
+        <image [class]="stylesModule['plus-icon']" resizeMode="contain" [source]="plusIcon"></image>
+        <image
+          [class]="stylesModule['brand-logo'] + ' ' + stylesModule['brand-logo-angular']"
+          resizeMode="contain"
+          [source]="angularLogo"
+        ></image>
+      </view>
+
+      <text [class]="stylesModule['title']">Welcome to SymbioteNative!</text>
+      <text [class]="stylesModule['subtitle']">Framework-agnostic React Native, driven by Angular.</text>
+
+      <view [class]="stylesModule['counter-card']">
+        <text [class]="stylesModule['counter-label']">TAPS</text>
+        <text [class]="stylesModule['counter-value']">{{ count() }}</text>
+      </view>
+
+      <view [class]="stylesModule['button-row']">
+        <pressable [class]="stylesModule['button-primary']" (press)="count.update(v => v + 1)">
+          <text [class]="stylesModule['button-primary-text']">Tap me</text>
+        </pressable>
+        <pressable [class]="stylesModule['button-secondary']" (press)="navigation.push('Details')">
+          <text [class]="stylesModule['button-secondary-text']">Go to Details</text>
+        </pressable>
+      </view>
+    </safe-area-view>
   `,
 })
 export class MenuScreen {
-  readonly containerClass = stylesModule.container;
+  readonly stylesModule = stylesModule;
   readonly navigation = injectStackNavigation();
+  readonly count = signal(0);
+  readonly reactNativeLogo = require('./assets/react-native-logo.png');
+  readonly plusIcon = require('./assets/plus-icon.png');
+  readonly angularLogo = require('./assets/angular-logo.png');
 }

package/templates/styling/navigation/angular/stylesheet/src/DetailsScreen.ts

@@ -1,18 +1,53 @@
 import { Component } from '@angular/core';
 import { SYMBIOTE_ELEMENTS, StyleSheet } from '@symbiote-native/angular';
+import { injectStackNavigation } from '@symbiote-native/navigation/angular';
 
 @Component({
   selector: 'DetailsScreen',
   standalone: true,
   imports: [SYMBIOTE_ELEMENTS],
   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>
   `,
 })
 export class DetailsScreen {
   readonly 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' },
   });
+  readonly navigation = injectStackNavigation();
 }

package/templates/styling/navigation/angular/stylesheet/src/MenuScreen.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { SYMBIOTE_ELEMENTS, StyleSheet } from '@symbiote-native/angular';
 import { injectStackNavigation } from '@symbiote-native/navigation/angular';
 
@@ -7,17 +7,84 @@ import { injectStackNavigation } from '@symbiote-native/navigation/angular';
   standalone: true,
   imports: [SYMBIOTE_ELEMENTS],
   template: `
-    <view [style]="styles.container">
-      <text>Welcome to SymbioteNative!</text>
-      <pressable (press)="navigation.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]="reactNativeLogo"></image>
+        <image [style]="styles.plusIcon" resizeMode="contain" [source]="plusIcon"></image>
+        <image [style]="[styles.brandLogo, styles.brandLogoAngular]" resizeMode="contain" [source]="angularLogo"></image>
+      </view>
+
+      <text [style]="styles.title">Welcome to SymbioteNative!</text>
+      <text [style]="styles.subtitle">Framework-agnostic React Native, driven by Angular.</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" (press)="count.update(v => v + 1)">
+          <text [style]="styles.buttonPrimaryText">Tap me</text>
+        </pressable>
+        <pressable [style]="styles.buttonSecondary" (press)="navigation.push('Details')">
+          <text [style]="styles.buttonSecondaryText">Go to Details</text>
+        </pressable>
+      </view>
+    </safe-area-view>
   `,
 })
 export class MenuScreen {
   readonly 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 },
+    brandLogoAngular: { width: 61 },
+    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: '#dd0031', fontSize: 32, fontWeight: 'bold' },
+    buttonRow: { flexDirection: 'row', gap: 12 },
+    buttonPrimary: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+      paddingVertical: 14,
+      paddingHorizontal: 22,
+      backgroundColor: '#dd0031',
+    },
+    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' },
   });
   readonly navigation = injectStackNavigation();
+  readonly count = signal(0);
+  readonly reactNativeLogo = require('./assets/react-native-logo.png');
+  readonly plusIcon = require('./assets/plus-icon.png');
+  readonly angularLogo = require('./assets/angular-logo.png');
 }

package/templates/styling/navigation/react/css-modules/App.jsx

@@ -1,32 +1,77 @@
 import { Stack, useStackNavigation } from '@symbiote-native/navigation/react';
+import { useState } from 'react';
 import styles from './App.module.css';
 
 function MenuScreen() {
   const navigation = useStackNavigation();
+  const [count, setCount] = useState(0);
 
   return (
-    <view className={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => navigation.push('Details')}>
-        <text>Go to Details</text>
-      </pressable>
-    </view>
+    <safe-area-view className={styles['screen']}>
+      <image
+        className={styles['brand-logo']}
+        resizeMode="contain"
+        source={require('./assets/react-native-logo.png')}
+      />
+      <text className={styles['title']}>Welcome to SymbioteNative!</text>
+      <text className={styles['subtitle']}>Framework-agnostic React Native, driven by React.</text>
+
+      <view className={styles['counter-card']}>
+        <text className={styles['counter-label']}>TAPS</text>
+        <text className={styles['counter-value']}>{count}</text>
+      </view>
+
+      <view className={styles['button-row']}>
+        <pressable className={styles['button-primary']} onPress={() => setCount(count + 1)}>
+          <text className={styles['button-primary-text']}>Tap me</text>
+        </pressable>
+        <pressable className={styles['button-secondary']} onPress={() => navigation.push('Details')}>
+          <text className={styles['button-secondary-text']}>Go to Details</text>
+        </pressable>
+      </view>
+    </safe-area-view>
   );
 }
 
 function DetailsScreen() {
+  const navigation = useStackNavigation();
+
   return (
-    <view className={styles.container}>
-      <text>Details screen</text>
-    </view>
+    <safe-area-view className={styles['screen']}>
+      <view className={styles['details-card']}>
+        <text className={styles['details-title']}>You made it!</text>
+        <text className={styles['details-body']}>
+          This screen was pushed by the Stack navigator — proof navigation actually works.
+        </text>
+      </view>
+      <pressable className={styles['button-secondary']} onPress={() => navigation.pop()}>
+        <text className={styles['button-secondary-text']}>Go back</text>
+      </pressable>
+    </safe-area-view>
   );
 }
 
+const SCREEN_OPTIONS = {
+  headerTranslucent: true,
+  headerTintColor: '#ffffff',
+  headerTitleColor: '#ffffff',
+  headerStyle: { backgroundColor: '#0b1622' },
+  headerUserInterfaceStyle: 'dark',
+};
+
 export default function App() {
   return (
     <Stack initialRouteName="Menu">
-      <Stack.Screen name="Menu" component={MenuScreen} options={{ title: 'Home' }} />
-      <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+      <Stack.Screen
+        name="Menu"
+        component={MenuScreen}
+        options={{ title: 'Home', ...SCREEN_OPTIONS }}
+      />
+      <Stack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{ title: 'Details', ...SCREEN_OPTIONS }}
+      />
     </Stack>
   );
 }