create-mantiq 0.7.0 → 0.7.2

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

@@ -0,0 +1,142 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * shadcn/ui theme — Minimal
+ *
+ * Extreme minimalism: zero shadows, hairline borders, sharp corners.
+ * Monospace numbers. Compact spacing. Inspired by Minimal.app.
+ */
+
+@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.375rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0.004 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.004 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.004 285.823);
+  --primary: oklch(0.546 0.245 262.881);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.205 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.556 0.014 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.205 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.935 0.004 286.32);
+  --input: oklch(0.935 0.004 286.32);
+  --ring: oklch(0.546 0.245 262.881);
+  --chart-1: oklch(0.546 0.245 262.881);
+  --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.985 0.001 286.375);
+  --sidebar-foreground: oklch(0.145 0.004 285.823);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.205 0.006 285.885);
+  --sidebar-border: oklch(0.935 0.004 286.32);
+  --sidebar-ring: oklch(0.546 0.245 262.881);
+}
+
+.dark {
+  --background: oklch(0.13 0.004 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.155 0.004 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.155 0.004 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.623 0.214 262.881);
+  --primary-foreground: oklch(0.13 0.004 285.823);
+  --secondary: oklch(0.22 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.22 0.006 286.033);
+  --muted-foreground: oklch(0.63 0.014 286.067);
+  --accent: oklch(0.22 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.24 0.005 286.033);
+  --input: oklch(0.24 0.005 286.033);
+  --ring: oklch(0.623 0.214 262.881);
+  --chart-1: oklch(0.623 0.214 262.881);
+  --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.14 0.004 285.823);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.623 0.214 262.881);
+  --sidebar-primary-foreground: oklch(0.13 0.004 285.823);
+  --sidebar-accent: oklch(0.22 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.24 0.005 286.033);
+  --sidebar-ring: oklch(0.623 0.214 262.881);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "ss01", "ss02", "cv01";
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+/* Monospace tabular figures for numbers */
+.font-mono-num {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.3s ease-out; }

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

