@polymorphism-tech/morph-spec 4.7.0 → 4.7.2

package/.morph/framework/templates/docs/ui-flows.md

@@ -0,0 +1,167 @@
+# UI Flows: {{titleCase FEATURE_NAME}}
+
+| Field | Value |
+|-------|-------|
+| **Feature** | {{FEATURE_NAME}} |
+| **Created** | {{DATE}} |
+
+---
+
+## User Stories
+
+### US001: {Primary User Story}
+
+**As** a {user type}
+**I want** to {capability}
+**So that** {benefit}
+
+**Acceptance Criteria:**
+1. {Criterion 1}
+2. {Criterion 2}
+
+---
+
+## Flow Inventory
+
+| Flow ID | Name | Priority |
+|---------|------|----------|
+| **F001** | Create New Item | High |
+| **F002** | Edit Existing Item | High |
+| **F003** | Delete Item | Medium |
+
+---
+
+## F001: Create New Item
+
+### Happy Path
+
+```
+START
+  ↓
+[User clicks "Add New"]
+  ↓
+[Modal opens with form]
+  ↓
+[User fills required fields]
+  ↓
+[User clicks "Submit"]
+  ↓
+[Validation passes] ✓
+  ↓
+[API call: POST /api/items]
+  ↓
+[Success response]
+  ↓
+[Modal closes]
+  ↓
+[Success toast: "Item created"]
+  ↓
+[Table refreshes]
+  ↓
+END
+```
+
+**Duration:** 15-30 seconds
+**Success Rate Target:** 95%
+
+---
+
+### Alternative Path: Validation Error
+
+```
+[User clicks "Submit"]
+  ↓
+[Validation fails] ✕
+  ↓
+[Error messages shown inline]
+  ↓
+[User corrects errors]
+  ↓
+[Real-time validation clears errors]
+  ↓
+→ Returns to Happy Path
+```
+
+---
+
+### Edge Cases
+
+| Scenario | Behavior |
+|----------|----------|
+| **Duplicate Name** | Show warning, allow submit |
+| **Network Error** | Show error toast, preserve data |
+| **Session Expired** | Redirect to login |
+
+---
+
+## F002: Edit Existing Item
+
+```
+[User clicks "Edit"]
+  ↓
+[Modal opens with pre-filled form]
+  ↓
+[User modifies fields]
+  ↓
+[User clicks "Save"]
+  ↓
+[API call: PUT /api/items/{id}]
+  ↓
+[Success toast]
+  ↓
+[Table refreshes]
+END
+```
+
+---
+
+## F003: Delete Item
+
+```
+[User clicks "Delete"]
+  ↓
+[Confirmation dialog: "Delete item?"]
+  ↓
+[User confirms]
+  ↓
+[API call: DELETE /api/items/{id}]
+  ↓
+[Success toast]
+  ↓
+[Table refreshes]
+END
+```
+
+---
+
+## Toast Notifications
+
+| Event | Type | Message | Duration |
+|-------|------|---------|----------|
+| **Item Created** | Success | "Item created successfully" | 3s |
+| **Item Updated** | Success | "Item updated successfully" | 3s |
+| **Item Deleted** | Success | "Item deleted successfully" | 3s |
+| **Error** | Error | "Something went wrong" | 5s |
+
+---
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| **Ctrl+N** | New Item |
+| **Escape** | Close modal |
+| **Enter** | Submit form |
+
+---
+
+## Performance Targets
+
+| Flow | Target |
+|------|--------|
+| **Create Item** | < 2s (API response) |
+| **Search** | < 500ms |
+
+---
+
+*Generated with MORPH Framework*

package/.morph/framework/templates/docs/ui-mockups.md

