404lab 1.0.1 → 2.0.1

package/cli/commands/add.js

@@ -0,0 +1,71 @@
+import { installMultipleTemplates } from "../core/installer.js";
+import { templateExists, resolveTemplateName } from "../core/templates.js";
+import { getProjectInfo } from "../core/project.js";
+import { log, colors } from "../ui/colors.js";
+
+export async function addCommand(templates, flags) {
+  if (!templates.length) {
+    log.error("No template specified.");
+    log.info("Usage: 404lab add <template> [templates...]");
+    process.exit(1);
+  }
+
+  const invalidTemplates = templates.filter((t) => !templateExists(t));
+
+  if (invalidTemplates.length) {
+    log.error(`Unknown template(s): ${invalidTemplates.join(", ")}`);
+    log.info("Run '404lab list' to see available templates.");
+    process.exit(1);
+  }
+
+  const projectInfo = getProjectInfo();
+
+  if (!projectInfo.valid) {
+    log.error(projectInfo.error);
+    process.exit(1);
+  }
+
+  log.success(`Next.js project detected`);
+  log.info(`Router: ${colors.cyan(projectInfo.router.type)}`);
+
+  if (projectInfo.alias.hasAlias) {
+    log.info(`Alias: ${colors.cyan(projectInfo.alias.alias)}`);
+  }
+
+  log.blank();
+
+  const isDry = flags.dry;
+  const isForce = flags.force;
+
+  if (isDry) {
+    log.warn("Dry run mode - no files will be written\n");
+  }
+
+  const results = await installMultipleTemplates(templates, {
+    force: isForce,
+    dry: isDry,
+  });
+
+  log.blank();
+
+  const successful = results.filter((r) => r.success);
+  const failed = results.filter((r) => !r.success);
+
+  if (isDry) {
+    log.info(
+      `Dry run complete. ${successful.length} template(s) would be installed.`,
+    );
+    return;
+  }
+
+  if (successful.length) {
+    log.success(`${successful.length} template(s) installed successfully.`);
+  }
+
+  if (failed.length) {
+    log.warn(`${failed.length} template(s) failed or skipped.`);
+  }
+
+  log.blank();
+  log.plain(colors.dim("Enjoy your new 404 page!"));
+}

package/cli/commands/list.js

@@ -0,0 +1,30 @@
+import { getTemplateKeys, TEMPLATES } from "../core/templates.js";
+import { getInstalledTemplates } from "../utils/config.js";
+import { colors, log } from "../ui/colors.js";
+
+export function listCommand() {
+  const keys = getTemplateKeys();
+  const installed = getInstalledTemplates();
+
+  log.blank();
+  log.plain(colors.bold("Available Templates"));
+  log.plain(colors.dim("─".repeat(40)));
+  log.blank();
+
+  const maxKeyLen = Math.max(...keys.map((k) => k.length));
+
+  keys.forEach((key) => {
+    const componentName = TEMPLATES[key];
+    const isInstalled = installed.includes(componentName);
+    const status = isInstalled ? colors.green(" ✔ installed") : "";
+    const paddedKey = key.padEnd(maxKeyLen + 2);
+
+    log.plain(
+      `  ${colors.cyan(paddedKey)}${colors.dim(componentName)}${status}`,
+    );
+  });
+
+  log.blank();
+  log.plain(colors.dim(`Total: ${keys.length} templates`));
+  log.blank();
+}

package/cli/commands/remove.js

@@ -0,0 +1,31 @@
+import { uninstallTemplate } from "../core/installer.js";
+import { templateExists } from "../core/templates.js";
+import { log } from "../ui/colors.js";
+
+export async function removeCommand(template) {
+  if (!template) {
+    log.error("No template specified.");
+    log.info("Usage: 404lab remove <template>");
+    process.exit(1);
+  }
+
+  if (!templateExists(template)) {
+    log.error(`Unknown template: ${template}`);
+    log.info("Run '404lab list' to see available templates.");
+    process.exit(1);
+  }
+
+  const result = await uninstallTemplate(template);
+
+  if (result.cancelled) {
+    log.info("Removal cancelled.");
+    return;
+  }
+
+  if (!result.success) {
+    log.error(result.error);
+    process.exit(1);
+  }
+
+  log.success(`${result.componentName} removed.`);
+}

package/cli/core/installer.js

