create-mantiq 0.7.0 → 0.7.2

package/stubs/themes/starter/svelte/src/style.css.stub

@@ -0,0 +1,141 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * shadcn/ui theme — Starter
+ *
+ * Bold, gradient-heavy palette with violet/purple primary.
+ * Dark sidebar in both light and dark modes for a two-tone SaaS feel.
+ */
+
+@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: 0.625rem;
+  --background: oklch(0.985 0.002 286);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.606 0.25 292.717);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.606 0.25 292.717);
+  --chart-1: oklch(0.606 0.25 292.717);
+  --chart-2: oklch(0.546 0.245 262.881);
+  --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);
+  /* Dark sidebar even in light mode */
+  --sidebar: oklch(0.16 0.015 286);
+  --sidebar-foreground: oklch(0.95 0.002 286);
+  --sidebar-primary: oklch(0.7 0.2 292.717);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.22 0.012 286);
+  --sidebar-accent-foreground: oklch(0.95 0.002 286);
+  --sidebar-border: oklch(0.25 0.01 286);
+  --sidebar-ring: oklch(0.7 0.2 292.717);
+}
+
+.dark {
+  --background: oklch(0.13 0.015 286);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.17 0.012 286);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.17 0.012 286);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.7 0.2 292.717);
+  --primary-foreground: oklch(0.16 0.04 292.717);
+  --secondary: oklch(0.269 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0.006 286.033);
+  --muted-foreground: oklch(0.708 0.014 286.067);
+  --accent: oklch(0.269 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.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.7 0.2 292.717);
+  --chart-1: oklch(0.7 0.2 292.717);
+  --chart-2: oklch(0.623 0.214 262.881);
+  --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.015 286);
+  --sidebar-foreground: oklch(0.95 0.002 286);
+  --sidebar-primary: oklch(0.7 0.2 292.717);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.22 0.012 286);
+  --sidebar-accent-foreground: oklch(0.95 0.002 286);
+  --sidebar-border: oklch(0.25 0.01 286);
+  --sidebar-ring: oklch(0.7 0.2 292.717);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.4s ease-out; }
+
+@keyframes gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+.animate-gradient { animation: gradient-shift 6s ease infinite; background-size: 200% 200%; }