@@ -0,0 +1,98 @@
+# UI Mockups & Wireframes: {{titleCase FEATURE_NAME}}
+
+| Field | Value |
+|-------|-------|
+| **Feature** | {{FEATURE_NAME}} |
+| **Created** | {{DATE}} |
+
+---
+
+## Screen Inventory
+
+| Screen ID | Name | Route | Priority |
+|-----------|------|-------|----------|
+| **S001** | {Screen Name} | /path | High |
+| **S002** | {Screen Name} | /path | Medium |
+
+---
+
+## S001: {Primary Screen}
+
+### Desktop Layout
+
+```
+┌─────────────────────────────────────┐
+│  Header                    [User ▼] │
+├─────────────────────────────────────┤
+│                                     │
+│  [Title]                            │
+│                                     │
+│  ┌──────────────────────────────┐  │
+│  │ Main Content Area            │  │
+│  │                              │  │
+│  │  [Card 1]    [Card 2]        │  │
+│  │                              │  │
+│  │  ┌────────────────────────┐  │  │
+│  │  │ Data Table             │  │  │
+│  │  │ ...                    │  │  │
+│  │  └────────────────────────┘  │  │
+│  └──────────────────────────────┘  │
+│                                     │
+└─────────────────────────────────────┘
+```
+
+### Mobile Layout
+
+```
+┌──────────────────────┐
+│ ☰  Title    [User ▼]│
+├──────────────────────┤
+│                      │
+│ [Card 1]             │
+│                      │
+│ [Card 2]             │
+│                      │
+│ [View All Items]     │
+│                      │
+└──────────────────────┘
+```
+
+---
+
+## States
+
+### Loading
+- Show skeleton placeholders
+- Spinner for primary content
+
+### Empty
+- Icon + message
+- Clear call-to-action button
+
+### Error
+- Warning icon
+- User-friendly message
+- Retry button
+
+### Success (After Action)
+- Toast notification
+- Auto-dismiss after 3s
+
+---
+
+## Interactions
+
+- **Hover**: Subtle elevation increase
+- **Click**: Scale down (0.98)
+- **Transitions**: Fade-in 200ms
+
+---
+
+## Accessibility
+- [ ] 44x44px minimum touch targets
+- [ ] Focus indicators visible
+- [ ] Proper heading hierarchy (H1 → H2 → H3)
+
+---
+
+*Generated with MORPH Framework*

package/.morph/framework/templates/docs/user-stories.md

@@ -0,0 +1,34 @@
+# User Stories: {{featureName}}
+
+> Generated: {{date}} | Feature: {{featureName}} | Status: Draft
+
+---
+
+## Story 1: [Actor] [Action]
+
+**Feature:** {{featureName}}
+**Priority:** High / Medium / Low
+
+### Optimal Path
+1. [Step 1]
+2. [Step 2]
+3. [Step 3 — success state]
+
+### Edge Cases
+- [Edge case] → [Expected behavior]
+- [Error condition] → [Expected error handling]
+
+### Acceptance Criteria
+- [ ] [Measurable criterion 1]
+- [ ] [Measurable criterion 2]
+- [ ] Edge: [edge case criterion]
+
+---
+
+## Story 2: [Actor] [Action]
+
+[Repeat structure above]
+
+---
+
+*Generated by MORPH-SPEC — complete before implementation begins*

package/.morph/framework/templates/examples/design-system-examples.md

