create-nala 3.0.0

package/template/src/components.d.ts

@@ -0,0 +1,228 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Accordion: typeof import('./components/ui/accordion/Accordion.vue')['default']
+    AccordionContent: typeof import('./components/ui/accordion/AccordionContent.vue')['default']
+    AccordionItem: typeof import('./components/ui/accordion/AccordionItem.vue')['default']
+    AccordionTrigger: typeof import('./components/ui/accordion/AccordionTrigger.vue')['default']
+    Alert: typeof import('./components/ui/alert/Alert.vue')['default']
+    AlertDescription: typeof import('./components/ui/alert/AlertDescription.vue')['default']
+    AlertDialog: typeof import('./components/ui/alert-dialog/AlertDialog.vue')['default']
+    AlertDialogAction: typeof import('./components/ui/alert-dialog/AlertDialogAction.vue')['default']
+    AlertDialogCancel: typeof import('./components/ui/alert-dialog/AlertDialogCancel.vue')['default']
+    AlertDialogContent: typeof import('./components/ui/alert-dialog/AlertDialogContent.vue')['default']
+    AlertDialogDescription: typeof import('./components/ui/alert-dialog/AlertDialogDescription.vue')['default']
+    AlertDialogFooter: typeof import('./components/ui/alert-dialog/AlertDialogFooter.vue')['default']
+    AlertDialogHeader: typeof import('./components/ui/alert-dialog/AlertDialogHeader.vue')['default']
+    AlertDialogTitle: typeof import('./components/ui/alert-dialog/AlertDialogTitle.vue')['default']
+    AlertDialogTrigger: typeof import('./components/ui/alert-dialog/AlertDialogTrigger.vue')['default']
+    AlertTitle: typeof import('./components/ui/alert/AlertTitle.vue')['default']
+    AppLogo: typeof import('./components/AppLogo.vue')['default']
+    AppNavbar: typeof import('./components/layout/AppNavbar.vue')['default']
+    AppSidebar: typeof import('./components/layout/AppSidebar.vue')['default']
+    AreaChart: typeof import('./components/ui/chart/AreaChart.vue')['default']
+    Avatar: typeof import('./components/ui/avatar/Avatar.vue')['default']
+    AvatarFallback: typeof import('./components/ui/avatar/AvatarFallback.vue')['default']
+    AvatarGroup: typeof import('./components/ui/avatar/AvatarGroup.vue')['default']
+    AvatarImage: typeof import('./components/ui/avatar/AvatarImage.vue')['default']
+    Badge: typeof import('./components/ui/badge/Badge.vue')['default']
+    BarChart: typeof import('./components/ui/chart/BarChart.vue')['default']
+    Breadcrumb: typeof import('./components/ui/breadcrumb/Breadcrumb.vue')['default']
+    BreadcrumbEllipsis: typeof import('./components/ui/breadcrumb/BreadcrumbEllipsis.vue')['default']
+    BreadcrumbItem: typeof import('./components/ui/breadcrumb/BreadcrumbItem.vue')['default']
+    BreadcrumbLink: typeof import('./components/ui/breadcrumb/BreadcrumbLink.vue')['default']
+    BreadcrumbList: typeof import('./components/ui/breadcrumb/BreadcrumbList.vue')['default']
+    BreadcrumbPage: typeof import('./components/ui/breadcrumb/BreadcrumbPage.vue')['default']
+    BreadcrumbSeparator: typeof import('./components/ui/breadcrumb/BreadcrumbSeparator.vue')['default']
+    Button: typeof import('./components/ui/button/Button.vue')['default']
+    Calendar: typeof import('./components/ui/calendar/Calendar.vue')['default']
+    Card: typeof import('./components/ui/card/Card.vue')['default']
+    CardAction: typeof import('./components/ui/card/CardAction.vue')['default']
+    CardContent: typeof import('./components/ui/card/CardContent.vue')['default']
+    CardDescription: typeof import('./components/ui/card/CardDescription.vue')['default']
+    CardFooter: typeof import('./components/ui/card/CardFooter.vue')['default']
+    CardHeader: typeof import('./components/ui/card/CardHeader.vue')['default']
+    CardTitle: typeof import('./components/ui/card/CardTitle.vue')['default']
+    Checkbox: typeof import('./components/ui/checkbox/Checkbox.vue')['default']
+    CodePreview: typeof import('./components/CodePreview.vue')['default']
+    Collapsible: typeof import('./components/ui/collapsible/Collapsible.vue')['default']
+    CollapsibleContent: typeof import('./components/ui/collapsible/CollapsibleContent.vue')['default']
+    CollapsibleTrigger: typeof import('./components/ui/collapsible/CollapsibleTrigger.vue')['default']
+    Command: typeof import('./components/ui/command/Command.vue')['default']
+    CommandDialog: typeof import('./components/ui/command/CommandDialog.vue')['default']
+    CommandEmpty: typeof import('./components/ui/command/CommandEmpty.vue')['default']
+    CommandGroup: typeof import('./components/ui/command/CommandGroup.vue')['default']
+    CommandInput: typeof import('./components/ui/command/CommandInput.vue')['default']
+    CommandItem: typeof import('./components/ui/command/CommandItem.vue')['default']
+    CommandList: typeof import('./components/ui/command/CommandList.vue')['default']
+    CommandSearchDialog: typeof import('./components/layout/CommandSearchDialog.vue')['default']
+    CommandSeparator: typeof import('./components/ui/command/CommandSeparator.vue')['default']
+    CommandShortcut: typeof import('./components/ui/command/CommandShortcut.vue')['default']
+    ContextMenu: typeof import('./components/ui/context-menu/ContextMenu.vue')['default']
+    ContextMenuCheckboxItem: typeof import('./components/ui/context-menu/ContextMenuCheckboxItem.vue')['default']
+    ContextMenuContent: typeof import('./components/ui/context-menu/ContextMenuContent.vue')['default']
+    ContextMenuGroup: typeof import('./components/ui/context-menu/ContextMenuGroup.vue')['default']
+    ContextMenuItem: typeof import('./components/ui/context-menu/ContextMenuItem.vue')['default']
+    ContextMenuLabel: typeof import('./components/ui/context-menu/ContextMenuLabel.vue')['default']
+    ContextMenuRadioGroup: typeof import('./components/ui/context-menu/ContextMenuRadioGroup.vue')['default']
+    ContextMenuRadioItem: typeof import('./components/ui/context-menu/ContextMenuRadioItem.vue')['default']
+    ContextMenuSeparator: typeof import('./components/ui/context-menu/ContextMenuSeparator.vue')['default']
+    ContextMenuShortcut: typeof import('./components/ui/context-menu/ContextMenuShortcut.vue')['default']
+    ContextMenuSub: typeof import('./components/ui/context-menu/ContextMenuSub.vue')['default']
+    ContextMenuSubContent: typeof import('./components/ui/context-menu/ContextMenuSubContent.vue')['default']
+    ContextMenuSubTrigger: typeof import('./components/ui/context-menu/ContextMenuSubTrigger.vue')['default']
+    ContextMenuTrigger: typeof import('./components/ui/context-menu/ContextMenuTrigger.vue')['default']
+    DatePicker: typeof import('./components/ui/date-picker/DatePicker.vue')['default']
+    Dialog: typeof import('./components/ui/dialog/Dialog.vue')['default']
+    DialogClose: typeof import('./components/ui/dialog/DialogClose.vue')['default']
+    DialogContent: typeof import('./components/ui/dialog/DialogContent.vue')['default']
+    DialogDescription: typeof import('./components/ui/dialog/DialogDescription.vue')['default']
+    DialogFooter: typeof import('./components/ui/dialog/DialogFooter.vue')['default']
+    DialogHeader: typeof import('./components/ui/dialog/DialogHeader.vue')['default']
+    DialogOverlay: typeof import('./components/ui/dialog/DialogOverlay.vue')['default']
+    DialogScrollContent: typeof import('./components/ui/dialog/DialogScrollContent.vue')['default']
+    DialogTitle: typeof import('./components/ui/dialog/DialogTitle.vue')['default']
+    DialogTrigger: typeof import('./components/ui/dialog/DialogTrigger.vue')['default']
+    DonutChart: typeof import('./components/ui/chart/DonutChart.vue')['default']
+    DropdownMenu: typeof import('./components/ui/dropdown-menu/DropdownMenu.vue')['default']
+    DropdownMenuCheckboxItem: typeof import('./components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue')['default']
+    DropdownMenuContent: typeof import('./components/ui/dropdown-menu/DropdownMenuContent.vue')['default']
+    DropdownMenuGroup: typeof import('./components/ui/dropdown-menu/DropdownMenuGroup.vue')['default']
+    DropdownMenuItem: typeof import('./components/ui/dropdown-menu/DropdownMenuItem.vue')['default']
+    DropdownMenuLabel: typeof import('./components/ui/dropdown-menu/DropdownMenuLabel.vue')['default']
+    DropdownMenuRadioGroup: typeof import('./components/ui/dropdown-menu/DropdownMenuRadioGroup.vue')['default']
+    DropdownMenuRadioItem: typeof import('./components/ui/dropdown-menu/DropdownMenuRadioItem.vue')['default']
+    DropdownMenuSeparator: typeof import('./components/ui/dropdown-menu/DropdownMenuSeparator.vue')['default']
+    DropdownMenuShortcut: typeof import('./components/ui/dropdown-menu/DropdownMenuShortcut.vue')['default']
+    DropdownMenuSub: typeof import('./components/ui/dropdown-menu/DropdownMenuSub.vue')['default']
+    DropdownMenuSubContent: typeof import('./components/ui/dropdown-menu/DropdownMenuSubContent.vue')['default']
+    DropdownMenuSubTrigger: typeof import('./components/ui/dropdown-menu/DropdownMenuSubTrigger.vue')['default']
+    DropdownMenuTrigger: typeof import('./components/ui/dropdown-menu/DropdownMenuTrigger.vue')['default']
+    EmptyState: typeof import('./components/EmptyState.vue')['default']
+    FormControl: typeof import('./components/ui/form/FormControl.vue')['default']
+    FormDescription: typeof import('./components/ui/form/FormDescription.vue')['default']
+    FormItem: typeof import('./components/ui/form/FormItem.vue')['default']
+    FormLabel: typeof import('./components/ui/form/FormLabel.vue')['default']
+    FormMessage: typeof import('./components/ui/form/FormMessage.vue')['default']
+    HoverCard: typeof import('./components/ui/hover-card/HoverCard.vue')['default']
+    HoverCardContent: typeof import('./components/ui/hover-card/HoverCardContent.vue')['default']
+    HoverCardTrigger: typeof import('./components/ui/hover-card/HoverCardTrigger.vue')['default']
+    Input: typeof import('./components/ui/input/Input.vue')['default']
+    InputAddon: typeof import('./components/ui/input/InputAddon.vue')['default']
+    InputGroup: typeof import('./components/ui/input/InputGroup.vue')['default']
+    InputIcon: typeof import('./components/ui/input/InputIcon.vue')['default']
+    Kbd: typeof import('./components/ui/kbd/Kbd.vue')['default']
+    Label: typeof import('./components/ui/label/Label.vue')['default']
+    LineChart: typeof import('./components/ui/chart/LineChart.vue')['default']
+    LoadingBar: typeof import('./components/ui/loading-bar/LoadingBar.vue')['default']
+    NotificationDrawer: typeof import('./components/layout/NotificationDrawer.vue')['default']
+    PageHeader: typeof import('./components/PageHeader.vue')['default']
+    Pagination: typeof import('./components/ui/pagination/Pagination.vue')['default']
+    PaginationContent: typeof import('./components/ui/pagination/PaginationContent.vue')['default']
+    PaginationEllipsis: typeof import('./components/ui/pagination/PaginationEllipsis.vue')['default']
+    PaginationFirst: typeof import('./components/ui/pagination/PaginationFirst.vue')['default']
+    PaginationItem: typeof import('./components/ui/pagination/PaginationItem.vue')['default']
+    PaginationLast: typeof import('./components/ui/pagination/PaginationLast.vue')['default']
+    PaginationNext: typeof import('./components/ui/pagination/PaginationNext.vue')['default']
+    PaginationPrevious: typeof import('./components/ui/pagination/PaginationPrevious.vue')['default']
+    PinInput: typeof import('./components/ui/pin-input/PinInput.vue')['default']
+    PinInputGroup: typeof import('./components/ui/pin-input/PinInputGroup.vue')['default']
+    PinInputInput: typeof import('./components/ui/pin-input/PinInputInput.vue')['default']
+    PinInputSeparator: typeof import('./components/ui/pin-input/PinInputSeparator.vue')['default']
+    Popover: typeof import('./components/ui/popover/Popover.vue')['default']
+    PopoverAnchor: typeof import('./components/ui/popover/PopoverAnchor.vue')['default']
+    PopoverContent: typeof import('./components/ui/popover/PopoverContent.vue')['default']
+    PopoverTrigger: typeof import('./components/ui/popover/PopoverTrigger.vue')['default']
+    Progress: typeof import('./components/ui/progress/Progress.vue')['default']
+    RadioGroup: typeof import('./components/ui/radio-group/RadioGroup.vue')['default']
+    RadioGroupItem: typeof import('./components/ui/radio-group/RadioGroupItem.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    ScrollArea: typeof import('./components/ui/scroll-area/ScrollArea.vue')['default']
+    ScrollBar: typeof import('./components/ui/scroll-area/ScrollBar.vue')['default']
+    Select: typeof import('./components/ui/select/Select.vue')['default']
+    SelectContent: typeof import('./components/ui/select/SelectContent.vue')['default']
+    SelectGroup: typeof import('./components/ui/select/SelectGroup.vue')['default']
+    SelectItem: typeof import('./components/ui/select/SelectItem.vue')['default']
+    SelectItemText: typeof import('./components/ui/select/SelectItemText.vue')['default']
+    SelectLabel: typeof import('./components/ui/select/SelectLabel.vue')['default']
+    SelectScrollDownButton: typeof import('./components/ui/select/SelectScrollDownButton.vue')['default']
+    SelectScrollUpButton: typeof import('./components/ui/select/SelectScrollUpButton.vue')['default']
+    SelectSeparator: typeof import('./components/ui/select/SelectSeparator.vue')['default']
+    SelectTrigger: typeof import('./components/ui/select/SelectTrigger.vue')['default']
+    SelectValue: typeof import('./components/ui/select/SelectValue.vue')['default']
+    Separator: typeof import('./components/ui/separator/Separator.vue')['default']
+    Sheet: typeof import('./components/ui/sheet/Sheet.vue')['default']
+    SheetClose: typeof import('./components/ui/sheet/SheetClose.vue')['default']
+    SheetContent: typeof import('./components/ui/sheet/SheetContent.vue')['default']
+    SheetDescription: typeof import('./components/ui/sheet/SheetDescription.vue')['default']
+    SheetFooter: typeof import('./components/ui/sheet/SheetFooter.vue')['default']
+    SheetHeader: typeof import('./components/ui/sheet/SheetHeader.vue')['default']
+    SheetOverlay: typeof import('./components/ui/sheet/SheetOverlay.vue')['default']
+    SheetTitle: typeof import('./components/ui/sheet/SheetTitle.vue')['default']
+    SheetTrigger: typeof import('./components/ui/sheet/SheetTrigger.vue')['default']
+    Sidebar: typeof import('./components/ui/sidebar/Sidebar.vue')['default']
+    SidebarContent: typeof import('./components/ui/sidebar/SidebarContent.vue')['default']
+    SidebarControl: typeof import('./components/ui/sidebar/SidebarControl.vue')['default']
+    SidebarFooter: typeof import('./components/ui/sidebar/SidebarFooter.vue')['default']
+    SidebarGroup: typeof import('./components/ui/sidebar/SidebarGroup.vue')['default']
+    SidebarGroupAction: typeof import('./components/ui/sidebar/SidebarGroupAction.vue')['default']
+    SidebarGroupContent: typeof import('./components/ui/sidebar/SidebarGroupContent.vue')['default']
+    SidebarGroupLabel: typeof import('./components/ui/sidebar/SidebarGroupLabel.vue')['default']
+    SidebarHeader: typeof import('./components/ui/sidebar/SidebarHeader.vue')['default']
+    SidebarInput: typeof import('./components/ui/sidebar/SidebarInput.vue')['default']
+    SidebarInset: typeof import('./components/ui/sidebar/SidebarInset.vue')['default']
+    SidebarMenu: typeof import('./components/ui/sidebar/SidebarMenu.vue')['default']
+    SidebarMenuAction: typeof import('./components/ui/sidebar/SidebarMenuAction.vue')['default']
+    SidebarMenuBadge: typeof import('./components/ui/sidebar/SidebarMenuBadge.vue')['default']
+    SidebarMenuButton: typeof import('./components/ui/sidebar/SidebarMenuButton.vue')['default']
+    SidebarMenuButtonChild: typeof import('./components/ui/sidebar/SidebarMenuButtonChild.vue')['default']
+    SidebarMenuItem: typeof import('./components/ui/sidebar/SidebarMenuItem.vue')['default']
+    SidebarMenuSkeleton: typeof import('./components/ui/sidebar/SidebarMenuSkeleton.vue')['default']
+    SidebarMenuSub: typeof import('./components/ui/sidebar/SidebarMenuSub.vue')['default']
+    SidebarMenuSubButton: typeof import('./components/ui/sidebar/SidebarMenuSubButton.vue')['default']
+    SidebarMenuSubItem: typeof import('./components/ui/sidebar/SidebarMenuSubItem.vue')['default']
+    SidebarProvider: typeof import('./components/ui/sidebar/SidebarProvider.vue')['default']
+    SidebarRail: typeof import('./components/ui/sidebar/SidebarRail.vue')['default']
+    SidebarSeparator: typeof import('./components/ui/sidebar/SidebarSeparator.vue')['default']
+    SidebarTrigger: typeof import('./components/ui/sidebar/SidebarTrigger.vue')['default']
+    Skeleton: typeof import('./components/ui/skeleton/Skeleton.vue')['default']
+    Slider: typeof import('./components/ui/slider/Slider.vue')['default']
+    Sonner: typeof import('./components/ui/sonner/Sonner.vue')['default']
+    Stepper: typeof import('./components/ui/stepper/Stepper.vue')['default']
+    Switch: typeof import('./components/ui/switch/Switch.vue')['default']
+    Table: typeof import('./components/ui/table/Table.vue')['default']
+    TableBody: typeof import('./components/ui/table/TableBody.vue')['default']
+    TableCaption: typeof import('./components/ui/table/TableCaption.vue')['default']
+    TableCell: typeof import('./components/ui/table/TableCell.vue')['default']
+    TableEmpty: typeof import('./components/ui/table/TableEmpty.vue')['default']
+    TableFooter: typeof import('./components/ui/table/TableFooter.vue')['default']
+    TableHead: typeof import('./components/ui/table/TableHead.vue')['default']
+    TableHeader: typeof import('./components/ui/table/TableHeader.vue')['default']
+    TableRow: typeof import('./components/ui/table/TableRow.vue')['default']
+    Tabs: typeof import('./components/ui/tabs/Tabs.vue')['default']
+    TabsContent: typeof import('./components/ui/tabs/TabsContent.vue')['default']
+    TabsList: typeof import('./components/ui/tabs/TabsList.vue')['default']
+    TabsTrigger: typeof import('./components/ui/tabs/TabsTrigger.vue')['default']
+    Textarea: typeof import('./components/ui/textarea/Textarea.vue')['default']
+    ThemeCustomizer: typeof import('./components/layout/ThemeCustomizer.vue')['default']
+    Timeline: typeof import('./components/ui/timeline/Timeline.vue')['default']
+    Toggle: typeof import('./components/ui/toggle/Toggle.vue')['default']
+    ToggleGroup: typeof import('./components/ui/toggle-group/ToggleGroup.vue')['default']
+    ToggleGroupItem: typeof import('./components/ui/toggle-group/ToggleGroupItem.vue')['default']
+    Tooltip: typeof import('./components/ui/tooltip/Tooltip.vue')['default']
+    TooltipContent: typeof import('./components/ui/tooltip/TooltipContent.vue')['default']
+    TooltipProvider: typeof import('./components/ui/tooltip/TooltipProvider.vue')['default']
+    TooltipTrigger: typeof import('./components/ui/tooltip/TooltipTrigger.vue')['default']
+  }
+}

