create-mantiq 0.7.0 → 0.7.2

package/stubs/themes/minimal/react/src/pages/Login.tsx.stub

@@ -0,0 +1,95 @@
+import { useState } from 'react'
+import { post } from '../lib/api.ts'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+interface LoginProps {
+  appName?: string
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Login({ appName = 'Mantiq', navigate }: LoginProps) {
+  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('/login', { email, password })
+    if (ok) navigate('/dashboard')
+    else setError(data?.error ?? 'Invalid credentials.')
+    setLoading(false)
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background px-4">
+      <div className="w-full max-w-[320px]">
+        {/* Logo — just text, minimal */}
+        <div className="mb-10">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded bg-foreground text-background text-xs font-bold">
+              M
+            </div>
+            <span className="text-sm font-semibold tracking-tight">{appName}</span>
+          </div>
+        </div>
+
+        <h1 className="text-sm font-medium mb-6">Sign in to continue</h1>
+
+        {error && (
+          <div className="mb-4 text-sm text-destructive">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <div className="space-y-1.5">
+            <Label htmlFor="email" className="text-xs text-muted-foreground">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              placeholder="you@example.com"
+              autoComplete="email"
+              className="h-8 text-sm"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="password" className="text-xs text-muted-foreground">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              placeholder="••••••••"
+              autoComplete="current-password"
+              className="h-8 text-sm"
+            />
+          </div>
+          <Button type="submit" className="w-full h-8 text-sm" disabled={loading}>
+            {loading ? 'Signing in…' : 'Continue'}
+          </Button>
+        </form>
+
+        <p className="mt-4 text-xs text-muted-foreground">
+          No account?{' '}
+          <button
+            type="button"
+            className="text-foreground hover:underline underline-offset-2"
+            onClick={() => navigate('/register')}
+          >
+            Create one
+          </button>
+        </p>
+      </div>
+    </div>
+  )
+}

package/stubs/themes/minimal/react/src/pages/Register.tsx.stub

@@ -0,0 +1,73 @@
+import { useState } from 'react'
+import { post } from '../lib/api.ts'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+interface RegisterProps {
+  appName?: string
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Register({ appName = 'Mantiq', 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 ?? 'Registration failed.')
+    setLoading(false)
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background px-4">
+      <div className="w-full max-w-[320px]">
+        <div className="mb-10">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded bg-foreground text-background text-xs font-bold">
+              M
+            </div>
+            <span className="text-sm font-semibold tracking-tight">{appName}</span>
+          </div>
+        </div>
+
+        <h1 className="text-sm font-medium mb-6">Create your account</h1>
+
+        {error && (
+          <div className="mb-4 text-sm text-destructive">{error}</div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <div className="space-y-1.5">
+            <Label htmlFor="name" className="text-xs text-muted-foreground">Name</Label>
+            <Input id="name" value={name} onChange={(e) => setName(e.target.value)} required placeholder="Your name" className="h-8 text-sm" />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="email" className="text-xs text-muted-foreground">Email</Label>
+            <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required placeholder="you@example.com" autoComplete="email" className="h-8 text-sm" />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="password" className="text-xs text-muted-foreground">Password</Label>
+            <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="••••••••" className="h-8 text-sm" />
+          </div>
+          <Button type="submit" className="w-full h-8 text-sm" disabled={loading}>
+            {loading ? 'Creating…' : 'Create account'}
+          </Button>
+        </form>
+
+        <p className="mt-4 text-xs text-muted-foreground">
+          Already have an account?{' '}
+          <button type="button" className="text-foreground hover:underline underline-offset-2" onClick={() => navigate('/login')}>Sign in</button>
+        </p>
+      </div>
+    </div>
+  )
+}

package/stubs/themes/minimal/react/src/style.css.stub

@@ -0,0 +1,142 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * shadcn/ui theme — Minimal
+ *
+ * Sharp, flat, dense. Zero border radius. Cards blend into background.
+ * Hairline borders, no shadows. Monospace numbers. Inspired by Linear/GitHub.
+ */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0px;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0.004 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.004 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.004 285.823);
+  --primary: oklch(0.546 0.245 262.881);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0.001 286.375);
+  --secondary-foreground: oklch(0.205 0.006 285.885);
+  --muted: oklch(0.97 0.001 286.375);
+  --muted-foreground: oklch(0.556 0.014 285.938);
+  --accent: oklch(0.97 0.001 286.375);
+  --accent-foreground: oklch(0.205 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.94 0.002 286.32);
+  --input: oklch(0.94 0.002 286.32);
+  --ring: oklch(0.546 0.245 262.881);
+  --chart-1: oklch(0.546 0.245 262.881);
+  --chart-2: oklch(0.6 0.118 184.714);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.99 0 0);
+  --sidebar-foreground: oklch(0.145 0.004 285.823);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.205 0.006 285.885);
+  --sidebar-border: oklch(0.94 0.002 286.32);
+  --sidebar-ring: oklch(0.546 0.245 262.881);
+}
+
+.dark {
+  --background: oklch(0.13 0.004 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.13 0.004 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.155 0.004 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.623 0.214 262.881);
+  --primary-foreground: oklch(0.13 0.004 285.823);
+  --secondary: oklch(0.2 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.2 0.006 286.033);
+  --muted-foreground: oklch(0.63 0.014 286.067);
+  --accent: oklch(0.2 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.704 0.191 22.216);
+  --border: oklch(0.22 0.005 286.033);
+  --input: oklch(0.22 0.005 286.033);
+  --ring: oklch(0.623 0.214 262.881);
+  --chart-1: oklch(0.623 0.214 262.881);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.13 0.004 285.823);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.623 0.214 262.881);
+  --sidebar-primary-foreground: oklch(0.13 0.004 285.823);
+  --sidebar-accent: oklch(0.2 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.22 0.005 286.033);
+  --sidebar-ring: oklch(0.623 0.214 262.881);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "ss01", "ss02", "cv01";
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+/* Monospace tabular figures for numbers */
+.font-mono-num {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.3s ease-out; }