@@ -0,0 +1,156 @@
+import path from "path";
+import { safeWrite, deleteFile, fileExists } from "../utils/fs.js";
+import {
+  addInstalledTemplate,
+  removeInstalledTemplate,
+} from "../utils/config.js";
+import { getTemplateContent, resolveTemplateName } from "./templates.js";
+import { getProjectInfo } from "./project.js";
+import { log } from "../ui/colors.js";
+import { createSpinner } from "../ui/spinner.js";
+import { confirm } from "../ui/prompt.js";
+
+function generateNotFoundContent(componentName, router, alias) {
+  const importPath = alias.hasAlias
+    ? `@/components/404/${componentName}`
+    : router.type === "app"
+      ? `../components/404/${componentName}`
+      : `../components/404/${componentName}`;
+
+  return `import ${componentName} from "${importPath}";
+
+export default function NotFoundPage() {
+  return <${componentName} />;
+}
+`;
+}
+
+function getNotFoundPath(router) {
+  if (router.type === "app") {
+    return path.join(router.path, "not-found.tsx");
+  }
+  return path.join(router.path, "404.tsx");
+}
+
+function getComponentPath(componentsDir, componentName) {
+  return path.join(componentsDir, "404", `${componentName}.tsx`);
+}
+
+export async function installTemplate(templateKey, options = {}) {
+  const { force = false, dry = false, root = process.cwd() } = options;
+
+  const componentName = resolveTemplateName(templateKey);
+
+  if (!componentName) {
+    return { success: false, error: `Unknown template: ${templateKey}` };
+  }
+
+  const projectInfo = getProjectInfo(root);
+
+  if (!projectInfo.valid) {
+    return { success: false, error: projectInfo.error };
+  }
+
+  const { router, alias, componentsDir } = projectInfo;
+
+  const spinner = createSpinner(`Installing ${componentName}...`);
+
+  if (!dry) {
+    spinner.start();
+  }
+
+  try {
+    const templateContent = getTemplateContent(componentName);
+    const componentPath = getComponentPath(componentsDir, componentName);
+    const notFoundPath = getNotFoundPath(router);
+    const notFoundContent = generateNotFoundContent(
+      componentName,
+      router,
+      alias,
+    );
+
+    if (!dry) {
+      spinner.stop();
+    }
+
+    const componentResult = await safeWrite(componentPath, templateContent, {
+      force,
+      dry,
+      root,
+    });
+
+    const notFoundResult = await safeWrite(notFoundPath, notFoundContent, {
+      force,
+      dry,
+      root,
+    });
+
+    if (!dry && (componentResult.written || notFoundResult.written)) {
+      addInstalledTemplate(componentName, root);
+    }
+
+    return {
+      success: true,
+      componentName,
+      dry,
+      files: {
+        component: componentResult,
+        notFound: notFoundResult,
+      },
+    };
+  } catch (err) {
+    if (!dry) {
+      spinner.fail(`Failed to install ${componentName}`);
+    }
+    return { success: false, error: err.message };
+  }
+}
+
+export async function installMultipleTemplates(templateKeys, options = {}) {
+  const results = [];
+
+  for (const key of templateKeys) {
+    const result = await installTemplate(key, options);
+    results.push({ key, ...result });
+
+    if (!result.success && !options.dry) {
+      log.error(result.error);
+    }
+  }
+
+  return results;
+}
+
+export async function uninstallTemplate(templateKey, options = {}) {
+  const { root = process.cwd() } = options;
+
+  const componentName = resolveTemplateName(templateKey);
+
+  if (!componentName) {
+    return { success: false, error: `Unknown template: ${templateKey}` };
+  }
+
+  const projectInfo = getProjectInfo(root);
+
+  if (!projectInfo.valid) {
+    return { success: false, error: projectInfo.error };
+  }
+
+  const { componentsDir } = projectInfo;
+  const componentPath = getComponentPath(componentsDir, componentName);
+
+  if (!fileExists(componentPath)) {
+    return { success: false, error: `${componentName} is not installed.` };
+  }
+
+  const shouldDelete = await confirm(`Remove ${componentName}?`, true);
+
+  if (!shouldDelete) {
+    return { success: false, cancelled: true };
+  }
+
+  deleteFile(componentPath);
+  removeInstalledTemplate(componentName, root);
+
+  return { success: true, componentName };
+}

