@burdenoff/microfe-auth 2026.830.1 → 2026.904.1

package/dist/auth/components/AuthLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthLayout.js","names":[],"sources":["../../../src/auth/components/AuthLayout.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { LanguageSwitcher } from \"@burdenoff/fe-libs/chrome\";\nimport type { Language } from \"@burdenoff/fe-libs/chrome\";\nimport {\n  useI18n,\n  useAppShell,\n} from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { Locale } from \"@burdenoff/fe-libs/shared/providers/shell\";\n\ninterface AuthLayoutProps {\n  children: ReactNode;\n  title: string;\n  subtitle: string;\n  productName?: string;\n  tagline?: string;\n}\n\n/**\n * Supported languages for the auth pages.\n *\n * Must stay in sync with the locales actually seeded in\n * `i18n_translations` for the consumer products that mount microfe-auth.\n * If a locale is listed here but NOT seeded, selecting it sets\n * `setLocale(<code>)` on the I18nProvider, the next `exportTranslations`\n * call returns zero rows, every `tr()` falls back to its English default,\n * and the user gets an English UI under a non-English flag.\n *\n * Audited 2026-05-31 against alpha `i18n_translations`: only `en/ta/hi/\n * zh/es/ar` have actual translations (vibecontrols 40k+ rows each).\n * `fr` was previously listed but no product seeds it — selecting it\n * produced a half-translated UI. Removed for parity with the dashboard\n * `LanguageSwitcherSlot` (which is data-driven from `i18n_languages`).\n *\n * Adding a new locale requires updating BOTH:\n *   - this list\n *   - each consumer product's seed (e.g. vibecontrols-app/scripts/\n *     build-i18n-bundle.ts + the new `<code>.ts` translation source).\n */\nconst AUTH_LANGUAGES: Language[] = [\n  { code: \"en\", name: \"English\", nativeName: \"English\", flag: \"🇺🇸\" },\n  { code: \"ta\", name: \"Tamil\", nativeName: \"தமிழ்\", flag: \"🇮🇳\" },\n  { code: \"hi\", name: \"Hindi\", nativeName: \"हिन्दी\", flag: \"🇮🇳\" },\n  { code: \"zh\", name: \"Chinese\", nativeName: \"中文\", flag: \"🇨🇳\" },\n  { code: \"es\", name: \"Spanish\", nativeName: \"Español\", flag: \"🇪🇸\" },\n  { code: \"ar\", name: \"Arabic\", nativeName: \"العربية\", flag: \"🇸🇦\" },\n];\n\n/**\n * Brand logo for the auth pages.\n *\n * Renders the host app shell's real product logo served at `/icons/icon.svg`\n * (the same asset the marketing landing page uses) so the login screen and the\n * landing page show an identical mark instead of a generic placeholder glyph.\n * Host shells that don't ship that asset (e.g. admin-app) fall back to a\n * branded initial badge rather than a broken image.\n */\nfunction BrandLogo({ brandInitial }: { brandInitial: string }) {\n  const [failed, setFailed] = useState(false);\n\n  if (failed) {\n    return (\n      <div className=\"auth-brand-badge flex size-10 items-center justify-center rounded-xl\">\n        <span className=\"text-lg font-bold leading-none text-white\">\n          {brandInitial}\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <img\n      src=\"/icons/icon.svg\"\n      alt=\"\"\n      aria-hidden=\"true\"\n      className=\"size-10 rounded-xl object-contain\"\n      onError={() => setFailed(true)}\n    />\n  );\n}\n\n/**\n * Professional auth layout with split-screen design\n * Left side: Branding with gradient background\n * Right side: Auth form\n */\nexport function AuthLayout({\n  children,\n  title,\n  subtitle,\n  productName,\n  tagline,\n}: AuthLayoutProps) {\n  const shell = useAppShell();\n  const displayName = productName || shell.productName || \"Burdenoff\";\n  const brandInitial = shell.brandInitial || \"B\";\n  const displayTagline = tagline || shell.tagline || \"Enterprise platform\";\n  const { t, locale, setLocale } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const handleLanguageChange = (language: Language) => {\n    // AUTH_LANGUAGES intentionally lists locales (e.g. \"ar\") that are seeded\n    // in consumer products but not yet present in the fe-libs Locale union.\n    // The runtime I18nProvider accepts any locale code, so we cast through\n    // unknown to Locale to keep the picker in parity until fe-libs widens the\n    // union. Keep AUTH_LANGUAGES in sync with consumer product seeds.\n    setLocale(language.code as unknown as Locale);\n  };\n\n  return (\n    <div className=\"min-h-screen flex relative\">\n      {/* Left Panel - Branding */}\n      <div className=\"auth-brand-panel hidden overflow-hidden lg:flex lg:w-1/2 relative\">\n        {/* Decorative Elements */}\n        <div className=\"absolute inset-0 overflow-hidden\">\n          <div className=\"absolute -top-40 -left-40 size-80 rounded-full bg-accent-blue/20 blur-3xl\" />\n          <div className=\"absolute top-1/2 -right-20 size-96 rounded-full bg-accent-indigo/20 blur-3xl\" />\n          <div className=\"absolute -bottom-40 left-1/4 size-72 rounded-full bg-accent-purple/20 blur-3xl\" />\n\n          {/* Grid Pattern */}\n          <div\n            className=\"absolute inset-0 opacity-5\"\n            style={{\n              backgroundImage: `url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")`,\n            }}\n          />\n        </div>\n\n        {/* Content */}\n        <div className=\"relative z-10 flex flex-col justify-between p-12 w-full\">\n          {/* Logo */}\n          <div className=\"flex items-center gap-3\">\n            <BrandLogo brandInitial={brandInitial} />\n            <span className=\"text-xl font-bold text-[var(--color-text-primary)]\">\n              {displayName}\n            </span>\n          </div>\n\n          {/* Main Content */}\n          <div className=\"max-w-md\">\n            <h1 className=\"mb-4 text-4xl font-bold leading-tight text-[var(--color-text-primary)]\">\n              {displayTagline}\n            </h1>\n            <p className=\"auth-brand-copy text-lg leading-relaxed\">\n              {tr(\n                \"auth.layout.taglineDescription\",\n                \"Unify your teams, projects, and workflows in one intelligent workspace. Built for scale with enterprise-grade security, real-time collaboration, and seamless integrations across your entire organization.\",\n              )}\n            </p>\n\n            {/* Features */}\n            <div className=\"mt-10 space-y-4\">\n              {[\n                {\n                  icon: \"workspace\",\n                  text: tr(\n                    \"auth.layout.featureWorkspace\",\n                    \"Modular workspace architecture\",\n                  ),\n                },\n                {\n                  icon: \"realtime\",\n                  text: tr(\n                    \"auth.layout.featureRealtime\",\n                    \"Real-time collaboration & sync\",\n                  ),\n                },\n                {\n                  icon: \"security\",\n                  text: tr(\n                    \"auth.layout.featureSecurity\",\n                    \"Enterprise-grade security & SSO\",\n                  ),\n                },\n                {\n                  icon: \"scale\",\n                  text: tr(\n                    \"auth.layout.featureScale\",\n                    \"Unlimited scalability & performance\",\n                  ),\n                },\n              ].map((feature) => (\n                <div key={feature.icon} className=\"flex items-center gap-3\">\n                  <div className=\"auth-highlight-chip flex size-8 items-center justify-center rounded-lg\">\n                    {feature.icon === \"workspace\" && (\n                      <svg\n                        className=\"size-4 text-accent-blue\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n                        />\n                      </svg>\n                    )}\n                    {feature.icon === \"realtime\" && (\n                      <svg\n                        className=\"size-4 text-accent-blue\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z\"\n                        />\n                      </svg>\n                    )}\n                    {feature.icon === \"security\" && (\n                      <svg\n                        className=\"size-4 text-accent-blue\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                        />\n                      </svg>\n                    )}\n                    {feature.icon === \"scale\" && (\n                      <svg\n                        className=\"size-4 text-accent-blue\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n                        />\n                      </svg>\n                    )}\n                  </div>\n                  <span className=\"auth-brand-copy text-sm font-medium\">\n                    {feature.text}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Footer */}\n          <div className=\"auth-brand-copy-muted text-sm\">\n            © {new Date().getFullYear()} Burdenoff. All rights reserved.\n          </div>\n        </div>\n      </div>\n\n      {/* Right Panel - Form */}\n      <main className=\"auth-shell-gradient relative flex flex-1 items-center justify-center bg-[var(--color-bg-canvas)] p-6 sm:p-12\">\n        {/* Language Switcher - Top Right */}\n        <div className=\"absolute top-4 right-4 sm:top-6 sm:right-6 z-10\">\n          <LanguageSwitcher\n            languages={AUTH_LANGUAGES}\n            currentLanguage={locale}\n            onLanguageChange={handleLanguageChange}\n          />\n        </div>\n        <div className=\"w-full max-w-md\">\n          {/* Mobile Logo */}\n          <div className=\"lg:hidden flex items-center justify-center gap-3 mb-8\">\n            <BrandLogo brandInitial={brandInitial} />\n            <span className=\"text-xl font-bold text-[var(--color-text-primary)]\">\n              {displayName}\n            </span>\n          </div>\n\n          {/* Header */}\n          <div className=\"text-center lg:text-left mb-8\">\n            <h2 className=\"text-2xl sm:text-3xl font-bold text-[var(--color-text-primary)] mb-2\">\n              {title}\n            </h2>\n            <p className=\"text-[var(--color-text-secondary)]\">{subtitle}</p>\n          </div>\n\n          {/* Form Content */}\n          {children}\n        </div>\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AuthLayout.js","names":[],"sources":["../../../src/auth/components/AuthLayout.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { LanguageSwitcher } from \"@burdenoff/fe-libs/chrome\";\nimport type { Language } from \"@burdenoff/fe-libs/chrome\";\nimport {\n  useI18n,\n  useAppShell,\n} from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useTr } from \"../../shared/hooks/useTr\";\nimport type { Locale } from \"@burdenoff/fe-libs/shared/providers/shell\";\n\ninterface AuthLayoutProps {\n  children: ReactNode;\n  title: string;\n  subtitle: string;\n  productName?: string;\n  tagline?: string;\n}\n\n/**\n * Supported languages for the auth pages.\n *\n * Must stay in sync with the locales actually seeded in\n * `i18n_translations` for the consumer products that mount microfe-auth.\n * If a locale is listed here but NOT seeded, selecting it sets\n * `setLocale(<code>)` on the I18nProvider, the next `exportTranslations`\n * call returns zero rows, every `tr()` falls back to its English default,\n * and the user gets an English UI under a non-English flag.\n *\n * Audited 2026-05-31 against alpha `i18n_translations`: only `en/ta/hi/\n * zh/es/ar` have actual translations (vibecontrols 40k+ rows each).\n * `fr` was previously listed but no product seeds it — selecting it\n * produced a half-translated UI. Removed for parity with the dashboard\n * `LanguageSwitcherSlot` (which is data-driven from `i18n_languages`).\n *\n * Adding a new locale requires updating BOTH:\n *   - this list\n *   - each consumer product's seed (e.g. vibecontrols-app/scripts/\n *     build-i18n-bundle.ts + the new `<code>.ts` translation source).\n */\nconst AUTH_LANGUAGES: Language[] = [\n  { code: \"en\", name: \"English\", nativeName: \"English\", flag: \"🇺🇸\" },\n  { code: \"ta\", name: \"Tamil\", nativeName: \"தமிழ்\", flag: \"🇮🇳\" },\n  { code: \"hi\", name: \"Hindi\", nativeName: \"हिन्दी\", flag: \"🇮🇳\" },\n  { code: \"zh\", name: \"Chinese\", nativeName: \"中文\", flag: \"🇨🇳\" },\n  { code: \"es\", name: \"Spanish\", nativeName: \"Español\", flag: \"🇪🇸\" },\n  { code: \"ar\", name: \"Arabic\", nativeName: \"العربية\", flag: \"🇸🇦\" },\n];\n\n/**\n * Brand logo for the auth pages.\n *\n * Renders the host app shell's real product logo served at `/icons/icon.svg`\n * (the same asset the marketing landing page uses) so the login screen and the\n * landing page show an identical mark instead of a generic placeholder glyph.\n * Host shells that don't ship that asset (e.g. admin-app) fall back to a\n * branded initial badge rather than a broken image.\n */\nfunction BrandLogo({ brandInitial }: { brandInitial: string }) {\n  const [failed, setFailed] = useState(false);\n\n  if (failed) {\n    return (\n      <div className=\"auth-brand-badge flex size-10 items-center justify-center rounded-xl\">\n        <span className=\"text-lg font-bold leading-none text-white\">\n          {brandInitial}\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <img\n      src=\"/icons/icon.svg\"\n      alt=\"\"\n      aria-hidden=\"true\"\n      className=\"size-10 rounded-xl object-contain\"\n      onError={() => setFailed(true)}\n    />\n  );\n}\n\n/**\n * Professional auth layout with split-screen design\n * Left side: Branding with gradient background\n * Right side: Auth form\n */\nexport function AuthLayout({\n  children,\n  title,\n  subtitle,\n  productName,\n  tagline,\n}: AuthLayoutProps) {\n  const tr = useTr();\n  const shell = useAppShell();\n  const displayName = productName || shell.productName || \"Burdenoff\";\n  const brandInitial = shell.brandInitial || \"B\";\n  const displayTagline = tagline || shell.tagline || \"Enterprise platform\";\n  const { locale, setLocale } = useI18n();\n\n  const handleLanguageChange = (language: Language) => {\n    // AUTH_LANGUAGES intentionally lists locales (e.g. \"ar\") that are seeded\n    // in consumer products but not yet present in the fe-libs Locale union.\n    // The runtime I18nProvider accepts any locale code, so we cast through\n    // unknown to Locale to keep the picker in parity until fe-libs widens the\n    // union. Keep AUTH_LANGUAGES in sync with consumer product seeds.\n    setLocale(language.code as unknown as Locale);\n  };\n\n  return (\n    <div className=\"min-h-screen flex relative\">\n      {/* Left Panel - Branding */}\n      <div className=\"auth-brand-panel hidden overflow-hidden lg:flex lg:w-1/2 relative\">\n        {/* Decorative Elements */}\n        <div className=\"absolute inset-0 overflow-hidden\">\n          <div className=\"absolute -top-40 -left-40 size-80 rounded-full bg-accent-blue/20 blur-3xl\" />\n          <div className=\"absolute top-1/2 -right-20 size-96 rounded-full bg-accent-indigo/20 blur-3xl\" />\n          <div className=\"absolute -bottom-40 left-1/4 size-72 rounded-full bg-accent-purple/20 blur-3xl\" />\n\n          {/* Grid Pattern */}\n          <div\n            className=\"absolute inset-0 opacity-5\"\n            style={{\n              backgroundImage: `url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")`,\n            }}\n          />\n        </div>\n\n        {/* Content */}\n        <div className=\"relative z-10 flex flex-col justify-between p-12 w-full\">\n          {/* Logo */}\n          <div className=\"flex items-center gap-3\">\n            <BrandLogo brandInitial={brandInitial} />\n            <span className=\"text-xl font-bold text-[var(--color-text-primary)]\">\n              {displayName}\n            </span>\n          </div>\n\n          {/* Main Content */}\n          <div className=\"max-w-md\">\n            <h1 className=\"mb-4 text-4xl font-bold leading-tight text-[var(--color-text-primary)]\">\n              {displayTagline}\n            </h1>\n            <p className=\"auth-brand-copy text-lg leading-relaxed\">\n              {tr(\n                \"auth.layout.taglineDescription\",\n                \"Unify your teams, projects, and workflows in one intelligent workspace. Built for scale with enterprise-grade security, real-time collaboration, and seamless integrations across your entire organization.\",\n              )}\n            </p>\n\n            {/* Features */}\n            <div className=\"mt-10 space-y-4\">\n              {[\n                {\n                  icon: \"workspace\",\n                  text: tr(\n                    \"auth.layout.featureWorkspace\",\n                    \"Modular workspace architecture\",\n                  ),\n                },\n                {\n                  icon: \"realtime\",\n                  text: tr(\n                    \"auth.layout.featureRealtime\",\n                    \"Real-time collaboration & sync\",\n                  ),\n                },\n                {\n                  icon: \"security\",\n                  text: tr(\n                    \"auth.layout.featureSecurity\",\n                    \"Enterprise-grade security & SSO\",\n                  ),\n                },\n                {\n                  icon: \"scale\",\n                  text: tr(\n                    \"auth.layout.featureScale\",\n                    \"Unlimited scalability & performance\",\n                  ),\n                },\n              ].map((feature) => (\n                <div key={feature.icon} className=\"flex items-center gap-3\">\n                  <div className=\"auth-highlight-chip flex size-8 items-center justify-center rounded-lg\">\n                    {feature.icon === \"workspace\" && (\n                      <svg\n                        className=\"size-4 text-accent-blue\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n                        />\n                      </svg>\n                    )}\n                    {feature.icon === \"realtime\" && (\n                      <svg\n                        className=\"size-4 text-accent-blue\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z\"\n                        />\n                      </svg>\n                    )}\n                    {feature.icon === \"security\" && (\n                      <svg\n                        className=\"size-4 text-accent-blue\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                        />\n                      </svg>\n                    )}\n                    {feature.icon === \"scale\" && (\n                      <svg\n                        className=\"size-4 text-accent-blue\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n                        />\n                      </svg>\n                    )}\n                  </div>\n                  <span className=\"auth-brand-copy text-sm font-medium\">\n                    {feature.text}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Footer */}\n          <div className=\"auth-brand-copy-muted text-sm\">\n            © {new Date().getFullYear()} Burdenoff. All rights reserved.\n          </div>\n        </div>\n      </div>\n\n      {/* Right Panel - Form */}\n      <main className=\"auth-shell-gradient relative flex flex-1 items-center justify-center bg-[var(--color-bg-canvas)] p-6 sm:p-12\">\n        {/* Language Switcher - Top Right */}\n        <div className=\"absolute top-4 right-4 sm:top-6 sm:right-6 z-10\">\n          <LanguageSwitcher\n            languages={AUTH_LANGUAGES}\n            currentLanguage={locale}\n            onLanguageChange={handleLanguageChange}\n          />\n        </div>\n        <div className=\"w-full max-w-md\">\n          {/* Mobile Logo */}\n          <div className=\"lg:hidden flex items-center justify-center gap-3 mb-8\">\n            <BrandLogo brandInitial={brandInitial} />\n            <span className=\"text-xl font-bold text-[var(--color-text-primary)]\">\n              {displayName}\n            </span>\n          </div>\n\n          {/* Header */}\n          <div className=\"text-center lg:text-left mb-8\">\n            <h2 className=\"text-2xl sm:text-3xl font-bold text-[var(--color-text-primary)] mb-2\">\n              {title}\n            </h2>\n            <p className=\"text-[var(--color-text-secondary)]\">{subtitle}</p>\n          </div>\n\n          {/* Form Content */}\n          {children}\n        </div>\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/components/CaptchaV2.js

