xertica-ui 2.2.1 → 2.4.0

package/styles/xertica/tokens.css

@@ -1,236 +1,240 @@
-/* ============================================
-   🎨 TOKENS / VARIABLES
-   ============================================ */
-
-:root,
-:root[data-theme='default'] {
-  /* Brand Tokens - Source of Truth */
-  --xertica-primary: rgba(44, 39, 91, 1);
-  --xertica-dark: rgba(35, 29, 79, 1);
-
-  /* Semantic Colors */
-  --background: rgba(255, 255, 255, 1);
-  --foreground: rgba(9, 9, 11, 1);
-
-  --card: rgba(255, 255, 255, 1);
-  --card-foreground: rgba(9, 9, 11, 1);
-
-  --popover: rgba(255, 255, 255, 1);
-  --popover-foreground: rgba(9, 9, 11, 1);
-
-  --primary: var(--xertica-primary);
-  --primary-foreground: rgba(250, 250, 250, 1);
-  --primary-light: rgba(44, 39, 91, 0.15);
-  --primary-light-foreground: rgba(44, 39, 91, 1);
-
-  --secondary: rgba(244, 244, 245, 1);
-  --secondary-foreground: rgba(24, 24, 27, 1);
-
-  --muted: rgba(244, 244, 245, 1);
-  --muted-foreground: rgba(82, 82, 91, 1);
-
-  --accent: rgba(244, 244, 245, 1);
-  --accent-foreground: rgba(24, 24, 27, 1);
-
-  --destructive: rgba(220, 38, 38, 1);
-  --destructive-foreground: rgba(250, 250, 250, 1);
-
-  /* Semantic Status Colors */
-  --success: rgba(4, 120, 87, 1);
-  --success-foreground: rgba(250, 250, 250, 1);
-  --info: rgba(29, 78, 216, 1);
-  --info-foreground: rgba(250, 250, 250, 1);
-  --warning: rgba(234, 179, 8, 1);
-  --warning-foreground: rgba(28, 25, 23, 1);
-
-  --border: rgba(228, 228, 231, 1);
-  --input: rgba(244, 244, 245, 0.5);
-  --input-background: rgba(244, 244, 245, 0.5);
-  --ring: rgba(161, 161, 170, 1);
-
-  /* Sidebar */
-  --sidebar: rgba(44, 39, 91, 1);
-  --sidebar-foreground: rgba(250, 250, 250, 1);
-  --sidebar-primary: rgba(255, 255, 255, 1);
-  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
-  --sidebar-accent: rgba(244, 244, 245, 1);
-  --sidebar-accent-foreground: rgba(24, 24, 27, 1);
-  --sidebar-border: rgba(65, 61, 107, 1);
-  --sidebar-ring: rgba(161, 161, 170, 1);
-
-  /* Charts — vibrant, accessible, harmonious palette */
-  --chart-1: rgba(99, 91, 255, 1);
-  /* indigo-violet — brand-adjacent */
-  --chart-2: rgba(16, 185, 129, 1);
-  /* emerald — success-adjacent */
-  --chart-3: rgba(245, 158, 11, 1);
-  /* amber — warm accent */
-  --chart-4: rgba(59, 130, 246, 1);
-  /* blue — info-adjacent */
-  --chart-5: rgba(239, 68, 68, 1);
-  /* red — destructive-adjacent */
-  --chart-6: rgba(168, 85, 247, 1);
-  /* purple — extended palette */
-  --chart-7: rgba(20, 184, 166, 1);
-  /* teal — extended palette */
-  --chart-8: rgba(251, 113, 133, 1);
-  /* rose — extended palette */
-
-  /* Gradients */
-  --gradient-diagonal: linear-gradient(135deg, #fdb0f2 0%, #72cdfd 100%);
-
-  /* Spacing & Radius */
-  --radius: 6px;
-  --radius-button: 12px;
-  --radius-card: 12px;
-
-  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
-
-  /* Typography */
-  --font-size: 16px;
-  --text-h1: 2rem;
-  --text-h2: 1.75rem;
-  --text-h3: 1.5rem;
-  --text-h4: 1.25rem;
-  --text-base: 1rem;
-  --text-p: 0.875rem;
-  --text-label: 0.875rem;
-  --text-small: 0.875rem;
-  --text-xs: 0.75rem;
-  --text-muted: 0.875rem;
-  --text-stats: 2.25rem;
-  --text-table-head: 1.25rem;
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-
-  /* Calendar */
-  --cell-size: 2.5rem;
-  --cell-radius: var(--radius);
-  --calendar-caption-size: 15px;
-  --calendar-weekday-size: 12px;
-  --calendar-day-size: 14px;
-
-  /* Toast - Success */
-  --toast-success-bg: rgba(220, 252, 231, 1);
-  --toast-success-border: rgba(5, 150, 105, 1);
-  --toast-success-icon: rgba(5, 150, 105, 1);
-  /* Toast - Warning */
-  --toast-warning-bg: rgba(254, 249, 195, 1);
-  --toast-warning-border: rgba(161, 98, 7, 1);
-  --toast-warning-icon: rgba(161, 98, 7, 1);
-  /* Toast - Info */
-  --toast-info-bg: rgba(219, 234, 254, 1);
-  --toast-info-border: rgba(37, 99, 235, 1);
-  --toast-info-icon: rgba(37, 99, 235, 1);
-  /* Toast - Error */
-  --toast-error-bg: rgba(254, 226, 226, 1);
-  --toast-error-border: rgba(220, 38, 38, 1);
-  --toast-error-icon: rgba(220, 38, 38, 1);
-}
-
-:root[data-mode='dark'],
-.dark {
-  /* Brand Tokens */
-  --xertica-primary: rgba(44, 39, 91, 1);
-  --primary: var(--xertica-primary);
-
-  /* Semantic Colors */
-  --background: rgba(5, 5, 5, 1);
-  --foreground: rgba(250, 250, 250, 1);
-
-  --card: rgba(20, 20, 22, 1);
-  --card-foreground: rgba(250, 250, 250, 1);
-
-  --popover: rgba(20, 20, 22, 1);
-  --popover-foreground: rgba(250, 250, 250, 1);
-
-  --primary-foreground: rgba(250, 250, 250, 1);
-  --primary-light: rgba(44, 39, 91, 0.15);
-  --primary-light-foreground: rgba(44, 39, 91, 1);
-
-  --secondary: rgba(39, 39, 42, 1);
-  --secondary-foreground: rgba(250, 250, 250, 1);
-
-  --muted: rgba(39, 39, 42, 1);
-  --muted-foreground: rgba(161, 161, 170, 1);
-
-  --accent: rgba(39, 39, 42, 1);
-  --accent-foreground: rgba(250, 250, 250, 1);
-
-  --destructive: rgba(220, 38, 38, 1);
-  --destructive-foreground: rgba(250, 250, 250, 1);
-
-  /* Semantic Status Colors */
-  --success: rgba(34, 197, 94, 1);
-  --success-foreground: rgba(5, 5, 5, 1);
-  --info: rgba(96, 165, 250, 1);
-  --info-foreground: rgba(5, 5, 5, 1);
-  --warning: rgba(251, 191, 36, 1);
-  --warning-foreground: rgba(5, 5, 5, 1);
-
-  --border: rgba(63, 63, 70, 1);
-  --input: rgba(39, 39, 42, 0.5);
-  --input-background: rgba(39, 39, 42, 0.5);
-  --ring: rgba(113, 113, 122, 1);
-
-  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
-
-  /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */
-  --chart-1: rgba(129, 122, 255, 1);
-  /* indigo-violet lighter */
-  --chart-2: rgba(52, 211, 153, 1);
-  /* emerald lighter */
-  --chart-3: rgba(251, 191, 36, 1);
-  /* amber lighter */
-  --chart-4: rgba(96, 165, 250, 1);
-  /* blue lighter */
-  --chart-5: rgba(248, 113, 113, 1);
-  /* red lighter */
-  --chart-6: rgba(196, 132, 252, 1);
-  /* purple lighter */
-  --chart-7: rgba(45, 212, 191, 1);
-  /* teal lighter */
-  --chart-8: rgba(253, 164, 175, 1);
-  /* rose lighter */
-
-  /* Sidebar */
-  --sidebar-foreground: rgba(250, 250, 250, 1);
-  --sidebar-primary: rgba(255, 255, 255, 1);
-  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
-  --sidebar-accent: rgba(63, 63, 70, 1);
-  --sidebar-accent-foreground: rgba(250, 250, 250, 1);
-  --sidebar-border: rgba(65, 61, 107, 1);
-  --sidebar-ring: rgba(161, 161, 170, 1);
-
-  /* Gradients */
-  --gradient-diagonal: linear-gradient(135deg, #7b4a7a 0%, #3a5c7d 100%);
-
-  /* Toast - Success */
-  --toast-success-bg: rgba(6, 78, 59, 1);
-  --toast-success-border: rgba(34, 197, 94, 1);
-  --toast-success-icon: rgba(34, 197, 94, 1);
-  /* Toast - Warning */
-  --toast-warning-bg: rgba(113, 63, 18, 1);
-  --toast-warning-border: rgba(251, 191, 36, 1);
-  --toast-warning-icon: rgba(251, 191, 36, 1);
-  /* Toast - Info */
-  --toast-info-bg: rgba(30, 58, 138, 1);
-  --toast-info-border: rgba(96, 165, 250, 1);
-  --toast-info-icon: rgba(96, 165, 250, 1);
-  /* Toast - Error */
-  --toast-error-bg: rgba(127, 29, 29, 1);
-  --toast-error-border: rgba(248, 113, 113, 1);
-  --toast-error-icon: rgba(248, 113, 113, 1);
-}
+/* ============================================
+   🎨 TOKENS / VARIABLES
+   ============================================ */
+
+:root,
+:root[data-theme='default'] {
+  /* Brand Tokens - Source of Truth */
+  --xertica-primary: rgba(44, 39, 91, 1);
+  --xertica-dark: rgba(35, 29, 79, 1);
+
+  /* Semantic Colors */
+  --background: rgba(255, 255, 255, 1);
+  --foreground: rgba(9, 9, 11, 1);
+
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(9, 9, 11, 1);
+
+  --popover: rgba(255, 255, 255, 1);
+  --popover-foreground: rgba(9, 9, 11, 1);
+
+  --primary: var(--xertica-primary);
+  --primary-foreground: rgba(250, 250, 250, 1);
+  --primary-light: rgba(44, 39, 91, 0.15);
+  --primary-light-foreground: rgba(44, 39, 91, 1);
+
+  --secondary: rgba(244, 244, 245, 1);
+  --secondary-foreground: rgba(24, 24, 27, 1);
+
+  --muted: rgba(244, 244, 245, 1);
+  --muted-foreground: rgba(82, 82, 91, 1);
+
+  --accent: rgba(244, 244, 245, 1);
+  --accent-foreground: rgba(24, 24, 27, 1);
+
+  --destructive: rgba(220, 38, 38, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+
+  /* Semantic Status Colors */
+  --success: rgba(4, 120, 87, 1);
+  --success-foreground: rgba(250, 250, 250, 1);
+  --info: rgba(29, 78, 216, 1);
+  --info-foreground: rgba(250, 250, 250, 1);
+  --warning: rgba(234, 179, 8, 1);
+  --warning-foreground: rgba(28, 25, 23, 1);
+
+  --border: rgba(228, 228, 231, 1);
+  --input: rgba(244, 244, 245, 0.5);
+  --input-background: rgba(244, 244, 245, 0.5);
+  --ring: rgba(161, 161, 170, 1);
+
+  /* Sidebar */
+  --sidebar: rgba(44, 39, 91, 1);
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-primary: rgba(255, 255, 255, 1);
+  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
+  --sidebar-accent: rgba(244, 244, 245, 1);
+  --sidebar-accent-foreground: rgba(24, 24, 27, 1);
+  --sidebar-border: rgba(65, 61, 107, 1);
+  --sidebar-ring: rgba(161, 161, 170, 1);
+
+  /* Charts — vibrant, accessible, harmonious palette */
+  --chart-1: rgba(99, 91, 255, 1);
+  /* indigo-violet — brand-adjacent */
+  --chart-2: rgba(16, 185, 129, 1);
+  /* emerald — success-adjacent */
+  --chart-3: rgba(245, 158, 11, 1);
+  /* amber — warm accent */
+  --chart-4: rgba(59, 130, 246, 1);
+  /* blue — info-adjacent */
+  --chart-5: rgba(239, 68, 68, 1);
+  /* red — destructive-adjacent */
+  --chart-6: rgba(168, 85, 247, 1);
+  /* purple — extended palette */
+  --chart-7: rgba(20, 184, 166, 1);
+  /* teal — extended palette */
+  --chart-8: rgba(251, 113, 133, 1);
+  /* rose — extended palette */
+
+  /* Gradients */
+  --gradient-diagonal: linear-gradient(135deg, #fdb0f2 0%, #72cdfd 100%);
+
+  /* Spacing & Radius */
+  --radius: 6px;
+  --radius-button: 12px;
+  --radius-card: 12px;
+
+  /* Mobile Content Padding — global horizontal padding on small screens.
+     Change this value to adjust content padding on mobile across the entire project. */
+  --mobile-content-padding: 1.25rem;
+
+  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
+
+  /* Typography */
+  --font-size: 16px;
+  --text-h1: 2rem;
+  --text-h2: 1.75rem;
+  --text-h3: 1.5rem;
+  --text-h4: 1.25rem;
+  --text-base: 1rem;
+  --text-p: 0.875rem;
+  --text-label: 0.875rem;
+  --text-small: 0.875rem;
+  --text-xs: 0.75rem;
+  --text-muted: 0.875rem;
+  --text-stats: 2.25rem;
+  --text-table-head: 1.25rem;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+
+  /* Calendar */
+  --cell-size: 2.5rem;
+  --cell-radius: var(--radius);
+  --calendar-caption-size: 15px;
+  --calendar-weekday-size: 12px;
+  --calendar-day-size: 14px;
+
+  /* Toast - Success */
+  --toast-success-bg: rgba(220, 252, 231, 1);
+  --toast-success-border: rgba(5, 150, 105, 1);
+  --toast-success-icon: rgba(5, 150, 105, 1);
+  /* Toast - Warning */
+  --toast-warning-bg: rgba(254, 249, 195, 1);
+  --toast-warning-border: rgba(161, 98, 7, 1);
+  --toast-warning-icon: rgba(161, 98, 7, 1);
+  /* Toast - Info */
+  --toast-info-bg: rgba(219, 234, 254, 1);
+  --toast-info-border: rgba(37, 99, 235, 1);
+  --toast-info-icon: rgba(37, 99, 235, 1);
+  /* Toast - Error */
+  --toast-error-bg: rgba(254, 226, 226, 1);
+  --toast-error-border: rgba(220, 38, 38, 1);
+  --toast-error-icon: rgba(220, 38, 38, 1);
+}
+
+:root[data-mode='dark'],
+.dark {
+  /* Brand Tokens */
+  --xertica-primary: rgba(44, 39, 91, 1);
+  --primary: var(--xertica-primary);
+
+  /* Semantic Colors */
+  --background: rgba(5, 5, 5, 1);
+  --foreground: rgba(250, 250, 250, 1);
+
+  --card: rgba(20, 20, 22, 1);
+  --card-foreground: rgba(250, 250, 250, 1);
+
+  --popover: rgba(20, 20, 22, 1);
+  --popover-foreground: rgba(250, 250, 250, 1);
+
+  --primary-foreground: rgba(250, 250, 250, 1);
+  --primary-light: rgba(44, 39, 91, 0.15);
+  --primary-light-foreground: rgba(44, 39, 91, 1);
+
+  --secondary: rgba(39, 39, 42, 1);
+  --secondary-foreground: rgba(250, 250, 250, 1);
+
+  --muted: rgba(39, 39, 42, 1);
+  --muted-foreground: rgba(161, 161, 170, 1);
+
+  --accent: rgba(39, 39, 42, 1);
+  --accent-foreground: rgba(250, 250, 250, 1);
+
+  --destructive: rgba(220, 38, 38, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+
+  /* Semantic Status Colors */
+  --success: rgba(34, 197, 94, 1);
+  --success-foreground: rgba(5, 5, 5, 1);
+  --info: rgba(96, 165, 250, 1);
+  --info-foreground: rgba(5, 5, 5, 1);
+  --warning: rgba(251, 191, 36, 1);
+  --warning-foreground: rgba(5, 5, 5, 1);
+
+  --border: rgba(63, 63, 70, 1);
+  --input: rgba(39, 39, 42, 0.5);
+  --input-background: rgba(39, 39, 42, 0.5);
+  --ring: rgba(113, 113, 122, 1);
+
+  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
+
+  /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */
+  --chart-1: rgba(129, 122, 255, 1);
+  /* indigo-violet lighter */
+  --chart-2: rgba(52, 211, 153, 1);
+  /* emerald lighter */
+  --chart-3: rgba(251, 191, 36, 1);
+  /* amber lighter */
+  --chart-4: rgba(96, 165, 250, 1);
+  /* blue lighter */
+  --chart-5: rgba(248, 113, 113, 1);
+  /* red lighter */
+  --chart-6: rgba(196, 132, 252, 1);
+  /* purple lighter */
+  --chart-7: rgba(45, 212, 191, 1);
+  /* teal lighter */
+  --chart-8: rgba(253, 164, 175, 1);
+  /* rose lighter */
+
+  /* Sidebar */
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-primary: rgba(255, 255, 255, 1);
+  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
+  --sidebar-accent: rgba(63, 63, 70, 1);
+  --sidebar-accent-foreground: rgba(250, 250, 250, 1);
+  --sidebar-border: rgba(65, 61, 107, 1);
+  --sidebar-ring: rgba(161, 161, 170, 1);
+
+  /* Gradients */
+  --gradient-diagonal: linear-gradient(135deg, #7b4a7a 0%, #3a5c7d 100%);
+
+  /* Toast - Success */
+  --toast-success-bg: rgba(6, 78, 59, 1);
+  --toast-success-border: rgba(34, 197, 94, 1);
+  --toast-success-icon: rgba(34, 197, 94, 1);
+  /* Toast - Warning */
+  --toast-warning-bg: rgba(113, 63, 18, 1);
+  --toast-warning-border: rgba(251, 191, 36, 1);
+  --toast-warning-icon: rgba(251, 191, 36, 1);
+  /* Toast - Info */
+  --toast-info-bg: rgba(30, 58, 138, 1);
+  --toast-info-border: rgba(96, 165, 250, 1);
+  --toast-info-icon: rgba(96, 165, 250, 1);
+  /* Toast - Error */
+  --toast-error-bg: rgba(127, 29, 29, 1);
+  --toast-error-border: rgba(248, 113, 113, 1);
+  --toast-error-icon: rgba(248, 113, 113, 1);
+}

package/templates/CLAUDE.md

@@ -23,6 +23,7 @@ This project follows **FSD (Feature-Sliced Design)** layered architecture combin
 - **`src/pages/`**: Thin route wrappers composing `AppLayout` + feature content. No logic or API calls here.
 
 ### Adding a New Route
+
 1. **Create the feature content**: `src/features/<name>/ui/<NameContent>.tsx`
 2. **Export from the barrel**: `src/features/<name>/index.ts`
 3. **Create the page**: `src/pages/<NamePage>.tsx` (thin AppLayout wrapper)
@@ -34,6 +35,7 @@ This project follows **FSD (Feature-Sliced Design)** layered architecture combin
 ## Import Rules
 
 Always use the correct `xertica-ui` subpath:
+
 - **UI Primitives**: `xertica-ui/ui` (e.g. `Button`, `Card`, `Input`, `Badge`, `Table`, `Dialog`, `Select`)
 - **Providers & Brand**: `xertica-ui/brand` (e.g. `XerticaProvider`, `XerticaLogo`, `ThemeToggle`, `LanguageSelector`)
 - **Navigation Shell**: `xertica-ui/layout` (e.g. `Sidebar`, `Header`)
@@ -49,7 +51,9 @@ Icons always come from `lucide-react` — never from `xertica-ui`.
 ## Non-Negotiable Coding Rules
 
 ### HTML & Radix Elements
+
 Never use native HTML interactive elements where design system components exist:
+
 - `<Button>` instead of `<button>`
 - `<Input>` instead of `<input>`
 - `<Select>` instead of `<select>`
@@ -58,19 +62,24 @@ Never use native HTML interactive elements where design system components exist:
 - `<ScrollArea>` instead of custom scrollbars
 
 ### Color & Border Radius Styling
+
 - **Never use raw color values** (`#hex`, `rgb()`, `hsl()`) or inline styles for theming.
 - **Never use standard Tailwind color classes for semantic/status contexts** (e.g., do not use `bg-red-500` or `text-green-500` for status/feedback/errors). Use semantic tokens: `bg-destructive`/`text-destructive` for errors, `bg-success` for success, `bg-warning` for warnings, `bg-info` for info.
 - **Tailwind colors** (`bg-blue-500`, `text-gray-700`) are allowed **only** for layout, spacing, and general non-semantic UI where no semantic token applies.
 - **Borders**: Always use `rounded-[var(--radius)]` — never use fixed radius classes like `rounded-lg` or `rounded-xl`.
 
 ### Layout State
+
 Never hardcode sidebar or layout widths (e.g. `256px`). Read them dynamically:
+
 - `const { sidebarExpanded, sidebarWidth } = useLayout()`
 - For components that might render outside the layout provider:
   `const layout = useOptionalLayout(); const fallbackSidebarWidth = layout?.sidebarWidth ?? 80;`
 
 ### Confirm Destructive Actions
+
 Always wrap destructive actions in `<AlertDialog>` for confirmation:
+
 ```tsx
 <AlertDialog>
   <AlertDialogTrigger asChild>
@@ -90,11 +99,14 @@ Always wrap destructive actions in `<AlertDialog>` for confirmation:
 ```
 
 ### Toast Notifications
+
 Always use `toast` from `sonner` and translate messages via `t()`:
+
 ```tsx
 toast.success(t('common.saveSuccess'));
 toast.error(t('errors.somethingWentWrong'));
 ```
+
 Never render `<Toaster>` manually — it is auto-injected by `<XerticaProvider>`.
 
 ---
@@ -102,6 +114,7 @@ Never render `<Toaster>` manually — it is auto-injected by `<XerticaProvider>`
 ## Internationalization (i18n)
 
 Every user-facing string must go through `useTranslation()`:
+
 - Translate all labels, placeholders, titles, aria-labels, tooltips, toasts, etc.
 - Add translation keys to split JSON files in `src/locales/<lang>/` for all languages.
 - **Monolingual Mode**: `<LanguageSelector>` auto-hides when a single language is configured. Use `<LanguageSelector showWhenMonolingual />` to override.
@@ -124,7 +137,7 @@ Every user-facing string must go through `useTranslation()`:
   return useQuery({
     queryKey: ['home', 'feature-cards', language],
     queryFn: fetchFeatureCards,
-    staleTime: 10 * 60 * 1000
+    staleTime: 10 * 60 * 1000,
   });
   ```
 
@@ -133,6 +146,7 @@ Every user-facing string must go through `useTranslation()`:
 ## Loading States (Skeletons)
 
 Always render matching skeletons instead of spinners for data loading:
+
 - Wrap cards/lists with their matching FSD skeleton companions (`ActivityCardSkeleton`, `ProfileCardSkeleton`, `ProjectCardSkeleton`, `NotificationCardSkeleton`, `QuickActionCardSkeleton`, `FeatureCardSkeleton`, `StatsCardSkeleton`).
 - Pass `rows` to skeletons (e.g. `<ActivityCardSkeleton rows={5} />`) to match the loaded state height.
 - For tables, build loading rows using `<TableRow>` + `<TableCell>` + `<Skeleton className="h-3.5 w-28" />`.
@@ -149,6 +163,7 @@ Always render matching skeletons instead of spinners for data loading:
 ## Authentication Pattern
 
 The auth flow is managed in `src/app/context/AuthContext.tsx` via the `useAuth()` hook:
+
 - `getStoredUser()` / `storeUser()` / `clearStoredUser()` — from `src/shared/lib/auth.ts`
 - Auth pages (`/login`, `/forgot-password`, etc.) redirect to `/home` when user is already logged in
 - Protected routes use `<ProtectedRoute>` wrapper that redirects to `/login` if user is null

package/templates/eslint.config.js

@@ -1,26 +1,26 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-  { ignores: ['dist/**', 'node_modules/**', '.vite/**'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-      '@typescript-eslint/no-explicit-any': 'off',
-    },
-  }
-);
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist/**', 'node_modules/**', '.vite/**'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  }
+);