sinapse-ai 9.3.0 → 9.4.0

package/squads/squad-design/knowledge-base/design-systems-frameworks.md

@@ -315,7 +315,97 @@ class MyButton extends LitElement {
 
 ---
 
-## 10. Personagens Fundadores
+## 10. Foundations — Tipografia, Spacing e Motion
+
+### Type Scale (Modular Scale)
+**Tim Brown** (Adobe) popularizou o conceito de modular scale — tamanhos com relacao matematica:
+
+| Razao | Nome | Valores (base 16px) | Uso |
+|-------|------|---------------------|-----|
+| 1.125 | Major Second | 14, 16, 18, 20, 23 | Interfaces densas |
+| 1.200 | Minor Third | 13, 16, 19, 23, 28 | Padrao utilitario |
+| 1.250 | Major Third | 13, 16, 20, 25, 31 | Equilibrado (mais comum) |
+| 1.333 | Perfect Fourth | 12, 16, 21, 28, 38 | Expressivo |
+| 1.500 | Perfect Fifth | 11, 16, 24, 36, 54 | Dramatico (landing pages) |
+
+**Fluid Type (Utopia.fyi):** Elimina media queries para tipografia, interpolando com `clamp()`. Ver `responsive-modern-css.md` secao 11.
+
+**Variable Fonts:** Um arquivo substitui 9+ arquivos estaticos. Inter Variable, Roboto Flex, Geist Variable sao os mais usados. Ver `responsive-modern-css.md` secao 12.
+
+### Grid de 4px / 8px (Padrao da Industria)
+Base 4px e o padrao universal: Material Design, Tailwind CSS, Polaris, Carbon. Divide bem em qualquer device pixel ratio.
+
+```
+Escala: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px
+```
+
+### Motion Tokens (12 Principios de Animacao)
+Baseado nos **12 principios de animacao da Disney** (Frank Thomas e Ollie Johnston, 1981). Para interfaces, os mais relevantes:
+
+- **Easing:** Nada começa/para instantaneamente
+- **Anticipation:** Sinalizar que algo vai acontecer
+- **Follow-through:** Overshoot leve ao atingir destino
+
+```json
+{
+  "motion": {
+    "duration": {
+      "instant":  { "$value": "50ms",  "$type": "duration" },
+      "fast":     { "$value": "100ms", "$type": "duration" },
+      "normal":   { "$value": "200ms", "$type": "duration" },
+      "slow":     { "$value": "300ms", "$type": "duration" },
+      "slower":   { "$value": "500ms", "$type": "duration" }
+    },
+    "easing": {
+      "default": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)",   "$type": "cubicBezier" },
+      "in":      { "$value": "cubic-bezier(0.4, 0, 1, 1)",     "$type": "cubicBezier" },
+      "out":     { "$value": "cubic-bezier(0, 0, 0.2, 1)",     "$type": "cubicBezier" },
+      "spring":  { "$value": "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "$type": "cubicBezier" }
+    }
+  }
+}
+```
+
+**Animation vocabulary (patterns de uso):**
+| Pattern | Quando | Exemplos |
+|---------|--------|---------|
+| Fade | Aparecer/desaparecer sem mover | Tooltip, notification |
+| Slide | Entrar de uma direcao | Drawer, panel, sheet |
+| Scale | Crescer/diminuir | Modal opening, zoom |
+| Spring | Fisica de mola | Drag and drop, pull to refresh |
+| Stagger | Grupo em sequencia | List items, cards grid |
+
+**Framer Motion (23K+ stars):**
+```tsx
+import { motion, AnimatePresence } from 'framer-motion';
+
+<AnimatePresence>
+  {isOpen && (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95, y: 20 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.95, y: 20 }}
+      transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+    >
+      {children}
+    </motion.div>
+  )}
+</AnimatePresence>
+```
+
+**Reduced Motion (acessibilidade obrigatoria):**
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## 11. Personagens Fundadores
 
 | Pessoa | Contribuicao | Obra Principal |
 |--------|-------------|----------------|

package/squads/squad-design/knowledge-base/responsive-modern-css.md

@@ -557,9 +557,101 @@ border-left → border-inline-start
 
 ---
 
+---
+
+## 11. Fluid Typography — Utopia.fyi
+
+**Utopia.fyi** (criado por James Gilyead e Trys Mudford) popularizou fluid type scales que interpolam suavemente entre breakpoints usando `clamp()`. Elimina media queries para tipografia.
+
+### Conceito
+```css
+/* Tipografia fluida: interpola entre min e max baseado no viewport */
+--font-size-body: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
+/*                       min   preferido        max       */
+/*                      16px  escala com vw    20px       */
+```
+
+**Utopia scale completa (ex: 320px → 1440px):**
+```css
+:root {
+  --step--1: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);  /* ~12-13px */
+  --step-0:  clamp(1rem, 0.9rem + 0.45vw, 1.25rem);        /* 16-20px body */
+  --step-1:  clamp(1.2rem, 1.02rem + 0.86vw, 1.6625rem);   /* 19-27px */
+  --step-2:  clamp(1.44rem, 1.14rem + 1.48vw, 2.215rem);   /* 23-35px */
+  --step-3:  clamp(1.728rem, 1.25rem + 2.39vw, 2.95rem);   /* 28-47px */
+  --step-4:  clamp(2.074rem, 1.33rem + 3.72vw, 3.934rem);  /* 33-63px */
+  --step-5:  clamp(2.488rem, 1.38rem + 5.54vw, 5.245rem);  /* 40-84px */
+}
+```
+
+**Ferramenta:** utopia.fyi — gera escalas fluid customizadas com preview interativo.
+
+### Fluid Spacing (Utopia approach)
+```css
+:root {
+  --space-3xs:  clamp(0.25rem, 0.22rem + 0.14vw, 0.3125rem); /* 4-5px */
+  --space-2xs:  clamp(0.5rem, 0.45rem + 0.23vw, 0.625rem);   /* 8-10px */
+  --space-xs:   clamp(0.75rem, 0.68rem + 0.36vw, 0.9375rem); /* 12-15px */
+  --space-sm:   clamp(1rem, 0.9rem + 0.45vw, 1.25rem);       /* 16-20px */
+  --space-md:   clamp(1.5rem, 1.36rem + 0.68vw, 1.875rem);   /* 24-30px */
+  --space-lg:   clamp(2rem, 1.8rem + 0.91vw, 2.5rem);        /* 32-40px */
+  --space-xl:   clamp(3rem, 2.73rem + 1.36vw, 3.75rem);      /* 48-60px */
+  --space-2xl:  clamp(4rem, 3.64rem + 1.82vw, 5rem);         /* 64-80px */
+  --space-3xl:  clamp(6rem, 5.45rem + 2.73vw, 7.5rem);       /* 96-120px */
+}
+```
+
+---
+
+## 12. Variable Fonts
+
+Fontes variaveis (OpenType variable fonts) interpolam entre multiplos eixos com **um unico arquivo**. Transformacional para design systems.
+
+### Eixos Comuns
+| Eixo | Tag | Range Tipico | Efeito |
+|------|-----|-------------|--------|
+| Weight | `wght` | 100-900 | Espessura do traço |
+| Width | `wdth` | 75-125% | Largura dos glifos |
+| Slant | `slnt` | -15 a 0 | Inclinacao |
+| Optical size | `opsz` | 8-144 | Ajuste para tamanho |
+| Italic | `ital` | 0 ou 1 | On/off italic |
+
+### Uso em CSS
+```css
+@font-face {
+  font-family: 'Inter Variable';
+  src: url('Inter-Variable.woff2') format('woff2-variations');
+  font-weight: 100 900;      /* Range completo */
+  font-display: swap;
+}
+
+/* Uso granular — pesos nao-padrao possiveis */
+.body    { font-weight: 400; }
+.medium  { font-weight: 500; }
+.semibold{ font-weight: 600; }
+.fine    { font-weight: 350; } /* Impossivel com fontes estaticas */
+```
+
+### Fontes Variaveis Populares para Interfaces
+| Fonte | Criador | Uso |
+|-------|---------|-----|
+| **Inter Variable** | Rasmus Andersson | UI principal — mais usado em 2024-2026 |
+| **Roboto Flex** | Google | Material Design |
+| **Source Sans Variable** | Adobe | Open source |
+| **Geist Variable** | Vercel | Developer/minimal |
+| **Nu Sans Variable** | Blackletra/Nubank | Proprietary (Nubank) |
+
+### Performance
+Um unico arquivo `.woff2` substitui 9+ arquivos estaticos. Reducao tipica: 150KB → 35KB para uma familia completa.
+
+---
+
 ## Referencias
-- MDN Web Docs — CSS Reference
-- web.dev — Learn CSS / Responsive Design
-- Every Layout (Heydon Pickering & Andy Bell)
-- Tailwind CSS Documentation
+- MDN Web Docs — CSS Reference — developer.mozilla.org/CSS
+- web.dev — Learn CSS / Responsive Design — web.dev/learn/css
+- Every Layout (Heydon Pickering & Andy Bell) — every-layout.dev
+- Utopia.fyi — utopia.fyi (fluid type + space scales)
+- Tailwind CSS Documentation — tailwindcss.com
+- Inter Variable Font — rsms.me/inter
 - CSS Tricks / Smashing Magazine
+- Lea Verou — CSS Secrets (O'Reilly, 2015)

package/squads/squad-design/knowledge-base/wcag-aria-reference.md

@@ -305,9 +305,121 @@ Referencia completa de WCAG 2.2 Level AA e ARIA patterns — criterios de sucess
 
 ---
 
+---
+
+## 8. WCAG 2.2 — Status Legal e Adocao (2025-2026)
+
+### Aprovacao como ISO/IEC
+WCAG 2.2 foi publicado pelo W3C em outubro 2023 e aprovado como **ISO/IEC 40500:2025** em outubro de 2025. Essa aprovacao acelerou adocao global — leis e regulamentos que referenciam o padrao ISO passam a exigir WCAG 2.2.
+
+### European Accessibility Act (EAA)
+Efetivo em **junho de 2025**, o EAA exige que produtos e servicos digitais vendidos na UE atendam requisitos de acessibilidade baseados em WCAG 2.1/2.2. Empresas brasileiras que vendem para a Europa precisam estar em conformidade.
+
+### WCAG 3.0 (Em Desenvolvimento)
+WCAG 3.0 esta em desenvolvimento mas ainda a anos de se tornar recomendacao oficial. **WCAG 2.2 permanece o estado da arte** e o padrao a implementar.
+
+### Brasil — LBI
+Lei Brasileira de Inclusao (Lei 13.146/2015) exige acessibilidade digital para toda empresa com sede ou representacao no Brasil. O nivel minimo exigido e WCAG AA. Ver `brazilian-design-context.md` para detalhes completos.
+
+---
+
+## 9. Inclusive Design (Alem do Minimo)
+
+Acessibilidade = cumprir requisitos tecnicos (o minimo legal).
+**Inclusive Design** = projetar para a diversidade humana desde o inicio.
+
+### Microsoft Inclusive Design Toolkit — 3 Tipos de Exclusao
+
+| Tipo | Descricao | Exemplos |
+|------|-----------|---------|
+| **Permanente** | Condicao permanente | Cego, surdo, amputado |
+| **Temporaria** | Condicao temporaria | Olho inflamado, braco quebrado |
+| **Situacional** | Contexto especifico | Dirigindo, ambiente barulhento, sol na tela |
+
+**Principio:** Projetar para exclusao permanente beneficia todos.
+
+Exemplos de "design inclusivo que escala":
+- **Legendas** (criadas para surdos) → usadas por 80% da audiencia (ambiente barulhento, aprendendo idioma)
+- **Contraste alto** (criado para baixa visao) → beneficia qualquer um sob sol forte
+- **Tela grande** (criada para idosos) → preferida por todos em uso casual
+
+### Heydon Pickering — Componentes Inclusivos
+Autor de "Inclusive Components" (2019) — cada capitulo detalha como construir componentes verdadeiramente inclusivos (card, toggle, notification, data table). Nao apenas tecnicamente acessivel, mas inclusivo na concepcao.
+
+**inclusive-components.design** — Recurso gratuito online.
+
+---
+
+## 10. Automated a11y Testing — Stack Completa
+
+### axe-core (Deque Systems)
+Motor de teste mais utilizado. 100+ regras WCAG. Detecta ~30-40% de problemas automaticamente.
+
+```typescript
+// jest-axe — teste unitario
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+expect.extend(toHaveNoViolations);
+
+test('Button: sem violacoes de acessibilidade', async () => {
+  const { container } = render(<Button>Click me</Button>);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+```
+
+```typescript
+// @axe-core/playwright — testes E2E
+import { checkA11y } from 'axe-playwright';
+
+test('pagina sem violacoes', async ({ page }) => {
+  await page.goto('/');
+  await checkA11y(page, null, {
+    axeOptions: { runOnly: ['wcag2a', 'wcag2aa', 'wcag22aa'] },
+  });
+});
+```
+
+### Storybook a11y Addon
+```typescript
+// .storybook/main.ts
+export default {
+  addons: ['@storybook/addon-a11y'],
+};
+// Exibe painel de acessibilidade em cada story
+// Roda axe-core em tempo real no browser
+// Mostra violations, warnings e passes com links para regras
+```
+
+### Stack Completa
+
+| Ferramenta | Quando usar | Cobertura |
+|-----------|------------|---------|
+| `jest-axe` | Unit tests (por componente) | ~30-40% das issues |
+| `@storybook/addon-a11y` | Desenvolvimento (real-time) | ~30-40% |
+| `@axe-core/playwright` | E2E tests (paginas completas) | ~30-40% |
+| Lighthouse a11y | CI gate (score) | ~20-30% |
+| `eslint-plugin-jsx-a11y` | Static analysis (code) | Problemas estaticos |
+| **Manual keyboard** | Teste manual | Issues de fluxo |
+| **Screen reader** | Teste manual | Announcements |
+
+### O que Automatizacao NAO detecta (teste manual obrigatorio)
+- Logica de focus management em fluxos complexos
+- Qualidade de anuncios de screen reader
+- Adequacao dos labels e textos alternativos (semantica, nao sintaxe)
+- Sequencia de leitura logica
+- Cognitive load e clareza
+
+---
+
 ## Referencias
-- W3C WCAG 2.2 Specification
-- W3C ARIA Authoring Practices Guide (APG)
-- W3C ARIA 1.2 Specification
-- WebAIM — Testing resources
-- Deque University — axe-core rules
+- W3C WCAG 2.2 Specification — w3.org/WAI/WCAG22
+- W3C ARIA Authoring Practices Guide (APG) — w3.org/WAI/ARIA/apg
+- W3C ARIA 1.2 Specification — w3.org/TR/wai-aria-1.2
+- ISO/IEC 40500:2025 — iso.org
+- European Accessibility Act — ec.europa.eu
+- WebAIM — Testing resources — webaim.org
+- Deque University — axe-core rules — deque.com/axe
+- Heydon Pickering — inclusive-components.design
+- Microsoft Inclusive Design Toolkit — microsoft.com/design/inclusive
+- lei Brasileira de Inclusao (LBI) — Lei 13.146/2015

package/squads/squad-design/knowledge-base/web-performance-reference.md

@@ -329,9 +329,132 @@ Monitoring:
 
 ---
 
+---
+
+## 11. Design System Performance
+
+Design systems impactam diretamente Core Web Vitals dos produtos que os consomem.
+
+### Impacto por Metrica
+| Metrica CWV | Como o DS afeta | Otimizacao |
+|-------------|----------------|------------|
+| **LCP** | Componentes pesados atrasam render do elemento principal | Lazy loading, code-splitting |
+| **INP** | Event handlers lentos em componentes complexos | Otimizar renders, evitar re-renders |
+| **CLS** | Componentes sem dimensoes explicitas (Skeleton vs sem nada) | Skeleton loaders, aspect-ratio, dimensoes fixas |
+
+### Bundle Size por Componente (Targets)
+| Tipo | Target gzipped | Ferramenta de verificacao |
+|------|---------------|--------------------------|
+| Atom (Button, Badge, Icon) | < 3KB | size-limit, bundlephobia |
+| Molecule (Form Field, Card) | < 8KB | size-limit |
+| Organism (Table, Modal, DatePicker) | < 20KB | size-limit |
+| Bundle completo (index.js) | < 50KB | size-limit |
+
+### Tree-Shaking (Obrigatorio para DS)
+
+Para que tree-shaking funcione, o pacote deve:
+
+**1. ESM exports:**
+```json
+// package.json
+{
+  "name": "@mylib/components",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./button": {
+      "import": "./dist/button.mjs"
+    },
+    "./modal": {
+      "import": "./dist/modal.mjs"
+    }
+  }
+}
+```
+
+**2. sideEffects: false** — declara que modulos nao tem efeitos colaterais
+
+**3. Per-component exports:**
+```tsx
+// Tree-shakeable — bundler inclui apenas Button
+import { Button } from '@mylib/components';
+
+// Ou explicitamente:
+import { Button } from '@mylib/components/button';
+```
+
+### size-limit Configuration
+```json
+// package.json
+{
+  "size-limit": [
+    { "path": "dist/index.mjs", "limit": "50 KB", "gzip": true },
+    { "path": "dist/button.mjs", "limit": "3 KB", "gzip": true },
+    { "path": "dist/modal.mjs", "limit": "8 KB", "gzip": true },
+    { "path": "dist/data-table.mjs", "limit": "20 KB", "gzip": true }
+  ]
+}
+```
+
+```yaml
+# .github/workflows/size-check.yml
+- name: Check bundle size
+  run: npx size-limit
+```
+
+### React DevTools Profiler
+Para identificar re-renders desnecessarios em componentes:
+```typescript
+import { useCallback, useMemo } from 'react';
+
+// Anti-pattern: nova funcao a cada render
+<Button onClick={() => handleClick(id)} />
+
+// Correto: funcao memoizada
+const handleClickMemo = useCallback(() => handleClick(id), [id, handleClick]);
+<Button onClick={handleClickMemo} />
+```
+
+**why-did-you-render** (biblioteca de debug):
+```typescript
+// index.tsx — dev only
+if (process.env.NODE_ENV === 'development') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React, { trackAllPureComponents: true });
+}
+```
+
+### CLS em Design Systems — Skeleton Patterns
+```tsx
+// Anti-pattern: sem reservar espaco
+{isLoading ? null : <UserCard user={user} />}
+
+// Correto: skeleton com mesmas dimensoes
+{isLoading ? <UserCardSkeleton /> : <UserCard user={user} />}
+
+// Skeleton implementation
+function UserCardSkeleton() {
+  return (
+    <div className="animate-pulse">
+      <div className="h-12 w-12 rounded-full bg-gray-200" />  {/* Avatar */}
+      <div className="mt-2 h-4 w-32 rounded bg-gray-200" />  {/* Name */}
+      <div className="mt-1 h-3 w-24 rounded bg-gray-200" />  {/* Role */}
+    </div>
+  );
+}
+```
+
+---
+
 ## Referencias
 - web.dev/performance (Google)
-- Core Web Vitals documentation
-- Next.js Performance documentation
-- HTTP Archive — Web Almanac
-- Calibre Performance Blog
+- Core Web Vitals documentation — web.dev/vitals
+- Next.js Performance documentation — nextjs.org/docs/app/building-your-application/optimizing
+- HTTP Archive — Web Almanac — httparchive.org/reports
+- Calibre Performance Blog — calibreapp.com/blog
+- bundlephobia.com — verifica custo de dependencias
+- size-limit — github.com/ai/size-limit