@sgx4u/ui 1.0.6

package/dist/chunk-SWLJZFBL.js

@@ -0,0 +1,890 @@
+// src/commands/add.ts
+import fs4 from "fs-extra";
+import inquirer2 from "inquirer";
+import ora from "ora";
+import path4 from "path";
+
+// src/commands/utils/config.util.ts
+import fs2 from "fs-extra";
+import inquirer from "inquirer";
+import path2 from "path";
+
+// src/commands/utils/alias.util.ts
+import fs from "fs-extra";
+import path from "path";
+async function detectAlias(cwd) {
+  const configFiles = ["tsconfig.json", "jsconfig.json"];
+  for (const file of configFiles) {
+    const configPath = path.join(cwd, file);
+    if (!fs.existsSync(configPath)) continue;
+    const config = await fs.readJson(configPath);
+    const paths = config?.compilerOptions?.paths;
+    if (!paths || typeof paths !== "object") continue;
+    for (const [alias, targets] of Object.entries(paths)) {
+      if (!alias.endsWith("/*")) continue;
+      if (!Array.isArray(targets) || !targets[0]) continue;
+      const prefix = alias.replace("/*", "");
+      const baseDir = targets[0].replace("/*", "");
+      return { enabled: true, prefix, baseDir };
+    }
+  }
+  return null;
+}
+
+// src/commands/utils/config.util.ts
+async function getConfig(cwd) {
+  try {
+    const configPath = path2.resolve(cwd, "ui.config.json");
+    const configExists = await fs2.pathExists(configPath);
+    if (configExists) return await fs2.readJson(configPath);
+    return null;
+  } catch {
+    return null;
+  }
+}
+async function createConfig({
+  cwd,
+  projectInfo
+}) {
+  try {
+    const detectedDir = await detectUIDirectory(cwd);
+    const { uiDir, environment, typescript } = await inquirer.prompt([
+      {
+        type: "input",
+        name: "uiDir",
+        message: "Where would you like to add UI components?",
+        default: detectedDir,
+        validate: (input) => {
+          if (!input.trim()) return "Please enter a valid directory path.";
+          return true;
+        }
+      },
+      {
+        type: "list",
+        name: "environment",
+        message: "Which environment are you using?",
+        choices: [
+          { name: "React", value: "react" },
+          { name: "Next.js", value: "next" }
+        ],
+        default: projectInfo.project
+      },
+      {
+        type: "confirm",
+        name: "typescript",
+        message: "Do you want to use TypeScript?",
+        default: projectInfo.hasTypeScript
+      }
+    ]);
+    const finalUiPath = uiDir.startsWith("/") ? uiDir : `./${uiDir}`;
+    const aliasInfo = await detectAlias(cwd);
+    const aliases = aliasInfo ? {
+      [aliasInfo.prefix]: aliasInfo.baseDir,
+      [`${aliasInfo.prefix}/ui`]: finalUiPath,
+      [`${aliasInfo.prefix}/elements`]: `${finalUiPath}/elements`,
+      [`${aliasInfo.prefix}/modules`]: `${finalUiPath}/modules`,
+      [`${aliasInfo.prefix}/helpers`]: `${finalUiPath}/helpers`,
+      [`${aliasInfo.prefix}/hooks`]: `${finalUiPath}/hooks`,
+      [`${aliasInfo.prefix}/utils`]: `${finalUiPath}/utils`
+    } : {
+      ui: finalUiPath,
+      elements: `${finalUiPath}/elements`,
+      modules: `${finalUiPath}/modules`,
+      helpers: `${finalUiPath}/helpers`,
+      hooks: `${finalUiPath}/hooks`,
+      utils: `${finalUiPath}/utils`
+    };
+    const config = {
+      uiDir: finalUiPath,
+      environment,
+      typescript,
+      aliases,
+      registry: "https://registry.npmjs.org"
+    };
+    const configPath = path2.join(cwd, "ui.config.json");
+    await fs2.writeJson(configPath, config, { spaces: 4 });
+    return config;
+  } catch {
+    return null;
+  }
+}
+async function detectUIDirectory(cwd) {
+  const srcUiPath = path2.join(cwd, "src");
+  if (await fs2.pathExists(srcUiPath)) return "src/ui";
+  return "ui";
+}
+
+// src/commands/utils/package.util.ts
+import fs3 from "fs-extra";
+import { execSync } from "child_process";
+import path3 from "path";
+async function getProjectInfo(cwd) {
+  const hasReact = await isPackageInstalled({ packageName: "react", cwd });
+  const hasNextJS = await isPackageInstalled({ packageName: "next", cwd });
+  const hasTypeScript = await isPackageInstalled({ packageName: "typescript", cwd });
+  const tailwindVersion = await getTailwindVersion(cwd);
+  const lucideVersion = await getPackageVersion({ packageName: "lucide-react", cwd });
+  const packageManager = await detectPackageManager(cwd);
+  const project = hasNextJS ? "next" : hasReact ? "react" : "none";
+  return { project, hasTypeScript, tailwindVersion, lucideVersion, packageManager };
+}
+async function isPackageInstalled({ packageName, cwd }) {
+  try {
+    const packageJsonPath = path3.join(cwd, "package.json");
+    if (!await fs3.pathExists(packageJsonPath)) return false;
+    const packageJson = await fs3.readJson(packageJsonPath);
+    const allDeps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies,
+      ...packageJson.peerDependencies
+    };
+    return Object.keys(allDeps).some((dependency) => dependency === packageName);
+  } catch {
+    return false;
+  }
+}
+async function installDependencies({
+  cwd,
+  packageManager,
+  dependencies
+}) {
+  try {
+    const installCommand = getInstallCommand({ packageManager, packages: dependencies, isDev: false });
+    execSync(installCommand, { cwd, stdio: "pipe", encoding: "utf8" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function getPackageVersion({ packageName, cwd }) {
+  const packageJsonPath = path3.join(cwd, "package.json");
+  if (!await fs3.pathExists(packageJsonPath)) return null;
+  const packageJson = await fs3.readJson(packageJsonPath);
+  const allDeps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+    ...packageJson.peerDependencies
+  };
+  const rawVersion = allDeps[packageName];
+  if (rawVersion == null || typeof rawVersion !== "string") return null;
+  const packageVersion = rawVersion.replace(/^[\^~>=]+/, "").split(".");
+  if (packageVersion.length === 0 || packageVersion[0] === "") return null;
+  const version = packageVersion[1] != null ? `${packageVersion[0]}.${packageVersion[1]}` : packageVersion[0];
+  const parsed = Number.parseFloat(version);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+async function detectPackageManager(cwd) {
+  try {
+    const pnpmLockPath = path3.join(cwd, "pnpm-lock.yaml");
+    if (await fs3.pathExists(pnpmLockPath)) return "pnpm";
+    const yarnLockPath = path3.join(cwd, "yarn.lock");
+    if (await fs3.pathExists(yarnLockPath)) return "yarn";
+    const bunLockPath = path3.join(cwd, "bun.lockb");
+    if (await fs3.pathExists(bunLockPath)) return "bun";
+    const npmLockPath = path3.join(cwd, "package-lock.json");
+    if (await fs3.pathExists(npmLockPath)) return "npm";
+    const packageJsonPath = path3.join(cwd, "package.json");
+    if (await fs3.pathExists(packageJsonPath)) {
+      try {
+        const packageJson = await fs3.readJson(packageJsonPath);
+        if (packageJson.packageManager) {
+          const packageManager = packageJson.packageManager;
+          if (packageManager.includes("pnpm")) return "pnpm";
+          if (packageManager.includes("yarn")) return "yarn";
+          if (packageManager.includes("bun")) return "bun";
+          if (packageManager.includes("npm")) return "npm";
+        }
+      } catch {
+      }
+    }
+    try {
+      execSync("pnpm --version", { stdio: "pipe", cwd });
+      return "pnpm";
+    } catch {
+      try {
+        execSync("yarn --version", { stdio: "pipe", cwd });
+        return "yarn";
+      } catch {
+        try {
+          execSync("bun --version", { stdio: "pipe", cwd });
+          return "bun";
+        } catch {
+          return "npm";
+        }
+      }
+    }
+  } catch {
+    return "npm";
+  }
+}
+function getInstallCommand({
+  packageManager,
+  packages,
+  isDev
+}) {
+  const packagesStr = packages.join(" ");
+  switch (packageManager) {
+    case "pnpm":
+      return isDev ? `pnpm add -D ${packagesStr}` : `pnpm add ${packagesStr}`;
+    case "yarn":
+      return isDev ? `yarn add -D ${packagesStr}` : `yarn add ${packagesStr}`;
+    case "bun":
+      return isDev ? `bun add -d ${packagesStr}` : `bun add ${packagesStr}`;
+    default:
+      return isDev ? `npm install --save-dev ${packagesStr}` : `npm install ${packagesStr}`;
+  }
+}
+async function getTailwindVersion(cwd) {
+  const packageJsonPath = path3.join(cwd, "package.json");
+  if (!await fs3.pathExists(packageJsonPath)) return "none";
+  const packageJson = await fs3.readJson(packageJsonPath);
+  const allDeps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+    ...packageJson.peerDependencies
+  };
+  if (allDeps["tailwindcss"] && (allDeps["tailwindcss"].startsWith("4") || allDeps["tailwindcss"].startsWith("^4"))) {
+    return "v4";
+  }
+  return "none";
+}
+
+// src/commands/utils/registry.util.ts
+var GITHUB_REPO = "sgx4u/sgx4u-ui";
+var GITHUB_BRANCH = "production";
+var GITHUB_RAW_BASE = `https://raw.githubusercontent.com/${GITHUB_REPO}/${GITHUB_BRANCH}`;
+async function fetchRegistry(projectType) {
+  try {
+    let registryEnvironment;
+    if (projectType === "next" || projectType === "react") registryEnvironment = "react";
+    else return null;
+    const registryFile = `registry.${registryEnvironment}.json`;
+    const registryUrl = `${GITHUB_RAW_BASE}/src/content/${registryFile}`;
+    const response = await fetch(registryUrl);
+    if (!response.ok) return null;
+    const registry = await response.json();
+    return registry;
+  } catch {
+    return null;
+  }
+}
+async function fetchComponent({
+  componentName,
+  projectType
+}) {
+  try {
+    if (projectType === "none") return null;
+    const registry = await fetchRegistry(projectType);
+    if (!registry) return null;
+    for (const [registryKey, component] of Object.entries(registry.components)) {
+      if (registryKey === componentName) {
+        return {
+          ...component,
+          name: registryKey
+        };
+      }
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+async function fetchComponentFile(filePath) {
+  try {
+    const fileUrl = `${GITHUB_RAW_BASE}/${filePath}`;
+    const response = await fetch(fileUrl);
+    if (!response.ok) return null;
+    return await response.text();
+  } catch {
+    console.log(`\u26A0\uFE0F Failed to fetch file from GitHub: ${filePath}`);
+    return null;
+  }
+}
+
+// src/commands/validation/data.validate.ts
+function validateComponentName(name) {
+  if (!name || name.trim().length < 1 || typeof name !== "string") return false;
+  if (!/^[a-zA-Z0-9-_.]+$/.test(name)) return false;
+  return true;
+}
+function validateDirectory(directory) {
+  if (!directory || directory.trim().length < 1 || typeof directory !== "string") return false;
+  if (directory.includes("..")) return false;
+  if (directory.includes("\\") || directory.includes("//")) return false;
+  return true;
+}
+
+// src/commands/add.ts
+async function addComponent(componentName) {
+  try {
+    const cwd = process.cwd();
+    const validationSpinner = ora(" Validating...").start();
+    if (!validateComponentName(componentName)) {
+      validationSpinner.fail();
+      console.log("\u274C Component name is invalid!");
+      process.exit(1);
+    }
+    const config = await getConfig(cwd);
+    if (!config) {
+      validationSpinner.fail();
+      console.log("\u274C Failed to get configuration! Please initialize SGX4U UI first!");
+      process.exit(1);
+    }
+    const projectInfo = await getProjectInfo(cwd);
+    if (projectInfo.project === "none") {
+      console.log("\u274C No supported project detected!");
+      process.exit(1);
+    }
+    validationSpinner.succeed();
+    const installingSpinner = ora(` Installing ${componentName}`).start();
+    const component = await fetchComponent({ componentName, projectType: config.environment });
+    if (!component) {
+      installingSpinner.fail();
+      console.log("\u274C Failed to fetch component!");
+      process.exit(1);
+    }
+    const uiDirectory = config.uiDir;
+    const normalizedUiDirectory = uiDirectory.replace(/^[./\\]+/, "");
+    if (!normalizedUiDirectory || !validateDirectory(normalizedUiDirectory)) {
+      installingSpinner.fail();
+      console.log("\u274C Invalid directory!");
+      process.exit(1);
+    }
+    const baseDirectory = path4.join(cwd, normalizedUiDirectory);
+    const allFilesToInstall = /* @__PURE__ */ new Map();
+    const existingFiles = [];
+    const filesToProcess = component.files;
+    for (const file of filesToProcess) {
+      const normalizedOutputPath = file.outputPath.replace(/^ui[\\/]/, "");
+      const targetPath = path4.join(baseDirectory, normalizedOutputPath);
+      if (await fs4.pathExists(targetPath)) {
+        existingFiles.push(file.outputPath);
+      } else {
+        allFilesToInstall.set(file.outputPath, {
+          filePath: file.path,
+          targetPath
+        });
+      }
+    }
+    if (existingFiles.length > 0) {
+      installingSpinner.stop();
+      console.log(`\u26A0\uFE0F Skipping existing files:`);
+      existingFiles.forEach((file) => console.log(`  \u2022 ${file}`));
+    }
+    const installedFiles = [];
+    for (const [relativePath, { filePath, targetPath }] of allFilesToInstall) {
+      try {
+        const content = await fetchComponentFile(filePath);
+        if (!content) {
+          installingSpinner.fail();
+          console.log(`\u26A0\uFE0F Failed to fetch ${relativePath}`);
+          process.exit(1);
+        }
+        await fs4.ensureDir(path4.dirname(targetPath));
+        await fs4.writeFile(targetPath, content, "utf8");
+        installedFiles.push(relativePath);
+      } catch (error) {
+        installingSpinner.fail();
+        console.log(`\u26A0\uFE0F Failed to install ${relativePath}: ${error}`);
+        process.exit(1);
+      }
+    }
+    if (installedFiles.length === 0) {
+      installingSpinner.succeed();
+      console.log(`\u2714  ${componentName} is already up to date!`);
+      process.exit(1);
+    }
+    installingSpinner.succeed();
+    console.log("\u{1F4C1} Added files:");
+    installedFiles.forEach((file) => console.log(`  \u2022 ${file}`));
+    const allPackageDependencies = new Set(component.dependencies);
+    if (allPackageDependencies.size > 0) {
+      console.log("\u{1F4E6} Dependencies detected:");
+      const installedDependencies = [];
+      const missingDependencies = [];
+      for (const dependency of Array.from(allPackageDependencies)) {
+        if (await isPackageInstalled({ packageName: dependency, cwd })) installedDependencies.push(dependency);
+        else missingDependencies.push(dependency);
+      }
+      if (installedDependencies.length > 0) {
+        console.log("\u2714  Already installed dependencies:");
+        installedDependencies.forEach((dep) => console.log(`    \u2022 ${dep}`));
+      }
+      if (missingDependencies.length > 0) {
+        console.log("\u274C Missing dependencies:");
+        missingDependencies.forEach((dep) => console.log(`    \u2022 ${dep}`));
+        const { installDeps } = await inquirer2.prompt([
+          {
+            type: "confirm",
+            name: "installDeps",
+            message: `Auto install missing dependencies using ${projectInfo.packageManager}?`,
+            default: true
+          }
+        ]);
+        if (installDeps) {
+          console.log(`\u{1F4E6} Installing missing dependencies using ${projectInfo.packageManager}...`);
+          const dependencyInstalled = await installDependencies({
+            cwd,
+            packageManager: projectInfo.packageManager,
+            dependencies: missingDependencies
+          });
+          if (dependencyInstalled) console.log("\u2714  Missing dependencies installed successfully!");
+          else console.log("\u274C Failed to install missing dependencies!");
+        } else {
+          console.log("\u26A0\uFE0F Please install missing dependencies manually:");
+          missingDependencies.forEach((dep) => console.log(`  \u2022 ${dep}`));
+        }
+      } else {
+        console.log("\u2714  All dependencies are already installed!");
+      }
+    }
+    process.exit(1);
+  } catch (error) {
+    console.error(`\u274C Error: ${error}`);
+    process.exit(1);
+  }
+}
+
+// src/commands/init.ts
+import inquirer3 from "inquirer";
+import ora2 from "ora";
+
+// src/commands/utils/css.util.ts
+import fs5 from "fs-extra";
+import path5 from "path";
+
+// src/commands/data/theme-tailwind-v4.data.ts
+var themeVariablesV4 = `@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--background: oklch(100% 0 0); /* #ffffff */
+	--background-light: oklch(97% 0 0); /* #f5f5f5 */
+	--foreground: oklch(26.9% 0 0); /* #262626 */
+
+	--primary: oklch(26.9% 0 0); /* #262626 */
+	--primary-dark: oklch(14.5% 0 0); /* #0a0a0a */
+	--primary-light: oklch(70.8% 0 0); /* #a1a1a1 */
+	--primary-foreground: var(--background);
+
+	--secondary: oklch(51.1% 0.262 276.966); /* #4f39f6 */
+	--secondary-dark: oklch(45.7% 0.24 277.023); /* #432dd7 */
+	--secondary-light: oklch(93% 0.034 272.788); /* #e0e7ff */
+	--secondary-foreground: var(--background);
+
+	--success: oklch(72.3% 0.219 149.579); /* #00c950 */
+	--success-dark: oklch(62.7% 0.194 149.214); /* #00a63e */
+	--success-light: oklch(96.2% 0.044 156.743); /* #dcfce7 */
+	--success-foreground: var(--background);
+
+	--warn: oklch(82.8% 0.189 84.429); /* #ffb900 */
+	--warn-dark: oklch(76.9% 0.188 70.08); /* #fe9a00 */
+	--warn-light: oklch(96.2% 0.059 95.617); /* #fef3c6 */
+	--warn-foreground: var(--background);
+
+	--danger: oklch(63.7% 0.237 25.331); /* #fb2c36 */
+	--danger-dark: oklch(57.7% 0.245 27.325); /* #e7000b */
+	--danger-light: oklch(93.6% 0.032 17.717); /* #ffe2e2 */
+	--danger-foreground: var(--background);
+
+	--muted: oklch(87% 0 0); /* #d4d4d4 */
+	--muted-dark: oklch(70.8% 0 0); /* #a1a1a1 */
+	--muted-light: oklch(95.514% 0.00011 271.152); /* #f0f0f0 */
+	--muted-foreground: oklch(43.9% 0 0); /* #525252 */
+
+	--card: var(--background);
+
+	--light: var(--background);
+	--dark: var(--foreground);
+	--border: var(--muted-light);
+	--input-placeholder: oklch(70.8% 0 0); /* #a1a1a1 */
+
+	--radius: 0.5rem;
+}
+
+.dark {
+	--background: oklch(23.929% 0.00003 271.152); /* #1f1f1f */
+	--background-light: oklch(26.9% 0 0); /* #262626 */
+	--foreground: oklch(98.5% 0 0); /* #fafafa */
+
+	--primary: oklch(97% 0 0); /* #f5f5f5 */
+	--primary-dark: oklch(92.2% 0 0); /* #e5e5e5 */
+	--primary-light: oklch(98.5% 0 0); /* #fafafa */
+	--primary-foreground: var(--background);
+
+	--secondary: oklch(0.6009 0.1957 277.79); /* #696cf2 */
+	--secondary-dark: oklch(0.5348 0.2183 278.55); /* #5951e6 */
+	--secondary-light: oklch(93% 0.034 272.788); /* #e0e7ff */
+	--secondary-foreground: var(--foreground);
+
+	--success: oklch(0.8152 0.1685 152.67); /* #5be18c */
+	--success-dark: oklch(0.7665 0.2043 149.52); /* #25d566 */
+	--success-light: oklch(96.2% 0.044 156.743); /* #dcfce7 */
+	--success-foreground: var(--foreground);
+
+	--warn: oklch(82.8% 0.189 84.429); /* #ffb900 */
+	--warn-dark: oklch(76.9% 0.188 70.08); /* #fe9a00 */
+	--warn-light: oklch(96.2% 0.059 95.617); /* #fef3c6 */
+	--warn-foreground: var(--foreground);
+
+	--danger: oklch(0.7287 0.1531 21.55); /* #f97c7c */
+	--danger-dark: oklch(0.6605 0.190501 23.9375); /* #f15656 */
+	--danger-light: oklch(93.6% 0.032 17.717); /* #ffe2e2 */
+	--danger-foreground: var(--foreground);
+
+	--muted: oklch(43.9% 0 0); /* #525252 */
+	--muted-dark: oklch(37.1% 0 0); /* #404040 */
+	--muted-light: oklch(55.6% 0 0); /* #737373 */
+	--muted-foreground: oklch(97% 0.001 106.424); /* #f5f5f5 */
+
+	--card: var(--background);
+
+	--light: var(--foreground);
+	--dark: var(--background);
+	--border: var(--muted-light);
+	--input-placeholder: oklch(70.8% 0 0); /* #a1a1a1 */
+}
+
+@theme {
+	--breakpoint-mobile: 36rem;
+	--breakpoint-tablet: 48rem;
+	--breakpoint-laptop: 64rem;
+	--breakpoint-desktop: 80rem;
+	--breakpoint-wide: 90rem;
+
+	--container-mobile: 36rem;
+	--container-tablet: 48rem;
+	--container-laptop: 64rem;
+	--container-desktop: 80rem;
+	--container-wide: 90rem;
+
+	--text-xxs: 0.625rem;
+
+	@keyframes animate-gradient {
+		0% {
+			background-position: 100% 50%;
+		}
+		to {
+			background-position: 0 50%;
+		}
+	}
+
+	@keyframes animate-heart-beat {
+		0% {
+			box-shadow: 0 0 0 0px hsl(239, 83%, 68%);
+		}
+		100% {
+			box-shadow: 0 0 0 10px hsl(239, 83%, 68%, 0);
+		}
+	}
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-background-light: var(--background-light);
+	--color-foreground: var(--foreground);
+
+	--color-primary: var(--primary);
+	--color-primary-dark: var(--primary-dark);
+	--color-primary-light: var(--primary-light);
+	--color-primary-foreground: var(--primary-foreground);
+
+	--color-secondary: var(--secondary);
+	--color-secondary-dark: var(--secondary-dark);
+	--color-secondary-light: var(--secondary-light);
+	--color-secondary-foreground: var(--secondary-foreground);
+
+	--color-success: var(--success);
+	--color-success-dark: var(--success-dark);
+	--color-success-light: var(--success-light);
+	--color-success-foreground: var(--success-foreground);
+
+	--color-warn: var(--warn);
+	--color-warn-dark: var(--warn-dark);
+	--color-warn-light: var(--warn-light);
+	--color-warn-foreground: var(--warn-foreground);
+
+	--color-danger: var(--danger);
+	--color-danger-dark: var(--danger-dark);
+	--color-danger-light: var(--danger-light);
+	--color-danger-foreground: var(--danger-foreground);
+
+	--color-muted: var(--muted);
+	--color-muted-dark: var(--muted-dark);
+	--color-muted-light: var(--muted-light);
+	--color-muted-foreground: var(--muted-foreground);
+
+	--color-card: var(--card);
+
+	--color-light: var(--light);
+	--color-dark: var(--dark);
+	--color-border: var(--border);
+	--color-input-placeholder: var(--input-placeholder);
+
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+	* {
+		@apply scroll-m-24 border-border;
+	}
+
+	body {
+		@apply bg-background text-foreground;
+	}
+
+	::-webkit-scrollbar {
+		@apply size-1;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply bg-muted-light;
+	}
+
+	::-webkit-scrollbar-thumb {
+		@apply bg-muted-dark;
+	}
+
+	::-webkit-scrollbar-thumb:hover {
+		@apply bg-muted-foreground/75;
+	}
+
+	/* Selection */
+	::selection {
+		-webkit-text-fill-color: var(--background);
+		@apply bg-primary text-primary-foreground;
+	}
+}
+
+@layer utilities {
+	/* Animate wave background */
+	.animate-wave-bg {
+		background-image: linear-gradient(
+			90deg,
+			rgb(238, 238, 238) 35%,
+			rgb(245, 245, 245) 50%,
+			rgb(238, 238, 238) 65%
+		);
+		background-size: 300%;
+		animation: animate-gradient 2.5s ease infinite;
+	}
+
+	/* Elevated card */
+	.elevated-card {
+		box-shadow: 0 0 20px var(--muted-light);
+	}
+
+	/* Glass card */
+	.glass-card {
+		background: hsla(0, 0%, 100%, 0.2) !important;
+		border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
+		box-shadow: 0 4px 30px hsla(0, 0%, 0%, 0.1) !important;
+		backdrop-filter: blur(5px);
+		-webkit-backdrop-filter: blur(5px);
+	}
+
+	/* Hide scrollbar */
+	.hide-scrollbar {
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+	}
+
+	.animate-changelog-timeline {
+		animation: animate-heart-beat 1.5s ease infinite;
+	}
+}
+`;
+
+// src/commands/utils/css.util.ts
+async function createThemeFile({
+  cwd,
+  version
+}) {
+  if (version === "none") return null;
+  const existingGlobalCssPath = await locateGlobalsCSS(cwd);
+  if (existingGlobalCssPath) {
+    const updated = await updateGlobalsCSS({
+      filePath: existingGlobalCssPath,
+      content: themeVariablesV4
+    });
+    if (!updated) return null;
+    return existingGlobalCssPath;
+  }
+  const srcAppDir = path5.join(cwd, "src", "app");
+  const appDir = path5.join(cwd, "app");
+  let newGlobalCssPath;
+  if (await fs5.pathExists(srcAppDir)) {
+    newGlobalCssPath = path5.join(srcAppDir, "globals.css");
+  } else if (await fs5.pathExists(appDir)) {
+    newGlobalCssPath = path5.join(appDir, "globals.css");
+  } else {
+    newGlobalCssPath = path5.join(cwd, "src", "app", "globals.css");
+  }
+  await fs5.ensureDir(path5.dirname(newGlobalCssPath));
+  const fileUpdated = await writeCSSFile({
+    filePath: newGlobalCssPath,
+    content: themeVariablesV4
+  });
+  if (!fileUpdated) return null;
+  return newGlobalCssPath;
+}
+async function locateGlobalsCSS(cwd) {
+  const commonPaths = [path5.join(cwd, "src", "app", "globals.css"), path5.join(cwd, "app", "globals.css")];
+  for (const cssPath of commonPaths) {
+    if (await fs5.pathExists(cssPath)) return cssPath;
+  }
+  return null;
+}
+async function writeCSSFile({ filePath, content }) {
+  try {
+    await fs5.writeFile(filePath, content, "utf8");
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function updateGlobalsCSS({ filePath, content }) {
+  try {
+    await fs5.writeFile(filePath, content, "utf8");
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/commands/init.ts
+async function initConfig() {
+  try {
+    console.log("\u2699\uFE0F Initializing configuration...");
+    const cwd = process.cwd();
+    const existingConfig = await getConfig(cwd);
+    if (existingConfig) {
+      console.log("\u2714  ui.config.json already exists in this project.");
+      const { overwrite } = await inquirer3.prompt([
+        {
+          type: "confirm",
+          name: "overwrite",
+          message: "Do you want to overwrite the existing configuration?",
+          default: false
+        }
+      ]);
+      if (!overwrite) {
+        console.log("\u274C Configuration initialization cancelled!");
+        process.exit(1);
+      }
+    }
+    const projectInfo = await getProjectInfo(cwd);
+    if (projectInfo.project === "none") {
+      console.log("\u274C No supported project detected!");
+      process.exit(1);
+    }
+    if (projectInfo.tailwindVersion === "none") {
+      console.log("\u{1F4E6} No supported Tailwind version detected!");
+      const { installTailwind } = await inquirer3.prompt([
+        {
+          type: "confirm",
+          name: "installTailwind",
+          message: "Would you like to install Tailwind CSS?",
+          default: true
+        }
+      ]);
+      if (!installTailwind) {
+        console.log("\u274C Tailwind CSS is required for the UI components to work properly!");
+        process.exit(1);
+      }
+      const installTailwindSpinner = ora2(" Installing Tailwind CSS...").start();
+      const tailwindInstalled = await installDependencies({
+        cwd,
+        packageManager: projectInfo.packageManager,
+        dependencies: ["tailwindcss"]
+      });
+      if (tailwindInstalled) installTailwindSpinner.succeed();
+      else {
+        installTailwindSpinner.fail();
+        console.log("\u274C Failed to install Tailwind CSS. Please install it manually!");
+        process.exit(1);
+      }
+    }
+    const config = await createConfig({ cwd, projectInfo });
+    if (!config) {
+      console.log("\u274C Failed to create configuration file!");
+      process.exit(1);
+    } else console.log("\u2714  Configuration file created successfully!");
+    const isCorrectLucideVersion = projectInfo.lucideVersion && projectInfo.lucideVersion >= 0.563 ? true : false;
+    if (!isCorrectLucideVersion) {
+      const lucideInstalled = await installDependencies({
+        cwd,
+        packageManager: projectInfo.packageManager,
+        dependencies: ["clsx", "lucide-react", "tailwind-merge"]
+      });
+      if (!lucideInstalled) {
+        console.log("\u274C Failed to install Lucide Icons. Please install it manually!");
+        process.exit(1);
+      }
+    }
+    const themeSpinner = ora2(" Setting up theme variables...").start();
+    const createdThemeFile = await createThemeFile({ cwd, version: projectInfo.tailwindVersion });
+    if (!createdThemeFile) {
+      themeSpinner.fail();
+      console.log("\u274C Failed to setup theme variables!");
+      process.exit(1);
+    }
+    themeSpinner.succeed();
+    console.log("\u{1F389} Project initialization completed successfully!");
+    console.log("\u{1F4A1} Feel free to update the values in the configuration file to your needs!");
+    process.exit(1);
+  } catch (error) {
+    console.error(`\u274C Error: ${error}`);
+    process.exit(1);
+  }
+}
+
+// src/commands/list.ts
+import ora3 from "ora";
+async function listComponents() {
+  const configSpinner = ora3(" Checking...").start();
+  try {
+    const cwd = process.cwd();
+    const config = await getConfig(cwd);
+    if (!config) {
+      configSpinner.fail();
+      console.log('\u274C No configuration found! Please run "sgx4u-ui init" first.');
+      process.exit(1);
+    }
+    configSpinner.succeed();
+    const fetchSpinner = ora3(" Fetching available components...").start();
+    const registry = await fetchRegistry(config.environment);
+    if (!registry) {
+      fetchSpinner.fail();
+      console.log("\u26A0\uFE0F Failed to fetch registry from GitHub!");
+      process.exit(1);
+    }
+    fetchSpinner.succeed();
+    console.log("\u{1F4CB} Available Components:");
+    Object.entries(registry.components).forEach(([registryKey, component]) => {
+      const componentName = component.name ?? registryKey;
+      console.log(`${componentName}: ${component.description}`);
+      console.log(`    Install: sgx4u-ui add ${componentName}`);
+      console.log();
+    });
+    process.exit(1);
+  } catch (error) {
+    configSpinner.fail();
+    console.error(`\u274C Error: ${error}`);
+    process.exit(1);
+  }
+}
+
+export {
+  getConfig,
+  createConfig,
+  getProjectInfo,
+  fetchComponent,
+  addComponent,
+  initConfig,
+  listComponents
+};