create-nala 3.0.4 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nala",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "Scaffolding CLI tool for Nala Admin Dashboard Template",
   "author": "candrasp",
   "license": "MIT",

package/template/.agents/skills/nala-project/SKILL.md

@@ -1,14 +1,59 @@
 ---
 name: nala-project
 description: >
-  Skill for the Nala Admin Dashboard Project - Single SPA application built with Vue 3,
-  Vite, TypeScript, Tailwind CSS v4, Reka UI (shadcn-vue), Pinia, and Axios.
-  Activates when building views, components, stores, API services, or scaffolding features.
+  Skill for the Nala Admin Dashboard Project - a starter SPA template scaffolded with `pnpm create nala`,
+  built with Vue 3, Vite, TypeScript, Tailwind CSS v4, Reka UI (shadcn-vue), Unovis charts, Pinia, and Axios.
+  Activates when building views, components, stores, API services, or scaffolding new features.
 ---
 
-# Nala Project Skill (Starter Edition)
+# Nala Project Skill (Starter Template Edition)
 
-You are an expert frontend engineer building features for this **Nala Admin Dashboard** application. Follow these instructions strictly to ensure clean architecture, design consistency, and zero UI regressions.
+You are an expert frontend engineer building features for this **Nala Admin Dashboard** application — a clean, minimal starter template scaffolded via `pnpm create nala`. Follow these instructions strictly to ensure clean architecture, design consistency, and zero UI regressions.
+
+> **⚠️ Important Context:** This is the **Starter Template**, NOT the full Nala showcase monorepo.
+> There are no showcase views, no ThemeCustomizer, no `CodePreview` component, and no demo-only stores like `notification`, `activity`, `billing`, or `role`. Reference the Nala showcase (`packages/showcase/`) as inspiration only.
+
+---
+
+## 🏗️ Project Structure
+
+```
+src/
+├── components/
+│   ├── AppLogo.vue              ← Auto-imported brand logo component
+│   ├── EmptyState.vue           ← Auto-imported zero-data empty state component
+│   ├── PageHeader.vue           ← Auto-imported standard page top header
+│   ├── layout/                  ← AdminLayout sub-components (Navbar, Sidebar, etc.)
+│   └── ui/                      ← 45 Reka UI primitives (all auto-imported)
+├── composables/
+│   ├── useFormatter.ts          ← Auto-imported: currency, date, number, relative time formatting
+│   └── useThemeConfig.ts        ← Auto-imported: layout mode, border radius, accent color
+├── layouts/
+│   ├── AdminLayout.vue          ← Main dashboard shell (sidebar + navbar + content slot)
+│   └── AuthLayout.vue           ← Centered auth card layout
+├── lib/
+│   ├── axios.ts                 ← Pre-configured Axios instance with interceptors
+│   ├── formatters.ts            ← Core formatter functions (used by useFormatter)
+│   ├── loading-bar.ts           ← Global loading bar singleton
+│   ├── utils.ts                 ← cn() class merging utility
+│   └── validation.ts            ← Shared zod validation helpers
+├── router/
+│   └── index.ts                 ← Vue Router with auth guard scaffold (commented, ready to enable)
+├── services/
+│   ├── auth.service.ts          ← Auth API methods (login, logout, refresh token)
+│   ├── user.service.ts          ← User CRUD API methods
+│   ├── types.ts                 ← Shared API response types (ApiResponse<T>)
+│   └── index.ts                 ← Service re-exports
+├── stores/
+│   └── auth.ts                  ← Auth Pinia store (isAuthenticated, currentUser, login/logout)
+└── views/
+    ├── _starter/
+    │   └── BlankView.vue        ← Scaffolding starting point for new pages
+    ├── auth/                    ← Full auth suite (Login, Register, Forgot/Reset Password, OTP, etc.)
+    ├── dashboard/
+    │   └── IndexView.vue        ← Minimal dashboard with KPI stat cards (your starting point)
+    └── errors/                  ← 404, 500, 403, Maintenance, Coming Soon pages
+```
 
 ---
 
