@symbiote-native/cli 0.0.1

package/templates/layers/navigation/app/vue-sfc/App.css

@@ -0,0 +1,129 @@
+:root {
+  --ink: #0b1622;
+  --paper: #13243a;
+  --mist: #41506a;
+  --chalk: #cbd5e1;
+  --chalk-bright: #ffffff;
+  --brand: #42b883;
+}
+
+.screen {
+  flex: 1;
+  background-color: var(--ink);
+  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;
+}
+
+/* aspect-ratio matches each source PNG's real pixel proportions — a shared square box would
+   stretch them off their real shape. */
+.brand-logo-react {
+  aspect-ratio: 1.0977;
+}
+
+.brand-logo-vue {
+  aspect-ratio: 1.1542;
+}
+
+.plus-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.title {
+  color: var(--chalk-bright);
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.subtitle {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}
+
+.counter-card {
+  align-items: center;
+  gap: 4px;
+  padding: 20px 28px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.counter-label {
+  color: var(--mist);
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.counter-value {
+  color: var(--brand);
+  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: var(--brand);
+}
+
+.button-secondary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  border-width: 1.5px;
+  border-color: var(--mist);
+}
+
+.button-primary-text {
+  color: var(--ink);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.button-secondary-text {
+  color: var(--chalk-bright);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.details-card {
+  align-items: center;
+  gap: 10px;
+  padding: 24px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.details-title {
+  color: var(--chalk-bright);
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.details-body {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}

package/templates/layers/navigation/app/vue-sfc/App.typescript.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Screen, Stack } from '@symbiote-native/navigation/vue';
+import './App.css';
+
+import MenuScreen from './MenuScreen.vue';
+import DetailsScreen from './DetailsScreen.vue';
+</script>
+
+<template>
+  <Stack initial-route-name="Menu">
+    <Screen
+      name="Menu"
+      :component="MenuScreen"
+      :options="{
+        title: 'Home',
+        headerTranslucent: true,
+        headerTintColor: '#ffffff',
+        headerTitleColor: '#ffffff',
+        headerStyle: { backgroundColor: '#0b1622' },
+        headerUserInterfaceStyle: 'dark',
+      }"
+    />
+    <Screen
+      name="Details"
+      :component="DetailsScreen"
+      :options="{
+        title: 'Details',
+        headerTranslucent: true,
+        headerTintColor: '#ffffff',
+        headerTitleColor: '#ffffff',
+        headerStyle: { backgroundColor: '#0b1622' },
+        headerUserInterfaceStyle: 'dark',
+      }"
+    />
+  </Stack>
+</template>

package/templates/layers/navigation/app/vue-sfc/App.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { Screen, Stack } from '@symbiote-native/navigation/vue';
+import './App.css';
+
+import MenuScreen from './MenuScreen.vue';
+import DetailsScreen from './DetailsScreen.vue';
+</script>
+
+<template>
+  <Stack initial-route-name="Menu">
+    <Screen
+      name="Menu"
+      :component="MenuScreen"
+      :options="{
+        title: 'Home',
+        headerTranslucent: true,
+        headerTintColor: '#ffffff',
+        headerTitleColor: '#ffffff',
+        headerStyle: { backgroundColor: '#0b1622' },
+        headerUserInterfaceStyle: 'dark',
+      }"
+    />
+    <Screen
+      name="Details"
+      :component="DetailsScreen"
+      :options="{
+        title: 'Details',
+        headerTranslucent: true,
+        headerTintColor: '#ffffff',
+        headerTitleColor: '#ffffff',
+        headerStyle: { backgroundColor: '#0b1622' },
+        headerUserInterfaceStyle: 'dark',
+      }"
+    />
+  </Stack>
+</template>

package/templates/layers/navigation/app/vue-sfc/DetailsScreen.typescript.vue

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

package/templates/layers/navigation/app/vue-sfc/DetailsScreen.vue

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

package/templates/layers/navigation/app/vue-sfc/MenuScreen.typescript.vue

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

package/templates/layers/navigation/app/vue-sfc/MenuScreen.vue

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

package/templates/layers/navigation/app/vue-tsx/App.css

@@ -0,0 +1,129 @@
+:root {
+  --ink: #0b1622;
+  --paper: #13243a;
+  --mist: #41506a;
+  --chalk: #cbd5e1;
+  --chalk-bright: #ffffff;
+  --brand: #42b883;
+}
+
+.screen {
+  flex: 1;
+  background-color: var(--ink);
+  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;
+}
+
+/* aspect-ratio matches each source PNG's real pixel proportions — a shared square box would
+   stretch them off their real shape. */
+.brand-logo-react {
+  aspect-ratio: 1.0977;
+}
+
+.brand-logo-vue {
+  aspect-ratio: 1.1542;
+}
+
+.plus-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.title {
+  color: var(--chalk-bright);
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.subtitle {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}
+
+.counter-card {
+  align-items: center;
+  gap: 4px;
+  padding: 20px 28px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.counter-label {
+  color: var(--mist);
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.counter-value {
+  color: var(--brand);
+  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: var(--brand);
+}
+
+.button-secondary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  border-width: 1.5px;
+  border-color: var(--mist);
+}
+
+.button-primary-text {
+  color: var(--ink);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.button-secondary-text {
+  color: var(--chalk-bright);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.details-card {
+  align-items: center;
+  gap: 10px;
+  padding: 24px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.details-title {
+  color: var(--chalk-bright);
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.details-body {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}

package/templates/layers/navigation/app/vue-tsx/App.jsx

@@ -0,0 +1,91 @@
+import { Screen, Stack, useStackNavigation } from '@symbiote-native/navigation/vue';
+import { ref } from 'vue';
+import './App.css';
+
+const MenuScreen = {
+  setup() {
+    const navigation = useStackNavigation();
+    const count = ref(0);
+
+    return () => (
+      <safe-area-view class="screen">
+        <view class="brand-row">
+          <image
+            class="brand-logo brand-logo-react"
+            resizeMode="contain"
+            source={require('./assets/react-native-logo.png')}
+          />
+          <image
+            class="plus-icon"
+            resizeMode="contain"
+            source={require('./assets/plus-icon.png')}
+          />
+          <image
+            class="brand-logo brand-logo-vue"
+            resizeMode="contain"
+            source={require('./assets/vue-logo.png')}
+          />
+        </view>
+        <text class="title">Welcome to SymbioteNative!</text>
+        <text class="subtitle">Framework-agnostic React Native, driven by Vue.</text>
+
+        <view class="counter-card">
+          <text class="counter-label">TAPS</text>
+          <text class="counter-value">{count.value}</text>
+        </view>
+
+        <view class="button-row">
+          <pressable class="button-primary" onPress={() => count.value++}>
+            <text class="button-primary-text">Tap me</text>
+          </pressable>
+          <pressable class="button-secondary" onPress={() => navigation.value.push('Details')}>
+            <text class="button-secondary-text">Go to Details</text>
+          </pressable>
+        </view>
+      </safe-area-view>
+    );
+  },
+};
+
+const DetailsScreen = {
+  setup() {
+    const navigation = useStackNavigation();
+
+    return () => (
+      <safe-area-view class="screen">
+        <view class="details-card">
+          <text class="details-title">You made it!</text>
+          <text class="details-body">
+            This screen was pushed by the Stack navigator — proof navigation actually works.
+          </text>
+        </view>
+        <pressable class="button-secondary" onPress={() => navigation.value.pop()}>
+          <text class="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 {
+  setup() {
+    return () => (
+      <Stack initialRouteName="Menu">
+        <Screen name="Menu" component={MenuScreen} options={{ title: 'Home', ...SCREEN_OPTIONS }} />
+        <Screen
+          name="Details"
+          component={DetailsScreen}
+          options={{ title: 'Details', ...SCREEN_OPTIONS }}
+        />
+      </Stack>
+    );
+  },
+};

package/templates/layers/navigation/app/vue-tsx/App.tsx

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