primocode 7.18.0 → 8.0.0

package/studio/ferramentas/prosa.md

@@ -0,0 +1,86 @@
+# PROSA — documentos
+
+No lugar de Word, Google Docs e Notion. Modelo `documento`, página A4.
+
+## Estrutura de um documento que se lê até o fim
+
+1. `capa` — chapéu, título, apoio, autor e data
+2. `sumario` — só se passar de 4 seções
+3. `secao` a cada bloco de raciocínio, com `paragrafo` de 3 a 5 linhas
+4. `destaque` para o que não pode passar batido
+5. `tabela` quando comparar, `lista` quando enumerar, `citacao` quando emprestar autoridade
+6. fecho com o próximo passo concreto
+
+## Exemplo
+
+```json
+{
+  "ferramenta": "prosa",
+  "titulo": "Proposta — modernização do parque de servidores",
+  "doc": {
+    "tema": "papel",
+    "capa": {
+      "chapeu": "Proposta técnica",
+      "titulo": "Modernização do parque de servidores",
+      "apoio": "Diagnóstico, plano em três ondas e estimativa de custo.",
+      "autor": "Time de Infraestrutura",
+      "data": "Agosto de 2026"
+    },
+    "blocos": [
+      { "tipo": "sumario", "texto": "Sumário" },
+
+      { "tipo": "secao", "texto": "Onde estamos" },
+      { "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." },
+      { "tipo": "destaque", "titulo": "Risco imediato",
+        "texto": "Três servidores de banco não recebem correção de segurança desde março." },
+
+      { "tipo": "secao", "texto": "O que propomos" },
+      { "tipo": "numerada", "itens": [
+        "Onda 1 — trocar os 11 equipamentos fora de suporte",
+        "Onda 2 — consolidar cargas em 6 máquinas novas",
+        "Onda 3 — mover o que for elástico para nuvem"
+      ]},
+      { "tipo": "tabela", "linhas": [
+        ["Onda", "Prazo", "Investimento"],
+        ["1", "60 dias", "R$ 420 mil"],
+        ["2", "120 dias", "R$ 310 mil"],
+        ["3", "180 dias", "custo variável"]
+      ]},
+
+      { "tipo": "secao", "texto": "Próximo passo" },
+      { "tipo": "paragrafo", "texto": "Aprovar a Onda 1 até o fim do mês para caber na janela de manutenção de outubro." }
+    ]
+  }
+}
+```
+
+## Blocos
+
+| tipo | campos | vira |
+|---|---|---|
+| `titulo` | `texto` | H1 |
+| `chapeu` | `texto` | sobretítulo colorido |
+| `apoio` | `texto` | linha de apoio, cinza |
+| `secao` | `texto` | H2 |
+| `subsecao` | `texto` | H3 |
+| `paragrafo` | `texto` | parágrafo |
+| `lista` / `numerada` | `itens[]` | lista |
+| `citacao` | `texto`, `autor` | citação com barra |
+| `codigo` | `texto` | bloco monoespaçado |
+| `tabela` | `linhas[][]` | primeira linha é cabeçalho |
+| `imagem` | `src`, `legenda` | figura |
+| `destaque` | `titulo`, `texto` | caixa de atenção |
+| `sumario` | `texto` | índice das seções, automático |
+| `divisor` | — | linha |
+| `quebra` | — | quebra de página no PDF |
+
+No texto: `**negrito**`, `*itálico*`, `` `código` ``, `[link](url)`.
+
+## Temas
+
+`papel` para leitura longa (serifado, bege) · `claro` para corporativo ·
+`meia-noite` para leitura em tela.
+
+## Export
+
+`GET /api/arquivos/<id>/export` devolve **Markdown**. Para PDF, abra `/v/<id>` e `P`.

package/studio/ferramentas/tela.md