@@ -19,12 +64,13 @@ You are an expert frontend engineer building features for this **Nala Admin Dash
 | **Framework** | Vue 3 (Composition API) | Always use `<script setup lang="ts">` |
 | **Build Tool** | Vite 8 (`@vitejs/plugin-vue`) | Super-fast HMR & production bundler |
 | **Styling** | Tailwind CSS v4 (`@tailwindcss/vite`) + `tw-animate-css` | OKLCH color tokens in `src/style.css` |
-| **UI Primitives** | `reka-ui` + shadcn-vue (New York style) | 34+ primitive components in `src/components/ui/` |
+| **UI Primitives** | `reka-ui` + shadcn-vue (New York style) | 45 primitive components in `src/components/ui/` |
+| **Charts** | `@unovis/ts` + `@unovis/vue` | SVG chart primitives: `AreaChart`, `BarChart`, `LineChart`, `DonutChart` |
 | **Data Table** | `@tanstack/vue-table` | Headless table logic with sorting & pagination |
 | **Form & Validation** | `vee-validate` + `@vee-validate/zod` + `zod` | Strongly-typed validation schemas |
 | **Icons** | `@lucide/vue` | Must be imported explicitly (`import { Plus } from '@lucide/vue'`) |
 | **State Management** | Pinia | Setup Stores pattern (`defineStore('name', () => { ... })`) |
-| **Routing** | Vue Router v5 | HTML5 history mode with route guards |
+| **Routing** | Vue Router v5 | HTML5 history mode — auth guard scaffold in `src/router/index.ts` (commented) |
 | **API Client** | Axios + Enterprise Interceptors | Silent Token Refresh, Global Loading Bar, Auto Error Toast |
 | **Notifications** | `vue-sonner` | Toast notifications via `toast.success()`, `toast.error()` |
 | **Language & Types** | TypeScript 6 + `vue-tsc` | Strict static typing, zero `any` |
@@ -35,32 +81,47 @@ You are an expert frontend engineer building features for this **Nala Admin Dash
 
 1. **Composition API Only:** Never use Options API — always use `<script setup lang="ts">`.
 2. **Strict TypeScript:** No `any` type — define explicit TypeScript interfaces for all props, emits, and API payloads.
-3. **English Standard:** All user-facing UI text, form labels, placeholders, error messages, toast notifications, and in-code comments must be in **English**.
-4. **Tailwind CSS v4 Strict Compliance:**
-   - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER use legacy v3 `bg-gradient-to-*`).
-   - **Sizing Scale:** NEVER write arbitrary bracket sizing like `max-w-[170px]`, `w-[300px]`, or `p-[1px]`. ALWAYS use Tailwind v4 scale (`max-w-44`, `max-w-28`, `w-75`, `max-h-75`, `p-px`).
-   - **Shadows:** Use `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`.
-5. **No Scoped CSS:** Use Tailwind utility classes. Do not write `<style scoped>`.
-6. **Dialog Accessibility:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
+3. **English Standard:** All user-facing UI text, form labels, placeholders, error messages, toast notifications, and in-code comments **MUST be in English**.
+4. **No Build Commands:** NEVER run `pnpm build` or `npm run build` autonomously. Build only on explicit user request.
+5. **No Automatic Tests:** NEVER run `vitest`, `pnpm test`, or `pnpm test:run` autonomously.
+6. **No Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously.
+7. **No New Packages Without Confirmation:** Always ask in chat before running `pnpm add`.
+8. **No Scoped CSS:** Use Tailwind utility classes. Do not write `<style scoped>`.
+9. **Dialog Accessibility:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
+10. **Tailwind CSS v4 Strict Syntax Compliance:**
+    - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER `bg-gradient-to-*`).
+    - **Sizing:** NEVER use arbitrary brackets like `max-w-[170px]`, `w-[300px]`, `p-[1px]`. Use Tailwind v4 scale (`max-w-44`, `w-75`, `p-px`).
+    - **Shadows:** Use `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`.
+    - **Viewport:** Use `min-h-dvh` / `h-dvh` instead of `min-h-screen` / `h-screen`.
+    - **Opacity:** Use integer percentage (`bg-primary/50`) NOT decimal (`bg-primary/0.5`).
 
 ---
 
 ## ⚡ Auto-Import Guide Matrix
 
