create-mantiq 0.7.0 → 0.7.2

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

@@ -0,0 +1,131 @@
+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'
+import { Hand, AlertTriangle } from 'lucide-react'
+
+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 email or password.')
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 dark:from-stone-950 dark:via-stone-900 dark:to-stone-950">
+      {/* Top bar */}
+      <div className="flex items-center justify-between px-6 py-4">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold shadow-sm">
+            M
+          </div>
+          <span className="font-semibold tracking-tight">{appName}</span>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-sm"
+          onClick={() => navigate('/register')}
+        >
+          Create account
+        </Button>
+      </div>
+
+      {/* Centered content */}
+      <div className="flex flex-col items-center justify-center px-4" style={{ minHeight: 'calc(100vh - 64px)' }}>
+        <div className="w-full max-w-sm">
+          <div className="mb-6 text-center">
+            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10">
+              <Hand className="h-7 w-7 text-primary" />
+            </div>
+            <h1 className="text-2xl font-bold tracking-tight">Welcome back</h1>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Log in to your {appName} workspace
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-4 flex items-center gap-2 rounded-xl bg-red-50 dark:bg-red-950/20 border border-red-200/50 dark:border-red-800/30 px-4 py-3 text-sm text-red-700 dark:text-red-400">
+              <AlertTriangle className="h-4 w-4 shrink-0" />
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="you@example.com"
+                autoComplete="email"
+                className="h-11 rounded-xl"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                placeholder="Enter your password"
+                autoComplete="current-password"
+                className="h-11 rounded-xl"
+              />
+            </div>
+            <Button type="submit" className="w-full h-11 rounded-xl text-sm font-medium" disabled={loading}>
+              {loading ? 'Logging in…' : 'Continue with email'}
+            </Button>
+          </form>
+
+          {/* Divider */}
+          <div className="my-6 flex items-center gap-4">
+            <div className="h-px flex-1 bg-border" />
+            <span className="text-xs text-muted-foreground select-none">or</span>
+            <div className="h-px flex-1 bg-border" />
+          </div>
+
+          {/* Social buttons */}
+          <div className="space-y-2.5">
+            <Button variant="outline" className="w-full h-11 rounded-xl gap-2.5 text-sm" disabled>
+              <svg className="h-4 w-4" viewBox="0 0 24 24">
+                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1Z" fill="#4285F4" />
+                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23Z" fill="#34A853" />
+                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62Z" fill="#FBBC05" />
+                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53Z" fill="#EA4335" />
+              </svg>
+              Continue with Google
+            </Button>
+            <Button variant="outline" className="w-full h-11 rounded-xl gap-2.5 text-sm" disabled>
+              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z" />
+              </svg>
+              Continue with GitHub
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,82 @@
+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'
+import { Rocket, AlertTriangle } from 'lucide-react'
+
+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="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 dark:from-stone-950 dark:via-stone-900 dark:to-stone-950">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold shadow-sm">M</div>
+          <span className="font-semibold tracking-tight">{appName}</span>
+        </div>
+        <Button variant="ghost" size="sm" className="text-sm" onClick={() => navigate('/login')}>Sign in</Button>
+      </div>
+
+      <div className="flex flex-col items-center justify-center px-4" style={{ minHeight: 'calc(100vh - 64px)' }}>
+        <div className="w-full max-w-sm">
+          <div className="mb-6 text-center">
+            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10">
+              <Rocket className="h-7 w-7 text-primary" />
+            </div>
+            <h1 className="text-2xl font-bold tracking-tight">Get started</h1>
+            <p className="mt-2 text-sm text-muted-foreground">Create your {appName} workspace</p>
+          </div>
+
+          {error && (
+            <div className="mb-4 flex items-center gap-2 rounded-xl bg-red-50 dark:bg-red-950/20 border border-red-200/50 dark:border-red-800/30 px-4 py-3 text-sm text-red-700 dark:text-red-400">
+              <AlertTriangle className="h-4 w-4 shrink-0" /> {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" value={name} onChange={(e) => setName(e.target.value)} required placeholder="Your name" className="h-11 rounded-xl" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required placeholder="you@example.com" autoComplete="email" className="h-11 rounded-xl" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Min 8 characters" className="h-11 rounded-xl" />
+            </div>
+            <Button type="submit" className="w-full h-11 rounded-xl text-sm font-medium" disabled={loading}>
+              {loading ? 'Creating…' : 'Create workspace'}
+            </Button>
+          </form>
+
+          <p className="mt-6 text-center text-xs text-muted-foreground">
+            By continuing, you agree to our Terms of Service and Privacy Policy.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,138 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * shadcn/ui theme — Workspace
+ *
+ * Warm, spacious, friendly. Very round corners (1rem). Warm stone/amber tones.
+ * Soft card shadows, cream-tinted background. Inspired by Notion.
+ */
+
+@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: 1rem;
+  --background: oklch(0.988 0.005 75);
+  --foreground: oklch(0.216 0.006 56.043);
+  --card: oklch(0.997 0.003 75);
+  --card-foreground: oklch(0.216 0.006 56.043);
+  --popover: oklch(0.997 0.003 75);
+  --popover-foreground: oklch(0.216 0.006 56.043);
+  --primary: oklch(0.705 0.168 41.3);
+  --primary-foreground: oklch(0.995 0.001 75);
+  --secondary: oklch(0.955 0.01 67);
+  --secondary-foreground: oklch(0.29 0.008 56);
+  --muted: oklch(0.955 0.01 67);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.955 0.01 67);
+  --accent-foreground: oklch(0.29 0.008 56);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.915 0.012 67);
+  --input: oklch(0.915 0.012 67);
+  --ring: oklch(0.705 0.168 41.3);
+  --chart-1: oklch(0.705 0.168 41.3);
+  --chart-2: oklch(0.65 0.14 55);
+  --chart-3: oklch(0.6 0.118 184.714);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.97 0.008 67);
+  --sidebar-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-primary: oklch(0.705 0.168 41.3);
+  --sidebar-primary-foreground: oklch(0.995 0.001 75);
+  --sidebar-accent: oklch(0.94 0.014 67);
+  --sidebar-accent-foreground: oklch(0.29 0.008 56);
+  --sidebar-border: oklch(0.915 0.012 67);
+  --sidebar-ring: oklch(0.705 0.168 41.3);
+}
+
+.dark {
+  --background: oklch(0.155 0.008 49.25);
+  --foreground: oklch(0.96 0.007 67);
+  --card: oklch(0.185 0.008 49.25);
+  --card-foreground: oklch(0.96 0.007 67);
+  --popover: oklch(0.185 0.008 49.25);
+  --popover-foreground: oklch(0.96 0.007 67);
+  --primary: oklch(0.745 0.178 41.3);
+  --primary-foreground: oklch(0.155 0.008 49.25);
+  --secondary: oklch(0.25 0.008 49.25);
+  --secondary-foreground: oklch(0.96 0.007 67);
+  --muted: oklch(0.25 0.008 49.25);
+  --muted-foreground: oklch(0.64 0.013 58.071);
+  --accent: oklch(0.25 0.008 49.25);
+  --accent-foreground: oklch(0.96 0.007 67);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.704 0.191 22.216);
+  --border: oklch(0.28 0.008 49.25);
+  --input: oklch(0.28 0.008 49.25);
+  --ring: oklch(0.745 0.178 41.3);
+  --chart-1: oklch(0.745 0.178 41.3);
+  --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.165 0.008 49.25);
+  --sidebar-foreground: oklch(0.96 0.007 67);
+  --sidebar-primary: oklch(0.745 0.178 41.3);
+  --sidebar-primary-foreground: oklch(0.155 0.008 49.25);
+  --sidebar-accent: oklch(0.25 0.008 49.25);
+  --sidebar-accent-foreground: oklch(0.96 0.007 67);
+  --sidebar-border: oklch(0.28 0.008 49.25);
+  --sidebar-ring: oklch(0.745 0.178 41.3);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  .card,
+  [data-slot="card"] {
+    box-shadow: 0 1px 3px oklch(0 0 0 / 0.06);
+  }
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.5s ease-out; }

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

