@promakeai/cli 0.0.5 → 0.1.0

package/dist/registry/about-page.json

@@ -3,7 +3,9 @@
   "type": "registry:page",
   "title": "About Page",
   "description": "Company/personal about page with hero section, mission statement, team member cards with photos, company timeline/history, values section with icons, and statistics counters. Responsive layout with alternating content sections. Supports both corporate and personal portfolio styles.",
-  "registryDependencies": [],
+  "registryDependencies": [
+    "animations"
+  ],
   "usage": "import { AboutPage } from '@/modules/about-page';\n\n<Route path=\"/about\" element={<AboutPage />} />\n\n• Sections: hero, mission, team, timeline, values, stats\n• Edit content in lang/en.json\n• Wrapped with Layout component",
   "route": {
     "path": "/about",
@@ -20,13 +22,13 @@
       "path": "about-page/about-page.tsx",
       "type": "registry:page",
       "target": "$modules$/about-page/about-page.tsx",
-      "content": "import { useTranslation } from \"react-i18next\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { Layout } from \"@/components/Layout\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Users, Target, Award, Heart } from \"lucide-react\";\nimport { FadeIn, StaggerContainer, StaggerItem, ScaleUp } from \"@/modules/animations\";\n\nexport function AboutPage() {\n  const { t } = useTranslation(\"about-page\");\n  usePageTitle({ title: t(\"title\") });\n\n  const values = [\n    { icon: Target, titleKey: \"missionTitle\", descKey: \"missionDesc\" },\n    { icon: Heart, titleKey: \"valuesTitle\", descKey: \"valuesDesc\" },\n    { icon: Users, titleKey: \"teamTitle\", descKey: \"teamDesc\" },\n    { icon: Award, titleKey: \"qualityTitle\", descKey: \"qualityDesc\" },\n  ];\n\n  const stats = [\n    { valueKey: \"customersValue\", labelKey: \"customersLabel\" },\n    { valueKey: \"projectsValue\", labelKey: \"projectsLabel\" },\n    { valueKey: \"experienceValue\", labelKey: \"experienceLabel\" },\n    { valueKey: \"satisfactionValue\", labelKey: \"satisfactionLabel\" },\n  ];\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"container mx-auto px-4\">\n          {/* Hero Section */}\n          <FadeIn className=\"text-center mb-16\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-3xl mx-auto\">\n              {t(\"subtitle\")}\n            </p>\n          </FadeIn>\n\n          {/* Story Section */}\n          <FadeIn delay={0.1} className=\"max-w-4xl mx-auto mb-16\">\n            <Card>\n              <CardContent className=\"p-8\">\n                <h2 className=\"text-2xl font-semibold mb-4\">{t(\"storyTitle\")}</h2>\n                <div className=\"space-y-4 text-muted-foreground\">\n                  <p>{t(\"storyP1\")}</p>\n                  <p>{t(\"storyP2\")}</p>\n                </div>\n              </CardContent>\n            </Card>\n          </FadeIn>\n\n          {/* Values & Stats */}\n          <div className=\"max-w-6xl mx-auto\">\n            {/* Values Grid */}\n            <StaggerContainer className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16\">\n              {values.map(({ icon: Icon, titleKey, descKey }) => (\n                <StaggerItem key={titleKey}>\n                  <Card className=\"text-center h-full\">\n                    <CardContent className=\"p-6\">\n                      <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4\">\n                        <Icon className=\"w-6 h-6 text-primary\" />\n                      </div>\n                      <h3 className=\"font-semibold mb-2\">{t(titleKey)}</h3>\n                      <p className=\"text-sm text-muted-foreground\">{t(descKey)}</p>\n                    </CardContent>\n                  </Card>\n                </StaggerItem>\n              ))}\n            </StaggerContainer>\n\n            {/* Stats Section */}\n            <ScaleUp className=\"bg-primary/5 rounded-2xl p-8 mb-16\">\n              <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 text-center\">\n                {stats.map(({ valueKey, labelKey }) => (\n                  <div key={valueKey}>\n                    <div className=\"text-3xl font-bold text-primary mb-1\">\n                      {t(valueKey)}\n                    </div>\n                    <div className=\"text-sm text-muted-foreground\">\n                      {t(labelKey)}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </ScaleUp>\n          </div>\n\n          {/* CTA Section */}\n          <FadeIn className=\"text-center\">\n            <h2 className=\"text-2xl font-semibold mb-4\">{t(\"ctaTitle\")}</h2>\n            <p className=\"text-muted-foreground mb-6 max-w-2xl mx-auto\">\n              {t(\"ctaDesc\")}\n            </p>\n          </FadeIn>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n\nexport default AboutPage;\n"
+      "content": "import { useTranslation } from \"react-i18next\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { Layout } from \"@/components/Layout\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Users, Target, Award, Heart } from \"lucide-react\";\nimport { FadeIn, StaggerContainer, StaggerItem, ScaleUp } from \"@/modules/animations\";\n\nexport function AboutPage() {\n  const { t } = useTranslation(\"about-page\");\n  usePageTitle({ title: t(\"title\") });\n\n  const values = [\n    { icon: Target, titleKey: \"missionTitle\", descKey: \"missionDesc\" },\n    { icon: Heart, titleKey: \"valuesTitle\", descKey: \"valuesDesc\" },\n    { icon: Users, titleKey: \"teamTitle\", descKey: \"teamDesc\" },\n    { icon: Award, titleKey: \"qualityTitle\", descKey: \"qualityDesc\" },\n  ];\n\n  const stats = [\n    { valueKey: \"customersValue\", labelKey: \"customersLabel\" },\n    { valueKey: \"projectsValue\", labelKey: \"projectsLabel\" },\n    { valueKey: \"experienceValue\", labelKey: \"experienceLabel\" },\n    { valueKey: \"satisfactionValue\", labelKey: \"satisfactionLabel\" },\n  ];\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n          {/* Hero Section */}\n          <FadeIn className=\"text-center mb-16\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-3xl mx-auto\">\n              {t(\"subtitle\")}\n            </p>\n          </FadeIn>\n\n          {/* Story Section */}\n          <FadeIn delay={0.1} className=\"mb-16\">\n            <Card>\n              <CardContent className=\"p-8\">\n                <h2 className=\"text-2xl font-semibold mb-4\">{t(\"storyTitle\")}</h2>\n                <div className=\"space-y-4 text-muted-foreground\">\n                  <p>{t(\"storyP1\")}</p>\n                  <p>{t(\"storyP2\")}</p>\n                </div>\n              </CardContent>\n            </Card>\n          </FadeIn>\n\n          {/* Values & Stats */}\n          <div>\n            {/* Values Grid */}\n            <StaggerContainer className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16\">\n              {values.map(({ icon: Icon, titleKey, descKey }) => (\n                <StaggerItem key={titleKey}>\n                  <Card className=\"text-center h-full\">\n                    <CardContent className=\"p-6\">\n                      <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4\">\n                        <Icon className=\"w-6 h-6 text-primary\" />\n                      </div>\n                      <h3 className=\"font-semibold mb-2\">{t(titleKey)}</h3>\n                      <p className=\"text-sm text-muted-foreground\">{t(descKey)}</p>\n                    </CardContent>\n                  </Card>\n                </StaggerItem>\n              ))}\n            </StaggerContainer>\n\n            {/* Stats Section */}\n            <ScaleUp className=\"bg-primary/5 rounded-2xl p-8 mb-16\">\n              <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 text-center\">\n                {stats.map(({ valueKey, labelKey }) => (\n                  <div key={valueKey}>\n                    <div className=\"text-3xl font-bold text-primary mb-1\">\n                      {t(valueKey)}\n                    </div>\n                    <div className=\"text-sm text-muted-foreground\">\n                      {t(labelKey)}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </ScaleUp>\n          </div>\n\n          {/* CTA Section */}\n          <FadeIn className=\"text-center\">\n            <h2 className=\"text-2xl font-semibold mb-4\">{t(\"ctaTitle\")}</h2>\n            <p className=\"text-muted-foreground mb-6 max-w-2xl mx-auto\">\n              {t(\"ctaDesc\")}\n            </p>\n          </FadeIn>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n\nexport default AboutPage;\n"
     },
     {
       "path": "about-page/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/about-page/lang/en.json",
-      "content": "{\r\n  \"title\": \"About Us\",\r\n  \"subtitle\": \"AI will customize this about page subtitle based on your site. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\",\r\n  \"storyTitle\": \"Our Story\",\r\n  \"storyP1\": \"This is placeholder text for your story. AI will replace this with your actual background and journey. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\",\r\n  \"storyP2\": \"Placeholder text for the second paragraph of your story. AI will customize this based on your journey and values. Sed do eiusmod tempor incididunt ut labore.\",\r\n  \"missionTitle\": \"Our Mission\",\r\n  \"missionDesc\": \"AI will customize this mission description based on your goals. Ut enim ad minim veniam, quis nostrud exercitation.\",\r\n  \"valuesTitle\": \"Our Values\",\r\n  \"valuesDesc\": \"This values description will be replaced by AI with your actual values. Duis aute irure dolor in reprehenderit.\",\r\n  \"teamTitle\": \"Our Team\",\r\n  \"teamDesc\": \"Placeholder team description. AI will customize this based on your team structure and culture.\",\r\n  \"qualityTitle\": \"Quality First\",\r\n  \"qualityDesc\": \"AI will replace this quality description with relevant information about your quality standards.\",\r\n  \"customersValue\": \"500+\",\r\n  \"customersLabel\": \"Happy Customers\",\r\n  \"projectsValue\": \"1000+\",\r\n  \"projectsLabel\": \"Projects Completed\",\r\n  \"experienceValue\": \"10+\",\r\n  \"experienceLabel\": \"Years Experience\",\r\n  \"satisfactionValue\": \"99%\",\r\n  \"satisfactionLabel\": \"Client Satisfaction\",\r\n  \"ctaTitle\": \"Ready to Work Together?\",\r\n  \"ctaDesc\": \"AI will customize this CTA description based on your site goals. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\r\n}\r\n"
+      "content": "{\r\n  \"title\": \"About Us\",\r\n  \"subtitle\": \"Ask Promake to customize this about page subtitle based on your site. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\",\r\n  \"storyTitle\": \"Our Story\",\r\n  \"storyP1\": \"This is placeholder text for your story. Ask Promake to replace this with your actual background and journey. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\",\r\n  \"storyP2\": \"Placeholder text for the second paragraph of your story. Ask Promake to customize this based on your journey and values. Sed do eiusmod tempor incididunt ut labore.\",\r\n  \"missionTitle\": \"Our Mission\",\r\n  \"missionDesc\": \"Ask Promake to customize this mission description based on your goals. Ut enim ad minim veniam, quis nostrud exercitation.\",\r\n  \"valuesTitle\": \"Our Values\",\r\n  \"valuesDesc\": \"This values description will be replaced by Promake with your actual values. Duis aute irure dolor in reprehenderit.\",\r\n  \"teamTitle\": \"Our Team\",\r\n  \"teamDesc\": \"Placeholder team description. Ask Promake to customize this based on your team structure and culture.\",\r\n  \"qualityTitle\": \"Quality First\",\r\n  \"qualityDesc\": \"Ask Promake to replace this quality description with relevant information about your quality standards.\",\r\n  \"customersValue\": \"500+\",\r\n  \"customersLabel\": \"Happy Customers\",\r\n  \"projectsValue\": \"1000+\",\r\n  \"projectsLabel\": \"Projects Completed\",\r\n  \"experienceValue\": \"10+\",\r\n  \"experienceLabel\": \"Years Experience\",\r\n  \"satisfactionValue\": \"99%\",\r\n  \"satisfactionLabel\": \"Client Satisfaction\",\r\n  \"ctaTitle\": \"Ready to Work Together?\",\r\n  \"ctaDesc\": \"Ask Promake to customize this CTA description based on your site goals. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\r\n}\r\n"
     },
     {
       "path": "about-page/lang/tr.json",

package/dist/registry/about-section.json

@@ -16,13 +16,13 @@
       "path": "about-section/about-section.tsx",
       "type": "registry:component",
       "target": "$modules$/about-section/about-section.tsx",
-      "content": "import { Link } from \"react-router\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\n\r\ninterface AboutSectionProps {\r\n  className?: string;\r\n}\r\n\r\nexport function AboutSection({ className }: AboutSectionProps) {\r\n  const { t } = useTranslation(\"about-section\");\r\n\r\n  const stats = [\r\n    { value: t(\"stat1Value\", \"500+\"), label: t(\"stat1Label\", \"Happy Clients\") },\r\n    { value: t(\"stat2Value\", \"1000+\"), label: t(\"stat2Label\", \"Projects Completed\") },\r\n    { value: t(\"stat3Value\", \"99%\"), label: t(\"stat3Label\", \"Satisfaction Rate\") },\r\n    { value: t(\"stat4Value\", \"15+\"), label: t(\"stat4Label\", \"Years Experience\") },\r\n  ];\r\n\r\n  const companies = [\"Google\", \"Microsoft\", \"Amazon\", \"Apple\", \"Meta\"];\r\n\r\n  return (\r\n    <section className={cn(\"py-16 md:py-24\", className)}>\r\n      <div className=\"container mx-auto px-4\">\r\n        {/* Header */}\r\n        <div className=\"grid md:grid-cols-2 gap-8 mb-12\">\r\n          <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold\">\r\n            {t(\"title\", \"About Our Company\")}\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg\">\r\n            {t(\"description\", \"We are a passionate team dedicated to creating innovative solutions that empower businesses to thrive in the digital age. Our mission is to deliver excellence in everything we do.\")}\r\n          </p>\r\n        </div>\r\n\r\n        {/* Images Grid */}\r\n        <div className=\"grid lg:grid-cols-3 gap-6 mb-16\">\r\n          {/* Main Image */}\r\n          <div className=\"lg:col-span-2\">\r\n            <div className=\"aspect-[16/10] rounded-2xl bg-muted overflow-hidden\">\r\n              <img\r\n                src=\"/images/placeholder.png\"\r\n                alt={t(\"mainImageAlt\", \"Our team\")}\r\n                className=\"w-full h-full object-cover\"\r\n                onError={(e) => {\r\n                  e.currentTarget.style.display = \"none\";\r\n                }}\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          {/* Side Column */}\r\n          <div className=\"flex flex-col gap-6\">\r\n            {/* Info Card */}\r\n            <div className=\"bg-muted rounded-2xl p-6 flex flex-col justify-between flex-1\">\r\n              <div>\r\n                <h3 className=\"text-lg font-semibold mb-2\">\r\n                  {t(\"cardTitle\", \"Our Mission\")}\r\n                </h3>\r\n                <p className=\"text-muted-foreground text-sm mb-4\">\r\n                  {t(\"cardDescription\", \"Providing businesses with effective tools to improve workflows, boost efficiency, and encourage sustainable growth.\")}\r\n                </p>\r\n              </div>\r\n              <Button variant=\"outline\" asChild className=\"w-fit\">\r\n                <Link to=\"/about\">{t(\"cardButton\", \"Learn More\")}</Link>\r\n              </Button>\r\n            </div>\r\n\r\n            {/* Secondary Image */}\r\n            <div className=\"aspect-square rounded-2xl bg-muted overflow-hidden flex-1\">\r\n              <img\r\n                src=\"/images/placeholder.png\"\r\n                alt={t(\"secondaryImageAlt\", \"Our office\")}\r\n                className=\"w-full h-full object-cover\"\r\n                onError={(e) => {\r\n                  e.currentTarget.style.display = \"none\";\r\n                }}\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        {/* Companies */}\r\n        <div className=\"text-center mb-16\">\r\n          <p className=\"text-muted-foreground mb-6\">\r\n            {t(\"companiesTitle\", \"Trusted by leading companies worldwide\")}\r\n          </p>\r\n          <div className=\"flex flex-wrap justify-center items-center gap-8 md:gap-12\">\r\n            {companies.map((company) => (\r\n              <span\r\n                key={company}\r\n                className=\"text-xl md:text-2xl font-semibold text-muted-foreground/50\"\r\n              >\r\n                {company}\r\n              </span>\r\n            ))}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Stats */}\r\n        <div className=\"bg-muted rounded-2xl p-8 md:p-12\">\r\n          <div className=\"text-center md:text-left mb-8\">\r\n            <h3 className=\"text-2xl md:text-3xl font-bold mb-2\">\r\n              {t(\"statsTitle\", \"Our Achievements\")}\r\n            </h3>\r\n            <p className=\"text-muted-foreground max-w-xl\">\r\n              {t(\"statsDescription\", \"Numbers that reflect our commitment to excellence and client satisfaction.\")}\r\n            </p>\r\n          </div>\r\n          <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-8\">\r\n            {stats.map((stat, index) => (\r\n              <div key={index} className=\"text-center\">\r\n                <div className=\"text-3xl md:text-4xl lg:text-5xl font-bold text-primary mb-2\">\r\n                  {stat.value}\r\n                </div>\r\n                <p className=\"text-sm md:text-base text-muted-foreground\">\r\n                  {stat.label}\r\n                </p>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
+      "content": "import { Link } from \"react-router\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\n\r\ninterface AboutSectionProps {\r\n  className?: string;\r\n}\r\n\r\nexport function AboutSection({ className }: AboutSectionProps) {\r\n  const { t } = useTranslation(\"about-section\");\r\n\r\n  const stats = [\r\n    { value: t(\"stat1Value\", \"500+\"), label: t(\"stat1Label\", \"Happy Clients\") },\r\n    { value: t(\"stat2Value\", \"1000+\"), label: t(\"stat2Label\", \"Projects Completed\") },\r\n    { value: t(\"stat3Value\", \"99%\"), label: t(\"stat3Label\", \"Satisfaction Rate\") },\r\n    { value: t(\"stat4Value\", \"15+\"), label: t(\"stat4Label\", \"Years Experience\") },\r\n  ];\r\n\r\n  const companies = [\"Google\", \"Microsoft\", \"Amazon\", \"Apple\", \"Meta\"];\r\n\r\n  return (\r\n    <section className={cn(\"py-16 md:py-24\", className)}>\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n        {/* Header */}\r\n        <div className=\"grid md:grid-cols-2 gap-8 mb-12\">\r\n          <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold\">\r\n            {t(\"title\", \"About Our Company\")}\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg\">\r\n            {t(\"description\", \"We are a passionate team dedicated to creating innovative solutions that empower businesses to thrive in the digital age. Our mission is to deliver excellence in everything we do.\")}\r\n          </p>\r\n        </div>\r\n\r\n        {/* Images Grid */}\r\n        <div className=\"grid lg:grid-cols-3 gap-6 mb-16\">\r\n          {/* Main Image */}\r\n          <div className=\"lg:col-span-2\">\r\n            <div className=\"aspect-[16/10] lg:aspect-auto lg:h-full rounded-2xl bg-muted overflow-hidden\">\r\n              <img\r\n                src=\"/images/placeholder.png\"\r\n                alt={t(\"mainImageAlt\", \"Our team\")}\r\n                className=\"w-full h-full object-cover\"\r\n                onError={(e) => {\r\n                  e.currentTarget.style.display = \"none\";\r\n                }}\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          {/* Side Column */}\r\n          <div className=\"flex flex-col gap-6\">\r\n            {/* Info Card */}\r\n            <div className=\"bg-muted rounded-2xl p-6 flex flex-col justify-between flex-1\">\r\n              <div>\r\n                <h3 className=\"text-lg font-semibold mb-2\">\r\n                  {t(\"cardTitle\", \"Our Mission\")}\r\n                </h3>\r\n                <p className=\"text-muted-foreground text-sm mb-4\">\r\n                  {t(\"cardDescription\", \"Providing businesses with effective tools to improve workflows, boost efficiency, and encourage sustainable growth.\")}\r\n                </p>\r\n              </div>\r\n              <Button variant=\"outline\" asChild className=\"w-fit\">\r\n                <Link to=\"/about\">{t(\"cardButton\", \"Learn More\")}</Link>\r\n              </Button>\r\n            </div>\r\n\r\n            {/* Secondary Image */}\r\n            <div className=\"aspect-square rounded-2xl bg-muted overflow-hidden flex-1\">\r\n              <img\r\n                src=\"/images/placeholder.png\"\r\n                alt={t(\"secondaryImageAlt\", \"Our office\")}\r\n                className=\"w-full h-full object-cover\"\r\n                onError={(e) => {\r\n                  e.currentTarget.style.display = \"none\";\r\n                }}\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        {/* Companies */}\r\n        <div className=\"text-center mb-16\">\r\n          <p className=\"text-muted-foreground mb-6\">\r\n            {t(\"companiesTitle\", \"Trusted by leading companies worldwide\")}\r\n          </p>\r\n          <div className=\"flex flex-wrap justify-center items-center gap-8 md:gap-12\">\r\n            {companies.map((company) => (\r\n              <span\r\n                key={company}\r\n                className=\"text-xl md:text-2xl font-semibold text-muted-foreground/50\"\r\n              >\r\n                {company}\r\n              </span>\r\n            ))}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Stats */}\r\n        <div className=\"bg-muted rounded-2xl p-8 md:p-12\">\r\n          <div className=\"text-center md:text-left mb-8\">\r\n            <h3 className=\"text-2xl md:text-3xl font-bold mb-2\">\r\n              {t(\"statsTitle\", \"Our Achievements\")}\r\n            </h3>\r\n            <p className=\"text-muted-foreground max-w-xl\">\r\n              {t(\"statsDescription\", \"Numbers that reflect our commitment to excellence and client satisfaction.\")}\r\n            </p>\r\n          </div>\r\n          <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-8\">\r\n            {stats.map((stat, index) => (\r\n              <div key={index} className=\"text-center\">\r\n                <div className=\"text-3xl md:text-4xl lg:text-5xl font-bold text-primary mb-2\">\r\n                  {stat.value}\r\n                </div>\r\n                <p className=\"text-sm md:text-base text-muted-foreground\">\r\n                  {stat.label}\r\n                </p>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
     },
     {
       "path": "about-section/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/about-section/lang/en.json",
-      "content": "{\r\n  \"title\": \"About Us\",\r\n  \"description\": \"AI will customize this description based on your site and audience. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.\",\r\n  \"mainImageAlt\": \"Our team\",\r\n  \"secondaryImageAlt\": \"Our office\",\r\n  \"cardTitle\": \"Our Mission\",\r\n  \"cardDescription\": \"This mission description will be customized by AI based on your goals and values. Ut enim ad minim veniam, quis nostrud exercitation.\",\r\n  \"cardButton\": \"Learn More\",\r\n  \"companiesTitle\": \"AI will customize this companies title\",\r\n  \"statsTitle\": \"Our Achievements\",\r\n  \"statsDescription\": \"This stats description will be replaced by AI with relevant information about your milestones.\",\r\n  \"stat1Value\": \"500+\",\r\n  \"stat1Label\": \"Happy Clients\",\r\n  \"stat2Value\": \"1000+\",\r\n  \"stat2Label\": \"Projects Completed\",\r\n  \"stat3Value\": \"99%\",\r\n  \"stat3Label\": \"Satisfaction Rate\",\r\n  \"stat4Value\": \"15+\",\r\n  \"stat4Label\": \"Years Experience\"\r\n}\r\n"
+      "content": "{\r\n  \"title\": \"About Us\",\r\n  \"description\": \"Ask Promake to customize this description based on your site and audience. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.\",\r\n  \"mainImageAlt\": \"Our team\",\r\n  \"secondaryImageAlt\": \"Our office\",\r\n  \"cardTitle\": \"Our Mission\",\r\n  \"cardDescription\": \"This mission description will be customized by Promake based on your goals and values. Ut enim ad minim veniam, quis nostrud exercitation.\",\r\n  \"cardButton\": \"Learn More\",\r\n  \"companiesTitle\": \"Ask Promake to customize this companies title\",\r\n  \"statsTitle\": \"Our Achievements\",\r\n  \"statsDescription\": \"This stats description will be replaced by Promake with relevant information about your milestones.\",\r\n  \"stat1Value\": \"500+\",\r\n  \"stat1Label\": \"Happy Clients\",\r\n  \"stat2Value\": \"1000+\",\r\n  \"stat2Label\": \"Projects Completed\",\r\n  \"stat3Value\": \"99%\",\r\n  \"stat3Label\": \"Satisfaction Rate\",\r\n  \"stat4Value\": \"15+\",\r\n  \"stat4Label\": \"Years Experience\"\r\n}\r\n"
     },
     {
       "path": "about-section/lang/tr.json",

package/dist/registry/announcement-bar.json

@@ -0,0 +1,43 @@
+{
+  "name": "announcement-bar",
+  "type": "registry:component",
+  "title": "Announcement Bar",
+  "description": "Top notification bar with multiple style variants (default, primary, warning, success, gradient), dismissible with localStorage persistence, customizable icon, and link support. Slide animation.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [],
+  "usage": "import { AnnouncementBar } from '@/modules/announcement-bar';\n\n<AnnouncementBar\n  message=\"New features available!\"\n  linkText=\"Learn more\"\n  linkUrl=\"/blog/new-features\"\n  variant=\"gradient\"\n  icon=\"sparkles\"\n/>\n\n• Variants: default, primary, warning, success, gradient\n• Icons: sparkles, megaphone, gift, zap, none\n• Dismissible with storage key",
+  "files": [
+    {
+      "path": "announcement-bar/index.ts",
+      "type": "registry:index",
+      "target": "$modules$/announcement-bar/index.ts",
+      "content": "export { AnnouncementBar } from \"./announcement-bar\";\r\n"
+    },
+    {
+      "path": "announcement-bar/announcement-bar.tsx",
+      "type": "registry:component",
+      "target": "$modules$/announcement-bar/announcement-bar.tsx",
+      "content": "import { useState, useEffect } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { X, ArrowRight, Sparkles, Megaphone, Gift, Zap } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { motion, AnimatePresence } from \"motion/react\";\r\n\r\ntype BarVariant = \"default\" | \"primary\" | \"warning\" | \"success\" | \"gradient\";\r\n\r\ninterface AnnouncementBarProps {\r\n  message?: string;\r\n  linkText?: string;\r\n  linkUrl?: string;\r\n  variant?: BarVariant;\r\n  icon?: \"sparkles\" | \"megaphone\" | \"gift\" | \"zap\" | \"none\";\r\n  dismissible?: boolean;\r\n  storageKey?: string;\r\n  className?: string;\r\n}\r\n\r\nconst icons = {\r\n  sparkles: Sparkles,\r\n  megaphone: Megaphone,\r\n  gift: Gift,\r\n  zap: Zap,\r\n  none: null,\r\n};\r\n\r\nconst variantStyles: Record<BarVariant, string> = {\r\n  default: \"bg-muted text-muted-foreground\",\r\n  primary: \"bg-primary text-primary-foreground\",\r\n  warning: \"bg-yellow-500 text-yellow-950\",\r\n  success: \"bg-green-500 text-white\",\r\n  gradient: \"bg-gradient-to-r from-primary via-purple-500 to-pink-500 text-white\",\r\n};\r\n\r\nexport function AnnouncementBar({\r\n  message,\r\n  linkText,\r\n  linkUrl = \"#\",\r\n  variant = \"primary\",\r\n  icon = \"sparkles\",\r\n  dismissible = true,\r\n  storageKey = \"announcement-bar-dismissed\",\r\n  className,\r\n}: AnnouncementBarProps) {\r\n  const { t } = useTranslation(\"announcement-bar\");\r\n  const [isVisible, setIsVisible] = useState(false);\r\n\r\n  const displayMessage = message || t(\"message\", \"Exciting news! Check out our latest features.\");\r\n  const displayLinkText = linkText || t(\"linkText\", \"Learn more\");\r\n\r\n  useEffect(() => {\r\n    if (dismissible) {\r\n      const dismissed = localStorage.getItem(storageKey);\r\n      if (!dismissed) {\r\n        setIsVisible(true);\r\n      }\r\n    } else {\r\n      setIsVisible(true);\r\n    }\r\n  }, [dismissible, storageKey]);\r\n\r\n  const handleDismiss = () => {\r\n    if (dismissible) {\r\n      localStorage.setItem(storageKey, \"true\");\r\n    }\r\n    setIsVisible(false);\r\n  };\r\n\r\n  const IconComponent = icons[icon];\r\n\r\n  return (\r\n    <AnimatePresence>\r\n      {isVisible && (\r\n        <motion.div\r\n          initial={{ height: 0, opacity: 0 }}\r\n          animate={{ height: \"auto\", opacity: 1 }}\r\n          exit={{ height: 0, opacity: 0 }}\r\n          transition={{ duration: 0.3 }}\r\n          className={cn(\r\n            \"relative overflow-hidden\",\r\n            variantStyles[variant],\r\n            className\r\n          )}\r\n        >\r\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n            <div className=\"flex items-center justify-center gap-2 py-2.5 text-sm font-medium\">\r\n              {IconComponent && (\r\n                <IconComponent className=\"h-4 w-4 flex-shrink-0\" />\r\n              )}\r\n              <span className=\"text-center\">{displayMessage}</span>\r\n              {linkUrl && (\r\n                <Link\r\n                  to={linkUrl}\r\n                  className=\"inline-flex items-center gap-1 font-semibold hover:underline underline-offset-2\"\r\n                >\r\n                  {displayLinkText}\r\n                  <ArrowRight className=\"h-3 w-3\" />\r\n                </Link>\r\n              )}\r\n              {dismissible && (\r\n                <button\r\n                  onClick={handleDismiss}\r\n                  className=\"absolute right-4 p-1 rounded hover:bg-black/10 transition-colors\"\r\n                  aria-label={t(\"dismiss\", \"Dismiss\")}\r\n                >\r\n                  <X className=\"h-4 w-4\" />\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </motion.div>\r\n      )}\r\n    </AnimatePresence>\r\n  );\r\n}\r\n"
+    },
+    {
+      "path": "announcement-bar/lang/en.json",
+      "type": "registry:lang",
+      "target": "$modules$/announcement-bar/lang/en.json",
+      "content": "{\r\n  \"message\": \"Ask Promake to customize this announcement message based on your news or promotion.\",\r\n  \"linkText\": \"Learn more\",\r\n  \"dismiss\": \"Dismiss\"\r\n}\r\n"
+    },
+    {
+      "path": "announcement-bar/lang/tr.json",
+      "type": "registry:lang",
+      "target": "$modules$/announcement-bar/lang/tr.json",
+      "content": "{\r\n  \"message\": \"Heyecan verici haber! En son özelliklerimize göz atın.\",\r\n  \"linkText\": \"Daha fazla\",\r\n  \"dismiss\": \"Kapat\"\r\n}\r\n"
+    }
+  ],
+  "exports": {
+    "types": [],
+    "variables": [
+      "AnnouncementBar"
+    ]
+  }
+}

package/dist/registry/api.json

@@ -0,0 +1,55 @@
+{
+  "name": "api",
+  "type": "registry:module",
+  "title": "API Client",
+  "description": "Pre-configured API client using @promakeai/customer-backend-client. Includes multi-language validation messages, automatic token management, and VITE_API_CUSTOMER / VITE_TENANT_UUID environment variable support.",
+  "dependencies": [
+    "@promakeai/customer-backend-client"
+  ],
+  "registryDependencies": [],
+  "envVars": {
+    "VITE_API_CUSTOMER": "https://your-tenant.backend.promake.ai/",
+    "VITE_TENANT_UUID": "your-tenant-uuid"
+  },
+  "files": [
+    {
+      "path": "api/index.ts",
+      "type": "registry:index",
+      "target": "$modules$/api/index.ts",
+      "content": "export { customerClient } from \"./customer-client\";\r\nexport type { ApiClient } from \"./customer-client\";\r\nexport { getErrorMessage } from \"./get-error-message\";\r\n"
+    },
+    {
+      "path": "api/customer-client.ts",
+      "type": "registry:lib",
+      "target": "$modules$/api/customer-client.ts",
+      "content": "import {\n  createClient,\n  type ApiClient,\n} from \"@promakeai/customer-backend-client\";\nimport enValidation from \"./validation/en.json\";\nimport trValidation from \"./validation/tr.json\";\n\nconst customerClient = createClient({\n  baseURL:\n    import.meta.env.VITE_API_CUSTOMER ||\n    `https://${import.meta.env.VITE_TENANT_UUID}.backend.promake.ai/`,\n  messages: {\n    en: enValidation,\n    tr: trValidation,\n  },\n  defaultLanguage: \"en\",\n});\n\nexport { customerClient };\nexport type { ApiClient };\n"
+    },
+    {
+      "path": "api/get-error-message.ts",
+      "type": "registry:lib",
+      "target": "$modules$/api/get-error-message.ts",
+      "content": "export function getErrorMessage(\n  err: unknown,\n  fallback: string = \"An error occurred\",\n): string {\n  if (err && typeof err === \"object\") {\n    const e = err as {\n      response?: { data?: { error?: string; message?: string } };\n      message?: string;\n    };\n    return (\n      e.response?.data?.message ||\n      e.response?.data?.error ||\n      e.message ||\n      fallback\n    );\n  }\n  return fallback;\n}\n"
+    },
+    {
+      "path": "api/validation/en.json",
+      "type": "registry:lang",
+      "target": "$modules$/api/validation/en.json",
+      "content": "{\n  \"username_required\": \"Username is required\",\n  \"username_min_length\": \"Username must be at least 3 characters\",\n  \"email_invalid\": \"Invalid email address\",\n  \"email_required\": \"Email is required\",\n  \"password_required\": \"Password is required\",\n  \"password_min_length\": \"Password must be at least 8 characters\",\n  \"password_letter_required\": \"Password must contain at least 1 letter\",\n  \"password_number_required\": \"Password must contain at least 1 number\",\n  \"code_required\": \"Verification code is required\",\n  \"reset_code_required\": \"Reset code is required\",\n  \"session_id_required\": \"Session ID is required\",\n  \"quantity_positive\": \"Quantity must be a positive integer\",\n  \"product_name_required\": \"Product name is required\",\n  \"product_description_required\": \"Product description is required\",\n  \"amount_positive\": \"Amount must be a positive integer\",\n  \"image_required\": \"Image URL is required\",\n  \"firstname_required\": \"First name is required\",\n  \"lastname_required\": \"Last name is required\",\n  \"phone_required\": \"Phone number is required\",\n  \"address_required\": \"Address is required\",\n  \"country_required\": \"Country is required\",\n  \"city_required\": \"City is required\",\n  \"zip_required\": \"Zip code is required\",\n  \"currency_required\": \"Currency is required\",\n  \"tax_amount_non_negative\": \"Tax amount must be non-negative\",\n  \"at_least_one_product\": \"At least one product is required\",\n  \"payment_type_invalid\": \"Payment type must be 'stripe', 'iyzico', 'bank_transfer', or 'cash_on_delivery'\"\n}\n"
+    },
+    {
+      "path": "api/validation/tr.json",
+      "type": "registry:lang",
+      "target": "$modules$/api/validation/tr.json",
+      "content": "{\n  \"username_required\": \"Kullanıcı adı zorunludur\",\n  \"username_min_length\": \"Kullanıcı adı en az 3 karakter olmalıdır\",\n  \"email_invalid\": \"Geçersiz e-posta adresi\",\n  \"email_required\": \"E-posta zorunludur\",\n  \"password_required\": \"Şifre zorunludur\",\n  \"password_min_length\": \"Şifre en az 8 karakter olmalıdır\",\n  \"password_letter_required\": \"Şifre en az 1 harf içermelidir\",\n  \"password_number_required\": \"Şifre en az 1 rakam içermelidir\",\n  \"code_required\": \"Doğrulama kodu zorunludur\",\n  \"reset_code_required\": \"Sıfırlama kodu zorunludur\",\n  \"session_id_required\": \"Oturum ID zorunludur\",\n  \"quantity_positive\": \"Miktar pozitif bir tam sayı olmalıdır\",\n  \"product_name_required\": \"Ürün adı zorunludur\",\n  \"product_description_required\": \"Ürün açıklaması zorunludur\",\n  \"amount_positive\": \"Tutar pozitif bir tam sayı olmalıdır\",\n  \"image_required\": \"Görsel URL zorunludur\",\n  \"firstname_required\": \"Ad zorunludur\",\n  \"lastname_required\": \"Soyad zorunludur\",\n  \"phone_required\": \"Telefon numarası zorunludur\",\n  \"address_required\": \"Adres zorunludur\",\n  \"country_required\": \"Ülke zorunludur\",\n  \"city_required\": \"Şehir zorunludur\",\n  \"zip_required\": \"Posta kodu zorunludur\",\n  \"currency_required\": \"Para birimi zorunludur\",\n  \"tax_amount_non_negative\": \"Vergi tutarı negatif olamaz\",\n  \"at_least_one_product\": \"En az bir ürün gereklidir\",\n  \"payment_type_invalid\": \"Ödeme tipi 'stripe', 'iyzico', 'bank_transfer' veya 'cash_on_delivery' olmalıdır\"\n}\n"
+    }
+  ],
+  "exports": {
+    "types": [
+      "ApiClient"
+    ],
+    "variables": [
+      "customerClient",
+      "getErrorMessage"
+    ]
+  }
+}

package/dist/registry/auth-core.json

@@ -0,0 +1,43 @@
+{
+  "name": "auth-core",
+  "type": "registry:module",
+  "title": "Auth Core",
+  "description": "Core authentication system with Zustand store, JWT token management with auto-refresh. No pages included - use separate page modules (login-page, register-page, etc.) for UI.",
+  "dependencies": [
+    "zustand"
+  ],
+  "registryDependencies": [
+    "api"
+  ],
+  "usage": "import { useAuth, useAuthStore } from '@/modules/auth-core';\n\n// Use the hook for auth operations\nconst {\n  user,\n  tokens,\n  isAuthenticated,\n  login,\n  register,\n  confirmEmail,\n  forgotPassword,\n  resetPassword,\n  logout,\n  api,\n} = useAuth();\n\n// Auth operations\nawait login(username, password);\nawait register(username, email, password);\nawait confirmEmail(username, code);\nawait forgotPassword(username);\nawait resetPassword(username, code, newPassword);\nlogout();\n\n// Direct store access for state management\nconst setAuth = useAuthStore((state) => state.setAuth);\nconst clearAuth = useAuthStore((state) => state.clearAuth);\n\n• Installed at: src/modules/auth-core/\n• Provides: useAuth hook, useAuthStore\n• Auto token refresh before expiry\n• 401 interceptor with automatic retry\n• Uses customerClient from api module internally",
+  "files": [
+    {
+      "path": "auth-core/index.ts",
+      "type": "registry:index",
+      "target": "$modules$/auth-core/index.ts",
+      "content": "// Store\r\nexport { useAuthStore } from \"./auth-store\";\r\nexport type { User, AuthTokens } from \"./auth-store\";\r\n\r\n// Hook\r\nexport { useAuth } from \"./use-auth\";\r\n"
+    },
+    {
+      "path": "auth-core/auth-store.ts",
+      "type": "registry:store",
+      "target": "$modules$/auth-core/auth-store.ts",
+      "content": "import { create } from \"zustand\";\r\nimport { persist } from \"zustand/middleware\";\r\n\r\nexport interface User {\r\n  username: string;\r\n  email?: string;\r\n}\r\n\r\nexport interface AuthTokens {\r\n  accessToken: string;\r\n  refreshToken?: string;\r\n  idToken?: string;\r\n  encryptionKey?: string;\r\n  expiresAt?: number; // Unix timestamp in milliseconds\r\n}\r\n\r\ninterface AuthState {\r\n  user: User | null;\r\n  tokens: AuthTokens | null;\r\n  isAuthenticated: boolean;\r\n  setAuth: (user: User, tokens: AuthTokens) => void;\r\n  updateTokens: (tokens: AuthTokens) => void;\r\n  clearAuth: () => void;\r\n  isTokenExpired: () => boolean;\r\n  getTimeUntilExpiry: () => number | null;\r\n}\r\n\r\nexport const useAuthStore = create<AuthState>()(\r\n  persist(\r\n    (set, get) => ({\r\n      user: null,\r\n      tokens: null,\r\n      isAuthenticated: false,\r\n\r\n      setAuth: (user, tokens) => set({ user, tokens, isAuthenticated: true }),\r\n\r\n      updateTokens: (tokens) => set({ tokens }),\r\n\r\n      clearAuth: () =>\r\n        set({ user: null, tokens: null, isAuthenticated: false }),\r\n\r\n      isTokenExpired: () => {\r\n        const { tokens } = get();\r\n        if (!tokens?.expiresAt) return false;\r\n        // Consider token expired 30 seconds before actual expiry for safety margin\r\n        return Date.now() >= tokens.expiresAt - 30000;\r\n      },\r\n\r\n      getTimeUntilExpiry: () => {\r\n        const { tokens } = get();\r\n        if (!tokens?.expiresAt) return null;\r\n        return tokens.expiresAt - Date.now();\r\n      },\r\n    }),\r\n    { name: \"auth-storage\" },\r\n  ),\r\n);\r\n"
+    },
+    {
+      "path": "auth-core/use-auth.ts",
+      "type": "registry:hook",
+      "target": "$modules$/auth-core/use-auth.ts",
+      "content": "import { useCallback, useEffect, useRef } from \"react\";\r\nimport {\r\n  useAuthStore,\r\n  type User,\r\n  type AuthTokens,\r\n} from \"@/modules/auth-core/auth-store\";\r\nimport { customerClient } from \"@/modules/api/customer-client\";\r\n\r\n// Refresh token 1 minute before expiry\r\nconst REFRESH_BUFFER_MS = 60 * 1000;\r\n\r\nexport function useAuth() {\r\n  const {\r\n    user,\r\n    tokens,\r\n    isAuthenticated,\r\n    setAuth,\r\n    updateTokens,\r\n    clearAuth,\r\n    isTokenExpired,\r\n    getTimeUntilExpiry,\r\n  } = useAuthStore();\r\n\r\n  const refreshTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n  const isRefreshingRef = useRef(false);\r\n\r\n  // Refresh token using the refresh token\r\n  const refreshAccessToken = useCallback(async (): Promise<boolean> => {\r\n    const currentTokens = useAuthStore.getState().tokens;\r\n\r\n    // Don't refresh if no refresh token exists\r\n    if (!currentTokens?.refreshToken || isRefreshingRef.current) {\r\n      console.log(\"⚠️ No refresh token available, skipping refresh\");\r\n      return false;\r\n    }\r\n\r\n    isRefreshingRef.current = true;\r\n\r\n    try {\r\n      // Make a refresh request using the axios instance directly\r\n      const response = await customerClient.axios.post<{\r\n        accessToken: string;\r\n        refreshToken?: string;\r\n        expiresIn?: number;\r\n      }>(\"/auth/refresh\", {\r\n        refreshToken: currentTokens.refreshToken,\r\n      });\r\n\r\n      const { accessToken, refreshToken, expiresIn } = response.data;\r\n\r\n      // Validate response has required data\r\n      if (!accessToken) {\r\n        console.error(\"❌ Refresh response missing accessToken\");\r\n        return false;\r\n      }\r\n\r\n      const newTokens: AuthTokens = {\r\n        accessToken,\r\n        refreshToken: refreshToken || currentTokens.refreshToken,\r\n        idToken: currentTokens.idToken, // Preserve existing idToken\r\n        encryptionKey: currentTokens.encryptionKey, // Preserve existing encryptionKey\r\n        expiresAt: expiresIn ? Date.now() + expiresIn * 1000 : undefined,\r\n      };\r\n\r\n      customerClient.setToken(accessToken);\r\n      updateTokens(newTokens);\r\n\r\n      console.log(\"✅ Token refreshed successfully\");\r\n      return true;\r\n    } catch (error) {\r\n      console.error(\"❌ Token refresh failed:\", error);\r\n      // DON'T clear auth on refresh failure - just return false\r\n      // User can still use their existing token until it expires\r\n      return false;\r\n    } finally {\r\n      isRefreshingRef.current = false;\r\n    }\r\n  }, [updateTokens]);\r\n\r\n  // Schedule automatic token refresh\r\n  const scheduleTokenRefresh = useCallback(() => {\r\n    // Clear any existing timeout\r\n    if (refreshTimeoutRef.current) {\r\n      clearTimeout(refreshTimeoutRef.current);\r\n      refreshTimeoutRef.current = null;\r\n    }\r\n\r\n    const timeUntilExpiry = getTimeUntilExpiry();\r\n\r\n    // Only schedule if we have an expiry time and a refresh token\r\n    if (timeUntilExpiry === null || !tokens?.refreshToken) {\r\n      return;\r\n    }\r\n\r\n    // Calculate when to refresh (REFRESH_BUFFER_MS before expiry)\r\n    const refreshIn = Math.max(timeUntilExpiry - REFRESH_BUFFER_MS, 0);\r\n\r\n    // Don't schedule if expiry is too far in the future (> 24 hours)\r\n    if (refreshIn > 24 * 60 * 60 * 1000) {\r\n      return;\r\n    }\r\n\r\n    refreshTimeoutRef.current = setTimeout(async () => {\r\n      const success = await refreshAccessToken();\r\n      if (success) {\r\n        // Reschedule for the new token\r\n        scheduleTokenRefresh();\r\n      }\r\n    }, refreshIn);\r\n  }, [getTimeUntilExpiry, tokens?.refreshToken, refreshAccessToken]);\r\n\r\n  // Sync token with API client and set up refresh on mount and token changes\r\n  useEffect(() => {\r\n    if (tokens?.accessToken) {\r\n      console.log(\"🔑 Setting token in API client\");\r\n      customerClient.setToken(tokens.accessToken);\r\n\r\n      // Only try to refresh if we have a refresh token AND token is expired\r\n      if (isTokenExpired() && tokens.refreshToken) {\r\n        console.log(\"⏰ Token expired, attempting refresh...\");\r\n        refreshAccessToken().then((success) => {\r\n          if (success) {\r\n            scheduleTokenRefresh();\r\n          } else {\r\n            console.log(\"⚠️ Refresh failed, but keeping existing token\");\r\n          }\r\n        });\r\n      } else if (tokens.refreshToken) {\r\n        // Only schedule refresh if we have a refresh token\r\n        scheduleTokenRefresh();\r\n      }\r\n    } else if (tokens && Object.keys(tokens).length === 0) {\r\n      // tokens is empty object {} - this shouldn't happen, log it\r\n      console.warn(\"⚠️ Tokens object is empty, this may indicate a bug\");\r\n    } else {\r\n      customerClient.setToken(null);\r\n    }\r\n\r\n    // Cleanup timeout on unmount\r\n    return () => {\r\n      if (refreshTimeoutRef.current) {\r\n        clearTimeout(refreshTimeoutRef.current);\r\n      }\r\n    };\r\n  }, [\r\n    tokens?.accessToken,\r\n    tokens?.refreshToken,\r\n    isTokenExpired,\r\n    refreshAccessToken,\r\n    scheduleTokenRefresh,\r\n  ]);\r\n\r\n  // Set up axios interceptor for 401 responses (token expired during request)\r\n  useEffect(() => {\r\n    const interceptorId = customerClient.axios.interceptors.response.use(\r\n      (response) => response,\r\n      async (error) => {\r\n        const originalRequest = error.config;\r\n\r\n        // Skip refresh for auth endpoints to prevent infinite loops\r\n        const isAuthEndpoint = originalRequest?.url?.includes(\"/auth/\");\r\n\r\n        // If we get a 401 and haven't retried yet, try to refresh\r\n        if (\r\n          error.response?.status === 401 &&\r\n          !originalRequest._retry &&\r\n          tokens?.refreshToken &&\r\n          !isAuthEndpoint\r\n        ) {\r\n          originalRequest._retry = true;\r\n\r\n          const success = await refreshAccessToken();\r\n          if (success) {\r\n            // Retry the original request with new token\r\n            const newTokens = useAuthStore.getState().tokens;\r\n            if (newTokens?.accessToken) {\r\n              originalRequest.headers.Authorization = `Bearer ${newTokens.accessToken}`;\r\n              return customerClient.axios(originalRequest);\r\n            }\r\n          }\r\n        }\r\n\r\n        return Promise.reject(error);\r\n      },\r\n    );\r\n\r\n    return () => {\r\n      customerClient.axios.interceptors.response.eject(interceptorId);\r\n    };\r\n  }, [tokens?.refreshToken, refreshAccessToken]);\r\n\r\n  const login = useCallback(async (username: string, password: string) => {\r\n    const response = await customerClient.auth.login({ username, password });\r\n\r\n    console.log(\"🔐 Login response:\", response);\r\n    console.log(\"🔐 accessToken:\", response.accessToken);\r\n    console.log(\"🔐 refreshToken:\", response.refreshToken);\r\n    console.log(\"🔐 encryptionKey:\", response.encryptionKey);\r\n\r\n    const newTokens: AuthTokens = {\r\n      accessToken: response.accessToken,\r\n      refreshToken: response.refreshToken,\r\n      idToken: response.idToken,\r\n      encryptionKey: response.encryptionKey,\r\n      expiresAt: response.expiresIn\r\n        ? Date.now() + response.expiresIn * 1000\r\n        : undefined,\r\n    };\r\n\r\n    console.log(\"🔐 newTokens object:\", newTokens);\r\n\r\n    const newUser: User = {\r\n      username,\r\n      email: (response as any).email || (response as any).user?.email,\r\n    };\r\n\r\n    customerClient.setToken(newTokens.accessToken);\r\n    setAuth(newUser, newTokens);\r\n\r\n    console.log(\r\n      \"🔐 Auth set complete, checking store:\",\r\n      useAuthStore.getState().tokens,\r\n    );\r\n  }, []);\r\n\r\n  const register = useCallback(\r\n    async (username: string, email: string, password: string) => {\r\n      await customerClient.auth.register({ username, email, password });\r\n    },\r\n    [],\r\n  );\r\n\r\n  const confirmEmail = useCallback(async (username: string, code: string) => {\r\n    await customerClient.auth.confirm({ username, code });\r\n  }, []);\r\n\r\n  const forgotPassword = useCallback(async (username: string) => {\r\n    await customerClient.auth.forgotPassword({ username });\r\n  }, []);\r\n\r\n  const resetPassword = useCallback(\r\n    async (username: string, code: string, newPassword: string) => {\r\n      await customerClient.auth.resetPassword({ username, code, newPassword });\r\n    },\r\n    [],\r\n  );\r\n\r\n  const logout = useCallback(() => {\r\n    // Clear any scheduled refresh\r\n    if (refreshTimeoutRef.current) {\r\n      clearTimeout(refreshTimeoutRef.current);\r\n      refreshTimeoutRef.current = null;\r\n    }\r\n\r\n    customerClient.setToken(null);\r\n    clearAuth();\r\n  }, [clearAuth]);\r\n\r\n  return {\r\n    user,\r\n    token: tokens?.accessToken ?? null,\r\n    tokens,\r\n    isAuthenticated,\r\n    api: customerClient,\r\n    login,\r\n    register,\r\n    confirmEmail,\r\n    forgotPassword,\r\n    resetPassword,\r\n    logout,\r\n    refreshAccessToken,\r\n  };\r\n}\r\n"
+    }
+  ],
+  "exports": {
+    "types": [
+      "AuthTokens",
+      "User"
+    ],
+    "variables": [
+      "useAuth",
+      "useAuthStore"
+    ]
+  }
+}

package/dist/registry/auth.json

@@ -0,0 +1,70 @@
+{
+  "name": "auth",
+  "type": "registry:module",
+  "title": "Authentication Module",
+  "description": "Complete authentication system with Zustand store, JWT token management with auto-refresh, login/register/forgot-password pages, and header menu component. Includes secure token storage, automatic 401 handling, and seamless API integration.",
+  "dependencies": [
+    "zustand"
+  ],
+  "registryDependencies": [
+    "api"
+  ],
+  "files": [
+    {
+      "path": "auth/index.ts",
+      "type": "registry:index",
+      "target": "$modules$/auth/index.ts",
+      "content": "// Store\r\nexport { useAuthStore } from \"./auth-store\";\r\nexport type { User, AuthTokens } from \"./auth-store\";\r\n\r\n// Hook\r\nexport { useAuth } from \"./use-auth\";\r\n\r\n// Components\r\nexport { AuthHeaderMenu } from \"./auth-header-menu\";\r\nexport { default as LoginPage } from \"./login-page\";\r\nexport { default as RegisterPage } from \"./register-page\";\r\nexport { default as ForgotPasswordPage } from \"./forgot-password-page\";\r\n"
+    },
+    {
+      "path": "auth/auth-store.ts",
+      "type": "registry:store",
+      "target": "$modules$/auth/auth-store.ts",
+      "content": "import { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\n\nexport interface User {\n  username: string;\n  email?: string;\n}\n\nexport interface AuthTokens {\n  accessToken: string;\n  refreshToken?: string;\n  idToken?: string;\n  encryptionKey?: string;\n  expiresAt?: number; // Unix timestamp in milliseconds\n}\n\ninterface AuthState {\n  user: User | null;\n  tokens: AuthTokens | null;\n  isAuthenticated: boolean;\n  setAuth: (user: User, tokens: AuthTokens) => void;\n  updateTokens: (tokens: AuthTokens) => void;\n  clearAuth: () => void;\n  isTokenExpired: () => boolean;\n  getTimeUntilExpiry: () => number | null;\n}\n\nexport const useAuthStore = create<AuthState>()(\n  persist(\n    (set, get) => ({\n      user: null,\n      tokens: null,\n      isAuthenticated: false,\n\n      setAuth: (user, tokens) => set({ user, tokens, isAuthenticated: true }),\n\n      updateTokens: (tokens) => set({ tokens }),\n\n      clearAuth: () =>\n        set({ user: null, tokens: null, isAuthenticated: false }),\n\n      isTokenExpired: () => {\n        const { tokens } = get();\n        if (!tokens?.expiresAt) return false;\n        // Consider token expired 30 seconds before actual expiry for safety margin\n        return Date.now() >= tokens.expiresAt - 30000;\n      },\n\n      getTimeUntilExpiry: () => {\n        const { tokens } = get();\n        if (!tokens?.expiresAt) return null;\n        return tokens.expiresAt - Date.now();\n      },\n    }),\n    { name: \"auth-storage\" },\n  ),\n);\n"
+    },
+    {
+      "path": "auth/use-auth.ts",
+      "type": "registry:hook",
+      "target": "$modules$/auth/use-auth.ts",
+      "content": "import { useCallback, useEffect, useRef } from \"react\";\nimport {\n  useAuthStore,\n  type User,\n  type AuthTokens,\n} from \"@/modules/auth/auth-store\";\nimport { customerClient } from \"@/modules/api/customer-client\";\n\n// Refresh token 1 minute before expiry\nconst REFRESH_BUFFER_MS = 60 * 1000;\n\nexport function useAuth() {\n  const {\n    user,\n    tokens,\n    isAuthenticated,\n    setAuth,\n    updateTokens,\n    clearAuth,\n    isTokenExpired,\n    getTimeUntilExpiry,\n  } = useAuthStore();\n\n  const refreshTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isRefreshingRef = useRef(false);\n\n  // Refresh token using the refresh token\n  const refreshAccessToken = useCallback(async (): Promise<boolean> => {\n    const currentTokens = useAuthStore.getState().tokens;\n\n    // Don't refresh if no refresh token exists\n    if (!currentTokens?.refreshToken || isRefreshingRef.current) {\n      console.log(\"⚠️ No refresh token available, skipping refresh\");\n      return false;\n    }\n\n    isRefreshingRef.current = true;\n\n    try {\n      // Make a refresh request using the axios instance directly\n      const response = await customerClient.axios.post<{\n        accessToken: string;\n        refreshToken?: string;\n        expiresIn?: number;\n      }>(\"/auth/refresh\", {\n        refreshToken: currentTokens.refreshToken,\n      });\n\n      const { accessToken, refreshToken, expiresIn } = response.data;\n\n      // Validate response has required data\n      if (!accessToken) {\n        console.error(\"❌ Refresh response missing accessToken\");\n        return false;\n      }\n\n      const newTokens: AuthTokens = {\n        accessToken,\n        refreshToken: refreshToken || currentTokens.refreshToken,\n        idToken: currentTokens.idToken, // Preserve existing idToken\n        encryptionKey: currentTokens.encryptionKey, // Preserve existing encryptionKey\n        expiresAt: expiresIn ? Date.now() + expiresIn * 1000 : undefined,\n      };\n\n      customerClient.setToken(accessToken);\n      updateTokens(newTokens);\n\n      console.log(\"✅ Token refreshed successfully\");\n      return true;\n    } catch (error) {\n      console.error(\"❌ Token refresh failed:\", error);\n      // DON'T clear auth on refresh failure - just return false\n      // User can still use their existing token until it expires\n      return false;\n    } finally {\n      isRefreshingRef.current = false;\n    }\n  }, [updateTokens]);\n\n  // Schedule automatic token refresh\n  const scheduleTokenRefresh = useCallback(() => {\n    // Clear any existing timeout\n    if (refreshTimeoutRef.current) {\n      clearTimeout(refreshTimeoutRef.current);\n      refreshTimeoutRef.current = null;\n    }\n\n    const timeUntilExpiry = getTimeUntilExpiry();\n\n    // Only schedule if we have an expiry time and a refresh token\n    if (timeUntilExpiry === null || !tokens?.refreshToken) {\n      return;\n    }\n\n    // Calculate when to refresh (REFRESH_BUFFER_MS before expiry)\n    const refreshIn = Math.max(timeUntilExpiry - REFRESH_BUFFER_MS, 0);\n\n    // Don't schedule if expiry is too far in the future (> 24 hours)\n    if (refreshIn > 24 * 60 * 60 * 1000) {\n      return;\n    }\n\n    refreshTimeoutRef.current = setTimeout(async () => {\n      const success = await refreshAccessToken();\n      if (success) {\n        // Reschedule for the new token\n        scheduleTokenRefresh();\n      }\n    }, refreshIn);\n  }, [getTimeUntilExpiry, tokens?.refreshToken, refreshAccessToken]);\n\n  // Sync token with API client and set up refresh on mount and token changes\n  useEffect(() => {\n    if (tokens?.accessToken) {\n      console.log(\"🔑 Setting token in API client\");\n      customerClient.setToken(tokens.accessToken);\n\n      // Only try to refresh if we have a refresh token AND token is expired\n      if (isTokenExpired() && tokens.refreshToken) {\n        console.log(\"⏰ Token expired, attempting refresh...\");\n        refreshAccessToken().then((success) => {\n          if (success) {\n            scheduleTokenRefresh();\n          } else {\n            console.log(\"⚠️ Refresh failed, but keeping existing token\");\n          }\n        });\n      } else if (tokens.refreshToken) {\n        // Only schedule refresh if we have a refresh token\n        scheduleTokenRefresh();\n      }\n    } else if (tokens && Object.keys(tokens).length === 0) {\n      // tokens is empty object {} - this shouldn't happen, log it\n      console.warn(\"⚠️ Tokens object is empty, this may indicate a bug\");\n    } else {\n      customerClient.setToken(null);\n    }\n\n    // Cleanup timeout on unmount\n    return () => {\n      if (refreshTimeoutRef.current) {\n        clearTimeout(refreshTimeoutRef.current);\n      }\n    };\n  }, [\n    tokens?.accessToken,\n    tokens?.refreshToken,\n    isTokenExpired,\n    refreshAccessToken,\n    scheduleTokenRefresh,\n  ]);\n\n  // Set up axios interceptor for 401 responses (token expired during request)\n  useEffect(() => {\n    const interceptorId = customerClient.axios.interceptors.response.use(\n      (response) => response,\n      async (error) => {\n        const originalRequest = error.config;\n\n        // Skip refresh for auth endpoints to prevent infinite loops\n        const isAuthEndpoint = originalRequest?.url?.includes(\"/auth/\");\n\n        // If we get a 401 and haven't retried yet, try to refresh\n        if (\n          error.response?.status === 401 &&\n          !originalRequest._retry &&\n          tokens?.refreshToken &&\n          !isAuthEndpoint\n        ) {\n          originalRequest._retry = true;\n\n          const success = await refreshAccessToken();\n          if (success) {\n            // Retry the original request with new token\n            const newTokens = useAuthStore.getState().tokens;\n            if (newTokens?.accessToken) {\n              originalRequest.headers.Authorization = `Bearer ${newTokens.accessToken}`;\n              return customerClient.axios(originalRequest);\n            }\n          }\n        }\n\n        return Promise.reject(error);\n      },\n    );\n\n    return () => {\n      customerClient.axios.interceptors.response.eject(interceptorId);\n    };\n  }, [tokens?.refreshToken, refreshAccessToken]);\n\n  const login = useCallback(async (username: string, password: string) => {\n    const response = await customerClient.auth.login({ username, password });\n\n    console.log(\"🔐 Login response:\", response);\n    console.log(\"🔐 accessToken:\", response.accessToken);\n    console.log(\"🔐 refreshToken:\", response.refreshToken);\n    console.log(\"🔐 encryptionKey:\", response.encryptionKey);\n\n    const newTokens: AuthTokens = {\n      accessToken: response.accessToken,\n      refreshToken: response.refreshToken,\n      idToken: response.idToken,\n      encryptionKey: response.encryptionKey,\n      expiresAt: response.expiresIn\n        ? Date.now() + response.expiresIn * 1000\n        : undefined,\n    };\n\n    console.log(\"🔐 newTokens object:\", newTokens);\n\n    const newUser: User = {\n      username,\n      email: (response as any).email || (response as any).user?.email,\n    };\n\n    customerClient.setToken(newTokens.accessToken);\n    setAuth(newUser, newTokens);\n\n    console.log(\n      \"🔐 Auth set complete, checking store:\",\n      useAuthStore.getState().tokens,\n    );\n  }, []);\n\n  const register = useCallback(\n    async (username: string, email: string, password: string) => {\n      await customerClient.auth.register({ username, email, password });\n    },\n    [],\n  );\n\n  const confirmEmail = useCallback(async (username: string, code: string) => {\n    await customerClient.auth.confirm({ username, code });\n  }, []);\n\n  const forgotPassword = useCallback(async (username: string) => {\n    await customerClient.auth.forgotPassword({ username });\n  }, []);\n\n  const resetPassword = useCallback(\n    async (username: string, code: string, newPassword: string) => {\n      await customerClient.auth.resetPassword({ username, code, newPassword });\n    },\n    [],\n  );\n\n  const logout = useCallback(() => {\n    // Clear any scheduled refresh\n    if (refreshTimeoutRef.current) {\n      clearTimeout(refreshTimeoutRef.current);\n      refreshTimeoutRef.current = null;\n    }\n\n    customerClient.setToken(null);\n    clearAuth();\n  }, [clearAuth]);\n\n  return {\n    user,\n    token: tokens?.accessToken ?? null,\n    tokens,\n    isAuthenticated,\n    api: customerClient,\n    login,\n    register,\n    confirmEmail,\n    forgotPassword,\n    resetPassword,\n    logout,\n    refreshAccessToken,\n  };\n}\n"
+    },
+    {
+      "path": "auth/auth-header-menu.tsx",
+      "type": "registry:component",
+      "target": "$modules$/auth/auth-header-menu.tsx",
+      "content": "import type { ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { User, LogOut } from \"lucide-react\";\nimport { useAuth } from \"@/modules/auth/use-auth\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useTranslation } from \"react-i18next\";\nimport { toast } from \"sonner\";\n\ninterface AuthHeaderMenuProps {\n  children?: ReactNode;\n  variant: \"desktop\" | \"mobile\";\n  onMenuClose?: () => void;\n}\n\nexport function AuthHeaderMenu({\n  children,\n  variant,\n  onMenuClose,\n}: AuthHeaderMenuProps) {\n  const { isAuthenticated, user, logout } = useAuth();\n  const { t } = useTranslation(\"header\");\n\n  const handleLogout = () => {\n    logout();\n    toast.success(t(\"logoutToastTitle\", \"Goodbye!\"), {\n      description: t(\n        \"logoutToastDesc\",\n        \"You have been logged out successfully.\",\n      ),\n    });\n    onMenuClose?.();\n  };\n\n  if (variant === \"desktop\") {\n    if (isAuthenticated) {\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\n              <User className=\"h-5 w-5\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-56\">\n            <DropdownMenuLabel className=\"font-normal\">\n              <div className=\"flex flex-col space-y-1\">\n                <p className=\"text-sm font-medium\">{user?.username}</p>\n                {user?.email && (\n                  <p className=\"text-xs text-muted-foreground\">{user.email}</p>\n                )}\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            {children}\n            {children && <DropdownMenuSeparator />}\n            <DropdownMenuItem\n              onClick={handleLogout}\n              className=\"text-red-600 focus:text-red-600 focus:bg-red-50 cursor-pointer\"\n            >\n              <LogOut className=\"mr-2 h-4 w-4\" />\n              {t(\"logout\", \"Logout\")}\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      );\n    }\n\n    return (\n      <Link to=\"/login\">\n        <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\n          <User className=\"h-5 w-5\" />\n        </Button>\n      </Link>\n    );\n  }\n\n  // Mobile variant\n  if (isAuthenticated) {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center space-x-3 p-3 bg-muted/50 rounded-lg\">\n          <div className=\"h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center\">\n            <User className=\"h-5 w-5 text-primary\" />\n          </div>\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-sm font-medium truncate\">{user?.username}</p>\n            {user?.email && (\n              <p className=\"text-xs text-muted-foreground truncate\">\n                {user.email}\n              </p>\n            )}\n          </div>\n        </div>\n        {children}\n        <button\n          onClick={handleLogout}\n          className=\"flex items-center space-x-2 text-lg font-medium text-red-600 hover:text-red-700 transition-colors w-full\"\n        >\n          <LogOut className=\"h-5 w-5\" />\n          <span>{t(\"logout\", \"Logout\")}</span>\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <Link\n      to=\"/login\"\n      className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\n      onClick={onMenuClose}\n    >\n      <User className=\"h-5 w-5\" />\n      <span>{t(\"login\", \"Login\")}</span>\n    </Link>\n  );\n}\n"
+    },
+    {
+      "path": "auth/login-page.tsx",
+      "type": "registry:page",
+      "target": "$modules$/auth/login-page.tsx",
+      "content": "import { useState, useEffect } from \"react\";\nimport { Link, useNavigate } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { Layout } from \"@/components/Layout\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAuth } from \"@/modules/auth/use-auth\";\nimport { getErrorMessage } from \"@/modules/api/get-error-message\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { LogIn, Eye, EyeOff } from \"lucide-react\";\n\nexport default function LoginPage() {\n  const { t } = useTranslation(\"login\");\n  usePageTitle({ title: t(\"title\") });\n\n  const navigate = useNavigate();\n  const { login, isAuthenticated } = useAuth();\n\n  const [formData, setFormData] = useState({\n    username: \"\",\n    password: \"\",\n  });\n  const [showPassword, setShowPassword] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  // Redirect when authenticated (works for both initial load and after login)\n  useEffect(() => {\n    if (isAuthenticated) {\n      navigate(\"/\", { replace: true });\n    }\n  }, [isAuthenticated, navigate]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      await login(formData.username, formData.password);\n      toast.success(t(\"toastSuccessTitle\", \"Welcome back!\"), {\n        description: t(\"toastSuccessDesc\", \"You have successfully logged in.\"),\n      });\n      navigate(\"/\", { replace: true });\n    } catch (err) {\n      const errorMessage = getErrorMessage(err, t(\"errorGeneric\"));\n      setError(errorMessage);\n      toast.error(t(\"toastErrorTitle\", \"Login failed\"), {\n        description: errorMessage,\n      });\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormData((prev) => ({\n      ...prev,\n      [e.target.name]: e.target.value,\n    }));\n  };\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n          {/* Hero Section */}\n          <div className=\"text-center mb-12\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\n              {t(\"description\")}\n            </p>\n          </div>\n\n          <div className=\"max-w-md mx-auto\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center gap-2\">\n                  <LogIn className=\"w-5 h-5 text-primary\" />\n                  {t(\"cardTitle\")}\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <form onSubmit={handleSubmit} className=\"space-y-6\">\n                  <div>\n                    <Label htmlFor=\"username\">{t(\"username\")} *</Label>\n                    <Input\n                      id=\"username\"\n                      name=\"username\"\n                      type=\"text\"\n                      value={formData.username}\n                      onChange={handleChange}\n                      placeholder={t(\"usernamePlaceholder\")}\n                      required\n                      className=\"mt-1\"\n                      autoComplete=\"username\"\n                    />\n                  </div>\n\n                  <div>\n                    <div className=\"flex items-center justify-between\">\n                      <Label htmlFor=\"password\">{t(\"password\")} *</Label>\n                      <Link\n                        to=\"/forgot-password\"\n                        className=\"text-sm text-primary hover:underline\"\n                      >\n                        {t(\"forgotPassword\", \"Forgot password?\")}\n                      </Link>\n                    </div>\n                    <div className=\"relative\">\n                      <Input\n                        id=\"password\"\n                        name=\"password\"\n                        type={showPassword ? \"text\" : \"password\"}\n                        value={formData.password}\n                        onChange={handleChange}\n                        placeholder={t(\"passwordPlaceholder\")}\n                        required\n                        className=\"mt-1 pr-10\"\n                        autoComplete=\"current-password\"\n                      />\n                      <button\n                        type=\"button\"\n                        onClick={() => setShowPassword(!showPassword)}\n                        className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                      >\n                        {showPassword ? (\n                          <EyeOff className=\"w-4 h-4\" />\n                        ) : (\n                          <Eye className=\"w-4 h-4\" />\n                        )}\n                      </button>\n                    </div>\n                  </div>\n\n                  {error && (\n                    <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\n                      <p className=\"text-red-800 text-sm font-medium\">\n                        {error}\n                      </p>\n                    </div>\n                  )}\n\n                  <Button\n                    type=\"submit\"\n                    size=\"lg\"\n                    className=\"w-full\"\n                    disabled={isSubmitting}\n                  >\n                    {isSubmitting ? (\n                      <>\n                        <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\n                        {t(\"submitting\")}\n                      </>\n                    ) : (\n                      t(\"submit\")\n                    )}\n                  </Button>\n\n                  <div className=\"text-center text-sm text-muted-foreground\">\n                    {t(\"noAccount\")}{\" \"}\n                    <Link\n                      to=\"/register\"\n                      className=\"text-primary hover:underline font-medium\"\n                    >\n                      {t(\"registerLink\")}\n                    </Link>\n                  </div>\n                </form>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n"
+    },
+    {
+      "path": "auth/register-page.tsx",
+      "type": "registry:page",
+      "target": "$modules$/auth/register-page.tsx",
+      "content": "import { useState, useEffect } from \"react\";\nimport { Link, useNavigate } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { Layout } from \"@/components/Layout\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAuth } from \"@/modules/auth/use-auth\";\nimport { getErrorMessage } from \"@/modules/api/get-error-message\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { UserPlus, Eye, EyeOff, CheckCircle } from \"lucide-react\";\n\nexport default function RegisterPage() {\n  const { t } = useTranslation(\"register\");\n  usePageTitle({ title: t(\"title\") });\n\n  const navigate = useNavigate();\n  const { register, isAuthenticated } = useAuth();\n\n  const [formData, setFormData] = useState({\n    username: \"\",\n    email: \"\",\n    password: \"\",\n    confirmPassword: \"\",\n  });\n  const [showPassword, setShowPassword] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Redirect if already authenticated\n  useEffect(() => {\n    if (isAuthenticated) {\n      navigate(\"/\", { replace: true });\n    }\n  }, [isAuthenticated, navigate]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setError(null);\n\n    // Validate passwords match\n    if (formData.password !== formData.confirmPassword) {\n      setError(t(\"passwordMismatch\"));\n      toast.error(t(\"toastErrorTitle\", \"Registration failed\"), {\n        description: t(\"passwordMismatch\"),\n      });\n      setIsSubmitting(false);\n      return;\n    }\n\n    try {\n      await register(formData.username, formData.email, formData.password);\n      setSuccess(true);\n      toast.success(t(\"toastSuccessTitle\", \"Account created!\"), {\n        description: t(\n          \"toastSuccessDesc\",\n          \"Please check your email to verify your account.\",\n        ),\n      });\n    } catch (err) {\n      const errorMessage = getErrorMessage(err, t(\"errorGeneric\"));\n      setError(errorMessage);\n      toast.error(t(\"toastErrorTitle\", \"Registration failed\"), {\n        description: errorMessage,\n      });\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormData((prev) => ({\n      ...prev,\n      [e.target.name]: e.target.value,\n    }));\n  };\n\n  if (success) {\n    return (\n      <Layout>\n        <div className=\"min-h-screen bg-muted/30 py-12\">\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n            <div className=\"max-w-md mx-auto\">\n              <Card>\n                <CardContent className=\"pt-6\">\n                  <div className=\"text-center space-y-4\">\n                    <CheckCircle className=\"w-16 h-16 text-green-500 mx-auto\" />\n                    <h2 className=\"text-2xl font-bold text-foreground\">\n                      {t(\"successTitle\")}\n                    </h2>\n                    <p className=\"text-muted-foreground\">\n                      {t(\"successMessage\")}\n                    </p>\n                    <Button asChild className=\"mt-4\">\n                      <Link to=\"/login\">{t(\"goToLogin\")}</Link>\n                    </Button>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n        </div>\n      </Layout>\n    );\n  }\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n          {/* Hero Section */}\n          <div className=\"text-center mb-12\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\n              {t(\"description\")}\n            </p>\n          </div>\n\n          <div className=\"max-w-md mx-auto\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center gap-2\">\n                  <UserPlus className=\"w-5 h-5 text-primary\" />\n                  {t(\"cardTitle\")}\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <form onSubmit={handleSubmit} className=\"space-y-6\">\n                  <div>\n                    <Label htmlFor=\"username\">{t(\"username\")} *</Label>\n                    <Input\n                      id=\"username\"\n                      name=\"username\"\n                      type=\"text\"\n                      value={formData.username}\n                      onChange={handleChange}\n                      placeholder={t(\"usernamePlaceholder\")}\n                      required\n                      className=\"mt-1\"\n                      autoComplete=\"username\"\n                    />\n                  </div>\n\n                  <div>\n                    <Label htmlFor=\"email\">{t(\"email\")} *</Label>\n                    <Input\n                      id=\"email\"\n                      name=\"email\"\n                      type=\"email\"\n                      value={formData.email}\n                      onChange={handleChange}\n                      placeholder={t(\"emailPlaceholder\")}\n                      required\n                      className=\"mt-1\"\n                      autoComplete=\"email\"\n                    />\n                  </div>\n\n                  <div>\n                    <Label htmlFor=\"password\">{t(\"password\")} *</Label>\n                    <div className=\"relative\">\n                      <Input\n                        id=\"password\"\n                        name=\"password\"\n                        type={showPassword ? \"text\" : \"password\"}\n                        value={formData.password}\n                        onChange={handleChange}\n                        placeholder={t(\"passwordPlaceholder\")}\n                        required\n                        className=\"mt-1 pr-10\"\n                        autoComplete=\"new-password\"\n                      />\n                      <button\n                        type=\"button\"\n                        onClick={() => setShowPassword(!showPassword)}\n                        className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                      >\n                        {showPassword ? (\n                          <EyeOff className=\"w-4 h-4\" />\n                        ) : (\n                          <Eye className=\"w-4 h-4\" />\n                        )}\n                      </button>\n                    </div>\n                  </div>\n\n                  <div>\n                    <Label htmlFor=\"confirmPassword\">\n                      {t(\"confirmPassword\")} *\n                    </Label>\n                    <Input\n                      id=\"confirmPassword\"\n                      name=\"confirmPassword\"\n                      type={showPassword ? \"text\" : \"password\"}\n                      value={formData.confirmPassword}\n                      onChange={handleChange}\n                      placeholder={t(\"confirmPasswordPlaceholder\")}\n                      required\n                      className=\"mt-1\"\n                      autoComplete=\"new-password\"\n                    />\n                  </div>\n\n                  {error && (\n                    <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\n                      <p className=\"text-red-800 text-sm font-medium\">\n                        {error}\n                      </p>\n                    </div>\n                  )}\n\n                  <Button\n                    type=\"submit\"\n                    size=\"lg\"\n                    className=\"w-full\"\n                    disabled={isSubmitting}\n                  >\n                    {isSubmitting ? (\n                      <>\n                        <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\n                        {t(\"submitting\")}\n                      </>\n                    ) : (\n                      t(\"submit\")\n                    )}\n                  </Button>\n\n                  <div className=\"text-center text-sm text-muted-foreground\">\n                    {t(\"hasAccount\")}{\" \"}\n                    <Link\n                      to=\"/login\"\n                      className=\"text-primary hover:underline font-medium\"\n                    >\n                      {t(\"loginLink\")}\n                    </Link>\n                  </div>\n                </form>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n"
+    },
+    {
+      "path": "auth/forgot-password-page.tsx",
+      "type": "registry:page",
+      "target": "$modules$/auth/forgot-password-page.tsx",
+      "content": "import { useState } from \"react\";\nimport { Link } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { Layout } from \"@/components/Layout\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAuth } from \"@/modules/auth/use-auth\";\nimport { getErrorMessage } from \"@/modules/api/get-error-message\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n} from \"@/components/ui/card\";\nimport { KeyRound, ArrowLeft, Eye, EyeOff, CheckCircle2 } from \"lucide-react\";\n\ntype Step = \"request\" | \"reset\" | \"success\";\n\nexport default function ForgotPasswordPage() {\n  const { t } = useTranslation(\"forgotPassword\");\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\n\n  const { forgotPassword, resetPassword } = useAuth();\n\n  const [step, setStep] = useState<Step>(\"request\");\n  const [username, setUsername] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [newPassword, setNewPassword] = useState(\"\");\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\n  const [showPassword, setShowPassword] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleRequestCode = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      await forgotPassword(username);\n      toast.success(t(\"codeSentTitle\", \"Code Sent!\"), {\n        description: t(\n          \"codeSentDesc\",\n          \"A password reset code has been sent to your email.\",\n        ),\n      });\n      setStep(\"reset\");\n    } catch (err) {\n      const errorMessage = getErrorMessage(\n        err,\n        t(\"errorGeneric\", \"Failed to send reset code. Please try again.\"),\n      );\n      setError(errorMessage);\n      toast.error(t(\"errorTitle\", \"Error\"), {\n        description: errorMessage,\n      });\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleResetPassword = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n\n    // Validate passwords match\n    if (newPassword !== confirmPassword) {\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\n      return;\n    }\n\n    setIsSubmitting(true);\n\n    try {\n      await resetPassword(username, code, newPassword);\n      toast.success(t(\"resetSuccessTitle\", \"Password Reset!\"), {\n        description: t(\n          \"resetSuccessDesc\",\n          \"Your password has been successfully reset.\",\n        ),\n      });\n      setStep(\"success\");\n    } catch (err) {\n      const errorMessage = getErrorMessage(\n        err,\n        t(\"errorResetGeneric\", \"Failed to reset password. Please try again.\"),\n      );\n      setError(errorMessage);\n      toast.error(t(\"errorTitle\", \"Error\"), {\n        description: errorMessage,\n      });\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  // Success step\n  if (step === \"success\") {\n    return (\n      <Layout>\n        <div className=\"min-h-screen bg-muted/30 py-12\">\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n            <div className=\"max-w-md mx-auto\">\n              <Card>\n                <CardContent className=\"pt-8 pb-8 text-center\">\n                  <CheckCircle2 className=\"w-16 h-16 text-green-500 mx-auto mb-4\" />\n                  <h1 className=\"text-2xl font-bold mb-2\">\n                    {t(\"successTitle\", \"Password Reset Successfully!\")}\n                  </h1>\n                  <p className=\"text-muted-foreground mb-6\">\n                    {t(\n                      \"successDescription\",\n                      \"Your password has been changed. You can now login with your new password.\",\n                    )}\n                  </p>\n                  <Button asChild className=\"w-full\">\n                    <Link to=\"/login\">{t(\"goToLogin\", \"Go to Login\")}</Link>\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n        </div>\n      </Layout>\n    );\n  }\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n          {/* Hero Section */}\n          <div className=\"text-center mb-12\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\", \"Forgot Password\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\n              {step === \"request\"\n                ? t(\n                    \"descriptionRequest\",\n                    \"Enter your username and we'll send you a code to reset your password.\",\n                  )\n                : t(\n                    \"descriptionReset\",\n                    \"Enter the code sent to your email and your new password.\",\n                  )}\n            </p>\n          </div>\n\n          <div className=\"max-w-md mx-auto\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center gap-2\">\n                  <KeyRound className=\"w-5 h-5 text-primary\" />\n                  {step === \"request\"\n                    ? t(\"cardTitleRequest\", \"Request Reset Code\")\n                    : t(\"cardTitleReset\", \"Reset Password\")}\n                </CardTitle>\n                <CardDescription>\n                  {step === \"request\"\n                    ? t(\"cardDescRequest\", \"Step 1 of 2: Request a reset code\")\n                    : t(\n                        \"cardDescReset\",\n                        \"Step 2 of 2: Enter code and new password\",\n                      )}\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                {step === \"request\" ? (\n                  // Step 1: Request Code\n                  <form onSubmit={handleRequestCode} className=\"space-y-6\">\n                    <div>\n                      <Label htmlFor=\"username\">\n                        {t(\"username\", \"Username\")} *\n                      </Label>\n                      <Input\n                        id=\"username\"\n                        type=\"text\"\n                        value={username}\n                        onChange={(e) => setUsername(e.target.value)}\n                        placeholder={t(\n                          \"usernamePlaceholder\",\n                          \"Enter your username\",\n                        )}\n                        required\n                        className=\"mt-1\"\n                        autoComplete=\"username\"\n                      />\n                    </div>\n\n                    {error && (\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\n                        <p className=\"text-red-800 text-sm font-medium\">\n                          {error}\n                        </p>\n                      </div>\n                    )}\n\n                    <Button\n                      type=\"submit\"\n                      size=\"lg\"\n                      className=\"w-full\"\n                      disabled={isSubmitting}\n                    >\n                      {isSubmitting ? (\n                        <>\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\n                          {t(\"sending\", \"Sending...\")}\n                        </>\n                      ) : (\n                        t(\"sendCode\", \"Send Reset Code\")\n                      )}\n                    </Button>\n\n                    <div className=\"text-center\">\n                      <Link\n                        to=\"/login\"\n                        className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1\"\n                      >\n                        <ArrowLeft className=\"w-4 h-4\" />\n                        {t(\"backToLogin\", \"Back to Login\")}\n                      </Link>\n                    </div>\n                  </form>\n                ) : (\n                  // Step 2: Reset Password\n                  <form onSubmit={handleResetPassword} className=\"space-y-6\">\n                    <div className=\"p-3 bg-muted rounded-lg text-sm\">\n                      <span className=\"text-muted-foreground\">\n                        {t(\"codeFor\", \"Reset code for:\")}{\" \"}\n                      </span>\n                      <span className=\"font-medium\">{username}</span>\n                    </div>\n\n                    <div>\n                      <Label htmlFor=\"code\">{t(\"code\", \"Reset Code\")} *</Label>\n                      <Input\n                        id=\"code\"\n                        type=\"text\"\n                        value={code}\n                        onChange={(e) => setCode(e.target.value)}\n                        placeholder={t(\"codePlaceholder\", \"Enter 6-digit code\")}\n                        required\n                        className=\"mt-1\"\n                        maxLength={6}\n                      />\n                    </div>\n\n                    <div>\n                      <Label htmlFor=\"newPassword\">\n                        {t(\"newPassword\", \"New Password\")} *\n                      </Label>\n                      <div className=\"relative\">\n                        <Input\n                          id=\"newPassword\"\n                          type={showPassword ? \"text\" : \"password\"}\n                          value={newPassword}\n                          onChange={(e) => setNewPassword(e.target.value)}\n                          placeholder={t(\n                            \"newPasswordPlaceholder\",\n                            \"Enter new password\",\n                          )}\n                          required\n                          className=\"mt-1 pr-10\"\n                          autoComplete=\"new-password\"\n                        />\n                        <button\n                          type=\"button\"\n                          onClick={() => setShowPassword(!showPassword)}\n                          className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                        >\n                          {showPassword ? (\n                            <EyeOff className=\"w-4 h-4\" />\n                          ) : (\n                            <Eye className=\"w-4 h-4\" />\n                          )}\n                        </button>\n                      </div>\n                      <p className=\"text-xs text-muted-foreground mt-1\">\n                        {t(\n                          \"passwordRequirements\",\n                          \"At least 8 characters, 1 letter and 1 number\",\n                        )}\n                      </p>\n                    </div>\n\n                    <div>\n                      <Label htmlFor=\"confirmPassword\">\n                        {t(\"confirmPassword\", \"Confirm Password\")} *\n                      </Label>\n                      <Input\n                        id=\"confirmPassword\"\n                        type={showPassword ? \"text\" : \"password\"}\n                        value={confirmPassword}\n                        onChange={(e) => setConfirmPassword(e.target.value)}\n                        placeholder={t(\n                          \"confirmPasswordPlaceholder\",\n                          \"Confirm new password\",\n                        )}\n                        required\n                        className=\"mt-1\"\n                        autoComplete=\"new-password\"\n                      />\n                    </div>\n\n                    {error && (\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\n                        <p className=\"text-red-800 text-sm font-medium\">\n                          {error}\n                        </p>\n                      </div>\n                    )}\n\n                    <Button\n                      type=\"submit\"\n                      size=\"lg\"\n                      className=\"w-full\"\n                      disabled={isSubmitting}\n                    >\n                      {isSubmitting ? (\n                        <>\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\n                          {t(\"resetting\", \"Resetting...\")}\n                        </>\n                      ) : (\n                        t(\"resetPassword\", \"Reset Password\")\n                      )}\n                    </Button>\n\n                    <div className=\"flex justify-between\">\n                      <button\n                        type=\"button\"\n                        onClick={() => {\n                          setStep(\"request\");\n                          setCode(\"\");\n                          setNewPassword(\"\");\n                          setConfirmPassword(\"\");\n                          setError(null);\n                        }}\n                        className=\"text-sm text-muted-foreground hover:text-primary\"\n                      >\n                        {t(\"changeUsername\", \"Change username\")}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() =>\n                          handleRequestCode({\n                            preventDefault: () => {},\n                          } as React.FormEvent)\n                        }\n                        className=\"text-sm text-primary hover:underline\"\n                        disabled={isSubmitting}\n                      >\n                        {t(\"resendCode\", \"Resend code\")}\n                      </button>\n                    </div>\n                  </form>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n"
+    }
+  ],
+  "exports": {
+    "types": [
+      "AuthTokens",
+      "User"
+    ],
+    "variables": [
+      "AuthHeaderMenu",
+      "ForgotPasswordPage",
+      "LoginPage",
+      "RegisterPage",
+      "useAuth",
+      "useAuthStore"
+    ]
+  }
+}

package/dist/registry/bento-grid-section.json

@@ -16,7 +16,7 @@
       "path": "bento-grid-section/bento-grid-section.tsx",
       "type": "registry:component",
       "target": "$modules$/bento-grid-section/bento-grid-section.tsx",
-      "content": "import type { ReactNode } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Bento Grid Components\r\nexport function BentoGrid({\r\n  className,\r\n  children,\r\n}: {\r\n  className?: string;\r\n  children?: ReactNode;\r\n}) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto\",\r\n        className\r\n      )}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function BentoGridItem({\r\n  className,\r\n  title,\r\n  description,\r\n  header,\r\n  icon,\r\n}: {\r\n  className?: string;\r\n  title?: string | ReactNode;\r\n  description?: string | ReactNode;\r\n  header?: ReactNode;\r\n  icon?: ReactNode;\r\n}) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4\",\r\n        className\r\n      )}\r\n    >\r\n      {header}\r\n      <div className=\"group-hover/bento:translate-x-2 transition duration-200\">\r\n        {icon}\r\n        <div className=\"font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2\">\r\n          {title}\r\n        </div>\r\n        <div className=\"font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300\">\r\n          {description}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\n// Section Component\r\ninterface BentoGridSectionProps {\r\n  title?: string;\r\n  items: Array<{\r\n    title: string;\r\n    description: string;\r\n    header?: ReactNode;\r\n    icon?: ReactNode;\r\n    className?: string;\r\n  }>;\r\n  className?: string;\r\n}\r\n\r\nexport function BentoGridSection({\r\n  title,\r\n  items,\r\n  className,\r\n}: BentoGridSectionProps) {\r\n  return (\r\n    <section className={cn(\"py-16 md:py-24\", className)}>\r\n      <div className=\"container mx-auto px-4\">\r\n        {title && (\r\n          <h2 className=\"text-3xl md:text-4xl font-bold text-center mb-12\">\r\n            {title}\r\n          </h2>\r\n        )}\r\n        <BentoGrid>\r\n          {items.map((item, i) => (\r\n            <BentoGridItem\r\n              key={i}\r\n              title={item.title}\r\n              description={item.description}\r\n              header={item.header}\r\n              icon={item.icon}\r\n              className={item.className}\r\n            />\r\n          ))}\r\n        </BentoGrid>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
+      "content": "import type { ReactNode } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Bento Grid Components\r\nexport function BentoGrid({\r\n  className,\r\n  children,\r\n}: {\r\n  className?: string;\r\n  children?: ReactNode;\r\n}) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto\",\r\n        className\r\n      )}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function BentoGridItem({\r\n  className,\r\n  title,\r\n  description,\r\n  header,\r\n  icon,\r\n}: {\r\n  className?: string;\r\n  title?: string | ReactNode;\r\n  description?: string | ReactNode;\r\n  header?: ReactNode;\r\n  icon?: ReactNode;\r\n}) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4\",\r\n        className\r\n      )}\r\n    >\r\n      {header}\r\n      <div className=\"group-hover/bento:translate-x-2 transition duration-200\">\r\n        {icon}\r\n        <div className=\"font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2\">\r\n          {title}\r\n        </div>\r\n        <div className=\"font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300\">\r\n          {description}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\n// Section Component\r\ninterface BentoGridSectionProps {\r\n  title?: string;\r\n  items: Array<{\r\n    title: string;\r\n    description: string;\r\n    header?: ReactNode;\r\n    icon?: ReactNode;\r\n    className?: string;\r\n  }>;\r\n  className?: string;\r\n}\r\n\r\nexport function BentoGridSection({\r\n  title,\r\n  items,\r\n  className,\r\n}: BentoGridSectionProps) {\r\n  return (\r\n    <section className={cn(\"py-16 md:py-24\", className)}>\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n        {title && (\r\n          <h2 className=\"text-3xl md:text-4xl font-bold text-center mb-12\">\r\n            {title}\r\n          </h2>\r\n        )}\r\n        <BentoGrid>\r\n          {items.map((item, i) => (\r\n            <BentoGridItem\r\n              key={i}\r\n              title={item.title}\r\n              description={item.description}\r\n              header={item.header}\r\n              icon={item.icon}\r\n              className={item.className}\r\n            />\r\n          ))}\r\n        </BentoGrid>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"
     },
     {
       "path": "bento-grid-section/lang/en.json",

package/dist/registry/blog-list-page.json

@@ -5,7 +5,8 @@
   "description": "Blog listing page with category filter tabs, search functionality, and responsive post grid. Uses PostCard component for display with grid/list view toggle. Features loading states, empty state handling, pagination, and featured post highlight at top. Includes sidebar with popular posts, categories, and newsletter signup.",
   "registryDependencies": [
     "blog-core",
-    "post-card"
+    "post-card",
+    "animations"
   ],
   "usage": "import { BlogListPage } from '@/modules/blog-list-page';\n\n<Route path=\"/blog\" element={<BlogListPage />} />\n\n• Uses usePosts() from blog-core (Zustand)\n• Features: category tabs, search, grid/list view\n• Sidebar: popular posts, categories, newsletter",
   "route": {
@@ -23,7 +24,7 @@
       "path": "blog-list-page/blog-list-page.tsx",
       "type": "registry:page",
       "target": "$modules$/blog-list-page/blog-list-page.tsx",
-      "content": "import { useState, useEffect } from \"react\";\nimport { useSearchParams } from \"react-router\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { Layout } from \"@/components/Layout\";\nimport { Search, Filter } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { FadeIn } from \"@/modules/animations\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { PostCard } from \"@/modules/post-card/post-card\";\nimport { usePosts, useBlogCategories } from \"@/modules/blog-core\";\n\nexport function BlogListPage() {\n  const { t } = useTranslation(\"blog-list-page\");\n  usePageTitle({ title: t(\"title\") });\n\n  const [searchParams, setSearchParams] = useSearchParams();\n  const [searchTerm, setSearchTerm] = useState(\n    searchParams.get(\"search\") || \"\"\n  );\n  const [selectedCategories, setSelectedCategories] = useState<string[]>(\n    searchParams.get(\"categories\")?.split(\",\").filter(Boolean) || []\n  );\n  const [selectedTags, setSelectedTags] = useState<string[]>(\n    searchParams.get(\"tags\")?.split(\",\").filter(Boolean) || []\n  );\n  const [sortBy, setSortBy] = useState(searchParams.get(\"sort\") || \"newest\");\n  const [viewMode, _setViewMode] = useState<\"grid\" | \"list\">(\"grid\");\n\n  const { posts, loading, error } = usePosts();\n  const { categories } = useBlogCategories();\n\n  const filteredPosts = posts.filter((post) => {\n    if (searchTerm) {\n      const searchLower = searchTerm.toLowerCase();\n      if (\n        !post.title.toLowerCase().includes(searchLower) &&\n        !post.excerpt.toLowerCase().includes(searchLower) &&\n        !post.content.toLowerCase().includes(searchLower)\n      ) {\n        return false;\n      }\n    }\n\n    if (selectedCategories.length > 0) {\n      const hasMatchingCategory = selectedCategories.some(\n        (categorySlug) =>\n          post.category === categorySlug ||\n          post.categories?.some((cat) => cat.slug === categorySlug)\n      );\n      if (!hasMatchingCategory) return false;\n    }\n\n    if (selectedTags.length > 0) {\n      const hasMatchingTag = selectedTags.some((tag) =>\n        post.tags.includes(tag)\n      );\n      if (!hasMatchingTag) return false;\n    }\n\n    return true;\n  });\n\n  const sortedPosts = [...filteredPosts].sort((a, b) => {\n    switch (sortBy) {\n      case \"oldest\":\n        return (\n          new Date(a.published_at).getTime() -\n          new Date(b.published_at).getTime()\n        );\n      case \"popular\":\n        return (b.view_count || 0) - (a.view_count || 0);\n      case \"reading-time\":\n        return (a.read_time || 0) - (b.read_time || 0);\n      case \"newest\":\n      default:\n        return (\n          new Date(b.published_at).getTime() -\n          new Date(a.published_at).getTime()\n        );\n    }\n  });\n\n  useEffect(() => {\n    const params = new URLSearchParams();\n    if (searchTerm) params.set(\"search\", searchTerm);\n    if (selectedCategories.length)\n      params.set(\"categories\", selectedCategories.join(\",\"));\n    if (selectedTags.length) params.set(\"tags\", selectedTags.join(\",\"));\n    if (sortBy !== \"newest\") params.set(\"sort\", sortBy);\n\n    setSearchParams(params);\n  }, [searchTerm, selectedCategories, selectedTags, sortBy, setSearchParams]);\n\n  const handleCategoryChange = (categorySlug: string, checked: boolean) => {\n    if (checked) {\n      setSelectedCategories([...selectedCategories, categorySlug]);\n    } else {\n      setSelectedCategories(\n        selectedCategories.filter((c) => c !== categorySlug)\n      );\n    }\n  };\n\n  const handleTagChange = (tag: string, checked: boolean) => {\n    if (checked) {\n      setSelectedTags([...selectedTags, tag]);\n    } else {\n      setSelectedTags(selectedTags.filter((t) => t !== tag));\n    }\n  };\n\n  const allTags = Array.from(new Set(posts.flatMap((post) => post.tags)));\n\n  const clearFilters = () => {\n    setSearchTerm(\"\");\n    setSelectedCategories([]);\n    setSelectedTags([]);\n    setSortBy(\"newest\");\n  };\n\n  const FilterSection = () => (\n    <div className=\"space-y-6\">\n      <div>\n        <h3 className=\"font-semibold mb-3 flex items-center gap-2\">\n          <Search className=\"h-4 w-4\" />\n          {t(\"search\")}\n        </h3>\n        <Input\n          placeholder={t(\"searchPlaceholder\")}\n          value={searchTerm}\n          onChange={(e) => setSearchTerm(e.target.value)}\n        />\n      </div>\n\n      <div>\n        <h3 className=\"font-semibold mb-3\">{t(\"categories\")}</h3>\n        <div className=\"space-y-2\">\n          {categories.map((category) => (\n            <div key={category.slug} className=\"flex items-center space-x-2\">\n              <Checkbox\n                id={`category-${category.slug}`}\n                checked={selectedCategories.includes(category.slug)}\n                onCheckedChange={(checked) =>\n                  handleCategoryChange(category.slug, checked as boolean)\n                }\n              />\n              <label\n                htmlFor={`category-${category.slug}`}\n                className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n              >\n                {category.name}\n              </label>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {allTags.length > 0 && (\n        <div>\n          <h3 className=\"font-semibold mb-3\">{t(\"tags\")}</h3>\n          <div className=\"space-y-2 max-h-48 overflow-y-auto\">\n            {allTags.slice(0, 20).map((tag) => (\n              <div key={tag} className=\"flex items-center space-x-2\">\n                <Checkbox\n                  id={`tag-${tag}`}\n                  checked={selectedTags.includes(tag)}\n                  onCheckedChange={(checked) =>\n                    handleTagChange(tag, checked as boolean)\n                  }\n                />\n                <label\n                  htmlFor={`tag-${tag}`}\n                  className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n                >\n                  {tag}\n                </label>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {(searchTerm ||\n        selectedCategories.length > 0 ||\n        selectedTags.length > 0) && (\n        <Button variant=\"outline\" onClick={clearFilters} className=\"w-full\">\n          {t(\"clearFilters\")}\n        </Button>\n      )}\n    </div>\n  );\n\n  if (loading) {\n    return (\n      <Layout>\n        <div className=\"container mx-auto px-4 py-8\">\n          <div className=\"animate-pulse space-y-4\">\n            {Array.from({ length: 6 }).map((_, i) => (\n              <div key={i} className=\"h-48 bg-muted rounded-lg\"></div>\n            ))}\n          </div>\n        </div>\n      </Layout>\n    );\n  }\n\n  if (error) {\n    return (\n      <Layout>\n        <div className=\"container mx-auto px-4 py-8 text-center\">\n          <p className=\"text-destructive\">{t(\"error\")}</p>\n        </div>\n      </Layout>\n    );\n  }\n\n  return (\n    <Layout>\n      <div className=\"container mx-auto px-4 py-8\">\n        <FadeIn className=\"flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-8\">\n          <div>\n            <h1 className=\"text-3xl font-bold mb-2\">{t(\"title\")}</h1>\n            <p className=\"text-muted-foreground\">{t(\"subtitle\")}</p>\n          </div>\n\n          <div className=\"flex items-center gap-4\">\n            <Select value={sortBy} onValueChange={setSortBy}>\n              <SelectTrigger className=\"w-[180px]\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"newest\">{t(\"sortNewest\")}</SelectItem>\n                <SelectItem value=\"oldest\">{t(\"sortOldest\")}</SelectItem>\n                <SelectItem value=\"popular\">{t(\"sortPopular\")}</SelectItem>\n                <SelectItem value=\"reading-time\">\n                  {t(\"sortReadingTime\")}\n                </SelectItem>\n              </SelectContent>\n            </Select>\n\n            <Sheet>\n              <SheetTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" className=\"lg:hidden\">\n                  <Filter className=\"h-4 w-4 mr-2\" />\n                  {t(\"filters\")}\n                </Button>\n              </SheetTrigger>\n              <SheetContent>\n                <SheetHeader>\n                  <SheetTitle>{t(\"filters\")}</SheetTitle>\n                  <SheetDescription>{t(\"filterDescription\")}</SheetDescription>\n                </SheetHeader>\n                <div className=\"mt-6\">\n                  <FilterSection />\n                </div>\n              </SheetContent>\n            </Sheet>\n          </div>\n        </FadeIn>\n\n        <div className=\"flex flex-col lg:flex-row gap-8\">\n          <div className=\"hidden lg:block w-64 flex-shrink-0\">\n            <div className=\"sticky top-4\">\n              <FilterSection />\n            </div>\n          </div>\n\n          <div className=\"flex-1\">\n            <div className=\"flex items-center justify-between mb-6\">\n              <p className=\"text-sm text-muted-foreground\">\n                {t(\"showing\")} {sortedPosts.length} {t(\"of\")} {posts.length}{\" \"}\n                {t(\"posts\")}\n                {searchTerm && (\n                  <span className=\"ml-1\">\n                    {t(\"for\")} \"<strong>{searchTerm}</strong>\"\n                  </span>\n                )}\n              </p>\n            </div>\n\n            {sortedPosts.length > 0 ? (\n              <div\n                className={`grid gap-6 ${\n                  viewMode === \"grid\"\n                    ? \"grid-cols-1 md:grid-cols-2 xl:grid-cols-3\"\n                    : \"grid-cols-1\"\n                }`}\n              >\n                {sortedPosts.map((post) => (\n                  <PostCard key={post.id} post={post} layout={viewMode} />\n                ))}\n              </div>\n            ) : (\n              <div className=\"text-center py-12\">\n                <p className=\"text-muted-foreground mb-4\">\n                  {t(\"noPostsFound\")}\n                </p>\n                <Button onClick={clearFilters} variant=\"outline\">\n                  {t(\"clearFilters\")}\n                </Button>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n"
+      "content": "import { useState, useEffect } from \"react\";\nimport { useSearchParams } from \"react-router\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { Layout } from \"@/components/Layout\";\nimport { Search, Filter } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { FadeIn } from \"@/modules/animations\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { PostCard } from \"@/modules/post-card/post-card\";\nimport { usePosts, useBlogCategories } from \"@/modules/blog-core\";\n\nexport function BlogListPage() {\n  const { t } = useTranslation(\"blog-list-page\");\n  usePageTitle({ title: t(\"title\") });\n\n  const [searchParams, setSearchParams] = useSearchParams();\n  const [searchTerm, setSearchTerm] = useState(\n    searchParams.get(\"search\") || \"\"\n  );\n  const [selectedCategories, setSelectedCategories] = useState<string[]>(\n    searchParams.get(\"categories\")?.split(\",\").filter(Boolean) || []\n  );\n  const [selectedTags, setSelectedTags] = useState<string[]>(\n    searchParams.get(\"tags\")?.split(\",\").filter(Boolean) || []\n  );\n  const [sortBy, setSortBy] = useState(searchParams.get(\"sort\") || \"newest\");\n  const [viewMode, _setViewMode] = useState<\"grid\" | \"list\">(\"grid\");\n\n  const { posts, loading, error } = usePosts();\n  const { categories } = useBlogCategories();\n\n  const filteredPosts = posts.filter((post) => {\n    if (searchTerm) {\n      const searchLower = searchTerm.toLowerCase();\n      if (\n        !post.title.toLowerCase().includes(searchLower) &&\n        !post.excerpt.toLowerCase().includes(searchLower) &&\n        !post.content.toLowerCase().includes(searchLower)\n      ) {\n        return false;\n      }\n    }\n\n    if (selectedCategories.length > 0) {\n      const hasMatchingCategory = selectedCategories.some(\n        (categorySlug) =>\n          post.category === categorySlug ||\n          post.categories?.some((cat) => cat.slug === categorySlug)\n      );\n      if (!hasMatchingCategory) return false;\n    }\n\n    if (selectedTags.length > 0) {\n      const hasMatchingTag = selectedTags.some((tag) =>\n        post.tags.includes(tag)\n      );\n      if (!hasMatchingTag) return false;\n    }\n\n    return true;\n  });\n\n  const sortedPosts = [...filteredPosts].sort((a, b) => {\n    switch (sortBy) {\n      case \"oldest\":\n        return (\n          new Date(a.published_at).getTime() -\n          new Date(b.published_at).getTime()\n        );\n      case \"popular\":\n        return (b.view_count || 0) - (a.view_count || 0);\n      case \"reading-time\":\n        return (a.read_time || 0) - (b.read_time || 0);\n      case \"newest\":\n      default:\n        return (\n          new Date(b.published_at).getTime() -\n          new Date(a.published_at).getTime()\n        );\n    }\n  });\n\n  useEffect(() => {\n    const params = new URLSearchParams();\n    if (searchTerm) params.set(\"search\", searchTerm);\n    if (selectedCategories.length)\n      params.set(\"categories\", selectedCategories.join(\",\"));\n    if (selectedTags.length) params.set(\"tags\", selectedTags.join(\",\"));\n    if (sortBy !== \"newest\") params.set(\"sort\", sortBy);\n\n    setSearchParams(params);\n  }, [searchTerm, selectedCategories, selectedTags, sortBy, setSearchParams]);\n\n  const handleCategoryChange = (categorySlug: string, checked: boolean) => {\n    if (checked) {\n      setSelectedCategories([...selectedCategories, categorySlug]);\n    } else {\n      setSelectedCategories(\n        selectedCategories.filter((c) => c !== categorySlug)\n      );\n    }\n  };\n\n  const handleTagChange = (tag: string, checked: boolean) => {\n    if (checked) {\n      setSelectedTags([...selectedTags, tag]);\n    } else {\n      setSelectedTags(selectedTags.filter((t) => t !== tag));\n    }\n  };\n\n  const allTags = Array.from(new Set(posts.flatMap((post) => post.tags)));\n\n  const clearFilters = () => {\n    setSearchTerm(\"\");\n    setSelectedCategories([]);\n    setSelectedTags([]);\n    setSortBy(\"newest\");\n  };\n\n  const FilterSection = () => (\n    <div className=\"space-y-6\">\n      <div>\n        <h3 className=\"font-semibold mb-3 flex items-center gap-2\">\n          <Search className=\"h-4 w-4\" />\n          {t(\"search\")}\n        </h3>\n        <Input\n          placeholder={t(\"searchPlaceholder\")}\n          value={searchTerm}\n          onChange={(e) => setSearchTerm(e.target.value)}\n        />\n      </div>\n\n      <div>\n        <h3 className=\"font-semibold mb-3\">{t(\"categories\")}</h3>\n        <div className=\"space-y-2\">\n          {categories.map((category) => (\n            <div key={category.slug} className=\"flex items-center space-x-2\">\n              <Checkbox\n                id={`category-${category.slug}`}\n                checked={selectedCategories.includes(category.slug)}\n                onCheckedChange={(checked) =>\n                  handleCategoryChange(category.slug, checked as boolean)\n                }\n              />\n              <label\n                htmlFor={`category-${category.slug}`}\n                className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n              >\n                {category.name}\n              </label>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {allTags.length > 0 && (\n        <div>\n          <h3 className=\"font-semibold mb-3\">{t(\"tags\")}</h3>\n          <div className=\"space-y-2 max-h-48 overflow-y-auto\">\n            {allTags.slice(0, 20).map((tag) => (\n              <div key={tag} className=\"flex items-center space-x-2\">\n                <Checkbox\n                  id={`tag-${tag}`}\n                  checked={selectedTags.includes(tag)}\n                  onCheckedChange={(checked) =>\n                    handleTagChange(tag, checked as boolean)\n                  }\n                />\n                <label\n                  htmlFor={`tag-${tag}`}\n                  className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n                >\n                  {tag}\n                </label>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {(searchTerm ||\n        selectedCategories.length > 0 ||\n        selectedTags.length > 0) && (\n        <Button variant=\"outline\" onClick={clearFilters} className=\"w-full\">\n          {t(\"clearFilters\")}\n        </Button>\n      )}\n    </div>\n  );\n\n  if (loading) {\n    return (\n      <Layout>\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8\">\n          <div className=\"animate-pulse space-y-4\">\n            {Array.from({ length: 6 }).map((_, i) => (\n              <div key={i} className=\"h-48 bg-muted rounded-lg\"></div>\n            ))}\n          </div>\n        </div>\n      </Layout>\n    );\n  }\n\n  if (error) {\n    return (\n      <Layout>\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8 text-center\">\n          <p className=\"text-destructive\">{t(\"error\")}</p>\n        </div>\n      </Layout>\n    );\n  }\n\n  return (\n    <Layout>\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-8\">\n        <FadeIn className=\"flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-8\">\n          <div>\n            <h1 className=\"text-3xl font-bold mb-2\">{t(\"title\")}</h1>\n            <p className=\"text-muted-foreground\">{t(\"subtitle\")}</p>\n          </div>\n\n          <div className=\"flex items-center gap-4\">\n            <Select value={sortBy} onValueChange={setSortBy}>\n              <SelectTrigger className=\"w-[180px]\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"newest\">{t(\"sortNewest\")}</SelectItem>\n                <SelectItem value=\"oldest\">{t(\"sortOldest\")}</SelectItem>\n                <SelectItem value=\"popular\">{t(\"sortPopular\")}</SelectItem>\n                <SelectItem value=\"reading-time\">\n                  {t(\"sortReadingTime\")}\n                </SelectItem>\n              </SelectContent>\n            </Select>\n\n            <Sheet>\n              <SheetTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" className=\"lg:hidden\">\n                  <Filter className=\"h-4 w-4 mr-2\" />\n                  {t(\"filters\")}\n                </Button>\n              </SheetTrigger>\n              <SheetContent>\n                <SheetHeader>\n                  <SheetTitle>{t(\"filters\")}</SheetTitle>\n                  <SheetDescription>{t(\"filterDescription\")}</SheetDescription>\n                </SheetHeader>\n                <div className=\"mt-6\">\n                  <FilterSection />\n                </div>\n              </SheetContent>\n            </Sheet>\n          </div>\n        </FadeIn>\n\n        <div className=\"flex flex-col lg:flex-row gap-8\">\n          <div className=\"hidden lg:block w-64 flex-shrink-0\">\n            <div className=\"sticky top-4\">\n              <FilterSection />\n            </div>\n          </div>\n\n          <div className=\"flex-1\">\n            <div className=\"flex items-center justify-between mb-6\">\n              <p className=\"text-sm text-muted-foreground\">\n                {t(\"showing\")} {sortedPosts.length} {t(\"of\")} {posts.length}{\" \"}\n                {t(\"posts\")}\n                {searchTerm && (\n                  <span className=\"ml-1\">\n                    {t(\"for\")} \"<strong>{searchTerm}</strong>\"\n                  </span>\n                )}\n              </p>\n            </div>\n\n            {sortedPosts.length > 0 ? (\n              <div\n                className={`grid gap-6 ${\n                  viewMode === \"grid\"\n                    ? \"grid-cols-1 md:grid-cols-2 xl:grid-cols-3\"\n                    : \"grid-cols-1\"\n                }`}\n              >\n                {sortedPosts.map((post) => (\n                  <PostCard key={post.id} post={post} layout={viewMode} />\n                ))}\n              </div>\n            ) : (\n              <div className=\"text-center py-12\">\n                <p className=\"text-muted-foreground mb-4\">\n                  {t(\"noPostsFound\")}\n                </p>\n                <Button onClick={clearFilters} variant=\"outline\">\n                  {t(\"clearFilters\")}\n                </Button>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n\nexport default BlogListPage;\n"
     },
     {
       "path": "blog-list-page/lang/en.json",