package/stubs/themes/minimal/svelte/src/pages/Dashboard.svelte.stub

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import AuthenticatedLayout from '$lib/components/layout/AuthenticatedLayout.svelte'
+  import Header from '$lib/components/layout/Header.svelte'
+  import Main from '$lib/components/layout/Main.svelte'
+  import {
+    Circle,
+    CheckCircle2,
+    ArrowUpRight,
+    Clock,
+    AlertCircle,
+    Minus,
+  } from 'lucide-svelte'
+
+  interface Props {
+    appName?: string
+    currentUser?: { id: number; name: string; email: string; role: string } | null
+    navigate?: (href: string) => void
+  }
+  let { appName = 'Mantiq', currentUser = null, navigate = () => {} }: Props = $props()
+
+  type Priority = 'urgent' | 'high' | 'medium' | 'low' | 'none'
+  type Status = 'done' | 'in-progress' | 'todo' | 'backlog'
+
+  const issues: {
+    id: string
+    title: string
+    status: Status
+    priority: Priority
+    assignee: string
+    updated: string
+  }[] = [
+    { id: 'MNT-142', title: 'Fix authentication token refresh race condition', status: 'in-progress', priority: 'urgent', assignee: 'AK', updated: '2m' },
+    { id: 'MNT-141', title: 'Add rate limiting to public API endpoints', status: 'todo', priority: 'high', assignee: 'SC', updated: '15m' },
+    { id: 'MNT-140', title: 'Migrate user sessions to Redis store', status: 'in-progress', priority: 'high', assignee: 'AK', updated: '1h' },
+    { id: 'MNT-139', title: 'Update Stripe webhook handler for v2024-12', status: 'todo', priority: 'medium', assignee: 'JL', updated: '2h' },
+    { id: 'MNT-138', title: 'Implement CSV export for analytics dashboard', status: 'done', priority: 'medium', assignee: 'NR', updated: '3h' },
+    { id: 'MNT-137', title: 'Add OpenTelemetry tracing to queue workers', status: 'backlog', priority: 'low', assignee: 'SC', updated: '5h' },
+    { id: 'MNT-136', title: 'Refactor notification preferences into per-channel config', status: 'done', priority: 'medium', assignee: 'AK', updated: '6h' },
+    { id: 'MNT-135', title: 'Set up staging environment with seed data', status: 'backlog', priority: 'low', assignee: 'JL', updated: '1d' },
+    { id: 'MNT-134', title: 'Write integration tests for payment flow', status: 'todo', priority: 'high', assignee: 'NR', updated: '1d' },
+    { id: 'MNT-133', title: 'Audit and update npm dependencies', status: 'backlog', priority: 'none', assignee: 'SC', updated: '2d' },
+  ]
+
+  const priorityColors: Record<Priority, string> = {
+    urgent: 'bg-red-500',
+    high: 'bg-orange-500',
+    medium: 'bg-yellow-500',
+    low: 'bg-blue-400',
+    none: 'bg-muted-foreground/30',
+  }
+
+  function isPriorityBarActive(priority: Priority, index: number): boolean {
+    return (
+      (priority === 'urgent' && index <= 3) ||
+      (priority === 'high' && index <= 2) ||
+      (priority === 'medium' && index <= 1) ||
+      (priority === 'low' && index <= 0)
+    )
+  }
+
+  const doneCount = issues.filter((i) => i.status === 'done').length
+  const inProgressCount = issues.filter((i) => i.status === 'in-progress').length
+  const todoCount = issues.filter((i) => i.status === 'todo').length
+</script>
+
+<AuthenticatedLayout {currentUser} {appName} {navigate} activePath="/dashboard">
+  <Header {navigate} />
+  <Main>
+    <div class="space-y-1">
+      <!-- Compact header row -->
+      <div class="flex items-center justify-between py-3">
+        <div class="flex items-center gap-6">
+          <h2 class="text-sm font-semibold">My Issues</h2>
+          <div class="flex items-center gap-4 text-xs text-muted-foreground">
+            <span class="flex items-center gap-1.5">
+              <Clock class="h-3 w-3 text-amber-500" />
+              {inProgressCount} in progress
+            </span>
+            <span class="flex items-center gap-1.5">
+              <Circle class="h-3 w-3" />
+              {todoCount} todo
+            </span>
+            <span class="flex items-center gap-1.5">
+              <CheckCircle2 class="h-3 w-3 text-primary" />
+              {doneCount} done
+            </span>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+            <span class="text-xs">&#8984;</span>K
+          </kbd>
+        </div>
+      </div>
+
+      <!-- Issue list — no cards, just rows -->
+      <div class="border-t">
+        {#each issues as issue (issue.id)}
+          <div class="group flex items-center gap-3 border-b px-1 py-2 transition-colors hover:bg-muted/50 cursor-default">
+            <!-- Priority indicator -->
+            <div class="flex items-center gap-0.5" title={issue.priority}>
+              {#each [0, 1, 2, 3] as i}
+                <div
+                  class="h-2.5 w-[3px] rounded-[1px] {isPriorityBarActive(issue.priority, i)
+                    ? priorityColors[issue.priority]
+                    : 'bg-muted-foreground/15'}"
+                ></div>
+              {/each}
+            </div>
+
+            <!-- Status icon -->
+            {#if issue.status === 'done'}
+              <CheckCircle2 class="h-3.5 w-3.5 text-primary" />
+            {:else if issue.status === 'in-progress'}
+              <Clock class="h-3.5 w-3.5 text-amber-500" />
+            {:else if issue.status === 'todo'}
+              <Circle class="h-3.5 w-3.5 text-muted-foreground" />
+            {:else}
+              <Minus class="h-3.5 w-3.5 text-muted-foreground/50" />
+            {/if}
+
+            <span class="font-mono-num text-xs text-muted-foreground w-16 shrink-0">
+              {issue.id}
+            </span>
+            <span class="flex-1 text-sm truncate {issue.status === 'done' ? 'line-through text-muted-foreground' : ''}">
+              {issue.title}
+            </span>
+            <div class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground">
+              {issue.assignee}
+            </div>
+            <span class="font-mono-num text-xs text-muted-foreground w-8 text-right shrink-0">
+              {issue.updated}
+            </span>
+            <ArrowUpRight class="h-3.5 w-3.5 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors shrink-0" />
+          </div>
+        {/each}
+      </div>
+
+      <!-- Bottom counts -->
+      <div class="flex items-center justify-between pt-2 text-xs text-muted-foreground">
+        <span>{issues.length} issues</span>
+        <span class="flex items-center gap-1">
+          <AlertCircle class="h-3 w-3" />
+          {issues.filter((i) => i.priority === 'urgent').length} urgent
+        </span>
+      </div>
+    </div>
+  </Main>
+</AuthenticatedLayout>

package/stubs/themes/minimal/svelte/src/pages/Login.svelte.stub

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { post } from '$lib/api'
+  import { Button } from '$lib/components/ui/button'
+  import { Input } from '$lib/components/ui/input'
+  import { Label } from '$lib/components/ui/label'
+
+  interface Props {
+    appName?: string
+    navigate?: (href: string) => void
+  }
+  let { appName = 'Mantiq', navigate = () => {} }: Props = $props()
+
+  let email = $state('')
+  let password = $state('')
+  let error = $state('')
+  let loading = $state(false)
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    error = ''
+    loading = true
+    const { ok, data } = await post('/login', { email, password })
+    if (ok) navigate('/dashboard')
+    else error = data?.error ?? 'Invalid credentials.'
+    loading = false
+  }
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center bg-background px-4">
+  <div class="w-full max-w-[320px]">
+    <!-- Logo — just text, minimal -->
+    <div class="mb-10">
+      <div class="flex items-center gap-2">
+        <div class="flex h-7 w-7 items-center justify-center rounded bg-foreground text-background text-xs font-bold">
+          M
+        </div>
+        <span class="text-sm font-semibold tracking-tight">{appName}</span>
+      </div>
+    </div>
+
+    <h1 class="text-sm font-medium mb-6">Sign in to continue</h1>
+
+    {#if error}
+      <div class="mb-4 text-sm text-destructive">
+        {error}
+      </div>
+    {/if}
+
+    <form onsubmit={handleSubmit} class="space-y-3">
+      <div class="space-y-1.5">
+        <Label for="email" class="text-xs text-muted-foreground">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          bind:value={email}
+          required
+          placeholder="you@example.com"
+          autocomplete="email"
+          class="h-8 text-sm"
+        />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="password" class="text-xs text-muted-foreground">Password</Label>
+        <Input
+          id="password"
+          type="password"
+          bind:value={password}
+          required
+          placeholder="••••••••"
+          autocomplete="current-password"
+          class="h-8 text-sm"
+        />
+      </div>
+      <Button type="submit" class="w-full h-8 text-sm" disabled={loading}>
+        {loading ? 'Signing in…' : 'Continue'}
+      </Button>
+    </form>
+
+    <p class="mt-4 text-xs text-muted-foreground">
+      No account?{' '}
+      <button
+        type="button"
+        class="text-foreground hover:underline underline-offset-2"
+        onclick={() => navigate('/register')}
+      >
+        Create one
+      </button>
+    </p>
+  </div>
+</div>

package/stubs/themes/minimal/svelte/src/pages/Register.svelte.stub

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { post } from '$lib/api'
+  import { Button } from '$lib/components/ui/button'
+  import { Input } from '$lib/components/ui/input'
+  import { Label } from '$lib/components/ui/label'
+
+  interface Props {
+    appName?: string
+    navigate?: (href: string) => void
+  }
+  let { appName = 'Mantiq', navigate = () => {} }: Props = $props()
+
+  let name = $state('')
+  let email = $state('')
+  let password = $state('')
+  let error = $state('')
+  let loading = $state(false)
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    error = ''
+    loading = true
+    const { ok, data } = await post('/register', { name, email, password })
+    if (ok) navigate('/dashboard')
+    else error = data?.error ?? 'Registration failed.'
+    loading = false
+  }
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center bg-background px-4">
+  <div class="w-full max-w-[320px]">
+    <div class="mb-10">
+      <div class="flex items-center gap-2">
+        <div class="flex h-7 w-7 items-center justify-center rounded bg-foreground text-background text-xs font-bold">
+          M
+        </div>
+        <span class="text-sm font-semibold tracking-tight">{appName}</span>
+      </div>
+    </div>
+
+    <h1 class="text-sm font-medium mb-6">Create your account</h1>
+
+    {#if error}
+      <div class="mb-4 text-sm text-destructive">{error}</div>
+    {/if}
+
+    <form onsubmit={handleSubmit} class="space-y-3">
+      <div class="space-y-1.5">
+        <Label for="name" class="text-xs text-muted-foreground">Name</Label>
+        <Input id="name" bind:value={name} required placeholder="Your name" class="h-8 text-sm" />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="email" class="text-xs text-muted-foreground">Email</Label>
+        <Input id="email" type="email" bind:value={email} required placeholder="you@example.com" autocomplete="email" class="h-8 text-sm" />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="password" class="text-xs text-muted-foreground">Password</Label>
+        <Input id="password" type="password" bind:value={password} required placeholder="••••••••" class="h-8 text-sm" />
+      </div>
+      <Button type="submit" class="w-full h-8 text-sm" disabled={loading}>
+        {loading ? 'Creating…' : 'Create account'}
+      </Button>
+    </form>
+
+    <p class="mt-4 text-xs text-muted-foreground">
+      Already have an account?{' '}
+      <button type="button" class="text-foreground hover:underline underline-offset-2" onclick={() => navigate('/login')}>Sign in</button>
+    </p>
+  </div>
+</div>