@riligar/agents-kit 1.20.1 → 1.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/.agent/skills/riligar-design-system/SKILL.md +97 -32
  2. package/.agent/skills/riligar-design-system/assets/theme.js +29 -15
  3. package/.agent/skills/riligar-design-system/references/anti-patterns.md +67 -18
  4. package/.agent/skills/riligar-design-system/references/design-system.md +125 -61
  5. package/.agent/skills/riligar-design-system/references/master-patterns.md +181 -13
  6. package/.agent/skills/riligar-design-system/references/visual-references.md +103 -43
  7. package/package.json +1 -1
package/.agent/skills/riligar-design-system/SKILL.md CHANGED
@@ -1,55 +1,120 @@
1
1
  ---
2
2
  name: riligar-design-system
3
- description: Especialista no Sistema Visual da RiLiGar. Use para: (1) Criação de interfaces web e mobile (Light/Dark Mode), (2) Implementação de componentes UI (Mantine Only), (3) Garantir estética minimalista "Content-First", (4) Aplicar tokens de design via Mantine Theme.
3
+ description: Especialista no Sistema Visual Zen da RiLiGar. Use para: (1) Criação de interfaces com estética "Content over Chrome", (2) Aplicar hierarquia massiva via Big Type Metrics, (3) Diferenciar contextos Zen Stage (impacto) e Zen Dense (densidade), (4) Implementar componentes UI (Mantine Only), (5) Garantir padrão monocromático e palco central limpo.
4
4
  ---
5
5
 
6
- # RiLiGar Design System Expert
6
+ # 🏮 RiLiGar Zen Design System
7
7
 
8
- Você é um especialista em design e interface seguindo as diretrizes da RiLiGar. Sua missão é garantir que qualquer código gerado use **APENAS** a API do Mantine 8, sem CSS customizado ou inline.
8
+ Você é um especialista em design e interface seguindo a filosofia **Zen** da RiLiGar. Sua missão é garantir que qualquer código gerado siga os princípios do Zen e use **APENAS** a API do Mantine 8, sem CSS customizado ou inline.
9
9
 
10
- ## Filosofia: "Content-First" & "Theme-Aware"
10
+ > _"O Zen não é sobre o que você coloca, é sobre o que você decide não colocar."_
11
11
 
12
- A interface deve ser invisível e funcionar perfeitamente em Light e Dark Mode.
12
+ ---
13
+
14
+ ## A Filosofia Zen: 3 Pilares
15
+
16
+ ### 1. Content over Chrome
17
+
18
+ A interface **não compete** com a informação. Botões, bordas e sombras são reduzidos ao mínimo absoluto. Se um elemento não ajuda na leitura do dado, ele é removido sem piedade.
19
+
20
+ ### 2. The Stage (O Palco)
21
+
22
+ Cada visualização é tratada como um **palco teatral**:
23
+
24
+ - O cabeçalho é o "anúncio" → Subtítulo leve (Small Caps, 10-12px, fw 800) + Título pesado (48-72px, fw 900)
25
+ - O conteúdo é a "performance" → Centro da tela limpo, focado, sem distrações laterais
26
+ - O `ZenLayout` garante essa fundação: container `size="xl"`, padding vertical generoso (`py={80}`)
27
+
28
+ ### 3. Hierarquia Massiva
29
+
30
+ Dados não são exibidos — são **declarados**. Números se tornam declarações de design:
31
+
32
+ - **Big Type Metrics**: fw 900, fz 64-120px, lh 1
33
+ - **Labels**: fw 800, fz 10-12px, uppercase, letter-spacing 1.5px, cor gray.4
34
+ - **Títulos**: fw 900, fz 48-72px, letter-spacing -0.04em
35
+
36
+ ---
37
+
38
+ ## Dois Contextos de Aplicação
39
+
40
+ O agente **DEVE** identificar o contexto antes de gerar qualquer interface:
41
+
42
+ ### 🎭 Zen Stage (Impacto Teatral)
43
+
44
+ **Quando usar:** Landing pages, dashboards de métricas, onboarding, telas de apresentação.
13
45
 
14
- - **Estrutura:** Whitespace e alinhamento preciso.
15
- - **Estética:** Monocromática, funcional, estilo Notion/Linear.
16
- - **Técnica:** Zero CSS files. Zero `style={{}}`. Tudo via Props.
46
+ - Tipografia massiva (Big Type Metrics 64px+)
47
+ - Inputs minimalistas (unstyled, apenas `border-bottom`)
48
+ - Padding vertical generoso (80px)
49
+ - Container centralizado size XL
50
+ - Máximo de respiro, mínimo de elementos
51
+
52
+ ### 📊 Zen Dense (Densidade Admin)
53
+
54
+ **Quando usar:** Painéis admin, tabelas, formulários CRUD, configurações.
55
+
56
+ - Densidade de dados estilo Notion/Linear
57
+ - Inputs com borda completa (compactos, 32px)
58
+ - Tabelas com padding tight (`py-xs`)
59
+ - Foco em escaneabilidade e eficiência
60
+
61
+ **Importante:** Ambos os contextos compartilham a mesma alma — monocromia, Content over Chrome, zero ornamentos. A diferença está no **ritmo** e na **escala tipográfica**.
62
+
63
+ ---
17
64
 
18
65
  ## Guia de Referência
19
66
 
20
- Para atingir a excelência:
67
+ Para atingir a excelência Zen:
21
68
 
22
- - **[Excellence Patterns](references/master-patterns.md)**: Código "Gold Standard" usando Mantine Props. **Sempre use como base.**
23
- - **[Theme Config](assets/theme.js)**: Configuração do tema com suporte a Dark Mode automático.
24
- - **[Visual references](references/visual-references.md)**: Mapeamento de nuances estéticas.
25
- - **[Anti-patterns](references/anti-patterns.md)**: O que evitar (especialmente CSS inline).
26
- - **[Design Guidelines](references/design-system.md)**: Tipografia, cores e hierarquia visual detalhada.
69
+ - **[Master Patterns](references/master-patterns.md)**: Código "Gold Standard" com patterns Stage e Dense. **Sempre use como base.**
70
+ - **[Theme Config](assets/theme.js)**: Configuração do tema Zen com headings fw 900 e Dark Mode automático.
71
+ - **[Visual References](references/visual-references.md)**: Dicionário Visual-Code com especificações Zen.
72
+ - **[Anti-patterns](references/anti-patterns.md)**: O que evitar (CSS inline, inputs decorados, títulos leves).
73
+ - **[Design Guidelines](references/design-system.md)**: Tipografia, cores, hierarquia e contextos detalhados.
74
+
75
+ ---
27
76
 
28
- ## Checklist de Lapidação (RiLiGar Excellence)
77
+ ## Checklist de Lapidação Zen
29
78
 
30
79
  Antes de entregar qualquer interface, o agente **DEVE** validar:
31
80
 
