primocode 8.42.2 → 9.1.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.
- package/README.md +41 -37
- package/bin/primocode.js +598 -360
- package/lib/acervo.js +8 -1
- package/lib/act.js +205 -114
- package/lib/api.js +35 -4
- package/lib/boas-vindas.js +42 -195
- package/lib/catalogo.js +100 -61
- package/lib/config.js +1 -1
- package/lib/conta.js +3 -24
- package/lib/diff.js +161 -0
- package/lib/diretor.js +37 -47
- package/lib/entrada.js +576 -0
- package/lib/especialistas.js +2 -2
- package/lib/estudio/assets.js +343 -0
- package/lib/estudio/identidade.js +560 -0
- package/lib/estudio/index.js +565 -0
- package/lib/estudio/plano.js +327 -0
- package/lib/estudio/projeto.js +246 -0
- package/lib/estudio/remotion.js +644 -0
- package/lib/estudio/slides.js +190 -0
- package/lib/estudio/video.js +296 -0
- package/lib/fala.js +49 -6
- package/lib/marca.js +4 -1
- package/lib/markdown.js +376 -0
- package/lib/marketplace.js +189 -0
- package/lib/pasta.js +15 -4
- package/lib/permissao.js +137 -0
- package/lib/registro.js +229 -0
- package/lib/skills.js +329 -0
- package/lib/tools.js +106 -187
- package/lib/ui.js +7 -3
- package/lib/voz.js +239 -0
- package/package.json +12 -3
- package/skills/acessibilidade/SKILL.md +28 -0
- package/skills/api-que-nao-quebra/SKILL.md +27 -0
- package/skills/depurar-de-verdade/SKILL.md +29 -0
- package/skills/editar-meu-video/SKILL.md +59 -0
- package/skills/escrever-em-portugues/SKILL.md +28 -0
- package/skills/git-limpo/SKILL.md +28 -0
- package/skills/motion-de-primeira/SKILL.md +62 -0
- package/skills/pagina-que-converte/SKILL.md +28 -0
- package/skills/performance-web/SKILL.md +28 -0
- package/skills/revisao-antes-de-entregar/SKILL.md +27 -0
- package/skills/slides-que-prendem/SKILL.md +40 -0
- package/studio/edge.py +16 -66
- package/studio/narrar.py +274 -0
- package/studio/pessoa.py +199 -0
- package/voz/primo_voz/__init__.py +0 -0
- package/voz/primo_voz/__main__.py +383 -0
- package/voz/primo_voz/escuta.py +235 -0
- package/voz/primo_voz/orbe.py +216 -0
- package/lib/audio-livre.js +0 -177
- package/lib/chaves.js +0 -149
- package/lib/claude-engine.js +0 -631
- package/lib/codex-engine.js +0 -208
- package/lib/remotion.js +0 -663
- package/lib/studio.js +0 -960
- package/studio/PRIMOCODE.md +0 -58
- package/studio/README.md +0 -154
- package/studio/__pycache__/edge.cpython-311.pyc +0 -0
- package/studio/__pycache__/elevenlabs.cpython-311.pyc +0 -0
- package/studio/__pycache__/voz.cpython-311.pyc +0 -0
- package/studio/arquivos/corte-teste-de-camera-fb823.json +0 -57
- package/studio/ferramentas/00-protocolo.md +0 -125
- package/studio/ferramentas/01-modelos.md +0 -270
- package/studio/ferramentas/README.md +0 -32
- package/studio/ferramentas/corte.md +0 -919
- package/studio/ferramentas/grade.md +0 -92
- package/studio/ferramentas/prisma.md +0 -107
- package/studio/ferramentas/prosa.md +0 -86
- package/studio/ferramentas/tela.md +0 -93
- package/studio/ferramentas/traco.md +0 -79
- package/studio/server.py +0 -2254
- package/studio/studio.log +0 -57
- package/studio/voz.py +0 -388
- package/studio/web/analise.html +0 -52
- package/studio/web/core.css +0 -1167
- package/studio/web/fontes/bebas.woff2 +0 -0
- package/studio/web/fontes/grotesk-700.woff2 +0 -0
- package/studio/web/fontes/inter-400.woff2 +0 -0
- package/studio/web/fontes/inter-700.woff2 +0 -0
- package/studio/web/fontes/jetbrains-400.woff2 +0 -0
- package/studio/web/fontes/playfair-700.woff2 +0 -0
- package/studio/web/fontes.css +0 -23
- package/studio/web/home.html +0 -217
- package/studio/web/js/analise.js +0 -510
- package/studio/web/js/audio.js +0 -607
- package/studio/web/js/editor.js +0 -1802
- package/studio/web/js/exportar.js +0 -222
- package/studio/web/js/ferramentas.js +0 -108
- package/studio/web/js/icones.js +0 -120
- package/studio/web/js/midia.js +0 -157
- package/studio/web/js/narracao.js +0 -325
- package/studio/web/js/player.js +0 -903
- package/studio/web/js/render-grade.js +0 -243
- package/studio/web/js/render-prosa.js +0 -104
- package/studio/web/js/render.js +0 -1852
- package/studio/web/js/sfx.js +0 -233
- package/studio/web/js/video.js +0 -464
- package/studio/web/js/voz-neural.js +0 -152
- package/studio/web/render.css +0 -1352
- package/studio/web/tf.html +0 -15
- package/studio/web/tool.html +0 -78
- package/studio/web/view.html +0 -27
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
# GRADE — planilhas
|
|
2
|
-
|
|
3
|
-
No lugar de Excel e Google Sheets. Modelo `planilha`, com fórmulas de verdade
|
|
4
|
-
resolvidas no navegador.
|
|
5
|
-
|
|
6
|
-
## Exemplo
|
|
7
|
-
|
|
8
|
-
```json
|
|
9
|
-
{
|
|
10
|
-
"ferramenta": "grade",
|
|
11
|
-
"titulo": "Orçamento de infraestrutura 2026",
|
|
12
|
-
"doc": {
|
|
13
|
-
"tema": "claro",
|
|
14
|
-
"abas": [
|
|
15
|
-
{
|
|
16
|
-
"nome": "Custos",
|
|
17
|
-
"colunas": ["Item", "Qtd", "Unitário", "Total"],
|
|
18
|
-
"linhas": [
|
|
19
|
-
["Servidor de aplicação", 6, 18400, "=B1*C1"],
|
|
20
|
-
["Servidor de banco", 3, 26800, "=B2*C2"],
|
|
21
|
-
["Licenças anuais", 12, 4200, "=B3*C3"],
|
|
22
|
-
["Rede e cabeamento", 1, 38000, "=B4*C4"],
|
|
23
|
-
["Total", "", "", "=SOMA(D1:D4)"]
|
|
24
|
-
],
|
|
25
|
-
"formatos": { "Qtd": "inteiro", "Unitário": "moeda", "Total": "moeda" },
|
|
26
|
-
"regras": [{ "coluna": "Total", "acima": 100000 }],
|
|
27
|
-
"grafico": { "tipo": "barras", "rotulo": "Item", "valor": "Total" }
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"nome": "Projeção",
|
|
31
|
-
"colunas": ["Mês", "Receita", "Custo", "Margem", "Margem %"],
|
|
32
|
-
"linhas": [
|
|
33
|
-
["Jan", 320000, 214000, "=B1-C1", "=ARRED(D1/B1*100)"],
|
|
34
|
-
["Fev", 348000, 219000, "=B2-C2", "=ARRED(D2/B2*100)"],
|
|
35
|
-
["Mar", 391000, 226000, "=B3-C3", "=ARRED(D3/B3*100)"],
|
|
36
|
-
["Média", "=MEDIA(B1:B3)", "=MEDIA(C1:C3)", "=MEDIA(D1:D3)", ""]
|
|
37
|
-
],
|
|
38
|
-
"formatos": { "Receita": "moeda", "Custo": "moeda", "Margem": "moeda", "Margem %": "percentual" },
|
|
39
|
-
"grafico": { "tipo": "linha", "rotulo": "Mês", "valor": "Margem" }
|
|
40
|
-
}
|
|
41
|
-
]
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## Fórmulas
|
|
47
|
-
|
|
48
|
-
Escreva na célula, começando com `=`.
|
|
49
|
-
|
|
50
|
-
| Função | Exemplo |
|
|
51
|
-
|---|---|
|
|
52
|
-
| `SOMA` | `=SOMA(D1:D9)` |
|
|
53
|
-
| `MEDIA` | `=MEDIA(B1:B12)` |
|
|
54
|
-
| `MIN` / `MAX` | `=MAX(C1:C20)` |
|
|
55
|
-
| `CONT` | `=CONT(A1:A50)` |
|
|
56
|
-
| `ARRED` | `=ARRED(D1/B1*100)` |
|
|
57
|
-
| aritmética | `=B2*1.2` · `=(B3-C3)/B3` |
|
|
58
|
-
|
|
59
|
-
- Colunas são **A, B, C…** na ordem de `colunas`; linhas começam em **1** na
|
|
60
|
-
primeira entrada de `linhas` (o cabeçalho **não** conta como linha).
|
|
61
|
-
- Argumentos de função separados por `;` — `=SOMA(A1:A3;B5)`.
|
|
62
|
-
- Referência circular devolve `#ERRO` em vez de travar.
|
|
63
|
-
|
|
64
|
-
## Formatação
|
|
65
|
-
|
|
66
|
-
```json
|
|
67
|
-
"formatos": { "Receita": "moeda", "Margem %": "percentual", "Qtd": "inteiro" }
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
`texto` · `inteiro` · `decimal` · `moeda` (R$, pt-BR) · `percentual`.
|
|
71
|
-
|
|
72
|
-
Cores condicionais:
|
|
73
|
-
|
|
74
|
-
```json
|
|
75
|
-
"regras": [ { "coluna": "Total", "acima": 100000 },
|
|
76
|
-
{ "coluna": "Margem %", "abaixo": 20 } ]
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
`acima` pinta de verde, `abaixo` de vermelho.
|
|
80
|
-
|
|
81
|
-
## Gráfico da aba
|
|
82
|
-
|
|
83
|
-
```json
|
|
84
|
-
"grafico": { "tipo": "barras", "rotulo": "Item", "valor": "Total" }
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
`barras` · `linha` · `area` · `pizza` · `rosca`. Linhas de fórmula (totais e médias)
|
|
88
|
-
ficam fora do gráfico automaticamente.
|
|
89
|
-
|
|
90
|
-
## Export
|
|
91
|
-
|
|
92
|
-
`GET /api/arquivos/<id>/export` devolve **CSV** com os valores já calculados.
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
# PRISMA — apresentações
|
|
2
|
-
|
|
3
|
-
No lugar de PowerPoint, Keynote e Canva Apresentações. Modelo `cena`, 1920×1080.
|
|
4
|
-
|
|
5
|
-
## Receita de um deck que funciona
|
|
6
|
-
|
|
7
|
-
1. **capa** — chapéu, título, uma linha de apoio
|
|
8
|
-
2. **contexto** — por que isso importa agora (`titulo` + `lista`)
|
|
9
|
-
3. **secao** — divisor antes de cada parte
|
|
10
|
-
4. o miolo: `numeros`, `tabela`, `cartoes`, `grafico`, `citacao`
|
|
11
|
-
5. **o pedido** — o que você quer que a pessoa faça
|
|
12
|
-
6. **fecho** — `capa` de novo, com contato
|
|
13
|
-
|
|
14
|
-
Entre 8 e 14 cenas para 10 minutos. Uma ideia por cena.
|
|
15
|
-
|
|
16
|
-
## Exemplo completo
|
|
17
|
-
|
|
18
|
-
```json
|
|
19
|
-
{
|
|
20
|
-
"ferramenta": "prisma",
|
|
21
|
-
"titulo": "Energia solar no Brasil",
|
|
22
|
-
"doc": {
|
|
23
|
-
"tema": "meia-noite",
|
|
24
|
-
"cenas": [
|
|
25
|
-
{ "layout": "capa", "fundo": "malha", "elementos": [
|
|
26
|
-
{ "tipo": "texto", "papel": "chapeu", "texto": "Panorama 2026" },
|
|
27
|
-
{ "tipo": "texto", "papel": "titulo", "texto": "Energia solar no Brasil" },
|
|
28
|
-
{ "tipo": "texto", "papel": "apoio", "texto": "De nicho a segunda maior fonte da matriz em uma década." }
|
|
29
|
-
]},
|
|
30
|
-
|
|
31
|
-
{ "layout": "secao", "fundo": "brilho", "elementos": [
|
|
32
|
-
{ "tipo": "texto", "papel": "chapeu", "texto": "Parte 01" },
|
|
33
|
-
{ "tipo": "texto", "papel": "titulo", "texto": "O que aconteceu" }
|
|
34
|
-
]},
|
|
35
|
-
|
|
36
|
-
{ "layout": "titulo", "notas": "abrir pelo custo, é o argumento mais forte", "elementos": [
|
|
37
|
-
{ "tipo": "texto", "papel": "titulo", "texto": "Três forças empurraram a curva" },
|
|
38
|
-
{ "tipo": "lista", "revelar": true, "itens": [
|
|
39
|
-
"Queda de 82% no custo do painel desde 2012",
|
|
40
|
-
"Marco legal da geração distribuída em 2022",
|
|
41
|
-
"Leilões que destravaram a geração centralizada"
|
|
42
|
-
]}
|
|
43
|
-
]},
|
|
44
|
-
|
|
45
|
-
{ "layout": "numeros", "elementos": [
|
|
46
|
-
{ "tipo": "texto", "papel": "titulo", "texto": "Onde estamos" },
|
|
47
|
-
{ "tipo": "numeros", "itens": [
|
|
48
|
-
"55 GW | capacidade instalada",
|
|
49
|
-
"2ª | maior fonte da matriz",
|
|
50
|
-
"R$ 200 bi | investidos desde 2012"
|
|
51
|
-
]}
|
|
52
|
-
]},
|
|
53
|
-
|
|
54
|
-
{ "layout": "titulo", "elementos": [
|
|
55
|
-
{ "tipo": "texto", "papel": "titulo", "texto": "O gargalo mudou de lugar" },
|
|
56
|
-
{ "tipo": "tabela", "linhas": [
|
|
57
|
-
["Etapa", "Antes", "Agora"],
|
|
58
|
-
["Custo do módulo", "proibitivo", "resolvido"],
|
|
59
|
-
["Licenciamento", "simples", "lento"],
|
|
60
|
-
["Transmissão", "ociosa", "saturada"]
|
|
61
|
-
]}
|
|
62
|
-
]},
|
|
63
|
-
|
|
64
|
-
{ "layout": "citacao", "tema": "papel", "elementos": [
|
|
65
|
-
{ "tipo": "citacao",
|
|
66
|
-
"texto": "O sol já é barato. O caro agora é o fio que leva a energia até quem consome.",
|
|
67
|
-
"autor": "Relatório do setor, 2026" }
|
|
68
|
-
]},
|
|
69
|
-
|
|
70
|
-
{ "layout": "tres-colunas", "elementos": [
|
|
71
|
-
{ "tipo": "texto", "papel": "titulo", "texto": "O que fazer em 2026" },
|
|
72
|
-
{ "tipo": "cartoes", "itens": [
|
|
73
|
-
"Armazenamento | Baterias para segurar o excedente do meio-dia",
|
|
74
|
-
"Transmissão | Novos leilões de linha no Nordeste",
|
|
75
|
-
"Previsibilidade | Regras estáveis para o investidor longo"
|
|
76
|
-
]}
|
|
77
|
-
]},
|
|
78
|
-
|
|
79
|
-
{ "layout": "capa", "fundo": "malha", "elementos": [
|
|
80
|
-
{ "tipo": "texto", "papel": "titulo", "texto": "Obrigado" },
|
|
81
|
-
{ "tipo": "texto", "papel": "apoio", "texto": "perguntas?" }
|
|
82
|
-
]}
|
|
83
|
-
]
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
## Detalhes que valem
|
|
89
|
-
|
|
90
|
-
- **A cena compõe sozinha.** Com título e conteúdo, o título ancora no alto e o
|
|
91
|
-
conteúdo ocupa o corpo, em escala de projetor; o rodapé com o nome do deck e
|
|
92
|
-
"03 / 08" entra sozinho (menos na capa e nas seções). Não simule isso com
|
|
93
|
-
`livre`.
|
|
94
|
-
- **Varie o layout entre as cenas**: `numeros` para o dado que decide,
|
|
95
|
-
`imagem-direita` com foto ou `dispositivo` quando há produto, `cartoes` em
|
|
96
|
-
`tres-colunas` para as opções, `citacao` para a voz de fora, `tabela` para
|
|
97
|
-
comparar. Cinco cenas `titulo` + `lista` seguidas é o deck que ninguém lembra.
|
|
98
|
-
- **`tema` por cena** sobrepõe o do deck. Uma citação em `papel` no meio de um deck
|
|
99
|
-
`meia-noite` cria respiro — use uma vez, não cinco.
|
|
100
|
-
- **`revelar: true`** na lista faz os itens aparecerem um a um.
|
|
101
|
-
- **`notas`** na cena aparecem só para quem apresenta.
|
|
102
|
-
- **Imagem de capa:** `"fundo": {"imagem":"url","escurecer":0.6}` com `layout: "capa"`.
|
|
103
|
-
- Conteúdo grande demais encolhe sozinho para caber — mas isso é remendo, não plano.
|
|
104
|
-
|
|
105
|
-
## Na hora de apresentar
|
|
106
|
-
|
|
107
|
-
`→` avança · `←` volta · `F` tela cheia · `P` salva em PDF (uma cena por página).
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
# PROSA — documentos
|
|
2
|
-
|
|
3
|
-
No lugar de Word, Google Docs e Notion. Modelo `documento`, página A4.
|
|
4
|
-
|
|
5
|
-
## Estrutura de um documento que se lê até o fim
|
|
6
|
-
|
|
7
|
-
1. `capa` — chapéu, título, apoio, autor e data
|
|
8
|
-
2. `sumario` — só se passar de 4 seções
|
|
9
|
-
3. `secao` a cada bloco de raciocínio, com `paragrafo` de 3 a 5 linhas
|
|
10
|
-
4. `destaque` para o que não pode passar batido
|
|
11
|
-
5. `tabela` quando comparar, `lista` quando enumerar, `citacao` quando emprestar autoridade
|
|
12
|
-
6. fecho com o próximo passo concreto
|
|
13
|
-
|
|
14
|
-
## Exemplo
|
|
15
|
-
|
|
16
|
-
```json
|
|
17
|
-
{
|
|
18
|
-
"ferramenta": "prosa",
|
|
19
|
-
"titulo": "Proposta — modernização do parque de servidores",
|
|
20
|
-
"doc": {
|
|
21
|
-
"tema": "papel",
|
|
22
|
-
"capa": {
|
|
23
|
-
"chapeu": "Proposta técnica",
|
|
24
|
-
"titulo": "Modernização do parque de servidores",
|
|
25
|
-
"apoio": "Diagnóstico, plano em três ondas e estimativa de custo.",
|
|
26
|
-
"autor": "Time de Infraestrutura",
|
|
27
|
-
"data": "Agosto de 2026"
|
|
28
|
-
},
|
|
29
|
-
"blocos": [
|
|
30
|
-
{ "tipo": "sumario", "texto": "Sumário" },
|
|
31
|
-
|
|
32
|
-
{ "tipo": "secao", "texto": "Onde estamos" },
|
|
33
|
-
{ "tipo": "paragrafo", "texto": "O parque atual tem **34 máquinas**, das quais 11 passaram do fim de suporte do fabricante. O custo de manutenção subiu 40% em dois anos enquanto a capacidade útil ficou parada." },
|
|
34
|
-
{ "tipo": "destaque", "titulo": "Risco imediato",
|
|
35
|
-
"texto": "Três servidores de banco não recebem correção de segurança desde março." },
|
|
36
|
-
|
|
37
|
-
{ "tipo": "secao", "texto": "O que propomos" },
|
|
38
|
-
{ "tipo": "numerada", "itens": [
|
|
39
|
-
"Onda 1 — trocar os 11 equipamentos fora de suporte",
|
|
40
|
-
"Onda 2 — consolidar cargas em 6 máquinas novas",
|
|
41
|
-
"Onda 3 — mover o que for elástico para nuvem"
|
|
42
|
-
]},
|
|
43
|
-
{ "tipo": "tabela", "linhas": [
|
|
44
|
-
["Onda", "Prazo", "Investimento"],
|
|
45
|
-
["1", "60 dias", "R$ 420 mil"],
|
|
46
|
-
["2", "120 dias", "R$ 310 mil"],
|
|
47
|
-
["3", "180 dias", "custo variável"]
|
|
48
|
-
]},
|
|
49
|
-
|
|
50
|
-
{ "tipo": "secao", "texto": "Próximo passo" },
|
|
51
|
-
{ "tipo": "paragrafo", "texto": "Aprovar a Onda 1 até o fim do mês para caber na janela de manutenção de outubro." }
|
|
52
|
-
]
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Blocos
|
|
58
|
-
|
|
59
|
-
| tipo | campos | vira |
|
|
60
|
-
|---|---|---|
|
|
61
|
-
| `titulo` | `texto` | H1 |
|
|
62
|
-
| `chapeu` | `texto` | sobretítulo colorido |
|
|
63
|
-
| `apoio` | `texto` | linha de apoio, cinza |
|
|
64
|
-
| `secao` | `texto` | H2 |
|
|
65
|
-
| `subsecao` | `texto` | H3 |
|
|
66
|
-
| `paragrafo` | `texto` | parágrafo |
|
|
67
|
-
| `lista` / `numerada` | `itens[]` | lista |
|
|
68
|
-
| `citacao` | `texto`, `autor` | citação com barra |
|
|
69
|
-
| `codigo` | `texto` | bloco monoespaçado |
|
|
70
|
-
| `tabela` | `linhas[][]` | primeira linha é cabeçalho |
|
|
71
|
-
| `imagem` | `src`, `legenda` | figura |
|
|
72
|
-
| `destaque` | `titulo`, `texto` | caixa de atenção |
|
|
73
|
-
| `sumario` | `texto` | índice das seções, automático |
|
|
74
|
-
| `divisor` | — | linha |
|
|
75
|
-
| `quebra` | — | quebra de página no PDF |
|
|
76
|
-
|
|
77
|
-
No texto: `**negrito**`, `*itálico*`, `` `código` ``, `[link](url)`.
|
|
78
|
-
|
|
79
|
-
## Temas
|
|
80
|
-
|
|
81
|
-
`papel` para leitura longa (serifado, bege) · `claro` para corporativo ·
|
|
82
|
-
`meia-noite` para leitura em tela.
|
|
83
|
-
|
|
84
|
-
## Export
|
|
85
|
-
|
|
86
|
-
`GET /api/arquivos/<id>/export` devolve **Markdown**. Para PDF, abra `/v/<id>` e `P`.
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
# TELA — design gráfico
|
|
2
|
-
|
|
3
|
-
No lugar de Photoshop, Figma e Canva. Modelo `cena` com `layout: "livre"`:
|
|
4
|
-
você controla cada `x`, `y`, `l`, `a` em pixels da tela.
|
|
5
|
-
|
|
6
|
-
## Tamanhos
|
|
7
|
-
|
|
8
|
-
| Peça | largura × altura |
|
|
9
|
-
|---|---|
|
|
10
|
-
| Post quadrado | 1080 × 1080 |
|
|
11
|
-
| Story / Reels capa | 1080 × 1920 |
|
|
12
|
-
| Capa e thumbnail | 1920 × 1080 |
|
|
13
|
-
| Banner de topo | 1600 × 600 |
|
|
14
|
-
| Apresentação de perfil | 1200 × 630 |
|
|
15
|
-
|
|
16
|
-
## Como compor sem ficar feio
|
|
17
|
-
|
|
18
|
-
- **Margem viva:** nada encosta na borda. Reserve ~8% de cada lado (86 px em 1080).
|
|
19
|
-
- **Conte as linhas antes de definir `a`.** Em texto, `a` é altura mínima — o bloco
|
|
20
|
-
cresce se precisar, então deixe folga abaixo dele. Uma linha ocupa ~1,15 × `tamanho`.
|
|
21
|
-
- **Um foco só.** Um elemento manda; o resto apoia.
|
|
22
|
-
- **Escala com folga:** título 110–160 px em 1080, apoio 34–44 px. Meio-termo some.
|
|
23
|
-
- **Camadas de fundo primeiro:** forma grande → foto → texto por cima. `z` resolve empates.
|
|
24
|
-
- **Cor:** duas do tema, uma de destaque. `preenchimento` com `opacidade: 0.15` cria
|
|
25
|
-
fundo sem brigar com o texto.
|
|
26
|
-
|
|
27
|
-
## Exemplo — post 1080×1080
|
|
28
|
-
|
|
29
|
-
```json
|
|
30
|
-
{
|
|
31
|
-
"ferramenta": "tela",
|
|
32
|
-
"titulo": "Post — lançamento",
|
|
33
|
-
"doc": {
|
|
34
|
-
"tema": "brasa",
|
|
35
|
-
"largura": 1080, "altura": 1080,
|
|
36
|
-
"cenas": [{
|
|
37
|
-
"layout": "livre",
|
|
38
|
-
"fundo": { "tipo": "gradiente", "de": "#1b0a04", "para": "#0a0506", "angulo": 155 },
|
|
39
|
-
"elementos": [
|
|
40
|
-
{ "tipo": "forma", "forma": "circulo", "x": 640, "y": -140, "l": 620, "a": 620,
|
|
41
|
-
"preenchimento": "#ff5a36", "opacidade": 0.16 },
|
|
42
|
-
{ "tipo": "icone", "nome": "foguete", "x": 86, "y": 140, "tamanho": 88, "cor": "#ffb03a" },
|
|
43
|
-
{ "tipo": "texto", "x": 86, "y": 292, "l": 900, "a": 44,
|
|
44
|
-
"texto": "LANÇAMENTO", "tamanho": 30, "peso": 700, "espacamento": 0.2, "cor": "#ffb03a" },
|
|
45
|
-
{ "tipo": "texto", "x": 86, "y": 372, "l": 908, "a": 460,
|
|
46
|
-
"texto": "A primeira versão\nestá no ar", "tamanho": 118, "peso": 750 },
|
|
47
|
-
{ "tipo": "forma", "forma": "linha", "x": 86, "y": 880, "l": 180, "a": 8,
|
|
48
|
-
"preenchimento": "#ff5a36", "espessura": 8 },
|
|
49
|
-
{ "tipo": "texto", "x": 86, "y": 926, "l": 800, "a": 60,
|
|
50
|
-
"texto": "primocode.studio", "tamanho": 36, "cor": "#bf9c8a" }
|
|
51
|
-
]
|
|
52
|
-
}]
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Ícones disponíveis
|
|
58
|
-
|
|
59
|
-
`raio` `alvo` `foguete` `escudo` `relogio` `usuario` `pessoas` `coracao` `estrela`
|
|
60
|
-
`nuvem` `engrenagem` `lampada` `cadeado` `casa` `email` `telefone` `camera` `fogo`
|
|
61
|
-
`globo` `chave` `presente` `sino` `mapa` `dinheiro` `crescimento` `grafico` `balao`
|
|
62
|
-
`pasta` `livro` `play2` `check` `imagem` `codigo` `tabela` `lista`
|
|
63
|
-
|
|
64
|
-
## Vidro e ícone-objeto
|
|
65
|
-
|
|
66
|
-
`"material": "vidro"` em qualquer elemento é o liquid glass: painel
|
|
67
|
-
translúcido que **desfoca o que está atrás**, com bisel de luz em cima e
|
|
68
|
-
reflexo diagonal. Precisa de algo atrás (gradiente, forma colorida, foto) para
|
|
69
|
-
aparecer. Na forma, `preenchimento` vira a tinta do vidro.
|
|
70
|
-
|
|
71
|
-
```json
|
|
72
|
-
{ "tipo": "forma", "forma": "retangulo", "material": "vidro", "raio": 32,
|
|
73
|
-
"x": 86, "y": 300, "l": 908, "a": 380, "preenchimento": "#ff5a36" }
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
`"estilo": "app"` no ícone faz o azulejo de aplicativo (gradiente da cor,
|
|
77
|
-
brilho, sombra, traço branco); `"estilo": "vidro"` faz o mesmo azulejo em
|
|
78
|
-
vidro. `fundo` pinta o azulejo. É o ícone de produto para capa e post de
|
|
79
|
-
lançamento:
|
|
80
|
-
|
|
81
|
-
```json
|
|
82
|
-
{ "tipo": "icone", "nome": "foguete", "estilo": "app", "x": 86, "y": 120, "tamanho": 200, "fundo": "#8b5cf6" }
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
## Várias artes no mesmo arquivo
|
|
86
|
-
|
|
87
|
-
Cada item de `cenas` é uma prancha independente. Um carrossel de Instagram é um
|
|
88
|
-
arquivo com 5 cenas de 1080×1080 — o modo Abrir passa uma a uma com `→`.
|
|
89
|
-
|
|
90
|
-
## Export
|
|
91
|
-
|
|
92
|
-
`GET /api/arquivos/<id>/export` devolve um `.html` autônomo. Para PNG, abra em
|
|
93
|
-
`/v/<id>` e use a captura de tela do sistema, ou `P` para gerar PDF em escala real.
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
# TRAÇO — diagramas
|
|
2
|
-
|
|
3
|
-
No lugar de Miro, Whimsical e Lucidchart. Modelo `cena` com `layout: "livre"`:
|
|
4
|
-
nós posicionados e conectores que se ligam sozinhos pela borda mais curta.
|
|
5
|
-
|
|
6
|
-
## Regra que faz o diagrama ficar legível
|
|
7
|
-
|
|
8
|
-
- **Grade invisível de 60 px.** Use `x` e `y` múltiplos de 60. Alinhamento é o que
|
|
9
|
-
separa diagrama de rabisco.
|
|
10
|
-
- **Fluxo lê da esquerda para a direita** (processo) ou **de cima para baixo**
|
|
11
|
-
(hierarquia). Não misture os dois no mesmo diagrama.
|
|
12
|
-
- **Nó padrão:** `l: 340, a: 150`. Mantenha o mesmo tamanho para nós do mesmo nível.
|
|
13
|
-
- **Espaço entre colunas:** 200 px. Entre linhas: 90 px.
|
|
14
|
-
- **`destaque: true`** em no máximo dois nós — o começo e o resultado.
|
|
15
|
-
|
|
16
|
-
## Exemplo — fluxo de aprovação
|
|
17
|
-
|
|
18
|
-
```json
|
|
19
|
-
{
|
|
20
|
-
"ferramenta": "traco",
|
|
21
|
-
"titulo": "Fluxo de aprovação de compras",
|
|
22
|
-
"doc": {
|
|
23
|
-
"tema": "meia-noite",
|
|
24
|
-
"largura": 1920, "altura": 1080,
|
|
25
|
-
"cenas": [{
|
|
26
|
-
"layout": "livre",
|
|
27
|
-
"fundo": "pontos",
|
|
28
|
-
"elementos": [
|
|
29
|
-
{ "id": "ped", "tipo": "no", "texto": "Pedido aberto", "x": 120, "y": 480, "l": 320, "a": 140, "destaque": true },
|
|
30
|
-
{ "id": "val", "tipo": "no", "texto": "Validação\nfiscal", "x": 620, "y": 480, "l": 320, "a": 140 },
|
|
31
|
-
{ "id": "ger", "tipo": "no", "texto": "Aprovação\ngerência", "x": 1120, "y": 300, "l": 320, "a": 140 },
|
|
32
|
-
{ "id": "dir", "tipo": "no", "texto": "Aprovação\ndiretoria", "x": 1120, "y": 660, "l": 320, "a": 140 },
|
|
33
|
-
{ "id": "ok", "tipo": "no", "texto": "Compra\nemitida", "x": 1560, "y": 480, "l": 280, "a": 140, "destaque": true },
|
|
34
|
-
|
|
35
|
-
{ "tipo": "conector", "de": "ped", "para": "val" },
|
|
36
|
-
{ "tipo": "conector", "de": "val", "para": "ger", "texto": "até R$ 20 mil" },
|
|
37
|
-
{ "tipo": "conector", "de": "val", "para": "dir", "texto": "acima de R$ 20 mil" },
|
|
38
|
-
{ "tipo": "conector", "de": "ger", "para": "ok" },
|
|
39
|
-
{ "tipo": "conector", "de": "dir", "para": "ok" },
|
|
40
|
-
|
|
41
|
-
{ "tipo": "texto", "x": 120, "y": 120, "l": 900, "a": 120,
|
|
42
|
-
"texto": "Compras · fluxo vigente", "papel": "chapeu" }
|
|
43
|
-
]
|
|
44
|
-
}]
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## Nós e conectores
|
|
50
|
-
|
|
51
|
-
```jsonc
|
|
52
|
-
{ "id": "a", "tipo": "no", "texto": "Etapa",
|
|
53
|
-
"x": 300, "y": 460, "l": 340, "a": 150,
|
|
54
|
-
"destaque": false, // pinta com a cor do tema
|
|
55
|
-
"formato": "circulo", // opcional
|
|
56
|
-
"cor": "#1f8fe0" } // opcional, sobrepõe o tema
|
|
57
|
-
|
|
58
|
-
{ "tipo": "conector", "de": "a", "para": "b",
|
|
59
|
-
"estilo": "curva", // curva | reta | cotovelo
|
|
60
|
-
"texto": "rótulo da seta",
|
|
61
|
-
"tracejado": false,
|
|
62
|
-
"seta": true }
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
O conector calcula sozinho de qual lado sai e entra. Se `de` ou `para` apontar para
|
|
66
|
-
um `id` que não existe, ele simplesmente não é desenhado — sem quebrar o resto.
|
|
67
|
-
|
|
68
|
-
## Também serve para
|
|
69
|
-
|
|
70
|
-
- **Mapa mental:** nó central `destaque` e ramos em volta, `estilo: "curva"`.
|
|
71
|
-
- **Arquitetura:** uma `forma` grande atrás como área ("Nuvem", "On-premise") e os
|
|
72
|
-
nós por cima; use `opacidade: 0.06` na área.
|
|
73
|
-
- **Organograma:** fluxo de cima para baixo, `estilo: "cotovelo"`.
|
|
74
|
-
- **Jornada:** uma linha só, `estilo: "reta"`, com `icone` acima de cada etapa.
|
|
75
|
-
|
|
76
|
-
## Vários diagramas
|
|
77
|
-
|
|
78
|
-
Cada item de `cenas` é uma prancha. Um arquivo pode ter o "como é hoje" e o
|
|
79
|
-
"como fica depois" — o modo Abrir alterna com `→`.
|