@@ -0,0 +1,163 @@
+<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 {
+  Circle,
+  CheckCircle2,
+  ArrowUpRight,
+  Clock,
+  AlertCircle,
+  Minus,
+} from 'lucide-vue-next'
+
+type Priority = 'urgent' | 'high' | 'medium' | 'low' | 'none'
+type Status = 'done' | 'in-progress' | 'todo' | 'backlog'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { id: number; name: string; email: string; role: string } | null
+  navigate?: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const issues: {
+  id: string
+  title: string
+  status: Status
+  priority: Priority
+  assignee: string
+  updated: string
+}[] = [
+  { id: 'MNT-142', title: 'Fix authentication token refresh race condition', status: 'in-progress', priority: 'urgent', assignee: 'AK', updated: '2m' },
+  { id: 'MNT-141', title: 'Add rate limiting to public API endpoints', status: 'todo', priority: 'high', assignee: 'SC', updated: '15m' },
+  { id: 'MNT-140', title: 'Migrate user sessions to Redis store', status: 'in-progress', priority: 'high', assignee: 'AK', updated: '1h' },
+  { id: 'MNT-139', title: 'Update Stripe webhook handler for v2024-12', status: 'todo', priority: 'medium', assignee: 'JL', updated: '2h' },
+  { id: 'MNT-138', title: 'Implement CSV export for analytics dashboard', status: 'done', priority: 'medium', assignee: 'NR', updated: '3h' },
+  { id: 'MNT-137', title: 'Add OpenTelemetry tracing to queue workers', status: 'backlog', priority: 'low', assignee: 'SC', updated: '5h' },
+  { id: 'MNT-136', title: 'Refactor notification preferences into per-channel config', status: 'done', priority: 'medium', assignee: 'AK', updated: '6h' },
+  { id: 'MNT-135', title: 'Set up staging environment with seed data', status: 'backlog', priority: 'low', assignee: 'JL', updated: '1d' },
+  { id: 'MNT-134', title: 'Write integration tests for payment flow', status: 'todo', priority: 'high', assignee: 'NR', updated: '1d' },
+  { id: 'MNT-133', title: 'Audit and update npm dependencies', status: 'backlog', priority: 'none', assignee: 'SC', updated: '2d' },
+]
+
+const priorityColors: Record<Priority, string> = {
+  urgent: 'bg-red-500',
+  high: 'bg-orange-500',
+  medium: 'bg-yellow-500',
+  low: 'bg-blue-400',
+  none: 'bg-muted-foreground/30',
+}
+
+function isPriorityBarActive(priority: Priority, index: number): boolean {
+  return (
+    (priority === 'urgent' && index <= 3) ||
+    (priority === 'high' && index <= 2) ||
+    (priority === 'medium' && index <= 1) ||
+    (priority === 'low' && index <= 0)
+  )
+}
+
+const doneCount = issues.filter((i) => i.status === 'done').length
+const inProgressCount = issues.filter((i) => i.status === 'in-progress').length
+const todoCount = issues.filter((i) => i.status === 'todo').length
+const urgentCount = issues.filter((i) => i.priority === 'urgent').length
+</script>
+
+<template>
+  <AuthenticatedLayout
+    :current-user="currentUser"
+    :app-name="appName"
+    :navigate="navigate"
+    active-path="/dashboard"
+  >
+    <Header :navigate="navigate" />
+    <Main>
+      <div class="space-y-1">
+        <!-- Compact header row -->
+        <div class="flex items-center justify-between py-3">
+          <div class="flex items-center gap-6">
+            <h2 class="text-sm font-semibold">My Issues</h2>
+            <div class="flex items-center gap-4 text-xs text-muted-foreground">
+              <span class="flex items-center gap-1.5">
+                <Clock class="h-3 w-3 text-amber-500" />
+                {{ inProgressCount }} in progress
+              </span>
+              <span class="flex items-center gap-1.5">
+                <Circle class="h-3 w-3" />
+                {{ todoCount }} todo
+              </span>
+              <span class="flex items-center gap-1.5">
+                <CheckCircle2 class="h-3 w-3 text-primary" />
+                {{ doneCount }} done
+              </span>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+              <span class="text-xs">&#8984;</span>K
+            </kbd>
+          </div>
+        </div>
+
+        <!-- Issue list — no cards, just rows -->
+        <div class="border-t">
+          <div
+            v-for="issue in issues"
+            :key="issue.id"
+            class="group flex items-center gap-3 border-b px-1 py-2 transition-colors hover:bg-muted/50 cursor-default"
+          >
+            <!-- Priority indicator -->
+            <div class="flex items-center gap-0.5" :title="issue.priority">
+              <div
+                v-for="i in 4"
+                :key="i"
+                :class="[
+                  'h-2.5 w-[3px] rounded-[1px]',
+                  isPriorityBarActive(issue.priority, i - 1)
+                    ? priorityColors[issue.priority]
+                    : 'bg-muted-foreground/15',
+                ]"
+              />
+            </div>
+
+            <!-- Status icon -->
+            <CheckCircle2 v-if="issue.status === 'done'" class="h-3.5 w-3.5 text-primary" />
+            <Clock v-else-if="issue.status === 'in-progress'" class="h-3.5 w-3.5 text-amber-500" />
+            <Circle v-else-if="issue.status === 'todo'" class="h-3.5 w-3.5 text-muted-foreground" />
+            <Minus v-else class="h-3.5 w-3.5 text-muted-foreground/50" />
+
+            <span class="font-mono-num text-xs text-muted-foreground w-16 shrink-0">
+              {{ issue.id }}
+            </span>
+            <span
+              :class="[
+                'flex-1 text-sm truncate',
+                issue.status === 'done' ? 'line-through text-muted-foreground' : '',
+              ]"
+            >
+              {{ issue.title }}
+            </span>
+            <div class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground">
+              {{ issue.assignee }}
+            </div>
+            <span class="font-mono-num text-xs text-muted-foreground w-8 text-right shrink-0">
+              {{ issue.updated }}
+            </span>
+            <ArrowUpRight class="h-3.5 w-3.5 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors shrink-0" />
+          </div>
+        </div>
+
+        <!-- Bottom counts -->
+        <div class="flex items-center justify-between pt-2 text-xs text-muted-foreground">
+          <span>{{ issues.length }} issues</span>
+          <span class="flex items-center gap-1">
+            <AlertCircle class="h-3 w-3" />
+            {{ urgentCount }} urgent
+          </span>
+        </div>
+      </div>
+    </Main>
+  </AuthenticatedLayout>
+</template>

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

