@kinetixui/cli 0.13.0 → 0.15.0

package/dist/index.js

@@ -2,7 +2,7 @@
 
 // src/index.ts
 import { Command } from "commander";
-import pc6 from "picocolors";
+import pc8 from "picocolors";
 
 // src/commands/add.ts
 import { existsSync as existsSync4 } from "fs";
@@ -248,11 +248,11 @@ async function doctor() {
         levels.push(report("warn", `"${alias}" alias points to ${path5.relative(cwd, dir) || "."}, which doesn't exist yet.`));
       }
     }
-    const cssPath = path5.join(cwd, config.srcDir ? "src" : "", config.tailwind.css);
-    if (existsSync5(cssPath)) {
-      levels.push(report("pass", `Tailwind CSS file found at ${path5.relative(cwd, cssPath)}`));
+    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)}`));
     } else {
-      levels.push(report("warn", `Tailwind CSS file not found at ${path5.relative(cwd, cssPath)} \u2014 the token contract has nowhere to land.`));
+      levels.push(report("warn", `Tailwind CSS file not found at ${path5.relative(cwd, cssPath2)} \u2014 the token contract has nowhere to land.`));
     }
   }
   let registryNames = null;
@@ -428,10 +428,290 @@ async function list(options) {
   console.log(`Add everything: ${pc5.cyan("npx @kinetixui/cli add --all")}`);
 }
 
+// src/commands/parity.ts
+import pc6 from "picocolors";
+var PLATFORMS = ["React", "SwiftUI", "Compose", "Flutter"];
+var PLATFORM_ABBR = {
+  React: "RE",
+  SwiftUI: "SW",
+  Compose: "JC",
+  Flutter: "FL"
+};
+async function parity(names, options) {
+  const items = await fetchRegistryIndex(options.registry);
+  const components = items.filter((item) => item.type === "registry:ui").sort((a, b) => a.name.localeCompare(b.name));
+  const rows = names.length ? names.map((name) => {
+    const item = components.find((c) => c.name === name);
+    if (!item) throw new Error(`"${name}" isn't in the registry. Run "kinetixui list" to see what's available.`);
+    return item;
+  }) : 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));
+  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) : "";
+    console.log(`${item.name.padEnd(nameWidth)}  ${marks.join(" ")}  ${status}`);
+  }
+  console.log();
+  console.log(`${rows.length} of ${components.length} component(s) shown.`);
+}
+
+// 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";
+
+// src/lib/color-math.ts
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const n = parseInt(h.length === 3 ? h.replace(/(.)/g, "$1$1") : h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function rgbToHsl(r, g, b) {
+  r /= 255, g /= 255, b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  const d = max - min;
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1));
+    switch (max) {
+      case r:
+        h = (g - b) / d % 6;
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      default:
+        h = (r - g) / d + 4;
+    }
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
+}
+function hexToHslChannels(hex) {
+  const [h, s, l] = rgbToHsl(...hexToRgb(hex));
+  return `${h} ${s}% ${l}%`;
+}
+function relLuminance([r, g, b]) {
+  const [cr, cg, cb] = [r, g, b].map((v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * cr + 0.7152 * cg + 0.0722 * cb;
+}
+function contrastRatio(hexA, hexB) {
+  const la = relLuminance(hexToRgb(hexA)) + 0.05;
+  const lb = relLuminance(hexToRgb(hexB)) + 0.05;
+  return la > lb ? la / lb : lb / la;
+}
+function bestTextHex(bgHex) {
+  return contrastRatio(bgHex, "#ffffff") >= contrastRatio(bgHex, "#000000") ? "#ffffff" : "#000000";
+}
+function isHex(v) {
+  return /^#?[0-9a-fA-F]{6}$/.test(v.trim());
+}
+function normalizeHex(v) {
+  const t = v.trim().replace(/^#/, "");
+  return `#${t.toLowerCase()}`;
+}
+
+// src/lib/theme.ts
+var ACCEPTED_TOKENS = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring"
+];
+var EXAMPLE_VALUES = {
+  background: "#ffffff",
+  foreground: "#0f172a",
+  card: "#ffffff",
+  "card-foreground": "#0f172a",
+  popover: "#ffffff",
+  "popover-foreground": "#0f172a",
+  primary: "#2563eb",
+  "primary-foreground": "#ffffff",
+  secondary: "#f1f5f9",
+  "secondary-foreground": "#0f172a",
+  muted: "#f1f5f9",
+  "muted-foreground": "#64748b",
+  accent: "#f1f5f9",
+  "accent-foreground": "#0f172a",
+  destructive: "#dc2626",
+  "destructive-foreground": "#ffffff",
+  border: "#e2e8f0",
+  input: "#e2e8f0",
+  ring: "#2563eb"
+};
+var FOREGROUND_OF = {
+  background: "foreground",
+  card: "card-foreground",
+  popover: "popover-foreground",
+  primary: "primary-foreground",
+  secondary: "secondary-foreground",
+  muted: "muted-foreground",
+  accent: "accent-foreground",
+  destructive: "destructive-foreground"
+};
+var CONTRAST_PAIRS = [
+  ["background", "foreground"],
+  ["card", "card-foreground"],
+  ["popover", "popover-foreground"],
+  ["primary", "primary-foreground"],
+  ["secondary", "secondary-foreground"],
+  ["muted", "muted-foreground"],
+  ["accent", "accent-foreground"],
+  ["destructive", "destructive-foreground"]
+];
+var isAccepted = (t) => ACCEPTED_TOKENS.includes(t);
+function parseThemeFile(text) {
+  const values = {};
+  const errors = [];
+  const unknownTokens = [];
+  const lines = text.split(/\r?\n/).map((l) => l.trim()).filter((l) => l.length > 0 && !l.startsWith("#"));
+  lines.forEach((line, i) => {
+    const cells = line.split(/[,\t]/).map((c) => c.trim().replace(/^"|"$/g, ""));
+    if (cells.length < 2) {
+      errors.push(`Line ${i + 1}: expected "token,hex" \u2014 got "${line}"`);
+      return;
+    }
+    const [rawToken, rawHex] = cells;
+    const token = rawToken.toLowerCase().replace(/^--/, "").replace(/\s+/g, "-");
+    if (!isHex(rawHex)) {
+      errors.push(`Line ${i + 1}: "${rawHex}" isn't a hex color`);
+      return;
+    }
+    if (!isAccepted(token)) {
+      unknownTokens.push(rawToken);
+      return;
+    }
+    values[token] = normalizeHex(rawHex);
+  });
+  return { values, errors, unknownTokens };
+}
+function deriveForegrounds(values) {
+  const out = { ...values };
+  for (const [base, fg] of Object.entries(FOREGROUND_OF)) {
+    if (out[base] && !out[fg]) out[fg] = bestTextHex(out[base]);
+  }
+  return out;
+}
+function toCssBlock(values) {
+  const lines = ACCEPTED_TOKENS.filter((t) => values[t]).map((t) => `  --${t}: ${hexToHslChannels(values[t])};`);
+  return `:root {
+${lines.join("\n")}
+}
+`;
+}
+function checkContrast(values) {
+  return CONTRAST_PAIRS.filter(([bg, fg]) => values[bg] && values[fg]).map(([bg, fg]) => {
+    const ratio = contrastRatio(values[bg], values[fg]);
+    return { pair: [bg, fg], ratio, pass: ratio >= 4.5 };
+  });
+}
+function scaffoldThemeFile(name) {
+  const lines = [
+    `# ${name} \u2014 KinetixUI theme override`,
+    "#",
+    "# One `token,hex` pair per line. Uncomment (remove the leading `# `) and",
+    "# edit any token you want to override; leave the rest commented out to",
+    "# keep KinetixUI's default. Run `kinetixui theme build " + name + "` to",
+    `# compile this into ${name}.css and get a WCAG AA contrast report.`,
+    "#",
+    "# Setting a base color (e.g. `primary`) without its `-foreground` pair",
+    "# auto-derives the foreground by contrast (best of white/black) \u2014 you",
+    "# don't have to set both unless you want a specific foreground.",
+    "#"
+  ];
+  for (const token of ACCEPTED_TOKENS) {
+    lines.push(`# ${token},${EXAMPLE_VALUES[token]}`);
+  }
+  return lines.join("\n") + "\n";
+}
+
+// src/commands/theme.ts
+var THEME_DIR = "kinetixui-themes";
+function csvPath(cwd, name) {
+  return path8.join(cwd, THEME_DIR, `${name}.csv`);
+}
+function cssPath(cwd, name) {
+  return path8.join(cwd, THEME_DIR, `${name}.css`);
+}
+async function themeCreate(name, options) {
+  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.`);
+  }
+  await mkdir2(path8.dirname(file), { recursive: true });
+  await writeFile3(file, scaffoldThemeFile(name), "utf8");
+  console.log(pc7.green("\u2714"), `Wrote ${path8.relative(cwd, file)}`);
+  console.log(`Uncomment and edit the tokens you want to override, then run:`);
+  console.log(pc7.dim(`  kinetixui theme build ${name}`));
+}
+async function themeBuild(name, options) {
+  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.`);
+  }
+  const text = await readFile2(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.`);
+  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.`);
+  }
+  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();
+  console.log(pc7.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");
+    if (!pass) failed++;
+    console.log(`${mark} ${pair[0]} / ${pair[1]}`, pc7.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();
+  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."));
+  if (failed > 0 && options.failOnContrast) {
+    process.exitCode = 1;
+  }
+}
+
 // package.json
 var package_default = {
   name: "@kinetixui/cli",
-  version: "0.13.0",
+  version: "0.15.0",
   description: "Add KinetixUI components and tokens to your project.",
   type: "module",
   license: "MIT",
@@ -475,7 +755,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(pc6.red("\u2716"), err.message);
+    console.error(pc8.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -483,7 +763,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(pc6.red("\u2716"), err.message);
+    console.error(pc8.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -491,7 +771,7 @@ program.command("list").description("List every component available in the regis
   try {
     await list({ registry: opts.registry });
   } catch (err) {
-    console.error(pc6.red("\u2716"), err.message);
+    console.error(pc8.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -499,7 +779,15 @@ program.command("inspect").description("Show everything the registry knows about
   try {
     await inspect(name, { registry: opts.registry });
   } catch (err) {
-    console.error(pc6.red("\u2716"), err.message);
+    console.error(pc8.red("\u2716"), err.message);
+    process.exitCode = 1;
+  }
+});
+program.command("parity").description("Show which platforms carry each component (or one, by name).").argument("[components...]", "component names, e.g. button card \u2014 omit for the full matrix").option("-r, --registry <url>", "registry base URL", DEFAULT_REGISTRY).action(async (components, opts) => {
+  try {
+    await parity(components, { registry: opts.registry });
+  } catch (err) {
+    console.error(pc8.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -507,7 +795,24 @@ program.command("doctor").description("Check kinetixui.json, its aliases, and th
   try {
     await doctor();
   } catch (err) {
-    console.error(pc6.red("\u2716"), err.message);
+    console.error(pc8.red("\u2716"), err.message);
+    process.exitCode = 1;
+  }
+});
+var theme = program.command("theme").description("Scaffold and compile a local token override (CSS only \u2014 see 'theme build --help').");
+theme.command("create").description("Scaffold kinetixui-themes/<name>.csv with every overridable token, commented out.").argument("<name>", "theme name, e.g. acme").option("-f, --force", "overwrite an existing theme file", false).action(async (name, opts) => {
+  try {
+    await themeCreate(name, { force: opts.force });
+  } catch (err) {
+    console.error(pc8.red("\u2716"), err.message);
+    process.exitCode = 1;
+  }
+});
+theme.command("build").description("Compile kinetixui-themes/<name>.csv to CSS and print a WCAG AA contrast report. CSS only \u2014 no native (SwiftUI/Compose/Flutter) output yet.").argument("<name>", "theme name, e.g. acme").option("--no-fail-on-contrast", "exit 0 even if a pair fails WCAG AA").action(async (name, opts) => {
+  try {
+    await themeBuild(name, { failOnContrast: opts.failOnContrast });
+  } catch (err) {
+    console.error(pc8.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });

package/package.json

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