-| Auto-Imported (No Import Needed) | Manual Import Required |
-|---|---|
-| Vue Reactivity (`ref`, `computed`, `watch`, `onMounted`, etc.) | Lucide Icons (`import { Plus, Search, Trash2 } from '@lucide/vue'`) |
-| Vue Router (`useRoute`, `useRouter`) | Toast Notifications (`import { toast } from '@/components/ui/sonner'`) |
-| VueUse (`useColorMode`, `useLocalStorage`, etc.) | Axios Client (`import { apiClient } from '@/lib/axios'`) |
-| Pinia (`defineStore`, `storeToRefs`) | Form Validation (`import { z } from 'zod'`, `import { useForm } from 'vee-validate'`) |
-| All UI Components (`<Button>`, `<Card>`, `<Dialog>`, `<Input>`, `<Table>`, `<PageHeader>`, etc.) | Class Merger (`import { cn } from '@/lib/utils'`) |
+> The project uses `unplugin-auto-import` and `unplugin-vue-components`. Do NOT add manual imports for items marked ✅ AUTOMATIC.
+
+| Category | Auto-Import Status | Usage |
+|---|---|---|
+| **Vue Reactivity** (`ref`, `computed`, `watch`, `onMounted`, `reactive`, etc.) | ✅ **AUTOMATIC** | Use directly: `const count = ref(0)` |
+| **Vue Router** (`useRoute`, `useRouter`) | ✅ **AUTOMATIC** | Use directly: `const router = useRouter()` |
+| **VueUse** (`useColorMode`, `useLocalStorage`, `useDebounceFn`, etc.) | ✅ **AUTOMATIC** | Use directly: `const mode = useColorMode()` |
+| **Pinia** (`defineStore`, `storeToRefs`) | ✅ **AUTOMATIC** | Use directly: `defineStore(...)` |
+| **All UI Components** (`Button`, `Card`, `Dialog`, `Input`, `InputGroup`, `Table`, `Tabs`, etc.) | ✅ **AUTOMATIC** | Use directly in template: `<Card>`, `<Button>`, `<InputGroup>` |
+| **Shared Components** (`PageHeader`, `EmptyState`, `AppLogo`) | ✅ **AUTOMATIC** | Use directly: `<PageHeader>`, `<EmptyState>` |
+| **Custom Composables** (`useFormatter`, `useThemeConfig`) | ✅ **AUTOMATIC** | Use directly: `const fmt = useFormatter()` |
+| **Lucide Icons** (`Plus`, `Search`, `Trash2`, etc.) | ⚠️ **MANUAL IMPORT** | `import { Plus, Search } from '@lucide/vue'` |
+| **Toast Notifications** (`toast`) | ⚠️ **MANUAL IMPORT** | `import { toast } from '@/components/ui/sonner'` |
+| **HTTP API Client** (`apiClient`) | ⚠️ **MANUAL IMPORT** | `import { apiClient } from '@/lib/axios'` |
+| **Class Merging Utility** (`cn`) | ⚠️ **MANUAL IMPORT** | `import { cn } from '@/lib/utils'` |
+| **Form Validation** (`zod`, `toTypedSchema`, `useForm`) | ⚠️ **MANUAL IMPORT** | `import { z } from 'zod'`, `import { useForm } from 'vee-validate'` |
 
 ---
 
-## 🎨 UI Design System & Component Blueprints
+## 🎨 UI Design System — Key Patterns
 
-### 1. Standard Page Header (`<PageHeader>`)
-Always use the standardized `<PageHeader>` component at the top of every view:
+### 1. Standard Page Header
+Always use `<PageHeader>` at the top of every view — never build a custom header layout:
 ```vue
 <PageHeader
   title="Products"
@@ -75,32 +136,62 @@ Always use the standardized `<PageHeader>` component at the top of every view:
 </PageHeader>
 ```
 
