@polymorphism-tech/morph-spec 3.2.0 → 4.2.0

package/stacks/blazor-azure/.morph/templates/ui-design-system.md

@@ -1,286 +0,0 @@
-# UI Design System - {Project Name}
-
-> Design system do projeto: cores, tipografia, espaçamento e padrões visuais.
-> Este arquivo é a fonte da verdade para todos os aspectos visuais do projeto.
-
----
-
-## 🎨 Paleta de Cores
-
-### Cores Principais
-
-| Uso | Cor | Hex | RGB | Preview |
-|-----|-----|-----|-----|---------|
-| **Primária** | {Nome da cor} | `#{hex}` | `rgb({r}, {g}, {b})` | ███ |
-| **Secundária** | {Nome da cor} | `#{hex}` | `rgb({r}, {g}, {b})` | ███ |
-
-**Exemplo:**
-| Uso | Cor | Hex | RGB | Preview |
-|-----|-----|-----|-----|---------|
-| **Primária** | Blue | `#3b82f6` | `rgb(59, 130, 246)` | 🔵 |
-| **Secundária** | Gray | `#6b7280` | `rgb(107, 114, 128)` | ⚫ |
-
-### Cores de Estado
-
-| Estado | Cor | Hex | RGB | Uso |
-|--------|-----|-----|-----|-----|
-| **Sucesso** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Confirmações, operações bem-sucedidas |
-| **Erro** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Erros, validações falhas |
-| **Warning** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Avisos, atenção necessária |
-| **Info** | {Cor} | `#{hex}` | `rgb({r}, {g}, {b})` | Informações, dicas |
-
-**Exemplo (Tailwind):**
-| Estado | Cor | Hex | RGB | Uso |
-|--------|-----|-----|-----|-----|
-| **Sucesso** | Green | `#10b981` | `rgb(16, 185, 129)` | Confirmações |
-| **Erro** | Red | `#ef4444` | `rgb(239, 68, 68)` | Erros |
-| **Warning** | Amber | `#f59e0b` | `rgb(245, 158, 11)` | Avisos |
-| **Info** | Cyan | `#06b6d4` | `rgb(6, 182, 212)` | Informações |
-
-### Escala de Neutros (Cinzas)
-
-| Shade | Hex | RGB | Uso |
-|-------|-----|-----|-----|
-| **50** | `#{hex}` | `rgb({r}, {g}, {b})` | Fundos muito claros |
-| **100** | `#{hex}` | `rgb({r}, {g}, {b})` | Fundos claros |
-| **200** | `#{hex}` | `rgb({r}, {g}, {b})` | Bordas suaves |
-| **300** | `#{hex}` | `rgb({r}, {g}, {b})` | Bordas padrão |
-| **400** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto desabilitado |
-| **500** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto secundário |
-| **600** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto placeholder |
-| **700** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto principal |
-| **800** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto ênfase |
-| **900** | `#{hex}` | `rgb({r}, {g}, {b})` | Texto super ênfase |
-
-**Exemplo (Tailwind Gray):**
-| Shade | Hex | RGB |
-|-------|-----|-----|
-| **50** | `#f9fafb` | `rgb(249, 250, 251)` |
-| **100** | `#f3f4f6` | `rgb(243, 244, 246)` |
-| **500** | `#6b7280` | `rgb(107, 114, 128)` |
-| **900** | `#111827` | `rgb(17, 24, 39)` |
-
----
-
-## 🔤 Tipografia
-
-### Fontes
-
-| Tipo | Font Family | Stack Completo | Uso |
-|------|-------------|----------------|-----|
-| **Sans-serif** | {Font} | `'{Font}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` | Texto principal, UI |
-| **Serif** | {Font} | `'{Font}', Georgia, serif` | Títulos, ênfase (opcional) |
-| **Monospace** | {Font} | `'{Font}', 'Courier New', monospace` | Código, dados técnicos |
-
-**Exemplo:**
-| Tipo | Font Family | Stack | Uso |
-|------|-------------|-------|-----|
-| **Sans-serif** | Inter | `'Inter', -apple-system, sans-serif` | Texto principal |
-| **Monospace** | Fira Code | `'Fira Code', 'Courier New', monospace` | Código |
-
-### Escala de Tamanhos
-
-| Size | Valor | Line Height | Uso |
-|------|-------|-------------|-----|
-| **xs** | `{size}` | `{height}` | Texto muito pequeno, labels |
-| **sm** | `{size}` | `{height}` | Texto pequeno, captions |
-| **base** | `{size}` | `{height}` | Texto padrão, body |
-| **lg** | `{size}` | `{height}` | Texto grande, leads |
-| **xl** | `{size}` | `{height}` | Títulos H4 |
-| **2xl** | `{size}` | `{height}` | Títulos H3 |
-| **3xl** | `{size}` | `{height}` | Títulos H2 |
-| **4xl** | `{size}` | `{height}` | Títulos H1 |
-| **5xl** | `{size}` | `{height}` | Display text |
-
-**Exemplo (Tailwind):**
-| Size | Valor | Line Height |
-|------|-------|-------------|
-| **xs** | `0.75rem` (12px) | `1rem` (16px) |
-| **sm** | `0.875rem` (14px) | `1.25rem` (20px) |
-| **base** | `1rem` (16px) | `1.5rem` (24px) |
-| **lg** | `1.125rem` (18px) | `1.75rem` (28px) |
-| **xl** | `1.25rem` (20px) | `1.75rem` (28px) |
-| **4xl** | `2.25rem` (36px) | `2.5rem` (40px) |
-
-### Pesos (Font Weight)
-
-| Weight | Valor | Uso |
-|--------|-------|-----|
-| **Light** | `300` | Texto decorativo, opcional |
-| **Regular** | `400` | Texto padrão |
-| **Medium** | `500` | Texto com ênfase leve |
-| **Semibold** | `600` | Botões, labels importantes |
-| **Bold** | `700` | Títulos, ênfase forte |
-
----
-
-## 📏 Espaçamento
-
-### Sistema Base
-
-**Unidade base:** `{value}` (ex: 4px, 8px)
-**Escala:** Múltiplos da unidade base
-
-| Token | Valor | Pixels | Uso |
-|-------|-------|--------|-----|
-| **0** | `0` | 0px | Sem espaçamento |
-| **1** | `{base * 1}` | {px} | Espaço mínimo |
-| **2** | `{base * 2}` | {px} | Espaço pequeno |
-| **3** | `{base * 3}` | {px} | Espaço médio-pequeno |
-| **4** | `{base * 4}` | {px} | Espaço médio |
-| **5** | `{base * 5}` | {px} | Espaço médio-grande |
-| **6** | `{base * 6}` | {px} | Espaço grande |
-| **8** | `{base * 8}` | {px} | Espaço muito grande |
-| **10** | `{base * 10}` | {px} | Espaço extra grande |
-| **12** | `{base * 12}` | {px} | Espaço gigante |
-
-**Exemplo (base 4px = 0.25rem):**
-| Token | Valor | Pixels | Uso |
-|-------|-------|--------|-----|
-| **1** | `0.25rem` | 4px | Gap mínimo entre ícones |
-| **2** | `0.5rem` | 8px | Padding interno de botões |
-| **4** | `1rem` | 16px | Padding padrão de cards |
-| **6** | `1.5rem` | 24px | Margin entre seções |
-| **8** | `2rem` | 32px | Margin grande entre blocos |
-
----
-
-## 🔲 Border Radius
-
-| Size | Valor | Uso |
-|------|-------|-----|
-| **none** | `0` | Sem arredondamento |
-| **sm** | `{value}` | Arredondamento sutil |
-| **md** | `{value}` | Arredondamento padrão |
-| **lg** | `{value}` | Arredondamento pronunciado |
-| **xl** | `{value}` | Muito arredondado |
-| **full** | `9999px` | Circular (botões redondos, avatares) |
-
-**Exemplo:**
-| Size | Valor | Uso |
-|------|-------|-----|
-| **sm** | `0.125rem` (2px) | Inputs, tabelas |
-| **md** | `0.375rem` (6px) | Botões, cards |
-| **lg** | `0.5rem` (8px) | Modais, containers |
-| **full** | `9999px` | Avatares, badges circulares |
-
----
-
-## 🌑 Sombras (Shadows)
-
-| Size | Valor | Uso |
-|------|-------|-----|
-| **sm** | `{shadow}` | Sombra sutil (hover) |
-| **md** | `{shadow}` | Sombra padrão (cards) |
-| **lg** | `{shadow}` | Sombra pronunciada (modals) |
-| **xl** | `{shadow}` | Sombra forte (dropdowns) |
-
-**Exemplo (Tailwind):**
-| Size | Valor |
-|------|-------|
-| **sm** | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` |
-| **md** | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)` |
-| **lg** | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)` |
-
----
-
-## 📱 Breakpoints (Responsive)
-
-| Breakpoint | Min Width | Dispositivos |
-|------------|-----------|--------------|
-| **xs** | `0px` | Mobile portrait (padrão) |
-| **sm** | `{value}` | Mobile landscape / Tablet pequeno |
-| **md** | `{value}` | Tablet |
-| **lg** | `{value}` | Desktop pequeno |
-| **xl** | `{value}` | Desktop grande |
-| **2xl** | `{value}` | Desktop muito grande |
-
-**Exemplo (Tailwind):**
-| Breakpoint | Min Width |
-|------------|-----------|
-| **sm** | `640px` |
-| **md** | `768px` |
-| **lg** | `1024px` |
-| **xl** | `1280px` |
-| **2xl** | `1536px` |
-
----
-
-## 🎯 Aplicação no Código
-
-### CSS Variables (Recomendado)
-
-Ver template: `design-system.css`
-
-```css
-:root {
-  /* Cores */
-  --color-primary: #{hex};
-  --color-secondary: #{hex};
-
-  /* Tipografia */
-  --font-sans: '{Font}', sans-serif;
-  --text-base: 1rem;
-
-  /* Espaçamento */
-  --space-4: 1rem;
-}
-```
-
-### Fluent UI Theme (se Fluent UI)
-
-Ver template: `FluentDesignTheme.cs`
-
-```csharp
-public static class FluentDesignTheme
-{
-    public static DesignThemePalette GetPalette() => new()
-    {
-        Primary = "#{cor primária}",
-        // ...
-    };
-}
-```
-
-### MudBlazor Theme (se MudBlazor)
-
-Ver template: `MudTheme.cs`
-
-```csharp
-public static MudTheme Theme => new()
-{
-    Palette = new PaletteLight
-    {
-        Primary = "#{cor primária}",
-        // ...
-    }
-};
-```
-
----
-
-## 📋 Checklist de Consistência
-
-- [ ] Todas as cores têm hex + rgb documentados
-- [ ] Escala de neutros completa (50-900)
-- [ ] Fontes têm fallback stacks completos
-- [ ] Escala de tamanhos cobre todos os casos (xs até 5xl)
-- [ ] Espaçamento usa múltiplos da unidade base
-- [ ] Border radius tem tamanhos sm, md, lg, full
-- [ ] Sombras têm variações de intensidade
-- [ ] Breakpoints cobrem mobile até desktop grande
-- [ ] Design system será implementado na FASE 5 (arquivos CSS/C#)
-
----
-
-## 🔗 Referências
-
-- [Fluent Design System](https://fluent2.microsoft.design/)
-- [Material Design](https://m3.material.io/)
-- [Tailwind CSS Palette](https://tailwindcss.com/docs/customizing-colors)
-- [Type Scale](https://type-scale.com/)
-- [Modular Scale](https://www.modularscale.com/)
-
----
-
-*Template MORPH-SPEC v2.1.1 by Polymorphism Tech*

package/stacks/blazor-azure/.morph/templates/ui-flows.md

@@ -1,336 +0,0 @@
-# UI Flows - {{FEATURE_NAME_TITLE}}
-
-> Fluxos de usuário completos mostrando navegação, decisões e edge cases.
-> Documenta COMO o usuário se move pela feature do início ao fim.
-
----
-
-## Fluxo 1: {Nome do Fluxo Principal}
-
-### Contexto
-
-**Trigger (Gatilho):**
-{O que inicia este fluxo? Ex: "Usuário clica em [+ Novo Pedido]"}
-
-**Pré-condições:**
-- {Condição 1 que deve ser verdadeira para iniciar o fluxo}
-- {Condição 2}
-
-**Objetivo:**
-{O que o usuário quer alcançar ao final deste fluxo?}
-
----
-
-### Happy Path (Caminho Ideal)
-
-#### Passos
-
-**1. {Tela/Componente Inicial}**: {Ação do usuário}
-   - Sistema: {Resposta do sistema}
-   - UI: {Mudança visual}
-   - Navegação: {Para onde vai}
-
-**2. {Próxima Tela/Componente}**: {Próxima ação}
-   - Sistema: {Processamento backend}
-   - UI: {Feedback visual}
-   - Validação: {Regras aplicadas}
-
-**3. {Tela/Componente Final}**: {Ação de conclusão}
-   - Sistema: {Persistência/salvamento}
-   - UI: {Mensagem de sucesso}
-   - Navegação: {Retorna para onde}
-
-**Tempo estimado:** {X segundos/minutos para usuário completar}
-
----
-
-### Diagrama de Fluxo (Happy Path)
-
-```
-┌─────────────────┐
-│  Tela Inicial   │
-│  [Dashboard]    │
-└────────┬────────┘
-         │
-         │ Clica [+ Novo Pedido]
-         ▼
-┌─────────────────┐
-│   Modal/Wizard  │
-│   Aberto        │
-└────────┬────────┘
-         │
-         │ ⟨Step 1⟩ Seleciona Cliente
-         ▼
-┌─────────────────┐
-│  Cliente        │
-│  Selecionado    │
-└────────┬────────┘
-         │
-         │ Clica [Próximo]
-         ▼
-┌─────────────────┐
-│  ⟨Step 2⟩       │
-│  Produtos       │
-└────────┬────────┘
-         │
-         │ Adiciona Produtos
-         │ Total Calculado
-         ▼
-┌─────────────────┐
-│  Lista de       │
-│  Produtos OK    │
-└────────┬────────┘
-         │
-         │ Clica [Próximo]
-         ▼
-┌─────────────────┐
-│  ⟨Step 3⟩       │
-│  Revisão        │
-└────────┬────────┘
-         │
-         │ Clica [Confirmar]
-         ▼
-┌─────────────────┐
-│  ✅ Pedido      │
-│  Criado!        │
-└────────┬────────┘
-         │
-         │ Toast "Sucesso!"
-         │ Navega para Detalhes
-         ▼
-┌─────────────────┐
-│  Tela Detalhes  │
-│  Pedido #12345  │
-└─────────────────┘
-```
-
----
-
-### Edge Cases (Casos de Exceção)
-
-#### 1. {Nome do Edge Case}
-
-**Cenário:**
-{Descrição da situação excepcional}
-
-**Como o sistema lida:**
-```
-┌─────────────────┐
-│  Passo Normal   │
-└────────┬────────┘
-         │
-         │ ❌ {Erro/Condição}
-         ▼
-┌─────────────────┐
-│  Mensagem Erro  │
-│  FluentDialog   │
-└────────┬────────┘
-         │
-    ┌────┴────┐
-    │         │
-    ▼         ▼
-[Tentar]  [Cancelar]
-Novamente
-    │         │
-    │         └──▶ [Volta Dashboard]
-    │
-    └──▶ [Repete Passo]
-```
-
-**UI:**
-- Componente: {FluentDialog, FluentMessageBar, etc}
-- Mensagem: "{Texto exato da mensagem}"
-- Ações disponíveis: {Botões/links}
-
-**Exemplo de código:**
-```razor
-@if (!string.IsNullOrEmpty(_error))
-{
-    <FluentMessageBar Intent="MessageIntent.Error">
-        @_error
-        <FluentButton OnClick="@Retry">Tentar Novamente</FluentButton>
-    </FluentMessageBar>
-}
-```
-
----
-
-#### 2. {Outro Edge Case}
-
-{Repita a estrutura acima}
-
----
-
-### Fluxos Alternativos
-
-#### Alt 1: {Nome do Fluxo Alternativo}
-
-**Diverge em:** {Em qual passo do happy path este fluxo se ramifica}
-
-**Condição:** {O que causa a divergência}
-
-**Passos:**
-1. {Passo alternativo 1}
-2. {Passo alternativo 2}
-3. {Convergência de volta ao happy path OU conclusão diferente}
-
-**Diagrama:**
-```
-[Happy Path]
-     │
-     ├─{Condição}──▶ [Fluxo Alt]
-     │                    │
-     │                    └──▶ [Converge]
-     ▼
-[Continua...]
-```
-
----
-
-## Fluxo 2: {Segundo Fluxo Importante}
-
-{Repita toda a estrutura acima para cada fluxo principal}
-
----
-
-## Interações Comuns (Micro-Fluxos)
-
-### {Ação Rápida - Ex: "Buscar Item"}
-
-**Trigger:** {Usuário digita na search bar}
-
-**Fluxo:**
-```
-[Input vazio] ──▶ [Usuário digita] ──▶ [Debounce 300ms] ──▶ [API Call]
-                                                                  │
-                                                                  ▼
-                                                            [Resultados]
-                                                                  │
-                                                    ┌─────────────┴──────────┐
-                                                    ▼                        ▼
-                                             [Tem Resultados]         [Vazio]
-                                                    │                        │
-                                                    ▼                        ▼
-                                             [Mostra Lista]    [Mostra "Não encontrado"]
-```
-
-**Componente:** `FluentAutocomplete`
-
-**Código:**
-```razor
-<FluentAutocomplete TItem="Item"
-                   SearchAsync="@SearchItemsAsync"
-                   Placeholder="Buscar item..."
-                   MinLength="2"
-                   Debounce="300">
-    <ItemTemplate Context="item">
-        @item.Name
-    </ItemTemplate>
-</FluentAutocomplete>
-```
-
----
-
-## Mapa de Navegação Completo
-
-Visão geral de TODAS as telas e como se conectam:
-
-```
-                    ┌──────────────┐
-                    │  Dashboard   │
-                    └──────┬───────┘
-                           │
-         ┌─────────────────┼─────────────────┐
-         │                 │                 │
-         ▼                 ▼                 ▼
-   ┌─────────┐      ┌──────────┐      ┌─────────┐
-   │ Pedidos │      │ Clientes │      │Produtos │
-   └────┬────┘      └────┬─────┘      └────┬────┘
-        │                │                   │
-        ▼                ▼                   ▼
-   [+ Novo]         [+ Novo]           [+ Novo]
-        │                │                   │
-        └────────────────┴──────────────────┬┘
-                                            │
-                                            ▼
-                                    ┌───────────────┐
-                                    │ Modal Wizard  │
-                                    │ (3 steps)     │
-                                    └───────┬───────┘
-                                            │
-                                            ▼
-                                      [Confirmar]
-                                            │
-                                            ▼
-                                    ┌───────────────┐
-                                    │ Tela Detalhes │
-                                    └───────┬───────┘
-                                            │
-                                    ┌───────┴───────┐
-                                    │               │
-                                    ▼               ▼
-                              [Editar]        [Voltar]
-                                    │               │
-                                    └───────┬───────┘
-                                            │
-                                            ▼
-                                    [Dashboard]
-```
-
----
-
-## Estados de Loading
-
-### {Onde há loading na feature}
-
-**1. Carregamento Inicial:**
-- **Onde:** {Primeira tela ao abrir}
-- **Componente:** `FluentSkeleton` ou `FluentProgress`
-- **Duração esperada:** {X ms}
-
-**2. Carregamento de Ação:**
-- **Onde:** {Ao submeter form, por exemplo}
-- **Componente:** `FluentButton` com `Loading="true"`
-- **Duração esperada:** {X ms}
-
-**3. Carregamento Incremental:**
-- **Onde:** {Infinite scroll, paginação}
-- **Componente:** `FluentProgress` no rodapé
-- **Duração esperada:** {X ms}
-
----
-
-## Validações e Feedback
-
-### Validações Client-Side
-
-| Campo | Validação | Mensagem de Erro | Componente |
-|-------|-----------|------------------|------------|
-| {Nome} | Required | "Campo obrigatório" | FluentTextField |
-| {Email} | Email format | "Email inválido" | FluentTextField |
-| {CPF} | CPF válido | "CPF inválido" | FluentTextField |
-
-### Validações Server-Side
-
-| Ação | Validação | Erro Possível | Como Mostra |
-|------|-----------|---------------|-------------|
-| Criar Pedido | Cliente ativo | "Cliente inativo" | FluentMessageBar |
-| Adicionar Produto | Estoque > 0 | "Sem estoque" | FluentDialog |
-
----
-
-## Checklist de Fluxos
-
-- [ ] Happy path documentado com todos os passos
-- [ ] Diagramas ASCII de cada fluxo
-- [ ] Edge cases identificados (erro, vazio, retry)
-- [ ] Fluxos alternativos mapeados
-- [ ] Loading states especificados
-- [ ] Validações client-side e server-side listadas
-- [ ] Mensagens de erro/sucesso definidas
-- [ ] Navegação entre telas clara
-- [ ] Tempo estimado de cada fluxo
-
----
-
-*Template MORPH-SPEC v2.1.0 by Polymorphism Tech*