@valbuild/create 0.81.0

package/.babelrc.json

@@ -0,0 +1,5 @@
+{
+  "targets": {
+    "node": 16
+  }
+}

package/README.md

@@ -0,0 +1,52 @@
+# @valbuild/create
+
+Bootstrap a Val project from the cli.
+
+## Usage
+
+```sh
+npm create @valbuild@latest
+# or with a project name
+npm create @valbuild@latest my-val-app
+```
+
+You'll be prompted to select a template (e.g. "starter" or "minimal").
+
+## Options
+
+- `-h`, `--help` Show help
+- `-v`, `--version` Show version
+- `--root <path>` Specify the root directory for project creation (default: current directory)
+
+## Templates
+
+- **starter**: Full-featured Next.js app with Val, TypeScript, Tailwind CSS, and examples
+- **minimal**: Minimal Next.js app with Val and TypeScript
+
+## Adding More Templates
+
+To add more templates:
+
+1. **Create a new public GitHub repo** under the `valbuild` org (e.g. `valbuild/template-nextjs-ecommerce`).
+2. Add your template code to that repo.
+3. In this CLI, open `src/index.ts` and add your template to the `TEMPLATES` array:
+
+```ts
+{
+  name: "ecommerce",
+  description: "E-commerce starter with Val and Next.js",
+  repo: "valbuild/template-nextjs-ecommerce"
+}
+```
+
+4. (Optional) Publish your template repo with a clear README and keep it up to date.
+
+## Contributing
+
+- PRs for new templates, bugfixes, or UX improvements are welcome!
+- Please keep template names and descriptions clear and future-proof.
+- For major changes, open an issue to discuss your idea first.
+
+## License
+
+MIT

package/bin.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+"use strict";
+require("./create");

package/dist/declarations/src/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/valbuild-create.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsYnVpbGQtY3JlYXRlLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

package/dist/valbuild-create.cjs.dev.js