-### 2. Standard KPI Stats Cards Blueprint
-When building summary metrics / stats cards, follow this exact blueprint:
+### 2. Edge-to-Edge Card Layout (`<Card flush>` + `<CardHeader section>`)
+- Use `<Card flush>` → auto-applies `overflow-hidden py-0 gap-0`
+- Use `<CardHeader section>` → auto-applies `p-6 border-b border-border bg-muted/10`
+- Use `<CardContent class="p-0">` for table content (zero inner padding)
+
+```vue
+<Card flush class="shadow-xs border">
+  <CardHeader section class="flex items-center justify-between gap-4">
+    <div>
+      <CardTitle class="text-base font-semibold">Title</CardTitle>
+      <CardDescription class="text-xs mt-0.5">Subtitle</CardDescription>
+    </div>
+  </CardHeader>
+  <CardContent class="p-0">
+    <!-- Table content here -->
+  </CardContent>
+</Card>
+```
+
+### 3. Input Groups with Icons & Addons
+Never write manual `absolute` positioning for input icons:
+```vue
+<!-- Search icon input -->
+<InputGroup>
+  <InputIcon side="left">
+    <Search class="h-3.5 w-3.5" />
+  </InputIcon>
+  <Input v-model="searchQuery" placeholder="Search..." class="pl-8 h-8 text-xs" />
+</InputGroup>
+
+<!-- URL prefix/suffix addon -->
+<InputGroup>
+  <InputAddon side="left">https://</InputAddon>
+  <Input placeholder="my-subdomain" class="rounded-none border-x-0" />
+  <InputAddon side="right">.example.com</InputAddon>
+</InputGroup>
+```
+
+### 4. Standard KPI Stats Cards
 ```vue
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
   <Card
     v-for="stat in stats"
     :key="stat.title"
     flush
-    class="highlight-card shadow-xs border-border/80 bg-card hover:border-border transition-all duration-200"
+    class="highlight-card shadow-xs border-border/80 hover:border-border transition-all duration-200"
   >
     <CardContent class="p-5 space-y-2">
-      <!-- 1. Top Row: Title + Icon -->
       <div class="flex items-center justify-between">
         <span class="text-xs font-medium text-muted-foreground">{{ stat.title }}</span>
         <component :is="stat.icon" class="h-4 w-4 text-primary" />
       </div>
-
-      <!-- 2. Value -->
-      <div class="text-2xl font-bold tracking-tight text-foreground">{{ stat.value }}</div>
-
-      <!-- 3. Trend Indicator -->
+      <div class="text-2xl font-bold tracking-tight">{{ stat.value }}</div>
       <p class="text-xs text-muted-foreground flex items-center gap-1">
-        <span
-          class="font-semibold inline-flex items-center gap-0.5"
-          :class="stat.positive ? 'text-emerald-500' : 'text-rose-500'"
-        >
+        <span class="font-semibold inline-flex items-center gap-0.5"
+          :class="stat.positive ? 'text-emerald-500' : 'text-rose-500'">
           <component :is="stat.positive ? ArrowUpRight : ArrowDownRight" class="h-3.5 w-3.5" />
           {{ stat.change }}
         </span>
@@ -111,23 +202,28 @@ When building summary metrics / stats cards, follow this exact blueprint:
 </div>
 ```
 
-### 3. Input Groups with Icons & Addons
-Never write manual absolute positioning for input icons:
+### 5. Empty State (use `<EmptyState>` — don't build inline)
 ```vue
-<!-- Search Icon Input -->
-<InputGroup>
-  <InputIcon side="left">
-    <Search class="h-3.5 w-3.5" />
-  </InputIcon>
-  <Input v-model="searchQuery" placeholder="Search..." class="pl-8 h-8 text-xs" />
-</InputGroup>
+<!-- Inside a table cell or card content when data is empty -->
+<EmptyState
+  title="No products found"
+  description="Try adjusting your search or add a new product."
+/>
+```
 
