@tokiui/cli 0.1.0 → 0.2.0

package/dist/index.js

@@ -33,6 +33,7 @@ var import_fs_extra2 = __toESM(require("fs-extra"));
 var import_prompts = __toESM(require("prompts"));
 var import_kleur = __toESM(require("kleur"));
 var import_ora = __toESM(require("ora"));
+var import_execa = require("execa");
 
 // src/utils/config.ts
 var import_path = __toESM(require("path"));
@@ -55,51 +56,192 @@ function detectPackageManager(cwd) {
 }
 
 // src/commands/init.ts
+var GLOBALS_CANDIDATES = [
+  "src/app/globals.css",
+  "src/styles/globals.css",
+  "src/index.css",
+  "app/globals.css",
+  "styles/globals.css",
+  "index.css"
+];
+var POSTCSS_CANDIDATES = [
+  "postcss.config.mjs",
+  "postcss.config.js",
+  "postcss.config.cjs"
+];
+function detectGlobalsCss(cwd) {
+  return GLOBALS_CANDIDATES.find((c) => import_fs_extra2.default.existsSync(import_path2.default.join(cwd, c)));
+}
+function detectPostcss(cwd) {
+  return POSTCSS_CANDIDATES.find((f) => import_fs_extra2.default.existsSync(import_path2.default.join(cwd, f)));
+}
+function hasTailwindV3(cwd) {
+  return import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "tailwind.config.ts")) || import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "tailwind.config.js"));
+}
 var initCommand = new import_commander.Command("init").description("Initialize tokiui in your project").action(async () => {
   const cwd = process.cwd();
-  console.log(import_kleur.default.bold("\nInitializing tokiui...\n"));
-  const answers = await (0, import_prompts.default)([
-    {
-      type: "text",
-      name: "componentsDir",
-      message: "Where should components be installed?",
-      initial: "src/components/ui"
-    },
+  console.log(import_kleur.default.bold("\n  tokiui \u2014 setup\n"));
+  const hasSrc = import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "src"));
+  const isNext = import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "next.config.ts")) || import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "next.config.js")) || import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "next.config.mjs"));
+  const detectedGlobals = detectGlobalsCss(cwd);
+  if (hasTailwindV3(cwd)) {
+    console.log(
+      import_kleur.default.yellow(
+        "  \u26A0  tailwind.config.ts detected \u2014 tokiui requires Tailwind CSS v4.\n     Migrate first: https://tailwindcss.com/docs/upgrade-guide\n"
+      )
+    );
+  }
+  const answers = await (0, import_prompts.default)(
+    [
+      {
+        type: "text",
+        name: "componentsDir",
+        message: "Where should components be installed?",
+        initial: hasSrc ? "src/components/ui" : "components/ui"
+      },
+      {
+        type: "text",
+        name: "libDir",
+        message: "Where should utility files be placed?",
+        initial: hasSrc ? "src/lib" : "lib"
+      },
+      {
+        type: "text",
+        name: "globalsPath",
+        message: "Where is your global CSS file?",
+        initial: detectedGlobals ?? (hasSrc ? "src/app/globals.css" : "app/globals.css")
+      }
+    ],
     {
-      type: "text",
-      name: "libDir",
-      message: "Where should utility files be placed?",
-      initial: "src/lib"
+      onCancel() {
+        console.log(import_kleur.default.red("\n  Aborted.\n"));
+        process.exit(0);
+      }
     }
-  ]);
-  if (!answers.componentsDir) {
-    console.log(import_kleur.default.red("Aborted."));
-    process.exit(0);
-  }
-  const spinner = (0, import_ora.default)("Setting up project...").start();
+  );
+  const pm = detectPackageManager(cwd);
+  const installCmd = pm === "npm" ? "install" : "add";
+  const libAlias = hasSrc ? "@/" + answers.libDir.replace(/^src\//, "") : "@/" + answers.libDir;
+  const spinner = (0, import_ora.default)();
+  spinner.start("Creating directories");
   await import_fs_extra2.default.ensureDir(import_path2.default.join(cwd, answers.componentsDir));
   await import_fs_extra2.default.ensureDir(import_path2.default.join(cwd, answers.libDir));
+  spinner.succeed("Directories ready");
+  spinner.start(`Installing packages with ${pm}`);
+  try {
+    await (0, import_execa.execa)(
+      pm,
+      [installCmd, "@tokiui/ui", "tailwindcss", "@tailwindcss/postcss", "clsx", "tailwind-merge"],
+      { cwd }
+    );
+    spinner.succeed("Packages installed");
+  } catch {
+    spinner.fail("Package install failed \u2014 run manually:");
+    console.log(
+      import_kleur.default.dim(
+        `
+  ${pm} ${installCmd} @tokiui/ui tailwindcss @tailwindcss/postcss clsx tailwind-merge
+`
+      )
+    );
+  }
+  spinner.start("Writing utility functions");
   const cnPath = import_path2.default.join(cwd, answers.libDir, "utils.ts");
   if (!import_fs_extra2.default.existsSync(cnPath)) {
     await import_fs_extra2.default.writeFile(
       cnPath,
-      `import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+      [
+        `import { clsx, type ClassValue } from 'clsx'`,
+        `import { twMerge } from 'tailwind-merge'`,
+        ``,
+        `export function cn(...inputs: ClassValue[]) {`,
+        `  return twMerge(clsx(inputs))`,
+        `}`
+      ].join("\n") + "\n"
+    );
+    spinner.succeed("utils.ts written");
+  } else {
+    spinner.succeed("utils.ts already exists \u2014 skipped");
+  }
+  spinner.start("Configuring PostCSS");
+  const existingPostcss = detectPostcss(cwd);
+  if (!existingPostcss) {
+    await import_fs_extra2.default.writeFile(
+      import_path2.default.join(cwd, "postcss.config.mjs"),
+      `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
 }
 `
     );
+    spinner.succeed("postcss.config.mjs created");
+  } else {
+    const content = await import_fs_extra2.default.readFile(import_path2.default.join(cwd, existingPostcss), "utf-8");
+    if (content.includes("@tailwindcss/postcss") || content.includes("tailwindcss")) {
+      spinner.succeed(`PostCSS already configured (${existingPostcss})`);
+    } else {
+      spinner.warn(
+        `${existingPostcss} exists but has no Tailwind plugin \u2014 add '@tailwindcss/postcss' manually`
+      );
+    }
+  }
+  spinner.start("Setting up global CSS");
+  const globalsAbsPath = import_path2.default.join(cwd, answers.globalsPath);
+  await import_fs_extra2.default.ensureDir(import_path2.default.dirname(globalsAbsPath));
+  let css = import_fs_extra2.default.existsSync(globalsAbsPath) ? await import_fs_extra2.default.readFile(globalsAbsPath, "utf-8") : "";
+  const prepend = [];
+  if (!css.includes('@import "tailwindcss"') && !css.includes("@import 'tailwindcss'")) {
+    prepend.push('@import "tailwindcss";');
+  }
+  if (!css.includes("@tokiui/ui/styles.css")) {
+    prepend.push('@import "@tokiui/ui/styles.css";');
+  }
+  if (prepend.length > 0) {
+    css = prepend.join("\n") + "\n\n" + css;
+    await import_fs_extra2.default.writeFile(globalsAbsPath, css);
+    spinner.succeed(`globals.css updated (${answers.globalsPath})`);
+  } else {
+    spinner.succeed("globals.css already configured");
+  }
+  spinner.start("Checking TypeScript path aliases");
+  const tsconfigPath = import_path2.default.join(cwd, "tsconfig.json");
+  if (import_fs_extra2.default.existsSync(tsconfigPath)) {
+    const tsconfig = await import_fs_extra2.default.readJson(tsconfigPath);
+    const co = tsconfig.compilerOptions ?? {};
+    const paths = co.paths ?? {};
+    if (!paths["@/*"]) {
+      tsconfig.compilerOptions = {
+        ...co,
+        baseUrl: ".",
+        paths: { ...paths, "@/*": [hasSrc ? "./src/*" : "./*"] }
+      };
+      await import_fs_extra2.default.writeJson(tsconfigPath, tsconfig, { spaces: 2 });
+      spinner.succeed(`tsconfig.json \u2014 added "@/*": ["${hasSrc ? "./src/*" : "./*"}"]`);
+    } else {
+      spinner.succeed("tsconfig.json already has @/* paths");
+    }
+  } else {
+    spinner.warn("No tsconfig.json found \u2014 skipping path alias setup");
   }
   writeConfig(cwd, {
     componentsDir: answers.componentsDir,
     libDir: answers.libDir,
+    libAlias,
     style: "default"
   });
-  spinner.succeed("Project initialized");
-  console.log(import_kleur.default.green("\n\u2713 tokiui initialized successfully"));
-  console.log(import_kleur.default.dim("\nNext: run `npx tokiui add <component>` to add components\n"));
+  console.log(import_kleur.default.green("\n  \u2713 tokiui initialized\n"));
+  console.log(`  ${import_kleur.default.bold("Add your first component:")}
+`);
+  console.log(`  ${import_kleur.default.cyan("npx @tokiui/cli add button")}
+`);
+  if (!isNext) {
+    console.log(
+      import_kleur.default.dim(
+        "  Tip: make sure your framework imports globals.css so the\n  Tailwind and tokiui styles are loaded.\n"
+      )
+    );
+  }
 });
 
 // src/commands/add.ts
@@ -109,24 +251,110 @@ var import_fs_extra3 = __toESM(require("fs-extra"));
 var import_prompts2 = __toESM(require("prompts"));
 var import_kleur2 = __toESM(require("kleur"));
 var import_ora2 = __toESM(require("ora"));
-var import_execa = require("execa");
+var import_execa2 = require("execa");
 
 // src/utils/registry.ts
-var REGISTRY_BASE = "https://raw.githubusercontent.com/TopherGacad/tokiui/main/packages/registry";
+var ALLOWED_FETCH_ORIGIN = "https://raw.githubusercontent.com/TopherGacad/tokiui/";
+var SAFE_REF_RE = /^[a-zA-Z0-9._/@-]+$/;
+function resolveRegistryRef() {
+  const envRef = process.env.TOKIUI_REGISTRY_REF;
+  if (envRef !== void 0) {
+    if (!SAFE_REF_RE.test(envRef) || envRef.includes("..")) {
+      throw new Error(
+        `TOKIUI_REGISTRY_REF contains invalid characters: "${envRef}". Only alphanumeric characters, hyphens, dots, slashes, and @ are allowed.`
+      );
+    }
+    return envRef;
+  }
+  return `cli-v${"0.2.0"}`;
+}
+var REGISTRY_REF = resolveRegistryRef();
+var REGISTRY_BASE = `${ALLOWED_FETCH_ORIGIN}${REGISTRY_REF}/packages/registry`;
+var SOURCE_BASE = `${ALLOWED_FETCH_ORIGIN}${REGISTRY_REF}/packages/ui/src`;
+async function safeFetch(url) {
+  if (!url.startsWith(ALLOWED_FETCH_ORIGIN)) {
+    throw new Error(
+      `Security: refusing to fetch from unexpected origin.
+  Expected: ${ALLOWED_FETCH_ORIGIN}...
+  Got:      ${url}`
+    );
+  }
+  return fetch(url);
+}
+var ALLOWED_SCOPES = /* @__PURE__ */ new Set(["@radix-ui"]);
+var ALLOWED_PACKAGES = /* @__PURE__ */ new Set([
+  "class-variance-authority",
+  "clsx",
+  "tailwind-merge",
+  "sonner",
+  "lucide-react"
+]);
+var PACKAGE_NAME_RE = /^(@[a-z0-9][a-z0-9-._]*\/[a-z0-9][a-z0-9-._]*)(@[^\s]+)?$|^([a-z0-9][a-z0-9-._]*)(@[^\s]+)?$/;
+function assertSafeDependency(dep) {
+  if (!PACKAGE_NAME_RE.test(dep)) {
+    throw new Error(
+      `Registry returned a malformed dependency name: "${dep}". Aborting install.`
+    );
+  }
+  if (dep.startsWith("@")) {
+    const scope = dep.slice(0, dep.indexOf("/"));
+    if (!ALLOWED_SCOPES.has(scope)) {
+      throw new Error(
+        `Dependency scope "${scope}" is not in the approved list. Refusing to install "${dep}". If this is legitimate, open an issue on GitHub.`
+      );
+    }
+  } else {
+    const name = dep.split("@")[0];
+    if (!ALLOWED_PACKAGES.has(name)) {
+      throw new Error(
+        `Package "${name}" is not in the approved dependency list. Refusing to install. If this is legitimate, open an issue on GitHub.`
+      );
+    }
+  }
+}
+function assertSafeFilePath(filePath) {
+  if (filePath.includes("..") || filePath.startsWith("/") || /^[A-Za-z]:/.test(filePath) || filePath.includes("\0") || filePath.includes("\r") || filePath.includes("\n")) {
+    throw new Error(`Registry returned an unsafe file path: "${filePath}". Aborting.`);
+  }
+}
+function assertSafeComponentName(name) {
+  if (!/^[a-z][a-z0-9-]*$/.test(name)) {
+    throw new Error(`Invalid component name in registry: "${name}". Aborting.`);
+  }
+}
+function assertRegistryIndex(data) {
+  if (typeof data !== "object" || data === null || !Array.isArray(data.components)) {
+    throw new Error("Received an invalid registry index from the server.");
+  }
+}
+function assertRegistryComponent(data) {
+  const obj = data;
+  const valid = typeof data === "object" && data !== null && typeof obj.name === "string" && Array.isArray(obj.files) && Array.isArray(obj.dependencies) && Array.isArray(obj.devDependencies) && Array.isArray(obj.registryDependencies) && obj.files.every((f) => typeof f === "string") && obj.dependencies.every((d) => typeof d === "string") && obj.registryDependencies.every((d) => typeof d === "string");
+  if (!valid) {
+    throw new Error(
+      `Received an invalid component definition for "${String(obj.name ?? "unknown")}" from the registry.`
+    );
+  }
+}
 async function fetchRegistryIndex() {
-  const res = await fetch(`${REGISTRY_BASE}/index.json`);
+  const res = await safeFetch(`${REGISTRY_BASE}/index.json`);
   if (!res.ok) throw new Error(`Failed to fetch registry index: ${res.statusText}`);
-  return res.json();
+  const data = await res.json();
+  assertRegistryIndex(data);
+  return data;
 }
 async function fetchComponent(name) {
-  const res = await fetch(`${REGISTRY_BASE}/components/${name}.json`);
+  assertSafeComponentName(name);
+  const res = await safeFetch(`${REGISTRY_BASE}/components/${name}.json`);
   if (!res.ok) throw new Error(`Component "${name}" not found in registry`);
-  return res.json();
+  const data = await res.json();
+  assertRegistryComponent(data);
+  return data;
 }
 async function fetchComponentSource(name, file) {
-  const res = await fetch(
-    `https://raw.githubusercontent.com/TopherGacad/tokiui/main/packages/ui/src/${file}`
-  );
+  assertSafeComponentName(name);
+  assertSafeFilePath(file);
+  const res = await safeFetch(`${SOURCE_BASE}/${file}`);
   if (!res.ok) throw new Error(`Failed to fetch source for ${name}/${file}`);
   return res.text();
 }
@@ -146,6 +374,7 @@ var addCommand = new import_commander2.Command("add").description("Add a compone
     );
     process.exit(1);
   }
+  const libAlias = config.libAlias ?? `@/${config.libDir}`;
   let componentName = componentArg;
   if (!componentName) {
     const spinner = (0, import_ora2.default)("Fetching component list...").start();
@@ -165,25 +394,35 @@ var addCommand = new import_commander2.Command("add").description("Add a compone
       console.log(import_kleur2.default.red("Aborted."));
       process.exit(0);
     }
+    const visited = /* @__PURE__ */ new Set();
     for (const name of answer.components) {
-      await installComponent(name, cwd, config.componentsDir, config.libDir);
+      await installComponent(name, cwd, config.componentsDir, libAlias, visited);
     }
     return;
   }
-  await installComponent(componentName, cwd, config.componentsDir, config.libDir);
+  await installComponent(componentName, cwd, config.componentsDir, libAlias, /* @__PURE__ */ new Set());
 });
