@hemia/lume 0.0.2 → 0.0.3

package/dist/index.js

@@ -210,7 +210,7 @@ async function add(components = [], options = {}) {
 \u2705 Added ${copiedCount} component(s) to ${targetBase}/`), options);
 }
 
-// src/commands/init.ts
+// src/commands/add-styles.ts
 import fs4 from "fs-extra";
 import path4 from "path";
 import pc3 from "picocolors";
@@ -369,12 +369,215 @@ function getTemplateConfig(framework, template) {
   };
 }
 
+// src/commands/add-styles.ts
+function log2(message, options) {
+  if (!options.silent) {
+    console.log(message);
+  }
+}
+function info(message, options) {
+  if (!options.silent) {
+    console.log(pc3.cyan(message));
+  }
+}
+function extractCssVariables(cssContent) {
+  const vars = /* @__PURE__ */ new Map();
+  const varRegex = /--([a-zA-Z0-9-]+):\s*([^;]+);/g;
+  let match;
+  while ((match = varRegex.exec(cssContent)) !== null) {
+    vars.set(match[1], match[2]);
+  }
+  return vars;
+}
+function mergeCssVariables(existingCss, templateCss) {
+  const existingVars = extractCssVariables(existingCss);
+  const templateVars = extractCssVariables(templateCss);
+  for (const [key, value] of templateVars) {
+    existingVars.set(key, value);
+  }
+  let result = existingCss;
+  const rootMatch = result.match(/@layer base\s*\{[\s\S]*?:root\s*\{([\s\S]*?)\}/);
+  if (rootMatch) {
+    const newRootVars = Array.from(existingVars.entries()).map(([key, value]) => `    --${key}: ${value};`).join("\n");
+    result = result.replace(
+      /@layer base\s*\{[\s\S]*?:root\s*\{[\s\S]*?\}/,
+      `@layer base {
+  :root {
+${newRootVars}
+  }`
+    );
+  }
+  return result;
+}
+function mergeTailwindConfig(existingConfig, templateConfig) {
+  const colorMatches = templateConfig.match(/colors:\s*\{([\s\S]*?)\}/);
+  const radiusMatches = templateConfig.match(/borderRadius:\s*\{([\s\S]*?)\}/);
+  let result = existingConfig;
+  if (!result.includes("theme:")) {
+    return templateConfig;
+  }
+  if (colorMatches) {
+    const colorsBlock = colorMatches[0];
+    if (!result.includes("colors:")) {
+      result = result.replace(
+        /theme:\s*\{/,
+        `theme: {
+    extend: {
+      colors: {${colorsBlock.replace("colors:", "")}`
+      );
+    }
+  }
+  if (radiusMatches) {
+    const radiusBlock = radiusMatches[0];
+    if (!result.includes("borderRadius:")) {
+      result = result.replace(
+        /theme:\s*\{/,
+        `theme: {
+    extend: {
+      borderRadius: {${radiusBlock.replace("borderRadius:", "")}`
+      );
+    }
+  }
+  if (!result.includes("colors:") && colorMatches) {
+    return templateConfig;
+  }
+  return result;
+}
+function getConfigPaths(cwd) {
+  try {
+    const config = fs4.readJsonSync(path4.resolve(cwd, "lume.config.json"));
+    return {
+      tailwindConfigPath: config.tailwind?.config ?? "tailwind.config.ts",
+      globalsCssPath: config.tailwind?.css ?? "src/assets/globals.css"
+    };
+  } catch {
+    return null;
+  }
+}
+function detectFramework(cwd) {
+  try {
+    const config = fs4.readJsonSync(path4.resolve(cwd, "lume.config.json"));
+    return config.framework ?? "vue";
+  } catch {
+    return "vue";
+  }
+}
+async function addStyles(_args = [], options = {}) {
+  if (options.silent === void 0 && process.argv.includes("--help") || process.argv.includes("-h")) {
+    console.log(`
+lume add-styles
+
+Add globals.css and tailwind.config.ts with merge support
+
+Options:
+  -y, --yes      Skip confirmation prompt
+  -o, --overwrite  Overwrite existing files (don't merge)
+  -f, --force    Force overwrite without asking
+  -c, --cwd      Working directory
+  -s, --silent   Mute output
+  -h, --help     Show this help
+`);
+    return;
+  }
+  const cwd = options.cwd ? path4.resolve(options.cwd) : process.cwd();
+  const configPath = path4.resolve(cwd, "lume.config.json");
+  if (!await fs4.pathExists(configPath)) {
+    const cssPath2 = path4.resolve(cwd, "src/assets/globals.css");
+    const tailwindPath2 = path4.resolve(cwd, "tailwind.config.ts");
+    log2(pc3.cyan("\n\u{1F4E6} Adding styles to your project\n"), options);
+    info("No lume.config.json found. Using default paths...", options);
+    await fs4.ensureDir(path4.dirname(cssPath2));
+    await fs4.writeFile(cssPath2, GLOBALS_CSS_TEMPLATE);
+    log2(pc3.green(`\u2705 Created src/assets/globals.css`), options);
+    await fs4.writeFile(tailwindPath2, TAILWIND_CONFIG_TEMPLATE);
+    log2(pc3.green(`\u2705 Created tailwind.config.ts`), options);
+    log2(pc3.green("\n\u2705 Styles added successfully!"), options);
+    return;
+  }
+  const configPaths = getConfigPaths(cwd);
+  if (!configPaths) {
+    log2(pc3.red("\u274C Could not read lume.config.json"), options);
+    process.exit(1);
+  }
+  const framework = detectFramework(cwd);
+  const templateConfig = getTemplateConfig(framework);
+  const cssPath = path4.resolve(cwd, configPaths.globalsCssPath);
+  const tailwindPath = path4.resolve(cwd, configPaths.tailwindConfigPath);
+  const cssExists = await fs4.pathExists(cssPath);
+  const tailwindExists = await fs4.pathExists(tailwindPath);
+  log2(pc3.cyan("\n\u{1F4E6} Adding styles to your project\n"), options);
+  if (!cssExists && !tailwindExists) {
+    info("No existing CSS or config found. Writing new files...", options);
+    await fs4.ensureDir(path4.dirname(cssPath));
+    await fs4.writeFile(cssPath, GLOBALS_CSS_TEMPLATE);
+    log2(pc3.green(`\u2705 Created ${configPaths.globalsCssPath}`), options);
+    await fs4.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
+    log2(pc3.green(`\u2705 Created ${configPaths.tailwindConfigPath}`), options);
+    log2(pc3.green("\n\u2705 Styles added successfully!"), options);
+    return;
+  }
+  let shouldMerge = options.yes;
+  let shouldOverwrite = options.overwrite || options.force;
+  if ((cssExists || tailwindExists) && !options.yes) {
+    const { action } = await prompts2({
+      type: "select",
+      name: "action",
+      message: "Styles already exist. What would you like to do?",
+      choices: [
+        { title: "Merge (recommended)", description: "Keep your variables, add missing ones from template", value: "merge" },
+        { title: "Overwrite", description: "Replace with template (your custom styles will be lost)", value: "overwrite" },
+        { title: "Skip", description: "Don't add styles", value: "skip" }
+      ]
+    });
+    if (action === "skip") {
+      log2(pc3.dim("Cancelled."), options);
+      return;
+    }
+    shouldMerge = action === "merge";
+    shouldOverwrite = action === "overwrite";
+  }
+  if (cssExists) {
+    if (shouldOverwrite && !shouldMerge) {
+      await fs4.writeFile(cssPath, GLOBALS_CSS_TEMPLATE);
+      log2(pc3.green(`\u2705 Overwrote ${configPaths.globalsCssPath}`), options);
+    } else if (shouldMerge) {
+      const existingCss = await fs4.readFile(cssPath, "utf-8");
+      const mergedCss = mergeCssVariables(existingCss, GLOBALS_CSS_TEMPLATE);
+      await fs4.writeFile(cssPath, mergedCss);
+      log2(pc3.green(`\u2705 Merged CSS variables in ${configPaths.globalsCssPath}`), options);
+    }
+  } else {
+    await fs4.ensureDir(path4.dirname(cssPath));
+    await fs4.writeFile(cssPath, GLOBALS_CSS_TEMPLATE);
+    log2(pc3.green(`\u2705 Created ${configPaths.globalsCssPath}`), options);
+  }
+  if (tailwindExists) {
+    if (shouldOverwrite && !shouldMerge) {
+      await fs4.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
+      log2(pc3.green(`\u2705 Overwrote ${configPaths.tailwindConfigPath}`), options);
+    } else if (shouldMerge) {
+      const existingConfig = await fs4.readFile(tailwindPath, "utf-8");
+      const mergedConfig = mergeTailwindConfig(existingConfig, TAILWIND_CONFIG_TEMPLATE);
+      await fs4.writeFile(tailwindPath, mergedConfig);
+      log2(pc3.green(`\u2705 Merged Tailwind config in ${configPaths.tailwindConfigPath}`), options);
+    }
+  } else {
+    await fs4.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
+    log2(pc3.green(`\u2705 Created ${configPaths.tailwindConfigPath}`), options);
+  }
+  log2(pc3.green("\n\u2705 Styles added successfully!"), options);
+}
+
 // src/commands/init.ts
+import fs5 from "fs-extra";
+import path5 from "path";
+import pc4 from "picocolors";
+import prompts3 from "prompts";
 var SUPPORTED_FRAMEWORKS = ["vue", "react", "svelte", "astro"];
 var SUPPORTED_PACKAGE_MANAGERS = ["npm", "bun", "pnpm", "yarn"];
-function detectFramework() {
+function detectFramework2() {
   try {
-    const pkg = fs4.readJsonSync(path4.resolve(process.cwd(), "package.json"));
+    const pkg = fs5.readJsonSync(path5.resolve(process.cwd(), "package.json"));
     const deps = { ...pkg.dependencies, ...pkg.devDependencies };
     if (deps["vue"]) return "vue";
     if (deps["react"]) return "react";
@@ -385,19 +588,19 @@ function detectFramework() {
     return null;
   }
 }
-function log2(message, options) {
+function log3(message, options) {
   if (!options.silent) {
     console.log(message);
   }
 }
 function warn2(message, options) {
   if (!options.silent) {
-    console.log(pc3.yellow(`\u26A0\uFE0F  ${message}`));
+    console.log(pc4.yellow(`\u26A0\uFE0F  ${message}`));
   }
 }
-function info(message, options) {
+function info2(message, options) {
   if (!options.silent) {
-    console.log(pc3.cyan(message));
+    console.log(pc4.cyan(message));
   }
 }
 async function init(options = {}) {
@@ -417,36 +620,36 @@ async function init(options = {}) {
   }
   if (options.reinstall === false) {
   }
-  const cwd = options.cwd ? path4.resolve(options.cwd) : process.cwd();
+  const cwd = options.cwd ? path5.resolve(options.cwd) : process.cwd();
   const validTemplates = ["next", "vite", "start", "react-router", "laravel", "astro"];
   let template = options.template?.toLowerCase();
   if (template && !validTemplates.includes(template)) {
     warn2(`Invalid template "${template}". Using default.`, options);
     template = void 0;
   }
-  const configPath = path4.resolve(cwd, "lume.config.json");
-  const configExists = await fs4.pathExists(configPath);
+  const configPath = path5.resolve(cwd, "lume.config.json");
+  const configExists = await fs5.pathExists(configPath);
   if (configExists && !options.force) {
     if (!options.yes) {
-      const { overwrite } = await prompts2({
+      const { overwrite } = await prompts3({
         type: "confirm",
         name: "overwrite",
         message: "lume.config.json already exists. Overwrite?",
         initial: false
       });
       if (!overwrite) {
-        log2("Cancelled.", options);
+        log3("Cancelled.", options);
         return;
       }
     }
   }
-  const detected = detectFramework();
+  const detected = detectFramework2();
   let framework;
   if (detected) {
     framework = detected;
-    info(`Detected framework: ${detected}`, options);
+    info2(`Detected framework: ${detected}`, options);
   } else if (!options.yes) {
-    const { framework: selectedFramework } = await prompts2({
+    const { framework: selectedFramework } = await prompts3({
       type: "select",
       name: "framework",
       message: "Which framework are you using?",
@@ -457,16 +660,16 @@ async function init(options = {}) {
     framework = "vue";
   }
   if (!framework) {
-    log2(pc3.red("\u274C Framework selection required"), options);
+    log3(pc4.red("\u274C Framework selection required"), options);
     process.exit(1);
   }
   const detectedPm = detectPackageManager(cwd);
   let packageManager;
   if (detectedPm) {
     packageManager = detectedPm;
-    info(`Detected package manager: ${detectedPm}`, options);
+    info2(`Detected package manager: ${detectedPm}`, options);
   } else if (!options.yes) {
-    const { pm } = await prompts2({
+    const { pm } = await prompts3({
       type: "select",
       name: "pm",
       message: "Which package manager are you using?",
@@ -477,7 +680,7 @@ async function init(options = {}) {
     packageManager = "npm";
   }
   if (!packageManager) {
-    log2(pc3.red("\u274C Package manager selection required"), options);
+    log3(pc4.red("\u274C Package manager selection required"), options);
     process.exit(1);
   }
   const installCmd = getInstallCommand(packageManager);
@@ -498,11 +701,11 @@ async function init(options = {}) {
       utils: `@/${templateConfig.utilsPath}`
     }
   };
-  await fs4.writeJson(configPath, config, { spaces: 2 });
-  log2(pc3.green(`\u2705 Created lume.config.json`), options);
+  await fs5.writeJson(configPath, config, { spaces: 2 });
+  log3(pc4.green(`\u2705 Created lume.config.json`), options);
   let writeFiles = options.yes;
   if (!options.yes) {
-    const { confirm } = await prompts2({
+    const { confirm } = await prompts3({
       type: "confirm",
       name: "confirm",
       message: "Write globals.css and tailwind.config.ts?",
@@ -511,47 +714,47 @@ async function init(options = {}) {
     writeFiles = confirm;
   }
   if (writeFiles) {
-    const cssPath = path4.resolve(cwd, templateConfig.globalsCssPath);
-    await fs4.ensureDir(path4.dirname(cssPath));
-    if (await fs4.pathExists(cssPath)) {
+    const cssPath = path5.resolve(cwd, templateConfig.globalsCssPath);
+    await fs5.ensureDir(path5.dirname(cssPath));
+    if (await fs5.pathExists(cssPath)) {
       if (options.force || !options.yes) {
-        const { overwrite } = await prompts2({
+        const { overwrite } = await prompts3({
           type: "confirm",
           name: "overwrite",
           message: `${templateConfig.globalsCssPath} already exists. Overwrite?`,
           initial: false
         });
         if (overwrite) {
-          await fs4.writeFile(cssPath, GLOBALS_CSS_TEMPLATE);
-          log2(pc3.green(`\u2705 Updated ${templateConfig.globalsCssPath}`), options);
+          await fs5.writeFile(cssPath, GLOBALS_CSS_TEMPLATE);
+          log3(pc4.green(`\u2705 Updated ${templateConfig.globalsCssPath}`), options);
         }
       }
     } else {
-      await fs4.writeFile(cssPath, GLOBALS_CSS_TEMPLATE);
-      log2(pc3.green(`\u2705 Created ${templateConfig.globalsCssPath}`), options);
+      await fs5.writeFile(cssPath, GLOBALS_CSS_TEMPLATE);
+      log3(pc4.green(`\u2705 Created ${templateConfig.globalsCssPath}`), options);
     }
-    const tailwindPath = path4.resolve(cwd, templateConfig.tailwindConfigPath);
-    if (await fs4.pathExists(tailwindPath)) {
+    const tailwindPath = path5.resolve(cwd, templateConfig.tailwindConfigPath);
+    if (await fs5.pathExists(tailwindPath)) {
       if (options.force || !options.yes) {
-        const { overwrite } = await prompts2({
+        const { overwrite } = await prompts3({
           type: "confirm",
           name: "overwrite",
           message: `${templateConfig.tailwindConfigPath} already exists. Overwrite?`,
           initial: false
         });
         if (overwrite) {
-          await fs4.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
-          log2(pc3.green(`\u2705 Updated ${templateConfig.tailwindConfigPath}`), options);
+          await fs5.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
+          log3(pc4.green(`\u2705 Updated ${templateConfig.tailwindConfigPath}`), options);
         }
       }
     } else {
-      await fs4.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
-      log2(pc3.green(`\u2705 Created ${templateConfig.tailwindConfigPath}`), options);
+      await fs5.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
+      log3(pc4.green(`\u2705 Created ${templateConfig.tailwindConfigPath}`), options);
     }
   }
   let installDeps = options.yes;
   if (!options.yes) {
-    const { confirm } = await prompts2({
+    const { confirm } = await prompts3({
       type: "confirm",
       name: "confirm",
       message: "Install base dependencies (tailwindcss, autoprefixer, postcss)?",
@@ -560,30 +763,30 @@ async function init(options = {}) {
     installDeps = confirm;
   }
   if (installDeps) {
-    log2("", options);
+    log3("", options);
     const baseDeps = ["tailwindcss", "autoprefixer", "postcss"];
     installDependencies(baseDeps, { dev: true });
-    log2("", options);
+    log3("", options);
     const frameworkPkg = framework === "vue" ? "@hemia/lume-vue" : `@hemia/lume-${framework}`;
-    info(`\u{1F4E6} Installing ${frameworkPkg}...`, options);
-    log2(pc3.dim(`   When published, run: ${installCmd} ${frameworkPkg}`), options);
+    info2(`\u{1F4E6} Installing ${frameworkPkg}...`, options);
+    log3(pc4.dim(`   When published, run: ${installCmd} ${frameworkPkg}`), options);
   }
-  log2("", options);
-  log2(pc3.green("\u{1F389} All done! Run the following to add components:"), options);
-  info(`   lume add button`, options);
-  log2("", options);
+  log3("", options);
+  log3(pc4.green("\u{1F389} All done! Run the following to add components:"), options);
+  info2(`   lume add button`, options);
+  log3("", options);
 }
 
 // src/commands/list.ts
-import fs5 from "fs-extra";
-import path5 from "path";
-import pc4 from "picocolors";
+import fs6 from "fs-extra";
+import path6 from "path";
+import pc5 from "picocolors";
 import { createRequire as createRequire2 } from "module";
 var require3 = createRequire2(import.meta.url);
 function getFrameworkFromConfig2() {
   try {
-    const config = fs5.readJsonSync(
-      path5.resolve(process.cwd(), "hemia.config.json")
+    const config = fs6.readJsonSync(
+      path6.resolve(process.cwd(), "hemia.config.json")
     );
     return config.framework ?? "vue";
   } catch {
@@ -591,43 +794,43 @@ function getFrameworkFromConfig2() {
   }
 }
 function resolveRegistryPath2(framework) {
-  const registryRoot = path5.dirname(
+  const registryRoot = path6.dirname(
     require3.resolve("@hemia/lume-registry/package.json")
   );
-  return path5.join(registryRoot, "registry", framework);
+  return path6.join(registryRoot, "registry", framework);
 }
 async function list(options = {}) {
   const framework = options.framework ?? getFrameworkFromConfig2();
   const frameworkRegistry = resolveRegistryPath2(framework);
-  if (!await fs5.pathExists(frameworkRegistry)) {
-    console.log(pc4.red(`\u274C No components found for framework "${framework}"`));
+  if (!await fs6.pathExists(frameworkRegistry)) {
+    console.log(pc5.red(`\u274C No components found for framework "${framework}"`));
     process.exit(1);
   }
-  const entries = await fs5.readdir(frameworkRegistry, { withFileTypes: true });
+  const entries = await fs6.readdir(frameworkRegistry, { withFileTypes: true });
   const components = entries.filter((entry) => entry.isDirectory());
   if (components.length === 0) {
-    console.log(pc4.yellow(`\u26A0\uFE0F  No components available for ${framework}`));
+    console.log(pc5.yellow(`\u26A0\uFE0F  No components available for ${framework}`));
     return;
   }
-  console.log(pc4.cyan(`
+  console.log(pc5.cyan(`
 \u{1F4E6} Available components for ${framework}:
 `));
   for (const component of components) {
     const meta = await readComponentMeta(
-      path5.join(frameworkRegistry, component.name)
+      path6.join(frameworkRegistry, component.name)
     );
     if (meta) {
-      const deps = meta.registryDependencies?.length ? pc4.dim(` (requires: ${meta.registryDependencies.join(", ")})`) : "";
-      console.log(`   ${pc4.green("\u25CF")} ${component.name}${deps}`);
+      const deps = meta.registryDependencies?.length ? pc5.dim(` (requires: ${meta.registryDependencies.join(", ")})`) : "";
+      console.log(`   ${pc5.green("\u25CF")} ${component.name}${deps}`);
     } else {
-      console.log(`   ${pc4.green("\u25CF")} ${component.name}`);
+      console.log(`   ${pc5.green("\u25CF")} ${component.name}`);
     }
   }
   console.log();
-  console.log(pc4.dim(`Total: ${components.length} component(s)`));
+  console.log(pc5.dim(`Total: ${components.length} component(s)`));
   console.log();
-  console.log(pc4.cyan("Usage:"));
-  console.log(pc4.dim(`  hemia add <component-name>`));
+  console.log(pc5.cyan("Usage:"));
+  console.log(pc5.dim(`  hemia add <component-name>`));
   console.log();
 }
 
@@ -636,5 +839,6 @@ var program = new Command();
 program.name("lume").description("lume CLI \u2014 multi-framework component generator inspired by shadcn/ui").version("0.0.1");
 program.command("init").description("Initialize your project and install dependencies").allowUnknownOption(true).argument("[components...]", "name, url or local path to component").option("-t, --template <template>", "the template to use. (next, vite, start, react-router, laravel, astro)").option("-p, --preset [name]", "use a preset configuration. (name, URL, or preset code)").option("-d, --defaults", "use default configuration. (default: false)").option("-y, --yes", "skip confirmation prompt. (default: true)").option("-f, --force", "force overwrite of existing configuration. (default: false)").option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.").option("-s, --silent", "mute output. (default: false)").option("--monorepo", "scaffold a monorepo project.").option("--no-monorepo", "skip the monorepo prompt.").option("--reinstall", "re-install existing UI components.").option("--no-reinstall", "do not re-install existing UI components.").option("--css-variables", "use css variables for theming. (default: true)").option("--no-css-variables", "do not use css variables for theming.").option("-h, --help", "display help for command").action(init);
 program.command("add").description("add a component to your project").allowUnknownOption(true).argument("[components...]", "name, url or local path to component").option("-y, --yes", "skip confirmation prompt. (default: false)").option("-o, --overwrite", "overwrite existing files. (default: false)").option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.").option("-a, --all", "add all available components (default: false)").option("-p, --path <path>", "the path to add the component to.").option("-s, --silent", "mute output. (default: false)").option("--dry-run", "preview changes without writing files. (default: false)").option("--diff [path]", "show diff for a file.").option("--view [path]", "show file contents.").option("-h, --help", "display help for command").option("-f, --framework <framework>", "Target framework (vue, react, svelte, astro)").action(add);
+program.command("add-styles").description("add globals.css and tailwind.config.ts with merge support").option("-y, --yes", "skip confirmation prompt. (default: false)").option("-o, --overwrite", "overwrite existing files. (default: false)").option("-f, --force", "force overwrite without asking. (default: false)").option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.").option("-s, --silent", "mute output. (default: false)").option("-h, --help", "display help for command").action(addStyles);
 program.command("list").description("List all available components").option("-f, --framework <framework>", "Target framework (vue, react, svelte, astro)").action(list);
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hemia/lume",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "files": ["dist"],
   "bin": {