-<!-- URL Prefix / Suffix Addon -->
-<InputGroup>
-  <InputAddon side="left">https://</InputAddon>
-  <Input placeholder="my-subdomain" class="rounded-none border-x-0" />
-  <InputAddon side="right">.nala.dev</InputAddon>
-</InputGroup>
+### 6. `useFormatter()` — Data Formatting
+```ts
+const fmt = useFormatter()
+
+fmt.currency(150000, 'IDR')     // "Rp 150.000"
+fmt.currency(1999, 'USD')       // "$1,999.00"
+fmt.number(1500000)             // "1,500,000"
+fmt.compact(1500000)            // "1.5M"
+fmt.date(new Date())            // "Sep 3, 2026"
+fmt.dateTime(new Date())        // "Sep 3, 2026, 14:30"
+fmt.relative(pastDate)          // "5 minutes ago"
+fmt.bytes(1024 * 1024)          // "1 MB"
+fmt.initials('John Doe')        // "JD"
 ```
 
 ---
@@ -473,21 +569,72 @@ const filteredProducts = computed(() => {
 </template>
 ```
 
-### 5. Register in Router & Sidebar
-- **`src/router/index.ts`:**
-  ```ts
-  {
-    path: 'products',
-    name: 'products',
-    component: () => import('@/views/products/IndexView.vue'),
-  }
-  ```
-- **`src/components/layout/AppSidebar.vue`:**
-  ```ts
-  import { Package } from '@lucide/vue'
-
-  const mainNav = [
-    { name: 'Dashboard', routeName: 'dashboard', href: '/', icon: LayoutDashboard },
-    { name: 'Products', routeName: 'products', href: '/products', icon: Package },
-  ]
-  ```
+### 5. Register Route & Sidebar Entry
+
+**`src/router/index.ts`** — Add inside the AdminLayout children array:
+```ts
+{
+  path: 'products',
+  name: 'products',
+  component: () => import('@/views/products/IndexView.vue'),
+},
+```
+
+**`src/components/layout/AppSidebar.vue`** — Add to the `mainNav` array:
+```ts
+import { Package } from '@lucide/vue'
+
+const mainNav = [
+  { name: 'Dashboard', routeName: 'dashboard', href: '/', icon: LayoutDashboard },
+  { name: 'Products', routeName: 'products', href: '/products', icon: Package },
+]
+```
+
+---
+
+## 🗺️ Available Routes (Starter Template)
+
+| Route | Name | View |
+|---|---|---|
+| `/` | `dashboard` | `views/dashboard/IndexView.vue` |
+| `/_blank` | `starter-blank` | `views/_starter/BlankView.vue` — starting point for new pages |
+| `/auth/login` | `login` | Full login form with demo credentials |
+| `/auth/register` | `register` | Registration with password strength meter |
+| `/auth/forgot-password` | `forgot-password` | Recovery email request |
+| `/auth/reset-password` | `reset-password` | Token-based password reset |
+| `/auth/verify-otp` | `verify-otp` | 6-box OTP input |
+| `/auth/confirm-email` | `confirm-email` | Email confirmation with polling |
+| `/auth/lock-screen` | `lock-screen` | Session lock screen |
+| `/errors/404` | `not-found` | 404 Not Found page |
+| `/errors/500` | `server-error` | 500 Server Error page |
+| `/errors/403` | `unauthorized` | 403 Access Denied page |
+| `/errors/maintenance` | `maintenance` | Maintenance mode with countdown |
+| `/errors/coming-soon` | `coming-soon` | Coming soon with newsletter capture |
+
+> **Auth Guard:** The router file (`src/router/index.ts`) has a pre-built auth guard scaffold in comments. Uncomment and configure it to protect your routes.
+
+---
+
+## 🔧 Tailwind v4 Syntax Reference (Anti-Pattern Table)
+
+| Category | ❌ NEVER (v3 / Anti-Pattern) | ✅ ALWAYS (Tailwind v4) |
+|---|---|---|
+| **Gradients** | `bg-gradient-to-r` | `bg-linear-to-r` |
+| **Max Width** | `max-w-[170px]` | `max-w-44` |
+| **Width/Height** | `w-[300px]` / `h-[400px]` | `w-75` / `h-100` |
+| **1px Spacing** | `p-[1px]` / `m-[1px]` | `p-px` / `m-px` |
+| **Shadows** | `shadow-[0_1px_...]` | `shadow-2xs` / `shadow-xs` / `shadow-sm` |
+| **Viewport** | `min-h-screen` / `h-screen` | `min-h-dvh` / `h-dvh` |
+| **Opacity** | `bg-primary/0.5` | `bg-primary/50` |
+
+---
+
+## 🛠️ Dev Commands
+
+| Command | Action |
+|---|---|
+| `pnpm dev` | Start dev server |
+| `pnpm build` | Build for production (run manually only) |
+| `pnpm preview` | Preview production build |
+| `pnpm test` | Run unit tests in watch mode |
+| `pnpm test:run` | Run unit tests once (CI mode) |

package/template/AGENTS.md

@@ -40,7 +40,7 @@ The following modules are auto-imported via `unplugin-auto-import` and `unplugin
 
 ## 📦 UI Primitives Catalog (`src/components/ui/`)
 
-All 34+ primitive components in `src/components/ui/` are globally registered and ready to use:
+All 45 primitive components in `src/components/ui/` are globally registered and ready to use:
 - `Button`, `Badge`, `Avatar`, `Breadcrumb`, `Card`, `Checkbox`, `Dialog`, `DropdownMenu`
 - `Form` (`FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormMessage`)
 - `Input`, `InputGroup`, `InputIcon`, `InputAddon`, `PinInput`, `Textarea`, `Select`, `Switch`

package/template/CLAUDE.md

@@ -0,0 +1,27 @@
+# CLAUDE.md — Nala Application AI Guardrails
+
+This file defines the strict, high-priority guardrails and behavioral constraints for AI agents working on this **Nala** application.
+
+---
+
+## 🛑 Strict Rules (Enforced on Every Invocation)
+
+1. **No Automatic Build:** NEVER run `pnpm build` or `npm run build` after writing or modifying code. Transpilation/build checks are only performed when explicitly requested by the user.
+2. **No Automatic Unit Tests:** NEVER run `vitest`, `pnpm test`, `pnpm test:run`, or `npm test` autonomously after writing or modifying code. Unit tests are strictly executed only upon explicit user instruction.
+3. **No Unauthorized Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously. Git commands are strictly executed only upon explicit user instruction.
+4. **English Standard (UI & Code Comments):** All user-facing UI text, form labels, validation/error messages, toast notifications, and in-code comments (JSDoc/inline notes in `.vue` and `.ts` files) MUST be written in **English**.
+5. **Strict Vue 3 & TypeScript Hygiene:** Always use Composition API `<script setup lang="ts">`. Never use Options API. Never use `any` type — define explicit TypeScript interfaces for all props, emits, and API payloads.
+6. **Tailwind CSS v4 Standard & Syntax Compliance:**
+   - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER use legacy v3 `bg-gradient-to-*`).
+   - **Sizing Scale:** NEVER write arbitrary bracket sizing like `max-w-[170px]`, `w-[300px]`, or `p-[1px]`. ALWAYS use Tailwind v4 scale (`max-w-44`, `max-w-28`, `w-75`, `max-h-75`, `p-px`).
+   - **Shadows:** Use `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`.
+7. **Package Installation Confirmation:** NEVER install new npm packages autonomously. Always ask the user directly in chat for approval before running `pnpm add` or `npm install`.
+8. **No Scoped Styles:** Use Tailwind CSS utility classes instead of `<style scoped>`.
+9. **Dialog / Modal Accessibility Standard:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
+
+---
+
+## 📚 Deep Technical Blueprints & Component Catalog
+
+For the complete 45 Reka UI Primitives, Shared Components (`PageHeader`, `EmptyState`, `AppLogo`), Auto-Import Matrix, Axios Service Layer, Pinia Store patterns, and end-to-end CRUD scaffolding blueprints, refer to the **`nala-project` skill** located at:
+👉 [`.agents/skills/nala-project/SKILL.md`](.agents/skills/nala-project/SKILL.md)

package/template/GEMINI.md

@@ -0,0 +1,27 @@
+# GEMINI.md — Nala Application AI Guardrails
+
+This file defines the strict, high-priority guardrails and behavioral constraints for AI agents working on this **Nala** application.
+
+---
+
+## 🛑 Strict Rules (Enforced on Every Invocation)
+
+1. **No Automatic Build:** NEVER run `pnpm build` or `npm run build` after writing or modifying code. Transpilation/build checks are only performed when explicitly requested by the user.
+2. **No Automatic Unit Tests:** NEVER run `vitest`, `pnpm test`, `pnpm test:run`, or `npm test` autonomously after writing or modifying code. Unit tests are strictly executed only upon explicit user instruction.
+3. **No Unauthorized Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously. Git commands are strictly executed only upon explicit user instruction.
+4. **English Standard (UI & Code Comments):** All user-facing UI text, form labels, validation/error messages, toast notifications, and in-code comments (JSDoc/inline notes in `.vue` and `.ts` files) MUST be written in **English**.
+5. **Strict Vue 3 & TypeScript Hygiene:** Always use Composition API `<script setup lang="ts">`. Never use Options API. Never use `any` type — define explicit TypeScript interfaces for all props, emits, and API payloads.
+6. **Tailwind CSS v4 Standard & Syntax Compliance:**
+   - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER use legacy v3 `bg-gradient-to-*`).
+   - **Sizing Scale:** NEVER write arbitrary bracket sizing like `max-w-[170px]`, `w-[300px]`, or `p-[1px]`. ALWAYS use Tailwind v4 scale (`max-w-44`, `max-w-28`, `w-75`, `max-h-75`, `p-px`).
+   - **Shadows:** Use `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`.
+7. **Package Installation Confirmation:** NEVER install new npm packages autonomously. Always ask the user directly in chat for approval before running `pnpm add` or `npm install`.
+8. **No Scoped Styles:** Use Tailwind CSS utility classes instead of `<style scoped>`.
+9. **Dialog / Modal Accessibility Standard:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
+
+---
+
+## 📚 Deep Technical Blueprints & Component Catalog
+
+For the complete 45 Reka UI Primitives, Shared Components (`PageHeader`, `EmptyState`, `AppLogo`), Auto-Import Matrix, Axios Service Layer, Pinia Store patterns, and end-to-end CRUD scaffolding blueprints, refer to the **`nala-project` skill** located at:
+👉 [`.agents/skills/nala-project/SKILL.md`](.agents/skills/nala-project/SKILL.md)

