@symbiote-native/cli 0.1.0 → 0.1.2

package/templates/styling/js/react/css-modules/App.tsx

@@ -5,11 +5,23 @@ export default function App() {
   const [count, setCount] = useState<number>(0);
 
   return (
-    <view className={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => setCount((value) => value + 1)}>
-        <text>Taps: {count}</text>
+    <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>
+
+      <pressable className={styles['button-primary']} onPress={() => setCount((value) => value + 1)}>
+        <text className={styles['button-primary-text']}>Tap me</text>
       </pressable>
-    </view>
+    </safe-area-view>
   );
 }

package/templates/styling/js/react/stylesheet/App.jsx

@@ -5,15 +5,57 @@ export default function App() {
   const [count, setCount] = useState(0);
 
   return (
-    <view style={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => setCount((value) => value + 1)}>
-        <text>Taps: {count}</text>
+    <safe-area-view style={styles.screen}>
+      <image
+        style={styles.brandLogo}
+        resizeMode="contain"
+        source={require('./assets/react-native-logo.png')}
+      />
+      <text style={styles.title}>Welcome to SymbioteNative!</text>
+      <text style={styles.subtitle}>Framework-agnostic React Native, driven by React.</text>
+
+      <view style={styles.counterCard}>
+        <text style={styles.counterLabel}>TAPS</text>
+        <text style={styles.counterValue}>{count}</text>
+      </view>
+
+      <pressable style={styles.buttonPrimary} onPress={() => setCount((value) => value + 1)}>
+        <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,
+  },
+  brandLogo: { width: 70, height: 64 },
+  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: '#61dafb', fontSize: 32, fontWeight: 'bold' },
+  buttonPrimary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    backgroundColor: '#61dafb',
+  },
+  buttonPrimaryText: { color: '#0b1622', fontSize: 15, fontWeight: 'bold' },
 });

package/templates/styling/js/react/stylesheet/App.tsx

@@ -5,15 +5,57 @@ export default function App() {
   const [count, setCount] = useState<number>(0);
 
   return (
-    <view style={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => setCount((value) => value + 1)}>
-        <text>Taps: {count}</text>
+    <safe-area-view style={styles.screen}>
+      <image
+        style={styles.brandLogo}
+        resizeMode="contain"
+        source={require('./assets/react-native-logo.png')}
+      />
+      <text style={styles.title}>Welcome to SymbioteNative!</text>
+      <text style={styles.subtitle}>Framework-agnostic React Native, driven by React.</text>
+
+      <view style={styles.counterCard}>
+        <text style={styles.counterLabel}>TAPS</text>
+        <text style={styles.counterValue}>{count}</text>
+      </view>
+
+      <pressable style={styles.buttonPrimary} onPress={() => setCount((value) => value + 1)}>
+        <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,
+  },
+  brandLogo: { width: 70, height: 64 },
+  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: '#61dafb', fontSize: 32, fontWeight: 'bold' },
+  buttonPrimary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    backgroundColor: '#61dafb',
+  },
+  buttonPrimaryText: { color: '#0b1622', fontSize: 15, fontWeight: 'bold' },
 });

package/templates/styling/js/solid/css-modules/App.jsx

@@ -5,11 +5,35 @@ export default function App() {
   const [count, setCount] = createSignal(0);
 
   return (
-    <view class={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => setCount((value) => value + 1)}>
-        <text>Taps: {count()}</text>
+    <safe-area-view class={styles['screen']}>
+      <view class={styles['brand-row']}>
+        <image
+          class={`${styles['brand-logo']} ${styles['brand-logo-react']}`}
+          resizeMode="contain"
+          source={require('./assets/react-native-logo.png')}
+        />
+        <image
+          class={styles['plus-icon']}
+          resizeMode="contain"
+          source={require('./assets/plus-icon.png')}
+        />
+        <image
+          class={`${styles['brand-logo']} ${styles['brand-logo-solid']}`}
+          resizeMode="contain"
+          source={require('./assets/solid-logo.png')}
+        />
+      </view>
+      <text class={styles['title']}>Welcome to SymbioteNative!</text>
+      <text class={styles['subtitle']}>Framework-agnostic React Native, driven by Solid.</text>
+
+      <view class={styles['counter-card']}>
+        <text class={styles['counter-label']}>TAPS</text>
+        <text class={styles['counter-value']}>{count()}</text>
+      </view>
+
+      <pressable class={styles['button-primary']} onPress={() => setCount((value) => value + 1)}>
+        <text class={styles['button-primary-text']}>Tap me</text>
       </pressable>
-    </view>
+    </safe-area-view>
   );
 }

