create-nala 3.0.0

package/template/src/components/AppLogo.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+interface Props {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string
+  class?: string
+  withText?: boolean
+  withBackground?: boolean
+  variant?: 'supabase' | 'monochrome'
+  textClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  withText: false,
+  withBackground: false,
+  variant: 'supabase',
+})
+
+const gradientId = useId()
+
+const sizeClasses = computed(() => {
+  if (typeof props.size === 'number') {
+    return `h-[${props.size}px] w-[${props.size}px]`
+  }
+  switch (props.size) {
+    case 'xs':
+      return 'h-3.5 w-3.5'
+    case 'sm':
+      return 'h-4 w-4'
+    case 'md':
+      return 'h-5 w-5'
+    case 'lg':
+      return 'h-6 w-6'
+    case 'xl':
+      return 'h-8 w-8'
+    default:
+      return props.size
+  }
+})
+
+const logoPath = `M6600 7929 c-127 -13 -224 -35 -287 -64 -30 -15 -74 -33 -97 -41 -22 -8 -58 -26 -79 -40 -21 -14 -49 -29 -64 -35 -42 -16 -173 -113 -242 -178 -35 -34 -77 -71 -95 -84 -17 -12 -58 -47 -91 -78 -178 -167 -310 -288 -348 -318 -48 -38 -153 -132 -347 -309 -74 -68 -156 -143 -181 -166 -74 -67 -94 -114 -94 -221 0 -80 3 -95 27 -137 60 -100 174 -167 304 -176 59 -4 85 0 150 22 44 14 91 34 105 44 55 36 177 140 279 238 58 55 145 133 193 172 48 39 159 136 245 215 246 227 449 391 528 428 57 26 85 33 160 37 106 5 138 -3 221 -57 47 -30 68 -53 102 -110 24 -40 47 -86 52 -103 4 -17 9 -596 10 -1288 0 -975 -2 -1263 -11 -1281 -30 -58 -105 -131 -164 -161 -53 -28 -71 -32 -141 -32 -75 -1 -85 2 -162 41 -57 30 -118 75 -203 150 -66 59 -151 133 -188 163 -38 30 -139 118 -226 195 -87 77 -197 174 -246 215 -48 41 -150 129 -226 195 -76 66 -150 130 -164 141 -14 12 -101 88 -193 170 -93 82 -200 176 -239 209 -98 82 -334 290 -383 336 -22 20 -78 70 -125 110 -47 40 -143 126 -215 190 -233 209 -338 264 -589 309 -111 20 -396 7 -517 -24 -162 -41 -321 -134 -417 -244 -64 -74 -149 -212 -163 -266 -6 -23 -21 -75 -34 -117 -13 -42 -29 -114 -35 -160 -7 -58 -10 -526 -8 -1524 l3 -1440 41 -108 c45 -116 72 -161 149 -245 83 -92 265 -212 375 -247 30 -10 72 -26 92 -36 63 -32 143 -48 297 -60 182 -14 377 6 476 48 33 14 88 36 123 49 35 13 80 35 100 49 20 14 42 25 48 25 19 0 166 108 247 182 44 40 90 80 103 88 20 14 254 225 384 347 30 28 98 89 151 135 234 203 449 402 473 436 38 55 48 90 49 162 0 103 -16 147 -82 211 -80 79 -146 104 -271 104 -166 0 -217 -30 -492 -280 -84 -78 -198 -177 -253 -222 -55 -44 -111 -93 -125 -108 -53 -58 -271 -247 -503 -436 -21 -17 -75 -47 -120 -67 -140 -61 -271 -48 -384 38 -38 28 -57 55 -95 130 l-47 95 -3 1255 c-2 1160 -1 1257 14 1285 42 75 95 129 156 162 57 30 72 33 147 33 76 0 89 -3 152 -36 83 -44 143 -90 287 -218 61 -54 131 -115 156 -135 58 -46 192 -163 300 -261 47 -43 121 -108 165 -146 44 -37 126 -109 182 -159 56 -49 123 -109 150 -131 113 -97 323 -282 384 -339 36 -34 97 -86 135 -117 38 -30 110 -92 159 -138 160 -146 191 -174 290 -255 54 -44 155 -130 225 -192 70 -62 156 -132 191 -156 69 -46 212 -109 294 -127 144 -33 462 -28 605 9 216 55 395 186 514 375 57 92 122 285 137 411 14 121 12 2900 -2 2967 -20 91 -91 239 -153 317 -92 116 -227 210 -391 276 -44 17 -94 39 -111 48 -47 24 -106 35 -280 52 -87 8 -158 14 -158 14 -1 -1 -39 -6 -86 -10z`
+</script>
+
+<template>
+  <div v-if="withText" class="inline-flex items-center gap-2.5">
+    <!-- SVG with squircle background -->
+    <svg
+      v-if="withBackground"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1000 1000"
+      :class="[sizeClasses, props.class]"
+      aria-hidden="true"
+    >
+      <defs v-if="variant === 'supabase'">
+        <linearGradient :id="`grad-${gradientId}`" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" class="logo-stop-start" stop-color="#10B981" />
+          <stop offset="50%" class="logo-stop-mid" stop-color="#059669" />
+          <stop offset="100%" class="logo-stop-end" stop-color="#047857" />
+        </linearGradient>
+      </defs>
+      <rect x="0" y="0" width="1000" height="1000" rx="225" fill="#0A0A0E" />
+      <g transform="translate(500,500) scale(1.22) translate(-509.75,-495.8)">
+        <g transform="translate(0,1000) scale(0.1,-0.1)" :fill="variant === 'supabase' ? `url(#grad-${gradientId})` : '#ffffff'" stroke="none">
+          <path :d="logoPath" />
+        </g>
+      </g>
+    </svg>
+    <!-- Tight viewBox for clean icon usage without excessive transparent margin -->
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="200 185 620 620"
+      :class="[sizeClasses, props.class]"
+      aria-hidden="true"
+    >
+      <defs v-if="variant === 'supabase'">
+        <linearGradient :id="`grad-${gradientId}`" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" class="logo-stop-start" stop-color="#10B981" />
+          <stop offset="50%" class="logo-stop-mid" stop-color="#059669" />
+          <stop offset="100%" class="logo-stop-end" stop-color="#047857" />
+        </linearGradient>
+      </defs>
+      <g transform="translate(0,1000) scale(0.1,-0.1)" :fill="variant === 'supabase' ? `url(#grad-${gradientId})` : 'currentColor'">
+        <path :d="logoPath" />
+      </g>
+    </svg>
+    <span :class="['font-bold tracking-tight text-foreground', textClass || 'text-base font-semibold']">
+      Nala
+    </span>
+  </div>
+
+  <!-- Standalone SVG with squircle background -->
+  <svg
+    v-else-if="withBackground"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1000 1000"
+    :class="[sizeClasses, props.class]"
+    aria-hidden="true"
+  >
+    <defs v-if="variant === 'supabase'">
+      <linearGradient :id="`grad-${gradientId}`" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" class="logo-stop-start" stop-color="#10B981" />
+        <stop offset="50%" class="logo-stop-mid" stop-color="#059669" />
+        <stop offset="100%" class="logo-stop-end" stop-color="#047857" />
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" width="1000" height="1000" rx="225" fill="#0A0A0E" />
+    <g transform="translate(500,500) scale(1.22) translate(-509.75,-495.8)">
+      <g transform="translate(0,1000) scale(0.1,-0.1)" :fill="variant === 'supabase' ? `url(#grad-${gradientId})` : '#ffffff'" stroke="none">
+        <path :d="logoPath" />
+      </g>
+    </g>
+  </svg>
+
+  <!-- Standalone tight viewBox icon (Razor-sharp vector without CSS filter bleed) -->
+  <svg
+    v-else
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="200 185 620 620"
+    :class="[sizeClasses, props.class]"
+    aria-hidden="true"
+  >
+    <defs v-if="variant === 'supabase'">
+      <linearGradient :id="`grad-${gradientId}`" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" class="logo-stop-start" stop-color="#10B981" />
+        <stop offset="50%" class="logo-stop-mid" stop-color="#059669" />
+        <stop offset="100%" class="logo-stop-end" stop-color="#047857" />
+      </linearGradient>
+    </defs>
+    <g transform="translate(0,1000) scale(0.1,-0.1)" :fill="variant === 'supabase' ? `url(#grad-${gradientId})` : 'currentColor'">
+      <path :d="logoPath" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+/* Light Mode: High-contrast, rich & bold emerald (never washed out on white) */
+.logo-stop-start {
+  stop-color: #10B981;
+}
+.logo-stop-mid {
+  stop-color: #059669;
+}
+.logo-stop-end {
+  stop-color: #047857;
+}
+
+/* Dark Mode: Vibrant, glowing mint with luminous highlight on dark background */
+:global(.dark) .logo-stop-start {
+  stop-color: #53F5AC;
+}
+:global(.dark) .logo-stop-mid {
+  stop-color: #3ECF8E;
+}
+:global(.dark) .logo-stop-end {
+  stop-color: #24B47E;
+}
+</style>