package/template/README.md

@@ -57,7 +57,9 @@ src/
 ├── assets/fonts/            # High-performance local Inter fonts (woff2)
 ├── components/
 │   ├── layout/              # Admin shell (AppNavbar, AppSidebar, CommandPalette)
-│   ├── ui/                  # 34+ accessible UI primitives (Reka UI / shadcn-vue)
+│   ├── ui/                  # 45 accessible UI primitives (Reka UI / shadcn-vue)
+│   ├── AppLogo.vue          # Auto-imported brand logo component
+│   ├── EmptyState.vue       # Auto-imported empty state component
 │   └── PageHeader.vue       # Standardized page header component
 ├── composables/
 │   ├── useFormatter.ts      # Native Intl data formatting helpers (auto-imported)

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "NALA_APP_SLUG",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "Production-ready admin dashboard built with Vue 3, Vite, TypeScript, and Tailwind CSS v4.",
   "private": true,
   "type": "module",

package/template/src/App.vue

@@ -11,5 +11,5 @@ useThemeConfig()
 <template>
   <LoadingBar />
   <RouterView />
-  <Toaster position="top-right" rich-colors close-button />
+  <Toaster position="top-right" />
 </template>

package/template/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/template/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template/src/components/ui/sonner/Sonner.vue

@@ -1,14 +1,48 @@
 <script lang="ts" setup>
 import type { ToasterProps } from "vue-sonner"
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "@lucide/vue"
+import { CheckCircle2, Info, Loader2, AlertCircle, AlertTriangle } from "@lucide/vue"
 import { Toaster as Sonner } from "vue-sonner"
 import { cn } from "@/lib/utils"
 
