zyncat-ui 0.12.0 → 0.13.0

package/README.md

@@ -10,8 +10,8 @@ pnpm dlx zyncat-ui init
 
 Run it inside a React project. One command installs `@zyncat/ui` (and React 19 if the project
 needs it), imports the base stylesheet at your app root, installs the agent skill into
-`.claude/skills/`, registers the MCP server in `.mcp.json`, and scaffolds a typed
-`zyncat.theme.ts`. Re-run it after upgrading `@zyncat/ui` to refresh everything.
+`.claude/skills/`, and registers the MCP server in `.mcp.json`. Re-run it after upgrading
+`@zyncat/ui` to refresh everything.
 
 This package is where the CLI lives, and it holds the unscoped name so the command works before
 `@zyncat/ui` is installed. It ships one bundled file and declares zero runtime dependencies - the

package/dist/cli.js

@@ -212,6 +212,12 @@ function majorOf(range) {
   const match = range?.match(/\d+/);
   return match ? Number(match[0]) : null;
 }
+var release = (version2) => (version2.match(/\d+\.\d+\.\d+/)?.[0] ?? "0.0.0").split(".").map(Number);
+function isOlder(version2, than) {
+  const [a2, b] = [release(version2), release(than)];
+  for (let i2 = 0; i2 < 3; i2++) if (a2[i2] !== b[i2]) return a2[i2] < b[i2];
+  return false;
+}
 function installedVersion(cwd, name) {
   return readJson(join(cwd, "node_modules", name, "package.json"))?.version ?? null;
 }
@@ -1531,21 +1537,14 @@ var PACKAGE = "@zyncat/ui";
 var MCP_SERVER_ENTRY = { command: "node", args: ["./node_modules/@zyncat/ui/dist/mcp.js"] };
 var STYLES_IMPORT = "import '@zyncat/ui/styles.css';";
 var DOCS_URL = "https://ui.zyncat.app";
-var THEME_STARTER = `import { defineTheme } from '@zyncat/ui/theme';
-
-export const base = defineTheme({
-  color: { accent: 'oklch(0.63 0.118 198)' },
-});
-
-export const dark = defineTheme({
-  color: { bgApp: 'oklch(0.19 0.008 198)', textBody: 'oklch(0.92 0.004 198)' },
-});
-`;
 var interactive = () => Boolean(process.stdout.isTTY && process.stdin.isTTY);
+var installTouchedProject = false;
 function bail(message, hint) {
   log.error(message);
   if (hint) log.message(dim(hint), { spacing: 0 });
-  outro(red("Nothing was changed."));
+  outro(
+    red(installTouchedProject ? "Stopped here - the install ran, nothing else was wired." : "Nothing was changed.")
+  );
   process.exit(1);
 }
 async function pickPm(cwd, targetPkg, flags) {
@@ -1563,13 +1562,20 @@ async function pickPm(cwd, targetPkg, flags) {
   }
   return choice;
 }
