create-mantiq 0.7.0 → 0.7.2

package/stubs/themes/starter/vue/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/workspace/react/src/components/layout/app-sidebar.tsx.stub

@@ -0,0 +1,97 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarGroup,
+  SidebarGroupLabel,
+} from '@/components/ui/sidebar'
+import { NavGroup } from './nav-group'
+import { NavUser, type NavUserProps } from './nav-user'
+import { sidebarData } from './sidebar-data'
+import { Command, Star } from 'lucide-react'
+
+export interface AppSidebarProps {
+  user: NavUserProps['user']
+  appName: string
+  activePath: string
+  navigate: (href: string) => void
+  onLogout: () => void
+}
+
+export function AppSidebar({
+  user,
+  appName,
+  activePath,
+  navigate,
+  onLogout,
+}: AppSidebarProps) {
+  return (
+    <Sidebar variant="inset" collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              onClick={() => navigate('/dashboard')}
+              tooltip={appName}
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-xl bg-sidebar-primary text-sidebar-primary-foreground">
+                <Command className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{appName}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  Workspace
+                </span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        {sidebarData.map((group) => (
+          <NavGroup
+            key={group.title}
+            group={group}
+            activePath={activePath}
+            navigate={navigate}
+          />
+        ))}
+
+        <SidebarSeparator />
+
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            <Star className="mr-1 size-3" />
+            Favorites
+          </SidebarGroupLabel>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                tooltip="Dashboard"
+                isActive={activePath === '/dashboard'}
+                onClick={() => navigate('/dashboard')}
+              >
+                <span className="text-muted-foreground">Dashboard</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <NavUser user={user} navigate={navigate} onLogout={onLogout} />
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
+  )
+}

package/stubs/themes/workspace/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/workspace/react/src/pages/Dashboard.tsx.stub