-const props = defineProps<ToasterProps>()
+const props = withDefaults(defineProps<ToasterProps>(), {
+  position: "top-right",
+  richColors: false,
+})
+
+const defaultToastOptions = {
+  classes: {
+    toast:
+      'group toast flex items-center gap-3 w-full bg-card/95 text-foreground border border-border/80 shadow-lg backdrop-blur-md px-4 py-3 rounded-lg text-xs transition-all',
+    title: 'text-xs font-semibold text-foreground tracking-tight',
+    description: '!text-zinc-600 dark:!text-zinc-300 text-[11.5px] leading-relaxed mt-0.5 font-normal',
+    actionButton:
+      'bg-primary text-primary-foreground text-[11px] font-medium px-2.5 py-1 rounded shadow-2xs hover:bg-primary/90 transition-colors',
+    cancelButton:
+      'bg-muted text-muted-foreground text-[11px] font-medium px-2.5 py-1 rounded hover:bg-muted/80 transition-colors',
+    success:
+      '!border-emerald-500/30 !bg-emerald-500/[0.04] dark:!bg-emerald-950/[0.2] !text-foreground',
+    info:
+      '!border-blue-500/30 !bg-blue-500/[0.04] dark:!bg-blue-950/[0.2] !text-foreground',
+    warning:
+      '!border-amber-500/30 !bg-amber-500/[0.04] dark:!bg-amber-950/[0.2] !text-foreground',
+    error:
+      '!border-rose-500/30 !bg-rose-500/[0.04] dark:!bg-rose-950/[0.2] !text-foreground',
+  },
+}
+
+const computedToastOptions = computed(() => ({
+  ...defaultToastOptions,
+  ...props.toastOptions,
+  classes: {
+    ...defaultToastOptions.classes,
+    ...props.toastOptions?.classes,
+  },
+}))
 </script>
 
 <template>
   <Sonner