package/stubs/themes/starter/vue/src/pages/Dashboard.vue.stub

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import AuthenticatedLayout from '@/components/layout/AuthenticatedLayout.vue'
+import Header from '@/components/layout/Header.vue'
+import Main from '@/components/layout/Main.vue'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import {
+  Rocket,
+  Users,
+  TrendingUp,
+  ArrowRight,
+  Zap,
+  Shield,
+  Globe,
+  Bell,
+  FileText,
+  BookOpen,
+  MessageCircle,
+  Headphones,
+} from 'lucide-vue-next'
+import { type Component } from 'vue'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { id: number; name: string; email: string; role: string } | null
+  navigate?: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const activityItems: { color: string; icon: Component; title: string; description: string; time: string }[] = [
+  {
+    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: Component; label: string; href: string }[] = [
+  { icon: FileText, label: 'Documentation', href: '#' },
+  { icon: BookOpen, label: 'API Reference', href: '#' },
+  { icon: MessageCircle, label: 'Community', href: '#' },
+  { icon: Headphones, label: 'Support', href: '#' },
+]
+</script>
+
+<template>
+  <AuthenticatedLayout
+    :current-user="currentUser"
+    :app-name="appName"
+    :navigate="navigate"
+    active-path="/dashboard"
+  >
+    <Header :navigate="navigate" />
+    <Main>
+      <div class="space-y-6">
+        <!-- Welcome Banner -->
+        <Card class="border-0 bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-lg">
+          <CardContent class="p-8">
+            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <h2 class="text-3xl font-bold tracking-tight">
+                  Welcome back, {{ currentUser?.name ?? 'there' }}!
+                </h2>
+                <p class="mt-2 text-lg text-white/80">
+                  Your dashboard is looking great. Here's a quick summary.
+                </p>
+              </div>
+              <Button
+                variant="outline"
+                class="shrink-0 border-white/30 bg-white/10 text-white backdrop-blur-sm hover:bg-white/20 hover:text-white"
+              >
+                View Reports
+                <ArrowRight class="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- Stats Strip -->
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <Card>
+            <CardContent class="p-6">
+              <div class="flex items-center gap-4">
+                <div class="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 class="h-6 w-6" />
+                </div>
+                <div>
+                  <p class="text-sm font-medium text-muted-foreground">Total Users</p>
+                  <p class="text-2xl font-bold">12,345</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent class="p-6">
+              <div class="flex items-center gap-4">
+                <div class="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 class="h-6 w-6" />
+                </div>
+                <div>
+                  <p class="text-sm font-medium text-muted-foreground">Revenue</p>
+                  <p class="text-2xl font-bold">$89,432</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent class="p-6">
+              <div class="flex items-center gap-4">
+                <div class="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 class="h-6 w-6" />
+                </div>
+                <div>
+                  <p class="text-sm font-medium text-muted-foreground">Active Now</p>
+                  <p class="text-2xl font-bold">573</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent class="p-6">
+              <div class="flex items-center gap-4">
+                <div class="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 class="h-6 w-6" />
+                </div>
+                <div>
+                  <p class="text-sm font-medium text-muted-foreground">Uptime</p>
+                  <p class="text-2xl font-bold">99.98%</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <!-- Two Column Section -->
+        <div class="grid gap-6 lg:grid-cols-3">
+          <!-- Activity Feed -->
+          <Card class="lg:col-span-2">
+            <CardHeader>
+              <CardTitle>Recent Activity</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div class="space-y-4">
+                <div
+                  v-for="(item, index) in activityItems"
+                  :key="index"
+                  :class="[
+                    'flex items-start gap-4 rounded-lg border-l-4 bg-muted/30 p-4',
+                    item.color,
+                  ]"
+                >
+                  <div class="mt-0.5 text-muted-foreground">
+                    <component :is="item.icon" class="h-5 w-5" />
+                  </div>
+                  <div class="flex-1 space-y-1">
+                    <p class="text-sm font-medium leading-none">{{ item.title }}</p>
+                    <p class="text-sm text-muted-foreground">{{ item.description }}</p>
+                  </div>
+                  <span class="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 class="space-y-2">
+                <button
+                  v-for="link in quickLinks"
+                  :key="link.label"
+                  type="button"
+                  class="flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors hover:bg-muted"
+                >
+                  <component :is="link.icon" class="h-5 w-5 text-muted-foreground" />
+                  <span class="flex-1 text-sm font-medium">{{ link.label }}</span>
+                  <ArrowRight class="h-4 w-4 text-muted-foreground" />
+                </button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Main>
+  </AuthenticatedLayout>
+</template>