package/cli/core/project.js

@@ -0,0 +1,115 @@
+import fs from "fs";
+import path from "path";
+
+export function validateNextProject(root = process.cwd()) {
+  const pkgPath = path.join(root, "package.json");
+
+  if (!fs.existsSync(pkgPath)) {
+    return {
+      valid: false,
+      error: "No package.json found. Are you in a project directory?",
+    };
+  }
+
+  let pkg;
+  try {
+    pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+  } catch {
+    return {
+      valid: false,
+      error: "Invalid package.json file.",
+    };
+  }
+
+  const hasNext = pkg.dependencies?.next || pkg.devDependencies?.next;
+
+  if (!hasNext) {
+    return {
+      valid: false,
+      error: "Next.js not found in dependencies. Is this a Next.js project?",
+    };
+  }
+
+  return { valid: true };
+}
+
+export function detectRouter(root = process.cwd()) {
+  const appDir = path.join(root, "app");
+  const srcAppDir = path.join(root, "src", "app");
+  const pagesDir = path.join(root, "pages");
+  const srcPagesDir = path.join(root, "src", "pages");
+
+  if (fs.existsSync(appDir)) return { type: "app", path: appDir };
+  if (fs.existsSync(srcAppDir)) return { type: "app", path: srcAppDir };
+  if (fs.existsSync(pagesDir)) return { type: "pages", path: pagesDir };
+  if (fs.existsSync(srcPagesDir)) return { type: "pages", path: srcPagesDir };
+
+  return null;
+}
+
+export function detectAlias(root = process.cwd()) {
+  const tsconfigPath = path.join(root, "tsconfig.json");
+  const jsconfigPath = path.join(root, "jsconfig.json");
+
+  const configPath = fs.existsSync(tsconfigPath)
+    ? tsconfigPath
+    : fs.existsSync(jsconfigPath)
+      ? jsconfigPath
+      : null;
+
+  if (!configPath) {
+    return { hasAlias: false, alias: null };
+  }
+
+  try {
+    const config = JSON.parse(fs.readFileSync(configPath, "utf8"));
+    const paths = config.compilerOptions?.paths;
+
+    if (paths?.["@/*"]) {
+      return { hasAlias: true, alias: "@" };
+    }
+
+    return { hasAlias: false, alias: null };
+  } catch {
+    return { hasAlias: false, alias: null };
+  }
+}
+
+export function getComponentsDir(root = process.cwd()) {
+  const srcComponents = path.join(root, "src", "components");
+  const rootComponents = path.join(root, "components");
+
+  if (fs.existsSync(path.join(root, "src"))) {
+    return srcComponents;
+  }
+
+  return rootComponents;
+}
+
+export function getProjectInfo(root = process.cwd()) {
+  const validation = validateNextProject(root);
+
+  if (!validation.valid) {
+    return { valid: false, error: validation.error };
+  }
+
+  const router = detectRouter(root);
+
+  if (!router) {
+    return {
+      valid: false,
+      error: "No app/ or pages/ directory found. Create one first.",
+    };
+  }
+
+  const alias = detectAlias(root);
+  const componentsDir = getComponentsDir(root);
+
+  return {
+    valid: true,
+    router,
+    alias,
+    componentsDir,
+    root,
+  };
+}

package/cli/core/templates.js

@@ -0,0 +1,65 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const TEMPLATES_DIR = path.join(__dirname, "..", "..", "templates");
+
+export const TEMPLATES = {
+  stoneage: "StoneAge",
+  amongus: "AmongUs",
+  blueglitch: "BlueGlitch",
+  geeksforgeeks: "GeeksforGeeks",
+  google: "Google",
+  macos: "MacOs",
+  modern: "ModernPage",
+  particles: "Particles",
+  poet: "Poet",
+  retro: "RetroTv",
+  simple: "SimplePage",
+  snow: "Snow",
+  strangethings: "StrangerThings",
+  terminal: "Terminal404",
+};
+
+export function getTemplateKeys() {
+  return Object.keys(TEMPLATES).sort();
+}
+
+export function resolveTemplateName(key) {
+  const normalized = key.toLowerCase();
+  return TEMPLATES[normalized] || null;
+}
+
+export function templateExists(key) {
+  return resolveTemplateName(key) !== null;
+}
+
+export function getTemplateContent(componentName) {
+  const templatePath = path.join(TEMPLATES_DIR, `${componentName}.tsx`);
+
+  if (!fs.existsSync(templatePath)) {
+    throw new Error(`Template file not found: ${componentName}.tsx`);
+  }
+
+  return fs.readFileSync(templatePath, "utf8");
+}
+
+export function getTemplateInfo(key) {
+  const componentName = resolveTemplateName(key);
+
+  if (!componentName) {
+    return null;
+  }
+
+  return {
+    key,
+    componentName,
+    filename: `${componentName}.tsx`,
+  };
+}
+
+export function getAllTemplateInfo() {
+  return getTemplateKeys().map((key) => getTemplateInfo(key));
+}

