@devstroupe/devkit-cli 1.0.0

package/dist/templates/ui/playground.template.js

@@ -0,0 +1,570 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devkitPlaygroundComponentTemplate = devkitPlaygroundComponentTemplate;
+function devkitPlaygroundComponentTemplate(spartanPrimitives = []) {
+    const primitiveList = JSON.stringify(spartanPrimitives, null, 4).replace(/"/g, "'");
+    return {
+        ts: `import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HlmAccordionImports } from '@spartan-ng/helm/accordion';
+import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
+import { HlmButton } from '@spartan-ng/helm/button';
+import { HlmDialogImports } from '@spartan-ng/helm/dialog';
+import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
+import { HlmSelectImports } from '@spartan-ng/helm/select';
+import { HlmTabsImports } from '@spartan-ng/helm/tabs';
+import { DevkitButtonComponent } from '../../shared/components/devkit/button/button.component';
+import { DevkitInputComponent } from '../../shared/components/devkit/input/input.component';
+import { DevkitSelectComponent } from '../../shared/components/devkit/select/select.component';
+import { DevkitTableComponent } from '../../shared/components/devkit/table/table.component';
+import { DevkitFilterComponent } from '../../shared/components/devkit/filter/filter.component';
+import { DevkitBadgeComponent } from '../../shared/components/devkit/ui-badge-helm/badge.component';
+import { DevkitAvatarComponent } from '../../shared/components/devkit/ui-avatar-helm/avatar.component';
+
+@Component({
+  selector: 'app-playground',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    DevkitButtonComponent,
+    DevkitInputComponent,
+    DevkitSelectComponent,
+    DevkitTableComponent,
+    DevkitFilterComponent,
+    DevkitBadgeComponent,
+    DevkitAvatarComponent,
+    HlmAccordionImports,
+    HlmAlertDialogImports,
+    HlmButton,
+    HlmDialogImports,
+    HlmDropdownMenuImports,
+    HlmSelectImports,
+    HlmTabsImports
+  ],
+  templateUrl: './playground.component.html',
+  styleUrls: ['./playground.component.css']
+})
+export class PlaygroundComponent implements OnInit {
+  // Teste de inputs
+  textValue = 'Texto de exemplo';
+  selectOptions = [
+    { label: 'Opção 1', value: '1' },
+    { label: 'Opção 2', value: '2' },
+    { label: 'Opção 3', value: '3' }
+  ];
+  directSelectValue: string | null | undefined = null;
+  selectItemToString = (value: any): string => {
+    const selected = this.selectOptions.find(option => option.value === value);
+    return selected ? selected.label : 'Selecione...';
+  };
+
+  spartanPrimitives = ${primitiveList};
+
+  // Teste de Tabelas
+  columns = [
+    { key: 'id', label: 'ID', sortable: true },
+    { key: 'name', label: 'Nome completo', sortable: true },
+    { key: 'email', label: 'E-mail', sortable: false },
+    { key: 'role', label: 'Função', sortable: true },
+    { key: 'status', label: 'Status', sortable: false }
+  ];
+
+  items = [
+    { id: '1', name: 'Ana Souza', email: 'ana@devstroupe.com', role: 'Administrador', status: 'Ativo' },
+    { id: '2', name: 'Carlos Lima', email: 'carlos@devstroupe.com', role: 'Desenvolvedor', status: 'Ativo' },
+    { id: '3', name: 'Juliana Costa', email: 'juliana@devstroupe.com', role: 'Designer', status: 'Pendente' }
+  ];
+
+  filterConfig = [
+    { key: 'search', label: 'Buscar por nome', type: 'text' as const, col: 'col-span-12 md:col-span-8' },
+    { 
+      key: 'status', 
+      label: 'Status', 
+      type: 'select' as const, 
+      options: [
+        { label: 'Todos', value: '' },
+        { label: 'Ativos', value: 'Ativo' },
+        { label: 'Pendentes', value: 'Pendente' }
+      ],
+      col: 'col-span-12 md:col-span-4'
+    }
+  ];
+
+  onFilterChange(filters: any) {
+    console.log('Playground filter applied:', filters);
+  }
+
+  // Preview runtime apenas para paleta e modo. O style Spartan real e gerado pela CLI.
+  activeTheme = 'zinc';
+  isDarkMode = false;
+
+  // Estado interativo para os componentes adicionais do Spartan
+  activeTab = 'tab1';
+
+  themes = [
+    { value: 'violet', label: 'Violet' },
+    { value: 'zinc', label: 'Zinc' },
+    { value: 'slate', label: 'Slate' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'rose', label: 'Rose' }
+  ];
+
+  private themeColors: Record<string, { light: any; dark: any }> = {
+    violet: {
+      light: {
+        primary: '262.1 83.3% 57.8%',
+        primaryForeground: '0 0% 98%',
+        secondary: '240 4.8% 95.9%',
+        secondaryForeground: '240 5.9% 10%',
+        ring: '262.1 83.3% 57.8%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%'
+      },
+      dark: {
+        primary: '263.4 70% 50.4%',
+        primaryForeground: '210 20% 98%',
+        secondary: '240 3.7% 15.9%',
+        secondaryForeground: '0 0% 98%',
+        ring: '263.4 70% 50.4%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%'
+      }
+    },
+    zinc: {
+      light: {
+        primary: '240 5.9% 10%',
+        primaryForeground: '0 0% 98%',
+        secondary: '240 4.8% 95.9%',
+        secondaryForeground: '240 5.9% 10%',
+        ring: '240 5.9% 10%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%'
+      },
+      dark: {
+        primary: '0 0% 98%',
+        primaryForeground: '240 5.9% 10%',
+        secondary: '240 3.7% 15.9%',
+        secondaryForeground: '0 0% 98%',
+        ring: '240 4.9% 83.9%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%'
+      }
+    },
+    slate: {
+      light: {
+        primary: '222.2 47.4% 11.2%',
+        primaryForeground: '210 40% 98%',
+        secondary: '210 40% 96.1%',
+        secondaryForeground: '222.2 47.4% 11.2%',
+        ring: '222.2 84% 4.9%',
+        border: '214.3 31.8% 91.4%',
+        input: '214.3 31.8% 91.4%'
+      },
+      dark: {
+        primary: '210 40% 98%',
+        primaryForeground: '222.2 47.4% 11.2%',
+        secondary: '217.2 32.6% 17.5%',
+        secondaryForeground: '210 40% 98%',
+        ring: '217.2 91.2% 59.8%',
+        border: '217.2 32.6% 17.5%',
+        input: '217.2 32.6% 17.5%'
+      }
+    },
+    orange: {
+      light: {
+        primary: '24.6 95% 53.1%',
+        primaryForeground: '0 0% 98%',
+        secondary: '240 4.8% 95.9%',
+        secondaryForeground: '240 5.9% 10%',
+        ring: '24.6 95% 53.1%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%'
+      },
+      dark: {
+        primary: '20.5 90.2% 48.2%',
+        primaryForeground: '60 9.1% 97.8%',
+        secondary: '240 3.7% 15.9%',
+        secondaryForeground: '0 0% 98%',
+        ring: '20.5 90.2% 48.2%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%'
+      }
+    },
+    rose: {
+      light: {
+        primary: '346.8 77.2% 49.8%',
+        primaryForeground: '355.7 100% 97.3%',
+        secondary: '240 4.8% 95.9%',
+        secondaryForeground: '240 5.9% 10%',
+        ring: '346.8 77.2% 49.8%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%'
+      },
+      dark: {
+        primary: '346.8 77.2% 49.8%',
+        primaryForeground: '355.7 100% 97.3%',
+        secondary: '240 3.7% 15.9%',
+        secondaryForeground: '0 0% 98%',
+        ring: '346.8 77.2% 49.8%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%'
+      }
+    }
+  };
+
+  ngOnInit() {
+    this.updateDomVariables();
+  }
+
+  changeTheme(themeName: string) {
+    this.activeTheme = themeName;
+    this.updateDomVariables();
+  }
+
+  toggleDarkMode() {
+    this.isDarkMode = !this.isDarkMode;
+    this.updateDomVariables();
+  }
+
+  private updateDomVariables() {
+    const root = document.documentElement;
+    const mode = this.isDarkMode ? 'dark' : 'light';
+    const colors = this.themeColors[this.activeTheme][mode];
+
+    // As variaveis precisam receber uma cor CSS valida, pois o preset
+    // do Spartan mapeia --color-primary diretamente para var(--primary).
+    root.style.setProperty('--primary', \`hsl(\${colors.primary})\`);
+    root.style.setProperty('--primary-foreground', \`hsl(\${colors.primaryForeground})\`);
+    root.style.setProperty('--secondary', \`hsl(\${colors.secondary})\`);
+    root.style.setProperty('--secondary-foreground', \`hsl(\${colors.secondaryForeground})\`);
+    root.style.setProperty('--border', \`hsl(\${colors.border})\`);
+    root.style.setProperty('--input', \`hsl(\${colors.input})\`);
+    root.style.setProperty('--ring', \`hsl(\${colors.ring})\`);
+    root.style.setProperty('--accent', \`hsl(\${colors.secondary})\`);
+    root.style.setProperty('--accent-foreground', \`hsl(\${colors.secondaryForeground})\`);
+
+    if (this.isDarkMode) {
+      root.classList.add('dark');
+      document.body.classList.add('dark');
+      root.style.setProperty('--background', 'hsl(240 10% 3.9%)');
+      root.style.setProperty('--foreground', 'hsl(0 0% 98%)');
+      root.style.setProperty('--card', 'hsl(240 10% 3.9%)');
+      root.style.setProperty('--card-foreground', 'hsl(0 0% 98%)');
+      root.style.setProperty('--popover', 'hsl(240 10% 3.9%)');
+      root.style.setProperty('--popover-foreground', 'hsl(0 0% 98%)');
+      root.style.setProperty('--muted', 'hsl(240 3.7% 15.9%)');
+      root.style.setProperty('--muted-foreground', 'hsl(240 5% 64.9%)');
+    } else {
+      root.classList.remove('dark');
+      document.body.classList.remove('dark');
+      root.style.setProperty('--background', 'hsl(0 0% 98%)');
+      root.style.setProperty('--foreground', 'hsl(240 10% 3.9%)');
+      root.style.setProperty('--card', 'hsl(0 0% 100%)');
+      root.style.setProperty('--card-foreground', 'hsl(240 10% 3.9%)');
+      root.style.setProperty('--popover', 'hsl(0 0% 100%)');
+      root.style.setProperty('--popover-foreground', 'hsl(240 10% 3.9%)');
+      root.style.setProperty('--muted', 'hsl(240 4.8% 95.9%)');
+      root.style.setProperty('--muted-foreground', 'hsl(240 3.8% 46.1%)');
+    }
+
+  }
+}
+
+`,
+        html: `<div class="max-w-6xl mx-auto p-8 space-y-12">
+  <!-- Header -->
+  <div class="border-b border-border pb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+    <div>
+      <h1 class="text-3xl font-extrabold tracking-tight text-foreground">Playground de Componentes do DevKit</h1>
+      <p class="text-sm text-muted-foreground mt-2">Valide a renderização e estilo sob a configuração atual do Design System.</p>
+    </div>
+  </div>
+
+  <div class="rounded-xl border border-primary/20 bg-card/40 p-6 backdrop-blur-md flex flex-wrap gap-6 items-center justify-between">
+    <div>
+      <h3 class="text-base font-bold text-foreground flex items-center gap-2">
+        <span class="w-2.5 h-2.5 rounded-full bg-primary animate-pulse"></span>
+        Preview de Tema
+      </h3>
+      <p class="text-xs text-muted-foreground mt-1">Altere paleta e modo no browser. O style Spartan real muda via CLI: <code class="rounded bg-muted px-1 py-0.5">devstroupe ui:set-style &lt;style&gt;</code>.</p>
+    </div>
+    
+    <div class="flex flex-wrap gap-4 items-center">
+      <!-- Theme Selector -->
+      <div class="w-44">
+        <devkit-select
+          label="Tema de Cores"
+          [options]="themes"
+          [(ngModel)]="activeTheme"
+          (ngModelChange)="changeTheme($event)"
+        ></devkit-select>
+      </div>
+
+      <!-- Dark/Light Mode Switcher -->
+      <div class="flex flex-col space-y-1 justify-end h-full pt-4">
+        <button 
+          (click)="toggleDarkMode()"
+          class="py-1.5 px-4 rounded-lg text-sm flex items-center gap-2 border border-border bg-card text-foreground hover:bg-muted"
+        >
+          <span>{{ isDarkMode ? '🌙 Dark Mode' : '☀️ Light Mode' }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Inventário de primitives Spartan -->
+  <div class="space-y-4">
+    <div class="flex flex-col gap-1">
+      <h2 class="text-xl font-bold text-foreground">Inventário Spartan Helm</h2>
+      <p class="text-sm text-muted-foreground">
+        {{ spartanPrimitives.length }} primitives oficiais gerados em <code class="rounded bg-muted px-1 py-0.5">libs/ui</code>.
+      </p>
+    </div>
+    <div class="rounded-xl border border-border bg-card p-6">
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
+        <div *ngFor="let primitive of spartanPrimitives" class="rounded-md border border-border bg-background px-3 py-2 text-xs font-medium text-foreground">
+          {{ primitive }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sessão de Cores e Temas -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">1. Variáveis de Marca</h2>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <div class="p-4 rounded-lg border border-border bg-card flex flex-col justify-between h-24">
+        <span class="text-xs font-semibold text-muted-foreground uppercase">Primary</span>
+        <div class="flex items-center space-x-2">
+          <div class="w-6 h-6 rounded bg-primary border border-border"></div>
+          <span class="text-sm font-mono text-card-foreground">var(--primary)</span>
+        </div>
+      </div>
+      <div class="p-4 rounded-lg border border-border bg-card flex flex-col justify-between h-24">
+        <span class="text-xs font-semibold text-muted-foreground uppercase">Secondary</span>
+        <div class="flex items-center space-x-2">
+          <div class="w-6 h-6 rounded bg-secondary border border-border"></div>
+          <span class="text-sm font-mono text-card-foreground">var(--secondary)</span>
+        </div>
+      </div>
+      <div class="p-4 rounded-lg border border-border bg-card flex flex-col justify-between h-24">
+        <span class="text-xs font-semibold text-muted-foreground uppercase">Background Base</span>
+        <div class="flex items-center space-x-2">
+          <div class="w-6 h-6 rounded border border-border bg-background"></div>
+          <span class="text-sm font-mono text-card-foreground">var(--background)</span>
+        </div>
+      </div>
+      <div class="p-4 rounded-lg border border-border bg-card flex flex-col justify-between h-24">
+        <span class="text-xs font-semibold text-muted-foreground uppercase">Border</span>
+        <div class="flex items-center space-x-2">
+          <div class="w-6 h-6 rounded border border-border bg-[var(--border)]"></div>
+          <span class="text-sm font-mono text-card-foreground">Border Color</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sessão de Buttons -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">2. Botões (devkit-button)</h2>
+    <div class="rounded-xl border border-border bg-card p-6 space-y-4">
+      <div class="flex flex-wrap gap-4">
+        <devkit-button variant="default">Primary / Default</devkit-button>
+        <devkit-button variant="secondary">Secondary</devkit-button>
+        <devkit-button variant="destructive">Destructive</devkit-button>
+        <devkit-button variant="outline">Outline</devkit-button>
+        <devkit-button variant="ghost">Ghost</devkit-button>
+        <devkit-button variant="link">Link</devkit-button>
+      </div>
+      <div class="flex flex-wrap gap-4 items-center">
+        <devkit-button size="sm" variant="default">Pequeno (sm)</devkit-button>
+        <devkit-button size="default" variant="default">Normal (default)</devkit-button>
+        <devkit-button size="lg" variant="default">Grande (lg)</devkit-button>
+      </div>
+      <div class="flex flex-wrap gap-4">
+        <devkit-button [disabled]="true">Desabilitado</devkit-button>
+        <devkit-button [loading]="true">Carregando</devkit-button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sessão de Inputs e Selects -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">3. Formulários (devkit-input / devkit-select)</h2>
+    <div class="rounded-xl border border-border bg-card p-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <devkit-input label="Campo de Texto" placeholder="Digite seu texto..." [(ngModel)]="textValue" [required]="true"></devkit-input>
+        <devkit-select label="Caixa de Seleção" [options]="selectOptions" [required]="true"></devkit-select>
+        <div class="flex w-full flex-col space-y-1.5">
+          <label class="text-xs font-semibold text-muted-foreground">
+            Select Spartan direto
+          </label>
+          <hlm-select
+            class="w-full"
+            [value]="directSelectValue"
+            [itemToString]="selectItemToString"
+            (valueChange)="directSelectValue = $event"
+          >
+            <hlm-select-trigger class="w-full">
+              <hlm-select-value placeholder="Selecione..." />
+            </hlm-select-trigger>
+            <hlm-select-content *hlmSelectPortal>
+              <hlm-select-group>
+                <hlm-select-item [value]="null">Selecione...</hlm-select-item>
+                <hlm-select-item *ngFor="let opt of selectOptions" [value]="opt.value">{{ opt.label }}</hlm-select-item>
+              </hlm-select-group>
+            </hlm-select-content>
+          </hlm-select>
+        </div>
+        <devkit-input label="Desabilitado" placeholder="Não editável" [disabled]="true"></devkit-input>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sessão de Badges -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">4. Badges (devkit-badge)</h2>
+    <div class="rounded-xl border border-border bg-card p-6 flex flex-wrap gap-4">
+      <devkit-badge variant="default">Default</devkit-badge>
+      <devkit-badge variant="secondary">Secondary</devkit-badge>
+      <devkit-badge variant="destructive">Destructive</devkit-badge>
+      <devkit-badge variant="outline">Outline</devkit-badge>
+    </div>
+  </div>
+
+  <!-- Sessão de Avatares -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">5. Avatares (devkit-avatar)</h2>
+    <div class="rounded-xl border border-border bg-card p-6 flex flex-wrap gap-6 items-center">
+      <devkit-avatar name="Lucas Silva" size="sm"></devkit-avatar>
+      <devkit-avatar name="Carlos Lima" size="md"></devkit-avatar>
+      <devkit-avatar name="Juliana Costa" size="lg"></devkit-avatar>
+      <devkit-avatar name="Carlos Lima" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80" size="md"></devkit-avatar>
+    </div>
+  </div>
+
+  <!-- Sessão de Tabelas e Filtros -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">6. Listagens Reativas (devkit-filter / devkit-table)</h2>
+    <div class="rounded-xl border border-border bg-card p-6 space-y-6">
+      <devkit-filter [config]="filterConfig" (filterApplied)="onFilterChange($event)"></devkit-filter>
+      <devkit-table [columns]="columns" [items]="items" [striped]="true"></devkit-table>
+    </div>
+  </div>
+
+  <!-- Sessão de Acordeão -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">7. Acordeão (hlm-accordion)</h2>
+    <hlm-accordion type="single">
+      <hlm-accordion-item>
+        <hlm-accordion-trigger>O que é o DT-DevKit?</hlm-accordion-trigger>
+        <hlm-accordion-content>
+          O DT-DevKit é o kit de desenvolvimento padronizado da DevsTroupe, integrando backend NestJS, frontend Angular e governança de arquitetura.
+        </hlm-accordion-content>
+      </hlm-accordion-item>
+      <hlm-accordion-item>
+        <hlm-accordion-trigger>Como funciona a customização interativa?</hlm-accordion-trigger>
+        <hlm-accordion-content>
+          Ela altera as variáveis CSS nativas no elemento raiz do documento, propagando as modificações a todos os componentes em runtime.
+        </hlm-accordion-content>
+      </hlm-accordion-item>
+    </hlm-accordion>
+  </div>
+
+  <!-- Sessão de Abas -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">8. Abas (hlm-tabs)</h2>
+    <div class="rounded-xl border border-border bg-card p-6">
+      <hlm-tabs [tab]="activeTab" (tabActivated)="activeTab = $event">
+        <hlm-tabs-list>
+          <button hlmTabsTrigger="tab1">Perfil</button>
+          <button hlmTabsTrigger="tab2">Segurança</button>
+        </hlm-tabs-list>
+
+        <div hlmTabsContent="tab1" class="mt-4 text-muted-foreground">
+          Gerencie suas informações de perfil, configurações básicas de e-mail e preferências.
+        </div>
+        <div hlmTabsContent="tab2" class="mt-4 text-muted-foreground">
+          Altere sua senha, ative a autenticação de dois fatores e audite acessos recentes.
+        </div>
+      </hlm-tabs>
+    </div>
+  </div>
+
+  <!-- Sessão de Modais e Diálogos -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">9. Modais e Diálogos (hlm-dialog / hlm-alert-dialog)</h2>
+    <div class="rounded-xl border border-border bg-card p-6 flex flex-wrap gap-4">
+      <hlm-dialog>
+        <button hlmBtn hlmDialogTrigger>Abrir Dialog Padrão</button>
+        <hlm-dialog-content>
+          <hlm-dialog-header>
+            <h3 hlmDialogTitle>Editar Perfil</h3>
+            <p hlmDialogDescription>Faça alterações nas informações do seu perfil. Clique em salvar quando terminar.</p>
+          </hlm-dialog-header>
+          <div class="space-y-4 py-2">
+            <devkit-input label="Nome" placeholder="Seu nome..."></devkit-input>
+            <devkit-input label="E-mail" placeholder="Seu e-mail..."></devkit-input>
+          </div>
+          <hlm-dialog-footer>
+            <button hlmBtn variant="outline" hlmDialogClose>Cancelar</button>
+            <button hlmBtn hlmDialogClose>Salvar alterações</button>
+          </hlm-dialog-footer>
+        </hlm-dialog-content>
+      </hlm-dialog>
+
+      <hlm-alert-dialog>
+        <button hlmBtn variant="secondary" hlmAlertDialogTrigger>Abrir Alert Dialog Crítico</button>
+        <hlm-alert-dialog-content>
+          <hlm-alert-dialog-header>
+            <h3 hlmAlertDialogTitle>Você tem certeza absoluta?</h3>
+            <p hlmAlertDialogDescription>Esta ação não pode ser desfeita. Isso excluirá permanentemente sua conta e removerá seus dados de nossos servidores.</p>
+          </hlm-alert-dialog-header>
+          <hlm-alert-dialog-footer>
+            <button hlmAlertDialogCancel>Cancelar</button>
+            <button hlmAlertDialogAction variant="destructive">Sim, excluir conta</button>
+          </hlm-alert-dialog-footer>
+        </hlm-alert-dialog-content>
+      </hlm-alert-dialog>
+    </div>
+  </div>
+
+  <!-- Sessão de Menu Suspenso -->
+  <div class="space-y-4">
+    <h2 class="text-xl font-bold text-foreground">10. Menu Suspenso (hlm-dropdown-menu)</h2>
+    <div class="rounded-xl border border-border bg-card p-6">
+      <button hlmBtn variant="outline" [hlmDropdownMenuTrigger]="accountMenu">
+        Opções da Conta
+        <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      <ng-template #accountMenu>
+        <hlm-dropdown-menu>
+          <hlm-dropdown-menu-label>Minha Conta</hlm-dropdown-menu-label>
+          <button hlmDropdownMenuItem>Perfil <hlm-dropdown-menu-shortcut>⇧⌘P</hlm-dropdown-menu-shortcut></button>
+          <button hlmDropdownMenuItem>Cobrança <hlm-dropdown-menu-shortcut>⌘B</hlm-dropdown-menu-shortcut></button>
+          <button hlmDropdownMenuItem>Configurações <hlm-dropdown-menu-shortcut>⌘S</hlm-dropdown-menu-shortcut></button>
+          <hlm-dropdown-menu-separator />
+          <button hlmDropdownMenuItem>Equipe</button>
+          <button hlmDropdownMenuItem>Convidar usuários</button>
+          <hlm-dropdown-menu-separator />
+          <button hlmDropdownMenuItem variant="destructive">Sair da conta <hlm-dropdown-menu-shortcut>⇧⌘Q</hlm-dropdown-menu-shortcut></button>
+        </hlm-dropdown-menu>
+      </ng-template>
+    </div>
+  </div>
+</div>
+`,
+        css: `:host {
+  display: block;
+  min-height: 100vh;
+  background-color: var(--background);
+  color: var(--foreground);
+}
+`
+    };
+}

package/dist/templates/ui/readme.template.d.ts

@@ -0,0 +1 @@
+export declare function devkitLocalReadmeTemplate(): string;

package/dist/templates/ui/readme.template.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devkitLocalReadmeTemplate = devkitLocalReadmeTemplate;
+function devkitLocalReadmeTemplate() {
+    return `# Design System local do app
+
+Este diretorio e gerado pelo DT-DevKit, mas pertence a este app.
+
+A regra principal e: o DevKit entrega um ponto de partida editavel. Os componentes \`devkit-*\` sao wrappers locais usados pelo CRUD, layouts e telas geradas. A implementacao visual usa primitives reais do Spartan Helm gerados em \`libs/ui\`.
+
+## Como customizar
+
+- Ajustes especificos deste app: edite os componentes neste diretorio.
+- Paleta, dark/light e tokens runtime: ajuste \`devkit.css\` ou a configuracao de tema do app.
+- Style oficial do Spartan: rode \`devstroupe ui:set-style <style>\` usando \`nova\`, \`vega\`, \`lyra\`, \`maia\`, \`mira\` ou \`luma\`.
+- Customizacao padrao para apps futuros: altere os templates do DT-DevKit e gere novos projetos.
+
+## Limite importante
+
+Mudar o DT-DevKit no monorepo nao altera automaticamente apps ja gerados. Cada app tem sua propria copia local dos wrappers e sua propria \`libs/ui\`. Para aplicar uma evolucao do DevKit em um app existente, rode a CLI conscientemente ou migre os arquivos desejados.
+`;
+}
+// 2. Template do devkit-button

package/dist/templates/ui/shared/colors.d.ts

@@ -0,0 +1 @@
+export declare function hexToHsl(hex: string): string;

package/dist/templates/ui/shared/colors.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hexToHsl = hexToHsl;
+function hexToHsl(hex) {
+    hex = hex.replace(/^#/, '');
+    if (hex.length === 3) {
+        hex = hex.split('').map(char => char + char).join('');
+    }
+    let r = parseInt(hex.substring(0, 2), 16) / 255;
+    let g = parseInt(hex.substring(2, 4), 16) / 255;
+    let b = parseInt(hex.substring(4, 6), 16) / 255;
+    let max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0, l = (max + min) / 2;
+    if (max !== min) {
+        let d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}

package/dist/templates/ui/shared/profile-component.template.d.ts

@@ -0,0 +1,5 @@
+export declare function devkitProfileComponentTemplate(): {
+    ts: string;
+    html: string;
+    css: string;
+};