@@ -0,0 +1,232 @@
+'use strict';
+
+var child_process = require('child_process');
+var fs = require('fs');
+var path = require('path');
+var degit = require('degit');
+var prompts = require('@inquirer/prompts');
+var chalk = require('chalk');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var degit__default = /*#__PURE__*/_interopDefault(degit);
+var chalk__default = /*#__PURE__*/_interopDefault(chalk);
+
+const PKG = {
+  name: "@valbuild/create",
+  version: "0.1.0"
+};
+const TEMPLATES = [{
+  name: "starter",
+  description: "Full-featured Next.js app with Val, TypeScript, Tailwind CSS, and examples",
+  repo: "valbuild/template-nextjs-starter",
+  default: true
+}];
+const DEFAULT_PROJECT_NAME = "my-val-app";
+function printHelp() {
+  console.log(`
+${chalk__default["default"].bold("Usage:")}
+  ${chalk__default["default"].cyan("npm create @valbuild [project-name]")}
+
+${chalk__default["default"].bold("Options:")}
+  -h, --help Show help
+  -v, --version Show version
+  --root <path> Specify the root directory for project creation (default: current directory)
+`);
+}
+function printVersion() {
+  console.log(`${PKG.name} v${PKG.version}`);
+}
+function handleExit() {
+  console.log(chalk__default["default"].yellow("\nAborted."));
+  process.exit(0);
+}
+process.on("SIGINT", handleExit);
+
+// Timeline stepper logic
+const timelineSteps = ["Enter project name", "Download template", "Install dependencies", "Complete!"];
+function renderTimeline(currentStep, errorStep) {
+  const icons = {
+    pending: chalk__default["default"].gray("◯"),
+    active: chalk__default["default"].cyan("◉"),
+    done: chalk__default["default"].green("✔"),
+    error: chalk__default["default"].red("✖")
+  };
+  let out = "\n";
+  for (let i = 0; i < timelineSteps.length; i++) {
+    let status = "pending";
+    if (errorStep !== undefined && i === errorStep) status = "error";else if (i < currentStep) status = "done";else if (i === currentStep) status = "active";
+    const icon = icons[status];
+    out += `  ${icon} ${timelineSteps[i]}\n`;
+    if (i < timelineSteps.length - 1) out += `  ${chalk__default["default"].gray("│")}\n`;
+  }
+  process.stdout.write("\x1b[2J\x1b[0f"); // clear screen
+  displayValLogo();
+  process.stdout.write(out + "\n");
+}
+function displayValLogo() {
+  const logo = chalk__default["default"].cyan(`
+###########
+###########
+###########                           @@@@
+###########                             @@
+###########    @@      @@  @@@@@@ @     @@
+###########     @@    @@  @@     @@     @@
+###########     @@    @@ %@       @     @@
+####  #####      @@  @@  .@      .@     @@
+###    ####       @@@@    @@:   @@@.    @@
+####  #####       @@@@      @@@@  =@@@@@@@@@
+###########
+`);
+  process.stdout.write(logo);
+}
+function displaySuccessMessage(projectName) {
+  const nextSteps = chalk__default["default"].bold(`
+${chalk__default["default"].cyan("Next steps:")}
+  ${chalk__default["default"].cyan("cd")} ${chalk__default["default"].white(projectName)}
+  ${chalk__default["default"].cyan("npm run dev")}
+
+${chalk__default["default"].green("Happy coding! 🚀")}
+`);
+  process.stdout.write(nextSteps);
+}
+
+// Template processing function
+function processTemplateFiles(projectPath, projectName) {
+  const filesToProcess = ["package.json", "README.md", "next.config.js", "val.config.ts", "val.config.js"];
+  filesToProcess.forEach(filename => {
+    const filePath = path.join(projectPath, filename);
+    if (fs.existsSync(filePath)) {
+      try {
+        let content = fs.readFileSync(filePath, "utf-8");
+        // Replace both {{PROJECT_NAME}} and {{projectName}} placeholders
+        content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+        content = content.replace(/\{\{projectName\}\}/g, projectName);
+        fs.writeFileSync(filePath, content, "utf-8");
+      } catch (error) {
+        // Silently continue if file can't be processed
+        console.log(chalk__default["default"].dim(`Note: Could not process ${filename}`));
+      }
+    }
+  });
+}
+async function main() {
+  try {
+    console.log("here");
+    const args = process.argv.slice(2);
+    if (args.includes("-h") || args.includes("--help")) {
+      printHelp();
+      process.exit(0);
+    }
+    if (args.includes("-v") || args.includes("--version")) {
+      printVersion();
+      process.exit(0);
+    }
+
+    // Parse --root option
+    const rootIndex = args.findIndex(a => a === "--root");
+    let rootDir = process.cwd();
+    if (rootIndex !== -1 && args[rootIndex + 1]) {
+      rootDir = args[rootIndex + 1];
+      // Remove --root and its value from args for project name parsing
+      args.splice(rootIndex, 2);
+    }
+    let currentStep = 0;
+    renderTimeline(currentStep);
+
+    // Step 1: Enter project name
+    const projectName = await prompts.input({
+      message: chalk__default["default"].bold("What is your project named?"),
+      default: DEFAULT_PROJECT_NAME,
+      validate: value => {
+        if (!value || value.trim().length === 0) {
+          return "Project name cannot be empty";
+        }
+        if (value.includes(" ")) {
+          return "Project name cannot contain spaces";
+        }
+        if (!/^[a-zA-Z0-9-_]+$/.test(value)) {
+          return "Project name can only contain letters, numbers, hyphens, and underscores";
+        }
+        return true;
+      }
+    });
+    currentStep++;
+    renderTimeline(currentStep);
+
+    // Step 2: Select template
+    const selectedTemplate = TEMPLATES[0];
+    currentStep++;
+    renderTimeline(currentStep);
+
+    // Step 3: Download template
+    const projectPath = path.join(rootDir, projectName);
+    if (fs.existsSync(projectPath)) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk__default["default"].red(`❌ Error: Directory "${projectName}" already exists.`));
+      console.error(chalk__default["default"].yellow("Please choose a different name or remove the existing directory."));
+      process.exit(1);
+    }
+    fs.mkdirSync(projectPath, {
+      recursive: true
+    });
+    process.stdout.write(chalk__default["default"].bold("\n📥 Downloading template from GitHub...\n") + `  ${chalk__default["default"].dim(`https://github.com/${selectedTemplate.repo}`)}\n`);
+    try {
+      const emitter = degit__default["default"](selectedTemplate.repo, {
+        cache: false,
+        force: true,
+        verbose: false
+      });
+      await emitter.clone(projectPath);
+    } catch (error) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk__default["default"].red("❌ Failed to download template:"));
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      if (errorMessage.includes("rate limit") || errorMessage.includes("403")) {
+        console.error(chalk__default["default"].yellow("GitHub rate limit exceeded. Please try again later or authenticate with GitHub."));
+      } else if (errorMessage.includes("not found") || errorMessage.includes("404")) {
+        console.error(chalk__default["default"].yellow(`Template repository not found: ${selectedTemplate.repo}`));
+        console.error(chalk__default["default"].yellow("Please check if the repository exists and is public."));
+      } else {
+        console.error(chalk__default["default"].yellow("Network error. Please check your internet connection."));
+      }
+      console.error(chalk__default["default"].dim("Error details:"), errorMessage);
+      process.exit(1);
+    }
+    currentStep++;
+    renderTimeline(currentStep);
+    process.stdout.write(chalk__default["default"].green(`✅ Successfully downloaded template from ${selectedTemplate.repo}!\n`));
+
+    // Process template files
+    processTemplateFiles(projectPath, projectName);
+
+    // Change to project directory and install dependencies
+    process.stdout.write(chalk__default["default"].bold("\n📦 Installing dependencies...\n"));
+    try {
+      child_process.execSync("npm install", {
+        cwd: projectPath,
+        stdio: "inherit" // Show npm output in real-time
+      });
+
+      // Clear the npm output and show success
+      process.stdout.write("\x1b[2J\x1b[0f"); // clear screen
+      displayValLogo();
+      currentStep++;
+      renderTimeline(currentStep);
+      process.stdout.write(chalk__default["default"].green(`✅ Successfully downloaded template from ${selectedTemplate.repo}!\n`));
+      process.stdout.write(chalk__default["default"].green("\n✅ Dependencies installed successfully!\n"));
+
+      // Show final success message
+      displaySuccessMessage(projectName);
+    } catch (error) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk__default["default"].red('❌ Failed to install dependencies. You can try running "npm install" manually.'));
+      console.error("Error:", error);
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(chalk__default["default"].red("❌ Failed to create project:"), error);
+    process.exit(1);
+  }
+}
+main();

