create-mantiq 0.7.0 → 0.7.2

package/stubs/themes/starter/react/src/components/layout/authenticated-layout.tsx.stub

@@ -0,0 +1,42 @@
+import { useCallback } from 'react'
+import { post } from '@/lib/api'
+import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
+import { AppSidebar } from './app-sidebar'
+
+interface AuthenticatedLayoutProps {
+  children: React.ReactNode
+  currentUser?: { name: string; email: string; role?: string } | null
+  appName?: string
+  navigate: (href: string) => void
+  activePath: string
+}
+
+export function AuthenticatedLayout({
+  children,
+  currentUser,
+  appName = 'Mantiq',
+  navigate,
+  activePath,
+}: AuthenticatedLayoutProps) {
+  const handleLogout = useCallback(async () => {
+    await post('/logout', {})
+    navigate('/login')
+  }, [navigate])
+
+  const user = currentUser ?? { name: 'User', email: 'user@example.com' }
+
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <AppSidebar
+        user={user}
+        appName={appName}
+        activePath={activePath}
+        navigate={navigate}
+        onLogout={handleLogout}
+      />
+      <SidebarInset>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

package/stubs/themes/starter/react/src/pages/Dashboard.tsx.stub

@@ -0,0 +1,236 @@
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import {
+  Rocket,
+  Users,
+  TrendingUp,
+  ArrowRight,
+  Zap,
+  Shield,
+  Globe,
+  Bell,
+  FileText,
+  BookOpen,
+  MessageCircle,
+  Headphones,
+} from 'lucide-react'
+
+interface DashboardProps {
+  appName?: string
+  currentUser?: { id: number; name: string; email: string; role: string } | null
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+const activityItems = [
+  {
+    color: 'border-violet-500',
+    icon: Rocket,
+    title: 'New deployment completed',
+    description: 'Production v2.4.1 deployed successfully',
+    time: '2 minutes ago',
+  },
+  {
+    color: 'border-blue-500',
+    icon: Users,
+    title: 'Team member joined',
+    description: 'Sarah Connor accepted the invitation',
+    time: '15 minutes ago',
+  },
+  {
+    color: 'border-emerald-500',
+    icon: Shield,
+    title: 'Security scan passed',
+    description: 'All 142 checks passed with no vulnerabilities',
+    time: '1 hour ago',
+  },
+  {
+    color: 'border-amber-500',
+    icon: Bell,
+    title: 'Usage alert triggered',
+    description: 'API calls reached 80% of monthly quota',
+    time: '3 hours ago',
+  },
+  {
+    color: 'border-red-500',
+    icon: Globe,
+    title: 'Domain verified',
+    description: 'app.example.com DNS propagation complete',
+    time: '5 hours ago',
+  },
+]
+
+const quickLinks = [
+  { icon: FileText, label: 'Documentation', href: '#' },
+  { icon: BookOpen, label: 'API Reference', href: '#' },
+  { icon: MessageCircle, label: 'Community', href: '#' },
+  { icon: Headphones, label: 'Support', href: '#' },
+]
+
+export default function Dashboard({
+  appName = 'Mantiq',
+  currentUser,
+  navigate,
+}: DashboardProps) {
+  return (
+    <AuthenticatedLayout
+      currentUser={currentUser}
+      appName={appName}
+      navigate={navigate}
+      activePath="/dashboard"
+    >
+      <Header navigate={navigate} />
+      <Main>
+        <div className="space-y-6">
+          {/* Welcome Banner */}
+          <Card className="border-0 bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-lg">
+            <CardContent className="p-8">
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <h2 className="text-3xl font-bold tracking-tight">
+                    Welcome back, {currentUser?.name ?? 'there'}!
+                  </h2>
+                  <p className="mt-2 text-lg text-white/80">
+                    Your dashboard is looking great. Here's a quick summary.
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  className="shrink-0 border-white/30 bg-white/10 text-white backdrop-blur-sm hover:bg-white/20 hover:text-white"
+                >
+                  View Reports
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Stats Strip */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-md">
+                    <Users className="h-6 w-6" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground">Total Users</p>
+                    <p className="text-2xl font-bold">12,345</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 text-white shadow-md">
+                    <TrendingUp className="h-6 w-6" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground">Revenue</p>
+                    <p className="text-2xl font-bold">$89,432</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 text-white shadow-md">
+                    <Zap className="h-6 w-6" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground">Active Now</p>
+                    <p className="text-2xl font-bold">573</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-green-500 text-white shadow-md">
+                    <Shield className="h-6 w-6" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground">Uptime</p>
+                    <p className="text-2xl font-bold">99.98%</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Two Column Section */}
+          <div className="grid gap-6 lg:grid-cols-3">
+            {/* Activity Feed */}
+            <Card className="lg:col-span-2">
+              <CardHeader>
+                <CardTitle>Recent Activity</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  {activityItems.map((item, index) => {
+                    const Icon = item.icon
+                    return (
+                      <div
+                        key={index}
+                        className={`flex items-start gap-4 rounded-lg border-l-4 ${item.color} bg-muted/30 p-4`}
+                      >
+                        <div className="mt-0.5 text-muted-foreground">
+                          <Icon className="h-5 w-5" />
+                        </div>
+                        <div className="flex-1 space-y-1">
+                          <p className="text-sm font-medium leading-none">{item.title}</p>
+                          <p className="text-sm text-muted-foreground">{item.description}</p>
+                        </div>
+                        <span className="shrink-0 text-xs text-muted-foreground">{item.time}</span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Quick Links */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Quick Links</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {quickLinks.map((link) => {
+                    const Icon = link.icon
+                    return (
+                      <button
+                        key={link.label}
+                        type="button"
+                        className="flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors hover:bg-muted"
+                      >
+                        <Icon className="h-5 w-5 text-muted-foreground" />
+                        <span className="flex-1 text-sm font-medium">{link.label}</span>
+                        <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                      </button>
+                    )
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </Main>
+    </AuthenticatedLayout>
+  )
+}

package/stubs/themes/starter/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'
+
+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. Please try again.')
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen flex bg-background">
+      {/* Left gradient panel */}
+      <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden bg-gradient-to-br from-violet-600 via-purple-600 to-indigo-700 animate-gradient">
+        {/* Floating decorative circles */}
+        <div className="absolute -top-20 -left-20 h-72 w-72 rounded-full bg-white/10 blur-3xl" />
+        <div className="absolute top-1/3 right-10 h-48 w-48 rounded-full bg-indigo-400/20 blur-2xl" />
+        <div className="absolute bottom-20 left-1/4 h-56 w-56 rounded-full bg-purple-300/15 blur-3xl" />
+
+        <div className="relative z-10 flex flex-col justify-center p-16 text-white">
+          <h1 className="text-5xl font-bold leading-tight tracking-tight">
+            Build something<br />amazing.
+          </h1>
+          <p className="mt-4 text-xl text-white/70">
+            Join thousands of developers shipping faster with {appName}.
+          </p>
+
+          {/* Testimonial card */}
+          <div className="mt-12 rounded-2xl bg-white/10 p-6 backdrop-blur-sm">
+            <p className="text-lg leading-relaxed text-white/90">
+              "This framework completely changed how we build web apps. We shipped our MVP in half the time."
+            </p>
+            <div className="mt-4">
+              <p className="font-semibold">Alex Rivera</p>
+              <p className="text-sm text-white/60">CTO at LaunchPad</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right form panel */}
+      <div className="flex flex-1 flex-col items-center justify-center px-6 py-12">
+        {/* Logo */}
+        <div className="mb-10 flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-violet-600 to-indigo-600 text-white text-sm font-bold">
+            M
+          </div>
+          <span className="text-lg font-semibold tracking-tight">{appName}</span>
+        </div>
+
+        <div className="w-full max-w-sm">
+          <div className="mb-8 text-center">
+            <h1 className="text-2xl font-bold tracking-tight">Sign in</h1>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Enter your credentials to continue
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-6 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+              {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"
+              />
+            </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"
+              />
+            </div>
+            <Button
+              type="submit"
+              className="w-full bg-gradient-to-r from-violet-600 to-indigo-600 text-white hover:from-violet-700 hover:to-indigo-700"
+              disabled={loading}
+            >
+              {loading ? 'Signing in...' : 'Sign in'}
+            </Button>
+          </form>
+
+          <p className="mt-6 text-center text-sm text-muted-foreground">
+            Don't have an account?{' '}
+            <button
+              type="button"
+              className="font-medium text-primary underline underline-offset-4"
+              onClick={() => navigate('/register')}
+            >
+              Register
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,145 @@
+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?.message ?? data?.error ?? 'Registration failed. Please try again.')
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen flex bg-background">
+      {/* Left gradient panel */}
+      <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden bg-gradient-to-br from-violet-600 via-purple-600 to-indigo-700 animate-gradient">
+        {/* Floating decorative circles */}
+        <div className="absolute -top-20 -right-20 h-72 w-72 rounded-full bg-white/10 blur-3xl" />
+        <div className="absolute top-1/2 left-10 h-48 w-48 rounded-full bg-indigo-400/20 blur-2xl" />
+        <div className="absolute bottom-10 right-1/4 h-56 w-56 rounded-full bg-purple-300/15 blur-3xl" />
+
+        <div className="relative z-10 flex flex-col justify-center p-16 text-white">
+          <h1 className="text-5xl font-bold leading-tight tracking-tight">
+            Start your<br />journey.
+          </h1>
+          <p className="mt-4 text-xl text-white/70">
+            Create your account and start building something extraordinary with {appName}.
+          </p>
+
+          {/* Testimonial card */}
+          <div className="mt-12 rounded-2xl bg-white/10 p-6 backdrop-blur-sm">
+            <p className="text-lg leading-relaxed text-white/90">
+              "From idea to production in days, not months. The developer experience is unmatched."
+            </p>
+            <div className="mt-4">
+              <p className="font-semibold">Jamie Chen</p>
+              <p className="text-sm text-white/60">Founder at NovaTech</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right form panel */}
+      <div className="flex flex-1 flex-col items-center justify-center px-6 py-12">
+        {/* Logo */}
+        <div className="mb-10 flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-violet-600 to-indigo-600 text-white text-sm font-bold">
+            M
+          </div>
+          <span className="text-lg font-semibold tracking-tight">{appName}</span>
+        </div>
+
+        <div className="w-full max-w-sm">
+          <div className="mb-8 text-center">
+            <h1 className="text-2xl font-bold tracking-tight">Create an account</h1>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Get started with {appName} today
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-6 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+              {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="John Doe"
+                autoComplete="name"
+              />
+            </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"
+              />
+            </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="Create a strong password"
+                autoComplete="new-password"
+                minLength={8}
+              />
+              <p className="text-xs text-muted-foreground">Must be at least 8 characters</p>
+            </div>
+            <Button
+              type="submit"
+              className="w-full bg-gradient-to-r from-violet-600 to-indigo-600 text-white hover:from-violet-700 hover:to-indigo-700"
+              disabled={loading}
+            >
+              {loading ? 'Creating account...' : 'Create account'}
+            </Button>
+          </form>
+
+          <p className="mt-6 text-center text-sm text-muted-foreground">
+            Already have an account?{' '}
+            <button
+              type="button"
+              className="font-medium text-primary underline underline-offset-4"
+              onClick={() => navigate('/login')}
+            >
+              Sign in
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}