@@ -0,0 +1,72 @@
+# TELA — design gráfico
+
+No lugar de Photoshop, Figma e Canva. Modelo `cena` com `layout: "livre"`:
+você controla cada `x`, `y`, `l`, `a` em pixels da tela.
+
+## Tamanhos
+
+| Peça | largura × altura |
+|---|---|
+| Post quadrado | 1080 × 1080 |
+| Story / Reels capa | 1080 × 1920 |
+| Capa e thumbnail | 1920 × 1080 |
+| Banner de topo | 1600 × 600 |
+| Apresentação de perfil | 1200 × 630 |
+
+## Como compor sem ficar feio
+
+- **Margem viva:** nada encosta na borda. Reserve ~8% de cada lado (86 px em 1080).
+- **Conte as linhas antes de definir `a`.** Em texto, `a` é altura mínima — o bloco
+  cresce se precisar, então deixe folga abaixo dele. Uma linha ocupa ~1,15 × `tamanho`.
+- **Um foco só.** Um elemento manda; o resto apoia.
+- **Escala com folga:** título 110–160 px em 1080, apoio 34–44 px. Meio-termo some.
+- **Camadas de fundo primeiro:** forma grande → foto → texto por cima. `z` resolve empates.
+- **Cor:** duas do tema, uma de destaque. `preenchimento` com `opacidade: 0.15` cria
+  fundo sem brigar com o texto.
+
+## Exemplo — post 1080×1080
+
+```json
+{
+  "ferramenta": "tela",
+  "titulo": "Post — lançamento",
+  "doc": {
+    "tema": "brasa",
+    "largura": 1080, "altura": 1080,
+    "cenas": [{
+      "layout": "livre",
+      "fundo": { "tipo": "gradiente", "de": "#1b0a04", "para": "#0a0506", "angulo": 155 },
+      "elementos": [
+        { "tipo": "forma", "forma": "circulo", "x": 640, "y": -140, "l": 620, "a": 620,
+          "preenchimento": "#ff5a36", "opacidade": 0.16 },
+        { "tipo": "icone", "nome": "foguete", "x": 86, "y": 140, "tamanho": 88, "cor": "#ffb03a" },
+        { "tipo": "texto", "x": 86, "y": 292, "l": 900, "a": 44,
+          "texto": "LANÇAMENTO", "tamanho": 30, "peso": 700, "espacamento": 0.2, "cor": "#ffb03a" },
+        { "tipo": "texto", "x": 86, "y": 372, "l": 908, "a": 460,
+          "texto": "A primeira versão\nestá no ar", "tamanho": 118, "peso": 750 },
+        { "tipo": "forma", "forma": "linha", "x": 86, "y": 880, "l": 180, "a": 8,
+          "preenchimento": "#ff5a36", "espessura": 8 },
+        { "tipo": "texto", "x": 86, "y": 926, "l": 800, "a": 60,
+          "texto": "primocode.studio", "tamanho": 36, "cor": "#bf9c8a" }
+      ]
+    }]
+  }
+}
+```
+
+## Ícones disponíveis
+
+`raio` `alvo` `foguete` `escudo` `relogio` `usuario` `pessoas` `coracao` `estrela`
+`nuvem` `engrenagem` `lampada` `cadeado` `casa` `email` `telefone` `camera` `fogo`
+`globo` `chave` `presente` `sino` `mapa` `dinheiro` `crescimento` `grafico` `balao`
+`pasta` `livro` `play2` `check` `imagem` `codigo` `tabela` `lista`
+
+## Várias artes no mesmo arquivo
+
+Cada item de `cenas` é uma prancha independente. Um carrossel de Instagram é um
+arquivo com 5 cenas de 1080×1080 — o modo Abrir passa uma a uma com `→`.
+
+## Export
+
+`GET /api/arquivos/<id>/export` devolve um `.html` autônomo. Para PNG, abra em
+`/v/<id>` e use a captura de tela do sistema, ou `P` para gerar PDF em escala real.

package/studio/ferramentas/traco.md

