@burdenoff/microfe-auth 2026.527.1 → 2026.527.2

package/dist/auth/components/workspace/WorkspaceSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceSelector.js","names":[],"sources":["../../../../src/auth/components/workspace/WorkspaceSelector.tsx"],"sourcesContent":["import { useState, useMemo, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { Workspace } from \"../../types\";\n\n/**\n * Organization interface (grouped from workspaces)\n */\nexport interface Organization {\n  id: string;\n  name: string;\n  workspaceCount: number;\n}\n\n/**\n * Project interface (optional, for future use)\n */\nexport interface Project {\n  id: string;\n  name: string;\n  workspaceId: string;\n}\n\nexport interface WorkspaceSelectorProps {\n  /**\n   * Control modal visibility\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback when modal is closed without selection\n   */\n  onClose: () => void;\n\n  /**\n   * List of workspaces to choose from\n   */\n  workspaces: Workspace[];\n\n  /**\n   * Optional list of projects (filtered by workspace)\n   */\n  projects?: Project[];\n\n  /**\n   * Callback when workspace is selected and confirmed\n   */\n  onSelect: (workspace: Workspace, project?: Project) => void;\n\n  /**\n   * Loading state while issuing workspace token\n   */\n  isLoading?: boolean;\n\n  /**\n   * Error message to display\n   */\n  error?: string | null;\n}\n\n/**\n * WorkspaceSelector Component\n *\n * Multi-level workspace selection modal for use across all Burdenoff products.\n *\n * Features:\n * - Three-tier selection: Organization → Workspace → Project (optional)\n * - Auto-select if only one option at each level\n * - Loading and error states\n * - Clean, accessible UI\n *\n * Usage:\n * ```tsx\n * import { WorkspaceSelector } from '@burdenoff/microfe-auth';\n *\n * <WorkspaceSelector\n *   isOpen={showSelector}\n *   onClose={() => setShowSelector(false)}\n *   workspaces={workspaces}\n *   onSelect={async (workspace) => {\n *     await issueWorkspaceToken(workspace.id);\n *     navigate('/');\n *   }}\n * />\n * ```\n */\nexport function WorkspaceSelector({\n  isOpen,\n  onClose,\n  workspaces,\n  projects = [],\n  onSelect,\n  isLoading = false,\n  error = null,\n}: WorkspaceSelectorProps) {\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  // Selection state\n  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);\n  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string | null>(\n    null,\n  );\n  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(\n    null,\n  );\n\n  // Group workspaces by organization\n  const organizations = useMemo<Organization[]>(() => {\n    const orgMap = new Map<string, { name: string; count: number }>();\n\n    workspaces.forEach((workspace) => {\n      const orgId = workspace.organizationId || \"default\";\n      if (!orgMap.has(orgId)) {\n        // Use org ID for name since workspace doesn't have organizationName\n        orgMap.set(orgId, {\n          name:\n            orgId === \"default\"\n              ? \"Default\"\n              : `Organization ${orgId.slice(0, 8)}`,\n          count: 0,\n        });\n      }\n      orgMap.get(orgId)!.count++;\n    });\n\n    return Array.from(orgMap.entries()).map(([id, { name, count }]) => ({\n      id,\n      name,\n      workspaceCount: count,\n    }));\n  }, [workspaces]);\n\n  // Filter workspaces by selected organization\n  const filteredWorkspaces = useMemo(() => {\n    if (!selectedOrgId) return workspaces;\n    return workspaces.filter(\n      (w) => (w.organizationId || \"default\") === selectedOrgId,\n    );\n  }, [workspaces, selectedOrgId]);\n\n  // Filter projects by selected workspace\n  const filteredProjects = useMemo(() => {\n    if (!selectedWorkspaceId) return [];\n    return projects.filter((p) => p.workspaceId === selectedWorkspaceId);\n  }, [projects, selectedWorkspaceId]);\n\n  // Get selected workspace object\n  const selectedWorkspace = useMemo(() => {\n    return workspaces.find((w) => w.id === selectedWorkspaceId);\n  }, [workspaces, selectedWorkspaceId]);\n\n  // Get selected project object\n  const selectedProject = useMemo(() => {\n    return projects.find((p) => p.id === selectedProjectId);\n  }, [projects, selectedProjectId]);\n\n  // Auto-select if only one organization\n  useEffect(() => {\n    if (organizations.length === 1 && !selectedOrgId) {\n      setSelectedOrgId(organizations[0].id);\n    }\n  }, [organizations, selectedOrgId]);\n\n  // Auto-select if only one workspace\n  useEffect(() => {\n    if (filteredWorkspaces.length === 1 && !selectedWorkspaceId) {\n      setSelectedWorkspaceId(filteredWorkspaces[0].id);\n    }\n  }, [filteredWorkspaces, selectedWorkspaceId]);\n\n  // Handle organization selection\n  const handleOrgChange = (orgId: string) => {\n    setSelectedOrgId(orgId);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n  };\n\n  // Handle workspace selection\n  const handleWorkspaceChange = (workspaceId: string) => {\n    setSelectedWorkspaceId(workspaceId);\n    setSelectedProjectId(null);\n  };\n\n  // Handle project selection\n  const handleProjectChange = (projectId: string) => {\n    setSelectedProjectId(projectId);\n  };\n\n  // Handle continue button\n  const handleContinue = () => {\n    if (!selectedWorkspace) return;\n    onSelect(selectedWorkspace, selectedProject);\n  };\n\n  // Handle cancel\n  const handleCancel = () => {\n    setSelectedOrgId(null);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n    onClose();\n  };\n\n  // Check if continue button should be enabled\n  const canContinue = selectedWorkspaceId !== null;\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        onClick={handleCancel}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div className=\"relative bg-bg-surface rounded-2xl shadow-xl max-w-2xl w-full mx-4 p-6 space-y-6\">\n        {/* Header */}\n        <div className=\"space-y-2\">\n          <h2 className=\"text-2xl font-semibold text-foreground\">\n            {tr(\"auth.workspaceSelector.title\", \"Select Your Workspace\")}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              \"auth.workspaceSelector.subtitle\",\n              \"Choose the workspace you want to work in. You can switch workspaces later from the header.\",\n            )}\n          </p>\n        </div>\n\n        {/* Error display */}\n        {error && (\n          <div className=\"rounded-lg bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n            <p className=\"font-medium\">\n              {tr(\"auth.workspaceSelector.error\", \"Error\")}\n            </p>\n            <p>{error}</p>\n          </div>\n        )}\n\n        {/* Form */}\n        <div className=\"space-y-4\">\n          {/* Organization selection */}\n          {organizations.length > 1 && (\n            <div className=\"space-y-2\">\n              <label className=\"block text-sm font-medium text-text-secondary\">\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"h-4 w-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                    />\n                  </svg>\n                  Organization\n                </span>\n              </label>\n              <select\n                value={selectedOrgId || \"\"}\n                onChange={(e) => handleOrgChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.selectOrg\",\n                    \"Select organization...\",\n                  )}\n                </option>\n                {organizations.map((org) => (\n                  <option key={org.id} value={org.id}>\n                    {org.name} ({org.workspaceCount} workspace\n                    {org.workspaceCount !== 1 ? \"s\" : \"\"})\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Workspace selection */}\n          <div className=\"space-y-2\">\n            <label className=\"block text-sm font-medium text-text-secondary\">\n              <span className=\"flex items-center gap-2\">\n                <svg\n                  className=\"h-4 w-4\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                  />\n                </svg>\n                Workspace\n              </span>\n            </label>\n            <select\n              value={selectedWorkspaceId || \"\"}\n              onChange={(e) => handleWorkspaceChange(e.target.value)}\n              disabled={!selectedOrgId && organizations.length > 1}\n              className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <option value=\"\">\n                {tr(\n                  \"auth.workspaceSelector.selectWorkspace\",\n                  \"Select workspace...\",\n                )}\n              </option>\n              {filteredWorkspaces.map((workspace) => (\n                <option key={workspace.id} value={workspace.id}>\n                  {workspace.name} ({workspace.slug})\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Project selection (optional) */}\n          {filteredProjects.length > 0 && (\n            <div className=\"space-y-2\">\n              <label className=\"block text-sm font-medium text-text-secondary\">\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"h-4 w-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                    />\n                  </svg>\n                  Project (Optional)\n                </span>\n              </label>\n              <select\n                value={selectedProjectId || \"\"}\n                onChange={(e) => handleProjectChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.noProject\",\n                    \"No project selected\",\n                  )}\n                </option>\n                {filteredProjects.map((project) => (\n                  <option key={project.id} value={project.id}>\n                    {project.name}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Selection summary */}\n          {selectedWorkspace && (\n            <div className=\"rounded-lg bg-bg-sunken p-4 space-y-2\">\n              <p className=\"text-sm font-medium text-foreground\">\n                {tr(\"auth.workspaceSelector.selected\", \"Selected:\")}\n              </p>\n              <div className=\"text-sm text-text-secondary space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                    />\n                  </svg>\n                  <span>{selectedWorkspace.name}</span>\n                </div>\n                {selectedProject && (\n                  <div className=\"flex items-center gap-2\">\n                    <svg\n                      className=\"h-3 w-3\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                      />\n                    </svg>\n                    <span>{selectedProject.name}</span>\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-end gap-3 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleContinue}\n            disabled={!canContinue || isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isLoading\n              ? tr(\"auth.workspaceSelector.loading\", \"Loading...\")\n              : tr(\"auth.workspaceSelector.continue\", \"Continue\")}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"WorkspaceSelector.js","names":[],"sources":["../../../../src/auth/components/workspace/WorkspaceSelector.tsx"],"sourcesContent":["import { useState, useMemo, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { Workspace } from \"../../types\";\n\n/**\n * Organization interface (grouped from workspaces)\n */\nexport interface Organization {\n  id: string;\n  name: string;\n  workspaceCount: number;\n}\n\n/**\n * Project interface (optional, for future use)\n */\nexport interface Project {\n  id: string;\n  name: string;\n  workspaceId: string;\n}\n\nexport interface WorkspaceSelectorProps {\n  /**\n   * Control modal visibility\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback when modal is closed without selection\n   */\n  onClose: () => void;\n\n  /**\n   * List of workspaces to choose from\n   */\n  workspaces: Workspace[];\n\n  /**\n   * Optional list of projects (filtered by workspace)\n   */\n  projects?: Project[];\n\n  /**\n   * Callback when workspace is selected and confirmed\n   */\n  onSelect: (workspace: Workspace, project?: Project) => void;\n\n  /**\n   * Loading state while issuing workspace token\n   */\n  isLoading?: boolean;\n\n  /**\n   * Error message to display\n   */\n  error?: string | null;\n}\n\n/**\n * WorkspaceSelector Component\n *\n * Multi-level workspace selection modal for use across all Burdenoff products.\n *\n * Features:\n * - Three-tier selection: Organization → Workspace → Project (optional)\n * - Auto-select if only one option at each level\n * - Loading and error states\n * - Clean, accessible UI\n *\n * Usage:\n * ```tsx\n * import { WorkspaceSelector } from '@burdenoff/microfe-auth';\n *\n * <WorkspaceSelector\n *   isOpen={showSelector}\n *   onClose={() => setShowSelector(false)}\n *   workspaces={workspaces}\n *   onSelect={async (workspace) => {\n *     await issueWorkspaceToken(workspace.id);\n *     navigate('/');\n *   }}\n * />\n * ```\n */\nexport function WorkspaceSelector({\n  isOpen,\n  onClose,\n  workspaces,\n  projects = [],\n  onSelect,\n  isLoading = false,\n  error = null,\n}: WorkspaceSelectorProps) {\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  // Selection state\n  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);\n  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string | null>(\n    null,\n  );\n  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(\n    null,\n  );\n\n  // Group workspaces by organization\n  const organizations = useMemo<Organization[]>(() => {\n    const orgMap = new Map<string, { name: string; count: number }>();\n\n    workspaces.forEach((workspace) => {\n      const orgId = workspace.organizationId || \"default\";\n      if (!orgMap.has(orgId)) {\n        // Use org ID for name since workspace doesn't have organizationName\n        orgMap.set(orgId, {\n          name:\n            orgId === \"default\"\n              ? \"Default\"\n              : `Organization ${orgId.slice(0, 8)}`,\n          count: 0,\n        });\n      }\n      orgMap.get(orgId)!.count++;\n    });\n\n    return Array.from(orgMap.entries()).map(([id, { name, count }]) => ({\n      id,\n      name,\n      workspaceCount: count,\n    }));\n  }, [workspaces]);\n\n  // Filter workspaces by selected organization\n  const filteredWorkspaces = useMemo(() => {\n    if (!selectedOrgId) return workspaces;\n    return workspaces.filter(\n      (w) => (w.organizationId || \"default\") === selectedOrgId,\n    );\n  }, [workspaces, selectedOrgId]);\n\n  // Filter projects by selected workspace\n  const filteredProjects = useMemo(() => {\n    if (!selectedWorkspaceId) return [];\n    return projects.filter((p) => p.workspaceId === selectedWorkspaceId);\n  }, [projects, selectedWorkspaceId]);\n\n  // Get selected workspace object\n  const selectedWorkspace = useMemo(() => {\n    return workspaces.find((w) => w.id === selectedWorkspaceId);\n  }, [workspaces, selectedWorkspaceId]);\n\n  // Get selected project object\n  const selectedProject = useMemo(() => {\n    return projects.find((p) => p.id === selectedProjectId);\n  }, [projects, selectedProjectId]);\n\n  // Auto-select if only one organization\n  useEffect(() => {\n    if (organizations.length === 1 && !selectedOrgId) {\n      setSelectedOrgId(organizations[0].id);\n    }\n  }, [organizations, selectedOrgId]);\n\n  // Auto-select if only one workspace\n  useEffect(() => {\n    if (filteredWorkspaces.length === 1 && !selectedWorkspaceId) {\n      setSelectedWorkspaceId(filteredWorkspaces[0].id);\n    }\n  }, [filteredWorkspaces, selectedWorkspaceId]);\n\n  // Handle organization selection\n  const handleOrgChange = (orgId: string) => {\n    setSelectedOrgId(orgId);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n  };\n\n  // Handle workspace selection\n  const handleWorkspaceChange = (workspaceId: string) => {\n    setSelectedWorkspaceId(workspaceId);\n    setSelectedProjectId(null);\n  };\n\n  // Handle project selection\n  const handleProjectChange = (projectId: string) => {\n    setSelectedProjectId(projectId);\n  };\n\n  // Handle continue button\n  const handleContinue = () => {\n    if (!selectedWorkspace) return;\n    onSelect(selectedWorkspace, selectedProject);\n  };\n\n  // Handle cancel\n  const handleCancel = () => {\n    setSelectedOrgId(null);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n    onClose();\n  };\n\n  // Check if continue button should be enabled\n  const canContinue = selectedWorkspaceId !== null;\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        onClick={handleCancel}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div className=\"relative bg-bg-surface rounded-2xl shadow-xl max-w-2xl w-full mx-4 p-6 space-y-6\">\n        {/* Header */}\n        <div className=\"space-y-2\">\n          <h2 className=\"text-2xl font-semibold text-foreground\">\n            {tr(\"auth.workspaceSelector.title\", \"Select Your Workspace\")}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              \"auth.workspaceSelector.subtitle\",\n              \"Choose the workspace you want to work in. You can switch workspaces later from the header.\",\n            )}\n          </p>\n        </div>\n\n        {/* Error display */}\n        {error && (\n          <div className=\"rounded-lg bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n            <p className=\"font-medium\">\n              {tr(\"auth.workspaceSelector.error\", \"Error\")}\n            </p>\n            <p>{error}</p>\n          </div>\n        )}\n\n        {/* Form */}\n        <div className=\"space-y-4\">\n          {/* Organization selection */}\n          {organizations.length > 1 && (\n            <div className=\"space-y-2\">\n              <label className=\"block text-sm font-medium text-text-secondary\">\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                    />\n                  </svg>\n                  Organization\n                </span>\n              </label>\n              <select\n                value={selectedOrgId || \"\"}\n                onChange={(e) => handleOrgChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.selectOrg\",\n                    \"Select organization...\",\n                  )}\n                </option>\n                {organizations.map((org) => (\n                  <option key={org.id} value={org.id}>\n                    {org.name} ({org.workspaceCount} workspace\n                    {org.workspaceCount !== 1 ? \"s\" : \"\"})\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Workspace selection */}\n          <div className=\"space-y-2\">\n            <label className=\"block text-sm font-medium text-text-secondary\">\n              <span className=\"flex items-center gap-2\">\n                <svg\n                  className=\"size-4\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                  />\n                </svg>\n                Workspace\n              </span>\n            </label>\n            <select\n              value={selectedWorkspaceId || \"\"}\n              onChange={(e) => handleWorkspaceChange(e.target.value)}\n              disabled={!selectedOrgId && organizations.length > 1}\n              className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <option value=\"\">\n                {tr(\n                  \"auth.workspaceSelector.selectWorkspace\",\n                  \"Select workspace...\",\n                )}\n              </option>\n              {filteredWorkspaces.map((workspace) => (\n                <option key={workspace.id} value={workspace.id}>\n                  {workspace.name} ({workspace.slug})\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Project selection (optional) */}\n          {filteredProjects.length > 0 && (\n            <div className=\"space-y-2\">\n              <label className=\"block text-sm font-medium text-text-secondary\">\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                    />\n                  </svg>\n                  Project (Optional)\n                </span>\n              </label>\n              <select\n                value={selectedProjectId || \"\"}\n                onChange={(e) => handleProjectChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.noProject\",\n                    \"No project selected\",\n                  )}\n                </option>\n                {filteredProjects.map((project) => (\n                  <option key={project.id} value={project.id}>\n                    {project.name}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Selection summary */}\n          {selectedWorkspace && (\n            <div className=\"rounded-lg bg-bg-sunken p-4 space-y-2\">\n              <p className=\"text-sm font-medium text-foreground\">\n                {tr(\"auth.workspaceSelector.selected\", \"Selected:\")}\n              </p>\n              <div className=\"text-sm text-text-secondary space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-3\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                    />\n                  </svg>\n                  <span>{selectedWorkspace.name}</span>\n                </div>\n                {selectedProject && (\n                  <div className=\"flex items-center gap-2\">\n                    <svg\n                      className=\"size-3\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                      />\n                    </svg>\n                    <span>{selectedProject.name}</span>\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-end gap-3 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleContinue}\n            disabled={!canContinue || isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isLoading\n              ? tr(\"auth.workspaceSelector.loading\", \"Loading...\")\n              : tr(\"auth.workspaceSelector.continue\", \"Continue\")}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/hooks/index.js

@@ -1,16 +1,16 @@
 import "../store/authStore.js";
 import "./useAuthOperations.js";
+import "./useMyWorkspaces.js";
+import "./useOAuthOperations.js";
 import "./useMfaOperations.js";
 import "./usePasswordOperations.js";
 import "./useSessionOperations.js";
 import "./useApiKeyOperations.js";
 import "./useAppOperations.js";
 import "./useWorkspaceOperations.js";
-import "./useMyWorkspaces.js";
 import "./useContextSwitcherData.js";
 import "./useDelegationOperations.js";
 import "./useUserOperations.js";
 import "./useSsoOperations.js";
-import "./useOAuthOperations.js";
 import "./useAccountOperations.js";
 import "./useAuthPermissions.js";

package/dist/auth/index.js

@@ -1,17 +1,17 @@
 import "./providers/AuthProvider.js";
 import "./store/authStore.js";
 import "./hooks/useAuthOperations.js";
+import "./hooks/useMyWorkspaces.js";
+import "./pages/SSORelayPage.js";
+import "./pages/SSORelayCallbackPage.js";
+import "./AuthRoot.js";
 import "./hooks/useMfaOperations.js";
 import "./hooks/usePasswordOperations.js";
 import "./hooks/useSessionOperations.js";
 import "./hooks/useWorkspaceOperations.js";
-import "./hooks/useMyWorkspaces.js";
 import "./hooks/useContextSwitcherData.js";
 import "./hooks/useUserOperations.js";
 import "./hooks/index.js";
-import "./pages/SSORelayPage.js";
-import "./pages/SSORelayCallbackPage.js";
-import "./AuthRoot.js";
 import "./hooks/useWorkspaceToken.js";
 import "./hooks/useTokenRefresh.js";
 import "./components/workspace/WorkspaceSelector.js";

package/dist/auth/pages/AuditLogPage.js

@@ -60,10 +60,10 @@ function p() {
 					"aria-label": m("auth.auditLog.exportAriaLabel", "Export audit log"),
 					className: "flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium",
 					children: T ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
-						className: "w-4 h-4 animate-spin",
+						className: "size-4 animate-spin",
 						"aria-hidden": "true"
 					}), m("auth.auditLog.exporting", "Exporting...")] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("svg", {
-						className: "w-4 h-4",
+						className: "size-4",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -81,7 +81,7 @@ function p() {
 				role: "alert",
 				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border",
 				children: [/* @__PURE__ */ c(t, {
-					className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5",
+					className: "size-5 text-status-error-text flex-shrink-0 mt-0.5",
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ c("p", {
 					className: "text-sm text-status-error-text",
@@ -93,7 +93,7 @@ function p() {
 				"aria-busy": "true",
 				className: "text-center py-12",
 				children: [/* @__PURE__ */ c(n, {
-					className: "w-8 h-8 mx-auto text-text-link animate-spin",
+					className: "size-8 mx-auto text-text-link animate-spin",
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ c("p", {
 					className: "mt-3 text-text-secondary",
@@ -123,7 +123,7 @@ function p() {
 						className: "flex items-start gap-4",
 						children: [
 							/* @__PURE__ */ c("div", {
-								className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-bg-muted text-xs font-semibold text-text-secondary",
+								className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-bg-muted text-xs font-semibold text-text-secondary",
 								"aria-hidden": "true",
 								children: k(e.action)
 							}),
@@ -191,9 +191,9 @@ function p() {
 			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
 			children: [
 				/* @__PURE__ */ c("div", {
-					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
+					className: "size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
 					children: /* @__PURE__ */ c(t, {
-						className: "w-8 h-8 text-status-warning-text",
+						className: "size-8 text-status-warning-text",
 						"aria-hidden": "true"
 					})
 				}),

package/dist/auth/pages/AuditLogPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuditLogPage.js","names":[],"sources":["../../../src/auth/pages/AuditLogPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useGatewayClient } from \"@burdenoff/fe-libs/shared/graphql\";\nimport { useFeatureFlagDetails } from \"@burdenoff/fe-libs/shared/feature-flags\";\nimport { formatDateTime } from \"../utils\";\nimport { AlertIcon, SpinnerIcon } from \"../components/AuthIcons\";\nimport {\n  useAuthAuditLogsQuery,\n  type AuditLogEntry_AuthAuditLogFragment,\n} from \"../../generated/global-operations\";\nimport { useCreateAuthExportJobMutation } from \"../../generated/wspace-operations\";\n\nconst PAGE_SIZE = 20;\n\n/**\n * Security audit log page with pagination and export\n *\n * Fragment: AuditLogEntry_AuthAuditLog (graphql/operations/global/fragments/AuditLogEntry.fragment.graphql)\n * Query: AuthAuditLogs (graphql/operations/global/queries/auditLog.graphql)\n *\n * TODO: When authAuditLogs backend migrates to AuthAuditLogConnection type,\n *   update this query to use: authAuditLogs { auditLogs: [...], totalCount, hasMore }\n *   and remove the client-side hasMore approximation below.\n */\nexport function AuditLogPage() {\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 [page, setPage] = useState(1);\n  const offset = (page - 1) * PAGE_SIZE;\n\n  // Default-deny: only show when the flag is explicitly enabled in the system.\n  // useFeatureFlag uses default-allow (returns true when not found), so we use\n  // useFeatureFlagDetails + explicit value check instead.\n  const auditLogFlag = useFeatureFlagDetails(\"auth.audit-log\");\n  const showAuditLog = auditLogFlag?.value === true;\n\n  const { data, loading, error } = useAuthAuditLogsQuery({\n    skip: !showAuditLog,\n    fetchPolicy: \"cache-and-network\",\n    variables: { pagination: { limit: PAGE_SIZE, offset } },\n  });\n\n  const auditLogs = data?.authAuditLogs ?? [];\n  // Approximate hasMore: if we received a full page there may be more\n  const hasMore = auditLogs.length === PAGE_SIZE;\n\n  const wspaceClient = useGatewayClient(\"workspace\");\n  const [createExportJob, { loading: isExporting }] =\n    useCreateAuthExportJobMutation({ client: wspaceClient });\n  const [exportError, setExportError] = useState<string | null>(null);\n\n  const handleExport = async () => {\n    setExportError(null);\n    try {\n      await createExportJob({\n        variables: {\n          input: {\n            name: \"Audit Log Export\",\n            // permission_audit_logs covers auth audit logs in the export system\n            entityTypes: [\"permission_audit_logs\"],\n            format: \"CSV\",\n            exportScope: \"INDIVIDUAL\",\n            includeMetadata: true,\n          },\n        },\n      });\n    } catch (err) {\n      setExportError(\n        err instanceof Error ? err.message : \"Failed to start export\",\n      );\n    }\n  };\n\n  const getEventMarker = (eventType: string) => {\n    switch (eventType) {\n      case \"LOGIN_SUCCESS\":\n        return \"OK\";\n      case \"LOGIN_FAILURE\":\n        return \"ER\";\n      case \"LOGOUT\":\n        return \"LO\";\n      case \"PASSWORD_CHANGE\":\n        return \"PW\";\n      case \"MFA_ENABLED\":\n      case \"MFA_VERIFIED\":\n        return \"MF\";\n      case \"ANOMALY_DETECTED\":\n        return \"AL\";\n      default:\n        return \"AU\";\n    }\n  };\n\n  if (!showAuditLog) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <div className=\"w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon\n              className=\"w-8 h-8 text-status-warning-text\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.auditLog.notAvailable\", \"Page Not Available\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.auditLog.notEnabled\",\n              \"The Security Audit Log is not enabled for your account.\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-8\">\n        <h1 className=\"text-3xl font-semibold text-text-primary\">\n          {tr(\"auth.auditLog.title\", \"Security Audit Log\")}\n        </h1>\n        <button\n          type=\"button\"\n          onClick={() => void handleExport()}\n          disabled={isExporting}\n          aria-label={tr(\"auth.auditLog.exportAriaLabel\", \"Export audit log\")}\n          className=\"flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n        >\n          {isExporting ? (\n            <>\n              <SpinnerIcon\n                className=\"w-4 h-4 animate-spin\"\n                aria-hidden=\"true\"\n              />\n              {tr(\"auth.auditLog.exporting\", \"Exporting...\")}\n            </>\n          ) : (\n            <>\n              <svg\n                className=\"w-4 h-4\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n                />\n              </svg>\n              {tr(\"auth.auditLog.export\", \"Export\")}\n            </>\n          )}\n        </button>\n      </div>\n\n      {/* Export error */}\n      {exportError && (\n        <div\n          role=\"alert\"\n          className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\"\n        >\n          <AlertIcon\n            className=\"w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5\"\n            aria-hidden=\"true\"\n          />\n          <p className=\"text-sm text-status-error-text\">{exportError}</p>\n        </div>\n      )}\n\n      {loading ? (\n        <div aria-live=\"polite\" aria-busy=\"true\" className=\"text-center py-12\">\n          <SpinnerIcon\n            className=\"w-8 h-8 mx-auto text-text-link animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <p className=\"mt-3 text-text-secondary\">\n            {tr(\"auth.auditLog.loading\", \"Loading audit events...\")}\n          </p>\n        </div>\n      ) : error ? (\n        <div\n          role=\"alert\"\n          className=\"text-center py-12 border border-status-error-border rounded-xl bg-status-error-bg-subtle\"\n        >\n          <p className=\"text-status-error-text\">\n            {tr(\"auth.auditLog.error\", \"Unable to load audit events\")}\n          </p>\n        </div>\n      ) : auditLogs.length === 0 ? (\n        <div className=\"text-center py-12\" role=\"status\">\n          <p className=\"text-text-secondary\">\n            {tr(\"auth.auditLog.noEvents\", \"No security events recorded\")}\n          </p>\n        </div>\n      ) : (\n        <>\n          <div className=\"space-y-4\" aria-live=\"polite\" aria-busy={loading}>\n            {auditLogs.map((event: AuditLogEntry_AuthAuditLogFragment) => (\n              <div\n                key={event.id}\n                className=\"p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-bg-muted text-xs font-semibold text-text-secondary\"\n                    aria-hidden=\"true\"\n                  >\n                    {getEventMarker(event.action)}\n                  </div>\n                  <div className=\"flex-1\">\n                    <h3 className=\"text-lg font-medium text-text-primary mb-1\">\n                      {event.action.replace(/_/g, \" \")}\n                    </h3>\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      <time dateTime={event.createdAt}>\n                        {formatDateTime(event.createdAt)}\n                      </time>\n                    </p>\n                    <p className=\"text-sm text-text-secondary\">\n                      {event.description ??\n                        tr(\n                          \"auth.auditLog.defaultDescription\",\n                          \"Authentication event\",\n                        )}\n                      {event.ipAddress && ` • ${event.ipAddress}`}\n                    </p>\n                  </div>\n                  {event.action.includes(\"FAILURE\") && (\n                    <span\n                      role=\"status\"\n                      className=\"px-3 py-1 rounded-full bg-status-error-bg-subtle text-status-error-text text-sm font-medium\"\n                    >\n                      {tr(\"auth.auditLog.failed\", \"Failed\")}\n                    </span>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* Pagination */}\n          <nav\n            aria-label={tr(\n              \"auth.auditLog.paginationAriaLabel\",\n              \"Audit log pagination\",\n            )}\n            className=\"mt-6 flex items-center justify-between\"\n          >\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\"auth.auditLog.page\", \"Page\")} {page}\n            </p>\n            <div className=\"flex gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => setPage((prev) => Math.max(1, prev - 1))}\n                disabled={page === 1}\n                aria-label={tr(\n                  \"auth.auditLog.previousPageAriaLabel\",\n                  \"Go to previous page\",\n                )}\n                className=\"px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors\"\n              >\n                {tr(\"auth.auditLog.previous\", \"Previous\")}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setPage((prev) => prev + 1)}\n                disabled={!hasMore}\n                aria-label={tr(\n                  \"auth.auditLog.nextPageAriaLabel\",\n                  \"Go to next page\",\n                )}\n                className=\"px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors\"\n              >\n                {tr(\"auth.auditLog.next\", \"Next\")}\n              </button>\n            </div>\n          </nav>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AuditLogPage.js","names":[],"sources":["../../../src/auth/pages/AuditLogPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useGatewayClient } from \"@burdenoff/fe-libs/shared/graphql\";\nimport { useFeatureFlagDetails } from \"@burdenoff/fe-libs/shared/feature-flags\";\nimport { formatDateTime } from \"../utils/formatters\";\nimport { AlertIcon, SpinnerIcon } from \"../components/AuthIcons\";\nimport {\n  useAuthAuditLogsQuery,\n  type AuditLogEntry_AuthAuditLogFragment,\n} from \"../../generated/global-operations\";\nimport { useCreateAuthExportJobMutation } from \"../../generated/wspace-operations\";\n\nconst PAGE_SIZE = 20;\n\n/**\n * Security audit log page with pagination and export\n *\n * Fragment: AuditLogEntry_AuthAuditLog (graphql/operations/global/fragments/AuditLogEntry.fragment.graphql)\n * Query: AuthAuditLogs (graphql/operations/global/queries/auditLog.graphql)\n *\n * TODO: When authAuditLogs backend migrates to AuthAuditLogConnection type,\n *   update this query to use: authAuditLogs { auditLogs: [...], totalCount, hasMore }\n *   and remove the client-side hasMore approximation below.\n */\nexport function AuditLogPage() {\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 [page, setPage] = useState(1);\n  const offset = (page - 1) * PAGE_SIZE;\n\n  // Default-deny: only show when the flag is explicitly enabled in the system.\n  // useFeatureFlag uses default-allow (returns true when not found), so we use\n  // useFeatureFlagDetails + explicit value check instead.\n  const auditLogFlag = useFeatureFlagDetails(\"auth.audit-log\");\n  const showAuditLog = auditLogFlag?.value === true;\n\n  const { data, loading, error } = useAuthAuditLogsQuery({\n    skip: !showAuditLog,\n    fetchPolicy: \"cache-and-network\",\n    variables: { pagination: { limit: PAGE_SIZE, offset } },\n  });\n\n  const auditLogs = data?.authAuditLogs ?? [];\n  // Approximate hasMore: if we received a full page there may be more\n  const hasMore = auditLogs.length === PAGE_SIZE;\n\n  const wspaceClient = useGatewayClient(\"workspace\");\n  const [createExportJob, { loading: isExporting }] =\n    useCreateAuthExportJobMutation({ client: wspaceClient });\n  const [exportError, setExportError] = useState<string | null>(null);\n\n  const handleExport = async () => {\n    setExportError(null);\n    try {\n      await createExportJob({\n        variables: {\n          input: {\n            name: \"Audit Log Export\",\n            // permission_audit_logs covers auth audit logs in the export system\n            entityTypes: [\"permission_audit_logs\"],\n            format: \"CSV\",\n            exportScope: \"INDIVIDUAL\",\n            includeMetadata: true,\n          },\n        },\n      });\n    } catch (err) {\n      setExportError(\n        err instanceof Error ? err.message : \"Failed to start export\",\n      );\n    }\n  };\n\n  const getEventMarker = (eventType: string) => {\n    switch (eventType) {\n      case \"LOGIN_SUCCESS\":\n        return \"OK\";\n      case \"LOGIN_FAILURE\":\n        return \"ER\";\n      case \"LOGOUT\":\n        return \"LO\";\n      case \"PASSWORD_CHANGE\":\n        return \"PW\";\n      case \"MFA_ENABLED\":\n      case \"MFA_VERIFIED\":\n        return \"MF\";\n      case \"ANOMALY_DETECTED\":\n        return \"AL\";\n      default:\n        return \"AU\";\n    }\n  };\n\n  if (!showAuditLog) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon\n              className=\"size-8 text-status-warning-text\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.auditLog.notAvailable\", \"Page Not Available\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.auditLog.notEnabled\",\n              \"The Security Audit Log is not enabled for your account.\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-8\">\n        <h1 className=\"text-3xl font-semibold text-text-primary\">\n          {tr(\"auth.auditLog.title\", \"Security Audit Log\")}\n        </h1>\n        <button\n          type=\"button\"\n          onClick={() => void handleExport()}\n          disabled={isExporting}\n          aria-label={tr(\"auth.auditLog.exportAriaLabel\", \"Export audit log\")}\n          className=\"flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n        >\n          {isExporting ? (\n            <>\n              <SpinnerIcon\n                className=\"size-4 animate-spin\"\n                aria-hidden=\"true\"\n              />\n              {tr(\"auth.auditLog.exporting\", \"Exporting...\")}\n            </>\n          ) : (\n            <>\n              <svg\n                className=\"size-4\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n                />\n              </svg>\n              {tr(\"auth.auditLog.export\", \"Export\")}\n            </>\n          )}\n        </button>\n      </div>\n\n      {/* Export error */}\n      {exportError && (\n        <div\n          role=\"alert\"\n          className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\"\n        >\n          <AlertIcon\n            className=\"size-5 text-status-error-text flex-shrink-0 mt-0.5\"\n            aria-hidden=\"true\"\n          />\n          <p className=\"text-sm text-status-error-text\">{exportError}</p>\n        </div>\n      )}\n\n      {loading ? (\n        <div aria-live=\"polite\" aria-busy=\"true\" className=\"text-center py-12\">\n          <SpinnerIcon\n            className=\"size-8 mx-auto text-text-link animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <p className=\"mt-3 text-text-secondary\">\n            {tr(\"auth.auditLog.loading\", \"Loading audit events...\")}\n          </p>\n        </div>\n      ) : error ? (\n        <div\n          role=\"alert\"\n          className=\"text-center py-12 border border-status-error-border rounded-xl bg-status-error-bg-subtle\"\n        >\n          <p className=\"text-status-error-text\">\n            {tr(\"auth.auditLog.error\", \"Unable to load audit events\")}\n          </p>\n        </div>\n      ) : auditLogs.length === 0 ? (\n        <div className=\"text-center py-12\" role=\"status\">\n          <p className=\"text-text-secondary\">\n            {tr(\"auth.auditLog.noEvents\", \"No security events recorded\")}\n          </p>\n        </div>\n      ) : (\n        <>\n          <div className=\"space-y-4\" aria-live=\"polite\" aria-busy={loading}>\n            {auditLogs.map((event: AuditLogEntry_AuthAuditLogFragment) => (\n              <div\n                key={event.id}\n                className=\"p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-bg-muted text-xs font-semibold text-text-secondary\"\n                    aria-hidden=\"true\"\n                  >\n                    {getEventMarker(event.action)}\n                  </div>\n                  <div className=\"flex-1\">\n                    <h3 className=\"text-lg font-medium text-text-primary mb-1\">\n                      {event.action.replace(/_/g, \" \")}\n                    </h3>\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      <time dateTime={event.createdAt}>\n                        {formatDateTime(event.createdAt)}\n                      </time>\n                    </p>\n                    <p className=\"text-sm text-text-secondary\">\n                      {event.description ??\n                        tr(\n                          \"auth.auditLog.defaultDescription\",\n                          \"Authentication event\",\n                        )}\n                      {event.ipAddress && ` • ${event.ipAddress}`}\n                    </p>\n                  </div>\n                  {event.action.includes(\"FAILURE\") && (\n                    <span\n                      role=\"status\"\n                      className=\"px-3 py-1 rounded-full bg-status-error-bg-subtle text-status-error-text text-sm font-medium\"\n                    >\n                      {tr(\"auth.auditLog.failed\", \"Failed\")}\n                    </span>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* Pagination */}\n          <nav\n            aria-label={tr(\n              \"auth.auditLog.paginationAriaLabel\",\n              \"Audit log pagination\",\n            )}\n            className=\"mt-6 flex items-center justify-between\"\n          >\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\"auth.auditLog.page\", \"Page\")} {page}\n            </p>\n            <div className=\"flex gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => setPage((prev) => Math.max(1, prev - 1))}\n                disabled={page === 1}\n                aria-label={tr(\n                  \"auth.auditLog.previousPageAriaLabel\",\n                  \"Go to previous page\",\n                )}\n                className=\"px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors\"\n              >\n                {tr(\"auth.auditLog.previous\", \"Previous\")}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setPage((prev) => prev + 1)}\n                disabled={!hasMore}\n                aria-label={tr(\n                  \"auth.auditLog.nextPageAriaLabel\",\n                  \"Go to next page\",\n                )}\n                className=\"px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors\"\n              >\n                {tr(\"auth.auditLog.next\", \"Next\")}\n              </button>\n            </div>\n          </nav>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/EmailVerifyPage.js

@@ -1,6 +1,5 @@
 import { useAuthStore as e } from "../store/authStore.js";
 import { useAuthOperations as t } from "../hooks/useAuthOperations.js";
-import "../hooks/index.js";
 import { AuthLayout as n } from "../components/AuthLayout.js";
 import { SpinnerIcon as r } from "../components/AuthIcons.js";
 import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
@@ -62,8 +61,8 @@ function h() {
 		children: /* @__PURE__ */ f("div", {
 			className: "flex flex-col items-center justify-center py-12",
 			children: [/* @__PURE__ */ d("div", {
-				className: "w-16 h-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center mb-6",
-				children: /* @__PURE__ */ d(r, { className: "w-8 h-8 text-[var(--color-text-link)] animate-spin" })
+				className: "size-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center mb-6",
+				children: /* @__PURE__ */ d(r, { className: "size-8 text-[var(--color-text-link)] animate-spin" })
 			}), /* @__PURE__ */ d("p", {
 				className: "text-[var(--color-text-secondary)]",
 				children: g("auth.emailVerify.moment", "This will only take a moment...")
@@ -76,9 +75,9 @@ function h() {
 			className: "flex flex-col items-center justify-center py-6",
 			children: [
 				/* @__PURE__ */ d("div", {
-					className: "w-20 h-20 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center mb-6",
+					className: "size-20 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center mb-6",
 					children: /* @__PURE__ */ d("svg", {
-						className: "w-10 h-10 text-[var(--color-status-success-text)]",
+						className: "size-10 text-[var(--color-status-success-text)]",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -108,6 +107,7 @@ function h() {
 					]
 				}),
 				/* @__PURE__ */ d("button", {
+					type: "button",
 					onClick: F,
 					className: "auth-primary-button w-full px-4 py-3 font-semibold",
 					children: g("auth.emailVerify.continueSignIn", "Continue to sign in now")
@@ -121,9 +121,9 @@ function h() {
 			className: "flex flex-col items-center justify-center py-6",
 			children: [
 				/* @__PURE__ */ d("div", {
-					className: "w-20 h-20 rounded-full bg-[var(--color-status-error-bg-subtle)] flex items-center justify-center mb-6",
+					className: "size-20 rounded-full bg-[var(--color-status-error-bg-subtle)] flex items-center justify-center mb-6",
 					children: /* @__PURE__ */ d("svg", {
-						className: "w-10 h-10 text-[var(--color-status-error-text)]",
+						className: "size-10 text-[var(--color-status-error-text)]",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -146,12 +146,14 @@ function h() {
 						children: g("auth.emailVerify.emailSent", "Verification email sent! Please check your inbox.")
 					})
 				}) : /* @__PURE__ */ d("button", {
+					type: "button",
 					onClick: P,
 					disabled: D,
 					className: "auth-primary-button mb-4 flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold",
-					children: D ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ d("span", { children: "Sending..." })] }) : g("auth.emailVerify.resend", "Resend verification email")
+					children: D ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, { className: "size-5 animate-spin" }), /* @__PURE__ */ d("span", { children: "Sending…" })] }) : g("auth.emailVerify.resend", "Resend verification email")
 				}),
 				/* @__PURE__ */ d("button", {
+					type: "button",
 					onClick: I,
 					className: "w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all",
 					children: g("auth.emailVerify.backToSignIn", "Back to sign in")

package/dist/auth/pages/EmailVerifyPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailVerifyPage.js","names":[],"sources":["../../../src/auth/pages/EmailVerifyPage.tsx"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useSearchParams } from \"react-router-dom\";\nimport { useAuthOperations } from \"../hooks\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { SpinnerIcon } from \"../components/AuthIcons\";\n\nconst REDIRECT_DELAY = 5; // seconds\n\n/**\n * Navigate to login page with optional email pre-fill\n * Uses window.location.href for reliable navigation (works in new tabs)\n */\nfunction navigateToLogin(email?: string) {\n  const baseUrl = \"/auth/login\";\n  const url = email ? `${baseUrl}?email=${encodeURIComponent(email)}` : baseUrl;\n  window.location.href = url;\n}\n\n/**\n * Email verification page with professional design\n */\nexport function EmailVerifyPage() {\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 [searchParams] = useSearchParams();\n  const token = searchParams.get(\"token\");\n  const urlEmail = searchParams.get(\"email\");\n  const { verifyEmail, resendVerification } = useAuthOperations();\n  const user = useAuthStore((state) => state.user);\n  const [status, setStatus] = useState<\"verifying\" | \"success\" | \"error\">(\n    \"verifying\",\n  );\n  const [verifiedEmail, setVerifiedEmail] = useState<string | undefined>(\n    urlEmail || undefined,\n  );\n  const [isResending, setIsResending] = useState(false);\n  const [resendSuccess, setResendSuccess] = useState(false);\n  const [countdown, setCountdown] = useState(REDIRECT_DELAY);\n\n  // Guard against duplicate calls. useRef alone resets across remounts\n  // (StrictMode, Suspense resolution of the lazy Auth root, HMR), so we\n  // additionally key on the token via sessionStorage — any remount for the\n  // same token short-circuits instead of firing a second mutation.\n  const verificationInitiatedRef = useRef(false);\n\n  useEffect(() => {\n    if (!token || verificationInitiatedRef.current) return;\n\n    const storageKey = `auth:verifyEmail:inflight:${token}`;\n    if (\n      typeof window !== \"undefined\" &&\n      window.sessionStorage.getItem(storageKey)\n    ) {\n      return;\n    }\n    verificationInitiatedRef.current = true;\n    try {\n      window.sessionStorage.setItem(storageKey, \"1\");\n    } catch {\n      // sessionStorage unavailable (private mode, SSR); ref guard still applies.\n    }\n\n    verifyEmail(token)\n      .then((result) => {\n        if (result.success) {\n          setStatus(\"success\");\n          if (result.email) setVerifiedEmail(result.email);\n        } else {\n          setStatus(\"error\");\n        }\n      })\n      .catch(() => setStatus(\"error\"));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [token]);\n\n  // Auto-redirect countdown after successful verification\n  useEffect(() => {\n    if (status !== \"success\") return;\n\n    const timer = setInterval(() => {\n      setCountdown((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer);\n          navigateToLogin(verifiedEmail);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [status, verifiedEmail]);\n\n  const handleResend = async () => {\n    const resendEmail = urlEmail || user?.email;\n    if (!resendEmail) {\n      console.error(\"No email available for resend\");\n      return;\n    }\n    setIsResending(true);\n    try {\n      await resendVerification(resendEmail);\n      setResendSuccess(true);\n    } catch (err) {\n      console.error(\"Failed to resend verification:\", err);\n    } finally {\n      setIsResending(false);\n    }\n  };\n\n  const handleContinueToLogin = useCallback(() => {\n    navigateToLogin(verifiedEmail);\n  }, [verifiedEmail]);\n\n  const handleBackToLogin = useCallback(() => {\n    navigateToLogin();\n  }, []);\n\n  if (status === \"verifying\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.emailVerify.verifyingTitle\", \"Verifying your email\")}\n        subtitle={tr(\n          \"auth.emailVerify.verifyingSubtitle\",\n          \"Please wait while we confirm your email address\",\n        )}\n      >\n        {/* Loading Spinner */}\n        <div className=\"flex flex-col items-center justify-center py-12\">\n          <div className=\"w-16 h-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center mb-6\">\n            <SpinnerIcon className=\"w-8 h-8 text-[var(--color-text-link)] animate-spin\" />\n          </div>\n          <p className=\"text-[var(--color-text-secondary)]\">\n            {tr(\"auth.emailVerify.moment\", \"This will only take a moment...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  if (status === \"success\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.emailVerify.verifiedTitle\", \"Email verified!\")}\n        subtitle={tr(\n          \"auth.emailVerify.verifiedSubtitle\",\n          \"Your email address has been confirmed\",\n        )}\n      >\n        {/* Success Icon */}\n        <div className=\"flex flex-col items-center justify-center py-6\">\n          <div className=\"w-20 h-20 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center mb-6\">\n            <svg\n              className=\"w-10 h-10 text-[var(--color-status-success-text)]\"\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=\"M5 13l4 4L19 7\"\n              />\n            </svg>\n          </div>\n\n          <p className=\"text-center text-[var(--color-text-secondary)] mb-6\">\n            {tr(\n              \"auth.emailVerify.successMessage\",\n              \"Your email has been successfully verified. You can now sign in to access all features.\",\n            )}\n          </p>\n\n          <p className=\"text-center text-sm text-[var(--color-text-tertiary)] mb-6\">\n            {tr(\"auth.emailVerify.redirecting\", \"Redirecting to sign in in\")}{\" \"}\n            <span className=\"font-semibold text-[var(--color-text-primary)]\">\n              {countdown}\n            </span>{\" \"}\n            {tr(\"auth.emailVerify.seconds\", \"seconds...\")}\n          </p>\n\n          <button\n            onClick={handleContinueToLogin}\n            className=\"auth-primary-button w-full px-4 py-3 font-semibold\"\n          >\n            {tr(\"auth.emailVerify.continueSignIn\", \"Continue to sign in now\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Error state\n  return (\n    <AuthLayout\n      title={tr(\"auth.emailVerify.failedTitle\", \"Verification failed\")}\n      subtitle={tr(\n        \"auth.emailVerify.failedSubtitle\",\n        \"We couldn't verify your email address\",\n      )}\n    >\n      <div className=\"flex flex-col items-center justify-center py-6\">\n        {/* Error Icon */}\n        <div className=\"w-20 h-20 rounded-full bg-[var(--color-status-error-bg-subtle)] flex items-center justify-center mb-6\">\n          <svg\n            className=\"w-10 h-10 text-[var(--color-status-error-text)]\"\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=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n            />\n          </svg>\n        </div>\n\n        <p className=\"text-center text-[var(--color-text-secondary)] mb-8\">\n          {tr(\n            \"auth.emailVerify.invalidLink\",\n            \"The verification link is invalid or has expired. Please request a new verification email.\",\n          )}\n        </p>\n\n        {resendSuccess ? (\n          <div className=\"w-full p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)] text-center mb-4\">\n            <p className=\"text-sm text-[var(--color-status-success-text)]\">\n              {tr(\n                \"auth.emailVerify.emailSent\",\n                \"Verification email sent! Please check your inbox.\",\n              )}\n            </p>\n          </div>\n        ) : (\n          <button\n            onClick={handleResend}\n            disabled={isResending}\n            className=\"auth-primary-button mb-4 flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold\"\n          >\n            {isResending ? (\n              <>\n                <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                <span>Sending...</span>\n              </>\n            ) : (\n              tr(\"auth.emailVerify.resend\", \"Resend verification email\")\n            )}\n          </button>\n        )}\n\n        <button\n          onClick={handleBackToLogin}\n          className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all\"\n        >\n          {tr(\"auth.emailVerify.backToSignIn\", \"Back to sign in\")}\n        </button>\n      </div>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"EmailVerifyPage.js","names":[],"sources":["../../../src/auth/pages/EmailVerifyPage.tsx"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useSearchParams } from \"react-router-dom\";\nimport { useAuthOperations } from \"../hooks/useAuthOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { SpinnerIcon } from \"../components/AuthIcons\";\n\nconst REDIRECT_DELAY = 5; // seconds\n\n/**\n * Navigate to login page with optional email pre-fill\n * Uses window.location.href for reliable navigation (works in new tabs)\n */\nfunction navigateToLogin(email?: string) {\n  const baseUrl = \"/auth/login\";\n  const url = email ? `${baseUrl}?email=${encodeURIComponent(email)}` : baseUrl;\n  window.location.href = url;\n}\n\n/**\n * Email verification page with professional design\n */\nexport function EmailVerifyPage() {\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 [searchParams] = useSearchParams();\n  const token = searchParams.get(\"token\");\n  const urlEmail = searchParams.get(\"email\");\n  const { verifyEmail, resendVerification } = useAuthOperations();\n  const user = useAuthStore((state) => state.user);\n  const [status, setStatus] = useState<\"verifying\" | \"success\" | \"error\">(\n    \"verifying\",\n  );\n  const [verifiedEmail, setVerifiedEmail] = useState<string | undefined>(\n    urlEmail || undefined,\n  );\n  const [isResending, setIsResending] = useState(false);\n  const [resendSuccess, setResendSuccess] = useState(false);\n  const [countdown, setCountdown] = useState(REDIRECT_DELAY);\n\n  // Guard against duplicate calls. useRef alone resets across remounts\n  // (StrictMode, Suspense resolution of the lazy Auth root, HMR), so we\n  // additionally key on the token via sessionStorage — any remount for the\n  // same token short-circuits instead of firing a second mutation.\n  const verificationInitiatedRef = useRef(false);\n\n  useEffect(() => {\n    if (!token || verificationInitiatedRef.current) return;\n\n    const storageKey = `auth:verifyEmail:inflight:${token}`;\n    if (\n      typeof window !== \"undefined\" &&\n      window.sessionStorage.getItem(storageKey)\n    ) {\n      return;\n    }\n    verificationInitiatedRef.current = true;\n    try {\n      window.sessionStorage.setItem(storageKey, \"1\");\n    } catch {\n      // sessionStorage unavailable (private mode, SSR); ref guard still applies.\n    }\n\n    verifyEmail(token)\n      .then((result) => {\n        if (result.success) {\n          setStatus(\"success\");\n          if (result.email) setVerifiedEmail(result.email);\n        } else {\n          setStatus(\"error\");\n        }\n      })\n      .catch(() => setStatus(\"error\"));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [token]);\n\n  // Auto-redirect countdown after successful verification\n  useEffect(() => {\n    if (status !== \"success\") return;\n\n    const timer = setInterval(() => {\n      setCountdown((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer);\n          navigateToLogin(verifiedEmail);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [status, verifiedEmail]);\n\n  const handleResend = async () => {\n    const resendEmail = urlEmail || user?.email;\n    if (!resendEmail) {\n      console.error(\"No email available for resend\");\n      return;\n    }\n    setIsResending(true);\n    try {\n      await resendVerification(resendEmail);\n      setResendSuccess(true);\n    } catch (err) {\n      console.error(\"Failed to resend verification:\", err);\n    } finally {\n      setIsResending(false);\n    }\n  };\n\n  const handleContinueToLogin = useCallback(() => {\n    navigateToLogin(verifiedEmail);\n  }, [verifiedEmail]);\n\n  const handleBackToLogin = useCallback(() => {\n    navigateToLogin();\n  }, []);\n\n  if (status === \"verifying\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.emailVerify.verifyingTitle\", \"Verifying your email\")}\n        subtitle={tr(\n          \"auth.emailVerify.verifyingSubtitle\",\n          \"Please wait while we confirm your email address\",\n        )}\n      >\n        {/* Loading Spinner */}\n        <div className=\"flex flex-col items-center justify-center py-12\">\n          <div className=\"size-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center mb-6\">\n            <SpinnerIcon className=\"size-8 text-[var(--color-text-link)] animate-spin\" />\n          </div>\n          <p className=\"text-[var(--color-text-secondary)]\">\n            {tr(\"auth.emailVerify.moment\", \"This will only take a moment...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  if (status === \"success\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.emailVerify.verifiedTitle\", \"Email verified!\")}\n        subtitle={tr(\n          \"auth.emailVerify.verifiedSubtitle\",\n          \"Your email address has been confirmed\",\n        )}\n      >\n        {/* Success Icon */}\n        <div className=\"flex flex-col items-center justify-center py-6\">\n          <div className=\"size-20 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center mb-6\">\n            <svg\n              className=\"size-10 text-[var(--color-status-success-text)]\"\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=\"M5 13l4 4L19 7\"\n              />\n            </svg>\n          </div>\n\n          <p className=\"text-center text-[var(--color-text-secondary)] mb-6\">\n            {tr(\n              \"auth.emailVerify.successMessage\",\n              \"Your email has been successfully verified. You can now sign in to access all features.\",\n            )}\n          </p>\n\n          <p className=\"text-center text-sm text-[var(--color-text-tertiary)] mb-6\">\n            {tr(\"auth.emailVerify.redirecting\", \"Redirecting to sign in in\")}{\" \"}\n            <span className=\"font-semibold text-[var(--color-text-primary)]\">\n              {countdown}\n            </span>{\" \"}\n            {tr(\"auth.emailVerify.seconds\", \"seconds...\")}\n          </p>\n\n          <button type=\"button\"\n            onClick={handleContinueToLogin}\n            className=\"auth-primary-button w-full px-4 py-3 font-semibold\"\n          >\n            {tr(\"auth.emailVerify.continueSignIn\", \"Continue to sign in now\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Error state\n  return (\n    <AuthLayout\n      title={tr(\"auth.emailVerify.failedTitle\", \"Verification failed\")}\n      subtitle={tr(\n        \"auth.emailVerify.failedSubtitle\",\n        \"We couldn't verify your email address\",\n      )}\n    >\n      <div className=\"flex flex-col items-center justify-center py-6\">\n        {/* Error Icon */}\n        <div className=\"size-20 rounded-full bg-[var(--color-status-error-bg-subtle)] flex items-center justify-center mb-6\">\n          <svg\n            className=\"size-10 text-[var(--color-status-error-text)]\"\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=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n            />\n          </svg>\n        </div>\n\n        <p className=\"text-center text-[var(--color-text-secondary)] mb-8\">\n          {tr(\n            \"auth.emailVerify.invalidLink\",\n            \"The verification link is invalid or has expired. Please request a new verification email.\",\n          )}\n        </p>\n\n        {resendSuccess ? (\n          <div className=\"w-full p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)] text-center mb-4\">\n            <p className=\"text-sm text-[var(--color-status-success-text)]\">\n              {tr(\n                \"auth.emailVerify.emailSent\",\n                \"Verification email sent! Please check your inbox.\",\n              )}\n            </p>\n          </div>\n        ) : (\n          <button type=\"button\"\n            onClick={handleResend}\n            disabled={isResending}\n            className=\"auth-primary-button mb-4 flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold\"\n          >\n            {isResending ? (\n              <>\n                <SpinnerIcon className=\"size-5 animate-spin\" />\n                <span>Sending…</span>\n              </>\n            ) : (\n              tr(\"auth.emailVerify.resend\", \"Resend verification email\")\n            )}\n          </button>\n        )}\n\n        <button type=\"button\"\n          onClick={handleBackToLogin}\n          className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all\"\n        >\n          {tr(\"auth.emailVerify.backToSignIn\", \"Back to sign in\")}\n        </button>\n      </div>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/LoginPage.js

@@ -2,7 +2,6 @@ import { useAuthStore as e } from "../store/authStore.js";
 import { useAuthOperations as t } from "../hooks/useAuthOperations.js";
 import { useMyWorkspaces as n } from "../hooks/useMyWorkspaces.js";
 import { useOAuthOperations as r } from "../hooks/useOAuthOperations.js";
-import "../hooks/index.js";
 import { AuthLayout as i } from "../components/AuthLayout.js";
 import { AlertIcon as a, EmailIcon as o, EyeIcon as s, EyeOffIcon as c, GoogleIcon as l, LockIcon as ee, MicrosoftIcon as u, SpinnerIcon as te } from "../components/AuthIcons.js";
 import { useCaptchaV3 as ne } from "../hooks/useCaptchaV3.js";
@@ -296,7 +295,7 @@ function x() {
 					Fe && /* @__PURE__ */ g("div", {
 						className: "flex items-start gap-3 p-4 rounded-xl border bg-status-info-bg-subtle border-status-info-border",
 						children: [/* @__PURE__ */ h("svg", {
-							className: "w-5 h-5 flex-shrink-0 mt-0.5 text-text-link",
+							className: "size-5 flex-shrink-0 mt-0.5 text-text-link",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -313,14 +312,14 @@ function x() {
 					}),
 					J && /* @__PURE__ */ g("div", {
 						className: "flex items-start gap-3 p-4 rounded-xl border bg-status-warning-bg-subtle border-status-warning-border",
-						children: [/* @__PURE__ */ h(a, { className: "w-5 h-5 flex-shrink-0 mt-0.5 text-status-warning-text" }), /* @__PURE__ */ h("p", {
+						children: [/* @__PURE__ */ h(a, { className: "size-5 flex-shrink-0 mt-0.5 text-status-warning-text" }), /* @__PURE__ */ h("p", {
 							className: "text-sm text-status-warning-text",
 							children: J
 						})]
 					}),
 					Le && /* @__PURE__ */ g("div", {
 						className: "flex items-start gap-3 p-4 rounded-xl border bg-status-warning-bg-subtle border-status-warning-border",
-						children: [/* @__PURE__ */ h(a, { className: "w-5 h-5 flex-shrink-0 mt-0.5 text-status-warning-text" }), /* @__PURE__ */ g("div", {
+						children: [/* @__PURE__ */ h(a, { className: "size-5 flex-shrink-0 mt-0.5 text-status-warning-text" }), /* @__PURE__ */ g("div", {
 							className: "flex-1",
 							children: [
 								/* @__PURE__ */ h("p", {
@@ -336,7 +335,7 @@ function x() {
 									onClick: () => b(decodeURIComponent($.current || Q || "/dashboard")),
 									className: "mt-3 inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-status-warning-border bg-bg-surface text-status-warning-text text-sm font-medium hover:bg-status-warning-bg-subtle hover:border-status-warning-border transition-all shadow-sm",
 									children: [/* @__PURE__ */ h("svg", {
-										className: "w-4 h-4",
+										className: "size-4",
 										fill: "none",
 										viewBox: "0 0 24 24",
 										stroke: "currentColor",
@@ -353,7 +352,7 @@ function x() {
 					}),
 					T && !J && !Le && /* @__PURE__ */ g("div", {
 						className: `flex items-start gap-3 p-4 rounded-xl border ${I || B || H ? "bg-status-warning-bg-subtle border-status-warning-border" : "bg-status-error-bg-subtle border-status-error-border"}`,
-						children: [/* @__PURE__ */ h(a, { className: `w-5 h-5 flex-shrink-0 mt-0.5 ${I || B || H ? "text-status-warning-text" : "text-status-error-text"}` }), /* @__PURE__ */ g("div", {
+						children: [/* @__PURE__ */ h(a, { className: `size-5 flex-shrink-0 mt-0.5 ${I || B || H ? "text-status-warning-text" : "text-status-error-text"}` }), /* @__PURE__ */ g("div", {
 							className: "flex-1",
 							children: [
 								/* @__PURE__ */ h("p", {
@@ -371,7 +370,7 @@ function x() {
 									children: Ne ? /* @__PURE__ */ g("div", {
 										className: "flex items-center gap-2 text-sm text-status-success-text",
 										children: [/* @__PURE__ */ h("svg", {
-											className: "w-4 h-4",
+											className: "size-4",
 											fill: "none",
 											viewBox: "0 0 24 24",
 											stroke: "currentColor",
@@ -387,8 +386,8 @@ function x() {
 										onClick: He,
 										disabled: je,
 										className: "inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-status-warning-border bg-bg-surface text-status-warning-text text-sm font-medium hover:bg-status-warning-bg-subtle hover:border-status-warning-border transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed",
-										children: je ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(te, { className: "w-4 h-4 animate-spin" }), C("auth.login.sending", "Sending...")] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("svg", {
-											className: "w-4 h-4",
+										children: je ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(te, { className: "size-4 animate-spin" }), C("auth.login.sending", "Sending...")] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("svg", {
+											className: "size-4",
 											fill: "none",
 											viewBox: "0 0 24 24",
 											stroke: "currentColor",
@@ -407,12 +406,12 @@ function x() {
 										type: "button",
 										onClick: Be,
 										className: "inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-border-default bg-bg-surface text-text-primary text-sm font-medium hover:bg-bg-canvas hover:border-border-default transition-all shadow-sm",
-										children: [/* @__PURE__ */ h(l, { className: "w-5 h-5" }), C("auth.login.signInWithGoogle", "Sign in with Google")]
+										children: [/* @__PURE__ */ h(l, { className: "size-5" }), C("auth.login.signInWithGoogle", "Sign in with Google")]
 									}), k("microsoft") && /* @__PURE__ */ g("button", {
 										type: "button",
 										onClick: Ve,
 										className: "inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-border-default bg-bg-surface text-text-primary text-sm font-medium hover:bg-bg-canvas hover:border-border-default transition-all shadow-sm",
-										children: [/* @__PURE__ */ h(u, { className: "w-5 h-5" }), C("auth.login.signInWithMicrosoft", "Sign in with Microsoft")]
+										children: [/* @__PURE__ */ h(u, { className: "size-5" }), C("auth.login.signInWithMicrosoft", "Sign in with Microsoft")]
 									})]
 								})
 							]
@@ -428,7 +427,7 @@ function x() {
 							className: "relative",
 							children: [/* @__PURE__ */ h("div", {
 								className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
-								children: /* @__PURE__ */ h(o, { className: "w-5 h-5 text-[var(--color-text-tertiary)]" })
+								children: /* @__PURE__ */ h(o, { className: "size-5 text-[var(--color-text-tertiary)]" })
 							}), /* @__PURE__ */ h("input", {
 								id: "email",
 								type: "email",
@@ -456,7 +455,7 @@ function x() {
 							children: [
 								/* @__PURE__ */ h("div", {
 									className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
-									children: /* @__PURE__ */ h(ee, { className: "w-5 h-5 text-[var(--color-text-tertiary)]" })
+									children: /* @__PURE__ */ h(ee, { className: "size-5 text-[var(--color-text-tertiary)]" })
 								}),
 								/* @__PURE__ */ h("input", {
 									id: "password",
@@ -477,7 +476,7 @@ function x() {
 									onClick: () => Oe(!F),
 									"aria-label": F ? "Hide password" : "Show password",
 									className: "absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors",
-									children: h(F ? c : s, { className: "w-5 h-5" })
+									children: h(F ? c : s, { className: "size-5" })
 								})
 							]
 						})]
@@ -504,9 +503,9 @@ function x() {
 									},
 									className: "sr-only peer"
 								}), /* @__PURE__ */ h("div", {
-									className: "w-5 h-5 rounded-md border-2 border-[var(--color-border-default)] bg-[var(--color-bg-surface)] peer-checked:bg-status-info-bg-subtle0 peer-checked:border-action-primary-bg transition-all peer-focus:ring-2 peer-focus:ring-action-primary-bg/20",
+									className: "size-5 rounded-md border-2 border-[var(--color-border-default)] bg-[var(--color-bg-surface)] peer-checked:bg-status-info-bg-subtle0 peer-checked:border-action-primary-bg transition-all peer-focus:ring-2 peer-focus:ring-action-primary-bg/20",
 									children: /* @__PURE__ */ h("svg", {
-										className: "w-full h-full text-white opacity-0 peer-checked:opacity-100 transition-opacity p-0.5",
+										className: "size-full text-white opacity-0 peer-checked:opacity-100 transition-opacity p-0.5",
 										fill: "none",
 										viewBox: "0 0 24 24",
 										stroke: "currentColor",
@@ -533,7 +532,7 @@ function x() {
 						type: "submit",
 						disabled: w || j,
 						className: "auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold",
-						children: w || j ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(te, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ h("span", { children: j ? C("auth.login.settingUpWorkspace", "Setting up workspace...") : C("auth.login.signingIn", "Signing in...") })] }) : C("auth.login.signIn", "Sign in")
+						children: w || j ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(te, { className: "size-5 animate-spin" }), /* @__PURE__ */ h("span", { children: j ? C("auth.login.settingUpWorkspace", "Setting up workspace...") : C("auth.login.signingIn", "Signing in...") })] }) : C("auth.login.signIn", "Sign in")
 					})
 				]
 			}),
@@ -552,7 +551,7 @@ function x() {
 			}),
 			Pe && /* @__PURE__ */ g("div", {
 				className: "flex items-start gap-3 p-4 rounded-xl border bg-status-error-bg-subtle border-status-error-border",
-				children: [/* @__PURE__ */ h(a, { className: "w-5 h-5 flex-shrink-0 mt-0.5 text-status-error-text" }), /* @__PURE__ */ h("p", {
+				children: [/* @__PURE__ */ h(a, { className: "size-5 flex-shrink-0 mt-0.5 text-status-error-text" }), /* @__PURE__ */ h("p", {
 					className: "text-sm text-status-error-text",
 					children: Pe
 				})]
@@ -566,7 +565,7 @@ function x() {
 					title: e.tooltip,
 					"aria-label": e.name,
 					className: `flex items-center justify-center gap-2 px-4 py-3 rounded-xl border transition-all duration-200 group ${e.disabled ? "border-[var(--color-border-subtle)] bg-[var(--color-bg-disabled)] cursor-not-allowed opacity-50" : "border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:bg-[var(--color-bg-sunken)] hover:border-[var(--color-border-strong)]"}`,
-					children: [/* @__PURE__ */ h(e.icon, { className: `w-5 h-5 ${e.disabled ? "opacity-50" : ""}` }), /* @__PURE__ */ h("span", {
+					children: [/* @__PURE__ */ h(e.icon, { className: `size-5 ${e.disabled ? "opacity-50" : ""}` }), /* @__PURE__ */ h("span", {
 						className: `sr-only sm:not-sr-only text-sm font-medium transition-colors hidden sm:inline ${e.disabled ? "text-[var(--color-text-disabled)]" : "text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]"}`,
 						children: e.name
 					})]
@@ -575,6 +574,7 @@ function x() {
 			/* @__PURE__ */ h("div", {
 				className: "mt-4 text-center",
 				children: /* @__PURE__ */ g("button", {
+					type: "button",
 					onClick: () => b("/auth/magic-link"),
 					className: "text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors",
 					children: [
@@ -593,6 +593,7 @@ function x() {
 					C("auth.login.dontHaveAccount", "Don't have an account?"),
 					" ",
 					/* @__PURE__ */ h("button", {
+						type: "button",
 						onClick: () => b("/auth/register"),
 						className: "font-semibold text-text-link hover:text-text-linkHover transition-colors",
 						children: C("auth.login.signUp", "Sign up")