@esuiss/ui 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @esuiss/ui
 
-Add esuiss-ui components to your project.
+Add esuiss-ui components to Next.js and React (Vite) projects.
 
 ```bash
 npx @esuiss/ui@latest init
@@ -8,3 +8,5 @@ npx @esuiss/ui@latest add sidebar
 npx @esuiss/ui@latest add button --diff
 npx @esuiss/ui@latest add button --overwrite
 ```
+
+`init` sets up Tailwind CSS v4, the `@/*` import alias, the theme stylesheet, and the button. Requires TypeScript.

package/index.mjs

@@ -1,186 +1,107 @@
 #!/usr/bin/env node
-import { spawnSync } from "node:child_process"
-import {
-  existsSync,
-  readdirSync,
-  readFileSync,
-  statSync,
-  writeFileSync,
-} from "node:fs"
+import { readFileSync } from "node:fs"
 import path from "node:path"
 
-const REGISTRY = "esuiss/esuiss-ui"
-const COMMAND = "npx @esuiss/ui"
-const INIT_ITEMS = ["theme", "button"]
-const VALUE_FLAGS = new Set(["-c", "--cwd", "-p", "--path", "--diff", "--view"])
-const UPSTREAM_CSS_IMPORT =
-  /^@import\s+["']shadcn\/tailwind\.css["'];?[^\S\n]*\n?/m
-const UPSTREAM_PACKAGE = "shadcn"
+import { add } from "./lib/add.mjs"
+import { init } from "./lib/init.mjs"
+import { CliError, color } from "./lib/output.mjs"
 
-const { version } = JSON.parse(
+const { name, version } = JSON.parse(
   readFileSync(new URL("./package.json", import.meta.url), "utf8")
 )
 
-const usage = `@esuiss/ui ${version}
+const usage = `${name} ${version}
 
 Usage:
-  ${COMMAND} init [options]               set up a project with the esuiss-ui theme and button
-  ${COMMAND} add <component...> [options] add components, e.g. ${COMMAND} add button sidebar
-
-Options for add:
-  -o, --overwrite    overwrite existing files
-  --diff [path]      show changes against the installed file
-  --view [path]      show file contents
-  -y, --yes          skip confirmation prompt
-  -c, --cwd <cwd>    working directory
-  -p, --path <path>  install location
-  --dry-run          preview changes without writing files`
-
-function exec(command, args, cwd) {
-  const result = spawnSync(command, args, {
-    cwd,
-    stdio: "inherit",
-    shell: process.platform === "win32",
-  })
-  if (result.status !== 0) process.exit(result.status ?? 1)
-}
-
-function run(args) {
-  exec("npx", ["--yes", "shadcn@latest", ...args])
-}
-
-function toAddresses(args) {
-  return args.map((arg, index) => {
-    const previous = args[index - 1]
-    const isValue = previous !== undefined && VALUE_FLAGS.has(previous)
-    if (arg.startsWith("-") || isValue || arg.includes("/")) return arg
-    return `${REGISTRY}/${arg}`
-  })
-}
-
-function flagValue(args, ...flags) {
-  const index = args.findIndex((arg) => flags.includes(arg))
-  return index === -1 ? undefined : args[index + 1]
-}
-
-function hasFlag(args, ...flags) {
-  return args.some((arg) => flags.includes(arg))
-}
-
-function isProject(dir) {
-  return existsSync(path.join(dir, "components.json"))
-}
-
-function findProject(baseDir, name) {
-  if (name && isProject(path.resolve(baseDir, name)))
-    return path.resolve(baseDir, name)
-  if (isProject(baseDir)) return baseDir
-  const candidates = readdirSync(baseDir, { withFileTypes: true })
-    .filter(
-      (entry) =>
-        entry.isDirectory() && isProject(path.join(baseDir, entry.name))
-    )
-    .map((entry) => path.join(baseDir, entry.name))
-    .sort(
-      (a, b) =>
-        statSync(path.join(b, "components.json")).mtimeMs -
-        statSync(path.join(a, "components.json")).mtimeMs
-    )
-  return candidates[0]
-}
-
-function packageManager(dir) {
-  const lockfiles = [
-    ["pnpm-lock.yaml", "pnpm", "remove"],
-    ["bun.lock", "bun", "remove"],
-    ["bun.lockb", "bun", "remove"],
-    ["yarn.lock", "yarn", "remove"],
-  ]
-  for (let current = dir; ; current = path.dirname(current)) {
-    const match = lockfiles.find(([file]) =>
-      existsSync(path.join(current, file))
-    )
-    if (match) return match.slice(1)
-    if (path.dirname(current) === current) return ["npm", "uninstall"]
-  }
-}
-
-function removeUpstreamStyles(projectDir) {
-  const config = JSON.parse(
-    readFileSync(path.join(projectDir, "components.json"), "utf8")
-  )
-  const cssFile =
-    config.tailwind?.css && path.join(projectDir, config.tailwind.css)
-  if (cssFile && existsSync(cssFile)) {
-    const css = readFileSync(cssFile, "utf8")
-    if (UPSTREAM_CSS_IMPORT.test(css))
-      writeFileSync(cssFile, css.replace(UPSTREAM_CSS_IMPORT, ""))
+  npx ${name} init [options]              set up Tailwind, the theme, and the button
+  npx ${name} add <component...> [options] add components, e.g. add button sidebar
+
+Options:
+  -o, --overwrite  replace local files that differ from the registry
+  --diff           show how local files differ from the registry
+  -a, --all        add every component
+  -y, --yes        skip confirmation prompts
+  -c, --cwd <dir>  project directory (defaults to the current directory)
+  -h, --help       show this help
+  -v, --version    show the version
+
+Supports Next.js and React (Vite) projects with TypeScript and Tailwind CSS v4.`
+
+function parseArgs(args) {
+  const options = {
+    cwd: process.cwd(),
+    yes: false,
+    overwrite: false,
+    diff: false,
+    all: false,
   }
-
-  const manifest = JSON.parse(
-    readFileSync(path.join(projectDir, "package.json"), "utf8")
-  )
-  const installed =
-    manifest.dependencies?.[UPSTREAM_PACKAGE] ??
-    manifest.devDependencies?.[UPSTREAM_PACKAGE]
-  if (installed) {
-    const [manager, removeCommand] = packageManager(projectDir)
-    exec(manager, [removeCommand, UPSTREAM_PACKAGE], projectDir)
+  const names = []
+
+  for (let index = 0; index < args.length; index++) {
+    const arg = args[index]
+    switch (arg) {
+      case "-y":
+      case "--yes":
+        options.yes = true
+        break
+      case "-o":
+      case "--overwrite":
+        options.overwrite = true
+        break
+      case "--diff":
+        options.diff = true
+        break
+      case "-a":
+      case "--all":
+        options.all = true
+        break
+      case "-c":
+      case "--cwd": {
+        const dir = args[++index]
+        if (!dir) throw new CliError(`${arg} needs a directory.`)
+        options.cwd = path.resolve(dir)
+        break
+      }
+      default:
+        if (arg.startsWith("-"))
+          throw new CliError(`Unknown option ${arg}\n\n${usage}`)
+        names.push(arg)
+    }
   }
+  return { options, names }
 }
 
-function init(args) {
-  const baseArgs = hasFlag(args, "-b", "--base") ? [] : ["--base", "base"]
-  run(["init", ...baseArgs, ...args])
-
-  const baseDir = path.resolve(flagValue(args, "-c", "--cwd") ?? ".")
-  const projectDir = findProject(baseDir, flagValue(args, "-n", "--name"))
-  if (!projectDir) {
-    console.error(
-      `${COMMAND} init: could not find the initialized project (components.json).`
-    )
-    process.exit(1)
+async function main() {
+  const [command, ...args] = process.argv.slice(2)
+
+  switch (command) {
+    case "init":
+      await init(parseArgs(args).options)
+      break
+    case "add": {
+      const { options, names } = parseArgs(args)
+      await add(names, options)
+      break
+    }
+    case "-v":
+    case "--version":
+      console.log(version)
+      break
+    case undefined:
+    case "-h":
+    case "--help":
+    case "help":
+      console.log(usage)
+      break
+    default:
+      throw new CliError(`Unknown command "${command}"\n\n${usage}`)
   }
-
-  run([
-    "add",
-    ...toAddresses(INIT_ITEMS),
-    "--overwrite",
-    "--yes",
-    "--cwd",
-    projectDir,
-  ])
-  removeUpstreamStyles(projectDir)
 }
 
-const [command, ...args] = process.argv.slice(2)
-
-switch (command) {
-  case "add": {
-    const addresses = toAddresses(args)
-    if (!addresses.some((arg) => arg.startsWith(`${REGISTRY}/`))) {
-      console.error(
-        `${COMMAND} add: name at least one component, e.g. ${COMMAND} add button`
-      )
-      process.exit(1)
-    }
-    run(["add", ...addresses])
-    break
-  }
-  case "init":
-    init(args)
-    break
-  case "-v":
-  case "--version":
-    console.log(version)
-    break
-  case undefined:
-  case "-h":
-  case "--help":
-  case "help":
-    console.log(usage)
-    break
-  default:
-    console.error(`${COMMAND}: unknown command "${command}"\n\n${usage}`)
+main().catch((error) => {
+  if (error instanceof CliError) {
+    console.error(color.red(error.message))
     process.exit(1)
-}
+  }
+  throw error
+})

package/lib/add.mjs

@@ -0,0 +1,115 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs"
+import path from "node:path"
+
+import { formatDiff } from "./diff.mjs"
+import { CliError, color, list, note, step } from "./output.mjs"
+import { detectProject, findAliasRoot, install } from "./project.mjs"
+import { fetchRegistry, fetchText, resolveItems } from "./registry.mjs"
+
+async function fetchFiles(items) {
+  return Promise.all(
+    items.flatMap((item) =>
+      item.files.map(async (file) => ({ file, content: await fetchText(file) }))
+    )
+  )
+}
+
+export async function installItems(
+  project,
+  root,
+  registry,
+  names,
+  { overwrite = false } = {}
+) {
+  const items = resolveItems(registry, names)
+  const files = await fetchFiles(items)
+
+  const created = []
+  const updated = []
+  const skipped = []
+
+  for (const { file, content } of files) {
+    const target = path.join(root, file)
+    const relative = path.relative(project.cwd, target)
+    if (!existsSync(target)) {
+      mkdirSync(path.dirname(target), { recursive: true })
+      writeFileSync(target, content)
+      created.push(relative)
+    } else if (readFileSync(target, "utf8") !== content) {
+      if (overwrite) {
+        writeFileSync(target, content)
+        updated.push(relative)
+      } else {
+        skipped.push(relative)
+      }
+    }
+  }
+
+  const installed = install(
+    project,
+    items.flatMap((item) => item.dependencies)
+  )
+
+  if (created.length) {
+    step(`Created ${created.length} file${created.length === 1 ? "" : "s"}:`)
+    list(created)
+  }
+  if (updated.length) {
+    step(`Updated ${updated.length} file${updated.length === 1 ? "" : "s"}:`)
+    list(updated)
+  }
+  if (installed.length) step(`Installed ${installed.join(", ")}`)
+  if (skipped.length) {
+    note(
+      `Kept ${skipped.length} local file${skipped.length === 1 ? " that differs" : "s that differ"} from the registry. Review with --diff, replace with --overwrite:`
+    )
+    list(skipped)
+  }
+  if (!created.length && !updated.length && !skipped.length) {
+    step("Already up to date.")
+  }
+}
+
+async function showDiff(project, root, registry, names) {
+  const requested = new Set(names)
+  const items = resolveItems(registry, names).filter((item) =>
+    requested.has(item.name)
+  )
+  let changes = 0
+
+  for (const { file, content } of await fetchFiles(items)) {
+    const target = path.join(root, file)
+    const relative = path.relative(project.cwd, target)
+    if (!existsSync(target)) {
+      note(`${relative} is not installed.`)
+      continue
+    }
+    const diff = formatDiff(readFileSync(target, "utf8"), content)
+    if (!diff) continue
+    changes++
+    console.log(`\n${color.bold(relative)}\n${diff}`)
+  }
+
+  if (!changes) step("No differences from the registry.")
+}
+
+export async function add(names, options) {
+  const project = detectProject(options.cwd)
+  const root = findAliasRoot(project.cwd)
+  if (!root) {
+    throw new CliError(
+      'No "@/*" import alias found in tsconfig.json. Run `npx @esuiss/ui init` first.'
+    )
+  }
+
+  const registry = await fetchRegistry()
+  const selected = options.all ? registry.items.map((item) => item.name) : names
+  if (!selected.length) {
+    throw new CliError(
+      "Name at least one component, e.g. npx @esuiss/ui add button"
+    )
+  }
+
+  if (options.diff) await showDiff(project, root, registry, selected)
+  else await installItems(project, root, registry, selected, options)
+}

package/lib/diff.mjs

@@ -0,0 +1,61 @@
+import { color } from "./output.mjs"
+
+const CONTEXT = 3
+
+function diffLines(before, after) {
+  const table = Array.from(
+    { length: before.length + 1 },
+    () => new Uint32Array(after.length + 1)
+  )
+  for (let i = before.length - 1; i >= 0; i--) {
+    for (let j = after.length - 1; j >= 0; j--) {
+      table[i][j] =
+        before[i] === after[j]
+          ? table[i + 1][j + 1] + 1
+          : Math.max(table[i + 1][j], table[i][j + 1])
+    }
+  }
+
+  const operations = []
+  let i = 0
+  let j = 0
+  while (i < before.length && j < after.length) {
+    if (before[i] === after[j]) {
+      operations.push([" ", before[i++]])
+      j++
+    } else if (table[i + 1][j] >= table[i][j + 1]) {
+      operations.push(["-", before[i++]])
+    } else {
+      operations.push(["+", after[j++]])
+    }
+  }
+  while (i < before.length) operations.push(["-", before[i++]])
+  while (j < after.length) operations.push(["+", after[j++]])
+  return operations
+}
+
+export function formatDiff(before, after) {
+  const operations = diffLines(before.split("\n"), after.split("\n"))
+  const changed = operations.flatMap(([kind], index) =>
+    kind === " " ? [] : [index]
+  )
+  if (!changed.length) return ""
+
+  const visible = new Set()
+  for (const index of changed) {
+    for (let k = index - CONTEXT; k <= index + CONTEXT; k++) visible.add(k)
+  }
+
+  const lines = []
+  let previous = -1
+  operations.forEach(([kind, text], index) => {
+    if (!visible.has(index)) return
+    if (previous !== -1 && index !== previous + 1)
+      lines.push(color.dim("  ..."))
+    previous = index
+    if (kind === "+") lines.push(color.green(`+ ${text}`))
+    else if (kind === "-") lines.push(color.red(`- ${text}`))
+    else lines.push(color.dim(`  ${text}`))
+  })
+  return lines.join("\n")
+}

package/lib/init.mjs

@@ -0,0 +1,233 @@
+import { existsSync, readFileSync, writeFileSync } from "node:fs"
+import path from "node:path"
+
+import { installItems } from "./add.mjs"
+import { CliError, confirm, note, step } from "./output.mjs"
+import { detectProject, findAliasRoot, install } from "./project.mjs"
+import { fetchRegistry, fetchStylesheet } from "./registry.mjs"
+
+const NEXT_STYLESHEETS = [
+  "src/app/globals.css",
+  "app/globals.css",
+  "src/styles/globals.css",
+  "styles/globals.css",
+]
+const NEXT_APP_DIRS = ["src/app", "app"]
+const VITE_STYLESHEET = "src/index.css"
+const VITE_CONFIGS = [
+  "vite.config.ts",
+  "vite.config.mts",
+  "vite.config.js",
+  "vite.config.mjs",
+]
+const POSTCSS_CONFIGS = [
+  "postcss.config.mjs",
+  "postcss.config.js",
+  "postcss.config.cjs",
+  "postcss.config.ts",
+]
+const POSTCSS_CONFIG = `const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+
+export default config
+`
+const TOOLING = {
+  next: ["tailwindcss", "@tailwindcss/postcss"],
+  vite: ["tailwindcss", "@tailwindcss/vite", "@types/node"],
+}
+const RUNTIME = ["tw-animate-css"]
+
+function relative(project, file) {
+  return path.relative(project.cwd, file)
+}
+
+function findStylesheet(project) {
+  if (project.framework === "vite")
+    return path.join(project.cwd, VITE_STYLESHEET)
+  const existing = NEXT_STYLESHEETS.map((file) =>
+    path.join(project.cwd, file)
+  ).find(existsSync)
+  if (existing) return existing
+  const appDir = NEXT_APP_DIRS.map((dir) => path.join(project.cwd, dir)).find(
+    existsSync
+  )
+  if (!appDir)
+    throw new CliError("Could not find the app directory (app/ or src/app/).")
+  return path.join(appDir, "globals.css")
+}
+
+function assertTailwindVersion(project) {
+  const version = project.packages.tailwindcss
+  const major = version && Number(version.match(/\d+/)?.[0])
+  if (major && major < 4) {
+    throw new CliError(
+      `Tailwind CSS v4 is required, this project uses ${version}.`
+    )
+  }
+}
+
+function addAliasTo(file, target) {
+  let text = readFileSync(file, "utf8")
+  const alias = `"@/*": ["${target}"]`
+  const paths = text.match(/"paths"\s*:\s*\{/)
+  const options = text.match(/"compilerOptions"\s*:\s*\{/)
+  if (paths) {
+    text = text.replace(paths[0], `${paths[0]}\n      ${alias},`)
+  } else if (options) {
+    text = text.replace(
+      options[0],
+      `${options[0]}\n    "paths": {\n      ${alias}\n    },`
+    )
+  } else {
+    text = text.replace(
+      "{",
+      `{\n  "compilerOptions": {\n    "paths": {\n      ${alias}\n    }\n  },`
+    )
+  }
+  writeFileSync(file, text)
+}
+
+function ensureAlias(project, sourceRoot) {
+  if (findAliasRoot(project.cwd)) return false
+  const target =
+    sourceRoot === project.cwd ? "./*" : `./${relative(project, sourceRoot)}/*`
+  const files =
+    project.framework === "vite"
+      ? ["tsconfig.json", "tsconfig.app.json"]
+      : ["tsconfig.json"]
+  for (const name of files) {
+    const file = path.join(project.cwd, name)
+    if (existsSync(file)) addAliasTo(file, target)
+  }
+  return true
+}
+
+function configureVite(project) {
+  const file = VITE_CONFIGS.map((name) => path.join(project.cwd, name)).find(
+    existsSync
+  )
+  if (!file)
+    return [
+      "Create a vite.config.ts with the tailwindcss() plugin and an @ alias to ./src.",
+    ]
+
+  let text = readFileSync(file, "utf8")
+  const original = text
+  const manual = []
+
+  if (!text.includes("@tailwindcss/vite")) {
+    if (/plugins\s*:\s*\[/.test(text)) {
+      text = text.replace(
+        /plugins\s*:\s*\[/,
+        (match) => `${match}tailwindcss(), `
+      )
+      text = `import tailwindcss from "@tailwindcss/vite"\n${text}`
+    } else {
+      manual.push(
+        `Add tailwindcss() from "@tailwindcss/vite" to the plugins in ${relative(project, file)}.`
+      )
+    }
+  }
+
+  if (!/["']@["']\s*:/.test(text)) {
+    if (/defineConfig\(\{/.test(text) && !/\bresolve\s*:/.test(text)) {
+      text = text.replace(
+        /defineConfig\(\{/,
+        (match) =>
+          `${match}\n  resolve: {\n    alias: {\n      "@": fileURLToPath(new URL("./src", import.meta.url)),\n    },\n  },`
+      )
+      text = `import { fileURLToPath } from "node:url"\n${text}`
+    } else {
+      manual.push(
+        `Add an "@" alias pointing to ./src in ${relative(project, file)}.`
+      )
+    }
+  }
+
+  if (text !== original) {
+    writeFileSync(file, text)
+    step(`Configured ${relative(project, file)}`)
+  }
+  return manual
+}
+
+function configureNext(project) {
+  const existing = POSTCSS_CONFIGS.map((name) =>
+    path.join(project.cwd, name)
+  ).find(existsSync)
+  if (!existing) {
+    writeFileSync(path.join(project.cwd, "postcss.config.mjs"), POSTCSS_CONFIG)
+    step("Created postcss.config.mjs")
+    return []
+  }
+  if (!readFileSync(existing, "utf8").includes("@tailwindcss/postcss")) {
+    return [
+      `Add "@tailwindcss/postcss" to the plugins in ${relative(project, existing)}.`,
+    ]
+  }
+  return []
+}
+
+export async function init(options) {
+  const project = detectProject(options.cwd)
+  assertTailwindVersion(project)
+
+  const sourceRoot = existsSync(path.join(project.cwd, "src"))
+    ? path.join(project.cwd, "src")
+    : project.cwd
+  if (project.framework === "vite" && sourceRoot === project.cwd) {
+    throw new CliError("Expected a src/ directory in this Vite project.")
+  }
+
+  const stylesheet = findStylesheet(project)
+  const stylesheetExists = existsSync(stylesheet)
+  if (
+    stylesheetExists &&
+    readFileSync(stylesheet, "utf8").trim() &&
+    !options.yes
+  ) {
+    const replace = await confirm(
+      `Replace ${relative(project, stylesheet)} with the esuiss-ui stylesheet?`
+    )
+    if (!replace) {
+      throw new CliError(
+        "Cancelled. Run again with --yes to replace the stylesheet."
+      )
+    }
+  }
+
+  const registry = await fetchRegistry()
+  const css = await fetchStylesheet(registry)
+
+  if (ensureAlias(project, sourceRoot))
+    step("Added the @/* import alias to tsconfig")
+
+  install(project, TOOLING[project.framework], { dev: true })
+  install(project, RUNTIME)
+
+  const manual =
+    project.framework === "vite"
+      ? configureVite(project)
+      : configureNext(project)
+
+  writeFileSync(stylesheet, css)
+  step(`Wrote ${relative(project, stylesheet)}`)
+  if (!stylesheetExists) {
+    manual.push(
+      `Import ${relative(project, stylesheet)} in ${project.framework === "next" ? "your root layout" : "src/main.tsx"}.`
+    )
+  }
+
+  await installItems(
+    project,
+    findAliasRoot(project.cwd) ?? sourceRoot,
+    registry,
+    ["button"]
+  )
+
+  for (const message of manual) note(message)
+  step("Ready. Add components with npx @esuiss/ui add <name>")
+}

package/lib/output.mjs

@@ -0,0 +1,42 @@
+import { createInterface } from "node:readline/promises"
+
+const useColor = process.stdout.isTTY && !process.env.NO_COLOR
+
+function paint(code, text) {
+  return useColor ? `\x1b[${code}m${text}\x1b[0m` : text
+}
+
+export const color = {
+  green: (text) => paint(32, text),
+  red: (text) => paint(31, text),
+  yellow: (text) => paint(33, text),
+  dim: (text) => paint(2, text),
+  bold: (text) => paint(1, text),
+}
+
+export class CliError extends Error {}
+
+export function step(message) {
+  console.log(`${color.green("✔")} ${message}`)
+}
+
+export function note(message) {
+  console.log(`${color.yellow("•")} ${message}`)
+}
+
+export function list(paths) {
+  for (const item of paths) console.log(color.dim(`  - ${item}`))
+}
+
+export async function confirm(question) {
+  if (!process.stdin.isTTY) return false
+  const prompt = createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  })
+  const answer = await prompt.question(
+    `${color.yellow("?")} ${question} ${color.dim("(y/N)")} `
+  )
+  prompt.close()
+  return /^y(es)?$/i.test(answer.trim())
+}

package/lib/project.mjs

@@ -0,0 +1,105 @@
+import { spawnSync } from "node:child_process"
+import { existsSync, readFileSync } from "node:fs"
+import path from "node:path"
+
+import { CliError } from "./output.mjs"
+
+const LOCKFILES = [
+  ["pnpm-lock.yaml", "pnpm"],
+  ["bun.lock", "bun"],
+  ["bun.lockb", "bun"],
+  ["yarn.lock", "yarn"],
+  ["package-lock.json", "npm"],
+]
+
+const INSTALL_ARGS = {
+  npm: { command: "install", dev: "--save-dev" },
+  pnpm: { command: "add", dev: "--save-dev" },
+  yarn: { command: "add", dev: "--dev" },
+  bun: { command: "add", dev: "--dev" },
+}
+
+const TSCONFIGS = ["tsconfig.json", "tsconfig.app.json"]
+
+export function readJsonc(file) {
+  const text = readFileSync(file, "utf8")
+  const withoutComments = text.replace(
+    /("(?:\\.|[^"\\])*")|\/\/[^\n]*|\/\*[\s\S]*?\*\//g,
+    (match, string) => string ?? ""
+  )
+  return JSON.parse(withoutComments.replace(/,(\s*[}\]])/g, "$1"))
+}
+
+function detectPackageManager(cwd) {
+  for (let dir = cwd; ; dir = path.dirname(dir)) {
+    const match = LOCKFILES.find(([file]) => existsSync(path.join(dir, file)))
+    if (match) return match[1]
+    if (path.dirname(dir) === dir) return "npm"
+  }
+}
+
+export function detectProject(cwd) {
+  const manifestPath = path.join(cwd, "package.json")
+  if (!existsSync(manifestPath)) {
+    throw new CliError(
+      "No package.json found. Run this inside a Next.js or React project."
+    )
+  }
+  const manifest = JSON.parse(readFileSync(manifestPath, "utf8"))
+  const packages = { ...manifest.dependencies, ...manifest.devDependencies }
+  const framework = packages.next
+    ? "next"
+    : packages.vite && packages.react
+      ? "vite"
+      : null
+  if (!framework) {
+    throw new CliError("Only Next.js and React (Vite) projects are supported.")
+  }
+  if (!existsSync(path.join(cwd, "tsconfig.json"))) {
+    throw new CliError(
+      "A TypeScript project is required (tsconfig.json not found)."
+    )
+  }
+  return {
+    cwd,
+    framework,
+    packages,
+    packageManager: detectPackageManager(cwd),
+  }
+}
+
+export function findAliasRoot(cwd) {
+  for (const name of TSCONFIGS) {
+    const file = path.join(cwd, name)
+    if (!existsSync(file)) continue
+    const options = readJsonc(file).compilerOptions ?? {}
+    const target = options.paths?.["@/*"]?.[0]
+    if (target) {
+      return path.resolve(
+        cwd,
+        options.baseUrl ?? ".",
+        target.replace(/\/?\*$/, "")
+      )
+    }
+  }
+  return null
+}
+
+export function install(project, packages, { dev = false } = {}) {
+  const missing = [...new Set(packages)].filter(
+    (name) => !project.packages[name]
+  )
+  if (!missing.length) return []
+  const { command, dev: devFlag } = INSTALL_ARGS[project.packageManager]
+  const args = [command, ...(dev ? [devFlag] : []), ...missing]
+  const result = spawnSync(project.packageManager, args, {
+    cwd: project.cwd,
+    stdio: "inherit",
+    shell: process.platform === "win32",
+  })
+  if (result.status !== 0) {
+    throw new CliError(`${project.packageManager} ${args.join(" ")} failed.`)
+  }
+  for (const name of missing) project.packages[name] = "*"
+  return missing
+}

package/lib/registry.mjs

@@ -0,0 +1,47 @@
+import { CliError } from "./output.mjs"
+
+const DEFAULT_BASE = "https://raw.githubusercontent.com/esuiss/esuiss-ui/main"
+const base = (process.env.ESUISS_REGISTRY ?? DEFAULT_BASE).replace(/\/$/, "")
+
+export async function fetchText(file) {
+  let response
+  try {
+    response = await fetch(`${base}/${file}`)
+  } catch {
+    throw new CliError(`Could not reach the registry to download ${file}.`)
+  }
+  if (!response.ok) {
+    throw new CliError(`Could not download ${file} (HTTP ${response.status}).`)
+  }
+  return response.text()
+}
+
+export async function fetchRegistry() {
+  return JSON.parse(await fetchText("registry.json"))
+}
+
+export function resolveItems(registry, names) {
+  const byName = new Map(registry.items.map((item) => [item.name, item]))
+  const unknown = names.filter((name) => !byName.has(name))
+  if (unknown.length) {
+    throw new CliError(
+      `Unknown component: ${unknown.join(", ")}.\nAvailable: ${[...byName.keys()].join(", ")}`
+    )
+  }
+
+  const ordered = []
+  const seen = new Set()
+  const visit = (name) => {
+    if (seen.has(name)) return
+    seen.add(name)
+    const item = byName.get(name)
+    for (const required of item.requires) visit(required)
+    ordered.push(item)
+  }
+  names.forEach(visit)
+  return ordered
+}
+
+export async function fetchStylesheet(registry) {
+  return fetchText(registry.stylesheet)
+}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@esuiss/ui",
-  "version": "0.1.0",
-  "description": "Add esuiss-ui components to your project.",
+  "version": "0.2.0",
+  "description": "Add esuiss-ui components to Next.js and React projects.",
   "license": "MIT",
   "type": "module",
   "bin": {
     "esuiss": "index.mjs"
   },
   "files": [
-    "index.mjs"
+    "index.mjs",
+    "lib"
   ],
   "engines": {
     "node": ">=18"