32
- 1. [ ] Configurei `defaultProps` no theme.js para evitar repetição de props?
33
- 2. [ ] O código do componente está "limpo"? (Ex: `<Button>Save</Button>` sem `radius/size`).
34
- 3. [ ] Removi **TODO** o CSS inline (`style={{}}`)?
35
- 4. [ ] Usei props semânticas do Mantine (`bd`, `bg`, `c`)?
36
- 5. [ ] As cores são semânticas e theme-aware? (Ex: `c="dimmed"`).
37
- 6. [ ] Removi todas as tags HTML nativas (`div`, `button`)?
38
- 7. [ ] Usei Montserrat via font-family do tema?
39
- 8. [ ] O padding vertical em listas e tabelas é compacto?
40
- 9. [ ] Os ícones usam `stroke={1.5}`?
41
- 10. [ ] O resultado é "Clean" e livre de ruído visual?
81
+ ### Foundation
82
+
83
+ 1. [ ] Identifiquei o contexto correto? (Stage vs Dense)
84
+ 2. [ ] Configurei `defaultProps` no theme.js para evitar repetição?
85
+ 3. [ ] O código está "limpo"? (Ex: `<Button>Save</Button>` sem `radius/size`)
86
+ 4. [ ] Removi **TODO** o CSS inline (`style={{}}`)? Zero CSS files?
87
+ 5. [ ] Removi todas as tags HTML nativas (`div`, `button`)?
88
+
89
+ ### Zen Soul
90
+
91
+ 6. [ ] Títulos usam fw 900 e letter-spacing -0.04em?
92
+ 7. [ ] Labels/subtítulos usam Small Caps (uppercase, fw 800, ls 1.5px)?
93
+ 8. [ ] Métricas principais usam Big Type (64px+, fw 900, lh 1)?
94
+ 9. [ ] Inputs no contexto Stage usam estilo unstyled (border-bottom only)?
95
+ 10. [ ] O layout segue o conceito de "Palco"? (container XL, py generoso)
96
+
97
+ ### Excellence
98
+
99
+ 11. [ ] Cores são semânticas e theme-aware? (Ex: `c="dimmed"`)
100
+ 12. [ ] Ícones usam `stroke={1.5}` e tamanho 16-18px?
101
+ 13. [ ] O padding vertical em listas/tabelas é compacto no contexto Dense?
102
+ 14. [ ] O resultado é "Clean" e livre de ruído visual?
103
+
104
+ ---
42
105
 
43
106
  ## Princípios de Implementação
44
107
 
45
- 1. **Theme First:** Se você está repetindo `size="sm"` em todo lugar, mova para `theme.components`.
46
- 2. **Mantine Nativo:** Use APENAS a API do Mantine. Zero CSS files.
47
- 3. **Semântica:** Use `bg="default"` ou `bg="body"` para superfícies que mudam com o tema.
48
- 4. **Bordas:** Use `withBorder` em componentes ou `bd` em Caixas.
49
- 5. **Tipografia:** Use `Title`, `Text` e `Code` do sistema.
108
+ 1. **Theme First:** Se você está repetindo uma prop, mova para `theme.components`.
109
+ 2. **Mantine Nativo:** Use APENAS a API do Mantine. Zero CSS files.
110
+ 3. **Semântica:** Use `bg="default"` ou `bg="body"` para superfícies que mudam com o tema.
111
+ 4. **Bordas:** Use `withBorder` em componentes ou `bd` em Caixas.
112
+ 5. **Tipografia:** Use `Title`, `Text` e `Code` do sistema — nunca tags HTML.
113
+
114
+ ## Master Prompt (Geração Zen)
50
115
 
51
- ## Instruções de Geração
116
+ Ao gerar novas interfaces, use este prompt mental como guia:
52
117
 
53
- Ao gerar UI, sempre prefira as estruturas em **[Master Patterns](references/master-patterns.md)**.
118
+ > "Crie uma interface com estética Zen-Modern de alto impacto. Princípios: Conteúdo sobre Cromo (foco total na tipografia e dados). Paleta minimalista (Pure White backgrounds, Dark-9/Gray-9 texts). Hierarquia Massiva (Títulos em Bold/900 com letter-spacing -0.04em, Labels em Small Caps/LTS 1.5px). Big Type Metrics: fontes gigantes (64px+) para valores de dados principais. Inputs Minimalistas: estilo unstyled com apenas border-bottom. Palco Unificado: containers largos (XL) com padding vertical generoso (80px)."
54
119
 
55
120
  **Atenção:** Código verboso com muitas props repetidas será considerado uma falha de design system.
