create-unmint 1.1.1 → 1.3.0

package/dist/index.js

@@ -2,9 +2,11 @@
 
 // src/index.ts
 import { Command } from "commander";
-import chalk4 from "chalk";
+import chalk5 from "chalk";
 import figlet from "figlet";
 import gradient from "gradient-string";
+import fs7 from "fs-extra";
+import path7 from "path";
 
 // src/commands/init.ts
 import fs2 from "fs-extra";
@@ -109,6 +111,66 @@ function getDefaultConfig(projectName) {
     installDeps: true
   };
 }
+async function promptAddConfig(hasExistingDocs, customPath) {
+  const answers = await inquirer.prompt([
+    {
+      type: "input",
+      name: "docsRoute",
+      message: "Add Unmint docs at which route?",
+      default: customPath || (hasExistingDocs ? "/documentation" : "/docs"),
+      validate: (input) => {
+        if (!input.startsWith("/")) return "Route must start with /";
+        if (!/^\/[a-z0-9-/]*$/i.test(input)) {
+          return "Route can only contain letters, numbers, hyphens, and slashes";
+        }
+        return true;
+      }
+    },
+    {
+      type: "input",
+      name: "title",
+      message: "Docs title:",
+      default: "Documentation"
+    },
+    {
+      type: "input",
+      name: "description",
+      message: "Docs description:",
+      default: "Documentation for your project"
+    },
+    {
+      type: "list",
+      name: "accentColor",
+      message: "Accent color:",
+      choices: accentColors.map((c) => ({
+        name: c.name === "Cyan" ? `${c.name} ${chalk.dim("(default)")}` : c.name,
+        value: c.value
+      })),
+      default: "#0891b2"
+    },
+    {
+      type: "input",
+      name: "customAccent",
+      message: "Custom accent color (hex):",
+      when: (answers2) => answers2.accentColor === "custom",
+      validate: (input) => {
+        if (!/^#[0-9a-f]{6}$/i.test(input)) {
+          return "Please enter a valid hex color (e.g., #ff5733)";
+        }
+        return true;
+      }
+    }
+  ]);
+  if (answers.accentColor === "custom" && answers.customAccent) {
+    answers.accentColor = answers.customAccent;
+  }
+  return {
+    docsRoute: answers.docsRoute,
+    title: answers.title,
+    description: answers.description,
+    accentColor: answers.accentColor
+  };
+}
 
 // src/scaffold.ts
 import fs from "fs-extra";
@@ -488,6 +550,588 @@ async function applyUpdates(projectDir, changes) {
   return results;
 }
 
