create-nala 3.0.0

package/template/src/views/errors/MaintenanceView.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  Wrench,
+  RefreshCw,
+  Home,
+  CheckCircle2,
+  Clock,
+  Bell,
+  Mail,
+  Activity,
+} from '@lucide/vue'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Progress } from '@/components/ui/progress'
+import AppLogo from '@/components/AppLogo.vue'
+import { toast } from '@/components/ui/sonner'
+
+const router = useRouter()
+
+// Countdown Timer State (Target: 2 hours 45 minutes from now)
+const hours = ref(2)
+const minutes = ref(45)
+const seconds = ref(18)
+let timerInterval: ReturnType<typeof setInterval> | null = null
+
+// Subscription State
+const notifyEmail = ref('')
+const isSubscribed = ref(false)
+const isSubmitting = ref(false)
+const isRefreshing = ref(false)
+
+const maintenanceTasks = [
+  { id: 1, title: 'Database Backup & Snapshot', status: 'completed', desc: 'Immutable backup archive verified' },
+  { id: 2, title: 'Core API Cluster Upgrade', status: 'completed', desc: 'Deploying v2.4 kernel patches' },
+  { id: 3, title: 'Search Index Rebuilding', status: 'in-progress', progress: 78, desc: 'Vector indexes processing' },
+  { id: 4, title: 'Edge CDN Cache Warming', status: 'pending', desc: 'Global edge node cache purge' },
+]
+
+onMounted(() => {
+  timerInterval = setInterval(() => {
+    if (seconds.value > 0) {
+      seconds.value--
+    } else {
+      if (minutes.value > 0) {
+        minutes.value--
+        seconds.value = 59
+      } else {
+        if (hours.value > 0) {
+          hours.value--
+          minutes.value = 59
+          seconds.value = 59
+        } else {
+          if (timerInterval) clearInterval(timerInterval)
+        }
+      }
+    }
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (timerInterval) clearInterval(timerInterval)
+})
+
+async function handleSubscribe() {
+  if (!notifyEmail.value || !notifyEmail.value.includes('@')) {
+    toast.error('Please enter a valid email address.')
+    return
+  }
+
+  isSubmitting.value = true
+  setTimeout(() => {
+    isSubmitting.value = false
+    isSubscribed.value = true
+    toast.success(`We will notify ${notifyEmail.value} as soon as systems are live!`)
+  }, 600)
+}
+
+function handleRefresh() {
+  isRefreshing.value = true
+  setTimeout(() => {
+    isRefreshing.value = false
+    toast.info('System status refreshed: Maintenance is 78% complete.')
+  }, 750)
+}
+</script>
+
+<template>
+  <div class="flex min-h-[calc(100vh-6rem)] flex-col items-center justify-center p-4 sm:p-8">
+    <div class="w-full max-w-2xl space-y-8 text-center">
+      <!-- Brand Logo -->
+      <div class="flex justify-center pb-2">
+        <router-link to="/" class="inline-flex items-center gap-2.5 hover:opacity-90 transition-opacity">
+          <AppLogo class="h-10 w-10" withBackground withText textClass="text-2xl font-bold tracking-tight" />
+        </router-link>
+      </div>
+
+      <!-- Icon & Status Badge -->
+      <div class="space-y-3">
+        <div class="relative mx-auto flex h-20 w-20 items-center justify-center rounded-3xl bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-8 ring-amber-500/5 shadow-xs">
+          <Wrench class="h-10 w-10 animate-spin-slow" />
+          <span class="absolute -bottom-2 rounded-full bg-amber-500 text-white px-2.5 py-0.5 text-[10px] font-bold tracking-wider uppercase shadow-xs">
+            Maintenance
+          </span>
+        </div>
+
+        <div class="space-y-2 pt-2">
+          <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-foreground">
+            System Maintenance in Progress
+          </h1>
+          <p class="text-sm text-muted-foreground leading-relaxed max-w-lg mx-auto">
+            We are performing scheduled core infrastructure updates and database optimizations. All services are expected to resume shortly.
+          </p>
+        </div>
+      </div>
+
+      <!-- Live Countdown Card -->
+      <Card class="border-border/80 bg-card/80 backdrop-blur-xs shadow-md">
+        <CardContent class="p-6">
+          <p class="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4">
+            Estimated Completion In
+          </p>
+
+          <div class="grid grid-cols-3 gap-3 sm:gap-6 max-w-sm mx-auto">
+            <!-- Hours -->
+            <div class="flex flex-col items-center p-3 rounded-xl bg-muted/40 border border-border/60">
+              <span class="text-3xl sm:text-4xl font-mono font-extrabold text-foreground">
+                {{ String(hours).padStart(2, '0') }}
+              </span>
+              <span class="text-[11px] font-medium text-muted-foreground uppercase mt-1">Hours</span>
+            </div>
+
+            <!-- Minutes -->
+            <div class="flex flex-col items-center p-3 rounded-xl bg-muted/40 border border-border/60">
+              <span class="text-3xl sm:text-4xl font-mono font-extrabold text-foreground">
+                {{ String(minutes).padStart(2, '0') }}
+              </span>
+              <span class="text-[11px] font-medium text-muted-foreground uppercase mt-1">Minutes</span>
+            </div>
+
+            <!-- Seconds -->
+            <div class="flex flex-col items-center p-3 rounded-xl bg-muted/40 border border-border/60">
+              <span class="text-3xl sm:text-4xl font-mono font-extrabold text-primary">
+                {{ String(seconds).padStart(2, '0') }}
+              </span>
+              <span class="text-[11px] font-medium text-muted-foreground uppercase mt-1">Seconds</span>
+            </div>
+          </div>
+
+          <!-- Live Progress Tracker -->
+          <div class="mt-8 pt-6 border-t border-border/60 text-left space-y-3">
+            <div class="flex items-center justify-between text-xs">
+              <span class="font-semibold text-foreground flex items-center gap-1.5">
+                <Activity class="h-3.5 w-3.5 text-primary animate-pulse" />
+                <span>Migration Pipeline Progress</span>
+              </span>
+              <span class="font-mono font-bold text-primary">78%</span>
+            </div>
+            <Progress :model-value="78" class="h-2" />
+
+            <!-- Subtask checklist -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 pt-3">
+              <div
+                v-for="task in maintenanceTasks"
+                :key="task.id"
+                class="flex items-start gap-2.5 p-2.5 rounded-lg border border-border/50 bg-background/50 text-xs"
+              >
+                <CheckCircle2 v-if="task.status === 'completed'" class="h-4 w-4 text-emerald-500 shrink-0 mt-0.5" />
+                <RefreshCw v-else-if="task.status === 'in-progress'" class="h-4 w-4 text-primary animate-spin shrink-0 mt-0.5" />
+                <Clock v-else class="h-4 w-4 text-muted-foreground/50 shrink-0 mt-0.5" />
+
+                <div class="space-y-0.5">
+                  <p class="font-medium text-foreground text-xs leading-none">{{ task.title }}</p>
+                  <p class="text-[11px] text-muted-foreground">{{ task.desc }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Email Notification Capture -->
+      <Card class="border-border/80 bg-card/60 shadow-xs max-w-lg mx-auto">
+        <CardContent class="p-5 text-center">
+          <div v-if="!isSubscribed" class="space-y-3">
+            <div class="flex items-center justify-center gap-2 text-xs font-semibold text-foreground">
+              <Bell class="h-4 w-4 text-primary" />
+              <span>Get notified immediately when we're back online</span>
+            </div>
+
+            <form @submit.prevent="handleSubscribe" class="flex flex-col sm:flex-row gap-2">
+              <Input
+                v-model="notifyEmail"
+                type="email"
+                placeholder="Enter your work email"
+                class="h-9 text-xs bg-background"
+                required
+              />
+              <Button type="submit" size="sm" class="h-9 text-xs gap-1.5 shrink-0" :disabled="isSubmitting">
+                <Mail class="h-3.5 w-3.5" />
+                <span>{{ isSubmitting ? 'Subscribing...' : 'Notify Me' }}</span>
+              </Button>
+            </form>
+          </div>
+
+          <div v-else class="flex items-center justify-center gap-2 text-xs text-emerald-600 dark:text-emerald-400 font-medium py-1">
+            <CheckCircle2 class="h-4 w-4" />
+            <span>You're subscribed! We'll email you the moment systems are operational.</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Action Buttons -->
+      <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
+        <Button
+          variant="outline"
+          class="gap-2 cursor-pointer text-xs h-9"
+          :disabled="isRefreshing"
+          @click="handleRefresh"
+        >
+          <RefreshCw class="h-3.5 w-3.5" :class="{ 'animate-spin': isRefreshing }" />
+          <span>{{ isRefreshing ? 'Checking...' : 'Refresh Status' }}</span>
+        </Button>
+
+        <Button
+          variant="default"
+          class="gap-2 cursor-pointer text-xs h-9"
+          @click="router.push('/')"
+        >
+          <Home class="h-3.5 w-3.5" />
+          <span>Dashboard Home</span>
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes spinSlow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin-slow {
+  animation: spinSlow 12s linear infinite;
+}
+</style>

package/template/src/views/errors/NotFoundView.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import {
+  FileQuestion,
+  ArrowLeft,
+  Home,
+  Layers,
+  Settings,
+} from '@lucide/vue'
+
+const router = useRouter()
+
+const goBack = () => {
+  if (window.history.length > 1) {
+    router.back()
+  } else {
+    router.push('/')
+  }
+}
+
+const quickLinks = [
+  { label: 'Overview Dashboard', href: '/', icon: Home },
+  { label: 'UI Components', href: '/components/buttons', icon: Layers },
+  { label: 'System Settings', href: '/settings', icon: Settings },
+]
+</script>
+
+<template>
+  <div class="flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center p-4 text-center sm:p-8">
+    <div class="w-full max-w-lg space-y-6">
+      <!-- Icon & Status Badge -->
+      <div class="relative mx-auto flex h-24 w-24 items-center justify-center rounded-3xl bg-primary/10 text-primary ring-8 ring-primary/5">
+        <FileQuestion class="h-12 w-12" />
+        <span class="absolute -bottom-2.5 rounded-full bg-primary px-3 py-0.5 text-[11px] font-bold tracking-wider text-primary-foreground uppercase shadow-xs">
+          404 Error
+        </span>
+      </div>
+
+      <!-- Main Copy -->
+      <div class="space-y-2">
+        <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl text-foreground">
+          Page Not Found
+        </h1>
+        <p class="text-sm text-muted-foreground leading-relaxed max-w-md mx-auto">
+          The requested URL does not exist or has been moved. Check the URL spelling or choose one of the quick shortcuts below.
+        </p>
+      </div>
+
+      <!-- Quick Action Buttons -->
+      <div class="flex flex-col gap-2.5 sm:flex-row sm:justify-center pt-2">
+        <Button variant="outline" class="gap-2 cursor-pointer" @click="goBack">
+          <ArrowLeft class="h-4 w-4" />
+          Go Back
+        </Button>
+        <Button as-child class="gap-2 cursor-pointer">
+          <router-link to="/">
+            <Home class="h-4 w-4" />
+            Back to Dashboard
+          </router-link>
+        </Button>
+      </div>
+
+      <!-- Quick Helpful Links -->
+      <div class="pt-6 border-t border-border/60">
+        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+          Popular Destinations
+        </p>
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+          <router-link
+            v-for="link in quickLinks"
+            :key="link.href"
+            :to="link.href"
+            class="flex items-center justify-center gap-2 p-2.5 rounded-lg border border-border bg-card hover:border-primary/50 hover:bg-primary/5 text-xs font-medium text-foreground transition-all shadow-2xs"
+          >
+            <component :is="link.icon" class="h-3.5 w-3.5 text-muted-foreground" />
+            <span>{{ link.label }}</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/template/src/views/errors/ServerErrorView.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import {
+  ServerCrash,
+  RefreshCw,
+  Home,
+  Activity,
+  Copy,
+  Check,
+} from '@lucide/vue'
+
+const isReloading = ref(false)
+const copiedTrace = ref(false)
+const traceId = ref('req_8f19da240b91_fra')
+
+const handleReload = () => {
+  isReloading.value = true
+  setTimeout(() => {
+    window.location.reload()
+  }, 600)
+}
+
+const copyTraceId = () => {
+  navigator.clipboard.writeText(traceId.value)
+  copiedTrace.value = true
+  setTimeout(() => {
+    copiedTrace.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <div class="flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center p-4 text-center sm:p-8">
+    <div class="w-full max-w-lg space-y-6">
+      <!-- Icon & Status Badge -->
+      <div class="relative mx-auto flex h-24 w-24 items-center justify-center rounded-3xl bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-8 ring-amber-500/5">
+        <ServerCrash class="h-12 w-12" />
+        <span class="absolute -bottom-2.5 rounded-full bg-amber-600 text-white px-3 py-0.5 text-[11px] font-bold tracking-wider uppercase shadow-xs">
+          500 Error
+        </span>
+      </div>
+
+      <!-- Main Copy -->
+      <div class="space-y-2">
+        <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl text-foreground">
+          Internal Server Error
+        </h1>
+        <p class="text-sm text-muted-foreground leading-relaxed max-w-md mx-auto">
+          Our gateway encountered an unexpected exception while processing this request. Our engineering team has been automatically notified.
+        </p>
+      </div>
+
+      <!-- Diagnostic Trace ID Card -->
+      <div class="rounded-xl border border-border bg-card p-3 max-w-sm mx-auto flex items-center justify-between text-xs font-mono shadow-2xs">
+        <div class="flex items-center gap-2 text-muted-foreground">
+          <span class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></span>
+          <span>Trace:</span>
+          <span class="text-foreground font-semibold">{{ traceId }}</span>
+        </div>
+        <button
+          type="button"
+          @click="copyTraceId"
+          class="text-muted-foreground hover:text-foreground cursor-pointer transition-colors p-1"
+          title="Copy Trace ID"
+        >
+          <Check v-if="copiedTrace" class="h-3.5 w-3.5 text-emerald-500" />
+          <Copy v-else class="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      <!-- Quick Action Buttons -->
+      <div class="flex flex-col gap-2.5 sm:flex-row sm:justify-center pt-2">
+        <Button
+          variant="outline"
+          class="gap-2 cursor-pointer"
+          :disabled="isReloading"
+          @click="handleReload"
+        >
+          <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': isReloading }" />
+          {{ isReloading ? 'Reloading...' : 'Try Again' }}
+        </Button>
+        <Button as-child class="gap-2 cursor-pointer">
+          <router-link to="/">
+            <Home class="h-4 w-4" />
+            Back to Dashboard
+          </router-link>
+        </Button>
+      </div>
+
+      <!-- System Health Hint -->
+      <div class="pt-6 border-t border-border/60">
+        <div class="inline-flex items-center gap-2 text-xs text-muted-foreground">
+          <Activity class="h-3.5 w-3.5 text-emerald-500" />
+          <span>All global systems are operating nominally.</span>
+          <router-link to="/components/charts" class="font-medium text-primary hover:underline transition-colors">
+            View Status
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/template/src/views/errors/UnauthorizedView.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { Button } from '@/components/ui/button'
+import { ShieldAlert, ArrowLeft, Home, HelpCircle } from '@lucide/vue'
+
+const router = useRouter()
+
+const goBack = () => {
+  if (window.history.length > 1) {
+    router.back()
+  } else {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div class="flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center p-4 text-center sm:p-8">
+    <div class="w-full max-w-md space-y-6">
+      <!-- Icon & Status Badge -->
+      <div class="relative mx-auto flex h-24 w-24 items-center justify-center rounded-3xl bg-destructive/10 text-destructive ring-8 ring-destructive/5">
+        <ShieldAlert class="h-12 w-12" />
+        <span class="absolute -bottom-2.5 rounded-full bg-destructive px-2.5 py-0.5 text-[11px] font-bold tracking-wider text-destructive-foreground uppercase shadow-xs">
+          403 Error
+        </span>
+      </div>
+
+      <!-- Main Copy -->
+      <div class="space-y-2">
+        <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl text-foreground">
+          Access Denied
+        </h1>
+        <p class="text-sm text-muted-foreground leading-relaxed">
+          You don't have permission to access this page or resource. If you believe this is an error, please contact your administrator.
+        </p>
+      </div>
+
+      <!-- Quick Action Buttons -->
+      <div class="flex flex-col gap-2.5 sm:flex-row sm:justify-center pt-2">
+        <Button variant="outline" class="gap-2 cursor-pointer" @click="goBack">
+          <ArrowLeft class="h-4 w-4" />
+          Go Back
+        </Button>
+        <Button as-child class="gap-2 cursor-pointer">
+          <router-link to="/">
+            <Home class="h-4 w-4" />
+            Back to Dashboard
+          </router-link>
+        </Button>
+      </div>
+
+      <!-- Help / Support Hint -->
+      <div class="pt-6 border-t border-border/60">
+        <div class="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+          <HelpCircle class="h-3.5 w-3.5" />
+          <span>Need elevated permissions?</span>
+          <router-link to="/settings" class="font-medium text-primary hover:underline transition-colors">
+            Contact Support
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/template/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": [
+      "vite/client",
+      "vitest/globals"
+    ],
+    "allowArbitraryExtensions": true,
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
+}

package/template/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  }
+}

package/template/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,46 @@
+/// <reference types="vitest/config" />
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+  },
+  plugins: [
+    vue(),
+    tailwindcss(),
+    AutoImport({
+      imports: [
+        'vue',
+        'vue-router',
+        'pinia',
+        '@vueuse/core',
+      ],
+      dts: 'src/auto-imports.d.ts',
+      dirs: [
+        'src/lib',
+        'src/composables',
+      ],
+      vueTemplate: true,
+    }),
+    Components({
+      dirs: ['src/components'],
+      extensions: ['vue'],
+      dts: 'src/components.d.ts',
+      deep: true,
+    }),
+  ],
+  server: {
+    host: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(import.meta.dirname, './src'),
+    },
+  },
+})