package/template/src/composables/useFormatter.ts

@@ -0,0 +1,105 @@
+import {
+  formatCurrency,
+  formatNumber,
+  formatCompactNumber,
+  formatDate,
+  formatDateTime,
+  formatTime,
+  formatDateTimeWithTz,
+  formatRelativeTime,
+  formatBytes,
+  getInitials,
+  truncate,
+  type CurrencyFormatOptions,
+  type DateTimeFormatOptions,
+  type TimeOnlyFormatOptions,
+  type TimeFormat,
+} from '@/lib/formatters'
+
+/**
+ * Composable that exposes all data formatting utilities under a single object.
+ *
+ * Auto-imported via unplugin-auto-import — no explicit import needed in <script setup>.
+ *
+ * @example
+ * // In any <script setup> — no import required
+ * const fmt = useFormatter()
+ *
+ * fmt.currency(price)                               // uses VITE_DEFAULT_CURRENCY / VITE_DEFAULT_LOCALE
+ * fmt.currency(price, { currency: 'EUR', locale: 'de-DE' })  // per-call override
+ * fmt.date(row.createdAt)                           // "Aug 21, 2026"
+ * fmt.date(row.createdAt, 'short')                  // "8/21/26"
+ * fmt.relative(row.lastActive)                      // "5 minutes ago"
+ * fmt.compact(revenue)                              // "2.4M"
+ * fmt.bytes(file.size)                              // "4.5 MB"
+ * fmt.initials(user.name)                           // "OM"
+ * fmt.truncate(description, 60)                     // "This is a long des..."
+ */
+export function useFormatter() {
+  return {
+    /** Format value as localized currency. Defaults to VITE_DEFAULT_CURRENCY / VITE_DEFAULT_LOCALE */
+    currency: (value: number | string | null | undefined, opts?: CurrencyFormatOptions) =>
+      formatCurrency(value, opts),
+
+    /** Format number with thousand separators */
+    number: (value: number | string | null | undefined, locale?: string) =>
+      formatNumber(value, locale),
+
+    /** Format large numbers in compact notation (1.5K, 2.4M, 1.2B) */
+    compact: (value: number | string | null | undefined, locale?: string) =>
+      formatCompactNumber(value, locale),
+
+    /** Format date-only: 'short' | 'medium' | 'long' | 'full' */
+    date: (
+      date: string | number | Date | null | undefined,
+      style: 'short' | 'medium' | 'long' | 'full' = 'medium',
+      locale?: string,
+    ) => formatDate(date, style, locale),
+
+    /** Format date + time together with 24h / 12h clock and timezone support */
+    dateTime: (
+      date: string | number | Date | null | undefined,
+      options?: DateTimeFormatOptions | string,
+    ) => formatDateTime(date, options),
+
+    /**
+     * Format time only (e.g. "14:30" or "02:30 PM") with 24h / 12h clock support
+     * @example fmt.time(order.createdAt) => "14:30" (default 24h)
+     * @example fmt.time(order.createdAt, { format: '12h' }) => "02:30 PM"
+     * @example fmt.time(order.createdAt, { showSeconds: true }) => "14:30:00"
+     */
+    time: (
+      date: string | number | Date | null | undefined,
+      options?: TimeOnlyFormatOptions,
+    ) => formatTime(date, options),
+
+    /** Format as relative time: "5 minutes ago", "yesterday", "in 3 days" */
+    relative: (date: string | number | Date | null | undefined, locale?: string) =>
+      formatRelativeTime(date, locale),
+
+    /** Format byte sizes into human-readable units (KB, MB, GB) with locale-aware decimal separator */
+    bytes: (bytes: number | null | undefined, decimals?: number, locale?: string) =>
+      formatBytes(bytes, decimals, locale),
+
+    /**
+     * Format date + time with explicit timezone and clock format
+     * @param timeZone IANA tz: 'Asia/Jakarta' (WIB) | 'Asia/Makassar' (WITA) | 'Asia/Jayapura' (WIT)
+     * @param format '24h' | '12h' | 'auto' (defaults to .env: '24h')
+     * @example fmt.dateTimeWithTz(date, 'Asia/Jakarta', '24h') => "21 Agt 2026, 14.30"
+     */
+    dateTimeWithTz: (
+      date: string | number | Date | null | undefined,
+      timeZone?: string,
+      format?: TimeFormat,
+      locale?: string,
+    ) => formatDateTimeWithTz(date, timeZone, format, locale),
+
+    /** Extract 2-letter initials from a full name ("Olivia Martin" → "OM") */
+    initials: (name: string | null | undefined) =>
+      getInitials(name),
+
+    /** Truncate long strings with ellipsis */
+    truncate: (text: string | null | undefined, length?: number) =>
+      truncate(text, length),
+  }
+}

