Fix @hanzo /ui import paths

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

README.bak.md

@@ -0,0 +1,294 @@
+# DevTool Platform Template
+
+A developer tools platform template built with Next.js 15, TypeScript, and @hanzo/ui components for creating modern development utilities.
+
+## Features
+
+- ✨ Built with **@hanzo/ui** component library (shadcn/ui based)
+- 🎨 **Monochromatic color scheme** with developer-focused aesthetics
+- 📱 **Fully responsive** design (mobile, tablet, desktop)
+- 🌙 **Dark mode** support with next-themes
+- 🚀 **Next.js 15** App Router with React 19
+- 🛠️ **Developer-centric** components
+- ⚡ **TypeScript strict mode** enabled
+- 🎯 **Performance optimized** for tool interfaces
+
+## Quick Start
+
+### Installation
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view your dev tool platform.
+
+### Production Build
+
+```bash
+# Create production build
+npm run build
+
+# Start production server
+npm start
+```
+
+## Project Structure
+
+```
+devtool/
+├── app/                  # Next.js App Router
+│   ├── layout.tsx       # Root layout with theming
+│   └── page.tsx         # Landing page
+├── components/          # React components
+│   └── sections/        # Page sections
+│       ├── hero.tsx     # Hero with CTA
+│       └── features.tsx # Feature cards
+├── lib/                 # Utilities and config
+│   └── site.ts          # Site configuration
+├── public/              # Static assets
+└── package.json         # Dependencies
+```
+
+## Component Usage
+
+All components are imported from `@hanzo/ui` with developer-friendly styling:
+
+```tsx
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/components'
+
+// Developer-styled button with monospace font
+<Button size="lg" className="font-mono">
+  npm install @your-tool
+</Button>
+
+// Feature card with technical styling
+<Card className="border-2 hover:border-black dark:hover:border-white">
+  <CardHeader>
+    <CardTitle className="font-mono">Feature Name</CardTitle>
+  </CardHeader>
+  <CardContent>
+    Technical description here
+  </CardContent>
+</Card>
+```
+
+## Customization
+
+### Site Configuration
+
+Edit `lib/site.ts` to customize your dev tool details:
+
+```typescript
+export const siteConfig = {
+  name: "Your Tool Name",
+  tagline: "Your Tool Tagline",
+  description: "What your tool does",
+  url: "https://your-tool.com",
+  features: [
+    "Feature 1",
+    "Feature 2",
+    "Feature 3",
+    "Feature 4"
+  ]
+}
+```
+
+### Styling
+
+The template uses a monochromatic color scheme perfect for developer tools:
+
+- Primary: Black (`#000000`)
+- Secondary: Gray (`#666666`)
+- Accent: Dark gradients for depth
+- Code: Monospace fonts throughout
+- Borders: High contrast for clarity
+
+### Adding Tool Pages
+
+Create new pages for different tools:
+
+```tsx
+// app/editor/page.tsx
+import { Button, Card } from '@hanzo/ui/components'
+
+export default function EditorPage() {
+  return (
+    <div className="container mx-auto py-12">
+      <h1 className="text-4xl font-mono font-bold mb-8">
+        Code Editor
+      </h1>
+      {/* Your editor implementation */}
+    </div>
+  )
+}
+```
+
+## Developer Features
+
+### Code Display Components
+
+```tsx
+// Code block with syntax highlighting
+<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
+  <code className="language-javascript">
+    {codeString}
+  </code>
+</pre>
+
+// Terminal-style output
+<div className="bg-black text-green-400 p-4 font-mono text-sm">
+  $ npm install your-package
+  <br />
+  ✓ Installation complete
+</div>
+```
+
+### API Integration
+
+```tsx
+// Example API endpoint structure
+// app/api/tools/[tool]/route.ts
+export async function POST(request: Request) {
+  const data = await request.json()
+  // Process tool request
+  return Response.json({ result })
+}
+```
+
+### Keyboard Shortcuts
+
+```tsx
+// Example keyboard shortcut handler
+useEffect(() => {
+  const handleKeyPress = (e: KeyboardEvent) => {
+    if (e.metaKey && e.key === 'k') {
+      // Open command palette
+    }
+  }
+  document.addEventListener('keydown', handleKeyPress)
+  return () => document.removeEventListener('keydown', handleKeyPress)
+}, [])
+```
+
+## Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start development server |
+| `npm run build` | Build for production |
+| `npm start` | Start production server |
+| `npm run lint` | Run ESLint |
+
+## Tool Categories
+
+### Supported Tool Types
+- **Code Generators**: Templates, boilerplate, snippets
+- **Testing Tools**: Unit tests, integration tests, E2E
+- **Build Tools**: Bundlers, compilers, transpilers
+- **Documentation**: API docs, README generators
+- **Analysis Tools**: Linters, formatters, profilers
+- **Deployment**: CI/CD, containerization, monitoring
+
+## Environment Variables
+
+Create a `.env.local` file for configuration:
+
+```env
+# Example environment variables
+NEXT_PUBLIC_API_URL=https://api.your-tool.com
+NEXT_PUBLIC_GITHUB_TOKEN=ghp_...
+DATABASE_URL=postgresql://...
+REDIS_URL=redis://...
+```
+
+## Responsive Design
+
+The template adapts to different screen sizes:
+
+```tsx
+// Responsive layout
+<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+  {/* Tool cards */}
+</div>
+
+// Responsive navigation
+<nav className="flex flex-col md:flex-row gap-4">
+  {/* Navigation items */}
+</nav>
+```
+
+## TypeScript
+
+Strict mode is enabled for better type safety:
+
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  }
+}
+```
+
+## Performance Optimization
+
+- Lazy loading for heavy components
+- Code splitting by feature
+- Optimized bundle size
+- Service worker for offline support
+- WebAssembly support for compute-intensive tasks
+
+## Integration Examples
+
+### GitHub Integration
+```tsx
+// Connect to GitHub API
+const octokit = new Octokit({
+  auth: process.env.GITHUB_TOKEN,
+})
+```
+
+### Database Integration
+```tsx
+// Prisma ORM example
+import { PrismaClient } from '@prisma/client'
+const prisma = new PrismaClient()
+```
+
+### Real-time Features
+```tsx
+// WebSocket connection
+const ws = new WebSocket('wss://your-api.com')
+ws.on('message', handleMessage)
+```
+
+## Browser Support
+
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch
+3. Commit your changes
+4. Push to the branch
+5. Create a Pull Request
+
+## License
+
+MIT
+
+## Support
+
+For questions or issues, visit [github.com/hanzoai/templates](https://github.com/hanzoai/templates)

components/sections/features.tsx

@@ -1,5 +1,5 @@
 import { siteConfig } from '@/lib/site'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui/components'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui'
 
 export function Features() {
   return (

components/sections/hero.tsx

@@ -1,5 +1,5 @@
 import { siteConfig } from '@/lib/site'
-import { Button } from '@hanzo/ui/components'
+import { Button } from '@hanzo/ui'
 
 export function Hero() {
   return (