create-mantiq 0.0.1

package/README.md

@@ -0,0 +1,19 @@
+# create-mantiq
+
+Scaffold a new MantiqJS application with one command.
+
+Part of [MantiqJS](https://github.com/abdullahkhan/mantiq) — a batteries-included TypeScript web framework for Bun.
+
+## Installation
+
+```bash
+bun create mantiq my-app
+```
+
+## Documentation
+
+See the [MantiqJS repository](https://github.com/abdullahkhan/mantiq) for full documentation.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "create-mantiq",
+  "version": "0.0.1",
+  "description": "Scaffold a new MantiqJS application",
+  "type": "module",
+  "license": "MIT",
+  "author": "Abdullah Khan",
+  "homepage": "https://github.com/abdullahkhan/mantiq/tree/main/packages/create-mantiq",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/abdullahkhan/mantiq.git",
+    "directory": "packages/create-mantiq"
+  },
+  "bugs": {
+    "url": "https://github.com/abdullahkhan/mantiq/issues"
+  },
+  "keywords": [
+    "mantiq",
+    "mantiqjs",
+    "bun",
+    "typescript",
+    "framework",
+    "create-mantiq"
+  ],
+  "engines": {
+    "bun": ">=1.1.0"
+  },
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "bin": {
+    "create-mantiq": "./src/index.ts"
+  },
+  "files": [
+    "src/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bun build ./src/index.ts --outdir ./dist --target bun",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "bun-types": "latest",
+    "typescript": "^5.7.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,179 @@
+#!/usr/bin/env bun
+import { existsSync, mkdirSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { randomBytes } from 'node:crypto'
+import { getTemplates } from './templates.ts'
+
+// ── ANSI helpers ─────────────────────────────────────────────────────────────
+const bold = (s: string) => `\x1b[1m${s}\x1b[0m`
+const green = (s: string) => `\x1b[32m${s}\x1b[0m`
+const cyan = (s: string) => `\x1b[36m${s}\x1b[0m`
+const dim = (s: string) => `\x1b[2m${s}\x1b[0m`
+const red = (s: string) => `\x1b[31m${s}\x1b[0m`
+
+// ── Parse args ───────────────────────────────────────────────────────────────
+const rawArgs = process.argv.slice(2)
+const flags: Record<string, string | boolean> = {}
+const positional: string[] = []
+
+for (const arg of rawArgs) {
+  if (arg.startsWith('--')) {
+    const body = arg.slice(2)
+    const eqIdx = body.indexOf('=')
+    if (eqIdx !== -1) {
+      flags[body.slice(0, eqIdx)] = body.slice(eqIdx + 1)
+    } else {
+      flags[body] = true
+    }
+  } else if (!arg.startsWith('-')) {
+    positional.push(arg)
+  }
+}
+
+const projectName = positional[0]
+const noGit = !!flags['no-git']
+const kit = flags['kit'] as string | undefined
+const validKits = ['react', 'vue', 'svelte'] as const
+type Kit = typeof validKits[number]
+
+if (!projectName) {
+  console.log(`
+  ${bold('create-mantiq')} — Scaffold a new MantiqJS application
+
+  ${bold('Usage:')}
+    bun create mantiq ${cyan('<project-name>')} [options]
+
+  ${bold('Options:')}
+    --kit=${cyan('react|vue|svelte')}    Add a frontend starter kit
+    --no-git                   Skip git initialization
+
+  ${bold('Examples:')}
+    bun create mantiq my-app
+    bun create mantiq my-app --kit=react
+    bun create mantiq my-app --kit=vue
+    bun create mantiq my-app --kit=svelte
+`)
+  process.exit(1)
+}
+
+if (kit && !validKits.includes(kit as Kit)) {
+  console.error(`\n  ${red('ERROR')}  Invalid kit "${kit}". Valid options: ${validKits.join(', ')}\n`)
+  process.exit(1)
+}
+
+const projectDir = resolve(process.cwd(), projectName)
+
+if (existsSync(projectDir)) {
+  console.error(`\n  ${red('ERROR')}  Directory "${projectName}" already exists.\n`)
+  process.exit(1)
+}
+
+// ── Generate ─────────────────────────────────────────────────────────────────
+const kitLabel = kit ? ` with ${bold(kit)} starter kit` : ''
+console.log(`\n  ${bold('Creating')} ${cyan(projectName)}${kitLabel}...\n`)
+
+const appKey = `base64:${randomBytes(32).toString('base64')}`
+const templates = getTemplates({ name: projectName, appKey, kit: kit as Kit | undefined })
+
+// Write all files
+const files = Object.keys(templates).sort()
+for (const relativePath of files) {
+  const fullPath = `${projectDir}/${relativePath}`
+  mkdirSync(dirname(fullPath), { recursive: true })
+  await Bun.write(fullPath, templates[relativePath]!)
+
+  const display = relativePath.endsWith('.gitkeep') ? dim(relativePath) : green(relativePath)
+  console.log(`    ${green('+')} ${display}`)
+}
+
+// ── Install dependencies ─────────────────────────────────────────────────────
+console.log(`\n  ${bold('Installing dependencies...')}\n`)
+
+const install = Bun.spawn(['bun', 'install'], {
+  cwd: projectDir,
+  stdout: 'inherit',
+  stderr: 'inherit',
+})
+await install.exited
+
+// ── Build frontend (if kit) ─────────────────────────────────────────────────
+if (kit) {
+  console.log(`\n  ${bold('Building frontend assets...')}\n`)
+
+  // Client build
+  const viteBuild = Bun.spawn(['npx', 'vite', 'build'], {
+    cwd: projectDir,
+    stdout: 'inherit',
+    stderr: 'inherit',
+  })
+  await viteBuild.exited
+
+  // SSR build
+  const ssrEntry = kit === 'react' ? 'src/ssr.tsx' : 'src/ssr.ts'
+  console.log(`\n  ${bold('Building SSR bundle...')}\n`)
+
+  const ssrBuild = Bun.spawn(['npx', 'vite', 'build', '--ssr', ssrEntry, '--outDir', 'bootstrap/ssr'], {
+    cwd: projectDir,
+    stdout: 'inherit',
+    stderr: 'inherit',
+  })
+  await ssrBuild.exited
+}
+
+// ── Git init ─────────────────────────────────────────────────────────────────
+if (!noGit) {
+  const gitInit = Bun.spawn(['git', 'init'], {
+    cwd: projectDir,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  })
+  await gitInit.exited
+
+  const gitAdd = Bun.spawn(['git', 'add', '-A'], {
+    cwd: projectDir,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  })
+  await gitAdd.exited
+
+  const gitCommit = Bun.spawn(['git', 'commit', '-m', 'Initial commit — scaffolded with create-mantiq'], {
+    cwd: projectDir,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  })
+  await gitCommit.exited
+
+  console.log(`  ${dim('Initialized git repository.')}`)
+}
+
+// ── Done ─────────────────────────────────────────────────────────────────────
+const frontendSteps = kit
+  ? `    ${cyan('bun run')} dev:frontend     ${dim('# start Vite dev server (in a second terminal)')}\n`
+  : ''
+
+console.log(`
+  ${green('✓')} ${bold('Created')} ${cyan(projectName)} ${bold('successfully!')}
+
+  ${bold('Next steps:')}
+
+    ${cyan('cd')} ${projectName}
+    ${cyan('bun mantiq')} migrate       ${dim('# run database migrations')}
+    ${cyan('bun run')} dev              ${dim('# start development server')}
+${frontendSteps}    ${cyan('bun mantiq')} tinker        ${dim('# interactive REPL')}
+
+  ${bold('Included packages:')}
+
+    ${dim('core · database · auth · validation · filesystem · logging')}
+    ${dim('events · queue · realtime · heartbeat · helpers · cli')}
+
+  ${bold('Useful commands:')}
+
+    ${cyan('bun mantiq')} route:list    ${dim('# list all registered routes')}
+    ${cyan('bun mantiq')} queue:work    ${dim('# start processing queued jobs')}
+    ${cyan('bun mantiq')} make:model    ${dim('# generate a new model')}
+    ${cyan('bun mantiq')} make:job      ${dim('# generate a new job class')}
+
+  ${dim('Dashboard: http://localhost:3000/_heartbeat')}
+
+  ${dim('Happy building!')}
+`)

package/src/kits/react.ts

@@ -0,0 +1,368 @@
+import type { TemplateContext } from '../templates.ts'
+
+export function getReactTemplates(ctx: TemplateContext): Record<string, string> {
+  return {
+    'vite.config.ts': `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  publicDir: false,
+  build: {
+    outDir: 'public/build',
+    manifest: true,
+    emptyOutDir: true,
+    rollupOptions: {
+      input: ['src/main.tsx', 'src/style.css'],
+    },
+  },
+})
+`,
+
+    'src/style.css': `@import "tailwindcss";
+`,
+
+    'src/pages.ts': `import Login from './pages/Login.tsx'
+import Register from './pages/Register.tsx'
+import Dashboard from './pages/Dashboard.tsx'
+
+export const pages: Record<string, React.ComponentType<any>> = {
+  Login,
+  Register,
+  Dashboard,
+}
+`,
+
+    'src/lib/api.ts': `export async function api<T = any>(url: string, opts: RequestInit = {}): Promise<{ ok: boolean; status: number; data: T }> {
+  const res = await fetch(url, { ...opts, headers: { Accept: 'application/json', ...opts.headers } })
+  const data = res.headers.get('content-type')?.includes('json') ? await res.json() : null
+  return { ok: res.ok, status: res.status, data }
+}
+
+export function post(url: string, body: object) {
+  return api(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+}
+`,
+
+    'src/main.tsx': `import './style.css'
+import { hydrateRoot, createRoot } from 'react-dom/client'
+import { MantiqApp } from './App.tsx'
+import { pages } from './pages.ts'
+
+const root = document.getElementById('app')!
+const app = <MantiqApp pages={pages} />
+
+// Hydrate if SSR content exists, otherwise CSR mount
+root.innerHTML.trim() ? hydrateRoot(root, app) : createRoot(root).render(app)
+`,
+
+    'src/ssr.tsx': `import { renderToString } from 'react-dom/server'
+import { MantiqApp } from './App.tsx'
+import { pages } from './pages.ts'
+
+export function render(_url: string, data?: Record<string, any>) {
+  return { html: renderToString(<MantiqApp pages={pages} initialData={data} />) }
+}
+`,
+
+    'src/App.tsx': `import { useState, useCallback, useEffect } from 'react'
+
+interface MantiqAppProps {
+  pages: Record<string, React.ComponentType<any>>
+  initialData?: Record<string, any>
+}
+
+export function MantiqApp({ pages, initialData }: MantiqAppProps) {
+  const windowData = typeof window !== 'undefined' ? (window as any).__MANTIQ_DATA__ : {}
+  const initial = initialData ?? windowData
+  const [page, setPage] = useState<string>(initial._page ?? 'Login')
+  const [data, setData] = useState<Record<string, any>>(initial)
+
+  const navigate = useCallback(async (href: string) => {
+    const res = await fetch(href, {
+      headers: { 'X-Mantiq': 'true', Accept: 'application/json' },
+    })
+    const newData = await res.json()
+    setPage(newData._page)
+    setData(newData)
+    history.pushState(null, '', newData._url)
+  }, [])
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      const anchor = (e.target as HTMLElement).closest('a')
+      const href = anchor?.getAttribute('href')
+      if (!href?.startsWith('/') || anchor?.target || e.ctrlKey || e.metaKey) return
+      e.preventDefault()
+      navigate(href)
+    }
+    const handlePop = () => navigate(location.pathname)
+    document.addEventListener('click', handleClick)
+    window.addEventListener('popstate', handlePop)
+    return () => {
+      document.removeEventListener('click', handleClick)
+      window.removeEventListener('popstate', handlePop)
+    }
+  }, [navigate])
+
+  const Page = pages[page]
+  return Page ? <Page {...data} navigate={navigate} /> : null
+}
+`,
+
+    'src/pages/Login.tsx': `import { useState } from 'react'
+import { post } from '../lib/api.ts'
+
+interface LoginProps {
+  appName?: string
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Login({ appName = '${ctx.name}', navigate }: LoginProps) {
+  const [email, setEmail] = useState('admin@example.com')
+  const [password, setPassword] = useState('password')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault(); setError(''); setLoading(true)
+    const { ok, data } = await post('/login', { email, password })
+    if (ok) navigate('/dashboard')
+    else setError(data?.error ?? 'Login failed')
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-950 flex">
+      <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-indigo-950 via-gray-950 to-gray-950 items-center justify-center p-16 relative overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_40%,rgba(99,102,241,0.08),transparent_60%)]" />
+        <div className="relative space-y-6 max-w-md">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center">
+              <svg className="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <span className="text-2xl font-bold text-white">{appName}</span>
+          </div>
+          <h2 className="text-4xl font-bold text-white leading-tight">Build something<br />amazing.</h2>
+          <p className="text-gray-400 text-lg leading-relaxed">
+            Session auth, encrypted cookies, CSRF protection — all wired up and ready to go.
+          </p>
+        </div>
+      </div>
+      <div className="flex-1 flex items-center justify-center p-8">
+        <div className="bg-gray-900 rounded-xl border border-gray-800 w-full max-w-md p-8 space-y-6">
+          <div>
+            <h1 className="text-xl font-bold text-white">Welcome back</h1>
+            <p className="text-sm text-gray-500 mt-1">Sign in to your account</p>
+          </div>
+          {error && <div className="bg-red-500/10 border border-red-500/30 text-red-400 rounded-lg px-3.5 py-2.5 text-sm">{error}</div>}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-400">Email</label>
+              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required
+                className="w-full bg-gray-900 border border-gray-800 rounded-lg px-3.5 py-2.5 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30 transition-all" />
+            </div>
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-400">Password</label>
+              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required
+                className="w-full bg-gray-900 border border-gray-800 rounded-lg px-3.5 py-2.5 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30 transition-all" />
+            </div>
+            <button type="submit" disabled={loading}
+              className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold text-sm py-2.5 rounded-lg transition-colors">
+              Sign in
+            </button>
+          </form>
+          <p className="text-sm text-gray-500 text-center">
+            Don't have an account? <a href="/register" className="text-indigo-400 hover:text-indigo-300">Register</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+`,
+
+    'src/pages/Register.tsx': `import { useState } from 'react'
+import { post } from '../lib/api.ts'
+
+interface RegisterProps {
+  appName?: string
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Register({ appName = '${ctx.name}', navigate }: RegisterProps) {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault(); setError(''); setLoading(true)
+    const { ok, data } = await post('/register', { name, email, password })
+    if (ok) navigate('/dashboard')
+    else setError(data?.error?.message ?? data?.error ?? 'Registration failed')
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-950 flex">
+      <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-indigo-950 via-gray-950 to-gray-950 items-center justify-center p-16 relative overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_40%,rgba(99,102,241,0.08),transparent_60%)]" />
+        <div className="relative space-y-6 max-w-md">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center">
+              <svg className="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <span className="text-2xl font-bold text-white">{appName}</span>
+          </div>
+          <h2 className="text-4xl font-bold text-white leading-tight">Build something<br />amazing.</h2>
+          <p className="text-gray-400 text-lg leading-relaxed">
+            Session auth, encrypted cookies, CSRF protection — all wired up and ready to go.
+          </p>
+        </div>
+      </div>
+      <div className="flex-1 flex items-center justify-center p-8">
+        <div className="bg-gray-900 rounded-xl border border-gray-800 w-full max-w-md p-8 space-y-6">
+          <div>
+            <h1 className="text-xl font-bold text-white">Create an account</h1>
+            <p className="text-sm text-gray-500 mt-1">Get started with {appName}</p>
+          </div>
+          {error && <div className="bg-red-500/10 border border-red-500/30 text-red-400 rounded-lg px-3.5 py-2.5 text-sm">{error}</div>}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-400">Name</label>
+              <input value={name} onChange={(e) => setName(e.target.value)} required
+                className="w-full bg-gray-900 border border-gray-800 rounded-lg px-3.5 py-2.5 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30 transition-all" />
+            </div>
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-400">Email</label>
+              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required
+                className="w-full bg-gray-900 border border-gray-800 rounded-lg px-3.5 py-2.5 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30 transition-all" />
+            </div>
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-400">Password</label>
+              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required
+                className="w-full bg-gray-900 border border-gray-800 rounded-lg px-3.5 py-2.5 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30 transition-all" />
+            </div>
+            <button type="submit" disabled={loading}
+              className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold text-sm py-2.5 rounded-lg transition-colors">
+              Create account
+            </button>
+          </form>
+          <p className="text-sm text-gray-500 text-center">
+            Already have an account? <a href="/login" className="text-indigo-400 hover:text-indigo-300">Sign in</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+`,
+
+    'src/pages/Dashboard.tsx': `import { useState, useEffect, useCallback } from 'react'
+import { api, post } from '../lib/api.ts'
+
+interface User { id: number; name: string; email: string; role: string }
+
+interface DashboardProps {
+  appName?: string
+  currentUser?: User | null
+  users?: User[]
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Dashboard({ appName = '${ctx.name}', currentUser, users: initialUsers, navigate }: DashboardProps) {
+  const [users, setUsers] = useState<User[]>(initialUsers ?? [])
+  const [loading, setLoading] = useState(!initialUsers?.length)
+
+  const fetchUsers = useCallback(async () => {
+    setLoading(true)
+    const { ok, data } = await api('/api/users')
+    if (ok) setUsers(data.data ?? [])
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (!initialUsers?.length) fetchUsers()
+  }, [fetchUsers, initialUsers])
+
+  const handleLogout = async () => {
+    await post('/logout', {})
+    navigate('/login')
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-gray-100">
+      <nav className="border-b border-gray-800/80 bg-gray-950/90 backdrop-blur-md sticky top-0 z-20">
+        <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-lg bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center">
+              <svg className="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <span className="text-sm font-bold text-white">{appName}</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-gray-400">{currentUser?.name}</span>
+            <button onClick={handleLogout}
+              className="text-xs text-gray-500 hover:text-white bg-gray-900 hover:bg-gray-800 border border-gray-800 rounded-lg px-3 py-1.5 transition-colors">
+              Logout
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-6">
+        <div>
+          <h1 className="text-xl font-bold text-white">Dashboard</h1>
+          <p className="text-sm text-gray-500 mt-1">Welcome back, {currentUser?.name}.</p>
+        </div>
+
+        <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+          <div className="px-5 py-4 border-b border-gray-800 flex items-center justify-between">
+            <h2 className="text-sm font-bold text-gray-200">Users</h2>
+            <span className="text-xs text-gray-500">{loading ? 'Loading...' : \`\${users.length} total\`}</span>
+          </div>
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-gray-800 text-left text-xs text-gray-500 uppercase tracking-wider">
+                <th className="px-5 py-3 font-medium">Name</th>
+                <th className="px-5 py-3 font-medium">Email</th>
+                <th className="px-5 py-3 font-medium">Role</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-800/60">
+              {users.map((u) => (
+                <tr key={u.id} className="hover:bg-gray-900/50 transition-colors">
+                  <td className="px-5 py-3 text-gray-200">{u.name}</td>
+                  <td className="px-5 py-3 text-gray-400">{u.email}</td>
+                  <td className="px-5 py-3">
+                    <span className={\`text-[10px] px-2 py-0.5 rounded-full font-medium \${
+                      u.role === 'admin' ? 'bg-purple-500/15 text-purple-300 border border-purple-500/20' : 'bg-gray-800 text-gray-400 border border-gray-700'
+                    }\`}>{u.role}</span>
+                  </td>
+                </tr>
+              ))}
+              {users.length === 0 && !loading && (
+                <tr><td colSpan={3} className="px-5 py-8 text-center text-gray-600">No users found</td></tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  )
+}
+`,
+  }
+}