@hypoth-ui/cli 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 hypoth-org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,153 +1,57 @@
 # @hypoth-ui/cli
 
-CLI tool for adding hypoth-ui components to your project.
+![Alpha](https://img.shields.io/badge/status-alpha-orange)
 
-## Installation
-
-```bash
-npx @hypoth-ui/cli init
-```
+CLI tool for scaffolding and managing hypoth-ui components in your project. Initialize configuration, browse available components, and add them with a single command.
 
-Or install globally:
+## Installation
 
 ```bash
 npm install -g @hypoth-ui/cli
 ```
 
-## Quick Start
-
-1. Initialize hypoth-ui in your project:
+Or use directly with `npx`:
 
 ```bash
 npx @hypoth-ui/cli init
 ```
 
-2. Add components:
-
-```bash
-npx @hypoth-ui/cli add button
-npx @hypoth-ui/cli add dialog menu
-```
-
-3. List available components:
-
-```bash
-npx @hypoth-ui/cli list
-```
-
-## Commands
-
-### `init`
-
-Initialize hypoth-ui in your project. Creates `ds.config.json` and installs core dependencies.
-
-```bash
-npx @hypoth-ui/cli init [options]
-```
-
-Options:
-- `-s, --style <style>` - Installation style: `copy` (source files) or `package` (npm packages)
-- `-f, --framework <framework>` - Framework: `react`, `next`, `wc`, or `vanilla`
-- `-y, --yes` - Skip prompts and use defaults
-
-### `add`
-
-Add components to your project.
-
-```bash
-npx @hypoth-ui/cli add <components...> [options]
-```
-
-Options:
-- `-o, --overwrite` - Overwrite existing components
-- `-a, --all` - Add all available components
-
-Examples:
-```bash
-npx @hypoth-ui/cli add button          # Add single component
-npx @hypoth-ui/cli add button dialog   # Add multiple components
-npx @hypoth-ui/cli add --all           # Add all components
-npx @hypoth-ui/cli add button -o       # Overwrite existing
-```
-
-### `list`
+## Usage
 
-List all available components.
+### Initialize a Project
 
 ```bash
-npx @hypoth-ui/cli list [options]
+npx @hypoth-ui/cli init
 ```
 
-Options:
-- `-j, --json` - Output as JSON
-
-### `diff`
+Creates a `ds.config.json` with your project settings (framework, package manager, paths).
 
-Check for component updates.
+### Add Components
 
 ```bash
-npx @hypoth-ui/cli diff [options]
+npx @hypoth-ui/cli add button dialog
 ```
 
-Options:
-- `-j, --json` - Output as JSON
-
-## Installation Modes
+Installs the component packages and any required dependencies.
 
-### Package Mode (Recommended)
-
-Components are installed as npm packages. Easier to update, tree-shakeable.
+### Copy Component Source
 
 ```bash
-npx @hypoth-ui/cli init --style package
+npx @hypoth-ui/cli add button --copy
 ```
 
-### Copy Mode
+Copies the component source files into your project instead of installing a package.
 
-Component source files are copied to your project. Full customization, you own the code.
+### List Available Components
 
 ```bash
-npx @hypoth-ui/cli init --style copy
-```
-
-## Configuration
-
-Configuration is stored in `ds.config.json`:
-
-```json
-{
-  "$schema": "https://hypoth-ui.dev/schema/ds.config.json",
-  "style": "package",
-  "framework": "next",
-  "typescript": true,
-  "packageManager": "pnpm",
-  "paths": {
-    "components": "src/components/ui",
-    "utils": "src/lib"
-  },
-  "aliases": {
-    "components": "@/components/ui",
-    "lib": "@/lib"
-  },
-  "components": []
-}
+npx @hypoth-ui/cli list
+npx @hypoth-ui/cli list --installed
 ```
 
-## Supported Frameworks
-
-- **React** - Standard React applications
-- **Next.js** - Next.js App Router projects
-- **Web Components** - Lit-based Web Components
-- **Vanilla** - Vanilla JS using Web Components
-
-## Supported Package Managers
-
-- npm
-- pnpm
-- yarn
-- bun
+## Documentation
 
-The CLI automatically detects your package manager from lock files.
+See the [main README](../../README.md) for full documentation and architecture overview.
 
 ## License
 

package/dist/{add-PDBC4JTE.js → add-V5PW73GC.js}

@@ -1,6 +1,6 @@
 import {
   installPackages
-} from "./chunk-5LTQ2XVL.js";
+} from "./chunk-27CLUUVC.js";
 import {
   getComponent,
   getComponentNames,
@@ -8,13 +8,13 @@ import {
   isComponentCompatible,
   loadBundledRegistry,
   resolveDependencies
-} from "./chunk-GJ6JOQ3Q.js";
+} from "./chunk-PBK72SJJ.js";
 import {
   addInstalledComponent,
   isComponentInstalled,
   readConfig,
   writeConfig
-} from "./chunk-YPKFYE45.js";
+} from "./chunk-NWIRSZUQ.js";
 
 // src/commands/add.ts
 import * as p from "@clack/prompts";
