@ghostly-ui/cli 0.2.4

package/README.md

@@ -0,0 +1,41 @@
+# @ghostly-ui/cli
+
+CLI for [Ghostly](https://github.com/AdanSerrano/ghostly) — set up your project, generate loading states, diagnose issues.
+
+## Commands
+
+### `ghostly init`
+
+Interactive setup wizard. Installs packages, adds CSS import, configures GhostlyProvider and Tailwind plugin.
+
+```bash
+npx @ghostly-ui/cli init
+```
+
+### `ghostly add loading [path]`
+
+Generates `loading.tsx` files for Next.js App Router routes. Scans your `page.tsx` files, detects components, and creates skeleton loading states automatically.
+
+```bash
+# Interactive — scans all routes, lets you pick
+npx @ghostly-ui/cli add loading
+
+# Specific route
+npx @ghostly-ui/cli add loading app/dashboard
+```
+
+### `ghostly doctor`
+
+Health check for your Ghostly setup. Verifies packages, CSS import, provider, React version, loading.tsx coverage, and more.
+
+```bash
+npx @ghostly-ui/cli doctor
+```
+
+## Documentation
+
+Full docs at [ghostly.adanulissess.com](https://ghostly.adanulissess.com)
+
+## License
+
+MIT

package/dist/add-loading-BOTTW5GC.js

@@ -0,0 +1,191 @@
+#!/usr/bin/env node
+import {
+  GHOSTLY,
+  error,
+  getAppDir,
+  log,
+  success,
+  warn
+} from "./chunk-Q4PDOIND.js";
+
+// src/add-loading.ts
+import { existsSync, readFileSync, writeFileSync, readdirSync, mkdirSync } from "fs";
+import { join, relative } from "path";
+import prompts from "prompts";
+import pc from "picocolors";
+function extractImports(filePath) {
+  const content = readFileSync(filePath, "utf-8");
+  const imports = [];
+  const importRegex = /import\s+(?:\{([^}]+)\}|(\w+))\s+from\s+['"]([^'"]+)['"]/g;
+  let match;
+  while ((match = importRegex.exec(content)) !== null) {
+    const importPath = match[3];
+    if (!importPath.startsWith(".") && !importPath.startsWith("@/") && !importPath.startsWith("~/")) continue;
+    if (importPath.includes("react") || importPath.includes("next")) continue;
+    const names = match[1] ? match[1].split(",").map((n) => n.trim().split(" as ")[0].trim()).filter(Boolean) : match[2] ? [match[2]] : [];
+    for (const name of names) {
+      if (/^[A-Z]/.test(name)) {
+        imports.push({ name, path: importPath, isList: false });
+      }
+    }
+  }
+  const mapPattern = /(\w+)(?:\.data)?(?:\?)?\.\w*map\s*\(\s*(?:\(?\w+\)?\s*=>\s*)?<(\w+)/g;
+  while ((match = mapPattern.exec(content)) !== null) {
+    const component = match[2];
+    const existing = imports.find((i) => i.name === component);
+    if (existing) existing.isList = true;
+  }
+  return imports;
+}
+function generateLoadingFile(components, routePath) {
+  const lines = [];
+  const ghostlyImports = ["Ghostly"];
+  const hasLists = components.some((c) => c.isList);
+  if (hasLists) ghostlyImports.push("GhostlyList");
+  lines.push(`import { ${ghostlyImports.join(", ")} } from '@ghostly-ui/react'`);
+  for (const comp of components) {
+    lines.push(`import { ${comp.name} } from '${comp.path}'`);
+  }
+  lines.push("");
+  lines.push("export default function Loading() {");
+  lines.push("  return (");
+  if (components.length === 1 && !components[0].isList) {
+    lines.push("    <Ghostly loading={true}>");
+    lines.push(`      <${components[0].name} />`);
+    lines.push("    </Ghostly>");
+  } else if (components.length === 1 && components[0].isList) {
+    lines.push(`    <GhostlyList loading={true} count={6} item={<${components[0].name} />}>`);
+    lines.push("      <></>");
+    lines.push("    </GhostlyList>");
+  } else {
+    lines.push('    <div className="space-y-6">');
+    for (const comp of components) {
+      if (comp.isList) {
+        lines.push(`      <GhostlyList loading={true} count={4} item={<${comp.name} />}>`);
+        lines.push("        <></>");
+        lines.push("      </GhostlyList>");
+      } else {
+        lines.push("      <Ghostly loading={true}>");
+        lines.push(`        <${comp.name} />`);
+        lines.push("      </Ghostly>");
+      }
+    }
+    lines.push("    </div>");
+  }
+  lines.push("  )");
+  lines.push("}");
+  lines.push("");
+  return lines.join("\n");
+}
+async function addLoading(routePath) {
+  console.log(`
+  ${GHOSTLY} ${pc.dim("\u2014 Generate loading.tsx")}
+`);
+  const appDir = getAppDir();
+  if (!appDir) {
+    error("No app/ directory found. This command requires Next.js App Router.");
+    process.exit(1);
+  }
+  if (!routePath) {
+    const routes = scanRoutes(appDir);
+    const missing = routes.filter((r) => !r.hasLoading);
+    if (missing.length === 0) {
+      success("All routes already have loading.tsx files!");
+      return;
+    }
+    log(`Found ${pc.bold(String(missing.length))} route(s) without loading.tsx:
+`);
+    missing.forEach((r) => log(`  ${pc.dim("\u2022")} ${r.path}`));
+    console.log();
+    const { selected } = await prompts({
+      type: "multiselect",
+      name: "selected",
+      message: "Select routes to generate loading.tsx for:",
+      choices: missing.map((r) => ({
+        title: r.path,
+        value: r.path,
+        selected: true
+      }))
+    });
+    if (!selected || selected.length === 0) return;
+    for (const route of selected) {
+      await generateForRoute(route, appDir);
+    }
+  } else {
+    const fullPath = routePath.startsWith(appDir) ? routePath : join(appDir, routePath);
+    await generateForRoute(fullPath, appDir);
+  }
+  console.log();
+}
+function scanRoutes(dir, routes = []) {
+  if (!existsSync(dir)) return routes;
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const hasPage = entries.some((e) => e.name.match(/^page\.(tsx|jsx|ts|js)$/));
+  const hasLoading = entries.some((e) => e.name.match(/^loading\.(tsx|jsx|ts|js)$/));
+  if (hasPage) {
+    routes.push({ path: dir, hasLoading, hasPage });
+  }
+  for (const entry of entries) {
+    if (entry.isDirectory() && !entry.name.startsWith("_") && !entry.name.startsWith(".")) {
+      scanRoutes(join(dir, entry.name), routes);
+    }
+  }
+  return routes;
+}
+async function generateForRoute(routePath, appDir) {
+  const pageFile = findPageFile(routePath);
+  if (!pageFile) {
+    warn(`No page.tsx found in ${routePath}`);
+    return;
+  }
+  const loadingFile = join(routePath, "loading.tsx");
+  if (existsSync(loadingFile)) {
+    warn(`${relative(".", loadingFile)} already exists \u2014 skipping`);
+    return;
+  }
+  const components = extractImports(pageFile);
+  if (components.length === 0) {
+    warn(`No components found in ${relative(".", pageFile)}`);
+    const { manual } = await prompts({
+      type: "text",
+      name: "manual",
+      message: "Enter component name(s) to wrap (comma-separated):"
+    });
+    if (manual) {
+      const names = manual.split(",").map((n) => n.trim()).filter(Boolean);
+      for (const name of names) {
+        components.push({ name, path: `@/components/${name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`, isList: false });
+      }
+    }
+  }
+  if (components.length === 0) return;
+  const { selected } = await prompts({
+    type: "multiselect",
+    name: "selected",
+    message: `Components in ${relative(".", pageFile)}:`,
+    choices: components.map((c) => ({
+      title: `${c.name}${c.isList ? pc.dim(" (list)") : ""}`,
+      value: c.name,
+      selected: true
+    }))
+  });
+  if (!selected || selected.length === 0) return;
+  const finalComponents = components.filter((c) => selected.includes(c.name));
+  const content = generateLoadingFile(finalComponents, routePath);
+  if (!existsSync(routePath)) {
+    mkdirSync(routePath, { recursive: true });
+  }
+  writeFileSync(loadingFile, content);
+  success(`Created ${pc.bold(relative(".", loadingFile))}`);
+  log(pc.dim(content));
+}
+function findPageFile(dir) {
+  for (const ext of ["tsx", "jsx", "ts", "js"]) {
+    const f = join(dir, `page.${ext}`);
+    if (existsSync(f)) return f;
+  }
+  return null;
+}
+export {
+  addLoading
+};

package/dist/chunk-Q4PDOIND.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/utils.ts
+import { existsSync, readFileSync } from "fs";
+import { join } from "path";
+import pc from "picocolors";
+var GHOSTLY = pc.bold(pc.cyan("ghostly"));
+function log(msg) {
+  console.log(`  ${msg}`);
+}
+function success(msg) {
+  console.log(`  ${pc.green("\u2713")} ${msg}`);
+}
+function warn(msg) {
+  console.log(`  ${pc.yellow("!")} ${msg}`);
+}
+function error(msg) {
+  console.log(`  ${pc.red("\u2717")} ${msg}`);
+}
+function step(n, msg) {
+  console.log(`
+  ${pc.cyan(`[${n}]`)} ${msg}`);
+}
+function detectPackageManager() {
+  const cwd = process.cwd();
+  if (existsSync(join(cwd, "bun.lock")) || existsSync(join(cwd, "bun.lockb"))) return "bun";
+  if (existsSync(join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync(join(cwd, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+function installCmd(pm, ...pkgs) {
+  const cmd = pm === "npm" ? "npm install" : `${pm} add`;
+  return `${cmd} ${pkgs.join(" ")}`;
+}
+function fileContains(path, text) {
+  if (!existsSync(path)) return false;
+  return readFileSync(path, "utf-8").includes(text);
+}
+function findFile(...candidates) {
+  for (const c of candidates) {
+    if (existsSync(c)) return c;
+  }
+  return null;
+}
+function readJson(path) {
+  if (!existsSync(path)) return null;
+  try {
+    return JSON.parse(readFileSync(path, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+function isNextJs() {
+  const pkg = readJson("package.json");
+  if (!pkg) return false;
+  const deps = { ...pkg.dependencies || {}, ...pkg.devDependencies || {} };
+  return "next" in deps;
+}
+function getAppDir() {
+  if (existsSync("src/app")) return "src/app";
+  if (existsSync("app")) return "app";
+  return null;
+}
+
+export {
+  __require,
+  GHOSTLY,
+  log,
+  success,
+  warn,
+  error,
+  step,
+  detectPackageManager,
+  installCmd,
+  fileContains,
+  findFile,
+  readJson,
+  isNextJs,
+  getAppDir
+};

package/dist/doctor-JXBQFCU2.js

@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+import {
+  GHOSTLY,
+  __require,
+  error,
+  fileContains,
+  findFile,
+  getAppDir,
+  isNextJs,
+  readJson,
+  success,
+  warn
+} from "./chunk-Q4PDOIND.js";
+
+// src/doctor.ts
+import { existsSync } from "fs";
+import pc from "picocolors";
+async function doctor() {
+  console.log(`
+  ${GHOSTLY} ${pc.dim("\u2014 Health check")}
+`);
+  const checks = [];
+  const pkg = readJson("package.json");
+  checks.push({
+    name: "package.json",
+    ok: !!pkg,
+    message: pkg ? "Found" : "No package.json \u2014 run from project root"
+  });
+  if (!pkg) {
+    printResults(checks);
+    return;
+  }
+  const deps = {
+    ...pkg.dependencies || {},
+    ...pkg.devDependencies || {}
+  };
+  const hasCore = "@ghostly-ui/core" in deps;
+  checks.push({
+    name: "@ghostly-ui/core",
+    ok: hasCore,
+    message: hasCore ? `Installed (${deps["@ghostly-ui/core"]})` : "Not installed \u2014 run: npx @ghostly-ui/cli init"
+  });
+  const hasReact = "@ghostly-ui/react" in deps;
+  checks.push({
+    name: "@ghostly-ui/react",
+    ok: hasReact,
+    message: hasReact ? `Installed (${deps["@ghostly-ui/react"]})` : "Not installed \u2014 run: npx @ghostly-ui/cli init"
+  });
+  const cssFile = findFile(
+    "src/app/globals.css",
+    "app/globals.css",
+    "src/styles/globals.css",
+    "styles/globals.css",
+    "src/index.css",
+    "index.css"
+  );
+  const cssImported = cssFile ? fileContains(cssFile, "@ghostly-ui/core/css") : false;
+  checks.push({
+    name: "CSS import",
+    ok: cssImported,
+    message: cssImported ? `Found in ${cssFile}` : cssFile ? `Missing in ${cssFile} \u2014 add: @import '@ghostly-ui/core/css'` : "No globals.css found"
+  });
+  const reactVersion = deps["react"] || "";
+  const reactOk = reactVersion && parseInt(reactVersion.replace(/[^0-9]/g, "")) >= 18;
+  checks.push({
+    name: "React version",
+    ok: !!reactOk,
+    message: reactVersion ? `${reactVersion} ${reactOk ? "" : "(needs >=18)"}` : "Not found"
+  });
+  const nextjs = isNextJs();
+  if (nextjs) {
+    checks.push({ name: "Framework", ok: true, message: "Next.js detected" });
+    const appDir = getAppDir();
+    checks.push({
+      name: "App Router",
+      ok: !!appDir,
+      message: appDir ? `Found at ${appDir}/` : "Not found (Pages Router?)"
+    });
+    const layoutFile = findFile("src/app/layout.tsx", "app/layout.tsx");
+    const hasProvider = layoutFile ? fileContains(layoutFile, "GhostlyProvider") : false;
+    checks.push({
+      name: "GhostlyProvider",
+      ok: hasProvider,
+      message: hasProvider ? `Found in ${layoutFile}` : "Optional \u2014 add to layout.tsx for global defaults"
+    });
+    if (appDir) {
+      const { total, withLoading } = countRoutes(appDir);
+      checks.push({
+        name: "loading.tsx coverage",
+        ok: withLoading === total,
+        message: `${withLoading}/${total} routes have loading.tsx${withLoading < total ? ` \u2014 run: npx @ghostly-ui/cli add loading` : ""}`
+      });
+    }
+  }
+  const hasTailwind = "tailwindcss" in deps;
+  if (hasTailwind) {
+    const twConfig = findFile("tailwind.config.ts", "tailwind.config.js", "tailwind.config.mjs");
+    const hasPlugin = twConfig ? fileContains(twConfig, "@ghostly-ui/core/tailwind") : false;
+    checks.push({
+      name: "Tailwind plugin",
+      ok: hasPlugin,
+      message: hasPlugin ? `Found in ${twConfig}` : "Optional \u2014 add for ghostly-* utility classes"
+    });
+  }
+  const coreExists = existsSync("node_modules/@ghostly-ui/core/dist/ghostly.css");
+  checks.push({
+    name: "Built CSS",
+    ok: coreExists,
+    message: coreExists ? "ghostly.css found in node_modules" : "CSS file missing \u2014 try reinstalling"
+  });
+  printResults(checks);
+}
+function printResults(checks) {
+  const passed = checks.filter((c) => c.ok).length;
+  const total = checks.length;
+  for (const check of checks) {
+    if (check.ok) {
+      success(`${check.name}: ${pc.dim(check.message)}`);
+    } else {
+      const fn = check.message.includes("Optional") ? warn : error;
+      fn(`${check.name}: ${check.message}`);
+    }
+  }
+  console.log();
+  if (passed === total) {
+    console.log(`  ${pc.green(pc.bold(`All ${total} checks passed!`))} Ghostly is healthy.
+`);
+  } else {
+    console.log(`  ${pc.yellow(`${passed}/${total} checks passed.`)} Fix the issues above.
+`);
+  }
+}
+function countRoutes(dir) {
+  let total = 0;
+  let withLoading = 0;
+  const { readdirSync } = __require("fs");
+  const { join } = __require("path");
+  function scan(d) {
+    if (!existsSync(d)) return;
+    const entries = readdirSync(d, { withFileTypes: true });
+    const hasPage = entries.some((e) => e.name.match(/^page\.(tsx|jsx|ts|js)$/));
+    const hasLoading = entries.some((e) => e.name.match(/^loading\.(tsx|jsx|ts|js)$/));
+    if (hasPage) {
+      total++;
+      if (hasLoading) withLoading++;
+    }
+    for (const entry of entries) {
+      if (entry.isDirectory() && !entry.name.startsWith("_") && !entry.name.startsWith(".")) {
+        scan(join(d, entry.name));
+      }
+    }
+  }
+  scan(dir);
+  return { total, withLoading };
+}
+export {
+  doctor
+};

package/dist/index.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import pc from "picocolors";
+var GHOSTLY = pc.bold(pc.cyan("ghostly"));
+var VERSION = "0.2.4";
+var args = process.argv.slice(2);
+var command = args[0];
+async function main() {
+  switch (command) {
+    case "init": {
+      const { init } = await import("./init-JZMB5KKV.js");
+      await init();
+      break;
+    }
+    case "add": {
+      const subcommand = args[1];
+      if (subcommand === "loading") {
+        const { addLoading } = await import("./add-loading-BOTTW5GC.js");
+        await addLoading(args[2]);
+      } else {
+        console.log(`
+  ${GHOSTLY} Unknown: ${pc.red(`add ${subcommand || "?"}`)}
+`);
+        console.log(`  Available:`);
+        console.log(`    ${pc.cyan("ghostly add loading")} ${pc.dim("[path]")}  Generate loading.tsx files`);
+        console.log();
+      }
+      break;
+    }
+    case "doctor": {
+      const { doctor } = await import("./doctor-JXBQFCU2.js");
+      await doctor();
+      break;
+    }
+    case "--version":
+    case "-v": {
+      console.log(VERSION);
+      break;
+    }
+    case "--help":
+    case "-h":
+    case void 0: {
+      console.log(`
+  ${GHOSTLY} ${pc.dim(`v${VERSION}`)} \u2014 Zero-config skeleton loaders
+
+  ${pc.bold("Commands:")}
+
+    ${pc.cyan("ghostly init")}                 Set up Ghostly in your project
+    ${pc.cyan("ghostly add loading")} ${pc.dim("[path]")}  Generate loading.tsx for Next.js routes
+    ${pc.cyan("ghostly doctor")}               Check your Ghostly setup
+
+  ${pc.bold("Examples:")}
+
+    ${pc.dim("$")} npx @ghostly-ui/cli init
+    ${pc.dim("$")} npx @ghostly-ui/cli add loading app/dashboard
+    ${pc.dim("$")} npx @ghostly-ui/cli add loading ${pc.dim("(interactive \u2014 scans all routes)")}
+    ${pc.dim("$")} npx @ghostly-ui/cli doctor
+
+  ${pc.dim("Docs: https://ghostly.adanulissess.com")}
+`);
+      break;
+    }
+    default: {
+      console.log(`
+  ${GHOSTLY} Unknown command: ${pc.red(command)}`);
+      console.log(`  Run ${pc.cyan("ghostly --help")} for available commands.
+`);
+      process.exit(1);
+    }
+  }
+}
+main().catch((err) => {
+  console.error(pc.red("Error:"), err.message);
+  process.exit(1);
+});

package/dist/init-JZMB5KKV.js

@@ -0,0 +1,163 @@
+#!/usr/bin/env node
+import {
+  GHOSTLY,
+  detectPackageManager,
+  error,
+  fileContains,
+  findFile,
+  installCmd,
+  isNextJs,
+  log,
+  readJson,
+  step,
+  success,
+  warn
+} from "./chunk-Q4PDOIND.js";
+
+// src/init.ts
+import { readFileSync, writeFileSync } from "fs";
+import { execSync } from "child_process";
+import prompts from "prompts";
+import pc from "picocolors";
+async function init() {
+  console.log(`
+  ${GHOSTLY} ${pc.dim("\u2014 Setup wizard")}
+`);
+  const pm = detectPackageManager();
+  const nextjs = isNextJs();
+  const pkg = readJson("package.json");
+  if (!pkg) {
+    error("No package.json found. Run this from your project root.");
+    process.exit(1);
+  }
+  log(`Package manager: ${pc.bold(pm)}`);
+  log(`Framework: ${pc.bold(nextjs ? "Next.js" : "React")}`);
+  const deps = { ...pkg.dependencies || {}, ...pkg.devDependencies || {} };
+  const hasCore = "@ghostly-ui/core" in deps;
+  const hasReact = "@ghostly-ui/react" in deps;
+  if (hasCore && hasReact) {
+    success("Ghostly packages already installed");
+  }
+  const { features } = await prompts({
+    type: "multiselect",
+    name: "features",
+    message: "What should we set up?",
+    choices: [
+      { title: "Install packages", value: "install", selected: !hasCore || !hasReact },
+      { title: "Import CSS in globals.css", value: "css", selected: true },
+      { title: "Add GhostlyProvider to layout", value: "provider", selected: true },
+      { title: "Add Tailwind plugin", value: "tailwind", selected: "tailwindcss" in deps }
+    ]
+  });
+  if (!features || features.length === 0) {
+    log(pc.dim("Nothing selected. Exiting."));
+    return;
+  }
+  let stepN = 0;
+  if (features.includes("install")) {
+    stepN++;
+    step(stepN, "Installing packages...");
+    const cmd = installCmd(pm, "@ghostly-ui/core", "@ghostly-ui/react");
+    log(pc.dim(`$ ${cmd}`));
+    try {
+      execSync(cmd, { stdio: "inherit" });
+      success("Packages installed");
+    } catch {
+      error("Failed to install packages. Try manually:");
+      log(pc.dim(cmd));
+    }
+  }
+  if (features.includes("css")) {
+    stepN++;
+    step(stepN, "Adding CSS import...");
+    const cssFile = findFile(
+      "src/app/globals.css",
+      "app/globals.css",
+      "src/styles/globals.css",
+      "styles/globals.css",
+      "src/index.css",
+      "index.css"
+    );
+    if (!cssFile) {
+      warn("Could not find globals.css. Add this manually:");
+      log(pc.dim("  @import '@ghostly-ui/core/css';"));
+    } else if (fileContains(cssFile, "@ghostly-ui/core/css")) {
+      success(`CSS already imported in ${cssFile}`);
+    } else {
+      const content = readFileSync(cssFile, "utf-8");
+      const lastImport = content.lastIndexOf("@import");
+      if (lastImport >= 0) {
+        const lineEnd = content.indexOf("\n", lastImport);
+        const before = content.substring(0, lineEnd + 1);
+        const after = content.substring(lineEnd + 1);
+        writeFileSync(cssFile, `${before}@import '@ghostly-ui/core/css';
+${after}`);
+      } else {
+        writeFileSync(cssFile, `@import '@ghostly-ui/core/css';
+${content}`);
+      }
+      success(`Added CSS import to ${pc.bold(cssFile)}`);
+    }
+  }
+  if (features.includes("provider")) {
+    stepN++;
+    step(stepN, "Adding GhostlyProvider...");
+    const layoutFile = findFile(
+      "src/app/layout.tsx",
+      "app/layout.tsx",
+      "src/app/layout.jsx",
+      "app/layout.jsx"
+    );
+    if (!layoutFile) {
+      warn("Could not find layout.tsx. Add GhostlyProvider manually:");
+      log(pc.dim("  import { GhostlyProvider } from '@ghostly-ui/react'"));
+      log(pc.dim("  <GhostlyProvider>{children}</GhostlyProvider>"));
+    } else if (fileContains(layoutFile, "GhostlyProvider")) {
+      success(`GhostlyProvider already in ${layoutFile}`);
+    } else {
+      const content = readFileSync(layoutFile, "utf-8");
+      const importLine = "import { GhostlyProvider } from '@ghostly-ui/react'\n";
+      const wrapped = content.replace(
+        /^/,
+        importLine
+      ).replace(
+        /\{children\}/,
+        "<GhostlyProvider>{children}</GhostlyProvider>"
+      );
+      writeFileSync(layoutFile, wrapped);
+      success(`Added GhostlyProvider to ${pc.bold(layoutFile)}`);
+    }
+  }
+  if (features.includes("tailwind")) {
+    stepN++;
+    step(stepN, "Adding Tailwind plugin...");
+    const twConfig = findFile(
+      "tailwind.config.ts",
+      "tailwind.config.js",
+      "tailwind.config.mjs"
+    );
+    if (!twConfig) {
+      warn("Could not find tailwind.config. Add manually:");
+      log(pc.dim("  import ghostly from '@ghostly-ui/core/tailwind'"));
+      log(pc.dim("  plugins: [ghostly]"));
+    } else if (fileContains(twConfig, "@ghostly-ui/core/tailwind")) {
+      success(`Tailwind plugin already in ${twConfig}`);
+    } else {
+      warn(`Add to ${pc.bold(twConfig)} manually:`);
+      log(pc.dim("  import ghostly from '@ghostly-ui/core/tailwind'"));
+      log(pc.dim("  plugins: [ghostly]"));
+      log(pc.dim("  (Auto-editing Tailwind configs is risky \u2014 too many formats)"));
+    }
+  }
+  console.log(`
+  ${pc.green("Done!")} Ghostly is ready.
+`);
+  log(`Next steps:`);
+  log(`  ${pc.dim("1.")} Wrap a component: ${pc.cyan("<Ghostly loading={isLoading}><Card /></Ghostly>")}`);
+  log(`  ${pc.dim("2.")} Generate loading.tsx: ${pc.cyan("npx @ghostly-ui/cli add loading app/dashboard")}`);
+  log(`  ${pc.dim("3.")} Read the docs: ${pc.cyan("https://ghostly.adanulissess.com/docs")}`);
+  console.log();
+}
+export {
+  init
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@ghostly-ui/cli",
+  "version": "0.2.4",
+  "description": "CLI for Ghostly — init, generate loading.tsx, diagnose issues",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "ghostly": "./dist/index.js"
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/prompts": "^2.4.9",
+    "@types/node": "^22.19.15",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  },
+  "keywords": ["ghostly", "skeleton", "cli", "loading", "react", "nextjs"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AdanSerrano/ghostly",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://ghostly.adanulissess.com"
+}