package/template/src/components/EmptyState.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { Inbox } from '@lucide/vue'
+import { Badge } from '@/components/ui/badge'
+
+interface Props {
+  /** Lucide icon component or custom icon */
+  icon?: Component
+  /** Main heading */
+  title: string
+  /** Descriptive explanation or guidance */
+  description?: string
+  /** Optional badge text */
+  badge?: string
+  /** Compact padding variant for in-card or widget usage */
+  compact?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  icon: Inbox,
+  description: '',
+  badge: '',
+  compact: false,
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'flex flex-col items-center justify-center text-center rounded-xl border border-dashed border-border/80 bg-muted/10',
+      compact ? 'py-8 px-4' : 'py-14 px-6'
+    ]"
+    role="status"
+  >
+    <!-- Icon Container -->
+    <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted/60 border border-border/60 text-muted-foreground shadow-2xs">
+      <component :is="icon" class="h-6 w-6 stroke-[1.75]" />
+    </div>
+
+    <!-- Optional Badge -->
+    <div v-if="badge" class="mb-2">
+      <Badge variant="outline" class="text-[11px] font-mono px-2 py-0.5">
+        {{ badge }}
+      </Badge>
+    </div>
+
+    <!-- Title & Description -->
+    <h3 class="text-sm font-semibold text-foreground tracking-tight">
+      {{ title }}
+    </h3>
+    <p v-if="description" class="mt-1.5 max-w-sm text-xs text-muted-foreground leading-relaxed">
+      {{ description }}
+    </p>
+
+    <!-- Action Slot (Buttons, Recovery links, etc.) -->
+    <div v-if="$slots.actions" class="mt-5 flex flex-wrap items-center justify-center gap-2.5">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/template/src/components/PageHeader.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface PageHeaderProps {
+  title?: string
+  description?: string
+  badge?: string
+  statusDot?: boolean
+  headingTag?: 'h1' | 'h2'
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<PageHeaderProps>(), {
+  title: '',
+  description: '',
+  badge: '',
+  statusDot: true,
+  headingTag: 'h1',
+})
+</script>
+
+<template>
+  <div
+    data-slot="page-header"
+    :class="cn('flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between', props.class)"
+  >
+    <div>
+      <div v-if="props.badge || $slots.badge" class="flex items-center gap-2">
+        <slot name="badge">
+          <span class="label-mono">{{ props.badge }}</span>
+        </slot>
+        <span v-if="props.statusDot" class="status-dot" />
+      </div>
+
+      <component
+        :is="props.headingTag"
+        class="text-2xl font-bold tracking-tight text-foreground mt-1"
+      >
+        <slot name="title">{{ props.title }}</slot>
+      </component>
+
+      <p
+        v-if="props.description || $slots.description"
+        class="text-sm text-muted-foreground"
+      >
+        <slot name="description">{{ props.description }}</slot>
+      </p>
+    </div>
+
+    <div
+      v-if="$slots.actions || $slots.default"
+      class="flex items-center gap-2 pt-2 sm:pt-0 shrink-0"
+    >
+      <slot name="actions">
+        <slot />
+      </slot>
+    </div>
+  </div>
+</template>