-async function installComponent(name, cwd, componentsDir, libDir) {
+async function installComponent(name, cwd, componentsDir, libAlias, visited) {
+  if (visited.has(name)) return;
+  visited.add(name);
+  assertSafeComponentName(name);
   const spinner = (0, import_ora2.default)(`Adding ${name}...`).start();
-  const meta = await fetchComponent(name).catch(() => {
-    spinner.fail(`Component "${name}" not found`);
+  const meta = await fetchComponent(name).catch((err) => {
+    spinner.fail(`${err instanceof Error ? err.message : String(err)}`);
     process.exit(1);
   });
   for (const dep of meta.registryDependencies) {
-    await installComponent(dep, cwd, componentsDir, libDir);
+    await installComponent(dep, cwd, componentsDir, libAlias, visited);
   }
   for (const file of meta.files) {
+    try {
+      assertSafeFilePath(file);
+    } catch (err) {
+      spinner.fail(`Security: ${err instanceof Error ? err.message : String(err)}`);
+      process.exit(1);
+    }
     const source = await fetchComponentSource(name, file);
-    const transformed = transformImports(source, `@/${libDir}`);
+    const transformed = transformImports(source, libAlias);
     const destPath = import_path3.default.join(cwd, componentsDir, import_path3.default.basename(file));
     if (import_fs_extra3.default.existsSync(destPath)) {
       spinner.stop();
@@ -203,9 +442,18 @@ async function installComponent(name, cwd, componentsDir, libDir) {
     await import_fs_extra3.default.writeFile(destPath, transformed);
   }
   if (meta.dependencies.length > 0) {
+    for (const dep of meta.dependencies) {
+      try {
+        assertSafeDependency(dep);
+      } catch (err) {
+        spinner.fail(`Security: ${err instanceof Error ? err.message : String(err)}`);
+        process.exit(1);
+      }
+    }
+    console.log(import_kleur2.default.dim(`  Installing: ${meta.dependencies.join(", ")}`));
     const pm = detectPackageManager(cwd);
     const installCmd = pm === "npm" ? "install" : "add";
-    await (0, import_execa.execa)(pm, [installCmd, ...meta.dependencies], { cwd });
+    await (0, import_execa2.execa)(pm, [installCmd, ...meta.dependencies], { cwd });
   }
   spinner.succeed(`Added ${import_kleur2.default.bold(name)}`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokiui/cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CLI for adding tokiui components to your project",
   "license": "MIT",
   "author": "Topher Gacad",
@@ -21,6 +21,9 @@
   "bin": {
     "tokiui": "./dist/index.js"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "dist"
   ],