Fix critical CLI bugs: missing templates, dependency resolution, and infinite loop prevention

[Copilot]

Summary

This PR fixes several critical bugs in the Vindsmidi UI CLI that were preventing the core functionality from working properly. The most critical issue was missing template files that rendered component installation completely broken.

Issues Fixed

🚨 Critical: Missing Template Files

The CLI was referencing template files that didn't exist, causing component installation to fail:

# Before fix - components couldn't be installed
$ vui add button
warn Template not found: components/button/button.tsx.template
warn Template not found: components/button/button.types.ts.template
warn Template not found: components/button/variants.ts.template
warn Template not found: components/button/index.ts.template

# After fix - components install successfully
$ vui add button
✔ Resolved 3 items (1 components, 1 utilities, 1 hooks)
success Installed utility: cn
success Installed hook: useFluentButton
success Installed: button.tsx
success Installed: button.types.ts
success Installed: variants.ts
success Installed: index.ts

🔧 Dependency Resolution Not Working

The dependency resolver only handled component dependencies, ignoring utilities and hooks:

// Before: Only resolved components
dependencies: [
  { name: "cn", type: "utility" },           // ❌ Ignored
  { name: "useFluentButton", type: "hook" }  // ❌ Ignored
]

// After: Resolves all dependency types
✔ Resolved 3 items (1 components, 1 utilities, 1 hooks)

⚠️ Potential Infinite Loop

The dependency resolver could run indefinitely with circular dependencies:

// Before: No safeguards
while (hasNewDependencies) {
  // Could loop forever with circular deps
}

// After: Safe with iteration limits
while (hasNewDependencies && iterationCount < maxIterations) {
  // Prevents infinite loops
}

🎨 Logger Import Inconsistency

Unnecessary dual imports affecting performance:

// Before: Importing both libraries
import chalk from "chalk";
import picocolors from "picocolors";

// After: Consistent single library usage
import picocolors from "picocolors";

Changes Made

1. Created Missing Template Files

• ✅ components/button/button.tsx.template
• ✅ components/button/button.types.ts.template
• ✅ components/button/variants.ts.template
• ✅ components/button/index.ts.template
• ✅ components/card/card.tsx.template
• ✅ components/card/card.types.ts.template
• ✅ components/card/index.ts.template
• ✅ utils/cn.ts.template
• ✅ hooks/useFluentButton.ts.template

2. Enhanced Dependency Resolution System

• Created utility and hook registries (src/registry/utilities.ts, src/registry/hooks.ts)
• Enhanced dependency resolver to handle all dependency types
• Fixed Commander.js --no-deps option behavior
• Added proper dependency installation order (utilities → hooks → components)

3. Added Safety Mechanisms

• Added iteration limit (100 max) to prevent infinite loops
• Added circular dependency detection warnings
• Improved error handling and logging

4. Fixed Template Path Resolution

• Corrected __dirname resolution for bundled CLI distribution
• Templates now resolve correctly from dist/ directory

Testing

The CLI now works end-to-end:

# Install single component with dependencies
$ vui add button
✔ Resolved 3 items (1 components, 1 utilities, 1 hooks)

# Install multiple components
$ vui add button card  
✔ Resolved 4 items (2 components, 1 utilities, 1 hooks)

# Skip dependencies when needed
$ vui add button --no-deps
✔ Resolved 1 items (1 components, 0 utilities, 0 hooks)

All generated files are properly structured and follow the Component Shell Pattern with Fluent UI + Tailwind CSS integration.

Impact

This PR transforms the CLI from completely broken to fully functional, enabling developers to:

• ✅ Install UI components with proper templates
• ✅ Automatically resolve and install dependencies
• ✅ Use type-safe component APIs
• ✅ Integrate with existing React/Next.js/Vite projects

The fixes ensure the CLI delivers on its core promise of being a "Fast Fluent UI + Tailwind CSS 4.0 project and component generator."

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.