@basicbenframework/create 0.1.0

package/template/src/client/pages/FeedPost.jsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, useParams } from '@basicbenframework/core/client'
+import { useTheme } from '../components/ThemeContext'
+import { Card } from '../components/Card'
+import { BackLink } from '../components/BackLink'
+import { Loading } from '../components/Loading'
+import { api } from '../../helpers/api'
+
+export function FeedPost() {
+  const navigate = useNavigate()
+  const params = useParams()
+  const postId = params.id
+  const { t } = useTheme()
+  const [post, setPost] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api(`/api/feed/${postId}`)
+      .then(data => setPost(data.post))
+      .catch(() => navigate('/feed'))
+      .finally(() => setLoading(false))
+  }, [postId])
+
+  if (loading) return <Loading />
+  if (!post) return null
+
+  return (
+    <div>
+      <BackLink onClick={() => navigate('/feed')}>Back to feed</BackLink>
+      <Card className="p-6">
+        <h1 className="text-2xl font-bold mb-2">{post.title}</h1>
+        <p className={`text-sm ${t.subtle} mb-6`}>By {post.author_name} &bull; {new Date(post.created_at).toLocaleDateString()}</p>
+        <p className="whitespace-pre-wrap">{post.content}</p>
+      </Card>
+    </div>
+  )
+}

package/template/src/client/pages/GettingStarted.jsx

