// Components
import { Button, Card, Input, Dialog } from '@wiggum/stack'

// Utilities
import { cn } from '@wiggum/stack'

// Hooks
import { useDebounce, useDisclosure } from '@wiggum/stack'

src/
├── main.tsx              # Entry point - DO NOT MODIFY
├── App.tsx               # Root composition only (no business logic)
├── sections/             # Page sections (Hero, Features, etc.)
│   ├── HeroSection.tsx
│   ├── FeaturesSection.tsx
│   └── CTASection.tsx
├── components/           # Project-specific components
└── pages/               # Route pages (if multi-page)

// src/sections/HeroSection.tsx
import { Button } from '@wiggum/stack'

export function HeroSection() {
  return (
    <section className="py-20 px-4 text-center">
      <h1 className="text-4xl font-bold mb-4">
        Build Faster with Wiggum
      </h1>
      <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
        A browser IDE designed for AI agents, not retrofitted for them.
      </p>
      <div className="flex gap-4 justify-center">
        <Button>Get Started</Button>
        <Button variant="outline">Learn More</Button>
      </div>
    </section>
  )
}

import { Button, Input, Label, Card, CardHeader, CardTitle, CardContent } from '@wiggum/stack'

export function LoginForm() {
  return (
    <Card className="w-[400px]">
      <CardHeader>
        <CardTitle>Sign In</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="you@example.com" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" />
        </div>
        <Button className="w-full">Sign In</Button>
      </CardContent>
    </Card>
  )
}

// ❌ BAD: Raw HTML elements
<button onClick={...}>Click</button>
<input type="text" />
<div onClick={...}>Clickable</div>

// ✅ GOOD: Stack components
<Button onClick={...}>Click</Button>
<Input type="text" />
<Button variant="ghost" onClick={...}>Clickable</Button>

// ❌ BAD: Inline styles
<div style={{ display: 'flex', gap: '1rem' }}>

// ✅ GOOD: Tailwind classes
<div className="flex gap-4">

// ❌ BAD: Everything in one file
// App.tsx with 500+ lines

// ✅ GOOD: Split into sections
// App.tsx imports HeroSection, FeaturesSection, etc.

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">