@devstroupe/devkit-cli 1.1.8 → 1.1.10

package/dist/index.js

@@ -955,13 +955,13 @@ program
         process.exit(0);
     }
 });
-// Comando generate crud
+// Comando generate crud ou project
 program
-    .command('generate <type> <entityName>')
-    .description('Gera artefatos do DevKit. Tipos suportados: crud')
+    .command('generate <type> [entityName]')
+    .description('Gera artefatos do DevKit. Tipos suportados: crud, project')
     .action((type, entityName) => {
-    if (type !== 'crud') {
-        console.error(`Tipo de geração "${type}" não é suportado. Use "crud".`);
+    if (type !== 'crud' && type !== 'project') {
+        console.error(`Tipo de geração "${type}" não é suportado. Use "crud" ou "project".`);
         process.exit(1);
     }
     const configPath = path.join(process.cwd(), 'devstroupe.config.ts');
@@ -978,6 +978,14 @@ program
         console.error('Erro ao carregar devstroupe.config.ts:', error);
         process.exit(1);
     }
+    if (type === 'project') {
+        generateProject(process.cwd(), config);
+        return;
+    }
+    if (!entityName) {
+        console.error('Nome da entidade não fornecido. Use "devstroupe generate crud all" ou "devstroupe generate crud <nome_da_entidade>".');
+        process.exit(1);
+    }
     try {
         assertValidRelationshipConfig(config);
     }
@@ -1862,19 +1870,22 @@ volumes:
     fs.writeFileSync(path.join(projectRoot, 'docker-compose.dev.yml'), dockerComposeDevContent, 'utf-8');
     console.log(`[Docker] docker-compose.dev.yml gerado com sucesso.`);
 }
-// Comando new-project
-program
-    .command('new-project <projectName>')
-    .description('Cria um novo projeto com frontend Angular e backend NestJS pré-configurados')
-    .option('--microservices', 'Cria o projeto utilizando arquitetura de microsserviços')
-    .action((projectName, options) => {
-    const projectRoot = path.resolve(process.cwd(), projectName);
-    if (fs.existsSync(projectRoot) && fs.readdirSync(projectRoot).length > 0) {
-        console.error(`[Erro] O diretório "${projectName}" já existe e não está vazio.`);
-        process.exit(1);
+// Função que gera a estrutura de pastas e arquivos base a partir de um devstroupe.config.ts existente
+function generateProject(projectRoot, config) {
+    const projectName = config.projectName || 'DevsTroupe Project';
+    const isMicroservices = config.backendType === 'microservices';
+    const frontendPathRel = config.frontendPath || './frontend';
+    const backendPathRel = config.backendPath || './backend';
+    const frontendDest = path.resolve(projectRoot, frontendPathRel);
+    let backendDest;
+    if (isMicroservices) {
+        backendDest = path.resolve(projectRoot, backendPathRel, 'api-gateway');
+        fs.ensureDirSync(path.resolve(projectRoot, backendPathRel, 'services'));
     }
-    const isMicroservices = !!options.microservices;
-    console.log(`Criando novo projeto "${projectName}" (Modo: ${isMicroservices ? 'Microsserviços' : 'Monólito'}) em: ${projectRoot}...`);
+    else {
+        backendDest = path.resolve(projectRoot, backendPathRel);
+    }
+    console.log(`Configurando estrutura física do projeto "${projectName}" (Modo: ${isMicroservices ? 'Microsserviços' : 'Monólito'})...`);
     // Resolver caminhos de boilerplates
     let boilerplatesDir = path.resolve(__dirname, 'boilerplates');
     if (!fs.existsSync(boilerplatesDir)) {
@@ -1890,25 +1901,14 @@ program
         process.exit(1);
     }
     try {
-        // 1. Criar diretórios de destino
-        fs.ensureDirSync(projectRoot);
-        const frontendDest = path.join(projectRoot, 'frontend');
-        let backendDest;
-        if (isMicroservices) {
-            backendDest = path.join(projectRoot, 'backend', 'api-gateway');
-            fs.ensureDirSync(path.join(projectRoot, 'backend', 'services'));
-        }
-        else {
-            backendDest = path.join(projectRoot, 'backend');
-        }
-        // 2. Copiar boilerplates
-        console.log(`Copiando boilerplate do backend (${isMicroservices ? 'API Gateway' : 'NestJS Monólito'})...`);
-        fs.copySync(nestTemplateDir, backendDest, { filter: createBoilerplateCopyFilter(nestTemplateDir) });
-        console.log('Copiando boilerplate do frontend (Angular)...');
-        fs.copySync(angularTemplateDir, frontendDest, { filter: createBoilerplateCopyFilter(angularTemplateDir) });
-        // 2.1 Criar arquivos .env e .env.example no backend
-        console.log('Gerando arquivos .env e .env.example no backend...');
-        const envContent = `PORT=13000
+        // 1. Criar diretórios de destino e copiar boilerplates
+        if (!fs.existsSync(backendDest) || fs.readdirSync(backendDest).length === 0) {
+            console.log(`Copiando boilerplate do backend para: ${backendDest}...`);
+            fs.ensureDirSync(backendDest);
+            fs.copySync(nestTemplateDir, backendDest, { filter: createBoilerplateCopyFilter(nestTemplateDir) });
+            // Gerar arquivos .env e .env.example
+            console.log('Gerando arquivos .env e .env.example no backend...');
+            const envContent = `PORT=13000
 DB_HOST=localhost
 DB_PORT=3306
 DB_USER=root
@@ -1931,90 +1931,20 @@ R2_ACCOUNT_ID=
 R2_ACCESS_KEY=
 R2_SECRET_KEY=
 `;
-        fs.writeFileSync(path.join(backendDest, '.env'), envContent, 'utf-8');
-        fs.writeFileSync(path.join(backendDest, '.env.example'), envContent, 'utf-8');
+            fs.writeFileSync(path.join(backendDest, '.env'), envContent, 'utf-8');
+            fs.writeFileSync(path.join(backendDest, '.env.example'), envContent, 'utf-8');
+        }
+        if (!fs.existsSync(frontendDest) || fs.readdirSync(frontendDest).length === 0) {
+            console.log(`Copiando boilerplate do frontend para: ${frontendDest}...`);
+            fs.ensureDirSync(frontendDest);
+            fs.copySync(angularTemplateDir, frontendDest, { filter: createBoilerplateCopyFilter(angularTemplateDir) });
+        }
         // Patch local dependencies if in monorepo development
         patchLocalDependencies(backendDest, frontendDest, boilerplatesDir);
-        // 3. Criar devstroupe.config.ts
-        console.log('Gerando arquivo devstroupe.config.ts...');
-        const configPath = path.join(projectRoot, 'devstroupe.config.ts');
-        const designSystemConfig = {
-            provider: 'spartan',
-            spartanStyle: 'vega',
-            spartanTheme: 'neutral',
-            installAllPrimitives: true,
-            includePlayground: true,
-        };
-        const configContent = `export default {
-  projectName: '${projectName}',
-  backendType: '${isMicroservices ? 'microservices' : 'monolith'}',
-  backendPath: './backend',
-  frontendPath: './frontend',
-  designSystem: {
-    provider: '${designSystemConfig.provider}',
-    spartanStyle: '${designSystemConfig.spartanStyle}',
-    spartanTheme: '${designSystemConfig.spartanTheme}',
-    installAllPrimitives: ${designSystemConfig.installAllPrimitives},
-    includePlayground: ${designSystemConfig.includePlayground}
-  },
-  entities: [
-    {
-      name: 'company',
-      label: 'Empresa',
-      tableName: 'companies',
-      properties: [
-        { name: 'name', type: 'string', required: true, label: 'Nome' },
-        {
-          name: 'cabins', type: 'relationship', required: false, label: 'Cabines',
-          relation: {
-            target: 'cabin', kind: 'one-to-many', foreignKey: 'company_id',
-            inverseSide: 'company', control: 'table', embedded: true,
-            columns: ['name', 'code', 'is_active'], lookup: { pageSize: 10 }
-          }
-        }
-      ],
-      crud: { generateFrontend: true, generateBackend: true }
-    },
-    {
-      name: 'cabin',
-      label: 'Cabine',
-      tableName: 'cabins',
-      properties: [
-        { name: 'name', type: 'string', required: true, label: 'Nome' },
-        { name: 'code', type: 'string', required: false, label: 'Código' },
-        {
-          name: 'company_id', type: 'relationship', required: true, label: 'Empresa',
-          relation: {
-            target: 'company', kind: 'many-to-one', relationName: 'company',
-            inverseSide: 'cabins', control: 'select', displayField: 'name', onDelete: 'CASCADE',
-            lookup: { mode: 'remote', pageSize: 20, minSearchLength: 0 }
-          }
-        },
-        { name: 'is_active', type: 'boolean', required: true, label: 'Ativo', default: true }
-      ],
-      crud: {
-        generateFrontend: true,
-        generateBackend: true
-      }
-    }
-  ]
-};
-`;
-        fs.writeFileSync(configPath, configContent, 'utf-8');
-        // 3.1 Criar docker-compose.yml e init.sql
+        // 2. Gerar docker-compose.yml e init.sql
         console.log('Gerando docker-compose.yml e base de dados...');
-        const tempConfig = {
-            projectName,
-            backendType: isMicroservices ? 'microservices' : 'monolith',
-            entities: [
-                {
-                    name: 'cabin',
-                    tableName: 'cabins',
-                }
-            ]
-        };
-        generateDockerComposeAndDbInit(projectRoot, tempConfig);
-        // 3.2 Criar Makefile na raiz
+        generateDockerComposeAndDbInit(projectRoot, config);
+        // 3. Gerar Makefile na raiz
         console.log('Gerando arquivo Makefile na raiz...');
         const backendServiceName = isMicroservices ? 'api-gateway' : 'backend';
         const makefileContent = `.PHONY: up down restart build logs ps clean backend-shell frontend-shell db-shell dev-up dev-down dev-restart dev-build dev-logs dev-ps dev-clean help
@@ -2120,17 +2050,100 @@ db-shell:
         catch (err) {
             console.warn('[Aviso] Falha ao rodar "npm install" no frontend. Instale as dependências manualmente.');
         }
-        // 5. Inicializar UI no frontend depois do install para disponibilizar @spartan-ng/cli
+        // 5. Inicializar componentes de UI Spartan
         console.log('Inicializando componentes de UI locais...');
-        const generatedConfig = require(configPath).default ?? require(configPath);
-        initUi(frontendDest, generatedConfig);
-        console.log(`\n\x1b[32m[SUCESSO] Projeto "${projectName}" criado com sucesso!\x1b[0m`);
+        initUi(frontendDest, config);
+        console.log(`\n\x1b[32m[SUCESSO] Projeto "${projectName}" gerado com sucesso!\x1b[0m`);
+    }
+    catch (err) {
+        console.error('[Erro] Falha ao gerar o projeto:', err);
+        process.exit(1);
+    }
+}
+// Comando new-project
+program
+    .command('new-project <projectName>')
+    .description('Cria um novo diretório de projeto e inicializa o devstroupe.config.ts')
+    .option('--microservices', 'Cria o projeto utilizando arquitetura de microsserviços')
+    .action((projectName, options) => {
+    const projectRoot = path.resolve(process.cwd(), projectName);
+    if (fs.existsSync(projectRoot) && fs.readdirSync(projectRoot).length > 0) {
+        console.error(`[Erro] O diretório "${projectName}" já existe e não está vazio.`);
+        process.exit(1);
+    }
+    const isMicroservices = !!options.microservices;
+    console.log(`Inicializando novo projeto "${projectName}" em: ${projectRoot}...`);
+    try {
+        // 1. Criar diretório de destino
+        fs.ensureDirSync(projectRoot);
+        // 2. Criar devstroupe.config.ts padrão
+        console.log('Gerando arquivo devstroupe.config.ts...');
+        const configPath = path.join(projectRoot, 'devstroupe.config.ts');
+        const configContent = `export default {
+  projectName: '${projectName}',
+  backendType: '${isMicroservices ? 'microservices' : 'monolith'}',
+  backendPath: './backend',
+  frontendPath: './frontend',
+  designSystem: {
+    provider: 'spartan',
+    spartanStyle: 'vega',
+    spartanTheme: 'neutral',
+    installAllPrimitives: true,
+    includePlayground: true
+  },
+  entities: [
+    {
+      name: 'company',
+      label: 'Empresa',
+      tableName: 'companies',
+      properties: [
+        { name: 'name', type: 'string', required: true, label: 'Nome' },
+        {
+          name: 'cabins', type: 'relationship', required: false, label: 'Cabines',
+          relation: {
+            target: 'cabin', kind: 'one-to-many', foreignKey: 'company_id',
+            inverseSide: 'company', control: 'table', embedded: true,
+            columns: ['name', 'code', 'is_active'], lookup: { pageSize: 10 }
+          }
+        }
+      ],
+      crud: { generateFrontend: true, generateBackend: true }
+    },
+    {
+      name: 'cabin',
+      label: 'Cabine',
+      tableName: 'cabins',
+      properties: [
+        { name: 'name', type: 'string', required: true, label: 'Nome' },
+        { name: 'code', type: 'string', required: false, label: 'Código' },
+        {
+          name: 'company_id', type: 'relationship', required: true, label: 'Empresa',
+          relation: {
+            target: 'company', kind: 'many-to-one', relationName: 'company',
+            inverseSide: 'cabins', control: 'select', displayField: 'name', onDelete: 'CASCADE',
+            lookup: { mode: 'remote', pageSize: 20, minSearchLength: 0 }
+          }
+        },
+        { name: 'is_active', type: 'boolean', required: true, label: 'Ativo', default: true }
+      ],
+      crud: {
+        generateFrontend: true,
+        generateBackend: true
+      }
+    }
+  ]
+};
+`;
+        fs.writeFileSync(configPath, configContent, 'utf-8');
+        console.log(`\n\x1b[32m[SUCESSO] Projeto "${projectName}" inicializado com sucesso!\x1b[0m`);
         console.log(`Para começar:`);
-        console.log(`  1. Entre na pasta do projeto: cd ${projectName}`);
-        console.log(`  2. Desenvolva sua aplicação com o DT-DevKit!`);
+        console.log(`  1. Acesse a pasta do projeto: cd ${projectName}`);
+        console.log(`  2. Ajuste suas entidades e configurações no arquivo: devstroupe.config.ts`);
+        console.log(`  3. Execute o comando a seguir para gerar toda a estrutura física (frontend, backend, Docker):`);
+        console.log(`     devstroupe generate project`);
     }
     catch (err) {
-        console.error('[Erro] Falha ao criar o novo projeto:', err);
+        console.error('[Erro] Falha ao inicializar o novo projeto:', err);
         process.exit(1);
     }
 });

package/dist/templates/nest/migration.template.js

@@ -80,16 +80,25 @@ function nestMigrationTemplate(entity, entities, timestamp, properties = entity.
     const relationColumns = relationships
         .filter((relationship) => (0, relationships_1.isSingularRelationship)(relationship.kind))
         .map((relationship) => `        { name: '${relationship.foreignKey}', type: 'int', isNullable: ${!relationship.property.required}, isUnique: ${relationship.kind === 'one-to-one'} }`);
-    const foreignKeys = relationships
+    // Gera SQL idempotente para cada FK: DROP IF EXISTS + ADD CONSTRAINT
+    const foreignKeysSql = relationships
         .filter((relationship) => (0, relationships_1.isSingularRelationship)(relationship.kind))
-        .map((relationship) => `      new TableForeignKey({
-        name: 'FK_${tableName}_${relationship.foreignKey}',
-        columnNames: ['${relationship.foreignKey}'],
-        referencedTableName: '${targetTable(relationship.target, entities)}',
-        referencedColumnNames: ['${relationship.valueField}'],
-        onDelete: '${relationship.onDelete}'
-      })`)
-        .join(',\n');
+        .map((relationship) => {
+        const fkName = `FK_${tableName}_${relationship.foreignKey}`;
+        const refTable = targetTable(relationship.target, entities);
+        return [
+            `    await queryRunner.query(\`ALTER TABLE \\\`${tableName}\\\` DROP FOREIGN KEY IF EXISTS \\\`${fkName}\\\`\`);`,
+            `    await queryRunner.query(\`ALTER TABLE \\\`${tableName}\\\` ADD CONSTRAINT \\\`${fkName}\\\` FOREIGN KEY (\\\`${relationship.foreignKey}\\\`) REFERENCES \\\`${refTable}\\\`(\\\`${relationship.valueField}\\\`) ON DELETE ${relationship.onDelete}\`);`,
+        ].join('\n');
+    })
+        .join('\n');
+    const dropForeignKeysSql = relationships
+        .filter((relationship) => (0, relationships_1.isSingularRelationship)(relationship.kind))
+        .map((relationship) => {
+        const fkName = `FK_${tableName}_${relationship.foreignKey}`;
+        return `    await queryRunner.query(\`ALTER TABLE \\\`${tableName}\\\` DROP FOREIGN KEY IF EXISTS \\\`${fkName}\\\`\`);`;
+    })
+        .join('\n');
     const junctions = relationships
         .filter((relationship) => relationship.kind === 'many-to-many' && relationship.owner)
         .map((relationship) => {
@@ -154,7 +163,7 @@ function nestMigrationTemplate(entity, entities, timestamp, properties = entity.
             return `    await queryRunner.query('ALTER TABLE \`${tableName}\` DROP CONSTRAINT \`${checkName}\`');`;
         }).join('\n')
         : '';
-    return `import { MigrationInterface, QueryRunner, Table, TableForeignKey, TableIndex } from 'typeorm';
+    return `import { MigrationInterface, QueryRunner, Table, TableIndex } from 'typeorm';
 
 export class ${className} implements MigrationInterface {
   name = '${className}';
@@ -166,10 +175,7 @@ export class ${className} implements MigrationInterface {
         { name: 'id', type: 'int', isPrimary: true, isGenerated: true, generationStrategy: 'increment' }${scalarColumns.length + relationColumns.length > 0 ? ',\n' : ''}${[...scalarColumns, ...relationColumns].join(',\n')}
       ]
     }), true);
-${foreignKeys ? `
-    await queryRunner.createForeignKeys('${tableName}', [
-${foreignKeys}
-    ]);` : ''}
+${foreignKeysSql ? `\n${foreignKeysSql}` : ''}
 ${tableIndexes ? `\n${tableIndexes}` : ''}
 ${checkConstraints ? `\n${checkConstraints}` : ''}
 ${junctions.map((junction) => `
@@ -177,7 +183,7 @@ ${junction.up}`).join('\n')}
   }
 
   async down(queryRunner: QueryRunner): Promise<void> {
-${dropChecks ? `${dropChecks}\n` : ''}${dropIndexes ? `${dropIndexes}\n` : ''}${junctions.slice().reverse().map((junction) => `    await queryRunner.dropTable('${junction.tableName}', true);`).join('\n')}${junctions.length > 0 ? '\n' : ''}    await queryRunner.dropTable('${tableName}', true);
+${dropChecks ? `${dropChecks}\n` : ''}${dropIndexes ? `${dropIndexes}\n` : ''}${dropForeignKeysSql ? `${dropForeignKeysSql}\n` : ''}${junctions.slice().reverse().map((junction) => `    await queryRunner.dropTable('${junction.tableName}', true);`).join('\n')}${junctions.length > 0 ? '\n' : ''}    await queryRunner.dropTable('${tableName}', true);
   }
 }
 `;

package/dist/templates/relationship-templates.test.js

@@ -149,8 +149,9 @@ function assertValidTypeScript(source) {
     strict_1.default.match(companyMigration, /name: 'companies'/);
     strict_1.default.doesNotMatch(companyMigration, /FK_companies_cabins/);
     strict_1.default.match(cabinMigration, /name: 'company_id', type: 'int'/);
-    strict_1.default.match(cabinMigration, /referencedTableName: 'companies'/);
-    strict_1.default.match(cabinMigration, /onDelete: 'CASCADE'/);
+    strict_1.default.match(cabinMigration, /ADD CONSTRAINT/);
+    strict_1.default.match(cabinMigration, /FK_cabins_company_id/);
+    strict_1.default.match(cabinMigration, /ON DELETE CASCADE/);
     strict_1.default.match(dataSource, /migrations: \[path\.join/);
     strict_1.default.match(dataSource, /synchronize: false/);
     assertValidTypeScript(companyMigration);

package/dist/templates/ui/layout/header.template.js

@@ -8,11 +8,12 @@ import { CommonModule } from '@angular/common';
 import { HlmButton } from '@spartan-ng/helm/button';
 import { HlmInput } from '@spartan-ng/helm/input';
 import { NgIconComponent } from '@ng-icons/core';
+import type { ThemeMode } from '../../../core/services/theme.service';
 
 export interface IUserProfile {
   name: string;
   avatar?: string;
-  role?: string;
+  role?: any; // pode ser string ou { name: string, permissions: string[] }
 }
 
 @Component({
@@ -28,16 +29,35 @@ export class DevkitHeaderComponent {
   @Input() user: IUserProfile | null = null;
   @Input() isSidebarCollapsed = false;
   @Input() isDarkMode = false;
+  @Input() themeMode: ThemeMode = 'auto';
 
   @Output() toggleSidebar = new EventEmitter<void>();
   @Output() logout = new EventEmitter<void>();
   @Output() toggleTheme = new EventEmitter<void>();
   @Output() openProfile = new EventEmitter<void>();
+  @Output() setThemeMode = new EventEmitter<ThemeMode>();
 
   isProfileDropdownOpen = false;
+  isThemeDropdownOpen = false;
+
+  get roleName(): string {
+    if (!this.user?.role) return '';
+    return typeof this.user.role === 'object' ? (this.user.role.name ?? '') : this.user.role;
+  }
 
   toggleProfileDropdown(): void {
     this.isProfileDropdownOpen = !this.isProfileDropdownOpen;
+    this.isThemeDropdownOpen = false;
+  }
+
+  toggleThemeDropdown(): void {
+    this.isThemeDropdownOpen = !this.isThemeDropdownOpen;
+    this.isProfileDropdownOpen = false;
+  }
+
+  onSelectTheme(mode: ThemeMode): void {
+    this.isThemeDropdownOpen = false;
+    this.setThemeMode.emit(mode);
   }
 
   onLogoutClick(): void {
@@ -53,6 +73,18 @@ export class DevkitHeaderComponent {
   onToggleTheme(): void {
     this.toggleTheme.emit();
   }
+
+  get themeIcon(): string {
+    if (this.themeMode === 'light') return 'lucideSun';
+    if (this.themeMode === 'dark') return 'lucideMoon';
+    return 'lucideMonitor';
+  }
+
+  get themeLabel(): string {
+    if (this.themeMode === 'light') return 'Light';
+    if (this.themeMode === 'dark') return 'Dark';
+    return 'Auto';
+  }
 }
 `,
         html: `<header class="dt-header">
@@ -70,18 +102,35 @@ export class DevkitHeaderComponent {
 
   <div class="flex items-center space-x-3">
 
-    <!-- Toggle Dark / Light Mode -->
-    <button
-      hlmBtn
-      variant="ghost"
-      size="icon"
-      class="dt-header-action"
-      [title]="isDarkMode ? 'Mudar para modo claro' : 'Mudar para modo escuro'"
-      (click)="onToggleTheme()"
-    >
-      <ng-icon *ngIf="isDarkMode" name="lucideSun" class="size-5"></ng-icon>
-      <ng-icon *ngIf="!isDarkMode" name="lucideMoon" class="size-5"></ng-icon>
-    </button>
+    <!-- Seletor de Tema (Light / Dark / Auto) -->
+    <div class="relative">
+      <button
+        hlmBtn
+        variant="ghost"
+        size="icon"
+        class="dt-header-action"
+        [title]="'Tema: ' + themeLabel"
+        (click)="toggleThemeDropdown()"
+      >
+        <ng-icon [name]="themeIcon" class="size-5"></ng-icon>
+      </button>
+
+      <!-- Dropdown de Tema -->
+      <div *ngIf="isThemeDropdownOpen" class="dt-theme-dropdown">
+        <button class="dt-theme-option" [class.dt-theme-option--active]="themeMode === 'light'" (click)="onSelectTheme('light')">
+          <ng-icon name="lucideSun" class="size-4 mr-2"></ng-icon>
+          Light
+        </button>
+        <button class="dt-theme-option" [class.dt-theme-option--active]="themeMode === 'dark'" (click)="onSelectTheme('dark')">
+          <ng-icon name="lucideMoon" class="size-4 mr-2"></ng-icon>
+          Dark
+        </button>
+        <button class="dt-theme-option" [class.dt-theme-option--active]="themeMode === 'auto'" (click)="onSelectTheme('auto')">
+          <ng-icon name="lucideMonitor" class="size-4 mr-2"></ng-icon>
+          Auto
+        </button>
+      </div>
+    </div>
 
     <!-- Notificações -->
     <button *ngIf="showNotifications" hlmBtn variant="ghost" size="icon" class="dt-header-action relative" title="Notificações">
@@ -103,7 +152,7 @@ export class DevkitHeaderComponent {
         </ng-template>
         <div class="hidden md:flex flex-col text-left">
           <span class="text-sm font-semibold leading-none text-foreground">{{ user.name }}</span>
-          <span *ngIf="user.role" class="text-[10px] font-medium leading-none mt-1 text-muted-foreground">{{ user.role }}</span>
+          <span *ngIf="roleName" class="text-[10px] font-medium leading-none mt-1 text-muted-foreground">{{ roleName }}</span>
         </div>
       </button>
  
@@ -111,7 +160,7 @@ export class DevkitHeaderComponent {
       <div *ngIf="isProfileDropdownOpen" class="dt-header-dropdown">
         <div class="px-4 py-3 border-b border-border">
           <p class="text-sm font-bold text-foreground">{{ user.name }}</p>
-          <p *ngIf="user.role" class="text-xs text-muted-foreground mt-0.5">{{ user.role }}</p>
+          <p *ngIf="roleName" class="text-xs text-muted-foreground mt-0.5">{{ roleName }}</p>
         </div>
         <button hlmBtn variant="ghost" (click)="onOpenProfile()" class="dt-header-dropdown-item">
           <ng-icon name="lucideUser" class="size-4 mr-2"></ng-icon>
@@ -180,6 +229,46 @@ export class DevkitHeaderComponent {
   width: 280px;
 }
 
+.dt-theme-dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  width: 140px;
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+  font-family: var(--font-family);
+}
+
+.dt-theme-option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 9px 14px;
+  background: transparent;
+  border: none;
+  font-size: 13px;
+  color: var(--popover-foreground);
+  cursor: pointer;
+  font-family: var(--font-family);
+  transition: background-color 0.15s ease-in-out;
+}
+
+.dt-theme-option:hover {
+  background-color: var(--muted);
+}
+
+.dt-theme-option--active {
+  color: var(--primary);
+  font-weight: 600;
+}
+
 .dt-header-dropdown {
   position: absolute;
   right: 0;

package/dist/templates/ui/layout/main-layout.template.js

@@ -32,6 +32,7 @@ export class MainLayoutComponent implements OnInit {
   menuItems: INavigationItem[] = APP_NAVIGATION;
   currentUser$ = this.authService.currentUser$;
   isDark$ = this.themeService.isDark$;
+  themeMode$ = this.themeService.themeMode$;
 
   brandLogo = '${brandLogo}';
   brandLogoCollapsed = '${brandLogoCollapsed}';
@@ -53,6 +54,10 @@ export class MainLayoutComponent implements OnInit {
     this.themeService.toggle();
   }
 
+  onSetThemeMode(mode: 'light' | 'dark' | 'auto'): void {
+    this.themeService.setMode(mode);
+  }
+
   onOpenProfile(): void {
     this.router.navigate(['/profile']);
   }
@@ -87,9 +92,11 @@ export class MainLayoutComponent implements OnInit {
     [user]="currentUser$ | async"
     [isSidebarCollapsed]="isCollapsed"
     [isDarkMode]="(isDark$ | async) ?? false"
+    [themeMode]="(themeMode$ | async) ?? 'auto'"
     (toggleSidebar)="isCollapsed = !isCollapsed"
     (logout)="onLogout()"
     (toggleTheme)="onToggleTheme()"
+    (setThemeMode)="onSetThemeMode($event)"
     (openProfile)="onOpenProfile()"
   ></devkit-header>
 

package/dist/templates/ui/shared/theme-service.template.js

@@ -5,42 +5,57 @@ function devkitThemeServiceTemplate() {
     return `import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
+export type ThemeMode = 'light' | 'dark' | 'auto';
+
 const THEME_KEY = 'devkit-theme';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ThemeService {
+  private modeSubject = new BehaviorSubject<ThemeMode>('auto');
   private isDarkSubject = new BehaviorSubject<boolean>(false);
+
+  themeMode$ = this.modeSubject.asObservable();
   isDark$ = this.isDarkSubject.asObservable();
 
-  get isDark(): boolean {
-    return this.isDarkSubject.getValue();
-  }
+  get isDark(): boolean { return this.isDarkSubject.getValue(); }
+  get mode(): ThemeMode { return this.modeSubject.getValue(); }
 
   constructor() {
     this.loadTheme();
+    window.matchMedia?.('(prefers-color-scheme: dark)')
+      .addEventListener('change', () => {
+        if (this.mode === 'auto') this.applyMode('auto');
+      });
   }
 
+  /** Cicla entre light → dark → auto */
   toggle(): void {
-    this.setDark(!this.isDark);
+    const next: ThemeMode = this.mode === 'light' ? 'dark' : this.mode === 'dark' ? 'auto' : 'light';
+    this.setMode(next);
   }
 
-  setDark(dark: boolean): void {
+  setMode(mode: ThemeMode): void {
+    this.modeSubject.next(mode);
+    localStorage.setItem(THEME_KEY, mode);
+    this.applyMode(mode);
+  }
+
+  /** @deprecated use setMode */
+  setDark(dark: boolean): void { this.setMode(dark ? 'dark' : 'light'); }
+
+  private applyMode(mode: ThemeMode): void {
+    const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+    const dark = mode === 'dark' || (mode === 'auto' && prefersDark);
     this.isDarkSubject.next(dark);
-    localStorage.setItem(THEME_KEY, dark ? 'dark' : 'light');
-    if (dark) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
+    document.documentElement.classList.toggle('dark', dark);
   }
 
   private loadTheme(): void {
-    const saved = localStorage.getItem(THEME_KEY);
-    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const dark = saved ? saved === 'dark' : prefersDark;
-    this.setDark(dark);
+    const saved = (localStorage.getItem(THEME_KEY) ?? 'auto') as ThemeMode;
+    this.modeSubject.next(saved);
+    this.applyMode(saved);
   }
 }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devstroupe/devkit-cli",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "DevsTroupe Development Kit CLI — scaffold NestJS+Angular projects, inject Spartan UI, generate CRUDs and audit architectural governance",
   "license": "MIT",
   "keywords": [
@@ -36,7 +36,7 @@
   "dependencies": {
     "commander": "^12.0.0",
     "fs-extra": "^11.2.0",
-    "@devstroupe/devkit-core": "1.1.8"
+    "@devstroupe/devkit-core": "1.1.10"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",