@promakeai/cli 0.4.7 → 0.5.0

package/dist/registry/ecommerce-core.json

@@ -2,26 +2,24 @@
   "name": "ecommerce-core",
   "type": "registry:module",
   "title": "E-commerce Core",
-  "description": "Complete e-commerce state management with Zustand. Includes useCartStore for shopping cart operations (add/remove/update items, totals), useFavoritesStore for wishlist, useDbProducts hook for product fetching with filtering/sorting/pagination, and useDbSearch hook. No provider wrapping needed.",
+  "description": "Complete e-commerce state management with Zustand. Includes useCartStore for shopping cart operations (add/remove/update items, totals), useFavoritesStore for wishlist, formatPrice utility, and payment config. No provider wrapping needed. Data fetching uses useDbList/useDbGet from @/db.",
   "dependencies": [
     "zustand"
   ],
-  "registryDependencies": [
-    "db"
-  ],
-  "usage": "import { useCart, useFavorites, useDbProducts } from '@/modules/ecommerce-core';\n\n// No provider needed - just use the hooks:\nconst { addItem, removeItem, state, itemCount } = useCart();\nconst { addToFavorites, isFavorite } = useFavorites();\nconst { products, loading } = useDbProducts();\n\n// Or use stores directly with selectors:\nconst itemCount = useCartStore((s) => s.itemCount);",
+  "registryDependencies": [],
+  "usage": "import { useCart, useFavorites } from '@/modules/ecommerce-core';\nimport { useDbList } from '@/db';\nimport type { Product } from '@/modules/ecommerce-core';\n\n// Cart & favorites stores:\nconst { addItem, removeItem, state, itemCount } = useCart();\nconst { addToFavorites, isFavorite } = useFavorites();\n\n// Data fetching via @/db hooks:\nconst { data: products } = useDbList<Product>('products');\n\n// Or use stores directly with selectors:\nconst itemCount = useCartStore((s) => s.itemCount);",
   "files": [
     {
       "path": "ecommerce-core/index.ts",
       "type": "registry:index",
       "target": "$modules$/ecommerce-core/index.ts",
-      "content": "// Types\r\nexport * from './types';\r\n\r\n// Stores (Zustand)\r\nexport { useCartStore, useCart } from './stores/cart-store';\r\nexport { useFavoritesStore, useFavorites } from './stores/favorites-store';\r\n\r\n// Hooks\r\nexport { useDbProducts, useDbProductBySlug, useDbFeaturedProducts, useDbCategories } from './useDbProducts';\r\nexport { useDbSearch } from './useDbSearch';\r\n\r\n// Utilities\r\nexport { formatPrice } from './format-price';\r\n\r\n// Payment Config\r\nexport {\r\n  type PaymentMethod,\r\n  type OnlinePaymentProvider,\r\n  type PaymentMethodConfig,\r\n  PAYMENT_METHOD_CONFIGS,\r\n  ONLINE_PROVIDER_CONFIGS,\r\n  getAvailablePaymentMethods,\r\n  getOnlinePaymentProviders,\r\n  getFilteredPaymentMethodConfigs,\r\n  isPaymentMethodAvailable,\r\n  isOnlineProviderAvailable,\r\n} from './payment-config';\r\n"
+      "content": "// Types\r\nexport * from './types';\r\n\r\n// Stores (Zustand)\r\nexport { useCartStore, useCart } from './stores/cart-store';\r\nexport { useFavoritesStore, useFavorites } from './stores/favorites-store';\r\n\r\n// Utilities\r\nexport { formatPrice } from './format-price';\r\n\r\n// Payment Config\r\nexport {\r\n  type PaymentMethod,\r\n  type OnlinePaymentProvider,\r\n  type PaymentMethodConfig,\r\n  PAYMENT_METHOD_CONFIGS,\r\n  ONLINE_PROVIDER_CONFIGS,\r\n  getAvailablePaymentMethods,\r\n  getOnlinePaymentProviders,\r\n  getFilteredPaymentMethodConfigs,\r\n  isPaymentMethodAvailable,\r\n  isOnlineProviderAvailable,\r\n} from './payment-config';\r\n"
     },
     {
       "path": "ecommerce-core/types.ts",
       "type": "registry:type",
       "target": "$modules$/ecommerce-core/types.ts",
-      "content": "export interface ProductCategory {\r\n  id: number;\r\n  name: string;\r\n  slug: string;\r\n  is_primary: boolean;\r\n}\r\n\r\nexport interface Product {\r\n  id: number;\r\n  name: string;\r\n  slug: string;\r\n  description: string;\r\n  price: number;\r\n  sale_price?: number;\r\n  on_sale: boolean;\r\n  images: string[];\r\n  category: string; // Primary category slug (backward compatibility)\r\n  category_name?: string; // Primary category name (backward compatibility)\r\n  categories: ProductCategory[]; // NEW: Multi-category support\r\n  brand?: string;\r\n  sku?: string;\r\n  stock: number;\r\n  tags: string[];\r\n  rating: number;\r\n  review_count: number;\r\n  featured: boolean;\r\n  is_new: boolean;\r\n  published: boolean;\r\n  specifications?: Record<string, any>;\r\n  variants?: any;\r\n  created_at?: string;\r\n  updated_at?: string;\r\n  meta_description?: string;\r\n  meta_keywords?: string;\r\n}\r\n\r\nexport interface ProductVariant {\r\n  id: string;\r\n  name: string;\r\n  value: string;\r\n  price?: number;\r\n  image?: string;\r\n  stockQuantity: number;\r\n}\r\n\r\nexport interface CartItem {\r\n  id: string | number;\r\n  product: Product;\r\n  quantity: number;\r\n}\r\n\r\nexport interface CartState {\r\n  items: CartItem[];\r\n  total: number;\r\n}\r\n\r\nexport interface CartContextType {\r\n  state: CartState;\r\n  addItem: (product: Product) => void;\r\n  removeItem: (id: string | number) => void;\r\n  updateQuantity: (id: string | number, quantity: number) => void;\r\n  clearCart: () => void;\r\n  itemCount: number;\r\n}\r\n\r\nexport interface FavoritesContextType {\r\n  favorites: Product[];\r\n  addToFavorites: (product: Product) => void;\r\n  removeFromFavorites: (productId: string | number) => void;\r\n  isFavorite: (productId: string | number) => boolean;\r\n  favoriteCount: number;\r\n  clearFavorites: () => void;\r\n}\r\n\r\nexport interface Category {\r\n  id: number;\r\n  name: string;\r\n  slug: string;\r\n  description?: string;\r\n  image?: string;\r\n}\r\n\r\nexport interface User {\r\n  id: string;\r\n  email: string;\r\n  name: string;\r\n  avatar?: string;\r\n  addresses?: Address[];\r\n  orders?: Order[];\r\n}\r\n\r\nexport interface Address {\r\n  name: string;\r\n  line1: string;\r\n  line2?: string;\r\n  city: string;\r\n  state: string;\r\n  postalCode: string;\r\n  country: string;\r\n}\r\n\r\nexport interface Order {\r\n  id: number;\r\n  user_id: string;\r\n  total_price: number;\r\n  status: 'pending' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled';\r\n  payment_method: string;\r\n  shipping_address: Address;\r\n  notes?: string;\r\n  created_at?: string;\r\n}\r\n\r\nexport interface OrderItem {\r\n  id: number;\r\n  order_id: number;\r\n  product_id: number;\r\n  quantity: number;\r\n  price: number;\r\n  product?: {\r\n    name: string;\r\n    slug: string;\r\n    images: string[];\r\n    price: number;\r\n  };\r\n}\r\n"
+      "content": "export interface Product {\r\n  id: number;\r\n  name: string;\r\n  slug: string;\r\n  description: string;\r\n  price: number;\r\n  sale_price?: number;\r\n  on_sale: boolean;\r\n  images: string[];\r\n  categories: number[];\r\n  brand?: string;\r\n  sku?: string;\r\n  stock: number;\r\n  tags: string[];\r\n  rating: number;\r\n  review_count: number;\r\n  featured: boolean;\r\n  is_new: boolean;\r\n  published: boolean;\r\n  specifications?: Record<string, string | number | boolean>;\r\n  variants?: ProductVariant[];\r\n  created_at?: string;\r\n  updated_at?: string;\r\n  meta_description?: string;\r\n  meta_keywords?: string;\r\n}\r\n\r\nexport interface ProductVariant {\r\n  id: string;\r\n  name: string;\r\n  value: string;\r\n  price?: number;\r\n  image?: string;\r\n  stockQuantity: number;\r\n}\r\n\r\nexport interface CartItem {\r\n  id: string | number;\r\n  product: Product;\r\n  quantity: number;\r\n}\r\n\r\nexport interface CartState {\r\n  items: CartItem[];\r\n  total: number;\r\n}\r\n\r\nexport interface CartContextType {\r\n  state: CartState;\r\n  addItem: (product: Product) => void;\r\n  removeItem: (id: string | number) => void;\r\n  updateQuantity: (id: string | number, quantity: number) => void;\r\n  clearCart: () => void;\r\n  itemCount: number;\r\n}\r\n\r\nexport interface FavoritesContextType {\r\n  favorites: Product[];\r\n  addToFavorites: (product: Product) => void;\r\n  removeFromFavorites: (productId: string | number) => void;\r\n  isFavorite: (productId: string | number) => boolean;\r\n  favoriteCount: number;\r\n  clearFavorites: () => void;\r\n}\r\n\r\nexport interface Category {\r\n  id: number;\r\n  name: string;\r\n  slug: string;\r\n  description?: string;\r\n  image?: string;\r\n}\r\n\r\nexport interface User {\r\n  id: string;\r\n  email: string;\r\n  name: string;\r\n  avatar?: string;\r\n  addresses?: Address[];\r\n  orders?: Order[];\r\n}\r\n\r\nexport interface Address {\r\n  name: string;\r\n  line1: string;\r\n  line2?: string;\r\n  city: string;\r\n  state: string;\r\n  postalCode: string;\r\n  country: string;\r\n}\r\n\r\nexport interface Order {\r\n  id: number;\r\n  user_id: string;\r\n  total_price: number;\r\n  status: 'pending' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled';\r\n  payment_method: string;\r\n  shipping_address: Address;\r\n  notes?: string;\r\n  created_at?: string;\r\n}\r\n\r\nexport interface OrderItem {\r\n  id: number;\r\n  order_id: number;\r\n  product_id: number;\r\n  quantity: number;\r\n  price: number;\r\n  product?: {\r\n    name: string;\r\n    slug: string;\r\n    images: string[];\r\n    price: number;\r\n  };\r\n}\r\n"
     },
     {
       "path": "ecommerce-core/stores/cart-store.ts",
@@ -35,18 +33,6 @@
       "target": "$modules$/ecommerce-core/stores/favorites-store.ts",
       "content": "import { create } from \"zustand\";\r\nimport { persist } from \"zustand/middleware\";\r\nimport type { Product, FavoritesContextType } from \"../types\";\r\n\r\ninterface FavoritesStore {\r\n  favorites: Product[];\r\n  favoriteCount: number;\r\n  addToFavorites: (product: Product) => void;\r\n  removeFromFavorites: (productId: string | number) => void;\r\n  isFavorite: (productId: string | number) => boolean;\r\n  clearFavorites: () => void;\r\n}\r\n\r\nexport const useFavoritesStore = create<FavoritesStore>()(\r\n  persist(\r\n    (set, get) => ({\r\n      favorites: [],\r\n      favoriteCount: 0,\r\n\r\n      addToFavorites: (product) =>\r\n        set((state) => {\r\n          if (state.favorites.some((fav) => fav.id === product.id)) {\r\n            return state;\r\n          }\r\n          const favorites = [...state.favorites, product];\r\n          return { favorites, favoriteCount: favorites.length };\r\n        }),\r\n\r\n      removeFromFavorites: (productId) =>\r\n        set((state) => {\r\n          const favorites = state.favorites.filter((fav) => fav.id !== productId);\r\n          return { favorites, favoriteCount: favorites.length };\r\n        }),\r\n\r\n      isFavorite: (productId) => {\r\n        return get().favorites.some((fav) => fav.id === productId);\r\n      },\r\n\r\n      clearFavorites: () => set({ favorites: [], favoriteCount: 0 }),\r\n    }),\r\n    { name: \"ecommerce_favorites\" }\r\n  )\r\n);\r\n\r\n// Backward compatible hook - matches FavoritesContextType\r\nexport const useFavorites = (): FavoritesContextType => {\r\n  const store = useFavoritesStore();\r\n  return {\r\n    favorites: store.favorites,\r\n    addToFavorites: store.addToFavorites,\r\n    removeFromFavorites: store.removeFromFavorites,\r\n    isFavorite: store.isFavorite,\r\n    favoriteCount: store.favoriteCount,\r\n    clearFavorites: store.clearFavorites,\r\n  };\r\n};\r\n"
     },
-    {
-      "path": "ecommerce-core/useDbProducts.ts",
-      "type": "registry:hook",
-      "target": "$modules$/ecommerce-core/useDbProducts.ts",
-      "content": "import { useMemo } from 'react';\r\nimport type { Product, Category, ProductCategory } from './types';\r\nimport {\r\n  useRepositoryQuery,\r\n  useRawQuery,\r\n  useRawQueryOne,\r\n  parseStringToArray,\r\n  parseJSONString,\r\n  parseSQLiteBoolean,\r\n  parseNumberSafe\r\n} from '@/modules/db';\r\n\r\nconst transformProduct = (row: any): Product => {\r\n  const categoryNames = row.category_names ? row.category_names.split(',') : [];\r\n  const categorySlugs = row.category_slugs ? row.category_slugs.split(',') : [];\r\n  const categoryIds = row.category_ids ? row.category_ids.split(',').map(Number) : [];\r\n\r\n  const categories: ProductCategory[] = categoryIds.map((id: number, index: number) => ({\r\n    id,\r\n    name: categoryNames[index] || '',\r\n    slug: categorySlugs[index] || '',\r\n    is_primary: index === 0\r\n  }));\r\n\r\n  const primaryCategory = categories.length > 0 ? categories[0] : null;\r\n\r\n  return {\r\n    id: parseNumberSafe(row.id),\r\n    name: String(row.name || ''),\r\n    slug: String(row.slug || ''),\r\n    description: row.description || '',\r\n    price: parseNumberSafe(row.price),\r\n    sale_price: row.sale_price ? parseNumberSafe(row.sale_price) : undefined,\r\n    on_sale: parseSQLiteBoolean(row.on_sale),\r\n    images: parseStringToArray(row.images),\r\n    brand: row.brand || '',\r\n    sku: row.sku || '',\r\n    stock: parseNumberSafe(row.stock),\r\n    tags: parseJSONString(row.tags, []) || [],\r\n    rating: parseNumberSafe(row.rating),\r\n    review_count: parseNumberSafe(row.review_count),\r\n    featured: parseSQLiteBoolean(row.featured),\r\n    is_new: parseSQLiteBoolean(row.is_new),\r\n    published: parseSQLiteBoolean(row.published),\r\n    specifications: parseJSONString(row.specifications, {}) || {},\r\n    variants: parseJSONString(row.variants, []) || [],\r\n    created_at: row.created_at || new Date().toISOString(),\r\n    updated_at: row.updated_at || new Date().toISOString(),\r\n    meta_description: row.meta_description || '',\r\n    meta_keywords: row.meta_keywords || '',\r\n    category: primaryCategory?.slug || '',\r\n    category_name: primaryCategory?.name || '',\r\n    categories\r\n  };\r\n};\r\n\r\nconst PRODUCTS_WITH_CATEGORIES_SQL = `\r\n  SELECT p.*,\r\n    GROUP_CONCAT(c.name) as category_names,\r\n    GROUP_CONCAT(c.slug) as category_slugs,\r\n    GROUP_CONCAT(c.id) as category_ids\r\n  FROM products p\r\n  LEFT JOIN product_category_relations pcr ON p.id = pcr.product_id\r\n  LEFT JOIN product_categories c ON pcr.category_id = c.id\r\n  WHERE p.published = 1\r\n  GROUP BY p.id\r\n`;\r\n\r\nexport function useDbCategories() {\r\n  const { data, isLoading: loading, error } = useRepositoryQuery<Category>('product_categories', {\r\n    orderBy: [{ field: 'name', direction: 'ASC' }]\r\n  });\r\n\r\n  return {\r\n    categories: data ?? [],\r\n    loading,\r\n    error: error?.message ?? null\r\n  };\r\n}\r\n\r\nexport function useDbProducts() {\r\n  const sql = `${PRODUCTS_WITH_CATEGORIES_SQL} ORDER BY p.name`;\r\n\r\n  const { data, isLoading: loading, error } = useRawQuery<any>(\r\n    ['products', 'all'],\r\n    sql\r\n  );\r\n\r\n  const products = useMemo(() => {\r\n    if (!data) return [];\r\n    return data.map(transformProduct);\r\n  }, [data]);\r\n\r\n  return { products, loading, error: error?.message ?? null };\r\n}\r\n\r\nexport function useDbProductBySlug(slug: string) {\r\n  const sql = `\r\n    SELECT p.*,\r\n      GROUP_CONCAT(c.name) as category_names,\r\n      GROUP_CONCAT(c.slug) as category_slugs,\r\n      GROUP_CONCAT(c.id) as category_ids\r\n    FROM products p\r\n    LEFT JOIN product_category_relations pcr ON p.id = pcr.product_id\r\n    LEFT JOIN product_categories c ON pcr.category_id = c.id\r\n    WHERE p.slug = ? AND p.published = 1\r\n    GROUP BY p.id\r\n  `;\r\n\r\n  const { data, isLoading: loading, error } = useRawQueryOne<any>(\r\n    ['products', 'slug', slug],\r\n    sql,\r\n    [slug],\r\n    { enabled: !!slug }\r\n  );\r\n\r\n  const product = useMemo(() => {\r\n    if (!data) return null;\r\n    return transformProduct(data);\r\n  }, [data]);\r\n\r\n  return {\r\n    product,\r\n    loading,\r\n    error: !data && !loading && slug ? 'Product not found' : (error?.message ?? null)\r\n  };\r\n}\r\n\r\nexport function useDbFeaturedProducts() {\r\n  const sql = `\r\n    SELECT p.*,\r\n      GROUP_CONCAT(c.name) as category_names,\r\n      GROUP_CONCAT(c.slug) as category_slugs,\r\n      GROUP_CONCAT(c.id) as category_ids\r\n    FROM products p\r\n    LEFT JOIN product_category_relations pcr ON p.id = pcr.product_id\r\n    LEFT JOIN product_categories c ON pcr.category_id = c.id\r\n    WHERE p.published = 1 AND p.featured = 1\r\n    GROUP BY p.id\r\n    ORDER BY p.created_at DESC LIMIT 8\r\n  `;\r\n\r\n  const { data, isLoading: loading, error } = useRawQuery<any>(\r\n    ['products', 'featured'],\r\n    sql\r\n  );\r\n\r\n  const products = useMemo(() => {\r\n    if (!data) return [];\r\n    return data.map(transformProduct);\r\n  }, [data]);\r\n\r\n  return { products, loading, error: error?.message ?? null };\r\n}\r\n"
-    },
-    {
-      "path": "ecommerce-core/useDbSearch.ts",
-      "type": "registry:hook",
-      "target": "$modules$/ecommerce-core/useDbSearch.ts",
-      "content": "import { useState, useEffect, useCallback } from 'react';\r\nimport type { Product } from './types';\r\nimport { useDbProducts } from './useDbProducts';\r\n\r\nexport const useDbSearch = () => {\r\n  const [searchTerm, setSearchTerm] = useState('');\r\n  const [results, setResults] = useState<Product[]>([]);\r\n  const [isSearching, setIsSearching] = useState(false);\r\n\r\n  // Load all products via useDbProducts hook\r\n  const { products: allProducts } = useDbProducts();\r\n\r\n  // Perform search when searchTerm changes\r\n  useEffect(() => {\r\n    if (!searchTerm.trim()) {\r\n      setResults([]);\r\n      setIsSearching(false);\r\n      return;\r\n    }\r\n\r\n    setIsSearching(true);\r\n\r\n    const searchTimeout = setTimeout(() => {\r\n      const filtered = allProducts.filter(product => {\r\n        const term = searchTerm.toLowerCase();\r\n        \r\n        // Search in product name\r\n        if (product.name.toLowerCase().includes(term)) return true;\r\n        \r\n        // Search in description\r\n        if (product.description.toLowerCase().includes(term)) return true;\r\n        \r\n        // Search in category\r\n        if (product.category_name?.toLowerCase().includes(term)) return true;\r\n        \r\n        // Search in brand\r\n        if (product.brand?.toLowerCase().includes(term)) return true;\r\n        \r\n        // Search in tags\r\n        if (product.tags.some(tag => tag.toLowerCase().includes(term))) return true;\r\n        \r\n        return false;\r\n      });\r\n\r\n      setResults(filtered);\r\n      setIsSearching(false);\r\n    }, 300); // Debounce search\r\n\r\n    return () => clearTimeout(searchTimeout);\r\n  }, [searchTerm, allProducts]);\r\n\r\n  const clearSearch = useCallback(() => {\r\n    setSearchTerm('');\r\n    setResults([]);\r\n    setIsSearching(false);\r\n  }, []);\r\n\r\n  // search function that takes a term and sets the searchTerm\r\n  const search = useCallback((term: string) => {\r\n    setSearchTerm(term);\r\n  }, []);\r\n\r\n  return {\r\n    searchTerm,\r\n    setSearchTerm,\r\n    results,\r\n    isSearching,\r\n    clearSearch,\r\n    clearResults: clearSearch, // alias for header-ecommerce compatibility\r\n    search, // function to trigger search\r\n    hasResults: results.length > 0\r\n  };\r\n};\r\n"
-    },
     {
       "path": "ecommerce-core/format-price.ts",
       "type": "registry:lib",
@@ -86,7 +72,6 @@
       "PaymentMethod",
       "PaymentMethodConfig",
       "Product",
-      "ProductCategory",
       "ProductVariant",
       "User"
     ],
@@ -101,11 +86,6 @@
       "isPaymentMethodAvailable",
       "useCart",
       "useCartStore",
-      "useDbCategories",
-      "useDbFeaturedProducts",
-      "useDbProductBySlug",
-      "useDbProducts",
-      "useDbSearch",
       "useFavorites",
       "useFavoritesStore"
     ]

