create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/react/src/pages/Users.tsx.stub

@@ -0,0 +1,426 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { api, post, put, del } from '../lib/api.ts'
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface UserType {
+  id: number
+  name: string
+  email: string
+  status: string
+  created_at: string
+}
+
+interface UsersProps {
+  appName?: string
+  currentUser?: { id: number; name: string; email: string } | null
+  users?: UserType[]
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+// ---------------------------------------------------------------------------
+// Mock data
+// ---------------------------------------------------------------------------
+
+const mockUsers: UserType[] = [
+  { id: 1, name: 'Olivia Martin', email: 'olivia@example.com', status: 'active', created_at: '2024-01-15' },
+  { id: 2, name: 'Jackson Lee', email: 'jackson@example.com', status: 'active', created_at: '2024-02-20' },
+  { id: 3, name: 'Isabella Nguyen', email: 'isabella@example.com', status: 'active', created_at: '2024-02-28' },
+  { id: 4, name: 'William Kim', email: 'william@example.com', status: 'active', created_at: '2024-03-05' },
+  { id: 5, name: 'Sofia Davis', email: 'sofia@example.com', status: 'inactive', created_at: '2024-03-12' },
+  { id: 6, name: 'Liam Johnson', email: 'liam@example.com', status: 'active', created_at: '2024-03-20' },
+  { id: 7, name: 'Emma Wilson', email: 'emma@example.com', status: 'active', created_at: '2024-04-01' },
+  { id: 8, name: 'Noah Brown', email: 'noah@example.com', status: 'inactive', created_at: '2024-04-10' },
+  { id: 9, name: 'Ava Garcia', email: 'ava@example.com', status: 'active', created_at: '2024-04-18' },
+  { id: 10, name: 'Ethan Martinez', email: 'ethan@example.com', status: 'active', created_at: '2024-05-02' },
+]
+
+function getInitials(name: string): string {
+  return name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2)
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function UsersPage({
+  appName = 'MantiqJS',
+  currentUser,
+  users: initialUsers,
+  navigate,
+}: UsersProps) {
+  const [users, setUsers] = useState<UserType[]>(() => {
+    if (initialUsers && initialUsers.length > 0) {
+      return initialUsers.map((u) => ({
+        ...u,
+        status: (u as any).status ?? 'active',
+        created_at: u.created_at ?? '',
+      }))
+    }
+    return mockUsers
+  })
+  const [loading, setLoading] = useState(false)
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+  const [page, setPage] = useState(1)
+  const [perPage, setPerPage] = useState(10)
+  const [total, setTotal] = useState(0)
+  const [filteredTotal, setFilteredTotal] = useState(0)
+  const [sortKey, setSortKey] = useState<string>('created_at')
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
+
+  // CRUD modal state
+  const [modalType, setModalType] = useState<'add' | 'edit' | 'delete' | null>(null)
+  const [selectedUser, setSelectedUser] = useState<UserType | null>(null)
+
+  // Debounce search
+  useEffect(() => {
+    const timer = setTimeout(() => { setDebouncedSearch(search); setPage(1) }, 300)
+    return () => clearTimeout(timer)
+  }, [search])
+
+  // Fetch users
+  const fetchUsers = useCallback(async () => {
+    setLoading(true)
+    const params = new URLSearchParams({
+      page: String(page),
+      per_page: String(perPage),
+      sort: sortKey,
+      dir: sortDir,
+    })
+    if (debouncedSearch) params.set('search', debouncedSearch)
+
+    const { ok, data } = await api(`/api/users?${params}`)
+    if (ok && data) {
+      setUsers(
+        (data.data as any[]).map((u: any) => ({
+          id: u.id, name: u.name, email: u.email,
+          status: u.status ?? 'active',
+          created_at: u.created_at ?? '',
+        })),
+      )
+      if (data.meta) {
+        setTotal(data.meta.total)
+        setFilteredTotal(data.meta.filtered_total)
+      }
+    }
+    setLoading(false)
+  }, [page, perPage, debouncedSearch, sortKey, sortDir])
+
+  useEffect(() => { fetchUsers() }, [fetchUsers])
+
+  const totalPages = Math.max(1, Math.ceil(filteredTotal / perPage))
+
+  function handleSort(key: string) {
+    if (sortKey === key) {
+      setSortDir(d => d === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDir('asc')
+    }
+    setPage(1)
+  }
+
+  function SortIcon({ column }: { column: string }) {
+    if (sortKey !== column) return <span className="ml-1 text-gray-300 dark:text-gray-600">&updownarrow;</span>
+    return <span className="ml-1">{sortDir === 'asc' ? '\u2191' : '\u2193'}</span>
+  }
+
+  return (
+    <AuthenticatedLayout currentUser={currentUser} appName={appName} navigate={navigate} activePath="/users">
+      <Header fixed navigate={navigate} />
+      <Main>
+        <div className="space-y-4">
+          {/* Title row */}
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-50">User List</h2>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {total > 0 ? `${total} users total.` : 'Manage your users here.'}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => { setSelectedUser(null); setModalType('add') }}
+              className="inline-flex items-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-emerald-700"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM20 8v6M23 11h-6" />
+              </svg>
+              Add User
+            </button>
+          </div>
+
+          {/* Search */}
+          <div className="relative w-full sm:max-w-[250px]">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400">
+              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+            </svg>
+            <input
+              placeholder="Filter users..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="h-8 w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 text-sm outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900"
+            />
+          </div>
+
+          {/* Table */}
+          <div className="overflow-hidden rounded-md border border-gray-200 dark:border-gray-800">
+            <table className="w-full text-sm">
+              <thead className="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
+                <tr>
+                  <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">
+                    <button type="button" className="inline-flex items-center hover:text-gray-900 dark:hover:text-gray-50" onClick={() => handleSort('name')}>
+                      User<SortIcon column="name" />
+                    </button>
+                  </th>
+                  <th className="hidden px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400 sm:table-cell">
+                    <button type="button" className="inline-flex items-center hover:text-gray-900 dark:hover:text-gray-50" onClick={() => handleSort('status')}>
+                      Status<SortIcon column="status" />
+                    </button>
+                  </th>
+                  <th className="hidden px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400 lg:table-cell">
+                    <button type="button" className="inline-flex items-center hover:text-gray-900 dark:hover:text-gray-50" onClick={() => handleSort('created_at')}>
+                      Created<SortIcon column="created_at" />
+                    </button>
+                  </th>
+                  <th className="w-10 px-4 py-3" />
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+                {loading && Array.from({ length: perPage }).map((_, i) => (
+                  <tr key={`skel-${i}`}>
+                    <td className="px-4 py-3"><div className="h-4 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-800" /></td>
+                    <td className="hidden px-4 py-3 sm:table-cell"><div className="h-4 w-16 animate-pulse rounded bg-gray-200 dark:bg-gray-800" /></td>
+                    <td className="hidden px-4 py-3 lg:table-cell"><div className="h-4 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-800" /></td>
+                    <td className="px-4 py-3" />
+                  </tr>
+                ))}
+                {!loading && users.map((u) => (
+                  <tr key={u.id} className="hover:bg-gray-50 dark:hover:bg-gray-900/50">
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-3">
+                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs font-semibold text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                          {getInitials(u.name)}
+                        </div>
+                        <div className="min-w-0">
+                          <div className="truncate font-medium text-gray-900 dark:text-gray-50">{u.name}</div>
+                          <div className="truncate text-xs text-gray-500 dark:text-gray-400">{u.email}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="hidden px-4 py-3 sm:table-cell">
+                      <span className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium capitalize ${
+                        u.status === 'active'
+                          ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400'
+                          : 'border border-gray-200 text-gray-500 dark:border-gray-700 dark:text-gray-400'
+                      }`}>
+                        {u.status}
+                      </span>
+                    </td>
+                    <td className="hidden px-4 py-3 text-gray-500 dark:text-gray-400 lg:table-cell">
+                      {u.created_at ? new Date(u.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '\u2014'}
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-1">
+                        <button
+                          type="button"
+                          onClick={() => { setSelectedUser(u); setModalType('edit') }}
+                          className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                          title="Edit"
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+                            <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                          </svg>
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => { setSelectedUser(u); setModalType('delete') }}
+                          className="rounded p-1 text-gray-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950 dark:hover:text-red-400"
+                          title="Delete"
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+                            <path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+                          </svg>
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+                {!loading && users.length === 0 && (
+                  <tr>
+                    <td colSpan={4} className="px-4 py-12 text-center text-sm text-gray-500 dark:text-gray-400">
+                      {search ? 'No users match the current filters.' : 'No users found.'}
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm text-gray-500 dark:text-gray-400">{filteredTotal} row(s) total.</p>
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-gray-500 dark:text-gray-400">Rows per page</span>
+                <select
+                  value={perPage}
+                  onChange={(e) => { setPerPage(Number(e.target.value)); setPage(1) }}
+                  className="h-8 w-16 rounded-md border border-gray-200 bg-white px-2 text-sm dark:border-gray-700 dark:bg-gray-900"
+                >
+                  <option value={10}>10</option>
+                  <option value={20}>20</option>
+                  <option value={50}>50</option>
+                </select>
+              </div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Page {page} of {totalPages}</span>
+              <div className="flex items-center gap-1">
+                <button type="button" disabled={page === 1} onClick={() => setPage(1)} className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 text-gray-500 transition-colors hover:bg-gray-100 disabled:opacity-50 dark:border-gray-700 dark:hover:bg-gray-800">&laquo;</button>
+                <button type="button" disabled={page === 1} onClick={() => setPage(p => p - 1)} className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 text-gray-500 transition-colors hover:bg-gray-100 disabled:opacity-50 dark:border-gray-700 dark:hover:bg-gray-800">&lsaquo;</button>
+                <button type="button" disabled={page === totalPages} onClick={() => setPage(p => p + 1)} className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 text-gray-500 transition-colors hover:bg-gray-100 disabled:opacity-50 dark:border-gray-700 dark:hover:bg-gray-800">&rsaquo;</button>
+                <button type="button" disabled={page === totalPages} onClick={() => setPage(totalPages)} className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 text-gray-500 transition-colors hover:bg-gray-100 disabled:opacity-50 dark:border-gray-700 dark:hover:bg-gray-800">&raquo;</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Modals */}
+        {modalType && (
+          <ModalBackdrop onClose={() => setModalType(null)}>
+            {modalType === 'add' && <AddUserModal onClose={() => setModalType(null)} onSuccess={fetchUsers} />}
+            {modalType === 'edit' && selectedUser && <EditUserModal user={selectedUser} onClose={() => setModalType(null)} onSuccess={fetchUsers} />}
+            {modalType === 'delete' && selectedUser && <DeleteUserModal user={selectedUser} onClose={() => setModalType(null)} onSuccess={fetchUsers} />}
+          </ModalBackdrop>
+        )}
+      </Main>
+    </AuthenticatedLayout>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Modal primitives
+// ---------------------------------------------------------------------------
+
+function ModalBackdrop({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={(e) => { if (e.target === e.currentTarget) onClose() }}>
+      <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-xl dark:border-gray-700 dark:bg-gray-900" onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function AddUserModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
+  const [form, setForm] = useState({ name: '', email: '', password: '' })
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSubmitting(true); setError('')
+    const { ok, data } = await post('/api/users', form)
+    if (ok) { onClose(); onSuccess() }
+    else setError(data?.error ?? 'Request failed')
+    setSubmitting(false)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">Add User</h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Create a new user account.</p>
+      </div>
+      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-gray-900 dark:text-gray-50">Name</label>
+        <input value={form.name} onChange={(e) => setForm(f => ({ ...f, name: e.target.value }))} required className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm outline-none ring-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-800" />
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-gray-900 dark:text-gray-50">Email</label>
+        <input type="email" value={form.email} onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))} required className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm outline-none ring-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-800" />
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-gray-900 dark:text-gray-50">Password</label>
+        <input type="password" value={form.password} onChange={(e) => setForm(f => ({ ...f, password: e.target.value }))} required className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm outline-none ring-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-800" />
+      </div>
+      <div className="flex justify-end gap-2 pt-2">
+        <button type="button" onClick={onClose} className="rounded-md border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Cancel</button>
+        <button type="submit" disabled={submitting} className="rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50">{submitting ? 'Creating...' : 'Create'}</button>
+      </div>
+    </form>
+  )
+}
+
+function EditUserModal({ user, onClose, onSuccess }: { user: UserType; onClose: () => void; onSuccess: () => void }) {
+  const [form, setForm] = useState({ name: user.name, email: user.email })
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSubmitting(true); setError('')
+    const { ok, data } = await put(`/api/users/${user.id}`, form)
+    if (ok) { onClose(); onSuccess() }
+    else setError(data?.error ?? 'Request failed')
+    setSubmitting(false)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">Edit User</h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Update user details for {user.name}.</p>
+      </div>
+      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-gray-900 dark:text-gray-50">Name</label>
+        <input value={form.name} onChange={(e) => setForm(f => ({ ...f, name: e.target.value }))} required className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm outline-none ring-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-800" />
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-gray-900 dark:text-gray-50">Email</label>
+        <input type="email" value={form.email} onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))} required className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm outline-none ring-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-800" />
+      </div>
+      <div className="flex justify-end gap-2 pt-2">
+        <button type="button" onClick={onClose} className="rounded-md border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Cancel</button>
+        <button type="submit" disabled={submitting} className="rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50">{submitting ? 'Saving...' : 'Save'}</button>
+      </div>
+    </form>
+  )
+}
+
+function DeleteUserModal({ user, onClose, onSuccess }: { user: UserType; onClose: () => void; onSuccess: () => void }) {
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  async function handleDelete() {
+    setSubmitting(true); setError('')
+    const { ok, data } = await del(`/api/users/${user.id}`)
+    if (ok) { onClose(); onSuccess() }
+    else setError(data?.error ?? 'Request failed')
+    setSubmitting(false)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">Are you sure?</h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          This will permanently delete <span className="font-medium text-gray-900 dark:text-gray-50">{user.name}</span> ({user.email}). This action cannot be undone.
+        </p>
+      </div>
+      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      <div className="flex justify-end gap-2 pt-2">
+        <button type="button" onClick={onClose} className="rounded-md border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Cancel</button>
+        <button type="button" disabled={submitting} onClick={handleDelete} className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 disabled:opacity-50">{submitting ? 'Deleting...' : 'Delete'}</button>
+      </div>
+    </div>
+  )
+}

package/stubs/tailwind-only/react/src/pages/account/layout.tsx.stub

@@ -0,0 +1,64 @@
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import { cn } from '@/lib/utils'
+
+interface AccountLayoutProps {
+  children: React.ReactNode
+  appName?: string
+  currentUser?: any
+  navigate: (href: string) => void
+  activePath: string
+}
+
+const sidebarNav = [
+  { title: 'Profile', href: '/account/profile', iconPath: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z' },
+  { title: 'Security', href: '/account/security', iconPath: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4' },
+  { title: 'Preferences', href: '/account/preferences', iconPath: 'M12 2a10 10 0 0 0 0 20 2 2 0 0 0 2-2v-.09a1.65 1.65 0 0 1 3 0v.09a2 2 0 0 0 2 2h.44A10 10 0 0 0 12 2z' },
+]
+
+export function AccountLayout({ children, appName, currentUser, navigate, activePath }: AccountLayoutProps) {
+  return (
+    <AuthenticatedLayout currentUser={currentUser} appName={appName} navigate={navigate} activePath={activePath}>
+      <Header fixed navigate={navigate}>
+        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-50">Settings</h1>
+      </Header>
+      <Main>
+        <div className="space-y-0.5">
+          <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-50">Settings</h2>
+          <p className="text-gray-500 dark:text-gray-400">
+            Manage your account settings and preferences.
+          </p>
+        </div>
+        <div className="my-6 h-px bg-gray-200 dark:bg-gray-800" />
+        <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+          <aside className="lg:w-48">
+            <nav className="flex space-x-2 overflow-x-auto lg:flex-col lg:space-x-0 lg:space-y-1">
+              {sidebarNav.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  onClick={(e) => { e.preventDefault(); navigate(item.href) }}
+                  className={cn(
+                    'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                    activePath === item.href
+                      ? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50'
+                      : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-50',
+                  )}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+                    {item.iconPath.split(' M').map((d, i) => (
+                      <path key={i} d={i === 0 ? d : `M${d}`} />
+                    ))}
+                  </svg>
+                  {item.title}
+                </a>
+              ))}
+            </nav>
+          </aside>
+          <div className="flex-1 lg:max-w-2xl">{children}</div>
+        </div>
+      </Main>
+    </AuthenticatedLayout>
+  )
+}

package/stubs/tailwind-only/react/src/pages/account/preferences.tsx.stub

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { AccountLayout } from './layout.tsx'
+
+interface PreferencesProps {
+  appName?: string
+  currentUser?: { id: number; name: string; email: string } | null
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Preferences({ appName, currentUser, navigate }: PreferencesProps) {
+  const [theme, setTheme] = useState<'light' | 'dark' | 'system'>(() => {
+    if (typeof localStorage === 'undefined') return 'system'
+    return (localStorage.getItem('theme') as any) ?? 'system'
+  })
+
+  const applyTheme = (t: 'light' | 'dark' | 'system') => {
+    setTheme(t)
+    if (t === 'system') {
+      localStorage.removeItem('theme')
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      document.documentElement.classList.toggle('dark', prefersDark)
+    } else {
+      localStorage.setItem('theme', t)
+      document.documentElement.classList.toggle('dark', t === 'dark')
+    }
+  }
+
+  const themes = [
+    { value: 'light' as const, label: 'Light', description: 'A clean, bright appearance.' },
+    { value: 'dark' as const, label: 'Dark', description: 'Easy on the eyes in low light.' },
+    { value: 'system' as const, label: 'System', description: 'Follows your operating system setting.' },
+  ]
+
+  return (
+    <AccountLayout appName={appName} currentUser={currentUser} navigate={navigate} activePath="/account/preferences">
+      <div className="space-y-8">
+        <div>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-50">Preferences</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Customize the appearance and behavior of the app.
+          </p>
+        </div>
+
+        {/* Theme */}
+        <div className="space-y-3">
+          <label className="text-sm font-medium text-gray-900 dark:text-gray-50">Theme</label>
+          <p className="text-sm text-gray-500 dark:text-gray-400">Select your preferred theme.</p>
+          <div className="grid grid-cols-3 gap-3">
+            {themes.map(t => (
+              <button
+                key={t.value}
+                type="button"
+                onClick={() => applyTheme(t.value)}
+                className={`rounded-lg border p-4 text-left text-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 ${
+                  theme === t.value
+                    ? 'border-gray-900 dark:border-gray-50'
+                    : 'border-gray-200 dark:border-gray-700'
+                }`}
+              >
+                <div className="font-medium text-gray-900 dark:text-gray-50">{t.label}</div>
+                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">{t.description}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Language */}
+        <div className="space-y-3">
+          <label className="text-sm font-medium text-gray-900 dark:text-gray-50">Language</label>
+          <p className="text-sm text-gray-500 dark:text-gray-400">Select the language for the interface.</p>
+          <button type="button" disabled className="inline-flex w-48 items-center justify-between rounded-md border border-gray-200 px-3 py-2 text-sm text-gray-500 opacity-50 dark:border-gray-700 dark:text-gray-400">
+            English
+            <span className="text-xs">Default</span>
+          </button>
+        </div>
+      </div>
+    </AccountLayout>
+  )
+}

package/stubs/tailwind-only/react/src/pages/account/profile.tsx.stub

@@ -0,0 +1,67 @@
+import { useState } from 'react'
+import { AccountLayout } from './layout.tsx'
+
+interface ProfileProps {
+  appName?: string
+  currentUser?: { id: number; name: string; email: string } | null
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Profile({ appName, currentUser, navigate }: ProfileProps) {
+  const [name, setName] = useState(currentUser?.name ?? '')
+  const [email, setEmail] = useState(currentUser?.email ?? '')
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    await new Promise(r => setTimeout(r, 500))
+    setSaving(false)
+    setSaved(true)
+    setTimeout(() => setSaved(false), 3000)
+  }
+
+  return (
+    <AccountLayout appName={appName} currentUser={currentUser} navigate={navigate} activePath="/account/profile">
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-50">Profile</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            This is how others will see you on the site.
+          </p>
+        </div>
+        <form onSubmit={handleSave} className="space-y-6">
+          <div className="space-y-2">
+            <label htmlFor="name" className="text-sm font-medium text-gray-900 dark:text-gray-50">Name</label>
+            <input
+              id="name"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900"
+            />
+            <p className="text-xs text-gray-500 dark:text-gray-400">This is your public display name.</p>
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="email" className="text-sm font-medium text-gray-900 dark:text-gray-50">Email</label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900"
+            />
+            <p className="text-xs text-gray-500 dark:text-gray-400">Your email address is used for notifications.</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <button type="submit" disabled={saving} className="rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50">
+              {saving ? 'Saving...' : 'Update profile'}
+            </button>
+            {saved && <span className="text-sm text-gray-500 dark:text-gray-400">Saved.</span>}
+          </div>
+        </form>
+      </div>
+    </AccountLayout>
+  )
+}