@@ -0,0 +1,79 @@
+# TRAÇO — diagramas
+
+No lugar de Miro, Whimsical e Lucidchart. Modelo `cena` com `layout: "livre"`:
+nós posicionados e conectores que se ligam sozinhos pela borda mais curta.
+
+## Regra que faz o diagrama ficar legível
+
+- **Grade invisível de 60 px.** Use `x` e `y` múltiplos de 60. Alinhamento é o que
+  separa diagrama de rabisco.
+- **Fluxo lê da esquerda para a direita** (processo) ou **de cima para baixo**
+  (hierarquia). Não misture os dois no mesmo diagrama.
+- **Nó padrão:** `l: 340, a: 150`. Mantenha o mesmo tamanho para nós do mesmo nível.
+- **Espaço entre colunas:** 200 px. Entre linhas: 90 px.
+- **`destaque: true`** em no máximo dois nós — o começo e o resultado.
+
+## Exemplo — fluxo de aprovação
+
+```json
+{
+  "ferramenta": "traco",
+  "titulo": "Fluxo de aprovação de compras",
+  "doc": {
+    "tema": "meia-noite",
+    "largura": 1920, "altura": 1080,
+    "cenas": [{
+      "layout": "livre",
+      "fundo": "pontos",
+      "elementos": [
+        { "id": "ped", "tipo": "no", "texto": "Pedido aberto",  "x": 120,  "y": 480, "l": 320, "a": 140, "destaque": true },
+        { "id": "val", "tipo": "no", "texto": "Validação\nfiscal",  "x": 620,  "y": 480, "l": 320, "a": 140 },
+        { "id": "ger", "tipo": "no", "texto": "Aprovação\ngerência", "x": 1120, "y": 300, "l": 320, "a": 140 },
+        { "id": "dir", "tipo": "no", "texto": "Aprovação\ndiretoria", "x": 1120, "y": 660, "l": 320, "a": 140 },
+        { "id": "ok",  "tipo": "no", "texto": "Compra\nemitida", "x": 1560, "y": 480, "l": 280, "a": 140, "destaque": true },
+
+        { "tipo": "conector", "de": "ped", "para": "val" },
+        { "tipo": "conector", "de": "val", "para": "ger", "texto": "até R$ 20 mil" },
+        { "tipo": "conector", "de": "val", "para": "dir", "texto": "acima de R$ 20 mil" },
+        { "tipo": "conector", "de": "ger", "para": "ok" },
+        { "tipo": "conector", "de": "dir", "para": "ok" },
+
+        { "tipo": "texto", "x": 120, "y": 120, "l": 900, "a": 120,
+          "texto": "Compras · fluxo vigente", "papel": "chapeu" }
+      ]
+    }]
+  }
+}
+```
+
+## Nós e conectores
+
+```jsonc
+{ "id": "a", "tipo": "no", "texto": "Etapa",
+  "x": 300, "y": 460, "l": 340, "a": 150,
+  "destaque": false,        // pinta com a cor do tema
+  "formato": "circulo",     // opcional
+  "cor": "#1f8fe0" }        // opcional, sobrepõe o tema
+
+{ "tipo": "conector", "de": "a", "para": "b",
+  "estilo": "curva",        // curva | reta | cotovelo
+  "texto": "rótulo da seta",
+  "tracejado": false,
+  "seta": true }
+```
+
+O conector calcula sozinho de qual lado sai e entra. Se `de` ou `para` apontar para
+um `id` que não existe, ele simplesmente não é desenhado — sem quebrar o resto.
+
+## Também serve para
+
+- **Mapa mental:** nó central `destaque` e ramos em volta, `estilo: "curva"`.
+- **Arquitetura:** uma `forma` grande atrás como área ("Nuvem", "On-premise") e os
+  nós por cima; use `opacidade: 0.06` na área.
+- **Organograma:** fluxo de cima para baixo, `estilo: "cotovelo"`.
+- **Jornada:** uma linha só, `estilo: "reta"`, com `icone` acima de cada etapa.
+
+## Vários diagramas
+
+Cada item de `cenas` é uma prancha. Um arquivo pode ter o "como é hoje" e o
+"como fica depois" — o modo Abrir alterna com `→`.