kigumi 0.2.0

package/README.md

@@ -0,0 +1,407 @@
+# Kigumi CLI
+
+> Add Web Awesome components to your React, Vue, or Svelte project
+
+Inspired by [shadcn/ui](https://ui.shadcn.com), Kigumi provides a seamless way to integrate Web Awesome components with framework-specific wrappers.
+
+## ✨ Features
+
+- 🎯 **Framework Support**: React (Vue/Svelte coming soon)
+- 📦 **Component Registry**: 40+ Web Awesome components
+- 🎨 **Theme System**: 11 themes + 9 color palettes
+- 🌈 **Brand Colors**: Customize with your brand
+- ⚡ **Hot Reload**: Theme changes apply instantly
+- 📝 **TypeScript First**: Auto-generated types
+- 🔧 **Free & Pro Tiers**: Flexible licensing
+
+## 🚀 Quick Start
+
+### React + Vite (Recommended)
+
+#### 1. Create Project
+
+```bash
+npm create vite@latest my-app -- --template react
+cd my-app
+npm install
+```
+
+#### 2. Initialize Kigumi
+
+**Free Tier**:
+
+```bash
+npx kigumi init
+# Interactive: Follow prompts for Framework → Theme → Palette → Brand
+
+# Or non-interactive:
+npx kigumi init --framework=react --theme=awesome --palette=default --brand=purple
+```
+
+**Pro Tier**:
+
+```bash
+npx kigumi init --framework=react --theme=brutalist --token=YOUR_PRO_TOKEN
+```
+
+> **Get Pro Token**: [webawesome.com](https://webawesome.com) → Settings → API Tokens
+
+**What `init` does**:
+
+- ✅ Creates `kigumi.config.json`
+- ✅ Generates `src/lib/webawesome.ts` (theme setup)
+- ✅ Generates `src/styles/theme.css` (customization)
+- ✅ **Configures path aliases automatically** (`vite.config.ts` + `tsconfig.app.json`)
+- ✅ Creates `.env` (Pro only, with token)
+- ✅ Creates `.npmrc` (registry configuration)
+- ✅ Installs Web Awesome package + `@types/react` (TypeScript)
+- ✅ Generates TypeScript definitions (if TypeScript)
+
+#### 3. Import Web Awesome
+
+**`src/main.tsx`** (or `main.jsx`):
+
+```tsx
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import '@/lib/webawesome'; // Add this line
+
+createRoot(document.getElementById('root')!).render(<App />);
+```
+
+#### 4. Add Components
+
+```bash
+# Add single component
+npx kigumi add button
+
+# Add multiple components
+npx kigumi add button input card dialog
+
+# Interactive selection
+npx kigumi add
+
+# Add all components
+npx kigumi add --all
+```
+
+#### 6. Use Components
+
+**`src/App.tsx`**:
+
+```tsx
+import { Button, Input, Card } from '@/components/ui';
+
+function App() {
+  return (
+    <Card>
+      <Input placeholder="Enter your name" />
+      <Button variant="brand">Submit</Button>
+    </Card>
+  );
+}
+
+export default App;
+```
+
+#### 7. Start Dev Server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) 🎉
+
+---
+
+## 📦 CLI Commands
+
+### `init` - Initialize Kigumi
+
+```bash
+npx kigumi init
+
+# Non-interactive
+npx kigumi init --framework=react --theme=awesome --token=YOUR_TOKEN
+```
+
+Initializes Kigumi in your project and installs dependencies automatically.
+
+### `add [components...]` - Add Components
+
+```bash
+npx kigumi add button
+npx kigumi add button input card
+npx kigumi add --all
+npx kigumi add button --overwrite
+```
+
+**Options**:
+
+- `--all` - Add all available components
+- `--overwrite` - Overwrite existing components
+
+### `list` - List Components
+
+```bash
+npx kigumi list
+```
+
+Shows all available components with tier requirements.
+
+### `theme` - Theme Management
+
+```bash
+# Show current theme
+npx kigumi theme show
+
+# List available themes
+npx kigumi theme list
+
+# Switch theme
+npx kigumi theme set awesome
+npx kigumi theme set brutalist
+
+# Change palette
+npx kigumi palette default
+npx kigumi palette rudimentary
+
+# Change brand color
+npx kigumi brand purple
+npx kigumi brand green
+```
+
+**Available Themes**:
+
+| Theme     | Tier | Style               |
+| --------- | ---- | ------------------- |
+| awesome   | Free | Web Awesome default |
+| default   | Free | Default theme       |
+| shoelace  | Free | Shoelace theme      |
+| brutalist | Pro  | Bold & raw          |
+| material  | Pro  | Material Design     |
+| ios       | Pro  | iOS style           |
+| fluent    | Pro  | Microsoft Fluent    |
+| nord      | Pro  | Nord color scheme   |
+| neon      | Pro  | Neon glow           |
+| coffee    | Pro  | Warm coffee tones   |
+| ocean     | Pro  | Ocean blues         |
+
+> **Note**: Pro tier themes are listed in `src/utils/tier-restrictions.ts` but may not all be available in the actual package yet.
+
+**Available Palettes**: default, bright, subdued, high-contrast, low-contrast, warm, cool, rudimentary, vivid (all available for both tiers)
+
+**Brand Colors**: blue, purple, green, red, orange, yellow, cyan, indigo, pink, gray
+
+---
+
+## 🎨 Customization
+
+Override Web Awesome design tokens in `src/styles/theme.css`:
+
+```css
+:root {
+  /* Spacing */
+  --wa-space-xs: 0.25rem;
+  --wa-space-s: 0.5rem;
+  --wa-space-m: 1rem;
+
+  /* Typography */
+  --wa-font-size-s: 0.875rem;
+  --wa-font-weight-bold: 700;
+
+  /* Brand color */
+  --wa-color-brand-fill-loud: #your-custom-color;
+}
+```
+
+See [Web Awesome tokens](https://webawesome.com/docs/tokens) for all available tokens.
+
+---
+
+## 🆓 Free vs Pro
+
+| Feature            | Free | Pro |
+| ------------------ | ---- | --- |
+| **Themes**         | 3    | 11  |
+| **Palettes**       | 9    | 9   |
+| **Components**     | 30+  | 40+ |
+| **Pro Components** | ❌   | ✅  |
+
+**Pro-only components**: page, charts, combobox, data-grid, date-picker, file-input, toast, video
+
+### Upgrading Free → Pro
+
+1. Get Pro token from [webawesome.com](https://webawesome.com)
+2. Run `npx kigumi init --token=YOUR_PRO_TOKEN`
+3. Done! Existing components are automatically migrated
+
+---
+
+## 🔧 Configuration
+
+`kigumi.config.json`:
+
+```json
+{
+  "framework": "react",
+  "typescript": true,
+  "componentsDir": "src/components/ui",
+  "utilsDir": "src/lib",
+  "theme": {
+    "selected": "awesome",
+    "palette": "default",
+    "brandColor": "purple"
+  },
+  "aliases": {
+    "@/components": "./src/components",
+    "@/lib": "./src/lib"
+  },
+  "webAwesome": {
+    "version": "^3.1.0"
+  }
+}
+```
+
+**Tier Detection**: Automatically detected from `.env` file. If `WEBAWESOME_NPM_TOKEN` exists, Pro tier is used.
+
+---
+
+## 🔧 Development
+
+### Code Quality Tools
+
+This project uses automated code quality tools to ensure consistent, high-quality code:
+
+- **ESLint**: Lints TypeScript/JavaScript code for errors and code quality issues
+- **Prettier**: Formats code consistently across the entire codebase
+- **Husky**: Manages Git hooks to enforce quality standards before commits
+- **lint-staged**: Runs linting/formatting only on staged files for efficient pre-commit checks
+
+### Available Scripts
+
+```bash
+# Linting
+pnpm lint          # Check for linting issues
+pnpm lint:fix      # Auto-fix linting issues
+
+# Formatting
+pnpm format        # Format all code with Prettier
+pnpm format:check  # Check if code is formatted correctly
+
+# Type Checking
+pnpm type-check    # Run TypeScript type checker
+
+# Testing
+pnpm test          # Run all tests
+pnpm test:watch    # Run tests in watch mode
+
+# Building
+pnpm build         # Build the CLI for distribution
+pnpm dev           # Run the CLI in development mode with watch
+```
+
+### Pre-Commit Hooks
+
+All commits are automatically checked before being created:
+
+1. **ESLint** runs on staged TypeScript files (errors block commits)
+2. **Prettier** formats all staged files automatically
+
+This ensures all committed code meets quality standards.
+
+---
+
+## 🐛 Troubleshooting
+
+### "Failed to resolve import @/lib/webawesome"
+
+With CLI v0.2.0+, path aliases are configured automatically for Vite projects.
+
+If you still see this error:
+
+1. Verify `vite.config.ts` has `resolve.alias['@']`
+2. Verify `tsconfig.app.json` has `paths["@/*"]`
+3. Re-run `npx kigumi init` (safe, won't break existing setup)
+
+### "401 Unauthorized" when installing Pro
+
+Invalid token in `.env`. Get new token from [webawesome.com](https://webawesome.com).
+
+### Components render unstyled
+
+1. Check `src/lib/webawesome.ts` has component imports
+2. Verify `import '@/lib/webawesome'` in `src/main.tsx`
+
+### Components don't render at all
+
+Add `import '@/lib/webawesome'` to your main entry file (see Quick Start step 4).
+
+### TypeScript errors with React hooks
+
+Web component wrappers use `import React from 'react'` (not named imports) for compatibility.
+
+### Registry mismatch errors (pnpm)
+
+Run `rm -rf node_modules pnpm-lock.yaml && pnpm install` to recreate lockfile with new registry configuration.
+
+---
+
+## 🏗️ Architecture
+
+```
+src/
+├── commands/           # CLI command handlers
+│   ├── init/           # Project initialization
+│   ├── add/            # Component installation
+│   └── theme/          # Theme management
+├── utils/              # Internal utilities
+│   ├── tier.ts         # Free/Pro tier detection
+│   ├── config.ts       # Configuration management
+│   ├── registry.ts     # Component definitions
+│   └── template.ts     # Handlebars template rendering
+├── schemas/            # Zod validation schemas
+├── errors/             # Typed error classes
+├── output/             # Console output formatting
+└── constants.ts        # Centralized magic strings
+templates/
+└── react/              # .hbs template files
+```
+
+**Key Design Patterns**:
+
+- Templates-first development (never edit generated code)
+- Tier detection from `.env` (not stored in config)
+- Centralized constants (`src/constants.ts`)
+- Structured error handling with semantic exit codes
+- Template compilation caching for performance
+
+---
+
+## 📚 Documentation
+
+- **AGENTS.md** - AI assistant development guide (architecture diagrams, data flow)
+- **CLAUDE.md** - Human developer documentation
+
+---
+
+## 🗺️ Roadmap
+
+- [ ] Vue framework support
+- [ ] Svelte framework support
+- [ ] Angular framework support
+- [ ] Remote component registry
+- [ ] Component preview/documentation generation
+- [ ] Storybook integration
+
+---
+
+## 📄 License
+
+MIT
+
+---
+
+## 💙 Credits
+
+Inspired by [shadcn/ui](https://ui.shadcn.com) - Built for [Web Awesome](https://awesome.me)

package/dist/chunk-FG4CIVPT.js

@@ -0,0 +1,52 @@
+// src/utils/tier.ts
+import fs from "fs-extra";
+import path from "path";
+async function detectTier(cwd) {
+  const envPath = path.join(cwd, ".env");
+  if (!await fs.pathExists(envPath)) {
+    return "free";
+  }
+  const envContent = await fs.readFile(envPath, "utf-8");
+  const tokenMatch = envContent.match(
+    /^\s*WEBAWESOME_NPM_TOKEN\s*=\s*(.+?)\s*$/m
+  );
+  if (tokenMatch && tokenMatch[1] && tokenMatch[1].length >= 10) {
+    return "pro";
+  }
+  return "free";
+}
+function detectTierSync(cwd) {
+  const envPath = path.join(cwd, ".env");
+  if (!fs.existsSync(envPath)) {
+    return "free";
+  }
+  const envContent = fs.readFileSync(envPath, "utf-8");
+  const tokenMatch = envContent.match(
+    /^\s*WEBAWESOME_NPM_TOKEN\s*=\s*(.+?)\s*$/m
+  );
+  if (tokenMatch && tokenMatch[1] && tokenMatch[1].length >= 10) {
+    return "pro";
+  }
+  return "free";
+}
+async function getProToken(cwd) {
+  const envPath = path.join(cwd, ".env");
+  if (!await fs.pathExists(envPath)) {
+    return null;
+  }
+  const envContent = await fs.readFile(envPath, "utf-8");
+  const tokenMatch = envContent.match(
+    /^\s*WEBAWESOME_NPM_TOKEN\s*=\s*(.+?)\s*$/m
+  );
+  return tokenMatch && tokenMatch[1] ? tokenMatch[1].trim() : null;
+}
+function getWebAwesomePackage(tier) {
+  return tier === "pro" ? "@awesome.me/webawesome-pro" : "@awesome.me/webawesome";
+}
+
+export {
+  detectTier,
+  detectTierSync,
+  getProToken,
+  getWebAwesomePackage
+};

package/dist/chunk-IRCCX2A2.js

@@ -0,0 +1,72 @@
+// src/utils/tier.ts
+import fs from "fs-extra";
+import path from "path";
+
+// src/constants.ts
+var WEB_AWESOME_FREE_PACKAGE = "@awesome.me/webawesome";
+var WEB_AWESOME_PRO_PACKAGE = "@awesome.me/webawesome-pro";
+var WEB_AWESOME_SCOPE = "@awesome.me";
+var ENV_TOKEN_KEY = "WEBAWESOME_NPM_TOKEN";
+var MIN_TOKEN_LENGTH = 10;
+var ENV_FILE_NAME = ".env";
+var NPM_PUBLIC_REGISTRY = "https://registry.npmjs.org/";
+var NPM_PRO_REGISTRY = "https://npm.cloudsmith.io/fortawesome/webawesome-pro";
+var FREE_PACKAGE_REGEX = /@awesome\.me\/webawesome(?!-pro)/g;
+var PRO_PACKAGE_REGEX = /@awesome\.me\/webawesome-pro/g;
+var ENV_TOKEN_REGEX = /^\s*WEBAWESOME_NPM_TOKEN\s*=\s*(.+?)\s*$/m;
+
+// src/utils/tier.ts
+async function detectTier(cwd) {
+  const envPath = path.join(cwd, ENV_FILE_NAME);
+  if (!await fs.pathExists(envPath)) {
+    return "free";
+  }
+  const envContent = await fs.readFile(envPath, "utf-8");
+  const tokenMatch = envContent.match(ENV_TOKEN_REGEX);
+  if (tokenMatch && tokenMatch[1] && tokenMatch[1].length >= MIN_TOKEN_LENGTH) {
+    return "pro";
+  }
+  return "free";
+}
+function detectTierSync(cwd) {
+  const envPath = path.join(cwd, ENV_FILE_NAME);
+  if (!fs.existsSync(envPath)) {
+    return "free";
+  }
+  const envContent = fs.readFileSync(envPath, "utf-8");
+  const tokenMatch = envContent.match(ENV_TOKEN_REGEX);
+  if (tokenMatch && tokenMatch[1] && tokenMatch[1].length >= MIN_TOKEN_LENGTH) {
+    return "pro";
+  }
+  return "free";
+}
+async function getProToken(cwd) {
+  const envPath = path.join(cwd, ENV_FILE_NAME);
+  if (!await fs.pathExists(envPath)) {
+    return null;
+  }
+  const envContent = await fs.readFile(envPath, "utf-8");
+  const tokenMatch = envContent.match(ENV_TOKEN_REGEX);
+  return tokenMatch && tokenMatch[1] ? tokenMatch[1].trim() : null;
+}
+function getWebAwesomePackage(tier) {
+  return tier === "pro" ? WEB_AWESOME_PRO_PACKAGE : WEB_AWESOME_FREE_PACKAGE;
+}
+
+export {
+  WEB_AWESOME_FREE_PACKAGE,
+  WEB_AWESOME_PRO_PACKAGE,
+  WEB_AWESOME_SCOPE,
+  ENV_TOKEN_KEY,
+  MIN_TOKEN_LENGTH,
+  ENV_FILE_NAME,
+  NPM_PUBLIC_REGISTRY,
+  NPM_PRO_REGISTRY,
+  FREE_PACKAGE_REGEX,
+  PRO_PACKAGE_REGEX,
+  ENV_TOKEN_REGEX,
+  detectTier,
+  detectTierSync,
+  getProToken,
+  getWebAwesomePackage
+};

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node