@@ -0,0 +1,136 @@
+import { useTheme } from '../components/ThemeContext'
+import { Card } from '../components/Card'
+import { PageHeader } from '../components/PageHeader'
+import { AppLayout } from '../layouts/AppLayout'
+import { DocsLayout } from '../layouts/DocsLayout'
+
+export function GettingStarted() {
+  const { t } = useTheme()
+
+  const devCommands = [
+    { cmd: 'npm run dev', desc: 'Start development server' },
+    { cmd: 'npm run build', desc: 'Build for production' },
+    { cmd: 'npm run build -- --static', desc: 'Build client only (static hosts)' },
+    { cmd: 'npm run start', desc: 'Run production server' },
+    { cmd: 'npm run test', desc: 'Run tests with Vitest' },
+  ]
+
+  const makeCommands = [
+    { cmd: 'npm run make:controller', desc: 'Generate a controller' },
+    { cmd: 'npm run make:model', desc: 'Generate a model' },
+    { cmd: 'npm run make:route', desc: 'Generate a route file' },
+    { cmd: 'npm run make:migration', desc: 'Generate a migration' },
+    { cmd: 'npm run make:middleware', desc: 'Generate middleware' },
+    { cmd: 'npm run make:seed', desc: 'Generate a seeder' },
+  ]
+
+  const dbCommands = [
+    { cmd: 'npm run migrate', desc: 'Run pending migrations' },
+    { cmd: 'npm run migrate:rollback', desc: 'Roll back last batch' },
+    { cmd: 'npm run migrate:fresh', desc: 'Drop all and re-run' },
+    { cmd: 'npm run migrate:status', desc: 'Show migration status' },
+    { cmd: 'npm run db:seed', desc: 'Run database seeders' },
+  ]
+
+  return (
+    <div>
+      <PageHeader title="Getting Started" />
+
+      <div className="space-y-6">
+        <Card>
+          <h2 className="text-lg font-semibold mb-4">Quick Start</h2>
+          <div className={`rounded-lg p-4 font-mono text-sm ${t.card} border ${t.border} overflow-x-auto`}>
+            <div className={t.muted}># Create a new project</div>
+            <div>npx @basicbenframework/create my-app</div>
+            <div className="mt-2" />
+            <div className={t.muted}># Navigate to the project</div>
+            <div>cd my-app</div>
+            <div className="mt-2" />
+            <div className={t.muted}># Start the development server</div>
+            <div>npm run dev</div>
+          </div>
+        </Card>
+
+        <Card>
+          <h2 className="text-lg font-semibold mb-4">Project Structure</h2>
+          <div className={`rounded-lg p-4 font-mono text-sm ${t.card} border ${t.border} overflow-x-auto`}>
+            <pre className={t.text}>{`my-app/
+├── src/
+│   ├── client/           # React frontend
+│   │   ├── components/   # Reusable components
+│   │   └── pages/        # Page components
+│   ├── routes/           # API route files
+│   ├── controllers/      # Business logic
+│   ├── models/           # Database models
+│   └── middleware/       # Route middleware
+├── migrations/           # Database migrations
+├── public/               # Static assets
+└── basicben.config.js    # Framework config`}</pre>
+          </div>
+        </Card>
+
+        <Card>
+          <h2 className="text-lg font-semibold mb-4">CLI Commands</h2>
+
+          <h3 className={`text-sm font-medium mb-2 ${t.muted}`}>Development</h3>
+          <div className="grid gap-2 sm:grid-cols-2 mb-4">
+            {devCommands.map(({ cmd, desc }) => (
+              <div key={cmd} className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
+                <code className="text-sm font-semibold">{cmd}</code>
+                <p className={`text-xs mt-1 ${t.muted}`}>{desc}</p>
+              </div>
+            ))}
+          </div>
+
+          <h3 className={`text-sm font-medium mb-2 ${t.muted}`}>Scaffolding</h3>
+          <div className="grid gap-2 sm:grid-cols-2 mb-4">
+            {makeCommands.map(({ cmd, desc }) => (
+              <div key={cmd} className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
+                <code className="text-sm font-semibold">{cmd}</code>
+                <p className={`text-xs mt-1 ${t.muted}`}>{desc}</p>
+              </div>
+            ))}
+          </div>
+
+          <h3 className={`text-sm font-medium mb-2 ${t.muted}`}>Database</h3>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {dbCommands.map(({ cmd, desc }) => (
+              <div key={cmd} className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
+                <code className="text-sm font-semibold">{cmd}</code>
+                <p className={`text-xs mt-1 ${t.muted}`}>{desc}</p>
+              </div>
+            ))}
+          </div>
+        </Card>
+
+        <Card>
+          <h2 className="text-lg font-semibold mb-4">Resources</h2>
+          <div className="flex flex-wrap gap-3">
+            <a
+              href="https://github.com/BasicBenFramework/basicben-framework"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg ${t.btnSecondary} transition text-sm`}
+            >
+              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+              </svg>
+              GitHub
+            </a>
+            <a
+              href="https://basicben.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg ${t.btnSecondary} transition text-sm`}
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+              </svg>
+              Documentation
+            </a>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/template/src/client/pages/Home.jsx

@@ -0,0 +1,206 @@
+import { useAuth, useNavigate } from '@basicbenframework/core/client'
+import { useTheme } from '../components/ThemeContext'
+import { Card } from '../components/Card'
+import { Button } from '../components/Button'
+import { Avatar } from '../components/Avatar'
+import { Logo } from '../components/Logo'
+
+export function Home() {
+  const { user } = useAuth()
+  const navigate = useNavigate()
+  const { t, dark } = useTheme()
+
+  const features = [
+    {
+      icon: (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </svg>
+      ),
+      title: 'Zero Dependencies',
+      desc: 'No runtime deps. HTTP server, router, JWT, validation — all written from scratch using Node.js built-ins.'
+    },
+    {
+      icon: (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+      ),
+      title: 'Laravel-Inspired DX',
+      desc: 'Migrations, controllers, models, and scaffolding commands. Familiar conventions without the magic.'
+    },
+    {
+      icon: (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
+        </svg>
+      ),
+      title: 'No Lock-in',
+      desc: 'Just React, Node.js, and Vite. You own your stack. Eject anytime — your code is still your code.'
+    },
+    {
+      icon: (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      ),
+      title: 'Escape Hatches',
+      desc: 'Every convention can be overridden via basicben.config.js. Use what works, change what doesn\'t.'
+    }
+  ]
+
+  const comparisons = [
+    { name: 'Next.js / Remix', issue: 'Too much magic, vendor lock-in' },
+    { name: 'Express + Vite', issue: 'Wire everything yourself' },
+    { name: 'BasicBen', issue: 'Conventions + control', highlight: true }
+  ]
+
+  const builtIns = [
+    'JWT authentication',
+    'Password hashing',
+    'Request validation',
+    'Database migrations',
+    'Auto-loading routes',
+    'CLI scaffolding'
+  ]
+
+  return (
+    <div className="space-y-16 py-8">
+      {/* Hero */}
+      <section className="text-center">
+        <div className="flex justify-center mb-6">
+          <Logo className="w-16 h-16" />
+        </div>
+        <p className={`text-xs ${t.subtle} mb-3 tracking-wide uppercase`}>Full-stack React Framework</p>
+        <h1 className="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
+          Ship faster with less
+        </h1>
+        <p className={`${t.muted} max-w-lg mx-auto mb-8 text-lg`}>
+          A productive, convention-driven framework for React apps. Zero runtime dependencies. Maximum clarity.
+        </p>
+        <div className="flex flex-col items-center gap-4">
+          <div className={`px-4 py-3 rounded-lg ${t.card} border ${t.border} font-mono text-sm`}>
+            <span className={t.muted}>$</span> npx @basicbenframework/create my-app
+          </div>
+          <div className="flex gap-3">
+            <Button onClick={() => navigate('/docs')}>Get Started</Button>
+            <Button variant="secondary" onClick={() => window.open('https://github.com/BasicBenFramework/basicben-framework', '_blank')}>
+              GitHub
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* The Problem */}
+      <section>
+        <h2 className={`text-center text-sm font-medium uppercase tracking-wider ${t.muted} mb-6`}>The Problem</h2>
+        <Card>
+          <div className="space-y-3">
+            {comparisons.map(({ name, issue, highlight }) => (
+              <div
+                key={name}
+                className={`flex items-center justify-between p-3 rounded-lg ${
+                  highlight
+                    ? `${dark ? 'bg-white/10' : 'bg-black/10'} border ${t.border}`
+                    : ''
+                }`}
+              >
+                <span className={`font-medium ${highlight ? '' : t.muted}`}>{name}</span>
+                <span className={`text-sm ${highlight ? (dark ? 'text-green-400' : 'text-green-600') : t.subtle}`}>
+                  {highlight ? '✓ ' : ''}{issue}
+                </span>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </section>
+
+      {/* Features */}
+      <section>
+        <h2 className={`text-center text-sm font-medium uppercase tracking-wider ${t.muted} mb-6`}>Why BasicBen</h2>
+        <div className="grid gap-4 sm:grid-cols-2">
+          {features.map(({ icon, title, desc }) => (
+            <Card key={title} className="hover:border-opacity-50 transition">
+              <div className={`inline-flex p-2 rounded-lg ${t.card} border ${t.border} mb-3`}>
+                {icon}
+              </div>
+              <h3 className="font-semibold mb-1">{title}</h3>
+              <p className={`text-sm ${t.muted}`}>{desc}</p>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* Built-in */}
+      <section>
+        <h2 className={`text-center text-sm font-medium uppercase tracking-wider ${t.muted} mb-6`}>Batteries Included</h2>
+        <Card>
+          <p className={`text-sm ${t.muted} mb-4`}>
+            Everything you need to build a production app, without pulling in a dozen packages.
+          </p>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            {builtIns.map(item => (
+              <div
+                key={item}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg ${t.card} border ${t.border} text-sm`}
+              >
+                <svg className={`w-4 h-4 flex-shrink-0 ${dark ? 'text-green-400' : 'text-green-600'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                <span>{item}</span>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </section>
+
+      {/* Code Example */}
+      <section>
+        <h2 className={`text-center text-sm font-medium uppercase tracking-wider ${t.muted} mb-6`}>Clean & Simple</h2>
+        <Card>
+          <div className={`rounded-lg p-4 font-mono text-sm ${dark ? 'bg-black/50' : 'bg-black/5'} border ${t.border} overflow-x-auto`}>
+            <pre className={t.text}>{`// src/routes/posts.js
+import { PostController } from '../controllers/PostController.js'
+import { auth } from '../middleware/auth.js'
+
+export default (router) => {
+  router.get('/api/posts', PostController.index)
+  router.post('/api/posts', auth, PostController.store)
+  router.put('/api/posts/:id', auth, PostController.update)
+  router.delete('/api/posts/:id', auth, PostController.destroy)
+}`}</pre>
+          </div>
+          <p className={`text-sm ${t.muted} mt-3`}>
+            Routes are auto-loaded. Controllers are plain objects. Middleware is just a function. No decorators, no magic.
+          </p>
+        </Card>
+      </section>
+
+      {/* Logged in user card */}
+      {user && (
+        <Card>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Avatar name={user.name} />
+              <div>
+                <p className="font-medium text-sm">{user.name}</p>
+                <p className={`text-xs ${t.subtle}`}>{user.email}</p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="secondary" onClick={() => navigate('/posts')} className="text-xs px-3 py-1.5">My Posts</Button>
+              <Button variant="secondary" onClick={() => navigate('/profile')} className="text-xs px-3 py-1.5">Profile</Button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Footer */}
+      <footer className={`text-center text-xs ${t.subtle} space-y-2`}>
+        <p>Built with Node.js built-ins. Inspired by Laravel.</p>
+        <p>BasicBen v0.1.0</p>
+      </footer>
+    </div>
+  )
+}

package/template/src/client/pages/PostForm.jsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, useParams } from '@basicbenframework/core/client'
+import { PageHeader } from '../components/PageHeader'
+import { BackLink } from '../components/BackLink'
+import { Input } from '../components/Input'
+import { Textarea } from '../components/Textarea'
+import { Button } from '../components/Button'
+import { Loading } from '../components/Loading'
+import { api } from '../../helpers/api'
+import { useToast } from '../contexts/ToastContext'
+
+export function PostForm() {
+  const navigate = useNavigate()
+  const params = useParams()
+  const postId = params.id
+  const toast = useToast()
+  const [form, setForm] = useState({ title: '', content: '', published: false })
+  const [loading, setLoading] = useState(!!postId)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (postId) {
+      api(`/api/posts/${postId}`)
+        .then(data => setForm({ title: data.post.title, content: data.post.content, published: !!data.post.published }))
+        .catch(err => {
+          toast.error(err.message)
+          navigate('/posts')
+        })
+        .finally(() => setLoading(false))
+    }
+  }, [postId])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    try {
+      if (postId) {
+        await api(`/api/posts/${postId}`, { method: 'PUT', body: JSON.stringify(form) })
+        toast.success('Post updated')
+      } else {
+        await api('/api/posts', { method: 'POST', body: JSON.stringify(form) })
+        toast.success('Post created')
+      }
+      navigate('/posts')
+    } catch (err) {
+      toast.error(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <Loading />
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <BackLink onClick={() => navigate('/posts')}>Back to posts</BackLink>
+      <PageHeader title={postId ? 'Edit Post' : 'New Post'} />
+      <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+        <Input placeholder="Title" required value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} />
+        <Textarea placeholder="Write your post content..." required rows={10} value={form.content} onChange={e => setForm({ ...form, content: e.target.value })} />
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={form.published} onChange={e => setForm({ ...form, published: e.target.checked })} className="rounded" />
+          Publish this post
+        </label>
+        <Button type="submit" disabled={saving} className="w-full">{saving ? '...' : postId ? 'Update Post' : 'Create Post'}</Button>
+      </form>
+    </div>
+  )
+}

package/template/src/client/pages/Posts.jsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from '@basicbenframework/core/client'
+import { useTheme } from '../components/ThemeContext'
+import { PageHeader } from '../components/PageHeader'
+import { Card } from '../components/Card'
+import { Button } from '../components/Button'
+import { Loading } from '../components/Loading'
+import { Empty } from '../components/Empty'
+import { api } from '../../helpers/api'
+import { useToast } from '../contexts/ToastContext'
+
+export function Posts() {
+  const navigate = useNavigate()
+  const { t } = useTheme()
+  const toast = useToast()
+  const [posts, setPosts] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const loadPosts = () => api('/api/posts').then(data => setPosts(data.posts)).finally(() => setLoading(false))
+
+  useEffect(() => { loadPosts() }, [])
+
+  const deletePost = async (id) => {
+    if (!confirm('Delete this post?')) return
+    try {
+      await api(`/api/posts/${id}`, { method: 'DELETE' })
+      toast.success('Post deleted')
+      loadPosts()
+    } catch (err) {
+      toast.error(err.message)
+    }
+  }
+
+  if (loading) return <Loading />
+
+  return (
+    <div>
+      <PageHeader title="My Posts" action={<Button onClick={() => navigate('/posts/new')}>New Post</Button>} />
+      {posts.length === 0 ? (
+        <Empty>No posts yet. Create your first one!</Empty>
+      ) : (
+        <div className="space-y-3">
+          {posts.map(post => (
+            <Card key={post.id} className="flex items-center justify-between">
+              <div className="flex-1 min-w-0 mr-4">
+                <h2 className="font-medium truncate">{post.title}</h2>
+                <p className={`text-xs ${t.subtle}`}>{post.published ? 'Published' : 'Draft'} &bull; {new Date(post.created_at).toLocaleDateString()}</p>
+              </div>
+              <div className="flex gap-2">
+                <Button variant="secondary" onClick={() => navigate(`/posts/${post.id}/edit`)} className="text-xs px-3 py-1.5">Edit</Button>
+                <Button variant="danger" onClick={() => deletePost(post.id)} className="text-xs px-3 py-1.5">Delete</Button>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/template/src/client/pages/Profile.jsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { useAuth } from '@basicbenframework/core/client'
+import { PageHeader } from '../components/PageHeader'
+import { Card } from '../components/Card'
+import { Input } from '../components/Input'
+import { Button } from '../components/Button'
+import { api } from '../../helpers/api'
+import { useToast } from '../contexts/ToastContext'
+
+export function Profile() {
+  const { user, setUser } = useAuth()
+  const toast = useToast()
+  const [form, setForm] = useState({ name: user?.name || '', email: user?.email || '' })
+  const [pwForm, setPwForm] = useState({ currentPassword: '', newPassword: '' })
+  const [loading, setLoading] = useState(false)
+
+  const updateProfile = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      const data = await api('/api/profile', { method: 'PUT', body: JSON.stringify(form) })
+      setUser(data.user)
+      toast.success('Profile updated')
+    } catch (err) {
+      toast.error(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const changePassword = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      await api('/api/profile/password', { method: 'PUT', body: JSON.stringify(pwForm) })
+      setPwForm({ currentPassword: '', newPassword: '' })
+      toast.success('Password changed')
+    } catch (err) {
+      toast.error(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="max-w-md mx-auto space-y-6">
+      <PageHeader title="Profile" />
+
+      <Card>
+        <form onSubmit={updateProfile} className="space-y-3">
+          <h2 className="font-medium mb-2">Edit Profile</h2>
+          <Input placeholder="Name" required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
+          <Input type="email" placeholder="Email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
+          <Button type="submit" disabled={loading} className="w-full">{loading ? '...' : 'Save'}</Button>
+        </form>
+      </Card>
+
+      <Card>
+        <form onSubmit={changePassword} className="space-y-3">
+          <h2 className="font-medium mb-2">Change Password</h2>
+          <Input type="password" placeholder="Current password" required value={pwForm.currentPassword} onChange={e => setPwForm({ ...pwForm, currentPassword: e.target.value })} />
+          <Input type="password" placeholder="New password" required minLength={8} value={pwForm.newPassword} onChange={e => setPwForm({ ...pwForm, newPassword: e.target.value })} />
+          <Button type="submit" disabled={loading} className="w-full">{loading ? '...' : 'Change Password'}</Button>
+        </form>
+      </Card>
+    </div>
+  )
+}