@@ -0,0 +1,304 @@
+import { useState } from 'react'
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import {
+  Card,
+  CardContent,
+} from '@/components/ui/card'
+import {
+  ChevronRight,
+  ChevronDown,
+  GripVertical,
+  ClipboardList,
+  Hammer,
+  CheckCircle2,
+  Lightbulb,
+  KanbanSquare,
+  FileText,
+  BookOpen,
+  Building2,
+  Radio,
+  Rocket,
+  StickyNote,
+  Hand,
+} from 'lucide-react'
+
+interface DashboardProps {
+  appName?: string
+  currentUser?: { id: number; name: string; email: string; role: string } | null
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+type Status = 'not-started' | 'in-progress' | 'done'
+
+interface Task {
+  id: number
+  title: string
+  status: Status
+  tag?: string
+}
+
+const kanbanColumns: { status: Status; label: string; icon: typeof ClipboardList; iconClass: string }[] = [
+  { status: 'not-started', label: 'Not Started', icon: ClipboardList, iconClass: 'text-muted-foreground' },
+  { status: 'in-progress', label: 'In Progress', icon: Hammer, iconClass: 'text-amber-500' },
+  { status: 'done', label: 'Done', icon: CheckCircle2, iconClass: 'text-emerald-500' },
+]
+
+const initialTasks: Task[] = [
+  { 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 pageItems = [
+  { icon: BookOpen, title: 'Getting Started', desc: 'Quick introduction and setup guide' },
+  { icon: Building2, title: 'Architecture', desc: 'How the application is structured' },
+  { icon: Radio, title: 'API Reference', desc: 'Endpoints, params, and responses' },
+  { icon: Rocket, 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'
+}
+
+export default function Dashboard({
+  appName = 'Mantiq',
+  currentUser,
+  navigate,
+}: DashboardProps) {
+  const [tasks, setTasks] = useState<Task[]>(initialTasks)
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+    kanban: true,
+    pages: true,
+    notes: false,
+  })
+  const [draggedId, setDraggedId] = useState<number | null>(null)
+  const [dropTarget, setDropTarget] = useState<Status | null>(null)
+
+  const toggle = (section: string) =>
+    setExpandedSections((prev) => ({ ...prev, [section]: !prev[section] }))
+
+  const handleDragStart = (e: React.DragEvent, taskId: number) => {
+    setDraggedId(taskId)
+    e.dataTransfer.effectAllowed = 'move'
+    if (e.currentTarget instanceof HTMLElement) {
+      e.currentTarget.style.opacity = '0.5'
+    }
+  }
+
+  const handleDragEnd = (e: React.DragEvent) => {
+    setDraggedId(null)
+    setDropTarget(null)
+    if (e.currentTarget instanceof HTMLElement) {
+      e.currentTarget.style.opacity = '1'
+    }
+  }
+
+  const handleDragOver = (e: React.DragEvent, status: Status) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setDropTarget(status)
+  }
+
+  const handleDragLeave = () => {
+    setDropTarget(null)
+  }
+
+  const handleDrop = (e: React.DragEvent, targetStatus: Status) => {
+    e.preventDefault()
+    if (draggedId === null) return
+    setTasks((prev) =>
+      prev.map((t) => (t.id === draggedId ? { ...t, status: targetStatus } : t)),
+    )
+    setDraggedId(null)
+    setDropTarget(null)
+  }
+
+  return (
+    <AuthenticatedLayout
+      currentUser={currentUser}
+      appName={appName}
+      navigate={navigate}
+      activePath="/dashboard"
+    >
+      <Header navigate={navigate} />
+      <Main>
+        <div className="max-w-4xl mx-auto space-y-8">
+          {/* Cover & title */}
+          <div>
+            <div className="h-40 rounded-2xl bg-gradient-to-r from-amber-300 via-orange-300 to-rose-300 dark:from-amber-800 dark:via-orange-900 dark:to-rose-900 mb-6 shadow-sm" />
+            <div className="-mt-10 ml-3">
+              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-card border shadow-md">
+                <Hand className="h-7 w-7 text-amber-500" />
+              </div>
+            </div>
+            <h1 className="mt-4 text-3xl font-bold tracking-tight">
+              {getGreeting()}, {currentUser?.name?.split(' ')[0] ?? 'there'}
+            </h1>
+            <p className="text-muted-foreground mt-1">
+              Here's your workspace overview. Drag tasks between columns to update their status.
+            </p>
+          </div>
+
+          {/* Callout block */}
+          <div className="flex gap-3 rounded-xl bg-amber-50 dark:bg-amber-950/30 border border-amber-300 dark:border-amber-700 p-4 shadow-sm">
+            <Lightbulb className="h-5 w-5 text-amber-500 shrink-0 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium">Tip</p>
+              <p className="text-sm text-muted-foreground">
+                Customize this dashboard by editing <code className="rounded bg-muted px-1 py-0.5 text-xs font-mono">src/pages/Dashboard.tsx</code>.
+                Add your own widgets, data sources, and integrations.
+              </p>
+            </div>
+          </div>
+
+          {/* Kanban board section */}
+          <div>
+            <button
+              type="button"
+              onClick={() => toggle('kanban')}
+              className="flex items-center gap-1.5 mb-3 text-sm font-semibold text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {expandedSections.kanban ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+              <KanbanSquare className="h-4 w-4" />
+              Project Board
+            </button>
+
+            {expandedSections.kanban && (
+              <div className="grid gap-4 md:grid-cols-3">
+                {kanbanColumns.map((col) => {
+                  const Icon = col.icon
+                  const columnTasks = tasks.filter((t) => t.status === col.status)
+                  const isOver = dropTarget === col.status && draggedId !== null
+                  return (
+                    <div
+                      key={col.status}
+                      onDragOver={(e) => handleDragOver(e, col.status)}
+                      onDragLeave={handleDragLeave}
+                      onDrop={(e) => handleDrop(e, col.status)}
+                      className={`rounded-xl p-2 -m-2 transition-colors ${isOver ? 'bg-primary/5 ring-2 ring-primary/20' : ''}`}
+                    >
+                      <div className="flex items-center gap-2 mb-3 px-2">
+                        <Icon className={`h-4 w-4 ${col.iconClass}`} />
+                        <span className="text-sm font-medium">{col.label}</span>
+                        <span className="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground">
+                          {columnTasks.length}
+                        </span>
+                      </div>
+                      <div className="space-y-2 min-h-[60px]">
+                        {columnTasks.map((task) => (
+                          <Card
+                            key={task.id}
+                            draggable
+                            onDragStart={(e) => handleDragStart(e, task.id)}
+                            onDragEnd={handleDragEnd}
+                            className={`group cursor-grab active:cursor-grabbing shadow-sm hover:shadow-md transition-all border-border/60 ${
+                              draggedId === task.id ? 'opacity-50 scale-95' : ''
+                            }`}
+                          >
+                            <CardContent className="p-3">
+                              <div className="flex items-start gap-2">
+                                <GripVertical className="h-4 w-4 mt-0.5 text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-colors shrink-0" />
+                                <div className="flex-1 min-w-0">
+                                  <p className="text-sm">{task.title}</p>
+                                  {task.tag && (
+                                    <span className={`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>
+                                  )}
+                                </div>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        ))}
+                        {columnTasks.length === 0 && (
+                          <div className={`rounded-xl border-2 border-dashed p-6 text-center text-xs text-muted-foreground transition-colors ${isOver ? 'border-primary/40 bg-primary/5' : ''}`}>
+                            Drop tasks here
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Pages section */}
+          <div>
+            <button
+              type="button"
+              onClick={() => toggle('pages')}
+              className="flex items-center gap-1.5 mb-3 text-sm font-semibold text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {expandedSections.pages ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+              <FileText className="h-4 w-4" />
+              Pages
+            </button>
+
+            {expandedSections.pages && (
+              <div className="space-y-1">
+                {pageItems.map((page) => {
+                  const Icon = page.icon
+                  return (
+                    <div
+                      key={page.title}
+                      className="flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted/50 cursor-pointer"
+                    >
+                      <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium">{page.title}</p>
+                        <p className="text-xs text-muted-foreground truncate">{page.desc}</p>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Notes toggle */}
+          <div>
+            <button
+              type="button"
+              onClick={() => toggle('notes')}
+              className="flex items-center gap-1.5 mb-3 text-sm font-semibold text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {expandedSections.notes ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+              <StickyNote className="h-4 w-4" />
+              Quick Notes
+            </button>
+
+            {expandedSections.notes && (
+              <Card className="shadow-none">
+                <CardContent className="p-4">
+                  <div className="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>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      </Main>
+    </AuthenticatedLayout>
+  )
+}