@polymorphism-tech/morph-spec 4.5.0 → 4.7.0

package/.morph/framework/templates/docs/ui-design-system.md

@@ -1,76 +0,0 @@
-# UI Design System: {{titleCase FEATURE_NAME}}
-
-| Field | Value |
-|-------|-------|
-| **Feature** | {{FEATURE_NAME}} |
-| **Created** | {{DATE}} |
-| **Project** | {{PROJECT_NAME}} |
-
----
-
-## Color Palette
-
-### Primary Colors
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--color-primary` | #0078D4 | Primary actions, links |
-| `--color-primary-hover` | #106EBE | Hover states |
-
-### Semantic Colors
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--color-success` | #107C10 | Success states |
-| `--color-warning` | #F7630C | Warnings |
-| `--color-error` | #D13438 | Errors |
-
----
-
-## Typography
-
-| Token | Size | Weight | Usage |
-|-------|------|--------|-------|
-| `--text-h1` | 24px | 600 | Section headers |
-| `--text-body` | 14px | 400 | Body text |
-| `--text-caption` | 12px | 400 | Labels |
-
----
-
-## Spacing
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--space-sm` | 8px | Compact spacing |
-| `--space-md` | 16px | Standard spacing |
-| `--space-lg` | 24px | Wide spacing |
-
----
-
-## Components
-
-### Buttons
-- **Primary**: `--color-primary` background, white text
-- **Secondary**: Transparent, `--color-primary` border
-- **Sizes**: Small (24px), Medium (32px), Large (40px)
-
-### Forms
-- **Input height**: 32px
-- **Focus**: 2px solid `--color-primary`
-- **Error**: 1px solid `--color-error`
-
----
-
-## Accessibility
-- [ ] 4.5:1 contrast ratio (WCAG AA)
-- [ ] Touch targets minimum 44x44px
-- [ ] Keyboard navigation supported
-
----
-
-## Responsive Breakpoints
-- **Mobile**: < 768px
-- **Tablet**: 768px - 1199px
-- **Desktop**: ≥ 1200px
-
----
-
-*Generated with MORPH Framework*

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

@@ -1,167 +0,0 @@
-# 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

@@ -1,98 +0,0 @@
-# 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/examples/design-system-examples.md

@@ -1,357 +0,0 @@
-# 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*