@salmansaeed/nexa 1.0.0

package/bin/nexa.js

@@ -0,0 +1,1162 @@
+#!/usr/bin/env node
+
+/**
+ * File: bin/nexa.js
+ * Purpose: Main entrypoint for the Nexa CLI. This file parses commands and
+ * scaffolds apps, components, services, and contexts for React/Vite projects.
+ */
+
+import fs from "fs";
+import path from "path";
+import os from "os";
+import readline from "readline";
+import { fileURLToPath } from "url";
+import { execSync, spawn } from "child_process";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const args = process.argv.slice(2);
+
+/**
+ * Terminal colors for Nexa branding.
+ */
+const C = {
+  reset: "\x1b[0m",
+  cyan: "\x1b[36m",
+  yellow: "\x1b[33m",
+  green: "\x1b[32m",
+  blue: "\x1b[34m",
+  gray: "\x1b[90m",
+  bold: "\x1b[1m",
+};
+
+/**
+ * Purpose: Convert a string like "my-app" or "my_app" to PascalCase.
+ */
+function toPascalCase(str = "") {
+  return str
+    .trim()
+    .split(/[\s-_]+/)
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+}
+
+/**
+ * Purpose: Convert a string to kebab-case for folder/package names.
+ */
+function toKebabCase(str = "") {
+  return str
+    .trim()
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .split(/[\s_]+/)
+    .join("-")
+    .replace(/-+/g, "-")
+    .toLowerCase();
+}
+
+/**
+ * Purpose: Convert a string into a safe CSS class prefix.
+ */
+function toCssClassName(str = "") {
+  return toKebabCase(str).replace(/[^a-z0-9-]/g, "");
+}
+
+/**
+ * Purpose: Ensure parent directories exist before writing a file.
+ */
+function writeFileSafe(filePath, content) {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, content, "utf8");
+}
+
+/**
+ * Purpose: Recursively copy directories and files, skipping junk folders.
+ */
+function copyRecursive(src, dest) {
+  if (!fs.existsSync(src)) return;
+
+  const stat = fs.statSync(src);
+  const base = path.basename(src);
+
+  const IGNORE_DIRS = ["node_modules", ".git"];
+  const IGNORE_EXACT_FILES = [".DS_Store"];
+  const IGNORE_FILE_PREFIXES = [".env"];
+
+  if (stat.isDirectory()) {
+    if (IGNORE_DIRS.includes(base)) return;
+
+    fs.mkdirSync(dest, { recursive: true });
+
+    for (const item of fs.readdirSync(src)) {
+      copyRecursive(path.join(src, item), path.join(dest, item));
+    }
+  } else {
+    if (
+      IGNORE_EXACT_FILES.includes(base) ||
+      IGNORE_FILE_PREFIXES.some(
+        (prefix) => base === prefix || base.startsWith(`${prefix}.`),
+      )
+    ) {
+      return;
+    }
+
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.copyFileSync(src, dest);
+  }
+}
+
+/**
+ * Purpose: Make sure generator commands are run from the project root,
+ * not from inside src or any nested folder.
+ */
+function ensureProjectRootForGenerators() {
+  const cwd = process.cwd();
+  const normalized = path.normalize(cwd);
+  const parts = normalized.split(path.sep).filter(Boolean);
+
+  const packageJsonPath = path.join(cwd, "package.json");
+  const srcPath = path.join(cwd, "src");
+
+  const isInsideSrc =
+    parts[parts.length - 1] === "src" ||
+    normalized.includes(`${path.sep}src${path.sep}`);
+
+  if (isInsideSrc) {
+    console.error(
+      `${C.yellow}❌ Run Nexa generator commands from the project root, not from inside src.${C.reset}`,
+    );
+    console.error(
+      `${C.green}✅ Example: run 'nexa new gc MyComponent' from the app root.${C.reset}`,
+    );
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(packageJsonPath) || !fs.existsSync(srcPath)) {
+    console.error(
+      `${C.yellow}❌ Nexa generator commands must be run from the project root folder.${C.reset}`,
+    );
+    console.error(
+      `${C.green}✅ Expected to find both package.json and src/ in the current directory.${C.reset}`,
+    );
+    process.exit(1);
+  }
+}
+
+/**
+ * Purpose: Print usage help.
+ */
+function printUsage() {
+  console.log(`
+${C.cyan}${C.bold}Nexa CLI Usage${C.reset}
+${C.cyan}React Power.${C.reset}
+${C.yellow}Angular Simplicity.${C.reset}
+${C.green}Vite Speed.${C.reset}
+${C.blue}Cleaner UI.${C.reset}
+${C.gray}Prebuilt structure.${C.reset}
+
+Run generator commands from the project root folder, not from src.
+
+  nexa new app <app-name>
+  nexa new gc <name>
+  nexa new cc <name>
+  nexa new svc <name>
+  nexa new ctx <name>
+
+Convenience alias also supported:
+  nexa new <app-name>
+
+Examples:
+  nexa new app canna-core-420
+  nexa new canna-core-420
+  nexa new gc video-card
+  nexa new svc auth-service
+  nexa new ctx user-session
+`);
+}
+
+/**
+ * Purpose: Ask the user a yes/no question in the terminal.
+ */
+function askYesNo(question) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      const normalized = answer.trim().toLowerCase();
+      resolve(normalized === "y" || normalized === "yes");
+    });
+  });
+}
+
+/**
+ * Purpose: Open the browser to the local dev server URL.
+ */
+function openBrowser(url) {
+  const platform = os.platform();
+
+  if (platform === "darwin") {
+    const child = spawn("open", [url], {
+      stdio: "ignore",
+      detached: true,
+    });
+    child.unref();
+  } else if (platform === "win32") {
+    const child = spawn("cmd", ["/c", "start", "", url], {
+      stdio: "ignore",
+      detached: true,
+      shell: true,
+    });
+    child.unref();
+  } else {
+    const child = spawn("xdg-open", [url], {
+      stdio: "ignore",
+      detached: true,
+    });
+    child.unref();
+  }
+}
+
+/**
+ * Purpose: Start the generated app in dev mode.
+ */
+function startGeneratedApp(projectDir, shouldOpenBrowser) {
+  const command = os.platform() === "win32" ? "npm.cmd" : "npm";
+
+  const devProcess = spawn(command, ["run", "dev"], {
+    cwd: projectDir,
+    stdio: "inherit",
+    shell: os.platform() === "win32",
+  });
+
+  if (shouldOpenBrowser) {
+    setTimeout(() => {
+      openBrowser("http://localhost:4321");
+    }, 2500);
+  }
+
+  devProcess.on("close", (code) => {
+    console.log(
+      `\n${C.green}✅ Dev server stopped (exit code ${code ?? 0})${C.reset}`,
+    );
+  });
+}
+
+/**
+ * Purpose: Create a service file in src/services.
+ */
+function createService(serviceName) {
+  ensureProjectRootForGenerators();
+
+  const finalName = toPascalCase(serviceName);
+  const servicePath = path.join(
+    process.cwd(),
+    "src",
+    "services",
+    `${finalName}.js`,
+  );
+
+  const content = `/**
+ * File: src/services/${finalName}.js
+ * Purpose: Service module stub for ${finalName}.
+ */
+
+export default function ${finalName}() {
+  return null;
+}
+`;
+
+  writeFileSafe(servicePath, content);
+  console.log(
+    `${C.green}✅ Service created at src/services/${finalName}.js${C.reset}`,
+  );
+}
+
+/**
+ * Purpose: Create a context file in src/contexts.
+ */
+function createContext(contextName) {
+  ensureProjectRootForGenerators();
+
+  const finalName = toPascalCase(contextName);
+  const ctxPath = path.join(
+    process.cwd(),
+    "src",
+    "contexts",
+    `${finalName}.js`,
+  );
+
+  const content = `/**
+ * File: src/contexts/${finalName}.js
+ * Purpose: React context definition for ${finalName}.
+ */
+
+import { createContext } from "react";
+
+export const ${finalName} = createContext(null);
+`;
+
+  writeFileSafe(ctxPath, content);
+  console.log(
+    `${C.green}✅ Context created at src/contexts/${finalName}.js${C.reset}`,
+  );
+}
+
+/**
+ * Purpose: Create a component folder with JSX, child JSX, and CSS.
+ */
+
+function createComponent(componentName) {
+  ensureProjectRootForGenerators();
+
+  const finalName = toPascalCase(componentName);
+  const childName = `${finalName}JS`;
+  const kebabName = toKebabCase(componentName);
+  const routePath = `/${kebabName}`;
+
+  const componentDir = path.join(process.cwd(), "src", "components", finalName);
+  const routeMetaPath = path.join(
+    process.cwd(),
+    "src",
+    "config",
+    "routeMeta.js",
+  );
+
+  const jsxContent = `import React from "react";
+import "./${finalName}.css";
+import ${childName} from "./${childName}";
+
+const ${finalName} = () => {
+  return (
+    <section className="home-page">
+      <div className="nexa-intro">
+        <div className="nexa-logo-wrap">
+          <div className="nexa-logo-convex" />
+          <div className="nexa-logo-shine" />
+          <h1 className="nexa-logo">N</h1>
+        </div>
+
+        <h2 className="nexa-wordmark">${finalName}</h2>
+        <p className="nexa-tagline">Cleaner UI. Prebuilt structure.</p>
+        <p className="nexa-credit">
+          A product of <span>Conscious Neurons</span>
+        </p>
+
+        <p className="${kebabName}-note">
+          This component was created by Nexa.
+        </p>
+
+        <div className="${kebabName}-child">
+          <${childName} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ${finalName};
+`;
+
+  const childContent = `import React from "react";
+
+const ${childName} = () => {
+  return (
+    <div className="${kebabName}-child-inner">
+      <p>This is the ${childName} child component.</p>
+    </div>
+  );
+};
+
+export default ${childName};
+`;
+
+  const cssContent = `.home-page {
+  min-height: calc(100vh - 120px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.nexa-intro {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.nexa-logo-wrap {
+  position: relative;
+  width: 190px;
+  height: 190px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 20px;
+  border-radius: 40px;
+  background: radial-gradient(
+    circle at center,
+    rgba(62, 231, 255, 0.1),
+    rgba(255, 255, 255, 0.02)
+  );
+  box-shadow:
+    0 0 60px rgba(62, 231, 255, 0.1),
+    inset 0 0 30px rgba(255, 255, 255, 0.025);
+  overflow: hidden;
+}
+
+.nexa-logo-convex {
+  position: absolute;
+  inset: 10%;
+  border-radius: 28px;
+  background: radial-gradient(
+    circle at 35% 28%,
+    rgba(255, 255, 255, 0.16),
+    rgba(255, 255, 255, 0.04) 28%,
+    rgba(255, 255, 255, 0.01) 52%,
+    rgba(0, 0, 0, 0.04) 100%
+  );
+  box-shadow:
+    inset 0 2px 10px rgba(255, 255, 255, 0.06),
+    inset 0 -10px 18px rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+}
+
+.nexa-logo {
+  margin: 0;
+  font-size: 7rem;
+  line-height: 1;
+  font-weight: 800;
+  letter-spacing: -0.08em;
+  color: var(--nexa-primary);
+  text-shadow:
+    0 0 10px rgba(62, 231, 255, 0.28),
+    0 0 24px rgba(62, 231, 255, 0.14);
+  transform: scale(0.2);
+  opacity: 0;
+  filter: blur(14px);
+  animation: nexaReveal 1.2s ease-out forwards;
+}
+
+.nexa-logo-shine {
+  position: absolute;
+  inset: -40%;
+  background: linear-gradient(
+    110deg,
+    transparent 35%,
+    rgba(255, 255, 255, 0.04) 45%,
+    rgba(255, 255, 255, 0.35) 50%,
+    rgba(255, 255, 255, 0.04) 55%,
+    transparent 65%
+  );
+  transform: translateX(-140%) rotate(12deg);
+  animation: nexaShine 1.6s ease 0.65s forwards;
+  pointer-events: none;
+}
+
+.nexa-wordmark {
+  margin: 0 0 8px;
+  font-size: clamp(2.2rem, 5vw, 3.8rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  color: var(--nexa-text);
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeUp 0.7s ease 0.8s forwards;
+}
+
+.nexa-tagline {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--nexa-text-dim);
+  letter-spacing: 0.02em;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeUp 0.7s ease 1s forwards;
+}
+
+.nexa-credit {
+  margin-top: 10px;
+  font-size: 0.82rem;
+  color: var(--nexa-text-dim);
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeUp 0.7s ease 1.2s forwards;
+}
+
+.nexa-credit span {
+  color: var(--nexa-accent);
+  font-weight: 600;
+}
+
+.${kebabName}-note {
+  margin-top: 10px;
+  font-size: 0.9rem;
+  color: var(--nexa-text-dim);
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeUp 0.7s ease 1.35s forwards;
+}
+
+.${kebabName}-child {
+  margin-top: 14px;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeUp 0.7s ease 1.5s forwards;
+}
+
+.${kebabName}-child-inner {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.${kebabName}-child-inner p {
+  margin: 0;
+  color: var(--nexa-text-dim);
+}
+
+@keyframes nexaReveal {
+  0% {
+    transform: scale(0.2);
+    opacity: 0;
+    filter: blur(14px);
+  }
+  55% {
+    transform: scale(1.08);
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes nexaShine {
+  0% {
+    transform: translateX(-140%) rotate(12deg);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(140%) rotate(12deg);
+    opacity: 0;
+  }
+}
+
+@keyframes fadeUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .home-page {
+    min-height: calc(100vh - 100px);
+    padding: 16px;
+  }
+
+  .nexa-logo-wrap {
+    width: 160px;
+    height: 160px;
+    border-radius: 32px;
+  }
+
+  .nexa-logo-convex {
+    border-radius: 22px;
+  }
+
+  .nexa-logo {
+    font-size: 5.8rem;
+  }
+
+  .nexa-wordmark {
+    font-size: 2.3rem;
+  }
+
+  .nexa-tagline {
+    font-size: 0.92rem;
+  }
+}
+`;
+
+  writeFileSafe(path.join(componentDir, `${finalName}.jsx`), jsxContent);
+  writeFileSafe(path.join(componentDir, `${childName}.jsx`), childContent);
+  writeFileSafe(path.join(componentDir, `${finalName}.css`), cssContent);
+
+  if (fs.existsSync(routeMetaPath)) {
+    let routeMetaContent = fs.readFileSync(routeMetaPath, "utf8");
+
+    if (!routeMetaContent.includes(`"${routePath}"`)) {
+      const entry = `  "${routePath}": {
+    navLabel: "${finalName}",
+    title: "${finalName}",
+    subtitle: "Generated instantly by Nexa CLI",
+    tooltip: "This page was auto-generated by the Nexa CLI",
+    showInNav: true,
+  }`;
+
+      routeMetaContent = routeMetaContent.replace(
+        /(\s*)};\s*$/,
+        `,\n${entry}\n};`,
+      );
+
+      routeMetaContent = routeMetaContent.replace(/,\s*,/g, ",");
+
+      fs.writeFileSync(routeMetaPath, routeMetaContent, "utf8");
+      console.log(
+        `${C.blue}ℹ Added routeMeta entry for ${routePath}${C.reset}`,
+      );
+    }
+  } else {
+    console.log(
+      `${C.yellow}⚠ routeMeta.js not found. Component created, but route was not added.${C.reset}`,
+    );
+  }
+
+  const importPath = `./components/${finalName}/${finalName}`;
+
+  console.log(`
+${C.cyan}📌 Next Step:${C.reset}
+
+${C.yellow}1. Import your component in App.jsx:${C.reset}
+${C.gray}import ${finalName} from "${importPath}";${C.reset}
+
+${C.yellow}2. Add the route inside <Routes>:${C.reset}
+${C.gray}<Route path="${routePath}" element={<${finalName} />} />${C.reset}
+`);
+
+  console.log(
+    `${C.green}✅ Component '${finalName}' created at src/components/${finalName}${C.reset}`,
+  );
+}
+/**
+ * Purpose: Create a full app scaffold from the template folder and then
+ * patch key files with the correct app-specific values.
+ */
+async function createApp(rawAppName) {
+  const projectDirName = toKebabCase(rawAppName);
+  const displayName = toPascalCase(rawAppName);
+  const packageName = toKebabCase(rawAppName);
+
+  const root = process.cwd();
+  const projectDir = path.join(root, projectDirName);
+  const templateDir = path.join(__dirname, "../template");
+
+  if (!rawAppName) {
+    console.error(`${C.yellow}❌ Please provide an app name.${C.reset}`);
+    console.error(`${C.green}Example: nexa new app canna-core-420${C.reset}`);
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(templateDir)) {
+    console.error(`${C.yellow}❌ Template directory not found.${C.reset}`);
+    console.error(`${C.gray}Expected template at: ${templateDir}${C.reset}`);
+    process.exit(1);
+  }
+
+  if (fs.existsSync(projectDir)) {
+    console.error(
+      `${C.yellow}❌ Folder already exists: ${projectDirName}${C.reset}`,
+    );
+    process.exit(1);
+  }
+
+  fs.mkdirSync(projectDir, { recursive: true });
+
+  copyRecursive(templateDir, projectDir);
+
+  const gitignorePath = path.join(projectDir, ".gitignore");
+
+  if (!fs.existsSync(gitignorePath)) {
+    const gitignoreContent = `# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build output
+dist/
+build/
+
+# Environment variables
+.env
+.env.*
+!.env.example
+
+# Logs
+logs/
+*.log
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Editor / IDE
+.vscode/
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+# Temporary files
+tmp/
+temp/
+*.tmp
+
+# Coverage
+coverage/
+
+# Cache
+.cache/
+.parcel-cache/
+.vite/
+
+# Optional: lock files (keep if you want reproducible builds)
+# package-lock.json
+# yarn.lock
+
+# Misc
+*.tgz
+`;
+    writeFileSafe(gitignorePath, gitignoreContent);
+  }
+
+  const publicDir = path.join(projectDir, "public");
+  const srcDir = path.join(projectDir, "src");
+
+  fs.mkdirSync(publicDir, { recursive: true });
+  fs.mkdirSync(srcDir, { recursive: true });
+
+  const publicIndexPath = path.join(publicDir, "index.html");
+  const rootIndexPath = path.join(projectDir, "index.html");
+
+  if (fs.existsSync(publicIndexPath)) {
+    const templateIndex = fs.readFileSync(publicIndexPath, "utf8");
+    const patchedIndex = templateIndex
+      .replace(/<title>.*?<\/title>/i, `<title>${displayName}</title>`)
+      .replace(/src=["']\.\/src\/main\.jsx["']/i, 'src="/src/main.jsx"')
+      .replace(/src=["']src\/main\.jsx["']/i, 'src="/src/main.jsx"');
+
+    writeFileSafe(rootIndexPath, patchedIndex);
+    fs.unlinkSync(publicIndexPath);
+  } else if (!fs.existsSync(rootIndexPath)) {
+    const indexHtmlContent = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- File: index.html -->
+    <!-- Purpose: Root HTML document for the generated Vite application. -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>${displayName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+`;
+    writeFileSafe(rootIndexPath, indexHtmlContent);
+  }
+
+  const manifestPath = path.join(publicDir, "manifest.json");
+  const manifestContent = `{
+  "name": "${displayName}",
+  "short_name": "${displayName}",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#0a0f24",
+  "theme_color": "#ffd700"
+}
+`;
+  writeFileSafe(manifestPath, manifestContent);
+
+  const generatedPkg = {
+    name: packageName,
+    version: "1.0.0",
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "node run.js",
+      start: "node run.js",
+      nexa: "node run.js",
+      build: "vite build",
+      preview: "vite preview",
+    },
+    dependencies: {
+      react: "^18.3.1",
+      "react-dom": "^18.3.1",
+      "react-router-dom": "^6.15.0",
+    },
+    devDependencies: {
+      vite: "^7.2.7",
+      "@vitejs/plugin-react": "^4.3.3",
+    },
+  };
+
+  writeFileSafe(
+    path.join(projectDir, "package.json"),
+    `${JSON.stringify(generatedPkg, null, 2)}\n`,
+  );
+
+  const mainJsxPath = path.join(srcDir, "main.jsx");
+  if (!fs.existsSync(mainJsxPath)) {
+    const mainJsxContent = `/**
+ * File: src/main.jsx
+ * Purpose: Entry point for the React application. Mounts App into the root DOM node.
+ */
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+`;
+    writeFileSafe(mainJsxPath, mainJsxContent);
+  }
+
+  const appJsxPath = path.join(srcDir, "App.jsx");
+  if (!fs.existsSync(appJsxPath)) {
+    const appJsxContent = `/**
+ * File: src/App.jsx
+ * Purpose: Main root component for the generated Nexa application.
+ */
+
+import React from "react";
+import "./App.css";
+
+const App = () => {
+  return (
+    <div className="app-container">
+      <h1>Welcome to ${displayName}</h1>
+      <p>Your Nexa app is ready.</p>
+      <p>React Power. Angular Simplicity. Vite Speed.</p>
+      <p>Cleaner UI. Prebuilt structure.</p>
+      <p>
+        Powered by{" "}
+        <a
+          href="https://consciousneurons.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Conscious Neurons LLC
+        </a>
+        {" "} | Sponsored by{" "}
+        <a
+          href="https://albagoldsystems.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Alba Gold
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default App;
+`;
+    writeFileSafe(appJsxPath, appJsxContent);
+  }
+
+  const appCssPath = path.join(srcDir, "App.css");
+  if (!fs.existsSync(appCssPath)) {
+    const appCssContent = `/**
+ * File: src/App.css
+ * Purpose: Base styling for the generated Nexa application shell.
+ */
+
+body {
+  margin: 0;
+  font-family: Inter, sans-serif;
+  background-color: #0a0f24;
+  color: #f8f9fc;
+}
+
+a {
+  color: #ffd700;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.app-container {
+  display: flex;
+  min-height: 100vh;
+  padding: 32px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+`;
+    writeFileSafe(appCssPath, appCssContent);
+  }
+
+  const runJsPath = path.join(projectDir, "run.js");
+  if (!fs.existsSync(runJsPath)) {
+    const runJsContent = `#!/usr/bin/env node
+
+/**
+ * File: run.js
+ * Purpose: Launches the Nexa app using Vite with custom config.
+ */
+
+import { spawn } from "child_process";
+import path from "path";
+import os from "os";
+import fs from "fs";
+
+const C = {
+  reset: "\\x1b[0m",
+  cyan: "\\x1b[36m",
+  yellow: "\\x1b[33m",
+  green: "\\x1b[32m",
+  blue: "\\x1b[34m",
+  gray: "\\x1b[90m",
+  bold: "\\x1b[1m",
+};
+
+console.log(\`
+\${C.cyan}\${C.bold}🚀 Nexa CLI\${C.reset} - Powered by Conscious Neurons LLC
+\${C.gray}https://consciousneurons.com\${C.reset}
+Built by Salman Saeed
+
+\${C.yellow}Cleaner UI. Prebuilt structure.\${C.reset}
+\${C.gray}Everything important is already in place.\${C.reset}
+
+\${C.green}🔹 Starting your Nexa App...\${C.reset}
+\${C.cyan}🔹 React Power.\${C.reset}
+\${C.yellow}🔹 Angular Simplicity.\${C.reset}
+\${C.blue}🔹 Vite Speed.\${C.reset}
+\${C.green}🔹 Cleaner UI.\${C.reset}
+\${C.gray}🔹 Prebuilt structure.${C.reset}
+
+\${C.cyan}███╗   ██╗███████╗██╗  ██╗ █████╗\${C.reset}
+\${C.cyan}████╗  ██║██╔════╝╚██╗██╔╝██╔══██╗\${C.reset}
+\${C.cyan}██╔██╗ ██║█████╗   ╚███╔╝ ███████║\${C.reset}
+\${C.cyan}██║╚██╗██║██╔══╝   ██╔██╗ ██╔══██║\${C.reset}
+\${C.cyan}██║ ╚████║███████╗██╔╝ ██╗██║  ██║\${C.reset}
+\${C.cyan}╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝\${C.reset}
+
+\${C.gray}by https://salmansaeed.us\${C.reset}
+\`);
+
+const configPath = path.resolve("./nexa.config.js");
+const hasConfig = fs.existsSync(configPath);
+
+const command = os.platform() === "win32" ? "npx.cmd" : "npx";
+const viteArgs = ["vite"];
+
+if (hasConfig) {
+  viteArgs.push("--config", configPath);
+}
+
+const vite = spawn(command, viteArgs, {
+  stdio: "pipe",
+  shell: os.platform() === "win32",
+});
+
+vite.stdout.on("data", (data) => {
+  const str = data.toString();
+  if (!str.includes("VITE")) {
+    console.log(str);
+  }
+});
+
+vite.stderr.on("data", (data) => {
+  process.stderr.write(data);
+});
+
+vite.on("close", (code) => {
+  console.log(\`\\n\${C.green}✅ Nexa App stopped (exit code \${code ?? 0})\${C.reset}\`);
+  process.exit(code ?? 0);
+});
+`;
+    writeFileSafe(runJsPath, runJsContent);
+  }
+
+  const nexaConfigPath = path.join(projectDir, "nexa.config.js");
+  if (!fs.existsSync(nexaConfigPath)) {
+    const nexaConfigContent = `/**
+ * File: nexa.config.js
+ * Purpose: Vite configuration for Nexa-generated apps.
+ */
+
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  root: ".",
+  base: "/",
+  plugins: [react()],
+  server: {
+    port: 4321,
+  },
+  build: {
+    outDir: "dist",
+  },
+  clearScreen: false,
+});
+`;
+    writeFileSafe(nexaConfigPath, nexaConfigContent);
+  }
+
+  console.log(`\n${C.blue}📦 Installing dependencies...${C.reset}`);
+  let installSucceeded = false;
+
+  try {
+    execSync("npm install", { stdio: "inherit", cwd: projectDir });
+    installSucceeded = true;
+    console.log(`${C.green}✅ Dependencies installed successfully!${C.reset}`);
+  } catch {
+    console.error(
+      `${C.yellow}❌ Failed to install dependencies. Run 'npm install' manually.${C.reset}`,
+    );
+  }
+
+  console.log(`\n${C.green}🎉 Project created successfully!${C.reset}`);
+  console.log(`${C.cyan}React Power.${C.reset}`);
+  console.log(`${C.yellow}Angular Simplicity.${C.reset}`);
+  console.log(`${C.green}Vite Speed.${C.reset}`);
+  console.log(`${C.blue}Cleaner UI.${C.reset}`);
+  console.log(`${C.gray}Prebuilt structure.${C.reset}`);
+  console.log(`${C.gray}cd ${projectDirName}${C.reset}`);
+  console.log(`${C.gray}npm run dev${C.reset}`);
+  console.log(`${C.gray}npm run build${C.reset}`);
+  console.log(`${C.gray}npm run preview${C.reset}`);
+
+  if (installSucceeded) {
+    const shouldStart = await askYesNo(
+      `\n${C.green}🚀 Auto start the app now? (y/n): ${C.reset}`,
+    );
+
+    if (shouldStart) {
+      const shouldOpen = await askYesNo(
+        `${C.blue}🌐 Open in browser automatically? (y/n): ${C.reset}`,
+      );
+
+      console.log(
+        `\n${C.green}▶️ Starting app in ${projectDirName}...${C.reset}\n`,
+      );
+      startGeneratedApp(projectDir, shouldOpen);
+    }
+  }
+}
+
+/**
+ * Purpose: Parse command arguments and support:
+ *   nexa new app my-app
+ *   nexa new my-app
+ *   nexa app my-app
+ */
+function parseArgs(argv) {
+  const first = argv[0];
+  const second = argv[1];
+  const third = argv[2];
+
+  if (!first) {
+    printUsage();
+    process.exit(1);
+  }
+
+  if (first === "new" && ["app", "gc", "cc", "svc", "ctx"].includes(second)) {
+    return {
+      shortcut: second,
+      name: third,
+    };
+  }
+
+  if (
+    first === "new" &&
+    second &&
+    !["app", "gc", "cc", "svc", "ctx"].includes(second)
+  ) {
+    return {
+      shortcut: "app",
+      name: second,
+    };
+  }
+
+  if (["app", "gc", "cc", "svc", "ctx"].includes(first)) {
+    return {
+      shortcut: first,
+      name: second,
+    };
+  }
+
+  printUsage();
+  process.exit(1);
+}
+
+const { shortcut, name } = parseArgs(args);
+
+async function main() {
+  switch (shortcut) {
+    case "svc":
+      if (!name) {
+        console.error(`${C.yellow}❌ Please provide a service name.${C.reset}`);
+        process.exit(1);
+      }
+      createService(name);
+      break;
+
+    case "ctx":
+      if (!name) {
+        console.error(`${C.yellow}❌ Please provide a context name.${C.reset}`);
+        process.exit(1);
+      }
+      createContext(name);
+      break;
+
+    case "gc":
+    case "cc":
+      if (!name) {
+        console.error(
+          `${C.yellow}❌ Please provide a component name.${C.reset}`,
+        );
+        process.exit(1);
+      }
+      createComponent(name);
+      break;
+
+    case "app":
+      if (!name) {
+        console.error(`${C.yellow}❌ Please provide an app name.${C.reset}`);
+        process.exit(1);
+      }
+      await createApp(name);
+      break;
+
+    default:
+      console.error(`${C.yellow}❌ Unknown shortcut.${C.reset}`);
+      printUsage();
+      process.exit(1);
+  }
+}
+
+main().catch((err) => {
+  console.error(`${C.yellow}❌ Unexpected error:${C.reset}`, err);
+  process.exit(1);
+});