> ## Documentation Index
> Fetch the complete documentation index at: https://docs.easygoal.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Estrutura do Monorepo

> Organização dos repositórios e o monorepo de packages compartilhados (@easygoal/ui e @easygoal/auth).

## Visão Geral

O ecossistema Easy Goal é composto por repositórios de aplicações independentes e um **monorepo de packages compartilhados** (`easygoal-monorepo`) que centraliza identidade visual e autenticação.

## Monorepo de Packages (`easygoal-monorepo`)

```
easygoal-monorepo/             github.com/Easy-Goal/easygoal-monorepo
├── packages/
│   ├── ui/                    @easygoal/ui — Design tokens + componentes React
│   │   ├── src/
│   │   │   ├── components/Logo/   Componente <Logo />
│   │   │   ├── tokens/colors.ts   Paleta oficial (hex + CSS vars)
│   │   │   └── index.ts
│   │   ├── package.json
│   │   └── tsup.config.ts
│   └── auth/                  @easygoal/auth — SSO providers + middleware
│       ├── src/
│       │   ├── providers/AuthProvider.tsx
│       │   ├── callback/handler.ts
│       │   ├── callback/route.ts
│       │   ├── middleware/updateSession.ts
│       │   ├── types.ts
│       │   └── index.ts
│       ├── package.json
│       └── tsup.config.ts
├── package.json               root — pnpm workspaces
└── pnpm-workspace.yaml
```

## Packages disponíveis

<Columns cols={2}>
  <Card title="@easygoal/ui" icon="palette" href="/monorepo/setup">
    Componente `<Logo />` e tokens de cor da identidade visual — azul escuro e laranja. **Disponível.**
  </Card>

  <Card title="@easygoal/auth" icon="key" href="/monorepo/setup">
    `AuthProvider`, `handleAuthCallback`, `updateSession` — SSO com Next.js + Supabase. **Disponível.**
  </Card>

  <Card title="@easygoal/types" icon="code">
    Interfaces TypeScript compartilhadas: `UserProfile`, `Subscription`, `WebhookPayload`. **Planejado.**
  </Card>

  <Card title="@easygoal/webhooks" icon="webhook">
    Utilitário de validação HMAC SHA256 para webhooks entre app-front e SSO. **Planejado.**
  </Card>
</Columns>

## Paleta de Cores Oficial

Os valores abaixo são a fonte da verdade. Use `@easygoal/ui/tokens` para importar programaticamente.

| Token             | HSL           | Hex       | Uso                      |
| ----------------- | ------------- | --------- | ------------------------ |
| `primary`         | `24 95% 53%`  | `#F97316` | Botões, links, destaques |
| `primaryLight`    | `24 90% 60%`  | `#FB923C` | Hover states             |
| `primaryDark`     | `21 90% 48%`  | `#EA580C` | Active states            |
| `background`      | `222 47% 11%` | `#0F1729` | Fundo principal          |
| `card`            | `222 47% 13%` | `#121E34` | Cards e painéis          |
| `secondary`       | `222 47% 18%` | `#182644` | Elementos secundários    |
| `mutedForeground` | `215 20% 55%` | `#798BAA` | Texto secundário         |

```css theme={null}
/* globals.css — copiar para novos projetos */
@layer base {
  :root {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --primary: 24 95% 53%;
    --primary-foreground: 0 0% 100%;
    --card: 222 47% 13%;
    --border: 222 47% 20%;
    --ring: 24 95% 53%;
    --radius: 0.75rem;
  }
}
```

## Adicionando novos packages

Para adicionar um package ao monorepo, crie um novo diretório em `packages/`:

```bash theme={null}
mkdir -p packages/meu-package/src
```

Crie `packages/meu-package/package.json` com o nome `@easygoal/meu-package`, `tsconfig.json` e `tsup.config.ts` seguindo o padrão dos packages existentes. O pnpm workspace detecta automaticamente.