package/templates/styling/js/solid/css-modules/App.module.css

@@ -0,0 +1,78 @@
+.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-solid {
+  width: 66px;
+}
+
+.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: #2c4f7c;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: #2c4f7c;
+}
+
+.button-primary-text {
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: bold;
+}

package/templates/styling/js/solid/css-modules/App.tsx

@@ -5,11 +5,35 @@ export default function App() {
   const [count, setCount] = createSignal<number>(0);
 
   return (
-    <view class={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => setCount((value) => value + 1)}>
-        <text>Taps: {count()}</text>
+    <safe-area-view class={styles['screen']}>
+      <view class={styles['brand-row']}>
+        <image
+          class={`${styles['brand-logo']} ${styles['brand-logo-react']}`}
+          resizeMode="contain"
+          source={require('./assets/react-native-logo.png')}
+        />
+        <image
+          class={styles['plus-icon']}
+          resizeMode="contain"
+          source={require('./assets/plus-icon.png')}
+        />
+        <image
+          class={`${styles['brand-logo']} ${styles['brand-logo-solid']}`}
+          resizeMode="contain"
+          source={require('./assets/solid-logo.png')}
+        />
+      </view>
+      <text class={styles['title']}>Welcome to SymbioteNative!</text>
+      <text class={styles['subtitle']}>Framework-agnostic React Native, driven by Solid.</text>
+
+      <view class={styles['counter-card']}>
+        <text class={styles['counter-label']}>TAPS</text>
+        <text class={styles['counter-value']}>{count()}</text>
+      </view>
+
+      <pressable class={styles['button-primary']} onPress={() => setCount((value) => value + 1)}>
+        <text class={styles['button-primary-text']}>Tap me</text>
       </pressable>
-    </view>
+    </safe-area-view>
   );
 }

package/templates/styling/js/solid/stylesheet/App.jsx

@@ -5,15 +5,69 @@ export default function App() {
   const [count, setCount] = createSignal(0);
 
   return (
-    <view style={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => setCount((value) => value + 1)}>
-        <text>Taps: {count()}</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.brandLogoSolid]}
+          resizeMode="contain"
+          source={require('./assets/solid-logo.png')}
+        />
+      </view>
+      <text style={styles.title}>Welcome to SymbioteNative!</text>
+      <text style={styles.subtitle}>Framework-agnostic React Native, driven by Solid.</text>
+
+      <view style={styles.counterCard}>
+        <text style={styles.counterLabel}>TAPS</text>
+        <text style={styles.counterValue}>{count()}</text>
+      </view>
+
+      <pressable style={styles.buttonPrimary} onPress={() => setCount((value) => value + 1)}>
+        <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 },
+  brandLogoSolid: { width: 66 },
+  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: '#2c4f7c', fontSize: 32, fontWeight: 'bold' },
+  buttonPrimary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    backgroundColor: '#2c4f7c',
+  },
+  buttonPrimaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
 });

package/templates/styling/js/solid/stylesheet/App.tsx

@@ -5,15 +5,69 @@ export default function App() {
   const [count, setCount] = createSignal<number>(0);
 
   return (
-    <view style={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => setCount((value) => value + 1)}>
-        <text>Taps: {count()}</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.brandLogoSolid]}
+          resizeMode="contain"
+          source={require('./assets/solid-logo.png')}
+        />
+      </view>
+      <text style={styles.title}>Welcome to SymbioteNative!</text>
+      <text style={styles.subtitle}>Framework-agnostic React Native, driven by Solid.</text>
+
+      <view style={styles.counterCard}>
+        <text style={styles.counterLabel}>TAPS</text>
+        <text style={styles.counterValue}>{count()}</text>
+      </view>
+
+      <pressable style={styles.buttonPrimary} onPress={() => setCount((value) => value + 1)}>
+        <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 },
+  brandLogoSolid: { width: 66 },
+  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: '#2c4f7c', fontSize: 32, fontWeight: 'bold' },
+  buttonPrimary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    backgroundColor: '#2c4f7c',
+  },
+  buttonPrimaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
 });

