cooterlabs 1.0.1 → 2.0.0

package/bin/index.js

@@ -14,6 +14,116 @@ const __dirname = path.dirname(__filename);
 const cwd = process.cwd();
 
 const REGISTRY = {
+  alert: {
+    name: "Alert",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "action-sheet": {
+    name: "ActionSheet",
+    dependencies: ["@radix-ui/react-dialog", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  breadcrumb: {
+    name: "Breadcrumb",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "button-group": {
+    name: "ButtonGroup",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "context-menu": {
+    name: "ContextMenu",
+    dependencies: [
+      "@radix-ui/react-context-menu",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
+    dev_dependencies: [],
+  },
+  dialog: {
+    name: "Dialog",
+    dependencies: [
+      "@radix-ui/react-dialog",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
+    dev_dependencies: [],
+  },
+  dropdown: {
+    name: "Dropdown",
+    dependencies: [
+      "@radix-ui/react-dropdown-menu",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
+    dev_dependencies: [],
+  },
+  list: {
+    name: "List",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  loader: {
+    name: "Loader",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "navbar-bottom": {
+    name: "NavbarBottom",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "navbar-top": {
+    name: "NavbarTop",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "page-control": {
+    name: "PageControl",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  pagination: {
+    name: "Pagination",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  progress: {
+    name: "Progress",
+    dependencies: ["@radix-ui/react-progress", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  radio: {
+    name: "Radio",
+    dependencies: ["@radix-ui/react-radio-group", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  stepper: {
+    name: "Stepper",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  tabs: {
+    name: "Tabs",
+    dependencies: ["@radix-ui/react-tabs", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  toggle: {
+    name: "Toggle",
+    dependencies: ["@radix-ui/react-switch", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  tooltip: {
+    name: "Tooltip",
+    dependencies: ["@radix-ui/react-tooltip", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
   button: {
     name: "Button",
     dependencies: [
@@ -57,15 +167,237 @@ const REGISTRY = {
   checkbox: {
     name: "Checkbox",
     dependencies: [
+      "@radix-ui/react-checkbox",
       "lucide-react",
       "clsx",
       "tailwind-merge",
-      "@radix-ui/react-checkbox",
     ],
     dev_dependencies: [],
   },
 };
 
+const THEMES = {
+  aeon: `@theme static {
+  /* ——— Aeon Product Design System ——— */
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+
+  /* Semantic colors */
+  --color-background: #ffffff;
+  --color-foreground: #1c222a;
+  --color-card: #ffffff;
+  --color-card-foreground: #1c222a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1c222a;
+  --color-primary: #0d3435;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f4f5f6;
+  --color-secondary-foreground: #1c222a;
+  --color-muted: #e7e9ec;
+  --color-muted-foreground: #475569;
+  --color-accent: #f1f3f3;
+  --color-accent-foreground: #0a2b2b;
+  --color-destructive: #821717;
+  --color-destructive-foreground: #ffffff;
+  --color-border: #cbcfd5;
+  --color-input: #cbcfd5;
+  --color-ring: #0d3435;
+  --color-success: #14532d;
+  --color-success-foreground: #ffffff;
+  --color-info: #075985;
+  --color-info-foreground: #ffffff;
+  --color-warning: #713f12;
+  --color-warning-foreground: #ffffff;
+  --color-error: #991b1b;
+  --color-error-foreground: #ffffff;
+
+  /* Primitive scales */
+  --color-primary-50: #f1f3f3;
+  --color-primary-100: #e0e6e6;
+  --color-primary-200: #bcc9c9;
+  --color-primary-300: #93a8a8;
+  --color-primary-400: #577778;
+  --color-primary-500: #0f3d3e;
+  --color-primary-600: #0d3435;
+  --color-primary-700: #0a2b2b;
+  --color-primary-800: #082222;
+  --color-primary-900: #061819;
+  --color-grey-50: #f4f5f6;
+  --color-grey-100: #e7e9ec;
+  --color-grey-200: #cbcfd5;
+  --color-grey-300: #acb2bc;
+  --color-grey-400: #7e8896;
+  --color-grey-500: #475569;
+  --color-grey-600: #3c4859;
+  --color-grey-700: #323c4a;
+  --color-grey-800: #272f3a;
+  --color-grey-900: #1c222a;
+  --color-success-50: #f1f5f2;
+  --color-success-100: #e0e9e4;
+  --color-success-200: #bdcfc4;
+  --color-success-300: #95b2a0;
+  --color-success-400: #5a876c;
+  --color-success-500: #14532d;
+  --color-success-600: #114726;
+  --color-success-700: #0e3a20;
+  --color-success-800: #0b2e19;
+  --color-success-900: #082112;
+  --color-error-50: #f9f1f1;
+  --color-error-100: #f2e1e1;
+  --color-error-200: #e2bfbf;
+  --color-error-300: #d19898;
+  --color-error-400: #b85f5f;
+  --color-error-500: #991b1b;
+  --color-error-600: #821717;
+  --color-error-700: #6b1313;
+  --color-error-800: #540f0f;
+  --color-error-900: #3d0b0b;
+  --color-warning-50: #f6f3f1;
+  --color-warning-100: #ede6e0;
+  --color-warning-200: #d7c9bd;
+  --color-warning-300: #bfa994;
+  --color-warning-400: #9c7959;
+  --color-warning-500: #713f12;
+  --color-warning-600: #60360f;
+  --color-warning-700: #4f2c0d;
+  --color-warning-800: #3e230a;
+  --color-warning-900: #2d1907;
+  --color-info-50: #f0f5f8;
+  --color-info-100: #dfe9ef;
+  --color-info-200: #bad1dd;
+  --color-info-300: #8fb4c8;
+  --color-info-400: #518baa;
+  --color-info-500: #075985;
+  --color-info-600: #064c71;
+  --color-info-700: #053e5d;
+  --color-info-800: #04314a;
+  --color-info-900: #032435;
+
+  /* Typography — Aeon text ramp (text-h1 … text-c3, text-label, text-btn-*) */
+  --text-h1: 3rem;
+  --text-h1--line-height: 3.625rem;
+  --text-h1--font-weight: 600;
+  --text-h2: 2.5rem;
+  --text-h2--line-height: 3rem;
+  --text-h2--font-weight: 600;
+  --text-h3: 2rem;
+  --text-h3--line-height: 2.375rem;
+  --text-h3--font-weight: 600;
+  --text-h4: 1.75rem;
+  --text-h4--line-height: 2.125rem;
+  --text-h4--font-weight: 600;
+  --text-h5: 1.5rem;
+  --text-h5--line-height: 1.75rem;
+  --text-h5--font-weight: 600;
+  --text-s1: 1.125rem;
+  --text-s1--line-height: 1.75rem;
+  --text-s1--font-weight: 600;
+  --text-s2: 1rem;
+  --text-s2--line-height: 1.5rem;
+  --text-s2--font-weight: 600;
+  --text-b1: 1rem;
+  --text-b1--line-height: 1.5rem;
+  --text-b1--font-weight: 400;
+  --text-b2: 1rem;
+  --text-b2--line-height: 1.5rem;
+  --text-b2--font-weight: 500;
+  --text-b3: 0.875rem;
+  --text-b3--line-height: 1.25rem;
+  --text-b3--font-weight: 400;
+  --text-b4: 0.875rem;
+  --text-b4--line-height: 1.25rem;
+  --text-b4--font-weight: 500;
+  --text-c1: 0.75rem;
+  --text-c1--line-height: 1rem;
+  --text-c1--font-weight: 400;
+  --text-c2: 0.75rem;
+  --text-c2--line-height: 1rem;
+  --text-c2--font-weight: 500;
+  --text-c3: 0.625rem;
+  --text-c3--line-height: 0.875rem;
+  --text-c3--font-weight: 500;
+  --text-label: 0.75rem;
+  --text-label--line-height: 1rem;
+  --text-label--font-weight: 500;
+  --text-btn-giant: 1.125rem;
+  --text-btn-giant--line-height: 1.5rem;
+  --text-btn-giant--font-weight: 600;
+  --text-btn-large: 1rem;
+  --text-btn-large--line-height: 1.25rem;
+  --text-btn-large--font-weight: 600;
+  --text-btn-medium: 0.875rem;
+  --text-btn-medium--line-height: 1rem;
+  --text-btn-medium--font-weight: 600;
+  --text-btn-small: 0.75rem;
+  --text-btn-small--line-height: 1rem;
+  --text-btn-small--font-weight: 600;
+  --text-btn-tiny: 0.625rem;
+  --text-btn-tiny--line-height: 0.75rem;
+  --text-btn-tiny--font-weight: 600;
+
+  /* Radius scale — rounded-xxs … rounded-xl */
+  --radius-xxs: 0.25rem;
+  --radius-xs: 0.5rem;
+  --radius-sm: 0.75rem;
+  --radius-md: 1rem;
+  --radius-lg: 1.25rem;
+  --radius-xl: 1.5rem;
+
+  /* Elevation — shadow-100 … shadow-800 */
+  --shadow-100: 0 4px 4px -2px #13192714, 0 2px 4px -2px #1319271f;
+  --shadow-200: 0 8px 8px -4px #13192714, 0 4px 6px -4px #1319271f;
+  --shadow-300: 0 8px 16px -6px #13192714, 0 6px 8px -6px #1319271f;
+  --shadow-400: 0 8px 24px -4px #13192714, 0 6px 12px -6px #1319271f;
+  --shadow-500: 0 10px 32px -4px #1319271a, 0 6px 14px -6px #1319271f;
+  --shadow-600: 0 12px 42px -4px #1319271f, 0 8px 18px -6px #1319271f;
+  --shadow-700: 0 14px 64px -4px #1319271f, 0 8px 22px -6px #1319271f;
+  --shadow-800: 0 18px 88px -4px #13192724, 0 8px 28px -6px #1319271f;
+}`,
+  zinc: `:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 10% 3.9%;
+  --radius: 0.5rem;
+}`,
+  slate: `:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}`,
+};
+
 const templatesDir = path.join(__dirname, "../templates");
 
 const detectEnvironment = () => {
@@ -164,13 +496,20 @@ const main = async () => {
   }
 
   const args = process.argv.slice(2);
-  let command = args[0];
-  let componentName = args[1];
-
-  if (!command || command !== "add") {
-    // If command isn't provided or is entirely missing, treat the first arg as the component name
-    command = "add";
-    componentName = args[0] || "";
+  const isAll = args.includes("--all");
+  let command = "add";
+  let componentName = "";
+
+  // Parse command & componentName from args (ignoring flags)
+  const positionalArgs = args.filter((a) => !a.startsWith("--"));
+  if (positionalArgs.length > 0) {
+    if (positionalArgs[0] === "init" || positionalArgs[0] === "add") {
+      command = positionalArgs[0];
+      componentName = positionalArgs[1] || "";
+    } else {
+      command = "add";
+      componentName = positionalArgs[0];
+    }
   }
 
   let availableComponents = Object.keys(REGISTRY);
@@ -181,102 +520,198 @@ const main = async () => {
     if (dirs.length > 0) availableComponents = dirs;
   }
 
-  if (command === "add") {
-    if (!componentName) {
+  if (command === "init") {
+    let theme = componentName; // support `cooterlabs init aeon`
+    if (!THEMES[theme]) {
       const response = await prompts({
         type: "select",
-        name: "component",
-        message: "Which component would you like to add?",
+        name: "theme",
+        message: "Which theme would you like to use?",
+        choices: Object.keys(THEMES).map((t) => ({
+          title: t === "aeon" ? "aeon (default)" : t,
+          value: t,
+        })),
+      });
+
+      if (!response.theme) {
+        console.log(chalk.red("❌ Theme selection cancelled."));
+        process.exit(1);
+      }
+      theme = response.theme;
+    }
+
+    // aeon is a Tailwind v4 @theme block appended at top level;
+    // legacy themes are :root vars wrapped in @layer base.
+    const isV4Theme = theme === "aeon";
+    const themeCSS = THEMES[theme];
+    let cssPath = path.join(cwd, "src", "index.css");
+
+    if (env.framework === "next") {
+      if (env.isAppDir) {
+        cssPath = fs.existsSync(path.join(cwd, "src", "app"))
+          ? path.join(cwd, "src", "app", "globals.css")
+          : path.join(cwd, "app", "globals.css");
+      } else {
+        cssPath = fs.existsSync(path.join(cwd, "src", "styles", "globals.css"))
+          ? path.join(cwd, "src", "styles", "globals.css")
+          : path.join(cwd, "styles", "globals.css");
+      }
+    } else {
+      cssPath = fs.existsSync(path.join(cwd, "src", "index.css"))
+        ? path.join(cwd, "src", "index.css")
+        : path.join(cwd, "src", "globals.css");
+    }
+
+    // Ensure dir exists
+    const cssDir = path.dirname(cssPath);
+    if (!fs.existsSync(cssDir)) {
+      fs.mkdirSync(cssDir, { recursive: true });
+    }
+
+    let cssContent = "";
+    if (fs.existsSync(cssPath)) {
+      cssContent = fs.readFileSync(cssPath, "utf-8");
+    }
+
+    const hasTailwindDirectives =
+      cssContent.includes("@tailwind base") ||
+      cssContent.includes('@import "tailwindcss');
+    if (!hasTailwindDirectives) {
+      cssContent = isV4Theme
+        ? `@import "tailwindcss";\n\n${cssContent}`
+        : `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n${cssContent}`;
+    }
+
+    const themeBlock = isV4Theme
+      ? `\n${themeCSS}\n`
+      : `\n@layer base {\n${themeCSS}\n}\n`;
+
+    const hasExistingVars = isV4Theme
+      ? cssContent.includes("@theme")
+      : cssContent.includes(":root {") || cssContent.includes("--background:");
+
+    if (hasExistingVars) {
+      console.log(
+        chalk.yellow(
+          `⚠️  Theme variables may already exist in ${cssPath}. Please append them manually if needed:\n${themeBlock}`,
+        ),
+      );
+    } else {
+      cssContent = `${cssContent}${themeBlock}`;
+      fs.writeFileSync(cssPath, cssContent);
+      console.log(chalk.green(`✅ Theme '${theme}' initialized in ${cssPath}`));
+    }
+  } else if (command === "add") {
+    let componentsToAdd = [];
+
+    if (isAll) {
+      componentsToAdd = availableComponents;
+    } else if (componentName) {
+      componentsToAdd = [componentName];
+    } else {
+      const response = await prompts({
+        type: "autocompleteMultiselect",
+        name: "components",
+        message:
+          "Which components would you like to add? (Space to select, Enter to submit, or use --all flag)",
         choices: availableComponents.map((c) => ({ title: c, value: c })),
       });
-      componentName = response.component;
+      componentsToAdd = response.components || [];
     }
 
-    if (!componentName) {
-      console.log(chalk.red("❌ Operation cancelled."));
+    if (componentsToAdd.length === 0) {
+      console.log(chalk.red("❌ No components selected. Operation cancelled."));
       process.exit(1);
     }
 
-    if (!availableComponents.includes(componentName)) {
-      console.log(chalk.red(`❌ Component '${componentName}' not found.`));
+    // Check availability
+    const notFound = componentsToAdd.filter(
+      (c) => !availableComponents.includes(c),
+    );
+    if (notFound.length > 0) {
+      console.log(chalk.red(`❌ Components not found: ${notFound.join(", ")}`));
       process.exit(1);
     }
 
-    const templatePath = path.join(templatesDir, componentName);
-
     // Create target dir
     const targetDir = path.join(cwd, env.componentsDir);
     if (!fs.existsSync(targetDir)) {
       fs.mkdirSync(targetDir, { recursive: true });
     }
 
-    // Determine target path
-    const extension = env.typescript ? ".tsx" : ".jsx";
-    const componentFile = `${componentName}${extension}`;
-    const targetPath = path.join(targetDir, componentFile);
-
-    const spinner = ora(`Installing ${componentName}...`).start();
-
-    try {
-      let sourceContent = "";
-      if (fs.existsSync(templatePath)) {
-        const files = fs.readdirSync(templatePath);
-        const srcFile = files.find(
-          (f) => f.endsWith(".tsx") || f.endsWith(".jsx"),
-        );
-        if (srcFile) {
-          sourceContent = fs.readFileSync(
-            path.join(templatePath, srcFile),
-            "utf-8",
+    let allDependencies = new Set();
+
+    for (const comp of componentsToAdd) {
+      const templatePath = path.join(templatesDir, comp);
+      const extension = env.typescript ? ".tsx" : ".jsx";
+      const componentFile = `${comp}${extension}`;
+      const targetPath = path.join(targetDir, componentFile);
+
+      const spinner = ora(`Installing ${comp}...`).start();
+
+      try {
+        let sourceContent = "";
+        if (fs.existsSync(templatePath)) {
+          const files = fs.readdirSync(templatePath);
+          const srcFile = files.find(
+            (f) => f.endsWith(".tsx") || f.endsWith(".jsx"),
           );
+          if (srcFile) {
+            sourceContent = fs.readFileSync(
+              path.join(templatePath, srcFile),
+              "utf-8",
+            );
+          } else if (files.length > 0) {
+            sourceContent = fs.readFileSync(
+              path.join(templatePath, files[0]),
+              "utf-8",
+            );
+          }
         } else {
-          sourceContent = fs.readFileSync(
-            path.join(templatePath, files[0]),
-            "utf-8",
+          sourceContent = `import React from 'react';\n\nexport const ${REGISTRY[comp]?.name || "Component"} = () => { return <div>${comp}</div>; };\n`;
+        }
+
+        // Format code
+        let formattedContent = sourceContent;
+        try {
+          formattedContent = await formatFile(sourceContent, targetPath);
+        } catch (err) {
+          console.log(
+            chalk.yellow(
+              `\n⚠️  Formatting failed for ${comp}. Using original formatting.`,
+            ),
           );
         }
-      } else {
-        // Fallback or generic content simply to show it works
-        sourceContent = `import React from 'react';\n\nexport const ${REGISTRY[componentName]?.name || "Component"} = () => { return <div>${componentName}</div>; };\n`;
-      }
 
-      // Hacky TS -> JS stripping if they don't use TypeScript
-      if (!env.typescript) {
-        // Simple type stripping if needed, but omitted for stability.
-        // It's recommended to publish compiled JS if targeting non-TS,
-        // or let the user fix up the .jsx file.
-      }
+        fs.writeFileSync(targetPath, formattedContent, "utf-8");
+        spinner.succeed(`Created ${componentFile} in ${env.componentsDir}`);
 
-      // Format code
-      let formattedContent = sourceContent;
-      try {
-        formattedContent = await formatFile(sourceContent, targetPath);
+        // Track dependencies
+        const registryEntry = REGISTRY[comp];
+        if (registryEntry && registryEntry.dependencies) {
+          registryEntry.dependencies.forEach((d) => allDependencies.add(d));
+        }
       } catch (err) {
-        console.log(
-          chalk.yellow("⚠️  Formatting failed. Using original formatting."),
-        );
+        spinner.fail(`Failed to add ${comp}`);
+        console.error(chalk.red(err.message));
       }
+    }
 
-      // Write file
-      fs.writeFileSync(targetPath, formattedContent, "utf-8");
-
-      spinner.succeed(`Created ${componentFile} in ${env.componentsDir}`);
-
-      // Install dependencies
-      const registryEntry = REGISTRY[componentName];
-      if (registryEntry && registryEntry.dependencies?.length > 0) {
-        const depSpinner = ora(
-          `Installing dependencies: ${registryEntry.dependencies.join(", ")}...`,
-        ).start();
-        installDependencies(registryEntry.dependencies, env.pkgCommand);
-        depSpinner.succeed(`Installed dependencies.`);
+    if (allDependencies.size > 0) {
+      const depsArray = Array.from(allDependencies);
+      const depSpinner = ora(
+        `Installing collective dependencies: ${depsArray.join(", ")}...`,
+      ).start();
+      try {
+        installDependencies(depsArray, env.pkgCommand);
+        depSpinner.succeed(`Dependencies installed successfully.`);
+      } catch (err) {
+        depSpinner.fail(`Failed to install dependencies.`);
+        console.error(chalk.red(err.message));
       }
-
-      console.log(chalk.green(`\n✅ ${componentName} added successfully!`));
-    } catch (err) {
-      spinner.fail(`Failed to add ${componentName}`);
-      console.error(chalk.red(err.message));
     }
+
+    console.log(chalk.green(`\n✅ Finished adding components!`));
   } else {
     console.log(chalk.red(`❌ Unknown command: ${command}`));
   }

package/package.json

@@ -1,19 +1,24 @@
 {
   "name": "cooterlabs",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Component library CLI for CooterLabs apps",
   "files": [
     "bin",
     "templates"
   ],
-  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "bin": {
-    "cooterlabs": "./bin/index.js"
+    "cooterlabs": "bin/index.js"
   },
-  "keywords": [],
+  "keywords": [
+    "aeon",
+    "react",
+    "typescript",
+    "cli",
+    "component-library"
+  ],
   "author": "",
   "license": "ISC",
   "type": "module",
@@ -25,5 +30,8 @@
     "prettier": "^3.8.1",
     "prompts": "^2.4.2",
     "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14"
   }
 }