create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/svelte/src/lib/components/layout/top-nav.svelte.stub

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { cn } from '$lib/utils'
+  import { Menu } from 'lucide-svelte'
+
+  interface TopNavLink {
+    title: string
+    href: string
+    isActive?: boolean
+    disabled?: boolean
+  }
+
+  let {
+    links,
+    onLinkClick,
+    class: className,
+  }: {
+    links: TopNavLink[]
+    onLinkClick?: (href: string) => void
+    class?: string
+  } = $props()
+
+  let mobileOpen = $state(false)
+
+  function handleClick(e: MouseEvent, href: string) {
+    if (onLinkClick) {
+      e.preventDefault()
+      onLinkClick(href)
+    }
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (!target.closest('[data-top-nav]')) {
+      mobileOpen = false
+    }
+  }
+
+  $effect(() => {
+    if (mobileOpen) {
+      document.addEventListener('click', handleClickOutside, true)
+      return () => document.removeEventListener('click', handleClickOutside, true)
+    }
+  })
+</script>
+
+<!-- Desktop navigation -->
+<nav
+  class={cn(
+    'hidden items-center gap-4 md:flex lg:gap-6',
+    className,
+  )}
+>
+  {#each links as link}
+    <a
+      href={link.href}
+      onclick={(e: MouseEvent) => handleClick(e, link.href)}
+      class={cn(
+        'text-sm font-medium transition-colors hover:text-primary',
+        link.isActive ? 'text-foreground' : 'text-muted-foreground',
+        link.disabled && 'pointer-events-none opacity-50',
+      )}
+    >
+      {link.title}
+    </a>
+  {/each}
+</nav>
+
+<!-- Mobile navigation -->
+<div class="relative md:hidden" data-top-nav>
+  <button
+    type="button"
+    onclick={() => mobileOpen = !mobileOpen}
+    class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-sm hover:bg-accent"
+    aria-label="Toggle navigation"
+  >
+    <Menu class="h-4 w-4" />
+  </button>
+  {#if mobileOpen}
+    <div class="absolute left-0 top-full z-50 mt-1 w-48 rounded-md border border-border bg-popover p-1 shadow-lg">
+      {#each links as link}
+        <button
+          type="button"
+          disabled={link.disabled}
+          onclick={(e: MouseEvent) => {
+            mobileOpen = false
+            if (onLinkClick) onLinkClick(link.href)
+          }}
+          class={cn(
+            'flex w-full items-center rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent',
+            !link.isActive && 'text-muted-foreground',
+            link.disabled && 'pointer-events-none opacity-50',
+          )}
+        >
+          {link.title}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/stubs/tailwind-only/svelte/src/lib/utils.ts.stub

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/stubs/tailwind-only/svelte/src/pages/Dashboard.svelte.stub

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import AuthenticatedLayout from '$lib/components/layout/authenticated-layout.svelte'
+  import Header from '$lib/components/layout/header.svelte'
+  import Main from '$lib/components/layout/main.svelte'
+  import TopNav from '$lib/components/layout/top-nav.svelte'
+  import { Download } from 'lucide-svelte'
+
+  let {
+    appName = 'Mantiq',
+    currentUser = null,
+    navigate,
+  }: {
+    appName?: string
+    currentUser?: { id: number; name: string; email: string } | null
+    navigate: (href: string) => void
+    [key: string]: any
+  } = $props()
+
+  const topNav = [
+    { title: 'Overview', href: '/dashboard', isActive: true },
+    { title: 'Sales', href: '/dashboard', isActive: false, disabled: true },
+    { title: 'Tickets', href: '/dashboard', isActive: false, disabled: true },
+    { title: 'Performance', href: '/dashboard', isActive: false, disabled: true },
+  ]
+
+  const recentSales = [
+    { name: 'Olivia Martin', email: 'olivia.martin@email.com', amount: '+$1,999.00' },
+    { name: 'Jackson Lee', email: 'jackson.lee@email.com', amount: '+$39.00' },
+    { name: 'Isabella Nguyen', email: 'isabella.nguyen@email.com', amount: '+$299.00' },
+    { name: 'William Kim', email: 'will@email.com', amount: '+$99.00' },
+    { name: 'Sofia Davis', email: 'sofia.davis@email.com', amount: '+$39.00' },
+  ]
+
+  function getInitials(name: string) {
+    return name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2)
+  }
+
+  const bars = [40, 30, 55, 45, 70, 60, 80, 50, 65, 45, 75, 55]
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  const maxH = 160
+  const barW = 32
+  const gap = 48
+  const svgW = bars.length * gap
+  const svgH = maxH + 30
+</script>
+
+<AuthenticatedLayout
+  {currentUser}
+  {appName}
+  {navigate}
+  activePath="/dashboard"
+>
+  <Header {navigate}>
+    <TopNav links={topNav} onLinkClick={navigate} />
+  </Header>
+  <Main>
+    <div class="space-y-4">
+      <!-- Page title row -->
+      <div class="flex items-center justify-between">
+        <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+        <button
+          type="button"
+          disabled
+          class="inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium hover:bg-accent disabled:pointer-events-none disabled:opacity-50"
+        >
+          <Download class="h-4 w-4" />
+          Download
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="space-y-4">
+        <!-- Stat cards -->
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <!-- Total Revenue -->
+          <div class="rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm">
+            <div class="flex items-center justify-between pb-2">
+              <h3 class="text-sm font-medium">Total Revenue</h3>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+              </svg>
+            </div>
+            <div class="text-2xl font-bold">$45,231.89</div>
+            <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+          </div>
+
+          <!-- Subscriptions -->
+          <div class="rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm">
+            <div class="flex items-center justify-between pb-2">
+              <h3 class="text-sm font-medium">Subscriptions</h3>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+              </svg>
+            </div>
+            <div class="text-2xl font-bold">+2,350</div>
+            <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+          </div>
+
+          <!-- Sales -->
+          <div class="rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm">
+            <div class="flex items-center justify-between pb-2">
+              <h3 class="text-sm font-medium">Sales</h3>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                <rect width="20" height="14" x="2" y="5" rx="2" />
+                <path d="M2 10h20" />
+              </svg>
+            </div>
+            <div class="text-2xl font-bold">+12,234</div>
+            <p class="text-xs text-muted-foreground">+19% from last month</p>
+          </div>
+
+          <!-- Active Now -->
+          <div class="rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm">
+            <div class="flex items-center justify-between pb-2">
+              <h3 class="text-sm font-medium">Active Now</h3>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            </div>
+            <div class="text-2xl font-bold">+573</div>
+            <p class="text-xs text-muted-foreground">+201 since last hour</p>
+          </div>
+        </div>
+
+        <!-- Bottom row: chart + recent sales -->
+        <div class="grid gap-4 lg:grid-cols-7">
+          <!-- Chart card -->
+          <div class="rounded-xl border border-border bg-card text-card-foreground shadow-sm lg:col-span-4">
+            <div class="p-6 pb-2">
+              <h3 class="text-lg font-semibold leading-none tracking-tight">Overview</h3>
+            </div>
+            <div class="p-6 pt-0 pl-2">
+              <svg
+                viewBox="0 0 {svgW} {svgH}"
+                class="h-[350px] w-full"
+                preserveAspectRatio="none"
+              >
+                {#each bars as h, i}
+                  {@const barH = (h / 100) * maxH}
+                  <g>
+                    <rect
+                      x={i * gap + (gap - barW) / 2}
+                      y={maxH - barH}
+                      width={barW}
+                      height={barH}
+                      rx={4}
+                      class="fill-foreground/15"
+                    />
+                    <text
+                      x={i * gap + gap / 2}
+                      y={maxH + 18}
+                      text-anchor="middle"
+                      class="fill-muted-foreground text-[10px]"
+                    >
+                      {months[i]}
+                    </text>
+                  </g>
+                {/each}
+              </svg>
+            </div>
+          </div>
+
+          <!-- Recent sales card -->
+          <div class="rounded-xl border border-border bg-card text-card-foreground shadow-sm lg:col-span-3">
+            <div class="p-6 pb-2">
+              <h3 class="text-lg font-semibold leading-none tracking-tight">Recent Sales</h3>
+              <p class="text-sm text-muted-foreground mt-1.5">You made 265 sales this month.</p>
+            </div>
+            <div class="p-6 pt-0">
+              <div class="space-y-8">
+                {#each recentSales as sale}
+                  <div class="flex items-center">
+                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold">
+                      {getInitials(sale.name)}
+                    </div>
+                    <div class="ml-4 space-y-1">
+                      <p class="text-sm font-medium leading-none">{sale.name}</p>
+                      <p class="text-sm text-muted-foreground">{sale.email}</p>
+                    </div>
+                    <div class="ml-auto font-medium">{sale.amount}</div>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Main>
+</AuthenticatedLayout>

package/stubs/tailwind-only/svelte/src/pages/Login.svelte.stub

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { post } from '$lib/api'
+
+  let {
+    appName = 'Mantiq',
+    navigate,
+  }: {
+    appName?: string
+    navigate: (href: string) => void
+    [key: string]: any
+  } = $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 email or password. Please try again.'
+    loading = false
+  }
+</script>
+
+<div class="min-h-screen flex bg-background">
+  <!-- Left brand panel -->
+  <div class="hidden lg:flex lg:w-[45%] bg-foreground text-background flex-col justify-between p-10">
+    <div class="flex items-center gap-3">
+      <div class="flex h-8 w-8 items-center justify-center rounded bg-background text-foreground text-xs font-bold">
+        M
+      </div>
+      <span class="text-lg font-semibold tracking-tight">{appName}</span>
+    </div>
+
+    <div>
+      <blockquote class="text-2xl font-medium leading-snug tracking-tight">
+        "The framework that gets out of your way."
+      </blockquote>
+    </div>
+
+    <p class="text-sm text-background/50">
+      &copy; {new Date().getFullYear()} {appName}. All rights reserved.
+    </p>
+  </div>
+
+  <!-- Right form panel -->
+  <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
+    <!-- Mobile-only logo -->
+    <div class="mb-10 flex items-center gap-3 lg:hidden">
+      <div class="flex h-8 w-8 items-center justify-center rounded bg-foreground text-background text-xs 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">
+        <h1 class="text-2xl font-semibold tracking-tight">Sign in</h1>
+        <p class="mt-2 text-sm text-muted-foreground">
+          Enter your credentials to continue
+        </p>
+      </div>
+
+      {#if error}
+        <div class="mb-6 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+          {error}
+        </div>
+      {/if}
+
+      <form onsubmit={handleSubmit} class="space-y-4">
+        <div class="space-y-2">
+          <label for="email" class="text-sm font-medium leading-none">Email</label>
+          <input
+            id="email"
+            type="email"
+            bind:value={email}
+            required
+            placeholder="you@example.com"
+            autocomplete="email"
+            class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          />
+        </div>
+        <div class="space-y-2">
+          <label for="password" class="text-sm font-medium leading-none">Password</label>
+          <input
+            id="password"
+            type="password"
+            bind:value={password}
+            required
+            placeholder="Enter your password"
+            autocomplete="current-password"
+            class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          />
+        </div>
+        <button
+          type="submit"
+          class="inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
+          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-foreground underline underline-offset-4"
+          onclick={() => navigate('/register')}
+        >
+          Register
+        </button>
+      </p>
+    </div>
+  </div>
+</div>

package/stubs/tailwind-only/svelte/src/pages/Register.svelte.stub

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { post } from '$lib/api'
+
+  let {
+    appName = 'Mantiq',
+    navigate,
+  }: {
+    appName?: string
+    navigate: (href: string) => void
+    [key: string]: any
+  } = $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?.message ?? data?.error ?? 'Registration failed. Please try again.'
+    loading = false
+  }
+</script>
+
+<div class="min-h-screen flex bg-background">
+  <!-- Left brand panel -->
+  <div class="hidden lg:flex lg:w-[45%] bg-foreground text-background flex-col justify-between p-10">
+    <div class="flex items-center gap-3">
+      <div class="flex h-8 w-8 items-center justify-center rounded bg-background text-foreground text-xs font-bold">
+        M
+      </div>
+      <span class="text-lg font-semibold tracking-tight">{appName}</span>
+    </div>
+
+    <div>
+      <blockquote class="text-2xl font-medium leading-snug tracking-tight">
+        "The framework that gets out of your way."
+      </blockquote>
+    </div>
+
+    <p class="text-sm text-background/50">
+      &copy; {new Date().getFullYear()} {appName}. All rights reserved.
+    </p>
+  </div>
+
+  <!-- Right form panel -->
+  <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
+    <!-- Mobile-only logo -->
+    <div class="mb-10 flex items-center gap-3 lg:hidden">
+      <div class="flex h-8 w-8 items-center justify-center rounded bg-foreground text-background text-xs 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">
+        <h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
+        <p class="mt-2 text-sm text-muted-foreground">
+          Get started with {appName} today
+        </p>
+      </div>
+
+      {#if error}
+        <div class="mb-6 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+          {error}
+        </div>
+      {/if}
+
+      <form onsubmit={handleSubmit} class="space-y-4">
+        <div class="space-y-2">
+          <label for="name" class="text-sm font-medium leading-none">Name</label>
+          <input
+            id="name"
+            bind:value={name}
+            required
+            placeholder="John Doe"
+            autocomplete="name"
+            class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          />
+        </div>
+        <div class="space-y-2">
+          <label for="email" class="text-sm font-medium leading-none">Email</label>
+          <input
+            id="email"
+            type="email"
+            bind:value={email}
+            required
+            placeholder="you@example.com"
+            autocomplete="email"
+            class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          />
+        </div>
+        <div class="space-y-2">
+          <label for="password" class="text-sm font-medium leading-none">Password</label>
+          <input
+            id="password"
+            type="password"
+            bind:value={password}
+            required
+            placeholder="Create a strong password"
+            autocomplete="new-password"
+            minlength={8}
+            class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          />
+          <p class="text-xs text-muted-foreground">Must be at least 8 characters</p>
+        </div>
+        <button
+          type="submit"
+          class="inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
+          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-foreground underline underline-offset-4"
+          onclick={() => navigate('/login')}
+        >
+          Sign in
+        </button>
+      </p>
+    </div>
+  </div>
+</div>