@promakeai/cli 0.4.9 → 0.4.10

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      <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"
+      "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"
     },
     {
       "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?.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"
+      "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"
     },
     {
       "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 { 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"
+      "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"
     },
     {
       "path": "reset-password-page-split/lang/en.json",

package/package.json

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

@@ -1,37 +1,37 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-import { defineConfig, globalIgnores } from 'eslint/config';
-import eslintConfigPrettier from 'eslint-config-prettier/flat';
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-      eslintConfigPrettier,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    rules: {
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
-      'react-refresh/only-export-components': 'off',
-      'react-hooks/purity': 'off',
-      'react-hooks/exhaustive-deps': 'off',
-      'react-hooks/set-state-in-effect': 'off',
-      'no-unused-vars': 'off',
-      'prefer-const': 'warn',
-      '@typescript-eslint/no-empty-object-type': 'off',
-    },
-  },
-]);
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import eslintConfigPrettier from 'eslint-config-prettier/flat';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+      eslintConfigPrettier,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      'react-refresh/only-export-components': 'off',
+      'react-hooks/purity': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'react-hooks/set-state-in-effect': 'off',
+      'no-unused-vars': 'off',
+      'prefer-const': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'off',
+    },
+  },
+]);

package/template/package.json

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

package/template/scripts/init-db.ts

@@ -1,18 +1,131 @@
-import { execSync } from "child_process";
+import fs from "fs";
 import path from "path";
+import initSqlJs from "sql.js";
 
-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");
+async function createDatabase() {
+  const SQL = await initSqlJs();
+  const db = new SQL.Database();
 
-const cmd = `dbcli generate --schema "${schemaPath}" --database "${dbPath}" --output "${outputDir}"`;
+  // ============================================
+  // BLOG SISTEMI
+  // ============================================
 
-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;
+  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");
 }
+
+createDatabase().catch(console.error);

package/template/src/App.tsx

@@ -1,18 +1,15 @@
 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 (
-    <AppDbProvider>
-      <TooltipProvider>
-        <GoogleAnalytics />
-        <ScriptInjector />
-        <Router />
-      </TooltipProvider>
-    </AppDbProvider>
+    <TooltipProvider>
+      <GoogleAnalytics />
+      <ScriptInjector />
+      <Router />
+    </TooltipProvider>
   );
 };
 

package/template/src/PasswordInput.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Eye, EyeOff } from "lucide-react";
+
+interface PasswordInputProps {
+  id?: string;
+  name?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  required?: boolean;
+  autoComplete?: string;
+  className?: string;
+  disabled?: boolean;
+  minLength?: number;
+}
+
+export function PasswordInput({
+  id = "password",
+  name = "password",
+  value,
+  onChange,
+  placeholder = "Enter password",
+  required = false,
+  autoComplete = "current-password",
+  disabled = false,
+  minLength = undefined,
+  className = "",
+}: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+      <div className="relative">
+        <Input
+          id={id}
+          name={name}
+          type={showPassword ? "text" : "password"}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          required={required}
+          className={`mt-1 pr-10 ${className}`}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          minLength={minLength}
+        />
+        <button
+          type="button"
+          onClick={() => setShowPassword(!showPassword)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          aria-label={showPassword ? "Hide password" : "Show password"}
+        >
+          {showPassword ? (
+            <EyeOff className="w-4 h-4" />
+          ) : (
+            <Eye className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+  );
+}