-async function planInstall(cwd, targetPkg, flags) {
+var ADD_COMMAND = {
+  pnpm: "pnpm add",
+  npm: "npm install",
+  yarn: "yarn add",
+  bun: "bun add"
+};
+async function planInstall(cwd, targetPkg, flags, version2) {
   const deps = { ...targetPkg.dependencies, ...targetPkg.devDependencies };
   const specs = [];
   let reactNote = null;
   const hasPackage = PACKAGE in deps;
-  const packageOnDisk = installedVersion(cwd, PACKAGE) !== null;
-  if (!hasPackage) specs.push(PACKAGE);
+  const onDisk = installedVersion(cwd, PACKAGE);
+  const outdated = onDisk !== null && isOlder(onDisk, version2);
+  if (!hasPackage || outdated) specs.push(outdated ? `${PACKAGE}@^${version2}` : PACKAGE);
   if (!("react" in deps)) {
     specs.push("react", "react-dom");
   } else {
@@ -1590,7 +1596,7 @@ async function planInstall(cwd, targetPkg, flags) {
       else reactNote = `React ${major} stays as it is - ${PACKAGE} requires React 19, so upgrade before shipping.`;
     }
   }
-  return { specs, restore: hasPackage && !packageOnDisk, reactNote };
+  return { specs, restore: hasPackage && onDisk === null, reactNote };
 }
 function renderProgress(pm, progress, tick) {
   if (pm !== "pnpm") return shimmer(`Installing with ${pm}`, tick);
@@ -1668,20 +1674,36 @@ async function installPhase(pm, plan, cwd) {
     process.exit(1);
   }
 }
+async function alignVersion(pm, cwd, version2) {
+  const onDisk = installedVersion(cwd, PACKAGE);
+  if (!onDisk || !isOlder(onDisk, version2)) return;
+  log.warn(
+    `${PACKAGE} ${onDisk} resolved from this project's range, older than the CLI (${version2}) - upgrading so the skill and MCP server match.`
+  );
+  const upgraded = await installPhase(pm, { specs: [`${PACKAGE}@^${version2}`], restore: false, reactNote: null }, cwd);
+  if (upgraded) log.message(upgraded.line, { symbol: check });
+}
 function sourceRoot(cwd, ownRoot) {
   const installed = join3(cwd, "node_modules", PACKAGE);
   if (existsSync3(join3(installed, "skills"))) return installed;
   return ownRoot;
 }
-function wireSkill(cwd, packageRoot) {
+function wireSkill(cwd, packageRoot, pm) {
   const source = join3(packageRoot, "skills");
-  if (!existsSync3(source)) bail(`No skills/ directory found in the installed ${PACKAGE} - reinstall the package.`);
+  if (!existsSync3(source)) {
+    const onDisk = installedVersion(cwd, PACKAGE);
+    return {
+      line: row("Agent skill", `skipped \xB7 ${PACKAGE}${onDisk ? ` ${onDisk}` : ""} ships no skills/`),
+      done: false,
+      hint: `Upgrade it with ${ADD_COMMAND[pm]} ${PACKAGE}@latest, then re-run init.`
+    };
+  }
   const dest = join3(cwd, ".claude/skills");
   const existed = existsSync3(join3(dest, "zyncat-ui"));
   mkdirSync(dest, { recursive: true });
   for (const name of readdirSync2(source))
     cpSync(join3(source, name), join3(dest, name), { recursive: true, force: true });
-  return row("Agent skill", `.claude/skills/zyncat-ui \xB7 ${existed ? "refreshed" : "installed"}`);
+  return { line: row("Agent skill", `.claude/skills/zyncat-ui \xB7 ${existed ? "refreshed" : "installed"}`), done: true };
 }
 function wireMcp(cwd) {
   const path = join3(cwd, ".mcp.json");
@@ -1695,29 +1717,27 @@ function wireMcp(cwd) {
   config.mcpServers = { ...config.mcpServers, "zyncat-ui": MCP_SERVER_ENTRY };
   writeFileSync(path, `${JSON.stringify(config, null, 2)}
 `);
-  return row("MCP server", existed ? ".mcp.json \xB7 kept" : `.mcp.json ${arrow} zyncat-ui`);
-}
-function wireTheme(cwd) {
-  const file = existsSync3(join3(cwd, "tsconfig.json")) ? "zyncat.theme.ts" : "zyncat.theme.js";
-  const path = join3(cwd, file);
-  if (existsSync3(path)) return row("Typed theme", `${file} \xB7 kept`);
-  writeFileSync(path, THEME_STARTER);
-  return row("Typed theme", `${file} \xB7 created`);
+  return { line: row("MCP server", existed ? ".mcp.json \xB7 kept" : `.mcp.json ${arrow} zyncat-ui`), done: true };
 }
 function wireStyles(cwd) {
   const entry = findAppEntry(cwd);
-  if (!entry) return { line: `${row("Stylesheet", "no app entry found \xB7 add the import yourself")}`, manual: true };
+  if (!entry)
+    return {
+      line: row("Stylesheet", "no app entry found \xB7 add the import yourself"),
+      done: false,
+      hint: `Put ${STYLES_IMPORT} at your app root, above your own stylesheets.`
+    };
   const path = join3(cwd, entry);
   const text = readFileSync2(path, "utf8");
   if (text.includes("@zyncat/ui/styles.css"))
-    return { line: row("Stylesheet", `${entry} \xB7 already imported`), manual: false };
+    return { line: row("Stylesheet", `${entry} \xB7 already imported`), done: true };
   const eol = text.includes("\r\n") ? "\r\n" : "\n";
   const lines = text.split(eol);
   let at = 0;
   while (at < lines.length && (lines[at].trim() === "" || /^(['"])use [\w-]+\1;?$/.test(lines[at].trim()))) at++;
   lines.splice(at, 0, STYLES_IMPORT);
   writeFileSync(path, lines.join(eol));
-  return { line: row("Stylesheet", `${entry} \xB7 import added`), manual: false };
+  return { line: row("Stylesheet", `${entry} \xB7 import added`), done: true };
 }
 async function init(flags) {
   const startedAt = performance.now();
@@ -1739,23 +1759,22 @@ async function init(flags) {
   const pmVer = pmVersion(pm);
   const project = targetPkg.name ?? "unnamed project";
   log.message(dim(`${project} \xB7 ${pm}${pmVer ? ` ${pmVer}` : ""}`));
-  const plan = await planInstall(cwd, targetPkg, flags);
+  const plan = await planInstall(cwd, targetPkg, flags, version2);
   const installed = await installPhase(pm, plan, cwd);
+  installTouchedProject = true;
   if (installed) log.message(installed.line, { symbol: check });
   if (plan.reactNote) log.warn(plan.reactNote);
+  await alignVersion(pm, cwd, version2);
   const packageRoot = sourceRoot(cwd, ownRoot);
-  const lines = [wireSkill(cwd, packageRoot), wireMcp(cwd), wireTheme(cwd)];
-  const styles = wireStyles(cwd);
-  lines.push(styles.line);
-  for (const [index, line] of lines.entries())
-    log.message(line, {
-      symbol: styles.manual && index === lines.length - 1 ? skip : check,
-      spacing: index === 0 ? 1 : 0
-    });
-  if (styles.manual)
-    log.message(dim(`Put ${STYLES_IMPORT} at your app root, above your own stylesheets.`), { spacing: 0 });
+  const rows = [wireSkill(cwd, packageRoot, pm), wireMcp(cwd), wireStyles(cwd)];
+  for (const [index, entry] of rows.entries()) {
+    log.message(entry.line, { symbol: entry.done ? check : skip, spacing: index === 0 ? 1 : 0 });
+    if (entry.hint) log.message(dim(entry.hint), { spacing: 0 });
+  }
   log.message(`${dim("Docs")} ${arrow} ${accentDeep(DOCS_URL)}`);
-  outro(`${bold(`Ready in ${seconds(performance.now() - startedAt)}.`)} Restart your agent session to load the skill.`);
+  const skipped = rows.filter((entry) => !entry.done).length;
+  const closing = skipped ? `${bold(`Done in ${seconds(performance.now() - startedAt)}.`)} ${skipped} step${skipped === 1 ? "" : "s"} left for you, above.` : `${bold(`Ready in ${seconds(performance.now() - startedAt)}.`)} Restart your agent session to load the skill.`;
+  outro(closing);
 }
 
 // src/cli.ts
@@ -1778,7 +1797,7 @@ function help(version2) {
     `  ${wordmark(version2)}`,
     "",
     `  ${dim("Sets up @zyncat/ui in a React project: installs the package,")}`,
-    `  ${dim("the agent skill, the MCP server, a typed theme and the stylesheet.")}`,
+    `  ${dim("the agent skill, the MCP server and the stylesheet.")}`,
     "",
     `  ${bold("Usage")}`,
     `    zyncat-ui init ${dim("[flags]")}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zyncat-ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Setup CLI for @zyncat/ui - one command installs the package and wires the project.",
   "keywords": [
     "zyncat",