package/cli/index.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+
+import { addCommand } from "./commands/add.js";
+import { removeCommand } from "./commands/remove.js";
+import { listCommand } from "./commands/list.js";
+import { colors, log } from "./ui/colors.js";
+
+const VERSION = "2.0.0";
+
+function parseArgs(argv) {
+  const args = argv.slice(2);
+  const command = args[0];
+  const positional = [];
+  const flags = {
+    help: false,
+    version: false,
+    force: false,
+    dry: false,
+  };
+
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg === "--help" || arg === "-h") {
+      flags.help = true;
+    } else if (arg === "--version" || arg === "-v") {
+      flags.version = true;
+    } else if (arg === "--force" || arg === "-f") {
+      flags.force = true;
+    } else if (arg === "--dry" || arg === "-d") {
+      flags.dry = true;
+    } else if (!arg.startsWith("-")) {
+      positional.push(arg.toLowerCase());
+    }
+  }
+
+  if (args.includes("--help") || args.includes("-h")) {
+    flags.help = true;
+  }
+
+  if (args.includes("--version") || args.includes("-v")) {
+    flags.version = true;
+  }
+
+  return { command, positional, flags };
+}
+
+function showHelp() {
+  console.log(`
+${colors.bold("404lab")} ${colors.dim(`v${VERSION}`)}
+${colors.cyan("Generate beautiful 404 pages for Next.js")}
+
+${colors.bold("Usage:")}
+  404lab ${colors.cyan("<command>")} [options]
+
+${colors.bold("Commands:")}
+  ${colors.cyan("add")} <templates...>    Install one or more templates
+  ${colors.cyan("remove")} <template>     Remove an installed template
+  ${colors.cyan("list")}                  Show all available templates
+
+${colors.bold("Options:")}
+  ${colors.cyan("--force")}, ${colors.cyan("-f")}           Overwrite existing files without asking
+  ${colors.cyan("--dry")}, ${colors.cyan("-d")}             Simulate install (no files written)
+  ${colors.cyan("--help")}, ${colors.cyan("-h")}            Show this help message
+  ${colors.cyan("--version")}, ${colors.cyan("-v")}         Show version number
+
+${colors.bold("Examples:")}
+  ${colors.dim("$")} 404lab add macos
+  ${colors.dim("$")} 404lab add snow retro terminal
+  ${colors.dim("$")} 404lab add macos --dry
+  ${colors.dim("$")} 404lab add macos --force
+  ${colors.dim("$")} 404lab remove macos
+  ${colors.dim("$")} 404lab list
+
+${colors.dim("Documentation: https://github.com/yourusername/404lab")}
+`);
+}
+
+function showVersion() {
+  console.log(`404lab v${VERSION}`);
+}
+
+async function main() {
+  const { command, positional, flags } = parseArgs(process.argv);
+
+  if (flags.version) {
+    showVersion();
+    return;
+  }
+
+  if (!command || flags.help) {
+    showHelp();
+    return;
+  }
+
+  switch (command) {
+    case "add":
+      await addCommand(positional, flags);
+      break;
+
+    case "remove":
+      await removeCommand(positional[0]);
+      break;
+
+    case "list":
+      listCommand();
+      break;
+
+    default:
+      log.error(`Unknown command: ${command}`);
+      log.info("Run '404lab --help' for usage information.");
+      process.exit(1);
+  }
+}
+
+main().catch((err) => {
+  log.error(err.message);
+  process.exit(1);
+});

package/cli/ui/colors.js

