frakment 0.0.2 → 0.0.4

package/bin/index.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 import { readFileSync } from "node:fs";
 import path from "node:path";
+import chalk from "chalk";
 import { Command } from "commander";
-import pc from "picocolors";
 
 import { add } from "../src/commands/add.js";
 import { init } from "../src/commands/init.js";
@@ -23,9 +23,9 @@ program
     "after",
     `
 Examples:
-  ${pc.dim("$ frakment init")}
-  ${pc.dim("$ frakment add status-chip")}
-  ${pc.dim("$ frakment list")}
+  ${chalk.dim("$ frakment init")}
+  ${chalk.dim("$ frakment add button")}
+  ${chalk.dim("$ frakment list")}
 `
   );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frakment",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "CLI and design system for the frakment component registry",
   "keywords": [
     "components",
@@ -21,10 +21,11 @@
     "templates"
   ],
   "dependencies": {
-    "@clack/prompts": "^1.8.1",
+    "chalk": "^5.3.0",
     "commander": "^15.0.0",
     "execa": "^10.2.1",
-    "picocolors": "^1.0.0"
+    "ora": "^8.1.1",
+    "prompts": "^2.4.2"
   },
   "engines": {
     "node": ">=22.12.0"

package/src/commands/add.js

@@ -2,38 +2,40 @@ import { existsSync } from "node:fs";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
 
-import * as p from "@clack/prompts";
+import chalk from "chalk";
 import { execa } from "execa";
-import pc from "picocolors";
+import ora from "ora";
+import prompts from "prompts";
 
 import { detectPackageManager, findProjectRoot } from "../utils/detect.js";
+import { logger } from "../utils/logger.js";
 
-async function fetchComponent(name, registryUrl, s) {
-  s.start(`fetching ${name}`);
+async function fetchComponent(name, registryUrl, spinner) {
   try {
     const res = await fetch(`${registryUrl}/${name}.json`);
     if (!res.ok) {
       throw new Error(`HTTP ${res.status}`);
     }
     const payload = await res.json();
-    s.stop(`${pc.green("✓")} fetched ${name}`);
+    spinner.text = `Fetching ${name}...`;
     return payload;
   } catch {
-    s.stop(`${pc.red("✗")} ${name} not found in registry`);
+    spinner.fail(`Registry fetch failed for ${name}.`);
     process.exit(1);
   }
 }
-
 async function writeFileSafely(file, cwd, options) {
   const targetPath = path.join(cwd, file.path);
   if (existsSync(targetPath) && !options.overwrite) {
-    const overwrite = await p.confirm({
-      initialValue: false,
+    const { overwrite } = await prompts({
+      initial: false,
       message: `${file.path} already exists. Overwrite?`,
+      name: "overwrite",
+      type: "confirm",
     });
-    if (p.isCancel(overwrite) || !overwrite) {
-      p.log.info(`skipped ${file.path}`);
-      return;
+    if (overwrite === undefined || !overwrite) {
+      logger.info(`Skipped ${file.path}.`);
+      return null;
     }
   }
   await mkdir(path.dirname(targetPath), { recursive: true });
@@ -42,36 +44,31 @@ async function writeFileSafely(file, cwd, options) {
       ? Buffer.from(file.content, "base64")
       : file.content.replaceAll("\r\n", "\n");
   await writeFile(targetPath, output);
-  p.log.success(file.path);
+  return file.path;
 }
 
 export async function add(componentName, options) {
-  p.intro(`${pc.dim("frakment")} add ${pc.bold(componentName)}`);
-
   let cwd;
+  const preflight = ora("Preflight checks").start();
   try {
     cwd = findProjectRoot(process.cwd());
+    preflight.succeed("Preflight checks. Found project root.");
   } catch (error) {
-    p.outro(pc.red("error ") + error.message);
+    preflight.fail(error.message);
     process.exit(1);
   }
-
   const configPath = path.join(cwd, "components.json");
   if (!existsSync(configPath)) {
-    p.outro(
-      `${pc.red(
-        "error "
-      )}components.json not found. Run \`frakment init\` first.`
-    );
+    logger.error(`${chalk.red("Error:")} components.json not found.`);
+    logger.info("Run `frakment init` first.");
     process.exit(1);
   }
 
   const configRaw = await readFile(configPath, "utf-8");
   const config = JSON.parse(configRaw.replace(/^\uFEFF/u, ""));
   const registryUrl = (options.registry ?? config.registry).replace(/\/$/u, "");
-  const s = p.spinner();
 
-  // 1. Recursively fetch the component and its registryDependencies
+  const registrySpinner = ora("Checking registry").start();
   const queue = [componentName];
   const fetched = new Map();
   const npmDeps = new Set();
@@ -81,7 +78,7 @@ export async function add(componentName, options) {
     if (fetched.has(name)) {
       continue;
     }
-    const payload = await fetchComponent(name, registryUrl, s);
+    const payload = await fetchComponent(name, registryUrl, registrySpinner);
     fetched.set(name, payload);
     for (const d of payload.dependencies ?? []) {
       npmDeps.add(d);
@@ -92,10 +89,7 @@ export async function add(componentName, options) {
       }
     }
   }
-
-  // 2. Write registry deps first (imports resolve), then main component
-  // Detect src/ layout: component files go under src/, but public/ assets
-  // stay at project root (Next.js serves public/ from root regardless of src/).
+  registrySpinner.succeed("Checking registry.");
   const isSrcLayout = config.tailwind?.css?.startsWith("src/") ?? false;
   const resolveTargetPath = (p) => {
     if (!isSrcLayout) {
@@ -109,14 +103,26 @@ export async function add(componentName, options) {
 
   const order = [...fetched.keys()].filter((n) => n !== componentName);
   order.push(componentName);
+  const written = [];
+
   for (const name of order) {
     for (const file of fetched.get(name).files ?? []) {
       const targetFile = { ...file, path: resolveTargetPath(file.path) };
-      await writeFileSafely(targetFile, cwd, options);
+      const result = await writeFileSafely(targetFile, cwd, options);
+      if (result) {
+        written.push(result);
+      }
     }
   }
 
-  // 3. Install npm dependencies
+  if (written.length > 0) {
+    logger.success(
+      `Created ${written.length} file${written.length === 1 ? "" : "s"}:`
+    );
+    for (const p of written) {
+      logger.log(`  - ${p}`);
+    }
+  }
   if (npmDeps.size > 0) {
     const pkgPath = path.join(cwd, "package.json");
     const pkgRaw = await readFile(pkgPath, "utf-8");
@@ -124,19 +130,19 @@ export async function add(componentName, options) {
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     const missing = [...npmDeps].filter((d) => !allDeps[d]);
     if (missing.length > 0) {
-      s.start(`installing ${missing.join(", ")}`);
+      const s = ora("Installing dependencies").start();
       const pm = detectPackageManager(cwd);
       try {
         const args =
           pm === "npm" ? ["install", ...missing] : ["add", ...missing];
         await execa(pm, args, { cwd, stdio: "ignore" });
-        s.stop(`${pc.green("✓")} installed ${missing.length} package(s)`);
+        s.succeed(`Installed ${missing.length} package(s).`);
       } catch (error) {
-        s.stop(`${pc.red("✗")} failed to install dependencies`);
-        p.log.warn(error.message);
+        s.fail("Failed to install dependencies.");
+        logger.warn(error.message);
       }
     }
   }
 
-  p.outro(`${pc.green("✓")} ${componentName} added`);
+  logger.break();
 }

package/src/commands/init.js

@@ -2,15 +2,17 @@ import { existsSync } from "node:fs";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
 
-import * as p from "@clack/prompts";
+import chalk from "chalk";
 import { execa } from "execa";
-import pc from "picocolors";
+import ora from "ora";
+import prompts from "prompts";
 
 import {
   detectGlobalsCss,
   detectPackageManager,
   findProjectRoot,
 } from "../utils/detect.js";
+import { logger } from "../utils/logger.js";
 
 const __dirname = import.meta.dirname;
 const TEMPLATES_DIR = path.resolve(__dirname, "../../templates");
@@ -20,43 +22,64 @@ const CONFIG_FILE = "components.json";
 const THEME_MARKER_START = "/* ==== FRAKMENT THEME START ==== */";
 const THEME_MARKER_END = "/* ==== FRAKMENT THEME END ==== */";
 
-export async function init() {
-  p.intro(`${pc.dim("frakment")} init`);
+function escapeRegex(s) {
+  return s.replaceAll(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+}
 
+export async function init() {
   let cwd;
+  const preflight = ora("Preflight checks").start();
   try {
     cwd = findProjectRoot(process.cwd());
+    preflight.succeed("Preflight checks. Found project root.");
   } catch (error) {
-    p.outro(pc.red("error ") + error.message);
+    preflight.fail(error.message);
     process.exit(1);
   }
 
+  const cssPath = detectGlobalsCss(cwd);
+  const cssFullPath = path.join(cwd, cssPath);
+  const cssCheck = ora("Verifying Tailwind CSS config").start();
+  if (!existsSync(cssFullPath)) {
+    cssCheck.fail(`CSS file not found: ${cssPath}`);
+    logger.error("Frakment needs an existing Tailwind v4 entry file.");
+    process.exit(1);
+  }
+  let css = await readFile(cssFullPath, "utf-8");
+  css = css.replace(/^\uFEFF/u, "");
+  if (!/^@import\s+["']tailwindcss(\/|["'])/mu.test(css)) {
+    cssCheck.fail("Frakment requires Tailwind v4.");
+    logger.error(`Could not find @import "tailwindcss" in ${cssPath}`);
+    process.exit(1);
+  }
+  cssCheck.succeed(
+    `Verifying Tailwind CSS config. Found ${chalk.cyan("v4")} in ${chalk.cyan(cssPath)}.`
+  );
+
   const configPath = path.join(cwd, CONFIG_FILE);
   const configExists = existsSync(configPath);
   let shouldWriteConfig = !configExists;
-
   if (configExists) {
-    const overwrite = await p.confirm({
-      initialValue: false,
+    const { overwrite } = await prompts({
+      initial: false,
       message: `${CONFIG_FILE} already exists. Overwrite?`,
+      name: "overwrite",
+      type: "confirm",
     });
-    if (p.isCancel(overwrite)) {
-      p.outro(pc.dim("cancelled"));
-      return;
+    if (overwrite === undefined) {
+      logger.break();
+      logger.info("Cancelled.");
+      process.exit(0);
     }
-    if (overwrite) {
-      shouldWriteConfig = true;
-    } else {
-      p.log.info(`keeping existing ${CONFIG_FILE}`);
+    shouldWriteConfig = overwrite === true;
+    if (!shouldWriteConfig) {
+      logger.break();
+      logger.info(`Keeping existing ${CONFIG_FILE}.`);
     }
   }
 
-  const s = p.spinner();
-  const cssPath = detectGlobalsCss(cwd);
-
-  // 1. components.json (write only if new or user chose to overwrite)
   if (shouldWriteConfig) {
-    s.start("writing components.json");
+    const s = ora("Writing components.json").start();
     const template = JSON.parse(
       await readFile(path.join(TEMPLATES_DIR, "components.json"), "utf-8")
     );
@@ -66,37 +89,9 @@ export async function init() {
       tailwind: { ...template.tailwind, css: cssPath },
     };
     await writeFile(configPath, `${JSON.stringify(config, null, 2)}\n`);
-    s.stop(`${pc.green("✓")} components.json`);
-  }
-
-  // 2. theme (inline block)
-  const cssFullPath = path.join(cwd, cssPath);
-  if (!existsSync(cssFullPath)) {
-    p.log.error(`CSS file not found: ${cssPath}`);
-    p.outro(
-      `${pc.red(
-        "error "
-      )}Could not find globals.css. Frakment needs an existing Tailwind v4 entry file.`
-    );
-    process.exit(1);
+    s.succeed("Writing components.json.");
   }
-
-  let css = await readFile(cssFullPath, "utf-8");
-  css = css.replace(/^\uFEFF/u, "");
-
-  if (!/^@import\s+["']tailwindcss(\/|["'])/mu.test(css)) {
-    p.outro(
-      `${pc.red(
-        "error "
-      )}Frakment requires Tailwind v4. Could not find @import "tailwindcss" in ${
-        cssPath
-      }`
-    );
-    process.exit(1);
-  }
-
-  // Cleanup: strip any prior theme block (marker-bounded) and
-  // any split-approach @import "./theme.css" line.
+  const themeSpinner = ora("Updating CSS variables").start();
   css = css.replaceAll(
     new RegExp(
       `\\n*${escapeRegex(THEME_MARKER_START)}[\\s\\S]*?${escapeRegex(THEME_MARKER_END)}\\n*`,
@@ -107,8 +102,6 @@ export async function init() {
   css = css.replaceAll(/^@import\s+["']\.\/theme\.css["'];?\s*$\n?/gmu, "");
   css = `${css.replaceAll(/\n{3,}/gu, "\n\n").trimEnd()}\n`;
 
-  // Inject fresh theme block right after the last top-level @import
-  s.start("injecting theme block");
   const themeContent = await readFile(
     path.join(TEMPLATES_DIR, "theme.css"),
     "utf-8"
@@ -123,13 +116,10 @@ export async function init() {
   } else {
     css = `${css.trimEnd()}\n\n${wrapped}\n`;
   }
-
   await writeFile(cssFullPath, css);
-  s.stop(`${pc.green("✓")} theme block`);
-
-  // 3. lib/utils.ts
+  themeSpinner.succeed(`Updating CSS variables in ${cssPath}`);
   if (!existsSync(path.join(cwd, "lib/utils.ts"))) {
-    s.start("creating lib/utils.ts");
+    const s = ora("Creating lib/utils.ts").start();
     await mkdir(path.join(cwd, "lib"), { recursive: true });
     await writeFile(
       path.join(cwd, "lib/utils.ts"),
@@ -141,12 +131,12 @@ export function cn(...inputs: ClassValue[]) {
 }
 `
     );
-    s.stop(`${pc.green("✓")} lib/utils.ts`);
+    s.succeed("Created 1 file:");
+    logger.log("  - lib/utils.ts");
   }
 
-  // 3b. lib/animation.ts
   if (!existsSync(path.join(cwd, "lib/animation.ts"))) {
-    s.start("creating lib/animation.ts");
+    const s = ora("Creating lib/animation.ts").start();
     await mkdir(path.join(cwd, "lib"), { recursive: true });
     await writeFile(
       path.join(cwd, "lib/animation.ts"),
@@ -160,10 +150,9 @@ export const DURATION_FAST = 0.2
 export const DURATION_SMOOTH = 0.45
 `
     );
-    s.stop(`${pc.green("✓")} lib/animation.ts`);
+    s.succeed("Created 1 file:");
+    logger.log("  - lib/animation.ts");
   }
-
-  // 4. dependencies
   const pkgPath = path.join(cwd, "package.json");
   const pkgRaw = await readFile(pkgPath, "utf-8");
   const pkg = JSON.parse(pkgRaw.replace(/^\uFEFF/u, ""));
@@ -173,29 +162,26 @@ export const DURATION_SMOOTH = 0.45
     "tailwind-merge",
     "class-variance-authority",
     "radix-ui",
-    "@phosphor-icons/react",
+    "lucide-react",
     "motion",
   ].filter((d) => !allDeps[d]);
 
   if (missing.length > 0) {
-    s.start(`installing ${missing.join(", ")}`);
+    const s = ora("Installing dependencies").start();
     const pm = detectPackageManager(cwd);
     try {
       const args = pm === "npm" ? ["install", ...missing] : ["add", ...missing];
       await execa(pm, args, { cwd, stdio: "ignore" });
-      s.stop(`${pc.green("✓")} installed ${missing.length} package(s)`);
+      s.succeed(`Installed ${missing.length} package(s).`);
     } catch (error) {
-      s.stop(`${pc.red("✗")} failed to install dependencies`);
-      p.log.warn(error.message);
+      s.fail("Failed to install dependencies.");
+      logger.warn(error.message);
     }
   }
 
-  p.outro(
-    `${pc.green("✓")} frakment is ready\n\n` +
-      `  Next  ${pc.cyan("frakment add status-chip")}`
+  logger.break();
+  logger.log(
+    `${chalk.green("Success!")} Project initialization completed. You may now add components.`
   );
-}
-
-function escapeRegex(s) {
-  return s.replaceAll(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+  logger.break();
 }

package/src/commands/list.js

@@ -2,34 +2,33 @@ import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 
-import * as p from "@clack/prompts";
-import pc from "picocolors";
+import chalk from "chalk";
+import ora from "ora";
 
 import { findProjectRoot } from "../utils/detect.js";
+import { logger } from "../utils/logger.js";
 
 export async function list(options) {
-  p.intro(`${pc.dim("frakment")} list`);
-
   let cwd;
+  const preflight = ora("Preflight checks").start();
   try {
     cwd = findProjectRoot(process.cwd());
+    preflight.succeed("Preflight checks. Found project root.");
   } catch (error) {
-    p.outro(pc.red("error ") + error.message);
+    preflight.fail(error.message);
     process.exit(1);
   }
 
   const configPath = path.join(cwd, "components.json");
   if (!existsSync(configPath)) {
-    p.outro(
-      `${pc.red("error ")}components.json not found. Run \`frakment init\` first.`
-    );
+    logger.error(`${chalk.red("Error:")} components.json not found.`);
+    logger.info("Run `frakment init` first.");
     process.exit(1);
   }
 
   const config = JSON.parse(await readFile(configPath, "utf-8"));
   const registryUrl = (options.registry ?? config.registry).replace(/\/$/u, "");
-  const s = p.spinner();
-  s.start("fetching components");
+  const s = ora("Fetching components").start();
 
   let index;
   try {
@@ -39,23 +38,25 @@ export async function list(options) {
     }
     index = await res.json();
   } catch {
-    s.stop(`${pc.red("✗")} failed to fetch component list`);
+    s.fail("Failed to fetch component list.");
     process.exit(1);
   }
-  s.stop(`${pc.green("✓")} found ${index.components.length} component(s)`);
+  s.succeed(`Found ${index.components.length} component(s).`);
 
   if (!index.components.length) {
-    p.outro(pc.dim("no components available yet"));
+    logger.break();
+    logger.log(chalk.dim("No components available yet."));
     return;
   }
 
   const nameWidth = Math.max(...index.components.map((c) => c.name.length));
-  const lines = index.components.map(
-    (c) =>
-      `  ${pc.cyan(c.name.padEnd(nameWidth))}  ${pc.dim(c.description ?? "")}`
-  );
-
-  p.outro(
-    `${lines.join("\n")}\n\n  Add one with ${pc.cyan("frakment add <name>")}`
-  );
+  logger.break();
+  for (const c of index.components) {
+    logger.log(
+      `  ${chalk.cyan(c.name.padEnd(nameWidth))}  ${chalk.dim(c.description ?? "")}`
+    );
+  }
+  logger.break();
+  logger.log(`Add one with ${chalk.cyan("frakment add <name>")}`);
+  logger.break();
 }

package/src/utils/logger.js

@@ -0,0 +1,12 @@
+import chalk from "chalk";
+import ora from "ora";
+
+export const logger = {
+  break: () => console.log(""),
+  error: (...args) => console.log(chalk.red(...args)),
+  info: (...args) => console.log(chalk.cyan(...args)),
+  log: (...args) => console.log(...args),
+  spinner: (text) => ora(text),
+  success: (...args) => console.log(chalk.green(...args)),
+  warn: (...args) => console.log(chalk.yellow(...args)),
+};