@docubook/cli 0.2.1

package/README.md

@@ -0,0 +1,65 @@
+# @docubook/cli
+
+Modern CLI tool for scaffolding DocuBook documentation projects.
+
+## Features
+
+- ✨ **Auto-detect Package Manager** - Automatically detects npm, yarn, pnpm, or bun from invocation
+- 🎨 **Modern TUI** - Beautiful terminal UI with dark theme and neon accents
+- 📦 **Template Selection** - Choose from multiple documentation templates
+- ⚡ **Fast Setup** - Minimal prompts, sensible defaults
+- 🔧 **Fully Configurable** - Customize everything after scaffolding
+
+## Installation
+
+```bash
+npm install -g @docubook/cli
+```
+
+Or use directly with npx:
+
+```bash
+npx @docubook/cli
+```
+
+## Usage
+
+### Create a new project
+
+```bash
+# Using npm
+npx @docubook/cli my-docs
+
+# Using bun
+bunx @docubook/cli my-docs
+
+# Using pnpm
+pnpm dlx @docubook/cli my-docs
+
+# Using yarn
+yarn dlx @docubook/cli my-docs
+```
+
+The CLI will:
+1. Auto-detect your package manager
+2. Prompt you to select a template
+3. Create your project
+4. Install dependencies
+
+### Available Templates
+
+- **Next.js (Vercel)** - Modern documentation with Next.js, Vercel deployment ready
+- **React Router** - Client-side app with React Router (coming soon)
+
+## Package Manager Detection
+
+The CLI automatically detects which package manager you're using:
+
+- `npx @docubook/cli` → npm
+- `bunx @docubook/cli` → bun
+- `pnpm dlx @docubook/cli` → pnpm
+- `yarn dlx @docubook/cli` → yarn
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@docubook/cli",
+  "version": "0.2.1",
+  "description": "DocuBook CLI tool that helps you initialize, update, and deploy documentation directly from your terminal.",
+  "type": "module",
+  "files": [
+    "src",
+    "README.md",
+    "templates.json"
+  ],
+  "bin": {
+    "docubook": "src/index.js"
+  },
+  "main": "./src/index.js",
+  "scripts": {
+    "dev": "node src/index.js",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix"
+  },
+  "keywords": [
+    "docubook",
+    "documentation",
+    "cli",
+    "scaffold",
+    "template"
+  ],
+  "homepage": "https://docubook.pro/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DocuBook/docubook"
+  },
+  "author": "wildan.nrs",
+  "author-url": "https://wildan.dev",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "ora": "^8.1.0",
+    "prompts": "^2.4.2",
+    "boxen": "^8.0.1",
+    "cli-progress": "^3.12.0"
+  },
+  "devDependencies": {
+    "eslint": "^9.39.3",
+    "@eslint/js": "^9.39.3",
+    "eslint-config-next": "^16.1.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/cli/program.js

@@ -0,0 +1,75 @@
+import { program } from "commander";
+import { collectUserInput } from "./promptHandler.js";
+import { createProject } from "../installer/projectInstaller.js";
+import log from "../utils/logger.js";
+import { renderWelcome, renderDone, renderError } from "../tui/renderer.js";
+import { CLIState } from "../tui/state.js";
+import { detectPackageManager, getPackageManagerInfo, getPackageManagerVersion } from "../utils/packageManagerDetect.js";
+import { getAvailableTemplates, getTemplate, getDefaultTemplate } from "../utils/templateDetect.js";
+
+/**
+ * Initializes the CLI program
+ * @param {string} version - Package version
+ */
+export function initializeProgram(version) {
+  program
+    .version(version)
+    .description("CLI to create a new DocuBook project")
+    .argument("[directory]", "The name of the project directory")
+    .action(async (directory) => {
+      const state = new CLIState();
+      
+      try {
+        // Render welcome screen with version
+        renderWelcome(version);
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        // Auto-detect package manager
+        const detectedPM = detectPackageManager();
+        const pmVersion = getPackageManagerVersion(detectedPM);
+        state.setPackageManager(detectedPM);
+
+        // Get user input
+        const userInput = await collectUserInput(directory);
+        state.setProjectName(userInput.directoryName);
+
+        // Get available templates
+        const templates = getAvailableTemplates();
+        let selectedTemplate;
+
+        if (templates.length === 1) {
+          // Only one template, use it
+          selectedTemplate = templates[0].id;
+          state.setTemplate(templates[0].name);
+        } else if (templates.length > 1) {
+          // Multiple templates, let user choose
+          selectedTemplate = userInput.template || getDefaultTemplate()?.id;
+          const tmpl = getTemplate(selectedTemplate);
+          state.setTemplate(tmpl?.name || selectedTemplate);
+        } else {
+          throw new Error("No templates available");
+        }
+
+        // Create project with all information
+        await createProject({
+          directoryName: userInput.directoryName,
+          packageManager: detectedPM,
+          packageManagerVersion: pmVersion,
+          template: selectedTemplate,
+          autoInstall: userInput.autoInstall !== false,
+          docubookVersion: version,
+          state: state, // Pass state for TUI updates
+        });
+
+        // Show success message
+        const pmInfo = getPackageManagerInfo(detectedPM);
+        renderDone(userInput.directoryName, detectedPM, pmInfo.devCmd);
+      } catch (err) {
+        renderError(err.message || "An unexpected error occurred.");
+        log.error(err.message || "An unexpected error occurred.");
+        process.exit(1);
+      }
+    });
+
+  return program;
+}

package/src/cli/promptHandler.js

@@ -0,0 +1,57 @@
+import prompts from "prompts";
+import { getAvailableTemplates } from "../utils/templateDetect.js";
+import log from "../utils/logger.js";
+
+/**
+ * Collects user input for project creation
+ * @param {string} [cliProvidedDir] - The directory name provided via CLI argument.
+ * @returns {Promise<Object>} User answers
+ */
+export async function collectUserInput(cliProvidedDir) {
+  let answers = {
+    directoryName: cliProvidedDir
+  };
+
+  const questions = [
+    {
+      type: cliProvidedDir ? null : "text",
+      name: "directoryName",
+      message: "What is your project named?",
+      initial: "my-docs",
+      validate: (name) => name.trim().length > 0 ? true : "Project name cannot be empty.",
+    },
+    {
+      type: "select",
+      name: "template",
+      message: "Select your template:",
+      choices: getAvailableTemplates().map(t => ({
+        title: `${t.name}`,
+        description: t.description,
+        value: t.id
+      })),
+      initial: 0,
+    },
+    {
+      type: "confirm",
+      name: "autoInstall",
+      message: "Would you like to install dependencies now?",
+      initial: true,
+    },
+  ];
+
+  const promptAnswers = await prompts(questions, {
+    onCancel: () => {
+      log.error("Scaffolding cancelled.");
+      process.exit(0);
+    },
+  });
+
+  answers = { ...answers, ...promptAnswers };
+
+  // Return all answers
+  return {
+    directoryName: answers.directoryName.trim(),
+    template: answers.template,
+    autoInstall: answers.autoInstall !== false,
+  };
+}

package/src/index.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+import { initializeProgram } from "./cli/program.js";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+// Get the directory name of the current module
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Read version from package.json
+const packageJsonPath = path.join(__dirname, '..', 'package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+const VERSION = packageJson.version;
+
+// Initialize and parse CLI arguments
+const program = initializeProgram(VERSION);
+program.parse(process.argv);

package/src/installer/projectInstaller.js

@@ -0,0 +1,235 @@
+import path from "path";
+import fs from "fs";
+import ora from "ora";
+import chalk from "chalk";
+import { execSync } from "child_process";
+import log from "../utils/logger.js";
+import { configurePackageManager } from "../utils/packageManager.js";
+import { displayManualSteps } from "../utils/display.js";
+import { renderScaffolding } from "../tui/renderer.js";
+import { getTemplate } from "../utils/templateDetect.js";
+
+/**
+ * Creates a new DocuBook project.
+ * @param {Object} options - Installation options.
+ */
+export async function createProject(options) {
+  const {
+    directoryName,
+    packageManager,
+    packageManagerVersion,
+    template,
+    autoInstall,
+    docubookVersion,
+    state
+  } = options;
+
+  const projectPath = path.resolve(process.cwd(), directoryName);
+
+  if (fs.existsSync(projectPath)) {
+    throw new Error(`Directory "${directoryName}" already exists.`);
+  }
+
+  log.info(`Creating a new DocuBook project in ${chalk.green(projectPath)}...`);
+
+  try {
+    // 1. Create project directory and get/download template
+    state?.setCurrentStep("Creating directories...");
+    renderScaffolding(state || {});
+    
+    const templatePath = await getOrDownloadTemplate(template, state);
+    
+    if (!templatePath || !fs.existsSync(templatePath)) {
+      throw new Error(`Template "${template}" could not be found or downloaded.`);
+    }
+
+    copyDirectoryRecursive(templatePath, projectPath);
+
+    // 2. Configure package manager specific settings
+    state?.setCurrentStep("Configuring package manager...");
+    renderScaffolding(state || {});
+    configurePackageManager(packageManager, projectPath);
+
+    // 3. Update package.json
+    state?.setCurrentStep("Updating project config...");
+    renderScaffolding(state || {});
+    const pkgPath = path.join(projectPath, "package.json");
+    if (fs.existsSync(pkgPath)) {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+      pkg.name = directoryName;
+      pkg.packageManager = `${packageManager}@${packageManagerVersion}`;
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    }
+
+    if (autoInstall) {
+      state?.setCurrentStep("Installing dependencies...");
+      renderScaffolding(state || {});
+      await installDependencies(directoryName, packageManager, projectPath);
+    }
+
+    log.info(chalk.green(`Successfully created DocuBook project v${docubookVersion}`));
+  } catch (err) {
+    // Cleanup created directory on failure
+    if (fs.existsSync(projectPath)) {
+      fs.rmSync(projectPath, { recursive: true, force: true });
+    }
+    throw err;
+  }
+}
+
+/**
+ * Gets template from local cache or downloads from GitHub
+ * @param {string} templateId - Template ID
+ * @param {Object} state - CLI state for progress updates
+ * @returns {Promise<string>} Path to template directory
+ */
+async function getOrDownloadTemplate(templateId, state) {
+  // Try local path first (for dev environment)
+  const localPath = getLocalTemplatePath(templateId);
+  if (localPath && fs.existsSync(localPath)) {
+    return localPath;
+  }
+
+  // Download from GitHub
+  state?.setCurrentStep("Downloading template...");
+  renderScaffolding(state || {});
+  
+  const templateInfo = getTemplate(templateId);
+  if (!templateInfo || !templateInfo.url) {
+    throw new Error(`Template "${templateId}" information not available.`);
+  }
+
+  return await downloadTemplateFromGitHub(templateId, templateInfo.url);
+}
+
+/**
+ * Gets local template path if it exists
+ * @param {string} templateId - Template ID
+ * @returns {string|null} Path to local template or null
+ */
+function getLocalTemplatePath(templateId) {
+  import("file:///").catch(() => {});
+  
+  const distPath = path.join(
+    new URL(".", import.meta.url).pathname,
+    "..",
+    "..",
+    "dist",
+    templateId
+  );
+  
+  if (fs.existsSync(distPath)) {
+    return distPath;
+  }
+
+  const devPath = path.join(
+    new URL(".", import.meta.url).pathname,
+    "..",
+    "..",
+    "..",
+    "..",
+    "packages",
+    "template",
+    templateId
+  );
+
+  if (fs.existsSync(devPath)) {
+    return devPath;
+  }
+
+  return null;
+}
+
+/**
+ * Downloads template from GitHub repository
+ * @param {string} templateId - Template ID
+ * @param {string} gitHubUrl - GitHub URL to template
+ * @returns {Promise<string>} Path to downloaded template
+ */
+async function downloadTemplateFromGitHub(templateId, gitHubUrl) {
+  const tempDir = fs.mkdtempSync(path.join("/tmp", "docubook-"));
+  
+  try {
+    // Convert GitHub web URL to archive URL
+    // https://github.com/DocuBook/docubook/tree/main/packages/template/nextjs-vercel
+    // -> https://github.com/DocuBook/docubook/archive/refs/heads/main.tar.gz
+    const archiveUrl = "https://github.com/DocuBook/docubook/archive/refs/heads/main.tar.gz";
+    
+    // Download archive
+    const archivePath = path.join(tempDir, "repo.tar.gz");
+    execSync(`curl -L -o "${archivePath}" "${archiveUrl}"`, { stdio: "pipe" });
+
+    // Extract archive
+    execSync(`tar -xzf "${archivePath}" -C "${tempDir}"`, { stdio: "pipe" });
+
+    // Find template in extracted repo
+    const extractedDir = path.join(tempDir, "docubook-main", "packages", "template", templateId);
+    
+    if (!fs.existsSync(extractedDir)) {
+      throw new Error(`Template "${templateId}" not found in repository.`);
+    }
+
+    return extractedDir;
+  } catch (err) {
+    fs.rmSync(tempDir, { recursive: true, force: true });
+    throw new Error(`Failed to download template: ${err.message}`);
+  }
+}
+
+/**
+ * Recursively copies a directory, skipping build artifacts and symlinks.
+ * @param {string} source - Source directory path.
+ * @param {string} destination - Destination directory path.
+ */
+function copyDirectoryRecursive(source, destination, depth = 0) {
+  if (!fs.existsSync(destination)) {
+    fs.mkdirSync(destination, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(source, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(source, entry.name);
+    const destPath = path.join(destination, entry.name);
+
+    // Skip build artifacts and node_modules at root level
+    if (['node_modules', '.next', '.turbo', 'dist', 'build', '.cache'].includes(entry.name) && depth === 0) {
+      continue;
+    }
+
+    // Skip symlinks and socket files
+    if (entry.isSymbolicLink()) {
+      continue;
+    }
+
+    if (entry.isDirectory()) {
+      copyDirectoryRecursive(srcPath, destPath, depth + 1);
+    } else if (entry.isFile()) {
+      try {
+        fs.copyFileSync(srcPath, destPath);
+      } catch (err) {
+        // Skip files that can't be copied (sockets, etc)
+        console.warn(`Skipped: ${entry.name} (${err.code})`);
+      }
+    }
+  }
+}
+
+/**
+ * Installs project dependencies.
+ * @param {string} directoryName - Project directory name.
+ * @param {string} packageManager - Package manager to use.
+ * @param {string} projectPath - Path to the project directory.
+ */
+async function installDependencies(directoryName, packageManager, projectPath) {
+  log.info("Installing dependencies...");
+  const installSpinner = ora(`Running ${chalk.green(`${packageManager} install`)}...`).start();
+
+  try {
+    execSync(`${packageManager} install`, { cwd: projectPath, stdio: "ignore" });
+    installSpinner.succeed("Dependencies installed successfully.");
+  } catch {
+    installSpinner.fail("Failed to install dependencies.");
+    displayManualSteps(directoryName, packageManager);
+    throw new Error("Dependency installation failed.");
+  }
+}

package/src/tui/ascii.js

@@ -0,0 +1,169 @@
+import { colors } from './colors.js';
+
+
+const stripAnsi = (str) => str.replace(/\x1B\[[0-9;]*m/g, "");
+const stringWidth = (str) => {
+  str = stripAnsi(str);
+
+  let width = 0;
+  for (const char of [...str]) {
+    const code = char.codePointAt(0);
+
+    // emoji / wide char
+    if (
+      code > 0xffff ||
+      (code >= 0x1100 &&
+        (
+          code <= 0x115f ||
+          code === 0x2329 ||
+          code === 0x232a ||
+          (0x2e80 <= code && code <= 0xa4cf)
+        ))
+    ) {
+      width += 2;
+    } else {
+      width += 1;
+    }
+  }
+
+  return width;
+};
+
+function wrapText(text, maxWidth) {
+  const words = text.split(" ");
+  const lines = [];
+  let current = "";
+
+  for (const word of words) {
+    const test = current ? current + " " + word : word;
+
+    if (stringWidth(test) <= maxWidth) {
+      current = test;
+    } else {
+      if (current) lines.push(current);
+      current = word;
+    }
+  }
+
+  if (current) lines.push(current);
+
+  return lines;
+}
+
+/**
+ * Create a welcome banner with full ASCII logo and tip link
+ */
+export function createWelcomeBanner(version) {
+  const termWidth = process.stdout.columns || 80;
+  const width = Math.min(76, termWidth - 4);
+  const indent = " ".repeat(5)
+
+  const logoTop = `${colors.cyan}▛▀▀▜${colors.reset}`
+  const logoMid = `${colors.cyan}${colors.bright}▌>_▐${colors.reset}`
+  const logoBot = `${colors.cyan}▙▄▄▟${colors.reset}`
+
+  const title = `${colors.cyan}${colors.bright}DocuBook${colors.reset} v${version}`
+  const subtitle = `${colors.gray}Initialize, build, and deploy docs from terminal.${colors.reset}`
+
+  const tip = `${colors.gray}Visit our documentation.${colors.reset}`
+  const docsLink = `${colors.cyan}https://www.docubook.pro/${colors.reset}`
+
+  const pad = (text = "") => {
+    const len = stringWidth(text)
+    return text + " ".repeat(Math.max(0, width - len))
+  }
+
+  const banner = `
+${colors.cyan}┌${"─".repeat(width)}┐${colors.reset}
+${colors.cyan}│${colors.reset}${pad(` ${logoTop}`)}${colors.cyan}│${colors.reset}
+${colors.cyan}│${colors.reset}${pad(` ${logoMid}  ${title}`)}${colors.cyan}│${colors.reset}
+${colors.cyan}│${colors.reset}${pad(` ${logoBot}  ${subtitle}`)}${colors.cyan}│${colors.reset}
+${colors.cyan}│${colors.reset}${pad("")}${colors.cyan}│${colors.reset}
+${colors.cyan}│${colors.reset}${pad(`${indent}${tip} ${docsLink}`)}${colors.cyan}│${colors.reset}
+${colors.cyan}└${"─".repeat(width)}┘${colors.reset}
+`
+
+  return banner
+}
+
+/**
+ * Create a banner for scaffolding progress
+ */
+export function createScaffoldingBanner() {
+  return `
+${colors.cyan}Creating Project${colors.reset}
+${colors.gray}Initializing...${colors.reset}
+  `;
+}
+
+/**
+ * Create a boxed message with title and content
+ */
+export function createBoxedMessage(title, content, color = colors.green) {
+  const reset = "\x1b[0m";
+  const termWidth = process.stdout.columns || 80;
+
+  // 1. Tentukan total lebar box (termasuk border)
+  const boxWidth = Math.min(80, termWidth - 4);
+
+  // 2. width adalah panjang garis horizontal (─) di atas dan bawah
+  // Total lebar box adalah width + 2 (untuk karakter pojok ┌ dan ┐)
+  const width = boxWidth - 2;
+
+  // 3. inner adalah ruang bersih di dalam box untuk teks (tanpa padding spasi)
+  // Kita beri padding 2 spasi di kiri dan 2 spasi di kanan (total 4)
+  // Jadi: 1(│) + 2(spasi) + inner + 2(spasi) + 1(│) = width + 2
+  const inner = (width + 2) - 6;
+
+  const centerTitle = () => {
+    const text = ` ${title} `;
+    const textWidth = stringWidth(text);
+    const remaining = width - textWidth;
+    const left = Math.floor(remaining / 2);
+    const right = remaining - left;
+    return "─".repeat(left) + text + "─".repeat(right);
+  };
+
+  const pad = (text = "") => {
+    const len = stringWidth(text);
+    // Tambahkan spasi hingga tepat mengisi 'inner'
+    return text + " ".repeat(Math.max(0, inner - len));
+  };
+
+  const lines = [];
+
+  // Header
+  lines.push(`${color}┌${centerTitle()}┐${reset}`);
+
+  // Padding atas (opsional)
+  lines.push(`${color}│${reset}  ${pad("")}  ${color}│${reset}`);
+
+  const items = typeof content === "string"
+    ? content.split("\n")
+    : Array.isArray(content) ? content : [];
+
+  for (const line of items) {
+    const wrapped = wrapText(line, inner);
+    wrapped.forEach((w) => {
+      // Pastikan struktur: │ + spasi(2) + konten + spasi(2) + │
+      lines.push(`${color}│${reset}  ${pad(w)}  ${color}│${reset}`);
+    });
+  }
+
+  // Padding bawah (opsional)
+  lines.push(`${color}│${reset}  ${pad("")}  ${color}│${reset}`);
+
+  // Footer
+  lines.push(`${color}└${"─".repeat(width)}┘${reset}`);
+
+  return "\n" + lines.join("\n") + "\n";
+}
+
+/**
+ * Create success banner
+ */
+export function createSuccessBanner() {
+  return `
+${colors.green}✓ Project Created${colors.reset}
+  `;
+}

package/src/tui/colors.js

@@ -0,0 +1,53 @@
+// Dark theme with neon accents
+export const colors = {
+  // Neon colors
+  cyan: '\x1b[36m',    // #00D9FF
+  magenta: '\x1b[35m', // #FF00FF
+  yellow: '\x1b[33m',  // #FFD700
+  green: '\x1b[32m',   // #00FF00
+
+  // Grayscale
+  white: '\x1b[37m',
+  gray: '\x1b[90m',
+  dark: '\x1b[2m',
+
+  // Reset
+  reset: '\x1b[0m',
+
+  // Styles
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+};
+
+export function colorize(text, color) {
+  return `${color}${text}${colors.reset}`;
+}
+
+export function line(text = '') {
+  if (!text) return '';
+  return text;
+}
+
+export function header(text) {
+  return colorize(text, colors.cyan + colors.bright);
+}
+
+export function success(text) {
+  return `${colorize('✓', colors.green)} ${text}`;
+}
+
+export function error(text) {
+  return `${colorize('✗', colors.magenta)} ${text}`;
+}
+
+export function info(text) {
+  return `${colorize('→', colors.cyan)} ${text}`;
+}
+
+export function loading(text) {
+  return `${colorize('◐', colors.yellow)} ${text}`;
+}
+
+export function dim(text) {
+  return colorize(text, colors.gray);
+}

package/src/tui/renderer.js

@@ -0,0 +1,89 @@
+import { colors, success, info, loading, dim } from './colors.js';
+import { createWelcomeBanner, createScaffoldingBanner, createSuccessBanner, createBoxedMessage } from './ascii.js';
+import { readFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageJsonPath = join(__dirname, '../../package.json');
+let version = '0.1.0';
+
+try {
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+  version = packageJson.version || '0.1.0';
+} catch {
+  // Fallback to default version if package.json cannot be read
+}
+
+export function renderWelcome() {
+  console.clear();
+  console.log('');
+  console.log(createWelcomeBanner(version));
+  console.log('');
+}
+
+export function renderScaffolding(state) {
+  console.clear();
+  console.log('');
+  console.log(createScaffoldingBanner());
+  
+  if (state.projectName) {
+    console.log(info(`Project: ${state.projectName}`));
+  }
+  
+  if (state.packageManager) {
+    console.log(success(`Package Manager: ${state.packageManager}`));
+  }
+  
+  if (state.template) {
+    console.log(success(`Template: ${state.template}`));
+  }
+  
+  if (state.currentStep) {
+    console.log(loading(state.currentStep));
+  }
+  
+  console.log('');
+}
+
+export function renderDone(projectName, packageManager, nextCommand, installDependencies = true) {
+  console.clear();
+  console.log('');
+  console.log(createSuccessBanner());
+  console.log('');
+  
+  // Determine install command based on package manager
+  const installCommand = 
+    packageManager === 'yarn' ? 'yarn install' :
+    packageManager === 'pnpm' ? 'pnpm install' :
+    packageManager === 'bun' ? 'bun install' :
+    'npm install';
+  
+  const nextSteps = [
+    `${colors.cyan}cd${colors.reset} ${projectName}`,
+  ];
+
+  // Add install step only if dependencies were not already installed
+  if (!installDependencies) {
+    nextSteps.push(`${colors.cyan}${installCommand}${colors.reset}`);
+  }
+
+  nextSteps.push(`${colors.cyan}${nextCommand}${colors.reset}`);
+  nextSteps.push('');
+  nextSteps.push(`${dim('📚 Documentation: https://docubook.pro')}`);
+  
+  console.log(createBoxedMessage('Next Steps', nextSteps, colors.green));
+  console.log('');
+}
+
+export function renderError(message) {
+  console.clear();
+  console.log('');
+  console.log(`${colors.magenta}✗ Error${colors.reset}`);
+  console.log(message);
+  console.log('');
+}
+
+export function renderBoxedMessage(title, content, color = colors.yellow) {
+  console.log(createBoxedMessage(title, content, color));
+}

package/src/tui/spinners.js

@@ -0,0 +1,18 @@
+// Spinner animation frames
+const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+let currentFrame = 0;
+
+export function getSpinner() {
+  const frame = spinnerFrames[currentFrame % spinnerFrames.length];
+  currentFrame++;
+  return frame;
+}
+
+export function resetSpinner() {
+  currentFrame = 0;
+}
+
+export function animateSpinner(text) {
+  return `${getSpinner()} ${text}`;
+}

package/src/tui/state.js

@@ -0,0 +1,44 @@
+// State machine for CLI flow
+export class CLIState {
+  constructor() {
+    this.stage = 'welcome'; // welcome → input → scaffolding → done
+    this.projectName = null;
+    this.packageManager = null;
+    this.template = null;
+    this.currentStep = null;
+    this.error = null;
+  }
+
+  setProjectName(name) {
+    this.projectName = name;
+  }
+
+  setPackageManager(pm) {
+    this.packageManager = pm;
+  }
+
+  setTemplate(template) {
+    this.template = template;
+  }
+
+  setStage(stage) {
+    this.stage = stage;
+  }
+
+  setCurrentStep(step) {
+    this.currentStep = step;
+  }
+
+  setError(error) {
+    this.error = error;
+  }
+
+  reset() {
+    this.stage = 'welcome';
+    this.projectName = null;
+    this.packageManager = null;
+    this.template = null;
+    this.currentStep = null;
+    this.error = null;
+  }
+}

package/src/utils/display.js

@@ -0,0 +1,84 @@
+import chalk from "chalk";
+import boxen from "boxen";
+import cliProgress from "cli-progress";
+
+/**
+ * Displays an introduction message for the CLI.
+ */
+export function displayIntro() {
+  console.log(`\n${chalk.bold.green("🚀 DocuBook Installer")}\n`);
+}
+
+/**
+ * Displays a progress bar to simulate final setup.
+ * @returns {Promise<void>} Promise that resolves when simulation completes.
+ */
+export async function simulateInstallation() {
+  const bar = new cliProgress.SingleBar(
+    {
+      format: `Finishing setup... ${chalk.greenBright("{bar}")} | {percentage}%`,
+      barCompleteChar: "\u2588",
+      barIncompleteChar: "\u2591",
+      hideCursor: true,
+    },
+    cliProgress.Presets.shades_classic
+  );
+
+  bar.start(100, 0);
+  for (let i = 0; i <= 100; i++) {
+    await new Promise((r) => setTimeout(r, 20)); // Faster simulation
+    bar.update(i);
+  }
+  bar.stop();
+  console.log("\n");
+}
+
+/**
+ * Displays manual installation steps if automatic installation fails.
+ * @param {string} projectDirectory - Project directory name.
+ * @param {string} packageManager - Package manager being used.
+ */
+export function displayManualSteps(projectDirectory, packageManager) {
+  const steps = `
+  ${chalk.yellow("Automatic installation failed.")} Please finish setup manually:
+
+  1. ${chalk.blueBright(`cd ${projectDirectory}`)}
+  2. ${chalk.blueBright(`${packageManager} install`)}
+  3. ${chalk.blueBright(`${packageManager} run dev`)}
+  `;
+  console.log(
+    boxen(steps, {
+      padding: 1,
+      margin: 1,
+      borderStyle: "round",
+      borderColor: "yellow",
+      title: "Manual Setup Required",
+      titleAlignment: "center",
+    })
+  );
+}
+
+/**
+ * Displays next steps after successful installation.
+ * @param {string} directoryName - Project directory name.
+ * @param {string} packageManager - Package manager being used.
+ */
+export function displayNextSteps(directoryName, packageManager) {
+  const steps = `
+  ${chalk.bold("Next steps:")}
+
+  1. ${chalk.blueBright(`cd ${directoryName}`)}
+  2. ${chalk.blueBright(`${packageManager} run dev`)}
+  `;
+
+  console.log(
+    boxen(steps, {
+      padding: 1,
+      margin: 1,
+      borderStyle: "round",
+      borderColor: "green",
+      title: "Success!",
+      titleAlignment: "center",
+    })
+  );
+}

package/src/utils/logger.js

@@ -0,0 +1,10 @@
+import chalk from "chalk";
+
+const log = {
+  info: (msg) => console.log(`${chalk.blue("ℹ")} ${msg}`),
+  success: (msg) => console.log(`${chalk.green("✔")} ${msg}`),
+  warn: (msg) => console.log(`${chalk.yellow("⚠")} ${msg}`),
+  error: (msg) => console.log(`\n${chalk.red("✖")} ${chalk.bold(msg)}\n`),
+};
+
+export default log;

package/src/utils/packageManager.js

@@ -0,0 +1,54 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+
+/**
+ * Gets the version of the specified package manager
+ * @param {string} pm - Package manager name
+ * @returns {string|null} Version string or null if not installed
+ */
+export function getPackageManagerVersion(pm) {
+  try {
+    return execSync(`${pm} --version`).toString().trim();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Detects the default package manager from user environment
+ * @returns {string} Default package manager name
+ */
+export function detectDefaultPackageManager() {
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (userAgent.includes("pnpm")) return "pnpm";
+  if (userAgent.includes("yarn")) return "yarn";
+  if (userAgent.includes("bun")) return "bun";
+  return "npm";
+}
+
+/**
+ * Updates postcss config file extension for Bun compatibility
+ * @param {string} projectPath - Path to the project directory
+ */
+export function updatePostcssConfig(projectPath) {
+  const oldPath = path.join(projectPath, "postcss.config.js");
+  const newPath = path.join(projectPath, "postcss.config.cjs");
+  if (fs.existsSync(oldPath)) {
+    fs.renameSync(oldPath, newPath);
+  }
+}
+
+/**
+ * Configures package manager specific settings
+ * @param {string} packageManager - Package manager name
+ * @param {string} projectPath - Path to the project directory
+ */
+export function configurePackageManager(packageManager, projectPath) {
+  if (packageManager === "bun") {
+    updatePostcssConfig(projectPath);
+  } else if (packageManager === "yarn") {
+    const yarnrcPath = path.join(projectPath, ".yarnrc.yml");
+    fs.writeFileSync(yarnrcPath, "nodeLinker: node-modules\n");
+  }
+}

package/src/utils/packageManagerDetect.js

@@ -0,0 +1,83 @@
+import { execSync } from 'child_process';
+
+// Map argv[1] patterns to package managers
+const PM_DETECTION_MAP = {
+  'npx': 'npm',
+  'npm': 'npm',
+  'bunx': 'bun',
+  'bun': 'bun',
+  'pnpm': 'pnpm',
+  'yarn': 'yarn',
+};
+
+// Environment variable detection
+function detectFromEnv() {
+  const userAgent = process.env.npm_config_user_agent;
+  if (!userAgent) return null;
+
+  if (userAgent.includes('bun')) return 'bun';
+  if (userAgent.includes('yarn')) return 'yarn';
+  if (userAgent.includes('pnpm')) return 'pnpm';
+  if (userAgent.includes('npm')) return 'npm';
+  
+  return null;
+}
+
+// Detect from process argv (how the CLI was invoked)
+function detectFromArgv() {
+  // process.argv[1] contains the command that was used
+  const argv1 = process.argv[1] || '';
+  
+  for (const [pattern, pm] of Object.entries(PM_DETECTION_MAP)) {
+    if (argv1.includes(pattern)) {
+      return pm;
+    }
+  }
+  
+  return null;
+}
+
+// Get package manager version
+export function getPackageManagerVersion(pm) {
+  try {
+    const version = execSync(`${pm} --version`, { encoding: 'utf-8' }).trim();
+    return version;
+  } catch {
+    return 'unknown';
+  }
+}
+
+// Detect package manager
+export function detectPackageManager() {
+  // Priority: argv > env > default
+  const detected = detectFromArgv() || detectFromEnv();
+  return detected || 'npm';
+}
+
+// Get package manager info
+export function getPackageManagerInfo(pm) {
+  const info = {
+    npm: {
+      name: 'npm',
+      installCmd: 'npm install',
+      devCmd: 'npm run dev',
+    },
+    yarn: {
+      name: 'yarn',
+      installCmd: 'yarn install',
+      devCmd: 'yarn dev',
+    },
+    pnpm: {
+      name: 'pnpm',
+      installCmd: 'pnpm install',
+      devCmd: 'pnpm dev',
+    },
+    bun: {
+      name: 'bun',
+      installCmd: 'bun install',
+      devCmd: 'bun run dev',
+    },
+  };
+
+  return info[pm] || info.npm;
+}

package/src/utils/templateDetect.js

@@ -0,0 +1,68 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get list of available templates
+export function getAvailableTemplates() {
+  // Try to load from templates.json first (works in published package and dev)
+  try {
+    const templatesJsonPath = path.join(__dirname, '..', '..', 'templates.json');
+    if (fs.existsSync(templatesJsonPath)) {
+      const content = fs.readFileSync(templatesJsonPath, 'utf-8');
+      const data = JSON.parse(content);
+      return data.templates || [];
+    }
+  } catch (err) {
+    // Fallback to directory scanning
+  }
+
+  // Fallback: scan template directories
+  const distPath = path.join(__dirname, '..', '..', 'dist');
+  const templateDir = fs.existsSync(distPath) 
+    ? distPath 
+    : path.join(__dirname, '..', '..', '..', '..', 'packages', 'template');
+  
+  if (!fs.existsSync(templateDir)) {
+    return [];
+  }
+  
+  const entries = fs.readdirSync(templateDir, { withFileTypes: true });
+  const templates = [];
+  
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    
+    const configPath = path.join(templateDir, entry.name, 'template.config.json');
+    
+    if (!fs.existsSync(configPath)) continue;
+    
+    try {
+      const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+      templates.push({
+        id: config.id || entry.name,
+        name: config.name || entry.name,
+        description: config.description,
+        features: config.features,
+      });
+    } catch {
+      console.error(`Failed to read template config for ${entry.name}`);
+    }
+  }
+  
+  return templates;
+}
+
+// Get template by id
+export function getTemplate(templateId) {
+  const templates = getAvailableTemplates();
+  return templates.find(t => t.id === templateId);
+}
+
+// Get first available template (for default)
+export function getDefaultTemplate() {
+  const templates = getAvailableTemplates();
+  return templates.length > 0 ? templates[0] : null;
+}

package/templates.json

@@ -0,0 +1,34 @@
+{
+  "templates": [
+    {
+      "id": "nextjs-vercel",
+      "name": "nextjs-vercel",
+      "description": "Modern documentation with Next.js and Vercel deployment",
+      "features": [
+        "Next.js 16",
+        "React 19",
+        "TypeScript",
+        "Tailwind CSS",
+        "MDX Support",
+        "Dark Mode",
+        "Search (Algolia)",
+        "Responsive Design"
+      ],
+      "url": "https://github.com/DocuBook/docubook/tree/main/packages/template/nextjs-vercel"
+    },
+    {
+      "id": "react-router",
+      "name": "react-router",
+      "description": "Client-side documentation with React Router",
+      "features": [
+        "React 19",
+        "React Router v6",
+        "TypeScript",
+        "Tailwind CSS",
+        "Client-side routing",
+        "Responsive Design"
+      ],
+      "url": "https://github.com/DocuBook/docubook/tree/main/packages/template/react-router"
+    }
+  ]
+}