package/template/src/components/layout/AppNavbar.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import {
+  Search,
+  ChevronDown,
+  LogOut,
+  Lock,
+} from '@lucide/vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Separator } from '@/components/ui/separator'
+import { SidebarTrigger } from '@/components/ui/sidebar'
+import AppLogo from '@/components/AppLogo.vue'
+import { useAuthStore } from '@/stores/auth'
+
+const emit = defineEmits<{
+  (e: 'open-search'): void
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const mode = useColorMode({
+  selector: 'html',
+  attribute: 'class',
+  emitAuto: true,
+  modes: {
+    auto: '',
+    dark: 'dark',
+    light: '',
+  },
+})
+
+const pageTitle = computed(() => {
+  if (route.name === 'dashboard') return 'Dashboard'
+  if (route.name === 'starter-blank') return 'Blank Page'
+  if (route.name === 'not-found' || route.name === 'catch-all-not-found') return '404 Not Found'
+  if (route.name === 'server-error') return '500 Server Error'
+  if (route.name === 'unauthorized') return '403 Access Denied'
+  if (route.name === 'login') return 'Login'
+  if (route.name === 'register') return 'Register'
+  if (route.name === 'forgot-password') return 'Forgot Password'
+  if (route.name === 'verify-otp') return 'Verify OTP'
+  if (route.name === 'reset-password') return 'Reset Password'
+  if (route.name === 'confirm-email') return 'Confirm Email'
+  if (route.name === 'lock-screen') return 'Lock Screen'
+  return 'Admin'
+})
+
+const handleLogout = () => {
+  authStore.logout()
+  router.push('/auth/login')
+}
+</script>
+
+<template>
+  <header class="fixed inset-x-0 top-0 z-40 flex h-14 w-full shrink-0 items-center justify-between border-b border-border bg-background/80 pr-4 sm:pr-6 backdrop-blur-md">
+    <!-- Left: App Logo, Sidebar Toggle & Breadcrumb -->
+    <div class="flex items-center gap-1 sm:gap-2 min-w-0">
+      <!-- Logo container matched to collapsed sidebar column width -->
+      <div class="flex h-14 w-14 shrink-0 items-center justify-center">
+        <router-link to="/" class="flex items-center justify-center text-primary hover:opacity-85 transition-opacity" aria-label="Nala Home">
+          <AppLogo class="h-6 w-6" />
+        </router-link>
+      </div>
+
+      <SidebarTrigger class="md:hidden" />
+      <Separator orientation="vertical" class="h-4 hidden sm:block" />
+
+      <Breadcrumb class="hidden sm:block">
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink to="/">Admin</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>{{ pageTitle }}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </div>
+
+    <!-- Right: Search Command Trigger & User Profile Dropdown -->
+    <div class="flex items-center gap-2 sm:gap-3 shrink-0">
+      <!-- Search Command Trigger Button -->
+      <button
+        @click="emit('open-search')"
+        class="flex items-center gap-2 rounded-full border border-input bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:px-3.5"
+      >
+        <Search class="h-3.5 w-3.5 shrink-0" />
+        <span class="hidden sm:inline">Search...</span>
+        <span class="hidden sm:inline pointer-events-none ml-1 text-xs font-normal text-muted-foreground">
+          Ctrl K
+        </span>
+      </button>
+
+      <!-- User Profile & Theme Dropdown Menu -->
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <button class="flex items-center gap-2 rounded-full p-1 hover:bg-accent transition-colors cursor-pointer">
+            <Avatar class="h-8 w-8 border">
+              <AvatarImage :src="authStore.user?.avatar || '/img/avatar.webp'" alt="User profile" />
+              <AvatarFallback>AU</AvatarFallback>
+            </Avatar>
+            <ChevronDown class="h-4 w-4 text-muted-foreground" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" class="w-56">
+          <DropdownMenuLabel class="font-normal">
+            <div class="flex flex-col space-y-1">
+              <p class="text-sm font-medium leading-none">{{ authStore.user?.name || 'Administrator' }}</p>
+              <p class="text-xs leading-none text-muted-foreground">{{ authStore.user?.email || 'admin@nala.design' }}</p>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem @click="$router.push('/auth/lock-screen')">
+            <Lock class="mr-2 h-4 w-4" />
+            <span>Lock Screen</span>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel class="text-xs text-muted-foreground font-normal px-2 py-1.5">Theme</DropdownMenuLabel>
+          <DropdownMenuRadioGroup v-model="mode">
+            <DropdownMenuRadioItem value="auto">
+              System
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="dark">
+              Dark
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="light">
+              Light
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem @click="handleLogout">
+            <LogOut class="mr-2 h-4 w-4" />
+            <span>Log out</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </header>
+</template>

package/template/src/components/layout/AppSidebar.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {
+  LayoutDashboard,
+  FileCode2,
+} from '@lucide/vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarControl,
+} from '@/components/ui/sidebar'
+
+interface NavItem {
+  name: string
+  routeName: string
+  href: string
+  icon: any
+}
+
+const route = useRoute()
+
+// Auto-close sidebar on mobile when navigating
+const closeMobileSidebar = () => {
+  const triggerBtn = document.querySelector('[data-sidebar="trigger"]') as HTMLButtonElement
+  if (window.innerWidth <= 768 && triggerBtn) {
+    triggerBtn.click()
+  }
+}
+
+// 1. Navigation Items
+const mainNav: NavItem[] = [
+  { name: 'Dashboard', routeName: 'dashboard', href: '/', icon: LayoutDashboard },
+  { name: 'Blank Page', routeName: 'starter-blank', href: '/_blank', icon: FileCode2 },
+]
+</script>
+
+<template>
+  <Sidebar collapsible="icon" class="top-14 h-[calc(100svh-3.5rem)]">
+    <SidebarContent class="py-2 space-y-0">
+      <!-- Main Navigation Group -->
+      <SidebarGroup class="py-1 px-2">
+        <SidebarGroupLabel class="text-[11px] font-medium tracking-wider uppercase text-muted-foreground/70">
+          Navigation
+        </SidebarGroupLabel>
+        <SidebarMenu class="gap-0.5">
+          <SidebarMenuItem v-for="item in mainNav" :key="item.name">
+            <SidebarMenuButton
+              as-child
+              :is-active="route.name === item.routeName"
+              :tooltip="item.name"
+            >
+              <router-link :to="item.href" @click="closeMobileSidebar">
+                <component :is="item.icon" class="h-4 w-4 shrink-0" />
+                <span>{{ item.name }}</span>
+              </router-link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+
+    <!-- Sidebar Footer -->
+    <SidebarFooter class="border-t border-sidebar-border p-2">
+      <div class="flex items-center justify-between w-full">
+        <SidebarControl />
+      </div>
+    </SidebarFooter>
+  </Sidebar>
+</template>