+    v-bind="props"
     :class="cn('toaster group', props.class)"
     :style="{
       '--normal-bg': 'var(--popover)',
@@ -16,27 +50,23 @@ const props = defineProps<ToasterProps>()
       '--normal-border': 'var(--border)',
       '--border-radius': 'var(--radius)',
     }"
-    v-bind="props"
+    :toast-options="computedToastOptions"
+    :close-button="false"
   >
     <template #success-icon>
-      <CircleCheckIcon class="size-4" />
+      <CheckCircle2 class="h-4 w-4 text-emerald-500 shrink-0" />
     </template>
     <template #info-icon>
-      <InfoIcon class="size-4" />
+      <Info class="h-4 w-4 text-blue-500 shrink-0" />
     </template>
     <template #warning-icon>
-      <TriangleAlertIcon class="size-4" />
+      <AlertTriangle class="h-4 w-4 text-amber-500 shrink-0" />
     </template>
     <template #error-icon>
-      <OctagonXIcon class="size-4" />
+      <AlertCircle class="h-4 w-4 text-rose-500 shrink-0" />
     </template>
     <template #loading-icon>
-      <div>
-        <Loader2Icon class="size-4 animate-spin" />
-      </div>
-    </template>
-    <template #close-icon>
-      <XIcon class="size-4" />
+      <Loader2 class="h-4 w-4 text-primary animate-spin shrink-0" />
     </template>
   </Sonner>
 </template>

package/template/tsconfig.app.json

@@ -1,21 +1,27 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "types": [
-      "vite/client",
-      "vitest/globals"
-    ],
-    "allowArbitraryExtensions": true,
-    /* Linting */
+    /* Target must match vite's esbuild target */
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "useDefineForClassFields": true,
+    /* DOM lib for browser APIs */
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    /* Type checking */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
+    "allowArbitraryExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
   "include": [