@@ -0,0 +1,357 @@
+# Design System CSS Index Template
+
+> Template de indice estruturado para arquivos CSS grandes.
+> Copie este header para o inicio do seu `design-system.css`.
+
+## Indice Padrao
+
+```css
+/* ===========================================================================
+   {PROJECT_NAME} Design System
+   ===========================================================================
+
+   Indice de Secoes
+   ================
+
+   1-99:     Tokens e Variaveis CSS
+   100-199:  Reset e Base Styles
+   200-299:  Tipografia
+   300-399:  Layout e Containers
+   400-499:  Componentes Base (buttons, inputs, cards)
+   500-599:  Componentes Compostos (forms, tables, lists)
+   600-699:  Navegacao (header, sidebar, footer, menus)
+   700-799:  Paginas Especificas
+   800-849:  Modais e Overlays
+   850-899:  Animacoes e Keyframes
+   900-949:  Responsivo e Media Queries
+   950-979:  Utilities e Helpers
+   980-989:  Overrides de Fluent UI / MudBlazor
+   990-999:  Hotfixes e Temporarios
+
+   Convencoes de Nomenclatura
+   ==========================
+
+   Prefixo por Pagina:
+   - .home-*      : Pagina inicial
+   - .checkout-*  : Pagina de checkout
+   - .dashboard-* : Pagina de dashboard
+   - .auth-*      : Paginas de autenticacao
+
+   Prefixo por Componente:
+   - .btn-*       : Botoes
+   - .card-*      : Cards
+   - .modal-*     : Modais
+   - .form-*      : Formularios
+   - .nav-*       : Navegacao
+
+   Sufixos de Estado:
+   - *--active    : Estado ativo
+   - *--disabled  : Estado desabilitado
+   - *--loading   : Estado de loading
+   - *--error     : Estado de erro
+
+   Validacao:
+   morph-spec validate-css src/MyApp.Web
+
+   =========================================================================== */
+
+
+/* ===========================================================================
+   SECAO 1-99: TOKENS E VARIAVEIS CSS
+   =========================================================================== */
+
+:root {
+  /* Cores Primarias */
+  --primary: #3b82f6;
+  --primary-hover: #2563eb;
+  --primary-active: #1d4ed8;
+
+  /* Cores Secundarias */
+  --secondary: #6b7280;
+  --secondary-hover: #4b5563;
+
+  /* Cores Semanticas */
+  --success: #10b981;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --info: #06b6d4;
+
+  /* Neutros */
+  --neutral-50: #f9fafb;
+  --neutral-100: #f3f4f6;
+  --neutral-200: #e5e7eb;
+  --neutral-300: #d1d5db;
+  --neutral-400: #9ca3af;
+  --neutral-500: #6b7280;
+  --neutral-600: #4b5563;
+  --neutral-700: #374151;
+  --neutral-800: #1f2937;
+  --neutral-900: #111827;
+
+  /* Tipografia */
+  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-family-mono: 'JetBrains Mono', monospace;
+
+  --font-size-xs: 0.75rem;   /* 12px */
+  --font-size-sm: 0.875rem;  /* 14px */
+  --font-size-base: 1rem;    /* 16px */
+  --font-size-lg: 1.125rem;  /* 18px */
+  --font-size-xl: 1.25rem;   /* 20px */
+  --font-size-2xl: 1.5rem;   /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem;  /* 36px */
+
+  /* Espacamento (base 4px) */
+  --space-1: 0.25rem;  /* 4px */
+  --space-2: 0.5rem;   /* 8px */
+  --space-3: 0.75rem;  /* 12px */
+  --space-4: 1rem;     /* 16px */
+  --space-5: 1.25rem;  /* 20px */
+  --space-6: 1.5rem;   /* 24px */
+  --space-8: 2rem;     /* 32px */
+  --space-10: 2.5rem;  /* 40px */
+  --space-12: 3rem;    /* 48px */
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;  /* 4px */
+  --radius-md: 0.5rem;   /* 8px */
+  --radius-lg: 0.75rem;  /* 12px */
+  --radius-xl: 1rem;     /* 16px */
+  --radius-full: 9999px;
+
+  /* Sombras */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Transicoes */
+  --transition-fast: 150ms ease;
+  --transition-normal: 300ms ease;
+  --transition-slow: 500ms ease;
+
+  /* Z-Index */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+
+
+/* ===========================================================================
+   SECAO 100-199: RESET E BASE STYLES
+   =========================================================================== */
+
+/* ... */
+
+
+/* ===========================================================================
+   SECAO 200-299: TIPOGRAFIA
+   =========================================================================== */
+
+/* ... */
+
+
+/* ===========================================================================
+   SECAO 300-399: LAYOUT E CONTAINERS
+   =========================================================================== */
+
+.page-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-content {
+  flex: 1;
+  padding: var(--space-6);
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 var(--space-4);
+}
+
+
+/* ===========================================================================
+   SECAO 400-499: COMPONENTES BASE
+   =========================================================================== */
+
+/* Botoes */
+.btn-primary { /* ... */ }
+.btn-secondary { /* ... */ }
+
+/* Cards */
+.card { /* ... */ }
+.card-premium { /* ... */ }
+
+/* Inputs */
+.input { /* ... */ }
+
+
+/* ===========================================================================
+   SECAO 500-599: COMPONENTES COMPOSTOS
+   =========================================================================== */
+
+/* Forms */
+.form-group { /* ... */ }
+.form-label { /* ... */ }
+
+/* Tables */
+.data-table { /* ... */ }
+
+
+/* ===========================================================================
+   SECAO 600-699: NAVEGACAO
+   =========================================================================== */
+
+.page-header-nav { /* ... */ }
+.page-footer { /* ... */ }
+.sidebar { /* ... */ }
+
+
+/* ===========================================================================
+   SECAO 700-799: PAGINAS ESPECIFICAS
+   =========================================================================== */
+
+/* Home */
+.home-hero { /* ... */ }
+.home-features { /* ... */ }
+
+/* Checkout */
+.checkout-form { /* ... */ }
+.checkout-summary { /* ... */ }
+
+
+/* ===========================================================================
+   SECAO 800-849: MODAIS E OVERLAYS
+   =========================================================================== */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: var(--z-modal-backdrop);
+}
+
+.modal-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--z-modal);
+}
+
+
+/* ===========================================================================
+   SECAO 850-899: ANIMACOES E KEYFRAMES
+   =========================================================================== */
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-slideInUp {
+  animation: slideInUp var(--transition-normal) forwards;
+}
+
+.animate-scaleIn {
+  animation: scaleIn var(--transition-fast) forwards;
+}
+
+/* Stagger delays para animacoes em sequencia */
+.stagger-1 { animation-delay: 0.1s; }
+.stagger-2 { animation-delay: 0.2s; }
+.stagger-3 { animation-delay: 0.3s; }
+.stagger-4 { animation-delay: 0.4s; }
+.stagger-5 { animation-delay: 0.5s; }
+
+
+/* ===========================================================================
+   SECAO 900-949: RESPONSIVO E MEDIA QUERIES
+   =========================================================================== */
+
+@media (max-width: 768px) {
+  /* Tablet e Mobile */
+}
+
+@media (max-width: 480px) {
+  /* Mobile */
+}
+
+
+/* ===========================================================================
+   SECAO 950-979: UTILITIES E HELPERS
+   =========================================================================== */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+
+/* ===========================================================================
+   SECAO 980-989: OVERRIDES DE FLUENT UI / MUDBLAZOR
+   =========================================================================== */
+
+/* Fluent UI overrides */
+.fluent-card {
+  /* Customizacoes */
+}
+
+
+/* ===========================================================================
+   SECAO 990-999: HOTFIXES E TEMPORARIOS
+   =========================================================================== */
+
+/* TODO: Remover apos fix no componente X */
+```
+
+## Uso
+
+1. Copie o header para o inicio do seu `design-system.css`
+2. Substitua `{PROJECT_NAME}` pelo nome do seu projeto
+3. Adicione suas classes CSS nas secoes apropriadas
+4. Mantenha o indice atualizado conforme adiciona novas secoes
+
+## Beneficios
+
+- **Navegacao rapida:** Use Ctrl+G (go to line) para pular para secoes
+- **Organizacao clara:** Cada tipo de componente em sua secao
+- **Facil manutencao:** Encontre onde adicionar novos estilos
+- **Evita conflitos:** Prefixos por pagina previnem colisoes
+
+---
+
+*Template MORPH-SPEC v2.2.0 by Polymorphism Tech*