@@ -0,0 +1,215 @@
+<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 * as Card from '$lib/components/ui/card'
+  import {
+    ChevronRight,
+    ChevronDown,
+    CheckCircle2,
+    Circle,
+    GripVertical,
+  } 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 Status = 'not-started' | 'in-progress' | 'done'
+
+  const kanbanColumns: { status: Status; label: string; emoji: string; color: string }[] = [
+    { status: 'not-started', label: 'Not Started', emoji: '📋', color: 'bg-stone-200 dark:bg-stone-700' },
+    { status: 'in-progress', label: 'In Progress', emoji: '🔨', color: 'bg-amber-200 dark:bg-amber-800' },
+    { status: 'done', label: 'Done', emoji: '✅', color: 'bg-emerald-200 dark:bg-emerald-800' },
+  ]
+
+  const tasks: { id: number; title: string; status: Status; tag?: string }[] = [
+    { id: 1, title: 'Design database schema', status: 'done', tag: 'Backend' },
+    { id: 2, title: 'Set up authentication flow', status: 'done', tag: 'Auth' },
+    { id: 3, title: 'Build API endpoints', status: 'in-progress', tag: 'Backend' },
+    { id: 4, title: 'Create dashboard layout', status: 'in-progress', tag: 'Frontend' },
+    { id: 5, title: 'Write unit tests', status: 'not-started', tag: 'Testing' },
+    { id: 6, title: 'Set up CI/CD pipeline', status: 'not-started', tag: 'DevOps' },
+    { id: 7, title: 'Configure email notifications', status: 'not-started', tag: 'Backend' },
+    { id: 8, title: 'Deploy to staging', status: 'not-started', tag: 'DevOps' },
+  ]
+
+  const tagColors: Record<string, string> = {
+    Backend: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+    Frontend: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+    Auth: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
+    Testing: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+    DevOps: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
+  }
+
+  const pages = [
+    { emoji: '📖', title: 'Getting Started', desc: 'Quick introduction and setup guide' },
+    { emoji: '🏗️', title: 'Architecture', desc: 'How the application is structured' },
+    { emoji: '📡', title: 'API Reference', desc: 'Endpoints, params, and responses' },
+    { emoji: '🚀', title: 'Deployment', desc: 'Deploy your app to production' },
+  ]
+
+  function getGreeting() {
+    const hour = new Date().getHours()
+    if (hour < 12) return 'Good morning'
+    if (hour < 18) return 'Good afternoon'
+    return 'Good evening'
+  }
+
+  let expandedSections = $state<Record<string, boolean>>({
+    kanban: true,
+    pages: true,
+    notes: false,
+  })
+
+  function toggle(section: string) {
+    expandedSections = { ...expandedSections, [section]: !expandedSections[section] }
+  }
+</script>
+
+<AuthenticatedLayout {currentUser} {appName} {navigate} activePath="/dashboard">
+  <Header {navigate} />
+  <Main>
+    <div class="max-w-4xl mx-auto space-y-8">
+      <!-- Cover & title — Notion-style page header -->
+      <div>
+        <div class="h-36 rounded-xl bg-gradient-to-br from-amber-100 via-orange-50 to-rose-100 dark:from-amber-950/30 dark:via-stone-900 dark:to-rose-950/20 mb-6"></div>
+        <div class="-mt-10 ml-2">
+          <span class="text-5xl select-none">👋</span>
+        </div>
+        <h1 class="mt-4 text-3xl font-bold tracking-tight">
+          {getGreeting()}, {currentUser?.name?.split(' ')[0] ?? 'there'}
+        </h1>
+        <p class="text-muted-foreground mt-1">
+          Here's your workspace overview. Click any section to expand or collapse it.
+        </p>
+      </div>
+
+      <!-- Callout block -->
+      <div class="flex gap-3 rounded-xl bg-amber-50 dark:bg-amber-950/20 border border-amber-200/50 dark:border-amber-800/30 p-4">
+        <span class="text-xl select-none shrink-0">💡</span>
+        <div>
+          <p class="text-sm font-medium">Tip</p>
+          <p class="text-sm text-muted-foreground">
+            Customize this dashboard by editing <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono">src/pages/Dashboard.svelte</code>.
+            Add your own widgets, data sources, and integrations.
+          </p>
+        </div>
+      </div>
+
+      <!-- Kanban board section -->
+      <div>
+        <button
+          type="button"
+          onclick={() => toggle('kanban')}
+          class="flex items-center gap-1.5 mb-3 text-sm font-semibold text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {#if expandedSections.kanban}
+            <ChevronDown class="h-4 w-4" />
+          {:else}
+            <ChevronRight class="h-4 w-4" />
+          {/if}
+          🗂️ Project Board
+        </button>
+
+        {#if expandedSections.kanban}
+          <div class="grid gap-4 md:grid-cols-3">
+            {#each kanbanColumns as col (col.status)}
+              {@const columnTasks = tasks.filter((t) => t.status === col.status)}
+              <div>
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-sm select-none">{col.emoji}</span>
+                  <span class="text-sm font-medium">{col.label}</span>
+                  <span class="text-xs text-muted-foreground ml-auto">{columnTasks.length}</span>
+                </div>
+                <div class="space-y-2">
+                  {#each columnTasks as task (task.id)}
+                    <Card.Root class="group cursor-default shadow-none hover:shadow-sm transition-shadow">
+                      <Card.Content class="p-3">
+                        <div class="flex items-start gap-2">
+                          <GripVertical class="h-4 w-4 mt-0.5 text-muted-foreground/0 group-hover:text-muted-foreground/50 transition-colors shrink-0" />
+                          <div class="flex-1 min-w-0">
+                            <p class="text-sm">{task.title}</p>
+                            {#if task.tag}
+                              <span class="mt-1.5 inline-block rounded-md px-1.5 py-0.5 text-[10px] font-medium {tagColors[task.tag] ?? 'bg-muted text-muted-foreground'}">
+                                {task.tag}
+                              </span>
+                            {/if}
+                          </div>
+                        </div>
+                      </Card.Content>
+                    </Card.Root>
+                  {/each}
+                  {#if columnTasks.length === 0}
+                    <div class="rounded-xl border border-dashed p-4 text-center text-xs text-muted-foreground">
+                      No tasks
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <!-- Pages section -->
+      <div>
+        <button
+          type="button"
+          onclick={() => toggle('pages')}
+          class="flex items-center gap-1.5 mb-3 text-sm font-semibold text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {#if expandedSections.pages}
+            <ChevronDown class="h-4 w-4" />
+          {:else}
+            <ChevronRight class="h-4 w-4" />
+          {/if}
+          📄 Pages
+        </button>
+
+        {#if expandedSections.pages}
+          <div class="space-y-1">
+            {#each pages as page (page.title)}
+              <div class="flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted/50 cursor-pointer">
+                <span class="text-lg select-none">{page.emoji}</span>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium">{page.title}</p>
+                  <p class="text-xs text-muted-foreground truncate">{page.desc}</p>
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <!-- Notes toggle -->
+      <div>
+        <button
+          type="button"
+          onclick={() => toggle('notes')}
+          class="flex items-center gap-1.5 mb-3 text-sm font-semibold text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {#if expandedSections.notes}
+            <ChevronDown class="h-4 w-4" />
+          {:else}
+            <ChevronRight class="h-4 w-4" />
+          {/if}
+          📝 Quick Notes
+        </button>
+
+        {#if expandedSections.notes}
+          <Card.Root class="shadow-none">
+            <Card.Content class="p-4">
+              <div class="rounded-lg bg-muted/30 p-4 text-sm text-muted-foreground italic">
+                Start typing your notes here... This is a placeholder for a rich-text editor.
+              </div>
+            </Card.Content>
+          </Card.Root>
+        {/if}
+      </div>
+    </div>
+  </Main>
+</AuthenticatedLayout>