cus-base-ui 0.2.2 → 0.2.4

package/README.md

@@ -1,55 +1,145 @@
-# CUS-UI CLI (Remote/NPM Ready)
-
-Bộ công cụ CLI giúp bạn cài đặt các components từ thư viện UI này vào bất kỳ dự án React nào khác thông qua `npx`.
-
-## 🚀 Cách sử dụng từ dự án khác
-
-Bạn không cần cài đặt gì cả, chỉ cần đứng tại thư mục dự án của bạn và gõ:
-
-### 1. Khởi tạo dự án (Lần đầu)
-```bash
-npx cus-base-ui init
-```
-Lệnh này sẽ tự động cài các gói cần thiết (`clsx`, `tailwind-merge`) và tạo file `src/lib/utils/cn.ts`.
-
-### 2. Thêm Component
-```bash
-npx cus-base-ui add button input switch
-```
-*Lưu ý: CLI sẽ tự động nhận diện và tải thêm các component phụ thuộc nếu cần.*
-
-### 3. Cấu hình Tailwind
-Chạy lệnh sau để nhận hướng dẫn copy-paste cấu hình theme:
-```bash
-npx cus-base-ui tailwind
-```
-
----
-### 4. Liệt kê Component
-```bash
-npx cus-base-ui list
-```
-
-## 🛠 Cách để tự bạn quản lý và phát hành
-
-### 1. Cập nhật Registry (Khi thêm component mới)
-```bash
-npm run registry:build
-```
-Sau đó hãy `git commit` và `git push` lên GitHub để CLI trên máy người dùng có thể thấy update mới.
-
-### 2. Biên dịch CLI
-```bash
-npm run build:cli
-```
-
-### 3. Phát hành lên NPM
-Để mọi người có thể gõ `npx cus-base-ui`, bạn cần đưa nó lên NPM:
-1. Đăng nhập: `npm login`
-2. Phát hành: `npm publish` (Nếu tên `cus-base-ui` đã bị trùng trên NPM, hãy đổi tên trong `package.json`).
-
----
-
-## 📂 Cơ chế hoạt động
-- **Local Mode**: Nếu bạn chạy `npx cus-base-ui add --local`, nó sẽ tìm file `registry.json` ngay tại thư mục hiện tại.
-- **Remote Mode (Mặc định)**: CLI sẽ tải dữ liệu trực tiếp từ: `https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json`.
+# cus-base-ui
+
+Bộ component UI cho React, phân phối qua CLI — copy trực tiếp vào dự án của bạn, không cần cài như package dependency (tương tự shadcn/ui).
+
+---
+
+## Yêu cầu
+
+- Node.js 18+
+- Dự án React + Vite + TypeScript
+
+---
+
+## Bắt đầu nhanh
+
+### 1. Khởi tạo dự án
+
+Đứng tại thư mục gốc dự án của bạn, chạy:
+
+```bash
+npx cus-base-ui init
+```
+
+Lệnh này tự động thực hiện:
+
+| Bước | Nội dung |
+|------|----------|
+| Cài dev packages | `tailwindcss`, `@tailwindcss/vite`, `@vitejs/plugin-react`, `vite-plugin-babel`, `babel-plugin-react-compiler`, `@types/node` |
+| Tạo / cập nhật `vite.config.ts` | Thêm plugin Tailwind, React, React Compiler + alias `@`, `@lib`, `@components`, `@assets`, `@pages`, `@styles` |
+| Cập nhật `tsconfig.json` | Thêm `baseUrl` + `paths` tương ứng với alias trên |
+| Setup Tailwind CSS | Thêm `@import "tailwindcss";` vào `src/index.css` (tạo mới nếu chưa có) |
+| Cài core utilities | `clsx`, `tailwind-merge` + tạo `src/lib/utils/cn.ts` |
+
+> Nếu `vite.config.ts` hoặc `tsconfig.json` đã tồn tại và đã có cấu hình, CLI sẽ bỏ qua bước đó — không ghi đè.
+
+**Kết quả `vite.config.ts` sau init:**
+
+```ts
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import babel from 'vite-plugin-babel';
+import { reactCompilerPreset } from 'babel-plugin-react-compiler';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    react(),
+    babel({ presets: [reactCompilerPreset()] }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@lib': path.resolve(__dirname, './src/lib'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@styles': path.resolve(__dirname, './src/styles'),
+    },
+  },
+});
+```
+
+---
+
+### 2. Thêm component
+
+```bash
+npx cus-base-ui add button
+npx cus-base-ui add button input switch   # nhiều component cùng lúc
+npx cus-base-ui add button --force        # ghi đè nếu đã tồn tại
+```
+
+Component được copy thẳng vào `src/components/ui/<name>/`. Các component phụ thuộc lẫn nhau sẽ tự động được kéo theo.
+
+---
+
+### 3. Xóa component
+
+```bash
+npx cus-base-ui remove button
+```
+
+---
+
+### 4. Liệt kê tất cả component
+
+```bash
+npx cus-base-ui list
+```
+
+---
+
+### 5. Hướng dẫn cấu hình Tailwind theme
+
+```bash
+npx cus-base-ui tailwind
+```
+
+---
+
+## Tùy chọn
+
+| Flag | Mô tả |
+|------|-------|
+| `--local` | Dùng `registry.json` cục bộ thay vì tải từ remote |
+| `--force` | Ghi đè file đã tồn tại khi `add` |
+
+---
+
+## Dành cho maintainer
+
+### Cập nhật registry (sau khi thêm/sửa component)
+
+```bash
+npm run registry:build
+```
+
+Sau đó commit + push lên GitHub để người dùng nhận được bản mới nhất.
+
+### Build CLI
+
+```bash
+npm run build:cli
+```
+
+Output: `dist/ui-cli.js`
+
+### Phát hành lên NPM
+
+```bash
+npm login
+npm publish
+```
+
+> Nếu tên package bị trùng, đổi `name` trong `package.json` trước khi publish.
+
+---
+
+## Cơ chế hoạt động
+
+- **Remote mode (mặc định):** Tải `registry.json` từ `https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json`
+- **Local mode (`--local`):** Đọc `registry.json` ngay tại thư mục hiện tại
+- Registry chứa source code + danh sách npm dependencies của từng component — CLI đọc rồi copy/install vào dự án target

