create-mantiq 0.7.0 → 0.7.2

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

@@ -0,0 +1,128 @@
+<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.'
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="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 class="flex items-center justify-between px-6 py-4">
+      <div class="flex items-center gap-2.5">
+        <div class="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 class="font-semibold tracking-tight">{{ appName }}</span>
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="text-sm"
+        @click="navigate?.('/register')"
+      >
+        Create account
+      </Button>
+    </div>
+
+    <!-- Centered content -->
+    <div class="flex flex-col items-center justify-center px-4" :style="{ minHeight: 'calc(100vh - 64px)' }">
+      <div class="w-full max-w-sm">
+        <!-- Emoji greeting -->
+        <div class="mb-6 text-center">
+          <span class="text-5xl select-none">&#x1F44B;</span>
+          <h1 class="mt-4 text-2xl font-bold tracking-tight">Welcome back</h1>
+          <p class="mt-2 text-sm text-muted-foreground">
+            Log in to your {{ appName }} workspace
+          </p>
+        </div>
+
+        <div
+          v-if="error"
+          class="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"
+        >
+          <span class="select-none">&#x26A0;&#xFE0F;</span>
+          {{ 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"
+              class="h-11 rounded-xl"
+            />
+          </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"
+              class="h-11 rounded-xl"
+            />
+          </div>
+          <Button type="submit" class="w-full h-11 rounded-xl text-sm font-medium" :disabled="loading">
+            {{ loading ? 'Logging in\u2026' : 'Continue with email' }}
+          </Button>
+        </form>
+
+        <!-- Divider -->
+        <div class="my-6 flex items-center gap-4">
+          <div class="h-px flex-1 bg-border" />
+          <span class="text-xs text-muted-foreground select-none">or</span>
+          <div class="h-px flex-1 bg-border" />
+        </div>
+
+        <!-- Social buttons -->
+        <div class="space-y-2.5">
+          <Button variant="outline" class="w-full h-11 rounded-xl gap-2.5 text-sm" disabled>
+            <svg class="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" class="w-full h-11 rounded-xl gap-2.5 text-sm" disabled>
+            <svg class="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>
+</template>

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

@@ -0,0 +1,80 @@
+<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 ?? 'Registration failed.'
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="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 class="flex items-center justify-between px-6 py-4">
+      <div class="flex items-center gap-2.5">
+        <div class="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 class="font-semibold tracking-tight">{{ appName }}</span>
+      </div>
+      <Button variant="ghost" size="sm" class="text-sm" @click="navigate?.('/login')">Sign in</Button>
+    </div>
+
+    <div class="flex flex-col items-center justify-center px-4" :style="{ minHeight: 'calc(100vh - 64px)' }">
+      <div class="w-full max-w-sm">
+        <div class="mb-6 text-center">
+          <span class="text-5xl select-none">&#x1F680;</span>
+          <h1 class="mt-4 text-2xl font-bold tracking-tight">Get started</h1>
+          <p class="mt-2 text-sm text-muted-foreground">Create your {{ appName }} workspace</p>
+        </div>
+
+        <div
+          v-if="error"
+          class="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"
+        >
+          <span class="select-none">&#x26A0;&#xFE0F;</span> {{ 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="Your name" class="h-11 rounded-xl" />
+          </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" class="h-11 rounded-xl" />
+          </div>
+          <div class="space-y-2">
+            <Label for="password">Password</Label>
+            <Input id="password" v-model="password" type="password" required placeholder="Min 8 characters" class="h-11 rounded-xl" />
+          </div>
+          <Button type="submit" class="w-full h-11 rounded-xl text-sm font-medium" :disabled="loading">
+            {{ loading ? 'Creating\u2026' : 'Create workspace' }}
+          </Button>
+        </form>
+
+        <p class="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>
+</template>

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

@@ -0,0 +1,134 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * shadcn/ui theme — Workspace
+ *
+ * Warm, approachable, generous spacing. Stone/sand tones.
+ * Large radius, soft shadows, content-first layout.
+ */
+
+@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.75rem;
+  --background: oklch(0.993 0.003 75);
+  --foreground: oklch(0.216 0.006 56.043);
+  --card: oklch(1 0.002 75);
+  --card-foreground: oklch(0.216 0.006 56.043);
+  --popover: oklch(1 0.002 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.96 0.007 67);
+  --secondary-foreground: oklch(0.29 0.008 56);
+  --muted: oklch(0.96 0.007 67);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.96 0.007 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.923 0.008 67);
+  --input: oklch(0.923 0.008 67);
+  --ring: oklch(0.705 0.168 41.3);
+  --chart-1: oklch(0.705 0.168 41.3);
+  --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.975 0.005 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.945 0.01 67);
+  --sidebar-accent-foreground: oklch(0.29 0.008 56);
+  --sidebar-border: oklch(0.923 0.008 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;
+  }
+}
+
+@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/vue/src/App.vue.stub

