@promakeai/cli 0.4.7 → 0.4.9

package/dist/registry/products-page.json

@@ -12,7 +12,7 @@
     "path": "/products",
     "componentName": "ProductsPage"
   },
-  "usage": "import ProductsPage from '@/modules/products-page';\n\n<Route path=\"/products\" element={<ProductsPage />} />\n\n• Installed at: src/modules/products-page/\n• Add link: <Link to=\"/products\">Browse Products</Link>\n• Supports filters, sorting, grid/list view, pagination\n• Uses useDbProducts hook for data fetching",
+  "usage": "import ProductsPage from '@/modules/products-page';\n\n<Route path=\"/products\" element={<ProductsPage />} />\n\n• Installed at: src/modules/products-page/\n• Add link: <Link to=\"/products\">Browse Products</Link>\n• Supports filters, sorting, grid/list view, pagination\n• Uses useDbList from @/db for data fetching",
   "files": [
     {
       "path": "products-page/index.ts",
@@ -24,7 +24,7 @@
       "path": "products-page/products-page.tsx",
       "type": "registry:page",
       "target": "$modules$/products-page/products-page.tsx",
-      "content": "import { useState, useRef, useCallback, useMemo } from \"react\";\r\nimport { useSearchParams } from \"react-router\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Filter, Grid, List } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { FadeIn } from \"@/modules/animations\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\";\r\nimport {\r\n  Sheet,\r\n  SheetContent,\r\n  SheetDescription,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport { Checkbox } from \"@/components/ui/checkbox\";\r\nimport { ProductCard } from \"@/modules/product-card/product-card\";\r\nimport { useDbProducts, useDbCategories } from \"@/modules/ecommerce-core\";\r\nimport type { Product, Category } from \"@/modules/ecommerce-core/types\";\r\n\r\ninterface FilterSidebarProps {\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  t: any;\r\n  categories: Category[];\r\n  selectedCategories: string[];\r\n  handleCategoryChange: (category: string, checked: boolean) => void;\r\n  selectedFeatures: string[];\r\n  handleFeatureChange: (feature: string, checked: boolean) => void;\r\n  minPriceRef: React.RefObject<HTMLInputElement | null>;\r\n  maxPriceRef: React.RefObject<HTMLInputElement | null>;\r\n  searchParams: URLSearchParams;\r\n  handlePriceFilter: () => void;\r\n}\r\n\r\nfunction FilterSidebar({\r\n  t,\r\n  categories,\r\n  selectedCategories,\r\n  handleCategoryChange,\r\n  selectedFeatures,\r\n  handleFeatureChange,\r\n  minPriceRef,\r\n  maxPriceRef,\r\n  searchParams,\r\n  handlePriceFilter,\r\n}: FilterSidebarProps) {\r\n  return (\r\n    <div className=\"space-y-6\">\r\n      <div>\r\n        <h3 className=\"font-semibold mb-4 text-base\">\r\n          {t(\"categories\", \"Categories\")}\r\n        </h3>\r\n        <div className=\"space-y-3\">\r\n          {categories.map((category) => (\r\n            <div\r\n              key={category.id}\r\n              className=\"flex items-center space-x-3 p-2 rounded-lg hover:bg-muted/50 transition-colors\"\r\n              data-db-table=\"product_categories\"\r\n              data-db-id={category.id}\r\n            >\r\n              <Checkbox\r\n                id={`category-${category.id}`}\r\n                checked={selectedCategories.includes(category.slug)}\r\n                onCheckedChange={(checked) =>\r\n                  handleCategoryChange(category.slug, checked as boolean)\r\n                }\r\n                className=\"data-[state=checked]:bg-primary data-[state=checked]:border-primary\"\r\n              />\r\n              <label\r\n                htmlFor={`category-${category.id}`}\r\n                className=\"text-sm font-medium leading-none cursor-pointer flex-1\"\r\n              >\r\n                {category.name}\r\n              </label>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n\r\n      <div>\r\n        <h3 className=\"font-semibold mb-4 text-base\">\r\n          {t(\"priceRange\", \"Price Range\")}\r\n        </h3>\r\n        <div className=\"space-y-3 p-3 bg-muted/30 rounded-lg\">\r\n          <div className=\"grid grid-cols-2 gap-3\">\r\n            <input\r\n              ref={minPriceRef}\r\n              type=\"number\"\r\n              placeholder={t(\"minPrice\", \"Min\")}\r\n              defaultValue={searchParams.get(\"minPrice\") || \"\"}\r\n              onKeyDown={(e) => e.key === \"Enter\" && handlePriceFilter()}\r\n              className=\"w-full px-3 py-2 border border-input rounded-lg text-sm bg-background\"\r\n            />\r\n            <input\r\n              ref={maxPriceRef}\r\n              type=\"number\"\r\n              placeholder={t(\"maxPrice\", \"Max\")}\r\n              defaultValue={searchParams.get(\"maxPrice\") || \"\"}\r\n              onKeyDown={(e) => e.key === \"Enter\" && handlePriceFilter()}\r\n              className=\"w-full px-3 py-2 border border-input rounded-lg text-sm bg-background\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div>\r\n        <h3 className=\"font-semibold mb-4 text-base\">\r\n          {t(\"features\", \"Features\")}\r\n        </h3>\r\n        <div className=\"space-y-3\">\r\n          {[\r\n            { key: \"on_sale\", label: t(\"onSale\", \"On Sale\") },\r\n            { key: \"is_new\", label: t(\"newArrivals\", \"New Arrivals\") },\r\n            { key: \"featured\", label: t(\"featuredLabel\", \"Featured\") },\r\n            { key: \"in_stock\", label: t(\"inStock\", \"In Stock\") },\r\n          ].map((feature) => (\r\n            <div\r\n              key={feature.key}\r\n              className=\"flex items-center space-x-3 p-2 rounded-lg hover:bg-muted/50 transition-colors\"\r\n            >\r\n              <Checkbox\r\n                id={feature.key}\r\n                checked={selectedFeatures.includes(feature.key)}\r\n                onCheckedChange={(checked) =>\r\n                  handleFeatureChange(feature.key, checked as boolean)\r\n                }\r\n                className=\"data-[state=checked]:bg-primary data-[state=checked]:border-primary\"\r\n              />\r\n              <label\r\n                htmlFor={feature.key}\r\n                className=\"text-sm font-medium leading-none cursor-pointer flex-1\"\r\n              >\r\n                {feature.label}\r\n              </label>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function ProductsPage() {\r\n  const { t } = useTranslation(\"products-page\");\r\n  usePageTitle({ title: t(\"pageTitle\", \"Products\") });\r\n  const { products, loading: productsLoading } = useDbProducts();\r\n  const { categories, loading: categoriesLoading } = useDbCategories();\r\n  const loading = productsLoading || categoriesLoading;\r\n\r\n  const [searchParams, setSearchParams] = useSearchParams();\r\n  const [viewMode, setViewMode] = useState<\"grid\" | \"list\">(\"grid\");\r\n  const [sortBy, setSortBy] = useState(\"featured\");\r\n  const [selectedCategories, setSelectedCategories] = useState<string[]>(() => {\r\n    const categorySlug = searchParams.get(\"category\");\r\n    return categorySlug ? [categorySlug] : [];\r\n  });\r\n  const [selectedFeatures, setSelectedFeatures] = useState<string[]>([]);\r\n  const searchQuery = searchParams.get(\"search\") || \"\";\r\n  const minPriceRef = useRef<HTMLInputElement>(null);\r\n  const maxPriceRef = useRef<HTMLInputElement>(null);\r\n\r\n  const filteredProducts = useMemo(() => {\r\n    const minPrice = parseFloat(searchParams.get(\"minPrice\") || \"0\") || 0;\r\n    const maxPrice =\r\n      parseFloat(searchParams.get(\"maxPrice\") || \"999999\") || 999999;\r\n\r\n    let filtered = products.filter((product) => {\r\n      const currentPrice =\r\n        product.on_sale && product.sale_price\r\n          ? product.sale_price\r\n          : product.price;\r\n      return currentPrice >= minPrice && currentPrice <= maxPrice;\r\n    });\r\n\r\n    if (selectedCategories.length > 0) {\r\n      filtered = filtered.filter((product) => {\r\n        return selectedCategories.some((selectedCategory) => {\r\n          if (product.category === selectedCategory) return true;\r\n          return product.categories?.some(\r\n            (cat) => cat.slug === selectedCategory\r\n          );\r\n        });\r\n      });\r\n    }\r\n\r\n    if (selectedFeatures.length > 0) {\r\n      filtered = filtered.filter((product) => {\r\n        return selectedFeatures.every((feature) => {\r\n          switch (feature) {\r\n            case \"on_sale\":\r\n              return product.on_sale;\r\n            case \"is_new\":\r\n              return product.is_new;\r\n            case \"featured\":\r\n              return product.featured;\r\n            case \"in_stock\":\r\n              return product.stock > 0;\r\n            default:\r\n              return true;\r\n          }\r\n        });\r\n      });\r\n    }\r\n\r\n    // Apply sorting\r\n    return [...filtered].sort((a, b) => {\r\n      switch (sortBy) {\r\n        case \"price-low\":\r\n          return (\r\n            (a.on_sale ? a.sale_price || a.price : a.price) -\r\n            (b.on_sale ? b.sale_price || b.price : b.price)\r\n          );\r\n        case \"price-high\":\r\n          return (\r\n            (b.on_sale ? b.sale_price || b.price : b.price) -\r\n            (a.on_sale ? a.sale_price || a.price : a.price)\r\n          );\r\n        case \"newest\":\r\n          return (\r\n            new Date(b.created_at || 0).getTime() -\r\n            new Date(a.created_at || 0).getTime()\r\n          );\r\n        case \"featured\":\r\n        default:\r\n          return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);\r\n      }\r\n    });\r\n  }, [products, searchParams, selectedFeatures, selectedCategories, sortBy]);\r\n\r\n  const handlePriceFilter = useCallback(() => {\r\n    const minPrice = minPriceRef.current?.value || \"\";\r\n    const maxPrice = maxPriceRef.current?.value || \"\";\r\n    const params = new URLSearchParams(searchParams);\r\n    if (minPrice) params.set(\"minPrice\", minPrice);\r\n    else params.delete(\"minPrice\");\r\n    if (maxPrice) params.set(\"maxPrice\", maxPrice);\r\n    else params.delete(\"maxPrice\");\r\n    setSearchParams(params);\r\n  }, [searchParams, setSearchParams]);\r\n\r\n  const handleCategoryChange = useCallback(\r\n    (category: string, checked: boolean) => {\r\n      if (checked) {\r\n        setSelectedCategories((prev) => [...prev, category]);\r\n      } else {\r\n        setSelectedCategories((prev) => prev.filter((c) => c !== category));\r\n      }\r\n    },\r\n    []\r\n  );\r\n\r\n  const handleFeatureChange = useCallback(\r\n    (feature: string, checked: boolean) => {\r\n      if (checked) {\r\n        setSelectedFeatures((prev) => [...prev, feature]);\r\n      } else {\r\n        setSelectedFeatures((prev) => prev.filter((f) => f !== feature));\r\n      }\r\n    },\r\n    []\r\n  );\r\n\r\n  const sortOptions = [\r\n    { value: \"featured\", label: t(\"featured\", \"Featured\") },\r\n    { value: \"price-low\", label: t(\"sortPriceLow\", \"Price: Low to High\") },\r\n    { value: \"price-high\", label: t(\"sortPriceHigh\", \"Price: High to Low\") },\r\n    { value: \"newest\", label: t(\"sortNewest\", \"Newest\") },\r\n  ];\r\n\r\n  const filterSidebarProps: FilterSidebarProps = {\r\n    t,\r\n    categories,\r\n    selectedCategories,\r\n    handleCategoryChange,\r\n    selectedFeatures,\r\n    handleFeatureChange,\r\n    minPriceRef,\r\n    maxPriceRef,\r\n    searchParams,\r\n    handlePriceFilter,\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8\">\r\n        <FadeIn className=\"mb-8\">\r\n          <div className=\"flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6\">\r\n            <div className=\"space-y-1\">\r\n              <h1 className=\"text-2xl lg:text-3xl font-bold\">\r\n                {searchQuery\r\n                  ? t(\"searchResultsFor\", `Search Results for \"${searchQuery}\"`)\r\n                  : t(\"allProducts\", \"All Products\")}\r\n              </h1>\r\n              <p className=\"text-sm lg:text-base text-muted-foreground\">\r\n                {t(\"showing\", \"Showing\")} {filteredProducts.length}{\" \"}\r\n                {t(\"of\", \"of\")} {products.length} {t(\"products\", \"products\")}\r\n              </p>\r\n            </div>\r\n            {searchQuery && (\r\n              <Button\r\n                variant=\"outline\"\r\n                size=\"sm\"\r\n                onClick={() => setSearchParams({})}\r\n                className=\"w-fit\"\r\n              >\r\n                {t(\"clearSearch\", \"Clear Search\")}\r\n              </Button>\r\n            )}\r\n          </div>\r\n\r\n          <div className=\"flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between\">\r\n            <Sheet>\r\n              <SheetTrigger asChild>\r\n                <Button\r\n                  variant=\"outline\"\r\n                  className=\"lg:hidden w-full sm:w-auto\"\r\n                >\r\n                  <Filter className=\"h-4 w-4 mr-2\" />\r\n                  {t(\"filters\", \"Filters\")}\r\n                </Button>\r\n              </SheetTrigger>\r\n              <SheetContent side=\"left\" className=\"w-[300px]\">\r\n                <SheetHeader>\r\n                  <SheetTitle>{t(\"filters\", \"Filters\")}</SheetTitle>\r\n                  <SheetDescription>\r\n                    {t(\"refineSearch\", \"Refine your product search\")}\r\n                  </SheetDescription>\r\n                </SheetHeader>\r\n                <div className=\"mt-6\">\r\n                  <FilterSidebar {...filterSidebarProps} />\r\n                </div>\r\n              </SheetContent>\r\n            </Sheet>\r\n\r\n            <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-3\">\r\n              <Select value={sortBy} onValueChange={setSortBy}>\r\n                <SelectTrigger className=\"w-full sm:w-[160px]\">\r\n                  <SelectValue placeholder={t(\"sortBy\", \"Sort by\")} />\r\n                </SelectTrigger>\r\n                <SelectContent>\r\n                  {sortOptions.map((option) => (\r\n                    <SelectItem key={option.value} value={option.value}>\r\n                      {option.label}\r\n                    </SelectItem>\r\n                  ))}\r\n                </SelectContent>\r\n              </Select>\r\n\r\n              <div className=\"flex border rounded-lg p-1 w-full sm:w-auto\">\r\n                <Button\r\n                  variant={viewMode === \"grid\" ? \"default\" : \"ghost\"}\r\n                  size=\"sm\"\r\n                  onClick={() => setViewMode(\"grid\")}\r\n                  className=\"flex-1 sm:flex-none\"\r\n                >\r\n                  <Grid className=\"h-4 w-4\" />\r\n                </Button>\r\n                <Button\r\n                  variant={viewMode === \"list\" ? \"default\" : \"ghost\"}\r\n                  size=\"sm\"\r\n                  onClick={() => setViewMode(\"list\")}\r\n                  className=\"flex-1 sm:flex-none\"\r\n                >\r\n                  <List className=\"h-4 w-4\" />\r\n                </Button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </FadeIn>\r\n\r\n        <div className=\"flex gap-8\">\r\n          <aside className=\"hidden lg:block w-64 flex-shrink-0\">\r\n            <div className=\"sticky top-24\">\r\n              <FilterSidebar {...filterSidebarProps} />\r\n            </div>\r\n          </aside>\r\n\r\n          <div className=\"flex-1\">\r\n            {loading ? (\r\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                {[...Array(6)].map((_, i) => (\r\n                  <div\r\n                    key={i}\r\n                    className=\"animate-pulse bg-card rounded-lg shadow-md overflow-hidden\"\r\n                  >\r\n                    <div className=\"aspect-square bg-muted mb-4\"></div>\r\n                    <div className=\"p-4\">\r\n                      <div className=\"h-4 bg-muted rounded w-3/4 mb-2\"></div>\r\n                      <div className=\"h-3 bg-muted rounded w-1/2 mb-3\"></div>\r\n                      <div className=\"h-4 bg-muted rounded w-1/3\"></div>\r\n                    </div>\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            ) : viewMode === \"grid\" ? (\r\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                {filteredProducts.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=\"grid\"\r\n                    />\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            ) : (\r\n              <div className=\"space-y-6\">\r\n                {filteredProducts.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=\"list\"\r\n                    />\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            )}\r\n\r\n            {!loading && filteredProducts.length === 0 && (\r\n              <div className=\"text-center py-12\">\r\n                <p className=\"text-muted-foreground\">\r\n                  {t(\r\n                    \"noProductsFound\",\r\n                    \"No products found matching your criteria.\"\r\n                  )}\r\n                </p>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ProductsPage;\r\n"
+      "content": "import { useState, useRef, useCallback, useMemo } from \"react\";\r\nimport { useSearchParams } from \"react-router\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Filter, Grid, List } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { FadeIn } from \"@/modules/animations\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\";\r\nimport {\r\n  Sheet,\r\n  SheetContent,\r\n  SheetDescription,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport { Checkbox } from \"@/components/ui/checkbox\";\r\nimport { ProductCard } from \"@/modules/product-card/product-card\";\r\nimport { useDbList } from \"@/db\";\r\nimport type { Product, Category } from \"@/modules/ecommerce-core/types\";\r\n\r\ninterface FilterSidebarProps {\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  t: any;\r\n  categories: Category[];\r\n  selectedCategories: string[];\r\n  handleCategoryChange: (category: string, checked: boolean) => void;\r\n  selectedFeatures: string[];\r\n  handleFeatureChange: (feature: string, checked: boolean) => void;\r\n  minPriceRef: React.RefObject<HTMLInputElement | null>;\r\n  maxPriceRef: React.RefObject<HTMLInputElement | null>;\r\n  searchParams: URLSearchParams;\r\n  handlePriceFilter: () => void;\r\n}\r\n\r\nfunction FilterSidebar({\r\n  t,\r\n  categories,\r\n  selectedCategories,\r\n  handleCategoryChange,\r\n  selectedFeatures,\r\n  handleFeatureChange,\r\n  minPriceRef,\r\n  maxPriceRef,\r\n  searchParams,\r\n  handlePriceFilter,\r\n}: FilterSidebarProps) {\r\n  return (\r\n    <div className=\"space-y-6\">\r\n      <div>\r\n        <h3 className=\"font-semibold mb-4 text-base\">\r\n          {t(\"categories\", \"Categories\")}\r\n        </h3>\r\n        <div className=\"space-y-3\">\r\n          {categories.map((category) => (\r\n            <div\r\n              key={category.id}\r\n              className=\"flex items-center space-x-3 p-2 rounded-lg hover:bg-muted/50 transition-colors\"\r\n              data-db-table=\"product_categories\"\r\n              data-db-id={category.id}\r\n            >\r\n              <Checkbox\r\n                id={`category-${category.id}`}\r\n                checked={selectedCategories.includes(category.slug)}\r\n                onCheckedChange={(checked) =>\r\n                  handleCategoryChange(category.slug, checked as boolean)\r\n                }\r\n                className=\"data-[state=checked]:bg-primary data-[state=checked]:border-primary\"\r\n              />\r\n              <label\r\n                htmlFor={`category-${category.id}`}\r\n                className=\"text-sm font-medium leading-none cursor-pointer flex-1\"\r\n              >\r\n                {category.name}\r\n              </label>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n\r\n      <div>\r\n        <h3 className=\"font-semibold mb-4 text-base\">\r\n          {t(\"priceRange\", \"Price Range\")}\r\n        </h3>\r\n        <div className=\"space-y-3 p-3 bg-muted/30 rounded-lg\">\r\n          <div className=\"grid grid-cols-2 gap-3\">\r\n            <input\r\n              ref={minPriceRef}\r\n              type=\"number\"\r\n              placeholder={t(\"minPrice\", \"Min\")}\r\n              defaultValue={searchParams.get(\"minPrice\") || \"\"}\r\n              onKeyDown={(e) => e.key === \"Enter\" && handlePriceFilter()}\r\n              className=\"w-full px-3 py-2 border border-input rounded-lg text-sm bg-background\"\r\n            />\r\n            <input\r\n              ref={maxPriceRef}\r\n              type=\"number\"\r\n              placeholder={t(\"maxPrice\", \"Max\")}\r\n              defaultValue={searchParams.get(\"maxPrice\") || \"\"}\r\n              onKeyDown={(e) => e.key === \"Enter\" && handlePriceFilter()}\r\n              className=\"w-full px-3 py-2 border border-input rounded-lg text-sm bg-background\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div>\r\n        <h3 className=\"font-semibold mb-4 text-base\">\r\n          {t(\"features\", \"Features\")}\r\n        </h3>\r\n        <div className=\"space-y-3\">\r\n          {[\r\n            { key: \"on_sale\", label: t(\"onSale\", \"On Sale\") },\r\n            { key: \"is_new\", label: t(\"newArrivals\", \"New Arrivals\") },\r\n            { key: \"featured\", label: t(\"featuredLabel\", \"Featured\") },\r\n            { key: \"in_stock\", label: t(\"inStock\", \"In Stock\") },\r\n          ].map((feature) => (\r\n            <div\r\n              key={feature.key}\r\n              className=\"flex items-center space-x-3 p-2 rounded-lg hover:bg-muted/50 transition-colors\"\r\n            >\r\n              <Checkbox\r\n                id={feature.key}\r\n                checked={selectedFeatures.includes(feature.key)}\r\n                onCheckedChange={(checked) =>\r\n                  handleFeatureChange(feature.key, checked as boolean)\r\n                }\r\n                className=\"data-[state=checked]:bg-primary data-[state=checked]:border-primary\"\r\n              />\r\n              <label\r\n                htmlFor={feature.key}\r\n                className=\"text-sm font-medium leading-none cursor-pointer flex-1\"\r\n              >\r\n                {feature.label}\r\n              </label>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function ProductsPage() {\r\n  const { t } = useTranslation(\"products-page\");\r\n  usePageTitle({ title: t(\"pageTitle\", \"Products\") });\r\n  const { data: products = [], isLoading: productsLoading } = useDbList<Product>(\"products\", {\r\n    where: { published: 1 },\r\n  });\r\n  const { data: categories = [], isLoading: categoriesLoading } = useDbList<Category>(\"product_categories\");\r\n  const loading = productsLoading || categoriesLoading;\r\n\r\n  const [searchParams, setSearchParams] = useSearchParams();\r\n  const [viewMode, setViewMode] = useState<\"grid\" | \"list\">(\"grid\");\r\n  const [sortBy, setSortBy] = useState(\"featured\");\r\n  const [selectedCategories, setSelectedCategories] = useState<string[]>(() => {\r\n    const categorySlug = searchParams.get(\"category\");\r\n    return categorySlug ? [categorySlug] : [];\r\n  });\r\n  const [selectedFeatures, setSelectedFeatures] = useState<string[]>([]);\r\n  const searchQuery = searchParams.get(\"search\") || \"\";\r\n  const minPriceRef = useRef<HTMLInputElement>(null);\r\n  const maxPriceRef = useRef<HTMLInputElement>(null);\r\n\r\n  const selectedCategoryIds = useMemo(() => {\r\n    if (selectedCategories.length === 0) return new Set<number>();\r\n    return new Set(\r\n      categories.filter(c => selectedCategories.includes(c.slug)).map(c => c.id)\r\n    );\r\n  }, [selectedCategories, categories]);\r\n\r\n  const filteredProducts = useMemo(() => {\r\n    const minPrice = parseFloat(searchParams.get(\"minPrice\") || \"0\") || 0;\r\n    const maxPrice =\r\n      parseFloat(searchParams.get(\"maxPrice\") || \"999999\") || 999999;\r\n\r\n    let filtered = products.filter((product) => {\r\n      const currentPrice =\r\n        product.on_sale && product.sale_price\r\n          ? product.sale_price\r\n          : product.price;\r\n      return currentPrice >= minPrice && currentPrice <= maxPrice;\r\n    });\r\n\r\n    if (selectedCategories.length > 0) {\r\n      filtered = filtered.filter((product) =>\r\n        product.categories?.some((id) => selectedCategoryIds.has(id))\r\n      );\r\n    }\r\n\r\n    if (selectedFeatures.length > 0) {\r\n      filtered = filtered.filter((product) => {\r\n        return selectedFeatures.every((feature) => {\r\n          switch (feature) {\r\n            case \"on_sale\":\r\n              return product.on_sale;\r\n            case \"is_new\":\r\n              return product.is_new;\r\n            case \"featured\":\r\n              return product.featured;\r\n            case \"in_stock\":\r\n              return product.stock > 0;\r\n            default:\r\n              return true;\r\n          }\r\n        });\r\n      });\r\n    }\r\n\r\n    // Apply sorting\r\n    return [...filtered].sort((a, b) => {\r\n      switch (sortBy) {\r\n        case \"price-low\":\r\n          return (\r\n            (a.on_sale ? a.sale_price || a.price : a.price) -\r\n            (b.on_sale ? b.sale_price || b.price : b.price)\r\n          );\r\n        case \"price-high\":\r\n          return (\r\n            (b.on_sale ? b.sale_price || b.price : b.price) -\r\n            (a.on_sale ? a.sale_price || a.price : a.price)\r\n          );\r\n        case \"newest\":\r\n          return (\r\n            new Date(b.created_at || 0).getTime() -\r\n            new Date(a.created_at || 0).getTime()\r\n          );\r\n        case \"featured\":\r\n        default:\r\n          return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);\r\n      }\r\n    });\r\n  }, [products, searchParams, selectedFeatures, selectedCategories, selectedCategoryIds, sortBy]);\r\n\r\n  const handlePriceFilter = useCallback(() => {\r\n    const minPrice = minPriceRef.current?.value || \"\";\r\n    const maxPrice = maxPriceRef.current?.value || \"\";\r\n    const params = new URLSearchParams(searchParams);\r\n    if (minPrice) params.set(\"minPrice\", minPrice);\r\n    else params.delete(\"minPrice\");\r\n    if (maxPrice) params.set(\"maxPrice\", maxPrice);\r\n    else params.delete(\"maxPrice\");\r\n    setSearchParams(params);\r\n  }, [searchParams, setSearchParams]);\r\n\r\n  const handleCategoryChange = useCallback(\r\n    (category: string, checked: boolean) => {\r\n      if (checked) {\r\n        setSelectedCategories((prev) => [...prev, category]);\r\n      } else {\r\n        setSelectedCategories((prev) => prev.filter((c) => c !== category));\r\n      }\r\n    },\r\n    []\r\n  );\r\n\r\n  const handleFeatureChange = useCallback(\r\n    (feature: string, checked: boolean) => {\r\n      if (checked) {\r\n        setSelectedFeatures((prev) => [...prev, feature]);\r\n      } else {\r\n        setSelectedFeatures((prev) => prev.filter((f) => f !== feature));\r\n      }\r\n    },\r\n    []\r\n  );\r\n\r\n  const sortOptions = [\r\n    { value: \"featured\", label: t(\"featured\", \"Featured\") },\r\n    { value: \"price-low\", label: t(\"sortPriceLow\", \"Price: Low to High\") },\r\n    { value: \"price-high\", label: t(\"sortPriceHigh\", \"Price: High to Low\") },\r\n    { value: \"newest\", label: t(\"sortNewest\", \"Newest\") },\r\n  ];\r\n\r\n  const filterSidebarProps: FilterSidebarProps = {\r\n    t,\r\n    categories,\r\n    selectedCategories,\r\n    handleCategoryChange,\r\n    selectedFeatures,\r\n    handleFeatureChange,\r\n    minPriceRef,\r\n    maxPriceRef,\r\n    searchParams,\r\n    handlePriceFilter,\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8\">\r\n        <FadeIn className=\"mb-8\">\r\n          <div className=\"flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6\">\r\n            <div className=\"space-y-1\">\r\n              <h1 className=\"text-2xl lg:text-3xl font-bold\">\r\n                {searchQuery\r\n                  ? t(\"searchResultsFor\", `Search Results for \"${searchQuery}\"`)\r\n                  : t(\"allProducts\", \"All Products\")}\r\n              </h1>\r\n              <p className=\"text-sm lg:text-base text-muted-foreground\">\r\n                {t(\"showing\", \"Showing\")} {filteredProducts.length}{\" \"}\r\n                {t(\"of\", \"of\")} {products.length} {t(\"products\", \"products\")}\r\n              </p>\r\n            </div>\r\n            {searchQuery && (\r\n              <Button\r\n                variant=\"outline\"\r\n                size=\"sm\"\r\n                onClick={() => setSearchParams({})}\r\n                className=\"w-fit\"\r\n              >\r\n                {t(\"clearSearch\", \"Clear Search\")}\r\n              </Button>\r\n            )}\r\n          </div>\r\n\r\n          <div className=\"flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between\">\r\n            <Sheet>\r\n              <SheetTrigger asChild>\r\n                <Button\r\n                  variant=\"outline\"\r\n                  className=\"lg:hidden w-full sm:w-auto\"\r\n                >\r\n                  <Filter className=\"h-4 w-4 mr-2\" />\r\n                  {t(\"filters\", \"Filters\")}\r\n                </Button>\r\n              </SheetTrigger>\r\n              <SheetContent side=\"left\" className=\"w-[300px]\">\r\n                <SheetHeader>\r\n                  <SheetTitle>{t(\"filters\", \"Filters\")}</SheetTitle>\r\n                  <SheetDescription>\r\n                    {t(\"refineSearch\", \"Refine your product search\")}\r\n                  </SheetDescription>\r\n                </SheetHeader>\r\n                <div className=\"mt-6\">\r\n                  <FilterSidebar {...filterSidebarProps} />\r\n                </div>\r\n              </SheetContent>\r\n            </Sheet>\r\n\r\n            <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-3\">\r\n              <Select value={sortBy} onValueChange={setSortBy}>\r\n                <SelectTrigger className=\"w-full sm:w-[160px]\">\r\n                  <SelectValue placeholder={t(\"sortBy\", \"Sort by\")} />\r\n                </SelectTrigger>\r\n                <SelectContent>\r\n                  {sortOptions.map((option) => (\r\n                    <SelectItem key={option.value} value={option.value}>\r\n                      {option.label}\r\n                    </SelectItem>\r\n                  ))}\r\n                </SelectContent>\r\n              </Select>\r\n\r\n              <div className=\"flex border rounded-lg p-1 w-full sm:w-auto\">\r\n                <Button\r\n                  variant={viewMode === \"grid\" ? \"default\" : \"ghost\"}\r\n                  size=\"sm\"\r\n                  onClick={() => setViewMode(\"grid\")}\r\n                  className=\"flex-1 sm:flex-none\"\r\n                >\r\n                  <Grid className=\"h-4 w-4\" />\r\n                </Button>\r\n                <Button\r\n                  variant={viewMode === \"list\" ? \"default\" : \"ghost\"}\r\n                  size=\"sm\"\r\n                  onClick={() => setViewMode(\"list\")}\r\n                  className=\"flex-1 sm:flex-none\"\r\n                >\r\n                  <List className=\"h-4 w-4\" />\r\n                </Button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </FadeIn>\r\n\r\n        <div className=\"flex gap-8\">\r\n          <aside className=\"hidden lg:block w-64 flex-shrink-0\">\r\n            <div className=\"sticky top-24\">\r\n              <FilterSidebar {...filterSidebarProps} />\r\n            </div>\r\n          </aside>\r\n\r\n          <div className=\"flex-1\">\r\n            {loading ? (\r\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                {[...Array(6)].map((_, i) => (\r\n                  <div\r\n                    key={i}\r\n                    className=\"animate-pulse bg-card rounded-lg shadow-md overflow-hidden\"\r\n                  >\r\n                    <div className=\"aspect-square bg-muted mb-4\"></div>\r\n                    <div className=\"p-4\">\r\n                      <div className=\"h-4 bg-muted rounded w-3/4 mb-2\"></div>\r\n                      <div className=\"h-3 bg-muted rounded w-1/2 mb-3\"></div>\r\n                      <div className=\"h-4 bg-muted rounded w-1/3\"></div>\r\n                    </div>\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            ) : viewMode === \"grid\" ? (\r\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                {filteredProducts.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=\"grid\"\r\n                    />\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            ) : (\r\n              <div className=\"space-y-6\">\r\n                {filteredProducts.map((product) => (\r\n                  <div\r\n                    key={product.id}\r\n                    className=\"w-full\"\r\n                    data-db-table=\"products\"\r\n                    data-db-id={product.id}\r\n                  >\r\n                    <ProductCard\r\n                      product={product}\r\n                      variant=\"list\"\r\n                    />\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            )}\r\n\r\n            {!loading && filteredProducts.length === 0 && (\r\n              <div className=\"text-center py-12\">\r\n                <p className=\"text-muted-foreground\">\r\n                  {t(\r\n                    \"noProductsFound\",\r\n                    \"No products found matching your criteria.\"\r\n                  )}\r\n                </p>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ProductsPage;\r\n"
     },
     {
       "path": "products-page/lang/en.json",

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

@@ -23,7 +23,7 @@
       "path": "register-page-split/register-page-split.tsx",
       "type": "registry:page",
       "target": "$modules$/register-page-split/register-page-split.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate } 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 { 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 RegisterPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function RegisterPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: RegisterPageSplitProps) {\r\n  const { t } = useTranslation(\"register-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Create Account\") });\r\n  const navigate = useNavigate();\r\n  const { register } = useAuth();\r\n\r\n  const [username, setUsername] = useState(\"\");\r\n  const [email, setEmail] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (password !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await register(username, email, password);\r\n\r\n      toast.success(t(\"registerSuccess\", \"Account created successfully!\"), {\r\n        description: t(\"checkEmail\", \"Please check your email to verify your account.\"),\r\n      });\r\n\r\n      // Navigate to login page after successful registration\r\n      navigate(\"/login\", {\r\n        state: {\r\n          message: t(\"verifyEmail\", \"Please verify your email before logging in.\"),\r\n          email\r\n        }\r\n      });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"registerError\", \"Registration failed. Please try again.\")\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\", \"Create Account\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              {t(\"subtitle\", \"Sign up to get started\")}\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\", \"johndoe\")}\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            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"email\", \"Email\")} htmlFor=\"email\" required>\r\n              <Input\r\n                required\r\n                id=\"email\"\r\n                type=\"email\"\r\n                autoComplete=\"email\"\r\n                placeholder={t(\"emailPlaceholder\", \"you@example.com\")}\r\n                value={email}\r\n                onChange={(e) => setEmail(e.target.value)}\r\n                disabled={isLoading}\r\n              />\r\n              </FormField>\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"password\", \"Password\")} htmlFor=\"password\" required>\r\n                <PasswordInput\r\n                required\r\n                name=\"password\"\r\n                id=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n              </FormField>\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"confirmPassword\", \"Confirm Password\")} htmlFor=\"confirm-password\" required>\r\n              <PasswordInput\r\n                 required\r\n                id=\"confirm-password\"\r\n                name=\"confirm-password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={confirmPassword}\r\n                onChange={(e) => setConfirmPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\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(\"creatingAccount\", \"Creating account...\")}\r\n                </>\r\n              ) : (\r\n                t(\"signUp\", \"Sign Up\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <div className=\"text-sm text-center\">\r\n            <p>\r\n              {t(\"hasAccount\", \"Already have an account?\")}{\" \"}\r\n              <Link to=\"/login\" className=\"underline\">\r\n                {t(\"signIn\", \"Sign in\")}\r\n              </Link>\r\n            </p>\r\n          </div>\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\", \"Register 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 RegisterPageSplit;\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate } 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 { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\n\r\ninterface RegisterPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function RegisterPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: RegisterPageSplitProps) {\r\n  const { t } = useTranslation(\"register-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Create Account\") });\r\n  const navigate = useNavigate();\r\n  const { register } = useAuth();\r\n\r\n  const [username, setUsername] = useState(\"\");\r\n  const [email, setEmail] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (password !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await register(username, email, password);\r\n\r\n      toast.success(t(\"registerSuccess\", \"Account created successfully!\"), {\r\n        description: t(\"checkEmail\", \"Please check your email to verify your account.\"),\r\n      });\r\n\r\n      // Navigate to login page after successful registration\r\n      navigate(\"/login\", {\r\n        state: {\r\n          message: t(\"verifyEmail\", \"Please verify your email before logging in.\"),\r\n          email\r\n        }\r\n      });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"registerError\", \"Registration failed. Please try again.\")\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\", \"Create Account\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              {t(\"subtitle\", \"Sign up to get started\")}\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\", \"johndoe\")}\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            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"email\">{t(\"email\", \"Email\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"email\"\r\n                type=\"email\"\r\n                autoComplete=\"email\"\r\n                placeholder={t(\"emailPlaceholder\", \"you@example.com\")}\r\n                value={email}\r\n                onChange={(e) => setEmail(e.target.value)}\r\n                disabled={isLoading}\r\n              />\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"password\">{t(\"password\", \"Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"password\"\r\n                type=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"confirm-password\">{t(\"confirmPassword\", \"Confirm Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"confirm-password\"\r\n                type=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={confirmPassword}\r\n                onChange={(e) => setConfirmPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\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(\"creatingAccount\", \"Creating account...\")}\r\n                </>\r\n              ) : (\r\n                t(\"signUp\", \"Sign Up\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <div className=\"text-sm text-center\">\r\n            <p>\r\n              {t(\"hasAccount\", \"Already have an account?\")}{\" \"}\r\n              <Link to=\"/login\" className=\"underline\">\r\n                {t(\"signIn\", \"Sign in\")}\r\n              </Link>\r\n            </p>\r\n          </div>\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\", \"Register 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 RegisterPageSplit;\r\n"
     },
     {
       "path": "register-page-split/lang/en.json",

package/dist/registry/register-page.json

@@ -23,7 +23,7 @@
       "path": "register-page/register-page.tsx",
       "type": "registry:page",
       "target": "$modules$/register-page/register-page.tsx",
-      "content": "import { useState, useEffect } from \"react\";\r\nimport { Link, useNavigate } 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 { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\r\nimport { UserPlus, CheckCircle } from \"lucide-react\";\r\nimport { PasswordInput } from \"@/components/PasswordInput\";\r\nimport { FormField } from \"@/components/FormField\";\r\n\r\nexport function RegisterPage() {\r\n  const { t } = useTranslation(\"register-page\");\r\n  usePageTitle({ title: t(\"title\", \"Create Account\") });\r\n\r\n  const navigate = useNavigate();\r\n  const { register, isAuthenticated } = useAuth();\r\n\r\n  const [formData, setFormData] = useState({\r\n    username: \"\",\r\n    email: \"\",\r\n    password: \"\",\r\n    confirmPassword: \"\",\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [success, setSuccess] = useState(false);\r\n\r\n  // Redirect if already authenticated\r\n  useEffect(() => {\r\n    if (isAuthenticated) {\r\n      navigate(\"/\", { replace: true });\r\n    }\r\n  }, [isAuthenticated, navigate]);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (formData.password !== formData.confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      toast.error(t(\"toastErrorTitle\", \"Registration failed\"), {\r\n        description: t(\"passwordMismatch\", \"Passwords do not match\"),\r\n      });\r\n      setIsSubmitting(false);\r\n      return;\r\n    }\r\n\r\n    try {\r\n      await register(formData.username, formData.email, formData.password);\r\n      setSuccess(true);\r\n      toast.success(t(\"toastSuccessTitle\", \"Account created!\"), {\r\n        description: t(\r\n          \"toastSuccessDesc\",\r\n          \"Please check your email to verify your account.\",\r\n        ),\r\n      });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(err, t(\"errorGeneric\", \"Registration failed. Please try again.\"));\r\n      setError(errorMessage);\r\n      toast.error(t(\"toastErrorTitle\", \"Registration failed\"), {\r\n        description: errorMessage,\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  if (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-6\">\r\n                  <div className=\"text-center space-y-4\">\r\n                    <CheckCircle className=\"w-16 h-16 text-green-500 mx-auto\" />\r\n                    <h2 className=\"text-2xl font-bold text-foreground\">\r\n                      {t(\"successTitle\", \"Account Created!\")}\r\n                    </h2>\r\n                    <p className=\"text-muted-foreground\">\r\n                      {t(\"successMessage\", \"Please check your email to verify your account.\")}\r\n                    </p>\r\n                    <Button asChild className=\"mt-4\">\r\n                      <Link to=\"/login\">{t(\"goToLogin\", \"Go to Login\")}</Link>\r\n                    </Button>\r\n                  </div>\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\", \"Create Account\")}\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              {t(\"description\", \"Create an account to get started\")}\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                  <UserPlus className=\"w-5 h-5 text-primary\" />\r\n                  {t(\"cardTitle\", \"Sign Up\")}\r\n                </CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                  <FormField label={t(\"username\", \"Username\")} htmlFor=\"username\" required>\r\n                    <Input\r\n                      id=\"username\"\r\n                      name=\"username\"\r\n                      type=\"text\"\r\n                      value={formData.username}\r\n                      onChange={handleChange}\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                  <FormField label={t(\"email\", \"Email\")} htmlFor=\"email\" required>\r\n                    <Input\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      type=\"email\"\r\n                      value={formData.email}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"emailPlaceholder\", \"Enter your email\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    autoComplete=\"email\"\r\n                    />\r\n                  </FormField>\r\n                  <FormField label={t(\"password\", \"Password\")} htmlFor=\"password\" required>\r\n                    <PasswordInput id=\"password\"\r\n                      name=\"password\"\r\n                      value={formData.password}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"passwordPlaceholder\", \"Enter password\")}\r\n                      required\r\n                      className=\"mt-1 pr-10\"\r\n                      autoComplete=\"new-password\"\r\n                    />\r\n                  </FormField>\r\n\r\n                  <FormField label={t(\"confirmPassword\", \"Confirm Password\")} htmlFor=\"confirmPassword\" required\r\n                  >\r\n                    <PasswordInput\r\n                      id=\"confirmPassword\"\r\n                      name=\"confirmPassword\"\r\n                      value={formData.confirmPassword}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"confirmPasswordPlaceholder\", \"Confirm your password\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                      autoComplete=\"new-password\"\r\n\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(\"submitting\", \"Creating account...\")}\r\n                      </>\r\n                    ) : (\r\n                      t(\"submit\", \"Create Account\")\r\n                    )}\r\n                  </Button>\r\n\r\n                  <div className=\"text-center text-sm text-muted-foreground\">\r\n                    {t(\"hasAccount\", \"Already have an account?\")}{\" \"}\r\n                    <Link\r\n                      to=\"/login\"\r\n                      className=\"text-primary hover:underline font-medium\"\r\n                    >\r\n                      {t(\"loginLink\", \"Sign in\")}\r\n                    </Link>\r\n                  </div>\r\n                </form>\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 RegisterPage;\r\n"
+      "content": "import { useState, useEffect } from \"react\";\r\nimport { Link, useNavigate } 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 { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\r\nimport { UserPlus, Eye, EyeOff, CheckCircle } from \"lucide-react\";\r\n\r\nexport function RegisterPage() {\r\n  const { t } = useTranslation(\"register-page\");\r\n  usePageTitle({ title: t(\"title\", \"Create Account\") });\r\n\r\n  const navigate = useNavigate();\r\n  const { register, isAuthenticated } = useAuth();\r\n\r\n  const [formData, setFormData] = useState({\r\n    username: \"\",\r\n    email: \"\",\r\n    password: \"\",\r\n    confirmPassword: \"\",\r\n  });\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  const [success, setSuccess] = useState(false);\r\n\r\n  // Redirect if already authenticated\r\n  useEffect(() => {\r\n    if (isAuthenticated) {\r\n      navigate(\"/\", { replace: true });\r\n    }\r\n  }, [isAuthenticated, navigate]);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (formData.password !== formData.confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      toast.error(t(\"toastErrorTitle\", \"Registration failed\"), {\r\n        description: t(\"passwordMismatch\", \"Passwords do not match\"),\r\n      });\r\n      setIsSubmitting(false);\r\n      return;\r\n    }\r\n\r\n    try {\r\n      await register(formData.username, formData.email, formData.password);\r\n      setSuccess(true);\r\n      toast.success(t(\"toastSuccessTitle\", \"Account created!\"), {\r\n        description: t(\r\n          \"toastSuccessDesc\",\r\n          \"Please check your email to verify your account.\",\r\n        ),\r\n      });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(err, t(\"errorGeneric\", \"Registration failed. Please try again.\"));\r\n      setError(errorMessage);\r\n      toast.error(t(\"toastErrorTitle\", \"Registration failed\"), {\r\n        description: errorMessage,\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  if (success) {\r\n    return (\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-6\">\r\n                <div className=\"text-center space-y-4\">\r\n                  <CheckCircle className=\"w-16 h-16 text-green-500 mx-auto\" />\r\n                  <h2 className=\"text-2xl font-bold text-foreground\">\r\n                    {t(\"successTitle\", \"Account Created!\")}\r\n                  </h2>\r\n                  <p className=\"text-muted-foreground\">\r\n                    {t(\"successMessage\", \"Please check your email to verify your account.\")}\r\n                  </p>\r\n                  <Button asChild className=\"mt-4\">\r\n                    <Link to=\"/login\">{t(\"goToLogin\", \"Go to Login\")}</Link>\r\n                  </Button>\r\n                </div>\r\n              </CardContent>\r\n            </Card>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\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\", \"Create Account\")}\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            {t(\"description\", \"Create an account to get started\")}\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                <UserPlus className=\"w-5 h-5 text-primary\" />\r\n                {t(\"cardTitle\", \"Sign Up\")}\r\n              </CardTitle>\r\n            </CardHeader>\r\n            <CardContent>\r\n              <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                <div>\r\n                  <Label htmlFor=\"username\">{t(\"username\", \"Username\")} *</Label>\r\n                  <Input\r\n                    id=\"username\"\r\n                    name=\"username\"\r\n                    type=\"text\"\r\n                    value={formData.username}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"usernamePlaceholder\", \"Enter your username\")}\r\n                    required\r\n                    className=\"mt-1\"\r\n                    autoComplete=\"username\"\r\n                  />\r\n                </div>\r\n\r\n                <div>\r\n                  <Label htmlFor=\"email\">{t(\"email\", \"Email\")} *</Label>\r\n                  <Input\r\n                    id=\"email\"\r\n                    name=\"email\"\r\n                    type=\"email\"\r\n                    value={formData.email}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"emailPlaceholder\", \"Enter your email\")}\r\n                    required\r\n                    className=\"mt-1\"\r\n                    autoComplete=\"email\"\r\n                  />\r\n                </div>\r\n\r\n                <div>\r\n                  <Label htmlFor=\"password\">{t(\"password\", \"Password\")} *</Label>\r\n                  <div className=\"relative\">\r\n                    <Input\r\n                      id=\"password\"\r\n                      name=\"password\"\r\n                      type={showPassword ? \"text\" : \"password\"}\r\n                      value={formData.password}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"passwordPlaceholder\", \"Enter password\")}\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                </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                    name=\"confirmPassword\"\r\n                    type={showPassword ? \"text\" : \"password\"}\r\n                    value={formData.confirmPassword}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"confirmPasswordPlaceholder\", \"Confirm your password\")}\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(\"submitting\", \"Creating account...\")}\r\n                    </>\r\n                  ) : (\r\n                    t(\"submit\", \"Create Account\")\r\n                  )}\r\n                </Button>\r\n\r\n                <div className=\"text-center text-sm text-muted-foreground\">\r\n                  {t(\"hasAccount\", \"Already have an account?\")}{\" \"}\r\n                  <Link\r\n                    to=\"/login\"\r\n                    className=\"text-primary hover:underline font-medium\"\r\n                  >\r\n                    {t(\"loginLink\", \"Sign in\")}\r\n                  </Link>\r\n                </div>\r\n              </form>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default RegisterPage;\r\n"
     },
     {
       "path": "register-page/lang/en.json",

package/dist/registry/related-products-block.json

@@ -19,7 +19,7 @@
       "path": "related-products-block/related-products-block.tsx",
       "type": "registry:block",
       "target": "$modules$/related-products-block/related-products-block.tsx",
-      "content": "import { Link } from \"react-router\";\r\nimport { Star } from \"lucide-react\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { formatPrice } from \"@/modules/ecommerce-core/format-price\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\n\r\ninterface RelatedProductsBlockProps {\r\n  products: Product[];\r\n  title?: string;\r\n}\r\n\r\nexport function RelatedProductsBlock({\r\n  products,\r\n  title,\r\n}: RelatedProductsBlockProps) {\r\n  const { t } = useTranslation(\"related-products-block\");\r\n\r\n  if (products.length === 0) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div>\r\n      <h2 className=\"text-2xl font-bold mb-6\">\r\n        {title || t(\"title\", \"Related Products\")}\r\n      </h2>\r\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n        {products.map((product) => (\r\n          <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n          <Card\r\n            className=\"group overflow-hidden border-0 p-0 shadow-sm hover:shadow-lg transition-all duration-300\"\r\n          >\r\n            <Link to={`/products/${product.slug}`}>\r\n              <div className=\"relative aspect-square overflow-hidden cursor-pointer\">\r\n                <img\r\n                  src={product.images[0] || \"/images/placeholder.png\"}\r\n                  alt={product.name}\r\n                  className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\r\n                />\r\n              </div>\r\n            </Link>\r\n            <CardContent className=\"p-4\">\r\n              <Link to={`/products/${product.slug}`}>\r\n                <h3 className=\"font-semibold hover:text-primary transition-colors line-clamp-1\">\r\n                  {product.name}\r\n                </h3>\r\n              </Link>\r\n              <div className=\"flex items-center justify-between mt-2\">\r\n                <span className=\"font-semibold\">\r\n                  {formatPrice(product.price, constants.site.currency)}\r\n                </span>\r\n                <div className=\"flex items-center gap-1\">\r\n                  <Star className=\"h-3 w-3 fill-current text-yellow-400\" />\r\n                  <span className=\"text-xs\">{product.rating}</span>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"
+      "content": "import { Link } from \"react-router\";\r\nimport { Star } from \"lucide-react\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { formatPrice } from \"@/modules/ecommerce-core/format-price\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\n\r\ninterface RelatedProductsBlockProps {\r\n  products: Product[];\r\n  title?: string;\r\n}\r\n\r\nexport function RelatedProductsBlock({\r\n  products,\r\n  title,\r\n}: RelatedProductsBlockProps) {\r\n  const { t } = useTranslation(\"related-products-block\");\r\n\r\n  if (products.length === 0) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div>\r\n      <h2 className=\"text-2xl font-bold mb-6\">\r\n        {title || t(\"title\", \"Related Products\")}\r\n      </h2>\r\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n        {products.map((product) => (\r\n          <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n          <Card\r\n            className=\"group overflow-hidden border-0 p-0 shadow-sm hover:shadow-lg transition-all duration-300\"\r\n          >\r\n            <Link to={`/products/${product.slug}`}>\r\n              <div className=\"relative aspect-square overflow-hidden cursor-pointer\">\r\n                <img\r\n                  src={product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"}\r\n                  alt={product.name}\r\n                  className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\r\n                />\r\n              </div>\r\n            </Link>\r\n            <CardContent className=\"p-4\">\r\n              <Link to={`/products/${product.slug}`}>\r\n                <h3 className=\"font-semibold hover:text-primary transition-colors line-clamp-1\">\r\n                  {product.name}\r\n                </h3>\r\n              </Link>\r\n              <div className=\"flex items-center justify-between mt-2\">\r\n                <span className=\"font-semibold\">\r\n                  {formatPrice(product.price, constants.site.currency)}\r\n                </span>\r\n                <div className=\"flex items-center gap-1\">\r\n                  <Star className=\"h-3 w-3 fill-current text-yellow-400\" />\r\n                  <span className=\"text-xs\">{product.rating}</span>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"
     },
     {
       "path": "related-products-block/lang/en.json",

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

@@ -23,7 +23,7 @@
       "path": "reset-password-page-split/reset-password-page-split.tsx",
       "type": "registry:page",
       "target": "$modules$/reset-password-page-split/reset-password-page-split.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useSearchParams } 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 { Logo } from \"@/components/Logo\";\r\nimport { KeyRound, 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\nimport { PasswordInput } from \"@/components/PasswordInput\";\r\n\r\ninterface ResetPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ResetPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ResetPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"reset-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Reset Password\") });\r\n  const navigate = useNavigate();\r\n  const [searchParams] = useSearchParams();\r\n  const { resetPassword } = useAuth();\r\n\r\n  // Get code and username from URL params\r\n  const code = searchParams.get(\"code\") || \"\";\r\n  const username = searchParams.get(\"username\") || searchParams.get(\"email\") || \"\";\r\n\r\n  const [password, setPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isSuccess, setIsSuccess] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (password !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    // Validate we have required params\r\n    if (!code || !username) {\r\n      setError(t(\"invalidLink\", \"Invalid or expired reset link. Please request a new one.\"));\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await resetPassword(username, code, password);\r\n\r\n      setIsSuccess(true);\r\n      toast.success(t(\"passwordResetSuccess\", \"Password reset successfully!\"));\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"resetPasswordError\", \"Failed to reset password. 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\r\n  if (isSuccess) {\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(\"passwordReset\", \"Password Reset!\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"passwordResetDescription\", \"Your password has been reset successfully. You can now log in with your new password.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/login\")} className=\"w-full\">\r\n              {t(\"goToLogin\", \"Go to Login\")}\r\n            </Button>\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\", \"Reset 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  // Invalid link state\r\n  if (!code || !username) {\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>\r\n              <h1 className=\"text-xl font-bold tracking-tight text-red-600\">\r\n                {t(\"invalidLinkTitle\", \"Invalid Reset Link\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"invalidLinkDescription\", \"This password reset link is invalid or has expired. Please request a new one.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/forgot-password\")} className=\"w-full\">\r\n              {t(\"requestNewLink\", \"Request New Link\")}\r\n            </Button>\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\", \"Reset 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              <KeyRound 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\", \"Reset Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your new password below\")}\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(\"newPassword\", \"New Password\")} htmlFor=\"password\" required>\r\n              <PasswordInput\r\n                required\r\n                id=\"password\"\r\n                name=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n              </FormField>\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"confirmPassword\", \"Confirm Password\")} htmlFor=\"confirm-password\" required>\r\n              <PasswordInput\r\n                required\r\n                id=\"confirm-password\"\r\n                name=\"confirm-password\"\r\n                autoComplete=\"confirm-password\"\r\n                placeholder=\"••••••••\"\r\n                value={confirmPassword}\r\n                onChange={(e) => setConfirmPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\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(\"resetting\", \"Resetting...\")}\r\n                </>\r\n              ) : (\r\n                t(\"resetPassword\", \"Reset Password\")\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\", \"Reset 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 ResetPasswordPageSplit;\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useSearchParams } 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 { KeyRound, ArrowLeft, CheckCircle } from \"lucide-react\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\n\r\ninterface ResetPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ResetPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ResetPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"reset-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Reset Password\") });\r\n  const navigate = useNavigate();\r\n  const [searchParams] = useSearchParams();\r\n  const { resetPassword } = useAuth();\r\n\r\n  // Get code and username from URL params\r\n  const code = searchParams.get(\"code\") || \"\";\r\n  const username = searchParams.get(\"username\") || searchParams.get(\"email\") || \"\";\r\n\r\n  const [password, setPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isSuccess, setIsSuccess] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (password !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    // Validate we have required params\r\n    if (!code || !username) {\r\n      setError(t(\"invalidLink\", \"Invalid or expired reset link. Please request a new one.\"));\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await resetPassword(username, code, password);\r\n\r\n      setIsSuccess(true);\r\n      toast.success(t(\"passwordResetSuccess\", \"Password reset successfully!\"));\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"resetPasswordError\", \"Failed to reset password. 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\r\n  if (isSuccess) {\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(\"passwordReset\", \"Password Reset!\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"passwordResetDescription\", \"Your password has been reset successfully. You can now log in with your new password.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/login\")} className=\"w-full\">\r\n              {t(\"goToLogin\", \"Go to Login\")}\r\n            </Button>\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\", \"Reset 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  // Invalid link state\r\n  if (!code || !username) {\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>\r\n              <h1 className=\"text-xl font-bold tracking-tight text-red-600\">\r\n                {t(\"invalidLinkTitle\", \"Invalid Reset Link\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"invalidLinkDescription\", \"This password reset link is invalid or has expired. Please request a new one.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/forgot-password\")} className=\"w-full\">\r\n              {t(\"requestNewLink\", \"Request New Link\")}\r\n            </Button>\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\", \"Reset 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              <KeyRound 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\", \"Reset Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your new password below\")}\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=\"password\">{t(\"newPassword\", \"New Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"password\"\r\n                type=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"confirm-password\">{t(\"confirmPassword\", \"Confirm Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"confirm-password\"\r\n                type=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={confirmPassword}\r\n                onChange={(e) => setConfirmPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\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(\"resetting\", \"Resetting...\")}\r\n                </>\r\n              ) : (\r\n                t(\"resetPassword\", \"Reset Password\")\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\", \"Reset 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 ResetPasswordPageSplit;\r\n"
     },
     {
       "path": "reset-password-page-split/lang/en.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/cli",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "type": "module",
   "bin": {
     "promake": "dist/index.js"
@@ -19,7 +19,8 @@
     "playground:reset": "bun run playground:create",
     "playground:add": "cd playground && bun run ../src/index.ts add",
     "playground:ecommerce": "rm -rf playground && bun run dev -- create playground --template ecommerce --pm bun",
-    "build": "bun run build:cli && bun run build:registry",
+    "clean": "rimraf dist",
+    "build": "bun run clean && bun run build:cli && bun run build:registry",
     "build:cli": "bun build src/index.ts --outdir dist --target node --minify",
     "build:registry": "bun run scripts/build-registry.ts",
     "typecheck": "tsc --noEmit",
@@ -49,6 +50,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.2",
     "@types/prompts": "^2.4.9",
+    "rimraf": "6.0.1",
     "typescript": "^5.7.2"
   }
 }

