create-wizze-app 0.1.2 → 0.1.3

package/README.md

@@ -2,7 +2,23 @@
 
 Gerador oficial de projetos do Wizze Framework.
 
-Uso:
+## Uso
 
 - `create-wizze-app <nome>`
 - `create-wizze-app <nome> --template <blank|tabs|ecommerce|delivery|social|dashboard-mobile|marketplace|fintech|education|health|restaurant>`
+
+## O que é gerado
+
+- Estrutura universal com suporte a Android, iOS e Web.
+- `src/app` com rotas por arquivo (Expo Router).
+- `src/components`, `src/constants` e `src/hooks`.
+- `app.json` configurado para Expo.
+- `wizze.config.ts` com metadados do projeto Wizze Go.
+
+## Scripts iniciais
+
+- `npm run start`
+- `npm run android`
+- `npm run ios`
+- `npm run web`
+- `npm run prebuild` (gera pastas nativas `android/` e `ios/`)

package/dist/index.js

@@ -1,8 +1,5 @@
-import { copyFile, mkdir, readdir, writeFile } from 'node:fs/promises';
-import { fileURLToPath } from 'node:url';
+import { mkdir, readdir, writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import { access } from 'node:fs/promises';
-import { resolveTemplate } from './template-resolver.js';
 const SUPPORTED_TEMPLATES = new Set([
     'blank',
     'dashboard-mobile',
@@ -16,6 +13,74 @@ const SUPPORTED_TEMPLATES = new Set([
     'social',
     'tabs',
 ]);
+const TEMPLATE_META = {
+    blank: {
+        title: 'Wizze Go Base',
+        subtitle: 'Estrutura inicial para Android, iOS e Web com Expo Router.',
+        accentColor: '#1d4ed8',
+        features: ['Roteamento por arquivos', 'Tabs prontas', 'Scripts Android/iOS/Web'],
+    },
+    'dashboard-mobile': {
+        title: 'Dashboard Mobile',
+        subtitle: 'Painel operacional com foco em KPIs, ambientes e releases.',
+        accentColor: '#0369a1',
+        features: ['Visão de KPIs', 'Fluxo de releases', 'Status por ambiente'],
+    },
+    delivery: {
+        title: 'Delivery App',
+        subtitle: 'Base para pedidos, rastreio de entregas e operação de cozinha.',
+        accentColor: '#b45309',
+        features: ['Pedidos em tempo real', 'Status de entrega', 'Operação por etapas'],
+    },
+    ecommerce: {
+        title: 'E-commerce App',
+        subtitle: 'Base para catálogo, carrinho e checkout mobile/web.',
+        accentColor: '#0f766e',
+        features: ['Catálogo de produtos', 'Carrinho de compras', 'Fluxo de checkout'],
+    },
+    education: {
+        title: 'Education App',
+        subtitle: 'Estrutura para trilhas de conteúdo, aulas e progresso.',
+        accentColor: '#4338ca',
+        features: ['Trilhas e módulos', 'Acompanhamento de progresso', 'Área do aluno'],
+    },
+    fintech: {
+        title: 'Fintech App',
+        subtitle: 'Base para contas, transações e visão financeira.',
+        accentColor: '#0f766e',
+        features: ['Extrato e saldo', 'Movimentações', 'Painel financeiro'],
+    },
+    health: {
+        title: 'Health App',
+        subtitle: 'Estrutura inicial para agenda, prontuário e acompanhamento.',
+        accentColor: '#0e7490',
+        features: ['Agenda clínica', 'Histórico de atendimentos', 'Painel de acompanhamento'],
+    },
+    marketplace: {
+        title: 'Marketplace App',
+        subtitle: 'Base para vendedores, produtos e pedidos multi-loja.',
+        accentColor: '#9333ea',
+        features: ['Múltiplos vendedores', 'Gestão de pedidos', 'Catálogo compartilhado'],
+    },
+    restaurant: {
+        title: 'Restaurant App',
+        subtitle: 'Estrutura para salão, balcão e integração com impressoras.',
+        accentColor: '#b91c1c',
+        features: ['Gestão de mesas', 'Pedidos de cozinha', 'Suporte SUNMI'],
+    },
+    social: {
+        title: 'Social App',
+        subtitle: 'Base para feed, interações e perfil de usuário.',
+        accentColor: '#db2777',
+        features: ['Feed de conteúdo', 'Interações sociais', 'Perfil e preferências'],
+    },
+    tabs: {
+        title: 'Tabs App',
+        subtitle: 'Layout focado em navegação por abas para evolução rápida.',
+        accentColor: '#2563eb',
+        features: ['Navegação em abas', 'Páginas modulares', 'Base para expansão rápida'],
+    },
+};
 export async function createWizzeApp(input) {
     const rawName = input.name.trim();
     if (!rawName) {
@@ -24,7 +89,7 @@ export async function createWizzeApp(input) {
     if (rawName.includes('/') || rawName.includes('\\') || rawName === '.' || rawName === '..') {
         throw new Error('Nome de aplicativo inválido. Não use separadores de diretório.');
     }
-    const template = resolveTemplate(input.template).trim();
+    const template = (input.template ?? 'blank').trim();
     if (!SUPPORTED_TEMPLATES.has(template)) {
         throw new Error(`Template inválido: ${template}`);
     }
@@ -34,30 +99,160 @@ export async function createWizzeApp(input) {
     }
     const appDir = join(process.cwd(), slug);
     await mkdir(appDir, { recursive: true });
-    const templateDir = await resolveTemplateDir(template);
-    if (templateDir) {
-        await copyDirectory(templateDir, appDir);
+    await ensureDirectoryIsEmpty(appDir);
+    const displayName = toTitleCase(slug);
+    const templateMeta = TEMPLATE_META[template] ?? TEMPLATE_META.blank;
+    await createBaseProjectStructure(appDir);
+    await writeAssetPlaceholders(appDir);
+    await writeProjectFiles({ appDir, slug, displayName, template, templateMeta });
+}
+async function ensureDirectoryIsEmpty(appDir) {
+    const files = await readdir(appDir);
+    if (files.length > 0) {
+        throw new Error('A pasta do aplicativo já existe e não está vazia. Escolha outro nome.');
     }
-    else {
-        await mkdir(join(appDir, 'src'), { recursive: true });
+}
+async function createBaseProjectStructure(appDir) {
+    const directories = [
+        'assets/expo.icon',
+        'assets/images',
+        'scripts',
+        'src/app/(tabs)',
+        'src/components',
+        'src/constants',
+        'src/hooks',
+    ];
+    for (const dir of directories) {
+        await mkdir(join(appDir, dir), { recursive: true });
     }
-    const configPayload = {
-        name: toTitleCase(slug),
-        slug,
-        version: '1.0.0',
-        template
-    };
-    await writeFile(join(appDir, 'wizze.config.ts'), `export default ${JSON.stringify(configPayload, null, 2)};\n`, 'utf8');
+}
+async function writeAssetPlaceholders(appDir) {
+    // 1x1 PNG (sem transparência) para evitar referências quebradas no app.json inicial.
+    const pngBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADUlEQVR42mP8z8BQDwAF/gL+3xaQaQAAAABJRU5ErkJggg==';
+    const pngBuffer = Buffer.from(pngBase64, 'base64');
+    const files = [
+        'assets/images/icon.png',
+        'assets/images/favicon.png',
+        'assets/images/splash-icon.png',
+        'assets/images/android-icon-foreground.png',
+        'assets/images/android-icon-background.png',
+        'assets/images/android-icon-monochrome.png',
+    ];
+    for (const file of files) {
+        await writeFile(join(appDir, file), pngBuffer);
+    }
+    await writeFile(join(appDir, 'assets/expo.icon/icon.json'), `${JSON.stringify({ images: [] }, null, 2)}\n`, 'utf8');
+}
+async function writeProjectFiles(input) {
+    const { appDir, slug, displayName, template, templateMeta } = input;
+    const scheme = slug.replace(/-/g, '');
     const packagePayload = {
         name: slug,
+        main: 'expo-router/entry',
         private: true,
-        version: '0.0.1',
+        version: '1.0.0',
         scripts: {
-            dev: 'echo "Projeto Wizze criado. Configure o runtime para desenvolvimento."'
-        }
+            start: 'expo start',
+            android: 'expo start --android',
+            ios: 'expo start --ios',
+            web: 'expo start --web',
+            prebuild: 'expo prebuild',
+            lint: 'expo lint',
+            'reset-project': 'node ./scripts/reset-project.js',
+        },
+        dependencies: {
+            '@expo/vector-icons': '^15.0.3',
+            '@react-navigation/bottom-tabs': '^7.15.5',
+            '@react-navigation/native': '^7.1.33',
+            expo: '~55.0.24',
+            'expo-constants': '~55.0.16',
+            'expo-font': '~55.0.7',
+            'expo-linking': '~55.0.15',
+            'expo-router': '~55.0.14',
+            'expo-splash-screen': '~55.0.21',
+            'expo-status-bar': '~55.0.6',
+            'expo-system-ui': '~55.0.18',
+            react: '19.2.0',
+            'react-dom': '19.2.0',
+            'react-native': '0.83.6',
+            'react-native-gesture-handler': '~2.30.0',
+            'react-native-safe-area-context': '~5.6.2',
+            'react-native-screens': '~4.23.0',
+            'react-native-web': '~0.21.0',
+        },
+        devDependencies: {
+            '@types/react': '~19.2.2',
+            typescript: '~5.9.2',
+        },
+    };
+    const appConfigPayload = {
+        expo: {
+            name: displayName,
+            slug,
+            version: '1.0.0',
+            orientation: 'portrait',
+            icon: './assets/images/icon.png',
+            scheme,
+            userInterfaceStyle: 'automatic',
+            ios: {
+                icon: './assets/expo.icon',
+            },
+            android: {
+                adaptiveIcon: {
+                    backgroundColor: '#E6F4FE',
+                    foregroundImage: './assets/images/android-icon-foreground.png',
+                    backgroundImage: './assets/images/android-icon-background.png',
+                    monochromeImage: './assets/images/android-icon-monochrome.png',
+                },
+                predictiveBackGestureEnabled: false,
+            },
+            web: {
+                output: 'static',
+                favicon: './assets/images/favicon.png',
+            },
+            plugins: [
+                'expo-router',
+                [
+                    'expo-splash-screen',
+                    {
+                        backgroundColor: templateMeta.accentColor,
+                        android: {
+                            image: './assets/images/splash-icon.png',
+                            imageWidth: 76,
+                        },
+                    },
+                ],
+            ],
+            experiments: {
+                typedRoutes: true,
+                reactCompiler: true,
+            },
+        },
+    };
+    const wizzeConfigPayload = {
+        name: displayName,
+        slug,
+        version: '1.0.0',
+        template,
+        platforms: ['android', 'ios', 'web'],
     };
     await writeFile(join(appDir, 'package.json'), `${JSON.stringify(packagePayload, null, 2)}\n`, 'utf8');
-    await ensureTemplateAppSource(appDir, template);
+    await writeFile(join(appDir, 'app.json'), `${JSON.stringify(appConfigPayload, null, 2)}\n`, 'utf8');
+    await writeFile(join(appDir, 'tsconfig.json'), buildTsConfigSource(), 'utf8');
+    await writeFile(join(appDir, '.gitignore'), buildGitIgnoreSource(), 'utf8');
+    await writeFile(join(appDir, 'README.md'), buildReadmeSource(slug, template, templateMeta), 'utf8');
+    await writeFile(join(appDir, 'wizze.config.ts'), `export default ${JSON.stringify(wizzeConfigPayload, null, 2)};\n`, 'utf8');
+    await writeFile(join(appDir, 'scripts', 'reset-project.js'), buildResetProjectScript(), 'utf8');
+    await writeFile(join(appDir, 'src', 'app', '_layout.tsx'), buildRootLayoutSource(), 'utf8');
+    await writeFile(join(appDir, 'src', 'app', '(tabs)', '_layout.tsx'), buildTabLayoutSource(), 'utf8');
+    await writeFile(join(appDir, 'src', 'app', '(tabs)', 'index.tsx'), buildHomeScreenSource(displayName, templateMeta), 'utf8');
+    await writeFile(join(appDir, 'src', 'app', '(tabs)', 'projects.tsx'), buildProjectsScreenSource(templateMeta), 'utf8');
+    await writeFile(join(appDir, 'src', 'app', '(tabs)', 'builds.tsx'), buildBuildsScreenSource(templateMeta), 'utf8');
+    await writeFile(join(appDir, 'src', 'components', 'feature-card.tsx'), buildFeatureCardSource(), 'utf8');
+    await writeFile(join(appDir, 'src', 'constants', 'theme.ts'), buildThemeSource(templateMeta.accentColor), 'utf8');
+    await writeFile(join(appDir, 'src', 'hooks', 'use-color-scheme.ts'), "export { useColorScheme } from 'react-native';\n", 'utf8');
+    await writeFile(join(appDir, 'src', 'hooks', 'use-color-scheme.web.ts'), buildUseColorSchemeWebSource(), 'utf8');
+    await writeFile(join(appDir, 'src', 'hooks', 'use-theme.ts'), buildUseThemeSource(), 'utf8');
 }
 function toSlug(value) {
     return value
@@ -74,50 +269,533 @@ function toTitleCase(value) {
         .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
         .join(' ');
 }
-function buildAppTemplateSource(template) {
+function buildTsConfigSource() {
     return [
-        'export function App() {',
-        `  return 'Wizze template: ${template}';`,
+        '{',
+        '  "extends": "expo/tsconfig.base",',
+        '  "compilerOptions": {',
+        '    "strict": true,',
+        '    "paths": {',
+        '      "@/*": [',
+        '        "./src/*"',
+        '      ],',
+        '      "@/assets/*": [',
+        '        "./assets/*"',
+        '      ]',
+        '    }',
+        '  },',
+        '  "include": [',
+        '    "**/*.ts",',
+        '    "**/*.tsx",',
+        '    ".expo/types/**/*.ts",',
+        '    "expo-env.d.ts"',
+        '  ]',
         '}',
-        ''
+        '',
     ].join('\n');
 }
-async function ensureTemplateAppSource(appDir, template) {
-    const tsPath = join(appDir, 'src', 'App.ts');
-    const tsxPath = join(appDir, 'src', 'App.tsx');
-    if (!(await pathExists(tsPath)) && !(await pathExists(tsxPath))) {
-        await writeFile(tsPath, buildAppTemplateSource(template), 'utf8');
-    }
+function buildGitIgnoreSource() {
+    return [
+        'node_modules/',
+        '',
+        '# Expo',
+        '.expo/',
+        'dist/',
+        'web-build/',
+        'expo-env.d.ts',
+        '',
+        '# Native artifacts',
+        '.kotlin/',
+        '*.orig.*',
+        '*.jks',
+        '*.p8',
+        '*.p12',
+        '*.key',
+        '*.mobileprovision',
+        '',
+        '# Metro',
+        '.metro-health-check*',
+        '',
+        '# Logs',
+        'npm-debug.*',
+        'yarn-debug.*',
+        'yarn-error.*',
+        '',
+        '# macOS',
+        '.DS_Store',
+        '*.pem',
+        '',
+        '# Local env',
+        '.env*.local',
+        '',
+        '# TypeScript',
+        '*.tsbuildinfo',
+        '',
+        '# Generated native folders',
+        '/ios',
+        '/android',
+        '',
+    ].join('\n');
 }
-async function resolveTemplateDir(template) {
-    const currentFilePath = fileURLToPath(import.meta.url);
-    const rootTemplates = join(currentFilePath, '..', '..', '..', '..', 'templates', template);
-    if (await pathExists(rootTemplates)) {
-        return rootTemplates;
-    }
-    return null;
-}
-async function copyDirectory(sourceDir, targetDir) {
-    const entries = await readdir(sourceDir, { withFileTypes: true });
-    for (const entry of entries) {
-        const sourcePath = join(sourceDir, entry.name);
-        const targetPath = join(targetDir, entry.name);
-        if (entry.isDirectory()) {
-            await mkdir(targetPath, { recursive: true });
-            await copyDirectory(sourcePath, targetPath);
-            continue;
-        }
-        if (entry.isFile()) {
-            await copyFile(sourcePath, targetPath);
-        }
-    }
+function buildReadmeSource(slug, template, templateMeta) {
+    return [
+        `# ${slug}`,
+        '',
+        `Projeto Wizze Go criado com template \`${template}\`.`,
+        '',
+        `## ${templateMeta.title}`,
+        templateMeta.subtitle,
+        '',
+        '## Como rodar',
+        '',
+        '```bash',
+        'npm install',
+        'npm run start',
+        '```',
+        '',
+        'Comandos por plataforma:',
+        '',
+        '- `npm run android`',
+        '- `npm run ios`',
+        '- `npm run web`',
+        '',
+        'Para gerar estruturas nativas (`android/` e `ios/`):',
+        '',
+        '```bash',
+        'npm run prebuild',
+        '```',
+        '',
+        '## Estrutura',
+        '',
+        '- `src/app`: rotas e telas',
+        '- `src/components`: componentes reutilizáveis',
+        '- `src/constants`: tokens e tema',
+        '- `src/hooks`: hooks de suporte',
+        '- `assets`: ícones e imagens do app',
+        '- `app.json`: configuração Expo (Android, iOS e Web)',
+        '- `wizze.config.ts`: configuração do projeto Wizze Go',
+        '',
+        '## Recursos iniciais',
+        '',
+        ...templateMeta.features.map((feature) => `- ${feature}`),
+        '',
+    ].join('\n');
 }
-async function pathExists(path) {
-    try {
-        await access(path);
-        return true;
-    }
-    catch {
-        return false;
-    }
+function buildResetProjectScript() {
+    return [
+        '#!/usr/bin/env node',
+        '',
+        "const fs = require('fs');",
+        "const path = require('path');",
+        '',
+        'const root = process.cwd();',
+        "const srcAppDir = path.join(root, 'src', 'app');",
+        '',
+        'async function main() {',
+        '  await fs.promises.rm(srcAppDir, { recursive: true, force: true });',
+        '  await fs.promises.mkdir(path.join(srcAppDir, "(tabs)"), { recursive: true });',
+        '',
+        '  const rootLayout = [',
+        "    \"import { Stack } from 'expo-router';\"",
+        "    \"\"",
+        "    \"export default function RootLayout() {\"",
+        "    \"  return <Stack />;\"",
+        "    \"}\"",
+        "    \"\"",
+        "  ].join('\\n');",
+        '',
+        '  const index = [',
+        "    \"import { StyleSheet, Text, View } from 'react-native';\"",
+        "    \"\"",
+        "    \"export default function Home() {\"",
+        "    \"  return (\"",
+        "    \"    <View style={styles.container}>\"",
+        "    \"      <Text>Edite src/app/(tabs)/index.tsx para começar.</Text>\"",
+        "    \"    </View>\"",
+        "    \"  );\"",
+        "    \"}\"",
+        "    \"\"",
+        "    \"const styles = StyleSheet.create({\"",
+        "    \"  container: {\"",
+        "    \"    flex: 1,\"",
+        "    \"    alignItems: 'center',\"",
+        "    \"    justifyContent: 'center',\"",
+        "    \"    padding: 24,\"",
+        "    \"  },\"",
+        "    \"});\"",
+        "    \"\"",
+        "  ].join('\\n');",
+        '',
+        "  await fs.promises.writeFile(path.join(srcAppDir, '_layout.tsx'), rootLayout, 'utf8');",
+        "  await fs.promises.writeFile(path.join(srcAppDir, '(tabs)', 'index.tsx'), index, 'utf8');",
+        "  console.log('Projeto resetado com sucesso.');",
+        '}',
+        '',
+        "main().catch((error) => {",
+        "  console.error('Falha ao resetar projeto:', error.message);",
+        '  process.exit(1);',
+        '});',
+        '',
+    ].join('\n');
+}
+function buildRootLayoutSource() {
+    return [
+        "import { Stack } from 'expo-router';",
+        "import React from 'react';",
+        '',
+        'export default function RootLayout() {',
+        '  return (',
+        '    <Stack>',
+        "      <Stack.Screen name=\"(tabs)\" options={{ headerShown: false }} />",
+        '    </Stack>',
+        '  );',
+        '}',
+        '',
+    ].join('\n');
+}
+function buildTabLayoutSource() {
+    return [
+        "import FontAwesome from '@expo/vector-icons/FontAwesome';",
+        "import { Tabs } from 'expo-router';",
+        "import React from 'react';",
+        '',
+        "import { useTheme } from '@/hooks/use-theme';",
+        '',
+        'export default function TabLayout() {',
+        '  const theme = useTheme();',
+        '',
+        '  return (',
+        '    <Tabs',
+        '      screenOptions={{',
+        '        tabBarActiveTintColor: theme.colors.primary,',
+        '        headerStyle: {',
+        '          backgroundColor: theme.colors.surface,',
+        '        },',
+        '        headerTitleStyle: {',
+        '          color: theme.colors.text,',
+        '          fontWeight: \"700\",',
+        '        },',
+        '        tabBarStyle: {',
+        '          backgroundColor: theme.colors.surface,',
+        '        },',
+        '      }}>',
+        '      <Tabs.Screen',
+        '        name="index"',
+        '        options={{',
+        '          title: "Início",',
+        '          tabBarIcon: ({ color }) => <FontAwesome name="home" size={20} color={color} />,',
+        '        }}',
+        '      />',
+        '      <Tabs.Screen',
+        '        name="projects"',
+        '        options={{',
+        '          title: "Projetos",',
+        '          tabBarIcon: ({ color }) => <FontAwesome name="folder-open" size={20} color={color} />,',
+        '        }}',
+        '      />',
+        '      <Tabs.Screen',
+        '        name="builds"',
+        '        options={{',
+        '          title: "Builds",',
+        '          tabBarIcon: ({ color }) => <FontAwesome name="rocket" size={20} color={color} />,',
+        '        }}',
+        '      />',
+        '    </Tabs>',
+        '  );',
+        '}',
+        '',
+    ].join('\n');
+}
+function buildHomeScreenSource(displayName, templateMeta) {
+    const features = templateMeta.features
+        .map((feature) => {
+        const value = JSON.stringify(feature);
+        return `        <FeatureCard key=${value} label=${value} />`;
+    })
+        .join('\n');
+    return [
+        "import { StyleSheet, Text, View } from 'react-native';",
+        '',
+        "import { FeatureCard } from '@/components/feature-card';",
+        "import { useTheme } from '@/hooks/use-theme';",
+        '',
+        'export default function HomeScreen() {',
+        '  const theme = useTheme();',
+        '',
+        '  return (',
+        '    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>',
+        '      <View style={styles.copy}>',
+        `        <Text style={[styles.kicker, { color: theme.colors.primary }]}>${templateMeta.title}</Text>`,
+        `        <Text style={[styles.title, { color: theme.colors.text }]}>{${JSON.stringify(displayName)}}</Text>`,
+        `        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>{${JSON.stringify(templateMeta.subtitle)}}</Text>`,
+        '      </View>',
+        '      <View style={styles.featureList}>',
+        features,
+        '      </View>',
+        '    </View>',
+        '  );',
+        '}',
+        '',
+        'const styles = StyleSheet.create({',
+        '  container: {',
+        '    flex: 1,',
+        '    paddingHorizontal: 20,',
+        '    paddingVertical: 22,',
+        '    gap: 16,',
+        '  },',
+        '  copy: {',
+        '    gap: 8,',
+        '  },',
+        '  kicker: {',
+        '    fontSize: 12,',
+        '    fontWeight: "700",',
+        '    textTransform: "uppercase",',
+        '    letterSpacing: 1.1,',
+        '  },',
+        '  title: {',
+        '    fontSize: 28,',
+        '    fontWeight: "800",',
+        '    letterSpacing: -0.4,',
+        '  },',
+        '  subtitle: {',
+        '    fontSize: 15,',
+        '    lineHeight: 21,',
+        '  },',
+        '  featureList: {',
+        '    gap: 10,',
+        '  },',
+        '});',
+        '',
+    ].join('\n');
+}
+function buildProjectsScreenSource(templateMeta) {
+    return [
+        "import { StyleSheet, Text, View } from 'react-native';",
+        '',
+        "import { useTheme } from '@/hooks/use-theme';",
+        '',
+        'const EXAMPLE_PROJECTS = [',
+        "  'mobile-app-main',",
+        "  'painel-operacional',",
+        "  'site-marketing',",
+        '];',
+        '',
+        'export default function ProjectsScreen() {',
+        '  const theme = useTheme();',
+        '',
+        '  return (',
+        '    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>',
+        `      <Text style={[styles.heading, { color: theme.colors.text }]}>Projetos - ${templateMeta.title}</Text>`,
+        '      <Text style={[styles.caption, { color: theme.colors.textSecondary }]}>',
+        '        Use esta área para listar apps por ambiente, cliente e canal de release.',
+        '      </Text>',
+        '      <View style={styles.list}>',
+        '        {EXAMPLE_PROJECTS.map((item) => (',
+        '          <View',
+        '            key={item}',
+        '            style={[styles.row, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>',
+        '            <Text style={[styles.rowText, { color: theme.colors.text }]}>{item}</Text>',
+        '          </View>',
+        '        ))}',
+        '      </View>',
+        '    </View>',
+        '  );',
+        '}',
+        '',
+        'const styles = StyleSheet.create({',
+        '  container: {',
+        '    flex: 1,',
+        '    padding: 20,',
+        '    gap: 12,',
+        '  },',
+        '  heading: {',
+        '    fontSize: 22,',
+        '    fontWeight: "800",',
+        '  },',
+        '  caption: {',
+        '    fontSize: 14,',
+        '    lineHeight: 20,',
+        '  },',
+        '  list: {',
+        '    gap: 10,',
+        '    marginTop: 6,',
+        '  },',
+        '  row: {',
+        '    borderWidth: 1,',
+        '    borderRadius: 12,',
+        '    paddingHorizontal: 12,',
+        '    paddingVertical: 10,',
+        '  },',
+        '  rowText: {',
+        '    fontSize: 14,',
+        '    fontWeight: "600",',
+        '  },',
+        '});',
+        '',
+    ].join('\n');
+}
+function buildBuildsScreenSource(templateMeta) {
+    return [
+        "import { StyleSheet, Text, View } from 'react-native';",
+        '',
+        "import { useTheme } from '@/hooks/use-theme';",
+        '',
+        'const SAMPLE_BUILDS = [',
+        "  { id: 'build-2401', platform: 'android', status: 'success' },",
+        "  { id: 'build-2402', platform: 'ios', status: 'running' },",
+        "  { id: 'build-2403', platform: 'web', status: 'queued' },",
+        '];',
+        '',
+        'export default function BuildsScreen() {',
+        '  const theme = useTheme();',
+        '',
+        '  return (',
+        '    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>',
+        '      <Text style={[styles.heading, { color: theme.colors.text }]}>Build Pipeline</Text>',
+        `      <Text style={[styles.caption, { color: theme.colors.textSecondary }]}>Template ativo: ${templateMeta.title}</Text>`,
+        '      <View style={styles.list}>',
+        '        {SAMPLE_BUILDS.map((build) => (',
+        '          <View',
+        '            key={build.id}',
+        '            style={[styles.row, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>',
+        '            <Text style={[styles.rowTitle, { color: theme.colors.text }]}>{build.id}</Text>',
+        '            <Text style={[styles.rowMeta, { color: theme.colors.textSecondary }]}>',
+        '              {build.platform} • {build.status}',
+        '            </Text>',
+        '          </View>',
+        '        ))}',
+        '      </View>',
+        '    </View>',
+        '  );',
+        '}',
+        '',
+        'const styles = StyleSheet.create({',
+        '  container: {',
+        '    flex: 1,',
+        '    padding: 20,',
+        '    gap: 12,',
+        '  },',
+        '  heading: {',
+        '    fontSize: 22,',
+        '    fontWeight: "800",',
+        '  },',
+        '  caption: {',
+        '    fontSize: 14,',
+        '  },',
+        '  list: {',
+        '    marginTop: 8,',
+        '    gap: 10,',
+        '  },',
+        '  row: {',
+        '    borderWidth: 1,',
+        '    borderRadius: 12,',
+        '    paddingHorizontal: 12,',
+        '    paddingVertical: 10,',
+        '    gap: 4,',
+        '  },',
+        '  rowTitle: {',
+        '    fontSize: 14,',
+        '    fontWeight: "700",',
+        '  },',
+        '  rowMeta: {',
+        '    fontSize: 13,',
+        '  },',
+        '});',
+        '',
+    ].join('\n');
+}
+function buildFeatureCardSource() {
+    return [
+        "import { StyleSheet, Text, View } from 'react-native';",
+        '',
+        "import { useTheme } from '@/hooks/use-theme';",
+        '',
+        'type FeatureCardProps = {',
+        '  label: string;',
+        '};',
+        '',
+        'export function FeatureCard({ label }: FeatureCardProps) {',
+        '  const theme = useTheme();',
+        '',
+        '  return (',
+        '    <View style={[styles.card, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>',
+        '      <Text style={[styles.text, { color: theme.colors.text }]}>{label}</Text>',
+        '    </View>',
+        '  );',
+        '}',
+        '',
+        'const styles = StyleSheet.create({',
+        '  card: {',
+        '    borderWidth: 1,',
+        '    borderRadius: 12,',
+        '    paddingHorizontal: 12,',
+        '    paddingVertical: 10,',
+        '  },',
+        '  text: {',
+        '    fontSize: 14,',
+        '    fontWeight: "600",',
+        '  },',
+        '});',
+        '',
+    ].join('\n');
+}
+function buildThemeSource(accentColor) {
+    return [
+        `const primary = ${JSON.stringify(accentColor)};`,
+        '',
+        'export const Colors = {',
+        '  light: {',
+        "    primary,",
+        "    background: '#f8fafc',",
+        "    surface: '#ffffff',",
+        "    border: '#dbe2ea',",
+        "    text: '#0f172a',",
+        "    textSecondary: '#475569',",
+        '  },',
+        '  dark: {',
+        "    primary: '#60a5fa',",
+        "    background: '#0f172a',",
+        "    surface: '#1e293b',",
+        "    border: '#334155',",
+        "    text: '#f8fafc',",
+        "    textSecondary: '#cbd5e1',",
+        '  },',
+        '};',
+        '',
+        'export type ThemeName = keyof typeof Colors;',
+        '',
+    ].join('\n');
+}
+function buildUseColorSchemeWebSource() {
+    return [
+        "import { useEffect, useState } from 'react';",
+        "import { useColorScheme as useNativeColorScheme } from 'react-native';",
+        '',
+        'export function useColorScheme() {',
+        '  const [hydrated, setHydrated] = useState(false);',
+        '',
+        '  useEffect(() => {',
+        '    setHydrated(true);',
+        '  }, []);',
+        '',
+        '  const colorScheme = useNativeColorScheme();',
+        "  return hydrated ? colorScheme : 'light';",
+        '}',
+        '',
+    ].join('\n');
+}
+function buildUseThemeSource() {
+    return [
+        "import { Colors } from '@/constants/theme';",
+        "import { useColorScheme } from '@/hooks/use-color-scheme';",
+        '',
+        'export function useTheme() {',
+        "  const scheme = useColorScheme() === 'dark' ? 'dark' : 'light';",
+        '  return {',
+        '    name: scheme,',
+        '    colors: Colors[scheme],',
+        '  };',
+        '}',
+        '',
+    ].join('\n');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-wizze-app",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Gerador oficial de projetos do Wizze Framework.",
   "author": "Master Dev (Taliton Silva)",
   "license": "MIT",