@@ -0,0 +1,38 @@
+const codes = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
+  white: "\x1b[37m",
+  gray: "\x1b[90m",
+};
+
+const wrap = (code) => (text) => `${code}${text}${codes.reset}`;
+
+export const colors = {
+  red: wrap(codes.red),
+  green: wrap(codes.green),
+  yellow: wrap(codes.yellow),
+  blue: wrap(codes.blue),
+  magenta: wrap(codes.magenta),
+  cyan: wrap(codes.cyan),
+  white: wrap(codes.white),
+  gray: wrap(codes.gray),
+  bold: wrap(codes.bold),
+  dim: wrap(codes.dim),
+};
+
+export const log = {
+  info: (msg) => console.log(`${codes.cyan}ℹ${codes.reset} ${msg}`),
+  success: (msg) => console.log(`${codes.green}✔${codes.reset} ${msg}`),
+  warn: (msg) => console.log(`${codes.yellow}⚠${codes.reset} ${msg}`),
+  error: (msg) => console.error(`${codes.red}✖${codes.reset} ${msg}`),
+  plain: (msg) => console.log(msg),
+  blank: () => console.log(""),
+};

package/cli/ui/prompt.js

@@ -0,0 +1,50 @@
+import readline from "readline";
+import { colors } from "./colors.js";
+
+export function prompt(question, defaultValue = "") {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      const trimmed = answer.trim();
+      resolve(trimmed || defaultValue);
+    });
+  });
+}
+
+export async function confirm(message, defaultNo = true) {
+  const hint = defaultNo ? "y/N" : "Y/n";
+  const question = `${colors.cyan("?")} ${message} ${colors.dim(`(${hint})`)} `;
+
+  const answer = await prompt(question);
+  const lower = answer.toLowerCase();
+
+  if (defaultNo) {
+    return lower === "y" || lower === "yes";
+  }
+
+  return lower !== "n" && lower !== "no";
+}
+
+export async function select(message, options) {
+  console.log(`\n${colors.cyan("?")} ${message}\n`);
+
+  options.forEach((opt, i) => {
+    console.log(`  ${colors.cyan(`${i + 1}.`)} ${opt}`);
+  });
+
+  console.log("");
+
+  const answer = await prompt(`${colors.dim("Enter number:")} `);
+  const index = parseInt(answer, 10) - 1;
+
+  if (index >= 0 && index < options.length) {
+    return options[index];
+  }
+
+  return null;
+}

package/cli/ui/spinner.js

@@ -0,0 +1,63 @@
+import { colors } from "./colors.js";
+
+const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function createSpinner(text) {
+  let frameIndex = 0;
+  let interval = null;
+  let currentText = text;
+
+  const clear = () => {
+    process.stdout.clearLine?.(0);
+    process.stdout.cursorTo?.(0);
+  };
+
+  const render = () => {
+    clear();
+    const frame = colors.cyan(frames[frameIndex]);
+    process.stdout.write(`${frame} ${currentText}`);
+    frameIndex = (frameIndex + 1) % frames.length;
+  };
+
+  return {
+    start(msg) {
+      if (msg) currentText = msg;
+      if (interval) return this;
+      interval = setInterval(render, 80);
+      render();
+      return this;
+    },
+
+    update(msg) {
+      currentText = msg;
+      return this;
+    },
+
+    stop() {
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+        clear();
+      }
+      return this;
+    },
+
+    success(msg) {
+      this.stop();
+      console.log(`${colors.green("✔")} ${msg || currentText}`);
+      return this;
+    },
+
+    fail(msg) {
+      this.stop();
+      console.log(`${colors.red("✖")} ${msg || currentText}`);
+      return this;
+    },
+
+    warn(msg) {
+      this.stop();
+      console.log(`${colors.yellow("⚠")} ${msg || currentText}`);
+      return this;
+    },
+  };
+}

package/cli/utils/config.js