package/template/README.md

@@ -1,73 +1,54 @@
-# React + TypeScript + Vite
+# Promake React Template
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This template is the runtime target for `@promakeai/cli`. It includes a
+multi-language, schema-driven database setup powered by `@promakeai/dbreact`.
 
-Currently, two official plugins are available:
+## What You Get
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- Vite + React + TypeScript
+- Module-based architecture (`src/modules`)
+- Built-in DB layer via `@/db` (dbreact hooks + schema)
+- Multi-language content with translation fallback
 
-## React Compiler
+## Database Layout
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+- Schema: `src/db/schema.json`
+- Types: `src/db/types.ts`
+- Provider: `src/db/provider.tsx`
+- DB file: `public/data/database.db`
 
-## Expanding the ESLint configuration
+The app wraps your UI with `AppDbProvider` in `src/App.tsx` and syncs DB language
+with i18n.
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+## Regenerate Database
 
-```js
-export default defineConfig([
-  globalIgnores(["dist"]),
-  {
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      // Other configs...
+```bash
+# From schema.json
+dbcli generate --schema ./src/db/schema.json \
+  --database ./public/data/database.db \
+  --output ./src/db
+```
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+Or run the helper:
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
+```bash
+bun run init-db
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## Using the DB in Modules
 
-```js
-// eslint.config.js
-import reactX from "eslint-plugin-react-x";
-import reactDom from "eslint-plugin-react-dom";
+```tsx
+import { useDbList } from "@/db";
+import type { DbProduct } from "@/db";
 
-export default defineConfig([
-  globalIgnores(["dist"]),
-  {
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs["recommended-typescript"],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
+const { data: products } = useDbList<DbProduct>("products", {
+  where: { price: { $gt: 50 } },
+  limit: 12,
+});
 ```
+
+## Language Behavior
+
+- `defaultLanguage` is defined in `schema.json`.
+- `DbProvider` uses `lang` + `fallbackLang` for translation resolution.
+- Changing i18n language triggers refetch of db queries.

package/template/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@promakeai/template",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,8 +15,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@promakeai/dbreact": "^1.0.4",
     "@promakeai/customer-backend-client": "^1.1.0",
-    "@promakeai/inspector": "^1.5.1",
+    "@promakeai/inspector": "^1.7.4",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -91,4 +92,4 @@
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"
   }
-}
+}