grg-kit-cli 0.6.11 → 0.6.13

package/README.md

@@ -78,12 +78,15 @@ Examples:
 - Updates `src/styles.css` with theme import
 
 **Available themes:**
-- `grg-theme` - Default theme with purple/orange accents
+- `grg-theme` - Default theme with blue accents
 - `claude` - Claude-inspired warm tones
 - `clean-slate` - Minimal grayscale palette
 - `modern-minimal` - Contemporary minimal design
 - `amber-minimal` - Warm amber accents
-- `mocks` - Theme for mockups and prototypes
+- `chroma-clinic` - Professional blue theme for healthcare
+- `bio-lab` - Fresh green theme for life sciences
+- `pharma-teal` - Calming teal for pharmaceutical apps
+- `helix-purple` - DNA-inspired purple for genomics
 
 ### `grg add theme`
 
@@ -153,17 +156,23 @@ Examples:
 List available blocks and themes.
 
 ```bash
-grg list [category]
+grg list [category] [options]
+
+Options:
+  --json             Output as JSON (for MCP server integration)
 
 Examples:
   grg list           # Show overview
   grg list blocks    # List all blocks
   grg list themes    # List all themes
+  grg list --json    # Output all resources as JSON
 ```
 
+The `--json` flag outputs structured data used by the MCP server to get resource information.
+
 ### `grg llm-setup`
 
-Generate LLM-specific prompts and rules for AI assistants (Windsurf, Cursor, etc.).
+Generate design system rules for AI assistants (Windsurf, Cursor, Claude Code).
 
 ```bash
 grg llm-setup [options]
@@ -172,60 +181,17 @@ Options:
   -o, --output <path>  Output directory for rules (default: ".windsurf/rules")
 
 Examples:
-  grg llm-setup                    # Windsurf (multiple .md files)
+  grg llm-setup                    # Windsurf/Cursor (design-system.md)
   grg llm-setup --output .claude   # Claude Code (single CLAUDE.md)
 ```
 
-## MCP Server Integration
-
-For AI assistants to automatically discover and use GRG Kit resources:
-
-### 1. Install the MCP Server
-
-```bash
-npm install -g grg-kit-mcp-server
-```
-
-### 2. Configure Your AI Assistant
-
-**Windsurf** (`~/.codeium/windsurf/mcp_config.json`):
-
-```json
-{
-  "mcpServers": {
-    "grg-kit": {
-      "command": "grg-mcp-server"
-    }
-  }
-}
-```
-
-**Claude Code** (`~/.claude/settings.json`):
-
-```json
-{
-  "mcpServers": {
-    "grg-kit": {
-      "command": "grg-mcp-server"
-    }
-  }
-}
-```
-
-### 3. Generate AI Rules
-
-```bash
-cd your-angular-project
-grg llm-setup
-```
-
-### 4. Restart Your IDE
+**What this creates:**
+- `design-system.md` - Component usage patterns, styling rules, import patterns
 
 **What this enables:**
-- ✅ AI automatically searches GRG Kit before writing custom code
-- ✅ AI knows about themes, components, blocks, and examples
 - ✅ AI follows GRG Kit design system patterns
-- ✅ AI can install blocks directly via MCP tools
+- ✅ AI uses Spartan-NG components correctly
+- ✅ AI uses semantic colors instead of raw Tailwind colors
 
 ## Quick Reference
 

package/bin/grg.js

@@ -54,6 +54,7 @@ addCommand
 program
   .command('list [category]')
   .description('List available blocks and components')
+  .option('--json', 'Output as JSON (for MCP server integration)')
   .action(list);
 
 // LLM Setup command

package/commands/add.js

@@ -4,7 +4,7 @@ const ora = require('ora');
 const fs = require('fs').promises;
 const path = require('path');
 const https = require('https');