@@ -96,14 +96,8 @@ function transformImports(content, config, fileType) {
     return content;
   }
   let result = content;
-  result = result.replace(
-    /@\/components\//g,
-    `${config.aliases.components}/`
-  );
-  result = result.replace(
-    /@\/lib\//g,
-    `${config.aliases.lib}/`
-  );
+  result = result.replace(/@\/components\//g, `${config.aliases.components}/`);
+  result = result.replace(/@\/lib\//g, `${config.aliases.lib}/`);
   return result;
 }
 function ensureComponentsDir(config, cwd = process.cwd()) {
@@ -114,7 +108,7 @@ function ensureComponentsDir(config, cwd = process.cwd()) {
 }
 
 // src/commands/add.ts
-async function addCommand(components, options = {}) {
+async function addCommand(componentArgs, options = {}) {
   p.intro(pc.bgCyan(pc.black(" hypoth-ui add ")));
   const cwd = process.cwd();
   let config;
@@ -125,8 +119,8 @@ async function addCommand(components, options = {}) {
     process.exit(1);
   }
   const registry = loadBundledRegistry();
+  const components = options.all ? getComponentNames(registry) : componentArgs;
   if (options.all) {
-    components = getComponentNames(registry);
     p.log.info(`Installing all ${components.length} components`);
   }
   if (components.length === 0) {
@@ -186,14 +180,28 @@ async function addCommand(components, options = {}) {
     spinner3.start(`Installing npm dependencies: ${npmDeps.join(", ")}`);
     try {
       await installPackages(npmDeps, config.packageManager, { cwd });
-      spinner3.stop(`Installed npm dependencies`);
+      spinner3.stop("Installed npm dependencies");
     } catch (error) {
       spinner3.stop(pc.red(`Failed to install npm dependencies: ${error.message}`));
       process.exit(1);
     }
   }
+  const useCopyMode = options.copy || config.style === "copy";
   const spinner2 = p.spinner();
-  if (config.style === "copy") {
+  if (useCopyMode) {
+    const noTemplates = finalComponents.filter((c) => c.files.length === 0);
+    if (noTemplates.length > 0) {
+      const withTemplates = finalComponents.filter((c) => c.files.length > 0);
+      p.log.error(
+        `No template files available for: ${noTemplates.map((c) => pc.yellow(c.name)).join(", ")}`
+      );
+      p.log.info(
+        `Copy mode supports: ${withTemplates.length > 0 ? withTemplates.map((c) => c.name).join(", ") : "run 'pnpm sync:templates' to generate templates"}`
+      );
+      if (withTemplates.length === 0) {
+        process.exit(1);
+      }
+    }
     ensureComponentsDir(config, cwd);
     for (const component of finalComponents) {
       spinner2.start(`Copying ${component.name}...`);
@@ -203,7 +211,11 @@ async function addCommand(components, options = {}) {
           overwrite: options.overwrite
         });
         if (result.errors.length > 0) {
-          spinner2.stop(pc.red(`Failed to copy ${component.name}: ${result.errors[0]?.error ?? "Unknown error"}`));
+          spinner2.stop(
+            pc.red(
+              `Failed to copy ${component.name}: ${result.errors[0]?.error ?? "Unknown error"}`
+            )
+          );
           continue;
         }
         config = addInstalledComponent(config, {
@@ -228,7 +240,7 @@ async function addCommand(components, options = {}) {
   writeConfig(config, cwd);
   const installed = finalComponents.map((c) => c.name);
   p.outro(pc.green(`Added ${installed.length} component(s): ${installed.join(", ")}`));
-  if (config.style === "copy") {
+  if (useCopyMode) {
     console.log("");
     console.log(`Components copied to: ${pc.dim(config.paths.components)}`);
   }

package/dist/{chunk-5LTQ2XVL.js → chunk-27CLUUVC.js}

@@ -30,7 +30,6 @@ function getInstallSubcommand(pm) {
     case "pnpm":
     case "bun":
       return "add";
-    case "npm":
     default:
       return "install";
   }
@@ -41,7 +40,6 @@ function getDevFlag(pm) {
     case "pnpm":
     case "bun":
       return "-D";
-    case "npm":
     default:
       return "--save-dev";
   }

package/dist/{chunk-YPKFYE45.js → chunk-NWIRSZUQ.js}

@@ -12,9 +12,7 @@ function getConfigPath(cwd = process.cwd()) {
 function readConfig(cwd = process.cwd()) {
   const configPath = getConfigPath(cwd);
   if (!existsSync(configPath)) {
-    throw new Error(
-      `Configuration file not found. Run 'hypoth-ui init' first.`
-    );
+    throw new Error(`Configuration file not found. Run 'hypoth-ui init' first.`);
   }
   try {
     const content = readFileSync(configPath, "utf-8");
@@ -30,7 +28,8 @@ function readConfig(cwd = process.cwd()) {
 function writeConfig(config, cwd = process.cwd()) {
   const configPath = getConfigPath(cwd);
   const content = JSON.stringify(config, null, 2);
-  writeFileSync(configPath, content + "\n", "utf-8");
+  writeFileSync(configPath, `${content}
+`, "utf-8");
 }
 function createConfig(options) {
   const config = {
@@ -60,9 +59,7 @@ function validateConfig(config) {
     throw new Error('Invalid configuration: style must be "copy" or "package"');
   }
   if (!["react", "next", "wc", "vanilla"].includes(cfg.framework)) {
-    throw new Error(
-      'Invalid configuration: framework must be "react", "next", "wc", or "vanilla"'
-    );
+    throw new Error('Invalid configuration: framework must be "react", "next", "wc", or "vanilla"');
   }
   if (typeof cfg.typescript !== "boolean") {
     throw new Error("Invalid configuration: typescript must be a boolean");
@@ -77,18 +74,14 @@ function validateConfig(config) {
   }
   const paths = cfg.paths;
   if (typeof paths.components !== "string" || typeof paths.utils !== "string") {
-    throw new Error(
-      "Invalid configuration: paths.components and paths.utils must be strings"
-    );
+    throw new Error("Invalid configuration: paths.components and paths.utils must be strings");
   }
   if (!cfg.aliases || typeof cfg.aliases !== "object") {
     throw new Error("Invalid configuration: aliases must be an object");
   }
   const aliases = cfg.aliases;
   if (typeof aliases.components !== "string" || typeof aliases.lib !== "string") {
-    throw new Error(
-      "Invalid configuration: aliases.components and aliases.lib must be strings"
-    );
+    throw new Error("Invalid configuration: aliases.components and aliases.lib must be strings");
   }
   if (!Array.isArray(cfg.components)) {
     throw new Error("Invalid configuration: components must be an array");

package/dist/{chunk-GJ6JOQ3Q.js → chunk-PBK72SJJ.js}

@@ -1,6 +1,6 @@
 // src/utils/registry.ts
 import { readFileSync } from "fs";
-import { join, dirname } from "path";
+import { dirname, join } from "path";
 import { fileURLToPath } from "url";
 var __dirname = dirname(fileURLToPath(import.meta.url));
 var BUNDLED_REGISTRY_PATH = join(__dirname, "../registry/components.json");

package/dist/{diff-BQEXG7HU.js → diff-776UATCA.js}

@@ -1,10 +1,10 @@
 import {
   fetchRegistry,
   getComponent
-} from "./chunk-GJ6JOQ3Q.js";
+} from "./chunk-PBK72SJJ.js";
 import {
   readConfig
-} from "./chunk-YPKFYE45.js";
+} from "./chunk-NWIRSZUQ.js";
 
 // src/commands/diff.ts
 import pc from "picocolors";

package/dist/index.js

@@ -6,19 +6,19 @@ var VERSION = "0.0.1";
 var program = new Command();
 program.name("hypoth-ui").description("CLI for installing hypoth-ui components").version(VERSION);
 program.command("init").description("Initialize hypoth-ui in your project").option("-s, --style <style>", "Installation style (copy or package)").option("-f, --framework <framework>", "Framework (react, next, wc, vanilla)").option("-y, --yes", "Skip prompts and use defaults").action(async (options) => {
-  const { initCommand } = await import("./init-7AZXYAPJ.js");
+  const { initCommand } = await import("./init-GDU2PW7K.js");
   await initCommand(options);
 });
-program.command("add").description("Add components to your project").argument("[components...]", "Component names to add").option("-o, --overwrite", "Overwrite existing components").option("-a, --all", "Add all available components").action(async (components, options) => {
-  const { addCommand } = await import("./add-PDBC4JTE.js");
+program.command("add").description("Add components to your project").argument("[components...]", "Component names to add").option("-c, --copy", "Copy component source files instead of installing package").option("-o, --overwrite", "Overwrite existing components").option("-a, --all", "Add all available components").action(async (components, options) => {
+  const { addCommand } = await import("./add-V5PW73GC.js");
   await addCommand(components, options);
 });
 program.command("list").description("List available components").option("-j, --json", "Output as JSON").action(async (options) => {
-  const { listCommand } = await import("./list-X6ZLM2NQ.js");
+  const { listCommand } = await import("./list-XDP5I537.js");
   await listCommand(options);
 });
 program.command("diff").description("Check for component updates").option("-j, --json", "Output as JSON").action(async (options) => {
-  const { diffCommand } = await import("./diff-BQEXG7HU.js");
+  const { diffCommand } = await import("./diff-776UATCA.js");
   await diffCommand(options);
 });
 program.parse();

package/dist/{init-7AZXYAPJ.js → init-GDU2PW7K.js}

@@ -1,12 +1,12 @@
 import {
   installPackages
-} from "./chunk-5LTQ2XVL.js";
+} from "./chunk-27CLUUVC.js";
 import {
   configExists,
   createConfig,
   readConfig,
   writeConfig
-} from "./chunk-YPKFYE45.js";
+} from "./chunk-NWIRSZUQ.js";
 
 // src/commands/init.ts
 import * as p from "@clack/prompts";
@@ -53,11 +53,7 @@ function detectPackageManager(cwd, signals) {
   return "npm";
 }
 function detectTypeScript(cwd, signals) {
-  const tsconfigPaths = [
-    "tsconfig.json",
-    "tsconfig.base.json",
-    "jsconfig.json"
-  ];
+  const tsconfigPaths = ["tsconfig.json", "tsconfig.base.json", "jsconfig.json"];
   for (const configPath of tsconfigPaths) {
     const fullPath = join(cwd, configPath);
     if (existsSync(fullPath)) {
@@ -136,7 +132,9 @@ async function initCommand(options = {}) {
   p.intro(pc.bgCyan(pc.black(" hypoth-ui init ")));
   const cwd = process.cwd();
   if (!isValidProject(cwd)) {
-    p.cancel(pc.red("No package.json found. Please run this command in a valid project directory."));
+    p.cancel(
+      pc.red("No package.json found. Please run this command in a valid project directory.")
+    );
     process.exit(1);
   }
   if (configExists(cwd)) {
@@ -174,9 +172,7 @@ async function handleExistingConfig(cwd, options) {
   }
   const existingConfig = readConfig(cwd);
   const componentsCount = existingConfig.components.length;
-  p.log.warn(
-    `Found existing ds.config.json with ${componentsCount} installed component(s)`
-  );
+  p.log.warn(`Found existing ds.config.json with ${componentsCount} installed component(s)`);
   const action = await p.select({
     message: "What would you like to do?",
     options: [
@@ -317,7 +313,9 @@ function displayNextSteps(config) {
   console.log(`     ${pc.dim("npx @hypoth-ui/cli list")}`);
   console.log("");
   if (config.style === "copy") {
-    console.log(`  ${pc.cyan("3.")} Components will be copied to: ${pc.dim(config.paths.components)}`);
+    console.log(
+      `  ${pc.cyan("3.")} Components will be copied to: ${pc.dim(config.paths.components)}`
+    );
     console.log("");
   }
 }
@@ -330,7 +328,6 @@ function getInstallCommandForDisplay(pm, packages) {
       return `yarn add ${pkgList}`;
     case "bun":
       return `bun add ${pkgList}`;
-    case "npm":
     default:
       return `npm install ${pkgList}`;
   }

package/dist/{list-X6ZLM2NQ.js → list-XDP5I537.js}

@@ -1,11 +1,11 @@
 import {
   getComponentsForFramework,
   loadBundledRegistry
-} from "./chunk-GJ6JOQ3Q.js";
+} from "./chunk-PBK72SJJ.js";
 import {
   configExists,
   readConfig
-} from "./chunk-YPKFYE45.js";
+} from "./chunk-NWIRSZUQ.js";
 
 // src/commands/list.ts
 import pc from "picocolors";
@@ -56,7 +56,7 @@ async function listCommand(options = {}) {
     const name = (installedMark + component.name).padEnd(nameWidth + 2).slice(0, nameWidth + 2);
     const status = formatStatus(component.status).padEnd(statusWidth);
     const version = component.version.padEnd(versionWidth);
-    const desc = component.description.length > descWidth ? component.description.slice(0, descWidth - 3) + "..." : component.description;
+    const desc = component.description.length > descWidth ? `${component.description.slice(0, descWidth - 3)}...` : component.description;
     console.log(`${name}${status}${version}${pc.dim(desc)}`);
   }
   console.log("");

package/package.json

@@ -1,28 +1,22 @@
 {
   "name": "@hypoth-ui/cli",
-  "version": "0.0.1",
-  "description": "CLI tool for adding hypoth-ui components to your project",
+  "version": "0.1.0",
+  "description": "CLI tool for adding hypoth-ui components to your project (Alpha)",
+  "homepage": "https://github.com/hypoth-ui/hypoth-ui#readme",
   "type": "module",
   "bin": {
     "hypoth-ui": "./dist/index.js"
   },
   "files": [
     "dist",
-    "registry"
+    "registry",
+    "templates"
   ],
   "exports": {
     ".": {
       "import": "./dist/index.js"
     }
   },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:unit": "vitest run tests/unit",
-    "test:watch": "vitest"
-  },
   "dependencies": {
     "commander": "^12.1.0",
     "@clack/prompts": "^0.7.0",
@@ -33,6 +27,7 @@
   "devDependencies": {
     "@types/node": "^20.10.0",
     "tsup": "^8.0.0",
+    "tsx": "^4.7.0",
     "typescript": "^5.3.0",
     "vitest": "^1.0.0"
   },
@@ -50,5 +45,14 @@
     "type": "git",
     "url": "https://github.com/hypoth-ui/hypoth-ui.git",
     "directory": "packages/cli"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:unit": "vitest run tests/unit",
+    "test:watch": "vitest",
+    "sync:templates": "tsx scripts/sync-templates.ts"
   }
-}
+}