@@ -6,7 +6,8 @@ const props = defineProps<{
   initialData?: Record<string, any>
 }>()
 
-const windowData = typeof window !== 'undefined' ? (window as any).__MANTIQ_DATA__ : {}
+declare global { interface Window { __MANTIQ_DATA__?: Record<string, any> } }
+const windowData = typeof window !== 'undefined' ? window.__MANTIQ_DATA__ ?? {} : {}
 const initial = props.initialData ?? windowData
 
 const currentPage = ref<string>(initial._page ?? 'Login')

package/stubs/vue/src/lib/api.ts.stub

@@ -1,17 +1,41 @@
-export async function api<T = any>(url: string, opts: RequestInit = {}): Promise<{ ok: boolean; status: number; data: T }> {
-  const res = await fetch(url, { ...opts, headers: { Accept: 'application/json', ...opts.headers } })
+function getCookie(name: string): string | null {
+  const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))
+  return match ? decodeURIComponent(match[1]!) : null
+}
+
+type ApiResult<T> = { ok: true; status: number; data: T } | { ok: false; status: number; data: any }
+
+export async function api<T = any>(url: string, opts: RequestInit = {}): Promise<ApiResult<T>> {
+  const headers: Record<string, string> = { Accept: 'application/json', ...(opts.headers as Record<string, string>) }
+
+  // Attach XSRF token for CSRF protection on mutating requests
+  if (opts.method && !['GET', 'HEAD', 'OPTIONS'].includes(opts.method)) {
+    const xsrf = getCookie('XSRF-TOKEN')
+    if (xsrf) headers['X-XSRF-TOKEN'] = xsrf
+  }
+
+  const res = await fetch(url, { ...opts, credentials: 'same-origin', headers })
 
   // Session expired — redirect to login
   if (res.status === 401 || res.status === 419) {
     window.location.href = '/login'
-    return { ok: false, status: res.status, data: null as any }
+    return { ok: false, status: res.status, data: null }
   }
 
   const ct = res.headers.get('content-type') ?? ''
   const data = ct.includes('json') ? await res.json() : null
-  return { ok: res.ok, status: res.status, data }
+  if (!res.ok) return { ok: false, status: res.status, data }
+  return { ok: true, status: res.status, data }
+}
+
+export function post<T = any>(url: string, body: object) {
+  return api<T>(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+}
+
+export function put<T = any>(url: string, body: object) {
+  return api<T>(url, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
 }
 
-export function post(url: string, body: object) {
-  return api(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+export function del<T = any>(url: string) {
+  return api<T>(url, { method: 'DELETE' })
 }

package/stubs/vue/src/main.ts.stub

@@ -1,10 +1,12 @@
+declare global { interface Window { __MANTIQ_DATA__?: Record<string, any> } }
+
 import './style.css'
 import { createApp, createSSRApp } from 'vue'
 import App from './App.vue'
 import { pages } from './pages.ts'
 
 const root = document.getElementById('app')!
-const data = (window as any).__MANTIQ_DATA__ ?? {}
+const data = window.__MANTIQ_DATA__ ?? {}
 
 const app = root.innerHTML.trim()
   ? createSSRApp(App, { pages, initialData: data })

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

@@ -12,8 +12,8 @@ const props = withDefaults(defineProps<{
   appName: 'Mantiq',
 })
 
-const email = ref('admin@example.com')
-const password = ref('password')
+const email = ref('')
+const password = ref('')
 const error = ref('')
 const loading = ref(false)
 
@@ -82,7 +82,7 @@ async function handleSubmit() {
               v-model="email"
               type="email"
               required
-              placeholder="admin@example.com"
+              placeholder="you@example.com"
               autocomplete="email"
             />
           </div>

package/stubs/vue/vite.config.ts.stub

@@ -2,9 +2,28 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
+import { writeFileSync, unlinkSync } from 'node:fs'
 
 export default defineConfig({
-  plugins: [vue(), tailwindcss()],
+  plugins: [
+    vue(),
+    tailwindcss(),
+    {
+      name: 'mantiq-hot',
+      configureServer(server) {
+        const hotPath = path.resolve(__dirname, 'public/hot')
+        server.httpServer?.once('listening', () => {
+          const addr = server.httpServer!.address()
+          const url = typeof addr === 'string' ? addr : `http://localhost:${addr?.port}`
+          writeFileSync(hotPath, url)
+        })
+        const cleanup = () => { try { unlinkSync(hotPath) } catch {} }
+        process.on('exit', cleanup)
+        process.on('SIGINT', () => { cleanup(); process.exit() })
+        process.on('SIGTERM', () => { cleanup(); process.exit() })
+      },
+    },
+  ],
   publicDir: false,
   resolve: {
     alias: {