package/dist/ui-cli.cjs

@@ -0,0 +1,232 @@
+#!/usr/bin/env node
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// scripts/ui-cli.ts
+var import_fs = __toESM(require("fs"), 1);
+var import_path = __toESM(require("path"), 1);
+var import_child_process = require("child_process");
+var REGISTRY_LOCAL = "./registry.json";
+var REGISTRY_REMOTE = "https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json";
+var log = (msg) => console.log(`[CUS-BASE-UI] ${msg}`);
+var warn = (msg) => console.warn(`[CUS-BASE-UI] WARN: ${msg}`);
+var error = (msg) => console.error(`[CUS-BASE-UI] ERROR: ${msg}`);
+var getTargetProjectDir = () => process.cwd();
+var validateRegistry = (data) => {
+  if (!data || typeof data !== "object") return false;
+  const reg = data;
+  return "components" in reg && typeof reg.components === "object" && reg.components !== null;
+};
+var getRegistry = async (isLocal) => {
+  if (isLocal && import_fs.default.existsSync(REGISTRY_LOCAL)) {
+    log("Using local registry...");
+    try {
+      const data = JSON.parse(import_fs.default.readFileSync(REGISTRY_LOCAL, "utf-8"));
+      if (!validateRegistry(data)) {
+        error('Invalid local registry format \u2014 missing "components" field.');
+        process.exit(1);
+      }
+      return data;
+    } catch (err) {
+      error(`Failed to parse local registry: ${err instanceof Error ? err.message : err}`);
+      process.exit(1);
+    }
+  }
+  log("Fetching registry from remote...");
+  try {
+    const response = await fetch(REGISTRY_REMOTE);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const data = await response.json();
+    if (!validateRegistry(data)) {
+      error('Invalid remote registry format \u2014 missing "components" field.');
+      process.exit(1);
+    }
+    return data;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    error(`Cannot fetch registry: ${message}`);
+    process.exit(1);
+  }
+};
+var installNpmPackages = (packages, cwd) => {
+  if (packages.length === 0) return;
+  const pkgJsonPath = import_path.default.join(cwd, "package.json");
+  let toInstall = packages;
+  if (import_fs.default.existsSync(pkgJsonPath)) {
+    const pkg = JSON.parse(import_fs.default.readFileSync(pkgJsonPath, "utf-8"));
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    toInstall = packages.filter((p) => !allDeps[p]);
+  }
+  if (toInstall.length === 0) return;
+  log(`Installing: ${toInstall.join(", ")}...`);
+  try {
+    (0, import_child_process.execSync)(`npm install ${toInstall.join(" ")} --save`, { stdio: "inherit", cwd });
+  } catch (err) {
+    error(`Failed to install packages: ${toInstall.join(", ")}. ${err instanceof Error ? err.message : ""}`);
+  }
+};
+var ensureCore = (registry, cwd) => {
+  const core = registry.core;
+  if (!core) return;
+  installNpmPackages(core.dependencies, cwd);
+  for (const file of core.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    const targetDir = import_path.default.dirname(targetPath);
+    if (!import_fs.default.existsSync(targetDir)) {
+      import_fs.default.mkdirSync(targetDir, { recursive: true });
+    }
+    if (!import_fs.default.existsSync(targetPath)) {
+      import_fs.default.writeFileSync(targetPath, file.content);
+      log(`Created core file: ${file.path}`);
+    }
+  }
+};
+var addComponent = (name, registry, cwd, options, added = /* @__PURE__ */ new Set()) => {
+  if (added.has(name)) return;
+  added.add(name);
+  const component = registry.components[name];
+  if (!component) {
+    error(`Component "${name}" not found. Run 'list' to see available components.`);
+    return;
+  }
+  log(`Adding: ${name}...`);
+  ensureCore(registry, cwd);
+  installNpmPackages(component.dependencies, cwd);
+  if (component.internalDependencies) {
+    for (const dep of component.internalDependencies) {
+      if (registry.components[dep]) {
+        addComponent(dep, registry, cwd, options, added);
+      }
+    }
+  }
+  for (const file of component.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    const targetDir = import_path.default.dirname(targetPath);
+    if (!import_fs.default.existsSync(targetDir)) {
+      import_fs.default.mkdirSync(targetDir, { recursive: true });
+    }
+    if (import_fs.default.existsSync(targetPath) && !options.force) {
+      warn(`Skipped (exists): ${file.path} \u2014 use --force to overwrite`);
+      continue;
+    }
+    import_fs.default.writeFileSync(targetPath, file.content);
+    log(`Created: ${file.path}`);
+  }
+};
+var removeComponent = (name, registry, cwd) => {
+  const component = registry.components[name];
+  if (!component) {
+    error(`Component "${name}" not found.`);
+    return;
+  }
+  log(`Removing: ${name}...`);
+  for (const file of component.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    if (import_fs.default.existsSync(targetPath)) {
+      import_fs.default.unlinkSync(targetPath);
+      log(`Deleted: ${file.path}`);
+    }
+  }
+  for (const file of component.files) {
+    const targetDir = import_path.default.dirname(import_path.default.join(cwd, file.path));
+    try {
+      if (import_fs.default.existsSync(targetDir) && import_fs.default.readdirSync(targetDir).length === 0) {
+        import_fs.default.rmdirSync(targetDir);
+        log(`Removed empty dir: ${import_path.default.relative(cwd, targetDir)}`);
+      }
+    } catch (err) {
+      warn(`Could not remove directory: ${err instanceof Error ? err.message : err}`);
+    }
+  }
+};
+var main = async () => {
+  const args = process.argv.slice(2);
+  const isLocal = args.includes("--local");
+  const isForce = args.includes("--force");
+  const filteredArgs = args.filter((a) => !a.startsWith("--"));
+  const command = filteredArgs[0];
+  const componentNames = filteredArgs.slice(1);
+  const cwd = getTargetProjectDir();
+  const registry = await getRegistry(isLocal);
+  switch (command) {
+    case "add": {
+      if (componentNames.length === 0) {
+        error("Usage: npx cus-base-ui add <component-name> [--force]");
+        return;
+      }
+      for (const name of componentNames) {
+        addComponent(name, registry, cwd, { force: isForce });
+      }
+      log("Done!");
+      break;
+    }
+    case "remove": {
+      if (componentNames.length === 0) {
+        error("Usage: npx cus-base-ui remove <component-name>");
+        return;
+      }
+      for (const name of componentNames) {
+        removeComponent(name, registry, cwd);
+      }
+      log("Done!");
+      break;
+    }
+    case "list": {
+      const components = Object.keys(registry.components).sort();
+      log(`Available components (${components.length}):`);
+      for (const k of components) {
+        const deps = registry.components[k].internalDependencies;
+        const depStr = deps?.length ? ` (requires: ${deps.join(", ")})` : "";
+        console.log(`  - ${k}${depStr}`);
+      }
+      break;
+    }
+    case "init": {
+      ensureCore(registry, cwd);
+      log("Initialization complete.");
+      break;
+    }
+    case "tailwind": {
+      console.log("\n--- Copy to tailwind.config.ts / tailwind.config.js ---\n");
+      console.log("// See README_CLI.md for full theme config");
+      break;
+    }
+    default: {
+      console.log(`
+  cus-base-ui \u2014 UI Component CLI
+
+  Commands:
+    init                     Initialize project (install core deps + files)
+    add <name> [--force]     Add component(s) to your project
+    remove <name>            Remove component(s) from your project
+    list                     List all available components
+    tailwind                 Show Tailwind config instructions
+
+  Options:
+    --local                  Use local registry.json instead of remote
+    --force                  Overwrite existing files when adding
+`);
+    }
+  }
+};
+main();

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "cus-base-ui",
   "private": false,
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "bin": {
-    "cus-base-ui": "./dist/ui-cli.js"
+    "cus-base-ui": "./dist/ui-cli.cjs"
   },
   "files": [
     "dist",
@@ -15,7 +15,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:cli": "npx -y esbuild scripts/ui-cli.ts --bundle --platform=node --outfile=dist/ui-cli.js --format=cjs --packages=external",
+    "build:cli": "npx -y esbuild scripts/ui-cli.ts --bundle --platform=node --outfile=dist/ui-cli.cjs --format=cjs --packages=external",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",

package/scripts/ui-cli.ts

@@ -56,7 +56,7 @@ const getRegistry = async (isLocal: boolean): Promise<Registry> => {
     }
 };
 