@@ -0,0 +1,55 @@
+import fs from "fs";
+import path from "path";
+
+const CONFIG_FILE = "404lab.config.json";
+
+export function getConfigPath(root = process.cwd()) {
+  return path.join(root, CONFIG_FILE);
+}
+
+export function loadConfig(root = process.cwd()) {
+  const configPath = getConfigPath(root);
+
+  if (!fs.existsSync(configPath)) {
+    return { installed: [] };
+  }
+
+  try {
+    return JSON.parse(fs.readFileSync(configPath, "utf8"));
+  } catch {
+    return { installed: [] };
+  }
+}
+
+export function saveConfig(config, root = process.cwd()) {
+  const configPath = getConfigPath(root);
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+}
+
+export function addInstalledTemplate(templateName, root = process.cwd()) {
+  const config = loadConfig(root);
+
+  if (!config.installed.includes(templateName)) {
+    config.installed.push(templateName);
+    saveConfig(config, root);
+  }
+
+  return config;
+}
+
+export function removeInstalledTemplate(templateName, root = process.cwd()) {
+  const config = loadConfig(root);
+  config.installed = config.installed.filter((t) => t !== templateName);
+  saveConfig(config, root);
+  return config;
+}
+
+export function isTemplateInstalled(templateName, root = process.cwd()) {
+  const config = loadConfig(root);
+  return config.installed.includes(templateName);
+}
+
+export function getInstalledTemplates(root = process.cwd()) {
+  const config = loadConfig(root);
+  return config.installed;
+}

package/cli/utils/fs.js

@@ -0,0 +1,69 @@
+import fs from "fs";
+import path from "path";
+import { log } from "../ui/colors.js";
+import { confirm } from "../ui/prompt.js";
+
+export function ensureDir(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+}
+
+export function fileExists(filePath) {
+  return fs.existsSync(filePath);
+}
+
+export function readFileContent(filePath) {
+  return fs.readFileSync(filePath, "utf8");
+}
+
+export function writeFileContent(filePath, content) {
+  ensureDir(path.dirname(filePath));
+  fs.writeFileSync(filePath, content, "utf8");
+}
+
+export function deleteFile(filePath) {
+  if (fs.existsSync(filePath)) {
+    fs.unlinkSync(filePath);
+    return true;
+  }
+  return false;
+}
+
+export function relativePath(from, to) {
+  return path.relative(from, to);
+}
+
+export async function safeWrite(filePath, content, options = {}) {
+  const { force = false, dry = false, root = process.cwd() } = options;
+  const relPath = path.relative(root, filePath);
+
+  if (dry) {
+    log.info(`Would create: ${relPath}`);
+    return { written: false, skipped: false, dry: true };
+  }
+
+  if (fs.existsSync(filePath)) {
+    if (force) {
+      writeFileContent(filePath, content);
+      log.warn(`Overwritten: ${relPath}`);
+      return { written: true, skipped: false, overwritten: true };
+    }
+
+    log.warn(`File exists: ${relPath}`);
+    const shouldOverwrite = await confirm("Overwrite?", true);
+
+    if (!shouldOverwrite) {
+      log.info(`Skipped: ${relPath}`);
+      return { written: false, skipped: true };
+    }
+
+    writeFileContent(filePath, content);
+    log.success(`Overwritten: ${relPath}`);
+    return { written: true, skipped: false, overwritten: true };
+  }
+
+  writeFileContent(filePath, content);
+  log.success(`Created: ${relPath}`);
+  return { written: true, skipped: false };
+}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "404lab",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "description": "A CLI tool for generating beautiful custom 404 pages in Next.js projects",
   "type": "module",
   "preferGlobal": true,
   "bin": {
-    "404lab": "./bin/index.js"
+    "404lab": "./cli/index.js"
   },
   "files": [
-    "bin",
+    "cli",
     "templates",
     "README.md"
   ],

package/bin/index.js