@@ -1,41 +1,38 @@
 import { getRecaptchaSiteKey as e, isCaptchaEnabled as t } from "../utils/captchaConfig.js";
-import { Suspense as n, lazy as r, useCallback as i, useState as a } from "react";
-import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useTr as n } from "../../shared/hooks/useTr.js";
+import { Suspense as r, lazy as i, useCallback as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 //#region src/auth/components/CaptchaV2.tsx
-var c = r(() => import("../../node_modules/react-google-recaptcha/lib/esm/index.js").then((t) => ({ default: function({ onVerify: n, onExpired: r, siteKey: o }) {
-	let c = t.default, [, l] = a(null), u = o ?? e(), d = i((e) => {
-		n(e);
-	}, [n]), f = i(() => {
-		n(null), r?.();
-	}, [n, r]);
-	return u ? /* @__PURE__ */ s("div", {
+var c = i(() => import("../../node_modules/react-google-recaptcha/lib/esm/index.js").then((t) => ({ default: function({ onVerify: r, onExpired: i, siteKey: c }) {
+	let l = n(), u = t.default, [, d] = o(null), f = c ?? e(), p = a((e) => {
+		r(e);
+	}, [r]), m = a(() => {
+		r(null), i?.();
+	}, [r, i]);
+	return f ? /* @__PURE__ */ s("div", {
 		className: "flex justify-center",
-		children: /* @__PURE__ */ s(c, {
-			ref: l,
-			sitekey: u,
-			onChange: d,
-			onExpired: f
+		children: /* @__PURE__ */ s(u, {
+			ref: d,
+			sitekey: f,
+			onChange: p,
+			onExpired: m
 		})
 	}) : /* @__PURE__ */ s("div", {
 		className: "rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-		children: "reCAPTCHA site key is not configured."
+		children: l("auth.captcha.siteKeyMissing", "reCAPTCHA site key is not configured.")
 	});
 } })));
-function l({ onVerify: e, onExpired: r, enabled: i, siteKey: a }) {
-	let { t: l } = o();
-	return i ?? t() ? /* @__PURE__ */ s(n, {
+function l({ onVerify: e, onExpired: i, enabled: a, siteKey: o }) {
+	let l = n();
+	return a ?? t() ? /* @__PURE__ */ s(r, {
 		fallback: /* @__PURE__ */ s("div", {
 			className: "flex justify-center py-2",
-			children: ((e, t) => {
-				let n = l(e);
-				return n === e ? t : n;
-			})("auth.captcha.loading", "Loading captcha...")
+			children: l("auth.captcha.loading", "Loading captcha...")
 		}),
 		children: /* @__PURE__ */ s(c, {
 			onVerify: e,
-			onExpired: r,
-			siteKey: a
+			onExpired: i,
+			siteKey: o
 		})
 	}) : null;
 }

package/dist/auth/components/CaptchaV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptchaV2.js","names":[],"sources":["../../../src/auth/components/CaptchaV2.tsx"],"sourcesContent":["import { lazy, Suspense, useState, useCallback } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport {\n  getRecaptchaSiteKey,\n  isCaptchaEnabled as getIsCaptchaEnabled,\n} from \"../utils/captchaConfig\";\n\ninterface CaptchaV2Props {\n  onVerify: (token: string | null) => void;\n  onExpired?: () => void;\n  /**\n   * Host-driven enable flag. When provided it takes precedence over the\n   * build-time env switch (used so a per-product site key can turn the widget\n   * on/off without rebuilding). When omitted, falls back to env.\n   */\n  enabled?: boolean;\n  /**\n   * reCAPTCHA v2 site key to render with. Overrides the build-time env key.\n   * Resolved per-product by the caller (see `useSignupCaptcha`).\n   */\n  siteKey?: string;\n}\n\ninterface CaptchaWidgetProps {\n  onVerify: (token: string | null) => void;\n  onExpired?: () => void;\n  siteKey?: string;\n}\n\n/**\n * Lazily loaded inner component that imports react-google-recaptcha.\n * Only loaded when captcha is enabled, avoiding import resolution\n * errors in dev environments where the package may not be installed.\n */\nconst LazyCaptchaWidget = lazy(() =>\n  import(\"react-google-recaptcha\").then((mod) => ({\n    default: function CaptchaWidget({\n      onVerify,\n      onExpired,\n      siteKey: siteKeyProp,\n    }: CaptchaWidgetProps) {\n      const ReCAPTCHA = mod.default;\n      const [, setRef] = useState<InstanceType<typeof ReCAPTCHA> | null>(null);\n      const siteKey = siteKeyProp ?? getRecaptchaSiteKey();\n\n      const forwardCaptchaToken = useCallback(\n        (token: string | null) => {\n          onVerify(token);\n        },\n        [onVerify],\n      );\n\n      const clearCaptchaToken = useCallback(() => {\n        onVerify(null);\n        onExpired?.();\n      }, [onVerify, onExpired]);\n\n      if (!siteKey) {\n        return (\n          <div className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n            reCAPTCHA site key is not configured.\n          </div>\n        );\n      }\n\n      return (\n        <div className=\"flex justify-center\">\n          <ReCAPTCHA\n            ref={setRef}\n            sitekey={siteKey}\n            onChange={forwardCaptchaToken}\n            onExpired={clearCaptchaToken}\n          />\n        </div>\n      );\n    },\n  })),\n);\n\n/**\n * reCAPTCHA v2 checkbox component.\n *\n * Enablement is host-driven via the `enabled` prop (resolved per-product from\n * the platform catalog). When `enabled` is omitted it falls back to the\n * build-time `VITE_CAPTCHA_ENABLED` env for local source-dev. Renders nothing\n * when disabled and lazily loads the Google reCAPTCHA library only when enabled.\n */\nexport function CaptchaV2({\n  onVerify,\n  onExpired,\n  enabled,\n  siteKey,\n}: CaptchaV2Props) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const isEnabled = enabled ?? getIsCaptchaEnabled();\n  if (!isEnabled) {\n    return null;\n  }\n\n  return (\n    <Suspense\n      fallback={\n        <div className=\"flex justify-center py-2\">\n          {tr(\"auth.captcha.loading\", \"Loading captcha...\")}\n        </div>\n      }\n    >\n      <LazyCaptchaWidget\n        onVerify={onVerify}\n        onExpired={onExpired}\n        siteKey={siteKey}\n      />\n    </Suspense>\n  );\n}\n"],"mappings":";;;;;AAkCA,IAAM,IAAoB,QACxB,OAAO,8DAA0B,MAAM,OAAS,EAC9C,SAAS,SAAuB,EAC9B,aACA,cACA,SAAS,KACY;CACrB,IAAM,IAAY,EAAI,SAChB,GAAG,KAAU,EAAgD,KAAK,EAClE,IAAU,KAAe,GAAqB,EAE9C,IAAsB,GACzB,MAAyB;AACxB,IAAS,EAAM;IAEjB,CAAC,EAAS,CACX,EAEK,IAAoB,QAAkB;AAE1C,EADA,EAAS,KAAK,EACd,KAAa;IACZ,CAAC,GAAU,EAAU,CAAC;AAUzB,QARK,IASH,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,KAAK;GACL,SAAS;GACT,UAAU;GACV,WAAW;GACX,CAAA;EACE,CAAA,GAdJ,kBAAC,OAAD;EAAK,WAAU;YAAgF;EAEzF,CAAA;GAeb,EAAE,CACJ;AAUD,SAAgB,EAAU,EACxB,aACA,cACA,YACA,cACiB;CACjB,IAAM,EAAE,SAAM,GAAS;AAWvB,QALkB,KAAW,GAAqB,GAMhD,kBAAC,GAAD;EACE,UACE,kBAAC,OAAD;GAAK,WAAU;eAbT,GAAa,MAA6B;IACpD,IAAM,IAAa,EAAE,EAAI;AACzB,WAAO,MAAe,IAAM,IAAW;MAY7B,wBAAwB,qBAAqB;GAC7C,CAAA;YAGR,kBAAC,GAAD;GACY;GACC;GACF;GACT,CAAA;EACO,CAAA,GAhBJ"}
+{"version":3,"file":"CaptchaV2.js","names":[],"sources":["../../../src/auth/components/CaptchaV2.tsx"],"sourcesContent":["import { lazy, Suspense, useState, useCallback } from \"react\";\nimport { useTr } from \"../../shared/hooks/useTr\";\nimport {\n  getRecaptchaSiteKey,\n  isCaptchaEnabled as getIsCaptchaEnabled,\n} from \"../utils/captchaConfig\";\n\ninterface CaptchaV2Props {\n  onVerify: (token: string | null) => void;\n  onExpired?: () => void;\n  /**\n   * Host-driven enable flag. When provided it takes precedence over the\n   * build-time env switch (used so a per-product site key can turn the widget\n   * on/off without rebuilding). When omitted, falls back to env.\n   */\n  enabled?: boolean;\n  /**\n   * reCAPTCHA v2 site key to render with. Overrides the build-time env key.\n   * Resolved per-product by the caller (see `useSignupCaptcha`).\n   */\n  siteKey?: string;\n}\n\ninterface CaptchaWidgetProps {\n  onVerify: (token: string | null) => void;\n  onExpired?: () => void;\n  siteKey?: string;\n}\n\n/**\n * Lazily loaded inner component that imports react-google-recaptcha.\n * Only loaded when captcha is enabled, avoiding import resolution\n * errors in dev environments where the package may not be installed.\n */\nconst LazyCaptchaWidget = lazy(() =>\n  import(\"react-google-recaptcha\").then((mod) => ({\n    default: function CaptchaWidget({\n      onVerify,\n      onExpired,\n      siteKey: siteKeyProp,\n    }: CaptchaWidgetProps) {\n      const tr = useTr();\n      const ReCAPTCHA = mod.default;\n      const [, setRef] = useState<InstanceType<typeof ReCAPTCHA> | null>(null);\n      const siteKey = siteKeyProp ?? getRecaptchaSiteKey();\n\n      const forwardCaptchaToken = useCallback(\n        (token: string | null) => {\n          onVerify(token);\n        },\n        [onVerify],\n      );\n\n      const clearCaptchaToken = useCallback(() => {\n        onVerify(null);\n        onExpired?.();\n      }, [onVerify, onExpired]);\n\n      if (!siteKey) {\n        return (\n          <div className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n            {tr(\n              \"auth.captcha.siteKeyMissing\",\n              \"reCAPTCHA site key is not configured.\",\n            )}\n          </div>\n        );\n      }\n\n      return (\n        <div className=\"flex justify-center\">\n          <ReCAPTCHA\n            ref={setRef}\n            sitekey={siteKey}\n            onChange={forwardCaptchaToken}\n            onExpired={clearCaptchaToken}\n          />\n        </div>\n      );\n    },\n  })),\n);\n\n/**\n * reCAPTCHA v2 checkbox component.\n *\n * Enablement is host-driven via the `enabled` prop (resolved per-product from\n * the platform catalog). When `enabled` is omitted it falls back to the\n * build-time `VITE_CAPTCHA_ENABLED` env for local source-dev. Renders nothing\n * when disabled and lazily loads the Google reCAPTCHA library only when enabled.\n */\nexport function CaptchaV2({\n  onVerify,\n  onExpired,\n  enabled,\n  siteKey,\n}: CaptchaV2Props) {\n  const tr = useTr();\n\n  const isEnabled = enabled ?? getIsCaptchaEnabled();\n  if (!isEnabled) {\n    return null;\n  }\n\n  return (\n    <Suspense\n      fallback={\n        <div className=\"flex justify-center py-2\">\n          {tr(\"auth.captcha.loading\", \"Loading captcha...\")}\n        </div>\n      }\n    >\n      <LazyCaptchaWidget\n        onVerify={onVerify}\n        onExpired={onExpired}\n        siteKey={siteKey}\n      />\n    </Suspense>\n  );\n}\n"],"mappings":";;;;;AAkCA,IAAM,IAAoB,QACxB,OAAO,8DAA0B,MAAM,OAAS,EAC9C,SAAS,SAAuB,EAC9B,aACA,cACA,SAAS,KACY;CACrB,IAAM,IAAK,GAAO,EACZ,IAAY,EAAI,SAChB,GAAG,KAAU,EAAgD,KAAK,EAClE,IAAU,KAAe,GAAqB,EAE9C,IAAsB,GACzB,MAAyB;AACxB,IAAS,EAAM;IAEjB,CAAC,EAAS,CACX,EAEK,IAAoB,QAAkB;AAE1C,EADA,EAAS,KAAK,EACd,KAAa;IACZ,CAAC,GAAU,EAAU,CAAC;AAazB,QAXK,IAYH,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,KAAK;GACL,SAAS;GACT,UAAU;GACV,WAAW;GACX,CAAA;EACE,CAAA,GAjBJ,kBAAC,OAAD;EAAK,WAAU;YACZ,EACC,+BACA,wCACD;EACG,CAAA;GAeb,EAAE,CACJ;AAUD,SAAgB,EAAU,EACxB,aACA,cACA,YACA,cACiB;CACjB,IAAM,IAAK,GAAO;AAOlB,QALkB,KAAW,GAAqB,GAMhD,kBAAC,GAAD;EACE,UACE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAG,wBAAwB,qBAAqB;GAC7C,CAAA;YAGR,kBAAC,GAAD;GACY;GACC;GACF;GACT,CAAA;EACO,CAAA,GAhBJ"}

package/dist/auth/components/ConfirmActionDialog.js

@@ -1,68 +1,69 @@
-import { AlertCircle as e, AlertTriangle as t, Info as n, Loader2 as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { AlertDialog as o, AlertDialogAction as s, AlertDialogCancel as c, AlertDialogContent as l, AlertDialogDescription as u, AlertDialogFooter as d, AlertDialogHeader as f, AlertDialogTitle as p } from "@burdenoff/fe-libs/ui";
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { AlertCircle as t, AlertTriangle as n, Info as r, Loader2 as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { AlertDialog as s, AlertDialogAction as c, AlertDialogCancel as l, AlertDialogContent as u, AlertDialogDescription as d, AlertDialogFooter as f, AlertDialogHeader as p, AlertDialogTitle as m } from "@burdenoff/fe-libs/ui";
 //#region src/auth/components/ConfirmActionDialog.tsx
-var m = {
+var h = {
 	default: {
-		icon: n,
+		icon: r,
 		iconContainerClassName: "bg-[var(--color-status-info-bg-subtle)]",
 		iconClassName: "text-[var(--color-status-info-text)]",
 		actionClassName: "bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)] hover:opacity-90"
 	},
 	warning: {
-		icon: t,
+		icon: n,
 		iconContainerClassName: "bg-[var(--color-status-warning-bg-subtle)]",
 		iconClassName: "text-[var(--color-status-warning-text)]",
 		actionClassName: "bg-[var(--color-status-warning-bg)] text-[var(--color-text-inverse)] hover:opacity-90"
 	},
 	danger: {
-		icon: e,
+		icon: t,
 		iconContainerClassName: "bg-[var(--color-status-error-bg-subtle)]",
 		iconClassName: "text-[var(--color-status-error-text)]",
 		actionClassName: "bg-[var(--color-status-error-bg)] text-[var(--color-text-inverse)] hover:opacity-90"
 	}
 };
-function h({ open: e, onOpenChange: t, title: n, description: h, confirmText: g = "Confirm", cancelText: _ = "Cancel", variant: v = "default", isPending: y = !1, disabled: b = !1, onConfirm: x }) {
-	let S = m[v], C = S.icon;
-	return /* @__PURE__ */ i(o, {
-		open: e,
-		onOpenChange: t,
-		children: /* @__PURE__ */ a(l, {
+function g({ open: t, onOpenChange: n, title: r, description: g, confirmText: _, cancelText: v, variant: y = "default", isPending: b = !1, disabled: x = !1, onConfirm: S }) {
+	let C = e(), w = _ || C("auth.confirmDialog.confirm", "Confirm"), T = v || C("auth.confirmDialog.cancel", "Cancel"), E = h[y], D = E.icon;
+	return /* @__PURE__ */ a(s, {
+		open: t,
+		onOpenChange: n,
+		children: /* @__PURE__ */ o(u, {
 			className: "max-w-md border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)]",
-			children: [/* @__PURE__ */ i(f, { children: /* @__PURE__ */ a("div", {
+			children: [/* @__PURE__ */ a(p, { children: /* @__PURE__ */ o("div", {
 				className: "flex items-start gap-4",
-				children: [/* @__PURE__ */ i("div", {
-					className: `flex size-10 shrink-0 items-center justify-center rounded-full ${S.iconContainerClassName}`,
-					children: /* @__PURE__ */ i(C, { className: `size-5 ${S.iconClassName}` })
-				}), /* @__PURE__ */ a("div", {
+				children: [/* @__PURE__ */ a("div", {
+					className: `flex size-10 shrink-0 items-center justify-center rounded-full ${E.iconContainerClassName}`,
+					children: /* @__PURE__ */ a(D, { className: `size-5 ${E.iconClassName}` })
+				}), /* @__PURE__ */ o("div", {
 					className: "flex-1",
-					children: [/* @__PURE__ */ i(p, {
+					children: [/* @__PURE__ */ a(m, {
 						className: "text-lg text-[var(--color-text-primary)]",
-						children: n
-					}), /* @__PURE__ */ i(u, {
+						children: r
+					}), /* @__PURE__ */ a(d, {
 						className: "mt-2 text-sm text-[var(--color-text-secondary)]",
-						children: h
+						children: g
 					})]
 				})]
-			}) }), /* @__PURE__ */ a(d, {
+			}) }), /* @__PURE__ */ o(f, {
 				className: "mt-6",
-				children: [/* @__PURE__ */ i(c, {
-					disabled: y,
+				children: [/* @__PURE__ */ a(l, {
+					disabled: b,
 					className: "border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
-					children: _
-				}), /* @__PURE__ */ a(s, {
-					disabled: b || y,
+					children: T
+				}), /* @__PURE__ */ o(c, {
+					disabled: x || b,
 					onClick: (e) => {
-						e.preventDefault(), x();
+						e.preventDefault(), S();
 					},
-					className: S.actionClassName,
-					children: [y ? /* @__PURE__ */ i(r, { className: "size-4 animate-spin" }) : null, g]
+					className: E.actionClassName,
+					children: [b ? /* @__PURE__ */ a(i, { className: "size-4 animate-spin" }) : null, w]
 				})]
 			})]
 		})
 	});
 }
 //#endregion
-export { h as ConfirmActionDialog };
+export { g as ConfirmActionDialog };
 
 //# sourceMappingURL=ConfirmActionDialog.js.map

package/dist/auth/components/ConfirmActionDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmActionDialog.js","names":[],"sources":["../../../src/auth/components/ConfirmActionDialog.tsx"],"sourcesContent":["import { AlertCircle, AlertTriangle, Info, Loader2 } from \"lucide-react\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"@burdenoff/fe-libs/ui\";\n\ntype ConfirmActionDialogVariant = \"default\" | \"warning\" | \"danger\";\n\ninterface ConfirmActionDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: string;\n  description: string;\n  confirmText?: string;\n  cancelText?: string;\n  variant?: ConfirmActionDialogVariant;\n  isPending?: boolean;\n  disabled?: boolean;\n  onConfirm: () => void | Promise<void>;\n}\n\nconst VARIANT_STYLES: Record<\n  ConfirmActionDialogVariant,\n  {\n    icon: typeof Info;\n    iconContainerClassName: string;\n    iconClassName: string;\n    actionClassName: string;\n  }\n> = {\n  default: {\n    icon: Info,\n    iconContainerClassName: \"bg-[var(--color-status-info-bg-subtle)]\",\n    iconClassName: \"text-[var(--color-status-info-text)]\",\n    actionClassName:\n      \"bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)] hover:opacity-90\",\n  },\n  warning: {\n    icon: AlertTriangle,\n    iconContainerClassName: \"bg-[var(--color-status-warning-bg-subtle)]\",\n    iconClassName: \"text-[var(--color-status-warning-text)]\",\n    actionClassName:\n      \"bg-[var(--color-status-warning-bg)] text-[var(--color-text-inverse)] hover:opacity-90\",\n  },\n  danger: {\n    icon: AlertCircle,\n    iconContainerClassName: \"bg-[var(--color-status-error-bg-subtle)]\",\n    iconClassName: \"text-[var(--color-status-error-text)]\",\n    actionClassName:\n      \"bg-[var(--color-status-error-bg)] text-[var(--color-text-inverse)] hover:opacity-90\",\n  },\n};\n\nexport function ConfirmActionDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmText = \"Confirm\",\n  cancelText = \"Cancel\",\n  variant = \"default\",\n  isPending = false,\n  disabled = false,\n  onConfirm,\n}: ConfirmActionDialogProps) {\n  const styles = VARIANT_STYLES[variant];\n  const Icon = styles.icon;\n\n  return (\n    <AlertDialog open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent className=\"max-w-md border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)]\">\n        <AlertDialogHeader>\n          <div className=\"flex items-start gap-4\">\n            <div\n              className={`flex size-10 shrink-0 items-center justify-center rounded-full ${styles.iconContainerClassName}`}\n            >\n              <Icon className={`size-5 ${styles.iconClassName}`} />\n            </div>\n            <div className=\"flex-1\">\n              <AlertDialogTitle className=\"text-lg text-[var(--color-text-primary)]\">\n                {title}\n              </AlertDialogTitle>\n              <AlertDialogDescription className=\"mt-2 text-sm text-[var(--color-text-secondary)]\">\n                {description}\n              </AlertDialogDescription>\n            </div>\n          </div>\n        </AlertDialogHeader>\n\n        <AlertDialogFooter className=\"mt-6\">\n          <AlertDialogCancel\n            disabled={isPending}\n            className=\"border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]\"\n          >\n            {cancelText}\n          </AlertDialogCancel>\n          <AlertDialogAction\n            disabled={disabled || isPending}\n            onClick={(event) => {\n              event.preventDefault();\n              void onConfirm();\n            }}\n            className={styles.actionClassName}\n          >\n            {isPending ? <Loader2 className=\"size-4 animate-spin\" /> : null}\n            {confirmText}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";;;;AA2BA,IAAM,IAQF;CACF,SAAS;EACP,MAAM;EACN,wBAAwB;EACxB,eAAe;EACf,iBACE;EACH;CACD,SAAS;EACP,MAAM;EACN,wBAAwB;EACxB,eAAe;EACf,iBACE;EACH;CACD,QAAQ;EACN,MAAM;EACN,wBAAwB;EACxB,eAAe;EACf,iBACE;EACH;CACF;AAED,SAAgB,EAAoB,EAClC,SACA,iBACA,UACA,gBACA,iBAAc,WACd,gBAAa,UACb,aAAU,WACV,eAAY,IACZ,cAAW,IACX,gBAC2B;CAC3B,IAAM,IAAS,EAAe,IACxB,IAAO,EAAO;AAEpB,QACE,kBAAC,GAAD;EAAmB;EAAoB;YACrC,kBAAC,GAAD;GAAoB,WAAU;aAA9B,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,WAAW,kEAAkE,EAAO;eAEpF,kBAAC,GAAD,EAAM,WAAW,UAAU,EAAO,iBAAmB,CAAA;KACjD,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAkB,WAAU;gBACzB;MACgB,CAAA,EACnB,kBAAC,GAAD;MAAwB,WAAU;gBAC/B;MACsB,CAAA,CACrB;OACF;OACY,CAAA,EAEpB,kBAAC,GAAD;IAAmB,WAAU;cAA7B,CACE,kBAAC,GAAD;KACE,UAAU;KACV,WAAU;eAET;KACiB,CAAA,EACpB,kBAAC,GAAD;KACE,UAAU,KAAY;KACtB,UAAU,MAAU;AAEb,MADL,EAAM,gBAAgB,EACjB,GAAW;;KAElB,WAAW,EAAO;eANpB,CAQG,IAAY,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,GAAG,MAC1D,EACiB;OACF;MACD;;EACT,CAAA"}
+{"version":3,"file":"ConfirmActionDialog.js","names":[],"sources":["../../../src/auth/components/ConfirmActionDialog.tsx"],"sourcesContent":["import { AlertCircle, AlertTriangle, Info, Loader2 } from \"lucide-react\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"@burdenoff/fe-libs/ui\";\nimport { useTr } from \"../../shared/hooks/useTr\";\n\ntype ConfirmActionDialogVariant = \"default\" | \"warning\" | \"danger\";\n\ninterface ConfirmActionDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: string;\n  description: string;\n  confirmText?: string;\n  cancelText?: string;\n  variant?: ConfirmActionDialogVariant;\n  isPending?: boolean;\n  disabled?: boolean;\n  onConfirm: () => void | Promise<void>;\n}\n\nconst VARIANT_STYLES: Record<\n  ConfirmActionDialogVariant,\n  {\n    icon: typeof Info;\n    iconContainerClassName: string;\n    iconClassName: string;\n    actionClassName: string;\n  }\n> = {\n  default: {\n    icon: Info,\n    iconContainerClassName: \"bg-[var(--color-status-info-bg-subtle)]\",\n    iconClassName: \"text-[var(--color-status-info-text)]\",\n    actionClassName:\n      \"bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)] hover:opacity-90\",\n  },\n  warning: {\n    icon: AlertTriangle,\n    iconContainerClassName: \"bg-[var(--color-status-warning-bg-subtle)]\",\n    iconClassName: \"text-[var(--color-status-warning-text)]\",\n    actionClassName:\n      \"bg-[var(--color-status-warning-bg)] text-[var(--color-text-inverse)] hover:opacity-90\",\n  },\n  danger: {\n    icon: AlertCircle,\n    iconContainerClassName: \"bg-[var(--color-status-error-bg-subtle)]\",\n    iconClassName: \"text-[var(--color-status-error-text)]\",\n    actionClassName:\n      \"bg-[var(--color-status-error-bg)] text-[var(--color-text-inverse)] hover:opacity-90\",\n  },\n};\n\nexport function ConfirmActionDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmText,\n  cancelText,\n  variant = \"default\",\n  isPending = false,\n  disabled = false,\n  onConfirm,\n}: ConfirmActionDialogProps) {\n  const tr = useTr();\n  const resolvedConfirmText =\n    confirmText || tr(\"auth.confirmDialog.confirm\", \"Confirm\");\n  const resolvedCancelText =\n    cancelText || tr(\"auth.confirmDialog.cancel\", \"Cancel\");\n  const styles = VARIANT_STYLES[variant];\n  const Icon = styles.icon;\n\n  return (\n    <AlertDialog open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent className=\"max-w-md border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)]\">\n        <AlertDialogHeader>\n          <div className=\"flex items-start gap-4\">\n            <div\n              className={`flex size-10 shrink-0 items-center justify-center rounded-full ${styles.iconContainerClassName}`}\n            >\n              <Icon className={`size-5 ${styles.iconClassName}`} />\n            </div>\n            <div className=\"flex-1\">\n              <AlertDialogTitle className=\"text-lg text-[var(--color-text-primary)]\">\n                {title}\n              </AlertDialogTitle>\n              <AlertDialogDescription className=\"mt-2 text-sm text-[var(--color-text-secondary)]\">\n                {description}\n              </AlertDialogDescription>\n            </div>\n          </div>\n        </AlertDialogHeader>\n\n        <AlertDialogFooter className=\"mt-6\">\n          <AlertDialogCancel\n            disabled={isPending}\n            className=\"border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]\"\n          >\n            {resolvedCancelText}\n          </AlertDialogCancel>\n          <AlertDialogAction\n            disabled={disabled || isPending}\n            onClick={(event) => {\n              event.preventDefault();\n              void onConfirm();\n            }}\n            className={styles.actionClassName}\n          >\n            {isPending ? <Loader2 className=\"size-4 animate-spin\" /> : null}\n            {resolvedConfirmText}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";;;;;AA4BA,IAAM,IAQF;CACF,SAAS;EACP,MAAM;EACN,wBAAwB;EACxB,eAAe;EACf,iBACE;EACH;CACD,SAAS;EACP,MAAM;EACN,wBAAwB;EACxB,eAAe;EACf,iBACE;EACH;CACD,QAAQ;EACN,MAAM;EACN,wBAAwB;EACxB,eAAe;EACf,iBACE;EACH;CACF;AAED,SAAgB,EAAoB,EAClC,SACA,iBACA,UACA,gBACA,gBACA,eACA,aAAU,WACV,eAAY,IACZ,cAAW,IACX,gBAC2B;CAC3B,IAAM,IAAK,GAAO,EACZ,IACJ,KAAe,EAAG,8BAA8B,UAAU,EACtD,IACJ,KAAc,EAAG,6BAA6B,SAAS,EACnD,IAAS,EAAe,IACxB,IAAO,EAAO;AAEpB,QACE,kBAAC,GAAD;EAAmB;EAAoB;YACrC,kBAAC,GAAD;GAAoB,WAAU;aAA9B,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,WAAW,kEAAkE,EAAO;eAEpF,kBAAC,GAAD,EAAM,WAAW,UAAU,EAAO,iBAAmB,CAAA;KACjD,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAkB,WAAU;gBACzB;MACgB,CAAA,EACnB,kBAAC,GAAD;MAAwB,WAAU;gBAC/B;MACsB,CAAA,CACrB;OACF;OACY,CAAA,EAEpB,kBAAC,GAAD;IAAmB,WAAU;cAA7B,CACE,kBAAC,GAAD;KACE,UAAU;KACV,WAAU;eAET;KACiB,CAAA,EACpB,kBAAC,GAAD;KACE,UAAU,KAAY;KACtB,UAAU,MAAU;AAEb,MADL,EAAM,gBAAgB,EACjB,GAAW;;KAElB,WAAW,EAAO;eANpB,CAQG,IAAY,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,GAAG,MAC1D,EACiB;OACF;MACD;;EACT,CAAA"}

package/dist/auth/components/profile/UserProfileMenu.js

@@ -1,77 +1,75 @@
 import { useAuthStore as e } from "../../store/authStore.js";
-import { useEffect as t, useRef as n, useState as r } from "react";
-import { useNavigate as i } from "react-router";
-import { Building2 as a, ChevronDown as o, LogOut as s, UserPlus as c } from "lucide-react";
-import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useTr as t } from "../../../shared/hooks/useTr.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { useNavigate as a } from "react-router";
+import { Building2 as o, ChevronDown as s, LogOut as c, UserPlus as l } from "lucide-react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/auth/components/profile/UserProfileMenu.tsx
 function f({ onSwitchWorkspace: f, onLogout: p, position: m = "right" }) {
-	let { t: h } = l(), g = (e, t) => {
-		let n = h(e);
-		return n === e ? t : n;
-	}, [_, v] = r(!1), y = n(null), b = i(), x = e((e) => e.user), S = e((e) => e.currentWorkspaceId);
-	t(() => {
+	let h = t(), [g, _] = i(!1), v = r(null), y = a(), b = e((e) => e.user), x = e((e) => e.currentWorkspaceId);
+	n(() => {
 		function e(e) {
-			y.current && !y.current.contains(e.target) && v(!1);
+			v.current && !v.current.contains(e.target) && _(!1);
 		}
-		if (_) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [_]);
-	let C = () => {
-		v(!1), p();
-	}, w = () => {
-		v(!1), f?.();
+		if (g) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [g]);
+	let S = () => {
+		_(!1), p();
+	}, C = () => {
+		_(!1), f?.();
 	};
-	if (!x) return null;
-	let T = () => {
-		if (x.firstName && x.lastName) return `${x.firstName[0]}${x.lastName[0]}`.toUpperCase();
-		if (x.name) {
-			let e = x.name.split(" ");
-			return e.length >= 2 ? `${e[0][0]}${e[1][0]}`.toUpperCase() : x.name.substring(0, 2).toUpperCase();
+	if (!b) return null;
+	let w = () => {
+		if (b.firstName && b.lastName) return `${b.firstName[0]}${b.lastName[0]}`.toUpperCase();
+		if (b.name) {
+			let e = b.name.split(" ");
+			return e.length >= 2 ? `${e[0][0]}${e[1][0]}`.toUpperCase() : b.name.substring(0, 2).toUpperCase();
 		}
-		return x.username ? x.username.substring(0, 2).toUpperCase() : x.email.substring(0, 2).toUpperCase();
-	}, E = x.name || `${x.firstName || ""} ${x.lastName || ""}`.trim() || x.username;
+		return b.username ? b.username.substring(0, 2).toUpperCase() : b.email.substring(0, 2).toUpperCase();
+	}, T = b.name || `${b.firstName || ""} ${b.lastName || ""}`.trim() || b.username;
 	return /* @__PURE__ */ d("div", {
 		className: "relative",
-		ref: y,
+		ref: v,
 		children: [/* @__PURE__ */ d("button", {
 			type: "button",
-			onClick: () => v(!_),
+			onClick: () => _(!g),
 			className: "flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-bg-sunken transition-colors",
-			"aria-label": "User menu",
-			"aria-expanded": _,
+			"aria-label": h("auth.profileMenu.userMenu", "User menu"),
+			"aria-expanded": g,
 			children: [
 				/* @__PURE__ */ u("div", {
 					className: "size-8 rounded-full bg-accent-blue flex items-center justify-center text-white text-sm font-medium overflow-hidden",
-					children: x.avatar ? /* @__PURE__ */ u("img", {
-						src: x.avatar,
-						alt: g("auth.profileMenu.avatarAlt", "Profile picture"),
+					children: b.avatar ? /* @__PURE__ */ u("img", {
+						src: b.avatar,
+						alt: h("auth.profileMenu.avatarAlt", "Profile picture"),
 						className: "size-full object-cover"
-					}) : T()
+					}) : w()
 				}),
 				/* @__PURE__ */ u("span", {
 					className: "hidden sm:block text-sm font-medium text-text-secondary",
-					children: E
+					children: T
 				}),
-				/* @__PURE__ */ u(o, { className: `size-4 text-text-secondary transition-transform ${_ ? "rotate-180" : ""}` })
+				/* @__PURE__ */ u(s, { className: `size-4 text-text-secondary transition-transform ${g ? "rotate-180" : ""}` })
 			]
-		}), _ && /* @__PURE__ */ d("div", {
+		}), g && /* @__PURE__ */ d("div", {
 			className: `absolute top-full mt-2 w-64 bg-bg-surface rounded-lg shadow-lg border border-border-subtle py-2 z-50 ${m === "right" ? "right-0" : "left-0"}`,
 			children: [/* @__PURE__ */ d("div", {
 				className: "px-4 py-3 border-b border-border-subtle",
 				children: [
 					/* @__PURE__ */ u("p", {
 						className: "text-sm font-medium text-text-primary truncate",
-						children: E
+						children: T
 					}),
 					/* @__PURE__ */ u("p", {
 						className: "text-xs text-text-secondary truncate",
-						children: x.email
+						children: b.email
 					}),
-					S && /* @__PURE__ */ d("p", {
+					x && /* @__PURE__ */ d("p", {
 						className: "text-xs text-text-tertiary mt-1 truncate",
 						children: [
-							"Workspace: ",
-							S.substring(0, 8),
+							h("auth.profileMenu.workspaceLabel", "Workspace:"),
+							" ",
+							x.substring(0, 8),
 							"..."
 						]
 					})
@@ -81,23 +79,23 @@ function f({ onSwitchWorkspace: f, onLogout: p, position: m = "right" }) {
 				children: [
 					f && /* @__PURE__ */ d("button", {
 						type: "button",
-						onClick: w,
+						onClick: C,
 						className: "w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors",
-						children: [/* @__PURE__ */ u(a, { className: "size-4" }), /* @__PURE__ */ u("span", { children: g("auth.profileMenu.switchWorkspace", "Switch Workspace") })]
+						children: [/* @__PURE__ */ u(o, { className: "size-4" }), /* @__PURE__ */ u("span", { children: h("auth.profileMenu.switchWorkspace", "Switch Workspace") })]
 					}),
 					/* @__PURE__ */ d("button", {
 						type: "button",
 						onClick: () => {
-							v(!1), b(`/auth/login?mode=add-account&returnTo=${encodeURIComponent(window.location.pathname + window.location.search)}`);
+							_(!1), y(`/auth/login?mode=add-account&returnTo=${encodeURIComponent(window.location.pathname + window.location.search)}`);
 						},
 						className: "w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors",
-						children: [/* @__PURE__ */ u(c, { className: "size-4" }), /* @__PURE__ */ u("span", { children: g("auth.profileMenu.addAccount", "Add account") })]
+						children: [/* @__PURE__ */ u(l, { className: "size-4" }), /* @__PURE__ */ u("span", { children: h("auth.profileMenu.addAccount", "Add account") })]
 					}),
 					/* @__PURE__ */ d("button", {
 						type: "button",
-						onClick: C,
+						onClick: S,
 						className: "w-full flex items-center gap-3 px-4 py-2 text-sm text-status-error-text hover:bg-status-error-bg-subtle transition-colors",
-						children: [/* @__PURE__ */ u(s, { className: "size-4" }), /* @__PURE__ */ u("span", { children: g("auth.profileMenu.logout", "Logout") })]
+						children: [/* @__PURE__ */ u(c, { className: "size-4" }), /* @__PURE__ */ u("span", { children: h("auth.profileMenu.logout", "Logout") })]
 					})
 				]
 			})]

package/dist/auth/components/profile/UserProfileMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfileMenu.js","names":[],"sources":["../../../../src/auth/components/profile/UserProfileMenu.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { LogOut, ChevronDown, Building2, UserPlus } from \"lucide-react\";\nimport { useNavigate } from \"react-router\";\nimport { useAuthStore } from \"../../store/authStore\";\n\nexport interface UserProfileMenuProps {\n  /**\n   * Callback when workspace switcher should be shown\n   */\n  onSwitchWorkspace?: () => void;\n\n  /**\n   * Logout handler (REQUIRED)\n   * Should clear auth state and redirect to login\n   */\n  onLogout: () => void;\n\n  /**\n   * Position of the dropdown menu\n   * @default 'right'\n   */\n  position?: \"left\" | \"right\";\n}\n\n/**\n * User Profile Menu Component\n *\n * Displays user avatar/icon with dropdown menu containing:\n * - User information\n * - Switch Workspace option\n * - Logout button\n *\n * @example\n * ```tsx\n * import { UserProfileMenu } from '@burdenoff/microfe-auth';\n *\n * function AppHeader() {\n *   return (\n *     <div className=\"header\">\n *       <UserProfileMenu\n *         onSwitchWorkspace={() => setShowWorkspaceSwitcher(true)}\n *         position=\"right\"\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function UserProfileMenu({\n  onSwitchWorkspace,\n  onLogout,\n  position = \"right\",\n}: UserProfileMenuProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const [isOpen, setIsOpen] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const navigate = useNavigate();\n\n  const user = useAuthStore((state) => state.user);\n  const currentWorkspaceId = useAuthStore((state) => state.currentWorkspaceId);\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }\n  }, [isOpen]);\n\n  const handleLogout = () => {\n    setIsOpen(false);\n    onLogout();\n  };\n\n  const handleSwitchWorkspace = () => {\n    setIsOpen(false);\n    onSwitchWorkspace?.();\n  };\n\n  if (!user) {\n    return null;\n  }\n\n  // Get user initials for avatar\n  const getInitials = () => {\n    if (user.firstName && user.lastName) {\n      return `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();\n    }\n    if (user.name) {\n      const parts = user.name.split(\" \");\n      if (parts.length >= 2) {\n        return `${parts[0][0]}${parts[1][0]}`.toUpperCase();\n      }\n      return user.name.substring(0, 2).toUpperCase();\n    }\n    if (user.username) {\n      return user.username.substring(0, 2).toUpperCase();\n    }\n    return user.email.substring(0, 2).toUpperCase();\n  };\n\n  const displayName =\n    user.name ||\n    `${user.firstName || \"\"} ${user.lastName || \"\"}`.trim() ||\n    user.username;\n\n  return (\n    <div className=\"relative\" ref={menuRef}>\n      {/* Profile Button */}\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-bg-sunken transition-colors\"\n        aria-label=\"User menu\"\n        aria-expanded={isOpen}\n      >\n        {/* Avatar */}\n        <div className=\"size-8 rounded-full bg-accent-blue flex items-center justify-center text-white text-sm font-medium overflow-hidden\">\n          {user.avatar ? (\n            <img\n              src={user.avatar}\n              alt={tr(\"auth.profileMenu.avatarAlt\", \"Profile picture\")}\n              className=\"size-full object-cover\"\n            />\n          ) : (\n            getInitials()\n          )}\n        </div>\n\n        {/* User Name (optional, hide on small screens) */}\n        <span className=\"hidden sm:block text-sm font-medium text-text-secondary\">\n          {displayName}\n        </span>\n\n        {/* Chevron */}\n        <ChevronDown\n          className={`size-4 text-text-secondary transition-transform ${\n            isOpen ? \"rotate-180\" : \"\"\n          }`}\n        />\n      </button>\n\n      {/* Dropdown Menu */}\n      {isOpen && (\n        <div\n          className={`absolute top-full mt-2 w-64 bg-bg-surface rounded-lg shadow-lg border border-border-subtle py-2 z-50 ${\n            position === \"right\" ? \"right-0\" : \"left-0\"\n          }`}\n        >\n          {/* User Info Section */}\n          <div className=\"px-4 py-3 border-b border-border-subtle\">\n            <p className=\"text-sm font-medium text-text-primary truncate\">\n              {displayName}\n            </p>\n            <p className=\"text-xs text-text-secondary truncate\">{user.email}</p>\n            {currentWorkspaceId && (\n              <p className=\"text-xs text-text-tertiary mt-1 truncate\">\n                Workspace: {currentWorkspaceId.substring(0, 8)}...\n              </p>\n            )}\n          </div>\n\n          {/* Menu Items */}\n          <div className=\"py-1\">\n            {/* Switch Workspace */}\n            {onSwitchWorkspace && (\n              <button\n                type=\"button\"\n                onClick={handleSwitchWorkspace}\n                className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors\"\n              >\n                <Building2 className=\"size-4\" />\n                <span>\n                  {tr(\"auth.profileMenu.switchWorkspace\", \"Switch Workspace\")}\n                </span>\n              </button>\n            )}\n\n            {/* Add Account */}\n            <button\n              type=\"button\"\n              onClick={() => {\n                setIsOpen(false);\n                const returnTo = encodeURIComponent(\n                  window.location.pathname + window.location.search,\n                );\n                navigate(`/auth/login?mode=add-account&returnTo=${returnTo}`);\n              }}\n              className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors\"\n            >\n              <UserPlus className=\"size-4\" />\n              <span>{tr(\"auth.profileMenu.addAccount\", \"Add account\")}</span>\n            </button>\n\n            {/* Logout */}\n            <button\n              type=\"button\"\n              onClick={handleLogout}\n              className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-status-error-text hover:bg-status-error-bg-subtle transition-colors\"\n            >\n              <LogOut className=\"size-4\" />\n              <span>{tr(\"auth.profileMenu.logout\", \"Logout\")}</span>\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiDA,SAAgB,EAAgB,EAC9B,sBACA,aACA,cAAW,WACY;CACvB,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAU,EAAuB,KAAK,EACtC,IAAW,GAAa,EAExB,IAAO,GAAc,MAAU,EAAM,KAAK,EAC1C,IAAqB,GAAc,MAAU,EAAM,mBAAmB;AAG5E,SAAgB;EACd,SAAS,EAAmB,GAAmB;AAC7C,GAAI,EAAQ,WAAW,CAAC,EAAQ,QAAQ,SAAS,EAAM,OAAe,IACpE,EAAU,GAAM;;AAIpB,MAAI,EAEF,QADA,SAAS,iBAAiB,aAAa,EAAmB,QAExD,SAAS,oBAAoB,aAAa,EAAmB;IAEhE,CAAC,EAAO,CAAC;CAEZ,IAAM,UAAqB;AAEzB,EADA,EAAU,GAAM,EAChB,GAAU;IAGN,UAA8B;AAElC,EADA,EAAU,GAAM,EAChB,KAAqB;;AAGvB,KAAI,CAAC,EACH,QAAO;CAIT,IAAM,UAAoB;AACxB,MAAI,EAAK,aAAa,EAAK,SACzB,QAAO,GAAG,EAAK,UAAU,KAAK,EAAK,SAAS,KAAK,aAAa;AAEhE,MAAI,EAAK,MAAM;GACb,IAAM,IAAQ,EAAK,KAAK,MAAM,IAAI;AAIlC,UAHI,EAAM,UAAU,IACX,GAAG,EAAM,GAAG,KAAK,EAAM,GAAG,KAAK,aAAa,GAE9C,EAAK,KAAK,UAAU,GAAG,EAAE,CAAC,aAAa;;AAKhD,SAHI,EAAK,WACA,EAAK,SAAS,UAAU,GAAG,EAAE,CAAC,aAAa,GAE7C,EAAK,MAAM,UAAU,GAAG,EAAE,CAAC,aAAa;IAG3C,IACJ,EAAK,QACL,GAAG,EAAK,aAAa,GAAG,GAAG,EAAK,YAAY,KAAK,MAAM,IACvD,EAAK;AAEP,QACE,kBAAC,OAAD;EAAK,WAAU;EAAW,KAAK;YAA/B,CAEE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAU,CAAC,EAAO;GACjC,WAAU;GACV,cAAW;GACX,iBAAe;aALjB;IAQE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAK,SACJ,kBAAC,OAAD;MACE,KAAK,EAAK;MACV,KAAK,EAAG,8BAA8B,kBAAkB;MACxD,WAAU;MACV,CAAA,GAEF,GAAa;KAEX,CAAA;IAGN,kBAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA;IAGP,kBAAC,GAAD,EACE,WAAW,mDACT,IAAS,eAAe,MAE1B,CAAA;IACK;MAGR,KACC,kBAAC,OAAD;GACE,WAAW,wGACT,MAAa,UAAU,YAAY;aAFvC,CAME,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBACV;MACC,CAAA;KACJ,kBAAC,KAAD;MAAG,WAAU;gBAAwC,EAAK;MAAU,CAAA;KACnE,KACC,kBAAC,KAAD;MAAG,WAAU;gBAAb;OAAwD;OAC1C,EAAmB,UAAU,GAAG,EAAE;OAAC;OAC7C;;KAEF;OAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEG,KACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAChC,kBAAC,QAAD,EAAA,UACG,EAAG,oCAAoC,mBAAmB,EACtD,CAAA,CACA;;KAIX,kBAAC,UAAD;MACE,MAAK;MACL,eAAe;AAKb,OAJA,EAAU,GAAM,EAIhB,EAAS,yCAHQ,mBACf,OAAO,SAAS,WAAW,OAAO,SAAS,OAC5C,GAC4D;;MAE/D,WAAU;gBATZ,CAWE,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA,EAC/B,kBAAC,QAAD,EAAA,UAAO,EAAG,+BAA+B,cAAc,EAAQ,CAAA,CACxD;;KAGT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA,EAC7B,kBAAC,QAAD,EAAA,UAAO,EAAG,2BAA2B,SAAS,EAAQ,CAAA,CAC/C;;KACL;MACF;KAEJ"}
+{"version":3,"file":"UserProfileMenu.js","names":[],"sources":["../../../../src/auth/components/profile/UserProfileMenu.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { useTr } from \"../../../shared/hooks/useTr\";\nimport { LogOut, ChevronDown, Building2, UserPlus } from \"lucide-react\";\nimport { useNavigate } from \"react-router\";\nimport { useAuthStore } from \"../../store/authStore\";\n\nexport interface UserProfileMenuProps {\n  /**\n   * Callback when workspace switcher should be shown\n   */\n  onSwitchWorkspace?: () => void;\n\n  /**\n   * Logout handler (REQUIRED)\n   * Should clear auth state and redirect to login\n   */\n  onLogout: () => void;\n\n  /**\n   * Position of the dropdown menu\n   * @default 'right'\n   */\n  position?: \"left\" | \"right\";\n}\n\n/**\n * User Profile Menu Component\n *\n * Displays user avatar/icon with dropdown menu containing:\n * - User information\n * - Switch Workspace option\n * - Logout button\n *\n * @example\n * ```tsx\n * import { UserProfileMenu } from '@burdenoff/microfe-auth';\n *\n * function AppHeader() {\n *   return (\n *     <div className=\"header\">\n *       <UserProfileMenu\n *         onSwitchWorkspace={() => setShowWorkspaceSwitcher(true)}\n *         position=\"right\"\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function UserProfileMenu({\n  onSwitchWorkspace,\n  onLogout,\n  position = \"right\",\n}: UserProfileMenuProps) {\n  const tr = useTr();\n\n  const [isOpen, setIsOpen] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const navigate = useNavigate();\n\n  const user = useAuthStore((state) => state.user);\n  const currentWorkspaceId = useAuthStore((state) => state.currentWorkspaceId);\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }\n  }, [isOpen]);\n\n  const handleLogout = () => {\n    setIsOpen(false);\n    onLogout();\n  };\n\n  const handleSwitchWorkspace = () => {\n    setIsOpen(false);\n    onSwitchWorkspace?.();\n  };\n\n  if (!user) {\n    return null;\n  }\n\n  // Get user initials for avatar\n  const getInitials = () => {\n    if (user.firstName && user.lastName) {\n      return `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();\n    }\n    if (user.name) {\n      const parts = user.name.split(\" \");\n      if (parts.length >= 2) {\n        return `${parts[0][0]}${parts[1][0]}`.toUpperCase();\n      }\n      return user.name.substring(0, 2).toUpperCase();\n    }\n    if (user.username) {\n      return user.username.substring(0, 2).toUpperCase();\n    }\n    return user.email.substring(0, 2).toUpperCase();\n  };\n\n  const displayName =\n    user.name ||\n    `${user.firstName || \"\"} ${user.lastName || \"\"}`.trim() ||\n    user.username;\n\n  return (\n    <div className=\"relative\" ref={menuRef}>\n      {/* Profile Button */}\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-bg-sunken transition-colors\"\n        aria-label={tr(\"auth.profileMenu.userMenu\", \"User menu\")}\n        aria-expanded={isOpen}\n      >\n        {/* Avatar */}\n        <div className=\"size-8 rounded-full bg-accent-blue flex items-center justify-center text-white text-sm font-medium overflow-hidden\">\n          {user.avatar ? (\n            <img\n              src={user.avatar}\n              alt={tr(\"auth.profileMenu.avatarAlt\", \"Profile picture\")}\n              className=\"size-full object-cover\"\n            />\n          ) : (\n            getInitials()\n          )}\n        </div>\n\n        {/* User Name (optional, hide on small screens) */}\n        <span className=\"hidden sm:block text-sm font-medium text-text-secondary\">\n          {displayName}\n        </span>\n\n        {/* Chevron */}\n        <ChevronDown\n          className={`size-4 text-text-secondary transition-transform ${\n            isOpen ? \"rotate-180\" : \"\"\n          }`}\n        />\n      </button>\n\n      {/* Dropdown Menu */}\n      {isOpen && (\n        <div\n          className={`absolute top-full mt-2 w-64 bg-bg-surface rounded-lg shadow-lg border border-border-subtle py-2 z-50 ${\n            position === \"right\" ? \"right-0\" : \"left-0\"\n          }`}\n        >\n          {/* User Info Section */}\n          <div className=\"px-4 py-3 border-b border-border-subtle\">\n            <p className=\"text-sm font-medium text-text-primary truncate\">\n              {displayName}\n            </p>\n            <p className=\"text-xs text-text-secondary truncate\">{user.email}</p>\n            {currentWorkspaceId && (\n              <p className=\"text-xs text-text-tertiary mt-1 truncate\">\n                {tr(\"auth.profileMenu.workspaceLabel\", \"Workspace:\")}{\" \"}\n                {currentWorkspaceId.substring(0, 8)}...\n              </p>\n            )}\n          </div>\n\n          {/* Menu Items */}\n          <div className=\"py-1\">\n            {/* Switch Workspace */}\n            {onSwitchWorkspace && (\n              <button\n                type=\"button\"\n                onClick={handleSwitchWorkspace}\n                className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors\"\n              >\n                <Building2 className=\"size-4\" />\n                <span>\n                  {tr(\"auth.profileMenu.switchWorkspace\", \"Switch Workspace\")}\n                </span>\n              </button>\n            )}\n\n            {/* Add Account */}\n            <button\n              type=\"button\"\n              onClick={() => {\n                setIsOpen(false);\n                const returnTo = encodeURIComponent(\n                  window.location.pathname + window.location.search,\n                );\n                navigate(`/auth/login?mode=add-account&returnTo=${returnTo}`);\n              }}\n              className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors\"\n            >\n              <UserPlus className=\"size-4\" />\n              <span>{tr(\"auth.profileMenu.addAccount\", \"Add account\")}</span>\n            </button>\n\n            {/* Logout */}\n            <button\n              type=\"button\"\n              onClick={handleLogout}\n              className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-status-error-text hover:bg-status-error-bg-subtle transition-colors\"\n            >\n              <LogOut className=\"size-4\" />\n              <span>{tr(\"auth.profileMenu.logout\", \"Logout\")}</span>\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiDA,SAAgB,EAAgB,EAC9B,sBACA,aACA,cAAW,WACY;CACvB,IAAM,IAAK,GAAO,EAEZ,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAU,EAAuB,KAAK,EACtC,IAAW,GAAa,EAExB,IAAO,GAAc,MAAU,EAAM,KAAK,EAC1C,IAAqB,GAAc,MAAU,EAAM,mBAAmB;AAG5E,SAAgB;EACd,SAAS,EAAmB,GAAmB;AAC7C,GAAI,EAAQ,WAAW,CAAC,EAAQ,QAAQ,SAAS,EAAM,OAAe,IACpE,EAAU,GAAM;;AAIpB,MAAI,EAEF,QADA,SAAS,iBAAiB,aAAa,EAAmB,QAExD,SAAS,oBAAoB,aAAa,EAAmB;IAEhE,CAAC,EAAO,CAAC;CAEZ,IAAM,UAAqB;AAEzB,EADA,EAAU,GAAM,EAChB,GAAU;IAGN,UAA8B;AAElC,EADA,EAAU,GAAM,EAChB,KAAqB;;AAGvB,KAAI,CAAC,EACH,QAAO;CAIT,IAAM,UAAoB;AACxB,MAAI,EAAK,aAAa,EAAK,SACzB,QAAO,GAAG,EAAK,UAAU,KAAK,EAAK,SAAS,KAAK,aAAa;AAEhE,MAAI,EAAK,MAAM;GACb,IAAM,IAAQ,EAAK,KAAK,MAAM,IAAI;AAIlC,UAHI,EAAM,UAAU,IACX,GAAG,EAAM,GAAG,KAAK,EAAM,GAAG,KAAK,aAAa,GAE9C,EAAK,KAAK,UAAU,GAAG,EAAE,CAAC,aAAa;;AAKhD,SAHI,EAAK,WACA,EAAK,SAAS,UAAU,GAAG,EAAE,CAAC,aAAa,GAE7C,EAAK,MAAM,UAAU,GAAG,EAAE,CAAC,aAAa;IAG3C,IACJ,EAAK,QACL,GAAG,EAAK,aAAa,GAAG,GAAG,EAAK,YAAY,KAAK,MAAM,IACvD,EAAK;AAEP,QACE,kBAAC,OAAD;EAAK,WAAU;EAAW,KAAK;YAA/B,CAEE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAU,CAAC,EAAO;GACjC,WAAU;GACV,cAAY,EAAG,6BAA6B,YAAY;GACxD,iBAAe;aALjB;IAQE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAK,SACJ,kBAAC,OAAD;MACE,KAAK,EAAK;MACV,KAAK,EAAG,8BAA8B,kBAAkB;MACxD,WAAU;MACV,CAAA,GAEF,GAAa;KAEX,CAAA;IAGN,kBAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA;IAGP,kBAAC,GAAD,EACE,WAAW,mDACT,IAAS,eAAe,MAE1B,CAAA;IACK;MAGR,KACC,kBAAC,OAAD;GACE,WAAW,wGACT,MAAa,UAAU,YAAY;aAFvC,CAME,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBACV;MACC,CAAA;KACJ,kBAAC,KAAD;MAAG,WAAU;gBAAwC,EAAK;MAAU,CAAA;KACnE,KACC,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAG,mCAAmC,aAAa;OAAE;OACrD,EAAmB,UAAU,GAAG,EAAE;OAAC;OAClC;;KAEF;OAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEG,KACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAChC,kBAAC,QAAD,EAAA,UACG,EAAG,oCAAoC,mBAAmB,EACtD,CAAA,CACA;;KAIX,kBAAC,UAAD;MACE,MAAK;MACL,eAAe;AAKb,OAJA,EAAU,GAAM,EAIhB,EAAS,yCAHQ,mBACf,OAAO,SAAS,WAAW,OAAO,SAAS,OAC5C,GAC4D;;MAE/D,WAAU;gBATZ,CAWE,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA,EAC/B,kBAAC,QAAD,EAAA,UAAO,EAAG,+BAA+B,cAAc,EAAQ,CAAA,CACxD;;KAGT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA,EAC7B,kBAAC,QAAD,EAAA,UAAO,EAAG,2BAA2B,SAAS,EAAQ,CAAA,CAC/C;;KACL;MACF;KAEJ"}