-const installNpmPackages = (packages: string[], cwd: string) => {
+const installNpmPackages = (packages: string[], cwd: string, dev = false) => {
     if (packages.length === 0) return;
 
     const pkgJsonPath = path.join(cwd, 'package.json');
@@ -71,13 +71,174 @@ const installNpmPackages = (packages: string[], cwd: string) => {
     if (toInstall.length === 0) return;
 
     log(`Installing: ${toInstall.join(', ')}...`);
+    const flag = dev ? '--save-dev' : '--save';
     try {
-        execSync(`npm install ${toInstall.join(' ')} --save`, { stdio: 'inherit', cwd });
+        execSync(`npm install ${toInstall.join(' ')} ${flag}`, { stdio: 'inherit', cwd });
     } catch (err) {
         error(`Failed to install packages: ${toInstall.join(', ')}. ${err instanceof Error ? err.message : ''}`);
     }
 };
 
+const VITE_DEV_PACKAGES = ['tailwindcss', '@tailwindcss/vite', '@vitejs/plugin-react', 'vite-plugin-babel', 'babel-plugin-react-compiler', '@types/node'];
+
+const VITE_CONFIG_TEMPLATE = `import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import babel from 'vite-plugin-babel';
+import { reactCompilerPreset } from 'babel-plugin-react-compiler';
+import path from 'path';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    react(),
+    babel({ presets: [reactCompilerPreset()] }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@lib': path.resolve(__dirname, './src/lib'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@styles': path.resolve(__dirname, './src/styles'),
+    },
+  },
+});
+`;
+
+const TSCONFIG_PATHS = {
+    '@/*': ['./src/*'],
+    '@lib/*': ['./src/lib/*'],
+    '@components/*': ['./src/components/*'],
+    '@assets/*': ['./src/assets/*'],
+    '@pages/*': ['./src/pages/*'],
+    '@styles/*': ['./src/styles/*'],
+};
+
+const setupViteConfig = (cwd: string) => {
+    installNpmPackages(VITE_DEV_PACKAGES, cwd, true);
+
+    const configTs = path.join(cwd, 'vite.config.ts');
+    const configJs = path.join(cwd, 'vite.config.js');
+
+    if (!fs.existsSync(configTs) && !fs.existsSync(configJs)) {
+        fs.writeFileSync(configTs, VITE_CONFIG_TEMPLATE);
+        log('Created vite.config.ts with Tailwind + React Compiler setup.');
+        return;
+    }
+
+    const existingPath = fs.existsSync(configTs) ? configTs : configJs;
+    const content = fs.readFileSync(existingPath, 'utf-8');
+
+    const missingImports: string[] = [];
+    if (!content.includes('@tailwindcss/vite')) missingImports.push("import tailwindcss from '@tailwindcss/vite';");
+    if (!content.includes('@vitejs/plugin-react')) missingImports.push("import react from '@vitejs/plugin-react';");
+    if (!content.includes('vite-plugin-babel')) missingImports.push("import babel from 'vite-plugin-babel';");
+    if (!content.includes('babel-plugin-react-compiler')) missingImports.push("import { reactCompilerPreset } from 'babel-plugin-react-compiler';");
+
+    const missingPlugins: string[] = [];
+    if (!content.includes('tailwindcss()')) missingPlugins.push('tailwindcss()');
+    if (!content.includes('react()') && !content.includes('react({')) missingPlugins.push('react()');
+    if (!content.includes('reactCompilerPreset')) missingPlugins.push('babel({ presets: [reactCompilerPreset()] })');
+
+    const hasAlias = content.includes('alias:') || content.includes("'@'") || content.includes('"@"');
+
+    if (missingImports.length === 0 && missingPlugins.length === 0 && hasAlias) {
+        log('vite.config already configured — skipping.');
+        return;
+    }
+
+    warn(`${path.basename(existingPath)} exists but is missing required setup. Add the following manually:`);
+    if (missingImports.length > 0) {
+        console.log('\n  // Imports to add:');
+        for (const imp of missingImports) console.log(`  ${imp}`);
+    }
+    if (missingPlugins.length > 0) {
+        console.log('\n  // Plugins to add inside defineConfig({ plugins: [...] }):');
+        for (const plugin of missingPlugins) console.log(`    ${plugin},`);
+    }
+    if (!hasAlias) {
+        console.log('\n  // resolve.alias to add inside defineConfig({}):');
+        console.log("  resolve: {");
+        console.log("    alias: {");
+        console.log("      '@': path.resolve(__dirname, './src'),");
+        console.log("      '@lib': path.resolve(__dirname, './src/lib'),");
+        console.log("      '@components': path.resolve(__dirname, './src/components'),");
+        console.log("      '@assets': path.resolve(__dirname, './src/assets'),");
+        console.log("      '@pages': path.resolve(__dirname, './src/pages'),");
+        console.log("      '@styles': path.resolve(__dirname, './src/styles'),");
+        console.log("    },");
+        console.log("  },");
+    }
+    console.log('');
+};
+
+const ensureTailwindCss = (cwd: string) => {
+    const candidates = ['src/index.css', 'src/App.css', 'src/main.css'];
+    for (const cssFile of candidates) {
+        const cssPath = path.join(cwd, cssFile);
+        if (fs.existsSync(cssPath)) {
+            const content = fs.readFileSync(cssPath, 'utf-8');
+            if (!content.includes('@import "tailwindcss"') && !content.includes("@import 'tailwindcss'")) {
+                fs.writeFileSync(cssPath, `@import "tailwindcss";\n\n${content}`);
+                log(`Added @import "tailwindcss" to ${cssFile}`);
+            } else {
+                log(`${cssFile} already imports Tailwind — skipping.`);
+            }
+            return;
+        }
+    }
+    // No CSS file found — create src/index.css
+    const srcDir = path.join(cwd, 'src');
+    if (!fs.existsSync(srcDir)) fs.mkdirSync(srcDir, { recursive: true });
+    fs.writeFileSync(path.join(srcDir, 'index.css'), '@import "tailwindcss";\n');
+    log('Created src/index.css with @import "tailwindcss"');
+};
+
+const setupTsConfig = (cwd: string) => {
+    const candidates = ['tsconfig.app.json', 'tsconfig.json'];
+
+    for (const candidate of candidates) {
+        const configPath = path.join(cwd, candidate);
+        if (!fs.existsSync(configPath)) continue;
+
+        const raw = fs.readFileSync(configPath, 'utf-8');
+
+        if (raw.includes('"@/*"') || raw.includes("'@/*'")) {
+            log(`${candidate} already has path aliases — skipping.`);
+            return;
+        }
+
+        try {
+            // Strip single-line and block comments before parsing
+            const stripped = raw.replace(/\/\/[^\n]*/g, '').replace(/\/\*[\s\S]*?\*\//g, '');
+            const parsed = JSON.parse(stripped) as { compilerOptions?: Record<string, unknown> };
+            if (!parsed.compilerOptions) parsed.compilerOptions = {};
+            parsed.compilerOptions.baseUrl = '.';
+            parsed.compilerOptions.paths = TSCONFIG_PATHS;
+            fs.writeFileSync(configPath, JSON.stringify(parsed, null, 2));
+            log(`Added path aliases to ${candidate}.`);
+        } catch {
+            warn(`Could not auto-patch ${candidate}. Add these to compilerOptions manually:`);
+            console.log('\n  "baseUrl": ".",');
+            console.log('  "paths": {');
+            for (const [alias, targets] of Object.entries(TSCONFIG_PATHS)) {
+                console.log(`    "${alias}": ["${targets[0]}"],`);
+            }
+            console.log('  }');
+            console.log('');
+        }
+        return;
+    }
+
+    // No tsconfig found — create a minimal one
+    const newConfig = { compilerOptions: { baseUrl: '.', paths: TSCONFIG_PATHS } };
+    fs.writeFileSync(path.join(cwd, 'tsconfig.json'), JSON.stringify(newConfig, null, 2));
+    log('Created tsconfig.json with path aliases.');
+};
+
 const ensureCore = (registry: { core?: { dependencies: string[]; files: { path: string; content: string }[] } }, cwd: string) => {
     const core = registry.core;
     if (!core) return;
@@ -226,6 +387,9 @@ const main = async () => {
         }
 
         case 'init': {
+            setupViteConfig(cwd);
+            setupTsConfig(cwd);
+            ensureTailwindCss(cwd);
             ensureCore(registry, cwd);
             log('Initialization complete.');
             break;