create-nala 3.0.0 → 3.0.4

package/template/README.md

@@ -0,0 +1,130 @@
+# NALA_APP_NAME
+
+> Built with **Nala** — Enterprise Admin Dashboard Starter Template powered by Vue 3, Vite, TypeScript, and Tailwind CSS v4.
+
+---
+
+## 🚀 Quick Start
+
+### 1. Install Dependencies
+
+```bash
+# with pnpm (Recommended)
+pnpm install
+
+# with npm
+npm install
+
+# with yarn
+yarn install
+
+# with bun
+bun install
+```
+
+### 2. Environment Configuration
+
+Copy the example environment file and customize as needed:
+
+```bash
+cp .env.example .env
+```
+
+### 3. Start Development Server
+
+```bash
+pnpm dev
+```
+
+Open **http://localhost:5173** in your browser.
+
+---
+
+## 🛠️ Available Scripts
+
+| Script | Command | Description |
+|---|---|---|
+| `pnpm dev` | `vite` | Starts local dev server with blazing fast HMR |
+| `pnpm build` | `vue-tsc -b && vite build` | Type-checks & compiles production bundle to `dist/` |
+| `pnpm preview` | `vite preview` | Previews production build locally |
+
+---
+
+## 📁 Project Structure
+
+```
+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)
+│   └── PageHeader.vue       # Standardized page header component
+├── composables/
+│   ├── useFormatter.ts      # Native Intl data formatting helpers (auto-imported)
+│   └── useThemeConfig.ts    # Runtime theme & layout state (auto-imported)
+├── layouts/
+│   ├── AdminLayout.vue      # Main authenticated dashboard layout
+│   └── AuthLayout.vue       # Centered layout for login/register/auth flows
+├── lib/
+│   ├── axios.ts             # Central Axios client with silent refresh & error toasts
+│   ├── formatters.ts        # Currency, Date, Number & Relative Time helpers
+│   └── utils.ts             # cn() class merger (clsx + tailwind-merge)
+├── router/
+│   └── index.ts             # Route definitions & auth navigation guards
+├── services/
+│   ├── auth.service.ts      # Authentication API service (with safe DEV mock fallback)
+│   ├── user.service.ts      # User profile API service
+│   └── types.ts             # Shared API response contracts
+├── stores/
+│   └── auth.ts              # Pinia authentication & user session store
+├── views/
+│   ├── _starter/
+│   │   └── BlankView.vue    # Clean blank template for creating new pages
+│   ├── auth/                # Login, Register, Forgot/Reset Password, OTP, Lock Screen
+│   ├── dashboard/           # Clean starter dashboard with KPI cards & recent table
+│   └── errors/              # 404, 500, and 403 error pages
+├── App.vue                  # Root application component with Toaster
+├── main.ts                  # App initialization & Pinia/Router registration
+└── style.css                # Tailwind CSS v4 & OKLCH color design tokens
+```
+
+---
+
+## 📡 Connecting Your Backend API
+
+This starter includes a production-grade Axios service layer in `src/lib/axios.ts` and `src/services/`.
+
+1. Open `.env` and set your API endpoint:
+   ```env
+   VITE_API_BASE_URL=https://api.yourcompany.com/v1
+   ```
+2. **Safe DEV Mock Fallback:**
+   While developing (`import.meta.env.DEV`), if your backend is offline, services will automatically fall back to safe in-memory mock data so you can build UI uninterrupted. In production (`pnpm build`), real API errors will be thrown normally.
+
+---
+
+## 🎨 Customizing Theme & Branding
+
+- **Brand Colors:** Update `--primary` and `--ring` in `src/style.css` using standard `oklch` color format.
+- **Default Theme Config:** Modify `DEFAULT_CONFIG` in `src/composables/useThemeConfig.ts`:
+  ```ts
+  const DEFAULT_CONFIG: ThemeConfig = {
+    primaryColor: 'emerald', // emerald | indigo | violet | rose | amber | cyan | zinc
+    radius: '0.375',         // 0 | 0.25 | 0.375 | 0.5 | 0.75 | 1.0
+    contentWidth: 'fluid',   // fluid | boxed
+  }
+  ```
+
+---
+
+## 🤖 AI-Assisted Development
+
+This project is configured out-of-the-box for AI coding assistants:
+- **`AGENTS.md`** — Universal rules for Antigravity, Cursor, Claude Code, GitHub Copilot, Roo Code, and Windsurf.
+- **`.agents/skills/nala-project/SKILL.md`** — Deep technical blueprints for building components, Pinia stores, and API services without hallucinations.
+
+---
+
+## 📄 License
+
+This project is open-sourced software licensed under the [MIT License](./LICENSE).

package/template/package.json

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

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>
 

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AlertDialogActionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogAction } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
-
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
 const delegatedProps = reactiveOmit(props, "class")
 </script>
 

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AlertDialogCancelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogCancel } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
-
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
 const delegatedProps = reactiveOmit(props, "class")
 </script>
 

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

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogContent,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { AlertDialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogDescription,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
-
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
 const delegatedProps = reactiveOmit(props, "class")
 </script>
 

package/template/src/components/ui/alert-dialog/AlertDialogFooter.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/AlertDialogHeader.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/AlertDialogTitle.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { AlertDialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
-
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
 const delegatedProps = reactiveOmit(props, "class")
 </script>
 

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AlertDialogTriggerProps } from "reka-ui"
-import { AlertDialogTrigger } from "reka-ui"
-
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
 const props = defineProps<AlertDialogTriggerProps>()
 </script>
 

package/template/src/components/ui/alert-dialog/index.ts

@@ -1,9 +1,9 @@
-export { default as AlertDialog } from "./AlertDialog.vue"
-export { default as AlertDialogAction } from "./AlertDialogAction.vue"
-export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
-export { default as AlertDialogContent } from "./AlertDialogContent.vue"
-export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
-export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
-export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
-export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
 export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"

package/template/src/components/ui/avatar/AvatarFallback.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AvatarFallback } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
-
+import type { AvatarFallbackProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AvatarFallback } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
+
 const delegatedProps = reactiveOmit(props, "class")
 </script>
 

package/template/src/components/ui/avatar/AvatarImage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from "reka-ui"
-import { AvatarImage } from "reka-ui"
-
+import type { AvatarImageProps } from "reka-ui"
+import { AvatarImage } from "reka-ui"
+
 const props = defineProps<AvatarImageProps>()
 </script>
 

package/template/src/components/ui/breadcrumb/Breadcrumb.vue

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

package/template/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

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

package/template/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-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/breadcrumb/BreadcrumbLink.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "a",
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
 })
 </script>
 

package/template/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-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/breadcrumb/BreadcrumbPage.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-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/breadcrumb/BreadcrumbSeparator.vue

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

package/template/src/components/ui/breadcrumb/index.ts

@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from "./Breadcrumb.vue"
-export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
-export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
-export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
-export { default as BreadcrumbList } from "./BreadcrumbList.vue"
-export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
 export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"

package/template/src/components/ui/button/Button.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "."
-
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: "button",
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
 })
 </script>
 

package/template/src/components/ui/card/CardAction.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/card/CardContent.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>