@promakeai/cli 0.4.6 → 0.5.0

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

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/cli",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "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
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@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
-
-## React Compiler
-
-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).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(["dist"]),
-  {
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      // Other configs...
-
-      // 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,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
-```
-
-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:
-
-```js
-// eslint.config.js
-import reactX from "eslint-plugin-react-x";
-import reactDom from "eslint-plugin-react-dom";
-
-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...
-    },
-  },
-]);
-```
+# Promake React Template
+
+This template is the runtime target for `@promakeai/cli`. It includes a
+multi-language, schema-driven database setup powered by `@promakeai/dbreact`.
+
+## What You Get
+
+- Vite + React + TypeScript
+- Module-based architecture (`src/modules`)
+- Built-in DB layer via `@/db` (dbreact hooks + schema)
+- Multi-language content with translation fallback
+
+## Database Layout
+
+- Schema: `src/db/schema.json`
+- Types: `src/db/types.ts`
+- Provider: `src/db/provider.tsx`
+- DB file: `public/data/database.db`
+
+The app wraps your UI with `AppDbProvider` in `src/App.tsx` and syncs DB language
+with i18n.
+
+## Regenerate Database
+
+```bash
+# From schema.json
+dbcli generate --schema ./src/db/schema.json \
+  --database ./public/data/database.db \
+  --output ./src/db
+```
+
+Or run the helper:
+
+```bash
+bun run init-db
+```
+
+## Using the DB in Modules
+
+```tsx
+import { useDbList } from "@/db";
+import type { DbProduct } from "@/db";
+
+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.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,8 +15,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@promakeai/dbreact": "^1.0.3",
     "@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"
   }
-}
+}

package/template/scripts/init-db.ts

@@ -1,131 +1,18 @@
-import fs from "fs";
+import { execSync } from "child_process";
 import path from "path";
-import initSqlJs from "sql.js";
 
-async function createDatabase() {
-  const SQL = await initSqlJs();
-  const db = new SQL.Database();
+const cwd = process.cwd();
+const schemaPath = path.join(cwd, "src", "db", "schema.json");
+const outputDir = path.join(cwd, "src", "db");
+const dbPath = path.join(cwd, "public", "data", "database.db");
 
-  // ============================================
-  // BLOG SISTEMI
-  // ============================================
+const cmd = `dbcli generate --schema "${schemaPath}" --database "${dbPath}" --output "${outputDir}"`;
 
-  db.exec(`
-    CREATE TABLE blog_categories (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL,
-      slug TEXT UNIQUE NOT NULL,
-      description TEXT,
-      image TEXT,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-  `);
-
-  db.exec(`
-    CREATE TABLE posts (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      title TEXT NOT NULL,
-      slug TEXT UNIQUE NOT NULL,
-      content TEXT NOT NULL,
-      excerpt TEXT,
-      featured_image TEXT,
-      images TEXT,
-      author TEXT,
-      author_avatar TEXT,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      published_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      tags TEXT,
-      read_time INTEGER DEFAULT 0,
-      view_count INTEGER DEFAULT 0,
-      featured INTEGER DEFAULT 0,
-      published INTEGER DEFAULT 1,
-      meta_description TEXT,
-      meta_keywords TEXT
-    );
-  `);
-
-  db.exec(`
-    CREATE TABLE post_categories (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      post_id INTEGER NOT NULL,
-      category_id INTEGER NOT NULL,
-      is_primary INTEGER DEFAULT 0,
-      FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
-      FOREIGN KEY (category_id) REFERENCES blog_categories(id) ON DELETE CASCADE
-    );
-  `);
-
-  // ============================================
-  // E-COMMERCE SISTEMI
-  // ============================================
-
-  db.exec(`
-    CREATE TABLE product_categories (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL,
-      slug TEXT UNIQUE NOT NULL,
-      description TEXT,
-      image TEXT,
-      parent_id INTEGER,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      FOREIGN KEY (parent_id) REFERENCES product_categories(id) ON DELETE SET NULL
-    );
-  `);
-
-  db.exec(`
-    CREATE TABLE products (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL,
-      slug TEXT UNIQUE NOT NULL,
-      description TEXT,
-      price REAL NOT NULL,
-      sale_price REAL,
-      on_sale INTEGER DEFAULT 0,
-      images TEXT,
-      brand TEXT,
-      sku TEXT,
-      stock INTEGER DEFAULT 0,
-      tags TEXT,
-      rating REAL DEFAULT 0,
-      review_count INTEGER DEFAULT 0,
-      featured INTEGER DEFAULT 0,
-      is_new INTEGER DEFAULT 0,
-      published INTEGER DEFAULT 1,
-      specifications TEXT,
-      variants TEXT,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      meta_description TEXT,
-      meta_keywords TEXT
-    );
-  `);
-
-  db.exec(`
-    CREATE TABLE product_category_relations (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      product_id INTEGER NOT NULL,
-      category_id INTEGER NOT NULL,
-      is_primary INTEGER DEFAULT 0,
-      FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE,
-      FOREIGN KEY (category_id) REFERENCES product_categories(id) ON DELETE CASCADE
-    );
-  `);
-
-  // Database'i dosyaya kaydet
-  const data = db.export();
-  const buffer = Buffer.from(data);
-
-  const outputPath = path.join(process.cwd(), "public/data/database.db");
-  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
-  fs.writeFileSync(outputPath, buffer);
-
-  console.log(`Database olusturuldu: ${outputPath}`);
-  console.log("Tablolar (6):");
-  console.log("  - blog_categories, posts, post_categories");
-  console.log("  - product_categories, products, product_category_relations");
+try {
+  console.log("Generating database with dbcli...");
+  execSync(cmd, { stdio: "inherit" });
+  console.log(`Database created: ${dbPath}`);
+} catch (err) {
+  console.error("Failed to generate database. Ensure dbcli is installed globally.");
+  throw err;
 }
-
-createDatabase().catch(console.error);

package/template/src/App.tsx

@@ -1,15 +1,18 @@
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { GoogleAnalytics } from "@/components/GoogleAnalytics";
 import { ScriptInjector } from "@/components/ScriptInjector";
+import { AppDbProvider } from "@/db";
 import { Router } from "./router";
 
 const App = () => {
   return (
-    <TooltipProvider>
-      <GoogleAnalytics />
-      <ScriptInjector />
-      <Router />
-    </TooltipProvider>
+    <AppDbProvider>
+      <TooltipProvider>
+        <GoogleAnalytics />
+        <ScriptInjector />
+        <Router />
+      </TooltipProvider>
+    </AppDbProvider>
   );
 };
 

package/template/src/db/index.ts

@@ -0,0 +1,20 @@
+export { AppDbProvider } from "./provider";
+
+import { parseJSONSchema } from "@promakeai/dbreact";
+import schemaJson from "./schema.json";
+export const schema = parseJSONSchema(schemaJson as any);
+
+export {
+  useDb,
+  useAdapter,
+  useDbLang,
+  useDbList,
+  useDbGet,
+  useDbCreate,
+  useDbUpdate,
+  useDbDelete,
+  SqliteAdapter,
+  parseJSONSchema,
+} from "@promakeai/dbreact";
+
+export * from "./types";