package/template/src/components/layout/CommandSearchDialog.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import {
+  LayoutDashboard,
+  FileCode2,
+  FileQuestion,
+  ServerCrash,
+  ShieldAlert,
+  LogIn,
+  UserRound,
+  KeyRound,
+  ScanLine,
+  LockKeyhole,
+  MailCheck,
+  Search,
+  Lock,
+  Wrench,
+  Rocket,
+} from '@lucide/vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+interface SearchItem {
+  title: string
+  href: string
+  icon: any
+  category: string
+}
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const router = useRouter()
+const searchQuery = ref('')
+
+const searchItems: SearchItem[] = [
+  { title: 'Dashboard Overview', href: '/', icon: LayoutDashboard, category: 'Overview' },
+  { title: 'Blank Starter Page', href: '/_blank', icon: FileCode2, category: 'Pages' },
+  { title: 'Login', href: '/auth/login', icon: LogIn, category: 'Auth' },
+  { title: 'Register', href: '/auth/register', icon: UserRound, category: 'Auth' },
+  { title: 'Forgot Password', href: '/auth/forgot-password', icon: KeyRound, category: 'Auth' },
+  { title: 'Verify OTP', href: '/auth/verify-otp', icon: ScanLine, category: 'Auth' },
+  { title: 'Reset Password', href: '/auth/reset-password', icon: LockKeyhole, category: 'Auth' },
+  { title: 'Confirm Email', href: '/auth/confirm-email', icon: MailCheck, category: 'Auth' },
+  { title: 'Lock Screen', href: '/auth/lock-screen', icon: Lock, category: 'Auth' },
+  { title: '404 Not Found Page', href: '/errors/404', icon: FileQuestion, category: 'Errors' },
+  { title: '500 Server Error Page', href: '/errors/500', icon: ServerCrash, category: 'Errors' },
+  { title: '403 Access Denied', href: '/errors/403', icon: ShieldAlert, category: 'Errors' },
+  { title: 'Maintenance Mode Page', href: '/errors/maintenance', icon: Wrench, category: 'Errors' },
+  { title: 'Coming Soon Page', href: '/errors/coming-soon', icon: Rocket, category: 'Errors' },
+]
+
+const filteredSearchItems = computed(() => {
+  if (!searchQuery.value) return searchItems
+  return searchItems.filter((item) =>
+    item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+    item.category.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+})
+
+const navigateTo = (href: string) => {
+  emit('update:open', false)
+  searchQuery.value = ''
+  if (href.startsWith('http')) {
+    window.open(href, '_blank', 'noopener,noreferrer')
+  } else {
+    router.push(href)
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="p-0 w-[calc(100%-2rem)] sm:w-full max-w-lg overflow-hidden gap-0 top-16 sm:top-20 translate-y-0">
+      <DialogHeader class="sr-only">
+        <DialogTitle>Quick Search</DialogTitle>
+        <DialogDescription>Search pages and commands in Nala admin</DialogDescription>
+      </DialogHeader>
+      <div class="flex items-center border-b border-border px-3">
+        <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <input
+          v-model="searchQuery"
+          placeholder="Type a command or search page..."
+          class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </div>
+      <div class="max-h-75 overflow-y-auto p-2">
+        <div v-if="filteredSearchItems.length === 0" class="py-6 text-center text-sm text-muted-foreground">
+          No results found for "{{ searchQuery }}".
+        </div>
+        <div v-else class="space-y-1">
+          <div class="px-2 py-1.5 text-[11px] font-medium text-muted-foreground">
+            Navigation & Pages
+          </div>
+          <button
+            v-for="item in filteredSearchItems"
+            :key="item.href"
+            @click="navigateTo(item.href)"
+            class="w-full flex items-center justify-between rounded-md px-2 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors"
+          >
+            <div class="flex items-center gap-2">
+              <component :is="item.icon" class="h-4 w-4 text-muted-foreground" />
+              <span>{{ item.title }}</span>
+            </div>
+            <span class="text-[11px] text-muted-foreground">{{ item.category }}</span>
+          </button>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

package/template/src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
+import { AccordionRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded" data-slot="accordion">
+    <slot />
+  </AccordionRoot>
+</template>

package/template/src/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { AccordionContent } from "reka-ui"
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="props"
+    data-slot="accordion-content"
+    class="overflow-hidden text-xs data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0 text-muted-foreground leading-relaxed', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>