package/dist/valbuild-create.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./valbuild-create.cjs.prod.js");
+} else {
+  module.exports = require("./valbuild-create.cjs.dev.js");
+}

package/dist/valbuild-create.cjs.prod.js

@@ -0,0 +1,232 @@
+'use strict';
+
+var child_process = require('child_process');
+var fs = require('fs');
+var path = require('path');
+var degit = require('degit');
+var prompts = require('@inquirer/prompts');
+var chalk = require('chalk');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var degit__default = /*#__PURE__*/_interopDefault(degit);
+var chalk__default = /*#__PURE__*/_interopDefault(chalk);
+
+const PKG = {
+  name: "@valbuild/create",
+  version: "0.1.0"
+};
+const TEMPLATES = [{
+  name: "starter",
+  description: "Full-featured Next.js app with Val, TypeScript, Tailwind CSS, and examples",
+  repo: "valbuild/template-nextjs-starter",
+  default: true
+}];
+const DEFAULT_PROJECT_NAME = "my-val-app";
+function printHelp() {
+  console.log(`
+${chalk__default["default"].bold("Usage:")}
+  ${chalk__default["default"].cyan("npm create @valbuild [project-name]")}
+
+${chalk__default["default"].bold("Options:")}
+  -h, --help Show help
+  -v, --version Show version
+  --root <path> Specify the root directory for project creation (default: current directory)
+`);
+}
+function printVersion() {
+  console.log(`${PKG.name} v${PKG.version}`);
+}
+function handleExit() {
+  console.log(chalk__default["default"].yellow("\nAborted."));
+  process.exit(0);
+}
+process.on("SIGINT", handleExit);
+
+// Timeline stepper logic
+const timelineSteps = ["Enter project name", "Download template", "Install dependencies", "Complete!"];
+function renderTimeline(currentStep, errorStep) {
+  const icons = {
+    pending: chalk__default["default"].gray("◯"),
+    active: chalk__default["default"].cyan("◉"),
+    done: chalk__default["default"].green("✔"),
+    error: chalk__default["default"].red("✖")
+  };
+  let out = "\n";
+  for (let i = 0; i < timelineSteps.length; i++) {
+    let status = "pending";
+    if (errorStep !== undefined && i === errorStep) status = "error";else if (i < currentStep) status = "done";else if (i === currentStep) status = "active";
+    const icon = icons[status];
+    out += `  ${icon} ${timelineSteps[i]}\n`;
+    if (i < timelineSteps.length - 1) out += `  ${chalk__default["default"].gray("│")}\n`;
+  }
+  process.stdout.write("\x1b[2J\x1b[0f"); // clear screen
+  displayValLogo();
+  process.stdout.write(out + "\n");
+}
+function displayValLogo() {
+  const logo = chalk__default["default"].cyan(`
+###########
+###########
+###########                           @@@@
+###########                             @@
+###########    @@      @@  @@@@@@ @     @@
+###########     @@    @@  @@     @@     @@
+###########     @@    @@ %@       @     @@
+####  #####      @@  @@  .@      .@     @@
+###    ####       @@@@    @@:   @@@.    @@
+####  #####       @@@@      @@@@  =@@@@@@@@@
+###########
+`);
+  process.stdout.write(logo);
+}
+function displaySuccessMessage(projectName) {
+  const nextSteps = chalk__default["default"].bold(`
+${chalk__default["default"].cyan("Next steps:")}
+  ${chalk__default["default"].cyan("cd")} ${chalk__default["default"].white(projectName)}
+  ${chalk__default["default"].cyan("npm run dev")}
+
+${chalk__default["default"].green("Happy coding! 🚀")}
+`);
+  process.stdout.write(nextSteps);
+}
+
+// Template processing function
+function processTemplateFiles(projectPath, projectName) {
+  const filesToProcess = ["package.json", "README.md", "next.config.js", "val.config.ts", "val.config.js"];
+  filesToProcess.forEach(filename => {
+    const filePath = path.join(projectPath, filename);
+    if (fs.existsSync(filePath)) {
+      try {
+        let content = fs.readFileSync(filePath, "utf-8");
+        // Replace both {{PROJECT_NAME}} and {{projectName}} placeholders
+        content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+        content = content.replace(/\{\{projectName\}\}/g, projectName);
+        fs.writeFileSync(filePath, content, "utf-8");
+      } catch (error) {
+        // Silently continue if file can't be processed
+        console.log(chalk__default["default"].dim(`Note: Could not process ${filename}`));
+      }
+    }
+  });
+}
+async function main() {
+  try {
+    console.log("here");
+    const args = process.argv.slice(2);
+    if (args.includes("-h") || args.includes("--help")) {
+      printHelp();
+      process.exit(0);
+    }
+    if (args.includes("-v") || args.includes("--version")) {
+      printVersion();
+      process.exit(0);
+    }
+
+    // Parse --root option
+    const rootIndex = args.findIndex(a => a === "--root");
+    let rootDir = process.cwd();
+    if (rootIndex !== -1 && args[rootIndex + 1]) {
+      rootDir = args[rootIndex + 1];
+      // Remove --root and its value from args for project name parsing
+      args.splice(rootIndex, 2);
+    }
+    let currentStep = 0;
+    renderTimeline(currentStep);
+
+    // Step 1: Enter project name
+    const projectName = await prompts.input({
+      message: chalk__default["default"].bold("What is your project named?"),
+      default: DEFAULT_PROJECT_NAME,
+      validate: value => {
+        if (!value || value.trim().length === 0) {
+          return "Project name cannot be empty";
+        }
+        if (value.includes(" ")) {
+          return "Project name cannot contain spaces";
+        }
+        if (!/^[a-zA-Z0-9-_]+$/.test(value)) {
+          return "Project name can only contain letters, numbers, hyphens, and underscores";
+        }
+        return true;
+      }
+    });
+    currentStep++;
+    renderTimeline(currentStep);
+
+    // Step 2: Select template
+    const selectedTemplate = TEMPLATES[0];
+    currentStep++;
+    renderTimeline(currentStep);
+
+    // Step 3: Download template
+    const projectPath = path.join(rootDir, projectName);
+    if (fs.existsSync(projectPath)) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk__default["default"].red(`❌ Error: Directory "${projectName}" already exists.`));
+      console.error(chalk__default["default"].yellow("Please choose a different name or remove the existing directory."));
+      process.exit(1);
+    }
+    fs.mkdirSync(projectPath, {
+      recursive: true
+    });
+    process.stdout.write(chalk__default["default"].bold("\n📥 Downloading template from GitHub...\n") + `  ${chalk__default["default"].dim(`https://github.com/${selectedTemplate.repo}`)}\n`);
+    try {
+      const emitter = degit__default["default"](selectedTemplate.repo, {
+        cache: false,
+        force: true,
+        verbose: false
+      });
+      await emitter.clone(projectPath);
+    } catch (error) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk__default["default"].red("❌ Failed to download template:"));
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      if (errorMessage.includes("rate limit") || errorMessage.includes("403")) {
+        console.error(chalk__default["default"].yellow("GitHub rate limit exceeded. Please try again later or authenticate with GitHub."));
+      } else if (errorMessage.includes("not found") || errorMessage.includes("404")) {
+        console.error(chalk__default["default"].yellow(`Template repository not found: ${selectedTemplate.repo}`));
+        console.error(chalk__default["default"].yellow("Please check if the repository exists and is public."));
+      } else {
+        console.error(chalk__default["default"].yellow("Network error. Please check your internet connection."));
+      }
+      console.error(chalk__default["default"].dim("Error details:"), errorMessage);
+      process.exit(1);
+    }
+    currentStep++;
+    renderTimeline(currentStep);
+    process.stdout.write(chalk__default["default"].green(`✅ Successfully downloaded template from ${selectedTemplate.repo}!\n`));
+
+    // Process template files
+    processTemplateFiles(projectPath, projectName);
+
+    // Change to project directory and install dependencies
+    process.stdout.write(chalk__default["default"].bold("\n📦 Installing dependencies...\n"));
+    try {
+      child_process.execSync("npm install", {
+        cwd: projectPath,
+        stdio: "inherit" // Show npm output in real-time
+      });
+
+      // Clear the npm output and show success
+      process.stdout.write("\x1b[2J\x1b[0f"); // clear screen
+      displayValLogo();
+      currentStep++;
+      renderTimeline(currentStep);
+      process.stdout.write(chalk__default["default"].green(`✅ Successfully downloaded template from ${selectedTemplate.repo}!\n`));
+      process.stdout.write(chalk__default["default"].green("\n✅ Dependencies installed successfully!\n"));
+
+      // Show final success message
+      displaySuccessMessage(projectName);
+    } catch (error) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk__default["default"].red('❌ Failed to install dependencies. You can try running "npm install" manually.'));
+      console.error("Error:", error);
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(chalk__default["default"].red("❌ Failed to create project:"), error);
+    process.exit(1);
+  }
+}
+main();