-const { fetchCatalog, REPO } = require('../config/catalog-fetcher');
+const { RESOURCES, REPO } = require('../config/resources');
 
 /**
  * Add command - downloads blocks or specific block files
@@ -16,10 +16,6 @@ const { fetchCatalog, REPO } = require('../config/catalog-fetcher');
  *   grg add block --all                   # All blocks with all files
  */
 async function add(blockName, fileIds, options) {
-  // Fetch catalog dynamically (with caching)
-  const spinner = ora('Fetching catalog...').start();
-  const RESOURCES = await fetchCatalog({ silent: true });
-  spinner.stop();
 
   // Handle --all flag (download everything)
   if (options.all) {

package/commands/list.js

@@ -1,16 +1,34 @@
 const chalk = require('chalk');
-const ora = require('ora');
-const { fetchCatalog } = require('../config/catalog-fetcher');
+const { RESOURCES } = require('../config/resources');
+const { version } = require('../package.json');
 
 /**
  * List command - displays available blocks, components, and themes
- * Usage: grg list [category]
+ * Usage: grg list [category] [--json]
  */
-async function list(category) {
-  // Fetch catalog dynamically
-  const spinner = ora('Fetching catalog...').start();
-  const RESOURCES = await fetchCatalog({ silent: true });
-  spinner.stop();
+async function list(category, options = {}) {
+
+  // JSON output for MCP server integration
+  if (options.json) {
+    const output = {
+      cli: {
+        name: 'grg',
+        version,
+        commands: {
+          init: { usage: 'grg init [--theme <name>]', themeFlag: '--theme' },
+          addBlock: { usage: 'grg add block <blockName> [fileIds...]', validBlocks: RESOURCES.blocks.map(b => b.name) },
+          addComponent: { usage: 'grg add component <componentName>', validComponents: RESOURCES.components.map(c => c.name) },
+          addTheme: { usage: 'grg add theme <themeName>' },
+          list: { usage: 'grg list [category] [--json]' }
+        }
+      },
+      themes: RESOURCES.themes,
+      components: RESOURCES.components,
+      blocks: RESOURCES.blocks
+    };
+    console.log(JSON.stringify(output, null, 2));
+    return;
+  }
 
   if (!category) {
     // Show overview

package/commands/llm-setup.js

@@ -2,11 +2,10 @@ const fs = require('fs').promises;
 const path = require('path');
 const chalk = require('chalk');
 const ora = require('ora');
-const { RESOURCES } = require('../config/resources');
 
 /**
  * LLM Setup command - generates LLM-specific prompts and rules
- * Helps AI assistants understand GRG Kit design system and use MCP server
+ * Helps AI assistants understand GRG Kit design system
  */
 async function llmPrompts(options) {
   const outputDir = options.output || '.windsurf/rules';
@@ -78,8 +77,7 @@ async function llmPrompts(options) {
     
     console.log(chalk.yellow('\nNext steps:'));
     console.log(chalk.gray('  1. The CLAUDE.md file will be automatically picked up by Claude Code'));
-    console.log(chalk.gray('  2. Make sure the grg-kit MCP server is configured'));
-    console.log(chalk.gray('  3. Claude will now check GRG Kit resources before writing custom code'));
+    console.log(chalk.gray('  2. Claude will now follow GRG Kit design system patterns'));
     console.log();
     return;
   }
@@ -109,44 +107,15 @@ async function llmPrompts(options) {
     process.exit(1);
   }
 
-  // Step 3: Generate grg-kit-mcp.md
-  spinner.start('Generating grg-kit-mcp.md...');
-  try {
-    const mcpContent = generateMCPRules();
-    const mcpPath = path.join(outputDir, 'grg-kit-mcp.md');
-    await fs.writeFile(mcpPath, mcpContent);
-    spinner.succeed(chalk.green('✓ Generated grg-kit-mcp.md'));
-  } catch (error) {
-    spinner.fail(chalk.red('Failed to generate grg-kit-mcp.md'));
-    console.error(chalk.red(error.message));
-    process.exit(1);
-  }
-
-  // Step 4: Generate angular-components.md (glob-triggered)
-  spinner.start('Generating angular-components.md...');
-  try {
-    const angularContent = generateAngularComponentRules();
-    const angularPath = path.join(outputDir, 'angular-components.md');
-    await fs.writeFile(angularPath, angularContent);
-    spinner.succeed(chalk.green('✓ Generated angular-components.md'));
-  } catch (error) {
-    spinner.fail(chalk.red('Failed to generate angular-components.md'));
-    console.error(chalk.red(error.message));
-    process.exit(1);
-  }
-
   // Success message
   console.log(chalk.bold.green('\n✨ LLM rules generated successfully!\n'));
-  console.log(chalk.gray('Files created:'));
+  console.log(chalk.gray('File created:'));
   console.log(chalk.cyan(`  ${outputDir}/design-system.md`));
-  console.log(chalk.cyan(`  ${outputDir}/grg-kit-mcp.md`));
-  console.log(chalk.cyan(`  ${outputDir}/angular-components.md`));
   
   console.log(chalk.yellow('\nNext steps:'));
   console.log(chalk.gray('  1. These rules will be automatically picked up by your AI assistant'));
-  console.log(chalk.gray('  2. Make sure the grg-kit MCP server is configured in your IDE'));
-  console.log(chalk.gray('  3. AI will now check GRG Kit resources before writing custom code'));
-  console.log(chalk.gray('\nSupported IDEs: Windsurf, Claude Code, Claude Desktop'));
+  console.log(chalk.gray('  2. AI will now follow GRG Kit design system patterns'));
+  console.log(chalk.gray('\nSupported IDEs: Windsurf, Cursor, Claude Code'));
   console.log();
 }
 
@@ -169,8 +138,8 @@ This project uses **GRG Kit**, a comprehensive Angular UI toolkit built on top o
 
 ### 1. Always Check GRG Kit First
 **BEFORE writing any UI component, layout, or page:**
-1. Use the MCP server to search for existing resources: \`search_ui_resources\`
-2. Check if a component, layout, or example already exists
+1. Check if a Spartan-NG component exists (button, card, dialog, form-field, table, etc.)
+2. Check if a block exists for page layouts (auth, shell, settings)
 3. Only write custom code if no suitable resource exists
 
 ### 2. Component Organization
@@ -689,411 +658,17 @@ This design system provides a comprehensive foundation for building consistent,
 `;
 }
 
-function generateMCPRules() {
-  // Dynamically build resource lists from resources.js
-  // Note: Spartan-NG components are pre-installed, so we only list GRG Kit resources
-  const themes = RESOURCES.themes || [];
-  const components = RESOURCES.components || [];
-  const blocks = RESOURCES.blocks || [];
-  
-  const themesList = themes.map(t => `- \`theme:${t.name}\` - ${t.description}`).join('\n');
-  const componentsList = components.map(c => `- \`component:${c.name}\` - ${c.description}`).join('\n');
-  const blocksList = blocks.map(b => `- \`block:${b.name}\` - ${b.description}`).join('\n');
-  
-  const totalResources = themes.length + components.length + blocks.length;
-
-  return `---
-trigger: always_on
----
-
-# GRG Kit MCP Server Integration
-
-## Setup
-
-Add the grg-kit MCP server to your AI assistant configuration:
-
-**Windsurf:** \`~/.codeium/windsurf/mcp_config.json\`
-**Claude Code:** \`~/.claude/settings.json\`
-**Claude Desktop (macOS):** \`~/Library/Application Support/Claude/claude_desktop_config.json\`
-
-\`\`\`json
-{
-  "mcpServers": {
-    "grg-kit": {
-      "command": "grg-mcp-server"
-    }
-  }
-}
-\`\`\`
-
-After adding, restart your IDE for the MCP server to be available.
-
-## Important: Spartan-NG is Pre-installed
-
-**Spartan-NG components are already installed** in this project. You do NOT need to use MCP to install them.
-
-- For Spartan-NG usage patterns → Refer to \`design-system.md\`
-- For themes, blocks, and GRG Kit components → Use MCP tools below
-
-## When to Use MCP
-
-Use the MCP server for:
-1. **Themes** - Install different color themes
-2. **Blocks** - Pre-built page layouts (auth, shell, settings)
-3. **GRG Kit Components** - Custom components like file-upload
-
-**Do NOT use MCP for:**
-- Spartan-NG components (button, card, dialog, etc.) - already installed
-- Basic UI patterns - see \`design-system.md\`
-
-## MCP Server Tools
-
-The \`grg-kit\` MCP server provides these tools:
-
-### 1. mcp2_search_ui_resources
-
-Search for GRG Kit resources (themes, blocks, components).
-
-\`\`\`typescript
-mcp2_search_ui_resources({
-  query: "auth",
-  category: "all" // or "themes", "components", "blocks"
-})
-\`\`\`
-
-**When to use:**
-- User needs a page layout or block
-- Looking for a theme
-- Need a GRG Kit component (file-upload)
-
-### 2. mcp2_suggest_resources
-
-Get suggestions based on user requirements.
-
-\`\`\`typescript
-mcp2_suggest_resources({
-  requirement: "I need a login page"
-})
-
-// Returns: block:auth, theme suggestions
-\`\`\`
-
-### 3. mcp2_get_resource_details
-
-Get detailed information about a resource.
-
-\`\`\`typescript
-mcp2_get_resource_details({
-  resource: "block:auth"
-})
-
-// Returns: dependencies, tags, install command
-\`\`\`
-
-### 4. mcp2_install_resource
-
-Get the install command for a block. Returns a command to run via run_command tool.
-
-\`\`\`typescript
-mcp2_install_resource({
-  resource: "auth",  // Just the block name, NOT "block:auth"
-  files: ["login"],  // Optional: specific files to install
-  output: "src/app/pages/auth" // Optional: custom output directory
-})
-// Returns: { command: "grg add block auth login", instruction: "Run this command..." }
-\`\`\`
-
-**Important:** The resource parameter should be just the block name (e.g., "auth", "shell", "settings"), NOT prefixed with "block:".
-
-### 5. mcp2_list_available_resources
-
-List all available resources.
-
-\`\`\`typescript
-mcp2_list_available_resources({
-  category: "all" // or "themes", "components", "blocks"
-})
-\`\`\`
-
-## Workflow Examples
-
-### Example 1: User Wants a Dashboard
-
-\`\`\`
-User: "Create a dashboard with a sidebar"
-
-AI Workflow:
-1. mcp2_search_ui_resources({ query: "shell sidebar" })
-   → Finds: block:shell
-   
-2. mcp2_install_resource({ resource: "shell", files: ["sidebar"] })
-   → Returns command: "grg add block shell sidebar"
-   
-3. Run the command via run_command tool in the Angular project root
-   
-4. Customize using Spartan-NG components (from design-system.md)
-   → Add cards, tables, etc.
-\`\`\`
-
-### Example 2: User Wants a Login Page
-
-\`\`\`
-User: "I need a login page"
-
-AI Workflow:
-1. mcp2_search_ui_resources({ query: "auth login" })
-   → Finds: block:auth
-   
-2. mcp2_install_resource({ resource: "auth", files: ["login"] })
-   → Returns command: "grg add block auth login"
-   
-3. Run the command via run_command tool in the Angular project root
-   
-4. Customize as needed
-\`\`\`
-
-### Example 3: User Wants a Theme
-
-\`\`\`
-User: "Change the theme to something warmer"
-
-AI Workflow:
-1. mcp2_list_available_resources({ category: "themes" })
-   → Show: claude, amber-minimal, etc.
-   
-2. mcp2_install_resource({ resource: "claude" })
-   → Returns command: "grg add theme claude"
-   
-3. Run the command via run_command tool
-   → Theme is downloaded and styles.css is updated automatically
-\`\`\`
-
-### Example 4: User Wants a Form Component
-
-\`\`\`
-User: "I need a file upload"
-
-AI Workflow:
-1. mcp2_search_ui_resources({ query: "file upload" })
-   → Finds: component:file-upload
-   
-2. Components are included automatically with grg init
-   → Just import and use: import { GrgFileUploadImports } from '@grg-kit/ui/file-upload';
-   
-3. Use with Spartan-NG form components (from design-system.md)
-\`\`\`
-
-## Available Resources (${totalResources} total)
-
-### Themes (${themes.length} available)
-${themesList}
-
-### GRG Kit Components (${components.length} available)
-${componentsList}
-
-### Blocks/Layouts (${blocks.length} available)
-${blocksList}
-
-## Decision Tree
-
-\`\`\`
-User request:
-│
-├─ Need a button, card, dialog, form field, table, etc.?
-│  └─ Use Spartan-NG (see design-system.md) - ALREADY INSTALLED
-│
-├─ Need a page layout (dashboard, auth, settings)?
-│  └─ Use MCP: mcp2_search_ui_resources({ query: "..." })
-│
-├─ Need a theme?
-│  └─ Use MCP: mcp2_list_available_resources({ category: "themes" })
-│
-└─ Need file-upload or other GRG Kit component?
-   └─ Use MCP: mcp2_search_ui_resources({ query: "..." })
-\`\`\`
-
-## Remember
-
-- **Spartan-NG is pre-installed** - Don't search for button, card, dialog, etc.
-- **Use design-system.md** for Spartan-NG patterns
-- **Use MCP** only for themes, blocks, and GRG Kit components
-- **Check blocks first** when building pages - don't start from scratch
-`;
-}
-
-function generateAngularComponentRules() {
-  // Spartan-NG components are pre-installed - list the common ones
-  const spartanComponents = [
-    'accordion', 'alert', 'alert-dialog', 'avatar', 'badge', 'breadcrumb',
-    'button', 'calendar', 'card', 'checkbox', 'collapsible', 'combobox',
-    'command', 'context-menu', 'data-table', 'date-picker', 'dialog',
-    'dropdown-menu', 'form-field', 'hover-card', 'input', 'label', 'menubar',
-    'navigation-menu', 'pagination', 'popover', 'progress', 'radio-group',
-    'scroll-area', 'select', 'separator', 'sheet', 'sidebar', 'skeleton',
-    'slider', 'sonner', 'spinner', 'switch', 'table', 'tabs', 'textarea',
-    'toggle', 'tooltip'
-  ];
-  const componentNames = spartanComponents.join(', ');
-
-  return `---
-trigger: glob
-globs: ["**/*.component.ts", "**/*.component.html"]
----
-
-# Angular Component Development with GRG Kit
-
-You are editing an Angular component. Before writing UI code:
-
-## Quick Reference
-
-### Spartan-NG Components (Pre-installed)
-These components are already available - just import and use them:
-${componentNames}
-
-### Import Patterns
-
-**Spartan-NG (hlm prefix):**
-\`\`\`typescript
-import { HlmButtonImports } from '@spartan-ng/helm/button';
-import { HlmCardImports } from '@spartan-ng/helm/card';
-import { BrnDialogImports } from '@spartan-ng/brain/dialog';
-import { HlmDialogImports } from '@spartan-ng/helm/dialog';
-\`\`\`
-
-**GRG Kit (grg- prefix):**
-\`\`\`typescript
-import { GrgFileUploadImports } from '@grg-kit/ui/file-upload';
-\`\`\`
-
-### Common Patterns
-
-**Button:**
-\`\`\`html
-<button hlmBtn>Default</button>
-<button hlmBtn variant="outline">Outline</button>
-<button hlmBtn variant="destructive">Destructive</button>
-\`\`\`
-
-**Card:**
-\`\`\`html
-<section hlmCard>
-  <div hlmCardHeader>
-    <h3 hlmCardTitle>Title</h3>
-    <p hlmCardDescription>Description</p>
-  </div>
-  <div hlmCardContent>Content</div>
-</section>
-\`\`\`
-
-**Form Field:**
-\`\`\`html
-<hlm-form-field>
-  <input hlmInput [formControl]="control" placeholder="Email" />
-  <hlm-error>Required</hlm-error>
-</hlm-form-field>
-\`\`\`
-
-**Dialog:**
-\`\`\`html
-<hlm-dialog>
-  <button brnDialogTrigger hlmBtn>Open</button>
-  <hlm-dialog-content *brnDialogContent="let ctx">
-    <hlm-dialog-header>
-      <h3 hlmDialogTitle>Title</h3>
-    </hlm-dialog-header>
-    <!-- content -->
-  </hlm-dialog-content>
-</hlm-dialog>
-\`\`\`
-
-### Icons
-\`\`\`typescript
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCheck, lucideX } from '@ng-icons/lucide';
-
-@Component({
-  providers: [provideIcons({ lucideCheck, lucideX })],
-  template: \`<ng-icon hlm name="lucideCheck" />\`
-})
-\`\`\`
-
-## When to Use MCP
-
-Use MCP only for:
-- **Blocks** (auth, shell, settings) - \`mcp2_search_ui_resources({ query: "auth" })\`
-- **Themes** - \`mcp2_list_available_resources({ category: "themes" })\`
-- **GRG Kit components** (file-upload) - \`mcp2_search_ui_resources({ query: "file-upload" })\`
-
-**Do NOT use MCP for Spartan-NG components** - they are already installed!
-
-## TailwindCSS Rules (CRITICAL)
-
-### NEVER use raw Tailwind colors:
-\`\`\`html
-<!-- ❌ FORBIDDEN -->
-<div class="text-green-600 bg-green-100">Success</div>
-<div class="text-red-500">Error</div>
-<div class="bg-yellow-50 border-yellow-200">Warning</div>
-\`\`\`
-
-### ALWAYS use semantic color tokens:
-\`\`\`html
-<!-- ✅ CORRECT -->
-<div class="bg-primary text-primary-foreground">Primary</div>
-<div class="bg-destructive text-destructive-foreground">Error</div>
-<div class="text-muted-foreground">Secondary text</div>
-<div class="bg-muted">Subtle background</div>
-<div class="border-border">Standard border</div>
-\`\`\`
-
-### Available semantic colors:
-\`background\`, \`foreground\`, \`card\`, \`card-foreground\`, \`popover\`, \`popover-foreground\`,
-\`primary\`, \`primary-foreground\`, \`secondary\`, \`secondary-foreground\`, \`muted\`, \`muted-foreground\`,
-\`accent\`, \`accent-foreground\`, \`destructive\`, \`destructive-foreground\`, \`border\`, \`input\`, \`ring\`
-
-### Need a new color (e.g., success, warning)?
-1. Add CSS variable to \`src/styles.css\` with light AND dark mode values
-2. Register in \`@theme inline\` block
-3. Then use: \`bg-success text-success-foreground\`
-
-### Typography - use standard scale:
-\`\`\`html
-<!-- ✅ CORRECT -->
-<p class="text-sm">Small</p>
-<p class="text-base">Body</p>
-<h2 class="text-xl font-semibold">Heading</h2>
-
-<!-- ❌ WRONG - arbitrary sizes -->
-<p class="text-[13px]">Don't do this</p>
-\`\`\`
-
-## Remember
-- Spartan-NG components are pre-installed - just import and use
-- Follow existing patterns in the codebase
-- Use TailwindCSS v4 for styling with SEMANTIC colors only
-- NEVER use raw colors like text-green-600, bg-yellow-100, etc.
-`;
-}
-
 function generateClaudeMdRules() {
   // Generate a combined CLAUDE.md file for Claude Code
-  const themes = RESOURCES.themes || [];
-  const components = RESOURCES.components || [];
-  const blocks = RESOURCES.blocks || [];
-  
-  const themesList = themes.map(t => `- \`theme:${t.name}\` - ${t.description}`).join('\n');
-  const componentsList = components.map(c => `- \`component:${c.name}\` - ${c.description}`).join('\n');
-  const blocksList = blocks.map(b => `- \`block:${b.name}\` - ${b.description}`).join('\n');
-
   return `# GRG Kit Project Rules
 
 This project uses **GRG Kit**, an Angular UI toolkit built on **Spartan-NG UI**.
 
-## Critical: Check GRG Kit First
+## Critical: Check Design System First
 
 **BEFORE writing any UI component:**
-1. Use MCP tool \`mcp2_search_ui_resources\` to search for existing resources
-2. Check if a component, layout, or block already exists
+1. Check if a Spartan-NG component exists (button, card, dialog, form-field, table, etc.)
+2. Check if a block exists for page layouts (auth, shell, settings)
 3. Only write custom code if no suitable resource exists
 
 ## Architecture
@@ -1169,34 +744,29 @@ import { lucideCheck } from '@ng-icons/lucide';
 })
 \`\`\`
 
-## MCP Server Tools
+## Available Blocks
 
-Use the \`grg-kit\` MCP server for themes, blocks, and GRG Kit components:
+Pre-built page layouts available via \`grg add block <name>\`:
+- **auth** - Login, register, forgot-password pages
+- **shell** - Sidebar, topnav, collapsible layouts  
+- **settings** - Profile, security, notifications pages
 
-- \`mcp2_search_ui_resources({ query: "auth" })\` - Search resources
-- \`mcp2_suggest_resources({ requirement: "login page" })\` - Get suggestions
-- \`mcp2_install_resource({ resource: "auth", files: ["login"] })\` - Get install command (returns command to run)
-- \`mcp2_list_available_resources({ category: "blocks" })\` - List all
-
-**Note:** \`mcp2_install_resource\` returns a command string. Use \`run_command\` to execute it in the Angular project root.
-
-## Available Resources
+## Available Themes
 
-### Themes
-${themesList}
+Switch themes via \`grg add theme <name>\`:
+- grg-theme, claude, amber-minimal, clean-slate, modern-minimal
+- Medical themes: chroma-clinic, bio-lab, pharma-teal, helix-purple
 
-### GRG Kit Components
-${componentsList}
+## GRG Kit Components
 
-### Blocks
-${blocksList}
+- **file-upload** - Drag and drop file upload (\`@grg-kit/ui/file-upload\`)
 
 ## Decision Tree
 
 - Need button, card, dialog, form field, table? → Use Spartan-NG (already installed)
-- Need page layout (dashboard, auth, settings)? → Use MCP: \`mcp2_search_ui_resources\`
-- Need theme? → Use MCP: \`mcp2_list_available_resources({ category: "themes" })\`
-- Need file-upload? → Use MCP: \`mcp2_search_ui_resources\`
+- Need page layout (dashboard, auth, settings)? → Run: \`grg add block <name>\`
+- Need theme? → Run: \`grg add theme <name>\`
+- Need file-upload? → Import from \`@grg-kit/ui/file-upload\`
 
 ## Package Manager
 

package/config/resources.js

@@ -29,6 +29,46 @@ const RESOURCES = {
         "oklch"
       ]
     },
+    {
+      "name": "bio-lab",
+      "title": "Bio Lab",
+      "description": "Fresh green theme for life sciences",
+      "file": "bio-lab.css",
+      "path": "templates/ui/themes/bio-lab.css",
+      "defaultOutput": "src/themes/bio-lab.css",
+      "tags": [
+        "medical",
+        "green",
+        "life-sciences",
+        "biotech"
+      ],
+      "features": [
+        "dark-mode",
+        "tailwind-v4",
+        "spartan-ng",
+        "oklch"
+      ]
+    },
+    {
+      "name": "chroma-clinic",
+      "title": "Chroma Clinic",
+      "description": "Professional blue theme with Open Sans",
+      "file": "chroma-clinic.css",
+      "path": "templates/ui/themes/chroma-clinic.css",
+      "defaultOutput": "src/themes/chroma-clinic.css",
+      "tags": [
+        "medical",
+        "professional",
+        "blue",
+        "healthcare"
+      ],
+      "features": [
+        "dark-mode",
+        "tailwind-v4",
+        "spartan-ng",
+        "oklch"
+      ]
+    },
     {
       "name": "claude",
       "title": "Claude",
@@ -72,15 +112,15 @@ const RESOURCES = {
     {
       "name": "grg-theme",
       "title": "Grg Theme",
-      "description": "Default theme with purple/orange accents",
+      "description": "Default theme with blue accents",
       "file": "grg-theme.css",
       "path": "templates/ui/themes/grg-theme.css",
       "defaultOutput": "src/themes/grg-theme.css",
       "tags": [
         "default",
-        "purple",
-        "orange",
-        "colorful"
+        "blue",
+        "minimal",
+        "professional"
       ],
       "features": [
         "dark-mode",
@@ -90,16 +130,17 @@ const RESOURCES = {
       ]
     },
     {
-      "name": "mocks",
-      "title": "Mocks",
-      "description": "Theme for mockups and prototypes",
-      "file": "mocks.css",
-      "path": "templates/ui/themes/mocks.css",
-      "defaultOutput": "src/themes/mocks.css",
+      "name": "helix-purple",
+      "title": "Helix Purple",
+      "description": "DNA-inspired purple for genomics",
+      "file": "helix-purple.css",
+      "path": "templates/ui/themes/helix-purple.css",
+      "defaultOutput": "src/themes/helix-purple.css",
       "tags": [
-        "mockup",
-        "prototype",
-        "design"
+        "medical",
+        "purple",
+        "genomics",
+        "biotech"
       ],
       "features": [
         "dark-mode",
@@ -127,6 +168,26 @@ const RESOURCES = {
         "spartan-ng",
         "oklch"
       ]
+    },
+    {
+      "name": "pharma-teal",
+      "title": "Pharma Teal",
+      "description": "Calming teal for pharmaceutical applications",
+      "file": "pharma-teal.css",
+      "path": "templates/ui/themes/pharma-teal.css",
+      "defaultOutput": "src/themes/pharma-teal.css",
+      "tags": [
+        "medical",
+        "teal",
+        "pharmaceutical",
+        "healthcare"
+      ],
+      "features": [
+        "dark-mode",
+        "tailwind-v4",
+        "spartan-ng",
+        "oklch"
+      ]
     }
   ],
   "components": [
@@ -165,6 +226,26 @@ const RESOURCES = {
         "@spartan-ng/helm/button",
         "@spartan-ng/helm/card",
         "@spartan-ng/helm/form-field"
+      ],
+      "files": [
+        {
+          "id": "forgot-password",
+          "file": "forgot-password.component.ts",
+          "title": "Forgot Password",
+          "description": "Forgot Password"
+        },
+        {
+          "id": "login",
+          "file": "login.component.ts",
+          "title": "Login",
+          "description": "Login"
+        },
+        {
+          "id": "register",
+          "file": "register.component.ts",
+          "title": "Register",
+          "description": "Register"
+        }
       ]
     },
     {
@@ -185,6 +266,32 @@ const RESOURCES = {
         "@spartan-ng/helm/card",
         "@spartan-ng/helm/form-field",
         "@spartan-ng/helm/switch"
+      ],
+      "files": [
+        {
+          "id": "danger-zone",
+          "file": "danger-zone.component.ts",
+          "title": "Danger Zone",
+          "description": "Danger Zone"
+        },
+        {
+          "id": "notification",
+          "file": "notification-settings.component.ts",
+          "title": "Notification Settings",
+          "description": "Notification Settings"
+        },
+        {
+          "id": "profile",
+          "file": "profile-settings.component.ts",
+          "title": "Profile Settings",
+          "description": "Profile Settings"
+        },
+        {
+          "id": "security",
+          "file": "security-settings.component.ts",
+          "title": "Security Settings",
+          "description": "Security Settings"
+        }
       ]
     },
     {
@@ -207,6 +314,44 @@ const RESOURCES = {
         "@spartan-ng/helm/button",
         "@spartan-ng/helm/icon",
         "@spartan-ng/helm/dropdown-menu"
+      ],
+      "files": [
+        {
+          "id": "collapsible-footer",
+          "file": "collapsible-shell-footer.component.ts",
+          "title": "Collapsible Shell Footer",
+          "description": "Collapsible Shell Footer"
+        },
+        {
+          "id": "collapsible",
+          "file": "collapsible-shell.component.ts",
+          "title": "Collapsible Shell",
+          "description": "Collapsible Shell"
+        },
+        {
+          "id": "sidebar-footer",
+          "file": "sidebar-shell-footer.component.ts",
+          "title": "Sidebar Shell Footer",
+          "description": "Sidebar Shell Footer"
+        },
+        {
+          "id": "sidebar",
+          "file": "sidebar-shell.component.ts",
+          "title": "Sidebar Shell",
+          "description": "Sidebar Shell"
+        },
+        {
+          "id": "topnav-footer",
+          "file": "topnav-shell-footer.component.ts",
+          "title": "Topnav Shell Footer",
+          "description": "Topnav Shell Footer"
+        },
+        {
+          "id": "topnav",
+          "file": "topnav-shell.component.ts",
+          "title": "Topnav Shell",
+          "description": "Topnav Shell"
+        }
       ]
     }
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grg-kit-cli",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "description": "CLI tool for pulling GRG Kit resources into your Angular project",
   "main": "index.js",
   "bin": {

package/scripts/generate-resources.js

@@ -156,7 +156,7 @@ function scanBlockFiles(blockDir, blockName) {
     .sort((a, b) => a.file.localeCompare(b.file));
 }
 
-function generateBlocks(includeFiles = false) {
+function generateBlocks() {
   const blocksDir = path.join(TEMPLATES_DIR, 'ui/blocks');
   const dirs = scanDirectory(blocksDir);
   
@@ -166,22 +166,16 @@ function generateBlocks(includeFiles = false) {
       const blockDir = path.join(blocksDir, dir.name);
       const metadata = readMeta(blockDir) || defaultBlockMeta(dir.name);
       
-      const block = {
+      return {
         name: dir.name,
         title: dir.name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
         description: metadata.description,
         path: `templates/ui/blocks/${dir.name}`,
         defaultOutput: `src/app/blocks/${dir.name}`,
         tags: metadata.tags || [],
-        dependencies: metadata.dependencies || []
+        dependencies: metadata.dependencies || [],
+        files: scanBlockFiles(blockDir, dir.name)  // Always include files
       };
-      
-      // Include file-level details for catalog
-      if (includeFiles) {
-        block.files = scanBlockFiles(blockDir, dir.name);
-      }
-      
-      return block;
     });
 }
 

package/config/.catalog-cache.json

@@ -1 +0,0 @@
-{"timestamp":1765262345803,"data":{"themes":[{"name":"amber-minimal","title":"Amber Minimal","description":"Warm amber accents","file":"amber-minimal.css","tags":["minimal","warm","amber","orange"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/amber-minimal.css","defaultOutput":"src/themes/amber-minimal.css"},{"name":"claude","title":"Claude","description":"Claude-inspired warm tones","file":"claude.css","tags":["warm","orange","brown","claude"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/claude.css","defaultOutput":"src/themes/claude.css"},{"name":"clean-slate","title":"Clean Slate","description":"Minimal grayscale palette","file":"clean-slate.css","tags":["minimal","grayscale","neutral","clean"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/clean-slate.css","defaultOutput":"src/themes/clean-slate.css"},{"name":"grg-theme","title":"Grg Theme","description":"Default theme with purple/orange accents","file":"grg-theme.css","tags":["default","purple","orange","colorful"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/grg-theme.css","defaultOutput":"src/themes/grg-theme.css"},{"name":"mocks","title":"Mocks","description":"Theme for mockups and prototypes","file":"mocks.css","tags":["mockup","prototype","design"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/mocks.css","defaultOutput":"src/themes/mocks.css"},{"name":"modern-minimal","title":"Modern Minimal","description":"Contemporary minimal design","file":"modern-minimal.css","tags":["minimal","modern","contemporary","clean"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/modern-minimal.css","defaultOutput":"src/themes/modern-minimal.css"}],"components":[{"name":"file-upload","title":"File Upload","description":"Drag and drop file upload component","tags":["file","upload","form","drag-drop"],"dependencies":["@spartan-ng/helm/button"],"path":"templates/ui/components/file-upload","defaultOutput":"src/app/components/file-upload"}],"blocks":[{"name":"auth","title":"Auth","description":"Authentication pages (login, signup, forgot password)","tags":["auth","login","signup","authentication","form"],"dependencies":["@spartan-ng/helm/button","@spartan-ng/helm/card","@spartan-ng/helm/form-field"],"files":[{"id":"forgot-password","file":"forgot-password.component.ts","title":"Forgot Password","description":"Forgot Password"},{"id":"login","file":"login.component.ts","title":"Login","description":"Login"},{"id":"register","file":"register.component.ts","title":"Register","description":"Register"}],"path":"templates/ui/blocks/auth","defaultOutput":"src/app/blocks/auth"},{"name":"settings","title":"Settings","description":"Settings pages: profile, notifications, security, danger zone","tags":["settings","preferences","account","profile","security"],"dependencies":["@spartan-ng/helm/button","@spartan-ng/helm/card","@spartan-ng/helm/form-field","@spartan-ng/helm/switch"],"files":[{"id":"danger-zone","file":"danger-zone.component.ts","title":"Danger Zone","description":"Danger Zone"},{"id":"notification","file":"notification-settings.component.ts","title":"Notification Settings","description":"Notification Settings"},{"id":"profile","file":"profile-settings.component.ts","title":"Profile Settings","description":"Profile Settings"},{"id":"security","file":"security-settings.component.ts","title":"Security Settings","description":"Security Settings"}],"path":"templates/ui/blocks/settings","defaultOutput":"src/app/blocks/settings"},{"name":"shell","title":"Shell","description":"Application shell layouts: sidebar, topnav, collapsible - each with optional footer variant","tags":["shell","layout","sidebar","header","footer","navigation","topnav","collapsible"],"dependencies":["@spartan-ng/helm/button","@spartan-ng/helm/icon","@spartan-ng/helm/dropdown-menu"],"files":[{"id":"collapsible-footer","file":"collapsible-shell-footer.component.ts","title":"Collapsible Shell Footer","description":"Collapsible Shell Footer"},{"id":"collapsible","file":"collapsible-shell.component.ts","title":"Collapsible Shell","description":"Collapsible Shell"},{"id":"sidebar-footer","file":"sidebar-shell-footer.component.ts","title":"Sidebar Shell Footer","description":"Sidebar Shell Footer"},{"id":"sidebar","file":"sidebar-shell.component.ts","title":"Sidebar Shell","description":"Sidebar Shell"},{"id":"topnav-footer","file":"topnav-shell-footer.component.ts","title":"Topnav Shell Footer","description":"Topnav Shell Footer"},{"id":"topnav","file":"topnav-shell.component.ts","title":"Topnav Shell","description":"Topnav Shell"}],"path":"templates/ui/blocks/shell","defaultOutput":"src/app/blocks/shell"}]}}

package/config/catalog-fetcher.js

@@ -1,199 +0,0 @@
-/**
- * Dynamic catalog fetcher with caching
- * Fetches catalog.json from GitHub with fallback to static resources
- */
-
-const fs = require('fs');
-const path = require('path');
-const https = require('https');
-
-const REPO = 'Genesis-Research/grg-kit';
-const CATALOG_URL = `https://raw.githubusercontent.com/${REPO}/main/templates/catalog.json`;
-const CACHE_FILE = path.join(__dirname, '.catalog-cache.json');
-const CACHE_TTL_MS = 15 * 60 * 1000; // 15 minutes
-
-// In-memory cache for current session
-let memoryCache = null;
-let memoryCacheTime = 0;
-
-/**
- * Fetch JSON from URL
- */
-function fetchJson(url) {
-  return new Promise((resolve, reject) => {
-    https.get(url, (res) => {
-      if (res.statusCode !== 200) {
-        reject(new Error(`HTTP ${res.statusCode}`));
-        return;
-      }
-
-      let data = '';
-      res.on('data', chunk => data += chunk);
-      res.on('end', () => {
-        try {
-          resolve(JSON.parse(data));
-        } catch (e) {
-          reject(new Error('Invalid JSON'));
-        }
-      });
-    }).on('error', reject);
-  });
-}
-
-/**
- * Read file cache
- */
-function readFileCache() {
-  try {
-    if (fs.existsSync(CACHE_FILE)) {
-      const cached = JSON.parse(fs.readFileSync(CACHE_FILE, 'utf-8'));
-      if (Date.now() - cached.timestamp < CACHE_TTL_MS) {
-        return cached.data;
-      }
-    }
-  } catch (e) {
-    // Cache read failed, ignore
-  }
-  return null;
-}
-
-/**
- * Write file cache
- */
-function writeFileCache(data) {
-  try {
-    fs.writeFileSync(CACHE_FILE, JSON.stringify({
-      timestamp: Date.now(),
-      data
-    }), 'utf-8');
-  } catch (e) {
-    // Cache write failed, ignore
-  }
-}
-
-/**
- * Get static fallback resources
- */
-function getStaticFallback() {
-  try {
-    const { RESOURCES } = require('./resources');
-    return RESOURCES;
-  } catch (e) {
-    return { themes: [], components: [], blocks: [] };
-  }
-}
-
-/**
- * Fetch catalog with caching
- * Priority: memory cache -> file cache -> network -> static fallback
- */
-async function fetchCatalog(options = {}) {
-  const { forceRefresh = false, silent = false } = options;
-
-  // Check memory cache first (fastest)
-  if (!forceRefresh && memoryCache && (Date.now() - memoryCacheTime < CACHE_TTL_MS)) {
-    return memoryCache;
-  }
-
-  // Check file cache
-  if (!forceRefresh) {
-    const fileCached = readFileCache();
-    if (fileCached) {
-      memoryCache = fileCached;
-      memoryCacheTime = Date.now();
-      return fileCached;
-    }
-  }
-
-  // Fetch from network
-  try {
-    const catalog = await fetchJson(CATALOG_URL);
-    
-    // Transform to match expected format
-    const resources = {
-      themes: catalog.themes.map(t => ({
-        ...t,
-        path: `templates/ui/themes/${t.file}`,
-        defaultOutput: `src/themes/${t.file}`
-      })),
-      components: catalog.components.map(c => ({
-        ...c,
-        path: `templates/ui/components/${c.name}`,
-        defaultOutput: `src/app/components/${c.name}`
-      })),
-      blocks: catalog.blocks.map(b => ({
-        ...b,
-        path: `templates/ui/blocks/${b.name}`,
-        defaultOutput: `src/app/blocks/${b.name}`,
-        files: b.files || []
-      }))
-    };
-
-    // Update caches
-    memoryCache = resources;
-    memoryCacheTime = Date.now();
-    writeFileCache(resources);
-
-    return resources;
-  } catch (error) {
-    if (!silent) {
-      console.warn(`Warning: Could not fetch catalog (${error.message}), using cached/static resources`);
-    }
-    
-    // Try file cache even if expired
-    try {
-      if (fs.existsSync(CACHE_FILE)) {
-        const cached = JSON.parse(fs.readFileSync(CACHE_FILE, 'utf-8'));
-        return cached.data;
-      }
-    } catch (e) {
-      // Ignore
-    }
-
-    // Final fallback to static resources
-    return getStaticFallback();
-  }
-}
-
-/**
- * Get resources synchronously (uses cache or static fallback)
- */
-function getResourcesSync() {
-  // Check memory cache
-  if (memoryCache && (Date.now() - memoryCacheTime < CACHE_TTL_MS)) {
-    return memoryCache;
-  }
-
-  // Check file cache
-  const fileCached = readFileCache();
-  if (fileCached) {
-    memoryCache = fileCached;
-    memoryCacheTime = Date.now();
-    return fileCached;
-  }
-
-  // Static fallback
-  return getStaticFallback();
-}
-
-/**
- * Clear all caches
- */
-function clearCache() {
-  memoryCache = null;
-  memoryCacheTime = 0;
-  try {
-    if (fs.existsSync(CACHE_FILE)) {
-      fs.unlinkSync(CACHE_FILE);
-    }
-  } catch (e) {
-    // Ignore
-  }
-}
-
-module.exports = {
-  fetchCatalog,
-  getResourcesSync,
-  clearCache,
-  REPO
-};