package/template/src/composables/useThemeConfig.ts

@@ -0,0 +1,252 @@
+import { ref, watch } from 'vue'
+import { useStorage } from '@vueuse/core'
+
+export type PrimaryColorKey = 'emerald' | 'indigo' | 'violet' | 'rose' | 'amber' | 'cyan' | 'zinc'
+export type RadiusKey = '0' | '0.25' | '0.375' | '0.5' | '0.75' | '1.0'
+export type ContentWidthKey = 'fluid' | 'boxed'
+
+export interface PrimaryColorDefinition {
+  name: string
+  key: PrimaryColorKey
+  hex: string
+  light: {
+    primary: string
+    ring: string
+    primaryForeground: string
+  }
+  dark: {
+    primary: string
+    ring: string
+    primaryForeground: string
+  }
+}
+
+export interface RadiusDefinition {
+  label: string
+  value: RadiusKey
+  rem: string
+}
+
+export const PRIMARY_COLORS: PrimaryColorDefinition[] = [
+  {
+    name: 'Emerald',
+    key: 'emerald',
+    hex: '#10b981',
+    light: {
+      primary: 'oklch(0.55 0.145 163.2)',
+      ring: 'oklch(0.55 0.145 163.2 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+    dark: {
+      primary: 'oklch(0.48 0.125 163.2)',
+      ring: 'oklch(0.48 0.125 163.2 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+  },
+  {
+    name: 'Indigo',
+    key: 'indigo',
+    hex: '#6366f1',
+    light: {
+      primary: 'oklch(0.51 0.23 277)',
+      ring: 'oklch(0.51 0.23 277 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+    dark: {
+      primary: 'oklch(0.59 0.21 277)',
+      ring: 'oklch(0.59 0.21 277 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+  },
+  {
+    name: 'Violet',
+    key: 'violet',
+    hex: '#8b5cf6',
+    light: {
+      primary: 'oklch(0.54 0.24 293)',
+      ring: 'oklch(0.54 0.24 293 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+    dark: {
+      primary: 'oklch(0.61 0.22 293)',
+      ring: 'oklch(0.61 0.22 293 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+  },
+  {
+    name: 'Rose',
+    key: 'rose',
+    hex: '#f43f5e',
+    light: {
+      primary: 'oklch(0.59 0.22 17)',
+      ring: 'oklch(0.59 0.22 17 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+    dark: {
+      primary: 'oklch(0.64 0.20 17)',
+      ring: 'oklch(0.64 0.20 17 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+  },
+  {
+    name: 'Amber',
+    key: 'amber',
+    hex: '#f59e0b',
+    light: {
+      primary: 'oklch(0.68 0.19 65)',
+      ring: 'oklch(0.68 0.19 65 / 35%)',
+      primaryForeground: 'oklch(0.15 0 0)',
+    },
+    dark: {
+      primary: 'oklch(0.74 0.17 65)',
+      ring: 'oklch(0.74 0.17 65 / 35%)',
+      primaryForeground: 'oklch(0.15 0 0)',
+    },
+  },
+  {
+    name: 'Cyan',
+    key: 'cyan',
+    hex: '#06b6d4',
+    light: {
+      primary: 'oklch(0.62 0.15 215)',
+      ring: 'oklch(0.62 0.15 215 / 35%)',
+      primaryForeground: 'oklch(0.99 0 0)',
+    },
+    dark: {
+      primary: 'oklch(0.68 0.14 215)',
+      ring: 'oklch(0.68 0.14 215 / 35%)',
+      primaryForeground: 'oklch(0.15 0 0)',
+    },
+  },
+  {
+    name: 'Zinc',
+    key: 'zinc',
+    hex: '#71717a',
+    light: {
+      primary: 'oklch(0.205 0 0)',
+      ring: 'oklch(0.205 0 0 / 35%)',
+      primaryForeground: 'oklch(0.985 0 0)',
+    },
+    dark: {
+      primary: 'oklch(0.985 0 0)',
+      ring: 'oklch(0.985 0 0 / 35%)',
+      primaryForeground: 'oklch(0.145 0 0)',
+    },
+  },
+]
+
+export const RADIUS_PRESETS: RadiusDefinition[] = [
+  { label: '0', value: '0', rem: '0rem' },
+  { label: '0.25', value: '0.25', rem: '0.25rem' },
+  { label: '0.375', value: '0.375', rem: '0.375rem' },
+  { label: '0.5', value: '0.5', rem: '0.5rem' },
+  { label: '0.75', value: '0.75', rem: '0.75rem' },
+  { label: '1.0', value: '1.0', rem: '1rem' },
+]
+
+export interface ThemeConfig {
+  primaryColor: PrimaryColorKey
+  radius: RadiusKey
+  contentWidth: ContentWidthKey
+}
+
+const DEFAULT_CONFIG: ThemeConfig = {
+  primaryColor: 'emerald',
+  radius: '0.375',
+  contentWidth: 'fluid',
+}
+
+const isCustomizerOpen = ref(false)
+const themeConfig = useStorage<ThemeConfig>('nala-theme-config', { ...DEFAULT_CONFIG })
+
+// Style element injection helper for reliable CSS variable overrides in both light and dark mode
+let customThemeStyleElement: HTMLStyleElement | null = null
+
+function ensureThemeStyleElement(): HTMLStyleElement {
+  if (!customThemeStyleElement && typeof document !== 'undefined') {
+    customThemeStyleElement = document.getElementById('nala-dynamic-theme-vars') as HTMLStyleElement
+    if (!customThemeStyleElement) {
+      customThemeStyleElement = document.createElement('style')
+      customThemeStyleElement.id = 'nala-dynamic-theme-vars'
+      document.head.appendChild(customThemeStyleElement)
+    }
+  }
+  return customThemeStyleElement!
+}
+
+export function useThemeConfig() {
+  const applyTheme = () => {
+    if (typeof document === 'undefined') return
+
+    const colorDef = PRIMARY_COLORS.find(c => c.key === themeConfig.value.primaryColor) || PRIMARY_COLORS[0]
+    const radiusDef = RADIUS_PRESETS.find(r => r.value === themeConfig.value.radius) || RADIUS_PRESETS[2]
+
+    const styleEl = ensureThemeStyleElement()
+    if (styleEl) {
+      styleEl.innerHTML = `
+        :root {
+          --radius: ${radiusDef.rem};
+          --primary: ${colorDef.light.primary};
+          --ring: ${colorDef.light.ring};
+          --primary-foreground: ${colorDef.light.primaryForeground};
+        }
+        .dark {
+          --primary: ${colorDef.dark.primary};
+          --ring: ${colorDef.dark.ring};
+          --primary-foreground: ${colorDef.dark.primaryForeground};
+        }
+      `
+    }
+
+    // Set dataset attribute for inspection
+    document.documentElement.dataset.themeColor = colorDef.key
+    document.documentElement.dataset.themeRadius = radiusDef.value
+    document.documentElement.dataset.contentWidth = themeConfig.value.contentWidth
+  }
+
+  const setPrimaryColor = (color: PrimaryColorKey) => {
+    themeConfig.value.primaryColor = color
+  }
+
+  const setRadius = (radius: RadiusKey) => {
+    themeConfig.value.radius = radius
+  }
+
+  const setContentWidth = (width: ContentWidthKey) => {
+    themeConfig.value.contentWidth = width
+  }
+
+  const resetThemeConfig = () => {
+    themeConfig.value = { ...DEFAULT_CONFIG }
+  }
+
+  const toggleCustomizer = (open?: boolean) => {
+    if (typeof open === 'boolean') {
+      isCustomizerOpen.value = open
+    } else {
+      isCustomizerOpen.value = !isCustomizerOpen.value
+    }
+  }
+
+  // Watch for changes and apply immediately
+  watch(
+    () => [themeConfig.value.primaryColor, themeConfig.value.radius, themeConfig.value.contentWidth],
+    () => {
+      applyTheme()
+    },
+    { immediate: true },
+  )
+
+  return {
+    themeConfig,
+    isCustomizerOpen,
+    primaryColors: PRIMARY_COLORS,
+    radiusPresets: RADIUS_PRESETS,
+    setPrimaryColor,
+    setRadius,
+    setContentWidth,
+    resetThemeConfig,
+    toggleCustomizer,
+    applyTheme,
+  }
+}

package/template/src/layouts/AdminLayout.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
+import AppNavbar from '@/components/layout/AppNavbar.vue'
+import AppSidebar from '@/components/layout/AppSidebar.vue'
+import CommandSearchDialog from '@/components/layout/CommandSearchDialog.vue'
+import { useThemeConfig } from '@/composables/useThemeConfig'
+
+const isSearchOpen = ref(false)
+const { themeConfig } = useThemeConfig()
+
+// Global keyboard shortcut: Ctrl+K or Cmd+K
+const handleKeyDown = (e: KeyboardEvent) => {
+  if ((e.ctrlKey || e.metaKey) && (e.key === 'k' || e.key === 'K')) {
+    e.preventDefault()
+    isSearchOpen.value = !isSearchOpen.value
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+})
+</script>
+
+<template>
+  <SidebarProvider class="h-dvh max-h-dvh min-h-0 w-full overflow-hidden flex flex-col pt-14">
+    <!-- Top Navigation Header (Fixed at top) -->
+    <AppNavbar @open-search="isSearchOpen = true" />
+
+    <!-- Main Container below Navbar -->
+    <div class="flex flex-1 min-h-0 min-w-0 w-full relative overflow-hidden">
+      <!-- Left Sidebar Navigation -->
+      <AppSidebar />
+
+      <!-- Main Scrollable Inset Page View -->
+      <SidebarInset class="flex flex-col min-h-0 min-w-0 max-w-full overflow-hidden flex-1">
+        <main class="flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-4 sm:p-6 bg-background">
+          <div :class="themeConfig.contentWidth === 'boxed' ? 'max-w-7xl mx-auto w-full transition-all duration-300' : 'w-full transition-all duration-300'">
+            <RouterView v-slot="{ Component }">
+              <Transition name="page" mode="out-in">
+                <component :is="Component" />
+              </Transition>
+            </RouterView>
+          </div>
+        </main>
+      </SidebarInset>
+    </div>
+
+    <!-- Quick Search Dialog Modal (Ctrl+K) -->
+    <CommandSearchDialog v-model:open="isSearchOpen" />
+  </SidebarProvider>
+</template>