create-nala 3.0.3 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nala",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Scaffolding CLI tool for Nala Admin Dashboard Template",
   "author": "candrasp",
   "license": "MIT",
@@ -32,6 +32,10 @@
     "url": "https://github.com/candrasp/Nala.git",
     "directory": "packages/create-nala"
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
   "dependencies": {
     "@clack/prompts": "^0.9.1",
     "kolorist": "^1.8.0"
@@ -40,9 +44,5 @@
     "@types/node": "^24.13.3",
     "tsup": "^8.4.0",
     "typescript": "~6.0.2"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
   }
-}
+}

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.3",
+  "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/alert/Alert.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { AlertVariants } from "."
-import { cn } from "@/lib/utils"
-import { alertVariants } from "."
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: AlertVariants["variant"]
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
 }>()
 </script>
 

package/template/src/components/ui/alert/AlertDescription.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 

package/template/src/components/ui/alert/AlertTitle.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 

package/template/src/components/ui/alert-dialog/AlertDialog.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
-import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
-
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
 const forwarded = useForwardPropsEmits(props, emits)
 </script>