tweenlabs 0.1.3 → 0.1.6

package/README.md

@@ -7,15 +7,15 @@ keywords: TweenLabs, GSAP component library, GSAP Next.js, GSAP animations React
 
 # <img src="https://raw.githubusercontent.com/TweenLabs/TweenLabs/master/public/logo.svg" alt="TweenLabs Logo" width="40" height="40" align="center" /> TweenLabs
 
-
 > The open-source **GSAP animation component library** for Next.js developers — learn, copy, and contribute modern web animation patterns built with **GSAP 3.15**, **Next.js 16**, and **Lenis**.
 
-**[Live Demo](https://tweenlabs.xyz)** • **[Contributing Guide](#contributing)** • **[Roadmap](#roadmap)**  
+**[Live Demo](https://tweenlabs.xyz)** • **[Contributing Guide](#contributing)** • **[Roadmap](#roadmap)**
 
 ![Next.js](https://img.shields.io/badge/Next.js-16-black?style=flat-square)
 ![GSAP](https://img.shields.io/badge/GSAP-3.15-88CE02?style=flat-square)
 ![React](https://img.shields.io/badge/React-19-61DAFB?style=flat-square)
 ![License](https://img.shields.io/badge/license-MIT-blue?style=flat-square)
+![npm](https://img.shields.io/npm/v/tweenlabs?style=flat-square&color=CB3837)
 
 <!-- [Contributors](https://img.shields.io/github/contributors/TweenLabs/TweenLabs?style=flat-square) -->
 
@@ -31,6 +31,114 @@ No paid plugins. No locked content. Just clean, modern animation patterns anyone
 
 ---
 
+## ⚡ CLI — Install Components Instantly
+
+TweenLabs ships with a **zero-dependency CLI** that lets you pull components directly into your codebase — no copy-paste required.
+
+### Initialize configuration
+
+Run the `init` command to configure your preferred installation path. This creates a `tweenlabs.config.json` file in the root of your project, meaning you won't be prompted for the path when adding components in the future.
+
+```bash
+npx tweenlabs@latest init
+```
+
+By default, it will detect your project setup and suggest `./src/components/tweenlabs` or `./components/tweenlabs`.
+
+### Add a component
+
+```bash
+npx tweenlabs@latest add <component-slug>
+```
+
+This will:
+1. Fetch the component files from the TweenLabs registry
+2. Detect your project layout (supports `src/` and non-`src/` setups)
+3. Automatically resolve the install path to `src/components/tweenlabs/`
+4. Create the directory if it doesn't exist
+5. Detect and install any missing npm dependencies
+
+### Browse & install interactively
+
+Run `add` without a slug to get an interactive picker:
+
+```bash
+npx tweenlabs@latest add
+```
+
+```
+▲  tweenlabs  v0.1.6
+
+Select a component to install:
+
+  [1]  .                   All Components
+  [2]  gravity-drop        Physics-based falling animations with realistic bounce
+  [3]  scroll-assembly     Content reveals synced with scroll position
+  [4]  border-reveal       Inward/outward border animations
+  ...
+
+👉 Enter the number of the component to add (1-8):
+```
+
+### List all available components
+
+```bash
+npx tweenlabs@latest list
+```
+
+### Install all components at once
+
+```bash
+npx tweenlabs@latest add .
+```
+
+---
+
+## 📁 Output Structure
+
+After installation, components land here by default:
+
+```
+your-project/
+└── src/
+    └── components/
+        └── tweenlabs/
+            ├── GravityDrop.tsx
+            ├── BorderReveal.tsx
+            └── ...
+```
+
+> **tweenlabs.config.json:** If a `tweenlabs.config.json` exists in your project's root, the CLI reads the `path` option and installs components there. This takes highest precedence.
+>
+> **shadcn UI users:** If no `tweenlabs.config.json` exists but your project has a `components.json`, TweenLabs reads the `aliases.components` field and installs into the matching directory under a `tweenlabs/` subfolder automatically.
+
+---
+
+## 🚩 CLI Flags
+
+| Flag | Short | Description |
+|------|-------|-------------|
+| `--yes` | `-y` | Skip all prompts; accept all defaults and auto-install dependencies |
+| `--path <dir>` | `-p` | Override the install directory |
+| `--overwrite` | `-o` | Overwrite existing files without prompting |
+| `--help` | `-h` | Show help |
+| `--version` | `-v` | Show CLI version |
+
+### Examples
+
+```bash
+# Install with a custom path
+npx tweenlabs@latest add gravity-drop --path src/ui/animations
+
+# Install all, skip all prompts, overwrite existing files
+npx tweenlabs@latest add . --yes --overwrite
+
+# Install with pnpm dlx
+pnpm dlx tweenlabs add border-reveal
+```
+
+---
+
 ## ✨ Animation Components
 
 | Component | Description | GSAP Features Used |
@@ -57,7 +165,9 @@ No paid plugins. No locked content. Just clean, modern animation patterns anyone
 
 ---
 
-## 🚀 Quick Start
+## 🚀 Quick Start (Playground)
+
+Want to run the full TweenLabs playground locally?
 
 ```bash
 # Install pnpm if you don't have it
@@ -123,6 +233,11 @@ git push origin feat/your-animation-name
 
 ## 🗺 Roadmap
 
+- [x] CLI — install components via `npx tweenlabs add`
+- [x] Auto-detect package manager (npm, pnpm, yarn, bun)
+- [x] Auto-install missing dependencies
+- [x] Interactive component picker
+- [x] `components.json` / path resolution
 - [ ] Export as npm package (`@tweenlabs/components`)
 - [ ] Storybook integration for isolated component previews
 - [ ] Unit tests for animation logic

package/bin/cli.js

@@ -22,13 +22,14 @@ const helpText = `
 ${colors.bold}${colors.cyan}TweenLabs CLI${colors.reset} - Install premium GSAP components directly into your codebase.
 
 ${colors.bold}Usage:${colors.reset}
+  npx tweenlabs init                  Initialize configuration file
   npx tweenlabs list                  List all available components
   npx tweenlabs add <component-slug>  Install a specific component
 
 ${colors.bold}Options:${colors.reset}
   -y, --yes          Skip all prompts (auto-accept defaults & install dependencies)
   -p, --path <path>  Specify a custom directory to install the component
-  -o, --overwrite    Overwrite existing component files without prompting
+  -o, --overwrite    Overwrite existing component files/configuration without prompting
   -h, --help         Show this help message
   -v, --version      Show version
 `;
@@ -79,6 +80,31 @@ function askQuestion(query) {
   );
 }
 
+// Levenshtein distance helper for spelling suggestions
+function getLevenshteinDistance(a, b) {
+  const tmp = [];
+  let i;
+  let j;
+  const alen = a.length;
+  const blen = b.length;
+  if (alen === 0) return blen;
+  if (blen === 0) return alen;
+  for (i = 0; i <= alen; i++) {
+    tmp[i] = [i];
+  }
+  for (j = 0; j <= blen; j++) {
+    tmp[0][j] = j;
+  }
+  for (i = 1; i <= alen; i++) {
+    for (j = 1; j <= blen; j++) {
+      tmp[i][j] = a.charAt(i - 1) === b.charAt(j - 1)
+        ? tmp[i - 1][j - 1]
+        : Math.min(tmp[i - 1][j - 1] + 1, Math.min(tmp[i][j - 1] + 1, tmp[i - 1][j] + 1));
+    }
+  }
+  return tmp[alen][blen];
+}
+
 // Detect client's package manager
 function detectPackageManager() {
   if (fs.existsSync(path.join(process.cwd(), "pnpm-lock.yaml"))) return "pnpm";
@@ -95,16 +121,22 @@ async function main() {
     process.exit(0);
   }
 
+  let version = "0.1.6";
+  try {
+    const pkg = require("../package.json");
+    version = pkg.version;
+  } catch (_e) {}
+
   if (args.includes("--version") || args.includes("-v")) {
-    try {
-      const pkg = require("../package.json");
-      console.log(pkg.version);
-    } catch (_err) {
-      console.log("0.1.1");
-    }
+    console.log(version);
     process.exit(0);
   }
 
+  // Print CLI Header Banner
+  console.log(
+    `\n${colors.bold}${colors.cyan}▲  tweenlabs${colors.reset}  ${colors.gray}v${version}${colors.reset}\n`,
+  );
+
   // Parse flags
   const isYes = args.includes("-y") || args.includes("--yes");
   const isOverwrite = args.includes("-o") || args.includes("--overwrite");
@@ -139,29 +171,86 @@ async function main() {
     process.exit(0);
   }
 
+  if (cleanArgs[0] === "init") {
+    const configPath = path.join(process.cwd(), "tweenlabs.config.json");
+    if (fs.existsSync(configPath) && !isOverwrite && !isYes) {
+      console.log(
+        `${colors.yellow}! tweenlabs.config.json already exists.${colors.reset}`
+      );
+      const overwriteConfirm = await askQuestion(
+        `Overwrite configuration file? (y/n) ${colors.gray}[y]${colors.reset}: `
+      );
+      if (
+        overwriteConfirm &&
+        overwriteConfirm.toLowerCase() !== "y" &&
+        overwriteConfirm.toLowerCase() !== "yes"
+      ) {
+        console.log(`${colors.yellow}! Configuration initialization cancelled.${colors.reset}`);
+        process.exit(0);
+      }
+    }
+
+    let defaultDir = "";
+    if (fs.existsSync(path.join(process.cwd(), "src"))) {
+      defaultDir = "./src/components/tweenlabs";
+    } else {
+      defaultDir = "./components/tweenlabs";
+    }
+
+    let targetPath = defaultDir;
+    if (!isYes) {
+      const inputPath = await askQuestion(
+        `Configure component installation path (${defaultDir}): `
+      );
+      if (inputPath) {
+        targetPath = inputPath;
+      }
+    }
+
+    try {
+      const configData = {
+        path: targetPath,
+      };
+      fs.writeFileSync(configPath, JSON.stringify(configData, null, 2), "utf-8");
+      console.log(
+        `\n${colors.green}✔ Created tweenlabs.config.json with path: ${colors.bold}${targetPath}${colors.reset}\n`
+      );
+      process.exit(0);
+    } catch (err) {
+      console.error(
+        `${colors.red}Error: Failed to create tweenlabs.config.json.${colors.reset}`
+      );
+      console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
+      process.exit(1);
+    }
+  }
+
   if (cleanArgs[0] === "list") {
-    console.log(
-      `\n${colors.cyan}🔍 Fetching available components list...${colors.reset}`,
-    );
+    console.log(`${colors.cyan}Fetching registry...${colors.reset}`);
     const domain =
       process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
     const url = `${domain}/api/registry/list`;
     try {
       const data = await fetchJson(url);
       console.log(
-        `\n${colors.bold}${colors.green}Available TweenLabs Components:${colors.reset}\n`,
+        `\n${colors.bold}${colors.green}Available Components:${colors.reset}\n`,
       );
-      for (const comp of data.components) {
+      const rows = data.components.map((comp) => ({
+        slug: comp.cleanSlug || comp.slug,
+        desc: comp.description || "",
+      }));
+      const maxSlugLen = Math.max(...rows.map((r) => r.slug.length), 10);
+      for (const row of rows) {
+        const paddedSlug = row.slug.padEnd(maxSlugLen + 4, " ");
         console.log(
-          `  ${colors.bold}${colors.cyan}* ${comp.name}${colors.reset}`,
+          `  ${colors.cyan}${paddedSlug}${colors.reset}${colors.gray}${row.desc}${colors.reset}`,
         );
-        console.log(`    Slug:       ${comp.slug} (or ${comp.cleanSlug})`);
-        console.log(`    Desc:       ${comp.description}\n`);
       }
+      console.log("");
       process.exit(0);
     } catch (err) {
       console.error(
-        `\n${colors.red}❌ Failed to fetch components list.${colors.reset}`,
+        `${colors.red}Error: Failed to fetch components list.${colors.reset}`,
       );
       console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
       process.exit(1);
@@ -170,81 +259,123 @@ async function main() {
 
   if (cleanArgs[0] !== "add") {
     console.log(
-      `${colors.red}Error: Unknown command "${cleanArgs[0]}". Did you mean "add" or "list"?${colors.reset}`,
+      `${colors.red}Error: Unknown command "${cleanArgs[0]}". Did you mean "add", "list" or "init"?${colors.reset}`,
     );
     console.log(helpText);
     process.exit(1);
   }
 
-  const componentSlug = cleanArgs[1];
+  let componentSlug = cleanArgs[1];
   if (!componentSlug) {
+    console.log(`${colors.cyan}Fetching registry...${colors.reset}`);
+    const domain =
+      process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
+    const listUrl = `${domain}/api/registry/list`;
+    let listData;
+    try {
+      listData = await fetchJson(listUrl);
+    } catch (err) {
+      console.error(
+        `${colors.red}Error: Failed to fetch components list.${colors.reset}`,
+      );
+      console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
+      process.exit(1);
+    }
+
     console.log(
-      `${colors.red}Error: Please specify a component slug to add.${colors.reset}`,
+      `${colors.bold}${colors.green}Select a component to install:${colors.reset}\n`,
     );
-    console.log(
-      colors.gray +
-        "Example: npx tweenlabs add 11-magnetic-dock" +
-        colors.reset,
+    const components = listData.components;
+    const maxIndexLen = String(components.length + 1).length;
+    const maxSlugLen = Math.max(
+      ...components.map((c) => (c.cleanSlug || c.slug).length),
+      10,
     );
-    process.exit(1);
-  }
 
-  console.log(
-    `\n${colors.cyan}🔍 Fetching ${colors.bold}${componentSlug}${colors.reset}${colors.cyan} registry data...${colors.reset}`,
-  );
+    // Print "All Components" option first
+    const allIndexStr = "[1]".padStart(maxIndexLen + 2, " ");
+    const allSlugStr = ".".padEnd(maxSlugLen + 4, " ");
+    console.log(
+      `  ${colors.bold}${colors.cyan}${allIndexStr}${colors.reset}  ${colors.cyan}${allSlugStr}${colors.reset}${colors.gray}All Components${colors.reset}`,
+    );
 
-  // Determine registry domain (allow local testing via env variable)
-  const domain = process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
-  const url = `${domain}/api/registry/${componentSlug}`;
+    for (let i = 0; i < components.length; i++) {
+      const indexStr = `[${i + 2}]`.padStart(maxIndexLen + 2, " ");
+      const slugStr = (components[i].cleanSlug || components[i].slug).padEnd(
+        maxSlugLen + 4,
+        " ",
+      );
+      console.log(
+        `  ${colors.bold}${colors.cyan}${indexStr}${colors.reset}  ${colors.cyan}${slugStr}${colors.reset}${colors.gray}${components[i].name}${colors.reset}`,
+      );
+    }
+    console.log("");
 
-  let componentData;
-  try {
-    componentData = await fetchJson(url);
-  } catch (err) {
-    console.error(
-      `\n${colors.red}❌ Failed to fetch component. Make sure the slug is correct and the server is running.${colors.reset}`,
+    const choiceStr = await askQuestion(
+      `? Enter the number of the component to add (1-${components.length + 1}): `,
     );
-    console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
-    process.exit(1);
-  }
+    const choice = parseInt(choiceStr, 10);
+    if (Number.isNaN(choice) || choice < 1 || choice > components.length + 1) {
+      console.log(`${colors.red}Error: Invalid choice. Exiting.${colors.reset}`);
+      process.exit(1);
+    }
 
-  console.log(
-    `${colors.green}✓ Component found: ${colors.bold}${componentData.className}${colors.reset}`,
-  );
+    if (choice === 1) {
+      componentSlug = ".";
+    } else {
+      componentSlug =
+        components[choice - 2].cleanSlug || components[choice - 2].slug;
+    }
+  }
 
   // Resolve target directory
   let targetDir = "";
   if (customPath) {
     targetDir = path.resolve(process.cwd(), customPath);
   } else {
-    // 1. Try to read components.json (shadcn configuration)
-    const componentsJsonPath = path.join(process.cwd(), "components.json");
-    if (fs.existsSync(componentsJsonPath)) {
+    // 1. Try to read tweenlabs.config.json (our config)
+    const tweenlabsConfigPath = path.join(process.cwd(), "tweenlabs.config.json");
+    if (fs.existsSync(tweenlabsConfigPath)) {
       try {
-        const config = JSON.parse(fs.readFileSync(componentsJsonPath, "utf-8"));
-        const compAlias = config.aliases?.components;
-        if (compAlias) {
-          const cleanAlias = compAlias.replace(/^[@~]\//, "");
-          if (
-            fs.existsSync(path.join(process.cwd(), "src")) &&
-            !cleanAlias.startsWith("src/")
-          ) {
-            targetDir = path.join(
-              process.cwd(),
-              "src",
-              cleanAlias,
-              "tweenlabs",
-            );
-          } else {
-            targetDir = path.join(process.cwd(), cleanAlias, "tweenlabs");
-          }
+        const config = JSON.parse(fs.readFileSync(tweenlabsConfigPath, "utf-8"));
+        if (config.path) {
+          targetDir = path.resolve(process.cwd(), config.path);
         }
       } catch (_err) {
         // Ignore JSON parse errors
       }
     }
 
-    // 2. Fallback if targetDir is still not resolved
+    // 2. Try to read components.json (shadcn configuration) if still not resolved
+    if (!targetDir) {
+      const componentsJsonPath = path.join(process.cwd(), "components.json");
+      if (fs.existsSync(componentsJsonPath)) {
+        try {
+          const config = JSON.parse(fs.readFileSync(componentsJsonPath, "utf-8"));
+          const compAlias = config.aliases?.components;
+          if (compAlias) {
+            const cleanAlias = compAlias.replace(/^[@~]\//, "");
+            if (
+              fs.existsSync(path.join(process.cwd(), "src")) &&
+              !cleanAlias.startsWith("src/")
+            ) {
+              targetDir = path.join(
+                process.cwd(),
+                "src",
+                cleanAlias,
+                "tweenlabs",
+              );
+            } else {
+              targetDir = path.join(process.cwd(), cleanAlias, "tweenlabs");
+            }
+          }
+        } catch (_err) {
+          // Ignore JSON parse errors
+        }
+      }
+    }
+
+    // 3. Fallback if targetDir is still not resolved
     if (!targetDir) {
       if (fs.existsSync(path.join(process.cwd(), "src"))) {
         targetDir = path.join(process.cwd(), "src", "components", "tweenlabs");
@@ -255,29 +386,111 @@ async function main() {
   }
 
   console.log(
-    `📁 Target directory: ${colors.bold}${path.relative(process.cwd(), targetDir)}${colors.reset}`,
+    `Target directory: ${colors.bold}${path.relative(process.cwd(), targetDir)}${colors.reset}`,
   );
 
-  // Check if any files already exist
-  let hasExistingFiles = false;
-  for (const file of componentData.files) {
-    const filePath = path.join(targetDir, file.name);
-    if (fs.existsSync(filePath)) {
-      hasExistingFiles = true;
-      break;
+  const domain = process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
+  let slugsToInstall = [];
+  if (componentSlug === "." || componentSlug === "all") {
+    console.log(
+      `${colors.cyan}Fetching all components list...${colors.reset}`,
+    );
+    const listUrl = `${domain}/api/registry/list`;
+    try {
+      const listData = await fetchJson(listUrl);
+      slugsToInstall = listData.components.map((c) => c.cleanSlug || c.slug);
+    } catch (err) {
+      console.error(
+        `${colors.red}Error: Failed to fetch components list.${colors.reset}`,
+      );
+      console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
+      process.exit(1);
     }
+  } else {
+    slugsToInstall = [componentSlug];
   }
 
-  if (hasExistingFiles && !isOverwrite && !isYes) {
+  // Gather files and check conflicts
+  const filesToWrite = [];
+  const conflicts = [];
+  const allRequiredDeps = new Set();
+
+  for (const slug of slugsToInstall) {
+    console.log(
+      `${colors.cyan}Fetching ${colors.bold}${slug}${colors.reset}${colors.cyan} registry data...${colors.reset}`,
+    );
+    const url = `${domain}/api/registry/${slug}`;
+    try {
+      const componentData = await fetchJson(url);
+      for (const file of componentData.files) {
+        const filePath = path.join(targetDir, file.name);
+        if (fs.existsSync(filePath)) {
+          conflicts.push(path.relative(process.cwd(), filePath));
+        }
+        filesToWrite.push({ path: filePath, content: file.content });
+      }
+      const dependencies = componentData.dependencies || [];
+      for (const dep of dependencies) {
+        allRequiredDeps.add(dep);
+      }
+    } catch (_err) {
+      console.error(
+        `${colors.red}Error: Failed to fetch component "${slug}". Skipping.${colors.reset}`,
+      );
+      // Fetch registry list to suggest closest matches
+      let suggestions = [];
+      try {
+        const listData = await fetchJson(`${domain}/api/registry/list`);
+        const validSlugs = listData.components.map((c) => c.cleanSlug || c.slug);
+        
+        // Find slugs with low Levenshtein distance
+        const matches = validSlugs.map((validSlug) => {
+          return {
+            slug: validSlug,
+            distance: getLevenshteinDistance(slug, validSlug)
+          };
+        });
+        
+        // Sort by distance ascending
+        matches.sort((a, b) => a.distance - b.distance);
+        
+        // Threshold: distance <= 3 or distance <= half of query length
+        suggestions = matches
+          .filter((m) => m.distance <= 3 || m.distance <= Math.round(slug.length / 2))
+          .map((m) => m.slug);
+      } catch (_e) {
+        // If list fetch fails, we just don't show suggestions
+      }
+
+      if (suggestions.length > 0) {
+        console.error(
+          `${colors.yellow}Did you mean: ${suggestions.map(s => `${colors.bold}${s}${colors.reset}`).join(", ")}?${colors.reset}\n`
+        );
+      }
+    }
+  }
+
+  if (filesToWrite.length === 0) {
+    console.log(`${colors.red}Error: No files to install. Exiting.${colors.reset}`);
+    process.exit(1);
+  }
+
+  if (conflicts.length > 0 && !isOverwrite && !isYes) {
+    console.log(
+      `\n${colors.yellow}! The following files already exist:${colors.reset}`,
+    );
+    for (const conflict of conflicts) {
+      console.log(`  → ${conflict}`);
+    }
     const overwriteConfirm = await askQuestion(
-      `⚠️ Component files already exist in ${colors.bold}${path.relative(process.cwd(), targetDir)}${colors.reset}. Overwrite? (y/n) ${colors.gray}[y]${colors.reset}: `,
+      `\nOverwrite these files? (y/n) ${colors.gray}[y]${colors.reset}: `,
     );
     if (
       overwriteConfirm &&
       overwriteConfirm.toLowerCase() !== "y" &&
       overwriteConfirm.toLowerCase() !== "yes"
     ) {
-      console.log(`${colors.yellow}Installation cancelled.${colors.reset}`);
+      console.log(`${colors.yellow}! Installation cancelled.${colors.reset}`);
       process.exit(0);
     }
   }
@@ -288,19 +501,17 @@ async function main() {
   }
 
   // Write component files
-  console.log(`\n${colors.cyan}💾 Writing component files...${colors.reset}`);
-  for (const file of componentData.files) {
-    const filePath = path.join(targetDir, file.name);
-    fs.writeFileSync(filePath, file.content, "utf-8");
+  console.log(`\n${colors.bold}Writing component files...${colors.reset}`);
+  for (const file of filesToWrite) {
+    fs.writeFileSync(file.path, file.content, "utf-8");
     console.log(
-      `${colors.green}  → Created: ${colors.bold}${path.relative(process.cwd(), filePath)}${colors.reset}`,
+      `  ${colors.green}✔${colors.reset} Created ${colors.bold}${path.relative(process.cwd(), file.path)}${colors.reset}`,
     );
   }
 
   // Check and install dependencies
-  const dependencies = componentData.dependencies || [];
+  const dependencies = Array.from(allRequiredDeps);
   if (dependencies.length > 0) {
-    // Read package.json to see if dependencies are already installed
     let pkgJson = {};
     try {
       pkgJson = JSON.parse(
@@ -316,8 +527,12 @@ async function main() {
     if (missingDeps.length > 0) {
       const pm = detectPackageManager();
       console.log(
-        `\n${colors.cyan}📦 Installing missing dependencies: ${colors.bold}${missingDeps.join(", ")}${colors.reset} using ${pm}...`,
+        `\n${colors.bold}Installing missing dependencies using ${pm}...${colors.reset}`,
       );
+      for (const dep of missingDeps) {
+        console.log(`  → ${dep}`);
+      }
+      console.log("");
 
       let installCmd = "";
       if (pm === "pnpm") installCmd = `pnpm add ${missingDeps.join(" ")}`;
@@ -328,26 +543,24 @@ async function main() {
       try {
         execSync(installCmd, { stdio: "inherit" });
         console.log(
-          `${colors.green}✓ Dependencies installed successfully!${colors.reset}`,
+          `\n${colors.green}✔ Dependencies installed successfully!${colors.reset}`,
         );
       } catch (_err) {
         console.error(
-          `${colors.red}❌ Failed to install dependencies. Please run "${installCmd}" manually.${colors.reset}`,
+          `\n${colors.red}Error: Failed to install dependencies. Please run "${installCmd}" manually.${colors.reset}`,
         );
       }
     } else {
       console.log(
-        `\n${colors.green}✓ All dependencies (${dependencies.join(", ")}) already installed.${colors.reset}`,
+        `\n${colors.green}✔ All dependencies (${dependencies.join(", ")}) already installed.${colors.reset}`,
       );
     }
   }
 
   console.log(
-    `\n${colors.green}${colors.bold}🎉 Installation complete!${colors.reset}`,
-  );
-  console.log(
-    `You can now import and use the ${colors.bold}${componentData.className}${colors.reset} component in your project.\n`,
+    `\n${colors.bold}${colors.green}✔ Done! All requested components installed successfully.${colors.reset}`,
   );
+  console.log(`You can now import and use them in your project.\n`);
 }
 
 main().catch((err) => {

package/package.json

@@ -1,60 +1,62 @@
-{
-  "name": "tweenlabs",
-  "version": "0.1.3",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/TweenLabs/TweenLabs.git"
-  },
-  "homepage": "https://tweenlabs.xyz",
-  "bugs": {
-    "url": "https://github.com/TweenLabs/TweenLabs/issues"
-  },
-  "bin": {
-    "tweenlabs": "bin/cli.js"
-  },
-  "files": [
-    "bin",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "dev": "next dev",
-    "build": "node scripts/generate-llms-full.js && next build",
-    "vercel-build": "convex deploy --cmd \"node scripts/generate-llms-full.js && next build\"",
-    "start": "next start",
-    "lint": "eslint"
-  },
-  "dependencies": {
-    "@convex-dev/better-auth": "^0.12.4",
-    "@gsap/react": "^2.1.2",
-    "better-auth": "^1.6.19",
-    "convex": "^1.41.0",
-    "gsap": "^3.15.0",
-    "lenis": "^1.3.23",
-    "next": "16.2.7",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.7",
-    "sharp": "^0.35.1",
-    "tailwindcss": "^4",
-    "typescript": "^5"
-  },
-  "pnpm": {
-    "ignoredBuiltDependencies": [
-      "sharp",
-      "unrs-resolver"
-    ],
-    "overrides": {
-      "postcss": "^8.5.10"
-    }
-  }
-}
+{
+  "name": "tweenlabs",
+  "version": "0.1.6",
+  "description": "Zero-dependency CLI to install premium GSAP animation components directly into your Next.js or React project.",
+  "keywords": ["gsap", "animation", "nextjs", "react", "components", "cli", "tweenlabs", "scrolltrigger", "lenis"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TweenLabs/TweenLabs.git"
+  },
+  "homepage": "https://tweenlabs.xyz",
+  "bugs": {
+    "url": "https://github.com/TweenLabs/TweenLabs/issues"
+  },
+  "bin": {
+    "tweenlabs": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "node scripts/generate-llms-full.js && next build",
+    "vercel-build": "convex deploy --cmd \"node scripts/generate-llms-full.js && next build\"",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@convex-dev/better-auth": "^0.12.4",
+    "@gsap/react": "^2.1.2",
+    "better-auth": "^1.6.19",
+    "convex": "^1.41.0",
+    "gsap": "^3.15.0",
+    "lenis": "^1.3.23",
+    "next": "16.2.7",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.7",
+    "sharp": "^0.35.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "pnpm": {
+    "ignoredBuiltDependencies": [
+      "sharp",
+      "unrs-resolver"
+    ],
+    "overrides": {
+      "postcss": "^8.5.10"
+    }
+  }
+}