package/stubs/themes/starter/vue/src/pages/Login.vue.stub

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { post } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  navigate?: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value = ''
+  loading.value = true
+  const { ok, data } = await post('/login', { email: email.value, password: password.value })
+  if (ok) props.navigate?.('/dashboard')
+  else error.value = data?.error ?? 'Invalid email or password. Please try again.'
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex bg-background">
+    <!-- Left gradient panel -->
+    <div class="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 class="absolute -top-20 -left-20 h-72 w-72 rounded-full bg-white/10 blur-3xl" />
+      <div class="absolute top-1/3 right-10 h-48 w-48 rounded-full bg-indigo-400/20 blur-2xl" />
+      <div class="absolute bottom-20 left-1/4 h-56 w-56 rounded-full bg-purple-300/15 blur-3xl" />
+
+      <div class="relative z-10 flex flex-col justify-center p-16 text-white">
+        <h1 class="text-5xl font-bold leading-tight tracking-tight">
+          Build something<br />amazing.
+        </h1>
+        <p class="mt-4 text-xl text-white/70">
+          Join thousands of developers shipping faster with {{ appName }}.
+        </p>
+
+        <!-- Testimonial card -->
+        <div class="mt-12 rounded-2xl bg-white/10 p-6 backdrop-blur-sm">
+          <p class="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 class="mt-4">
+            <p class="font-semibold">Alex Rivera</p>
+            <p class="text-sm text-white/60">CTO at LaunchPad</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right form panel -->
+    <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
+      <!-- Logo -->
+      <div class="mb-10 flex items-center gap-3">
+        <div class="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 class="text-lg font-semibold tracking-tight">{{ appName }}</span>
+      </div>
+
+      <div class="w-full max-w-sm">
+        <div class="mb-8 text-center">
+          <h1 class="text-2xl font-bold tracking-tight">Sign in</h1>
+          <p class="mt-2 text-sm text-muted-foreground">
+            Enter your credentials to continue
+          </p>
+        </div>
+
+        <div v-if="error" class="mb-6 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+          {{ error }}
+        </div>
+
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+          <div class="space-y-2">
+            <Label for="email">Email</Label>
+            <Input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              placeholder="you@example.com"
+              autocomplete="email"
+            />
+          </div>
+          <div class="space-y-2">
+            <Label for="password">Password</Label>
+            <Input
+              id="password"
+              v-model="password"
+              type="password"
+              required
+              placeholder="Enter your password"
+              autocomplete="current-password"
+            />
+          </div>
+          <Button
+            type="submit"
+            class="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 class="mt-6 text-center text-sm text-muted-foreground">
+          Don't have an account?{{ ' ' }}
+          <button
+            type="button"
+            class="font-medium text-primary underline underline-offset-4"
+            @click="navigate?.('/register')"
+          >
+            Register
+          </button>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/stubs/themes/starter/vue/src/pages/Register.vue.stub

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { post } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  navigate?: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const name = ref('')
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value = ''
+  loading.value = true
+  const { ok, data } = await post('/register', { name: name.value, email: email.value, password: password.value })
+  if (ok) props.navigate?.('/dashboard')
+  else error.value = data?.error?.message ?? data?.error ?? 'Registration failed. Please try again.'
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex bg-background">
+    <!-- Left gradient panel -->
+    <div class="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 class="absolute -top-20 -right-20 h-72 w-72 rounded-full bg-white/10 blur-3xl" />
+      <div class="absolute top-1/2 left-10 h-48 w-48 rounded-full bg-indigo-400/20 blur-2xl" />
+      <div class="absolute bottom-10 right-1/4 h-56 w-56 rounded-full bg-purple-300/15 blur-3xl" />
+
+      <div class="relative z-10 flex flex-col justify-center p-16 text-white">
+        <h1 class="text-5xl font-bold leading-tight tracking-tight">
+          Start your<br />journey.
+        </h1>
+        <p class="mt-4 text-xl text-white/70">
+          Create your account and start building something extraordinary with {{ appName }}.
+        </p>
+
+        <!-- Testimonial card -->
+        <div class="mt-12 rounded-2xl bg-white/10 p-6 backdrop-blur-sm">
+          <p class="text-lg leading-relaxed text-white/90">
+            "From idea to production in days, not months. The developer experience is unmatched."
+          </p>
+          <div class="mt-4">
+            <p class="font-semibold">Jamie Chen</p>
+            <p class="text-sm text-white/60">Founder at NovaTech</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right form panel -->
+    <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
+      <!-- Logo -->
+      <div class="mb-10 flex items-center gap-3">
+        <div class="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 class="text-lg font-semibold tracking-tight">{{ appName }}</span>
+      </div>
+
+      <div class="w-full max-w-sm">
+        <div class="mb-8 text-center">
+          <h1 class="text-2xl font-bold tracking-tight">Create an account</h1>
+          <p class="mt-2 text-sm text-muted-foreground">
+            Get started with {{ appName }} today
+          </p>
+        </div>
+
+        <div v-if="error" class="mb-6 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+          {{ error }}
+        </div>
+
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+          <div class="space-y-2">
+            <Label for="name">Name</Label>
+            <Input
+              id="name"
+              v-model="name"
+              required
+              placeholder="John Doe"
+              autocomplete="name"
+            />
+          </div>
+          <div class="space-y-2">
+            <Label for="email">Email</Label>
+            <Input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              placeholder="you@example.com"
+              autocomplete="email"
+            />
+          </div>
+          <div class="space-y-2">
+            <Label for="password">Password</Label>
+            <Input
+              id="password"
+              v-model="password"
+              type="password"
+              required
+              placeholder="Create a strong password"
+              autocomplete="new-password"
+              :minlength="8"
+            />
+            <p class="text-xs text-muted-foreground">Must be at least 8 characters</p>
+          </div>
+          <Button
+            type="submit"
+            class="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 class="mt-6 text-center text-sm text-muted-foreground">
+          Already have an account?{{ ' ' }}
+          <button
+            type="button"
+            class="font-medium text-primary underline underline-offset-4"
+            @click="navigate?.('/login')"
+          >
+            Sign in
+          </button>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>