package/dist/registry/featured-products.json

@@ -7,7 +7,7 @@
     "ecommerce-core",
     "product-card"
   ],
-  "usage": "import { FeaturedProducts } from '@/modules/featured-products';\n\n<FeaturedProducts />\n\n• Installed at: src/modules/featured-products/\n• Customize content: src/modules/featured-products/lang/*.json\n• Products auto-loaded via useDbProducts hook",
+  "usage": "import { FeaturedProducts } from '@/modules/featured-products';\n\n<FeaturedProducts />\n\n• Installed at: src/modules/featured-products/\n• Customize content: src/modules/featured-products/lang/*.json\n• Products auto-loaded via useDbList from @/db",
   "files": [
     {
       "path": "featured-products/index.ts",
@@ -19,7 +19,7 @@
       "path": "featured-products/featured-products.tsx",
       "type": "registry:component",
       "target": "$modules$/featured-products/featured-products.tsx",
-      "content": "import { Link } from \"react-router\";\r\nimport { ArrowRight } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { ProductCard } from \"@/modules/product-card/product-card\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useDbFeaturedProducts } from \"@/modules/ecommerce-core\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\n\r\ninterface FeaturedProductsProps {\r\n  products?: Product[];\r\n  loading?: boolean;\r\n}\r\n\r\nexport function FeaturedProducts({\r\n  products: propProducts,\r\n  loading: propLoading,\r\n}: FeaturedProductsProps) {\r\n  const { t } = useTranslation(\"featured-products\");\r\n  const { products: hookProducts, loading: hookLoading } = useDbFeaturedProducts();\r\n\r\n  const products = propProducts ?? hookProducts;\r\n  const loading = propLoading ?? hookLoading;\r\n\r\n  return (\r\n    <section className=\"py-8 sm:py-12 md:py-16 lg:py-20 bg-background border-t border-border/20 relative\">\r\n      <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 w-16 sm:w-24 h-px bg-primary/30\"></div>\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-3 sm:px-4 lg:px-8\">\r\n        <div className=\"text-center mb-6 sm:mb-8 md:mb-12 lg:mb-16 px-2\">\r\n          <h2 className=\"text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold mb-2 sm:mb-3 md:mb-4 bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent leading-normal pb-1\">\r\n            {t('title', 'Featured Products')}\r\n          </h2>\r\n          <div className=\"w-12 sm:w-16 md:w-20 h-1 bg-gradient-to-r from-primary/50 to-primary/20 mx-auto mb-3 sm:mb-4 md:mb-6 rounded-full\"></div>\r\n          <p className=\"text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed\">\r\n            {t('subtitle', 'Hand-picked favorites from our collection')}\r\n          </p>\r\n        </div>\r\n\r\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 xl:gap-10\">\r\n          {loading ? (\r\n            [...Array(3)].map((_, i) => (\r\n              <div key={i} className=\"animate-pulse group\">\r\n                <div className=\"aspect-square bg-gradient-to-br from-muted to-muted/50 rounded-2xl mb-6\"></div>\r\n                <div className=\"space-y-3\">\r\n                  <div className=\"h-6 bg-muted rounded-lg w-3/4\"></div>\r\n                  <div className=\"h-4 bg-muted rounded w-1/2\"></div>\r\n                  <div className=\"h-5 bg-muted rounded w-2/3\"></div>\r\n                </div>\r\n              </div>\r\n            ))\r\n          ) : (\r\n            products.map((product) => (\r\n              <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                <ProductCard\r\n                  product={product}\r\n                  variant=\"featured\"\r\n                />\r\n              </div>\r\n            ))\r\n          )}\r\n        </div>\r\n\r\n        <div className=\"text-center mt-8 sm:mt-12 lg:mt-16\">\r\n          <Button size=\"lg\" asChild className=\"px-6 sm:px-8 py-3 sm:py-4 text-base sm:text-lg\">\r\n            <Link to=\"/products\">\r\n              {t('viewAll', 'View All Products')}\r\n              <ArrowRight className=\"w-4 h-4 sm:w-5 sm:h-5 ml-2\" />\r\n            </Link>\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
+      "content": "import { Link } from \"react-router\";\r\nimport { ArrowRight } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { ProductCard } from \"@/modules/product-card/product-card\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useDbList } from \"@/db\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\n\r\ninterface FeaturedProductsProps {\r\n  products?: Product[];\r\n  loading?: boolean;\r\n}\r\n\r\nexport function FeaturedProducts({\r\n  products: propProducts,\r\n  loading: propLoading,\r\n}: FeaturedProductsProps) {\r\n  const { t } = useTranslation(\"featured-products\");\r\n  const { data: hookProducts = [], isLoading: hookLoading } = useDbList<Product>(\"products\", {\r\n    where: { featured: 1 },\r\n    limit: 8,\r\n  });\r\n\r\n  const products = propProducts ?? hookProducts;\r\n  const loading = propLoading ?? hookLoading;\r\n\r\n  return (\r\n    <section className=\"py-8 sm:py-12 md:py-16 lg:py-20 bg-background border-t border-border/20 relative\">\r\n      <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 w-16 sm:w-24 h-px bg-primary/30\"></div>\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-3 sm:px-4 lg:px-8\">\r\n        <div className=\"text-center mb-6 sm:mb-8 md:mb-12 lg:mb-16 px-2\">\r\n          <h2 className=\"text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold mb-2 sm:mb-3 md:mb-4 bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent leading-normal pb-1\">\r\n            {t('title', 'Featured Products')}\r\n          </h2>\r\n          <div className=\"w-12 sm:w-16 md:w-20 h-1 bg-gradient-to-r from-primary/50 to-primary/20 mx-auto mb-3 sm:mb-4 md:mb-6 rounded-full\"></div>\r\n          <p className=\"text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed\">\r\n            {t('subtitle', 'Hand-picked favorites from our collection')}\r\n          </p>\r\n        </div>\r\n\r\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 xl:gap-10\">\r\n          {loading ? (\r\n            [...Array(3)].map((_, i) => (\r\n              <div key={i} className=\"animate-pulse group\">\r\n                <div className=\"aspect-square bg-gradient-to-br from-muted to-muted/50 rounded-2xl mb-6\"></div>\r\n                <div className=\"space-y-3\">\r\n                  <div className=\"h-6 bg-muted rounded-lg w-3/4\"></div>\r\n                  <div className=\"h-4 bg-muted rounded w-1/2\"></div>\r\n                  <div className=\"h-5 bg-muted rounded w-2/3\"></div>\r\n                </div>\r\n              </div>\r\n            ))\r\n          ) : (\r\n            products.map((product) => (\r\n              <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                <ProductCard\r\n                  product={product}\r\n                  variant=\"featured\"\r\n                />\r\n              </div>\r\n            ))\r\n          )}\r\n        </div>\r\n\r\n        <div className=\"text-center mt-8 sm:mt-12 lg:mt-16\">\r\n          <Button size=\"lg\" asChild className=\"px-6 sm:px-8 py-3 sm:py-4 text-base sm:text-lg\">\r\n            <Link to=\"/products\">\r\n              {t('viewAll', 'View All Products')}\r\n              <ArrowRight className=\"w-4 h-4 sm:w-5 sm:h-5 ml-2\" />\r\n            </Link>\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
     },
     {
       "path": "featured-products/lang/en.json",

package/dist/registry/forgot-password-page-split.json

@@ -23,7 +23,7 @@
       "path": "forgot-password-page-split/forgot-password-page-split.tsx",
       "type": "registry:page",
       "target": "$modules$/forgot-password-page-split/forgot-password-page-split.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { Mail, ArrowLeft, CheckCircle } from \"lucide-react\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { FormField } from \"@/components/FormField\";\r\n\r\ninterface ForgotPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ForgotPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ForgotPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"forgot-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\r\n  const { forgotPassword } = useAuth();\r\n\r\n  const [username, setUsername] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isEmailSent, setIsEmailSent] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await forgotPassword(username);\r\n\r\n      setIsEmailSent(true);\r\n      toast.success(t(\"emailSent\", \"Reset link sent!\"), {\r\n        description: t(\"checkInbox\", \"Please check your email inbox.\"),\r\n      });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"forgotPasswordError\", \"Failed to send reset link. Please try again.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  // Success state - email sent\r\n  if (isEmailSent) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div className=\"flex justify-center\">\r\n              <div className=\"w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center\">\r\n                <CheckCircle className=\"w-8 h-8 text-green-600 dark:text-green-400\" />\r\n              </div>\r\n            </div>\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight\">\r\n                {t(\"checkYourEmail\", \"Check your email\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"emailSentTo\", \"We've sent a password reset link to\")}\r\n              </p>\r\n              <p className=\"text-sm font-medium mt-1\">{username}</p>\r\n            </div>\r\n\r\n            <div className=\"text-sm text-muted-foreground\">\r\n              <p>{t(\"didntReceive\", \"Didn't receive the email?\")}</p>\r\n              <Button\r\n                variant=\"link\"\r\n                className=\"p-0 h-auto\"\r\n                onClick={() => {\r\n                  setIsEmailSent(false);\r\n                  setError(null);\r\n                }}\r\n              >\r\n                {t(\"tryAgain\", \"Click here to try again\")}\r\n              </Button>\r\n            </div>\r\n\r\n            <Link\r\n              to=\"/login\"\r\n              className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n            >\r\n              <ArrowLeft className=\"w-4 h-4\" />\r\n              {t(\"backToLogin\", \"Back to login\")}\r\n            </Link>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Forgot password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n\r\n          <div className=\"flex justify-center\">\r\n            <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center\">\r\n              <Mail className=\"w-6 h-6 text-primary\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"text-center\">\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Forgot Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your username to reset your password\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"username\", \"Username\")} htmlFor=\"username\" required>\r\n                <Input\r\n                  required\r\n                  id=\"username\"\r\n                  type=\"text\"\r\n                  autoComplete=\"username\"\r\n                  placeholder={t(\"usernamePlaceholder\", \"Enter your username\")}\r\n                  value={username}\r\n                  onChange={(e) => setUsername(e.target.value)}\r\n                  disabled={isLoading}\r\n                />\r\n              </FormField>\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"sending\", \"Sending...\")}\r\n                </>\r\n              ) : (\r\n                t(\"sendLink\", \"Send Reset Link\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <Link\r\n            to=\"/login\"\r\n            className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n          >\r\n            <ArrowLeft className=\"w-4 h-4\" />\r\n            {t(\"backToLogin\", \"Back to login\")}\r\n          </Link>\r\n\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Forgot password background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default ForgotPasswordPageSplit;\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { Mail, ArrowLeft, CheckCircle } from \"lucide-react\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\n\r\ninterface ForgotPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ForgotPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ForgotPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"forgot-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\r\n  const { forgotPassword } = useAuth();\r\n\r\n  const [username, setUsername] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isEmailSent, setIsEmailSent] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await forgotPassword(username);\r\n\r\n      setIsEmailSent(true);\r\n      toast.success(t(\"emailSent\", \"Reset link sent!\"), {\r\n        description: t(\"checkInbox\", \"Please check your email inbox.\"),\r\n      });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"forgotPasswordError\", \"Failed to send reset link. Please try again.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  // Success state - email sent\r\n  if (isEmailSent) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div className=\"flex justify-center\">\r\n              <div className=\"w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center\">\r\n                <CheckCircle className=\"w-8 h-8 text-green-600 dark:text-green-400\" />\r\n              </div>\r\n            </div>\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight\">\r\n                {t(\"checkYourEmail\", \"Check your email\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"emailSentTo\", \"We've sent a password reset link to\")}\r\n              </p>\r\n              <p className=\"text-sm font-medium mt-1\">{username}</p>\r\n            </div>\r\n\r\n            <div className=\"text-sm text-muted-foreground\">\r\n              <p>{t(\"didntReceive\", \"Didn't receive the email?\")}</p>\r\n              <Button\r\n                variant=\"link\"\r\n                className=\"p-0 h-auto\"\r\n                onClick={() => {\r\n                  setIsEmailSent(false);\r\n                  setError(null);\r\n                }}\r\n              >\r\n                {t(\"tryAgain\", \"Click here to try again\")}\r\n              </Button>\r\n            </div>\r\n\r\n            <Link\r\n              to=\"/login\"\r\n              className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n            >\r\n              <ArrowLeft className=\"w-4 h-4\" />\r\n              {t(\"backToLogin\", \"Back to login\")}\r\n            </Link>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Forgot password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n\r\n          <div className=\"flex justify-center\">\r\n            <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center\">\r\n              <Mail className=\"w-6 h-6 text-primary\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"text-center\">\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Forgot Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your username to reset your password\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"username\">{t(\"username\", \"Username\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"username\"\r\n                type=\"text\"\r\n                autoComplete=\"username\"\r\n                placeholder={t(\"usernamePlaceholder\", \"Enter your username\")}\r\n                value={username}\r\n                onChange={(e) => setUsername(e.target.value)}\r\n                disabled={isLoading}\r\n              />\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"sending\", \"Sending...\")}\r\n                </>\r\n              ) : (\r\n                t(\"sendLink\", \"Send Reset Link\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <Link\r\n            to=\"/login\"\r\n            className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n          >\r\n            <ArrowLeft className=\"w-4 h-4\" />\r\n            {t(\"backToLogin\", \"Back to login\")}\r\n          </Link>\r\n\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Forgot password background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default ForgotPasswordPageSplit;\r\n"
     },
     {
       "path": "forgot-password-page-split/lang/en.json",

package/dist/registry/forgot-password-page.json

@@ -23,7 +23,7 @@
       "path": "forgot-password-page/forgot-password-page.tsx",
       "type": "registry:page",
       "target": "$modules$/forgot-password-page/forgot-password-page.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardHeader,\r\n  CardTitle,\r\n  CardDescription,\r\n} from \"@/components/ui/card\";\r\nimport { KeyRound, ArrowLeft,  CheckCircle2 } from \"lucide-react\";\r\nimport { FormField } from \"@/components/FormField\";\r\nimport { PasswordInput } from \"@/components/PasswordInput\";\r\n\r\ntype Step = \"request\" | \"reset\" | \"success\";\r\n\r\nexport function ForgotPasswordPage() {\r\n  const { t } = useTranslation(\"forgot-password-page\");\r\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\r\n\r\n  const { forgotPassword, resetPassword } = useAuth();\r\n\r\n  const [step, setStep] = useState<Step>(\"request\");\r\n  const [username, setUsername] = useState(\"\");\r\n  const [code, setCode] = useState(\"\");\r\n  const [newPassword, setNewPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  const handleRequestCode = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setError(null);\r\n\r\n    try {\r\n      await forgotPassword(username);\r\n      toast.success(t(\"codeSentTitle\", \"Code Sent!\"), {\r\n        description: t(\r\n          \"codeSentDesc\",\r\n          \"A password reset code has been sent to your email.\",\r\n        ),\r\n      });\r\n      setStep(\"reset\");\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"errorGeneric\", \"Failed to send reset code. Please try again.\"),\r\n      );\r\n      setError(errorMessage);\r\n      toast.error(t(\"errorTitle\", \"Error\"), {\r\n        description: errorMessage,\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleResetPassword = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (newPassword !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    setIsSubmitting(true);\r\n\r\n    try {\r\n      await resetPassword(username, code, newPassword);\r\n      toast.success(t(\"resetSuccessTitle\", \"Password Reset!\"), {\r\n        description: t(\r\n          \"resetSuccessDesc\",\r\n          \"Your password has been successfully reset.\",\r\n        ),\r\n      });\r\n      setStep(\"success\");\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"errorResetGeneric\", \"Failed to reset password. Please try again.\"),\r\n      );\r\n      setError(errorMessage);\r\n      toast.error(t(\"errorTitle\", \"Error\"), {\r\n        description: errorMessage,\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  // Success step\r\n  if (step === \"success\") {\r\n    return (\r\n      <Layout>\r\n        <div className=\"min-h-screen bg-muted/30 py-12\">\r\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n            <div className=\"max-w-md mx-auto\">\r\n              <Card>\r\n                <CardContent className=\"pt-8 pb-8 text-center\">\r\n                  <CheckCircle2 className=\"w-16 h-16 text-green-500 mx-auto mb-4\" />\r\n                  <h1 className=\"text-2xl font-bold mb-2\">\r\n                    {t(\"successTitle\", \"Password Reset Successfully!\")}\r\n                  </h1>\r\n                  <p className=\"text-muted-foreground mb-6\">\r\n                    {t(\r\n                      \"successDescription\",\r\n                      \"Your password has been changed. You can now login with your new password.\",\r\n                    )}\r\n                  </p>\r\n                  <Button asChild className=\"w-full\">\r\n                    <Link to=\"/login\">{t(\"goToLogin\", \"Go to Login\")}</Link>\r\n                  </Button>\r\n                </CardContent>\r\n              </Card>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen bg-muted/30 py-12\">\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n          {/* Hero Section */}\r\n          <div className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\r\n              {t(\"title\", \"Forgot Password\")}\r\n            </h1>\r\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\r\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\r\n              {step === \"request\"\r\n                ? t(\r\n                  \"descriptionRequest\",\r\n                  \"Enter your username and we'll send you a code to reset your password.\",\r\n                )\r\n                : t(\r\n                  \"descriptionReset\",\r\n                  \"Enter the code sent to your email and your new password.\",\r\n                )}\r\n            </p>\r\n          </div>\r\n\r\n          <div className=\"max-w-md mx-auto\">\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle className=\"flex items-center gap-2\">\r\n                  <KeyRound className=\"w-5 h-5 text-primary\" />\r\n                  {step === \"request\"\r\n                    ? t(\"cardTitleRequest\", \"Request Reset Code\")\r\n                    : t(\"cardTitleReset\", \"Reset Password\")}\r\n                </CardTitle>\r\n                <CardDescription>\r\n                  {step === \"request\"\r\n                    ? t(\"cardDescRequest\", \"Step 1 of 2: Request a reset code\")\r\n                    : t(\r\n                      \"cardDescReset\",\r\n                      \"Step 2 of 2: Enter code and new password\",\r\n                    )}\r\n                </CardDescription>\r\n              </CardHeader>\r\n              <CardContent>\r\n                {step === \"request\" ? (\r\n                  // Step 1: Request Code\r\n                  <form onSubmit={handleRequestCode} className=\"space-y-6\">\r\n                    <FormField label={t(\"username\", \"Username\")} htmlFor=\"username\" required>\r\n                      <Input\r\n                        id=\"username\"\r\n                        type=\"text\"\r\n                        value={username}\r\n                        onChange={(e) => setUsername(e.target.value)}\r\n                        placeholder={t(\"usernamePlaceholder\", \"Enter your username\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        autoComplete=\"username\"\r\n                      />\r\n                    </FormField>\r\n\r\n                    {error && (\r\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\r\n                        <p className=\"text-red-800 text-sm font-medium\">\r\n                          {error}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\", \"Sending...\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"sendCode\", \"Send Reset Code\")\r\n                      )}\r\n                    </Button>\r\n\r\n                    <div className=\"text-center\">\r\n                      <Link\r\n                        to=\"/login\"\r\n                        className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1\"\r\n                      >\r\n                        <ArrowLeft className=\"w-4 h-4\" />\r\n                        {t(\"backToLogin\", \"Back to Login\")}\r\n                      </Link>\r\n                    </div>\r\n                  </form>\r\n                ) : (\r\n                  // Step 2: Reset Password\r\n                  <form onSubmit={handleResetPassword} className=\"space-y-6\">\r\n                    <div className=\"p-3 bg-muted rounded-lg text-sm\">\r\n                      <span className=\"text-muted-foreground\">\r\n                        {t(\"codeFor\", \"Reset code for:\")}{\" \"}\r\n                      </span>\r\n                      <span className=\"font-medium\">{username}</span>\r\n                    </div>\r\n                    <FormField label={t(\"code\", \"Reset Code\")} htmlFor=\"code\" required>\r\n                      <Input\r\n                        id=\"code\"\r\n                        type=\"text\"\r\n                        value={code}\r\n                        onChange={(e) => setCode(e.target.value)}\r\n                        placeholder={t(\"codePlaceholder\", \"Enter 6-digit code\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        maxLength={6}\r\n                      />\r\n                    </FormField>\r\n                    <FormField label={t(\"newPassword\", \"New Password\")} htmlFor=\"new-password\" required>\r\n                      <PasswordInput\r\n                        id=\"new-password\"\r\n                        name=\"new-password\"\r\n                        value={newPassword}\r\n                        onChange={(e) => setNewPassword(e.target.value)}\r\n                        placeholder={t(\"newPasswordPlaceholder\", \"Enter new password\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        autoComplete=\"new-password\"\r\n                      />\r\n                    </FormField>\r\n                    <div>\r\n                      <p className=\"text-xs text-muted-foreground mt-1\">\r\n                        {t(\r\n                          \"passwordRequirements\",\r\n                          \"At least 8 characters, 1 letter and 1 number\",\r\n                        )}\r\n                      </p>\r\n                    </div>\r\n\r\n                    <FormField label={t(\"confirmPassword\", \"Confirm Password\")} htmlFor=\"confirm-password\" required>\r\n                      <PasswordInput\r\n                        id=\"confirm-password\"\r\n                        value={confirmPassword}\r\n                        name=\"confirm-password\"\r\n                        onChange={(e) => setConfirmPassword(e.target.value)}\r\n                        placeholder={t(\"confirmPasswordPlaceholder\", \"Confirm new password\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        autoComplete=\"new-password\"\r\n                      />\r\n                      </FormField>\r\n\r\n                    {error && (\r\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\r\n                        <p className=\"text-red-800 text-sm font-medium\">\r\n                          {error}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"resetting\", \"Resetting...\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"resetPassword\", \"Reset Password\")\r\n                      )}\r\n                    </Button>\r\n\r\n                    <div className=\"flex justify-between\">\r\n                      <button\r\n                        type=\"button\"\r\n                        onClick={() => {\r\n                          setStep(\"request\");\r\n                          setCode(\"\");\r\n                          setNewPassword(\"\");\r\n                          setConfirmPassword(\"\");\r\n                          setError(null);\r\n                        }}\r\n                        className=\"text-sm text-muted-foreground hover:text-primary\"\r\n                      >\r\n                        {t(\"changeUsername\", \"Change username\")}\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        onClick={() =>\r\n                          handleRequestCode({\r\n                            preventDefault: () => { },\r\n                          } as React.FormEvent)\r\n                        }\r\n                        className=\"text-sm text-primary hover:underline\"\r\n                        disabled={isSubmitting}\r\n                      >\r\n                        {t(\"resendCode\", \"Resend code\")}\r\n                      </button>\r\n                    </div>\r\n                  </form>\r\n                )}\r\n              </CardContent>\r\n            </Card>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ForgotPasswordPage;\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardHeader,\r\n  CardTitle,\r\n  CardDescription,\r\n} from \"@/components/ui/card\";\r\nimport { KeyRound, ArrowLeft, Eye, EyeOff, CheckCircle2 } from \"lucide-react\";\r\n\r\ntype Step = \"request\" | \"reset\" | \"success\";\r\n\r\nexport function ForgotPasswordPage() {\r\n  const { t } = useTranslation(\"forgot-password-page\");\r\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\r\n\r\n  const { forgotPassword, resetPassword } = useAuth();\r\n\r\n  const [step, setStep] = useState<Step>(\"request\");\r\n  const [username, setUsername] = useState(\"\");\r\n  const [code, setCode] = useState(\"\");\r\n  const [newPassword, setNewPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [showPassword, setShowPassword] = useState(false);\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  const handleRequestCode = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setError(null);\r\n\r\n    try {\r\n      await forgotPassword(username);\r\n      toast.success(t(\"codeSentTitle\", \"Code Sent!\"), {\r\n        description: t(\r\n          \"codeSentDesc\",\r\n          \"A password reset code has been sent to your email.\",\r\n        ),\r\n      });\r\n      setStep(\"reset\");\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"errorGeneric\", \"Failed to send reset code. Please try again.\"),\r\n      );\r\n      setError(errorMessage);\r\n      toast.error(t(\"errorTitle\", \"Error\"), {\r\n        description: errorMessage,\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleResetPassword = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (newPassword !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    setIsSubmitting(true);\r\n\r\n    try {\r\n      await resetPassword(username, code, newPassword);\r\n      toast.success(t(\"resetSuccessTitle\", \"Password Reset!\"), {\r\n        description: t(\r\n          \"resetSuccessDesc\",\r\n          \"Your password has been successfully reset.\",\r\n        ),\r\n      });\r\n      setStep(\"success\");\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"errorResetGeneric\", \"Failed to reset password. Please try again.\"),\r\n      );\r\n      setError(errorMessage);\r\n      toast.error(t(\"errorTitle\", \"Error\"), {\r\n        description: errorMessage,\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  // Success step\r\n  if (step === \"success\") {\r\n    return (\r\n      <Layout>\r\n        <div className=\"min-h-screen bg-muted/30 py-12\">\r\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n            <div className=\"max-w-md mx-auto\">\r\n              <Card>\r\n                <CardContent className=\"pt-8 pb-8 text-center\">\r\n                  <CheckCircle2 className=\"w-16 h-16 text-green-500 mx-auto mb-4\" />\r\n                  <h1 className=\"text-2xl font-bold mb-2\">\r\n                    {t(\"successTitle\", \"Password Reset Successfully!\")}\r\n                  </h1>\r\n                  <p className=\"text-muted-foreground mb-6\">\r\n                    {t(\r\n                      \"successDescription\",\r\n                      \"Your password has been changed. You can now login with your new password.\",\r\n                    )}\r\n                  </p>\r\n                  <Button asChild className=\"w-full\">\r\n                    <Link to=\"/login\">{t(\"goToLogin\", \"Go to Login\")}</Link>\r\n                  </Button>\r\n                </CardContent>\r\n              </Card>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen bg-muted/30 py-12\">\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n          {/* Hero Section */}\r\n          <div className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\r\n              {t(\"title\", \"Forgot Password\")}\r\n            </h1>\r\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\r\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\r\n              {step === \"request\"\r\n                ? t(\r\n                    \"descriptionRequest\",\r\n                    \"Enter your username and we'll send you a code to reset your password.\",\r\n                  )\r\n                : t(\r\n                    \"descriptionReset\",\r\n                    \"Enter the code sent to your email and your new password.\",\r\n                  )}\r\n            </p>\r\n          </div>\r\n\r\n          <div className=\"max-w-md mx-auto\">\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle className=\"flex items-center gap-2\">\r\n                  <KeyRound className=\"w-5 h-5 text-primary\" />\r\n                  {step === \"request\"\r\n                    ? t(\"cardTitleRequest\", \"Request Reset Code\")\r\n                    : t(\"cardTitleReset\", \"Reset Password\")}\r\n                </CardTitle>\r\n                <CardDescription>\r\n                  {step === \"request\"\r\n                    ? t(\"cardDescRequest\", \"Step 1 of 2: Request a reset code\")\r\n                    : t(\r\n                        \"cardDescReset\",\r\n                        \"Step 2 of 2: Enter code and new password\",\r\n                      )}\r\n                </CardDescription>\r\n              </CardHeader>\r\n              <CardContent>\r\n                {step === \"request\" ? (\r\n                  // Step 1: Request Code\r\n                  <form onSubmit={handleRequestCode} className=\"space-y-6\">\r\n                    <div>\r\n                      <Label htmlFor=\"username\">\r\n                        {t(\"username\", \"Username\")} *\r\n                      </Label>\r\n                      <Input\r\n                        id=\"username\"\r\n                        type=\"text\"\r\n                        value={username}\r\n                        onChange={(e) => setUsername(e.target.value)}\r\n                        placeholder={t(\r\n                          \"usernamePlaceholder\",\r\n                          \"Enter your username\",\r\n                        )}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        autoComplete=\"username\"\r\n                      />\r\n                    </div>\r\n\r\n                    {error && (\r\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\r\n                        <p className=\"text-red-800 text-sm font-medium\">\r\n                          {error}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\", \"Sending...\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"sendCode\", \"Send Reset Code\")\r\n                      )}\r\n                    </Button>\r\n\r\n                    <div className=\"text-center\">\r\n                      <Link\r\n                        to=\"/login\"\r\n                        className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1\"\r\n                      >\r\n                        <ArrowLeft className=\"w-4 h-4\" />\r\n                        {t(\"backToLogin\", \"Back to Login\")}\r\n                      </Link>\r\n                    </div>\r\n                  </form>\r\n                ) : (\r\n                  // Step 2: Reset Password\r\n                  <form onSubmit={handleResetPassword} className=\"space-y-6\">\r\n                    <div className=\"p-3 bg-muted rounded-lg text-sm\">\r\n                      <span className=\"text-muted-foreground\">\r\n                        {t(\"codeFor\", \"Reset code for:\")}{\" \"}\r\n                      </span>\r\n                      <span className=\"font-medium\">{username}</span>\r\n                    </div>\r\n\r\n                    <div>\r\n                      <Label htmlFor=\"code\">{t(\"code\", \"Reset Code\")} *</Label>\r\n                      <Input\r\n                        id=\"code\"\r\n                        type=\"text\"\r\n                        value={code}\r\n                        onChange={(e) => setCode(e.target.value)}\r\n                        placeholder={t(\"codePlaceholder\", \"Enter 6-digit code\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        maxLength={6}\r\n                      />\r\n                    </div>\r\n\r\n                    <div>\r\n                      <Label htmlFor=\"newPassword\">\r\n                        {t(\"newPassword\", \"New Password\")} *\r\n                      </Label>\r\n                      <div className=\"relative\">\r\n                        <Input\r\n                          id=\"newPassword\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          value={newPassword}\r\n                          onChange={(e) => setNewPassword(e.target.value)}\r\n                          placeholder={t(\r\n                            \"newPasswordPlaceholder\",\r\n                            \"Enter new password\",\r\n                          )}\r\n                          required\r\n                          className=\"mt-1 pr-10\"\r\n                          autoComplete=\"new-password\"\r\n                        />\r\n                        <button\r\n                          type=\"button\"\r\n                          onClick={() => setShowPassword(!showPassword)}\r\n                          className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\r\n                        >\r\n                          {showPassword ? (\r\n                            <EyeOff className=\"w-4 h-4\" />\r\n                          ) : (\r\n                            <Eye className=\"w-4 h-4\" />\r\n                          )}\r\n                        </button>\r\n                      </div>\r\n                      <p className=\"text-xs text-muted-foreground mt-1\">\r\n                        {t(\r\n                          \"passwordRequirements\",\r\n                          \"At least 8 characters, 1 letter and 1 number\",\r\n                        )}\r\n                      </p>\r\n                    </div>\r\n\r\n                    <div>\r\n                      <Label htmlFor=\"confirmPassword\">\r\n                        {t(\"confirmPassword\", \"Confirm Password\")} *\r\n                      </Label>\r\n                      <Input\r\n                        id=\"confirmPassword\"\r\n                        type={showPassword ? \"text\" : \"password\"}\r\n                        value={confirmPassword}\r\n                        onChange={(e) => setConfirmPassword(e.target.value)}\r\n                        placeholder={t(\r\n                          \"confirmPasswordPlaceholder\",\r\n                          \"Confirm new password\",\r\n                        )}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        autoComplete=\"new-password\"\r\n                      />\r\n                    </div>\r\n\r\n                    {error && (\r\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\r\n                        <p className=\"text-red-800 text-sm font-medium\">\r\n                          {error}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"resetting\", \"Resetting...\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"resetPassword\", \"Reset Password\")\r\n                      )}\r\n                    </Button>\r\n\r\n                    <div className=\"flex justify-between\">\r\n                      <button\r\n                        type=\"button\"\r\n                        onClick={() => {\r\n                          setStep(\"request\");\r\n                          setCode(\"\");\r\n                          setNewPassword(\"\");\r\n                          setConfirmPassword(\"\");\r\n                          setError(null);\r\n                        }}\r\n                        className=\"text-sm text-muted-foreground hover:text-primary\"\r\n                      >\r\n                        {t(\"changeUsername\", \"Change username\")}\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        onClick={() =>\r\n                          handleRequestCode({\r\n                            preventDefault: () => {},\r\n                          } as React.FormEvent)\r\n                        }\r\n                        className=\"text-sm text-primary hover:underline\"\r\n                        disabled={isSubmitting}\r\n                      >\r\n                        {t(\"resendCode\", \"Resend code\")}\r\n                      </button>\r\n                    </div>\r\n                  </form>\r\n                )}\r\n              </CardContent>\r\n            </Card>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ForgotPasswordPage;\r\n"
     },
     {
       "path": "forgot-password-page/lang/en.json",

package/dist/registry/header-centered-pill.json

@@ -21,7 +21,7 @@
       "path": "header-centered-pill/header-centered-pill.tsx",
       "type": "registry:component",
       "target": "$modules$/header-centered-pill/header-centered-pill.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { Menu } from \"lucide-react\";\r\nimport { Button, buttonVariants } from \"@/components/ui/button\";\r\nimport {\r\n  Sheet,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetContent,\r\n  SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport function HeaderCenteredPill() {\r\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n  const { t } = useTranslation(\"header-centered-pill\");\r\n\r\n  const navigation = [\r\n    { name: t(\"features\", \"Features\"), href: \"/features\" },\r\n    { name: t(\"pricing\", \"Pricing\"), href: \"/pricing\" },\r\n    { name: t(\"blog\", \"Blog\"), href: \"/blog\" },\r\n    { name: t(\"company\", \"Company\"), href: \"/about\" },\r\n    { name: t(\"signIn\", \"Sign in\"), href: \"/login\" },\r\n  ];\r\n\r\n  return (\r\n    <header className=\"p-4\">\r\n      <div className=\"mx-auto flex max-w-2xl items-center justify-between space-x-4 rounded-full border bg-background p-1.5 pl-4\">\r\n        <Link to=\"/\">\r\n          <Logo size=\"sm\" />\r\n        </Link>\r\n\r\n        {/* Desktop Navigation */}\r\n        <div className=\"hidden md:inline-flex\">\r\n          {navigation.map((item) => (\r\n            <Link\r\n              key={item.name}\r\n              to={item.href}\r\n              className={buttonVariants({ variant: \"ghost\", size: \"sm\" })}\r\n            >\r\n              {item.name}\r\n            </Link>\r\n          ))}\r\n        </div>\r\n\r\n        {/* Desktop CTA */}\r\n        <div className=\"hidden md:inline-flex\">\r\n          <Link\r\n            to=\"/register\"\r\n            className={cn(buttonVariants({ size: \"sm\" }), \"rounded-full\")}\r\n          >\r\n            {t(\"getStarted\", \"Get Started\")}\r\n          </Link>\r\n        </div>\r\n\r\n        {/* Mobile Menu */}\r\n        <div className=\"md:hidden\">\r\n          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\r\n            <SheetTrigger asChild>\r\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\r\n                <Menu className=\"h-5 w-5\" />\r\n                <span className=\"sr-only\">{t(\"menu\", \"Menu\")}</span>\r\n              </Button>\r\n            </SheetTrigger>\r\n            <SheetContent side=\"right\" className=\"w-[300px] px-6\">\r\n              <SheetHeader>\r\n                <SheetTitle>{t(\"menu\", \"Menu\")}</SheetTitle>\r\n              </SheetHeader>\r\n              <div className=\"flex flex-col space-y-4 mt-8\">\r\n                {navigation.map((item) => (\r\n                  <Link\r\n                    key={item.name}\r\n                    to={item.href}\r\n                    className=\"text-lg font-medium hover:text-primary transition-colors\"\r\n                    onClick={() => setMobileMenuOpen(false)}\r\n                  >\r\n                    {item.name}\r\n                  </Link>\r\n                ))}\r\n                <Link\r\n                  to=\"/register\"\r\n                  className={cn(buttonVariants(), \"rounded-full mt-4\")}\r\n                  onClick={() => setMobileMenuOpen(false)}\r\n                >\r\n                  {t(\"getStarted\", \"Get Started\")}\r\n                </Link>\r\n              </div>\r\n            </SheetContent>\r\n          </Sheet>\r\n        </div>\r\n      </div>\r\n    </header>\r\n  );\r\n}\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { Menu } from \"lucide-react\";\r\nimport { Button, buttonVariants } from \"@/components/ui/button\";\r\nimport {\r\n  Sheet,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetContent,\r\n  SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport function HeaderCenteredPill() {\r\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n  const { t } = useTranslation(\"header-centered-pill\");\r\n\r\n  const navigation = [\r\n    { name: t(\"features\", \"Features\"), href: \"/features\" },\r\n    { name: t(\"pricing\", \"Pricing\"), href: \"/pricing\" },\r\n    { name: t(\"blog\", \"Blog\"), href: \"/blog\" },\r\n    { name: t(\"company\", \"Company\"), href: \"/about\" },\r\n    { name: t(\"signIn\", \"Sign in\"), href: \"/login\" },\r\n  ];\r\n\r\n  return (\r\n    <header className=\"p-4\">\r\n      <div className=\"mx-auto flex max-w-2xl items-center justify-between space-x-4 rounded-full border bg-background p-1.5 pl-4\">\r\n        <Logo size=\"sm\" />\r\n\r\n        {/* Desktop Navigation */}\r\n        <div className=\"hidden md:inline-flex\">\r\n          {navigation.map((item) => (\r\n            <Link\r\n              key={item.name}\r\n              to={item.href}\r\n              className={buttonVariants({ variant: \"ghost\", size: \"sm\" })}\r\n            >\r\n              {item.name}\r\n            </Link>\r\n          ))}\r\n        </div>\r\n\r\n        {/* Desktop CTA */}\r\n        <div className=\"hidden md:inline-flex\">\r\n          <Link\r\n            to=\"/register\"\r\n            className={cn(buttonVariants({ size: \"sm\" }), \"rounded-full\")}\r\n          >\r\n            {t(\"getStarted\", \"Get Started\")}\r\n          </Link>\r\n        </div>\r\n\r\n        {/* Mobile Menu */}\r\n        <div className=\"md:hidden\">\r\n          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\r\n            <SheetTrigger asChild>\r\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\r\n                <Menu className=\"h-5 w-5\" />\r\n                <span className=\"sr-only\">{t(\"menu\", \"Menu\")}</span>\r\n              </Button>\r\n            </SheetTrigger>\r\n            <SheetContent side=\"right\" className=\"w-[300px] px-6\">\r\n              <SheetHeader>\r\n                <SheetTitle>{t(\"menu\", \"Menu\")}</SheetTitle>\r\n              </SheetHeader>\r\n              <div className=\"flex flex-col space-y-4 mt-8\">\r\n                {navigation.map((item) => (\r\n                  <Link\r\n                    key={item.name}\r\n                    to={item.href}\r\n                    className=\"text-lg font-medium hover:text-primary transition-colors\"\r\n                    onClick={() => setMobileMenuOpen(false)}\r\n                  >\r\n                    {item.name}\r\n                  </Link>\r\n                ))}\r\n                <Link\r\n                  to=\"/register\"\r\n                  className={cn(buttonVariants(), \"rounded-full mt-4\")}\r\n                  onClick={() => setMobileMenuOpen(false)}\r\n                >\r\n                  {t(\"getStarted\", \"Get Started\")}\r\n                </Link>\r\n              </div>\r\n            </SheetContent>\r\n          </Sheet>\r\n        </div>\r\n      </div>\r\n    </header>\r\n  );\r\n}\r\n"
     },
     {
       "path": "header-centered-pill/lang/en.json",

package/dist/registry/header-ecommerce.json

@@ -20,7 +20,7 @@
       "path": "header-ecommerce/header-ecommerce.tsx",
       "type": "registry:component",
       "target": "$modules$/header-ecommerce/header-ecommerce.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate } from \"react-router\";\r\nimport { ShoppingCart, Menu, Search, Heart, Package, User, LogOut } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport {\r\n  Sheet,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetContent,\r\n  SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogHeader,\r\n  DialogTitle,\r\n  DialogTrigger,\r\n} from \"@/components/ui/dialog\";\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuLabel,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { CartDrawer } from \"@/modules/cart-drawer\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  useDbSearch,\r\n  formatPrice,\r\n} from \"@/modules/ecommerce-core\";\r\n\r\nexport function HeaderEcommerce() {\r\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);\r\n  const [desktopSearchOpen, setDesktopSearchOpen] = useState(false);\r\n  const [showResults, setShowResults] = useState(false);\r\n  const { itemCount, state } = useCart();\r\n  const { favoriteCount } = useFavorites();\r\n  const { isAuthenticated, user, logout } = useAuth();\r\n  const navigate = useNavigate();\r\n  const { t } = useTranslation(\"header-ecommerce\");\r\n\r\n  const handleLogout = () => {\r\n    logout();\r\n    toast.success(t(\"logoutToastTitle\", \"Goodbye!\"), {\r\n      description: t(\"logoutToastDesc\", \"You have been logged out successfully.\"),\r\n    });\r\n  };\r\n\r\n  const {\r\n    searchTerm,\r\n    setSearchTerm,\r\n    results: searchResults,\r\n    clearSearch,\r\n  } = useDbSearch();\r\n\r\n  const handleSearchSubmit = (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    if (searchTerm.trim()) {\r\n      navigate(`/products?search=${encodeURIComponent(searchTerm)}`);\r\n      setShowResults(false);\r\n      setDesktopSearchOpen(false);\r\n      clearSearch();\r\n    }\r\n  };\r\n\r\n  const handleSearchFocus = () => {\r\n    setShowResults(true);\r\n  };\r\n\r\n  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setSearchTerm(e.target.value);\r\n    setShowResults(true);\r\n  };\r\n\r\n  const navigation = [\r\n    { name: t(\"home\"), href: \"/\" },\r\n    { name: t(\"products\"), href: \"/products\" },\r\n    { name: t(\"about\"), href: \"/about\" },\r\n    { name: t(\"contact\"), href: \"/contact\" },\r\n  ];\r\n\r\n  return (\r\n    <header className=\"sticky top-0 z-50 w-full border-b border-border/20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-3 sm:px-4 lg:px-8\">\r\n        <div className=\"flex h-14 sm:h-16 md:h-20 items-center justify-between gap-2\">\r\n          {/* Logo */}\r\n          <div className=\"flex-shrink-0 min-w-0\">\r\n            <Logo size=\"sm\" className=\"text-base sm:text-xl lg:text-2xl\" />\r\n          </div>\r\n\r\n          {/* Desktop Navigation - Centered */}\r\n          <nav className=\"hidden lg:flex items-center space-x-12 absolute left-1/2 transform -translate-x-1/2\">\r\n            {navigation.map((item) => (\r\n              <Link\r\n                key={item.name}\r\n                to={item.href}\r\n                className=\"text-base font-medium transition-colors hover:text-primary relative group py-2\"\r\n              >\r\n                {item.name}\r\n                <span className=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full\"></span>\r\n              </Link>\r\n            ))}\r\n          </nav>\r\n\r\n          {/* Search & Actions - Right Aligned */}\r\n          <div className=\"flex items-center space-x-1 sm:space-x-2 lg:space-x-4 flex-shrink-0\">\r\n            {/* Desktop Search - Modal */}\r\n            <Dialog\r\n              open={desktopSearchOpen}\r\n              onOpenChange={setDesktopSearchOpen}\r\n            >\r\n              <DialogTrigger asChild>\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  className=\"hidden lg:flex h-10 w-10\"\r\n                >\r\n                  <Search className=\"h-5 w-5\" />\r\n                </Button>\r\n              </DialogTrigger>\r\n              <DialogContent className=\"sm:max-w-2xl\">\r\n                <DialogHeader>\r\n                  <DialogTitle>\r\n                    {t(\"searchProducts\", \"Search Products\")}\r\n                  </DialogTitle>\r\n                </DialogHeader>\r\n                <div className=\"space-y-4\">\r\n                  <form onSubmit={handleSearchSubmit}>\r\n                    <div className=\"relative\">\r\n                      <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-5 w-5\" />\r\n                      <Input\r\n                        type=\"search\"\r\n                        placeholder={t(\r\n                          \"searchPlaceholder\",\r\n                          \"Search for products...\"\r\n                        )}\r\n                        value={searchTerm}\r\n                        onChange={handleSearchChange}\r\n                        className=\"pl-11 h-12 text-base\"\r\n                        autoFocus\r\n                      />\r\n                    </div>\r\n                  </form>\r\n\r\n                  {/* Desktop Search Results */}\r\n                  {searchTerm.trim() && (\r\n                    <div className=\"max-h-[400px] overflow-y-auto rounded-lg border bg-card\">\r\n                      {searchResults.length > 0 ? (\r\n                        <div className=\"divide-y\">\r\n                          <div className=\"px-4 py-3 bg-muted/50\">\r\n                            <p className=\"text-sm font-medium text-muted-foreground\">\r\n                              {searchResults.length}{\" \"}\r\n                              {searchResults.length === 1\r\n                                ? \"result\"\r\n                                : \"results\"}{\" \"}\r\n                              found\r\n                            </p>\r\n                          </div>\r\n                          {searchResults.slice(0, 8).map((product: Product) => (\r\n                            <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                            <Link\r\n                              to={`/products/${product.slug}`}\r\n                              onClick={() => {\r\n                                setDesktopSearchOpen(false);\r\n                                clearSearch();\r\n                              }}\r\n                              className=\"flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors\"\r\n                            >\r\n                              <img\r\n                                src={\r\n                                  product.images[0] || \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-16 h-16 object-cover rounded flex-shrink-0\"\r\n                              />\r\n                              <div className=\"flex-1 min-w-0\">\r\n                                <h4 className=\"font-medium text-base line-clamp-1\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-sm text-muted-foreground capitalize\">\r\n                                  {product.category}\r\n                                </p>\r\n                                <p className=\"text-base font-semibold text-primary mt-1\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </Link>\r\n                            </div>\r\n                          ))}\r\n                          {searchResults.length > 8 && (\r\n                            <div className=\"px-4 py-3 bg-muted/30 text-center\">\r\n                              <button\r\n                                onClick={() => {\r\n                                  navigate(\r\n                                    `/products?search=${encodeURIComponent(\r\n                                      searchTerm\r\n                                    )}`\r\n                                  );\r\n                                  setDesktopSearchOpen(false);\r\n                                  clearSearch();\r\n                                }}\r\n                                className=\"text-sm font-medium text-primary hover:underline\"\r\n                              >\r\n                                {t(\r\n                                  \"viewAllResults\",\r\n                                  `View all ${searchResults.length} results`\r\n                                )}\r\n                              </button>\r\n                            </div>\r\n                          )}\r\n                        </div>\r\n                      ) : (\r\n                        <div className=\"p-8 text-center\">\r\n                          <Search className=\"h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50\" />\r\n                          <p className=\"text-base text-muted-foreground\">\r\n                            {t(\"noResults\", \"No products found\")}\r\n                          </p>\r\n                          <p className=\"text-sm text-muted-foreground mt-1\">\r\n                            {t(\r\n                              \"tryDifferentKeywords\",\r\n                              \"Try different keywords\"\r\n                            )}\r\n                          </p>\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n              </DialogContent>\r\n            </Dialog>\r\n\r\n            {/* Search - Mobile (Hidden - moved to hamburger menu) */}\r\n            <Dialog open={mobileSearchOpen} onOpenChange={setMobileSearchOpen}>\r\n              <DialogTrigger asChild>\r\n                <Button variant=\"ghost\" size=\"icon\" className=\"hidden\">\r\n                  <Search className=\"h-4 w-4 sm:h-5 sm:w-5\" />\r\n                </Button>\r\n              </DialogTrigger>\r\n              <DialogContent className=\"sm:max-w-md\">\r\n                <DialogHeader>\r\n                  <DialogTitle>{t(\"searchProducts\")}</DialogTitle>\r\n                </DialogHeader>\r\n                <form\r\n                  onSubmit={(e) => {\r\n                    e.preventDefault();\r\n                    if (searchTerm.trim()) {\r\n                      navigate(\r\n                        `/products?search=${encodeURIComponent(searchTerm)}`\r\n                      );\r\n                      setMobileSearchOpen(false);\r\n                      clearSearch();\r\n                    }\r\n                  }}\r\n                  className=\"space-y-4\"\r\n                >\r\n                  <div className=\"relative\">\r\n                    <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4\" />\r\n                    <Input\r\n                      type=\"search\"\r\n                      placeholder={t(\"searchPlaceholder\")}\r\n                      value={searchTerm}\r\n                      onChange={(e) => setSearchTerm(e.target.value)}\r\n                      className=\"pl-10\"\r\n                      autoFocus\r\n                    />\r\n                  </div>\r\n                  <div className=\"flex gap-2\">\r\n                    <Button type=\"submit\" className=\"flex-1\">\r\n                      {t(\"searchButton\", \"Search\")}\r\n                    </Button>\r\n                    <Button\r\n                      type=\"button\"\r\n                      variant=\"outline\"\r\n                      onClick={() => {\r\n                        clearSearch();\r\n                        setMobileSearchOpen(false);\r\n                      }}\r\n                    >\r\n                      {t(\"cancel\", \"Cancel\")}\r\n                    </Button>\r\n                  </div>\r\n                </form>\r\n\r\n                {/* Mobile Search Results */}\r\n                {searchTerm.trim() && (\r\n                  <div className=\"mt-4 max-h-64 overflow-y-auto\">\r\n                    {searchResults.length > 0 ? (\r\n                      <div className=\"space-y-2\">\r\n                        <p className=\"text-sm text-muted-foreground mb-2\">\r\n                          {searchResults.length} result\r\n                          {searchResults.length !== 1 ? \"s\" : \"\"} found\r\n                        </p>\r\n                        {searchResults.slice(0, 5).map((product: Product) => (\r\n                          <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                          <Link\r\n                            to={`/products/${product.slug}`}\r\n                            onClick={() => {\r\n                              setMobileSearchOpen(false);\r\n                              clearSearch();\r\n                            }}\r\n                            className=\"block p-2 rounded hover:bg-muted/50 transition-colors\"\r\n                          >\r\n                            <div className=\"flex items-center gap-3\">\r\n                              <img\r\n                                src={\r\n                                  product.images[0] || \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-10 h-10 object-cover rounded\"\r\n                              />\r\n                              <div className=\"flex-1\">\r\n                                <h4 className=\"font-medium text-sm\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-xs text-muted-foreground\">\r\n                                  {product.category}\r\n                                </p>\r\n                                <p className=\"text-sm font-medium\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </div>\r\n                          </Link>\r\n                          </div>\r\n                        ))}\r\n                      </div>\r\n                    ) : (\r\n                      <p className=\"text-sm text-muted-foreground\">\r\n                        {t(\"noResults\")}\r\n                      </p>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </DialogContent>\r\n            </Dialog>\r\n\r\n            {/* Wishlist - Desktop Only */}\r\n            <Link to=\"/favorites\" className=\"hidden lg:block\">\r\n              <Button\r\n                variant=\"ghost\"\r\n                size=\"icon\"\r\n                className=\"relative h-10 w-10\"\r\n              >\r\n                <Heart className=\"h-5 w-5\" />\r\n                {favoriteCount > 0 && (\r\n                  <Badge\r\n                    variant=\"destructive\"\r\n                    className=\"absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]\"\r\n                  >\r\n                    {favoriteCount}\r\n                  </Badge>\r\n                )}\r\n              </Button>\r\n            </Link>\r\n\r\n            {/* Cart - Desktop Only (Goes to Cart Page) */}\r\n            <Link to=\"/cart\" className=\"hidden lg:block\">\r\n              <Button\r\n                variant=\"ghost\"\r\n                size=\"icon\"\r\n                className=\"relative h-10 w-10\"\r\n              >\r\n                <ShoppingCart className=\"h-5 w-5\" />\r\n                {itemCount > 0 && (\r\n                  <Badge\r\n                    variant=\"destructive\"\r\n                    className=\"absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]\"\r\n                  >\r\n                    {itemCount}\r\n                  </Badge>\r\n                )}\r\n              </Button>\r\n            </Link>\r\n\r\n            {/* Auth - Desktop Only */}\r\n            <div className=\"hidden lg:flex\">\r\n              {isAuthenticated ? (\r\n                <DropdownMenu>\r\n                  <DropdownMenuTrigger asChild>\r\n                    <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\r\n                      <User className=\"h-5 w-5\" />\r\n                    </Button>\r\n                  </DropdownMenuTrigger>\r\n                  <DropdownMenuContent align=\"end\" className=\"w-56\">\r\n                    <DropdownMenuLabel className=\"font-normal\">\r\n                      <div className=\"flex flex-col space-y-1\">\r\n                        <p className=\"text-sm font-medium\">{user?.username}</p>\r\n                        {user?.email && (\r\n                          <p className=\"text-xs text-muted-foreground\">{user.email}</p>\r\n                        )}\r\n                      </div>\r\n                    </DropdownMenuLabel>\r\n                    <DropdownMenuSeparator />\r\n                    <DropdownMenuItem asChild className=\"cursor-pointer\">\r\n                      <Link to=\"/my-orders\" className=\"flex items-center\">\r\n                        <Package className=\"mr-2 h-4 w-4\" />\r\n                        {t(\"myOrders\", \"My Orders\")}\r\n                      </Link>\r\n                    </DropdownMenuItem>\r\n                    <DropdownMenuSeparator />\r\n                    <DropdownMenuItem\r\n                      onClick={handleLogout}\r\n                      className=\"text-red-600 focus:text-red-600 focus:bg-red-50 cursor-pointer\"\r\n                    >\r\n                      <LogOut className=\"mr-2 h-4 w-4\" />\r\n                      {t(\"logout\", \"Logout\")}\r\n                    </DropdownMenuItem>\r\n                  </DropdownMenuContent>\r\n                </DropdownMenu>\r\n              ) : (\r\n                <Link to=\"/login\">\r\n                  <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\r\n                    <User className=\"h-5 w-5\" />\r\n                  </Button>\r\n                </Link>\r\n              )}\r\n            </div>\r\n\r\n            {/* Mobile Menu */}\r\n            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\r\n              <SheetTrigger asChild>\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  className=\"lg:hidden h-8 w-8 sm:h-10 sm:w-10\"\r\n                >\r\n                  <Menu className=\"h-4 w-4 sm:h-5 sm:w-5\" />\r\n                </Button>\r\n              </SheetTrigger>\r\n              <SheetContent side=\"right\" className=\"w-[300px] sm:w-[400px] px-6\">\r\n                <SheetHeader>\r\n                  <SheetTitle>{t(\"menu\")}</SheetTitle>\r\n                </SheetHeader>\r\n\r\n                {/* Mobile Search in Hamburger */}\r\n                <div className=\"mt-6 pb-4 border-b\">\r\n                  <form onSubmit={handleSearchSubmit}>\r\n                    <div className=\"relative\">\r\n                      <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4\" />\r\n                      <Input\r\n                        type=\"search\"\r\n                        placeholder={t(\"searchPlaceholder\")}\r\n                        value={searchTerm}\r\n                        onChange={handleSearchChange}\r\n                        onFocus={handleSearchFocus}\r\n                        className=\"pl-10 h-11\"\r\n                      />\r\n                    </div>\r\n                  </form>\r\n\r\n                  {/* Search Results in Hamburger */}\r\n                  {showResults && searchTerm && (\r\n                    <div className=\"mt-3 max-h-[300px] overflow-y-auto rounded-lg border bg-card\">\r\n                      {searchResults.length > 0 ? (\r\n                        <div className=\"divide-y\">\r\n                          <div className=\"px-3 py-2 bg-muted/50\">\r\n                            <p className=\"text-xs font-medium text-muted-foreground\">\r\n                              {searchResults.length}{\" \"}\r\n                              {searchResults.length === 1\r\n                                ? \"result\"\r\n                                : \"results\"}\r\n                            </p>\r\n                          </div>\r\n                          {searchResults.slice(0, 5).map((product: Product) => (\r\n                            <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                            <Link\r\n                              to={`/products/${product.slug}`}\r\n                              onClick={() => {\r\n                                setMobileMenuOpen(false);\r\n                                clearSearch();\r\n                                setShowResults(false);\r\n                              }}\r\n                              className=\"flex items-center gap-3 p-3 hover:bg-muted/50 transition-colors\"\r\n                            >\r\n                              <img\r\n                                src={\r\n                                  product.images[0] || \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-14 h-14 object-cover rounded flex-shrink-0\"\r\n                              />\r\n                              <div className=\"flex-1 min-w-0\">\r\n                                <h4 className=\"font-medium text-sm line-clamp-1\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-xs text-muted-foreground capitalize\">\r\n                                  {product.category}\r\n                                </p>\r\n                                <p className=\"text-sm font-semibold text-primary mt-1\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </Link>\r\n                            </div>\r\n                          ))}\r\n                          {searchResults.length > 5 && (\r\n                            <div className=\"px-3 py-2 bg-muted/30 text-center\">\r\n                              <button\r\n                                onClick={() => {\r\n                                  navigate(\r\n                                    `/products?search=${encodeURIComponent(\r\n                                      searchTerm\r\n                                    )}`\r\n                                  );\r\n                                  setMobileMenuOpen(false);\r\n                                  clearSearch();\r\n                                  setShowResults(false);\r\n                                }}\r\n                                className=\"text-xs font-medium text-primary hover:underline\"\r\n                              >\r\n                                {t(\r\n                                  \"viewAllResults\",\r\n                                  `View all ${searchResults.length} results`\r\n                                )}\r\n                              </button>\r\n                            </div>\r\n                          )}\r\n                        </div>\r\n                      ) : (\r\n                        <div className=\"p-6 text-center\">\r\n                          <Search className=\"h-8 w-8 text-muted-foreground mx-auto mb-2 opacity-50\" />\r\n                          <p className=\"text-sm text-muted-foreground\">\r\n                            {t(\"noResults\", \"No results found\")}\r\n                          </p>\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n\r\n                <div className=\"flex flex-col space-y-4 mt-6\">\r\n                  {navigation.map((item) => (\r\n                    <Link\r\n                      key={item.name}\r\n                      to={item.href}\r\n                      className=\"text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      {item.name}\r\n                    </Link>\r\n                  ))}\r\n                  <div className=\"border-t pt-4 space-y-4\">\r\n                    <Link\r\n                      to=\"/favorites\"\r\n                      className=\"flex items-center justify-between text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      <div className=\"flex items-center space-x-2\">\r\n                        <Heart className=\"h-5 w-5\" />\r\n                        <span>{t(\"favorites\")}</span>\r\n                      </div>\r\n                      <Badge variant=\"secondary\">{favoriteCount}</Badge>\r\n                    </Link>\r\n                    <Link\r\n                      to=\"/cart\"\r\n                      className=\"flex items-center justify-between w-full text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      <div className=\"flex items-center space-x-2\">\r\n                        <ShoppingCart className=\"h-5 w-5\" />\r\n                        <span>{t(\"cart\")}</span>\r\n                      </div>\r\n                      <div className=\"flex flex-col items-end\">\r\n                        <Badge variant=\"secondary\">{itemCount}</Badge>\r\n                        <span className=\"text-xs text-muted-foreground\">\r\n                          {formatPrice(state.total, constants.site.currency)}\r\n                        </span>\r\n                      </div>\r\n                    </Link>\r\n\r\n                    {/* Auth - Mobile */}\r\n                    {isAuthenticated ? (\r\n                      <div className=\"space-y-3\">\r\n                        <div className=\"flex items-center space-x-3 p-3 bg-muted/50 rounded-lg\">\r\n                          <div className=\"h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                            <User className=\"h-5 w-5 text-primary\" />\r\n                          </div>\r\n                          <div className=\"flex-1 min-w-0\">\r\n                            <p className=\"text-sm font-medium truncate\">{user?.username}</p>\r\n                            {user?.email && (\r\n                              <p className=\"text-xs text-muted-foreground truncate\">{user.email}</p>\r\n                            )}\r\n                          </div>\r\n                        </div>\r\n                        <Link\r\n                          to=\"/my-orders\"\r\n                          className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\r\n                          onClick={() => setMobileMenuOpen(false)}\r\n                        >\r\n                          <Package className=\"h-5 w-5\" />\r\n                          <span>{t(\"myOrders\", \"My Orders\")}</span>\r\n                        </Link>\r\n                        <button\r\n                          onClick={() => {\r\n                            handleLogout();\r\n                            setMobileMenuOpen(false);\r\n                          }}\r\n                          className=\"flex items-center space-x-2 text-lg font-medium text-red-600 hover:text-red-700 transition-colors w-full\"\r\n                        >\r\n                          <LogOut className=\"h-5 w-5\" />\r\n                          <span>{t(\"logout\", \"Logout\")}</span>\r\n                        </button>\r\n                      </div>\r\n                    ) : (\r\n                      <Link\r\n                        to=\"/login\"\r\n                        className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\r\n                        onClick={() => setMobileMenuOpen(false)}\r\n                      >\r\n                        <User className=\"h-5 w-5\" />\r\n                        <span>{t(\"login\", \"Login\")}</span>\r\n                      </Link>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              </SheetContent>\r\n            </Sheet>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {/* Cart Drawer */}\r\n      <CartDrawer showTrigger={false} />\r\n    </header>\r\n  );\r\n}\r\n"
+      "content": "import { useState, useMemo } from \"react\";\r\nimport { useDebouncedValue } from \"@/hooks/use-debounced-value\";\r\nimport { Link, useNavigate } from \"react-router\";\r\nimport { ShoppingCart, Menu, Search, Heart, Package, User, LogOut } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport {\r\n  Sheet,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetContent,\r\n  SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogHeader,\r\n  DialogTitle,\r\n  DialogTrigger,\r\n} from \"@/components/ui/dialog\";\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuLabel,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { CartDrawer } from \"@/modules/cart-drawer\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport type { Product, Category } from \"@/modules/ecommerce-core/types\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  formatPrice,\r\n} from \"@/modules/ecommerce-core\";\r\nimport { useDbList } from \"@/db\";\r\n\r\nexport function HeaderEcommerce() {\r\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);\r\n  const [desktopSearchOpen, setDesktopSearchOpen] = useState(false);\r\n  const [showResults, setShowResults] = useState(false);\r\n  const { itemCount, state } = useCart();\r\n  const { favoriteCount } = useFavorites();\r\n  const { isAuthenticated, user, logout } = useAuth();\r\n  const navigate = useNavigate();\r\n  const { t } = useTranslation(\"header-ecommerce\");\r\n\r\n  const handleLogout = () => {\r\n    logout();\r\n    toast.success(t(\"logoutToastTitle\", \"Goodbye!\"), {\r\n      description: t(\"logoutToastDesc\", \"You have been logged out successfully.\"),\r\n    });\r\n  };\r\n\r\n  const [searchTerm, setSearchTerm] = useState(\"\");\r\n  const debouncedTerm = useDebouncedValue(searchTerm, 300);\r\n  const { data: productCategories = [] } = useDbList<Category>(\"product_categories\");\r\n  const categoryMap = useMemo(() => new Map(productCategories.map(c => [c.id, c])), [productCategories]);\r\n\r\n  const { data: searchResults = [] } = useDbList<Product>(\"products\", {\r\n    where: debouncedTerm ? { name: { $like: `%${debouncedTerm}%` } } : {},\r\n    limit: 20,\r\n    enabled: debouncedTerm.length > 0,\r\n  });\r\n\r\n  const clearSearch = () => { setSearchTerm(\"\"); };\r\n\r\n  const handleSearchSubmit = (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    if (searchTerm.trim()) {\r\n      navigate(`/products?search=${encodeURIComponent(searchTerm)}`);\r\n      setShowResults(false);\r\n      setDesktopSearchOpen(false);\r\n      clearSearch();\r\n    }\r\n  };\r\n\r\n  const handleSearchFocus = () => {\r\n    setShowResults(true);\r\n  };\r\n\r\n  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setSearchTerm(e.target.value);\r\n    setShowResults(true);\r\n  };\r\n\r\n  const navigation = [\r\n    { name: t(\"home\"), href: \"/\" },\r\n    { name: t(\"products\"), href: \"/products\" },\r\n    { name: t(\"about\"), href: \"/about\" },\r\n    { name: t(\"contact\"), href: \"/contact\" },\r\n  ];\r\n\r\n  return (\r\n    <header className=\"sticky top-0 z-50 w-full border-b border-border/20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-3 sm:px-4 lg:px-8\">\r\n        <div className=\"flex h-14 sm:h-16 md:h-20 items-center justify-between gap-2\">\r\n          {/* Logo */}\r\n          <div className=\"flex-shrink-0 min-w-0\">\r\n            <Logo size=\"sm\" className=\"text-base sm:text-xl lg:text-2xl\" />\r\n          </div>\r\n\r\n          {/* Desktop Navigation - Centered */}\r\n          <nav className=\"hidden lg:flex items-center space-x-12 absolute left-1/2 transform -translate-x-1/2\">\r\n            {navigation.map((item) => (\r\n              <Link\r\n                key={item.name}\r\n                to={item.href}\r\n                className=\"text-base font-medium transition-colors hover:text-primary relative group py-2\"\r\n              >\r\n                {item.name}\r\n                <span className=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full\"></span>\r\n              </Link>\r\n            ))}\r\n          </nav>\r\n\r\n          {/* Search & Actions - Right Aligned */}\r\n          <div className=\"flex items-center space-x-1 sm:space-x-2 lg:space-x-4 flex-shrink-0\">\r\n            {/* Desktop Search - Modal */}\r\n            <Dialog\r\n              open={desktopSearchOpen}\r\n              onOpenChange={setDesktopSearchOpen}\r\n            >\r\n              <DialogTrigger asChild>\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  className=\"hidden lg:flex h-10 w-10\"\r\n                >\r\n                  <Search className=\"h-5 w-5\" />\r\n                </Button>\r\n              </DialogTrigger>\r\n              <DialogContent className=\"sm:max-w-2xl\">\r\n                <DialogHeader>\r\n                  <DialogTitle>\r\n                    {t(\"searchProducts\", \"Search Products\")}\r\n                  </DialogTitle>\r\n                </DialogHeader>\r\n                <div className=\"space-y-4\">\r\n                  <form onSubmit={handleSearchSubmit}>\r\n                    <div className=\"relative\">\r\n                      <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-5 w-5\" />\r\n                      <Input\r\n                        type=\"search\"\r\n                        placeholder={t(\r\n                          \"searchPlaceholder\",\r\n                          \"Search for products...\"\r\n                        )}\r\n                        value={searchTerm}\r\n                        onChange={handleSearchChange}\r\n                        className=\"pl-11 h-12 text-base\"\r\n                        autoFocus\r\n                      />\r\n                    </div>\r\n                  </form>\r\n\r\n                  {/* Desktop Search Results */}\r\n                  {searchTerm.trim() && (\r\n                    <div className=\"max-h-[400px] overflow-y-auto rounded-lg border bg-card\">\r\n                      {searchResults.length > 0 ? (\r\n                        <div className=\"divide-y\">\r\n                          <div className=\"px-4 py-3 bg-muted/50\">\r\n                            <p className=\"text-sm font-medium text-muted-foreground\">\r\n                              {searchResults.length}{\" \"}\r\n                              {searchResults.length === 1\r\n                                ? \"result\"\r\n                                : \"results\"}{\" \"}\r\n                              found\r\n                            </p>\r\n                          </div>\r\n                          {searchResults.slice(0, 8).map((product: Product) => (\r\n                            <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                            <Link\r\n                              to={`/products/${product.slug}`}\r\n                              onClick={() => {\r\n                                setDesktopSearchOpen(false);\r\n                                clearSearch();\r\n                              }}\r\n                              className=\"flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors\"\r\n                            >\r\n                              <img\r\n                                src={\r\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-16 h-16 object-cover rounded flex-shrink-0\"\r\n                              />\r\n                              <div className=\"flex-1 min-w-0\">\r\n                                <h4 className=\"font-medium text-base line-clamp-1\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-sm text-muted-foreground capitalize\">\r\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\r\n                                </p>\r\n                                <p className=\"text-base font-semibold text-primary mt-1\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </Link>\r\n                            </div>\r\n                          ))}\r\n                          {searchResults.length > 8 && (\r\n                            <div className=\"px-4 py-3 bg-muted/30 text-center\">\r\n                              <button\r\n                                onClick={() => {\r\n                                  navigate(\r\n                                    `/products?search=${encodeURIComponent(\r\n                                      searchTerm\r\n                                    )}`\r\n                                  );\r\n                                  setDesktopSearchOpen(false);\r\n                                  clearSearch();\r\n                                }}\r\n                                className=\"text-sm font-medium text-primary hover:underline\"\r\n                              >\r\n                                {t(\r\n                                  \"viewAllResults\",\r\n                                  `View all ${searchResults.length} results`\r\n                                )}\r\n                              </button>\r\n                            </div>\r\n                          )}\r\n                        </div>\r\n                      ) : (\r\n                        <div className=\"p-8 text-center\">\r\n                          <Search className=\"h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50\" />\r\n                          <p className=\"text-base text-muted-foreground\">\r\n                            {t(\"noResults\", \"No products found\")}\r\n                          </p>\r\n                          <p className=\"text-sm text-muted-foreground mt-1\">\r\n                            {t(\r\n                              \"tryDifferentKeywords\",\r\n                              \"Try different keywords\"\r\n                            )}\r\n                          </p>\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n              </DialogContent>\r\n            </Dialog>\r\n\r\n            {/* Search - Mobile (Hidden - moved to hamburger menu) */}\r\n            <Dialog open={mobileSearchOpen} onOpenChange={setMobileSearchOpen}>\r\n              <DialogTrigger asChild>\r\n                <Button variant=\"ghost\" size=\"icon\" className=\"hidden\">\r\n                  <Search className=\"h-4 w-4 sm:h-5 sm:w-5\" />\r\n                </Button>\r\n              </DialogTrigger>\r\n              <DialogContent className=\"sm:max-w-md\">\r\n                <DialogHeader>\r\n                  <DialogTitle>{t(\"searchProducts\")}</DialogTitle>\r\n                </DialogHeader>\r\n                <form\r\n                  onSubmit={(e) => {\r\n                    e.preventDefault();\r\n                    if (searchTerm.trim()) {\r\n                      navigate(\r\n                        `/products?search=${encodeURIComponent(searchTerm)}`\r\n                      );\r\n                      setMobileSearchOpen(false);\r\n                      clearSearch();\r\n                    }\r\n                  }}\r\n                  className=\"space-y-4\"\r\n                >\r\n                  <div className=\"relative\">\r\n                    <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4\" />\r\n                    <Input\r\n                      type=\"search\"\r\n                      placeholder={t(\"searchPlaceholder\")}\r\n                      value={searchTerm}\r\n                      onChange={(e) => setSearchTerm(e.target.value)}\r\n                      className=\"pl-10\"\r\n                      autoFocus\r\n                    />\r\n                  </div>\r\n                  <div className=\"flex gap-2\">\r\n                    <Button type=\"submit\" className=\"flex-1\">\r\n                      {t(\"searchButton\", \"Search\")}\r\n                    </Button>\r\n                    <Button\r\n                      type=\"button\"\r\n                      variant=\"outline\"\r\n                      onClick={() => {\r\n                        clearSearch();\r\n                        setMobileSearchOpen(false);\r\n                      }}\r\n                    >\r\n                      {t(\"cancel\", \"Cancel\")}\r\n                    </Button>\r\n                  </div>\r\n                </form>\r\n\r\n                {/* Mobile Search Results */}\r\n                {searchTerm.trim() && (\r\n                  <div className=\"mt-4 max-h-64 overflow-y-auto\">\r\n                    {searchResults.length > 0 ? (\r\n                      <div className=\"space-y-2\">\r\n                        <p className=\"text-sm text-muted-foreground mb-2\">\r\n                          {searchResults.length} result\r\n                          {searchResults.length !== 1 ? \"s\" : \"\"} found\r\n                        </p>\r\n                        {searchResults.slice(0, 5).map((product: Product) => (\r\n                          <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                          <Link\r\n                            to={`/products/${product.slug}`}\r\n                            onClick={() => {\r\n                              setMobileSearchOpen(false);\r\n                              clearSearch();\r\n                            }}\r\n                            className=\"block p-2 rounded hover:bg-muted/50 transition-colors\"\r\n                          >\r\n                            <div className=\"flex items-center gap-3\">\r\n                              <img\r\n                                src={\r\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-10 h-10 object-cover rounded\"\r\n                              />\r\n                              <div className=\"flex-1\">\r\n                                <h4 className=\"font-medium text-sm\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-xs text-muted-foreground\">\r\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\r\n                                </p>\r\n                                <p className=\"text-sm font-medium\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </div>\r\n                          </Link>\r\n                          </div>\r\n                        ))}\r\n                      </div>\r\n                    ) : (\r\n                      <p className=\"text-sm text-muted-foreground\">\r\n                        {t(\"noResults\")}\r\n                      </p>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </DialogContent>\r\n            </Dialog>\r\n\r\n            {/* Wishlist - Desktop Only */}\r\n            <Link to=\"/favorites\" className=\"hidden lg:block\">\r\n              <Button\r\n                variant=\"ghost\"\r\n                size=\"icon\"\r\n                className=\"relative h-10 w-10\"\r\n              >\r\n                <Heart className=\"h-5 w-5\" />\r\n                {favoriteCount > 0 && (\r\n                  <Badge\r\n                    variant=\"destructive\"\r\n                    className=\"absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]\"\r\n                  >\r\n                    {favoriteCount}\r\n                  </Badge>\r\n                )}\r\n              </Button>\r\n            </Link>\r\n\r\n            {/* Cart - Desktop Only (Goes to Cart Page) */}\r\n            <Link to=\"/cart\" className=\"hidden lg:block\">\r\n              <Button\r\n                variant=\"ghost\"\r\n                size=\"icon\"\r\n                className=\"relative h-10 w-10\"\r\n              >\r\n                <ShoppingCart className=\"h-5 w-5\" />\r\n                {itemCount > 0 && (\r\n                  <Badge\r\n                    variant=\"destructive\"\r\n                    className=\"absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]\"\r\n                  >\r\n                    {itemCount}\r\n                  </Badge>\r\n                )}\r\n              </Button>\r\n            </Link>\r\n\r\n            {/* Auth - Desktop Only */}\r\n            <div className=\"hidden lg:flex\">\r\n              {isAuthenticated ? (\r\n                <DropdownMenu>\r\n                  <DropdownMenuTrigger asChild>\r\n                    <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\r\n                      <User className=\"h-5 w-5\" />\r\n                    </Button>\r\n                  </DropdownMenuTrigger>\r\n                  <DropdownMenuContent align=\"end\" className=\"w-56\">\r\n                    <DropdownMenuLabel className=\"font-normal\">\r\n                      <div className=\"flex flex-col space-y-1\">\r\n                        <p className=\"text-sm font-medium\">{user?.username}</p>\r\n                        {user?.email && (\r\n                          <p className=\"text-xs text-muted-foreground\">{user.email}</p>\r\n                        )}\r\n                      </div>\r\n                    </DropdownMenuLabel>\r\n                    <DropdownMenuSeparator />\r\n                    <DropdownMenuItem asChild className=\"cursor-pointer\">\r\n                      <Link to=\"/my-orders\" className=\"flex items-center\">\r\n                        <Package className=\"mr-2 h-4 w-4\" />\r\n                        {t(\"myOrders\", \"My Orders\")}\r\n                      </Link>\r\n                    </DropdownMenuItem>\r\n                    <DropdownMenuSeparator />\r\n                    <DropdownMenuItem\r\n                      onClick={handleLogout}\r\n                      className=\"text-red-600 focus:text-red-600 focus:bg-red-50 cursor-pointer\"\r\n                    >\r\n                      <LogOut className=\"mr-2 h-4 w-4\" />\r\n                      {t(\"logout\", \"Logout\")}\r\n                    </DropdownMenuItem>\r\n                  </DropdownMenuContent>\r\n                </DropdownMenu>\r\n              ) : (\r\n                <Link to=\"/login\">\r\n                  <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\r\n                    <User className=\"h-5 w-5\" />\r\n                  </Button>\r\n                </Link>\r\n              )}\r\n            </div>\r\n\r\n            {/* Mobile Menu */}\r\n            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\r\n              <SheetTrigger asChild>\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  className=\"lg:hidden h-8 w-8 sm:h-10 sm:w-10\"\r\n                >\r\n                  <Menu className=\"h-4 w-4 sm:h-5 sm:w-5\" />\r\n                </Button>\r\n              </SheetTrigger>\r\n              <SheetContent side=\"right\" className=\"w-[300px] sm:w-[400px] px-6\">\r\n                <SheetHeader>\r\n                  <SheetTitle>{t(\"menu\")}</SheetTitle>\r\n                </SheetHeader>\r\n\r\n                {/* Mobile Search in Hamburger */}\r\n                <div className=\"mt-6 pb-4 border-b\">\r\n                  <form onSubmit={handleSearchSubmit}>\r\n                    <div className=\"relative\">\r\n                      <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4\" />\r\n                      <Input\r\n                        type=\"search\"\r\n                        placeholder={t(\"searchPlaceholder\")}\r\n                        value={searchTerm}\r\n                        onChange={handleSearchChange}\r\n                        onFocus={handleSearchFocus}\r\n                        className=\"pl-10 h-11\"\r\n                      />\r\n                    </div>\r\n                  </form>\r\n\r\n                  {/* Search Results in Hamburger */}\r\n                  {showResults && searchTerm && (\r\n                    <div className=\"mt-3 max-h-[300px] overflow-y-auto rounded-lg border bg-card\">\r\n                      {searchResults.length > 0 ? (\r\n                        <div className=\"divide-y\">\r\n                          <div className=\"px-3 py-2 bg-muted/50\">\r\n                            <p className=\"text-xs font-medium text-muted-foreground\">\r\n                              {searchResults.length}{\" \"}\r\n                              {searchResults.length === 1\r\n                                ? \"result\"\r\n                                : \"results\"}\r\n                            </p>\r\n                          </div>\r\n                          {searchResults.slice(0, 5).map((product: Product) => (\r\n                            <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                            <Link\r\n                              to={`/products/${product.slug}`}\r\n                              onClick={() => {\r\n                                setMobileMenuOpen(false);\r\n                                clearSearch();\r\n                                setShowResults(false);\r\n                              }}\r\n                              className=\"flex items-center gap-3 p-3 hover:bg-muted/50 transition-colors\"\r\n                            >\r\n                              <img\r\n                                src={\r\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-14 h-14 object-cover rounded flex-shrink-0\"\r\n                              />\r\n                              <div className=\"flex-1 min-w-0\">\r\n                                <h4 className=\"font-medium text-sm line-clamp-1\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-xs text-muted-foreground capitalize\">\r\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\r\n                                </p>\r\n                                <p className=\"text-sm font-semibold text-primary mt-1\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </Link>\r\n                            </div>\r\n                          ))}\r\n                          {searchResults.length > 5 && (\r\n                            <div className=\"px-3 py-2 bg-muted/30 text-center\">\r\n                              <button\r\n                                onClick={() => {\r\n                                  navigate(\r\n                                    `/products?search=${encodeURIComponent(\r\n                                      searchTerm\r\n                                    )}`\r\n                                  );\r\n                                  setMobileMenuOpen(false);\r\n                                  clearSearch();\r\n                                  setShowResults(false);\r\n                                }}\r\n                                className=\"text-xs font-medium text-primary hover:underline\"\r\n                              >\r\n                                {t(\r\n                                  \"viewAllResults\",\r\n                                  `View all ${searchResults.length} results`\r\n                                )}\r\n                              </button>\r\n                            </div>\r\n                          )}\r\n                        </div>\r\n                      ) : (\r\n                        <div className=\"p-6 text-center\">\r\n                          <Search className=\"h-8 w-8 text-muted-foreground mx-auto mb-2 opacity-50\" />\r\n                          <p className=\"text-sm text-muted-foreground\">\r\n                            {t(\"noResults\", \"No results found\")}\r\n                          </p>\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n\r\n                <div className=\"flex flex-col space-y-4 mt-6\">\r\n                  {navigation.map((item) => (\r\n                    <Link\r\n                      key={item.name}\r\n                      to={item.href}\r\n                      className=\"text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      {item.name}\r\n                    </Link>\r\n                  ))}\r\n                  <div className=\"border-t pt-4 space-y-4\">\r\n                    <Link\r\n                      to=\"/favorites\"\r\n                      className=\"flex items-center justify-between text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      <div className=\"flex items-center space-x-2\">\r\n                        <Heart className=\"h-5 w-5\" />\r\n                        <span>{t(\"favorites\")}</span>\r\n                      </div>\r\n                      <Badge variant=\"secondary\">{favoriteCount}</Badge>\r\n                    </Link>\r\n                    <Link\r\n                      to=\"/cart\"\r\n                      className=\"flex items-center justify-between w-full text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      <div className=\"flex items-center space-x-2\">\r\n                        <ShoppingCart className=\"h-5 w-5\" />\r\n                        <span>{t(\"cart\")}</span>\r\n                      </div>\r\n                      <div className=\"flex flex-col items-end\">\r\n                        <Badge variant=\"secondary\">{itemCount}</Badge>\r\n                        <span className=\"text-xs text-muted-foreground\">\r\n                          {formatPrice(state.total, constants.site.currency)}\r\n                        </span>\r\n                      </div>\r\n                    </Link>\r\n\r\n                    {/* Auth - Mobile */}\r\n                    {isAuthenticated ? (\r\n                      <div className=\"space-y-3\">\r\n                        <div className=\"flex items-center space-x-3 p-3 bg-muted/50 rounded-lg\">\r\n                          <div className=\"h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                            <User className=\"h-5 w-5 text-primary\" />\r\n                          </div>\r\n                          <div className=\"flex-1 min-w-0\">\r\n                            <p className=\"text-sm font-medium truncate\">{user?.username}</p>\r\n                            {user?.email && (\r\n                              <p className=\"text-xs text-muted-foreground truncate\">{user.email}</p>\r\n                            )}\r\n                          </div>\r\n                        </div>\r\n                        <Link\r\n                          to=\"/my-orders\"\r\n                          className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\r\n                          onClick={() => setMobileMenuOpen(false)}\r\n                        >\r\n                          <Package className=\"h-5 w-5\" />\r\n                          <span>{t(\"myOrders\", \"My Orders\")}</span>\r\n                        </Link>\r\n                        <button\r\n                          onClick={() => {\r\n                            handleLogout();\r\n                            setMobileMenuOpen(false);\r\n                          }}\r\n                          className=\"flex items-center space-x-2 text-lg font-medium text-red-600 hover:text-red-700 transition-colors w-full\"\r\n                        >\r\n                          <LogOut className=\"h-5 w-5\" />\r\n                          <span>{t(\"logout\", \"Logout\")}</span>\r\n                        </button>\r\n                      </div>\r\n                    ) : (\r\n                      <Link\r\n                        to=\"/login\"\r\n                        className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\r\n                        onClick={() => setMobileMenuOpen(false)}\r\n                      >\r\n                        <User className=\"h-5 w-5\" />\r\n                        <span>{t(\"login\", \"Login\")}</span>\r\n                      </Link>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              </SheetContent>\r\n            </Sheet>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {/* Cart Drawer */}\r\n      <CartDrawer showTrigger={false} />\r\n    </header>\r\n  );\r\n}\r\n"
     },
     {
       "path": "header-ecommerce/lang/en.json",

package/dist/registry/index.json

@@ -27,7 +27,6 @@
   "cookie-consent",
   "cookies-page",
   "cta-section",
-  "db",
   "ecommerce-core",
   "empty-page",
   "faq-categorized",

package/dist/registry/login-page-split.json

@@ -23,7 +23,7 @@
       "path": "login-page-split/login-page-split.tsx",
       "type": "registry:page",
       "target": "$modules$/login-page-split/login-page-split.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useLocation } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { FormField } from \"@/components/FormField\";\r\nimport { PasswordInput } from \"@/components/PasswordInput\";\r\n\r\ninterface LoginPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function LoginPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: LoginPageSplitProps) {\r\n  const { t } = useTranslation(\"login-page-split\");\r\n  const navigate = useNavigate();\r\n  const location = useLocation();\r\n  const { login } = useAuth();\r\n\r\n  const [username, setUsername] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  // Get redirect URL from location state or default to home\r\n  const from = (location.state as { from?: string })?.from || \"/\";\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await login(username, password);\r\n      toast.success(t(\"loginSuccess\", \"Login successful!\"));\r\n      navigate(from, { replace: true });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"loginError\", \"Login failed. Please check your credentials.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n          <div>\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Login\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              {t(\"subtitle\", \"Enter your details below to login\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"username\", \"Username\")} htmlFor=\"username-split\">\r\n                <Input\r\n                  required\r\n                  id=\"username-split\"\r\n                  type=\"text\"\r\n                  autoComplete=\"username\"\r\n                  placeholder={t(\"usernamePlaceholder\", \"Enter your username\")}\r\n                  value={username}\r\n                  onChange={(e) => setUsername(e.target.value)}\r\n                  disabled={isLoading}\r\n                />\r\n              </FormField>\r\n            </div>\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"password\", \"Password\")} htmlFor=\"password-split\">\r\n                <PasswordInput\r\n                  id=\"password-split\"\r\n                  name=\"password\"\r\n                  value={password}\r\n                  disabled={isLoading}\r\n                  onChange={(e) => setPassword(e.target.value)}\r\n                  placeholder=\"••••••••••\"\r\n                  required\r\n                  className=\"mt-1\"\r\n                  autoComplete=\"current-password\"\r\n                   />\r\n              </FormField>\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"loggingIn\", \"Logging in...\")}\r\n                </>\r\n              ) : (\r\n                t(\"login\", \"Login\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <div className=\"flex flex-col gap-4 text-sm\">\r\n            <p>\r\n              {t(\"noAccount\", \"Don't have an account?\")}{\" \"}\r\n              <Link to=\"/register\" className=\"underline\">\r\n                {t(\"signUp\", \"Sign up\")}\r\n              </Link>\r\n            </p>\r\n            <Link to=\"/forgot-password\" className=\"underline\">\r\n              {t(\"forgotPassword\", \"Forgot your password?\")}\r\n            </Link>\r\n          </div>\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Login background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default LoginPageSplit;\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useLocation } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\n\r\ninterface LoginPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function LoginPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: LoginPageSplitProps) {\r\n  const { t } = useTranslation(\"login-page-split\");\r\n  const navigate = useNavigate();\r\n  const location = useLocation();\r\n  const { login } = useAuth();\r\n\r\n  const [username, setUsername] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  // Get redirect URL from location state or default to home\r\n  const from = (location.state as { from?: string })?.from || \"/\";\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await login(username, password);\r\n      toast.success(t(\"loginSuccess\", \"Login successful!\"));\r\n      navigate(from, { replace: true });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"loginError\", \"Login failed. Please check your credentials.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n          <div>\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Login\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              {t(\"subtitle\", \"Enter your details below to login\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"username-split\">{t(\"username\", \"Username\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"username-split\"\r\n                type=\"text\"\r\n                autoComplete=\"username\"\r\n                placeholder={t(\"usernamePlaceholder\", \"Enter your username\")}\r\n                value={username}\r\n                onChange={(e) => setUsername(e.target.value)}\r\n                disabled={isLoading}\r\n              />\r\n            </div>\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"password-split\">{t(\"password\", \"Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"password-split\"\r\n                type=\"password\"\r\n                placeholder=\"••••••••••\"\r\n                autoComplete=\"current-password\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n              />\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"loggingIn\", \"Logging in...\")}\r\n                </>\r\n              ) : (\r\n                t(\"login\", \"Login\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <div className=\"flex flex-col gap-4 text-sm\">\r\n            <p>\r\n              {t(\"noAccount\", \"Don't have an account?\")}{\" \"}\r\n              <Link to=\"/register\" className=\"underline\">\r\n                {t(\"signUp\", \"Sign up\")}\r\n              </Link>\r\n            </p>\r\n            <Link to=\"/forgot-password\" className=\"underline\">\r\n              {t(\"forgotPassword\", \"Forgot your password?\")}\r\n            </Link>\r\n          </div>\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Login background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default LoginPageSplit;\r\n"
     },
     {
       "path": "login-page-split/lang/en.json",

package/dist/registry/login-page.json

@@ -23,7 +23,7 @@
       "path": "login-page/login-page.tsx",
       "type": "registry:page",
       "target": "$modules$/login-page/login-page.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useLocation } from \"react-router\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { toast } from \"sonner\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { FormField } from \"@/components/FormField\";\r\nimport { PasswordInput } from \"@/components/PasswordInput\";\r\n\r\ninterface LoginPageProps {\r\n  className?: string;\r\n}\r\n\r\nexport function LoginPage({ className }: LoginPageProps) {\r\n  const { t } = useTranslation(\"login-page\");\r\n  usePageTitle({ title: t(\"title\", \"Sign In\") });\r\n  const navigate = useNavigate();\r\n  const location = useLocation();\r\n  const { login } = useAuth();\r\n\r\n  const [username, setUsername] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  const from = (location.state as { from?: string })?.from || \"/\";\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await login(username, password);\r\n      toast.success(t(\"loginSuccess\", \"Login successful!\"));\r\n      navigate(from, { replace: true });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"loginError\", \"Login failed. Please check your credentials.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <section\r\n      className={cn(\"flex min-h-screen bg-muted/30 px-4 py-16 md:py-32\", className)}\r\n    >\r\n      <form\r\n        onSubmit={handleSubmit}\r\n        className=\"bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-xl border shadow-md\"\r\n      >\r\n        <div className=\"bg-card -m-px rounded-xl border p-8 pb-6\">\r\n          <div className=\"text-center\">\r\n            <Link to=\"/\" aria-label=\"go home\" className=\"mx-auto block w-fit\">\r\n              <Logo size=\"sm\" />\r\n            </Link>\r\n            <h1 className=\"mb-1 mt-4 text-xl font-semibold\">\r\n              {t(\"title\", \"Sign In\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              {t(\"subtitle\", \"Welcome back! Sign in to continue\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"mt-4 p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"mt-6 space-y-6\">\r\n            <FormField label={t(\"username\", \"Username\")} htmlFor=\"username\">\r\n              <Input\r\n                type=\"text\"\r\n                required\r\n                name=\"username\"\r\n                id=\"username\"\r\n                autoComplete=\"username\"\r\n                value={username}\r\n                onChange={(e) => setUsername(e.target.value)}\r\n                placeholder={t(\"usernamePlaceholder\", \"Enter your username\")}\r\n                disabled={isLoading}\r\n              />\r\n            </FormField>\r\n            <FormField\r\n              label={t(\"password\", \"Password\")}\r\n              htmlFor=\"password\"\r\n              labelAction={\r\n                <Button asChild variant=\"link\" size=\"sm\" className=\"h-auto p-0\">\r\n                  <Link to=\"/forgot-password\" className=\"text-xs\">\r\n                    {t(\"forgotPassword\", \"Forgot password?\")}\r\n                  </Link>\r\n                </Button>\r\n              }\r\n            >\r\n              <PasswordInput\r\n                id=\"password\"\r\n                name=\"password\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                placeholder=\"••••••••\"\r\n                disabled={isLoading}\r\n                required\r\n              />\r\n            </FormField>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"signingIn\", \"Signing in...\")}\r\n                </>\r\n              ) : (\r\n                t(\"signIn\", \"Sign In\")\r\n              )}\r\n            </Button>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"p-3\">\r\n          <p className=\"text-center text-sm text-muted-foreground\">\r\n            {t(\"noAccount\", \"Don't have an account?\")}\r\n            <Button asChild variant=\"link\" className=\"px-2\">\r\n              <Link to=\"/register\">{t(\"createAccount\", \"Create account\")}</Link>\r\n            </Button>\r\n          </p>\r\n        </div>\r\n      </form>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default LoginPage;\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useLocation } from \"react-router\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { toast } from \"sonner\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\n\r\ninterface LoginPageProps {\r\n  className?: string;\r\n}\r\n\r\nexport function LoginPage({ className }: LoginPageProps) {\r\n  const { t } = useTranslation(\"login-page\");\r\n  usePageTitle({ title: t(\"title\", \"Sign In\") });\r\n  const navigate = useNavigate();\r\n  const location = useLocation();\r\n  const { login } = useAuth();\r\n\r\n  const [username, setUsername] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  const from = (location.state as { from?: string })?.from || \"/\";\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await login(username, password);\r\n      toast.success(t(\"loginSuccess\", \"Login successful!\"));\r\n      navigate(from, { replace: true });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"loginError\", \"Login failed. Please check your credentials.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <section\r\n      className={cn(\"flex min-h-screen bg-muted/30 px-4 py-16 md:py-32\", className)}\r\n    >\r\n      <form\r\n        onSubmit={handleSubmit}\r\n        className=\"bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-xl border shadow-md\"\r\n      >\r\n        <div className=\"bg-card -m-px rounded-xl border p-8 pb-6\">\r\n          <div className=\"text-center\">\r\n            <div className=\"mx-auto block w-fit\">\r\n              <Logo size=\"sm\" />\r\n            </div>\r\n            <h1 className=\"mb-1 mt-4 text-xl font-semibold\">\r\n              {t(\"title\", \"Sign In\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              {t(\"subtitle\", \"Welcome back! Sign in to continue\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"mt-4 p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"mt-6 space-y-6\">\r\n            <div className=\"space-y-2\">\r\n              <Label htmlFor=\"username\" className=\"block text-sm\">\r\n                {t(\"username\", \"Username\")}\r\n              </Label>\r\n              <Input\r\n                type=\"text\"\r\n                required\r\n                name=\"username\"\r\n                id=\"username\"\r\n                autoComplete=\"username\"\r\n                value={username}\r\n                onChange={(e) => setUsername(e.target.value)}\r\n                placeholder={t(\"usernamePlaceholder\", \"Enter your username\")}\r\n                disabled={isLoading}\r\n              />\r\n            </div>\r\n\r\n            <div className=\"space-y-2\">\r\n              <div className=\"flex items-center justify-between\">\r\n                <Label htmlFor=\"password\" className=\"text-sm\">\r\n                  {t(\"password\", \"Password\")}\r\n                </Label>\r\n                <Button asChild variant=\"link\" size=\"sm\" className=\"h-auto p-0\">\r\n                  <Link to=\"/forgot-password\" className=\"text-xs\">\r\n                    {t(\"forgotPassword\", \"Forgot password?\")}\r\n                  </Link>\r\n                </Button>\r\n              </div>\r\n              <Input\r\n                type=\"password\"\r\n                required\r\n                name=\"password\"\r\n                id=\"password\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                placeholder=\"••••••••\"\r\n                disabled={isLoading}\r\n              />\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"signingIn\", \"Signing in...\")}\r\n                </>\r\n              ) : (\r\n                t(\"signIn\", \"Sign In\")\r\n              )}\r\n            </Button>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"p-3\">\r\n          <p className=\"text-center text-sm text-muted-foreground\">\r\n            {t(\"noAccount\", \"Don't have an account?\")}\r\n            <Button asChild variant=\"link\" className=\"px-2\">\r\n              <Link to=\"/register\">{t(\"createAccount\", \"Create account\")}</Link>\r\n            </Button>\r\n          </p>\r\n        </div>\r\n      </form>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default LoginPage;\r\n"
     },
     {
       "path": "login-page/lang/en.json",