package/.agent/skills/riligar-design-system/assets/theme.js CHANGED
@@ -3,21 +3,33 @@ import { createTheme, rem } from '@mantine/core'
3
3
  export const theme = createTheme({
4
4
  fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
5
5
 
6
+ // --- ZEN HEADINGS ---
7
+ // fw 900 + tracking -0.04em = Hierarquia Massiva (Zen Manifesto §3)
8
+ headings: {
9
+ fontWeight: '900',
10
+ sizes: {
11
+ h1: { fontSize: rem(56), lineHeight: '1', letterSpacing: '-0.04em' },
12
+ h2: { fontSize: rem(48), lineHeight: '1', letterSpacing: '-0.04em' },
13
+ h3: { fontSize: rem(32), lineHeight: '1.1', letterSpacing: '-0.03em' },
14
+ h4: { fontSize: rem(20), lineHeight: '1.2', letterSpacing: '-0.02em' },
15
+ },
16
+ },
17
+
6
18
  colors: {
7
19
  // Escala Neutra Universal (Substitui o gray padrão)
8
20
  gray: [
9
- '#F9FAFB', // 0: App Background
10
- '#F3F4F6', // 1: Hover/Subtle
11
- '#E5E7EB', // 2: Borders
21
+ '#F9FAFB', // 0: App Background / Canvas
22
+ '#F3F4F6', // 1: Hover / Subtle Feedback
23
+ '#E5E7EB', // 2: Borders (a borda universal Zen)
12
24
  '#D1D5DB', // 3: Disabled
13
- '#9CA3AF', // 4: Placeholder
25
+ '#9CA3AF', // 4: Zen Labels (Small Caps)
14
26
  '#6B7280', // 5: Text Secondary
15
27
  '#4B5563', // 6: Text Primary Soft
16
28
  '#374151', // 7: Text Primary
17
29
  '#1F2937', // 8: Headers
18
- '#11181C', // 9: Absolute Black
30
+ '#11181C', // 9: Absolute Black (nunca #000)
19
31
  ],
20
- // Semânticos neutralizados para manter monochromaticidade total
32
+ // Semânticos neutralizados para monocromaticidade total
21
33
  error: ['#F9FAFB', '#F3F4F6', '#E5E7EB', '#D1D5DB', '#9CA3AF', '#6B7280', '#4B5563', '#374151', '#1F2937', '#11181C'],
22
34
  success: ['#F9FAFB', '#F3F4F6', '#E5E7EB', '#D1D5DB', '#9CA3AF', '#6B7280', '#4B5563', '#374151', '#1F2937', '#11181C'],
23
35
  },
@@ -25,13 +37,13 @@ export const theme = createTheme({
25
37
  primaryColor: 'dark', // Escala dark mapeada para cinzas
26
38
  autoContrast: true,
27
39
 
28
- defaultRadius: 'md', // 6px
40
+ defaultRadius: 'md', // 6px — suave, nunca "pill"
29
41
 
30
42
  components: {
31
43
  // --- LAYOUT & CONTAINERS ---
32
44
  Paper: {
33
45
  defaultProps: {
34
- withBorder: true,
46
+ withBorder: true, // Borda > Sombra (Zen §2: Layer 1)
35
47
  shadow: 'none',
36
48
  radius: 'lg', // 8px para containers
37
49
  },
@@ -48,7 +60,7 @@ export const theme = createTheme({
48
60
  // --- DATA DISPLAY ---
49
61
  Table: {
50
62
  defaultProps: {
51
- verticalSpacing: 'xs', // 8px density
63
+ verticalSpacing: 'xs', // 8px — Zen Dense density
52
64
  horizontalSpacing: 'md',
53
65
  withRowBorders: true,
54
66
  highlightOnHover: true,
@@ -58,7 +70,7 @@ export const theme = createTheme({
58
70
  defaultProps: {
59
71
  size: 'sm',
60
72
  radius: 'sm',
61
- variant: 'light',
73
+ variant: 'light', // Sutil — nunca chamativo
62
74
  fw: 500,
63
75
  },
64
76
  },
@@ -66,14 +78,14 @@ export const theme = createTheme({
66
78
  // --- INPUTS & ACTIONS ---
67
79
  Button: {
68
80
  defaultProps: {
69
- size: 'sm', // 32px
81
+ size: 'sm', // 32px — compacto
70
82
  fw: 500,
71
83
  radius: 'md',
72
84
  },
73
85
  },
74
86
  TextInput: {
75
87
  defaultProps: {
76
- size: 'sm', // 32px height
88
+ size: 'sm', // 32px height — Zen Dense
77
89
  radius: 'md',
78
90
  },
79
91
  styles: theme => ({
@@ -93,7 +105,7 @@ export const theme = createTheme({
93
105
  },
94
106
  ActionIcon: {
95
107
  defaultProps: {
96
- size: 'sm', // 26px context triggers
108
+ size: 'sm', // 26px — context triggers
97
109
  variant: 'subtle',
98
110
  color: 'gray',
99
111
  radius: 'md',
@@ -107,14 +119,16 @@ export const theme = createTheme({
107
119
  color: 'gray',
108
120
  },
109
121
  },
122
+
123
+ // --- TYPOGRAPHY ---
110
124
  Title: {
111
125
  defaultProps: {
112
- lh: 1.2,
126
+ lh: 1, // Zen: lh 1 para impacto massivo
113
127
  },
114
128
  },
115
129
  Text: {
116
130
  defaultProps: {
117
- lh: 1.6,
131
+ lh: 1.6, // Corpo: respiro para legibilidade
118
132
  },
119
133
  },
120
134
  },
package/.agent/skills/riligar-design-system/references/anti-patterns.md CHANGED
@@ -1,36 +1,85 @@
1
- # Anti-Patterns: O que NÃO é RiLiGar
1
+ # Anti-Patterns: O que NÃO é Zen
2
2
 
3
- Para atingir a excelência, devemos eliminar vícios de design comum que deixam a interface com cara de "genérica".
3
+ Para atingir a excelência, devemos eliminar vícios que destroem a alma Zen da interface.
4
4
 
5
- | Erro Comum | Por que é ruim? | A Solução RiLiGar |
5
+ ## Anti-Patterns Universais
6
+
7
+ | Erro Comum | Por que é ruim? | A Solução Zen |
6
8
  | :-------------------------- | :------------------------------------------------------ | :-------------------------------------------------- |
7
- | **Sombras Drop (Pesadas)** | Adiciona ruído visual e amadorismo. | `border: 1px solid #E5E7EB`. |
8
- | **Azul "Bootstrap"** | Cor saturada demais para a estética minimalista. | Use `#000000` (Preto) ou um azul marinho `#11181C`. |
9
+ | **Sombras Drop (Pesadas)** | Adiciona ruído visual e amadorismo. | `border: 1px solid gray.2`. |
10
+ | **Azul "Bootstrap"** | Cor saturada demais para a estética Zen. | Use `#000000` (Preto) ou um azul marinho `#11181C`. |
9
11
  | **Pillings (Radius total)** | Lembra apps mobile infantis ou Google Material antigos. | `border-radius: 6px`. Retangular com quinas suaves. |
10
12
  | **Inputs Gigantes** | Quebram a densidade de informação útil. | `height: 32px`. Compacto e focado. |
11
13
  | **Gradientes Lineares** | Introduzem profundidade desnecessária. | Cores puras e sólidas (Flat). |
12
- | **Divisores Escuros** | Chamam mais atenção que o próprio conteúdo. | Use `#F3F4F6` para divisores internos. |
14
+ | **Divisores Escuros** | Chamam mais atenção que o próprio conteúdo. | Use `gray.1` para divisores internos. |
15
+ | **CSS Inline** | Quebra a centralização do design system. | Tudo via Props do Mantine ou `theme.components`. |
16
+ | **Tags HTML nativas** | `div`, `button`, `input` fora do Mantine. | Use `Box`, `Button`, `TextInput` do Mantine. |
17
+
18
+ ## Anti-Patterns do Zen Stage
19
+
20
+ | Erro | Por que é ruim? | A Solução Zen |
21
+ | :--------------------------------------- | :---------------------------------------------- | :----------------------------------------------- |
22
+ | **Títulos com peso ≤ 700** | Falta impacto teatral. Parece genérico. | Use fw 900 com ls -0.04em. |
23
+ | **Inputs com bordas completas no Stage** | Decoração excessiva. Compete com o conteúdo. | Variant `unstyled` com apenas `border-bottom`. |
24
+ | **Métricas em tamanho normal (14-20px)** | Desperdiça a oportunidade de declaração visual. | Big Type: 64px+ para dados principais. |
25
+ | **Container sem padding vertical** | Quebra o conceito de "Palco". Conteúdo colado. | `py={80}` no Container principal. |
26
+ | **Labels sem Small Caps** | Perde a hierarquia sutil que distingue o Zen. | Uppercase, fw 800, fz 10-12px, lts 1.5px. |
27
+ | **Muitos elementos competindo** | O palco fica poluído. A "performance" se perde. | Reduza. O Zen é sobre o que você decide NÃO pôr. |
13
28
 
14
- ## Exemplo de Refatoração (Cérebro do Agente)
29
+ ## Exemplo de Refatoração
15
30
 
16
31
  **❌ Antes (Design Comum):**
17
32
 
18
- ```html
19
- <div style="box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 20px; padding: 20px; background: blue;">
20
- <h1 style="color: white; font-weight: 800;">User Info</h1>
21
- <button style="border-radius: 50px; padding: 10px 20px;">Click Me</button>
33
+ ```jsx
34
+ <div style={{ boxShadow: '0 4px 6px rgba(0,0,0,0.1)', borderRadius: 20, padding: 20 }}>
35
+ <h1 style={{ fontSize: 24, fontWeight: 600 }}>Revenue</h1>
36
+ <p style={{ fontSize: 18 }}>$42,500</p>
37
+ <input style={{ border: '1px solid #ccc', borderRadius: 8, padding: 12 }} />
22
38
  </div>
23
39
  ```
24
40
 
25
- **✅ Depois (RiLiGar Excellence):**
41
+ **✅ Depois (Zen Excellence):**
26
42
 
27
- ```html
28
- <div style="border: 1px solid #E5E7EB; border-radius: 8px; padding: 16px; background: #FFF;">
29
- <h3 style="color: #11181C; font-weight: 600; font-size: 14px; margin-bottom: 8px;">User Info</h3>
30
- <button style="border-radius: 6px; height: 32px; padding: 0 12px; background: #000; color: #FFF; font-size: 12px;">Action</button>
31
- </div>
43
+ ```jsx
44
+ <Container
45
+ size="xl"
46
+ py={80}
47
+ >
48
+ <Stack gap={4}>
49
+ <Text
50
+ fz={11}
51
+ fw={800}
52
+ c="gray.4"
53
+ tt="uppercase"
54
+ lts="1.5px"
55
+ >
56
+ Revenue
57
+ </Text>
58
+ <Title
59
+ order={2}
60
+ fz={80}
61
+ fw={900}
62
+ lh={1}
63
+ lts="-0.04em"
64
+ >
65
+ $42,500
66
+ </Title>
67
+ </Stack>
68
+
69
+ <TextInput
70
+ variant="unstyled"
71
+ placeholder="Search..."
72
+ styles={{
73
+ input: {
74
+ borderBottom: '1px solid var(--mantine-color-gray-2)',
75
+ borderRadius: 0,
76
+ paddingBottom: 8,
77
+ },
78
+ }}
79
+ />
80
+ </Container>
32
81
  ```
33
82
 
34
83
  ---
35
84
 
36
- _Lembre-se: O design RiLiGar é sobre **restrição**. Se você pode remover uma borda ou uma cor e o app ainda funciona, remova._
85
+ _Lembre-se: O design Zen é sobre **restrição**. Se você pode remover um elemento e a interface ainda funciona, remova._
package/.agent/skills/riligar-design-system/references/design-system.md CHANGED
@@ -1,106 +1,170 @@
1
- # Diretrizes de Design & Sistema Visual
1
+ # Diretrizes de Design & Sistema Visual Zen
2
2
 
3
- > Baseado na análise de UI Minimalista/SaaS Premium (Notion)
3
+ > Baseado na filosofia Zen: Content over Chrome, The Stage, Hierarquia Massiva.
4
4
 
5
- ## 1. Filosofia Visual: "Content-First"
5
+ ## 1. Filosofia Visual: Zen
6
6
 
7
- A interface deve recuar para deixar o conteúdo brilhar. A estética é utilitária, limpa e focada na densidade de informação sem sacrificar a legibilidade.
7
+ A interface é **invisível**. Ela recua para deixar o conteúdo brilhar. A estética é utilitária, limpa e focada — cada pixel serve ao dado.
8
8
 
9
- - **Minimalismo:** Remover ornamentos desnecessários (sombras pesadas, gradientes complexos).
10
- - **Estrutura:** O design depende de alinhamento preciso e espaço em branco (whitespace), não de caixas coloridas.
9
+ - **Content over Chrome:** Se um elemento não ajuda na leitura do dado, ele é removido.
10
+ - **Estrutura:** O design depende de alinhamento preciso e espaço em branco, não de caixas coloridas.
11
+ - **Restrição:** O Zen não é sobre o que você coloca, é sobre o que você decide não colocar.
11
12
 
12
- ## 2. Tipografia
13
+ ---
13
14
 
14
- A tipografia é a principal ferramenta de estrutura da interface.
15
+ ## 2. Contextos: Stage vs Dense
16
+
17
+ ### 🎭 Zen Stage
18
+
19
+ Para **landing pages, dashboards de métricas, onboarding, apresentações**.
20
+
21
+ Números e títulos são declarações de impacto. Inputs são discretos. O layout respira.
22
+
23
+ ### 📊 Zen Dense
24
+
25
+ Para **admin panels, tabelas CRUD, formulários, configurações**.
26
+
27
+ Alta densidade de dados. Compactação. Eficiência na escaneabilidade.
28
+
29
+ Ambos compartilham a mesma alma — monocromia, zero ornamentos, Content over Chrome. A diferença está no **ritmo** e na **escala**.
30
+
31
+ ---
32
+
33
+ ## 3. Tipografia
34
+
35
+ A tipografia é a **arma principal** do Zen.
15
36
  **Família:** Montserrat (Geométrica e Moderna).
16
37
 
17
- | Função | Peso | Cor | Tracking |
18
- | :--------------------- | :-------------- | :--------------------- | :-------- |
19
- | **Corpo / Dados** | Regular (400) | `#11181C` (Primário) | Normal |
20
- | **Cabeçalhos Tabela** | Medium (500) | `#687076` (Secundário) | Normal |
21
- | **Botões / Ações** | Medium (500) | Variável | `-0.01em` |
22
- | **Títulos (H1, H2)** | Semi-Bold (600) | `#11181C` (Primário) | `-0.02em` |
23
- | **Labels / Metadados** | Regular (400) | `#737373` (Terciário) | Normal |
38
+ ### Stage
39
+
40
+ | Função | Peso | Tamanho | Tracking | Cor |
41
+ | :--------------------- | :--- | :------- | :-------- | :------------------- |
42
+ | **Títulos (H1/H2)** | 900 | 48-72px | `-0.04em` | Primária (`gray.9`) |
43
+ | **Labels** | 800 | 10-12px | `1.5px` | `gray.4` (uppercase) |
44
+ | **Big Type Metrics** | 900 | 64-120px | `-0.04em` | Primária (`gray.9`) |
45
+ | **Sufixos de Métrica** | 700 | 28-36px | Normal | `dimmed` |
24
46
 
25
- **Hierarquia de Cores de Texto:**
47
+ ### Dense
48
+
49
+ | Função | Peso | Cor | Tracking |
50
+ | :--------------------- | :--- | :--------------------- | :-------- |
51
+ | **Corpo / Dados** | 400 | `#11181C` (Primário) | Normal |
52
+ | **Cabeçalhos Tabela** | 500 | `#687076` (Secundário) | Normal |
53
+ | **Botões / Ações** | 500 | Variável | `-0.01em` |
54
+ | **Títulos (H3, H4)** | 600 | `#11181C` (Primário) | `-0.02em` |
55
+ | **Labels / Metadados** | 400 | `#737373` (Terciário) | Normal |
56
+
57
+ ### Hierarquia de Cores de Texto
26
58
 
27
59
  1. **Primária:** `#11181C` ou `#171717` (Quase preto, nunca `#000000`).
28
60
  2. **Secundária:** `#687076` (Cinza neutro para suporte).
29
61
  3. **Terciária:** `#B0B0B0` (Desabilitado ou placeholder).
30
62
 
31
- ## 3. Paleta de Cores & Superfícies
63
+ ---
64
+
65
+ ## 4. Paleta de Cores & Superfícies
32
66
 
33
- Uso estrito de monocromia com cores semânticas apenas quando necessário.
67
+ Uso estrito de monocromia. Cores semânticas apenas quando necessário para feedback.
34
68
 
35
- - **Fundos (Backgrounds):**
36
- - _App Base:_ `#FFFFFF` (Branco Puro).
37
- - _Sidebars / Headers:_ `#FAFAFA` ou `#F9FAFB` (Cinza ultra-sútil).
69
+ - **Fundos:**
70
+ - _App Base:_ `#FFFFFF` (Branco Puro) ou `#F9FAFB` (`gray.0`).
71
+ - _Sidebars / Headers:_ `#FAFAFA` ou `#F9FAFB`.
38
72
  - **Bordas:**
39
- - _Padrão:_ `#E5E7EB` ou `#E2E8F0` (Sutil, 1px).
40
- - **Acentos (Action Colors):**
41
- - _Brand/Primary:_ `#000000` (Preto Sólido) ou Azul Índigo Profundo.
42
- - _Feedback:_ Cores pastéis no fundo, texto saturado.
43
- - _Erro:_ Bg `#FEF2F2` / Text `#991B1B`.
44
- - _Sucesso:_ Bg `#F0FDF4` / Text `#166534`.
73
+ - _Padrão:_ `gray.2` (`#E5E7EB`). Sutil, 1px.
74
+ - **Acentos:**
75
+ - _Brand/Primary:_ `#000000` (Preto Sólido).
76
+ - _Feedback:_ Cores pastéis no fundo, texto saturado.
77
+ - _Erro:_ Bg `#FEF2F2` / Text `#991B1B`.
78
+ - _Sucesso:_ Bg `#F0FDF4` / Text `#166534`.
45
79
 
46
- ## 4. Componentes (UI Kit)
80
+ ---
81
+
82
+ ## 5. Componentes (UI Kit)
47
83
 
48
84
  ### Botões
49
85
 
50
86
  - **Altura:** `32px` (Small/Dense) ou `36px` (Regular).
51
- - **Border-Radius:** `6px` a `8px` (Suave, mas não "pill").
52
- - **Estilos:**
53
- - _Primary:_ Fundo Preto, Texto Branco. Hover suave.
54
- - _Secondary/Ghost:_ Fundo Transparente, Texto Cinza. Hover com bg `#F3F4F6`.
87
+ - **Border-Radius:** `6px` (md). Suave, mas não "pill".
88
+ - **Primary:** Fundo Preto, Texto Branco. Hover suave.
89
+ - **Secondary/Ghost:** Fundo Transparente. Hover com bg `gray.1`.
90
+
91
+ ### Inputs — Dense
92
+
93
+ - **Borda:** `1px solid gray.2`.
94
+ - **Foco:** Borda escurecida (`dark.8`). Nunca glow neon forte.
95
+ - **Altura:** 32px. Compacto.
96
+
97
+ ### Inputs — Stage (Zen)
98
+
99
+ - **Variant:** `unstyled`.
100
+ - **Estilo:** Apenas `border-bottom: 1px solid gray.2`.
101
+ - **Radius:** 0.
102
+ - **Foco:** Borda inferior escurecida.
55
103
 
56
104
  ### Tabelas & Listas
57
105
 
58
106
  - **Estilo:** "Clean Rows".
59
107
  - **Bordas:** Apenas linhas horizontais (`border-bottom`). Sem linhas verticais.
60
- - **Hover:** Linhas destacam com cinza pálido (`#F9FAFB`) ao passar o mouse.
61
- - **Padding:** Compacto (`py-2`, `px-4`) para alta densidade de dados.
108
+ - **Hover:** Cinza pálido (`gray.0`) ao passar o mouse.
109
+ - **Padding:** Compacto (`py="xs"`, `px="md"`) para alta densidade.
62
110
 
63
- ### Inputs
111
+ ### Badges
64
112
 
65
- - **Borda:** `1px solid #E5E5E5`.
66
- - **Foco:** Ring duplo sutil (ex: `ring-2 ring-gray-200`) ou borda escurecida. Nunca glow neon forte.
113
+ - **Variant:** `light` com cores cinzas para sutileza.
114
+ - **Size:** `sm`. **Radius:** `sm`.
115
+ - **Alternativa Zen:** `variant="dot"` para minimizar ornamento.
67
116
 
68
- ## 5. Layout & Espaçamento
117
+ ### Drawers (Zen)
69
118
 
70
- - **Respiro:** Margens generosas ao redor do container principal, mas densidade alta dentro dos componentes de dados.
71
- - **Navegação:** Sidebar fixa para contexto global; Topbar simples para contexto local.
119
+ - **Posição:** Right Drawer para funcionalidades complexas (históricos, configurações).
120
+ - **Propósito:** Manter o centro da tela (o palco) vazio e limpo.
72
121
 
73
- ## 6. Micro-interações
122
+ ---
74
123
 
75
- - **Animações:** Rápidas e invisíveis (150ms - 200ms ease-out).
76
- - **Sombras:** Usadas apenas para elevação (Modais, Dropdowns).
77
- - _Drop Shadow:_ Suave e difusa (`0 4px 20px rgba(0,0,0,0.05)`).
124
+ ## 6. Layout & Espaçamento
125
+
126
+ ### Stage
78
127
 
79
- ## 7. Diretrizes para Geração via LLM (Prompting Helper)
128
+ - **Container:** `size="xl"` centralizado.
129
+ - **Padding vertical:** `py={80}` — o palco precisa respirar.
130
+ - **Header:** Label (Small Caps) + Título (fw 900). Gap 4px entre eles.
80
131
 
81
- > Use estas instruções para garantir que a IA gere resultados fiéis ao design system.
132
+ ### Dense
82
133
 
83
- ### Keywords Essenciais (Contexto)
134
+ - **Respiro:** Margens generosas ao redor do container, densidade alta dentro dos componentes.
135
+ - **Navegação:** Sidebar fixa para contexto global, Topbar para contexto local.
84
136
 
85
- Sempre inclua estas palavras-chave no prompt de geração de UI:
86
- `"Linear-style interface"`, `"Notion-like aesthetic"`, `"High density data"`, `"Clean minimalist SaaS"`, `"Monochrome color palette with subtle borders"`, `"Inter/Montserrat typography"`, `"1px border separation"`.
137
+ ---
87
138
 
88
- ### Regras de Ouro (Constraints)
139
+ ## 7. Micro-interações
89
140
 
90
- 1. **NUNCA** use sombras coloridas ou "glow" efeitos.
91
- 2. **NUNCA** use fundos saturados para containers (apenas branco ou cinza muito claro).
92
- 3. **EVITE** cartões (cards) com sombras pesadas para agrupar conteúdo. Use **linhas e bordas sutis** para separar seções.
93
- 4. **Botões:** Evite botões grandes e chamativos. O botão primário deve ser discreto (preto/branco), e os secundários devem ser quase invisíveis até o hover.
141
+ - **Animações:** Rápidas e invisíveis (150ms - 200ms ease-out).
142
+ - **Sombras:** Apenas para elevação (Modais, Dropdowns).
143
+ - _Drop Shadow:_ Suave e difusa (`0 4px 20px rgba(0,0,0,0.05)`).
94
144
 
95
- ### Estrutura de Prompt Recomendada
145
+ ---
96
146
 
97
- Ao pedir código ou design para uma IA, use este formato:
147
+ ## 8. Diretrizes para Geração via LLM
98
148
 
99
- > "Crie uma interface [Tela/Componente] seguindo uma estética estritamente minimalista (estilo Notion). Use a fonte Montserrat. O layout deve ser denso, focado em dados, sem sobras desnecessárias. Use bordas de 1px (#E5E5E5) para separação em vez de cards flutuantes. Cores: Preto (#11181C) para texto principal, Cinza (#687076) para secundário. Fundo branco puro."
149
+ ### Master Prompt (Zen)
100
150
 
101
- ### Tratamento de Casos Especiais
151
+ > "Crie uma interface com estética Zen-Modern de alto impacto. Princípios: Conteúdo sobre Cromo (foco total na tipografia e dados). Paleta minimalista (Pure White backgrounds, Dark-9/Gray-9 texts). Hierarquia Massiva (Títulos em Bold/900 com letter-spacing -0.04em, Labels em Small Caps/LTS 1.5px). Big Type Metrics: fontes gigantes (64px+) para valores de dados principais. Inputs Minimalistas: estilo unstyled com apenas border-bottom. Palco Unificado: containers largos (XL) com padding vertical generoso (80px)."
152
+
153
+ ### Keywords Essenciais
154
+
155
+ `"Zen-Modern interface"`, `"Content over Chrome"`, `"Big Type Metrics"`, `"High-impact minimalism"`, `"Stage layout"`, `"Monochrome color palette"`, `"Montserrat typography"`, `"1px border separation"`.
102
156
 
103
- - **Empty States:** Devem ser minimalistas. Um ícone de linha fina (stroke 1.5px) em cinza claro, um título em H3 e um botão de ação. Nada de ilustrações 3D coloridas.
104
- - **Modais:** Devem ter um backdrop com blur (`backdrop-blur-sm`) e fundo branco sólido. Sem cabeçalhos coloridos.
105
- - **Dashboards:** Devem privilegiar números grandes (Big Numbers) em monocromia, com rótulos pequenos abaixo. Gráficos devem ser limpos, sem grid lines pesadas.
157
+ ### Regras de Ouro
158
+
159
+ 1. **NUNCA** use sombras coloridas ou efeitos "glow".
160
+ 2. **NUNCA** use fundos saturados para containers.
161
+ 3. **EVITE** cards com sombras pesadas. Use **bordas sutis** para separar.
162
+ 4. **Botões:** Discretos. Primário preto/branco, secundários quase invisíveis até hover.
163
+ 5. **Títulos Stage:** SEMPRE fw 900, ls -0.04em. Nunca abaixo de 800.
164
+ 6. **Métricas:** Se é o dado principal, use Big Type (64px+).
165
+
166
+ ### Tratamento de Casos Especiais
106
167
 
168
+ - **Empty States:** Ícone de linha fina (stroke 1.5px) cinza claro, título H3, botão de ação. Zero ilustrações 3D.
169
+ - **Modais:** Backdrop com blur, fundo branco sólido. Sem cabeçalhos coloridos.
170
+ - **Dashboards:** Big Numbers em monocromia com rótulos Small Caps. Gráficos limpos sem grid lines pesadas.
package/.agent/skills/riligar-design-system/references/master-patterns.md CHANGED
@@ -1,8 +1,181 @@
1
1
  # Master Patterns: Mantine Clean Code
2
2
 
3
3
  O código deve ser limpo. A customização visual vive no **Tema**, não no componente.
4
+ Padrões organizados por contexto: **Stage** (impacto) e **Dense** (admin).
4
5
 
5
- ## 1. Sidebar (Clean)
6
+ ---
7
+
8
+ ## Zen Stage Patterns
9
+
10
+ ### 1. Zen Stage Layout (O Palco)
11
+
12
+ ```jsx
13
+ import { Container, Stack, Text, Title } from '@mantine/core'
14
+
15
+ /**
16
+ * Zen Stage Layout — O Palco Unificado.
17
+ * Header = "Anúncio" (Label leve + Título pesado).
18
+ * Children = "Performance" (centro limpo).
19
+ */
20
+ function ZenLayout({ label, title, children }) {
21
+ return (
22
+ <Container
23
+ size="xl"
24
+ py={80}
25
+ >
26
+ <Stack gap="xl">
27
+ {/* O Anúncio: Label + Título */}
28
+ <Stack gap={4}>
29
+ {/* Label em Small Caps — fw 800, uppercase, ls 1.5px */}
30
+ <Text
31
+ fz={11}
32
+ fw={800}
33
+ c="gray.4"
34
+ tt="uppercase"
35
+ lts="1.5px"
36
+ >
37
+ {label}
38
+ </Text>
39
+ {/* Título Massivo — fw 900, ls -0.04em */}
40
+ <Title
41
+ order={1}
42
+ fz={56}
43
+ fw={900}
44
+ lts="-0.04em"
45
+ lh={1}
46
+ >
47
+ {title}
48
+ </Title>
49
+ </Stack>
50
+
51
+ {/* A Performance: Conteúdo limpo */}
52
+ {children}
53
+ </Stack>
54
+ </Container>
55
+ )
56
+ }
57
+ ```
58
+
59
+ ### 2. Big Type Metric
60
+
61
+ ```jsx
62
+ import { Stack, Text, Title } from '@mantine/core'
63
+
64
+ /**
65
+ * Big Type Metric — Números como declarações de design.
66
+ * O valor é a estrela. O label é sutil.
67
+ */
68
+ function BigMetric({ label, value, suffix }) {
69
+ return (
70
+ <Stack gap={0}>
71
+ {/* Label discreto */}
72
+ <Text
73
+ fz={10}
74
+ fw={800}
75
+ c="gray.4"
76
+ tt="uppercase"
77
+ lts="1.5px"
78
+ >
79
+ {label}
80
+ </Text>
81
+ {/* Valor massivo — 64-120px, fw 900, lh 1 */}
82
+ <Title
83
+ order={2}
84
+ fz={80}
85
+ fw={900}
86
+ lh={1}
87
+ lts="-0.04em"
88
+ >
89
+ {value}
90
+ {suffix && (
91
+ <Text
92
+ component="span"
93
+ fz={32}
94
+ fw={700}
95
+ c="dimmed"
96
+ >
97
+ {suffix}
98
+ </Text>
99
+ )}
100
+ </Title>
101
+ </Stack>
102
+ )
103
+ }
104
+ ```
105
+
106
+ ### 3. Zen Input (Border-Bottom Only)
107
+
108
+ ```jsx
109
+ import { TextInput } from '@mantine/core'
110
+
111
+ /**
112
+ * Zen Input — Minimalismo absoluto.
113
+ * Apenas uma borda inferior. Sem decoração.
114
+ * Use no contexto Stage (landing pages, onboarding).
115
+ */
116
+ function ZenInput(props) {
117
+ return (
118
+ <TextInput
119
+ variant="unstyled"
120
+ styles={{
121
+ input: {
122
+ borderBottom: '1px solid var(--mantine-color-gray-2)',
123
+ borderRadius: 0,
124
+ paddingBottom: 8,
125
+ },
126
+ }}
127
+ {...props}
128
+ />
129
+ )
130
+ }
131
+ ```
132
+
133
+ ### 4. Zen Page Header (O Anúncio)
134
+
135
+ ```jsx
136
+ import { Stack, Text, Title, Group, Button } from '@mantine/core'
137
+
138
+ /**
139
+ * Zen Page Header — O cabeçalho como anúncio.
140
+ * Usado no topo das views, dentro do ZenLayout.
141
+ */
142
+ function ZenHeader({ label, title, action }) {
143
+ return (
144
+ <Group
145
+ justify="space-between"
146
+ align="flex-end"
147
+ >
148
+ <Stack gap={4}>
149
+ <Text
150
+ fz={11}
151
+ fw={800}
152
+ c="gray.4"
153
+ tt="uppercase"
154
+ lts="1.5px"
155
+ >
156
+ {label}
157
+ </Text>
158
+ <Title
159
+ order={2}
160
+ fz={48}
161
+ fw={900}
162
+ lts="-0.04em"
163
+ lh={1}
164
+ >
165
+ {title}
166
+ </Title>
167
+ </Stack>
168
+ {action}
169
+ </Group>
170
+ )
171
+ }
172
+ ```
173
+
174
+ ---
175
+
176
+ ## Zen Dense Patterns
177
+
178
+ ### 5. Sidebar (Clean)
6
179
 
7
180
  ```jsx
8
181
  import { Stack, Box, Text, UnstyledButton, Group } from '@mantine/core'
@@ -10,9 +183,8 @@ import { IconHome, IconSettings } from '@tabler/icons-react'
10
183
 
11
184
  function Sidebar() {
12
185
  return (
13
- // bg="gray.0" -> Layer 0 (Canvas) [Visual-Code Dictionary §2]
14
- // bd="solid gray.2" -> Layer 1 Separation [Visual-Code Dictionary §2]
15
- // p="sm" -> Layout Rhythm (Section) [Visual-Code Dictionary §1]
186
+ // bg="gray.0" -> Layer 0 (Canvas)
187
+ // bd="solid gray.2" -> Layer 1 Separation
16
188
  <Box
17
189
  w={260}
18
190
  h="100vh"
@@ -40,14 +212,13 @@ function NavItem({ icon: Icon, label, active }) {
40
212
  <UnstyledButton
41
213
  data-active={active || undefined}
42
214
  w="100%"
43
- p="xs" // Component Rhythm (8px) [Visual-Code Dictionary §1]
44
- // Radius md (6px) -> Defined in theme, enforced here for clarity
215
+ p="xs"
45
216
  style={{ borderRadius: 'var(--mantine-radius-md)' }}
46
217
  bg={active ? 'white' : 'transparent'}
47
218
  c={active ? 'text' : 'dimmed'}
48
219
  >
49
220
  <Group gap="xs">
50
- {/* Excellence Nuance #1: Stroke 1.5 [Visual-Code Dictionary §4] */}
221
+ {/* stroke 1.5 — padrão Zen */}
51
222
  <Icon
52
223
  size={16}
53
224
  stroke={1.5}
@@ -64,14 +235,12 @@ function NavItem({ icon: Icon, label, active }) {
64
235
  }
65
236
  ```
66
237
 
67
- ## 2. Tabela (Zero Props)
238
+ ### 6. Tabela (Zero Props)
68
239
 
69
240
  ```jsx
70
241
  import { Table, Text, Badge } from '@mantine/core'
71
242
 
72
- // Note a ausência de props de estilo.
73
- // O <Table> já vem com spacing e borders configurados no tema.
74
- // [Visual-Code Dictionary §3: Table Row Anatomy]
243
+ // O <Table> já vem com spacing e borders do tema.
75
244
  function DenseTable({ data }) {
76
245
  return (
77
246
  <Table>
@@ -98,7 +267,7 @@ function DenseTable({ data }) {
98
267
  }
99
268
  ```
100
269
 
101
- ## 3. Cards (Clean)
270
+ ### 7. Cards (Clean)
102
271
 
103
272
  ```jsx
104
273
  import { Paper, Text, Group, Button, Stack, Box } from '@mantine/core'
@@ -106,7 +275,6 @@ import { Paper, Text, Group, Button, Stack, Box } from '@mantine/core'
106
275
  function ContentCard() {
107
276
  return (
108
277
  // <Paper> já vem com border e radius corretos do tema
109
- // [Visual-Code Dictionary §2: Layer 1 Card]
110
278
  <Paper overflow="hidden">
111
279
  <Box
112
280
  p="md"
package/.agent/skills/riligar-design-system/references/visual-references.md CHANGED
@@ -1,71 +1,131 @@
1
- # Dicionário Visual (Visual-Code Dictionary)
1
+ # Dicionário Visual Zen (Visual-Code Dictionary)
2
2
 
3
3
  Este documento traduz "Sensação Visual" em "Regras de Código". Use-o para eliminar a subjetividade.
4
4
 
5
- ## 1. Ritmo & Espaçamento (Layout Rhythms)
5
+ ---
6
+
7
+ ## 1. Tipografia Zen (A Arma Principal)
8
+
9
+ A tipografia é o instrumento primário de impacto. Dois registros:
10
+
11
+ ### Registro Stage (Impacto Teatral)
12
+
13
+ | Função | Peso | Tamanho | Tracking | Extras |
14
+ | :---------------------- | :--- | :------- | :-------- | :---------------------- |
15
+ | **Títulos (H1/H2)** | 900 | 48-72px | `-0.04em` | lh 1 |
16
+ | **Labels / Subtítulos** | 800 | 10-12px | `1.5px` | uppercase, cor `gray.4` |
17
+ | **Big Type Metrics** | 900 | 64-120px | `-0.04em` | lh 1 |
18
+ | **Sufixos de Métrica** | 700 | 28-36px | Normal | cor `dimmed` |
19
+
20
+ ### Registro Dense (Admin/Dashboard)
21
+
22
+ | Função | Peso | Tamanho | Tracking | Extras |
23
+ | :--------------------- | :-------------- | :------ | :-------- | :------------- |
24
+ | **Corpo / Dados** | Regular (400) | 14px | Normal | cor primária |
25
+ | **Cabeçalhos Tabela** | Medium (500) | 12-13px | Normal | cor secundária |
26
+ | **Botões / Ações** | Medium (500) | 13px | `-0.01em` | — |
27
+ | **Títulos (H3/H4)** | Semi-Bold (600) | 16-20px | `-0.02em` | cor primária |
28
+ | **Labels / Metadados** | Regular (400) | 12px | Normal | cor terciária |
29
+
30
+ ---
31
+
32
+ ## 2. Ritmo & Espaçamento (Layout Rhythms)
6
33
 
7
34
  A densidade do RiLiGar é definida matematicamente. Não adivinhe, use estas medidas.
8
35
 
9
- | Nível | Medida | Token Mantine | Onde Usar |
10
- | :------------ | :------ | :------------------- | :------------------------------------------------------------------ |
11
- | **Micro** | `4px` | `gap="xs"` (half) | Espaço entre Ícone e Texto. |
12
- | **Component** | `8px` | `p="xs"`, `gap="xs"` | Padding interno de Botões, Inputs, Table Cells. |
13
- | **Flow** | `12px` | `gap={12}` | Espaço entre elementos de um formulário ou lista vertical de cards. |
14
- | **Section** | `16px` | `p="md"`, `gap="md"` | Padding padrão de Cards, Modais e Sidebars. |
15
- | **Layout** | `24px+` | `p="lg"`, `gap="lg"` | Margens da página, separação de grandes blocos. |
36
+ ### Zen Dense (Componentes Admin)
37
+
38
+ | Nível | Medida | Token Mantine | Onde Usar |
39
+ | :------------ | :------ | :------------------- | :------------------------------------------------------ |
40
+ | **Micro** | `4px` | `gap="xs"` (half) | Espaço entre Ícone e Texto. |
41
+ | **Component** | `8px` | `p="xs"`, `gap="xs"` | Padding interno de Botões, Inputs, Table Cells. |
42
+ | **Flow** | `12px` | `gap={12}` | Espaço entre elementos de formulário ou lista de cards. |
43
+ | **Section** | `16px` | `p="md"`, `gap="md"` | Padding padrão de Cards, Modais e Sidebars. |
44
+ | **Layout** | `24px+` | `p="lg"`, `gap="lg"` | Margens da página, separação de grandes blocos. |
16
45
 
17
- ## 2. Regra das 3 Camadas (Depth Stacking)
46
+ ### Zen Stage (Palco)
18
47
 
19
- Para evitar o visual "chapado", use esta hierarquia estrita de cores e bordas.
48
+ | Nível | Medida | Token Mantine | Onde Usar |
49
+ | :-------------- | :----- | :------------ | :----------------------------------------------- |
50
+ | **Label-Title** | `4px` | `gap={4}` | Entre Label (Small Caps) e Título pesado. |
51
+ | **Section** | `xl` | `gap="xl"` | Entre header e conteúdo do palco. |
52
+ | **Stage** | `80px` | `py={80}` | Padding vertical do palco (Container principal). |
53
+ | **Container** | `xl` | `size="xl"` | Largura do palco central. |
54
+
55
+ ---
56
+
57
+ ## 3. Regra das 3 Camadas (Depth Stacking)
58
+
59
+ Para evitar o visual "chapado", use esta hierarquia estrita.
20
60
 
21
61
  ### Layer 0: O Canvas (Fundo)
22
62
 
23
- - **Cor:** `bg="gray.0"` (`#F9FAFB` Light / Dark Auto-adapt).
24
- - **Uso:** O fundo de toda a aplicação. Nunca use branco puro (`#FFF`) no fundo da página.
63
+ - **Cor:** `bg="gray.0"` (`#F9FAFB` Light / Dark Auto-adapt).
64
+ - **Uso:** O fundo de toda a aplicação. Nunca use branco puro (`#FFF`) no fundo da página.
25
65
 
26
66
  ### Layer 1: O Conteúdo (Cards/Surface)
27
67
 
28
- - **Cor:** `bg="white"` (Light) / `bg="gray.9"` (Dark).
29
- - **Borda:** `bd="1px solid gray.2"` (Essencial para recorte).
30
- - **Sombra:** `shadow="none"` (A borda faz o trabalho de separação).
31
- - **Radius:** `radius="lg"` (8px).
68
+ - **Cor:** `bg="white"` (Light) / `bg="gray.9"` (Dark).
69
+ - **Borda:** `bd="1px solid gray.2"` (Essencial para recorte).
70
+ - **Sombra:** `shadow="none"` (A borda faz o trabalho de separação).
71
+ - **Radius:** `radius="lg"` (8px).
32
72
 
33
73
  ### Layer 2: O Feedback (Hover/Overlay)
34
74
 
35
- - **Hover:** `bg="gray.0"` (Interação sutil).
36
- - **Active:** `bg="gray.1"` (Seleção).
37
- - **Overlay:** `shadow="lg"` + `bd="gray.2"` (Apenas para Popovers e Modais).
75
+ - **Hover:** `bg="gray.0"` (Interação sutil).
76
+ - **Active:** `bg="gray.1"` (Seleção).
77
+ - **Overlay:** `shadow="lg"` + `bd="gray.2"` (Apenas para Popovers e Modais).
78
+
79
+ ---
80
+
81
+ ## 4. Anatomia Atômica (Component Specifications)
82
+
83
+ ### Sidebar Item (Linear Style) — Dense
84
+
85
+ - **Altura:** `32px` ou `28px` (Ultra-denso).
86
+ - **Padding:** `px="xs"` (8px horizontal).
87
+ - **Radius:** `radius="md"` (6px).
88
+ - **Fonte:** `size="sm"` (13px), `fw={500}`.
89
+ - **Cor:** Default `c="dimmed"`, Active `c="text"`, Hover `bg="gray.1"`.
90
+
91
+ ### Table Row (Notion Style) — Dense
38
92
 
39
- ## 3. Anatomia Atômica (Component Specifications)
93
+ - **Altura:** `36px` (Conteúdo + Padding).
94
+ - **Borda:** `borderBottom: '1px solid gray.1'` (Nota: gray.1, mais sutil que a borda do card).
95
+ - **Header:** `c="dimmed"`, `fw={600}`, `fz="xs"` (12px), `textTransform="uppercase"`.
96
+ - **Cell:** `fz="sm"` (13px ou 14px).
40
97
 
41
- Se você for criar um destes componentes, ele **DEVE** seguir estas medidas exatas.
98
+ ### Page Header — Dense
42
99
 
43
- ### Sidebar Item (Linear Style)
100
+ - **Altura:** `48px` ou `56px`.
101
+ - **Fundo:** `bg="gray.0"` (Transparente/Blur opcional).
102
+ - **Borda:** `borderBottom: '1px solid gray.2'`.
103
+ - **Conteúdo:** Título `h4` (`fw={600}`), Ações à direita.
44
104
 
45
- - **Altura:** `32px` ou `28px` (Ultra-denso).
46
- - **Padding:** `px="xs"` (8px horizontal).
47
- - **Radius:** `radius="md"` (6px).
48
- - **Fonte:** `size="sm"` (13px), `fw={500}`.
49
- - **Cor:** Default `c="dimmed"`, Active `c="text"`, Hover `bg="gray.1"`.
105
+ ### Zen Header — Stage
50
106
 
51
- ### Table Row (Notion Style)
107
+ - **Label:** fz 11px, fw 800, uppercase, lts "1.5px", c "gray.4".
108
+ - **Título:** fz 48-72px, fw 900, lts "-0.04em", lh 1.
109
+ - **Gap:** 4px entre label e título.
110
+ - **Layout:** Group com ações alinhadas ao flex-end à direita.
52
111
 
53
- - **Altura:** `36px` (Conteúdo + Padding).
54
- - **Borda:** `borderBottom: '1px solid gray.1'` (Nota: gray.1, mais sutil que a borda do card).
55
- - **Header:** `c="dimmed"`, `fw={600}`, `fz="xs"` (12px), `textTransform="uppercase"`.
56
- - **Cell:** `fz="sm"` (13px ou 14px).
112
+ ### Zen Input — Stage
57
113
 
58
- ### Page Header
114
+ - **Variant:** `unstyled`.
115
+ - **Estilo:** Apenas `border-bottom: 1px solid gray.2`.
116
+ - **Radius:** 0.
117
+ - **Padding:** `pb={8}`.
59
118
 
60
- - **Altura:** `48px` ou `56px`.
61
- - **Fundo:** `bg="gray.0"` (Transparente/Blur opcional).
62
- - **Borda:** `borderBottom: '1px solid gray.2'`.
63
- - **Conteúdo:** Título `h4` (`fw={600}`), Ações à direita.
119
+ ---
64
120
 
65
- ## 4. Nuances de "Excellence"
121
+ ## 5. Nuances de "Excellence"
66
122
 
67
123
  1. **Ícones:** Sempre use `stroke={1.5}`. Ícones mais grossos (2px) parecem "infantis" neste design system. Tamanho padrão `16px` ou `18px`.
68
- 2. **Tracking:**
69
- - Títulos (H1-H3): `letter-spacing: -0.02em` (Aperta o título, visual premium).
70
- - Botões/Labels: `letter-spacing: -0.005em` (Leve toque de densidade).
71
- 3. **Bordas:** Nunca use `#000` ou `#DDD`. Use sempre o token `gray.2` do tema, que é calibrado para ser visível mas não intrusivo.
124
+ 2. **Tracking Stage:**
125
+ - Títulos: `letter-spacing: -0.04em` (Aperta o título, visual premium).
126
+ - Labels: `letter-spacing: 1.5px` (Small Caps com respiro).
127
+ 3. **Tracking Dense:**
128
+ - Títulos (H3-H4): `letter-spacing: -0.02em`.
129
+ - Botões/Labels: `letter-spacing: -0.005em`.
130
+ 4. **Bordas:** Nunca use `#000` ou `#DDD`. Use sempre o token `gray.2` do tema.
131
+ 5. **Métricas:** Transforme números em Big Type. Se um número é o dado mais importante da tela, ele merece 64px+ de tamanho.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riligar/agents-kit",
3
- "version": "1.20.1",
3
+ "version": "1.21.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },