create-x4 1.0.0 → 1.0.5

package/dist/add-CDYQXQ73.mjs

@@ -0,0 +1,1246 @@
+#!/usr/bin/env node
+import { createRequire as __createRequire } from "node:module";
+const require = __createRequire(import.meta.url);
+import {
+  BD,
+  L,
+  de,
+  fe,
+  require_picocolors,
+  ue,
+  v,
+  ve,
+  we
+} from "./chunk-2A4FL2KN.mjs";
+import {
+  __toESM
+} from "./chunk-VL4BT7E7.mjs";
+
+// src/commands/add.ts
+import { existsSync, readFileSync, readdirSync, mkdirSync as mkdirSync2, cpSync } from "fs";
+import { join as join2, resolve } from "path";
+import { execSync } from "child_process";
+var import_picocolors = __toESM(require_picocolors(), 1);
+
+// src/templates/apply.ts
+import { writeFileSync, mkdirSync } from "fs";
+import { join, dirname } from "path";
+function applyTemplate(opts) {
+  for (const file of opts.template) {
+    let content = file.content;
+    for (const [placeholder, value] of Object.entries(opts.replacements)) {
+      content = content.replaceAll(placeholder, value);
+    }
+    const fullPath = join(opts.targetDir, file.path);
+    mkdirSync(dirname(fullPath), { recursive: true });
+    writeFileSync(fullPath, content);
+  }
+}
+
+// src/templates/mobile-app.ts
+var MOBILE_APP_TEMPLATE = [
+  {
+    path: "package.json",
+    content: `{
+  "name": "__SCOPE__/mobile-__MOBILE_NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "dev": "expo start",
+    "build": "echo 'use eas build'",
+    "lint": "eslint app/ src/",
+    "type-check": "tsc --noEmit",
+    "test": "echo 'no tests yet'",
+    "ios": "expo run:ios",
+    "android": "expo run:android"
+  },
+  "dependencies": {
+    "__SCOPE__/shared": "workspace:*",
+    "__SCOPE__/auth": "workspace:*",
+    "@tanstack/react-query": "^5.60.0",
+    "@trpc/client": "^11.0.0",
+    "@trpc/react-query": "^11.0.0",
+    "expo": "~52.0.0",
+    "expo-router": "~4.0.0",
+    "expo-secure-store": "~14.2.4",
+    "expo-status-bar": "~2.2.3",
+    "react": "^18.3.1",
+    "react-native": "~0.76.0",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.23.0",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "typescript": "~5.6.0"
+  }
+}
+`
+  },
+  {
+    path: "app.json",
+    content: `{
+  "expo": {
+    "name": "__PROJECT_NAME__",
+    "slug": "__PROJECT_NAME__-mobile-__MOBILE_NAME__",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "scheme": "__PROJECT_NAME__-__MOBILE_NAME__",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "__BUNDLE_ID__"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "__BUNDLE_ID__"
+    },
+    "plugins": [
+      "expo-router",
+      "expo-secure-store"
+    ]
+  }
+}
+`
+  },
+  {
+    path: "tsconfig.json",
+    content: `{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "react": ["./node_modules/@types/react"],
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}
+`
+  },
+  {
+    path: "eas.json",
+    content: `{
+  "cli": {
+    "version": ">= 12.0.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}
+`
+  },
+  {
+    path: ".env.example",
+    content: `EXPO_PUBLIC_API_URL=http://localhost:3002
+`
+  },
+  {
+    path: "src/lib/api.ts",
+    content: `import { createTRPCClient } from "__SCOPE__/shared/api-client";
+import { getStoredToken } from "__SCOPE__/auth/client/native";
+
+const API_URL = process.env.EXPO_PUBLIC_API_URL ?? "http://localhost:3002";
+
+export const api = createTRPCClient({
+  url: \`\${API_URL}/trpc\`,
+  getToken: getStoredToken,
+});
+`
+  },
+  {
+    path: "src/lib/trpc-provider.tsx",
+    content: `import React, { useState } from "react";
+import { QueryClient } from "@tanstack/react-query";
+import { SharedTRPCProvider } from "__SCOPE__/shared/trpc-provider";
+import { api } from "./api";
+
+export function TRPCProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: 5_000, retry: 1 },
+        },
+      }),
+  );
+
+  return (
+    <SharedTRPCProvider client={api} queryClient={queryClient}>
+      {children}
+    </SharedTRPCProvider>
+  );
+}
+`
+  },
+  {
+    path: "app/_layout.tsx",
+    content: `import { Stack } from "expo-router";
+import { TRPCProvider } from "../src/lib/trpc-provider";
+
+export default function RootLayout() {
+  return (
+    <TRPCProvider>
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: "#ffffff" },
+          headerTintColor: "#000000",
+          headerTitleStyle: { fontWeight: "bold" },
+        }}
+      >
+        <Stack.Screen name="index" options={{ title: "Welcome" }} />
+        <Stack.Screen name="login" options={{ title: "Log In" }} />
+        <Stack.Screen name="signup" options={{ title: "Sign Up" }} />
+        <Stack.Screen
+          name="(authenticated)"
+          options={{ headerShown: false }}
+        />
+      </Stack>
+    </TRPCProvider>
+  );
+}
+`
+  },
+  {
+    path: "app/index.tsx",
+    content: `import { View, Text, Pressable, StyleSheet } from "react-native";
+import { useRouter } from "expo-router";
+
+export default function HomeScreen() {
+  const router = useRouter();
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>__MOBILE_NAME_CLEAN__</Text>
+      <Text style={styles.subtitle}>Welcome to your app</Text>
+
+      <Pressable style={styles.button} onPress={() => router.push("/login")}>
+        <Text style={styles.buttonText}>Log In</Text>
+      </Pressable>
+
+      <Pressable
+        style={[styles.button, styles.secondaryButton]}
+        onPress={() => router.push("/signup")}
+      >
+        <Text style={[styles.buttonText, styles.secondaryButtonText]}>
+          Create Account
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 },
+  title: { fontSize: 32, fontWeight: "bold", marginBottom: 8 },
+  subtitle: { fontSize: 16, color: "#666", marginBottom: 32 },
+  button: {
+    backgroundColor: "#000",
+    paddingVertical: 14,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    width: "100%",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
+  secondaryButton: { backgroundColor: "#f0f0f0" },
+  secondaryButtonText: { color: "#000" },
+});
+`
+  },
+  {
+    path: "app/login.tsx",
+    content: `import { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  Alert,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { useRouter, Link } from "expo-router";
+import { signInAndStore } from "__SCOPE__/auth/client/native";
+
+export default function LoginScreen() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async () => {
+    if (!email || !password) {
+      Alert.alert("Error", "Please fill in all fields");
+      return;
+    }
+    setLoading(true);
+    try {
+      await signInAndStore({ email, password });
+      router.replace("/(authenticated)");
+    } catch (err: unknown) {
+      Alert.alert("Error", err instanceof Error ? err.message : "Sign in failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <Text style={styles.title}>Log In</Text>
+      <TextInput
+        style={styles.input}
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        keyboardType="email-address"
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+      <Pressable
+        style={[styles.button, loading && styles.disabled]}
+        onPress={handleLogin}
+        disabled={loading}
+      >
+        <Text style={styles.buttonText}>{loading ? "Signing in..." : "Log In"}</Text>
+      </Pressable>
+      <Link href="/signup" style={styles.link}>
+        Don't have an account? Sign up
+      </Link>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: "center", padding: 24 },
+  title: { fontSize: 28, fontWeight: "bold", marginBottom: 24, textAlign: "center" },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 8,
+    padding: 14,
+    marginBottom: 12,
+    fontSize: 16,
+  },
+  button: {
+    backgroundColor: "#000",
+    paddingVertical: 14,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
+  disabled: { opacity: 0.6 },
+  link: { marginTop: 16, textAlign: "center", color: "#007AFF" },
+});
+`
+  },
+  {
+    path: "app/signup.tsx",
+    content: `import { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  Alert,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { useRouter, Link } from "expo-router";
+import { authClient } from "__SCOPE__/auth/client/native";
+
+export default function SignupScreen() {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSignup = async () => {
+    if (!name || !email || !password) {
+      Alert.alert("Error", "Please fill in all fields");
+      return;
+    }
+    if (password.length < 8) {
+      Alert.alert("Error", "Password must be at least 8 characters");
+      return;
+    }
+    setLoading(true);
+    try {
+      await authClient.signUp.email({ name, email, password });
+      Alert.alert("Success", "Account created! Please log in.", [
+        { text: "OK", onPress: () => router.replace("/login") },
+      ]);
+    } catch (err: unknown) {
+      Alert.alert("Error", err instanceof Error ? err.message : "Sign up failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <Text style={styles.title}>Create Account</Text>
+      <TextInput
+        style={styles.input}
+        placeholder="Full Name"
+        value={name}
+        onChangeText={setName}
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        keyboardType="email-address"
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+      <Pressable
+        style={[styles.button, loading && styles.disabled]}
+        onPress={handleSignup}
+        disabled={loading}
+      >
+        <Text style={styles.buttonText}>
+          {loading ? "Creating account..." : "Sign Up"}
+        </Text>
+      </Pressable>
+      <Link href="/login" style={styles.link}>
+        Already have an account? Log in
+      </Link>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: "center", padding: 24 },
+  title: { fontSize: 28, fontWeight: "bold", marginBottom: 24, textAlign: "center" },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 8,
+    padding: 14,
+    marginBottom: 12,
+    fontSize: 16,
+  },
+  button: {
+    backgroundColor: "#000",
+    paddingVertical: 14,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
+  disabled: { opacity: 0.6 },
+  link: { marginTop: 16, textAlign: "center", color: "#007AFF" },
+});
+`
+  },
+  {
+    path: "app/(authenticated)/_layout.tsx",
+    content: `import { useEffect, useState } from "react";
+import { ActivityIndicator, View, Text, Pressable } from "react-native";
+import { Stack, useRouter } from "expo-router";
+import { getStoredToken, signOutAndClear } from "__SCOPE__/auth/client/native";
+
+export default function AuthenticatedLayout() {
+  const router = useRouter();
+  const [checking, setChecking] = useState(true);
+
+  useEffect(() => {
+    getStoredToken().then((token) => {
+      if (!token) router.replace("/login");
+      setChecking(false);
+    });
+  }, []);
+
+  if (checking) {
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <Stack
+      screenOptions={{
+        headerRight: () => (
+          <Pressable
+            style={{ marginRight: 8 }}
+            onPress={async () => {
+              await signOutAndClear();
+              router.replace("/login");
+            }}
+          >
+            <Text style={{ color: "#ff3b30", fontSize: 16 }}>Logout</Text>
+          </Pressable>
+        ),
+      }}
+    >
+      <Stack.Screen name="index" options={{ title: "Home" }} />
+    </Stack>
+  );
+}
+`
+  },
+  {
+    path: "app/(authenticated)/index.tsx",
+    content: `import { View, Text, StyleSheet } from "react-native";
+
+export default function HomeScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Home</Text>
+      <Text style={styles.subtitle}>Start building here</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 },
+  title: { fontSize: 28, fontWeight: "bold", marginBottom: 8 },
+  subtitle: { fontSize: 16, color: "#666" },
+});
+`
+  }
+];
+
+// src/templates/web-app.ts
+var WEB_APP_TEMPLATE = [
+  {
+    path: "package.json",
+    content: `{
+  "name": "__SCOPE__/__WEB_NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port __PORT__",
+    "build": "next build",
+    "start": "next start --port __PORT__",
+    "lint": "eslint src/",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "__SCOPE__/shared": "workspace:*",
+    "__SCOPE__/auth": "workspace:*",
+    "@tanstack/react-query": "^5.60.0",
+    "@trpc/client": "^11.0.0",
+    "@trpc/react-query": "^11.0.0",
+    "next": "~15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.6.0"
+  }
+}
+`
+  },
+  {
+    path: "next.config.ts",
+    content: `import type { NextConfig } from "next";
+import path from "node:path";
+
+const nextConfig: NextConfig = {
+  outputFileTracingRoot: path.join(__dirname, "../../"),
+  transpilePackages: ["__SCOPE__/shared", "__SCOPE__/auth"],
+};
+
+export default nextConfig;
+`
+  },
+  {
+    path: "tsconfig.json",
+    content: `{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "noEmit": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+`
+  },
+  {
+    path: "postcss.config.js",
+    content: `module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+`
+  },
+  {
+    path: "src/styles/globals.css",
+    content: `@import "tailwindcss";
+`
+  },
+  {
+    path: ".env.example",
+    content: `NEXT_PUBLIC_API_URL=http://localhost:3002
+`
+  },
+  {
+    path: "src/lib/trpc-provider.tsx",
+    content: `"use client";
+
+import React, { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCClient } from "__SCOPE__/shared/api-client";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3002";
+
+function getToken(): string | null {
+  if (typeof document === "undefined") return null;
+  const match = document.cookie.match(/(?:^|; )session_token=([^;]*)/);
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+export function TRPCProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: 5_000, retry: 1 },
+        },
+      }),
+  );
+
+  const [trpcClient] = useState(() =>
+    createTRPCClient({
+      url: \`\${API_URL}/trpc\`,
+      getToken: async () => getToken(),
+    }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}
+`
+  },
+  {
+    path: "src/lib/utils.ts",
+    content: `import { type ClassValue, clsx } from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}
+`
+  },
+  {
+    path: "src/app/layout.tsx",
+    content: `import type { Metadata } from "next";
+import "@/styles/globals.css";
+import { TRPCProvider } from "@/lib/trpc-provider";
+
+export const metadata: Metadata = {
+  title: "__WEB_NAME__",
+  description: "Built with x4",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <TRPCProvider>{children}</TRPCProvider>
+      </body>
+    </html>
+  );
+}
+`
+  },
+  {
+    path: "src/app/page.tsx",
+    content: `import Link from "next/link";
+
+export default function HomePage() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-8">
+      <h1 className="text-4xl font-bold mb-4">__WEB_NAME__</h1>
+      <p className="text-gray-500 mb-8">Start building your app</p>
+      <Link
+        href="/login"
+        className="bg-black text-white px-6 py-3 rounded-lg hover:bg-gray-800"
+      >
+        Get Started
+      </Link>
+    </main>
+  );
+}
+`
+  },
+  {
+    path: "src/app/(auth)/layout.tsx",
+    content: `export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-md">{children}</div>
+    </div>
+  );
+}
+`
+  },
+  {
+    path: "src/app/(auth)/login/page.tsx",
+    content: `"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const res = await fetch(
+        \`\${process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3002"}/api/auth/sign-in/email\`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email, password }),
+          credentials: "include",
+        },
+      );
+      if (!res.ok) throw new Error("Invalid credentials");
+      router.push("/");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-center mb-6">Log In</h1>
+      {error && (
+        <p className="text-red-600 text-sm text-center mb-4">{error}</p>
+      )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full border rounded-lg p-3"
+          required
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full border rounded-lg p-3"
+          required
+        />
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full bg-black text-white py-3 rounded-lg hover:bg-gray-800 disabled:opacity-50"
+        >
+          {loading ? "Signing in..." : "Log In"}
+        </button>
+      </form>
+      <p className="text-center mt-4 text-sm">
+        Don&apos;t have an account?{" "}
+        <Link href="/signup" className="text-blue-600 hover:underline">
+          Sign up
+        </Link>
+      </p>
+    </div>
+  );
+}
+`
+  },
+  {
+    path: "src/app/(auth)/signup/page.tsx",
+    content: `"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+    setLoading(true);
+
+    try {
+      const res = await fetch(
+        \`\${process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3002"}/api/auth/sign-up/email\`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name, email, password }),
+        },
+      );
+      if (!res.ok) throw new Error("Registration failed");
+      router.push("/login");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Sign up failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-center mb-6">Create Account</h1>
+      {error && (
+        <p className="text-red-600 text-sm text-center mb-4">{error}</p>
+      )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <input
+          type="text"
+          placeholder="Full Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full border rounded-lg p-3"
+          required
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full border rounded-lg p-3"
+          required
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full border rounded-lg p-3"
+          required
+        />
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full bg-black text-white py-3 rounded-lg hover:bg-gray-800 disabled:opacity-50"
+        >
+          {loading ? "Creating account..." : "Sign Up"}
+        </button>
+      </form>
+      <p className="text-center mt-4 text-sm">
+        Already have an account?{" "}
+        <Link href="/login" className="text-blue-600 hover:underline">
+          Log in
+        </Link>
+      </p>
+    </div>
+  );
+}
+`
+  },
+  {
+    path: "src/app/(dashboard)/layout.tsx",
+    content: `import Link from "next/link";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen">
+      <header className="border-b px-6 py-4 flex items-center justify-between">
+        <h1 className="font-bold text-lg">__WEB_NAME__</h1>
+        <Link href="/login" className="text-sm text-red-600 hover:underline">
+          Logout
+        </Link>
+      </header>
+      <main className="p-6">{children}</main>
+    </div>
+  );
+}
+`
+  },
+  {
+    path: "src/app/(dashboard)/page.tsx",
+    content: `export default function DashboardPage() {
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Welcome</h2>
+      <p className="text-gray-500">Start building your dashboard here.</p>
+    </div>
+  );
+}
+`
+  },
+  {
+    path: "src/middleware.ts",
+    content: `import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+const publicPaths = ["/", "/login", "/signup"];
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (publicPaths.some((p) => pathname === p || pathname.startsWith(p + "/"))) {
+    return NextResponse.next();
+  }
+
+  const token = request.cookies.get("session_token");
+  if (!token) {
+    return NextResponse.redirect(new URL("/login", request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/((?!_next/static|_next/image|favicon.ico|api).*)"],
+};
+`
+  }
+];
+
+// src/commands/add.ts
+var TEMPLATE_TYPES = ["mobile-app", "web-app"];
+function findMonorepoRoot(startDir) {
+  let dir = resolve(startDir);
+  const root = resolve("/");
+  while (dir !== root) {
+    if (existsSync(join2(dir, "turbo.json")) && existsSync(join2(dir, "packages"))) {
+      return dir;
+    }
+    dir = resolve(dir, "..");
+  }
+  return null;
+}
+function detectScopeFromPackages(root) {
+  const packagesDir = join2(root, "packages");
+  if (!existsSync(packagesDir)) return null;
+  const dirs = readdirSync(packagesDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => d.name);
+  for (const dir of dirs) {
+    const pkgPath = join2(packagesDir, dir, "package.json");
+    if (!existsSync(pkgPath)) continue;
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+      const pkgName = pkg.name;
+      if (pkgName?.startsWith("@") && pkgName.includes("/")) {
+        return pkgName.split("/")[0];
+      }
+    } catch {
+    }
+  }
+  return null;
+}
+function readMonorepoConfig(root) {
+  const rootPkg = JSON.parse(readFileSync(join2(root, "package.json"), "utf-8"));
+  const name = rootPkg.name ?? "";
+  let scope;
+  let projectName;
+  if (name.startsWith("@") && name.includes("/")) {
+    scope = name.split("/")[0];
+    projectName = name.split("/")[1];
+  } else {
+    projectName = name;
+    scope = detectScopeFromPackages(root) ?? `@${name}`;
+  }
+  let bundleId = null;
+  const appsDir = join2(root, "apps");
+  if (existsSync(appsDir)) {
+    const appDirs = readdirSync(appsDir, { withFileTypes: true }).filter((d) => d.isDirectory() && d.name.startsWith("mobile-")).map((d) => d.name);
+    for (const appDir of appDirs) {
+      const appJsonPath = join2(appsDir, appDir, "app.json");
+      if (existsSync(appJsonPath)) {
+        try {
+          const appJson = JSON.parse(readFileSync(appJsonPath, "utf-8"));
+          const iosBundleId = appJson.expo?.ios?.bundleIdentifier;
+          if (iosBundleId) {
+            const parts = iosBundleId.split(".");
+            const mobileIdx = parts.indexOf("mobile");
+            if (mobileIdx > 0) {
+              bundleId = parts.slice(0, mobileIdx).join(".");
+            }
+            break;
+          }
+        } catch {
+        }
+      }
+    }
+  }
+  return { root, scope, projectName, bundleId };
+}
+function validateAppName(name, targetDir) {
+  if (!/^[a-z][a-z0-9-]*$/.test(name)) {
+    return { valid: false, error: "Name must be kebab-case (lowercase letters, numbers, hyphens)" };
+  }
+  if (existsSync(targetDir)) {
+    return { valid: false, error: `Directory already exists: ${targetDir}` };
+  }
+  return { valid: true };
+}
+function findNextPort(appsDir, basePort = 3004) {
+  const usedPorts = /* @__PURE__ */ new Set();
+  if (!existsSync(appsDir)) return basePort;
+  const dirs = readdirSync(appsDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => d.name);
+  for (const dir of dirs) {
+    const pkgPath = join2(appsDir, dir, "package.json");
+    if (!existsSync(pkgPath)) continue;
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+      const devScript = pkg.scripts?.dev;
+      if (devScript) {
+        const portMatch = devScript.match(/--port\s+(\d+)/);
+        if (portMatch) {
+          usedPorts.add(parseInt(portMatch[1], 10));
+        }
+      }
+    } catch {
+    }
+  }
+  let port = basePort;
+  while (usedPorts.has(port)) {
+    port++;
+  }
+  return port;
+}
+function parseAddArgs(rawArgs) {
+  let templateType;
+  let name;
+  let bundleId;
+  let noInstall = false;
+  for (let i = 0; i < rawArgs.length; i++) {
+    const arg = rawArgs[i];
+    if (arg === "--name" && i + 1 < rawArgs.length) {
+      name = rawArgs[++i];
+    } else if (arg.startsWith("--name=")) {
+      name = arg.split("=")[1];
+    } else if (arg === "--bundle-id" && i + 1 < rawArgs.length) {
+      bundleId = rawArgs[++i];
+    } else if (arg.startsWith("--bundle-id=")) {
+      bundleId = arg.split("=")[1];
+    } else if (arg === "--no-install") {
+      noInstall = true;
+    } else if (!arg.startsWith("-") && !templateType) {
+      templateType = arg;
+    }
+  }
+  return { templateType, name, bundleId, noInstall };
+}
+async function runAddCommand(rawArgs) {
+  we(import_picocolors.default.bgCyan(import_picocolors.default.black(" create-x4 add ")));
+  const root = findMonorepoRoot(process.cwd());
+  if (!root) {
+    v.error(
+      "Could not find monorepo root (turbo.json + packages/). Run this command from inside an x4 monorepo."
+    );
+    process.exit(1);
+  }
+  const config = readMonorepoConfig(root);
+  v.info(`Found monorepo: ${import_picocolors.default.bold(config.projectName)} (${config.scope})`);
+  const parsed = parseAddArgs(rawArgs);
+  let templateType = parsed.templateType;
+  if (!templateType || !TEMPLATE_TYPES.includes(templateType)) {
+    if (parsed.templateType && !TEMPLATE_TYPES.includes(parsed.templateType)) {
+      v.warn(`Unknown template type: "${parsed.templateType}"`);
+    }
+    const choice = await de({
+      message: "What would you like to add?",
+      options: [
+        { value: "mobile-app", label: "Mobile App", hint: "Expo + React Native" },
+        { value: "web-app", label: "Web App", hint: "Next.js 15" }
+      ]
+    });
+    if (BD(choice)) {
+      ve("Cancelled.");
+      process.exit(0);
+    }
+    templateType = choice;
+  }
+  let name = parsed.name;
+  if (!name) {
+    const input = await ue({
+      message: `App name (kebab-case):`,
+      placeholder: templateType === "mobile-app" ? "admin" : "portal",
+      validate: (v2) => {
+        if (!/^[a-z][a-z0-9-]*$/.test(v2)) {
+          return "Must be kebab-case (lowercase letters, numbers, hyphens)";
+        }
+        return void 0;
+      }
+    });
+    if (BD(input)) {
+      ve("Cancelled.");
+      process.exit(0);
+    }
+    name = input;
+  }
+  const targetDirName = templateType === "mobile-app" ? `mobile-${name}` : name;
+  const targetDir = join2(root, "apps", targetDirName);
+  const nameResult = validateAppName(name, targetDir);
+  if (!nameResult.valid) {
+    v.error(nameResult.error);
+    process.exit(1);
+  }
+  const s = L();
+  s.start(`Scaffolding ${templateType} \u2192 apps/${targetDirName}/...`);
+  if (templateType === "mobile-app") {
+    const bundleIdPrefix = parsed.bundleId ?? config.bundleId ?? `com.${config.projectName.replace(/-/g, "")}`;
+    const mobileNameClean = name.charAt(0).toUpperCase() + name.slice(1).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    applyTemplate({
+      template: MOBILE_APP_TEMPLATE,
+      targetDir,
+      replacements: {
+        __SCOPE__: config.scope,
+        __PROJECT_NAME__: config.projectName,
+        __MOBILE_NAME__: name,
+        __MOBILE_NAME_CLEAN__: mobileNameClean,
+        __BUNDLE_ID__: `${bundleIdPrefix}.mobile.${name}`
+      }
+    });
+    const existingMobile = readdirSync(join2(root, "apps"), { withFileTypes: true }).filter((d) => d.isDirectory() && d.name.startsWith("mobile-") && d.name !== `mobile-${name}`).map((d) => d.name)[0];
+    if (existingMobile) {
+      const assetsDir = join2(root, "apps", existingMobile, "assets");
+      if (existsSync(assetsDir)) {
+        cpSync(assetsDir, join2(targetDir, "assets"), { recursive: true });
+      } else {
+        mkdirSync2(join2(targetDir, "assets"), { recursive: true });
+      }
+    } else {
+      mkdirSync2(join2(targetDir, "assets"), { recursive: true });
+    }
+  } else {
+    const port = findNextPort(join2(root, "apps"));
+    applyTemplate({
+      template: WEB_APP_TEMPLATE,
+      targetDir,
+      replacements: {
+        __SCOPE__: config.scope,
+        __PROJECT_NAME__: config.projectName,
+        __WEB_NAME__: name,
+        __PORT__: String(port)
+      }
+    });
+  }
+  s.stop(`Scaffolded apps/${targetDirName}/`);
+  if (!parsed.noInstall) {
+    s.start("Installing dependencies...");
+    try {
+      execSync("bun install", { cwd: root, stdio: "pipe" });
+      s.stop("Installed dependencies.");
+    } catch {
+      s.stop(import_picocolors.default.yellow("Dependency installation failed. Run 'bun install' manually."));
+    }
+  }
+  v.success(import_picocolors.default.green(import_picocolors.default.bold(`Added ${templateType}: apps/${targetDirName}/`)));
+  v.message(import_picocolors.default.bold("Next steps:"));
+  if (templateType === "mobile-app") {
+    v.message(`  1. ${import_picocolors.default.dim(`cd apps/${targetDirName}`)}`);
+    v.message(`  2. ${import_picocolors.default.dim("cp .env.example .env")}`);
+    v.message(`  3. ${import_picocolors.default.dim("bun run dev")}`);
+  } else {
+    v.message(`  1. ${import_picocolors.default.dim(`cd apps/${targetDirName}`)}`);
+    v.message(`  2. ${import_picocolors.default.dim("cp .env.example .env.local")}`);
+    v.message(`  3. ${import_picocolors.default.dim("bun run dev")}`);
+  }
+  fe(import_picocolors.default.green("Happy building!"));
+}
+export {
+  findMonorepoRoot,
+  findNextPort,
+  readMonorepoConfig,
+  runAddCommand,
+  validateAppName
+};