@properui/cli 0.1.0

package/dist/index.js

@@ -0,0 +1,1699 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/add.ts
+import path6 from "path";
+
+// src/config.ts
+import { existsSync as existsSync2, readFileSync as readFileSync2, writeFileSync } from "fs";
+import path2 from "path";
+
+// src/detect.ts
+import { existsSync, readFileSync, statSync } from "fs";
+import path from "path";
+var FRAMEWORK_LABEL = {
+  "next-app": "Next.js (App Router)",
+  "next-pages": "Next.js (Pages Router)",
+  vite: "Vite",
+  remix: "Remix",
+  react: "React"
+};
+var isFile = (target) => existsSync(target) && statSync(target).isFile();
+var isDir = (target) => existsSync(target) && statSync(target).isDirectory();
+function parseJsonc(source) {
+  const withoutComments = source.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*$)|(\/\*[\s\S]*?\*\/)/gm, (match, lineComment, blockComment) => lineComment || blockComment ? "" : match).replace(/,(\s*[}\]])/g, "$1");
+  try {
+    return JSON.parse(withoutComments);
+  } catch {
+    return null;
+  }
+}
+function readJsonc(file) {
+  if (!isFile(file)) return null;
+  return parseJsonc(readFileSync(file, "utf8"));
+}
+function readPackageJson(cwd) {
+  return readJsonc(path.join(cwd, "package.json"));
+}
+function allDependencies(pkg) {
+  return { ...pkg?.dependencies, ...pkg?.devDependencies, ...pkg?.peerDependencies };
+}
+function tsConfigChain(cwd) {
+  const found = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (file, depth) => {
+    const resolved = path.resolve(file);
+    if (depth > 4 || seen.has(resolved)) return;
+    seen.add(resolved);
+    const config = readJsonc(resolved);
+    if (!config) return;
+    found.push({ file: resolved, config });
+    const dir = path.dirname(resolved);
+    if (config.extends && config.extends.startsWith(".")) {
+      const target = config.extends.endsWith(".json") ? config.extends : `${config.extends}.json`;
+      visit(path.join(dir, target), depth + 1);
+    }
+    for (const reference of config.references ?? []) {
+      const target = path.join(dir, reference.path);
+      visit(isDir(target) ? path.join(target, "tsconfig.json") : target, depth + 1);
+    }
+  };
+  visit(path.join(cwd, "tsconfig.json"), 0);
+  visit(path.join(cwd, "tsconfig.app.json"), 0);
+  visit(path.join(cwd, "jsconfig.json"), 0);
+  return found;
+}
+function detectAlias(cwd, srcDir) {
+  const candidates = [];
+  for (const { file, config } of tsConfigChain(cwd)) {
+    const paths = config.compilerOptions?.paths;
+    if (!paths) continue;
+    const configDir = path.dirname(file);
+    const baseUrl = config.compilerOptions?.baseUrl ?? ".";
+    for (const [pattern, targets] of Object.entries(paths)) {
+      const target = targets[0];
+      if (!pattern.endsWith("/*") || !target || !target.endsWith("/*")) continue;
+      candidates.push({
+        prefix: `${pattern.slice(0, -1)}`,
+        base: path.resolve(configDir, baseUrl, target.slice(0, -2))
+      });
+    }
+  }
+  const preferred = candidates.find((candidate) => candidate.prefix === "@/") ?? candidates[0];
+  if (preferred) return { ...preferred, declared: true };
+  return { prefix: "@/", base: path.join(cwd, srcDir ? "src" : "."), declared: false };
+}
+function detectFramework(cwd, deps) {
+  if (deps["@remix-run/react"] || deps["@react-router/dev"]) return "remix";
+  if (deps.next || isFile(path.join(cwd, "next.config.ts")) || isFile(path.join(cwd, "next.config.js")) || isFile(path.join(cwd, "next.config.mjs"))) {
+    if (isDir(path.join(cwd, "app")) || isDir(path.join(cwd, "src", "app"))) return "next-app";
+    if (isDir(path.join(cwd, "pages")) || isDir(path.join(cwd, "src", "pages"))) return "next-pages";
+    return "next-app";
+  }
+  const viteConfig = ["vite.config.ts", "vite.config.js", "vite.config.mts", "vite.config.mjs"].some((name) => isFile(path.join(cwd, name)));
+  if (deps.vite || viteConfig) return "vite";
+  return "react";
+}
+function majorVersion(range) {
+  if (!range) return null;
+  const match = /(\d+)\./.exec(range) ?? /(\d+)/.exec(range);
+  return match?.[1] ? Number(match[1]) : null;
+}
+function detectTailwindVersion(cwd, deps) {
+  const installed = readJsonc(path.join(cwd, "node_modules", "tailwindcss", "package.json"));
+  return majorVersion(installed?.version) ?? majorVersion(deps.tailwindcss);
+}
+var CSS_CANDIDATES = [
+  "app/globals.css",
+  "src/app/globals.css",
+  "src/styles/globals.css",
+  "styles/globals.css",
+  "src/index.css",
+  "src/main.css",
+  "src/App.css",
+  "src/global.css",
+  "app/global.css"
+];
+function detectCssFile(cwd) {
+  return CSS_CANDIDATES.find((candidate) => isFile(path.join(cwd, candidate))) ?? null;
+}
+function defaultCssFile(framework, srcDir) {
+  if (framework === "next-app") return srcDir ? "src/app/globals.css" : "app/globals.css";
+  if (framework === "next-pages") return srcDir ? "src/styles/globals.css" : "styles/globals.css";
+  return "src/index.css";
+}
+var LOCKFILES = [
+  ["pnpm-lock.yaml", "pnpm"],
+  ["bun.lockb", "bun"],
+  ["bun.lock", "bun"],
+  ["yarn.lock", "yarn"],
+  ["package-lock.json", "npm"]
+];
+function detectPackageManager(cwd) {
+  let dir = path.resolve(cwd);
+  for (; ; ) {
+    for (const [lockfile, manager] of LOCKFILES) {
+      if (isFile(path.join(dir, lockfile))) return manager;
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) return "npm";
+    dir = parent;
+  }
+}
+function detectProject(cwd, frameworkOverride2) {
+  const pkg = readPackageJson(cwd);
+  const deps = allDependencies(pkg);
+  const srcDir = isDir(path.join(cwd, "src"));
+  const alias = detectAlias(cwd, srcDir);
+  return {
+    cwd,
+    framework: frameworkOverride2 ?? detectFramework(cwd, deps),
+    typescript: isFile(path.join(cwd, "tsconfig.json")) || Boolean(deps.typescript),
+    srcDir,
+    aliasPrefix: alias.prefix,
+    aliasBase: alias.base,
+    aliasDeclared: alias.declared,
+    tailwindVersion: detectTailwindVersion(cwd, deps),
+    cssFile: detectCssFile(cwd),
+    packageManager: detectPackageManager(cwd)
+  };
+}
+
+// src/config.ts
+var CONFIG_FILE = "components.json";
+var CONFIG_SCHEMA_URL = "https://properui.dev/schema.json";
+function configPath(cwd) {
+  return path2.join(cwd, CONFIG_FILE);
+}
+function readConfig(cwd) {
+  const file = configPath(cwd);
+  if (!existsSync2(file)) return null;
+  const parsed = parseJsonc(readFileSync2(file, "utf8"));
+  if (!parsed?.aliases?.components) return null;
+  return parsed;
+}
+function writeConfig(cwd, config) {
+  const file = configPath(cwd);
+  writeFileSync(file, `${JSON.stringify(config, null, 2)}
+`, "utf8");
+  return file;
+}
+function aliasPrefixOf(alias) {
+  const slash = alias.indexOf("/");
+  return slash === -1 ? `${alias}/` : alias.slice(0, slash + 1);
+}
+function aliasBaseDir(cwd, config) {
+  const prefix = aliasPrefixOf(config.aliases.components);
+  const detected = detectAlias(cwd, existsSync2(path2.join(cwd, "src")));
+  if (detected.declared && detected.prefix === prefix) return detected.base;
+  return path2.join(cwd, existsSync2(path2.join(cwd, "src")) ? "src" : ".");
+}
+
+// src/deps.ts
+import { spawnSync } from "child_process";
+var ASSUMED = /* @__PURE__ */ new Set(["react", "react-dom", "next"]);
+var INSTALL_SPECS = {
+  "@properui/icons": "@properui/icons@npm:@untitledui/icons@^0.0.22"
+};
+var installSpec = (name) => INSTALL_SPECS[name] ?? name;
+function missingDependencies(cwd, required) {
+  const installed = allDependencies(readPackageJson(cwd));
+  return [...new Set(required)].filter((name) => !ASSUMED.has(name) && !installed[name]).sort();
+}
+function installCommand(manager, packages) {
+  const verb = manager === "npm" ? "install" : "add";
+  return `${manager} ${verb} ${packages.map(installSpec).join(" ")}`;
+}
+function installDependencies(cwd, manager, packages) {
+  const verb = manager === "npm" ? "install" : "add";
+  const command = installCommand(manager, packages);
+  const result = spawnSync(manager, [verb, ...packages.map(installSpec)], { cwd, stdio: "inherit" });
+  return { ok: result.status === 0, command };
+}
+
+// src/files.ts
+import { existsSync as existsSync3, mkdirSync, readFileSync as readFileSync3, writeFileSync as writeFileSync2 } from "fs";
+import path3 from "path";
+var IMPORT_SPECIFIER = /((?:\bfrom\s+)|(?:\bimport\s+)|(?:\bimport\s*\(\s*)|(?:\brequire\s*\(\s*))(["'])([^"']+)\2/g;
+function rewriteImports(content, aliasPrefix) {
+  if (aliasPrefix === "@/") return content;
+  return content.replace(
+    IMPORT_SPECIFIER,
+    (match, lead, quote, specifier) => specifier.startsWith("@/") ? `${lead}${quote}${aliasPrefix}${specifier.slice(2)}${quote}` : match
+  );
+}
+function resolveTarget(file, options) {
+  const target = file.target.replace(/^\.?\//, "");
+  if (options.pathOverride && target.startsWith("components/")) {
+    return path3.resolve(options.cwd, options.pathOverride, target.slice("components/".length));
+  }
+  return path3.resolve(options.aliasBase, target);
+}
+function writeSourceFile(file, content, options) {
+  const relative = path3.relative(options.cwd, file) || path3.basename(file);
+  const exists = existsSync3(file);
+  if (exists) {
+    const current = readFileSync3(file, "utf8");
+    if (current === content) return { file, relative, status: "unchanged" };
+    if (!options.overwrite) return { file, relative, status: "skipped" };
+  }
+  if (!options.dryRun) {
+    mkdirSync(path3.dirname(file), { recursive: true });
+    writeFileSync2(file, content, "utf8");
+  }
+  return { file, relative, status: exists ? "updated" : "created" };
+}
+function targetForLanguage(target, tsx) {
+  if (tsx) return target;
+  return target.replace(/\.tsx$/, ".jsx").replace(/\.ts$/, ".js");
+}
+function prepareFile(file, config, options) {
+  const aliasPrefix = aliasPrefixOf(config.aliases.components);
+  const adjusted = { ...file, target: targetForLanguage(file.target, config.tsx) };
+  return {
+    target: resolveTarget(adjusted, options),
+    content: rewriteImports(file.content, aliasPrefix)
+  };
+}
+
+// src/fuzzy.ts
+var normalize = (value) => value.toLowerCase().replace(/[\s\-_/.]+/g, "");
+function fuzzyScore(haystack, query) {
+  const target = normalize(haystack);
+  const needle = normalize(query);
+  if (needle.length === 0) return 0;
+  if (target === needle) return 1;
+  const exact = target.indexOf(needle);
+  if (exact !== -1) return 0.9 - Math.min(exact, 40) / 200;
+  let cursor = 0;
+  let matched = 0;
+  let streak = 0;
+  let bestStreak = 0;
+  for (const character of needle) {
+    const found = target.indexOf(character, cursor);
+    if (found === -1) return 0;
+    streak = found === cursor ? streak + 1 : 1;
+    bestStreak = Math.max(bestStreak, streak);
+    cursor = found + 1;
+    matched += 1;
+  }
+  return 0.3 * (matched / needle.length) + 0.3 * (bestStreak / needle.length);
+}
+function editDistance(a, b) {
+  const left = normalize(a);
+  const right = normalize(b);
+  let previous = Array.from({ length: right.length + 1 }, (_, index) => index);
+  for (let i = 1; i <= left.length; i += 1) {
+    const current = [i];
+    for (let j = 1; j <= right.length; j += 1) {
+      const substitution = (previous[j - 1] ?? 0) + (left[i - 1] === right[j - 1] ? 0 : 1);
+      current[j] = Math.min((current[j - 1] ?? 0) + 1, (previous[j] ?? 0) + 1, substitution);
+    }
+    previous = current;
+  }
+  return previous[right.length] ?? Math.max(left.length, right.length);
+}
+function nearestNames(names, query, limit = 5) {
+  const tolerance = query.length <= 4 ? 1 : 2;
+  return names.map((name) => ({ name, score: fuzzyScore(name, query), distance: editDistance(name, query) })).filter((match) => match.score > 0.25 || match.distance <= tolerance).sort((a, b) => b.score - a.score || a.distance - b.distance || a.name.localeCompare(b.name)).slice(0, limit).map((match) => match.name);
+}
+
+// src/prompt.ts
+import prompts from "prompts";
+var CancelledError = class extends Error {
+  constructor() {
+    super("Cancelled.");
+  }
+};
+var canPrompt = () => Boolean(process.stdin.isTTY) && Boolean(process.stdout.isTTY) && !process.env.CI;
+var onCancel = () => {
+  throw new CancelledError();
+};
+async function confirm(message, options) {
+  if (options.yes || !canPrompt()) return options.fallback;
+  const answer = await prompts({ type: "confirm", name: "value", message, initial: options.fallback }, { onCancel });
+  return Boolean(answer.value);
+}
+async function ask(message, options) {
+  if (options.yes || !canPrompt()) return options.initial;
+  const answer = await prompts({ type: "text", name: "value", message, initial: options.initial }, { onCancel });
+  return typeof answer.value === "string" && answer.value.trim() ? answer.value.trim() : options.initial;
+}
+async function askSecret(message) {
+  if (!canPrompt()) return "";
+  const answer = await prompts({ type: "password", name: "value", message }, { onCancel });
+  return typeof answer.value === "string" ? answer.value.trim() : "";
+}
+
+// src/registry.ts
+import { existsSync as existsSync5, readFileSync as readFileSync5, statSync as statSync2 } from "fs";
+import path5 from "path";
+
+// src/auth.ts
+import { existsSync as existsSync4, mkdirSync as mkdirSync2, readFileSync as readFileSync4, writeFileSync as writeFileSync3 } from "fs";
+import { homedir } from "os";
+import path4 from "path";
+var authDir = () => path4.join(homedir(), ".properui");
+var authFile = () => path4.join(authDir(), "auth.json");
+function readAuth() {
+  const file = authFile();
+  if (!existsSync4(file)) return null;
+  try {
+    const parsed = JSON.parse(readFileSync4(file, "utf8"));
+    return typeof parsed?.token === "string" && parsed.token.length > 0 ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+var readAuthToken = () => process.env.PROPERUI_TOKEN ?? readAuth()?.token ?? null;
+function writeAuth(auth) {
+  mkdirSync2(authDir(), { recursive: true, mode: 448 });
+  const file = authFile();
+  writeFileSync3(file, `${JSON.stringify({ ...auth, createdAt: auth.createdAt ?? (/* @__PURE__ */ new Date()).toISOString() }, null, 2)}
+`, { mode: 384 });
+  return file;
+}
+
+// src/registry.ts
+var DEFAULT_REGISTRY_URL = "https://properui.dev/r";
+var RegistryError = class extends Error {
+};
+var isHttp = (source) => /^https?:\/\//i.test(source);
+function resolveRegistrySource(flag, fromConfig) {
+  const source = flag ?? process.env.REGISTRY_URL ?? fromConfig ?? DEFAULT_REGISTRY_URL;
+  return isHttp(source) ? source.replace(/\/+$/, "") : path5.resolve(source);
+}
+var Registry = class {
+  source;
+  remote;
+  indexCache = null;
+  entryCache = /* @__PURE__ */ new Map();
+  constructor(source) {
+    this.source = source;
+    this.remote = isHttp(source);
+  }
+  describe() {
+    return this.remote ? this.source : `${this.source} (local)`;
+  }
+  async readJson(file) {
+    if (!this.remote) {
+      const full = path5.join(this.source, file);
+      if (!existsSync5(full) || !statSync2(full).isFile()) return null;
+      try {
+        return JSON.parse(readFileSync5(full, "utf8"));
+      } catch (error) {
+        throw new RegistryError(`${full} is not valid JSON: ${error.message}`);
+      }
+    }
+    const url = `${this.source}/${file}`;
+    const token = readAuthToken();
+    let response;
+    try {
+      response = await fetch(url, { headers: token ? { authorization: `Bearer ${token}` } : {} });
+    } catch (error) {
+      throw new RegistryError(`Could not reach ${url} \u2014 ${error.message}`);
+    }
+    if (response.status === 404) return null;
+    if (response.status === 401 || response.status === 403) {
+      throw new RegistryError(`${url} requires authentication. Run \`properui login\` first.`);
+    }
+    if (!response.ok) throw new RegistryError(`${url} responded ${response.status} ${response.statusText}`);
+    return await response.json();
+  }
+  async index() {
+    if (this.indexCache) return this.indexCache;
+    const index = await this.readJson("index.json");
+    if (!index) throw new RegistryError(`No index.json at ${this.source}. Is the registry source correct?`);
+    this.indexCache = index.components ?? [];
+    return this.indexCache;
+  }
+  async find(name) {
+    return (await this.index()).find((entry) => entry.name === name);
+  }
+  async item(name) {
+    const cached = this.entryCache.get(name);
+    if (cached) return cached;
+    const entry = await this.readJson(`${name}.json`);
+    if (!entry) throw new RegistryError(`Unknown component "${name}". Run \`properui list\` to see what is available.`);
+    this.entryCache.set(name, entry);
+    return entry;
+  }
+  /**
+   * Resolves `names` plus every `registryDependencies` edge, depth-first, so that a
+   * dependency always appears before the entry that needs it.
+   */
+  async resolveTree(names) {
+    const ordered = [];
+    const seen = /* @__PURE__ */ new Set();
+    const visit = async (name) => {
+      if (seen.has(name)) return;
+      seen.add(name);
+      const entry = await this.item(name);
+      for (const dependency of entry.registryDependencies) await visit(dependency);
+      ordered.push(entry);
+    };
+    for (const name of names) await visit(name);
+    return ordered;
+  }
+};
+
+// src/ui.ts
+import kleur from "kleur";
+import ora from "ora";
+var isInteractive = () => Boolean(process.stdout.isTTY) && !process.env.CI;
+var log = {
+  plain: (message = "") => console.log(message),
+  info: (message) => console.log(`${kleur.cyan("info")}  ${message}`),
+  success: (message) => console.log(`${kleur.green("done")}  ${message}`),
+  warn: (message) => console.log(`${kleur.yellow("warn")}  ${message}`),
+  error: (message) => console.error(`${kleur.red("error")} ${message}`),
+  step: (message) => console.log(`${kleur.dim("\xB7")}     ${message}`),
+  title: (message) => console.log(`
+${kleur.bold(message)}`)
+};
+function spinner(text) {
+  if (!isInteractive()) {
+    let current = text;
+    return {
+      update: (next) => {
+        current = next;
+      },
+      succeed: (message) => log.success(message ?? current),
+      fail: (message) => log.error(message ?? current),
+      stop: () => void 0
+    };
+  }
+  const instance = ora({ text, spinner: "dots" }).start();
+  return {
+    update: (next) => {
+      instance.text = next;
+    },
+    succeed: (message) => {
+      instance.succeed(message);
+    },
+    fail: (message) => {
+      instance.fail(message);
+    },
+    stop: () => {
+      instance.stop();
+    }
+  };
+}
+
+// src/commands/add.ts
+var STATUS_ORDER = ["created", "updated", "skipped", "unchanged"];
+var statusLabel = (status) => {
+  if (status === "created") return kleur.green("added ");
+  if (status === "updated") return kleur.yellow("update");
+  if (status === "skipped") return kleur.dim("skip  ");
+  return kleur.dim("same  ");
+};
+async function runAdd(names, options) {
+  const cwd = path6.resolve(options.cwd ?? process.cwd());
+  const config = readConfig(cwd);
+  if (!config) {
+    log.error(`No ${path6.relative(cwd, configPath(cwd)) || "components.json"} found. Run \`properui init\` first.`);
+    process.exitCode = 1;
+    return;
+  }
+  const exampleMode = names[0] === "example";
+  const requested = exampleMode ? names.slice(1) : names;
+  const registry = new Registry(resolveRegistrySource(options.registry, config.registry));
+  if (!options.all && requested.length === 0) {
+    log.error(exampleMode ? "Which example? e.g. `properui add example settings-01`" : "Nothing to add. Pass component names or --all.");
+    process.exitCode = 1;
+    return;
+  }
+  let targets;
+  try {
+    const index = await registry.index();
+    if (options.all) {
+      targets = index.filter((entry) => entry.type === "component").map((entry) => entry.name);
+    } else {
+      const known = new Set(index.map((entry) => entry.name));
+      const unknown = requested.filter((name) => !known.has(name));
+      if (unknown.length > 0) {
+        for (const name of unknown) {
+          const hints = nearestNames([...known], name);
+          log.error(`Unknown component "${name}".${hints.length > 0 ? ` Did you mean: ${hints.join(", ")}?` : ""}`);
+        }
+        process.exitCode = 1;
+        return;
+      }
+      if (exampleMode) {
+        const notExamples = requested.filter((name) => index.find((entry) => entry.name === name)?.type !== "example");
+        for (const name of notExamples) log.warn(`"${name}" is not a page example \u2014 adding it as a component.`);
+      }
+      targets = requested;
+    }
+  } catch (error) {
+    log.error(error instanceof RegistryError ? error.message : error.message);
+    process.exitCode = 1;
+    return;
+  }
+  const resolveSpinner = spinner(`Resolving ${targets.length} component${targets.length === 1 ? "" : "s"} from ${registry.describe()}`);
+  let entries;
+  try {
+    entries = await registry.resolveTree(targets);
+    resolveSpinner.succeed(`Resolved ${entries.length} registry item${entries.length === 1 ? "" : "s"} (including dependencies).`);
+  } catch (error) {
+    resolveSpinner.fail(error instanceof RegistryError ? error.message : error.message);
+    process.exitCode = 1;
+    return;
+  }
+  const aliasBase = aliasBaseDir(cwd, config);
+  const resolveOptions = { cwd, aliasBase, pathOverride: options.path };
+  const writeOptions = { cwd, overwrite: Boolean(options.overwrite), dryRun: Boolean(options.dryRun) };
+  const results = [];
+  for (const entry of entries) {
+    const writes = entry.files.map((file) => {
+      const { target, content } = prepareFile(file, config, resolveOptions);
+      return writeSourceFile(target, content, writeOptions);
+    });
+    results.push({ entry, writes });
+  }
+  reportWrites(results, config, options);
+  const npmDependencies = missingDependencies(
+    cwd,
+    entries.flatMap((entry) => entry.dependencies)
+  );
+  if (npmDependencies.length > 0) {
+    const manager = detectPackageManager(cwd);
+    log.plain();
+    log.title("Dependencies");
+    for (const dependency of npmDependencies) log.step(`${kleur.cyan("need  ")} ${dependency}`);
+    if (options.dryRun) {
+      log.info(`Dry run \u2014 would run: ${kleur.bold(installCommand(manager, npmDependencies))}`);
+    } else {
+      const shouldInstall = await confirm(
+        `Install ${npmDependencies.length} missing package${npmDependencies.length === 1 ? "" : "s"} with ${manager}?`,
+        {
+          yes: options.yes,
+          fallback: Boolean(options.yes)
+        }
+      );
+      if (shouldInstall) {
+        const { ok, command } = installDependencies(cwd, manager, npmDependencies);
+        if (ok) log.success(`Installed with \`${command}\`.`);
+        else log.error(`\`${command}\` failed \u2014 install the packages above manually.`);
+      } else {
+        log.info(`Skipped install. Run: ${kleur.bold(installCommand(manager, npmDependencies))}`);
+      }
+    }
+  }
+}
+function reportWrites(results, config, options) {
+  const all = results.flatMap((result) => result.writes);
+  const counts = Object.fromEntries(STATUS_ORDER.map((status) => [status, all.filter((write) => write.status === status).length]));
+  log.plain();
+  log.title(options.dryRun ? "Files (dry run \u2014 nothing was written)" : "Files");
+  for (const { entry, writes } of results) {
+    const changed = writes.some((write) => write.status === "created" || write.status === "updated");
+    log.plain(`  ${changed ? kleur.bold(entry.name) : kleur.dim(entry.name)}`);
+    for (const write of writes) log.plain(`    ${statusLabel(write.status)} ${write.relative}`);
+  }
+  const aliasPrefix = aliasPrefixOf(config.aliases.components);
+  log.plain();
+  if (aliasPrefix !== "@/") log.info(`Rewrote \`@/\` imports to \`${aliasPrefix}\`.`);
+  if (options.path) log.info(`Component files were placed under \`${options.path}\` \u2014 check the imports if that folder is outside your alias.`);
+  if (counts.created + counts.updated === 0) {
+    log.success(
+      counts.skipped > 0 ? `No changes \u2014 ${counts.skipped} file${counts.skipped === 1 ? "" : "s"} already exist. Pass --overwrite to replace them.` : "No changes \u2014 everything is already up to date."
+    );
+    return;
+  }
+  const parts = [`${counts.created} added`, `${counts.updated} updated`, `${counts.skipped} skipped`, `${counts.unchanged} unchanged`];
+  log.success(options.dryRun ? `Would apply: ${parts.join(", ")}.` : parts.join(", ") + ".");
+}
+
+// src/commands/agent.ts
+import { existsSync as existsSync6, mkdirSync as mkdirSync3, readFileSync as readFileSync6, writeFileSync as writeFileSync4 } from "fs";
+import path7 from "path";
+
+// src/agent-templates.ts
+var SKILL_MD = "---\nname: properui\ndescription: Use when building or editing UI screens, pages, forms, or components in a project that uses (or could use) Proper UI (@properui/ui) \u2014 before writing any new JSX/TSX markup by hand. Covers checking the registry for an existing component or full-page example, inspecting the project's Proper UI setup, installing with the CLI instead of hand-copying source, and the accessibility/token/RTL rules the installed code must keep. Trigger on \"build a settings page\", \"add a form\", \"make a dashboard\", \"add a button/modal/table\", or any request to create or modify UI in a React/Next.js/Vite project.\nlicense: MIT\n---\n\n# Proper UI\n\nProper UI (`@properui/ui`) is a registry of React Aria + Tailwind v4 components distributed as\nsource, not a runtime package you import blindly. The `properui` CLI copies the files you ask for\ninto the project and rewrites their imports to fit. Follow these steps, in order, every time UI work\ncomes up.\n\n## 1. Inspect the project first\n\nBefore adding or writing anything, run:\n\n```bash\nnpx @properui/cli@latest info --json\n```\n\nThis reports whether the project is already set up (framework, Tailwind version, `components.json`\naliases, theme CSS path, which registry entries are already installed, and the installed\n`@properui/ui` / `properui` versions). Read it before deciding anything else:\n\n- No `components.json` \u2192 run `npx @properui/cli@latest init -y` first. Do not hand-write\n  `components.json`, `utils/cx.ts`, the theme token file, or the `ThemeProvider` wiring \u2014 `init`\n  generates all of it correctly for the detected framework.\n- `components.json` exists \u2192 note the `aliases.components` value (often `@/components`, sometimes a\n  project-specific prefix) and use it for every import you write by hand.\n- Tailwind is not v4 \u2192 `init` will refuse and print an upgrade path. Do not attempt to work around\n  this by writing v3-style config.\n\n## 2. Search before creating\n\nNever write a component's markup from memory or invent your own version of something the registry\nalready has. Check first:\n\n```bash\nnpx @properui/cli@latest search \"<what you need>\"     # fuzzy match over names, titles, examples\nnpx @properui/cli@latest list --layer base             # browse by layer: base, application, marketing\nnpx @properui/cli@latest list --type example            # full-page examples specifically\n```\n\nOnly write custom markup when the search genuinely comes up empty. If it does, still build the\ncustom piece out of already-installed primitives and the same semantic tokens (below) rather than\none-off styling.\n\n## 3. Prefer whole examples for whole screens\n\n- Building a recognizable whole screen (a settings page, a pricing page, an onboarding flow, a\n  dashboard, an auth page)? Search `list --type example` / `search` for a matching full-page\n  example first and install it with `add example <name>`. Adapt copy and data to the request; don't\n  rebuild the layout from primitives when an example already covers it.\n- Building or fixing one isolated piece of behavior (a button variant, a single form field, a\n  tooltip)? Install the specific primitive(s) with `add <name>` instead of pulling in a whole\n  example.\n\n```bash\nnpx @properui/cli@latest add example settings-01\nnpx @properui/cli@latest add button input select\n```\n\n`add` resolves `registryDependencies` recursively (installing a component's own component\ndependencies), rewrites the library's internal `@/` imports to the project's configured alias, and\nreports missing npm packages to install \u2014 it does not silently run installs for you. A second `add`\nof the same name is a no-op unless you pass `--overwrite`; never pass `--overwrite` on top of a file\na human has since edited without checking `diff` first:\n\n```bash\nnpx @properui/cli@latest diff <name>     # see local modifications before overwriting\n```\n\n## 4. Never mix component systems\n\nOnce a screen uses Proper UI components, keep using Proper UI components for the rest of that\nscreen \u2014 don't drop in a different UI library's `<Button>` or a hand-rolled equivalent alongside\ninstalled ones. If the project already has another design system in place, ask before introducing\nProper UI into it rather than mixing the two silently.\n\n## 5. Write code that matches the installed conventions\n\nEvery file `add` copies in already follows these rules. Any markup you write by hand \u2014 glue code, a\npage shell, a piece the registry doesn't have \u2014 must follow them too:\n\n- **React Aria props, not DOM props.** `onPress` not `onClick`, `isDisabled` not `disabled`,\n  `isSelected` not `checked`. These components wrap React Aria Components; a DOM prop is silently\n  ignored.\n- **Semantic tokens only \u2014 never a literal.** `bg-primary`, `text-tertiary`, `border-secondary`,\n  `bg-brand-solid`. Never a raw palette class (`bg-purple-600`) and never an arbitrary value\n  (`bg-[#7f56d9]`, `p-[13px]`). Typography is tokenised the same way: `text-display-lg`, `text-md`,\n  not `text-4xl`. The full token set lives in the project's theme CSS file (path reported by\n  `info --json`).\n- **No `dark:` utilities.** A `.dark-mode` class on an ancestor repoints every semantic token, so a\n  component written against tokens is already correct in both themes. A `dark:` utility is a bug,\n  not a stylistic choice.\n- **Logical properties for anything directional**, so `dir=\"rtl\"` keeps working: `ms-*`/`me-*` not\n  `ml-*`/`mr-*`, `ps-*`/`pe-*` not `pl-*`/`pr-*`, `start-*`/`end-*` not `left-*`/`right-*`,\n  `text-start` not `text-left`.\n- **Icons as component references.** `<Button iconLeading={ArrowRight}>`, not\n  `<Button iconLeading={<ArrowRight />}>` \u2014 the component applies its own sizing and the `data-icon`\n  attribute its styles target.\n- **Import from the component's subpath**, e.g. `@properui/ui/components/base/buttons/button`, so\n  bundlers keep only what's used \u2014 never a barrel import of the whole library for one component.\n- **Preserve what's already there.** Keyboard interaction, focus order, ARIA attributes, and\n  responsive breakpoints on installed components are load-bearing. When adapting a copied file,\n  change content and composition, not the underlying interaction or accessibility behavior \u2014 and\n  don't remove a responsive class because a screenshot at one width looked fine without it.\n\n## 6. Verify after installing or editing\n\nBefore reporting the work as done, run whatever subset of these the project defines (check\n`package.json` scripts \u2014 names vary by project, but the checks are the same ones the registry's own\nCI runs):\n\n1. Type-check (`tsc --noEmit` or the project's `type-check`/`typecheck` script).\n2. Build (`next build`, `vite build`, or the project's `build` script) \u2014 catches broken imports from\n   alias rewriting.\n3. Targeted tests for anything touched, if the project has a test runner configured.\n\nIf a check fails because of something `add` did (a missing dependency it reported but that wasn't\ninstalled, for example), fix that before moving on \u2014 don't report success with a broken build.\n\n## 7. Report what happened\n\nEnd every piece of UI work with a short, concrete summary:\n\n- **Files added** \u2014 which components/examples were installed, and where (respecting `--path` or the\n  project's configured alias directory).\n- **Entries reused** \u2014 anything `info --json` or `diff` showed was already installed and left alone.\n- **Checks run** \u2014 which of type-check / build / tests were run, and whether they passed.\n\nThis is what lets a human (or the next session) trust the change without re-deriving it.\n";
+var markerStart = (id) => `<!-- properui:${id}:start -->`;
+var markerEnd = (id) => `<!-- properui:${id}:end -->`;
+function upsertMarkedBlock(existing, id, block) {
+  const start = markerStart(id);
+  const end = markerEnd(id);
+  const section = `${start}
+${block.trim()}
+${end}`;
+  const pattern = new RegExp(`${start}[\\s\\S]*?${end}`);
+  if (pattern.test(existing)) return existing.replace(pattern, section);
+  const separator = existing.trim().length > 0 ? `${existing.replace(/\s+$/, "")}
+
+` : "";
+  return `${separator}${section}
+`;
+}
+var CLAUDE_MD_BLOCK = `## Proper UI
+
+This project has the Proper UI skill installed at \`.claude/skills/properui/SKILL.md\`. Claude
+Code loads it automatically for UI work. Before writing new UI markup by hand: run
+\`npx @properui/cli@latest info --json\`, search the registry with \`npx @properui/cli@latest search\`,
+and prefer \`npx @properui/cli@latest add\` (or \`add example <name>\` for a whole screen) over
+hand-rolling markup the registry already has.`;
+var AGENTS_MD_BLOCK = `## Proper UI
+
+This project uses Proper UI (\`@properui/ui\`). Follow \`.agents/skills/properui/SKILL.md\`
+for the full workflow before writing any new UI markup. In short:
+
+1. Run \`npx @properui/cli@latest info --json\` to see what is already configured and installed.
+2. Search the registry (\`npx @properui/cli@latest search "<what you need>"\`) before writing markup
+   by hand \u2014 prefer \`add example <name>\` for a whole screen, \`add <name>\` for one component.
+3. Keep semantic tokens (\`bg-primary\`, \`text-tertiary\`, ...), React Aria props (\`onPress\`,
+   \`isDisabled\`), and logical properties (\`ms-*\`/\`me-*\`, \`start-*\`/\`end-*\`) in anything
+   you write yourself \u2014 never a raw palette class, an arbitrary value, or a \`dark:\` utility.
+4. Run type-check and build after installing or editing components before calling the work done.`;
+var CURSOR_RULE_MDC = `---
+alwaysApply: true
+---
+
+# Proper UI
+
+This project uses Proper UI (\`@properui/ui\`). Before writing any new UI markup:
+
+- Run \`npx @properui/cli@latest info --json\` to see the project's Proper UI setup and what is
+  already installed.
+- Run \`npx @properui/cli@latest search "<what you need>"\` to check whether a component or
+  full-page example already covers it.
+- Install matches with \`npx @properui/cli@latest add <name>\` (or \`add example <name>\` for a whole
+  screen) rather than hand-rolling the equivalent markup.
+- Import installed components from \`@/components/...\` (or this project's configured alias in
+  \`components.json\`) and follow their existing prop APIs \u2014 don't rename props to "clean them up".
+- Never mix in another component library once a screen uses Proper UI components.
+
+When writing or editing component code:
+
+- Use React Aria props, not DOM props: \`onPress\` not \`onClick\`, \`isDisabled\` not
+  \`disabled\`, \`isSelected\` not \`checked\`.
+- Use semantic tokens only: \`bg-primary\`, \`text-tertiary\`, \`border-secondary\`,
+  \`bg-brand-solid\`. Never a raw palette class (\`bg-purple-600\`) or an arbitrary value
+  (\`bg-[#7f56d9]\`).
+- Never use \`dark:\` utilities \u2014 a \`.dark-mode\` class on an ancestor repoints every semantic
+  token, so a component written against tokens is already correct in both themes.
+- Use logical properties for anything directional: \`ms-*\`/\`me-*\` not \`ml-*\`/\`mr-*\`,
+  \`ps-*\`/\`pe-*\` not \`pl-*\`/\`pr-*\`, \`start-*\`/\`end-*\` not \`left-*\`/\`right-*\`,
+  \`text-start\` not \`text-left\`.
+- Use tokenised typography \u2014 \`text-display-lg\`, \`text-md\` \u2014 not raw sizes like \`text-4xl\`.
+- Pass icons as component references: \`<Button iconLeading={ArrowRight}>\`, not
+  \`<Button iconLeading={<ArrowRight />}>\`.
+- Import from the component's subpath so bundlers keep only what's used, e.g.
+  \`@properui/ui/components/base/buttons/button\`.
+- Run type-check and build after installing or editing components before calling the work done.
+`;
+var LOVABLE_SKILL_URL = "https://github.com/properui/properui/blob/main/skills/properui/SKILL.md";
+var LOVABLE_INSTRUCTIONS = `Lovable runs in the browser and does not read files from this
+checkout, so there is nothing to write locally. Instead:
+
+  1. Open your Lovable project's knowledge / custom instructions panel.
+  2. Paste this URL so Lovable can fetch the Skill's raw Markdown:
+       ${LOVABLE_SKILL_URL}
+  3. Or paste the Skill's content directly \u2014 copy it from that URL, or from
+     skills/properui/SKILL.md if you have this repo checked out.
+
+Once added, prompt Lovable the same way you would Claude Code or Codex: describe the screen and
+mention using the installed Proper UI components. Lovable will then follow the Skill's steps
+(check the registry, install with the CLI or npm, keep semantic tokens and React Aria props)
+instead of generating its own markup from scratch.`;
+
+// src/commands/agent.ts
+var CLIENTS = ["claude", "codex", "cursor", "lovable"];
+function resolveClients(client) {
+  if (!client || client === "all") return CLIENTS;
+  if (CLIENTS.includes(client)) return [client];
+  throw new Error(`Unknown --client "${client}". Use one of: ${CLIENTS.join(", ")}, all.`);
+}
+function upsertProjectFile(file, id, block, dryRun) {
+  const relative = path7.basename(file);
+  const existing = existsSync6(file) ? readFileSync6(file, "utf8") : "";
+  const next = upsertMarkedBlock(existing, id, block);
+  if (existing === next) return { file, relative, status: "unchanged" };
+  if (!dryRun) {
+    mkdirSync3(path7.dirname(file), { recursive: true });
+    writeFileSync4(file, next, "utf8");
+  }
+  return { file, relative, status: existing ? "updated" : "created" };
+}
+function statusLabel2(status) {
+  if (status === "created") return kleur.green("write");
+  if (status === "updated") return kleur.yellow("updat");
+  if (status === "skipped") return kleur.dim("skip ");
+  return kleur.dim("keep ");
+}
+function installClaude(cwd, writeOptions) {
+  const skill = writeSourceFile(path7.join(cwd, ".claude", "skills", "properui", "SKILL.md"), SKILL_MD, writeOptions);
+  log.step(`${statusLabel2(skill.status)} ${skill.relative}`);
+  const claudeMd = upsertProjectFile(path7.join(cwd, "CLAUDE.md"), "skill", CLAUDE_MD_BLOCK, writeOptions.dryRun);
+  log.step(`${statusLabel2(claudeMd.status)} ${claudeMd.relative}${claudeMd.status === "created" ? " (created)" : " (pointer appended)"}`);
+}
+function installCodex(cwd, writeOptions) {
+  const skill = writeSourceFile(path7.join(cwd, ".agents", "skills", "properui", "SKILL.md"), SKILL_MD, writeOptions);
+  log.step(`${statusLabel2(skill.status)} ${skill.relative}`);
+  const agentsMd = upsertProjectFile(path7.join(cwd, "AGENTS.md"), "agents", AGENTS_MD_BLOCK, writeOptions.dryRun);
+  log.step(`${statusLabel2(agentsMd.status)} ${agentsMd.relative}${agentsMd.status === "created" ? " (created)" : " (rules block appended)"}`);
+}
+function installCursor(cwd, writeOptions) {
+  const rule = writeSourceFile(path7.join(cwd, ".cursor", "rules", "properui.mdc"), CURSOR_RULE_MDC, writeOptions);
+  log.step(`${statusLabel2(rule.status)} ${rule.relative}`);
+}
+function installLovable() {
+  log.step(`Lovable reads from the web, not this checkout \u2014 nothing is written locally.`);
+  log.plain();
+  log.info(`Paste this into Lovable's knowledge / custom instructions panel:`);
+  log.plain(kleur.dim(`        ${LOVABLE_SKILL_URL}`));
+  log.plain();
+  for (const line of LOVABLE_INSTRUCTIONS.split("\n")) log.plain(line ? `  ${line}` : "");
+}
+async function runAgentInit(options) {
+  const cwd = path7.resolve(options.cwd ?? process.cwd());
+  const clients = resolveClients(options.client);
+  const writeOptions = { cwd, overwrite: Boolean(options.overwrite), dryRun: false };
+  log.title(`Installing the Proper UI skill for ${clients.length > 1 ? clients.join(", ") : clients[0]}`);
+  for (const client of clients) {
+    log.plain();
+    log.plain(kleur.bold(client));
+    if (client === "claude") installClaude(cwd, writeOptions);
+    else if (client === "codex") installCodex(cwd, writeOptions);
+    else if (client === "cursor") installCursor(cwd, writeOptions);
+    else installLovable();
+  }
+  log.plain();
+  log.success("Done. Re-run any time \u2014 existing files are updated in place, not duplicated.");
+  if (!options.overwrite) log.info("Pass --overwrite to replace the Skill file even if you've edited it locally.");
+}
+
+// src/commands/diff.ts
+import { existsSync as existsSync7, readFileSync as readFileSync7 } from "fs";
+import path8 from "path";
+
+// src/diff.ts
+function diffLines(before, after) {
+  const rows = before.length;
+  const columns = after.length;
+  const table = Array.from({ length: rows + 1 }, () => new Array(columns + 1).fill(0));
+  for (let i2 = rows - 1; i2 >= 0; i2 -= 1) {
+    for (let j2 = columns - 1; j2 >= 0; j2 -= 1) {
+      const current = table[i2] ?? [];
+      const next = table[i2 + 1] ?? [];
+      current[j2] = before[i2] === after[j2] ? (next[j2 + 1] ?? 0) + 1 : Math.max(next[j2] ?? 0, current[j2 + 1] ?? 0);
+    }
+  }
+  const result = [];
+  let i = 0;
+  let j = 0;
+  while (i < rows && j < columns) {
+    if (before[i] === after[j]) {
+      result.push({ op: "equal", text: before[i] ?? "" });
+      i += 1;
+      j += 1;
+    } else if ((table[i + 1]?.[j] ?? 0) >= (table[i]?.[j + 1] ?? 0)) {
+      result.push({ op: "remove", text: before[i] ?? "" });
+      i += 1;
+    } else {
+      result.push({ op: "add", text: after[j] ?? "" });
+      j += 1;
+    }
+  }
+  while (i < rows) {
+    result.push({ op: "remove", text: before[i] ?? "" });
+    i += 1;
+  }
+  while (j < columns) {
+    result.push({ op: "add", text: after[j] ?? "" });
+    j += 1;
+  }
+  return result;
+}
+function hunks(lines, context = 3) {
+  const changed = lines.map((line) => line.op !== "equal");
+  const keep = lines.map((_, index) => changed.slice(Math.max(0, index - context), index + context + 1).some(Boolean));
+  const groups = [];
+  let current = [];
+  keep.forEach((wanted, index) => {
+    const line = lines[index];
+    if (wanted && line) {
+      current.push(line);
+    } else if (current.length > 0) {
+      groups.push(current);
+      current = [];
+    }
+  });
+  if (current.length > 0) groups.push(current);
+  return groups;
+}
+
+// src/commands/diff.ts
+async function runDiff(component, options) {
+  const cwd = path8.resolve(options.cwd ?? process.cwd());
+  const config = readConfig(cwd);
+  if (!config) {
+    log.error("No components.json found. Run `properui init` first.");
+    process.exitCode = 1;
+    return;
+  }
+  const registry = new Registry(resolveRegistrySource(options.registry, config.registry));
+  const aliasBase = aliasBaseDir(cwd, config);
+  const resolveOptions = { cwd, aliasBase };
+  let entries;
+  const load = spinner(component ? `Loading ${component}` : "Scanning for components copied into this project");
+  try {
+    if (component) {
+      entries = [await registry.item(component)];
+    } else {
+      const index = await registry.index();
+      entries = [];
+      for (const meta of index) {
+        if (meta.type === "example") continue;
+        const entry = await registry.item(meta.name);
+        const present = entry.files.some((file) => existsSync7(prepareFile(file, config, resolveOptions).target));
+        if (present) entries.push(entry);
+      }
+    }
+    load.succeed(`Comparing ${entries.length} component${entries.length === 1 ? "" : "s"} against ${registry.describe()}.`);
+  } catch (error) {
+    load.fail(error instanceof RegistryError ? error.message : error.message);
+    process.exitCode = 1;
+    return;
+  }
+  let modified = 0;
+  let missing = 0;
+  for (const entry of entries) {
+    for (const file of entry.files) {
+      const { target, content } = prepareFile(file, config, resolveOptions);
+      const relative = path8.relative(cwd, target);
+      if (!existsSync7(target)) {
+        if (component) {
+          missing += 1;
+          log.plain(`  ${kleur.dim("absent")} ${relative}`);
+        }
+        continue;
+      }
+      const local = readFileSync7(target, "utf8");
+      if (local === content) continue;
+      modified += 1;
+      log.title(`${entry.name} \xB7 ${relative}`);
+      for (const hunk of hunks(diffLines(local.split("\n"), content.split("\n")))) {
+        for (const line of hunk) {
+          if (line.op === "equal") log.plain(kleur.dim(`   ${line.text}`));
+          else if (line.op === "remove") log.plain(kleur.red(` - ${line.text}`));
+          else log.plain(kleur.green(` + ${line.text}`));
+        }
+        log.plain(kleur.dim("   ---"));
+      }
+    }
+  }
+  log.plain();
+  if (modified === 0) {
+    log.success(missing > 0 ? `No local modifications (${missing} file(s) not installed).` : "No local modifications \u2014 everything matches the registry.");
+    return;
+  }
+  log.warn(`${modified} file${modified === 1 ? "" : "s"} differ from the registry.`);
+  log.info(`Take the registry version with: npx @properui/cli add ${component ?? "<component>"} --overwrite`);
+}
+
+// src/commands/info.ts
+import { existsSync as existsSync8, readFileSync as readFileSync8 } from "fs";
+import path9 from "path";
+function packageVersions(cwd, name, deps) {
+  const pkgPath = path9.join(cwd, "node_modules", ...name.split("/"), "package.json");
+  let installed = null;
+  if (existsSync8(pkgPath)) {
+    try {
+      installed = JSON.parse(readFileSync8(pkgPath, "utf8")).version ?? null;
+    } catch {
+      installed = null;
+    }
+  }
+  return { installed, declared: deps[name] ?? null };
+}
+async function collectSnapshot(options) {
+  const cwd = path9.resolve(options.cwd ?? process.cwd());
+  const project = detectProject(cwd);
+  const config = readConfig(cwd);
+  const deps = allDependencies(readPackageJson(cwd));
+  const registrySource = resolveRegistrySource(options.registry, config?.registry);
+  const registry = new Registry(registrySource);
+  const installed = [];
+  let registryReachable = true;
+  if (config) {
+    const aliasBase = aliasBaseDir(cwd, config);
+    const resolveOptions = { cwd, aliasBase };
+    try {
+      const index = await registry.index();
+      for (const meta of index) {
+        if (meta.type === "example") continue;
+        const entry = await registry.item(meta.name);
+        const present = entry.files.some((file) => existsSync8(prepareFile(file, config, resolveOptions).target));
+        if (present) installed.push({ name: meta.name, layer: meta.layer, type: meta.type });
+      }
+    } catch {
+      registryReachable = false;
+    }
+  } else {
+    registryReachable = false;
+  }
+  return {
+    cwd,
+    framework: project.framework,
+    typescript: project.typescript,
+    tailwindVersion: project.tailwindVersion,
+    packageManager: project.packageManager,
+    config: {
+      present: Boolean(config),
+      file: path9.relative(cwd, configPath(cwd)) || "components.json",
+      aliases: config?.aliases ?? null,
+      theme: config?.tailwind.theme ?? null,
+      css: config?.tailwind.css ?? null,
+      registry: config?.registry ?? null
+    },
+    packages: {
+      "@properui/ui": packageVersions(cwd, "@properui/ui", deps),
+      properui: packageVersions(cwd, "properui", deps)
+    },
+    registrySource,
+    registryReachable,
+    installed: installed.sort((a, b) => a.name.localeCompare(b.name))
+  };
+}
+function formatVersions(versions) {
+  if (versions.installed) return versions.installed;
+  if (versions.declared) return `${versions.declared} (not installed)`;
+  return "not found";
+}
+function printHuman(snapshot) {
+  log.title("Proper UI project info");
+  log.step(`Framework           ${snapshot.framework}`);
+  log.step(`Language            ${snapshot.typescript ? "TypeScript" : "JavaScript"}`);
+  log.step(`Tailwind            ${snapshot.tailwindVersion ? `v${snapshot.tailwindVersion}` : "not installed"}`);
+  log.step(`Package manager     ${snapshot.packageManager}`);
+  log.step(`@properui/ui      ${formatVersions(snapshot.packages["@properui/ui"])}`);
+  log.step(`properui (CLI)    ${formatVersions(snapshot.packages.properui)}`);
+  log.plain();
+  if (!snapshot.config.present) {
+    log.warn(`No ${snapshot.config.file} found. Run \`npx @properui/cli@latest init\` before installing components.`);
+    return;
+  }
+  log.step(`Config file         ${snapshot.config.file}`);
+  log.step(`Components alias    ${snapshot.config.aliases?.components}`);
+  log.step(`Utils alias         ${snapshot.config.aliases?.utils}`);
+  log.step(`UI alias            ${snapshot.config.aliases?.ui}`);
+  log.step(`Hooks alias         ${snapshot.config.aliases?.hooks}`);
+  log.step(`Theme CSS           ${snapshot.config.theme}`);
+  log.step(`Global CSS          ${snapshot.config.css}`);
+  log.step(`Registry            ${snapshot.registrySource}`);
+  log.plain();
+  if (!snapshot.registryReachable) {
+    log.warn(`Could not reach the registry \u2014 installed entries below may be incomplete.`);
+  }
+  if (snapshot.installed.length === 0) {
+    log.info("No registry entries installed yet.");
+    return;
+  }
+  log.title(`${snapshot.installed.length} installed entr${snapshot.installed.length === 1 ? "y" : "ies"}`);
+  const width = Math.max(...snapshot.installed.map((entry) => entry.name.length));
+  for (const entry of snapshot.installed) {
+    log.plain(`  ${kleur.bold(entry.name.padEnd(width))}  ${kleur.dim(entry.layer)}`);
+  }
+}
+async function runInfo(options) {
+  let snapshot;
+  try {
+    snapshot = await collectSnapshot(options);
+  } catch (error) {
+    log.error(error instanceof RegistryError ? error.message : error.message);
+    process.exitCode = 1;
+    return;
+  }
+  if (options.json) {
+    log.plain(JSON.stringify(snapshot, null, 2));
+    return;
+  }
+  printHuman(snapshot);
+}
+
+// src/commands/init.ts
+import { existsSync as existsSync9, mkdirSync as mkdirSync4, readFileSync as readFileSync9, writeFileSync as writeFileSync5 } from "fs";
+import path10 from "path";
+
+// src/templates.ts
+var THEME_CSS_PLACEHOLDER = `/*
+ * Proper UI theme tokens \u2014 PLACEHOLDER.
+ *
+ * The full token set could not be downloaded (the registry was unreachable), so this file
+ * only carries enough tokens to keep Tailwind compiling. Replace it with the real theme:
+ *
+ *   npx @properui/cli add styles --overwrite
+ *
+ * Spec: docs/theming.md
+ */
+
+@theme {
+    --font-body: var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+
+    --color-brand-600: rgb(127 86 217);
+    --color-brand-700: rgb(105 65 198);
+
+    --color-bg-primary: rgb(255 255 255);
+    --color-bg-secondary: rgb(249 250 251);
+    --color-bg-brand-solid: var(--color-brand-600);
+
+    --color-text-primary: rgb(16 24 40);
+    --color-text-secondary: rgb(71 84 103);
+
+    --color-border-primary: rgb(208 213 221);
+
+    --background-color-primary: var(--color-bg-primary);
+    --background-color-secondary: var(--color-bg-secondary);
+    --background-color-brand-solid: var(--color-bg-brand-solid);
+
+    --text-color-primary: var(--color-text-primary);
+    --text-color-secondary: var(--color-text-secondary);
+
+    --border-color-primary: var(--color-border-primary);
+    --ring-color-primary: var(--color-border-primary);
+}
+
+@layer base {
+    .dark-mode {
+        --color-bg-primary: rgb(12 14 18);
+        --color-bg-secondary: rgb(22 26 33);
+        --color-text-primary: rgb(247 247 247);
+        --color-text-secondary: rgb(203 202 204);
+        --color-border-primary: rgb(55 58 67);
+    }
+}
+`;
+var CX_TS_FALLBACK = `import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"],
+        },
+    },
+});
+
+/**
+ * This function is a wrapper around the twMerge function.
+ * It is used to merge the classes inside style objects.
+ */
+export const cx = twMerge;
+
+/**
+ * This function does nothing besides helping us to be able to
+ * sort the classes inside style objects which is not supported
+ * by the Tailwind IntelliSense by default.
+ */
+export function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {
+    return classes;
+}
+`;
+var THEME_PROVIDER_TSX = `"use client";
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+
+/**
+ * Class-based theme provider. Adds \`.light-mode\` / \`.dark-mode\` to <html>, which is what
+ * every semantic token in styles/theme.css keys off.
+ */
+export type Theme = "light" | "dark" | "system";
+
+interface ThemeContextValue {
+    theme: Theme;
+    resolvedTheme: "light" | "dark";
+    setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+const STORAGE_KEY = "properui-theme";
+
+const systemTheme = (): "light" | "dark" =>
+    typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+const readStoredTheme = (fallback: Theme): Theme => {
+    if (typeof window === "undefined") return fallback;
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    return stored === "light" || stored === "dark" || stored === "system" ? stored : fallback;
+};
+
+export const ThemeProvider = ({ children, defaultTheme = "system" }: { children: ReactNode; defaultTheme?: Theme }) => {
+    const [theme, setThemeState] = useState<Theme>(defaultTheme);
+    const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("light");
+
+    useEffect(() => setThemeState(readStoredTheme(defaultTheme)), [defaultTheme]);
+
+    useEffect(() => {
+        const apply = () => {
+            const resolved = theme === "system" ? systemTheme() : theme;
+            setResolvedTheme(resolved);
+            const root = document.documentElement;
+            root.classList.remove("light-mode", "dark-mode");
+            root.classList.add(resolved === "dark" ? "dark-mode" : "light-mode");
+            root.style.colorScheme = resolved;
+        };
+
+        apply();
+        if (theme !== "system") return;
+
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        media.addEventListener("change", apply);
+        return () => media.removeEventListener("change", apply);
+    }, [theme]);
+
+    const setTheme = useCallback((next: Theme) => {
+        window.localStorage.setItem(STORAGE_KEY, next);
+        setThemeState(next);
+    }, []);
+
+    const value = useMemo(() => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme]);
+
+    return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) throw new Error("useTheme must be used inside <ThemeProvider>.");
+    return context;
+};
+`;
+var THEME_PROVIDER_JSX = `"use client";
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+/**
+ * Class-based theme provider. Adds \`.light-mode\` / \`.dark-mode\` to <html>, which is what
+ * every semantic token in styles/theme.css keys off.
+ */
+const ThemeContext = createContext(null);
+
+const STORAGE_KEY = "properui-theme";
+
+const systemTheme = () => (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+
+const readStoredTheme = (fallback) => {
+    if (typeof window === "undefined") return fallback;
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    return stored === "light" || stored === "dark" || stored === "system" ? stored : fallback;
+};
+
+export const ThemeProvider = ({ children, defaultTheme = "system" }) => {
+    const [theme, setThemeState] = useState(defaultTheme);
+    const [resolvedTheme, setResolvedTheme] = useState("light");
+
+    useEffect(() => setThemeState(readStoredTheme(defaultTheme)), [defaultTheme]);
+
+    useEffect(() => {
+        const apply = () => {
+            const resolved = theme === "system" ? systemTheme() : theme;
+            setResolvedTheme(resolved);
+            const root = document.documentElement;
+            root.classList.remove("light-mode", "dark-mode");
+            root.classList.add(resolved === "dark" ? "dark-mode" : "light-mode");
+            root.style.colorScheme = resolved;
+        };
+
+        apply();
+        if (theme !== "system") return;
+
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        media.addEventListener("change", apply);
+        return () => media.removeEventListener("change", apply);
+    }, [theme]);
+
+    const setTheme = useCallback((next) => {
+        window.localStorage.setItem(STORAGE_KEY, next);
+        setThemeState(next);
+    }, []);
+
+    const value = useMemo(() => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme]);
+
+    return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) throw new Error("useTheme must be used inside <ThemeProvider>.");
+    return context;
+};
+`;
+
+// src/commands/init.ts
+var TAILWIND_V3_MESSAGE = [
+  "Proper UI requires Tailwind CSS v4. This project is on v3.",
+  "",
+  "  1. npx @tailwindcss/upgrade@latest",
+  "  2. Replace tailwind.config.js content with the v4 CSS-first setup:",
+  '       @import "tailwindcss";',
+  "  3. Re-run: npx @properui/cli init",
+  "",
+  "Upgrade guide: https://tailwindcss.com/docs/upgrade-guide"
+].join("\n");
+function frameworkOverride(options) {
+  if (options.nextjs) return "next-app";
+  if (options.vite) return "vite";
+  return void 0;
+}
+function relativeCssPath(from, to) {
+  const relative = path10.relative(path10.dirname(from), to).split(path10.sep).join("/");
+  return relative.startsWith(".") ? relative : `./${relative}`;
+}
+function relativeDirPath(from, to) {
+  const relative = path10.relative(from, to).split(path10.sep).join("/");
+  if (relative === "") return ".";
+  return relative.startsWith(".") ? relative : `./${relative}`;
+}
+function matchBalancedBrace(source, openIndex) {
+  let depth = 0;
+  for (let i = openIndex; i < source.length; i++) {
+    if (source[i] === "{") depth++;
+    else if (source[i] === "}") {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+function wireViteTsconfigPaths(project, dryRun) {
+  const file = ["tsconfig.app.json", "tsconfig.json", "jsconfig.json"].map((name) => path10.join(project.cwd, name)).find((candidate) => existsSync9(candidate));
+  const target = `${relativeDirPath(path10.dirname(file ?? project.cwd), project.aliasBase)}/*`;
+  const snippet = `"paths": { "${project.aliasPrefix}*": ["${target}"] }`;
+  if (project.aliasDeclared) return { file: file ?? null, status: "already-declared", snippet };
+  if (!file) return { file: null, status: "skipped", snippet };
+  const raw = readFileSync9(file, "utf8");
+  const match = /"compilerOptions"\s*:\s*\{/.exec(raw);
+  if (!match) return { file, status: "unsupported", snippet };
+  const afterBrace = match.index + match[0].length;
+  const indent = /\n([ \t]*)\S/.exec(raw.slice(afterBrace))?.[1] ?? "    ";
+  const next = `${raw.slice(0, afterBrace)}
+${indent}${snippet},${raw.slice(afterBrace)}`;
+  if (!dryRun) writeFileSync5(file, next, "utf8");
+  return { file, status: "written", snippet };
+}
+var VITE_CONFIG_NAMES = ["vite.config.ts", "vite.config.mts", "vite.config.js", "vite.config.mjs"];
+function wireViteConfigAlias(project, dryRun) {
+  const file = VITE_CONFIG_NAMES.map((name) => path10.join(project.cwd, name)).find((candidate) => existsSync9(candidate));
+  const aliasKey = project.aliasPrefix.replace(/\/$/, "");
+  const srcPath = relativeDirPath(project.cwd, project.aliasBase);
+  const raw = file ? readFileSync9(file, "utf8") : "";
+  const isEsm = raw ? /^\s*(?:import\s|export\s+default\b)/m.test(raw) : true;
+  const aliasExpr = isEsm ? `fileURLToPath(new URL("${srcPath}", import.meta.url))` : `path.resolve(__dirname, "${srcPath}")`;
+  const hasUrlImport = /fileURLToPath/.test(raw) && /from\s+["'](?:node:)?url["']/.test(raw);
+  const hasPathImport = /require\(\s*["'](?:node:)?path["']\s*\)/.test(raw) || /from\s+["'](?:node:)?path["']/.test(raw);
+  const needsImport = isEsm ? !hasUrlImport : !hasPathImport;
+  const importLine = isEsm ? 'import { fileURLToPath } from "node:url";' : 'const path = require("node:path");';
+  const snippet = [...needsImport ? [importLine, ""] : [], "resolve: {", `    alias: { "${aliasKey}": ${aliasExpr} },`, "},"].join("\n");
+  if (!file) return { file: null, aliasKey, status: "skipped", snippet };
+  const aliasKeyPattern = aliasKey.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  if (new RegExp(`alias\\s*:\\s*\\{[^]*?["']${aliasKeyPattern}["']\\s*:`, "").test(raw)) {
+    return { file, aliasKey, status: "already-present", snippet };
+  }
+  let next = null;
+  const resolveMatch = /resolve\s*:\s*\{/.exec(raw);
+  if (resolveMatch) {
+    const openIndex = resolveMatch.index + resolveMatch[0].length - 1;
+    const closeIndex = matchBalancedBrace(raw, openIndex);
+    if (closeIndex === -1) return { file, aliasKey, status: "unsupported", snippet };
+    const body = raw.slice(openIndex + 1, closeIndex);
+    const aliasMatch = /alias\s*:\s*(\{|\[)/.exec(body);
+    if (aliasMatch?.[1] === "[") return { file, aliasKey, status: "unsupported", snippet };
+    if (aliasMatch) {
+      const aliasOpenIndex = openIndex + 1 + aliasMatch.index + aliasMatch[0].length;
+      next = `${raw.slice(0, aliasOpenIndex)} "${aliasKey}": ${aliasExpr},${raw.slice(aliasOpenIndex)}`;
+    } else {
+      const indent = /\n([ \t]*)\S/.exec(body)?.[1] ?? "    ";
+      next = `${raw.slice(0, openIndex + 1)}
+${indent}alias: { "${aliasKey}": ${aliasExpr} },${raw.slice(openIndex + 1)}`;
+    }
+  } else {
+    const defineConfigMatch = /(?:defineConfig\s*\(\s*|export\s+default\s*)\{/.exec(raw);
+    if (!defineConfigMatch) return { file, aliasKey, status: "unsupported", snippet };
+    const afterBrace = defineConfigMatch.index + defineConfigMatch[0].length;
+    const indent = /\n([ \t]*)\S/.exec(raw.slice(afterBrace))?.[1] ?? "    ";
+    next = `${raw.slice(0, afterBrace)}
+${indent}resolve: {
+${indent}    alias: { "${aliasKey}": ${aliasExpr} },
+${indent}},${raw.slice(afterBrace)}`;
+  }
+  if (needsImport) {
+    const importLines = [...next.matchAll(/^import .+;$/gm)];
+    const last = importLines[importLines.length - 1];
+    next = last ? `${next.slice(0, last.index + last[0].length)}
+${importLine}${next.slice(last.index + last[0].length)}` : `${importLine}
+${next}`;
+  }
+  if (!dryRun) writeFileSync5(file, next, "utf8");
+  return { file, aliasKey, status: "written", snippet };
+}
+function wireStylesheet(cwd, config, dryRun) {
+  const cssFile = path10.resolve(cwd, config.tailwind.css);
+  const existing = existsSync9(cssFile) ? readFileSync9(cssFile, "utf8") : "";
+  const themeImport = `@import "${relativeCssPath(cssFile, path10.resolve(cwd, config.tailwind.theme))}";`;
+  const componentsDir = path10.resolve(cwd, config.tailwind.theme, "..", "..", "components");
+  const sourceLine = `@source "${relativeCssPath(cssFile, componentsDir)}/**/*.{ts,tsx,js,jsx}";`;
+  const wanted = ['@import "tailwindcss";', themeImport, sourceLine];
+  const added = wanted.filter((line) => !existing.includes(line));
+  if (added.length === 0) return { file: cssFile, added };
+  const header = existing.trim().length > 0 ? `${added.join("\n")}
+
+${existing.replace(/^\uFEFF/, "")}` : `${added.join("\n")}
+`;
+  if (!dryRun) {
+    mkdirSync4(path10.dirname(cssFile), { recursive: true });
+    writeFileSync5(cssFile, header, "utf8");
+  }
+  return { file: cssFile, added };
+}
+function entryCandidates(project) {
+  const roots = project.srcDir ? ["src", "."] : [".", "src"];
+  const names = project.framework === "next-app" ? ["app/layout.tsx", "app/layout.jsx"] : project.framework === "next-pages" ? ["pages/_app.tsx", "pages/_app.jsx"] : ["main.tsx", "main.jsx", "index.tsx", "index.jsx"];
+  return roots.flatMap((root) => names.map((name) => path10.join(project.cwd, root, name)));
+}
+function reindent(block, indent) {
+  const lines = block.replace(/\s+$/, "").split("\n");
+  const rest = lines.slice(1).filter((line) => line.trim());
+  const common = rest.length > 0 ? Math.min(...rest.map((line) => (/^\s*/.exec(line)?.[0] ?? "").length)) : 0;
+  return lines.map((line, index) => index === 0 ? `${indent}${line.trim()}` : line.trim() ? `${indent}${line.slice(common)}` : "").join("\n");
+}
+function wireThemeProvider(project, config, dryRun) {
+  const entry = entryCandidates(project).find((candidate) => existsSync9(candidate));
+  if (!entry) return null;
+  const source = readFileSync9(entry, "utf8");
+  if (source.includes("ThemeProvider")) return { file: entry, changed: false };
+  const importPath = `${config.aliases.components.replace(/\/components$/, "")}/providers/theme-provider`;
+  const importLine = `import { ThemeProvider } from "${importPath}";`;
+  let next = null;
+  const bodyMatch = /^([ \t]*)(<body[^>]*>)([\s\S]*?)(<\/body>)/m.exec(source);
+  const renderStart = source.indexOf(".render(");
+  if (bodyMatch?.[2] && bodyMatch[3]?.trim() && bodyMatch[4]) {
+    const indent = bodyMatch[1] ?? "";
+    const inner = bodyMatch[3].trim();
+    const wrapped = inner.includes("\n") ? `${indent}    <ThemeProvider>
+${reindent(inner, `${indent}        `)}
+${indent}    </ThemeProvider>` : `${indent}    <ThemeProvider>${inner}</ThemeProvider>`;
+    next = source.replace(bodyMatch[0], `${indent}${bodyMatch[2]}
+${wrapped}
+${indent}${bodyMatch[4]}`);
+  } else if (renderStart !== -1) {
+    const open = renderStart + ".render(".length;
+    const close = source.lastIndexOf(")");
+    const inner = close > open ? source.slice(open, close).trim().replace(/,$/, "") : "";
+    if (inner) {
+      next = `${source.slice(0, open)}
+    <ThemeProvider>
+${reindent(inner, "        ")}
+    </ThemeProvider>,
+${source.slice(close)}`;
+    }
+  }
+  if (!next) return { file: entry, changed: false };
+  const withImport = /^(["']use client["'];?\s*\n)?/.exec(next);
+  const insertAt = withImport?.[0]?.length ?? 0;
+  next = `${next.slice(0, insertAt)}${importLine}
+${next.slice(insertAt)}`;
+  if (!dryRun) writeFileSync5(entry, next, "utf8");
+  return { file: entry, changed: true };
+}
+async function runInit(options) {
+  const cwd = path10.resolve(options.cwd ?? process.cwd());
+  const project = detectProject(cwd, frameworkOverride(options));
+  log.title("Configuring this project for Proper UI");
+  log.step(`Framework       ${FRAMEWORK_LABEL[project.framework]}`);
+  log.step(`Language        ${project.typescript ? "TypeScript" : "JavaScript"}`);
+  log.step(`Source folder   ${project.srcDir ? "src/" : "project root"}`);
+  log.step(`Import alias    ${project.aliasPrefix}${project.aliasDeclared ? "" : kleur.yellow(" (not declared in tsconfig paths)")}`);
+  log.step(`Tailwind        ${project.tailwindVersion ? `v${project.tailwindVersion}` : "not installed"}`);
+  log.step(`Package manager ${project.packageManager}`);
+  log.plain();
+  if (project.tailwindVersion === 3) {
+    log.error(TAILWIND_V3_MESSAGE);
+    process.exitCode = 1;
+    return;
+  }
+  if (!project.aliasDeclared) {
+    log.warn(`No \`paths\` mapping found. Add this to tsconfig.json so \`${project.aliasPrefix}\` resolves:`);
+    log.plain(kleur.dim(`        "baseUrl": ".", "paths": { "${project.aliasPrefix}*": ["./${project.srcDir ? "src/" : ""}*"] }`));
+    log.plain();
+  }
+  const existingConfig = readConfig(cwd);
+  if (existingConfig && !options.overwrite) {
+    const proceed = await confirm(`${path10.basename(configPath(cwd))} already exists. Overwrite it?`, { yes: options.yes, fallback: false });
+    if (!proceed) {
+      log.info("Keeping the existing components.json; only missing files will be written.");
+    }
+  }
+  const baseRelative = path10.relative(cwd, project.aliasBase).split(path10.sep).join("/");
+  const withBase = (target) => baseRelative && baseRelative !== "." ? `${baseRelative}/${target}` : target;
+  const cssFile = await ask("Where is your global stylesheet?", {
+    yes: options.yes,
+    initial: existingConfig?.tailwind.css ?? project.cssFile ?? defaultCssFile(project.framework, project.srcDir)
+  });
+  const registrySource = resolveRegistrySource(options.registry, existingConfig?.registry);
+  const alias = project.aliasPrefix;
+  const config = {
+    $schema: CONFIG_SCHEMA_URL,
+    style: "default",
+    tsx: project.typescript,
+    tailwind: {
+      css: cssFile,
+      theme: withBase("styles/theme.css"),
+      prefix: ""
+    },
+    aliases: {
+      components: `${alias}components`,
+      utils: `${alias}utils`,
+      ui: `${alias}components/base`,
+      hooks: `${alias}hooks`
+    },
+    registry: registrySource.startsWith("http") ? registrySource : existingConfig?.registry ?? DEFAULT_REGISTRY_URL
+  };
+  if (!existingConfig || options.overwrite) writeConfig(cwd, config);
+  const registry = new Registry(registrySource);
+  const writes = [];
+  const writeOptions = { cwd, overwrite: Boolean(options.overwrite), dryRun: false };
+  const themeSpinner = spinner(`Fetching theme tokens from ${registry.describe()}`);
+  let themeCss = THEME_CSS_PLACEHOLDER;
+  let themeFromRegistry = false;
+  let cxSource = CX_TS_FALLBACK;
+  try {
+    const styles = await registry.item("styles");
+    themeCss = styles.files.find((file) => file.target.endsWith("theme.css"))?.content ?? themeCss;
+    themeFromRegistry = true;
+    cxSource = (await registry.item("cx")).files[0]?.content ?? cxSource;
+    themeSpinner.succeed("Fetched theme tokens and utils/cx from the registry.");
+  } catch (error) {
+    themeSpinner.stop();
+    log.warn(`Registry unavailable (${error.message}).`);
+    log.warn("Wrote placeholder theme tokens \u2014 run `properui add styles --overwrite` once the registry is reachable.");
+  }
+  writes.push(writeSourceFile(path10.resolve(cwd, config.tailwind.theme), themeCss, writeOptions));
+  writes.push(writeSourceFile(path10.resolve(project.aliasBase, config.tsx ? "utils/cx.ts" : "utils/cx.js"), cxSource, writeOptions));
+  writes.push(
+    writeSourceFile(
+      path10.resolve(project.aliasBase, config.tsx ? "providers/theme-provider.tsx" : "providers/theme-provider.jsx"),
+      config.tsx ? THEME_PROVIDER_TSX : THEME_PROVIDER_JSX,
+      writeOptions
+    )
+  );
+  const stylesheet = wireStylesheet(cwd, config, false);
+  const wiring = options.manual ? null : wireThemeProvider(project, config, false);
+  const viteDryRun = Boolean(options.manual);
+  const viteTsconfig = project.framework === "vite" ? wireViteTsconfigPaths(project, viteDryRun) : null;
+  const viteConfigAlias = project.framework === "vite" ? wireViteConfigAlias(project, viteDryRun) : null;
+  log.plain();
+  log.title("Changes");
+  log.step(`${kleur.green("write")} ${path10.relative(cwd, configPath(cwd))}`);
+  for (const result of writes) log.step(`${statusLabel3(result.status)} ${result.relative}`);
+  if (stylesheet.added.length > 0) {
+    log.step(
+      `${kleur.green("write")} ${path10.relative(cwd, stylesheet.file)} (+${stylesheet.added.length} line${stylesheet.added.length === 1 ? "" : "s"})`
+    );
+    for (const line of stylesheet.added) log.plain(kleur.dim(`        ${line}`));
+  } else {
+    log.step(`${kleur.dim("keep ")} ${path10.relative(cwd, stylesheet.file)} (already wired)`);
+  }
+  if (wiring?.changed) {
+    log.step(`${kleur.green("write")} ${path10.relative(cwd, wiring.file)} (wrapped in <ThemeProvider>)`);
+  } else {
+    const importPath = `${config.aliases.components.replace(/\/components$/, "")}/providers/theme-provider`;
+    log.plain();
+    log.info(options.manual ? "Manual mode \u2014 wrap your app yourself:" : "Could not wire the provider automatically. Wrap your app root yourself:");
+    log.plain(kleur.dim(`        import { ThemeProvider } from "${importPath}";`));
+    log.plain(kleur.dim("        <ThemeProvider>{children}</ThemeProvider>"));
+  }
+  if (viteTsconfig || viteConfigAlias) {
+    log.plain();
+    if (viteTsconfig) logTsconfigAliasResult(cwd, viteTsconfig, Boolean(options.manual));
+    if (viteConfigAlias) logViteConfigAliasResult(cwd, viteConfigAlias, Boolean(options.manual));
+  }
+  log.plain();
+  if (!themeFromRegistry) log.warn("Theme tokens are a placeholder \u2014 see the note above.");
+  const viteAliasFailed = !options.manual && ((viteTsconfig?.status ?? "written") === "unsupported" || (viteConfigAlias?.status ?? "written") === "unsupported");
+  if (viteAliasFailed) {
+    log.error("Could not wire the Vite `@` alias automatically \u2014 add the snippets printed above by hand, then re-run `properui init`.");
+    process.exitCode = 1;
+    return;
+  }
+  log.success("Project configured. Next: npx @properui/cli add button badges");
+}
+function statusLabel3(status) {
+  if (status === "created") return kleur.green("write");
+  if (status === "updated") return kleur.yellow("updat");
+  if (status === "skipped") return kleur.dim("skip ");
+  return kleur.dim("keep ");
+}
+function logTsconfigAliasResult(cwd, result, manual) {
+  if (result.status === "already-declared") {
+    log.step(`${kleur.dim("keep ")} ${result.file ? path10.relative(cwd, result.file) : "tsconfig.json"} (alias already declared)`);
+    return;
+  }
+  if (result.status === "skipped") {
+    log.warn("No tsconfig.json, tsconfig.app.json or jsconfig.json found \u2014 cannot wire the path alias. Add it yourself:");
+    log.plain(kleur.dim(`        ${result.snippet}`));
+    return;
+  }
+  const label = result.file ? path10.relative(cwd, result.file) : "tsconfig.json";
+  if (manual || result.status === "unsupported") {
+    log.info(manual ? `Manual mode \u2014 add this to ${label}'s "compilerOptions":` : `Could not find "compilerOptions" in ${label}. Add this yourself:`);
+    log.plain(kleur.dim(`        ${result.snippet}`));
+    return;
+  }
+  log.step(`${kleur.green("write")} ${label} (+ \`paths\` entry)`);
+}
+function logViteConfigAliasResult(cwd, result, manual) {
+  if (result.status === "already-present") {
+    log.step(`${kleur.dim("keep ")} ${result.file ? path10.relative(cwd, result.file) : "vite.config.ts"} (resolve.alias already present)`);
+    return;
+  }
+  if (result.status === "skipped") {
+    log.warn("No vite.config.(ts|mts|js|mjs) found. Vite build/tsc will fail on `@/...` imports until you add:");
+    for (const line of result.snippet.split("\n")) log.plain(kleur.dim(`        ${line}`));
+    return;
+  }
+  const label = result.file ? path10.relative(cwd, result.file) : "vite.config.ts";
+  if (manual || result.status === "unsupported") {
+    log.info(
+      manual ? `Manual mode \u2014 add this inside ${label}'s defineConfig({ ... }):` : `Could not safely edit ${label} (unrecognised shape). Add this yourself:`
+    );
+    for (const line of result.snippet.split("\n")) log.plain(kleur.dim(`        ${line}`));
+    return;
+  }
+  log.step(`${kleur.green("write")} ${label} (+ \`resolve.alias\` for \`${result.aliasKey}\`)`);
+}
+
+// src/commands/list.ts
+import path11 from "path";
+var truncate = (value, max) => value.length <= max ? value : `${value.slice(0, max - 1).trimEnd()}\u2026`;
+async function runList(options) {
+  const cwd = path11.resolve(options.cwd ?? process.cwd());
+  const registry = new Registry(resolveRegistrySource(options.registry, readConfig(cwd)?.registry));
+  let entries;
+  try {
+    entries = await registry.index();
+  } catch (error) {
+    log.error(error instanceof RegistryError ? error.message : error.message);
+    process.exitCode = 1;
+    return;
+  }
+  if (options.layer) entries = entries.filter((entry) => entry.layer === options.layer);
+  if (options.type) entries = entries.filter((entry) => entry.type === options.type);
+  if (options.json) {
+    log.plain(JSON.stringify(entries, null, 2));
+    return;
+  }
+  if (entries.length === 0) {
+    log.warn("Nothing matched those filters.");
+    return;
+  }
+  const width = Math.max(...entries.map((entry) => entry.name.length));
+  log.title(`${entries.length} item${entries.length === 1 ? "" : "s"} \xB7 ${registry.describe()}`);
+  for (const entry of entries) {
+    log.plain(`  ${kleur.bold(entry.name.padEnd(width))}  ${kleur.dim(entry.layer.padEnd(18))}  ${truncate(entry.description, 72)}`);
+  }
+  log.plain();
+  log.info("Add one with: npx @properui/cli add <name>");
+}
+
+// src/commands/login.ts
+import path12 from "path";
+var mask = (token) => `${"\u2022".repeat(Math.max(0, Math.min(token.length, 24) - 4))}${token.slice(-4)}`;
+async function runLogin(options) {
+  const cwd = path12.resolve(options.cwd ?? process.cwd());
+  const registrySource = resolveRegistrySource(options.registry, readConfig(cwd)?.registry);
+  const existing = readAuth();
+  if (existing && !options.token) log.info(`Existing token for ${existing.registry ?? "the default registry"}: ${mask(existing.token)}`);
+  let token = options.token ?? "";
+  if (!token) {
+    if (!canPrompt() || options.yes) {
+      log.error("No token given. Pass --token <token>, or run `properui login` in an interactive terminal.");
+      process.exitCode = 1;
+      return;
+    }
+    log.plain();
+    log.info(`Create a token at ${kleur.underline(`${registrySource.replace(/\/r$/, "")}/account/tokens`)} and paste it below.`);
+    token = await askSecret("Registry token");
+  }
+  if (!token) {
+    log.error("No token entered.");
+    process.exitCode = 1;
+    return;
+  }
+  const file = writeAuth({ token, registry: registrySource });
+  log.success(`Token saved to ${file} (mode 0600).`);
+  log.info(`Delete ${authFile()} to log out.`);
+}
+
+// src/commands/search.ts
+import path13 from "path";
+function scoreEntry(entry, query) {
+  return Math.max(
+    fuzzyScore(entry.name, query),
+    0.85 * fuzzyScore(entry.title, query),
+    0.6 * fuzzyScore(entry.description, query),
+    0.7 * Math.max(0, ...entry.examples.map((example) => fuzzyScore(example, query)))
+  );
+}
+async function runSearch(query, options) {
+  const cwd = path13.resolve(options.cwd ?? process.cwd());
+  const registry = new Registry(resolveRegistrySource(options.registry, readConfig(cwd)?.registry));
+  let entries;
+  try {
+    entries = await registry.index();
+  } catch (error) {
+    log.error(error instanceof RegistryError ? error.message : error.message);
+    process.exitCode = 1;
+    return;
+  }
+  const limit = Number(options.limit ?? 20);
+  const matches = entries.map((entry) => ({ entry, score: scoreEntry(entry, query) })).filter((match) => match.score > 0.2).sort((a, b) => b.score - a.score || a.entry.name.localeCompare(b.entry.name)).slice(0, Number.isFinite(limit) && limit > 0 ? limit : 20);
+  if (matches.length === 0) {
+    log.warn(`Nothing matched "${query}".`);
+    return;
+  }
+  const width = Math.max(...matches.map((match) => match.entry.name.length));
+  log.title(`${matches.length} match${matches.length === 1 ? "" : "es"} for "${query}"`);
+  for (const { entry } of matches) {
+    const examples = entry.examples.length > 0 ? kleur.dim(` \xB7 ${entry.examples.length} examples`) : "";
+    log.plain(`  ${kleur.bold(entry.name.padEnd(width))}  ${kleur.dim(entry.layer.padEnd(18))}  ${entry.title}${examples}`);
+  }
+}
+
+// src/index.ts
+var REGISTRY_HELP = `registry directory or base URL (default: $REGISTRY_URL or ${DEFAULT_REGISTRY_URL})`;
+function guard(action) {
+  return async (...args) => {
+    try {
+      await action(...args);
+    } catch (error) {
+      if (error instanceof CancelledError) {
+        log.warn("Cancelled.");
+        process.exitCode = 130;
+        return;
+      }
+      log.error(error instanceof RegistryError ? error.message : error.message ?? String(error));
+      if (process.env.PROPERUI_DEBUG) console.error(error);
+      process.exitCode = 1;
+    }
+  };
+}
+var program = new Command();
+program.name("properui").description("Add Proper UI components to your project").version("0.1.0").option("--cwd <dir>", "run against another directory", process.cwd());
+program.command("init").description("Configure this project: components.json, theme tokens, cx util and the ThemeProvider").option("--nextjs", "treat this project as Next.js instead of auto-detecting").option("--vite", "treat this project as Vite instead of auto-detecting").option("--manual", "write the files but do not edit the app entry point").option("--overwrite", "replace components.json and any files that already exist").option("--registry <source>", REGISTRY_HELP).option("-y, --yes", "accept every default; never prompt").action(guard(async (options) => runInit({ ...options, cwd: program.opts().cwd })));
+program.command("add").description("Add components (or `add example <name>` for a full page example) and their dependencies").argument("[components...]", "component names, or `example <name>`").option("--all", "add every component in the registry").option("--overwrite", "replace files that already exist").option("--path <dir>", "put component files in this directory instead of the components alias").option("--dry-run", "print what would change without writing anything").option("--registry <source>", REGISTRY_HELP).option("-y, --yes", "accept every default; never prompt").action(guard(async (components, options) => runAdd(components, { ...options, cwd: program.opts().cwd })));
+program.command("list").description("List available components with layer and description").option("--layer <layer>", "filter by layer, e.g. base, application, marketing").option("--type <type>", "filter by type: component, example, util, hook, style").option("--json", "print the raw index rows").option("--registry <source>", REGISTRY_HELP).option("-y, --yes", "accept every default; never prompt").action(guard(async (options) => runList({ ...options, cwd: program.opts().cwd })));
+program.command("search").description("Fuzzy search over component names, descriptions and example names").argument("<query>").option("--limit <n>", "maximum results", "20").option("--registry <source>", REGISTRY_HELP).option("-y, --yes", "accept every default; never prompt").action(guard(async (query, options) => runSearch(query, { ...options, cwd: program.opts().cwd })));
+program.command("diff").description("Show local modifications against the registry version").argument("[component]", "component to compare; omit to check everything already installed").option("--registry <source>", REGISTRY_HELP).option("-y, --yes", "accept every default; never prompt").action(guard(async (component, options) => runDiff(component, { ...options, cwd: program.opts().cwd })));
+program.command("agent").description("Manage the portable Proper UI Skill for AI coding tools").addCommand(
+  new Command("init").description("Install the Proper UI Skill for an AI coding tool: claude, codex, cursor, lovable, or all").option("--client <client>", "claude, codex, cursor, lovable, or all", "all").option("--overwrite", "replace the Skill file even if it already exists").option("-y, --yes", "accept every default; never prompt").action(guard(async (options) => runAgentInit({ ...options, cwd: program.opts().cwd })))
+);
+program.command("info").description("Show this project's Proper UI setup: framework, Tailwind, aliases and installed entries").option("--json", "print machine-readable JSON instead of a formatted report").option("--registry <source>", REGISTRY_HELP).action(guard(async (options) => runInfo({ ...options, cwd: program.opts().cwd })));
+program.command("login").description("Store a registry token at ~/.properui/auth.json (private registries only)").option("--token <token>", "use this token instead of prompting").option("--registry <source>", REGISTRY_HELP).option("-y, --yes", "accept every default; never prompt").action(guard(async (options) => runLogin({ ...options, cwd: program.opts().cwd })));
+program.parseAsync().catch((error) => {
+  log.error(error.message);
+  process.exit(1);
+});