@@ -0,0 +1,91 @@
+<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 credentials.'
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="flex min-h-screen flex-col items-center justify-center bg-background px-4">
+    <div class="w-full max-w-[320px]">
+      <!-- Logo — just text, minimal -->
+      <div class="mb-10">
+        <div class="flex items-center gap-2">
+          <div class="flex h-7 w-7 items-center justify-center rounded bg-foreground text-background text-xs font-bold">
+            M
+          </div>
+          <span class="text-sm font-semibold tracking-tight">{{ appName }}</span>
+        </div>
+      </div>
+
+      <h1 class="text-sm font-medium mb-6">Sign in to continue</h1>
+
+      <div v-if="error" class="mb-4 text-sm text-destructive">
+        {{ error }}
+      </div>
+
+      <form class="space-y-3" @submit.prevent="handleSubmit">
+        <div class="space-y-1.5">
+          <Label for="email" class="text-xs text-muted-foreground">Email</Label>
+          <Input
+            id="email"
+            v-model="email"
+            type="email"
+            required
+            placeholder="you@example.com"
+            autocomplete="email"
+            class="h-8 text-sm"
+          />
+        </div>
+        <div class="space-y-1.5">
+          <Label for="password" class="text-xs text-muted-foreground">Password</Label>
+          <Input
+            id="password"
+            v-model="password"
+            type="password"
+            required
+            placeholder="••••••••"
+            autocomplete="current-password"
+            class="h-8 text-sm"
+          />
+        </div>
+        <Button type="submit" class="w-full h-8 text-sm" :disabled="loading">
+          {{ loading ? 'Signing in\u2026' : 'Continue' }}
+        </Button>
+      </form>
+
+      <p class="mt-4 text-xs text-muted-foreground">
+        No account?{{ ' ' }}
+        <button
+          type="button"
+          class="text-foreground hover:underline underline-offset-2"
+          @click="navigate?.('/register')"
+        >
+          Create one
+        </button>
+      </p>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,73 @@
+<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="flex min-h-screen flex-col items-center justify-center bg-background px-4">
+    <div class="w-full max-w-[320px]">
+      <div class="mb-10">
+        <div class="flex items-center gap-2">
+          <div class="flex h-7 w-7 items-center justify-center rounded bg-foreground text-background text-xs font-bold">
+            M
+          </div>
+          <span class="text-sm font-semibold tracking-tight">{{ appName }}</span>
+        </div>
+      </div>
+
+      <h1 class="text-sm font-medium mb-6">Create your account</h1>
+
+      <div v-if="error" class="mb-4 text-sm text-destructive">
+        {{ error }}
+      </div>
+
+      <form class="space-y-3" @submit.prevent="handleSubmit">
+        <div class="space-y-1.5">
+          <Label for="name" class="text-xs text-muted-foreground">Name</Label>
+          <Input id="name" v-model="name" required placeholder="Your name" class="h-8 text-sm" />
+        </div>
+        <div class="space-y-1.5">
+          <Label for="email" class="text-xs text-muted-foreground">Email</Label>
+          <Input id="email" v-model="email" type="email" required placeholder="you@example.com" autocomplete="email" class="h-8 text-sm" />
+        </div>
+        <div class="space-y-1.5">
+          <Label for="password" class="text-xs text-muted-foreground">Password</Label>
+          <Input id="password" v-model="password" type="password" required placeholder="••••••••" class="h-8 text-sm" />
+        </div>
+        <Button type="submit" class="w-full h-8 text-sm" :disabled="loading">
+          {{ loading ? 'Creating\u2026' : 'Create account' }}
+        </Button>
+      </form>
+
+      <p class="mt-4 text-xs text-muted-foreground">
+        Already have an account?{{ ' ' }}
+        <button type="button" class="text-foreground hover:underline underline-offset-2" @click="navigate?.('/login')">Sign in</button>
+      </p>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,142 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * shadcn/ui theme — Minimal
+ *
+ * Extreme minimalism: zero shadows, hairline borders, sharp corners.
+ * Monospace numbers. Compact spacing. Inspired by Minimal.app.
+ */
+
+@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.375rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0.004 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.004 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.004 285.823);
+  --primary: oklch(0.546 0.245 262.881);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.205 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.556 0.014 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.205 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.935 0.004 286.32);
+  --input: oklch(0.935 0.004 286.32);
+  --ring: oklch(0.546 0.245 262.881);
+  --chart-1: oklch(0.546 0.245 262.881);
+  --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.985 0.001 286.375);
+  --sidebar-foreground: oklch(0.145 0.004 285.823);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.205 0.006 285.885);
+  --sidebar-border: oklch(0.935 0.004 286.32);
+  --sidebar-ring: oklch(0.546 0.245 262.881);
+}
+
+.dark {
+  --background: oklch(0.13 0.004 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.155 0.004 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.155 0.004 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.623 0.214 262.881);
+  --primary-foreground: oklch(0.13 0.004 285.823);
+  --secondary: oklch(0.22 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.22 0.006 286.033);
+  --muted-foreground: oklch(0.63 0.014 286.067);
+  --accent: oklch(0.22 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.24 0.005 286.033);
+  --input: oklch(0.24 0.005 286.033);
+  --ring: oklch(0.623 0.214 262.881);
+  --chart-1: oklch(0.623 0.214 262.881);
+  --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.14 0.004 285.823);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.623 0.214 262.881);
+  --sidebar-primary-foreground: oklch(0.13 0.004 285.823);
+  --sidebar-accent: oklch(0.22 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.24 0.005 286.033);
+  --sidebar-ring: oklch(0.623 0.214 262.881);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "ss01", "ss02", "cv01";
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+/* Monospace tabular figures for numbers */
+.font-mono-num {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.3s ease-out; }

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

@@ -0,0 +1,74 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from '@/components/ui/sidebar'
+import { NavGroup } from './nav-group'
+import { NavUser, type NavUserProps } from './nav-user'
+import { sidebarData } from './sidebar-data'
+import { Command } 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-lg 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">
+                  Admin Panel
+                </span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        {sidebarData.map((group) => (
+          <NavGroup
+            key={group.title}
+            group={group}
+            activePath={activePath}
+            navigate={navigate}
+          />
+        ))}
+      </SidebarContent>
+
+      <SidebarFooter>
+        <NavUser user={user} navigate={navigate} onLogout={onLogout} />
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
+  )
+}