package/dist/valbuild-create.esm.js

@@ -0,0 +1,225 @@
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import degit from 'degit';
+import { input } from '@inquirer/prompts';
+import chalk from 'chalk';
+
+const PKG = {
+  name: "@valbuild/create",
+  version: "0.1.0"
+};
+const TEMPLATES = [{
+  name: "starter",
+  description: "Full-featured Next.js app with Val, TypeScript, Tailwind CSS, and examples",
+  repo: "valbuild/template-nextjs-starter",
+  default: true
+}];
+const DEFAULT_PROJECT_NAME = "my-val-app";
+function printHelp() {
+  console.log(`
+${chalk.bold("Usage:")}
+  ${chalk.cyan("npm create @valbuild [project-name]")}
+
+${chalk.bold("Options:")}
+  -h, --help Show help
+  -v, --version Show version
+  --root <path> Specify the root directory for project creation (default: current directory)
+`);
+}
+function printVersion() {
+  console.log(`${PKG.name} v${PKG.version}`);
+}
+function handleExit() {
+  console.log(chalk.yellow("\nAborted."));
+  process.exit(0);
+}
+process.on("SIGINT", handleExit);
+
+// Timeline stepper logic
+const timelineSteps = ["Enter project name", "Download template", "Install dependencies", "Complete!"];
+function renderTimeline(currentStep, errorStep) {
+  const icons = {
+    pending: chalk.gray("◯"),
+    active: chalk.cyan("◉"),
+    done: chalk.green("✔"),
+    error: chalk.red("✖")
+  };
+  let out = "\n";
+  for (let i = 0; i < timelineSteps.length; i++) {
+    let status = "pending";
+    if (errorStep !== undefined && i === errorStep) status = "error";else if (i < currentStep) status = "done";else if (i === currentStep) status = "active";
+    const icon = icons[status];
+    out += `  ${icon} ${timelineSteps[i]}\n`;
+    if (i < timelineSteps.length - 1) out += `  ${chalk.gray("│")}\n`;
+  }
+  process.stdout.write("\x1b[2J\x1b[0f"); // clear screen
+  displayValLogo();
+  process.stdout.write(out + "\n");
+}
+function displayValLogo() {
+  const logo = chalk.cyan(`
+###########
+###########
+###########                           @@@@
+###########                             @@
+###########    @@      @@  @@@@@@ @     @@
+###########     @@    @@  @@     @@     @@
+###########     @@    @@ %@       @     @@
+####  #####      @@  @@  .@      .@     @@
+###    ####       @@@@    @@:   @@@.    @@
+####  #####       @@@@      @@@@  =@@@@@@@@@
+###########
+`);
+  process.stdout.write(logo);
+}
+function displaySuccessMessage(projectName) {
+  const nextSteps = chalk.bold(`
+${chalk.cyan("Next steps:")}
+  ${chalk.cyan("cd")} ${chalk.white(projectName)}
+  ${chalk.cyan("npm run dev")}
+
+${chalk.green("Happy coding! 🚀")}
+`);
+  process.stdout.write(nextSteps);
+}
+
+// Template processing function
+function processTemplateFiles(projectPath, projectName) {
+  const filesToProcess = ["package.json", "README.md", "next.config.js", "val.config.ts", "val.config.js"];
+  filesToProcess.forEach(filename => {
+    const filePath = join(projectPath, filename);
+    if (existsSync(filePath)) {
+      try {
+        let content = readFileSync(filePath, "utf-8");
+        // Replace both {{PROJECT_NAME}} and {{projectName}} placeholders
+        content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+        content = content.replace(/\{\{projectName\}\}/g, projectName);
+        writeFileSync(filePath, content, "utf-8");
+      } catch (error) {
+        // Silently continue if file can't be processed
+        console.log(chalk.dim(`Note: Could not process ${filename}`));
+      }
+    }
+  });
+}
+async function main() {
+  try {
+    console.log("here");
+    const args = process.argv.slice(2);
+    if (args.includes("-h") || args.includes("--help")) {
+      printHelp();
+      process.exit(0);
+    }
+    if (args.includes("-v") || args.includes("--version")) {
+      printVersion();
+      process.exit(0);
+    }
+
+    // Parse --root option
+    const rootIndex = args.findIndex(a => a === "--root");
+    let rootDir = process.cwd();
+    if (rootIndex !== -1 && args[rootIndex + 1]) {
+      rootDir = args[rootIndex + 1];
+      // Remove --root and its value from args for project name parsing
+      args.splice(rootIndex, 2);
+    }
+    let currentStep = 0;
+    renderTimeline(currentStep);
+
+    // Step 1: Enter project name
+    const projectName = await input({
+      message: chalk.bold("What is your project named?"),
+      default: DEFAULT_PROJECT_NAME,
+      validate: value => {
+        if (!value || value.trim().length === 0) {
+          return "Project name cannot be empty";
+        }
+        if (value.includes(" ")) {
+          return "Project name cannot contain spaces";
+        }
+        if (!/^[a-zA-Z0-9-_]+$/.test(value)) {
+          return "Project name can only contain letters, numbers, hyphens, and underscores";
+        }
+        return true;
+      }
+    });
+    currentStep++;
+    renderTimeline(currentStep);
+
+    // Step 2: Select template
+    const selectedTemplate = TEMPLATES[0];
+    currentStep++;
+    renderTimeline(currentStep);
+
+    // Step 3: Download template
+    const projectPath = join(rootDir, projectName);
+    if (existsSync(projectPath)) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk.red(`❌ Error: Directory "${projectName}" already exists.`));
+      console.error(chalk.yellow("Please choose a different name or remove the existing directory."));
+      process.exit(1);
+    }
+    mkdirSync(projectPath, {
+      recursive: true
+    });
+    process.stdout.write(chalk.bold("\n📥 Downloading template from GitHub...\n") + `  ${chalk.dim(`https://github.com/${selectedTemplate.repo}`)}\n`);
+    try {
+      const emitter = degit(selectedTemplate.repo, {
+        cache: false,
+        force: true,
+        verbose: false
+      });
+      await emitter.clone(projectPath);
+    } catch (error) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk.red("❌ Failed to download template:"));
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      if (errorMessage.includes("rate limit") || errorMessage.includes("403")) {
+        console.error(chalk.yellow("GitHub rate limit exceeded. Please try again later or authenticate with GitHub."));
+      } else if (errorMessage.includes("not found") || errorMessage.includes("404")) {
+        console.error(chalk.yellow(`Template repository not found: ${selectedTemplate.repo}`));
+        console.error(chalk.yellow("Please check if the repository exists and is public."));
+      } else {
+        console.error(chalk.yellow("Network error. Please check your internet connection."));
+      }
+      console.error(chalk.dim("Error details:"), errorMessage);
+      process.exit(1);
+    }
+    currentStep++;
+    renderTimeline(currentStep);
+    process.stdout.write(chalk.green(`✅ Successfully downloaded template from ${selectedTemplate.repo}!\n`));
+
+    // Process template files
+    processTemplateFiles(projectPath, projectName);
+
+    // Change to project directory and install dependencies
+    process.stdout.write(chalk.bold("\n📦 Installing dependencies...\n"));
+    try {
+      execSync("npm install", {
+        cwd: projectPath,
+        stdio: "inherit" // Show npm output in real-time
+      });
+
+      // Clear the npm output and show success
+      process.stdout.write("\x1b[2J\x1b[0f"); // clear screen
+      displayValLogo();
+      currentStep++;
+      renderTimeline(currentStep);
+      process.stdout.write(chalk.green(`✅ Successfully downloaded template from ${selectedTemplate.repo}!\n`));
+      process.stdout.write(chalk.green("\n✅ Dependencies installed successfully!\n"));
+
+      // Show final success message
+      displaySuccessMessage(projectName);
+    } catch (error) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk.red('❌ Failed to install dependencies. You can try running "npm install" manually.'));
+      console.error("Error:", error);
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(chalk.red("❌ Failed to create project:"), error);
+    process.exit(1);
+  }
+}
+main();

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@valbuild/create",
+  "version": "0.81.0",
+  "description": "Create a new Val project with Next.js",
+  "main": "dist/valbuild-create.cjs.js",
+  "module": "dist/valbuild-create.esm.js",
+  "bin": {
+    "@valbuild/create": "./bin.js"
+  },
+  "exports": {
+    ".": {
+      "module": "./dist/valbuild-create.esm.js",
+      "default": "./dist/valbuild-create.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "tsx src/index.ts --",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "degit": "^2.8.4",
+    "@inquirer/prompts": "^3.0.2",
+    "chalk": "^4.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "tsx": "^4.0.0"
+  },
+  "keywords": [
+    "val",
+    "valbuild",
+    "create",
+    "cli",
+    "nextjs"
+  ],
+  "author": "Valbuild",
+  "license": "MIT",
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts"
+    ]
+  },
+  "engines": {
+    "node": ">=18.17.0"
+  }
+}

