@promakeai/cli 0.4.7 → 0.5.0

package/dist/registry/newsletter-section.json

@@ -20,7 +20,7 @@
       "path": "newsletter-section/newsletter-section.tsx",
       "type": "registry:component",
       "target": "$modules$/newsletter-section/newsletter-section.tsx",
-      "content": "import { FormField } from \"@/components/FormField\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\ninterface NewsletterSectionProps {\r\n  image?: string;\r\n  className?: string;\r\n}\r\n\r\nexport function NewsletterSection({\r\n  image = \"/images/placeholder.png\",\r\n  className,\r\n}: NewsletterSectionProps) {\r\n  const { t } = useTranslation(\"newsletter-section\");\r\n\r\n  const handleSubmit = (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    // Handle newsletter subscription\r\n  };\r\n\r\n  return (\r\n    <section className={`px-4 py-20 bg-accent ${className || \"\"}`}>\r\n      <div className=\"mx-auto max-w-6xl\">\r\n        <Card className=\"overflow-hidden shadow-none p-0\">\r\n          <CardContent className=\"p-0\">\r\n            <div className=\"grid md:grid-cols-2 items-center\">\r\n              <img\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n                src={image}\r\n                alt={t(\"imageAlt\", \"Newsletter\")}\r\n                width={1200}\r\n                height={800}\r\n                className=\"h-64 w-full object-cover md:h-full\"\r\n              />\r\n              <form\r\n                onSubmit={handleSubmit}\r\n                className=\"flex flex-col gap-4 p-8 max-w-md w-full mx-auto\"\r\n              >\r\n                <div className=\"space-y-1 text-center\">\r\n                  <h2 className=\"text-2xl font-bold tracking-tight\">\r\n                    {t(\"title\", \"Get the inside scoop\")}\r\n                  </h2>\r\n                  <p className=\"text-sm text-muted-foreground\">\r\n                    {t(\"description\", \"Join our newsletter to stay ahead.\")}\r\n                  </p>\r\n                </div>\r\n                <div className=\"grid gap-2 text-left\">\r\n                  <FormField label={t(\"emailLabel\", \"Email\")} htmlFor=\"newsletter-email\" required>\r\n                  <Input\r\n                    id=\"newsletter-email\"\r\n                    type=\"email\"\r\n                    placeholder={t(\"emailPlaceholder\", \"Enter your email\")}\r\n                    required\r\n                  />\r\n                  </FormField>\r\n                \r\n                </div>\r\n                <Button type=\"submit\">{t(\"subscribe\", \"Subscribe\")}</Button>\r\n              </form>\r\n            </div>\r\n          </CardContent>\r\n        </Card>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
+      "content": "import { Button } from \"@/components/ui/button\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\ninterface NewsletterSectionProps {\r\n  image?: string;\r\n  className?: string;\r\n}\r\n\r\nexport function NewsletterSection({\r\n  image = \"/images/placeholder.png\",\r\n  className,\r\n}: NewsletterSectionProps) {\r\n  const { t } = useTranslation(\"newsletter-section\");\r\n\r\n  const handleSubmit = (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    // Handle newsletter subscription\r\n  };\r\n\r\n  return (\r\n    <section className={`px-4 py-20 bg-accent ${className || \"\"}`}>\r\n      <div className=\"mx-auto max-w-6xl\">\r\n        <Card className=\"overflow-hidden shadow-none p-0\">\r\n          <CardContent className=\"p-0\">\r\n            <div className=\"grid md:grid-cols-2 items-center\">\r\n              <img\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n                src={image}\r\n                alt={t(\"imageAlt\", \"Newsletter\")}\r\n                width={1200}\r\n                height={800}\r\n                className=\"h-64 w-full object-cover md:h-full\"\r\n              />\r\n              <form\r\n                onSubmit={handleSubmit}\r\n                className=\"flex flex-col gap-4 p-8 max-w-md w-full mx-auto\"\r\n              >\r\n                <div className=\"space-y-1 text-center\">\r\n                  <h2 className=\"text-2xl font-bold tracking-tight\">\r\n                    {t(\"title\", \"Get the inside scoop\")}\r\n                  </h2>\r\n                  <p className=\"text-sm text-muted-foreground\">\r\n                    {t(\"description\", \"Join our newsletter to stay ahead.\")}\r\n                  </p>\r\n                </div>\r\n                <div className=\"grid gap-2 text-left\">\r\n                  <Label htmlFor=\"newsletter-email\">\r\n                    {t(\"emailLabel\", \"Email\")}\r\n                  </Label>\r\n                  <Input\r\n                    id=\"newsletter-email\"\r\n                    type=\"email\"\r\n                    placeholder={t(\"emailPlaceholder\", \"Enter your email\")}\r\n                    required\r\n                  />\r\n                </div>\r\n                <Button type=\"submit\">{t(\"subscribe\", \"Subscribe\")}</Button>\r\n              </form>\r\n            </div>\r\n          </CardContent>\r\n        </Card>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
     },
     {
       "path": "newsletter-section/lang/en.json",

package/dist/registry/post-card.json

@@ -18,7 +18,7 @@
       "path": "post-card/post-card.tsx",
       "type": "registry:component",
       "target": "$modules$/post-card/post-card.tsx",
-      "content": "import { Link } from \"react-router\";\r\nimport { Calendar, Eye, Clock, ArrowRight } from \"lucide-react\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardFooter,\r\n  CardHeader,\r\n} from \"@/components/ui/card\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport type { Post } from \"@/modules/blog-core/types\";\r\n\r\ninterface CardWrapperProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n}\r\n\r\nfunction CardWrapper({ children, className = \"\" }: CardWrapperProps) {\r\n  return (\r\n    <Card\r\n      className={`group overflow-hidden border-0 p-0 shadow-sm hover:shadow-lg transition-all duration-300 h-full ${className}`}\r\n    >\r\n      {children}\r\n    </Card>\r\n  );\r\n}\r\n\r\ninterface PostCardProps {\r\n  post: Post;\r\n  layout?: \"grid\" | \"list\";\r\n  showExcerpt?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function PostCard({\r\n  post,\r\n  layout = \"grid\",\r\n  showExcerpt = true,\r\n  className = \"\",\r\n}: PostCardProps) {\r\n  const { t } = useTranslation(\"post-card\");\r\n\r\n  const formatDate = (dateString: string) => {\r\n    return new Date(dateString).toLocaleDateString(\"en-US\", {\r\n      year: \"numeric\",\r\n      month: \"short\",\r\n      day: \"numeric\",\r\n    });\r\n  };\r\n\r\n  if (layout === \"list\") {\r\n    return (\r\n      <CardWrapper className={className}>\r\n        <div className=\"flex flex-col md:flex-row\">\r\n          {post.featured_image && (\r\n            <div className=\"md:w-1/3 flex-shrink-0\">\r\n              <Link to={`/blog/${post.slug}`}>\r\n                <img\r\n                  src={post.featured_image}\r\n                  alt={post.title}\r\n                  className=\"w-full h-48 md:h-full object-cover\"\r\n                  onError={(e) => {\r\n                    e.currentTarget.src = \"/images/placeholder.png\";\r\n                  }}\r\n                />\r\n              </Link>\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"flex-1 flex flex-col\">\r\n            <CardHeader className=\"pt-6 pb-3\">\r\n              {post.categories && post.categories.length > 0 && (\r\n                <div className=\"flex flex-wrap gap-1 mb-2\">\r\n                  {post.categories.slice(0, 2).map((category) => (\r\n                    <div key={category.slug} className=\"contents\" data-db-table=\"blog_categories\" data-db-id={category.slug}>\r\n                      <Badge\r\n                        variant=\"secondary\"\r\n                        className=\"text-xs\"\r\n                      >\r\n                        <Link to={`/blog?categories=${category.slug}`}>\r\n                          {category.name}\r\n                        </Link>\r\n                      </Badge>\r\n                    </div>\r\n                  ))}\r\n                </div>\r\n              )}\r\n\r\n              <h3 className=\"text-xl font-semibold line-clamp-2 group-hover:text-primary transition-colors\">\r\n                <Link to={`/blog/${post.slug}`}>{post.title}</Link>\r\n              </h3>\r\n            </CardHeader>\r\n\r\n            <CardContent className=\"flex-1 pb-3\">\r\n              {showExcerpt && post.excerpt && (\r\n                <p className=\"text-muted-foreground text-sm line-clamp-3 mb-4\">\r\n                  {post.excerpt}\r\n                </p>\r\n              )}\r\n\r\n              <div className=\"flex flex-wrap items-center gap-4 text-xs text-muted-foreground\">\r\n                <div className=\"flex items-center gap-1\">\r\n                  <Calendar className=\"h-3 w-3\" />\r\n                  <span>{formatDate(post.published_at)}</span>\r\n                </div>\r\n\r\n                {post.read_time > 0 && (\r\n                  <div className=\"flex items-center gap-1\">\r\n                    <Clock className=\"h-3 w-3\" />\r\n                    <span>\r\n                      {post.read_time} {t(\"minRead\", \"min\")}\r\n                    </span>\r\n                  </div>\r\n                )}\r\n\r\n                {post.view_count > 0 && (\r\n                  <div className=\"flex items-center gap-1\">\r\n                    <Eye className=\"h-3 w-3\" />\r\n                    <span>{post.view_count.toLocaleString()}</span>\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </CardContent>\r\n\r\n            <CardFooter className=\"pt-0 pb-6\">\r\n              <Button variant=\"ghost\" size=\"sm\" asChild>\r\n                <Link to={`/blog/${post.slug}`}>\r\n                  {t(\"readMore\", \"Read More\")}\r\n                  <ArrowRight className=\"h-3 w-3 ml-1\" />\r\n                </Link>\r\n              </Button>\r\n            </CardFooter>\r\n          </div>\r\n        </div>\r\n      </CardWrapper>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <CardWrapper className={className}>\r\n      <div className=\"flex flex-col h-full\">\r\n        {post.featured_image && (\r\n          <div className=\"aspect-video overflow-hidden\">\r\n            <Link to={`/blog/${post.slug}`}>\r\n              <img\r\n                src={post.featured_image}\r\n                alt={post.title}\r\n                className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\r\n                onError={(e) => {\r\n                  e.currentTarget.src = \"/images/placeholder.png\";\r\n                }}\r\n              />\r\n            </Link>\r\n          </div>\r\n        )}\r\n\r\n        <div className=\"flex flex-col flex-1\">\r\n          <CardHeader className=\"pt-6 pb-3\">\r\n            {post.categories && post.categories.length > 0 && (\r\n              <div className=\"flex flex-wrap gap-1 mb-2\">\r\n                {post.categories.slice(0, 2).map((category) => (\r\n                  <Badge\r\n                    key={category.slug}\r\n                    variant=\"secondary\"\r\n                    className=\"text-xs\"\r\n                  >\r\n                    <Link to={`/blog?categories=${category.slug}`}>\r\n                      {category.name}\r\n                    </Link>\r\n                  </Badge>\r\n                ))}\r\n              </div>\r\n            )}\r\n\r\n            <h3 className=\"text-lg font-semibold line-clamp-2 group-hover:text-primary transition-colors\">\r\n              <Link to={`/blog/${post.slug}`}>{post.title}</Link>\r\n            </h3>\r\n          </CardHeader>\r\n\r\n          <CardContent className=\"flex-1 pb-3\">\r\n            {showExcerpt && post.excerpt && (\r\n              <p className=\"text-muted-foreground text-sm line-clamp-3 mb-4\">\r\n                {post.excerpt}\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"flex flex-wrap items-center gap-3 text-xs text-muted-foreground\">\r\n              <div className=\"flex items-center gap-1\">\r\n                <Calendar className=\"h-3 w-3\" />\r\n                <span>{formatDate(post.published_at)}</span>\r\n              </div>\r\n\r\n              {post.read_time > 0 && (\r\n                <div className=\"flex items-center gap-1\">\r\n                  <Clock className=\"h-3 w-3\" />\r\n                  <span>\r\n                    {post.read_time} {t(\"minRead\", \"min\")}\r\n                  </span>\r\n                </div>\r\n              )}\r\n            </div>\r\n          </CardContent>\r\n\r\n          <CardFooter className=\"pt-0 pb-6 mt-auto\">\r\n            <div className=\"flex items-center justify-between w-full\">\r\n              <Button variant=\"ghost\" size=\"sm\" asChild>\r\n                <Link to={`/blog/${post.slug}`}>\r\n                  {t(\"readMore\", \"Read More\")}\r\n                  <ArrowRight className=\"h-3 w-3 ml-1\" />\r\n                </Link>\r\n              </Button>\r\n\r\n              {post.view_count > 0 && (\r\n                <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\r\n                  <Eye className=\"h-3 w-3\" />\r\n                  <span>{post.view_count.toLocaleString()}</span>\r\n                </div>\r\n              )}\r\n            </div>\r\n          </CardFooter>\r\n        </div>\r\n      </div>\r\n    </CardWrapper>\r\n  );\r\n}\r\n"
+      "content": "import { useMemo } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { Calendar, Eye, Clock, ArrowRight } from \"lucide-react\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardFooter,\r\n  CardHeader,\r\n} from \"@/components/ui/card\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useDbList } from \"@/db\";\r\nimport type { Post, BlogCategory } from \"@/modules/blog-core/types\";\r\n\r\ninterface CardWrapperProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n}\r\n\r\nfunction CardWrapper({ children, className = \"\" }: CardWrapperProps) {\r\n  return (\r\n    <Card\r\n      className={`group overflow-hidden border-0 p-0 shadow-sm hover:shadow-lg transition-all duration-300 h-full ${className}`}\r\n    >\r\n      {children}\r\n    </Card>\r\n  );\r\n}\r\n\r\ninterface PostCardProps {\r\n  post: Post;\r\n  layout?: \"grid\" | \"list\";\r\n  showExcerpt?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function PostCard({\r\n  post,\r\n  layout = \"grid\",\r\n  showExcerpt = true,\r\n  className = \"\",\r\n}: PostCardProps) {\r\n  const { t } = useTranslation(\"post-card\");\r\n  const { data: blogCategories = [] } = useDbList<BlogCategory>(\"blog_categories\");\r\n  const categoryMap = useMemo(() => new Map(blogCategories.map(c => [c.id, c])), [blogCategories]);\r\n\r\n  const formatDate = (dateString: string) => {\r\n    return new Date(dateString).toLocaleDateString(\"en-US\", {\r\n      year: \"numeric\",\r\n      month: \"short\",\r\n      day: \"numeric\",\r\n    });\r\n  };\r\n\r\n  if (layout === \"list\") {\r\n    return (\r\n      <CardWrapper className={className}>\r\n        <div className=\"flex flex-col md:flex-row\">\r\n          {post.featured_image && (\r\n            <div className=\"md:w-1/3 flex-shrink-0\">\r\n              <Link to={`/blog/${post.slug}`}>\r\n                <img\r\n                  src={post.featured_image}\r\n                  alt={post.title}\r\n                  className=\"w-full h-48 md:h-full object-cover\"\r\n                  onError={(e) => {\r\n                    e.currentTarget.src = \"/images/placeholder.png\";\r\n                  }}\r\n                />\r\n              </Link>\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"flex-1 flex flex-col\">\r\n            <CardHeader className=\"pt-6 pb-3\">\r\n              {post.categories && post.categories.length > 0 && (\r\n                <div className=\"flex flex-wrap gap-1 mb-2\">\r\n                  {post.categories.slice(0, 2).map((catId) => {\r\n                    const category = categoryMap.get(catId);\r\n                    if (!category) return null;\r\n                    return (\r\n                      <div key={catId} className=\"contents\" data-db-table=\"blog_categories\" data-db-id={catId}>\r\n                        <Badge\r\n                          variant=\"secondary\"\r\n                          className=\"text-xs\"\r\n                        >\r\n                          <Link to={`/blog?categories=${category.slug}`}>\r\n                            {category.name}\r\n                          </Link>\r\n                        </Badge>\r\n                      </div>\r\n                    );\r\n                  })}\r\n                </div>\r\n              )}\r\n\r\n              <h3 className=\"text-xl font-semibold line-clamp-2 group-hover:text-primary transition-colors\">\r\n                <Link to={`/blog/${post.slug}`}>{post.title}</Link>\r\n              </h3>\r\n            </CardHeader>\r\n\r\n            <CardContent className=\"flex-1 pb-3\">\r\n              {showExcerpt && post.excerpt && (\r\n                <p className=\"text-muted-foreground text-sm line-clamp-3 mb-4\">\r\n                  {post.excerpt}\r\n                </p>\r\n              )}\r\n\r\n              <div className=\"flex flex-wrap items-center gap-4 text-xs text-muted-foreground\">\r\n                <div className=\"flex items-center gap-1\">\r\n                  <Calendar className=\"h-3 w-3\" />\r\n                  <span>{formatDate(post.published_at)}</span>\r\n                </div>\r\n\r\n                {post.read_time > 0 && (\r\n                  <div className=\"flex items-center gap-1\">\r\n                    <Clock className=\"h-3 w-3\" />\r\n                    <span>\r\n                      {post.read_time} {t(\"minRead\", \"min\")}\r\n                    </span>\r\n                  </div>\r\n                )}\r\n\r\n                {post.view_count > 0 && (\r\n                  <div className=\"flex items-center gap-1\">\r\n                    <Eye className=\"h-3 w-3\" />\r\n                    <span>{post.view_count.toLocaleString()}</span>\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </CardContent>\r\n\r\n            <CardFooter className=\"pt-0 pb-6\">\r\n              <Button variant=\"ghost\" size=\"sm\" asChild>\r\n                <Link to={`/blog/${post.slug}`}>\r\n                  {t(\"readMore\", \"Read More\")}\r\n                  <ArrowRight className=\"h-3 w-3 ml-1\" />\r\n                </Link>\r\n              </Button>\r\n            </CardFooter>\r\n          </div>\r\n        </div>\r\n      </CardWrapper>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <CardWrapper className={className}>\r\n      <div className=\"flex flex-col h-full\">\r\n        {post.featured_image && (\r\n          <div className=\"aspect-video overflow-hidden\">\r\n            <Link to={`/blog/${post.slug}`}>\r\n              <img\r\n                src={post.featured_image}\r\n                alt={post.title}\r\n                className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\r\n                onError={(e) => {\r\n                  e.currentTarget.src = \"/images/placeholder.png\";\r\n                }}\r\n              />\r\n            </Link>\r\n          </div>\r\n        )}\r\n\r\n        <div className=\"flex flex-col flex-1\">\r\n          <CardHeader className=\"pt-6 pb-3\">\r\n            {post.categories && post.categories.length > 0 && (\r\n              <div className=\"flex flex-wrap gap-1 mb-2\">\r\n                {post.categories.slice(0, 2).map((catId) => {\r\n                  const category = categoryMap.get(catId);\r\n                  if (!category) return null;\r\n                  return (\r\n                    <Badge\r\n                      key={catId}\r\n                      variant=\"secondary\"\r\n                      className=\"text-xs\"\r\n                    >\r\n                      <Link to={`/blog?categories=${category.slug}`}>\r\n                        {category.name}\r\n                      </Link>\r\n                    </Badge>\r\n                  );\r\n                })}\r\n              </div>\r\n            )}\r\n\r\n            <h3 className=\"text-lg font-semibold line-clamp-2 group-hover:text-primary transition-colors\">\r\n              <Link to={`/blog/${post.slug}`}>{post.title}</Link>\r\n            </h3>\r\n          </CardHeader>\r\n\r\n          <CardContent className=\"flex-1 pb-3\">\r\n            {showExcerpt && post.excerpt && (\r\n              <p className=\"text-muted-foreground text-sm line-clamp-3 mb-4\">\r\n                {post.excerpt}\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"flex flex-wrap items-center gap-3 text-xs text-muted-foreground\">\r\n              <div className=\"flex items-center gap-1\">\r\n                <Calendar className=\"h-3 w-3\" />\r\n                <span>{formatDate(post.published_at)}</span>\r\n              </div>\r\n\r\n              {post.read_time > 0 && (\r\n                <div className=\"flex items-center gap-1\">\r\n                  <Clock className=\"h-3 w-3\" />\r\n                  <span>\r\n                    {post.read_time} {t(\"minRead\", \"min\")}\r\n                  </span>\r\n                </div>\r\n              )}\r\n            </div>\r\n          </CardContent>\r\n\r\n          <CardFooter className=\"pt-0 pb-6 mt-auto\">\r\n            <div className=\"flex items-center justify-between w-full\">\r\n              <Button variant=\"ghost\" size=\"sm\" asChild>\r\n                <Link to={`/blog/${post.slug}`}>\r\n                  {t(\"readMore\", \"Read More\")}\r\n                  <ArrowRight className=\"h-3 w-3 ml-1\" />\r\n                </Link>\r\n              </Button>\r\n\r\n              {post.view_count > 0 && (\r\n                <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\r\n                  <Eye className=\"h-3 w-3\" />\r\n                  <span>{post.view_count.toLocaleString()}</span>\r\n                </div>\r\n              )}\r\n            </div>\r\n          </CardFooter>\r\n        </div>\r\n      </div>\r\n    </CardWrapper>\r\n  );\r\n}\r\n"
     },
     {
       "path": "post-card/lang/en.json",

package/dist/registry/post-detail-block.json

@@ -18,7 +18,7 @@
       "path": "post-detail-block/post-detail-block.tsx",
       "type": "registry:block",
       "target": "$modules$/post-detail-block/post-detail-block.tsx",
-      "content": "import { Link } from \"react-router\";\r\nimport {\r\n  Calendar,\r\n  User,\r\n  Eye,\r\n  Clock,\r\n  ArrowLeft,\r\n  Share2,\r\n  Heart,\r\n} from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Separator } from \"@/components/ui/separator\";\r\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport type { Post } from \"@/modules/blog-core/types\";\r\n\r\ninterface PostDetailBlockProps {\r\n  post: Post;\r\n  onShare?: () => void;\r\n  onAddToFavorites?: () => void;\r\n  isFavorite?: boolean;\r\n}\r\n\r\nexport function PostDetailBlock({\r\n  post,\r\n  onShare,\r\n  onAddToFavorites,\r\n  isFavorite = false,\r\n}: PostDetailBlockProps) {\r\n  const { t } = useTranslation(\"post-detail-block\");\r\n\r\n  const formatDate = (dateString?: string) => {\r\n    if (!dateString) return \"\";\r\n    return new Date(dateString).toLocaleDateString(\"en-US\", {\r\n      year: \"numeric\",\r\n      month: \"long\",\r\n      day: \"numeric\",\r\n    });\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8\">\r\n      <div className=\"max-w-4xl mx-auto\">\r\n        {/* Back Button */}\r\n        <div className=\"mb-6\">\r\n          <Button variant=\"ghost\" asChild>\r\n            <Link to=\"/blog\">\r\n              <ArrowLeft className=\"w-4 h-4 mr-2\" />\r\n              {t(\"backToBlog\", \"Back to Blog\")}\r\n            </Link>\r\n          </Button>\r\n        </div>\r\n\r\n        {/* Post Header */}\r\n        <div className=\"mb-8\">\r\n          {/* Category Badge */}\r\n          {post.category && (\r\n            <Badge variant=\"secondary\" className=\"mb-4\">\r\n              {post.category}\r\n            </Badge>\r\n          )}\r\n\r\n          {/* Title */}\r\n          <h1 className=\"text-4xl md:text-5xl font-bold mb-6\">{post.title}</h1>\r\n\r\n          {/* Meta Information */}\r\n          <div className=\"flex flex-wrap items-center gap-4 text-muted-foreground mb-6\">\r\n            {post.author && (\r\n              <div className=\"flex items-center gap-2\">\r\n                {post.author_avatar ? (\r\n                  <Avatar className=\"w-8 h-8\">\r\n                    <AvatarImage src={post.author_avatar} alt={post.author} />\r\n                    <AvatarFallback>\r\n                      {post.author\r\n                        .split(\" \")\r\n                        .map((n) => n[0])\r\n                        .join(\"\")}\r\n                    </AvatarFallback>\r\n                  </Avatar>\r\n                ) : (\r\n                  <User className=\"w-4 h-4\" />\r\n                )}\r\n                <span className=\"font-medium\">{post.author}</span>\r\n              </div>\r\n            )}\r\n\r\n            {post.published_at && (\r\n              <div className=\"flex items-center gap-1\">\r\n                <Calendar className=\"w-4 h-4\" />\r\n                <span>{formatDate(post.published_at)}</span>\r\n              </div>\r\n            )}\r\n\r\n            {post.read_time && (\r\n              <div className=\"flex items-center gap-1\">\r\n                <Clock className=\"w-4 h-4\" />\r\n                <span>\r\n                  {post.read_time} {t(\"minRead\", \"min read\")}\r\n                </span>\r\n              </div>\r\n            )}\r\n\r\n            {post.view_count !== undefined && (\r\n              <div className=\"flex items-center gap-1\">\r\n                <Eye className=\"w-4 h-4\" />\r\n                <span>\r\n                  {post.view_count} {t(\"views\", \"views\")}\r\n                </span>\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Actions */}\r\n          <div className=\"flex gap-2\">\r\n            {onShare && (\r\n              <Button variant=\"outline\" size=\"sm\" onClick={onShare}>\r\n                <Share2 className=\"w-4 h-4 mr-2\" />\r\n                {t(\"share\", \"Share\")}\r\n              </Button>\r\n            )}\r\n            {onAddToFavorites && (\r\n              <Button\r\n                variant=\"outline\"\r\n                size=\"sm\"\r\n                onClick={onAddToFavorites}\r\n                className={isFavorite ? \"text-red-500\" : \"\"}\r\n              >\r\n                <Heart\r\n                  className={`w-4 h-4 mr-2 ${isFavorite ? \"fill-current\" : \"\"}`}\r\n                />\r\n                {isFavorite\r\n                  ? t(\"removeFromFavorites\", \"Remove\")\r\n                  : t(\"addToFavorites\", \"Add to Favorites\")}\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Featured Image */}\r\n        {post.featured_image && (\r\n          <div className=\"mb-8\">\r\n            <img\r\n              src={post.featured_image}\r\n              alt={post.title}\r\n              className=\"w-full h-auto rounded-lg\"\r\n            />\r\n          </div>\r\n        )}\r\n\r\n        <Separator className=\"my-8\" />\r\n\r\n        {/* Post Content */}\r\n        <article className=\"prose prose-lg dark:prose-invert max-w-none\">\r\n          <div\r\n            dangerouslySetInnerHTML={{ __html: post.content }}\r\n            className=\"leading-relaxed\"\r\n          />\r\n        </article>\r\n\r\n        {/* Tags */}\r\n        {post.tags && post.tags.length > 0 && (\r\n          <div className=\"mt-8\">\r\n            <Separator className=\"mb-4\" />\r\n            <div className=\"flex items-center gap-2 flex-wrap\">\r\n              <span className=\"text-sm font-medium text-muted-foreground\">\r\n                {t(\"tags\", \"Tags\")}:\r\n              </span>\r\n              {post.tags.map((tag, index) => (\r\n                <Badge key={index} variant=\"outline\">\r\n                  {tag}\r\n                </Badge>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        )}\r\n\r\n        {/* Author Box */}\r\n        {post.author && (\r\n          <div className=\"mt-12 p-6 bg-muted/30 rounded-lg\">\r\n            <div className=\"flex items-start gap-4\">\r\n              {post.author_avatar && (\r\n                <Avatar className=\"w-16 h-16\">\r\n                  <AvatarImage src={post.author_avatar} alt={post.author} />\r\n                  <AvatarFallback>\r\n                    {post.author\r\n                      .split(\" \")\r\n                      .map((n) => n[0])\r\n                      .join(\"\")}\r\n                  </AvatarFallback>\r\n                </Avatar>\r\n              )}\r\n              <div>\r\n                <h3 className=\"font-semibold text-lg mb-1\">{post.author}</h3>\r\n                <p className=\"text-sm text-muted-foreground\">\r\n                  {t(\"authorDescription\", \"Author of this post\")}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"
+      "content": "import { useMemo } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport {\r\n  Calendar,\r\n  User,\r\n  Eye,\r\n  Clock,\r\n  ArrowLeft,\r\n  Share2,\r\n  Heart,\r\n} from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Separator } from \"@/components/ui/separator\";\r\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useDbList } from \"@/db\";\r\nimport type { Post, BlogCategory } from \"@/modules/blog-core/types\";\r\n\r\ninterface PostDetailBlockProps {\r\n  post: Post;\r\n  onShare?: () => void;\r\n  onAddToFavorites?: () => void;\r\n  isFavorite?: boolean;\r\n}\r\n\r\nexport function PostDetailBlock({\r\n  post,\r\n  onShare,\r\n  onAddToFavorites,\r\n  isFavorite = false,\r\n}: PostDetailBlockProps) {\r\n  const { t } = useTranslation(\"post-detail-block\");\r\n  const { data: blogCategories = [] } = useDbList<BlogCategory>(\"blog_categories\");\r\n  const categoryMap = useMemo(() => new Map(blogCategories.map(c => [c.id, c])), [blogCategories]);\r\n\r\n  const formatDate = (dateString?: string) => {\r\n    if (!dateString) return \"\";\r\n    return new Date(dateString).toLocaleDateString(\"en-US\", {\r\n      year: \"numeric\",\r\n      month: \"long\",\r\n      day: \"numeric\",\r\n    });\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8\">\r\n      <div className=\"max-w-4xl mx-auto\">\r\n        {/* Back Button */}\r\n        <div className=\"mb-6\">\r\n          <Button variant=\"ghost\" asChild>\r\n            <Link to=\"/blog\">\r\n              <ArrowLeft className=\"w-4 h-4 mr-2\" />\r\n              {t(\"backToBlog\", \"Back to Blog\")}\r\n            </Link>\r\n          </Button>\r\n        </div>\r\n\r\n        {/* Post Header */}\r\n        <div className=\"mb-8\">\r\n          {/* Category Badge */}\r\n          {categoryMap.get(post.categories?.[0] as number)?.name && (\r\n            <Badge variant=\"secondary\" className=\"mb-4\">\r\n              {categoryMap.get(post.categories?.[0] as number)?.name}\r\n            </Badge>\r\n          )}\r\n\r\n          {/* Title */}\r\n          <h1 className=\"text-4xl md:text-5xl font-bold mb-6\">{post.title}</h1>\r\n\r\n          {/* Meta Information */}\r\n          <div className=\"flex flex-wrap items-center gap-4 text-muted-foreground mb-6\">\r\n            {post.author && (\r\n              <div className=\"flex items-center gap-2\">\r\n                {post.author_avatar ? (\r\n                  <Avatar className=\"w-8 h-8\">\r\n                    <AvatarImage src={post.author_avatar} alt={post.author} />\r\n                    <AvatarFallback>\r\n                      {post.author\r\n                        .split(\" \")\r\n                        .map((n) => n[0])\r\n                        .join(\"\")}\r\n                    </AvatarFallback>\r\n                  </Avatar>\r\n                ) : (\r\n                  <User className=\"w-4 h-4\" />\r\n                )}\r\n                <span className=\"font-medium\">{post.author}</span>\r\n              </div>\r\n            )}\r\n\r\n            {post.published_at && (\r\n              <div className=\"flex items-center gap-1\">\r\n                <Calendar className=\"w-4 h-4\" />\r\n                <span>{formatDate(post.published_at)}</span>\r\n              </div>\r\n            )}\r\n\r\n            {post.read_time && (\r\n              <div className=\"flex items-center gap-1\">\r\n                <Clock className=\"w-4 h-4\" />\r\n                <span>\r\n                  {post.read_time} {t(\"minRead\", \"min read\")}\r\n                </span>\r\n              </div>\r\n            )}\r\n\r\n            {post.view_count !== undefined && (\r\n              <div className=\"flex items-center gap-1\">\r\n                <Eye className=\"w-4 h-4\" />\r\n                <span>\r\n                  {post.view_count} {t(\"views\", \"views\")}\r\n                </span>\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Actions */}\r\n          <div className=\"flex gap-2\">\r\n            {onShare && (\r\n              <Button variant=\"outline\" size=\"sm\" onClick={onShare}>\r\n                <Share2 className=\"w-4 h-4 mr-2\" />\r\n                {t(\"share\", \"Share\")}\r\n              </Button>\r\n            )}\r\n            {onAddToFavorites && (\r\n              <Button\r\n                variant=\"outline\"\r\n                size=\"sm\"\r\n                onClick={onAddToFavorites}\r\n                className={isFavorite ? \"text-red-500\" : \"\"}\r\n              >\r\n                <Heart\r\n                  className={`w-4 h-4 mr-2 ${isFavorite ? \"fill-current\" : \"\"}`}\r\n                />\r\n                {isFavorite\r\n                  ? t(\"removeFromFavorites\", \"Remove\")\r\n                  : t(\"addToFavorites\", \"Add to Favorites\")}\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Featured Image */}\r\n        {post.featured_image && (\r\n          <div className=\"mb-8\">\r\n            <img\r\n              src={post.featured_image}\r\n              alt={post.title}\r\n              className=\"w-full h-auto rounded-lg\"\r\n            />\r\n          </div>\r\n        )}\r\n\r\n        <Separator className=\"my-8\" />\r\n\r\n        {/* Post Content */}\r\n        <article className=\"prose prose-lg dark:prose-invert max-w-none\">\r\n          <div\r\n            dangerouslySetInnerHTML={{ __html: post.content }}\r\n            className=\"leading-relaxed\"\r\n          />\r\n        </article>\r\n\r\n        {/* Tags */}\r\n        {post.tags && post.tags.length > 0 && (\r\n          <div className=\"mt-8\">\r\n            <Separator className=\"mb-4\" />\r\n            <div className=\"flex items-center gap-2 flex-wrap\">\r\n              <span className=\"text-sm font-medium text-muted-foreground\">\r\n                {t(\"tags\", \"Tags\")}:\r\n              </span>\r\n              {post.tags.map((tag, index) => (\r\n                <Badge key={index} variant=\"outline\">\r\n                  {tag}\r\n                </Badge>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        )}\r\n\r\n        {/* Author Box */}\r\n        {post.author && (\r\n          <div className=\"mt-12 p-6 bg-muted/30 rounded-lg\">\r\n            <div className=\"flex items-start gap-4\">\r\n              {post.author_avatar && (\r\n                <Avatar className=\"w-16 h-16\">\r\n                  <AvatarImage src={post.author_avatar} alt={post.author} />\r\n                  <AvatarFallback>\r\n                    {post.author\r\n                      .split(\" \")\r\n                      .map((n) => n[0])\r\n                      .join(\"\")}\r\n                  </AvatarFallback>\r\n                </Avatar>\r\n              )}\r\n              <div>\r\n                <h3 className=\"font-semibold text-lg mb-1\">{post.author}</h3>\r\n                <p className=\"text-sm text-muted-foreground\">\r\n                  {t(\"authorDescription\", \"Author of this post\")}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"
     },
     {
       "path": "post-detail-block/lang/en.json",

package/dist/registry/post-detail-page.json

@@ -2,12 +2,12 @@
   "name": "post-detail-page",
   "type": "registry:page",
   "title": "Post Detail Page",
-  "description": "Blog post detail page that fetches post data by slug from URL params. Uses useDbPostBySlug hook from blog-core and renders PostDetailBlock. Includes loading skeleton, error handling for not found posts, and automatic page title.",
+  "description": "Blog post detail page that fetches post data by slug from URL params. Uses useDbGet from @/db and renders PostDetailBlock. Includes loading skeleton, error handling for not found posts, and automatic page title.",
   "registryDependencies": [
     "blog-core",
     "post-detail-block"
   ],
-  "usage": "import { PostDetailPage } from '@/modules/post-detail-page';\n\n<Route path=\"/blog/:slug\" element={<PostDetailPage />} />\n\n• Uses useDbPostBySlug() from blog-core\n• Fetches post by slug from URL params\n• Shows loading skeleton while fetching\n• Handles post not found state",
+  "usage": "import { PostDetailPage } from '@/modules/post-detail-page';\n\n<Route path=\"/blog/:slug\" element={<PostDetailPage />} />\n\n• Uses useDbGet() from @/db to fetch post by slug\n• Fetches post by slug from URL params\n• Shows loading skeleton while fetching\n• Handles post not found state",
   "route": {
     "path": "/blog/:slug",
     "componentName": "PostDetailPage"
@@ -23,7 +23,7 @@
       "path": "post-detail-page/post-detail-page.tsx",
       "type": "registry:page",
       "target": "$modules$/post-detail-page/post-detail-page.tsx",
-      "content": "import { useParams } from \"react-router\";\r\nimport { useDbPostBySlug } from \"@/modules/blog-core\";\r\nimport { PostDetailBlock } from \"@/modules/post-detail-block\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport function PostDetailPage() {\r\n  const { t } = useTranslation(\"post-detail-page\");\r\n  const { slug } = useParams<{ slug: string }>();\r\n  const { post, loading, error } = useDbPostBySlug(slug || \"\");\r\n\r\n  usePageTitle({ title: post?.title || t(\"loading\", \"Loading...\") });\r\n\r\n  if (loading) {\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          <div className=\"animate-pulse space-y-4\">\r\n            <div className=\"h-8 bg-muted rounded w-1/3\"></div>\r\n            <div className=\"h-4 bg-muted rounded w-1/4\"></div>\r\n            <div className=\"h-64 bg-muted rounded\"></div>\r\n            <div className=\"space-y-2\">\r\n              <div className=\"h-4 bg-muted rounded\"></div>\r\n              <div className=\"h-4 bg-muted rounded\"></div>\r\n              <div className=\"h-4 bg-muted rounded w-3/4\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  if (error || !post) {\r\n    return (\r\n      <Layout>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8 text-center\">\r\n          <h1 className=\"text-2xl font-bold mb-4\">{t(\"notFound\", \"Post Not Found\")}</h1>\r\n          <p className=\"text-muted-foreground\">{t(\"notFoundDescription\", \"The post you're looking for doesn't exist or has been removed.\")}</p>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Layout>\r\n      <PostDetailBlock post={post} />\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default PostDetailPage;\r\n"
+      "content": "import { useParams } from \"react-router\";\r\nimport { useDbGet } from \"@/db\";\r\nimport type { Post } from \"@/modules/blog-core/types\";\r\nimport { PostDetailBlock } from \"@/modules/post-detail-block\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport function PostDetailPage() {\r\n  const { t } = useTranslation(\"post-detail-page\");\r\n  const { slug } = useParams<{ slug: string }>();\r\n  const { data: post, isLoading: loading, error } = useDbGet<Post>(\"posts\", {\r\n    where: { slug: slug || \"\" },\r\n    enabled: !!slug,\r\n  });\r\n\r\n  usePageTitle({ title: post?.title || t(\"loading\", \"Loading...\") });\r\n\r\n  if (loading) {\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          <div className=\"animate-pulse space-y-4\">\r\n            <div className=\"h-8 bg-muted rounded w-1/3\"></div>\r\n            <div className=\"h-4 bg-muted rounded w-1/4\"></div>\r\n            <div className=\"h-64 bg-muted rounded\"></div>\r\n            <div className=\"space-y-2\">\r\n              <div className=\"h-4 bg-muted rounded\"></div>\r\n              <div className=\"h-4 bg-muted rounded\"></div>\r\n              <div className=\"h-4 bg-muted rounded w-3/4\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  if (error || !post) {\r\n    return (\r\n      <Layout>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8 text-center\">\r\n          <h1 className=\"text-2xl font-bold mb-4\">{t(\"notFound\", \"Post Not Found\")}</h1>\r\n          <p className=\"text-muted-foreground\">{t(\"notFoundDescription\", \"The post you're looking for doesn't exist or has been removed.\")}</p>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Layout>\r\n      <PostDetailBlock post={post} />\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default PostDetailPage;\r\n"
     },
     {
       "path": "post-detail-page/lang/en.json",

package/dist/registry/product-card-detailed.json

@@ -22,7 +22,7 @@
       "path": "product-card-detailed/product-card-detailed.tsx",
       "type": "registry:component",
       "target": "$modules$/product-card-detailed/product-card-detailed.tsx",
-      "content": "import { Link, useNavigate } from \"react-router\";\r\nimport { Heart } from \"lucide-react\";\r\nimport { toast } from \"sonner\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  formatPrice,\r\n  type Product,\r\n} from \"@/modules/ecommerce-core\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ProductCardDetailedProps {\r\n  product: Product;\r\n  className?: string;\r\n}\r\n\r\nexport function ProductCardDetailed({\r\n  product,\r\n  className,\r\n}: ProductCardDetailedProps) {\r\n  const { t } = useTranslation(\"product-card-detailed\");\r\n  const navigate = useNavigate();\r\n  const { addItem } = useCart();\r\n  const { isFavorite, addToFavorites, removeFromFavorites } = useFavorites();\r\n  const currency = (constants.site as any).currency || \"USD\";\r\n\r\n  if (!product) {\r\n    return null;\r\n  }\r\n\r\n  const price = product.on_sale && product.sale_price\r\n    ? product.sale_price\r\n    : product.price;\r\n\r\n  const handleAddToCart = () => {\r\n    addItem(product);\r\n    toast.success(t(\"addedToCart\", \"Added to cart!\"));\r\n  };\r\n\r\n  const handleBuyNow = () => {\r\n    addItem(product);\r\n    navigate(\"/checkout\");\r\n  };\r\n\r\n  const handleToggleFavorite = () => {\r\n    if (isFavorite(product.id)) {\r\n      removeFromFavorites(product.id);\r\n    } else {\r\n      addToFavorites(product);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"group relative block overflow-hidden h-full flex flex-col\",\r\n        className\r\n      )}\r\n    >\r\n      <div className=\"relative\">\r\n        <button\r\n          onClick={handleToggleFavorite}\r\n          className=\"absolute end-4 top-4 z-10 rounded-full bg-background p-1.5 transition hover:text-primary\"\r\n        >\r\n          <span className=\"sr-only\">{t(\"wishlist\", \"Wishlist\")}</span>\r\n          <Heart\r\n            className={cn(\r\n              \"size-4\",\r\n              isFavorite(product.id) && \"fill-current text-red-500\"\r\n            )}\r\n          />\r\n        </button>\r\n\r\n        <Link to={`/products/${product.slug}`}>\r\n          <img\r\n            src={product.images[0] || \"/images/placeholder.png\"}\r\n            alt={product.name}\r\n            className=\"h-64 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-72\"\r\n          />\r\n        </Link>\r\n      </div>\r\n\r\n      <div className=\"relative border border-border bg-background p-6 flex-1 flex flex-col\">\r\n        <p>\r\n          {formatPrice(price, currency)}\r\n          {product.on_sale && product.sale_price && (\r\n            <span className=\"text-muted-foreground line-through ml-2\">\r\n              {formatPrice(product.price, currency)}\r\n            </span>\r\n          )}\r\n        </p>\r\n\r\n        <h3 className=\"mt-1.5 text-lg font-medium\">\r\n          <Link to={`/products/${product.slug}`} className=\"hover:underline\">\r\n            {product.name}\r\n          </Link>\r\n        </h3>\r\n\r\n        <div className=\"mt-1.5 min-h-[4.5rem]\">\r\n          {product.description && (\r\n            <p className=\"line-clamp-3 text-muted-foreground text-sm\">\r\n              {product.description}\r\n            </p>\r\n          )}\r\n        </div>\r\n\r\n        <div className=\"mt-auto pt-4 flex flex-col gap-3\">\r\n          <Button\r\n            className=\"w-full transition hover:scale-105\"\r\n            onClick={handleBuyNow}\r\n          >\r\n            {t(\"buyNow\", \"Buy Now\")}\r\n          </Button>\r\n          <Button\r\n            variant=\"secondary\"\r\n            className=\"w-full transition hover:scale-105\"\r\n            onClick={handleAddToCart}\r\n          >\r\n            {t(\"addToCart\", \"Add to Cart\")}\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"
+      "content": "import { Link, useNavigate } from \"react-router\";\r\nimport { Heart } from \"lucide-react\";\r\nimport { toast } from \"sonner\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  formatPrice,\r\n  type Product,\r\n} from \"@/modules/ecommerce-core\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ProductCardDetailedProps {\r\n  product: Product;\r\n  className?: string;\r\n}\r\n\r\nexport function ProductCardDetailed({\r\n  product,\r\n  className,\r\n}: ProductCardDetailedProps) {\r\n  const { t } = useTranslation(\"product-card-detailed\");\r\n  const navigate = useNavigate();\r\n  const { addItem } = useCart();\r\n  const { isFavorite, addToFavorites, removeFromFavorites } = useFavorites();\r\n  const currency = (constants.site as any).currency || \"USD\";\r\n\r\n  if (!product) {\r\n    return null;\r\n  }\r\n\r\n  const price = product.on_sale && product.sale_price\r\n    ? product.sale_price\r\n    : product.price;\r\n\r\n  const handleAddToCart = () => {\r\n    addItem(product);\r\n    toast.success(t(\"addedToCart\", \"Added to cart!\"));\r\n  };\r\n\r\n  const handleBuyNow = () => {\r\n    addItem(product);\r\n    navigate(\"/checkout\");\r\n  };\r\n\r\n  const handleToggleFavorite = () => {\r\n    if (isFavorite(product.id)) {\r\n      removeFromFavorites(product.id);\r\n    } else {\r\n      addToFavorites(product);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"group relative block overflow-hidden h-full flex flex-col\",\r\n        className\r\n      )}\r\n    >\r\n      <div className=\"relative\">\r\n        <button\r\n          onClick={handleToggleFavorite}\r\n          className=\"absolute end-4 top-4 z-10 rounded-full bg-background p-1.5 transition hover:text-primary\"\r\n        >\r\n          <span className=\"sr-only\">{t(\"wishlist\", \"Wishlist\")}</span>\r\n          <Heart\r\n            className={cn(\r\n              \"size-4\",\r\n              isFavorite(product.id) && \"fill-current text-red-500\"\r\n            )}\r\n          />\r\n        </button>\r\n\r\n        <Link to={`/products/${product.slug}`}>\r\n          <img\r\n            src={product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"}\r\n            alt={product.name}\r\n            className=\"h-64 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-72\"\r\n          />\r\n        </Link>\r\n      </div>\r\n\r\n      <div className=\"relative border border-border bg-background p-6 flex-1 flex flex-col\">\r\n        <p>\r\n          {formatPrice(price, currency)}\r\n          {product.on_sale && product.sale_price && (\r\n            <span className=\"text-muted-foreground line-through ml-2\">\r\n              {formatPrice(product.price, currency)}\r\n            </span>\r\n          )}\r\n        </p>\r\n\r\n        <h3 className=\"mt-1.5 text-lg font-medium\">\r\n          <Link to={`/products/${product.slug}`} className=\"hover:underline\">\r\n            {product.name}\r\n          </Link>\r\n        </h3>\r\n\r\n        <div className=\"mt-1.5 min-h-[4.5rem]\">\r\n          {product.description && (\r\n            <p className=\"line-clamp-3 text-muted-foreground text-sm\">\r\n              {product.description}\r\n            </p>\r\n          )}\r\n        </div>\r\n\r\n        <div className=\"mt-auto pt-4 flex flex-col gap-3\">\r\n          <Button\r\n            className=\"w-full transition hover:scale-105\"\r\n            onClick={handleBuyNow}\r\n          >\r\n            {t(\"buyNow\", \"Buy Now\")}\r\n          </Button>\r\n          <Button\r\n            variant=\"secondary\"\r\n            className=\"w-full transition hover:scale-105\"\r\n            onClick={handleAddToCart}\r\n          >\r\n            {t(\"addToCart\", \"Add to Cart\")}\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"
     },
     {
       "path": "product-card-detailed/lang/en.json",

package/dist/registry/product-card.json

@@ -18,7 +18,7 @@
       "path": "product-card/product-card.tsx",
       "type": "registry:component",
       "target": "$modules$/product-card/product-card.tsx",
-      "content": "import React from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { Heart, ShoppingCart } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\nimport { useCart, useFavorites, formatPrice } from \"@/modules/ecommerce-core\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface ProductCardProps {\r\n  product: Product;\r\n  variant?: \"grid\" | \"list\" | \"featured\" | \"compact\";\r\n  className?: string;\r\n}\r\n\r\nexport const ProductCard: React.FC<ProductCardProps> = ({\r\n  product,\r\n  variant = \"grid\",\r\n  className,\r\n}) => {\r\n  const { addItem } = useCart();\r\n  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites();\r\n  const { t } = useTranslation(\"product-card\");\r\n\r\n  const currentPrice = product.on_sale\r\n    ? product.sale_price || product.price\r\n    : product.price;\r\n  const isProductFavorite = isFavorite(product.id);\r\n  const isOutOfStock = product.stock <= 0;\r\n\r\n  const handleAddToCart = (e: React.MouseEvent) => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n\r\n    if (isOutOfStock) {\r\n      return; // Don't add to cart if out of stock\r\n    }\r\n\r\n    addItem(product);\r\n  };\r\n\r\n  const handleToggleFavorite = (e: React.MouseEvent) => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n\r\n    if (isProductFavorite) {\r\n      removeFromFavorites(product.id);\r\n    } else {\r\n      addToFavorites(product);\r\n    }\r\n  };\r\n\r\n  if (variant === \"list\") {\r\n    return (\r\n      <Card\r\n        className={cn(\r\n          \"overflow-hidden p-0 hover:shadow-lg transition-all duration-200\",\r\n          className\r\n        )}\r\n      >\r\n        <Link\r\n          to={`/products/${product.slug}`}\r\n          className=\"flex flex-col sm:flex-row\"\r\n        >\r\n          <div className=\"w-full sm:w-48 md:w-56 h-48 sm:h-56 flex-shrink-0 relative\">\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\"\r\n            />\r\n            {/* Badges on image */}\r\n            <div className=\"absolute top-3 left-3 flex flex-wrap gap-1.5 max-w-[calc(100%-1.5rem)]\">\r\n              {isOutOfStock && (\r\n                <Badge\r\n                  variant=\"secondary\"\r\n                  className=\"text-xs font-semibold shadow-md bg-muted text-muted-foreground border-0\"\r\n                >\r\n                  {t(\"outOfStock\", \"Out of Stock\")}\r\n                </Badge>\r\n              )}\r\n              {!isOutOfStock && product.on_sale && (\r\n                <Badge\r\n                  variant=\"destructive\"\r\n                  className=\"text-xs font-semibold shadow-md bg-red-600 hover:bg-red-700 text-white border-0\"\r\n                >\r\n                  {t(\"sale\", \"Sale\")}\r\n                </Badge>\r\n              )}\r\n              {!isOutOfStock && product.is_new && (\r\n                <Badge\r\n                  variant=\"secondary\"\r\n                  className=\"text-xs font-semibold shadow-md bg-blue-600 hover:bg-blue-700 text-white border-0\"\r\n                >\r\n                  {t(\"new\", \"New\")}\r\n                </Badge>\r\n              )}\r\n              {!isOutOfStock && product.featured && (\r\n                <Badge\r\n                  variant=\"default\"\r\n                  className=\"text-xs font-semibold shadow-md bg-green-600 hover:bg-green-700 text-white border-0\"\r\n                >\r\n                  {t(\"featured\", \"Featured\")}\r\n                </Badge>\r\n              )}\r\n            </div>\r\n          </div>\r\n          <CardContent className=\"flex-1 p-4 sm:p-6\">\r\n            <div className=\"flex flex-col sm:flex-row sm:justify-between sm:items-start h-full gap-4\">\r\n              <div className=\"flex-1 flex flex-col justify-between\">\r\n                <div>\r\n                  <h3 className=\"text-lg sm:text-xl font-semibold text-foreground mb-2 sm:mb-3 line-clamp-2 leading-normal\">\r\n                    {product.name}\r\n                  </h3>\r\n                  <p className=\"text-sm sm:text-base text-muted-foreground mb-3 sm:mb-4 line-clamp-2 sm:line-clamp-3 leading-relaxed\">\r\n                    {product.description}\r\n                  </p>\r\n                </div>\r\n                <div className=\"flex items-center gap-3\">\r\n                  <div className=\"flex flex-col gap-0.5\">\r\n                    {product.on_sale && (\r\n                      <span className=\"text-sm sm:text-base text-muted-foreground line-through\">\r\n                        {formatPrice(product.price, constants.site.currency)}\r\n                      </span>\r\n                    )}\r\n                    <span className=\"text-lg sm:text-xl font-bold text-foreground\">\r\n                      {formatPrice(currentPrice, constants.site.currency)}\r\n                    </span>\r\n                    {product.on_sale && (\r\n                      <span className=\"text-xs sm:text-sm text-green-600 dark:text-green-400 font-medium\">\r\n                        {t(\"save\", \"Save\")}{\" \"}\r\n                        {formatPrice(\r\n                          product.price - currentPrice,\r\n                          constants.site.currency\r\n                        )}\r\n                      </span>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div className=\"flex sm:flex-col gap-3 sm:ml-6 justify-end sm:justify-start\">\r\n                <Button\r\n                  size=\"sm\"\r\n                  variant=\"outline\"\r\n                  onClick={handleToggleFavorite}\r\n                  className={cn(\r\n                    \"w-10 h-10 sm:w-12 sm:h-12 p-0 shadow-sm hover:shadow-md transition-all duration-200\",\r\n                    isProductFavorite\r\n                      ? \"text-red-600 dark:text-red-400 border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-950 hover:bg-red-100 dark:hover:bg-red-900 hover:border-red-400\"\r\n                      : \"text-muted-foreground border-border bg-card hover:bg-muted hover:text-red-500 hover:border-red-300\"\r\n                  )}\r\n                >\r\n                  <Heart\r\n                    className={cn(\r\n                      \"w-4 h-4 sm:w-5 sm:h-5\",\r\n                      isProductFavorite && \"fill-current\"\r\n                    )}\r\n                  />\r\n                </Button>\r\n                <Button\r\n                  size=\"sm\"\r\n                  onClick={handleAddToCart}\r\n                  disabled={isOutOfStock}\r\n                  className={cn(\r\n                    \"w-10 h-10 sm:w-12 sm:h-12 p-0 shadow-sm hover:shadow-md transition-all duration-200\",\r\n                    isOutOfStock && \"opacity-50 cursor-not-allowed\"\r\n                  )}\r\n                >\r\n                  <ShoppingCart className=\"w-4 h-4 sm:w-5 sm:h-5\" />\r\n                </Button>\r\n              </div>\r\n            </div>\r\n          </CardContent>\r\n        </Link>\r\n      </Card>\r\n    );\r\n  }\r\n\r\n  // Grid, Featured, and Compact variants\r\n  return (\r\n    <Card\r\n      className={cn(\r\n        \"group overflow-hidden border-0 p-0 shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 bg-card rounded-2xl h-full flex flex-col\",\r\n        variant === \"compact\" && \"max-w-xs\",\r\n        className\r\n      )}\r\n    >\r\n      <Link to={`/products/${product.slug}`} className=\"flex flex-col h-full\">\r\n        <div className=\"relative\">\r\n          <div\r\n            className={cn(\r\n              \"w-full bg-muted overflow-hidden\",\r\n              variant === \"featured\"\r\n                ? \"aspect-square\"\r\n                : variant === \"compact\"\r\n                ? \"aspect-square\"\r\n                : \"aspect-[4/3]\"\r\n            )}\r\n          >\r\n            <img\r\n              src={product.images[0] || \"/images/placeholder.png\"}\r\n              alt={product.name}\r\n              className=\"absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\r\n            />\r\n          </div>\r\n\r\n          {/* Badges */}\r\n          <div className=\"absolute top-3 left-3 flex flex-col gap-1.5\">\r\n            {isOutOfStock && (\r\n              <Badge\r\n                variant=\"secondary\"\r\n                className=\"text-xs font-semibold shadow-lg bg-muted text-muted-foreground border-0\"\r\n              >\r\n                {t(\"outOfStock\", \"Out of Stock\")}\r\n              </Badge>\r\n            )}\r\n            {!isOutOfStock && product.on_sale && (\r\n              <Badge\r\n                variant=\"destructive\"\r\n                className=\"text-xs font-semibold shadow-lg bg-red-600 hover:bg-red-700 text-white border-0\"\r\n              >\r\n                {t(\"sale\", \"Sale\")}\r\n              </Badge>\r\n            )}\r\n            {!isOutOfStock && product.is_new && (\r\n              <Badge\r\n                variant=\"secondary\"\r\n                className=\"text-xs font-semibold shadow-lg bg-blue-600 hover:bg-blue-700 text-white border-0\"\r\n              >\r\n                {t(\"new\", \"New\")}\r\n              </Badge>\r\n            )}\r\n            {!isOutOfStock && product.featured && (\r\n              <Badge\r\n                variant=\"default\"\r\n                className=\"text-xs font-semibold shadow-lg bg-green-600 hover:bg-green-700 text-white border-0\"\r\n              >\r\n                {t(\"featured\", \"Featured\")}\r\n              </Badge>\r\n            )}\r\n          </div>\r\n\r\n          {/* Favorite button */}\r\n          <Button\r\n            size=\"sm\"\r\n            variant=\"outline\"\r\n            onClick={handleToggleFavorite}\r\n            className={cn(\r\n              \"absolute top-3 right-3 w-10 h-10 p-0 shadow-lg backdrop-blur-sm border-2 transition-all duration-200\",\r\n              isProductFavorite\r\n                ? \"text-red-600 dark:text-red-400 border-red-300 dark:border-red-700 bg-card/95 hover:bg-red-50 dark:hover:bg-red-950 hover:border-red-400\"\r\n                : \"text-muted-foreground border-border bg-card/90 hover:bg-card hover:text-red-500 hover:border-red-300\"\r\n            )}\r\n          >\r\n            <Heart\r\n              className={cn(\"w-5 h-5\", isProductFavorite && \"fill-current\")}\r\n            />\r\n          </Button>\r\n        </div>\r\n\r\n        <CardContent className=\"p-6 flex flex-col flex-1\">\r\n          <h3\r\n            className={cn(\r\n              \"font-semibold text-foreground mb-2 line-clamp-2 leading-normal\",\r\n              variant === \"compact\" ? \"text-sm\" : \"text-base\"\r\n            )}\r\n          >\r\n            {product.name}\r\n          </h3>\r\n\r\n          {variant !== \"compact\" && (\r\n            <p className=\"text-sm text-muted-foreground mb-4 line-clamp-2 leading-relaxed\">\r\n              {product.description}\r\n            </p>\r\n          )}\r\n\r\n          <div className=\"flex items-end justify-between gap-3 mt-auto\">\r\n            <div className=\"flex flex-col gap-0.5\">\r\n              {product.on_sale && (\r\n                <span className=\"text-sm text-muted-foreground line-through\">\r\n                  {formatPrice(product.price, constants.site.currency)}\r\n                </span>\r\n              )}\r\n              <span\r\n                className={cn(\r\n                  \"font-bold text-foreground\",\r\n                  variant === \"compact\" ? \"text-base\" : \"text-lg\"\r\n                )}\r\n              >\r\n                {formatPrice(currentPrice, constants.site.currency)}\r\n              </span>\r\n              {product.on_sale && (\r\n                <span className=\"text-xs text-green-600 dark:text-green-400 font-medium\">\r\n                  {t(\"save\", \"Save\")}{\" \"}\r\n                  {formatPrice(\r\n                    product.price - currentPrice,\r\n                    constants.site.currency\r\n                  )}\r\n                </span>\r\n              )}\r\n            </div>\r\n\r\n            <Button\r\n              size={variant === \"compact\" ? \"sm\" : \"default\"}\r\n              onClick={handleAddToCart}\r\n              disabled={isOutOfStock}\r\n              className={cn(\r\n                \"flex-shrink-0 shadow-sm hover:shadow-md transition-all duration-200\",\r\n                variant === \"compact\"\r\n                  ? \"h-9 w-9 p-0\"\r\n                  : \"h-10 px-4 text-sm whitespace-nowrap\",\r\n                isOutOfStock && \"opacity-50 cursor-not-allowed\"\r\n              )}\r\n            >\r\n              <ShoppingCart\r\n                className={cn(\r\n                  variant === \"compact\" ? \"w-4 h-4\" : \"w-4 h-4 mr-2\"\r\n                )}\r\n              />\r\n              {variant !== \"compact\" &&\r\n                (isOutOfStock\r\n                  ? t(\"outOfStock\", \"Out of Stock\")\r\n                  : t(\"addToCart\", \"Add to Cart\"))}\r\n            </Button>\r\n          </div>\r\n        </CardContent>\r\n      </Link>\r\n    </Card>\r\n  );\r\n};\r\n"
+      "content": "import React from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { Heart, ShoppingCart } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\nimport { useCart, useFavorites, formatPrice } from \"@/modules/ecommerce-core\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface ProductCardProps {\r\n  product: Product;\r\n  variant?: \"grid\" | \"list\" | \"featured\" | \"compact\";\r\n  className?: string;\r\n}\r\n\r\nexport const ProductCard: React.FC<ProductCardProps> = ({\r\n  product,\r\n  variant = \"grid\",\r\n  className,\r\n}) => {\r\n  const { addItem } = useCart();\r\n  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites();\r\n  const { t } = useTranslation(\"product-card\");\r\n\r\n  const currentPrice = product.on_sale\r\n    ? product.sale_price || product.price\r\n    : product.price;\r\n  const isProductFavorite = isFavorite(product.id);\r\n  const isOutOfStock = product.stock <= 0;\r\n\r\n  const handleAddToCart = (e: React.MouseEvent) => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n\r\n    if (isOutOfStock) {\r\n      return; // Don't add to cart if out of stock\r\n    }\r\n\r\n    addItem(product);\r\n  };\r\n\r\n  const handleToggleFavorite = (e: React.MouseEvent) => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n\r\n    if (isProductFavorite) {\r\n      removeFromFavorites(product.id);\r\n    } else {\r\n      addToFavorites(product);\r\n    }\r\n  };\r\n\r\n  if (variant === \"list\") {\r\n    return (\r\n      <Card\r\n        className={cn(\r\n          \"overflow-hidden p-0 hover:shadow-lg transition-all duration-200\",\r\n          className\r\n        )}\r\n      >\r\n        <Link\r\n          to={`/products/${product.slug}`}\r\n          className=\"flex flex-col sm:flex-row\"\r\n        >\r\n          <div className=\"w-full sm:w-48 md:w-56 h-48 sm:h-56 flex-shrink-0 relative\">\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\"\r\n            />\r\n            {/* Badges on image */}\r\n            <div className=\"absolute top-3 left-3 flex flex-wrap gap-1.5 max-w-[calc(100%-1.5rem)]\">\r\n              {isOutOfStock && (\r\n                <Badge\r\n                  variant=\"secondary\"\r\n                  className=\"text-xs font-semibold shadow-md bg-muted text-muted-foreground border-0\"\r\n                >\r\n                  {t(\"outOfStock\", \"Out of Stock\")}\r\n                </Badge>\r\n              )}\r\n              {!isOutOfStock && product.on_sale && (\r\n                <Badge\r\n                  variant=\"destructive\"\r\n                  className=\"text-xs font-semibold shadow-md bg-red-600 hover:bg-red-700 text-white border-0\"\r\n                >\r\n                  {t(\"sale\", \"Sale\")}\r\n                </Badge>\r\n              )}\r\n              {!isOutOfStock && product.is_new && (\r\n                <Badge\r\n                  variant=\"secondary\"\r\n                  className=\"text-xs font-semibold shadow-md bg-blue-600 hover:bg-blue-700 text-white border-0\"\r\n                >\r\n                  {t(\"new\", \"New\")}\r\n                </Badge>\r\n              )}\r\n              {!isOutOfStock && product.featured && (\r\n                <Badge\r\n                  variant=\"default\"\r\n                  className=\"text-xs font-semibold shadow-md bg-green-600 hover:bg-green-700 text-white border-0\"\r\n                >\r\n                  {t(\"featured\", \"Featured\")}\r\n                </Badge>\r\n              )}\r\n            </div>\r\n          </div>\r\n          <CardContent className=\"flex-1 p-4 sm:p-6\">\r\n            <div className=\"flex flex-col sm:flex-row sm:justify-between sm:items-start h-full gap-4\">\r\n              <div className=\"flex-1 flex flex-col justify-between\">\r\n                <div>\r\n                  <h3 className=\"text-lg sm:text-xl font-semibold text-foreground mb-2 sm:mb-3 line-clamp-2 leading-normal\">\r\n                    {product.name}\r\n                  </h3>\r\n                  <p className=\"text-sm sm:text-base text-muted-foreground mb-3 sm:mb-4 line-clamp-2 sm:line-clamp-3 leading-relaxed\">\r\n                    {product.description}\r\n                  </p>\r\n                </div>\r\n                <div className=\"flex items-center gap-3\">\r\n                  <div className=\"flex flex-col gap-0.5\">\r\n                    {product.on_sale && (\r\n                      <span className=\"text-sm sm:text-base text-muted-foreground line-through\">\r\n                        {formatPrice(product.price, constants.site.currency)}\r\n                      </span>\r\n                    )}\r\n                    <span className=\"text-lg sm:text-xl font-bold text-foreground\">\r\n                      {formatPrice(currentPrice, constants.site.currency)}\r\n                    </span>\r\n                    {product.on_sale && (\r\n                      <span className=\"text-xs sm:text-sm text-green-600 dark:text-green-400 font-medium\">\r\n                        {t(\"save\", \"Save\")}{\" \"}\r\n                        {formatPrice(\r\n                          product.price - currentPrice,\r\n                          constants.site.currency\r\n                        )}\r\n                      </span>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div className=\"flex sm:flex-col gap-3 sm:ml-6 justify-end sm:justify-start\">\r\n                <Button\r\n                  size=\"sm\"\r\n                  variant=\"outline\"\r\n                  onClick={handleToggleFavorite}\r\n                  className={cn(\r\n                    \"w-10 h-10 sm:w-12 sm:h-12 p-0 shadow-sm hover:shadow-md transition-all duration-200\",\r\n                    isProductFavorite\r\n                      ? \"text-red-600 dark:text-red-400 border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-950 hover:bg-red-100 dark:hover:bg-red-900 hover:border-red-400\"\r\n                      : \"text-muted-foreground border-border bg-card hover:bg-muted hover:text-red-500 hover:border-red-300\"\r\n                  )}\r\n                >\r\n                  <Heart\r\n                    className={cn(\r\n                      \"w-4 h-4 sm:w-5 sm:h-5\",\r\n                      isProductFavorite && \"fill-current\"\r\n                    )}\r\n                  />\r\n                </Button>\r\n                <Button\r\n                  size=\"sm\"\r\n                  onClick={handleAddToCart}\r\n                  disabled={isOutOfStock}\r\n                  className={cn(\r\n                    \"w-10 h-10 sm:w-12 sm:h-12 p-0 shadow-sm hover:shadow-md transition-all duration-200\",\r\n                    isOutOfStock && \"opacity-50 cursor-not-allowed\"\r\n                  )}\r\n                >\r\n                  <ShoppingCart className=\"w-4 h-4 sm:w-5 sm:h-5\" />\r\n                </Button>\r\n              </div>\r\n            </div>\r\n          </CardContent>\r\n        </Link>\r\n      </Card>\r\n    );\r\n  }\r\n\r\n  // Grid, Featured, and Compact variants\r\n  return (\r\n    <Card\r\n      className={cn(\r\n        \"group overflow-hidden border-0 p-0 shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 bg-card rounded-2xl h-full flex flex-col\",\r\n        variant === \"compact\" && \"max-w-xs\",\r\n        className\r\n      )}\r\n    >\r\n      <Link to={`/products/${product.slug}`} className=\"flex flex-col h-full\">\r\n        <div className=\"relative\">\r\n          <div\r\n            className={cn(\r\n              \"w-full bg-muted overflow-hidden\",\r\n              variant === \"featured\"\r\n                ? \"aspect-square\"\r\n                : variant === \"compact\"\r\n                ? \"aspect-square\"\r\n                : \"aspect-[4/3]\"\r\n            )}\r\n          >\r\n            <img\r\n              src={product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"}\r\n              alt={product.name}\r\n              className=\"absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\r\n            />\r\n          </div>\r\n\r\n          {/* Badges */}\r\n          <div className=\"absolute top-3 left-3 flex flex-col gap-1.5\">\r\n            {isOutOfStock && (\r\n              <Badge\r\n                variant=\"secondary\"\r\n                className=\"text-xs font-semibold shadow-lg bg-muted text-muted-foreground border-0\"\r\n              >\r\n                {t(\"outOfStock\", \"Out of Stock\")}\r\n              </Badge>\r\n            )}\r\n            {!isOutOfStock && product.on_sale && (\r\n              <Badge\r\n                variant=\"destructive\"\r\n                className=\"text-xs font-semibold shadow-lg bg-red-600 hover:bg-red-700 text-white border-0\"\r\n              >\r\n                {t(\"sale\", \"Sale\")}\r\n              </Badge>\r\n            )}\r\n            {!isOutOfStock && product.is_new && (\r\n              <Badge\r\n                variant=\"secondary\"\r\n                className=\"text-xs font-semibold shadow-lg bg-blue-600 hover:bg-blue-700 text-white border-0\"\r\n              >\r\n                {t(\"new\", \"New\")}\r\n              </Badge>\r\n            )}\r\n            {!isOutOfStock && product.featured && (\r\n              <Badge\r\n                variant=\"default\"\r\n                className=\"text-xs font-semibold shadow-lg bg-green-600 hover:bg-green-700 text-white border-0\"\r\n              >\r\n                {t(\"featured\", \"Featured\")}\r\n              </Badge>\r\n            )}\r\n          </div>\r\n\r\n          {/* Favorite button */}\r\n          <Button\r\n            size=\"sm\"\r\n            variant=\"outline\"\r\n            onClick={handleToggleFavorite}\r\n            className={cn(\r\n              \"absolute top-3 right-3 w-10 h-10 p-0 shadow-lg backdrop-blur-sm border-2 transition-all duration-200\",\r\n              isProductFavorite\r\n                ? \"text-red-600 dark:text-red-400 border-red-300 dark:border-red-700 bg-card/95 hover:bg-red-50 dark:hover:bg-red-950 hover:border-red-400\"\r\n                : \"text-muted-foreground border-border bg-card/90 hover:bg-card hover:text-red-500 hover:border-red-300\"\r\n            )}\r\n          >\r\n            <Heart\r\n              className={cn(\"w-5 h-5\", isProductFavorite && \"fill-current\")}\r\n            />\r\n          </Button>\r\n        </div>\r\n\r\n        <CardContent className=\"p-6 flex flex-col flex-1\">\r\n          <h3\r\n            className={cn(\r\n              \"font-semibold text-foreground mb-2 line-clamp-2 leading-normal\",\r\n              variant === \"compact\" ? \"text-sm\" : \"text-base\"\r\n            )}\r\n          >\r\n            {product.name}\r\n          </h3>\r\n\r\n          {variant !== \"compact\" && (\r\n            <p className=\"text-sm text-muted-foreground mb-4 line-clamp-2 leading-relaxed\">\r\n              {product.description}\r\n            </p>\r\n          )}\r\n\r\n          <div className=\"flex items-end justify-between gap-3 mt-auto\">\r\n            <div className=\"flex flex-col gap-0.5\">\r\n              {product.on_sale && (\r\n                <span className=\"text-sm text-muted-foreground line-through\">\r\n                  {formatPrice(product.price, constants.site.currency)}\r\n                </span>\r\n              )}\r\n              <span\r\n                className={cn(\r\n                  \"font-bold text-foreground\",\r\n                  variant === \"compact\" ? \"text-base\" : \"text-lg\"\r\n                )}\r\n              >\r\n                {formatPrice(currentPrice, constants.site.currency)}\r\n              </span>\r\n              {product.on_sale && (\r\n                <span className=\"text-xs text-green-600 dark:text-green-400 font-medium\">\r\n                  {t(\"save\", \"Save\")}{\" \"}\r\n                  {formatPrice(\r\n                    product.price - currentPrice,\r\n                    constants.site.currency\r\n                  )}\r\n                </span>\r\n              )}\r\n            </div>\r\n\r\n            <Button\r\n              size={variant === \"compact\" ? \"sm\" : \"default\"}\r\n              onClick={handleAddToCart}\r\n              disabled={isOutOfStock}\r\n              className={cn(\r\n                \"flex-shrink-0 shadow-sm hover:shadow-md transition-all duration-200\",\r\n                variant === \"compact\"\r\n                  ? \"h-9 w-9 p-0\"\r\n                  : \"h-10 px-4 text-sm whitespace-nowrap\",\r\n                isOutOfStock && \"opacity-50 cursor-not-allowed\"\r\n              )}\r\n            >\r\n              <ShoppingCart\r\n                className={cn(\r\n                  variant === \"compact\" ? \"w-4 h-4\" : \"w-4 h-4 mr-2\"\r\n                )}\r\n              />\r\n              {variant !== \"compact\" &&\r\n                (isOutOfStock\r\n                  ? t(\"outOfStock\", \"Out of Stock\")\r\n                  : t(\"addToCart\", \"Add to Cart\"))}\r\n            </Button>\r\n          </div>\r\n        </CardContent>\r\n      </Link>\r\n    </Card>\r\n  );\r\n};\r\n"
     },
     {
       "path": "product-card/lang/en.json",

package/dist/registry/product-detail-block.json

@@ -18,7 +18,7 @@
       "path": "product-detail-block/product-detail-block.tsx",
       "type": "registry:block",
       "target": "$modules$/product-detail-block/product-detail-block.tsx",
-      "content": "import { useState } from \"react\";\r\nimport {\r\n  Star,\r\n  Heart,\r\n  Share2,\r\n  Truck,\r\n  RotateCcw,\r\n  Shield,\r\n  Plus,\r\n  Minus,\r\n  ChevronLeft,\r\n  ChevronRight,\r\n  X,\r\n  ZoomIn,\r\n} from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Separator } from \"@/components/ui/separator\";\r\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\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 { Dialog, DialogContent } from \"@/components/ui/dialog\";\r\nimport { useCart, formatPrice } from \"@/modules/ecommerce-core\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ProductDetailBlockProps {\r\n  product: Product;\r\n}\r\n\r\nexport function ProductDetailBlock({ product }: ProductDetailBlockProps) {\r\n  const { t } = useTranslation(\"product-detail-block\");\r\n  const { addItem } = useCart();\r\n\r\n  const [selectedImageIndex, setSelectedImageIndex] = useState(0);\r\n  const [quantity, setQuantity] = useState(1);\r\n  const [selectedVariant, setSelectedVariant] = useState<string>(\"\");\r\n  const [isAdding, setIsAdding] = useState(false);\r\n  const [isImageModalOpen, setIsImageModalOpen] = useState(false);\r\n  const [zoomLevel, setZoomLevel] = useState(1);\r\n  const [position, setPosition] = useState({ x: 0, y: 0 });\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });\r\n\r\n  const handleAddToCart = async () => {\r\n    if (product) {\r\n      setIsAdding(true);\r\n      // Add multiple items by calling addItem quantity times\r\n      for (let i = 0; i < quantity; i++) {\r\n        addItem(product);\r\n      }\r\n\r\n      // Show success feedback\r\n      setTimeout(() => {\r\n        setIsAdding(false);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  const handleQuantityChange = (change: number) => {\r\n    const newQuantity = quantity + change;\r\n    if (newQuantity >= 1 && newQuantity <= product.stock) {\r\n      setQuantity(newQuantity);\r\n    }\r\n  };\r\n\r\n  const features = [\r\n    {\r\n      icon: Truck,\r\n      title: t(\"freeShipping\", \"Free Shipping\"),\r\n      description: t(\"freeShippingDesc\", \"On orders over 50\"),\r\n    },\r\n    {\r\n      icon: RotateCcw,\r\n      title: t(\"easyReturns\", \"Easy Returns\"),\r\n      description: t(\"easyReturnsDesc\", \"30-day return policy\"),\r\n    },\r\n    {\r\n      icon: Shield,\r\n      title: t(\"secureCheckout\", \"Secure Checkout\"),\r\n      description: t(\"secureCheckoutDesc\", \"SSL encrypted payment\"),\r\n    },\r\n  ];\r\n\r\n  return (\r\n    <>\r\n      <div className=\"grid lg:grid-cols-2 gap-12\">\r\n        {/* Product Images */}\r\n        <div className=\"space-y-4\">\r\n          {/* Main Image */}\r\n          <div className=\"aspect-square relative overflow-hidden rounded-lg bg-muted group\">\r\n            <img\r\n              src={product.images[selectedImageIndex] || \"/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 cursor-zoom-in\"\r\n              onClick={() => setIsImageModalOpen(true)}\r\n            />\r\n\r\n            {/* Zoom Indicator */}\r\n            <div className=\"absolute bottom-4 right-4 bg-black/50 text-white p-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity\">\r\n              <ZoomIn className=\"w-5 h-5\" />\r\n            </div>\r\n\r\n            {/* Navigation Arrows */}\r\n            {product.images.length > 1 && (\r\n              <>\r\n                <Button\r\n                  variant=\"secondary\"\r\n                  size=\"icon\"\r\n                  className=\"absolute left-4 top-1/2 transform -translate-y-1/2\"\r\n                  onClick={() =>\r\n                    setSelectedImageIndex(\r\n                      selectedImageIndex === 0\r\n                        ? product.images.length - 1\r\n                        : selectedImageIndex - 1\r\n                    )\r\n                  }\r\n                >\r\n                  <ChevronLeft className=\"h-4 w-4\" />\r\n                </Button>\r\n                <Button\r\n                  variant=\"secondary\"\r\n                  size=\"icon\"\r\n                  className=\"absolute right-4 top-1/2 transform -translate-y-1/2\"\r\n                  onClick={() =>\r\n                    setSelectedImageIndex(\r\n                      selectedImageIndex === product.images.length - 1\r\n                        ? 0\r\n                        : selectedImageIndex + 1\r\n                    )\r\n                  }\r\n                >\r\n                  <ChevronRight className=\"h-4 w-4\" />\r\n                </Button>\r\n              </>\r\n            )}\r\n\r\n            {/* Badges */}\r\n            <div className=\"absolute top-4 left-4 flex flex-col gap-2\">\r\n              {product.on_sale && (\r\n                <Badge variant=\"destructive\">{t(\"sale\", \"Sale\")}</Badge>\r\n              )}\r\n              {product.is_new && (\r\n                <Badge variant=\"secondary\">{t(\"new\", \"New\")}</Badge>\r\n              )}\r\n            </div>\r\n          </div>\r\n\r\n          {/* Thumbnail Images */}\r\n          {product.images.length > 1 && (\r\n            <div className=\"flex gap-3 overflow-x-auto\">\r\n              {product.images.map((image, index) => (\r\n                <button\r\n                  key={index}\r\n                  className={`flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-colors ${\r\n                    selectedImageIndex === index\r\n                      ? \"border-primary\"\r\n                      : \"border-transparent hover:border-muted-foreground\"\r\n                  }`}\r\n                  onClick={() => setSelectedImageIndex(index)}\r\n                >\r\n                  <img\r\n                    src={image}\r\n                    alt={`${product.name} ${index + 1}`}\r\n                    className=\"w-full h-full object-cover\"\r\n                  />\r\n                </button>\r\n              ))}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {/* Product Info */}\r\n        <div className=\"space-y-6\">\r\n          {/* Header */}\r\n          <div>\r\n            <div className=\"flex items-center gap-2 mb-2\">\r\n              <Badge variant=\"outline\">\r\n                {product.category_name ||\r\n                  product.categories?.[0]?.name ||\r\n                  product.category}\r\n              </Badge>\r\n              {product.featured && (\r\n                <Badge variant=\"secondary\">{t(\"featured\", \"Featured\")}</Badge>\r\n              )}\r\n            </div>\r\n            <h1 className=\"text-3xl font-bold mb-4\">{product.name}</h1>\r\n\r\n            {/* Rating */}\r\n            <div className=\"flex items-center gap-4 mb-4\">\r\n              <div className=\"flex items-center gap-1\">\r\n                {[...Array(5)].map((_, i) => (\r\n                  <Star\r\n                    key={i}\r\n                    className={`h-4 w-4 ${\r\n                      i < Math.floor(product.rating)\r\n                        ? \"fill-current text-yellow-400\"\r\n                        : \"text-muted-foreground\"\r\n                    }`}\r\n                  />\r\n                ))}\r\n                <span className=\"text-sm font-medium ml-1\">\r\n                  {product.rating}\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Price */}\r\n            <div className=\"flex items-center gap-3 mb-6\">\r\n              <span className=\"text-3xl font-bold\">\r\n                {formatPrice(\r\n                  product.on_sale && product.sale_price\r\n                    ? product.sale_price\r\n                    : product.price,\r\n                  constants.site.currency\r\n                )}\r\n              </span>\r\n              {product.on_sale && product.sale_price && (\r\n                <span className=\"text-xl text-muted-foreground line-through\">\r\n                  {formatPrice(\r\n                    product.price,\r\n                    constants.site.currency\r\n                  )}\r\n                </span>\r\n              )}\r\n            </div>\r\n          </div>\r\n\r\n          {/* Description */}\r\n          <div>\r\n            <p className=\"text-muted-foreground leading-relaxed\">\r\n              {product.description}\r\n            </p>\r\n          </div>\r\n\r\n          {/* Variants */}\r\n          {product.variants && product.variants.length > 0 && (\r\n            <div>\r\n              <label className=\"text-sm font-medium mb-2 block\">\r\n                {t(\"size\", \"Size\")}\r\n              </label>\r\n              <Select\r\n                value={selectedVariant}\r\n                onValueChange={setSelectedVariant}\r\n              >\r\n                <SelectTrigger className=\"w-full\">\r\n                  <SelectValue placeholder={t(\"selectSize\", \"Select size\")} />\r\n                </SelectTrigger>\r\n                <SelectContent>\r\n                  {product.variants.map((variant: any) => (\r\n                    <SelectItem\r\n                      key={variant.id}\r\n                      value={variant.id}\r\n                      disabled={variant.stockQuantity === 0}\r\n                    >\r\n                      {variant.value}{\" \"}\r\n                      {variant.stockQuantity === 0 &&\r\n                        `(${t(\"outOfStock\", \"Out of Stock\")})`}\r\n                    </SelectItem>\r\n                  ))}\r\n                </SelectContent>\r\n              </Select>\r\n            </div>\r\n          )}\r\n\r\n          {/* Quantity */}\r\n          <div>\r\n            <label className=\"text-sm font-medium mb-2 block\">\r\n              {t(\"quantity\", \"Quantity\")}\r\n            </label>\r\n            <div className=\"flex items-center gap-3\">\r\n              <div className=\"flex items-center border rounded-lg\">\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  onClick={() => handleQuantityChange(-1)}\r\n                  disabled={quantity <= 1}\r\n                >\r\n                  <Minus className=\"h-4 w-4\" />\r\n                </Button>\r\n                <span className=\"w-12 text-center font-medium\">{quantity}</span>\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  onClick={() => handleQuantityChange(1)}\r\n                  disabled={quantity >= product.stock}\r\n                >\r\n                  <Plus className=\"h-4 w-4\" />\r\n                </Button>\r\n              </div>\r\n              <span className=\"text-sm text-muted-foreground\">\r\n                {product.stock} {t(\"available\", \"available\")}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Actions */}\r\n          <div className=\"space-y-3\">\r\n            <div className=\"flex gap-3\">\r\n              <Button\r\n                size=\"lg\"\r\n                className=\"flex-1\"\r\n                disabled={product.stock <= 0 || isAdding}\r\n                variant=\"default\"\r\n                onClick={handleAddToCart}\r\n              >\r\n                {isAdding ? (\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(\"adding\", \"Adding...\")}\r\n                  </>\r\n                ) : (\r\n                  t(\"addToCart\", \"Add to Cart\")\r\n                )}\r\n              </Button>\r\n              <Button variant=\"outline\" size=\"lg\">\r\n                <Heart className=\"h-4 w-4\" />\r\n              </Button>\r\n              <Button variant=\"outline\" size=\"lg\">\r\n                <Share2 className=\"h-4 w-4\" />\r\n              </Button>\r\n            </div>\r\n\r\n            {product.stock > 0 ? (\r\n              <p className=\"text-sm text-green-600 dark:text-green-400 font-medium\">\r\n                ✓ {t(\"inStockReady\", \"In stock and ready to ship\")} (\r\n                {product.stock} {t(\"available\", \"available\")})\r\n              </p>\r\n            ) : (\r\n              <p className=\"text-sm text-red-600 dark:text-red-400 font-medium\">\r\n                ✗ {t(\"currentlyOutOfStock\", \"Currently out of stock\")}\r\n              </p>\r\n            )}\r\n          </div>\r\n\r\n          {/* Features */}\r\n          <div className=\"grid grid-cols-3 gap-4 pt-6 border-t\">\r\n            {features.map((feature, index) => {\r\n              const Icon = feature.icon;\r\n              return (\r\n                <div key={index} className=\"text-center\">\r\n                  <Icon className=\"h-6 w-6 mx-auto mb-2 text-primary\" />\r\n                  <h4 className=\"text-sm font-medium\">{feature.title}</h4>\r\n                  <p className=\"text-xs text-muted-foreground\">\r\n                    {feature.description}\r\n                  </p>\r\n                </div>\r\n              );\r\n            })}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Product Details Tabs */}\r\n      <Tabs defaultValue=\"description\" className=\"mt-16\">\r\n        <TabsList className=\"grid w-full grid-cols-2\">\r\n          <TabsTrigger value=\"description\">\r\n            {t(\"description\", \"Description\")}\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"specifications\">\r\n            {t(\"specifications\", \"Specifications\")}\r\n          </TabsTrigger>\r\n        </TabsList>\r\n\r\n        <TabsContent value=\"description\" className=\"mt-6\">\r\n          <Card>\r\n            <CardContent className=\"pt-6\">\r\n              <div className=\"prose max-w-none\">\r\n                <p className=\"text-muted-foreground leading-relaxed\">\r\n                  {product.description}\r\n                </p>\r\n                <Separator className=\"my-6\" />\r\n                <h3 className=\"text-lg font-semibold mb-3\">\r\n                  {t(\"keyFeatures\", \"Key Features\")}\r\n                </h3>\r\n                <ul className=\"space-y-2\">\r\n                  {Array.isArray(product.tags) && product.tags.map((tag, index) => (\r\n                    <li key={index} className=\"flex items-center gap-2\">\r\n                      <div className=\"w-1.5 h-1.5 bg-primary rounded-full\"></div>\r\n                      <span className=\"capitalize\">{tag}</span>\r\n                    </li>\r\n                  ))}\r\n                </ul>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n        </TabsContent>\r\n\r\n        <TabsContent value=\"specifications\" className=\"mt-6\">\r\n          <Card>\r\n            <CardContent className=\"pt-6\">\r\n              {product.specifications ? (\r\n                <div className=\"grid gap-4\">\r\n                  {Object.entries(product.specifications).map(\r\n                    ([key, value]) => (\r\n                      <div\r\n                        key={key}\r\n                        className=\"bg-muted/30 rounded-lg p-4 flex justify-between items-center\"\r\n                      >\r\n                        <span className=\"font-medium text-foreground capitalize\">\r\n                          {key\r\n                            .replace(/_/g, \" \")\r\n                            .replace(/([A-Z])/g, \" $1\")\r\n                            .trim()}\r\n                        </span>\r\n                        <span className=\"text-muted-foreground font-mono bg-background px-3 py-1 rounded-md border\">\r\n                          {value}\r\n                        </span>\r\n                      </div>\r\n                    )\r\n                  )}\r\n                </div>\r\n              ) : (\r\n                <p className=\"text-muted-foreground\">\r\n                  {t(\"noSpecifications\", \"No specifications available.\")}\r\n                </p>\r\n              )}\r\n            </CardContent>\r\n          </Card>\r\n        </TabsContent>\r\n      </Tabs>\r\n\r\n      {/* Image Zoom Modal */}\r\n      <Dialog\r\n        open={isImageModalOpen}\r\n        onOpenChange={(open) => {\r\n          setIsImageModalOpen(open);\r\n          if (!open) {\r\n            setZoomLevel(1);\r\n            setPosition({ x: 0, y: 0 });\r\n          }\r\n        }}\r\n      >\r\n        <DialogContent className=\"!max-w-[95vw] !w-[95vw] !h-[95vh] p-0 overflow-hidden bg-black/95 border-none [&>button]:hidden\">\r\n          {/* Close Button */}\r\n          <button\r\n            onClick={() => setIsImageModalOpen(false)}\r\n            className=\"absolute top-4 right-4 z-50 rounded-full bg-black/60 hover:bg-black/80 p-2 transition-all border border-white/10 backdrop-blur-md\"\r\n          >\r\n            <X className=\"h-6 w-6 text-white\" />\r\n          </button>\r\n\r\n          {/* Image Counter */}\r\n          {product.images.length > 1 && (\r\n            <div className=\"absolute top-4 left-1/2 -translate-x-1/2 z-50 bg-black/60 backdrop-blur-md rounded-full px-4 py-2 border border-white/10\">\r\n              <span className=\"text-white text-sm font-semibold\">\r\n                {selectedImageIndex + 1} / {product.images.length}\r\n              </span>\r\n            </div>\r\n          )}\r\n\r\n          {/* Navigation Buttons */}\r\n          {product.images.length > 1 && (\r\n            <>\r\n              <button\r\n                className=\"absolute left-4 top-1/2 -translate-y-1/2 z-50 bg-black/60 hover:bg-black/80 text-white border border-white/10 backdrop-blur-md rounded-full p-3 transition-all\"\r\n                onClick={() => {\r\n                  setSelectedImageIndex(\r\n                    selectedImageIndex === 0\r\n                      ? product.images.length - 1\r\n                      : selectedImageIndex - 1\r\n                  );\r\n                  setZoomLevel(1);\r\n                  setPosition({ x: 0, y: 0 });\r\n                }}\r\n              >\r\n                <ChevronLeft className=\"h-6 w-6\" />\r\n              </button>\r\n              <button\r\n                className=\"absolute right-4 top-1/2 -translate-y-1/2 z-50 bg-black/60 hover:bg-black/80 text-white border border-white/10 backdrop-blur-md rounded-full p-3 transition-all\"\r\n                onClick={() => {\r\n                  setSelectedImageIndex(\r\n                    selectedImageIndex === product.images.length - 1\r\n                      ? 0\r\n                      : selectedImageIndex + 1\r\n                  );\r\n                  setZoomLevel(1);\r\n                  setPosition({ x: 0, y: 0 });\r\n                }}\r\n              >\r\n                <ChevronRight className=\"h-6 w-6\" />\r\n              </button>\r\n            </>\r\n          )}\r\n\r\n          {/* Zoom Controls */}\r\n          <div className=\"absolute bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-black/60 backdrop-blur-md rounded-full px-4 py-2 border border-white/10\">\r\n            <button\r\n              className=\"text-white hover:bg-white/20 h-8 w-8 rounded-full flex items-center justify-center disabled:opacity-50\"\r\n              onClick={() => {\r\n                const newZoom = Math.max(1, zoomLevel - 0.3);\r\n                setZoomLevel(newZoom);\r\n                if (newZoom === 1) setPosition({ x: 0, y: 0 });\r\n              }}\r\n              disabled={zoomLevel <= 1}\r\n            >\r\n              <Minus className=\"h-4 w-4\" />\r\n            </button>\r\n            <span className=\"text-white text-sm font-semibold min-w-[50px] text-center\">\r\n              {Math.round(zoomLevel * 100)}%\r\n            </span>\r\n            <button\r\n              className=\"text-white hover:bg-white/20 h-8 w-8 rounded-full flex items-center justify-center disabled:opacity-50\"\r\n              onClick={() => setZoomLevel(Math.min(4, zoomLevel + 0.3))}\r\n              disabled={zoomLevel >= 4}\r\n            >\r\n              <Plus className=\"h-4 w-4\" />\r\n            </button>\r\n            <div className=\"w-px h-5 bg-white/20 mx-1\" />\r\n            <button\r\n              className=\"text-white hover:bg-white/20 text-xs px-3 h-8 rounded-full disabled:opacity-50\"\r\n              onClick={() => {\r\n                setZoomLevel(1);\r\n                setPosition({ x: 0, y: 0 });\r\n              }}\r\n              disabled={zoomLevel === 1}\r\n            >\r\n              Reset\r\n            </button>\r\n          </div>\r\n\r\n          {/* Zoomable Image Container */}\r\n          <div\r\n            className=\"w-full h-full flex items-center justify-center overflow-hidden select-none\"\r\n            style={{\r\n              cursor: zoomLevel > 1 ? (isDragging ? \"grabbing\" : \"grab\") : \"zoom-in\",\r\n            }}\r\n            onWheel={(e) => {\r\n              e.preventDefault();\r\n              const delta = e.deltaY > 0 ? -0.15 : 0.15;\r\n              const newZoom = Math.max(1, Math.min(4, zoomLevel + delta));\r\n              setZoomLevel(newZoom);\r\n              if (newZoom === 1) setPosition({ x: 0, y: 0 });\r\n            }}\r\n            onMouseDown={(e) => {\r\n              if (zoomLevel > 1) {\r\n                setIsDragging(true);\r\n                setDragStart({\r\n                  x: e.clientX - position.x,\r\n                  y: e.clientY - position.y,\r\n                });\r\n              } else if (e.detail === 2) {\r\n                setZoomLevel(2.5);\r\n              }\r\n            }}\r\n            onMouseMove={(e) => {\r\n              if (isDragging && zoomLevel > 1) {\r\n                setPosition({\r\n                  x: e.clientX - dragStart.x,\r\n                  y: e.clientY - dragStart.y,\r\n                });\r\n              }\r\n            }}\r\n            onMouseUp={() => setIsDragging(false)}\r\n            onMouseLeave={() => setIsDragging(false)}\r\n            onClick={(e) => {\r\n              if (zoomLevel === 1 && e.detail === 1) {\r\n                setZoomLevel(2.5);\r\n              }\r\n            }}\r\n          >\r\n            <img\r\n              src={product.images[selectedImageIndex] || \"/images/placeholder.png\"}\r\n              alt={product.name}\r\n              className=\"max-w-[85vw] max-h-[85vh] object-contain pointer-events-none transition-transform duration-200\"\r\n              style={{\r\n                transform: `scale(${zoomLevel}) translate(${position.x / zoomLevel}px, ${position.y / zoomLevel}px)`,\r\n              }}\r\n              draggable={false}\r\n            />\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n}\r\n"
+      "content": "import { useState, useMemo } from \"react\";\r\nimport {\r\n  Star,\r\n  Heart,\r\n  Share2,\r\n  Truck,\r\n  RotateCcw,\r\n  Shield,\r\n  Plus,\r\n  Minus,\r\n  ChevronLeft,\r\n  ChevronRight,\r\n  X,\r\n  ZoomIn,\r\n} from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Separator } from \"@/components/ui/separator\";\r\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\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 { Dialog, DialogContent } from \"@/components/ui/dialog\";\r\nimport { useCart, formatPrice } from \"@/modules/ecommerce-core\";\r\nimport type { Product, Category } from \"@/modules/ecommerce-core/types\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useDbList } from \"@/db\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ProductDetailBlockProps {\r\n  product: Product;\r\n}\r\n\r\nexport function ProductDetailBlock({ product }: ProductDetailBlockProps) {\r\n  const { t } = useTranslation(\"product-detail-block\");\r\n  const { addItem } = useCart();\r\n  const { data: productCategories = [] } = useDbList<Category>(\"product_categories\");\r\n  const categoryMap = useMemo(() => new Map(productCategories.map(c => [c.id, c])), [productCategories]);\r\n\r\n  const [selectedImageIndex, setSelectedImageIndex] = useState(0);\r\n  const [quantity, setQuantity] = useState(1);\r\n  const [selectedVariant, setSelectedVariant] = useState<string>(\"\");\r\n  const [isAdding, setIsAdding] = useState(false);\r\n  const [isImageModalOpen, setIsImageModalOpen] = useState(false);\r\n  const [zoomLevel, setZoomLevel] = useState(1);\r\n  const [position, setPosition] = useState({ x: 0, y: 0 });\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });\r\n\r\n  const handleAddToCart = async () => {\r\n    if (product) {\r\n      setIsAdding(true);\r\n      // Add multiple items by calling addItem quantity times\r\n      for (let i = 0; i < quantity; i++) {\r\n        addItem(product);\r\n      }\r\n\r\n      // Show success feedback\r\n      setTimeout(() => {\r\n        setIsAdding(false);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  const handleQuantityChange = (change: number) => {\r\n    const newQuantity = quantity + change;\r\n    if (newQuantity >= 1 && newQuantity <= product.stock) {\r\n      setQuantity(newQuantity);\r\n    }\r\n  };\r\n\r\n  const features = [\r\n    {\r\n      icon: Truck,\r\n      title: t(\"freeShipping\", \"Free Shipping\"),\r\n      description: t(\"freeShippingDesc\", \"On orders over 50\"),\r\n    },\r\n    {\r\n      icon: RotateCcw,\r\n      title: t(\"easyReturns\", \"Easy Returns\"),\r\n      description: t(\"easyReturnsDesc\", \"30-day return policy\"),\r\n    },\r\n    {\r\n      icon: Shield,\r\n      title: t(\"secureCheckout\", \"Secure Checkout\"),\r\n      description: t(\"secureCheckoutDesc\", \"SSL encrypted payment\"),\r\n    },\r\n  ];\r\n\r\n  return (\r\n    <>\r\n      <div className=\"grid lg:grid-cols-2 gap-12\">\r\n        {/* Product Images */}\r\n        <div className=\"space-y-4\">\r\n          {/* Main Image */}\r\n          <div className=\"aspect-square relative overflow-hidden rounded-lg bg-muted group\">\r\n            <img\r\n              src={product.images?.length ? product.images?.[selectedImageIndex] : \"/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 cursor-zoom-in\"\r\n              onClick={() => setIsImageModalOpen(true)}\r\n            />\r\n\r\n            {/* Zoom Indicator */}\r\n            <div className=\"absolute bottom-4 right-4 bg-black/50 text-white p-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity\">\r\n              <ZoomIn className=\"w-5 h-5\" />\r\n            </div>\r\n\r\n            {/* Navigation Arrows */}\r\n            {product?.images?.length > 1 && (\r\n              <>\r\n                <Button\r\n                  variant=\"secondary\"\r\n                  size=\"icon\"\r\n                  className=\"absolute left-4 top-1/2 transform -translate-y-1/2\"\r\n                  onClick={() =>\r\n                    setSelectedImageIndex(\r\n                      selectedImageIndex === 0\r\n                        ? product?.images?.length - 1\r\n                        : selectedImageIndex - 1\r\n                    )\r\n                  }\r\n                >\r\n                  <ChevronLeft className=\"h-4 w-4\" />\r\n                </Button>\r\n                <Button\r\n                  variant=\"secondary\"\r\n                  size=\"icon\"\r\n                  className=\"absolute right-4 top-1/2 transform -translate-y-1/2\"\r\n                  onClick={() =>\r\n                    setSelectedImageIndex(\r\n                      selectedImageIndex === product?.images?.length - 1\r\n                        ? 0\r\n                        : selectedImageIndex + 1,\r\n                    )\r\n                  }\r\n                >\r\n                  <ChevronRight className=\"h-4 w-4\" />\r\n                </Button>\r\n              </>\r\n            )}\r\n\r\n            {/* Badges */}\r\n            <div className=\"absolute top-4 left-4 flex flex-col gap-2\">\r\n              {product.on_sale && (\r\n                <Badge variant=\"destructive\">{t(\"sale\", \"Sale\")}</Badge>\r\n              )}\r\n              {product.is_new && (\r\n                <Badge variant=\"secondary\">{t(\"new\", \"New\")}</Badge>\r\n              )}\r\n            </div>\r\n          </div>\r\n\r\n          {/* Thumbnail Images */}\r\n          {product?.images?.length > 1 && (\r\n            <div className=\"flex gap-3 overflow-x-auto\">\r\n              {product.images.map((image, index) => (\r\n                <button\r\n                  key={index}\r\n                  className={`flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-colors ${\r\n                    selectedImageIndex === index\r\n                      ? \"border-primary\"\r\n                      : \"border-transparent hover:border-muted-foreground\"\r\n                  }`}\r\n                  onClick={() => setSelectedImageIndex(index)}\r\n                >\r\n                  <img\r\n                    src={image}\r\n                    alt={`${product.name} ${index + 1}`}\r\n                    className=\"w-full h-full object-cover\"\r\n                  />\r\n                </button>\r\n              ))}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {/* Product Info */}\r\n        <div className=\"space-y-6\">\r\n          {/* Header */}\r\n          <div>\r\n            <div className=\"flex items-center gap-2 mb-2\">\r\n              <Badge variant=\"outline\">\r\n                {categoryMap.get(product.categories?.[0] as number)?.name}\r\n              </Badge>\r\n              {product.featured && (\r\n                <Badge variant=\"secondary\">{t(\"featured\", \"Featured\")}</Badge>\r\n              )}\r\n            </div>\r\n            <h1 className=\"text-3xl font-bold mb-4\">{product.name}</h1>\r\n\r\n            {/* Rating */}\r\n            <div className=\"flex items-center gap-4 mb-4\">\r\n              <div className=\"flex items-center gap-1\">\r\n                {[...Array(5)].map((_, i) => (\r\n                  <Star\r\n                    key={i}\r\n                    className={`h-4 w-4 ${\r\n                      i < Math.floor(product.rating)\r\n                        ? \"fill-current text-yellow-400\"\r\n                        : \"text-muted-foreground\"\r\n                    }`}\r\n                  />\r\n                ))}\r\n                <span className=\"text-sm font-medium ml-1\">\r\n                  {product.rating}\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Price */}\r\n            <div className=\"flex items-center gap-3 mb-6\">\r\n              <span className=\"text-3xl font-bold\">\r\n                {formatPrice(\r\n                  product.on_sale && product.sale_price\r\n                    ? product.sale_price\r\n                    : product.price,\r\n                  constants.site.currency\r\n                )}\r\n              </span>\r\n              {product.on_sale && product.sale_price && (\r\n                <span className=\"text-xl text-muted-foreground line-through\">\r\n                  {formatPrice(\r\n                    product.price,\r\n                    constants.site.currency\r\n                  )}\r\n                </span>\r\n              )}\r\n            </div>\r\n          </div>\r\n\r\n          {/* Description */}\r\n          <div>\r\n            <p className=\"text-muted-foreground leading-relaxed\">\r\n              {product.description}\r\n            </p>\r\n          </div>\r\n\r\n          {/* Variants */}\r\n          {product.variants && product.variants.length > 0 && (\r\n            <div>\r\n              <label className=\"text-sm font-medium mb-2 block\">\r\n                {t(\"size\", \"Size\")}\r\n              </label>\r\n              <Select\r\n                value={selectedVariant}\r\n                onValueChange={setSelectedVariant}\r\n              >\r\n                <SelectTrigger className=\"w-full\">\r\n                  <SelectValue placeholder={t(\"selectSize\", \"Select size\")} />\r\n                </SelectTrigger>\r\n                <SelectContent>\r\n                  {product.variants.map((variant) => (\r\n                    <SelectItem\r\n                      key={variant.id}\r\n                      value={variant.id}\r\n                      disabled={variant.stockQuantity === 0}\r\n                    >\r\n                      {variant.value}{\" \"}\r\n                      {variant.stockQuantity === 0 &&\r\n                        `(${t(\"outOfStock\", \"Out of Stock\")})`}\r\n                    </SelectItem>\r\n                  ))}\r\n                </SelectContent>\r\n              </Select>\r\n            </div>\r\n          )}\r\n\r\n          {/* Quantity */}\r\n          <div>\r\n            <label className=\"text-sm font-medium mb-2 block\">\r\n              {t(\"quantity\", \"Quantity\")}\r\n            </label>\r\n            <div className=\"flex items-center gap-3\">\r\n              <div className=\"flex items-center border rounded-lg\">\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  onClick={() => handleQuantityChange(-1)}\r\n                  disabled={quantity <= 1}\r\n                >\r\n                  <Minus className=\"h-4 w-4\" />\r\n                </Button>\r\n                <span className=\"w-12 text-center font-medium\">{quantity}</span>\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  onClick={() => handleQuantityChange(1)}\r\n                  disabled={quantity >= product.stock}\r\n                >\r\n                  <Plus className=\"h-4 w-4\" />\r\n                </Button>\r\n              </div>\r\n              <span className=\"text-sm text-muted-foreground\">\r\n                {product.stock} {t(\"available\", \"available\")}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Actions */}\r\n          <div className=\"space-y-3\">\r\n            <div className=\"flex gap-3\">\r\n              <Button\r\n                size=\"lg\"\r\n                className=\"flex-1\"\r\n                disabled={product.stock <= 0 || isAdding}\r\n                variant=\"default\"\r\n                onClick={handleAddToCart}\r\n              >\r\n                {isAdding ? (\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(\"adding\", \"Adding...\")}\r\n                  </>\r\n                ) : (\r\n                  t(\"addToCart\", \"Add to Cart\")\r\n                )}\r\n              </Button>\r\n              <Button variant=\"outline\" size=\"lg\">\r\n                <Heart className=\"h-4 w-4\" />\r\n              </Button>\r\n              <Button variant=\"outline\" size=\"lg\">\r\n                <Share2 className=\"h-4 w-4\" />\r\n              </Button>\r\n            </div>\r\n\r\n            {product.stock > 0 ? (\r\n              <p className=\"text-sm text-green-600 dark:text-green-400 font-medium\">\r\n                ✓ {t(\"inStockReady\", \"In stock and ready to ship\")} (\r\n                {product.stock} {t(\"available\", \"available\")})\r\n              </p>\r\n            ) : (\r\n              <p className=\"text-sm text-red-600 dark:text-red-400 font-medium\">\r\n                ✗ {t(\"currentlyOutOfStock\", \"Currently out of stock\")}\r\n              </p>\r\n            )}\r\n          </div>\r\n\r\n          {/* Features */}\r\n          <div className=\"grid grid-cols-3 gap-4 pt-6 border-t\">\r\n            {features.map((feature, index) => {\r\n              const Icon = feature.icon;\r\n              return (\r\n                <div key={index} className=\"text-center\">\r\n                  <Icon className=\"h-6 w-6 mx-auto mb-2 text-primary\" />\r\n                  <h4 className=\"text-sm font-medium\">{feature.title}</h4>\r\n                  <p className=\"text-xs text-muted-foreground\">\r\n                    {feature.description}\r\n                  </p>\r\n                </div>\r\n              );\r\n            })}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Product Details Tabs */}\r\n      <Tabs defaultValue=\"description\" className=\"mt-16\">\r\n        <TabsList className=\"grid w-full grid-cols-2\">\r\n          <TabsTrigger value=\"description\">\r\n            {t(\"description\", \"Description\")}\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"specifications\">\r\n            {t(\"specifications\", \"Specifications\")}\r\n          </TabsTrigger>\r\n        </TabsList>\r\n\r\n        <TabsContent value=\"description\" className=\"mt-6\">\r\n          <Card>\r\n            <CardContent className=\"pt-6\">\r\n              <div className=\"prose max-w-none\">\r\n                <p className=\"text-muted-foreground leading-relaxed\">\r\n                  {product.description}\r\n                </p>\r\n                <Separator className=\"my-6\" />\r\n                <h3 className=\"text-lg font-semibold mb-3\">\r\n                  {t(\"keyFeatures\", \"Key Features\")}\r\n                </h3>\r\n                <ul className=\"space-y-2\">\r\n                  {Array.isArray(product.tags) && product.tags.map((tag, index) => (\r\n                    <li key={index} className=\"flex items-center gap-2\">\r\n                      <div className=\"w-1.5 h-1.5 bg-primary rounded-full\"></div>\r\n                      <span className=\"capitalize\">{tag}</span>\r\n                    </li>\r\n                  ))}\r\n                </ul>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n        </TabsContent>\r\n\r\n        <TabsContent value=\"specifications\" className=\"mt-6\">\r\n          <Card>\r\n            <CardContent className=\"pt-6\">\r\n              {product.specifications ? (\r\n                <div className=\"grid gap-4\">\r\n                  {Object.entries(product.specifications).map(\r\n                    ([key, value]) => (\r\n                      <div\r\n                        key={key}\r\n                        className=\"bg-muted/30 rounded-lg p-4 flex justify-between items-center\"\r\n                      >\r\n                        <span className=\"font-medium text-foreground capitalize\">\r\n                          {key\r\n                            .replace(/_/g, \" \")\r\n                            .replace(/([A-Z])/g, \" $1\")\r\n                            .trim()}\r\n                        </span>\r\n                        <span className=\"text-muted-foreground font-mono bg-background px-3 py-1 rounded-md border\">\r\n                          {String(value)}\r\n                        </span>\r\n                      </div>\r\n                    )\r\n                  )}\r\n                </div>\r\n              ) : (\r\n                <p className=\"text-muted-foreground\">\r\n                  {t(\"noSpecifications\", \"No specifications available.\")}\r\n                </p>\r\n              )}\r\n            </CardContent>\r\n          </Card>\r\n        </TabsContent>\r\n      </Tabs>\r\n\r\n      {/* Image Zoom Modal */}\r\n      <Dialog\r\n        open={isImageModalOpen}\r\n        onOpenChange={(open) => {\r\n          setIsImageModalOpen(open);\r\n          if (!open) {\r\n            setZoomLevel(1);\r\n            setPosition({ x: 0, y: 0 });\r\n          }\r\n        }}\r\n      >\r\n        <DialogContent className=\"!max-w-[95vw] !w-[95vw] !h-[95vh] p-0 overflow-hidden bg-black/95 border-none [&>button]:hidden\">\r\n          {/* Close Button */}\r\n          <button\r\n            onClick={() => setIsImageModalOpen(false)}\r\n            className=\"absolute top-4 right-4 z-50 rounded-full bg-black/60 hover:bg-black/80 p-2 transition-all border border-white/10 backdrop-blur-md\"\r\n          >\r\n            <X className=\"h-6 w-6 text-white\" />\r\n          </button>\r\n\r\n          {/* Image Counter */}\r\n          {product?.images?.length > 1 && (\r\n            <div className=\"absolute top-4 left-1/2 -translate-x-1/2 z-50 bg-black/60 backdrop-blur-md rounded-full px-4 py-2 border border-white/10\">\r\n              <span className=\"text-white text-sm font-semibold\">\r\n                {selectedImageIndex + 1} / {product?.images?.length}\r\n              </span>\r\n            </div>\r\n          )}\r\n\r\n          {/* Navigation Buttons */}\r\n          {product?.images?.length > 1 && (\r\n            <>\r\n              <button\r\n                className=\"absolute left-4 top-1/2 -translate-y-1/2 z-50 bg-black/60 hover:bg-black/80 text-white border border-white/10 backdrop-blur-md rounded-full p-3 transition-all\"\r\n                onClick={() => {\r\n                  setSelectedImageIndex(\r\n                    selectedImageIndex === 0\r\n                      ? product?.images?.length - 1\r\n                      : selectedImageIndex - 1\r\n                  );\r\n                  setZoomLevel(1);\r\n                  setPosition({ x: 0, y: 0 });\r\n                }}\r\n              >\r\n                <ChevronLeft className=\"h-6 w-6\" />\r\n              </button>\r\n              <button\r\n                className=\"absolute right-4 top-1/2 -translate-y-1/2 z-50 bg-black/60 hover:bg-black/80 text-white border border-white/10 backdrop-blur-md rounded-full p-3 transition-all\"\r\n                onClick={() => {\r\n                  setSelectedImageIndex(\r\n                    selectedImageIndex === product?.images?.length - 1\r\n                      ? 0\r\n                      : selectedImageIndex + 1\r\n                  );\r\n                  setZoomLevel(1);\r\n                  setPosition({ x: 0, y: 0 });\r\n                }}\r\n              >\r\n                <ChevronRight className=\"h-6 w-6\" />\r\n              </button>\r\n            </>\r\n          )}\r\n\r\n          {/* Zoom Controls */}\r\n          <div className=\"absolute bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-black/60 backdrop-blur-md rounded-full px-4 py-2 border border-white/10\">\r\n            <button\r\n              className=\"text-white hover:bg-white/20 h-8 w-8 rounded-full flex items-center justify-center disabled:opacity-50\"\r\n              onClick={() => {\r\n                const newZoom = Math.max(1, zoomLevel - 0.3);\r\n                setZoomLevel(newZoom);\r\n                if (newZoom === 1) setPosition({ x: 0, y: 0 });\r\n              }}\r\n              disabled={zoomLevel <= 1}\r\n            >\r\n              <Minus className=\"h-4 w-4\" />\r\n            </button>\r\n            <span className=\"text-white text-sm font-semibold min-w-[50px] text-center\">\r\n              {Math.round(zoomLevel * 100)}%\r\n            </span>\r\n            <button\r\n              className=\"text-white hover:bg-white/20 h-8 w-8 rounded-full flex items-center justify-center disabled:opacity-50\"\r\n              onClick={() => setZoomLevel(Math.min(4, zoomLevel + 0.3))}\r\n              disabled={zoomLevel >= 4}\r\n            >\r\n              <Plus className=\"h-4 w-4\" />\r\n            </button>\r\n            <div className=\"w-px h-5 bg-white/20 mx-1\" />\r\n            <button\r\n              className=\"text-white hover:bg-white/20 text-xs px-3 h-8 rounded-full disabled:opacity-50\"\r\n              onClick={() => {\r\n                setZoomLevel(1);\r\n                setPosition({ x: 0, y: 0 });\r\n              }}\r\n              disabled={zoomLevel === 1}\r\n            >\r\n              Reset\r\n            </button>\r\n          </div>\r\n\r\n          {/* Zoomable Image Container */}\r\n          <div\r\n            className=\"w-full h-full flex items-center justify-center overflow-hidden select-none\"\r\n            style={{\r\n              cursor: zoomLevel > 1 ? (isDragging ? \"grabbing\" : \"grab\") : \"zoom-in\",\r\n            }}\r\n            onWheel={(e) => {\r\n              e.preventDefault();\r\n              const delta = e.deltaY > 0 ? -0.15 : 0.15;\r\n              const newZoom = Math.max(1, Math.min(4, zoomLevel + delta));\r\n              setZoomLevel(newZoom);\r\n              if (newZoom === 1) setPosition({ x: 0, y: 0 });\r\n            }}\r\n            onMouseDown={(e) => {\r\n              if (zoomLevel > 1) {\r\n                setIsDragging(true);\r\n                setDragStart({\r\n                  x: e.clientX - position.x,\r\n                  y: e.clientY - position.y,\r\n                });\r\n              } else if (e.detail === 2) {\r\n                setZoomLevel(2.5);\r\n              }\r\n            }}\r\n            onMouseMove={(e) => {\r\n              if (isDragging && zoomLevel > 1) {\r\n                setPosition({\r\n                  x: e.clientX - dragStart.x,\r\n                  y: e.clientY - dragStart.y,\r\n                });\r\n              }\r\n            }}\r\n            onMouseUp={() => setIsDragging(false)}\r\n            onMouseLeave={() => setIsDragging(false)}\r\n            onClick={(e) => {\r\n              if (zoomLevel === 1 && e.detail === 1) {\r\n                setZoomLevel(2.5);\r\n              }\r\n            }}\r\n          >\r\n            <img\r\n              src={product.images?.length ? product.images?.[selectedImageIndex] : \"/images/placeholder.png\"}\r\n              alt={product.name}\r\n              className=\"max-w-[85vw] max-h-[85vh] object-contain pointer-events-none transition-transform duration-200\"\r\n              style={{\r\n                transform: `scale(${zoomLevel}) translate(${position.x / zoomLevel}px, ${position.y / zoomLevel}px)`,\r\n              }}\r\n              draggable={false}\r\n            />\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n}\r\n"
     },
     {
       "path": "product-detail-block/lang/en.json",

package/dist/registry/product-detail-page.json

@@ -2,12 +2,12 @@
   "name": "product-detail-page",
   "type": "registry:page",
   "title": "Product Detail Page",
-  "description": "Product detail page that fetches product data by slug from URL params. Uses useDbProductBySlug hook from ecommerce-core and renders ProductDetailBlock. Includes loading skeleton, error handling for not found products, and automatic page title.",
+  "description": "Product detail page that fetches product data by slug from URL params. Uses useDbGet from @/db and renders ProductDetailBlock. Includes loading skeleton, error handling for not found products, and automatic page title.",
   "registryDependencies": [
     "ecommerce-core",
     "product-detail-block"
   ],
-  "usage": "import { ProductDetailPage } from '@/modules/product-detail-page';\n\n<Route path=\"/products/:slug\" element={<ProductDetailPage />} />\n\n• Uses useDbProductBySlug() from ecommerce-core\n• Fetches product by slug from URL params\n• Shows loading skeleton while fetching\n• Handles product not found state",
+  "usage": "import { ProductDetailPage } from '@/modules/product-detail-page';\n\n<Route path=\"/products/:slug\" element={<ProductDetailPage />} />\n\n• Uses useDbGet() from @/db to fetch product by slug\n• Fetches product by slug from URL params\n• Shows loading skeleton while fetching\n• Handles product not found state",
   "route": {
     "path": "/products/:slug",
     "componentName": "ProductDetailPage"
@@ -23,7 +23,7 @@
       "path": "product-detail-page/product-detail-page.tsx",
       "type": "registry:page",
       "target": "$modules$/product-detail-page/product-detail-page.tsx",
-      "content": "import { useParams } from \"react-router\";\r\nimport { useDbProductBySlug } from \"@/modules/ecommerce-core\";\r\nimport { ProductDetailBlock } from \"@/modules/product-detail-block\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport function ProductDetailPage() {\r\n  const { t } = useTranslation(\"product-detail-page\");\r\n  const { slug } = useParams<{ slug: string }>();\r\n  const { product, loading, error } = useDbProductBySlug(slug || \"\");\r\n\r\n  usePageTitle({ title: product?.name || t(\"loading\", \"Loading...\") });\r\n\r\n  if (loading) {\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          <div className=\"animate-pulse\">\r\n            <div className=\"grid lg:grid-cols-2 gap-12\">\r\n              <div className=\"aspect-square bg-muted rounded-lg\"></div>\r\n              <div className=\"space-y-4\">\r\n                <div className=\"h-6 bg-muted rounded w-1/4\"></div>\r\n                <div className=\"h-10 bg-muted rounded w-3/4\"></div>\r\n                <div className=\"h-4 bg-muted rounded w-1/3\"></div>\r\n                <div className=\"h-8 bg-muted rounded w-1/4\"></div>\r\n                <div className=\"space-y-2\">\r\n                  <div className=\"h-4 bg-muted rounded\"></div>\r\n                  <div className=\"h-4 bg-muted rounded\"></div>\r\n                  <div className=\"h-4 bg-muted rounded w-2/3\"></div>\r\n                </div>\r\n                <div className=\"h-12 bg-muted rounded w-1/2\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  if (error || !product) {\r\n    return (\r\n      <Layout>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8 text-center\">\r\n          <h1 className=\"text-2xl font-bold mb-4\">{t(\"notFound\", \"Product Not Found\")}</h1>\r\n          <p className=\"text-muted-foreground\">{t(\"notFoundDescription\", \"The product you're looking for doesn't exist or has been removed.\")}</p>\r\n        </div>\r\n      </Layout>\r\n    );\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        <ProductDetailBlock product={product} />\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ProductDetailPage;\r\n"
+      "content": "import { useParams } from \"react-router\";\r\nimport { useDbGet } from \"@/db\";\r\nimport type { Product } from \"@/modules/ecommerce-core/types\";\r\nimport { ProductDetailBlock } from \"@/modules/product-detail-block\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport function ProductDetailPage() {\r\n  const { t } = useTranslation(\"product-detail-page\");\r\n  const { slug } = useParams<{ slug: string }>();\r\n  const { data: product, isLoading: loading, error } = useDbGet<Product>(\"products\", {\r\n    where: { slug: slug || \"\" },\r\n    enabled: !!slug,\r\n  });\r\n\r\n  usePageTitle({ title: product?.name || t(\"loading\", \"Loading...\") });\r\n\r\n  if (loading) {\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          <div className=\"animate-pulse\">\r\n            <div className=\"grid lg:grid-cols-2 gap-12\">\r\n              <div className=\"aspect-square bg-muted rounded-lg\"></div>\r\n              <div className=\"space-y-4\">\r\n                <div className=\"h-6 bg-muted rounded w-1/4\"></div>\r\n                <div className=\"h-10 bg-muted rounded w-3/4\"></div>\r\n                <div className=\"h-4 bg-muted rounded w-1/3\"></div>\r\n                <div className=\"h-8 bg-muted rounded w-1/4\"></div>\r\n                <div className=\"space-y-2\">\r\n                  <div className=\"h-4 bg-muted rounded\"></div>\r\n                  <div className=\"h-4 bg-muted rounded\"></div>\r\n                  <div className=\"h-4 bg-muted rounded w-2/3\"></div>\r\n                </div>\r\n                <div className=\"h-12 bg-muted rounded w-1/2\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  if (error || !product) {\r\n    return (\r\n      <Layout>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8 text-center\">\r\n          <h1 className=\"text-2xl font-bold mb-4\">{t(\"notFound\", \"Product Not Found\")}</h1>\r\n          <p className=\"text-muted-foreground\">{t(\"notFoundDescription\", \"The product you're looking for doesn't exist or has been removed.\")}</p>\r\n        </div>\r\n      </Layout>\r\n    );\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        <ProductDetailBlock product={product} />\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ProductDetailPage;\r\n"
     },
     {
       "path": "product-detail-page/lang/en.json",

package/dist/registry/product-detail-section.json

@@ -23,7 +23,7 @@
       "path": "product-detail-section/product-detail-section.tsx",
       "type": "registry:component",
       "target": "$modules$/product-detail-section/product-detail-section.tsx",
-      "content": "import { Star, Heart, Facebook, Twitter, MessageCircle } from \"lucide-react\";\r\nimport { toast } from \"sonner\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  formatPrice,\r\n  type Product,\r\n} from \"@/modules/ecommerce-core\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ProductDetailSectionProps {\r\n  product: Product;\r\n  className?: string;\r\n}\r\n\r\nexport function ProductDetailSection({\r\n  product,\r\n  className,\r\n}: ProductDetailSectionProps) {\r\n  const { t } = useTranslation(\"product-detail-section\");\r\n  const { addItem } = useCart();\r\n  const { isFavorite, addToFavorites, removeFromFavorites } = useFavorites();\r\n  const currency = (constants.site as any).currency || \"USD\";\r\n\r\n  if (!product) {\r\n    return null;\r\n  }\r\n\r\n  const price = product.on_sale && product.sale_price\r\n    ? product.sale_price\r\n    : product.price;\r\n\r\n  const handleAddToCart = () => {\r\n    addItem(product);\r\n    toast.success(t(\"addedToCart\", \"Added to cart!\"));\r\n  };\r\n\r\n  const handleToggleFavorite = () => {\r\n    if (isFavorite(product.id)) {\r\n      removeFromFavorites(product.id);\r\n    } else {\r\n      addToFavorites(product);\r\n    }\r\n  };\r\n\r\n  const renderStars = (rating: number) => {\r\n    return Array.from({ length: 5 }, (_, i) => (\r\n      <Star\r\n        key={i}\r\n        className={cn(\r\n          \"w-4 h-4\",\r\n          i < Math.floor(rating) ? \"fill-primary text-primary\" : \"text-primary\"\r\n        )}\r\n      />\r\n    ));\r\n  };\r\n\r\n  return (\r\n    <section className={cn(\"py-24\", className)}>\r\n      <div className=\"container px-5 mx-auto\">\r\n        <div className=\"lg:w-4/5 mx-auto flex flex-wrap\">\r\n          <img\r\n            alt={product.name}\r\n            className=\"lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded\"\r\n            src={product.images[0] || \"/images/placeholder.png\"}\r\n          />\r\n          <div className=\"lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0\">\r\n            {product.brand && (\r\n              <h2 className=\"text-sm text-muted-foreground tracking-widest uppercase\">\r\n                {product.brand}\r\n              </h2>\r\n            )}\r\n            <h1 className=\"text-3xl font-medium mb-1\">{product.name}</h1>\r\n\r\n            <div className=\"flex mb-4\">\r\n              <span className=\"flex items-center\">\r\n                {renderStars(product.rating)}\r\n                <span className=\"text-muted-foreground ml-3\">\r\n                  {product.review_count} {t(\"reviews\", \"Reviews\")}\r\n                </span>\r\n              </span>\r\n              <span className=\"flex ml-3 pl-3 py-2 border-l-2 border-border space-x-2\">\r\n                <a\r\n                  href=\"#\"\r\n                  className=\"text-muted-foreground hover:text-foreground\"\r\n                >\r\n                  <Facebook className=\"w-5 h-5\" />\r\n                </a>\r\n                <a\r\n                  href=\"#\"\r\n                  className=\"text-muted-foreground hover:text-foreground\"\r\n                >\r\n                  <Twitter className=\"w-5 h-5\" />\r\n                </a>\r\n                <a\r\n                  href=\"#\"\r\n                  className=\"text-muted-foreground hover:text-foreground\"\r\n                >\r\n                  <MessageCircle className=\"w-5 h-5\" />\r\n                </a>\r\n              </span>\r\n            </div>\r\n\r\n            <p className=\"leading-relaxed text-muted-foreground\">\r\n              {product.description}\r\n            </p>\r\n\r\n            {product.category_name && (\r\n              <p className=\"mt-4 text-sm text-muted-foreground\">\r\n                {t(\"category\", \"Category\")}: {product.category_name}\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"flex mt-6 items-center pb-5 border-b-2 border-border mb-5\">\r\n              {product.stock > 0 ? (\r\n                <span className=\"text-sm text-green-600 dark:text-green-400\">\r\n                  {t(\"inStock\", \"In Stock\")} ({product.stock})\r\n                </span>\r\n              ) : (\r\n                <span className=\"text-sm text-red-600 dark:text-red-400\">\r\n                  {t(\"outOfStock\", \"Out of Stock\")}\r\n                </span>\r\n              )}\r\n            </div>\r\n\r\n            <div className=\"flex items-center\">\r\n              <span className=\"font-medium text-2xl\">\r\n                {formatPrice(price, currency)}\r\n                {product.on_sale && product.sale_price && (\r\n                  <span className=\"text-lg text-muted-foreground line-through ml-2\">\r\n                    {formatPrice(product.price, currency)}\r\n                  </span>\r\n                )}\r\n              </span>\r\n              <Button\r\n                onClick={handleAddToCart}\r\n                className=\"ml-auto\"\r\n                disabled={product.stock === 0}\r\n              >\r\n                {t(\"addToCart\", \"Add to Cart\")}\r\n              </Button>\r\n              <Button\r\n                variant=\"outline\"\r\n                size=\"icon\"\r\n                onClick={handleToggleFavorite}\r\n                className=\"rounded-full ml-4\"\r\n              >\r\n                <Heart\r\n                  className={cn(\r\n                    \"w-5 h-5\",\r\n                    isFavorite(product.id) && \"fill-current text-red-500\"\r\n                  )}\r\n                />\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
+      "content": "import { useMemo } from \"react\";\r\nimport { Star, Heart, Facebook, Twitter, MessageCircle } from \"lucide-react\";\r\nimport { toast } from \"sonner\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  formatPrice,\r\n  type Product,\r\n} from \"@/modules/ecommerce-core\";\r\nimport type { Category } from \"@/modules/ecommerce-core/types\";\r\nimport { useDbList } from \"@/db\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ProductDetailSectionProps {\r\n  product: Product;\r\n  className?: string;\r\n}\r\n\r\nexport function ProductDetailSection({\r\n  product,\r\n  className,\r\n}: ProductDetailSectionProps) {\r\n  const { t } = useTranslation(\"product-detail-section\");\r\n  const { addItem } = useCart();\r\n  const { isFavorite, addToFavorites, removeFromFavorites } = useFavorites();\r\n  const { data: productCategories = [] } = useDbList<Category>(\"product_categories\");\r\n  const categoryMap = useMemo(() => new Map(productCategories.map(c => [c.id, c])), [productCategories]);\r\n  const currency = (constants.site as any).currency || \"USD\";\r\n\r\n  if (!product) {\r\n    return null;\r\n  }\r\n\r\n  const price = product.on_sale && product.sale_price\r\n    ? product.sale_price\r\n    : product.price;\r\n\r\n  const handleAddToCart = () => {\r\n    addItem(product);\r\n    toast.success(t(\"addedToCart\", \"Added to cart!\"));\r\n  };\r\n\r\n  const handleToggleFavorite = () => {\r\n    if (isFavorite(product.id)) {\r\n      removeFromFavorites(product.id);\r\n    } else {\r\n      addToFavorites(product);\r\n    }\r\n  };\r\n\r\n  const renderStars = (rating: number) => {\r\n    return Array.from({ length: 5 }, (_, i) => (\r\n      <Star\r\n        key={i}\r\n        className={cn(\r\n          \"w-4 h-4\",\r\n          i < Math.floor(rating) ? \"fill-primary text-primary\" : \"text-primary\"\r\n        )}\r\n      />\r\n    ));\r\n  };\r\n\r\n  return (\r\n    <section className={cn(\"py-24\", className)}>\r\n      <div className=\"container px-5 mx-auto\">\r\n        <div className=\"lg:w-4/5 mx-auto flex flex-wrap\">\r\n          <img\r\n            alt={product.name}\r\n            className=\"lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded\"\r\n            src={product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"}\r\n          />\r\n          <div className=\"lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0\">\r\n            {product.brand && (\r\n              <h2 className=\"text-sm text-muted-foreground tracking-widest uppercase\">\r\n                {product.brand}\r\n              </h2>\r\n            )}\r\n            <h1 className=\"text-3xl font-medium mb-1\">{product.name}</h1>\r\n\r\n            <div className=\"flex mb-4\">\r\n              <span className=\"flex items-center\">\r\n                {renderStars(product.rating)}\r\n                <span className=\"text-muted-foreground ml-3\">\r\n                  {product.review_count} {t(\"reviews\", \"Reviews\")}\r\n                </span>\r\n              </span>\r\n              <span className=\"flex ml-3 pl-3 py-2 border-l-2 border-border space-x-2\">\r\n                <a\r\n                  href=\"#\"\r\n                  className=\"text-muted-foreground hover:text-foreground\"\r\n                >\r\n                  <Facebook className=\"w-5 h-5\" />\r\n                </a>\r\n                <a\r\n                  href=\"#\"\r\n                  className=\"text-muted-foreground hover:text-foreground\"\r\n                >\r\n                  <Twitter className=\"w-5 h-5\" />\r\n                </a>\r\n                <a\r\n                  href=\"#\"\r\n                  className=\"text-muted-foreground hover:text-foreground\"\r\n                >\r\n                  <MessageCircle className=\"w-5 h-5\" />\r\n                </a>\r\n              </span>\r\n            </div>\r\n\r\n            <p className=\"leading-relaxed text-muted-foreground\">\r\n              {product.description}\r\n            </p>\r\n\r\n            {categoryMap.get(product.categories?.[0] as number)?.name && (\r\n              <p className=\"mt-4 text-sm text-muted-foreground\">\r\n                {t(\"category\", \"Category\")}: {categoryMap.get(product.categories?.[0] as number)?.name}\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"flex mt-6 items-center pb-5 border-b-2 border-border mb-5\">\r\n              {product.stock > 0 ? (\r\n                <span className=\"text-sm text-green-600 dark:text-green-400\">\r\n                  {t(\"inStock\", \"In Stock\")} ({product.stock})\r\n                </span>\r\n              ) : (\r\n                <span className=\"text-sm text-red-600 dark:text-red-400\">\r\n                  {t(\"outOfStock\", \"Out of Stock\")}\r\n                </span>\r\n              )}\r\n            </div>\r\n\r\n            <div className=\"flex items-center\">\r\n              <span className=\"font-medium text-2xl\">\r\n                {formatPrice(price, currency)}\r\n                {product.on_sale && product.sale_price && (\r\n                  <span className=\"text-lg text-muted-foreground line-through ml-2\">\r\n                    {formatPrice(product.price, currency)}\r\n                  </span>\r\n                )}\r\n              </span>\r\n              <Button\r\n                onClick={handleAddToCart}\r\n                className=\"ml-auto\"\r\n                disabled={product.stock === 0}\r\n              >\r\n                {t(\"addToCart\", \"Add to Cart\")}\r\n              </Button>\r\n              <Button\r\n                variant=\"outline\"\r\n                size=\"icon\"\r\n                onClick={handleToggleFavorite}\r\n                className=\"rounded-full ml-4\"\r\n              >\r\n                <Heart\r\n                  className={cn(\r\n                    \"w-5 h-5\",\r\n                    isFavorite(product.id) && \"fill-current text-red-500\"\r\n                  )}\r\n                />\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
     },
     {
       "path": "product-detail-section/lang/en.json",

package/dist/registry/product-quick-view.json

@@ -17,7 +17,7 @@
       "path": "product-quick-view/product-quick-view.tsx",
       "type": "registry:component",
       "target": "$modules$/product-quick-view/product-quick-view.tsx",
-      "content": "\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogTitle,\r\n} from \"@/components/ui/dialog\";\r\nimport { X, Minus, Plus, ShoppingCart, Heart } from \"lucide-react\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  formatPrice,\r\n  type Product,\r\n} from \"@/modules/ecommerce-core\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ProductQuickViewProps {\r\n  product: Product;\r\n  open: boolean;\r\n  onOpenChange: (open: boolean) => void;\r\n  className?: string;\r\n}\r\n\r\nexport function ProductQuickView({\r\n  product,\r\n  open,\r\n  onOpenChange,\r\n  className,\r\n}: ProductQuickViewProps) {\r\n  const { t } = useTranslation(\"product-quick-view\");\r\n  const { addItem } = useCart();\r\n  const { isFavorite, addToFavorites, removeFromFavorites } = useFavorites();\r\n  const currency = (constants.site as any).currency || \"USD\";\r\n\r\n  const [selectedImage, setSelectedImage] = useState(0);\r\n  const [quantity, setQuantity] = useState(1);\r\n\r\n  if (!product) {\r\n    return null;\r\n  }\r\n\r\n  const price = product.on_sale && product.sale_price\r\n    ? product.sale_price\r\n    : product.price;\r\n\r\n  const discount = product.on_sale && product.sale_price\r\n    ? Math.round(((product.price - product.sale_price) / product.price) * 100)\r\n    : 0;\r\n\r\n  const handleAddToCart = () => {\r\n    for (let i = 0; i < quantity; i++) {\r\n      addItem(product);\r\n    }\r\n    toast.success(t(\"addedToCart\", \"Added to cart!\"));\r\n    onOpenChange(false);\r\n  };\r\n\r\n  const handleToggleFavorite = () => {\r\n    if (isFavorite(product.id)) {\r\n      removeFromFavorites(product.id);\r\n      toast.success(t(\"removedFromFavorites\", \"Removed from favorites\"));\r\n    } else {\r\n      addToFavorites(product);\r\n      toast.success(t(\"addedToFavorites\", \"Added to favorites!\"));\r\n    }\r\n  };\r\n\r\n  const incrementQuantity = () => setQuantity((q) => q + 1);\r\n  const decrementQuantity = () => setQuantity((q) => Math.max(1, q - 1));\r\n\r\n  return (\r\n    <Dialog open={open} onOpenChange={onOpenChange}>\r\n      <DialogContent className={cn(\"sm:max-w-4xl p-0 gap-0 overflow-hidden\", className)}>\r\n        <DialogTitle className=\"sr-only\">{product.name}</DialogTitle>\r\n\r\n        <button\r\n          onClick={() => onOpenChange(false)}\r\n          className=\"absolute right-4 top-4 z-10 rounded-full bg-background/80 backdrop-blur-sm p-2 hover:bg-background transition-colors\"\r\n        >\r\n          <X className=\"h-4 w-4\" />\r\n          <span className=\"sr-only\">Close</span>\r\n        </button>\r\n\r\n        <div className=\"grid md:grid-cols-2\">\r\n          {/* Image Gallery */}\r\n          <div className=\"relative bg-muted aspect-square md:aspect-auto md:h-full\">\r\n            <img\r\n              src={product.images[selectedImage] || \"/images/placeholder.png\"}\r\n              alt={product.name}\r\n              className=\"w-full h-full object-cover\"\r\n            />\r\n\r\n            {discount > 0 && (\r\n              <span className=\"absolute top-4 left-4 bg-destructive text-destructive-foreground text-sm font-semibold px-3 py-1 rounded-full\">\r\n                -{discount}%\r\n              </span>\r\n            )}\r\n\r\n            {product.images.length > 1 && (\r\n              <div className=\"absolute bottom-4 left-4 flex flex-col gap-2\">\r\n                {product.images.map((image, index) => (\r\n                  <button\r\n                    key={index}\r\n                    onClick={() => setSelectedImage(index)}\r\n                    className={cn(\r\n                      \"w-14 h-14 rounded-lg overflow-hidden border-2 transition-all bg-background/80 backdrop-blur-sm\",\r\n                      selectedImage === index\r\n                        ? \"border-primary ring-2 ring-primary/20\"\r\n                        : \"border-transparent opacity-70 hover:opacity-100\"\r\n                    )}\r\n                  >\r\n                    <img\r\n                      src={image}\r\n                      alt={`${product.name} ${index + 1}`}\r\n                      className=\"w-full h-full object-cover\"\r\n                    />\r\n                  </button>\r\n                ))}\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Product Info */}\r\n          <div className=\"p-6 md:p-8 flex flex-col\">\r\n            <div className=\"flex-1\">\r\n              {product.brand && (\r\n                <p className=\"text-sm text-muted-foreground uppercase tracking-wide mb-1\">\r\n                  {product.brand}\r\n                </p>\r\n              )}\r\n              <h2 className=\"text-2xl md:text-3xl font-bold mb-2\">\r\n                {product.name}\r\n              </h2>\r\n\r\n              {/* Price */}\r\n              <div className=\"flex items-center gap-3 mb-4\">\r\n                <span className=\"text-2xl font-bold text-primary\">\r\n                  {formatPrice(price, currency)}\r\n                </span>\r\n                {product.on_sale && product.sale_price && (\r\n                  <span className=\"text-lg text-muted-foreground line-through\">\r\n                    {formatPrice(product.price, currency)}\r\n                  </span>\r\n                )}\r\n              </div>\r\n\r\n              {/* Description */}\r\n              <p className=\"text-muted-foreground mb-6 line-clamp-4\">\r\n                {product.description}\r\n              </p>\r\n\r\n              {/* Category */}\r\n              {product.category_name && (\r\n                <p className=\"text-sm text-muted-foreground mb-4\">\r\n                  {t(\"category\", \"Category\")}: {product.category_name}\r\n                </p>\r\n              )}\r\n\r\n              {/* Quantity */}\r\n              <div className=\"mb-6\">\r\n                <label className=\"text-sm font-medium mb-2 block\">\r\n                  {t(\"quantity\", \"Quantity\")}\r\n                </label>\r\n                <div className=\"flex items-center gap-3\">\r\n                  <div className=\"flex items-center border border-border rounded-lg\">\r\n                    <button\r\n                      onClick={decrementQuantity}\r\n                      className=\"p-3 hover:bg-muted transition-colors\"\r\n                      disabled={quantity <= 1}\r\n                    >\r\n                      <Minus className=\"h-4 w-4\" />\r\n                    </button>\r\n                    <span className=\"w-12 text-center font-medium\">\r\n                      {quantity}\r\n                    </span>\r\n                    <button\r\n                      onClick={incrementQuantity}\r\n                      className=\"p-3 hover:bg-muted transition-colors\"\r\n                    >\r\n                      <Plus className=\"h-4 w-4\" />\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Actions */}\r\n            <div className=\"space-y-3 pt-4 border-t border-border\">\r\n              <div className=\"flex gap-2\">\r\n                <Button\r\n                  onClick={handleAddToCart}\r\n                  className=\"flex-1 gap-2\"\r\n                  size=\"lg\"\r\n                >\r\n                  <ShoppingCart className=\"h-5 w-5\" />\r\n                  {t(\"addToCart\", \"Add to Cart\")}\r\n                </Button>\r\n                <Button\r\n                  variant=\"outline\"\r\n                  size=\"lg\"\r\n                  onClick={handleToggleFavorite}\r\n                  className=\"px-4\"\r\n                >\r\n                  <Heart\r\n                    className={cn(\r\n                      \"h-5 w-5\",\r\n                      isFavorite(product.id) && \"fill-current text-red-500\"\r\n                    )}\r\n                  />\r\n                </Button>\r\n              </div>\r\n\r\n              <Link to={`/products/${product.slug}`} className=\"block\">\r\n                <Button\r\n                  variant=\"outline\"\r\n                  className=\"w-full\"\r\n                  size=\"lg\"\r\n                  onClick={() => onOpenChange(false)}\r\n                >\r\n                  {t(\"viewDetails\", \"View Full Details\")}\r\n                </Button>\r\n              </Link>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </DialogContent>\r\n    </Dialog>\r\n  );\r\n}\r\n"
+      "content": "\"use client\";\r\n\r\nimport { useState, useMemo } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogTitle,\r\n} from \"@/components/ui/dialog\";\r\nimport { X, Minus, Plus, ShoppingCart, Heart } from \"lucide-react\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  formatPrice,\r\n  type Product,\r\n} from \"@/modules/ecommerce-core\";\r\nimport type { Category } from \"@/modules/ecommerce-core/types\";\r\nimport { useDbList } from \"@/db\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ProductQuickViewProps {\r\n  product: Product;\r\n  open: boolean;\r\n  onOpenChange: (open: boolean) => void;\r\n  className?: string;\r\n}\r\n\r\nexport function ProductQuickView({\r\n  product,\r\n  open,\r\n  onOpenChange,\r\n  className,\r\n}: ProductQuickViewProps) {\r\n  const { t } = useTranslation(\"product-quick-view\");\r\n  const { addItem } = useCart();\r\n  const { isFavorite, addToFavorites, removeFromFavorites } = useFavorites();\r\n  const { data: productCategories = [] } = useDbList<Category>(\"product_categories\");\r\n  const categoryMap = useMemo(() => new Map(productCategories.map(c => [c.id, c])), [productCategories]);\r\n  const currency = (constants.site as any).currency || \"USD\";\r\n\r\n  const [selectedImage, setSelectedImage] = useState(0);\r\n  const [quantity, setQuantity] = useState(1);\r\n\r\n  if (!product) {\r\n    return null;\r\n  }\r\n\r\n  const price = product.on_sale && product.sale_price\r\n    ? product.sale_price\r\n    : product.price;\r\n\r\n  const discount = product.on_sale && product.sale_price\r\n    ? Math.round(((product.price - product.sale_price) / product.price) * 100)\r\n    : 0;\r\n\r\n  const handleAddToCart = () => {\r\n    for (let i = 0; i < quantity; i++) {\r\n      addItem(product);\r\n    }\r\n    toast.success(t(\"addedToCart\", \"Added to cart!\"));\r\n    onOpenChange(false);\r\n  };\r\n\r\n  const handleToggleFavorite = () => {\r\n    if (isFavorite(product.id)) {\r\n      removeFromFavorites(product.id);\r\n      toast.success(t(\"removedFromFavorites\", \"Removed from favorites\"));\r\n    } else {\r\n      addToFavorites(product);\r\n      toast.success(t(\"addedToFavorites\", \"Added to favorites!\"));\r\n    }\r\n  };\r\n\r\n  const incrementQuantity = () => setQuantity((q) => q + 1);\r\n  const decrementQuantity = () => setQuantity((q) => Math.max(1, q - 1));\r\n\r\n  return (\r\n    <Dialog open={open} onOpenChange={onOpenChange}>\r\n      <DialogContent className={cn(\"sm:max-w-4xl p-0 gap-0 overflow-hidden\", className)}>\r\n        <DialogTitle className=\"sr-only\">{product.name}</DialogTitle>\r\n\r\n        <button\r\n          onClick={() => onOpenChange(false)}\r\n          className=\"absolute right-4 top-4 z-10 rounded-full bg-background/80 backdrop-blur-sm p-2 hover:bg-background transition-colors\"\r\n        >\r\n          <X className=\"h-4 w-4\" />\r\n          <span className=\"sr-only\">Close</span>\r\n        </button>\r\n\r\n        <div className=\"grid md:grid-cols-2\">\r\n          {/* Image Gallery */}\r\n          <div className=\"relative bg-muted aspect-square md:aspect-auto md:h-full\">\r\n            <img\r\n              src={product.images[selectedImage] || \"/images/placeholder.png\"}\r\n              alt={product.name}\r\n              className=\"w-full h-full object-cover\"\r\n            />\r\n\r\n            {discount > 0 && (\r\n              <span className=\"absolute top-4 left-4 bg-destructive text-destructive-foreground text-sm font-semibold px-3 py-1 rounded-full\">\r\n                -{discount}%\r\n              </span>\r\n            )}\r\n\r\n            {product?.images?.length > 1 && (\r\n              <div className=\"absolute bottom-4 left-4 flex flex-col gap-2\">\r\n                {product.images.map((image, index) => (\r\n                  <button\r\n                    key={index}\r\n                    onClick={() => setSelectedImage(index)}\r\n                    className={cn(\r\n                      \"w-14 h-14 rounded-lg overflow-hidden border-2 transition-all bg-background/80 backdrop-blur-sm\",\r\n                      selectedImage === index\r\n                        ? \"border-primary ring-2 ring-primary/20\"\r\n                        : \"border-transparent opacity-70 hover:opacity-100\"\r\n                    )}\r\n                  >\r\n                    <img\r\n                      src={image}\r\n                      alt={`${product.name} ${index + 1}`}\r\n                      className=\"w-full h-full object-cover\"\r\n                    />\r\n                  </button>\r\n                ))}\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Product Info */}\r\n          <div className=\"p-6 md:p-8 flex flex-col\">\r\n            <div className=\"flex-1\">\r\n              {product.brand && (\r\n                <p className=\"text-sm text-muted-foreground uppercase tracking-wide mb-1\">\r\n                  {product.brand}\r\n                </p>\r\n              )}\r\n              <h2 className=\"text-2xl md:text-3xl font-bold mb-2\">\r\n                {product.name}\r\n              </h2>\r\n\r\n              {/* Price */}\r\n              <div className=\"flex items-center gap-3 mb-4\">\r\n                <span className=\"text-2xl font-bold text-primary\">\r\n                  {formatPrice(price, currency)}\r\n                </span>\r\n                {product.on_sale && product.sale_price && (\r\n                  <span className=\"text-lg text-muted-foreground line-through\">\r\n                    {formatPrice(product.price, currency)}\r\n                  </span>\r\n                )}\r\n              </div>\r\n\r\n              {/* Description */}\r\n              <p className=\"text-muted-foreground mb-6 line-clamp-4\">\r\n                {product.description}\r\n              </p>\r\n\r\n              {/* Category */}\r\n              {categoryMap.get(product.categories?.[0] as number)?.name && (\r\n                <p className=\"text-sm text-muted-foreground mb-4\">\r\n                  {t(\"category\", \"Category\")}: {categoryMap.get(product.categories?.[0] as number)?.name}\r\n                </p>\r\n              )}\r\n\r\n              {/* Quantity */}\r\n              <div className=\"mb-6\">\r\n                <label className=\"text-sm font-medium mb-2 block\">\r\n                  {t(\"quantity\", \"Quantity\")}\r\n                </label>\r\n                <div className=\"flex items-center gap-3\">\r\n                  <div className=\"flex items-center border border-border rounded-lg\">\r\n                    <button\r\n                      onClick={decrementQuantity}\r\n                      className=\"p-3 hover:bg-muted transition-colors\"\r\n                      disabled={quantity <= 1}\r\n                    >\r\n                      <Minus className=\"h-4 w-4\" />\r\n                    </button>\r\n                    <span className=\"w-12 text-center font-medium\">\r\n                      {quantity}\r\n                    </span>\r\n                    <button\r\n                      onClick={incrementQuantity}\r\n                      className=\"p-3 hover:bg-muted transition-colors\"\r\n                    >\r\n                      <Plus className=\"h-4 w-4\" />\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Actions */}\r\n            <div className=\"space-y-3 pt-4 border-t border-border\">\r\n              <div className=\"flex gap-2\">\r\n                <Button\r\n                  onClick={handleAddToCart}\r\n                  className=\"flex-1 gap-2\"\r\n                  size=\"lg\"\r\n                >\r\n                  <ShoppingCart className=\"h-5 w-5\" />\r\n                  {t(\"addToCart\", \"Add to Cart\")}\r\n                </Button>\r\n                <Button\r\n                  variant=\"outline\"\r\n                  size=\"lg\"\r\n                  onClick={handleToggleFavorite}\r\n                  className=\"px-4\"\r\n                >\r\n                  <Heart\r\n                    className={cn(\r\n                      \"h-5 w-5\",\r\n                      isFavorite(product.id) && \"fill-current text-red-500\"\r\n                    )}\r\n                  />\r\n                </Button>\r\n              </div>\r\n\r\n              <Link to={`/products/${product.slug}`} className=\"block\">\r\n                <Button\r\n                  variant=\"outline\"\r\n                  className=\"w-full\"\r\n                  size=\"lg\"\r\n                  onClick={() => onOpenChange(false)}\r\n                >\r\n                  {t(\"viewDetails\", \"View Full Details\")}\r\n                </Button>\r\n              </Link>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </DialogContent>\r\n    </Dialog>\r\n  );\r\n}\r\n"
     },
     {
       "path": "product-quick-view/index.ts",