@teardown/cli 2.0.72 → 2.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@teardown/cli",
-	"version": "2.0.72",
+	"version": "2.0.73",
 	"private": false,
 	"type": "module",
 	"main": "./src/index.ts",
@@ -76,7 +76,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.11",
-		"@teardown/tsconfig": "2.0.72",
+		"@teardown/tsconfig": "2.0.73",
 		"@types/bun": "1.3.5",
 		"@types/ejs": "^3.1.5",
 		"typescript": "5.9.3"

package/src/utils/bundler.ts

@@ -85,7 +85,7 @@ export function startBundlerBackground(options: StartBundlerOptions = {}): Child
 	const proc = spawn("npx", args, {
 		cwd,
 		shell: true,
-		stdio: ["ignore", "pipe", "pipe"],
+		stdio: ["pipe", "pipe", "pipe"],
 		detached: false,
 		env: {
 			...process.env,
@@ -239,16 +239,41 @@ export async function killBundler(proc: ChildProcess, timeoutMs = 5000): Promise
 }
 
 /**
- * Attach bundler process to foreground (pipe stdout/stderr)
+ * Attach bundler process to foreground (pipe stdin/stdout/stderr)
+ *
+ * Enables keyboard shortcuts like 'r' for reload and 'j' for debugger.
  *
  * @param proc - Metro process
  */
 export function attachBundlerToForeground(proc: ChildProcess): void {
+	// Pipe output
 	proc.stdout?.pipe(process.stdout);
 	proc.stderr?.pipe(process.stderr);
 
+	// Connect stdin for keyboard shortcuts (r, j, d, etc.)
+	if (proc.stdin && process.stdin.isTTY) {
+		// Set raw mode to capture single keypresses
+		process.stdin.setRawMode(true);
+		process.stdin.resume();
+		process.stdin.pipe(proc.stdin);
+
+		// Handle Ctrl+C to exit gracefully
+		process.stdin.on("data", (data) => {
+			// Check for Ctrl+C (0x03)
+			if (data[0] === 0x03) {
+				proc.kill("SIGTERM");
+				process.exit(0);
+			}
+		});
+	}
+
 	// Handle process exit
 	proc.on("close", (code) => {
+		// Restore terminal settings
+		if (process.stdin.isTTY) {
+			process.stdin.setRawMode(false);
+		}
+
 		if (code !== 0 && code !== null) {
 			console.error(chalk.red(`Metro bundler exited with code ${code}`));
 		}

package/templates/src/_routes/home.tsx

@@ -5,13 +5,12 @@
  */
 
 import { defineScreen } from "@teardown/navigation/primitives";
-import type React from "react";
 import { ScrollView, Text, View } from "react-native";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { APP_NAME } from "@/core/constants";
 
-function HomeScreen(): React.JSX.Element {
+function HomeScreen() {
 	return (
 		<ScrollView className="flex-1 bg-background" contentContainerClassName="p-6 gap-6">
 			{/* Hero Section */}
@@ -20,12 +19,8 @@ function HomeScreen(): React.JSX.Element {
 					<Text className="text-3xl font-bold text-primary-foreground">T</Text>
 				</View>
 				<View className="items-center gap-2">
-					<Text className="text-2xl font-bold text-foreground text-center">
-						Welcome to {APP_NAME}
-					</Text>
-					<Text className="text-base text-muted-foreground text-center">
-						Your React Native app is ready to go
-					</Text>
+					<Text className="text-2xl font-bold text-foreground text-center">Welcome to {APP_NAME}</Text>
+					<Text className="text-base text-muted-foreground text-center">Your React Native app is ready to go</Text>
 				</View>
 			</View>
 
@@ -45,21 +40,9 @@ function HomeScreen(): React.JSX.Element {
 			{/* Features */}
 			<View className="gap-4">
 				<Text className="text-lg font-semibold text-foreground">Features</Text>
-				<FeatureCard
-					icon="🔒"
-					title="Type-Safe Navigation"
-					description="Routes are fully typed with TypeScript"
-				/>
-				<FeatureCard
-					icon="📁"
-					title="File-Based Routing"
-					description="Routes generated from file structure"
-				/>
-				<FeatureCard
-					icon="🎨"
-					title="HeroUI Components"
-					description="Beautiful pre-built UI components"
-				/>
+				<FeatureCard icon="🔒" title="Type-Safe Navigation" description="Routes are fully typed with TypeScript" />
+				<FeatureCard icon="📁" title="File-Based Routing" description="Routes generated from file structure" />
+				<FeatureCard icon="🎨" title="HeroUI Components" description="Beautiful pre-built UI components" />
 			</View>
 
 			{/* Getting Started */}
@@ -78,15 +61,7 @@ function HomeScreen(): React.JSX.Element {
 	);
 }
 
-function FeatureCard({
-	icon,
-	title,
-	description,
-}: {
-	icon: string;
-	title: string;
-	description: string;
-}): React.JSX.Element {
+function FeatureCard({ icon, title, description }: { icon: string; title: string; description: string }) {
 	return (
 		<Card>
 			<Card.Body className="flex-row items-center gap-4">

package/templates/src/app/index.tsx

@@ -10,13 +10,11 @@
 
 import "../global.css";
 
-import type React from "react";
-import { StatusBar, View } from "react-native";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Router } from "@/navigation";
 import { AppProviders } from "@/providers";
 
-export function App(): React.JSX.Element {
+export function App() {
 	return (
 		<SafeAreaProvider>
 			<AppProviders>

package/templates/src/providers/app.provider.tsx

@@ -6,14 +6,14 @@
  */
 
 import { HeroUINativeProvider } from "heroui-native";
-import type React from "react";
+import type { ReactNode } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 interface AppProvidersProps {
-	children: React.ReactNode;
+	children: ReactNode;
 }
 
-export function AppProviders({ children }: AppProvidersProps): React.JSX.Element {
+export function AppProviders({ children }: AppProvidersProps) {
 	return (
 		<GestureHandlerRootView style={{ flex: 1 }}>
 			<HeroUINativeProvider>{children}</HeroUINativeProvider>