package/src/degit.d.ts

@@ -0,0 +1,12 @@
+declare module "degit" {
+  interface DegitOptions {
+    cache?: boolean;
+    force?: boolean;
+    verbose?: boolean;
+  }
+  interface DegitEmitter {
+    clone(dest: string): Promise<void>;
+  }
+  function degit(repo: string, opts?: DegitOptions): DegitEmitter;
+  export = degit;
+}

package/src/index.ts

@@ -0,0 +1,304 @@
+import { execSync } from "child_process";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+import { join } from "path";
+import degit from "degit";
+import { input } from "@inquirer/prompts";
+import chalk from "chalk";
+
+const PKG = {
+  name: "@valbuild/create",
+  version: "0.1.0",
+};
+
+interface Template {
+  name: string;
+  description: string;
+  repo: string;
+  default?: boolean;
+}
+
+const TEMPLATES: Template[] = [
+  {
+    name: "starter",
+    description:
+      "Full-featured Next.js app with Val, TypeScript, Tailwind CSS, and examples",
+    repo: "valbuild/template-nextjs-starter",
+    default: true,
+  },
+];
+
+const DEFAULT_PROJECT_NAME = "my-val-app";
+
+function printHelp() {
+  console.log(`
+${chalk.bold("Usage:")}
+  ${chalk.cyan("npm create @valbuild [project-name]")}
+
+${chalk.bold("Options:")}
+  -h, --help Show help
+  -v, --version Show version
+  --root <path> Specify the root directory for project creation (default: current directory)
+`);
+}
+
+function printVersion() {
+  console.log(`${PKG.name} v${PKG.version}`);
+}
+
+function handleExit() {
+  console.log(chalk.yellow("\nAborted."));
+  process.exit(0);
+}
+
+process.on("SIGINT", handleExit);
+
+// Timeline stepper logic
+const timelineSteps = [
+  "Enter project name",
+  "Download template",
+  "Install dependencies",
+  "Complete!",
+];
+
+type StepStatus = "pending" | "active" | "done" | "error";
+
+function renderTimeline(currentStep: number, errorStep?: number) {
+  const icons = {
+    pending: chalk.gray("◯"),
+    active: chalk.cyan("◉"),
+    done: chalk.green("✔"),
+    error: chalk.red("✖"),
+  };
+  let out = "\n";
+  for (let i = 0; i < timelineSteps.length; i++) {
+    let status: StepStatus = "pending";
+    if (errorStep !== undefined && i === errorStep) status = "error";
+    else if (i < currentStep) status = "done";
+    else if (i === currentStep) status = "active";
+    const icon = icons[status];
+    out += `  ${icon} ${timelineSteps[i]}\n`;
+    if (i < timelineSteps.length - 1) out += `  ${chalk.gray("│")}\n`;
+  }
+  process.stdout.write("\x1b[2J\x1b[0f"); // clear screen
+  displayValLogo();
+  process.stdout.write(out + "\n");
+}
+
+function displayValLogo() {
+  const logo = chalk.cyan(`
+###########
+###########
+###########                           @@@@
+###########                             @@
+###########    @@      @@  @@@@@@ @     @@
+###########     @@    @@  @@     @@     @@
+###########     @@    @@ %@       @     @@
+####  #####      @@  @@  .@      .@     @@
+###    ####       @@@@    @@:   @@@.    @@
+####  #####       @@@@      @@@@  =@@@@@@@@@
+###########
+`);
+  process.stdout.write(logo);
+}
+
+function displaySuccessMessage(projectName: string) {
+  const nextSteps = chalk.bold(`
+${chalk.cyan("Next steps:")}
+  ${chalk.cyan("cd")} ${chalk.white(projectName)}
+  ${chalk.cyan("npm run dev")}
+
+${chalk.green("Happy coding! 🚀")}
+`);
+
+  process.stdout.write(nextSteps);
+}
+
+// Template processing function
+function processTemplateFiles(projectPath: string, projectName: string) {
+  const filesToProcess = [
+    "package.json",
+    "README.md",
+    "next.config.js",
+    "val.config.ts",
+    "val.config.js",
+  ];
+
+  filesToProcess.forEach((filename) => {
+    const filePath = join(projectPath, filename);
+    if (existsSync(filePath)) {
+      try {
+        let content = readFileSync(filePath, "utf-8");
+        // Replace both {{PROJECT_NAME}} and {{projectName}} placeholders
+        content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+        content = content.replace(/\{\{projectName\}\}/g, projectName);
+        writeFileSync(filePath, content, "utf-8");
+      } catch (error) {
+        // Silently continue if file can't be processed
+        console.log(chalk.dim(`Note: Could not process ${filename}`));
+      }
+    }
+  });
+}
+
+async function main() {
+  try {
+    console.log("here");
+    const args = process.argv.slice(2);
+    if (args.includes("-h") || args.includes("--help")) {
+      printHelp();
+      process.exit(0);
+    }
+    if (args.includes("-v") || args.includes("--version")) {
+      printVersion();
+      process.exit(0);
+    }
+
+    // Parse --root option
+    const rootIndex = args.findIndex((a) => a === "--root");
+    let rootDir = process.cwd();
+    if (rootIndex !== -1 && args[rootIndex + 1]) {
+      rootDir = args[rootIndex + 1];
+      // Remove --root and its value from args for project name parsing
+      args.splice(rootIndex, 2);
+    }
+
+    let currentStep = 0;
+    renderTimeline(currentStep);
+
+    // Step 1: Enter project name
+    const projectName = await input({
+      message: chalk.bold("What is your project named?"),
+      default: DEFAULT_PROJECT_NAME,
+      validate: (value) => {
+        if (!value || value.trim().length === 0) {
+          return "Project name cannot be empty";
+        }
+        if (value.includes(" ")) {
+          return "Project name cannot contain spaces";
+        }
+        if (!/^[a-zA-Z0-9-_]+$/.test(value)) {
+          return "Project name can only contain letters, numbers, hyphens, and underscores";
+        }
+        return true;
+      },
+    });
+    currentStep++;
+    renderTimeline(currentStep);
+
+    // Step 2: Select template
+    const selectedTemplate = TEMPLATES[0];
+    currentStep++;
+    renderTimeline(currentStep);
+
+    // Step 3: Download template
+    const projectPath = join(rootDir, projectName);
+    if (existsSync(projectPath)) {
+      renderTimeline(currentStep, currentStep);
+      console.error(
+        chalk.red(`❌ Error: Directory "${projectName}" already exists.`),
+      );
+      console.error(
+        chalk.yellow(
+          "Please choose a different name or remove the existing directory.",
+        ),
+      );
+      process.exit(1);
+    }
+    mkdirSync(projectPath, { recursive: true });
+    process.stdout.write(
+      chalk.bold("\n📥 Downloading template from GitHub...\n") +
+        `  ${chalk.dim(`https://github.com/${selectedTemplate.repo}`)}\n`,
+    );
+
+    try {
+      const emitter = degit(selectedTemplate.repo, {
+        cache: false,
+        force: true,
+        verbose: false,
+      });
+      await emitter.clone(projectPath);
+    } catch (error) {
+      renderTimeline(currentStep, currentStep);
+      console.error(chalk.red("❌ Failed to download template:"));
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      if (errorMessage.includes("rate limit") || errorMessage.includes("403")) {
+        console.error(
+          chalk.yellow(
+            "GitHub rate limit exceeded. Please try again later or authenticate with GitHub.",
+          ),
+        );
+      } else if (
+        errorMessage.includes("not found") ||
+        errorMessage.includes("404")
+      ) {
+        console.error(
+          chalk.yellow(
+            `Template repository not found: ${selectedTemplate.repo}`,
+          ),
+        );
+        console.error(
+          chalk.yellow("Please check if the repository exists and is public."),
+        );
+      } else {
+        console.error(
+          chalk.yellow("Network error. Please check your internet connection."),
+        );
+      }
+      console.error(chalk.dim("Error details:"), errorMessage);
+      process.exit(1);
+    }
+
+    currentStep++;
+    renderTimeline(currentStep);
+    process.stdout.write(
+      chalk.green(
+        `✅ Successfully downloaded template from ${selectedTemplate.repo}!\n`,
+      ),
+    );
+
+    // Process template files
+    processTemplateFiles(projectPath, projectName);
+
+    // Change to project directory and install dependencies
+    process.stdout.write(chalk.bold("\n📦 Installing dependencies...\n"));
+
+    try {
+      execSync("npm install", {
+        cwd: projectPath,
+        stdio: "inherit", // Show npm output in real-time
+      });
+
+      // Clear the npm output and show success
+      process.stdout.write("\x1b[2J\x1b[0f"); // clear screen
+      displayValLogo();
+      currentStep++;
+      renderTimeline(currentStep);
+      process.stdout.write(
+        chalk.green(
+          `✅ Successfully downloaded template from ${selectedTemplate.repo}!\n`,
+        ),
+      );
+      process.stdout.write(
+        chalk.green("\n✅ Dependencies installed successfully!\n"),
+      );
+
+      // Show final success message
+      displaySuccessMessage(projectName);
+    } catch (error) {
+      renderTimeline(currentStep, currentStep);
+      console.error(
+        chalk.red(
+          '❌ Failed to install dependencies. You can try running "npm install" manually.',
+        ),
+      );
+      console.error("Error:", error);
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(chalk.red("❌ Failed to create project:"), error);
+    process.exit(1);
+  }
+}
+
+main();

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "lib": ["es2020", "DOM"],
+    "strict": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "target": "ESNext"
+  }
+}