package/templates/styling/js/svelte/css-modules/App.module.css

@@ -0,0 +1,78 @@
+.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-svelte {
+  width: 54px;
+}
+
+.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: #ff3e00;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: #ff3e00;
+}
+
+.button-primary-text {
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: bold;
+}

package/templates/styling/js/svelte/css-modules/App.svelte

@@ -1,12 +1,34 @@
 <script>
+  import { PLUS_ICON_URI, REACT_NATIVE_LOGO_URI, SVELTE_LOGO_URI } from './image-uris';
   import styles from './App.module.css';
 
   let count = $state(0);
 </script>
 
-<view class={styles.container}>
-  <text>Welcome to SymbioteNative!</text>
-  <pressable onPress={() => count++}>
-    <text>Taps: {count}</text>
+<safe-area-view class={styles['screen']}>
+  <view class={styles['brand-row']}>
+    <image
+      class={`${styles['brand-logo']} ${styles['brand-logo-react']}`}
+      resizeMode="contain"
+      source={{ uri: REACT_NATIVE_LOGO_URI }}
+    />
+    <image class={styles['plus-icon']} resizeMode="contain" source={{ uri: PLUS_ICON_URI }} />
+    <image
+      class={`${styles['brand-logo']} ${styles['brand-logo-svelte']}`}
+      resizeMode="contain"
+      source={{ uri: SVELTE_LOGO_URI }}
+    />
+  </view>
+
+  <text class={styles['title']}>Welcome to SymbioteNative!</text>
+  <text class={styles['subtitle']}>Framework-agnostic React Native, driven by Svelte.</text>
+
+  <view class={styles['counter-card']}>
+    <text class={styles['counter-label']}>TAPS</text>
+    <text class={styles['counter-value']}>{count}</text>
+  </view>
+
+  <pressable class={styles['button-primary']} onPress={() => count++}>
+    <text class={styles['button-primary-text']}>Tap me</text>
   </pressable>
-</view>
+</safe-area-view>

package/templates/styling/js/svelte/css-modules/App.typescript.svelte

@@ -1,12 +1,34 @@
 <script lang="ts">
+  import { PLUS_ICON_URI, REACT_NATIVE_LOGO_URI, SVELTE_LOGO_URI } from './image-uris';
   import styles from './App.module.css';
 
   let count = $state<number>(0);
 </script>
 
-<view class={styles.container}>
-  <text>Welcome to SymbioteNative!</text>
-  <pressable onPress={() => count++}>
-    <text>Taps: {count}</text>
+<safe-area-view class={styles['screen']}>
+  <view class={styles['brand-row']}>
+    <image
+      class={`${styles['brand-logo']} ${styles['brand-logo-react']}`}
+      resizeMode="contain"
+      source={{ uri: REACT_NATIVE_LOGO_URI }}
+    />
+    <image class={styles['plus-icon']} resizeMode="contain" source={{ uri: PLUS_ICON_URI }} />
+    <image
+      class={`${styles['brand-logo']} ${styles['brand-logo-svelte']}`}
+      resizeMode="contain"
+      source={{ uri: SVELTE_LOGO_URI }}
+    />
+  </view>
+
+  <text class={styles['title']}>Welcome to SymbioteNative!</text>
+  <text class={styles['subtitle']}>Framework-agnostic React Native, driven by Svelte.</text>
+
+  <view class={styles['counter-card']}>
+    <text class={styles['counter-label']}>TAPS</text>
+    <text class={styles['counter-value']}>{count}</text>
+  </view>
+
+  <pressable class={styles['button-primary']} onPress={() => count++}>
+    <text class={styles['button-primary-text']}>Tap me</text>
   </pressable>
-</view>
+</safe-area-view>