@kinetixui/cli 0.15.0 → 0.16.1

package/dist/index.js

@@ -2,7 +2,7 @@
 
 // src/index.ts
 import { Command } from "commander";
-import pc8 from "picocolors";
+import pc9 from "picocolors";
 
 // src/commands/add.ts
 import { existsSync as existsSync4 } from "fs";
@@ -91,6 +91,14 @@ function assertComponentName(name) {
   }
   return name;
 }
+function assertThemeName(name) {
+  if (typeof name !== "string" || !/^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i.test(name)) {
+    throw new Error(
+      `Invalid theme name ${JSON.stringify(name)} \u2014 expected letters, digits and dashes.`
+    );
+  }
+  return name;
+}
 function assertRegistryUrl(url) {
   let parsed;
   try {
@@ -248,6 +256,13 @@ async function doctor() {
         levels.push(report("warn", `"${alias}" alias points to ${path5.relative(cwd, dir) || "."}, which doesn't exist yet.`));
       }
     }
+    const utilsBase = resolveAliasDir(cwd, config, "utils");
+    const utilsFile = [".ts", ".tsx", ".js", ".jsx"].map((ext) => `${utilsBase}${ext}`).find((f) => existsSync5(f));
+    if (utilsFile) {
+      levels.push(report("pass", `"utils" alias resolves to ${path5.relative(cwd, utilsFile)}`));
+    } else {
+      levels.push(report("warn", `"utils" alias points to ${path5.relative(cwd, utilsBase)}, which doesn't exist yet.`));
+    }
     const cssPath2 = path5.join(cwd, config.srcDir ? "src" : "", config.tailwind.css);
     if (existsSync5(cssPath2)) {
       levels.push(report("pass", `Tailwind CSS file found at ${path5.relative(cwd, cssPath2)}`));
@@ -381,7 +396,12 @@ async function inspect(name, options) {
   console.log();
   console.log(`${pc4.dim("Type")}         ${item.type}`);
   const cwd = process.cwd();
-  const config = await readConfig(cwd);
+  let config = null;
+  try {
+    config = await readConfig(cwd);
+  } catch {
+    console.log(`${pc4.dim("Installed")}    ${pc4.yellow("? (kinetixui.json exists but isn't valid JSON)")}`);
+  }
   if (config) {
     const uiDir = resolveAliasDir(cwd, config, "ui");
     const installed = item.files.some(
@@ -412,24 +432,191 @@ async function inspect(name, options) {
   console.log(`Add it: ${pc4.cyan(`npx @kinetixui/cli add ${item.name}`)}`);
 }
 
-// src/commands/list.ts
+// src/commands/lint.ts
+import { existsSync as existsSync8 } from "fs";
+import { readdir as readdir2, readFile as readFile2 } from "fs/promises";
+import path8 from "path";
 import pc5 from "picocolors";
+
+// src/lib/lint.ts
+function stripComments(text) {
+  const noBlocks = text.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " "));
+  return noBlocks.replace(/(^|[^:])\/\/.*$/gm, (_m, pre) => pre);
+}
+var HEX = "(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})";
+var COLOR_UTILITY_PREFIXES = [
+  "bg",
+  "text",
+  "border",
+  "fill",
+  "stroke",
+  "ring",
+  "from",
+  "via",
+  "to",
+  "outline",
+  "decoration",
+  "caret",
+  "accent",
+  "shadow",
+  "divide"
+];
+var COLOR_PATTERNS = [
+  // bg-[#1a2b3c], text-[#fff], ring-[#1a2b3c80] …
+  new RegExp(`\\b(?:${COLOR_UTILITY_PREFIXES.join("|")})-\\[#${HEX}\\]`, "g"),
+  // style={{ color: "#1a2b3c" }} / a plain CSS declaration `color: #1a2b3c;`
+  new RegExp(`:\\s*["']?#${HEX}["']?`, "g")
+];
+var SPACING_UTILITY_PATTERN = "-?(?:(?:p|m)[trblxy]?|gap(?:-[xy])?|space-[xy]|inset(?:-[xy])?|top|right|bottom|left)";
+var SPACING_VALUE = "-?[\\d.]+(?:px|rem|em|%)?";
+var SPACING_PATTERNS = [
+  new RegExp(`\\b(?:${SPACING_UTILITY_PATTERN})-\\[${SPACING_VALUE}\\]`, "g")
+];
+function lineOf(text, index) {
+  let line = 1;
+  for (let i = 0; i < index; i++) if (text.charCodeAt(i) === 10) line++;
+  return line;
+}
+function snippetAround(text, index, length) {
+  const lineStart = text.lastIndexOf("\n", index) + 1;
+  let lineEnd = text.indexOf("\n", index);
+  if (lineEnd === -1) lineEnd = text.length;
+  return text.slice(lineStart, lineEnd).trim().slice(0, 120) || text.slice(index, index + length);
+}
+function lintText(file, rawText) {
+  const text = stripComments(rawText);
+  const violations = [];
+  const seen = /* @__PURE__ */ new Set();
+  const scan = (patterns, kind) => {
+    for (const pattern of patterns) {
+      pattern.lastIndex = 0;
+      let match;
+      while (match = pattern.exec(text)) {
+        const line = lineOf(text, match.index);
+        const key = `${kind}:${line}:${match.index}`;
+        if (!seen.has(key)) {
+          seen.add(key);
+          violations.push({ file, line, kind, snippet: snippetAround(text, match.index, match[0].length) });
+        }
+        if (match[0].length === 0) pattern.lastIndex++;
+      }
+    }
+  };
+  scan(COLOR_PATTERNS, "color");
+  scan(SPACING_PATTERNS, "spacing");
+  violations.sort((a, b) => a.line - b.line);
+  return violations;
+}
+var LINT_EXTENSIONS = [".tsx", ".jsx", ".ts", ".js", ".css"];
+
+// src/commands/lint.ts
+var SUGGESTION = {
+  color: "consider a semantic token utility instead (e.g. bg-primary, text-foreground)",
+  spacing: "consider a token-backed spacing utility instead (e.g. p-4, gap-2)"
+};
+function dedupeNestedDirs(dirs) {
+  const sorted = [...new Set(dirs)].sort((a, b) => a.length - b.length);
+  const kept = [];
+  for (const dir of sorted) {
+    if (!kept.some((k) => dir === k || dir.startsWith(k + path8.sep))) kept.push(dir);
+  }
+  return kept;
+}
+async function collectFiles(dir) {
+  if (!existsSync8(dir)) return [];
+  const files = [];
+  const walk = async (current) => {
+    const entries = await readdir2(current, { withFileTypes: true });
+    for (const entry of entries) {
+      const full = path8.join(current, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name === "node_modules" || entry.name.startsWith(".")) continue;
+        await walk(full);
+      } else if (entry.isFile() && LINT_EXTENSIONS.includes(path8.extname(entry.name))) {
+        files.push(full);
+      }
+    }
+  };
+  await walk(dir);
+  return files;
+}
+async function lint(targetArg, options) {
+  const cwd = process.cwd();
+  let dirs;
+  if (targetArg) {
+    dirs = [path8.resolve(cwd, targetArg)];
+  } else {
+    if (!existsSync8(path8.join(cwd, CONFIG_FILE))) {
+      throw new Error(`No ${CONFIG_FILE} found \u2014 run "kinetixui init" first, or pass a path: kinetixui lint <path>`);
+    }
+    const config = await readConfig(cwd);
+    if (!config) throw new Error(`${CONFIG_FILE} exists but isn't valid JSON.`);
+    dirs = dedupeNestedDirs([resolveAliasDir(cwd, config, "components"), resolveAliasDir(cwd, config, "ui")]);
+  }
+  const seenFiles = /* @__PURE__ */ new Set();
+  const files = [];
+  for (const dir of dirs) {
+    for (const file of await collectFiles(dir)) {
+      if (!seenFiles.has(file)) {
+        seenFiles.add(file);
+        files.push(file);
+      }
+    }
+  }
+  if (files.length === 0) {
+    console.log(pc5.dim(`No ${LINT_EXTENSIONS.join("/")} files found in ${dirs.map((d) => path8.relative(cwd, d) || ".").join(", ")}.`));
+    return;
+  }
+  let totalViolations = 0;
+  let filesWithViolations = 0;
+  for (const file of files) {
+    const text = await readFile2(file, "utf8");
+    const violations = lintText(file, text);
+    if (violations.length === 0) continue;
+    filesWithViolations++;
+    const rel = path8.relative(cwd, file);
+    for (const v of violations) {
+      totalViolations++;
+      console.log(
+        `${pc5.yellow("!")} ${pc5.bold(`${rel}:${v.line}`)} \u2014 hardcoded ${v.kind}: ${pc5.dim(v.snippet)}`
+      );
+      console.log(`  ${pc5.dim(SUGGESTION[v.kind])}`);
+    }
+  }
+  console.log();
+  if (totalViolations === 0) {
+    console.log(pc5.green("\u2714"), `${files.length} file${files.length === 1 ? "" : "s"} scanned, no hardcoded colors or spacing found.`);
+  } else {
+    console.log(
+      `${totalViolations} violation${totalViolations === 1 ? "" : "s"} in ${filesWithViolations} of ${files.length} file${files.length === 1 ? "" : "s"} scanned.`
+    );
+    console.log(
+      pc5.dim(
+        "Checks unknown/deprecated tokens, accessibility violations and cross-platform inconsistencies aren't covered yet \u2014 see https://kinetixui.com/docs/cli#lint."
+      )
+    );
+    if (options.fail) process.exitCode = 1;
+  }
+}
+
+// src/commands/list.ts
+import pc6 from "picocolors";
 async function list(options) {
   const items = await fetchRegistryIndex(options.registry);
   const components = items.filter((item) => item.type === "registry:ui").sort((a, b) => a.name.localeCompare(b.name));
   console.log(`${components.length} component(s):`);
   console.log();
   for (const item of components) {
-    const description = item.description ? pc5.dim(` \u2014 ${item.description}`) : "";
-    console.log(`  ${pc5.cyan(item.name)}${description}`);
+    const description = item.description ? pc6.dim(` \u2014 ${item.description}`) : "";
+    console.log(`  ${pc6.cyan(item.name)}${description}`);
   }
   console.log();
-  console.log(`Add one: ${pc5.cyan("npx @kinetixui/cli add <name>")}`);
-  console.log(`Add everything: ${pc5.cyan("npx @kinetixui/cli add --all")}`);
+  console.log(`Add one: ${pc6.cyan("npx @kinetixui/cli add <name>")}`);
+  console.log(`Add everything: ${pc6.cyan("npx @kinetixui/cli add --all")}`);
 }
 
 // src/commands/parity.ts
-import pc6 from "picocolors";
+import pc7 from "picocolors";
 var PLATFORMS = ["React", "SwiftUI", "Compose", "Flutter"];
 var PLATFORM_ABBR = {
   React: "RE",
@@ -447,11 +634,11 @@ async function parity(names, options) {
   }) : components;
   const nameWidth = Math.max(9, ...rows.map((r) => r.name.length));
   const header = `${"COMPONENT".padEnd(nameWidth)}  ${PLATFORMS.map((p) => PLATFORM_ABBR[p]).join("  ")}  STATUS`;
-  console.log(pc6.dim(header));
+  console.log(pc7.dim(header));
   for (const item of rows) {
     const on = new Set(item.platforms ?? PLATFORMS);
-    const marks = PLATFORMS.map((p) => on.has(p) ? pc6.green("\u2713 ") : pc6.dim("\u2014 "));
-    const status = item.status ? pc6.yellow(item.status) : "";
+    const marks = PLATFORMS.map((p) => on.has(p) ? pc7.green("\u2713 ") : pc7.dim("\u2014 "));
+    const status = item.status ? pc7.yellow(item.status) : "";
     console.log(`${item.name.padEnd(nameWidth)}  ${marks.join(" ")}  ${status}`);
   }
   console.log();
@@ -459,10 +646,10 @@ async function parity(names, options) {
 }
 
 // src/commands/theme.ts
-import { existsSync as existsSync8 } from "fs";
-import { mkdir as mkdir2, readFile as readFile2, writeFile as writeFile3 } from "fs/promises";
-import path8 from "path";
-import pc7 from "picocolors";
+import { existsSync as existsSync9 } from "fs";
+import { mkdir as mkdir2, readFile as readFile3, writeFile as writeFile3 } from "fs/promises";
+import path9 from "path";
+import pc8 from "picocolors";
 
 // src/lib/color-math.ts
 function hexToRgb(hex) {
@@ -652,57 +839,59 @@ function scaffoldThemeFile(name) {
 // src/commands/theme.ts
 var THEME_DIR = "kinetixui-themes";
 function csvPath(cwd, name) {
-  return path8.join(cwd, THEME_DIR, `${name}.csv`);
+  return path9.join(cwd, THEME_DIR, `${name}.csv`);
 }
 function cssPath(cwd, name) {
-  return path8.join(cwd, THEME_DIR, `${name}.css`);
+  return path9.join(cwd, THEME_DIR, `${name}.css`);
 }
 async function themeCreate(name, options) {
+  assertThemeName(name);
   const cwd = process.cwd();
   const file = csvPath(cwd, name);
-  if (existsSync8(file) && !options.force) {
-    throw new Error(`${path8.relative(cwd, file)} already exists. Pass --force to overwrite it.`);
+  if (existsSync9(file) && !options.force) {
+    throw new Error(`${path9.relative(cwd, file)} already exists. Pass --force to overwrite it.`);
   }
-  await mkdir2(path8.dirname(file), { recursive: true });
+  await mkdir2(path9.dirname(file), { recursive: true });
   await writeFile3(file, scaffoldThemeFile(name), "utf8");
-  console.log(pc7.green("\u2714"), `Wrote ${path8.relative(cwd, file)}`);
+  console.log(pc8.green("\u2714"), `Wrote ${path9.relative(cwd, file)}`);
   console.log(`Uncomment and edit the tokens you want to override, then run:`);
-  console.log(pc7.dim(`  kinetixui theme build ${name}`));
+  console.log(pc8.dim(`  kinetixui theme build ${name}`));
 }
 async function themeBuild(name, options) {
+  assertThemeName(name);
   const cwd = process.cwd();
   const src = csvPath(cwd, name);
-  if (!existsSync8(src)) {
-    throw new Error(`${path8.relative(cwd, src)} doesn't exist. Run "kinetixui theme create ${name}" first.`);
+  if (!existsSync9(src)) {
+    throw new Error(`${path9.relative(cwd, src)} doesn't exist. Run "kinetixui theme create ${name}" first.`);
   }
-  const text = await readFile2(src, "utf8");
+  const text = await readFile3(src, "utf8");
   const { values: parsed, errors, unknownTokens } = parseThemeFile(text);
-  for (const err of errors) console.log(pc7.yellow("!"), err);
-  for (const unknown of unknownTokens) console.log(pc7.yellow("!"), `"${unknown}" isn't a known token \u2014 skipped.`);
+  for (const err of errors) console.log(pc8.yellow("!"), err);
+  for (const unknown of unknownTokens) console.log(pc8.yellow("!"), `"${unknown}" isn't a known token \u2014 skipped.`);
   const values = deriveForegrounds(parsed);
   const setCount = Object.keys(values).length;
   if (setCount === 0) {
-    throw new Error(`No tokens set in ${path8.relative(cwd, src)} \u2014 nothing to build. Uncomment at least one line.`);
+    throw new Error(`No tokens set in ${path9.relative(cwd, src)} \u2014 nothing to build. Uncomment at least one line.`);
   }
   const dest = cssPath(cwd, name);
   await writeFile3(dest, toCssBlock(values), "utf8");
-  console.log(pc7.green("\u2714"), `Wrote ${path8.relative(cwd, dest)} (${setCount} token${setCount === 1 ? "" : "s"})`);
-  console.log(`Paste it after ${pc7.dim('@import "@kinetixui/tokens/css";')} in your global CSS.`);
+  console.log(pc8.green("\u2714"), `Wrote ${path9.relative(cwd, dest)} (${setCount} token${setCount === 1 ? "" : "s"})`);
+  console.log(`Paste it after ${pc8.dim('@import "@kinetixui/tokens/css";')} in your global CSS.`);
   console.log();
-  console.log(pc7.dim("WCAG AA contrast (4.5:1)"));
+  console.log(pc8.dim("WCAG AA contrast (4.5:1)"));
   const results = checkContrast(values);
   let failed = 0;
   for (const { pair, ratio, pass } of results) {
-    const mark = pass ? pc7.green("\u2714") : pc7.red("\u2716");
+    const mark = pass ? pc8.green("\u2714") : pc8.red("\u2716");
     if (!pass) failed++;
-    console.log(`${mark} ${pair[0]} / ${pair[1]}`, pc7.dim(`${ratio.toFixed(2)}:1`));
+    console.log(`${mark} ${pair[0]} / ${pair[1]}`, pc8.dim(`${ratio.toFixed(2)}:1`));
   }
   if (results.length === 0) {
-    console.log(pc7.dim("(no checkable pairs \u2014 set at least one base + foreground, or just a base to auto-derive one)"));
+    console.log(pc8.dim("(no checkable pairs \u2014 set at least one base + foreground, or just a base to auto-derive one)"));
   }
   console.log();
   console.log("Native (SwiftUI/Compose/Flutter) theme output isn't built yet \u2014 this compiles to CSS only.");
-  console.log(pc7.dim("See https://kinetixui.com/docs/cli#theme for the current scope."));
+  console.log(pc8.dim("See https://kinetixui.com/docs/cli#theme for the current scope."));
   if (failed > 0 && options.failOnContrast) {
     process.exitCode = 1;
   }
@@ -711,7 +900,7 @@ async function themeBuild(name, options) {
 // package.json
 var package_default = {
   name: "@kinetixui/cli",
-  version: "0.15.0",
+  version: "0.16.1",
   description: "Add KinetixUI components and tokens to your project.",
   type: "module",
   license: "MIT",
@@ -755,7 +944,7 @@ program.command("init").description("Set up kinetixui.json and pull in the token
   try {
     await init({ registry: opts.registry, yes: opts.yes });
   } catch (err) {
-    console.error(pc8.red("\u2716"), err.message);
+    console.error(pc9.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -763,7 +952,7 @@ program.command("add").description("Add one or more components to your project."
   try {
     await add(components, { registry: opts.registry, overwrite: opts.overwrite, all: opts.all });
   } catch (err) {
-    console.error(pc8.red("\u2716"), err.message);
+    console.error(pc9.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -771,7 +960,7 @@ program.command("list").description("List every component available in the regis
   try {
     await list({ registry: opts.registry });
   } catch (err) {
-    console.error(pc8.red("\u2716"), err.message);
+    console.error(pc9.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -779,7 +968,7 @@ program.command("inspect").description("Show everything the registry knows about
   try {
     await inspect(name, { registry: opts.registry });
   } catch (err) {
-    console.error(pc8.red("\u2716"), err.message);
+    console.error(pc9.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -787,7 +976,15 @@ program.command("parity").description("Show which platforms carry each component
   try {
     await parity(components, { registry: opts.registry });
   } catch (err) {
-    console.error(pc8.red("\u2716"), err.message);
+    console.error(pc9.red("\u2716"), err.message);
+    process.exitCode = 1;
+  }
+});
+program.command("lint").description("Scan for hardcoded colors and spacing that should be semantic tokens.").argument("[path]", "directory to scan \u2014 defaults to the components/ui aliases from kinetixui.json").option("--no-fail", "exit 0 even if violations are found").action(async (target, opts) => {
+  try {
+    await lint(target, { fail: opts.fail });
+  } catch (err) {
+    console.error(pc9.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -795,7 +992,7 @@ program.command("doctor").description("Check kinetixui.json, its aliases, and th
   try {
     await doctor();
   } catch (err) {
-    console.error(pc8.red("\u2716"), err.message);
+    console.error(pc9.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -804,7 +1001,7 @@ theme.command("create").description("Scaffold kinetixui-themes/<name>.csv with e
   try {
     await themeCreate(name, { force: opts.force });
   } catch (err) {
-    console.error(pc8.red("\u2716"), err.message);
+    console.error(pc9.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -812,7 +1009,7 @@ theme.command("build").description("Compile kinetixui-themes/<name>.csv to CSS a
   try {
     await themeBuild(name, { failOnContrast: opts.failOnContrast });
   } catch (err) {
-    console.error(pc8.red("\u2716"), err.message);
+    console.error(pc9.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/cli",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "description": "Add KinetixUI components and tokens to your project.",
   "type": "module",
   "license": "MIT",