@@ -1,188 +0,0 @@
-#!/usr/bin/env node
-
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-/**
- * Resolve __dirname equivalent for ES modules
- */
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-/**
- * Supported templates mapped to component names
- */
-const TEMPLATES = {
-  stoneage: "StoneAge",
-  amongus: "AmongUs",
-  blueglitch: "BlueGlitch",
-  geeksforgeeks: "GeeksforGeeks",
-  google: "Google",
-  macos: "MacOs",
-  modern: "ModernPage",
-  particles: "Particles",
-  poet: "Poet",
-  retro: "RetroTv",
-  simple: "SimplePage",
-  snow: "Snow",
-  strangethings: "StrangerThings",
-  terminal: "Terminal404",
-};
-
-/**
- * Read template content from templates directory
- */
-function getTemplateContent(componentName) {
-  const templatesDir = path.join(__dirname, "..", "templates");
-  const templatePath = path.join(templatesDir, `${componentName}.tsx`);
-
-  if (!fs.existsSync(templatePath)) {
-    throw new Error(`Template "${componentName}" not found`);
-  }
-
-  return fs.readFileSync(templatePath, "utf-8");
-}
-
-/**
- * Create the 404 component file
- */
-function createComponentFile(componentName, templateContent) {
-  const componentDir = path.join(process.cwd(), "components", "404");
-  const componentPath = path.join(componentDir, `${componentName}.tsx`);
-
-  fs.mkdirSync(componentDir, { recursive: true });
-  fs.writeFileSync(componentPath, templateContent, "utf-8");
-
-  return componentPath;
-}
-
-/**
- * Create or overwrite app/not-found.tsx
- */
-function createNotFoundPage(componentName) {
-  const appDir = path.join(process.cwd(), "app");
-  const notFoundPath = path.join(appDir, "not-found.tsx");
-
-  fs.mkdirSync(appDir, { recursive: true });
-
-  const content = `import ${componentName} from "@/components/404/${componentName}";
-
-export default function NotFoundPage() {
-  return <${componentName} />;
-}
-`;
-
-  fs.writeFileSync(notFoundPath, content, "utf-8");
-
-  return notFoundPath;
-}
-
-/**
- * Display help information
- */
-function showHelp() {
-  console.log(`
-404lab — Custom 404 Page Generator for Next.js (App Router)
-
-Usage:
-  404lab add <template>     Generate a 404 page from a template
-  404lab list              List all available templates
-  404lab --help            Show this help message
-
-Available Templates:
-${Object.keys(TEMPLATES)
-  .sort()
-  .map((t) => `  ${t}`)
-  .join("\n")}
-
-Examples:
-  404lab add stoneage
-  404lab add amongus
-  404lab add macos
-
-Generated Files:
-  components/404/<Template>.tsx
-  app/not-found.tsx (overwritten if it already exists)
-`);
-}
-
-/**
- * List available templates
- */
-function listTemplates() {
-  console.log("\nAvailable 404 Templates:\n");
-
-  Object.keys(TEMPLATES)
-    .sort()
-    .forEach((name) => {
-      console.log(`  ${name}`);
-    });
-
-  console.log("\nUsage: 404lab add <template>\n");
-}
-
-/**
- * Main CLI entry point
- */
-function main() {
-  const args = process.argv.slice(2);
-
-  if (args.length === 0 || args.includes("--help") || args.includes("-h")) {
-    showHelp();
-    process.exit(0);
-  }
-
-  if (args[0] === "list" || args[0] === "ls") {
-    listTemplates();
-    process.exit(0);
-  }
-
-  if (args[0] !== "add") {
-    console.error(`Error: Unknown command "${args[0]}"`);
-    console.log('Run "404lab --help" for usage information.');
-    process.exit(1);
-  }
-
-  if (!args[1]) {
-    console.error("Error: Template name is required.");
-    console.log("Usage: 404lab add <template>");
-    console.log("Available templates:", Object.keys(TEMPLATES).join(", "));
-    process.exit(1);
-  }
-
-  const templateKey = args[1].toLowerCase();
-  const componentName = TEMPLATES[templateKey];
-
-  if (!componentName) {
-    console.error(`Error: Template "${templateKey}" does not exist.`);
-    console.log("Available templates:", Object.keys(TEMPLATES).join(", "));
-    console.log('Run "404lab list" to view all templates.');
-    process.exit(1);
-  }
-
-  try {
-    console.log(`Installing 404 template: ${componentName}`);
-
-    const templateContent = getTemplateContent(componentName);
-
-    const componentPath = createComponentFile(componentName, templateContent);
-    console.log(`Created: ${path.relative(process.cwd(), componentPath)}`);
-
-    const notFoundPath = createNotFoundPage(componentName);
-    console.log(`Created: ${path.relative(process.cwd(), notFoundPath)}`);
-
-    console.log("\n404 page successfully installed.");
-    console.log("Next steps:");
-    console.log("  1. Start your Next.js development server.");
-    console.log("  2. Visit a non-existent route to view the 404 page.");
-    console.log(
-      `  3. Customize components/404/${componentName}.tsx as needed.\n`,
-    );
-  } catch (error) {
-    console.error("Error generating files:", error.message);
-    process.exit(1);
-  }
-}
-
-main();