+// src/commands/add.ts
+import chalk4 from "chalk";
+import ora3 from "ora";
+import path6 from "path";
+import fs6 from "fs-extra";
+import { execa as execa2 } from "execa";
+
+// src/utils/detect-project.ts
+import fs4 from "fs-extra";
+import path4 from "path";
+async function detectProject(cwd) {
+  const result = {
+    isExistingProject: false,
+    framework: "unknown",
+    useSrcDir: false,
+    appDir: "app",
+    hasExistingDocs: false,
+    hasFumadocs: false,
+    packageManager: "npm",
+    nextConfigPath: null,
+    globalsCssPath: null,
+    tailwindConfigPath: null
+  };
+  const packageJsonPath = path4.join(cwd, "package.json");
+  if (!await fs4.pathExists(packageJsonPath)) {
+    return result;
+  }
+  result.isExistingProject = true;
+  const nextConfigExtensions = ["js", "ts", "mjs"];
+  for (const ext of nextConfigExtensions) {
+    const configPath = path4.join(cwd, `next.config.${ext}`);
+    if (await fs4.pathExists(configPath)) {
+      result.nextConfigPath = configPath;
+      break;
+    }
+  }
+  if (!result.nextConfigPath) {
+    return result;
+  }
+  const srcAppPath = path4.join(cwd, "src/app");
+  const appPath = path4.join(cwd, "app");
+  if (await fs4.pathExists(srcAppPath)) {
+    result.useSrcDir = true;
+    result.appDir = "src/app";
+    result.framework = "next-app";
+  } else if (await fs4.pathExists(appPath)) {
+    result.useSrcDir = false;
+    result.appDir = "app";
+    result.framework = "next-app";
+  } else {
+    const pagesPath = path4.join(cwd, "pages");
+    const srcPagesPath = path4.join(cwd, "src/pages");
+    if (await fs4.pathExists(pagesPath) || await fs4.pathExists(srcPagesPath)) {
+      result.framework = "next-pages";
+    }
+    return result;
+  }
+  const docsPath = path4.join(cwd, result.appDir, "docs");
+  result.hasExistingDocs = await fs4.pathExists(docsPath);
+  try {
+    const pkg = await fs4.readJson(packageJsonPath);
+    const allDeps = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies
+    };
+    result.hasFumadocs = "fumadocs-core" in allDeps || "fumadocs-mdx" in allDeps;
+  } catch {
+  }
+  result.packageManager = await detectPackageManager2(cwd);
+  const globalsCssPaths = [
+    path4.join(cwd, result.appDir, "globals.css"),
+    path4.join(cwd, "src/styles/globals.css"),
+    path4.join(cwd, "styles/globals.css")
+  ];
+  for (const cssPath of globalsCssPaths) {
+    if (await fs4.pathExists(cssPath)) {
+      result.globalsCssPath = cssPath;
+      break;
+    }
+  }
+  const tailwindConfigExtensions = ["ts", "js", "mjs"];
+  for (const ext of tailwindConfigExtensions) {
+    const configPath = path4.join(cwd, `tailwind.config.${ext}`);
+    if (await fs4.pathExists(configPath)) {
+      result.tailwindConfigPath = configPath;
+      break;
+    }
+  }
+  return result;
+}
+async function detectPackageManager2(cwd) {
+  if (await fs4.pathExists(path4.join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (await fs4.pathExists(path4.join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  if (await fs4.pathExists(path4.join(cwd, "bun.lockb"))) {
+    return "bun";
+  }
+  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";
+}
+function validateProjectForAdd(info) {
+  if (!info.isExistingProject) {
+    return {
+      valid: false,
+      error: 'No package.json found. Use "npx create-unmint my-docs" to create a new project.'
+    };
+  }
+  if (!info.nextConfigPath) {
+    return {
+      valid: false,
+      error: "No Next.js config found. This directory does not appear to be a Next.js project."
+    };
+  }
+  if (info.framework === "next-pages") {
+    return {
+      valid: false,
+      error: "Unmint requires App Router. Your project appears to use Pages Router."
+    };
+  }
+  if (info.framework === "unknown") {
+    return {
+      valid: false,
+      error: "Could not detect app directory. Make sure your project uses the Next.js App Router."
+    };
+  }
+  return { valid: true };
+}
+
+// src/utils/merge.ts
+import fs5 from "fs-extra";
+import path5 from "path";
+var UNMINT_DEPENDENCIES = {
+  "fumadocs-core": "^16.4.7",
+  "fumadocs-mdx": "^14.2.5"
+};
+async function mergeDependencies(packageJsonPath, depsToAdd = UNMINT_DEPENDENCIES) {
+  const pkg = await fs5.readJson(packageJsonPath);
+  const added = [];
+  const skipped = [];
+  pkg.dependencies = pkg.dependencies || {};
+  for (const [name, version] of Object.entries(depsToAdd)) {
+    if (pkg.dependencies[name] || pkg.devDependencies?.[name]) {
+      skipped.push(name);
+    } else {
+      pkg.dependencies[name] = version;
+      added.push(name);
+    }
+  }
+  pkg.dependencies = Object.fromEntries(
+    Object.entries(pkg.dependencies).sort(([a], [b]) => a.localeCompare(b))
+  );
+  await fs5.writeJson(packageJsonPath, pkg, { spaces: 2 });
+  return { added, skipped };
+}
+function getUnmintCssVariables(accentColor, darkAccentColor) {
+  return `
+/* Unmint Docs - Scoped accent colors */
+.unmint-docs {
+  --accent: ${accentColor};
+  --accent-foreground: #ffffff;
+  --accent-muted: ${hexToRgba(accentColor, 0.1)};
+}
+
+.dark .unmint-docs {
+  --accent: ${darkAccentColor};
+  --accent-foreground: #0f172a;
+  --accent-muted: ${hexToRgba(darkAccentColor, 0.1)};
+}
+
+/* Syntax highlighting - Shiki integration for docs */
+.unmint-docs pre code span {
+  color: var(--shiki-light);
+}
+
+.dark .unmint-docs pre code span {
+  color: var(--shiki-dark);
+}
+`;
+}
+async function mergeGlobalsCss(globalsCssPath, accentColor, darkAccentColor) {
+  const existing = await fs5.readFile(globalsCssPath, "utf-8");
+  if (existing.includes(".unmint-docs")) {
+    return false;
+  }
+  const cssToAdd = getUnmintCssVariables(accentColor, darkAccentColor);
+  await fs5.appendFile(globalsCssPath, cssToAdd);
+  return true;
+}
+async function wrapNextConfig(nextConfigPath) {
+  const existing = await fs5.readFile(nextConfigPath, "utf-8");
+  if (existing.includes("fumadocs-mdx") || existing.includes("createMDX")) {
+    return false;
+  }
+  const ext = path5.extname(nextConfigPath);
+  let modified;
+  if (ext === ".ts") {
+    modified = wrapTypescriptConfig(existing);
+  } else {
+    modified = wrapJavascriptConfig(existing);
+  }
+  await fs5.writeFile(nextConfigPath, modified);
+  return true;
+}
+function wrapTypescriptConfig(existing) {
+  const importLine = "import { createMDX } from 'fumadocs-mdx/next'\n";
+  const exportMatch = existing.match(/export\s+default\s+(\w+)/);
+  if (exportMatch) {
+    const configName = exportMatch[1];
+    let modified = importLine + existing;
+    modified = modified.replace(
+      /export\s+default\s+\w+/,
+      `const withMDX = createMDX()
+
+export default withMDX(${configName})`
+    );
+    return modified;
+  }
+  if (existing.includes("export default {")) {
+    let modified = importLine + existing.replace(
+      "export default {",
+      "const nextConfig = {"
+    );
+    modified = modified.trimEnd() + "\n\nconst withMDX = createMDX()\n\nexport default withMDX(nextConfig)\n";
+    return modified;
+  }
+  return importLine + existing;
+}
+function wrapJavascriptConfig(existing) {
+  const isESM = existing.includes("export default") || existing.includes("import ");
+  if (isESM) {
+    const importLine = "import { createMDX } from 'fumadocs-mdx/next'\n";
+    const exportMatch = existing.match(/export\s+default\s+(\w+)/);
+    if (exportMatch) {
+      const configName = exportMatch[1];
+      let modified = importLine + existing;
+      modified = modified.replace(
+        /export\s+default\s+\w+/,
+        `const withMDX = createMDX()
+
+export default withMDX(${configName})`
+      );
+      return modified;
+    }
+    if (existing.includes("export default {")) {
+      let modified = importLine + existing.replace(
+        "export default {",
+        "const nextConfig = {"
+      );
+      modified = modified.trimEnd() + "\n\nconst withMDX = createMDX()\n\nexport default withMDX(nextConfig)\n";
+      return modified;
+    }
+    return importLine + existing;
+  }
+  const requireLine = "const { createMDX } = require('fumadocs-mdx/next')\n";
+  if (existing.includes("module.exports")) {
+    let modified = requireLine + existing.replace(
+      /module\.exports\s*=\s*(\w+)/,
+      (_, configName) => `const withMDX = createMDX()
+
+module.exports = withMDX(${configName})`
+    );
+    return modified;
+  }
+  return requireLine + existing;
+}
+function hexToRgba(hex, alpha) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return `rgba(0, 0, 0, ${alpha})`;
+  const r = parseInt(result[1], 16);
+  const g = parseInt(result[2], 16);
+  const b = parseInt(result[3], 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function lightenColor2(hex, percent = 30) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return hex;
+  let r = parseInt(result[1], 16);
+  let g = parseInt(result[2], 16);
+  let b = parseInt(result[3], 16);
+  r = Math.min(255, Math.floor(r + (255 - r) * (percent / 100)));
+  g = Math.min(255, Math.floor(g + (255 - g) * (percent / 100)));
+  b = Math.min(255, Math.floor(b + (255 - b) * (percent / 100)));
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+async function createSourceConfig(targetDir) {
+  const sourceConfigPath = path5.join(targetDir, "source.config.ts");
+  if (await fs5.pathExists(sourceConfigPath)) {
+    return;
+  }
+  const content = `import { defineConfig, defineDocs } from 'fumadocs-mdx/config'
+import { rehypeCode } from 'fumadocs-core/mdx-plugins'
+
+export const docs = defineDocs({
+  dir: 'content/docs',
+})
+
+export default defineConfig({
+  mdxOptions: {
+    rehypePlugins: [
+      [
+        rehypeCode,
+        {
+          themes: {
+            light: 'github-light',
+            dark: 'github-dark',
+          },
+        },
+      ],
+    ],
+  },
+})
+`;
+  await fs5.writeFile(sourceConfigPath, content);
+}
+async function createMdxComponents(targetDir, appDir) {
+  const mdxComponentsPath = path5.join(targetDir, "mdx-components.tsx");
+  if (await fs5.pathExists(mdxComponentsPath)) {
+    return;
+  }
+  const componentsPath = appDir.includes("src") ? "@/app/components/docs/mdx" : "@/app/components/docs/mdx";
+  const content = `import type { MDXComponents } from 'mdx/types'
+import defaultComponents from 'fumadocs-ui/mdx'
+import { Accordion } from '${componentsPath}/accordion'
+import { Callout, Note, Tip, Warning, Info } from '${componentsPath}/callout'
+import { Card, CardGroup } from '${componentsPath}/card'
+import { CodeBlock } from '${componentsPath}/code-block'
+import { Frame } from '${componentsPath}/frame'
+import { Steps, Step } from '${componentsPath}/steps'
+import { Tab, Tabs } from '${componentsPath}/tabs'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...defaultComponents,
+    ...components,
+    Accordion,
+    Callout,
+    Note,
+    Tip,
+    Warning,
+    Info,
+    Card,
+    CardGroup,
+    CodeBlock,
+    Frame,
+    Steps,
+    Step,
+    Tab,
+    Tabs,
+  }
+}
+`;
+  await fs5.writeFile(mdxComponentsPath, content);
+}
+
+// src/commands/add.ts
+async function add(options = {}) {
+  const cwd = process.cwd();
+  const spinner = ora3("Detecting project...").start();
+  const projectInfo = await detectProject(cwd);
+  const validation = validateProjectForAdd(projectInfo);
+  if (!validation.valid) {
+    spinner.fail(validation.error);
+    process.exit(1);
+  }
+  spinner.succeed(`Detected Next.js project (App Router)`);
+  console.log(chalk4.dim(`  Using ${projectInfo.useSrcDir ? "src/app" : "app"} directory structure`));
+  console.log();
+  if (projectInfo.hasExistingDocs && !options.path) {
+    console.log(chalk4.yellow("\u26A0 A /docs route already exists in this project."));
+    console.log(chalk4.dim("  Use --path to specify a different route (e.g., --path /documentation)"));
+    console.log();
+  }
+  const config = options.yes ? getDefaultAddConfig(options.path) : await promptAddConfig(projectInfo.hasExistingDocs, options.path);
+  const docsRoutePath = path6.join(cwd, projectInfo.appDir, config.docsRoute.replace(/^\//, ""));
+  if (await fs6.pathExists(docsRoutePath)) {
+    console.log(chalk4.red(`
+\u2716 The route ${config.docsRoute} already exists at ${docsRoutePath}`));
+    console.log(chalk4.dim("  Choose a different route or manually merge the directories."));
+    process.exit(1);
+  }
+  console.log();
+  console.log(chalk4.cyan("  Adding Unmint to your project..."));
+  console.log();
+  await copyDocsFiles(cwd, projectInfo, config);
+  await mergeConfigurations(cwd, projectInfo, config);
+  await installDependencies(cwd, projectInfo.packageManager);
+  printSuccessMessage(config, projectInfo.packageManager);
+}
+function getDefaultAddConfig(customPath) {
+  return {
+    docsRoute: customPath || "/docs",
+    title: "Documentation",
+    description: "Documentation for your project",
+    accentColor: "#0891b2"
+  };
+}
+async function copyDocsFiles(cwd, projectInfo, config) {
+  const spinner = ora3("Copying docs files...").start();
+  const templateDir = await resolveTemplateDir();
+  const appDir = projectInfo.appDir;
+  const routeName = config.docsRoute.replace(/^\//, "");
+  const libDir = projectInfo.useSrcDir ? "src/lib" : "lib";
+  const copyOperations = [
+    // Docs route
+    {
+      from: path6.join(templateDir, "app/docs"),
+      to: path6.join(cwd, appDir, routeName)
+    },
+    // Docs components
+    {
+      from: path6.join(templateDir, "app/components/docs"),
+      to: path6.join(cwd, appDir, "components/docs")
+    },
+    // Providers (theme provider)
+    {
+      from: path6.join(templateDir, "app/providers"),
+      to: path6.join(cwd, appDir, "providers")
+    },
+    // API routes
+    {
+      from: path6.join(templateDir, "app/api/search"),
+      to: path6.join(cwd, appDir, "api/search")
+    },
+    {
+      from: path6.join(templateDir, "app/api/og"),
+      to: path6.join(cwd, appDir, "api/og")
+    },
+    // Content (always at root)
+    {
+      from: path6.join(templateDir, "content/docs"),
+      to: path6.join(cwd, "content/docs")
+    },
+    // Lib files (in src/lib if using src directory)
+    {
+      from: path6.join(templateDir, "lib/docs-source.ts"),
+      to: path6.join(cwd, libDir, "docs-source.ts")
+    },
+    {
+      from: path6.join(templateDir, "lib/theme-config.ts"),
+      to: path6.join(cwd, libDir, "unmint-config.ts")
+    },
+    // Logo files (copy to public directory if not present)
+    {
+      from: path6.join(templateDir, "public/logo.svg"),
+      to: path6.join(cwd, "public/logo.svg")
+    },
+    {
+      from: path6.join(templateDir, "public/logo.png"),
+      to: path6.join(cwd, "public/logo.png")
+    }
+  ];
+  await fs6.ensureDir(path6.join(cwd, "public"));
+  await fs6.ensureDir(path6.join(cwd, libDir));
+  for (const op of copyOperations) {
+    if (await fs6.pathExists(op.from)) {
+      await fs6.copy(op.from, op.to, { overwrite: false });
+    }
+  }
+  const utilsPath = path6.join(cwd, libDir, "utils.ts");
+  if (!await fs6.pathExists(utilsPath)) {
+    await fs6.copy(
+      path6.join(templateDir, "lib/utils.ts"),
+      utilsPath
+    );
+  }
+  if (projectInfo.useSrcDir) {
+    const docsSourcePath = path6.join(cwd, libDir, "docs-source.ts");
+    if (await fs6.pathExists(docsSourcePath)) {
+      let content = await fs6.readFile(docsSourcePath, "utf-8");
+      content = content.replace(
+        /from ['"]\.\.\/\.source\/server['"]/,
+        "from '../../.source/server'"
+      );
+      await fs6.writeFile(docsSourcePath, content);
+    }
+  }
+  await updateDocsImports(cwd, appDir, routeName);
+  await updateThemeConfig(cwd, config);
+  spinner.succeed(`Added ${appDir}/${routeName}/ route with layout`);
+  ora3().succeed(`Added docs components to ${appDir}/components/docs/`);
+  ora3().succeed("Added content/docs/ directory with sample content");
+}
+async function resolveTemplateDir() {
+  const bundledPath = path6.join(import.meta.dirname, "../../template");
+  if (await fs6.pathExists(bundledPath)) {
+    return bundledPath;
+  }
+  const devPath = path6.join(import.meta.dirname, "../../../template");
+  if (await fs6.pathExists(devPath)) {
+    return devPath;
+  }
+  throw new Error("Could not find template directory");
+}
+async function updateDocsImports(cwd, appDir, routeName) {
+  const filesToUpdate = [
+    path6.join(cwd, appDir, routeName, "layout.tsx"),
+    path6.join(cwd, appDir, routeName, "[[...slug]]", "page.tsx"),
+    path6.join(cwd, appDir, "components/docs/docs-sidebar.tsx"),
+    path6.join(cwd, appDir, "components/docs/docs-header.tsx"),
+    path6.join(cwd, appDir, "components/docs/mobile-sidebar.tsx"),
+    path6.join(cwd, appDir, "components/docs/search-dialog.tsx"),
+    path6.join(cwd, appDir, "api/og/route.tsx")
+  ];
+  for (const filePath of filesToUpdate) {
+    if (await fs6.pathExists(filePath)) {
+      let content = await fs6.readFile(filePath, "utf-8");
+      if (content.includes("@/lib/theme-config")) {
+        content = content.replace(
+          /@\/lib\/theme-config/g,
+          "@/lib/unmint-config"
+        );
+        await fs6.writeFile(filePath, content);
+      }
+    }
+  }
+}
+async function updateThemeConfig(cwd, config) {
+  const configPath = path6.join(cwd, "lib/unmint-config.ts");
+  if (!await fs6.pathExists(configPath)) return;
+  let content = await fs6.readFile(configPath, "utf-8");
+  content = content.replace(
+    /name:\s*['"][^'"]*['"]/,
+    `name: '${config.title}'`
+  );
+  content = content.replace(
+    /description:\s*['"][^'"]*['"]/,
+    `description: '${config.description}'`
+  );
+  await fs6.writeFile(configPath, content);
+}
+async function mergeConfigurations(cwd, projectInfo, config) {
+  const packageJsonPath = path6.join(cwd, "package.json");
+  const { added } = await mergeDependencies(packageJsonPath);
+  if (added.length > 0) {
+    ora3().succeed(`Merged ${added.length} dependencies into package.json`);
+  }
+  if (projectInfo.globalsCssPath) {
+    const darkAccent = lightenColor2(config.accentColor, 30);
+    const merged = await mergeGlobalsCss(projectInfo.globalsCssPath, config.accentColor, darkAccent);
+    if (merged) {
+      ora3().succeed("Added CSS variables to globals.css");
+    }
+  }
+  if (projectInfo.nextConfigPath) {
+    const wrapped = await wrapNextConfig(projectInfo.nextConfigPath);
+    if (wrapped) {
+      ora3().succeed("Updated next.config for MDX support");
+    }
+  }
+  await createSourceConfig(cwd);
+  ora3().succeed("Created source.config.ts");
+  await createMdxComponents(cwd, projectInfo.appDir);
+  ora3().succeed("Created mdx-components.tsx");
+}
+async function installDependencies(cwd, packageManager) {
+  const spinner = ora3("Installing dependencies...").start();
+  try {
+    const installCmd = packageManager === "npm" ? "install" : "install";
+    await execa2(packageManager, [installCmd], { cwd, stdio: "pipe" });
+    spinner.succeed(`Installed ${Object.keys(UNMINT_DEPENDENCIES).join(", ")}`);
+  } catch (error) {
+    spinner.warn("Could not install dependencies automatically");
+    console.log(chalk4.dim(`  Run "${packageManager} install" manually`));
+  }
+}
+function printSuccessMessage(config, packageManager) {
+  console.log();
+  console.log(chalk4.green("  Success! Unmint docs added to your project."));
+  console.log();
+  console.log("  Next steps:");
+  console.log(chalk4.cyan(`    ${packageManager} run dev`));
+  console.log();
+  console.log(`  Your docs will be at ${chalk4.cyan(`http://localhost:3000${config.docsRoute}`)}`);
+  console.log();
+}
+
 // src/index.ts
 var cyanGradient = gradient([
   "#065f5f",
@@ -508,17 +1152,31 @@ function printBanner() {
   });
   console.log();
   console.log(cyanGradient.multiline(banner));
-  console.log(chalk4.dim("  Beautiful documentation, open source"));
+  console.log(chalk5.dim("  Beautiful documentation, open source"));
   console.log();
 }
 var program = new Command();
-program.name("create-unmint").description("Create and manage Unmint documentation projects").version("1.0.0");
-program.argument("[project-name]", "Name of the project to create").option("-y, --yes", "Skip prompts and use defaults").option("--update", "Update an existing Unmint project").option("--dry-run", "Show what would be updated without making changes").action(async (projectName, options) => {
+program.name("create-unmint").description("Create and manage Unmint documentation projects").version("1.2.0");
+program.argument("[project-name]", 'Name of the project to create (use "." for current directory)').option("-y, --yes", "Skip prompts and use defaults").option("--add", "Add Unmint docs to an existing Next.js project").option("--path <route>", "Custom route path for docs (e.g., /documentation)").option("--update", "Update an existing Unmint project").option("--dry-run", "Show what would be updated without making changes").action(async (projectName, options) => {
   printBanner();
   if (options.update) {
     await update(options);
-  } else {
-    await init(projectName, options);
+    return;
+  }
+  if (options.add) {
+    await add({ yes: options.yes, path: options.path });
+    return;
+  }
+  if (projectName === ".") {
+    const cwd = process.cwd();
+    const hasNextConfig = await fs7.pathExists(path7.join(cwd, "next.config.ts")) || await fs7.pathExists(path7.join(cwd, "next.config.js")) || await fs7.pathExists(path7.join(cwd, "next.config.mjs"));
+    if (hasNextConfig) {
+      console.log(chalk5.dim("  Detected existing Next.js project, using add mode..."));
+      console.log();
+      await add({ yes: options.yes, path: options.path });
+      return;
+    }
   }
+  await init(projectName, options);
 });
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-unmint",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "Create a new Unmint documentation project",
   "type": "module",
   "bin": {

package/template/app/components/docs/docs-header.tsx

@@ -33,7 +33,7 @@ export function DocsHeader({ tree }: DocsHeaderProps) {
                 aria-label="Open menu"
                 aria-expanded={isMobileMenuOpen}
               >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg aria-hidden="true" className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
               </button>
@@ -68,7 +68,7 @@ export function DocsHeader({ tree }: DocsHeaderProps) {
                   className="p-2 text-muted-foreground hover:text-foreground transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
                   aria-label="GitHub"
                 >
-                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                     <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                   </svg>
                 </a>

package/template/app/components/docs/docs-sidebar.tsx

@@ -25,7 +25,7 @@ export function DocsSidebar({ tree }: DocsSidebarProps) {
                 className="flex items-center gap-3 py-1 text-sm text-[var(--accent)] font-medium hover:opacity-80 transition-opacity"
               >
                 <span className="flex items-center justify-center w-7 h-7 rounded-md bg-[var(--accent-muted)]">
-                  <svg className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <svg aria-hidden="true" className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                   </svg>
                 </span>
@@ -41,7 +41,7 @@ export function DocsSidebar({ tree }: DocsSidebarProps) {
                   className="flex items-center gap-3 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
                   <span className="flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 dark:bg-gray-800">
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <svg aria-hidden="true" className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                       <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                     </svg>
                   </span>
@@ -56,7 +56,7 @@ export function DocsSidebar({ tree }: DocsSidebarProps) {
                   className="flex items-center gap-3 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
                   <span className="flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 dark:bg-gray-800">
-                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <svg aria-hidden="true" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                       <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                     </svg>
                   </span>

package/template/app/components/docs/mdx/accordion.tsx

@@ -28,10 +28,12 @@ export function Accordion({ title, children, defaultOpen = false }: AccordionPro
     <div>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-foreground hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+        aria-expanded={isOpen}
+        className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-foreground hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-inset"
       >
         <span>{title}</span>
         <svg
+          aria-hidden="true"
           className={cn(
             'w-5 h-5 text-muted-foreground transition-transform duration-200',
             isOpen && 'rotate-180'

package/template/app/components/docs/mdx/tabs.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { useState, createContext, useContext } from 'react'
+import { useState, createContext, useContext, Children, isValidElement, useId } from 'react'
 import { cn } from '@/lib/utils'
 
 interface TabsContextValue {
   activeTab: string
   setActiveTab: (tab: string) => void
+  tabsId: string
 }
 
 const TabsContext = createContext<TabsContextValue | null>(null)
@@ -17,10 +18,87 @@ interface TabsProps {
 
 export function Tabs({ children, defaultValue }: TabsProps) {
   const [activeTab, setActiveTab] = useState(defaultValue || '')
+  const tabsId = useId()
+
+  // Extract tab titles and content from children
+  const tabs: { title: string; content: React.ReactNode }[] = []
+  Children.forEach(children, (child) => {
+    if (isValidElement<TabProps>(child) && child.props.title) {
+      tabs.push({
+        title: child.props.title,
+        content: child.props.children,
+      })
+    }
+  })
+
+  // Set default active tab if not set
+  const currentActiveTab = activeTab || (tabs[0]?.title ?? '')
 
   return (
-    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
-      <div className="my-6">{children}</div>
+    <TabsContext.Provider value={{ activeTab: currentActiveTab, setActiveTab, tabsId }}>
+      <div className="my-6">
+        {/* Tab list */}
+        <div role="tablist" aria-label="Tabs" className="flex border-b border-border">
+          {tabs.map((tab, index) => {
+            const isActive = currentActiveTab === tab.title
+            const tabId = `${tabsId}-tab-${index}`
+            const panelId = `${tabsId}-panel-${index}`
+
+            return (
+              <button
+                key={tab.title}
+                role="tab"
+                id={tabId}
+                aria-selected={isActive}
+                aria-controls={panelId}
+                tabIndex={isActive ? 0 : -1}
+                onClick={() => setActiveTab(tab.title)}
+                onKeyDown={(e) => {
+                  if (e.key === 'ArrowRight') {
+                    e.preventDefault()
+                    const nextIndex = (index + 1) % tabs.length
+                    setActiveTab(tabs[nextIndex].title)
+                  } else if (e.key === 'ArrowLeft') {
+                    e.preventDefault()
+                    const prevIndex = (index - 1 + tabs.length) % tabs.length
+                    setActiveTab(tabs[prevIndex].title)
+                  }
+                }}
+                className={cn(
+                  'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2',
+                  isActive
+                    ? 'border-[var(--accent)] text-[var(--accent)]'
+                    : 'border-transparent text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {tab.title}
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Tab panels */}
+        {tabs.map((tab, index) => {
+          const isActive = currentActiveTab === tab.title
+          const tabId = `${tabsId}-tab-${index}`
+          const panelId = `${tabsId}-panel-${index}`
+
+          return (
+            <div
+              key={tab.title}
+              role="tabpanel"
+              id={panelId}
+              aria-labelledby={tabId}
+              hidden={!isActive}
+              tabIndex={0}
+              className={cn('pt-4 [&>pre]:mt-0', !isActive && 'hidden')}
+            >
+              {tab.content}
+            </div>
+          )
+        })}
+      </div>
     </TabsContext.Provider>
   )
 }
@@ -30,31 +108,9 @@ interface TabProps {
   children: React.ReactNode
 }
 
+// Tab is now just a data container, rendering is handled by Tabs
 export function Tab({ title, children }: TabProps) {
-  const context = useContext(TabsContext)
-  if (!context) return null
-
-  const { activeTab, setActiveTab } = context
-  const isActive = activeTab === title || (!activeTab && title)
-
-  return (
-    <>
-      <button
-        onClick={() => setActiveTab(title)}
-        className={cn(
-          'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
-          isActive
-            ? 'border-[var(--accent)] text-[var(--accent)]'
-            : 'border-transparent text-muted-foreground hover:text-foreground'
-        )}
-      >
-        {title}
-      </button>
-      {isActive && (
-        <div className="pt-4 [&>pre]:mt-0">
-          {children}
-        </div>
-      )}
-    </>
-  )
+  // This component is used for data extraction only
+  // Actual rendering happens in Tabs component
+  return null
 }

package/template/app/components/docs/mobile-sidebar.tsx

@@ -135,7 +135,7 @@ export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
             className="p-2 -mr-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
             aria-label="Close menu"
           >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg aria-hidden="true" className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
@@ -153,7 +153,7 @@ export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
                   className="flex items-center gap-3 py-2 px-2 text-sm text-[var(--accent)] font-medium hover:bg-[var(--accent-muted)] rounded-md transition-colors min-h-[44px]"
                 >
                   <span className="flex items-center justify-center w-7 h-7 rounded-md bg-[var(--accent-muted)]">
-                    <svg className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <svg aria-hidden="true" className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                       <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                     </svg>
                   </span>
@@ -169,7 +169,7 @@ export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
                     className="flex items-center gap-3 py-2 px-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
                   >
                     <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted">
-                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <svg aria-hidden="true" className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                         <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                       </svg>
                     </span>
@@ -184,7 +184,7 @@ export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
                     className="flex items-center gap-3 py-2 px-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
                   >
                     <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted">
-                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <svg aria-hidden="true" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                         <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                       </svg>
                     </span>
@@ -243,10 +243,12 @@ function MobileSidebarNode({ node, pathname, onNavigate }: MobileSidebarNodeProp
       <div>
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex items-center justify-between w-full py-2 px-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
+          aria-expanded={isExpanded}
+          className="flex items-center justify-between w-full py-2 px-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-inset"
         >
           <span>{node.name}</span>
           <svg
+            aria-hidden="true"
             className={cn('w-4 h-4 transition-transform', isExpanded && 'rotate-90')}
             fill="none"
             stroke="currentColor"

package/template/app/components/docs/search-dialog.tsx

@@ -31,6 +31,7 @@ export function SearchTrigger() {
       <button
         type="button"
         onClick={() => setOpen(true)}
+        aria-haspopup="dialog"
         className={cn(
           'flex items-center gap-3 px-4 py-2.5 rounded-lg w-full max-w-md',
           'bg-muted/50 border border-border/50',
@@ -198,7 +199,7 @@ function SearchDialog({ onClose }: SearchDialogProps) {
                 <p>Searching...</p>
               </div>
             ) : results.length > 0 ? (
-              <ul ref={resultsRef} className="py-2">
+              <ul ref={resultsRef} role="listbox" aria-label="Search results" className="py-2">
                 {results.map((result, index) => {
                   // Build breadcrumb path
                   const breadcrumbPath = result.breadcrumbs && result.breadcrumbs.length > 0
@@ -211,8 +212,11 @@ function SearchDialog({ onClose }: SearchDialogProps) {
                         type="button"
                         onClick={() => handleSelect(result.url)}
                         onMouseEnter={() => setSelectedIndex(index)}
+                        role="option"
+                        aria-selected={selectedIndex === index}
                         className={cn(
-                          'w-full px-4 py-3 text-left transition-colors focus:outline-none',
+                          'w-full px-4 py-3 text-left transition-colors',
+                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--accent)]',
                           selectedIndex === index
                             ? 'bg-gray-100 dark:bg-gray-800'
                             : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
@@ -265,6 +269,7 @@ function SearchDialog({ onClose }: SearchDialogProps) {
 function SearchIcon({ className }: { className?: string }) {
   return (
     <svg
+      aria-hidden="true"
       className={className}
       fill="none"
       viewBox="0 0 24 24"

package/template/app/components/docs/theme-toggle.tsx

@@ -12,21 +12,21 @@ export function ThemeToggle() {
   }, [])
 
   if (!mounted) {
-    return <div className="w-9 h-9" />
+    return <div className="w-11 h-11" />
   }
 
   return (
     <button
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      className="flex items-center justify-center w-9 h-9 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      className="flex items-center justify-center w-11 h-11 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
       aria-label="Toggle theme"
     >
       {theme === 'dark' ? (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg aria-hidden="true" className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
         </svg>
       ) : (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg aria-hidden="true" className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
         </svg>
       )}

package/template/lib/theme-config.ts

@@ -13,7 +13,7 @@ export const siteConfig = {
 
   // Logo configuration
   logo: {
-    src: '/logo.png',
+    src: '/logo.svg',
     alt: 'Unmint',
     width: 40,
     height: 40,