@promakeai/cli 0.9.8 → 0.9.10

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

@@ -17,25 +17,25 @@
       "path": "forgot-password-page-split/index.ts",
       "type": "registry:index",
       "target": "$modules$/forgot-password-page-split/index.ts",
-      "content": "export * from './forgot-password-page-split';\r\nexport { default } from './forgot-password-page-split';\r\n"
+      "content": "export * from './forgot-password-page-split';\nexport { default } from './forgot-password-page-split';\n"
     },
     {
       "path": "forgot-password-page-split/forgot-password-page-split.tsx",
       "type": "registry:page",
       "target": "$modules$/forgot-password-page-split/forgot-password-page-split.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { Mail, ArrowLeft, CheckCircle } from \"lucide-react\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { FormField } from \"@/components/FormField\";\r\n\r\ninterface ForgotPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ForgotPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ForgotPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"forgot-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\r\n  const { forgotPassword } = useAuth();\r\n\r\n  const [email, setEmail] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isEmailSent, setIsEmailSent] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await forgotPassword(email);\r\n\r\n      setIsEmailSent(true);\r\n      toast.success(t(\"emailSent\", \"Reset link sent!\"), {\r\n        description: t(\"checkInbox\", \"Please check your email inbox.\"),\r\n      });\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"forgotPasswordError\", \"Failed to send reset link. Please try again.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  // Success state - email sent\r\n  if (isEmailSent) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div className=\"flex justify-center\">\r\n              <div className=\"w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center\">\r\n                <CheckCircle className=\"w-8 h-8 text-green-600 dark:text-green-400\" />\r\n              </div>\r\n            </div>\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight\">\r\n                {t(\"checkYourEmail\", \"Check your email\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"emailSentTo\", \"We've sent a password reset link to\")}\r\n              </p>\r\n              <p className=\"text-sm font-medium mt-1\">{email}</p>\r\n            </div>\r\n\r\n            <div className=\"text-sm text-muted-foreground\">\r\n              <p>{t(\"didntReceive\", \"Didn't receive the email?\")}</p>\r\n              <Button\r\n                variant=\"link\"\r\n                className=\"p-0 h-auto\"\r\n                onClick={() => {\r\n                  setIsEmailSent(false);\r\n                  setError(null);\r\n                }}\r\n              >\r\n                {t(\"tryAgain\", \"Click here to try again\")}\r\n              </Button>\r\n            </div>\r\n\r\n            <Link\r\n              to=\"/login\"\r\n              className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n            >\r\n              <ArrowLeft className=\"w-4 h-4\" />\r\n              {t(\"backToLogin\", \"Back to login\")}\r\n            </Link>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Forgot password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n\r\n          <div className=\"flex justify-center\">\r\n            <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center\">\r\n              <Mail className=\"w-6 h-6 text-primary\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"text-center\">\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Forgot Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your email to reset your password\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"email\", \"Email\")} htmlFor=\"email\" required>\r\n                <Input\r\n                  required\r\n                  id=\"email\"\r\n                  type=\"email\"\r\n                  autoComplete=\"email\"\r\n                  placeholder={t(\"emailPlaceholder\", \"Enter your email\")}\r\n                  value={email}\r\n                  onChange={(e) => setEmail(e.target.value)}\r\n                  disabled={isLoading}\r\n                />\r\n              </FormField>\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"sending\", \"Sending...\")}\r\n                </>\r\n              ) : (\r\n                t(\"sendLink\", \"Send Reset Link\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <Link\r\n            to=\"/login\"\r\n            className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n          >\r\n            <ArrowLeft className=\"w-4 h-4\" />\r\n            {t(\"backToLogin\", \"Back to login\")}\r\n          </Link>\r\n\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Forgot password background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default ForgotPasswordPageSplit;\r\n"
+      "content": "import { useState } from \"react\";\nimport { Link } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { useTranslation } from \"react-i18next\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Logo } from \"@/components/Logo\";\nimport { Mail, ArrowLeft, CheckCircle } from \"lucide-react\";\nimport { useAuth } from \"@/modules/auth-core\";\nimport { getErrorMessage } from \"@/modules/api\";\nimport { FormField } from \"@/components/FormField\";\n\ninterface ForgotPasswordPageSplitProps {\n  image?: string;\n}\n\nexport function ForgotPasswordPageSplit({\n  image = \"/images/placeholder.png\",\n}: ForgotPasswordPageSplitProps) {\n  const { t } = useTranslation(\"forgot-password-page-split\");\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\n  const { forgotPassword } = useAuth();\n\n  const [email, setEmail] = useState(\"\");\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [isEmailSent, setIsEmailSent] = useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setIsLoading(true);\n\n    try {\n      await forgotPassword(email);\n\n      setIsEmailSent(true);\n      toast.success(t(\"emailSent\", \"Reset link sent!\"), {\n        description: t(\"checkInbox\", \"Please check your email inbox.\"),\n      });\n    } catch (err) {\n      const errorMessage = getErrorMessage(\n        err,\n        t(\"forgotPasswordError\", \"Failed to send reset link. Please try again.\")\n      );\n      setError(errorMessage);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  // Success state - email sent\n  if (isEmailSent) {\n    return (\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\n        <div className=\"flex items-center justify-center px-4 py-12\">\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\n            <Logo />\n            <hr />\n\n            <div className=\"flex justify-center\">\n              <div className=\"w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center\">\n                <CheckCircle className=\"w-8 h-8 text-green-600 dark:text-green-400\" />\n              </div>\n            </div>\n\n            <div>\n              <h1 className=\"text-xl font-bold tracking-tight\">\n                {t(\"checkYourEmail\", \"Check your email\")}\n              </h1>\n              <p className=\"text-sm text-muted-foreground mt-2\">\n                {t(\"emailSentTo\", \"We've sent a password reset link to\")}\n              </p>\n              <p className=\"text-sm font-medium mt-1\">{email}</p>\n            </div>\n\n            <div className=\"text-sm text-muted-foreground\">\n              <p>{t(\"didntReceive\", \"Didn't receive the email?\")}</p>\n              <Button\n                variant=\"link\"\n                className=\"p-0 h-auto\"\n                onClick={() => {\n                  setIsEmailSent(false);\n                  setError(null);\n                }}\n              >\n                {t(\"tryAgain\", \"Click here to try again\")}\n              </Button>\n            </div>\n\n            <Link\n              to=\"/login\"\n              className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\n            >\n              <ArrowLeft className=\"w-4 h-4\" />\n              {t(\"backToLogin\", \"Back to login\")}\n            </Link>\n\n            <hr />\n            <p className=\"text-sm text-muted-foreground\">\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\n            </p>\n          </div>\n        </div>\n        <div className=\"hidden p-4 md:block\">\n          <img\n            loading=\"lazy\"\n            decoding=\"async\"\n            width=\"1920\"\n            height=\"1080\"\n            alt={t(\"imageAlt\", \"Forgot password background\")}\n            src={image}\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\n          />\n        </div>\n      </section>\n    );\n  }\n\n  return (\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\n      <div className=\"flex items-center justify-center px-4 py-12\">\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\n          <Logo />\n          <hr />\n\n          <div className=\"flex justify-center\">\n            <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center\">\n              <Mail className=\"w-6 h-6 text-primary\" />\n            </div>\n          </div>\n\n          <div className=\"text-center\">\n            <h1 className=\"text-xl font-bold tracking-tight\">\n              {t(\"title\", \"Forgot Password\")}\n            </h1>\n            <p className=\"text-sm text-muted-foreground mt-1\">\n              {t(\"subtitle\", \"Enter your email to reset your password\")}\n            </p>\n          </div>\n\n          {error && (\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\n              {error}\n            </div>\n          )}\n\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\n            <div className=\"grid gap-2\">\n              <FormField label={t(\"email\", \"Email\")} htmlFor=\"email\" required>\n                <Input\n                  required\n                  id=\"email\"\n                  type=\"email\"\n                  autoComplete=\"email\"\n                  placeholder={t(\"emailPlaceholder\", \"Enter your email\")}\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                  disabled={isLoading}\n                />\n              </FormField>\n            </div>\n\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n              {isLoading ? (\n                <>\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\n                  {t(\"sending\", \"Sending...\")}\n                </>\n              ) : (\n                t(\"sendLink\", \"Send Reset Link\")\n              )}\n            </Button>\n          </form>\n\n          <Link\n            to=\"/login\"\n            className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\n          >\n            <ArrowLeft className=\"w-4 h-4\" />\n            {t(\"backToLogin\", \"Back to login\")}\n          </Link>\n\n          <hr />\n          <p className=\"text-sm text-muted-foreground\">\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\n          </p>\n        </div>\n      </div>\n      <div className=\"hidden p-4 md:block\">\n        <img\n          loading=\"lazy\"\n          decoding=\"async\"\n          width=\"1920\"\n          height=\"1080\"\n          alt={t(\"imageAlt\", \"Forgot password background\")}\n          src={image}\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\n        />\n      </div>\n    </section>\n  );\n}\n\nexport default ForgotPasswordPageSplit;\n"
     },
     {
       "path": "forgot-password-page-split/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/forgot-password-page-split/lang/en.json",
-      "content": "{\r\n  \"title\": \"Forgot Password\",\r\n  \"subtitle\": \"Enter your email to reset your password\",\r\n  \"email\": \"Email\",\r\n  \"emailPlaceholder\": \"you@example.com\",\r\n  \"sendLink\": \"Send Reset Link\",\r\n  \"sending\": \"Sending...\",\r\n  \"emailSent\": \"Reset link sent!\",\r\n  \"checkInbox\": \"Please check your email inbox.\",\r\n  \"forgotPasswordError\": \"Failed to send reset link. Please try again.\",\r\n  \"checkYourEmail\": \"Check your email\",\r\n  \"emailSentTo\": \"We've sent a password reset link to\",\r\n  \"didntReceive\": \"Didn't receive the email?\",\r\n  \"tryAgain\": \"Click here to try again\",\r\n  \"backToLogin\": \"Back to login\",\r\n  \"copyright\": \"All rights reserved.\",\r\n  \"imageAlt\": \"Forgot password background\"\r\n}\r\n"
+      "content": "{\n  \"title\": \"Forgot Password\",\n  \"subtitle\": \"Enter your email to reset your password\",\n  \"email\": \"Email\",\n  \"emailPlaceholder\": \"you@example.com\",\n  \"sendLink\": \"Send Reset Link\",\n  \"sending\": \"Sending...\",\n  \"emailSent\": \"Reset link sent!\",\n  \"checkInbox\": \"Please check your email inbox.\",\n  \"forgotPasswordError\": \"Failed to send reset link. Please try again.\",\n  \"checkYourEmail\": \"Check your email\",\n  \"emailSentTo\": \"We've sent a password reset link to\",\n  \"didntReceive\": \"Didn't receive the email?\",\n  \"tryAgain\": \"Click here to try again\",\n  \"backToLogin\": \"Back to login\",\n  \"copyright\": \"All rights reserved.\",\n  \"imageAlt\": \"Forgot password background\"\n}\n"
     },
     {
       "path": "forgot-password-page-split/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/forgot-password-page-split/lang/tr.json",
-      "content": "{\r\n  \"title\": \"Şifremi Unuttum\",\r\n  \"subtitle\": \"Şifrenizi sıfırlamak için e-posta adresinizi girin\",\r\n  \"email\": \"E-posta\",\r\n  \"emailPlaceholder\": \"ornek@email.com\",\r\n  \"sendLink\": \"Sıfırlama Linki Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"emailSent\": \"Sıfırlama linki gönderildi!\",\r\n  \"checkInbox\": \"Lütfen e-posta gelen kutunuzu kontrol edin.\",\r\n  \"forgotPasswordError\": \"Sıfırlama linki gönderilemedi. Lütfen tekrar deneyin.\",\r\n  \"checkYourEmail\": \"E-postanızı kontrol edin\",\r\n  \"emailSentTo\": \"Şifre sıfırlama linki gönderildi:\",\r\n  \"didntReceive\": \"E-posta almadınız mı?\",\r\n  \"tryAgain\": \"Tekrar denemek için tıklayın\",\r\n  \"backToLogin\": \"Girişe dön\",\r\n  \"copyright\": \"Tüm hakları saklıdır.\",\r\n  \"imageAlt\": \"Şifre sıfırlama arka planı\"\r\n}\r\n"
+      "content": "{\n  \"title\": \"Şifremi Unuttum\",\n  \"subtitle\": \"Şifrenizi sıfırlamak için e-posta adresinizi girin\",\n  \"email\": \"E-posta\",\n  \"emailPlaceholder\": \"ornek@email.com\",\n  \"sendLink\": \"Sıfırlama Linki Gönder\",\n  \"sending\": \"Gönderiliyor...\",\n  \"emailSent\": \"Sıfırlama linki gönderildi!\",\n  \"checkInbox\": \"Lütfen e-posta gelen kutunuzu kontrol edin.\",\n  \"forgotPasswordError\": \"Sıfırlama linki gönderilemedi. Lütfen tekrar deneyin.\",\n  \"checkYourEmail\": \"E-postanızı kontrol edin\",\n  \"emailSentTo\": \"Şifre sıfırlama linki gönderildi:\",\n  \"didntReceive\": \"E-posta almadınız mı?\",\n  \"tryAgain\": \"Tekrar denemek için tıklayın\",\n  \"backToLogin\": \"Girişe dön\",\n  \"copyright\": \"Tüm hakları saklıdır.\",\n  \"imageAlt\": \"Şifre sıfırlama arka planı\"\n}\n"
     }
   ],
   "exports": {

package/dist/registry/forgot-password-page.json

@@ -17,25 +17,25 @@
       "path": "forgot-password-page/index.ts",
       "type": "registry:index",
       "target": "$modules$/forgot-password-page/index.ts",
-      "content": "export * from './forgot-password-page';\r\nexport { default } from './forgot-password-page';\r\n"
+      "content": "export * from './forgot-password-page';\nexport { default } from './forgot-password-page';\n"
     },
     {
       "path": "forgot-password-page/forgot-password-page.tsx",
       "type": "registry:page",
       "target": "$modules$/forgot-password-page/forgot-password-page.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardHeader,\r\n  CardTitle,\r\n  CardDescription,\r\n} from \"@/components/ui/card\";\r\nimport { KeyRound, ArrowLeft,  CheckCircle2 } from \"lucide-react\";\r\nimport { FormField } from \"@/components/FormField\";\r\nimport { PasswordInput } from \"@/components/PasswordInput\";\r\n\r\ntype Step = \"request\" | \"reset\" | \"success\";\r\n\r\nexport function ForgotPasswordPage() {\r\n  const { t } = useTranslation(\"forgot-password-page\");\r\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\r\n\r\n  const { forgotPassword, resetPassword } = useAuth();\r\n\r\n  const [step, setStep] = useState<Step>(\"request\");\r\n  const [email, setEmail] = useState(\"\");\r\n  const [code, setCode] = useState(\"\");\r\n  const [newPassword, setNewPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  const handleRequestCode = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setError(null);\r\n\r\n    try {\r\n      await forgotPassword(email);\r\n      toast.success(t(\"codeSentTitle\", \"Code Sent!\"), {\r\n        description: t(\r\n          \"codeSentDesc\",\r\n          \"A password reset code has been sent to your email.\",\r\n        ),\r\n      });\r\n      setStep(\"reset\");\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"errorGeneric\", \"Failed to send reset code. Please try again.\"),\r\n      );\r\n      setError(errorMessage);\r\n      toast.error(t(\"errorTitle\", \"Error\"), {\r\n        description: errorMessage,\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleResetPassword = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (newPassword !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    setIsSubmitting(true);\r\n\r\n    try {\r\n      await resetPassword(email, code, newPassword);\r\n      toast.success(t(\"resetSuccessTitle\", \"Password Reset!\"), {\r\n        description: t(\r\n          \"resetSuccessDesc\",\r\n          \"Your password has been successfully reset.\",\r\n        ),\r\n      });\r\n      setStep(\"success\");\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"errorResetGeneric\", \"Failed to reset password. Please try again.\"),\r\n      );\r\n      setError(errorMessage);\r\n      toast.error(t(\"errorTitle\", \"Error\"), {\r\n        description: errorMessage,\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  // Success step\r\n  if (step === \"success\") {\r\n    return (\r\n      <Layout>\r\n        <div className=\"min-h-screen bg-muted/30 py-12\">\r\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n            <div className=\"max-w-md mx-auto\">\r\n              <Card>\r\n                <CardContent className=\"pt-8 pb-8 text-center\">\r\n                  <CheckCircle2 className=\"w-16 h-16 text-green-500 mx-auto mb-4\" />\r\n                  <h1 className=\"text-2xl font-bold mb-2\">\r\n                    {t(\"successTitle\", \"Password Reset Successfully!\")}\r\n                  </h1>\r\n                  <p className=\"text-muted-foreground mb-6\">\r\n                    {t(\r\n                      \"successDescription\",\r\n                      \"Your password has been changed. You can now login with your new password.\",\r\n                    )}\r\n                  </p>\r\n                  <Button asChild className=\"w-full\">\r\n                    <Link to=\"/login\">{t(\"goToLogin\", \"Go to Login\")}</Link>\r\n                  </Button>\r\n                </CardContent>\r\n              </Card>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen bg-muted/30 py-12\">\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n          {/* Hero Section */}\r\n          <div className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\r\n              {t(\"title\", \"Forgot Password\")}\r\n            </h1>\r\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\r\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\r\n              {step === \"request\"\r\n                ? t(\r\n                  \"descriptionRequest\",\r\n                  \"Enter your email and we'll send you a code to reset your password.\",\r\n                )\r\n                : t(\r\n                  \"descriptionReset\",\r\n                  \"Enter the code sent to your email and your new password.\",\r\n                )}\r\n            </p>\r\n          </div>\r\n\r\n          <div className=\"max-w-md mx-auto\">\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle className=\"flex items-center gap-2\">\r\n                  <KeyRound className=\"w-5 h-5 text-primary\" />\r\n                  {step === \"request\"\r\n                    ? t(\"cardTitleRequest\", \"Request Reset Code\")\r\n                    : t(\"cardTitleReset\", \"Reset Password\")}\r\n                </CardTitle>\r\n                <CardDescription>\r\n                  {step === \"request\"\r\n                    ? t(\"cardDescRequest\", \"Step 1 of 2: Request a reset code\")\r\n                    : t(\r\n                      \"cardDescReset\",\r\n                      \"Step 2 of 2: Enter code and new password\",\r\n                    )}\r\n                </CardDescription>\r\n              </CardHeader>\r\n              <CardContent>\r\n                {step === \"request\" ? (\r\n                  // Step 1: Request Code\r\n                  <form onSubmit={handleRequestCode} className=\"space-y-6\">\r\n                    <FormField label={t(\"email\", \"Email\")} htmlFor=\"email\" required>\r\n                      <Input\r\n                        id=\"email\"\r\n                        type=\"email\"\r\n                        value={email}\r\n                        onChange={(e) => setEmail(e.target.value)}\r\n                        placeholder={t(\"emailPlaceholder\", \"Enter your email\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        autoComplete=\"email\"\r\n                      />\r\n                    </FormField>\r\n\r\n                    {error && (\r\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\r\n                        <p className=\"text-red-800 text-sm font-medium\">\r\n                          {error}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\", \"Sending...\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"sendCode\", \"Send Reset Code\")\r\n                      )}\r\n                    </Button>\r\n\r\n                    <div className=\"text-center\">\r\n                      <Link\r\n                        to=\"/login\"\r\n                        className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1\"\r\n                      >\r\n                        <ArrowLeft className=\"w-4 h-4\" />\r\n                        {t(\"backToLogin\", \"Back to Login\")}\r\n                      </Link>\r\n                    </div>\r\n                  </form>\r\n                ) : (\r\n                  // Step 2: Reset Password\r\n                  <form onSubmit={handleResetPassword} className=\"space-y-6\">\r\n                    <div className=\"p-3 bg-muted rounded-lg text-sm\">\r\n                      <span className=\"text-muted-foreground\">\r\n                        {t(\"codeFor\", \"Reset code for:\")}{\" \"}\r\n                      </span>\r\n                      <span className=\"font-medium\">{email}</span>\r\n                    </div>\r\n                    <FormField label={t(\"code\", \"Reset Code\")} htmlFor=\"code\" required>\r\n                      <Input\r\n                        id=\"code\"\r\n                        type=\"text\"\r\n                        value={code}\r\n                        onChange={(e) => setCode(e.target.value)}\r\n                        placeholder={t(\"codePlaceholder\", \"Enter 6-digit code\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        maxLength={6}\r\n                      />\r\n                    </FormField>\r\n                    <FormField label={t(\"newPassword\", \"New Password\")} htmlFor=\"new-password\" required>\r\n                      <PasswordInput\r\n                        id=\"new-password\"\r\n                        name=\"new-password\"\r\n                        value={newPassword}\r\n                        onChange={(e) => setNewPassword(e.target.value)}\r\n                        placeholder={t(\"newPasswordPlaceholder\", \"Enter new password\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        autoComplete=\"new-password\"\r\n                      />\r\n                    </FormField>\r\n                    <div>\r\n                      <p className=\"text-xs text-muted-foreground mt-1\">\r\n                        {t(\r\n                          \"passwordRequirements\",\r\n                          \"At least 8 characters, 1 letter and 1 number\",\r\n                        )}\r\n                      </p>\r\n                    </div>\r\n\r\n                    <FormField label={t(\"confirmPassword\", \"Confirm Password\")} htmlFor=\"confirm-password\" required>\r\n                      <PasswordInput\r\n                        id=\"confirm-password\"\r\n                        value={confirmPassword}\r\n                        name=\"confirm-password\"\r\n                        onChange={(e) => setConfirmPassword(e.target.value)}\r\n                        placeholder={t(\"confirmPasswordPlaceholder\", \"Confirm new password\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                        autoComplete=\"new-password\"\r\n                      />\r\n                      </FormField>\r\n\r\n                    {error && (\r\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\r\n                        <p className=\"text-red-800 text-sm font-medium\">\r\n                          {error}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"resetting\", \"Resetting...\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"resetPassword\", \"Reset Password\")\r\n                      )}\r\n                    </Button>\r\n\r\n                    <div className=\"flex justify-between\">\r\n                      <button\r\n                        type=\"button\"\r\n                        onClick={() => {\r\n                          setStep(\"request\");\r\n                          setCode(\"\");\r\n                          setNewPassword(\"\");\r\n                          setConfirmPassword(\"\");\r\n                          setError(null);\r\n                        }}\r\n                        className=\"text-sm text-muted-foreground hover:text-primary\"\r\n                      >\r\n                        {t(\"changeEmail\", \"Change email\")}\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        onClick={() =>\r\n                          handleRequestCode({\r\n                            preventDefault: () => { },\r\n                          } as React.FormEvent)\r\n                        }\r\n                        className=\"text-sm text-primary hover:underline\"\r\n                        disabled={isSubmitting}\r\n                      >\r\n                        {t(\"resendCode\", \"Resend code\")}\r\n                      </button>\r\n                    </div>\r\n                  </form>\r\n                )}\r\n              </CardContent>\r\n            </Card>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ForgotPasswordPage;\r\n"
+      "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-core\";\nimport { getErrorMessage } from \"@/modules/api\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n} from \"@/components/ui/card\";\nimport { KeyRound, ArrowLeft,  CheckCircle2 } from \"lucide-react\";\nimport { FormField } from \"@/components/FormField\";\nimport { PasswordInput } from \"@/components/PasswordInput\";\n\ntype Step = \"request\" | \"reset\" | \"success\";\n\nexport function ForgotPasswordPage() {\n  const { t } = useTranslation(\"forgot-password-page\");\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\n\n  const { forgotPassword, resetPassword } = useAuth();\n\n  const [step, setStep] = useState<Step>(\"request\");\n  const [email, setEmail] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [newPassword, setNewPassword] = useState(\"\");\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\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(email);\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(email, 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 email 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                    <FormField label={t(\"email\", \"Email\")} htmlFor=\"email\" required>\n                      <Input\n                        id=\"email\"\n                        type=\"email\"\n                        value={email}\n                        onChange={(e) => setEmail(e.target.value)}\n                        placeholder={t(\"emailPlaceholder\", \"Enter your email\")}\n                        required\n                        className=\"mt-1\"\n                        autoComplete=\"email\"\n                      />\n                    </FormField>\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\">{email}</span>\n                    </div>\n                    <FormField label={t(\"code\", \"Reset Code\")} htmlFor=\"code\" required>\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                    </FormField>\n                    <FormField label={t(\"newPassword\", \"New Password\")} htmlFor=\"new-password\" required>\n                      <PasswordInput\n                        id=\"new-password\"\n                        name=\"new-password\"\n                        value={newPassword}\n                        onChange={(e) => setNewPassword(e.target.value)}\n                        placeholder={t(\"newPasswordPlaceholder\", \"Enter new password\")}\n                        required\n                        className=\"mt-1\"\n                        autoComplete=\"new-password\"\n                      />\n                    </FormField>\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                    <FormField label={t(\"confirmPassword\", \"Confirm Password\")} htmlFor=\"confirm-password\" required>\n                      <PasswordInput\n                        id=\"confirm-password\"\n                        value={confirmPassword}\n                        name=\"confirm-password\"\n                        onChange={(e) => setConfirmPassword(e.target.value)}\n                        placeholder={t(\"confirmPasswordPlaceholder\", \"Confirm new password\")}\n                        required\n                        className=\"mt-1\"\n                        autoComplete=\"new-password\"\n                      />\n                      </FormField>\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(\"changeEmail\", \"Change email\")}\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\nexport default ForgotPasswordPage;\n"
     },
     {
       "path": "forgot-password-page/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/forgot-password-page/lang/en.json",
-      "content": "{\r\n  \"title\": \"Forgot Password\",\r\n  \"descriptionRequest\": \"Enter your email and we'll send you a code to reset your password.\",\r\n  \"descriptionReset\": \"Enter the code sent to your email and your new password.\",\r\n  \"cardTitleRequest\": \"Request Reset Code\",\r\n  \"cardTitleReset\": \"Reset Password\",\r\n  \"cardDescRequest\": \"Step 1 of 2: Request a reset code\",\r\n  \"cardDescReset\": \"Step 2 of 2: Enter code and new password\",\r\n  \"email\": \"Email\",\r\n  \"emailPlaceholder\": \"Enter your email\",\r\n  \"code\": \"Reset Code\",\r\n  \"codePlaceholder\": \"Enter 6-digit code\",\r\n  \"codeFor\": \"Reset code for:\",\r\n  \"newPassword\": \"New Password\",\r\n  \"newPasswordPlaceholder\": \"Enter new password\",\r\n  \"confirmPassword\": \"Confirm Password\",\r\n  \"confirmPasswordPlaceholder\": \"Confirm new password\",\r\n  \"passwordRequirements\": \"At least 8 characters, 1 letter and 1 number\",\r\n  \"passwordMismatch\": \"Passwords do not match\",\r\n  \"sendCode\": \"Send Reset Code\",\r\n  \"sending\": \"Sending...\",\r\n  \"resetPassword\": \"Reset Password\",\r\n  \"resetting\": \"Resetting...\",\r\n  \"backToLogin\": \"Back to Login\",\r\n  \"changeEmail\": \"Change email\",\r\n  \"resendCode\": \"Resend code\",\r\n  \"codeSentTitle\": \"Code Sent!\",\r\n  \"codeSentDesc\": \"A password reset code has been sent to your email.\",\r\n  \"errorTitle\": \"Error\",\r\n  \"errorGeneric\": \"Failed to send reset code. Please try again.\",\r\n  \"errorResetGeneric\": \"Failed to reset password. Please try again.\",\r\n  \"resetSuccessTitle\": \"Password Reset!\",\r\n  \"resetSuccessDesc\": \"Your password has been successfully reset.\",\r\n  \"successTitle\": \"Password Reset Successfully!\",\r\n  \"successDescription\": \"Your password has been changed. You can now login with your new password.\",\r\n  \"goToLogin\": \"Go to Login\"\r\n}\r\n"
+      "content": "{\n  \"title\": \"Forgot Password\",\n  \"descriptionRequest\": \"Enter your email and we'll send you a code to reset your password.\",\n  \"descriptionReset\": \"Enter the code sent to your email and your new password.\",\n  \"cardTitleRequest\": \"Request Reset Code\",\n  \"cardTitleReset\": \"Reset Password\",\n  \"cardDescRequest\": \"Step 1 of 2: Request a reset code\",\n  \"cardDescReset\": \"Step 2 of 2: Enter code and new password\",\n  \"email\": \"Email\",\n  \"emailPlaceholder\": \"Enter your email\",\n  \"code\": \"Reset Code\",\n  \"codePlaceholder\": \"Enter 6-digit code\",\n  \"codeFor\": \"Reset code for:\",\n  \"newPassword\": \"New Password\",\n  \"newPasswordPlaceholder\": \"Enter new password\",\n  \"confirmPassword\": \"Confirm Password\",\n  \"confirmPasswordPlaceholder\": \"Confirm new password\",\n  \"passwordRequirements\": \"At least 8 characters, 1 letter and 1 number\",\n  \"passwordMismatch\": \"Passwords do not match\",\n  \"sendCode\": \"Send Reset Code\",\n  \"sending\": \"Sending...\",\n  \"resetPassword\": \"Reset Password\",\n  \"resetting\": \"Resetting...\",\n  \"backToLogin\": \"Back to Login\",\n  \"changeEmail\": \"Change email\",\n  \"resendCode\": \"Resend code\",\n  \"codeSentTitle\": \"Code Sent!\",\n  \"codeSentDesc\": \"A password reset code has been sent to your email.\",\n  \"errorTitle\": \"Error\",\n  \"errorGeneric\": \"Failed to send reset code. Please try again.\",\n  \"errorResetGeneric\": \"Failed to reset password. Please try again.\",\n  \"resetSuccessTitle\": \"Password Reset!\",\n  \"resetSuccessDesc\": \"Your password has been successfully reset.\",\n  \"successTitle\": \"Password Reset Successfully!\",\n  \"successDescription\": \"Your password has been changed. You can now login with your new password.\",\n  \"goToLogin\": \"Go to Login\"\n}\n"
     },
     {
       "path": "forgot-password-page/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/forgot-password-page/lang/tr.json",
-      "content": "{\r\n  \"title\": \"Şifremi Unuttum\",\r\n  \"descriptionRequest\": \"E-posta adresinizi girin, size şifre sıfırlama kodu göndereceğiz.\",\r\n  \"descriptionReset\": \"E-postanıza gönderilen kodu ve yeni şifrenizi girin.\",\r\n  \"cardTitleRequest\": \"Sıfırlama Kodu İste\",\r\n  \"cardTitleReset\": \"Şifre Sıfırla\",\r\n  \"cardDescRequest\": \"Adım 1/2: Sıfırlama kodu isteyin\",\r\n  \"cardDescReset\": \"Adım 2/2: Kodu ve yeni şifreyi girin\",\r\n  \"email\": \"E-posta\",\r\n  \"emailPlaceholder\": \"E-posta adresinizi girin\",\r\n  \"code\": \"Sıfırlama Kodu\",\r\n  \"codePlaceholder\": \"6 haneli kodu girin\",\r\n  \"codeFor\": \"Sıfırlama kodu:\",\r\n  \"newPassword\": \"Yeni Şifre\",\r\n  \"newPasswordPlaceholder\": \"Yeni şifre girin\",\r\n  \"confirmPassword\": \"Şifre Onayı\",\r\n  \"confirmPasswordPlaceholder\": \"Yeni şifreyi onaylayın\",\r\n  \"passwordRequirements\": \"En az 8 karakter, 1 harf ve 1 rakam\",\r\n  \"passwordMismatch\": \"Şifreler eşleşmiyor\",\r\n  \"sendCode\": \"Sıfırlama Kodu Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"resetPassword\": \"Şifreyi Sıfırla\",\r\n  \"resetting\": \"Sıfırlanıyor...\",\r\n  \"backToLogin\": \"Girişe Dön\",\r\n  \"changeEmail\": \"E-posta adresini değiştir\",\r\n  \"resendCode\": \"Kodu tekrar gönder\",\r\n  \"codeSentTitle\": \"Kod Gönderildi!\",\r\n  \"codeSentDesc\": \"E-postanıza şifre sıfırlama kodu gönderildi.\",\r\n  \"errorTitle\": \"Hata\",\r\n  \"errorGeneric\": \"Sıfırlama kodu gönderilemedi. Lütfen tekrar deneyin.\",\r\n  \"errorResetGeneric\": \"Şifre sıfırlanamadı. Lütfen tekrar deneyin.\",\r\n  \"resetSuccessTitle\": \"Şifre Sıfırlandı!\",\r\n  \"resetSuccessDesc\": \"Şifreniz başarıyla sıfırlandı.\",\r\n  \"successTitle\": \"Şifre Başarıyla Sıfırlandı!\",\r\n  \"successDescription\": \"Şifreniz değiştirildi. Artık yeni şifrenizle giriş yapabilirsiniz.\",\r\n  \"goToLogin\": \"Girişe Git\"\r\n}\r\n"
+      "content": "{\n  \"title\": \"Şifremi Unuttum\",\n  \"descriptionRequest\": \"E-posta adresinizi girin, size şifre sıfırlama kodu göndereceğiz.\",\n  \"descriptionReset\": \"E-postanıza gönderilen kodu ve yeni şifrenizi girin.\",\n  \"cardTitleRequest\": \"Sıfırlama Kodu İste\",\n  \"cardTitleReset\": \"Şifre Sıfırla\",\n  \"cardDescRequest\": \"Adım 1/2: Sıfırlama kodu isteyin\",\n  \"cardDescReset\": \"Adım 2/2: Kodu ve yeni şifreyi girin\",\n  \"email\": \"E-posta\",\n  \"emailPlaceholder\": \"E-posta adresinizi girin\",\n  \"code\": \"Sıfırlama Kodu\",\n  \"codePlaceholder\": \"6 haneli kodu girin\",\n  \"codeFor\": \"Sıfırlama kodu:\",\n  \"newPassword\": \"Yeni Şifre\",\n  \"newPasswordPlaceholder\": \"Yeni şifre girin\",\n  \"confirmPassword\": \"Şifre Onayı\",\n  \"confirmPasswordPlaceholder\": \"Yeni şifreyi onaylayın\",\n  \"passwordRequirements\": \"En az 8 karakter, 1 harf ve 1 rakam\",\n  \"passwordMismatch\": \"Şifreler eşleşmiyor\",\n  \"sendCode\": \"Sıfırlama Kodu Gönder\",\n  \"sending\": \"Gönderiliyor...\",\n  \"resetPassword\": \"Şifreyi Sıfırla\",\n  \"resetting\": \"Sıfırlanıyor...\",\n  \"backToLogin\": \"Girişe Dön\",\n  \"changeEmail\": \"E-posta adresini değiştir\",\n  \"resendCode\": \"Kodu tekrar gönder\",\n  \"codeSentTitle\": \"Kod Gönderildi!\",\n  \"codeSentDesc\": \"E-postanıza şifre sıfırlama kodu gönderildi.\",\n  \"errorTitle\": \"Hata\",\n  \"errorGeneric\": \"Sıfırlama kodu gönderilemedi. Lütfen tekrar deneyin.\",\n  \"errorResetGeneric\": \"Şifre sıfırlanamadı. Lütfen tekrar deneyin.\",\n  \"resetSuccessTitle\": \"Şifre Sıfırlandı!\",\n  \"resetSuccessDesc\": \"Şifreniz başarıyla sıfırlandı.\",\n  \"successTitle\": \"Şifre Başarıyla Sıfırlandı!\",\n  \"successDescription\": \"Şifreniz değiştirildi. Artık yeni şifrenizle giriş yapabilirsiniz.\",\n  \"goToLogin\": \"Girişe Git\"\n}\n"
     }
   ],
   "exports": {

package/dist/registry/google-adsense.json

@@ -10,25 +10,25 @@
       "path": "google-adsense/index.ts",
       "type": "registry:index",
       "target": "$modules$/google-adsense/index.ts",
-      "content": "export * from './google-adsense';\r\n"
+      "content": "export * from './google-adsense';\n"
     },
     {
       "path": "google-adsense/google-adsense.tsx",
       "type": "registry:component",
       "target": "$modules$/google-adsense/google-adsense.tsx",
-      "content": "import { useEffect, useRef, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ndeclare global {\r\n  interface Window {\r\n    adsbygoogle: unknown[];\r\n  }\r\n}\r\n\r\ninterface GoogleAdsenseProps {\r\n  client?: string;\r\n  slot: string;\r\n  format?: \"auto\" | \"fluid\" | \"rectangle\" | \"vertical\" | \"horizontal\";\r\n  responsive?: boolean;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n  testMode?: boolean;\r\n}\r\n\r\nconst ADSENSE_SCRIPT_ID = \"google-adsense-script\";\r\n\r\nexport function GoogleAdsense({\r\n  client,\r\n  slot,\r\n  format = \"auto\",\r\n  responsive = true,\r\n  className,\r\n  style,\r\n  testMode = false,\r\n}: GoogleAdsenseProps) {\r\n  const { t } = useTranslation(\"google-adsense\");\r\n  const adRef = useRef<HTMLModElement>(null);\r\n  const [isLoaded, setIsLoaded] = useState(false);\r\n  const [hasError, setHasError] = useState(false);\r\n\r\n  const adClient = client || import.meta.env.VITE_ADSENSE_CLIENT;\r\n  const isDev = import.meta.env.DEV;\r\n\r\n  // Load AdSense script once\r\n  useEffect(() => {\r\n    if (isDev && !testMode) return;\r\n    if (!adClient) {\r\n      setHasError(true);\r\n      return;\r\n    }\r\n\r\n    const existingScript = document.getElementById(ADSENSE_SCRIPT_ID);\r\n    if (existingScript) {\r\n      setIsLoaded(true);\r\n      return;\r\n    }\r\n\r\n    const script = document.createElement(\"script\");\r\n    script.id = ADSENSE_SCRIPT_ID;\r\n    script.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${adClient}`;\r\n    script.async = true;\r\n    script.crossOrigin = \"anonymous\";\r\n\r\n    script.onload = () => setIsLoaded(true);\r\n    script.onerror = () => setHasError(true);\r\n\r\n    document.head.appendChild(script);\r\n  }, [adClient, isDev, testMode]);\r\n\r\n  // Push ad when script is loaded\r\n  useEffect(() => {\r\n    if (!isLoaded || !adRef.current || (isDev && !testMode)) return;\r\n\r\n    const adElement = adRef.current;\r\n    if (adElement.dataset.adStatus) return; // Already initialized\r\n\r\n    try {\r\n      (window.adsbygoogle = window.adsbygoogle || []).push({});\r\n    } catch (err) {\r\n      console.error(\"AdSense error:\", err);\r\n      setHasError(true);\r\n    }\r\n  }, [isLoaded, isDev, testMode]);\r\n\r\n  // Development placeholder\r\n  if (isDev && !testMode) {\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"flex items-center justify-center bg-muted/50 border-2 border-dashed border-muted-foreground/25 rounded-lg\",\r\n          className\r\n        )}\r\n        style={{ minHeight: \"90px\", ...style }}\r\n      >\r\n        <div className=\"text-center p-4\">\r\n          <p className=\"text-sm font-medium text-muted-foreground\">\r\n            {t(\"devPlaceholder\", \"AdSense Placeholder\")}\r\n          </p>\r\n          <p className=\"text-xs text-muted-foreground/70 mt-1\">\r\n            {t(\"devNote\", \"Ads will appear in production\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Error state\r\n  if (hasError || !adClient) {\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"flex items-center justify-center bg-muted/30 rounded-lg\",\r\n          className\r\n        )}\r\n        style={{ minHeight: \"90px\", ...style }}\r\n      >\r\n        <p className=\"text-xs text-muted-foreground\">\r\n          {t(\"error\", \"Ad could not be loaded\")}\r\n        </p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <ins\r\n      ref={adRef}\r\n      className={cn(\"adsbygoogle block\", className)}\r\n      style={{ display: \"block\", minHeight: \"90px\", ...style }}\r\n      data-ad-client={adClient}\r\n      data-ad-slot={slot}\r\n      data-ad-format={format}\r\n      data-full-width-responsive={responsive ? \"true\" : \"false\"}\r\n      {...(testMode && { \"data-adtest\": \"on\" })}\r\n    />\r\n  );\r\n}\r\n"
+      "content": "import { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"@/lib/utils\";\n\ndeclare global {\n  interface Window {\n    adsbygoogle: unknown[];\n  }\n}\n\ninterface GoogleAdsenseProps {\n  client?: string;\n  slot: string;\n  format?: \"auto\" | \"fluid\" | \"rectangle\" | \"vertical\" | \"horizontal\";\n  responsive?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  testMode?: boolean;\n}\n\nconst ADSENSE_SCRIPT_ID = \"google-adsense-script\";\n\nexport function GoogleAdsense({\n  client,\n  slot,\n  format = \"auto\",\n  responsive = true,\n  className,\n  style,\n  testMode = false,\n}: GoogleAdsenseProps) {\n  const { t } = useTranslation(\"google-adsense\");\n  const adRef = useRef<HTMLModElement>(null);\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [hasError, setHasError] = useState(false);\n\n  const adClient = client || import.meta.env.VITE_ADSENSE_CLIENT;\n  const isDev = import.meta.env.DEV;\n\n  // Load AdSense script once\n  useEffect(() => {\n    if (isDev && !testMode) return;\n    if (!adClient) {\n      setHasError(true);\n      return;\n    }\n\n    const existingScript = document.getElementById(ADSENSE_SCRIPT_ID);\n    if (existingScript) {\n      setIsLoaded(true);\n      return;\n    }\n\n    const script = document.createElement(\"script\");\n    script.id = ADSENSE_SCRIPT_ID;\n    script.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${adClient}`;\n    script.async = true;\n    script.crossOrigin = \"anonymous\";\n\n    script.onload = () => setIsLoaded(true);\n    script.onerror = () => setHasError(true);\n\n    document.head.appendChild(script);\n  }, [adClient, isDev, testMode]);\n\n  // Push ad when script is loaded\n  useEffect(() => {\n    if (!isLoaded || !adRef.current || (isDev && !testMode)) return;\n\n    const adElement = adRef.current;\n    if (adElement.dataset.adStatus) return; // Already initialized\n\n    try {\n      (window.adsbygoogle = window.adsbygoogle || []).push({});\n    } catch (err) {\n      console.error(\"AdSense error:\", err);\n      setHasError(true);\n    }\n  }, [isLoaded, isDev, testMode]);\n\n  // Development placeholder\n  if (isDev && !testMode) {\n    return (\n      <div\n        className={cn(\n          \"flex items-center justify-center bg-muted/50 border-2 border-dashed border-muted-foreground/25 rounded-lg\",\n          className\n        )}\n        style={{ minHeight: \"90px\", ...style }}\n      >\n        <div className=\"text-center p-4\">\n          <p className=\"text-sm font-medium text-muted-foreground\">\n            {t(\"devPlaceholder\", \"AdSense Placeholder\")}\n          </p>\n          <p className=\"text-xs text-muted-foreground/70 mt-1\">\n            {t(\"devNote\", \"Ads will appear in production\")}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (hasError || !adClient) {\n    return (\n      <div\n        className={cn(\n          \"flex items-center justify-center bg-muted/30 rounded-lg\",\n          className\n        )}\n        style={{ minHeight: \"90px\", ...style }}\n      >\n        <p className=\"text-xs text-muted-foreground\">\n          {t(\"error\", \"Ad could not be loaded\")}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <ins\n      ref={adRef}\n      className={cn(\"adsbygoogle block\", className)}\n      style={{ display: \"block\", minHeight: \"90px\", ...style }}\n      data-ad-client={adClient}\n      data-ad-slot={slot}\n      data-ad-format={format}\n      data-full-width-responsive={responsive ? \"true\" : \"false\"}\n      {...(testMode && { \"data-adtest\": \"on\" })}\n    />\n  );\n}\n"
     },
     {
       "path": "google-adsense/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/google-adsense/lang/en.json",
-      "content": "{\r\n  \"devPlaceholder\": \"AdSense Placeholder\",\r\n  \"devNote\": \"Ads will appear in production\",\r\n  \"error\": \"Ad could not be loaded\"\r\n}\r\n"
+      "content": "{\n  \"devPlaceholder\": \"AdSense Placeholder\",\n  \"devNote\": \"Ads will appear in production\",\n  \"error\": \"Ad could not be loaded\"\n}\n"
     },
     {
       "path": "google-adsense/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/google-adsense/lang/tr.json",
-      "content": "{\r\n  \"devPlaceholder\": \"AdSense Yer Tutucusu\",\r\n  \"devNote\": \"Reklamlar production'da görünecek\",\r\n  \"error\": \"Reklam yüklenemedi\"\r\n}\r\n"
+      "content": "{\n  \"devPlaceholder\": \"AdSense Yer Tutucusu\",\n  \"devNote\": \"Reklamlar production'da görünecek\",\n  \"error\": \"Reklam yüklenemedi\"\n}\n"
     }
   ],
   "envVars": {

package/dist/registry/google-map.json

@@ -10,13 +10,13 @@
       "path": "google-map/index.ts",
       "type": "registry:index",
       "target": "$modules$/google-map/index.ts",
-      "content": "export * from './google-map';\r\n"
+      "content": "export * from './google-map';\n"
     },
     {
       "path": "google-map/google-map.tsx",
       "type": "registry:component",
       "target": "$modules$/google-map/google-map.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { MapPin } from \"lucide-react\";\r\n\r\ninterface GoogleMapProps {\r\n  latitude: number;\r\n  longitude: number;\r\n  zoom?: number;\r\n  apiKey?: string;\r\n  height?: string;\r\n  className?: string;\r\n  title?: string;\r\n}\r\n\r\nexport function GoogleMap({\r\n  latitude,\r\n  longitude,\r\n  zoom = 15,\r\n  apiKey,\r\n  height = \"400px\",\r\n  className,\r\n  title,\r\n}: GoogleMapProps) {\r\n  const [isLoading, setIsLoading] = useState(true);\r\n  const [hasError, setHasError] = useState(false);\r\n\r\n  // Build the embed URL\r\n  const buildMapUrl = () => {\r\n    const baseUrl = apiKey\r\n      ? \"https://www.google.com/maps/embed/v1/place\"\r\n      : \"https://maps.google.com/maps\";\r\n\r\n    if (apiKey) {\r\n      // With API key - use official Embed API\r\n      const params = new URLSearchParams({\r\n        key: apiKey,\r\n        q: `${latitude},${longitude}`,\r\n        zoom: zoom.toString(),\r\n      });\r\n      return `${baseUrl}?${params.toString()}`;\r\n    } else {\r\n      // Without API key - use basic embed\r\n      const params = new URLSearchParams({\r\n        q: `${latitude},${longitude}`,\r\n        z: zoom.toString(),\r\n        output: \"embed\",\r\n      });\r\n      return `${baseUrl}?${params.toString()}`;\r\n    }\r\n  };\r\n\r\n  const handleLoad = () => {\r\n    setIsLoading(false);\r\n  };\r\n\r\n  const handleError = () => {\r\n    setIsLoading(false);\r\n    setHasError(true);\r\n  };\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"flex flex-col items-center justify-center bg-muted rounded-lg border\",\r\n          className\r\n        )}\r\n        style={{ height }}\r\n      >\r\n        <MapPin className=\"h-12 w-12 text-muted-foreground mb-3\" />\r\n        <p className=\"text-sm text-muted-foreground\">Failed to load map</p>\r\n        <a\r\n          href={`https://www.google.com/maps?q=${latitude},${longitude}`}\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n          className=\"text-sm text-primary hover:underline mt-2\"\r\n        >\r\n          Open in Google Maps\r\n        </a>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cn(\"relative rounded-lg overflow-hidden border\", className)}\r\n      style={{ height }}\r\n    >\r\n      {isLoading && (\r\n        <div className=\"absolute inset-0 flex items-center justify-center bg-muted\">\r\n          <div className=\"flex flex-col items-center gap-3\">\r\n            <div className=\"h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent\" />\r\n            <span className=\"text-sm text-muted-foreground\">Loading map...</span>\r\n          </div>\r\n        </div>\r\n      )}\r\n      <iframe\r\n        src={buildMapUrl()}\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        style={{ border: 0 }}\r\n        allowFullScreen\r\n        loading=\"lazy\"\r\n        referrerPolicy=\"no-referrer-when-downgrade\"\r\n        title={title || `Map location: ${latitude}, ${longitude}`}\r\n        onLoad={handleLoad}\r\n        onError={handleError}\r\n        className={cn(isLoading && \"invisible\")}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n"
+      "content": "import { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { MapPin } from \"lucide-react\";\n\ninterface GoogleMapProps {\n  latitude: number;\n  longitude: number;\n  zoom?: number;\n  apiKey?: string;\n  height?: string;\n  className?: string;\n  title?: string;\n}\n\nexport function GoogleMap({\n  latitude,\n  longitude,\n  zoom = 15,\n  apiKey,\n  height = \"400px\",\n  className,\n  title,\n}: GoogleMapProps) {\n  const [isLoading, setIsLoading] = useState(true);\n  const [hasError, setHasError] = useState(false);\n\n  // Build the embed URL\n  const buildMapUrl = () => {\n    const baseUrl = apiKey\n      ? \"https://www.google.com/maps/embed/v1/place\"\n      : \"https://maps.google.com/maps\";\n\n    if (apiKey) {\n      // With API key - use official Embed API\n      const params = new URLSearchParams({\n        key: apiKey,\n        q: `${latitude},${longitude}`,\n        zoom: zoom.toString(),\n      });\n      return `${baseUrl}?${params.toString()}`;\n    } else {\n      // Without API key - use basic embed\n      const params = new URLSearchParams({\n        q: `${latitude},${longitude}`,\n        z: zoom.toString(),\n        output: \"embed\",\n      });\n      return `${baseUrl}?${params.toString()}`;\n    }\n  };\n\n  const handleLoad = () => {\n    setIsLoading(false);\n  };\n\n  const handleError = () => {\n    setIsLoading(false);\n    setHasError(true);\n  };\n\n  if (hasError) {\n    return (\n      <div\n        className={cn(\n          \"flex flex-col items-center justify-center bg-muted rounded-lg border\",\n          className\n        )}\n        style={{ height }}\n      >\n        <MapPin className=\"h-12 w-12 text-muted-foreground mb-3\" />\n        <p className=\"text-sm text-muted-foreground\">Failed to load map</p>\n        <a\n          href={`https://www.google.com/maps?q=${latitude},${longitude}`}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"text-sm text-primary hover:underline mt-2\"\n        >\n          Open in Google Maps\n        </a>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\"relative rounded-lg overflow-hidden border\", className)}\n      style={{ height }}\n    >\n      {isLoading && (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-muted\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent\" />\n            <span className=\"text-sm text-muted-foreground\">Loading map...</span>\n          </div>\n        </div>\n      )}\n      <iframe\n        src={buildMapUrl()}\n        width=\"100%\"\n        height=\"100%\"\n        style={{ border: 0 }}\n        allowFullScreen\n        loading=\"lazy\"\n        referrerPolicy=\"no-referrer-when-downgrade\"\n        title={title || `Map location: ${latitude}, ${longitude}`}\n        onLoad={handleLoad}\n        onError={handleError}\n        className={cn(isLoading && \"invisible\")}\n      />\n    </div>\n  );\n}\n"
     }
   ],
   "envVars": {

package/dist/registry/header-centered-pill.json

@@ -15,25 +15,25 @@
       "path": "header-centered-pill/index.ts",
       "type": "registry:index",
       "target": "$modules$/header-centered-pill/index.ts",
-      "content": "export * from './header-centered-pill';\r\n"
+      "content": "export * from './header-centered-pill';\n"
     },
     {
       "path": "header-centered-pill/header-centered-pill.tsx",
       "type": "registry:component",
       "target": "$modules$/header-centered-pill/header-centered-pill.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { Menu } from \"lucide-react\";\r\nimport { Button, buttonVariants } from \"@/components/ui/button\";\r\nimport {\r\n  Sheet,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetContent,\r\n  SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport function HeaderCenteredPill() {\r\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n  const { t } = useTranslation(\"header-centered-pill\");\r\n\r\n  const navigation = [\r\n    { name: t(\"features\", \"Features\"), href: \"/features\" },\r\n    { name: t(\"pricing\", \"Pricing\"), href: \"/pricing\" },\r\n    { name: t(\"blog\", \"Blog\"), href: \"/blog\" },\r\n    { name: t(\"company\", \"Company\"), href: \"/about\" },\r\n    { name: t(\"signIn\", \"Sign in\"), href: \"/login\" },\r\n  ];\r\n\r\n  return (\r\n    <header className=\"p-4\">\r\n      <div className=\"mx-auto flex max-w-2xl items-center justify-between space-x-4 rounded-full border bg-background p-1.5 pl-4\">\r\n        <Logo size=\"sm\" />\r\n\r\n        {/* Desktop Navigation */}\r\n        <div className=\"hidden md:inline-flex\">\r\n          {navigation.map((item) => (\r\n            <Link\r\n              key={item.name}\r\n              to={item.href}\r\n              className={buttonVariants({ variant: \"ghost\", size: \"sm\" })}\r\n            >\r\n              {item.name}\r\n            </Link>\r\n          ))}\r\n        </div>\r\n\r\n        {/* Desktop CTA */}\r\n        <div className=\"hidden md:inline-flex\">\r\n          <Link\r\n            to=\"/register\"\r\n            className={cn(buttonVariants({ size: \"sm\" }), \"rounded-full\")}\r\n          >\r\n            {t(\"getStarted\", \"Get Started\")}\r\n          </Link>\r\n        </div>\r\n\r\n        {/* Mobile Menu */}\r\n        <div className=\"md:hidden\">\r\n          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\r\n            <SheetTrigger asChild>\r\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\r\n                <Menu className=\"h-5 w-5\" />\r\n                <span className=\"sr-only\">{t(\"menu\", \"Menu\")}</span>\r\n              </Button>\r\n            </SheetTrigger>\r\n            <SheetContent side=\"right\" className=\"w-[300px] px-6\">\r\n              <SheetHeader>\r\n                <SheetTitle>{t(\"menu\", \"Menu\")}</SheetTitle>\r\n              </SheetHeader>\r\n              <div className=\"flex flex-col space-y-4 mt-8\">\r\n                {navigation.map((item) => (\r\n                  <Link\r\n                    key={item.name}\r\n                    to={item.href}\r\n                    className=\"text-lg font-medium hover:text-primary transition-colors\"\r\n                    onClick={() => setMobileMenuOpen(false)}\r\n                  >\r\n                    {item.name}\r\n                  </Link>\r\n                ))}\r\n                <Link\r\n                  to=\"/register\"\r\n                  className={cn(buttonVariants(), \"rounded-full mt-4\")}\r\n                  onClick={() => setMobileMenuOpen(false)}\r\n                >\r\n                  {t(\"getStarted\", \"Get Started\")}\r\n                </Link>\r\n              </div>\r\n            </SheetContent>\r\n          </Sheet>\r\n        </div>\r\n      </div>\r\n    </header>\r\n  );\r\n}\r\n"
+      "content": "import { useState } from \"react\";\nimport { Link } from \"react-router\";\nimport { Menu } from \"lucide-react\";\nimport { Button, buttonVariants } from \"@/components/ui/button\";\nimport {\n  Sheet,\n  SheetHeader,\n  SheetTitle,\n  SheetContent,\n  SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport { Logo } from \"@/components/Logo\";\nimport { cn } from \"@/lib/utils\";\nimport { useTranslation } from \"react-i18next\";\n\nexport function HeaderCenteredPill() {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const { t } = useTranslation(\"header-centered-pill\");\n\n  const navigation = [\n    { name: t(\"features\", \"Features\"), href: \"/features\" },\n    { name: t(\"pricing\", \"Pricing\"), href: \"/pricing\" },\n    { name: t(\"blog\", \"Blog\"), href: \"/blog\" },\n    { name: t(\"company\", \"Company\"), href: \"/about\" },\n    { name: t(\"signIn\", \"Sign in\"), href: \"/login\" },\n  ];\n\n  return (\n    <header className=\"p-4\">\n      <div className=\"mx-auto flex max-w-2xl items-center justify-between space-x-4 rounded-full border bg-background p-1.5 pl-4\">\n        <Logo size=\"sm\" />\n\n        {/* Desktop Navigation */}\n        <div className=\"hidden md:inline-flex\">\n          {navigation.map((item) => (\n            <Link\n              key={item.name}\n              to={item.href}\n              className={buttonVariants({ variant: \"ghost\", size: \"sm\" })}\n            >\n              {item.name}\n            </Link>\n          ))}\n        </div>\n\n        {/* Desktop CTA */}\n        <div className=\"hidden md:inline-flex\">\n          <Link\n            to=\"/register\"\n            className={cn(buttonVariants({ size: \"sm\" }), \"rounded-full\")}\n          >\n            {t(\"getStarted\", \"Get Started\")}\n          </Link>\n        </div>\n\n        {/* Mobile Menu */}\n        <div className=\"md:hidden\">\n          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\n            <SheetTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">{t(\"menu\", \"Menu\")}</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"right\" className=\"w-[300px] px-6\">\n              <SheetHeader>\n                <SheetTitle>{t(\"menu\", \"Menu\")}</SheetTitle>\n              </SheetHeader>\n              <div className=\"flex flex-col space-y-4 mt-8\">\n                {navigation.map((item) => (\n                  <Link\n                    key={item.name}\n                    to={item.href}\n                    className=\"text-lg font-medium hover:text-primary transition-colors\"\n                    onClick={() => setMobileMenuOpen(false)}\n                  >\n                    {item.name}\n                  </Link>\n                ))}\n                <Link\n                  to=\"/register\"\n                  className={cn(buttonVariants(), \"rounded-full mt-4\")}\n                  onClick={() => setMobileMenuOpen(false)}\n                >\n                  {t(\"getStarted\", \"Get Started\")}\n                </Link>\n              </div>\n            </SheetContent>\n          </Sheet>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
     },
     {
       "path": "header-centered-pill/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/header-centered-pill/lang/en.json",
-      "content": "{\r\n  \"menu\": \"Menu\",\r\n  \"features\": \"Features\",\r\n  \"pricing\": \"Pricing\",\r\n  \"blog\": \"Blog\",\r\n  \"company\": \"Company\",\r\n  \"signIn\": \"Sign in\",\r\n  \"getStarted\": \"Get Started\"\r\n}\r\n"
+      "content": "{\n  \"menu\": \"Menu\",\n  \"features\": \"Features\",\n  \"pricing\": \"Pricing\",\n  \"blog\": \"Blog\",\n  \"company\": \"Company\",\n  \"signIn\": \"Sign in\",\n  \"getStarted\": \"Get Started\"\n}\n"
     },
     {
       "path": "header-centered-pill/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/header-centered-pill/lang/tr.json",
-      "content": "{\r\n  \"menu\": \"Menü\",\r\n  \"features\": \"Özellikler\",\r\n  \"pricing\": \"Fiyatlandırma\",\r\n  \"blog\": \"Blog\",\r\n  \"company\": \"Şirket\",\r\n  \"signIn\": \"Giriş Yap\",\r\n  \"getStarted\": \"Başla\"\r\n}\r\n"
+      "content": "{\n  \"menu\": \"Menü\",\n  \"features\": \"Özellikler\",\n  \"pricing\": \"Fiyatlandırma\",\n  \"blog\": \"Blog\",\n  \"company\": \"Şirket\",\n  \"signIn\": \"Giriş Yap\",\n  \"getStarted\": \"Başla\"\n}\n"
     }
   ],
   "exports": {

package/dist/registry/header-ecommerce.json

@@ -14,25 +14,25 @@
       "path": "header-ecommerce/index.ts",
       "type": "registry:index",
       "target": "$modules$/header-ecommerce/index.ts",
-      "content": "export * from './header-ecommerce';\r\n"
+      "content": "export * from './header-ecommerce';\n"
     },
     {
       "path": "header-ecommerce/header-ecommerce.tsx",
       "type": "registry:component",
       "target": "$modules$/header-ecommerce/header-ecommerce.tsx",
-      "content": "import { useState, useMemo } from \"react\";\r\nimport { useDebouncedValue } from \"@/hooks/use-debounced-value\";\r\nimport { Link, useNavigate } from \"react-router\";\r\nimport { ShoppingCart, Menu, Search, Heart, Package, User, LogOut } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport {\r\n  Sheet,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetContent,\r\n  SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogHeader,\r\n  DialogTitle,\r\n  DialogTrigger,\r\n} from \"@/components/ui/dialog\";\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuLabel,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { CartDrawer } from \"@/modules/cart-drawer\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport type { Product, Category } from \"@/modules/ecommerce-core/types\";\r\nimport {\r\n  useCart,\r\n  useFavorites,\r\n  formatPrice,\r\n} from \"@/modules/ecommerce-core\";\r\nimport { useDbList } from \"@/db\";\r\n\r\nexport function HeaderEcommerce() {\r\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);\r\n  const [desktopSearchOpen, setDesktopSearchOpen] = useState(false);\r\n  const [showResults, setShowResults] = useState(false);\r\n  const { itemCount, state } = useCart();\r\n  const { favoriteCount } = useFavorites();\r\n  const { isAuthenticated, user, logout } = useAuth();\r\n  const navigate = useNavigate();\r\n  const { t } = useTranslation(\"header-ecommerce\");\r\n\r\n  const handleLogout = () => {\r\n    logout();\r\n    toast.success(t(\"logoutToastTitle\", \"Goodbye!\"), {\r\n      description: t(\"logoutToastDesc\", \"You have been logged out successfully.\"),\r\n    });\r\n  };\r\n\r\n  const [searchTerm, setSearchTerm] = useState(\"\");\r\n  const debouncedTerm = useDebouncedValue(searchTerm, 300);\r\n  const { data: productCategories = [] } = useDbList<Category>(\"product_categories\");\r\n  const categoryMap = useMemo(() => new Map(productCategories.map(c => [c.id, c])), [productCategories]);\r\n\r\n  const { data: searchResults = [] } = useDbList<Product>(\"products\", {\r\n    where: debouncedTerm ? { name: { $like: `%${debouncedTerm}%` } } : {},\r\n    limit: 20,\r\n    enabled: debouncedTerm.length > 0,\r\n  });\r\n\r\n  const clearSearch = () => { setSearchTerm(\"\"); };\r\n\r\n  const handleSearchSubmit = (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    if (searchTerm.trim()) {\r\n      navigate(`/products?search=${encodeURIComponent(searchTerm)}`);\r\n      setShowResults(false);\r\n      setDesktopSearchOpen(false);\r\n      clearSearch();\r\n    }\r\n  };\r\n\r\n  const handleSearchFocus = () => {\r\n    setShowResults(true);\r\n  };\r\n\r\n  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setSearchTerm(e.target.value);\r\n    setShowResults(true);\r\n  };\r\n\r\n  const navigation = [\r\n    { name: t(\"home\"), href: \"/\" },\r\n    { name: t(\"products\"), href: \"/products\" },\r\n    { name: t(\"about\"), href: \"/about\" },\r\n    { name: t(\"contact\"), href: \"/contact\" },\r\n  ];\r\n\r\n  return (\r\n    <header className=\"sticky top-0 z-50 w-full border-b border-border/20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-3 sm:px-4 lg:px-8\">\r\n        <div className=\"flex h-14 sm:h-16 md:h-20 items-center justify-between gap-2\">\r\n          {/* Logo */}\r\n          <div className=\"flex-shrink-0 min-w-0\">\r\n            <Logo size=\"sm\" className=\"text-base sm:text-xl lg:text-2xl\" />\r\n          </div>\r\n\r\n          {/* Desktop Navigation - Centered */}\r\n          <nav className=\"hidden lg:flex items-center space-x-12 absolute left-1/2 transform -translate-x-1/2\">\r\n            {navigation.map((item) => (\r\n              <Link\r\n                key={item.name}\r\n                to={item.href}\r\n                className=\"text-base font-medium transition-colors hover:text-primary relative group py-2\"\r\n              >\r\n                {item.name}\r\n                <span className=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full\"></span>\r\n              </Link>\r\n            ))}\r\n          </nav>\r\n\r\n          {/* Search & Actions - Right Aligned */}\r\n          <div className=\"flex items-center space-x-1 sm:space-x-2 lg:space-x-4 flex-shrink-0\">\r\n            {/* Desktop Search - Modal */}\r\n            <Dialog\r\n              open={desktopSearchOpen}\r\n              onOpenChange={setDesktopSearchOpen}\r\n            >\r\n              <DialogTrigger asChild>\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  className=\"hidden lg:flex h-10 w-10\"\r\n                >\r\n                  <Search className=\"h-5 w-5\" />\r\n                </Button>\r\n              </DialogTrigger>\r\n              <DialogContent className=\"sm:max-w-2xl\">\r\n                <DialogHeader>\r\n                  <DialogTitle>\r\n                    {t(\"searchProducts\", \"Search Products\")}\r\n                  </DialogTitle>\r\n                </DialogHeader>\r\n                <div className=\"space-y-4\">\r\n                  <form onSubmit={handleSearchSubmit}>\r\n                    <div className=\"relative\">\r\n                      <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-5 w-5\" />\r\n                      <Input\r\n                        type=\"search\"\r\n                        placeholder={t(\r\n                          \"searchPlaceholder\",\r\n                          \"Search for products...\"\r\n                        )}\r\n                        value={searchTerm}\r\n                        onChange={handleSearchChange}\r\n                        className=\"pl-11 h-12 text-base\"\r\n                        autoFocus\r\n                      />\r\n                    </div>\r\n                  </form>\r\n\r\n                  {/* Desktop Search Results */}\r\n                  {searchTerm.trim() && (\r\n                    <div className=\"max-h-[400px] overflow-y-auto rounded-lg border bg-card\">\r\n                      {searchResults.length > 0 ? (\r\n                        <div className=\"divide-y\">\r\n                          <div className=\"px-4 py-3 bg-muted/50\">\r\n                            <p className=\"text-sm font-medium text-muted-foreground\">\r\n                              {searchResults.length}{\" \"}\r\n                              {searchResults.length === 1\r\n                                ? \"result\"\r\n                                : \"results\"}{\" \"}\r\n                              found\r\n                            </p>\r\n                          </div>\r\n                          {searchResults.slice(0, 8).map((product: Product) => (\r\n                            <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                            <Link\r\n                              to={`/products/${product.slug}`}\r\n                              onClick={() => {\r\n                                setDesktopSearchOpen(false);\r\n                                clearSearch();\r\n                              }}\r\n                              className=\"flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors\"\r\n                            >\r\n                              <img\r\n                                src={\r\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-16 h-16 object-cover rounded flex-shrink-0\"\r\n                              />\r\n                              <div className=\"flex-1 min-w-0\">\r\n                                <h4 className=\"font-medium text-base line-clamp-1\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-sm text-muted-foreground capitalize\">\r\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\r\n                                </p>\r\n                                <p className=\"text-base font-semibold text-primary mt-1\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </Link>\r\n                            </div>\r\n                          ))}\r\n                          {searchResults.length > 8 && (\r\n                            <div className=\"px-4 py-3 bg-muted/30 text-center\">\r\n                              <button\r\n                                onClick={() => {\r\n                                  navigate(\r\n                                    `/products?search=${encodeURIComponent(\r\n                                      searchTerm\r\n                                    )}`\r\n                                  );\r\n                                  setDesktopSearchOpen(false);\r\n                                  clearSearch();\r\n                                }}\r\n                                className=\"text-sm font-medium text-primary hover:underline\"\r\n                              >\r\n                                {t(\r\n                                  \"viewAllResults\",\r\n                                  `View all ${searchResults.length} results`\r\n                                )}\r\n                              </button>\r\n                            </div>\r\n                          )}\r\n                        </div>\r\n                      ) : (\r\n                        <div className=\"p-8 text-center\">\r\n                          <Search className=\"h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50\" />\r\n                          <p className=\"text-base text-muted-foreground\">\r\n                            {t(\"noResults\", \"No products found\")}\r\n                          </p>\r\n                          <p className=\"text-sm text-muted-foreground mt-1\">\r\n                            {t(\r\n                              \"tryDifferentKeywords\",\r\n                              \"Try different keywords\"\r\n                            )}\r\n                          </p>\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n              </DialogContent>\r\n            </Dialog>\r\n\r\n            {/* Search - Mobile (Hidden - moved to hamburger menu) */}\r\n            <Dialog open={mobileSearchOpen} onOpenChange={setMobileSearchOpen}>\r\n              <DialogTrigger asChild>\r\n                <Button variant=\"ghost\" size=\"icon\" className=\"hidden\">\r\n                  <Search className=\"h-4 w-4 sm:h-5 sm:w-5\" />\r\n                </Button>\r\n              </DialogTrigger>\r\n              <DialogContent className=\"sm:max-w-md\">\r\n                <DialogHeader>\r\n                  <DialogTitle>{t(\"searchProducts\")}</DialogTitle>\r\n                </DialogHeader>\r\n                <form\r\n                  onSubmit={(e) => {\r\n                    e.preventDefault();\r\n                    if (searchTerm.trim()) {\r\n                      navigate(\r\n                        `/products?search=${encodeURIComponent(searchTerm)}`\r\n                      );\r\n                      setMobileSearchOpen(false);\r\n                      clearSearch();\r\n                    }\r\n                  }}\r\n                  className=\"space-y-4\"\r\n                >\r\n                  <div className=\"relative\">\r\n                    <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4\" />\r\n                    <Input\r\n                      type=\"search\"\r\n                      placeholder={t(\"searchPlaceholder\")}\r\n                      value={searchTerm}\r\n                      onChange={(e) => setSearchTerm(e.target.value)}\r\n                      className=\"pl-10\"\r\n                      autoFocus\r\n                    />\r\n                  </div>\r\n                  <div className=\"flex gap-2\">\r\n                    <Button type=\"submit\" className=\"flex-1\">\r\n                      {t(\"searchButton\", \"Search\")}\r\n                    </Button>\r\n                    <Button\r\n                      type=\"button\"\r\n                      variant=\"outline\"\r\n                      onClick={() => {\r\n                        clearSearch();\r\n                        setMobileSearchOpen(false);\r\n                      }}\r\n                    >\r\n                      {t(\"cancel\", \"Cancel\")}\r\n                    </Button>\r\n                  </div>\r\n                </form>\r\n\r\n                {/* Mobile Search Results */}\r\n                {searchTerm.trim() && (\r\n                  <div className=\"mt-4 max-h-64 overflow-y-auto\">\r\n                    {searchResults.length > 0 ? (\r\n                      <div className=\"space-y-2\">\r\n                        <p className=\"text-sm text-muted-foreground mb-2\">\r\n                          {searchResults.length} result\r\n                          {searchResults.length !== 1 ? \"s\" : \"\"} found\r\n                        </p>\r\n                        {searchResults.slice(0, 5).map((product: Product) => (\r\n                          <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                          <Link\r\n                            to={`/products/${product.slug}`}\r\n                            onClick={() => {\r\n                              setMobileSearchOpen(false);\r\n                              clearSearch();\r\n                            }}\r\n                            className=\"block p-2 rounded hover:bg-muted/50 transition-colors\"\r\n                          >\r\n                            <div className=\"flex items-center gap-3\">\r\n                              <img\r\n                                src={\r\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-10 h-10 object-cover rounded\"\r\n                              />\r\n                              <div className=\"flex-1\">\r\n                                <h4 className=\"font-medium text-sm\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-xs text-muted-foreground\">\r\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\r\n                                </p>\r\n                                <p className=\"text-sm font-medium\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </div>\r\n                          </Link>\r\n                          </div>\r\n                        ))}\r\n                      </div>\r\n                    ) : (\r\n                      <p className=\"text-sm text-muted-foreground\">\r\n                        {t(\"noResults\")}\r\n                      </p>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </DialogContent>\r\n            </Dialog>\r\n\r\n            {/* Wishlist - Desktop Only */}\r\n            <Link to=\"/favorites\" className=\"hidden lg:block\">\r\n              <Button\r\n                variant=\"ghost\"\r\n                size=\"icon\"\r\n                className=\"relative h-10 w-10\"\r\n              >\r\n                <Heart className=\"h-5 w-5\" />\r\n                {favoriteCount > 0 && (\r\n                  <Badge\r\n                    variant=\"destructive\"\r\n                    className=\"absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]\"\r\n                  >\r\n                    {favoriteCount}\r\n                  </Badge>\r\n                )}\r\n              </Button>\r\n            </Link>\r\n\r\n            {/* Cart - Desktop Only (Goes to Cart Page) */}\r\n            <Link to=\"/cart\" className=\"hidden lg:block\">\r\n              <Button\r\n                variant=\"ghost\"\r\n                size=\"icon\"\r\n                className=\"relative h-10 w-10\"\r\n              >\r\n                <ShoppingCart className=\"h-5 w-5\" />\r\n                {itemCount > 0 && (\r\n                  <Badge\r\n                    variant=\"destructive\"\r\n                    className=\"absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]\"\r\n                  >\r\n                    {itemCount}\r\n                  </Badge>\r\n                )}\r\n              </Button>\r\n            </Link>\r\n\r\n            {/* Auth - Desktop Only */}\r\n            <div className=\"hidden lg:flex\">\r\n              {isAuthenticated ? (\r\n                <DropdownMenu>\r\n                  <DropdownMenuTrigger asChild>\r\n                    <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\r\n                      <User className=\"h-5 w-5\" />\r\n                    </Button>\r\n                  </DropdownMenuTrigger>\r\n                  <DropdownMenuContent align=\"end\" className=\"w-56\">\r\n                    <DropdownMenuLabel className=\"font-normal\">\r\n                      <div className=\"flex flex-col space-y-1\">\r\n                        <p className=\"text-sm font-medium\">{user?.username}</p>\r\n                        {user?.email && (\r\n                          <p className=\"text-xs text-muted-foreground\">{user.email}</p>\r\n                        )}\r\n                      </div>\r\n                    </DropdownMenuLabel>\r\n                    <DropdownMenuSeparator />\r\n                    <DropdownMenuItem asChild className=\"cursor-pointer\">\r\n                      <Link to=\"/my-orders\" className=\"flex items-center\">\r\n                        <Package className=\"mr-2 h-4 w-4\" />\r\n                        {t(\"myOrders\", \"My Orders\")}\r\n                      </Link>\r\n                    </DropdownMenuItem>\r\n                    <DropdownMenuSeparator />\r\n                    <DropdownMenuItem\r\n                      onClick={handleLogout}\r\n                      className=\"text-red-600 focus:text-red-600 focus:bg-red-50 cursor-pointer\"\r\n                    >\r\n                      <LogOut className=\"mr-2 h-4 w-4\" />\r\n                      {t(\"logout\", \"Logout\")}\r\n                    </DropdownMenuItem>\r\n                  </DropdownMenuContent>\r\n                </DropdownMenu>\r\n              ) : (\r\n                <Link to=\"/login\">\r\n                  <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\r\n                    <User className=\"h-5 w-5\" />\r\n                  </Button>\r\n                </Link>\r\n              )}\r\n            </div>\r\n\r\n            {/* Mobile Menu */}\r\n            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\r\n              <SheetTrigger asChild>\r\n                <Button\r\n                  variant=\"ghost\"\r\n                  size=\"icon\"\r\n                  className=\"lg:hidden h-8 w-8 sm:h-10 sm:w-10\"\r\n                >\r\n                  <Menu className=\"h-4 w-4 sm:h-5 sm:w-5\" />\r\n                </Button>\r\n              </SheetTrigger>\r\n              <SheetContent side=\"right\" className=\"w-[300px] sm:w-[400px] px-6\">\r\n                <SheetHeader>\r\n                  <SheetTitle>{t(\"menu\")}</SheetTitle>\r\n                </SheetHeader>\r\n\r\n                {/* Mobile Search in Hamburger */}\r\n                <div className=\"mt-6 pb-4 border-b\">\r\n                  <form onSubmit={handleSearchSubmit}>\r\n                    <div className=\"relative\">\r\n                      <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4\" />\r\n                      <Input\r\n                        type=\"search\"\r\n                        placeholder={t(\"searchPlaceholder\")}\r\n                        value={searchTerm}\r\n                        onChange={handleSearchChange}\r\n                        onFocus={handleSearchFocus}\r\n                        className=\"pl-10 h-11\"\r\n                      />\r\n                    </div>\r\n                  </form>\r\n\r\n                  {/* Search Results in Hamburger */}\r\n                  {showResults && searchTerm && (\r\n                    <div className=\"mt-3 max-h-[300px] overflow-y-auto rounded-lg border bg-card\">\r\n                      {searchResults.length > 0 ? (\r\n                        <div className=\"divide-y\">\r\n                          <div className=\"px-3 py-2 bg-muted/50\">\r\n                            <p className=\"text-xs font-medium text-muted-foreground\">\r\n                              {searchResults.length}{\" \"}\r\n                              {searchResults.length === 1\r\n                                ? \"result\"\r\n                                : \"results\"}\r\n                            </p>\r\n                          </div>\r\n                          {searchResults.slice(0, 5).map((product: Product) => (\r\n                            <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\r\n                            <Link\r\n                              to={`/products/${product.slug}`}\r\n                              onClick={() => {\r\n                                setMobileMenuOpen(false);\r\n                                clearSearch();\r\n                                setShowResults(false);\r\n                              }}\r\n                              className=\"flex items-center gap-3 p-3 hover:bg-muted/50 transition-colors\"\r\n                            >\r\n                              <img\r\n                                src={\r\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\r\n                                }\r\n                                alt={product.name}\r\n                                className=\"w-14 h-14 object-cover rounded flex-shrink-0\"\r\n                              />\r\n                              <div className=\"flex-1 min-w-0\">\r\n                                <h4 className=\"font-medium text-sm line-clamp-1\">\r\n                                  {product.name}\r\n                                </h4>\r\n                                <p className=\"text-xs text-muted-foreground capitalize\">\r\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\r\n                                </p>\r\n                                <p className=\"text-sm font-semibold text-primary mt-1\">\r\n                                  {formatPrice(\r\n                                    product.price,\r\n                                    constants.site.currency\r\n                                  )}\r\n                                </p>\r\n                              </div>\r\n                            </Link>\r\n                            </div>\r\n                          ))}\r\n                          {searchResults.length > 5 && (\r\n                            <div className=\"px-3 py-2 bg-muted/30 text-center\">\r\n                              <button\r\n                                onClick={() => {\r\n                                  navigate(\r\n                                    `/products?search=${encodeURIComponent(\r\n                                      searchTerm\r\n                                    )}`\r\n                                  );\r\n                                  setMobileMenuOpen(false);\r\n                                  clearSearch();\r\n                                  setShowResults(false);\r\n                                }}\r\n                                className=\"text-xs font-medium text-primary hover:underline\"\r\n                              >\r\n                                {t(\r\n                                  \"viewAllResults\",\r\n                                  `View all ${searchResults.length} results`\r\n                                )}\r\n                              </button>\r\n                            </div>\r\n                          )}\r\n                        </div>\r\n                      ) : (\r\n                        <div className=\"p-6 text-center\">\r\n                          <Search className=\"h-8 w-8 text-muted-foreground mx-auto mb-2 opacity-50\" />\r\n                          <p className=\"text-sm text-muted-foreground\">\r\n                            {t(\"noResults\", \"No results found\")}\r\n                          </p>\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n\r\n                <div className=\"flex flex-col space-y-4 mt-6\">\r\n                  {navigation.map((item) => (\r\n                    <Link\r\n                      key={item.name}\r\n                      to={item.href}\r\n                      className=\"text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      {item.name}\r\n                    </Link>\r\n                  ))}\r\n                  <div className=\"border-t pt-4 space-y-4\">\r\n                    <Link\r\n                      to=\"/favorites\"\r\n                      className=\"flex items-center justify-between text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      <div className=\"flex items-center space-x-2\">\r\n                        <Heart className=\"h-5 w-5\" />\r\n                        <span>{t(\"favorites\")}</span>\r\n                      </div>\r\n                      <Badge variant=\"secondary\">{favoriteCount}</Badge>\r\n                    </Link>\r\n                    <Link\r\n                      to=\"/cart\"\r\n                      className=\"flex items-center justify-between w-full text-lg font-medium hover:text-primary transition-colors\"\r\n                      onClick={() => setMobileMenuOpen(false)}\r\n                    >\r\n                      <div className=\"flex items-center space-x-2\">\r\n                        <ShoppingCart className=\"h-5 w-5\" />\r\n                        <span>{t(\"cart\")}</span>\r\n                      </div>\r\n                      <div className=\"flex flex-col items-end\">\r\n                        <Badge variant=\"secondary\">{itemCount}</Badge>\r\n                        <span className=\"text-xs text-muted-foreground\">\r\n                          {formatPrice(state.total, constants.site.currency)}\r\n                        </span>\r\n                      </div>\r\n                    </Link>\r\n\r\n                    {/* Auth - Mobile */}\r\n                    {isAuthenticated ? (\r\n                      <div className=\"space-y-3\">\r\n                        <div className=\"flex items-center space-x-3 p-3 bg-muted/50 rounded-lg\">\r\n                          <div className=\"h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                            <User className=\"h-5 w-5 text-primary\" />\r\n                          </div>\r\n                          <div className=\"flex-1 min-w-0\">\r\n                            <p className=\"text-sm font-medium truncate\">{user?.username}</p>\r\n                            {user?.email && (\r\n                              <p className=\"text-xs text-muted-foreground truncate\">{user.email}</p>\r\n                            )}\r\n                          </div>\r\n                        </div>\r\n                        <Link\r\n                          to=\"/my-orders\"\r\n                          className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\r\n                          onClick={() => setMobileMenuOpen(false)}\r\n                        >\r\n                          <Package className=\"h-5 w-5\" />\r\n                          <span>{t(\"myOrders\", \"My Orders\")}</span>\r\n                        </Link>\r\n                        <button\r\n                          onClick={() => {\r\n                            handleLogout();\r\n                            setMobileMenuOpen(false);\r\n                          }}\r\n                          className=\"flex items-center space-x-2 text-lg font-medium text-red-600 hover:text-red-700 transition-colors w-full\"\r\n                        >\r\n                          <LogOut className=\"h-5 w-5\" />\r\n                          <span>{t(\"logout\", \"Logout\")}</span>\r\n                        </button>\r\n                      </div>\r\n                    ) : (\r\n                      <Link\r\n                        to=\"/login\"\r\n                        className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\r\n                        onClick={() => setMobileMenuOpen(false)}\r\n                      >\r\n                        <User className=\"h-5 w-5\" />\r\n                        <span>{t(\"login\", \"Login\")}</span>\r\n                      </Link>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              </SheetContent>\r\n            </Sheet>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {/* Cart Drawer */}\r\n      <CartDrawer showTrigger={false} />\r\n    </header>\r\n  );\r\n}\r\n"
+      "content": "import { useState, useMemo } from \"react\";\nimport { useDebouncedValue } from \"@/hooks/use-debounced-value\";\nimport { Link, useNavigate } from \"react-router\";\nimport { ShoppingCart, Menu, Search, Heart, Package, User, LogOut } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Sheet,\n  SheetHeader,\n  SheetTitle,\n  SheetContent,\n  SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Logo } from \"@/components/Logo\";\nimport { useAuth } from \"@/modules/auth-core\";\nimport { CartDrawer } from \"@/modules/cart-drawer\";\nimport { toast } from \"sonner\";\nimport { useTranslation } from \"react-i18next\";\nimport constants from \"@/constants/constants.json\";\nimport type { Product, Category } from \"@/modules/ecommerce-core/types\";\nimport {\n  useCart,\n  useFavorites,\n  formatPrice,\n} from \"@/modules/ecommerce-core\";\nimport { useDbList } from \"@/db\";\n\nexport function HeaderEcommerce() {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);\n  const [desktopSearchOpen, setDesktopSearchOpen] = useState(false);\n  const [showResults, setShowResults] = useState(false);\n  const { itemCount, state } = useCart();\n  const { favoriteCount } = useFavorites();\n  const { isAuthenticated, user, logout } = useAuth();\n  const navigate = useNavigate();\n  const { t } = useTranslation(\"header-ecommerce\");\n\n  const handleLogout = () => {\n    logout();\n    toast.success(t(\"logoutToastTitle\", \"Goodbye!\"), {\n      description: t(\"logoutToastDesc\", \"You have been logged out successfully.\"),\n    });\n  };\n\n  const [searchTerm, setSearchTerm] = useState(\"\");\n  const debouncedTerm = useDebouncedValue(searchTerm, 300);\n  const { data: productCategories = [] } = useDbList<Category>(\"product_categories\");\n  const categoryMap = useMemo(() => new Map(productCategories.map(c => [c.id, c])), [productCategories]);\n\n  const { data: searchResults = [] } = useDbList<Product>(\"products\", {\n    where: debouncedTerm ? { name: { $like: `%${debouncedTerm}%` } } : {},\n    limit: 20,\n    enabled: debouncedTerm.length > 0,\n  });\n\n  const clearSearch = () => { setSearchTerm(\"\"); };\n\n  const handleSearchSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (searchTerm.trim()) {\n      navigate(`/products?search=${encodeURIComponent(searchTerm)}`);\n      setShowResults(false);\n      setDesktopSearchOpen(false);\n      clearSearch();\n    }\n  };\n\n  const handleSearchFocus = () => {\n    setShowResults(true);\n  };\n\n  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setSearchTerm(e.target.value);\n    setShowResults(true);\n  };\n\n  const navigation = [\n    { name: t(\"home\"), href: \"/\" },\n    { name: t(\"products\"), href: \"/products\" },\n    { name: t(\"about\"), href: \"/about\" },\n    { name: t(\"contact\"), href: \"/contact\" },\n  ];\n\n  return (\n    <header className=\"sticky top-0 z-50 w-full border-b border-border/20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-3 sm:px-4 lg:px-8\">\n        <div className=\"flex h-14 sm:h-16 md:h-20 items-center justify-between gap-2\">\n          {/* Logo */}\n          <div className=\"flex-shrink-0 min-w-0\">\n            <Logo size=\"sm\" className=\"text-base sm:text-xl lg:text-2xl\" />\n          </div>\n\n          {/* Desktop Navigation - Centered */}\n          <nav className=\"hidden lg:flex items-center space-x-12 absolute left-1/2 transform -translate-x-1/2\">\n            {navigation.map((item) => (\n              <Link\n                key={item.name}\n                to={item.href}\n                className=\"text-base font-medium transition-colors hover:text-primary relative group py-2\"\n              >\n                {item.name}\n                <span className=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full\"></span>\n              </Link>\n            ))}\n          </nav>\n\n          {/* Search & Actions - Right Aligned */}\n          <div className=\"flex items-center space-x-1 sm:space-x-2 lg:space-x-4 flex-shrink-0\">\n            {/* Desktop Search - Modal */}\n            <Dialog\n              open={desktopSearchOpen}\n              onOpenChange={setDesktopSearchOpen}\n            >\n              <DialogTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"hidden lg:flex h-10 w-10\"\n                >\n                  <Search className=\"h-5 w-5\" />\n                </Button>\n              </DialogTrigger>\n              <DialogContent className=\"sm:max-w-2xl\">\n                <DialogHeader>\n                  <DialogTitle>\n                    {t(\"searchProducts\", \"Search Products\")}\n                  </DialogTitle>\n                </DialogHeader>\n                <div className=\"space-y-4\">\n                  <form onSubmit={handleSearchSubmit}>\n                    <div className=\"relative\">\n                      <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-5 w-5\" />\n                      <Input\n                        type=\"search\"\n                        placeholder={t(\n                          \"searchPlaceholder\",\n                          \"Search for products...\"\n                        )}\n                        value={searchTerm}\n                        onChange={handleSearchChange}\n                        className=\"pl-11 h-12 text-base\"\n                        autoFocus\n                      />\n                    </div>\n                  </form>\n\n                  {/* Desktop Search Results */}\n                  {searchTerm.trim() && (\n                    <div className=\"max-h-[400px] overflow-y-auto rounded-lg border bg-card\">\n                      {searchResults.length > 0 ? (\n                        <div className=\"divide-y\">\n                          <div className=\"px-4 py-3 bg-muted/50\">\n                            <p className=\"text-sm font-medium text-muted-foreground\">\n                              {searchResults.length}{\" \"}\n                              {searchResults.length === 1\n                                ? \"result\"\n                                : \"results\"}{\" \"}\n                              found\n                            </p>\n                          </div>\n                          {searchResults.slice(0, 8).map((product: Product) => (\n                            <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\n                            <Link\n                              to={`/products/${product.slug}`}\n                              onClick={() => {\n                                setDesktopSearchOpen(false);\n                                clearSearch();\n                              }}\n                              className=\"flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors\"\n                            >\n                              <img\n                                src={\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\n                                }\n                                alt={product.name}\n                                className=\"w-16 h-16 object-cover rounded flex-shrink-0\"\n                              />\n                              <div className=\"flex-1 min-w-0\">\n                                <h4 className=\"font-medium text-base line-clamp-1\">\n                                  {product.name}\n                                </h4>\n                                <p className=\"text-sm text-muted-foreground capitalize\">\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\n                                </p>\n                                <p className=\"text-base font-semibold text-primary mt-1\">\n                                  {formatPrice(\n                                    product.price,\n                                    constants.site.currency\n                                  )}\n                                </p>\n                              </div>\n                            </Link>\n                            </div>\n                          ))}\n                          {searchResults.length > 8 && (\n                            <div className=\"px-4 py-3 bg-muted/30 text-center\">\n                              <button\n                                onClick={() => {\n                                  navigate(\n                                    `/products?search=${encodeURIComponent(\n                                      searchTerm\n                                    )}`\n                                  );\n                                  setDesktopSearchOpen(false);\n                                  clearSearch();\n                                }}\n                                className=\"text-sm font-medium text-primary hover:underline\"\n                              >\n                                {t(\n                                  \"viewAllResults\",\n                                  `View all ${searchResults.length} results`\n                                )}\n                              </button>\n                            </div>\n                          )}\n                        </div>\n                      ) : (\n                        <div className=\"p-8 text-center\">\n                          <Search className=\"h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50\" />\n                          <p className=\"text-base text-muted-foreground\">\n                            {t(\"noResults\", \"No products found\")}\n                          </p>\n                          <p className=\"text-sm text-muted-foreground mt-1\">\n                            {t(\n                              \"tryDifferentKeywords\",\n                              \"Try different keywords\"\n                            )}\n                          </p>\n                        </div>\n                      )}\n                    </div>\n                  )}\n                </div>\n              </DialogContent>\n            </Dialog>\n\n            {/* Search - Mobile (Hidden - moved to hamburger menu) */}\n            <Dialog open={mobileSearchOpen} onOpenChange={setMobileSearchOpen}>\n              <DialogTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\" className=\"hidden\">\n                  <Search className=\"h-4 w-4 sm:h-5 sm:w-5\" />\n                </Button>\n              </DialogTrigger>\n              <DialogContent className=\"sm:max-w-md\">\n                <DialogHeader>\n                  <DialogTitle>{t(\"searchProducts\")}</DialogTitle>\n                </DialogHeader>\n                <form\n                  onSubmit={(e) => {\n                    e.preventDefault();\n                    if (searchTerm.trim()) {\n                      navigate(\n                        `/products?search=${encodeURIComponent(searchTerm)}`\n                      );\n                      setMobileSearchOpen(false);\n                      clearSearch();\n                    }\n                  }}\n                  className=\"space-y-4\"\n                >\n                  <div className=\"relative\">\n                    <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4\" />\n                    <Input\n                      type=\"search\"\n                      placeholder={t(\"searchPlaceholder\")}\n                      value={searchTerm}\n                      onChange={(e) => setSearchTerm(e.target.value)}\n                      className=\"pl-10\"\n                      autoFocus\n                    />\n                  </div>\n                  <div className=\"flex gap-2\">\n                    <Button type=\"submit\" className=\"flex-1\">\n                      {t(\"searchButton\", \"Search\")}\n                    </Button>\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      onClick={() => {\n                        clearSearch();\n                        setMobileSearchOpen(false);\n                      }}\n                    >\n                      {t(\"cancel\", \"Cancel\")}\n                    </Button>\n                  </div>\n                </form>\n\n                {/* Mobile Search Results */}\n                {searchTerm.trim() && (\n                  <div className=\"mt-4 max-h-64 overflow-y-auto\">\n                    {searchResults.length > 0 ? (\n                      <div className=\"space-y-2\">\n                        <p className=\"text-sm text-muted-foreground mb-2\">\n                          {searchResults.length} result\n                          {searchResults.length !== 1 ? \"s\" : \"\"} found\n                        </p>\n                        {searchResults.slice(0, 5).map((product: Product) => (\n                          <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\n                          <Link\n                            to={`/products/${product.slug}`}\n                            onClick={() => {\n                              setMobileSearchOpen(false);\n                              clearSearch();\n                            }}\n                            className=\"block p-2 rounded hover:bg-muted/50 transition-colors\"\n                          >\n                            <div className=\"flex items-center gap-3\">\n                              <img\n                                src={\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\n                                }\n                                alt={product.name}\n                                className=\"w-10 h-10 object-cover rounded\"\n                              />\n                              <div className=\"flex-1\">\n                                <h4 className=\"font-medium text-sm\">\n                                  {product.name}\n                                </h4>\n                                <p className=\"text-xs text-muted-foreground\">\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\n                                </p>\n                                <p className=\"text-sm font-medium\">\n                                  {formatPrice(\n                                    product.price,\n                                    constants.site.currency\n                                  )}\n                                </p>\n                              </div>\n                            </div>\n                          </Link>\n                          </div>\n                        ))}\n                      </div>\n                    ) : (\n                      <p className=\"text-sm text-muted-foreground\">\n                        {t(\"noResults\")}\n                      </p>\n                    )}\n                  </div>\n                )}\n              </DialogContent>\n            </Dialog>\n\n            {/* Wishlist - Desktop Only */}\n            <Link to=\"/favorites\" className=\"hidden lg:block\">\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"relative h-10 w-10\"\n              >\n                <Heart className=\"h-5 w-5\" />\n                {favoriteCount > 0 && (\n                  <Badge\n                    variant=\"destructive\"\n                    className=\"absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]\"\n                  >\n                    {favoriteCount}\n                  </Badge>\n                )}\n              </Button>\n            </Link>\n\n            {/* Cart - Desktop Only (Goes to Cart Page) */}\n            <Link to=\"/cart\" className=\"hidden lg:block\">\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"relative h-10 w-10\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                {itemCount > 0 && (\n                  <Badge\n                    variant=\"destructive\"\n                    className=\"absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]\"\n                  >\n                    {itemCount}\n                  </Badge>\n                )}\n              </Button>\n            </Link>\n\n            {/* Auth - Desktop Only */}\n            <div className=\"hidden lg:flex\">\n              {isAuthenticated ? (\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                    <DropdownMenuItem asChild className=\"cursor-pointer\">\n                      <Link to=\"/my-orders\" className=\"flex items-center\">\n                        <Package className=\"mr-2 h-4 w-4\" />\n                        {t(\"myOrders\", \"My Orders\")}\n                      </Link>\n                    </DropdownMenuItem>\n                    <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                <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            </div>\n\n            {/* Mobile Menu */}\n            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\n              <SheetTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"lg:hidden h-8 w-8 sm:h-10 sm:w-10\"\n                >\n                  <Menu className=\"h-4 w-4 sm:h-5 sm:w-5\" />\n                </Button>\n              </SheetTrigger>\n              <SheetContent side=\"right\" className=\"w-[300px] sm:w-[400px] px-6\">\n                <SheetHeader>\n                  <SheetTitle>{t(\"menu\")}</SheetTitle>\n                </SheetHeader>\n\n                {/* Mobile Search in Hamburger */}\n                <div className=\"mt-6 pb-4 border-b\">\n                  <form onSubmit={handleSearchSubmit}>\n                    <div className=\"relative\">\n                      <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4\" />\n                      <Input\n                        type=\"search\"\n                        placeholder={t(\"searchPlaceholder\")}\n                        value={searchTerm}\n                        onChange={handleSearchChange}\n                        onFocus={handleSearchFocus}\n                        className=\"pl-10 h-11\"\n                      />\n                    </div>\n                  </form>\n\n                  {/* Search Results in Hamburger */}\n                  {showResults && searchTerm && (\n                    <div className=\"mt-3 max-h-[300px] overflow-y-auto rounded-lg border bg-card\">\n                      {searchResults.length > 0 ? (\n                        <div className=\"divide-y\">\n                          <div className=\"px-3 py-2 bg-muted/50\">\n                            <p className=\"text-xs font-medium text-muted-foreground\">\n                              {searchResults.length}{\" \"}\n                              {searchResults.length === 1\n                                ? \"result\"\n                                : \"results\"}\n                            </p>\n                          </div>\n                          {searchResults.slice(0, 5).map((product: Product) => (\n                            <div key={product.id} className=\"contents\" data-db-table=\"products\" data-db-id={product.id}>\n                            <Link\n                              to={`/products/${product.slug}`}\n                              onClick={() => {\n                                setMobileMenuOpen(false);\n                                clearSearch();\n                                setShowResults(false);\n                              }}\n                              className=\"flex items-center gap-3 p-3 hover:bg-muted/50 transition-colors\"\n                            >\n                              <img\n                                src={\n                                  product.images?.length ? product.images?.[0] : \"/images/placeholder.png\"\n                                }\n                                alt={product.name}\n                                className=\"w-14 h-14 object-cover rounded flex-shrink-0\"\n                              />\n                              <div className=\"flex-1 min-w-0\">\n                                <h4 className=\"font-medium text-sm line-clamp-1\">\n                                  {product.name}\n                                </h4>\n                                <p className=\"text-xs text-muted-foreground capitalize\">\n                                  {categoryMap.get(product.categories?.[0] as number)?.name}\n                                </p>\n                                <p className=\"text-sm font-semibold text-primary mt-1\">\n                                  {formatPrice(\n                                    product.price,\n                                    constants.site.currency\n                                  )}\n                                </p>\n                              </div>\n                            </Link>\n                            </div>\n                          ))}\n                          {searchResults.length > 5 && (\n                            <div className=\"px-3 py-2 bg-muted/30 text-center\">\n                              <button\n                                onClick={() => {\n                                  navigate(\n                                    `/products?search=${encodeURIComponent(\n                                      searchTerm\n                                    )}`\n                                  );\n                                  setMobileMenuOpen(false);\n                                  clearSearch();\n                                  setShowResults(false);\n                                }}\n                                className=\"text-xs font-medium text-primary hover:underline\"\n                              >\n                                {t(\n                                  \"viewAllResults\",\n                                  `View all ${searchResults.length} results`\n                                )}\n                              </button>\n                            </div>\n                          )}\n                        </div>\n                      ) : (\n                        <div className=\"p-6 text-center\">\n                          <Search className=\"h-8 w-8 text-muted-foreground mx-auto mb-2 opacity-50\" />\n                          <p className=\"text-sm text-muted-foreground\">\n                            {t(\"noResults\", \"No results found\")}\n                          </p>\n                        </div>\n                      )}\n                    </div>\n                  )}\n                </div>\n\n                <div className=\"flex flex-col space-y-4 mt-6\">\n                  {navigation.map((item) => (\n                    <Link\n                      key={item.name}\n                      to={item.href}\n                      className=\"text-lg font-medium hover:text-primary transition-colors\"\n                      onClick={() => setMobileMenuOpen(false)}\n                    >\n                      {item.name}\n                    </Link>\n                  ))}\n                  <div className=\"border-t pt-4 space-y-4\">\n                    <Link\n                      to=\"/favorites\"\n                      className=\"flex items-center justify-between text-lg font-medium hover:text-primary transition-colors\"\n                      onClick={() => setMobileMenuOpen(false)}\n                    >\n                      <div className=\"flex items-center space-x-2\">\n                        <Heart className=\"h-5 w-5\" />\n                        <span>{t(\"favorites\")}</span>\n                      </div>\n                      <Badge variant=\"secondary\">{favoriteCount}</Badge>\n                    </Link>\n                    <Link\n                      to=\"/cart\"\n                      className=\"flex items-center justify-between w-full text-lg font-medium hover:text-primary transition-colors\"\n                      onClick={() => setMobileMenuOpen(false)}\n                    >\n                      <div className=\"flex items-center space-x-2\">\n                        <ShoppingCart className=\"h-5 w-5\" />\n                        <span>{t(\"cart\")}</span>\n                      </div>\n                      <div className=\"flex flex-col items-end\">\n                        <Badge variant=\"secondary\">{itemCount}</Badge>\n                        <span className=\"text-xs text-muted-foreground\">\n                          {formatPrice(state.total, constants.site.currency)}\n                        </span>\n                      </div>\n                    </Link>\n\n                    {/* Auth - Mobile */}\n                    {isAuthenticated ? (\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\">{user.email}</p>\n                            )}\n                          </div>\n                        </div>\n                        <Link\n                          to=\"/my-orders\"\n                          className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\n                          onClick={() => setMobileMenuOpen(false)}\n                        >\n                          <Package className=\"h-5 w-5\" />\n                          <span>{t(\"myOrders\", \"My Orders\")}</span>\n                        </Link>\n                        <button\n                          onClick={() => {\n                            handleLogout();\n                            setMobileMenuOpen(false);\n                          }}\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                      <Link\n                        to=\"/login\"\n                        className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\n                        onClick={() => setMobileMenuOpen(false)}\n                      >\n                        <User className=\"h-5 w-5\" />\n                        <span>{t(\"login\", \"Login\")}</span>\n                      </Link>\n                    )}\n                  </div>\n                </div>\n              </SheetContent>\n            </Sheet>\n          </div>\n        </div>\n      </div>\n      {/* Cart Drawer */}\n      <CartDrawer showTrigger={false} />\n    </header>\n  );\n}\n"
     },
     {
       "path": "header-ecommerce/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/header-ecommerce/lang/en.json",
-      "content": "{\r\n  \"menu\": \"Menu\",\r\n  \"home\": \"Home\",\r\n  \"products\": \"Products\",\r\n  \"about\": \"About\",\r\n  \"contact\": \"Contact\",\r\n  \"cart\": \"Cart\",\r\n  \"favorites\": \"Favorites\",\r\n  \"searchProducts\": \"Search Products\",\r\n  \"searchPlaceholder\": \"Search for products...\",\r\n  \"searchButton\": \"Search\",\r\n  \"result\": \"result\",\r\n  \"results\": \"results\",\r\n  \"noResults\": \"No products found\",\r\n  \"tryDifferent\": \"Try different keywords\",\r\n  \"viewAllResults\": \"View all results\",\r\n  \"logoutToastTitle\": \"Goodbye!\",\r\n  \"logoutToastDesc\": \"You have been logged out successfully.\",\r\n  \"tryDifferentKeywords\": \"Try different keywords\",\r\n  \"cancel\": \"Cancel\",\r\n  \"myOrders\": \"My Orders\",\r\n  \"logout\": \"Logout\",\r\n  \"login\": \"Login\"\r\n}\r\n"
+      "content": "{\n  \"menu\": \"Menu\",\n  \"home\": \"Home\",\n  \"products\": \"Products\",\n  \"about\": \"About\",\n  \"contact\": \"Contact\",\n  \"cart\": \"Cart\",\n  \"favorites\": \"Favorites\",\n  \"searchProducts\": \"Search Products\",\n  \"searchPlaceholder\": \"Search for products...\",\n  \"searchButton\": \"Search\",\n  \"result\": \"result\",\n  \"results\": \"results\",\n  \"noResults\": \"No products found\",\n  \"tryDifferent\": \"Try different keywords\",\n  \"viewAllResults\": \"View all results\",\n  \"logoutToastTitle\": \"Goodbye!\",\n  \"logoutToastDesc\": \"You have been logged out successfully.\",\n  \"tryDifferentKeywords\": \"Try different keywords\",\n  \"cancel\": \"Cancel\",\n  \"myOrders\": \"My Orders\",\n  \"logout\": \"Logout\",\n  \"login\": \"Login\"\n}\n"
     },
     {
       "path": "header-ecommerce/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/header-ecommerce/lang/tr.json",
-      "content": "{\r\n  \"menu\": \"Menü\",\r\n  \"home\": \"Ana Sayfa\",\r\n  \"products\": \"Ürünler\",\r\n  \"about\": \"Hakkımızda\",\r\n  \"contact\": \"İletişim\",\r\n  \"cart\": \"Sepet\",\r\n  \"favorites\": \"Favoriler\",\r\n  \"searchProducts\": \"Ürün Ara\",\r\n  \"searchPlaceholder\": \"Ürün ara...\",\r\n  \"searchButton\": \"Ara\",\r\n  \"result\": \"sonuç\",\r\n  \"results\": \"sonuç\",\r\n  \"noResults\": \"Ürün bulunamadı\",\r\n  \"tryDifferent\": \"Farklı anahtar kelimeler deneyin\",\r\n  \"viewAllResults\": \"Tüm sonuçları gör\",\r\n  \"logoutToastTitle\": \"Hoşça kal!\",\r\n  \"logoutToastDesc\": \"Başarıyla çıkış yaptınız.\",\r\n  \"tryDifferentKeywords\": \"Farklı anahtar kelimeler deneyin\",\r\n  \"cancel\": \"İptal\",\r\n  \"myOrders\": \"Siparişlerim\",\r\n  \"logout\": \"Çıkış Yap\",\r\n  \"login\": \"Giriş Yap\"\r\n}\r\n"
+      "content": "{\n  \"menu\": \"Menü\",\n  \"home\": \"Ana Sayfa\",\n  \"products\": \"Ürünler\",\n  \"about\": \"Hakkımızda\",\n  \"contact\": \"İletişim\",\n  \"cart\": \"Sepet\",\n  \"favorites\": \"Favoriler\",\n  \"searchProducts\": \"Ürün Ara\",\n  \"searchPlaceholder\": \"Ürün ara...\",\n  \"searchButton\": \"Ara\",\n  \"result\": \"sonuç\",\n  \"results\": \"sonuç\",\n  \"noResults\": \"Ürün bulunamadı\",\n  \"tryDifferent\": \"Farklı anahtar kelimeler deneyin\",\n  \"viewAllResults\": \"Tüm sonuçları gör\",\n  \"logoutToastTitle\": \"Hoşça kal!\",\n  \"logoutToastDesc\": \"Başarıyla çıkış yaptınız.\",\n  \"tryDifferentKeywords\": \"Farklı anahtar kelimeler deneyin\",\n  \"cancel\": \"İptal\",\n  \"myOrders\": \"Siparişlerim\",\n  \"logout\": \"Çıkış Yap\",\n  \"login\": \"Giriş Yap\"\n}\n"
     }
   ],
   "exports": {