diff --git a/docs/plans/cards-colinha-arte-exata-ui-design.html b/docs/plans/cards-colinha-arte-exata-ui-design.html new file mode 100644 index 00000000..799ea2bb --- /dev/null +++ b/docs/plans/cards-colinha-arte-exata-ui-design.html @@ -0,0 +1,140 @@ + + + + + + + Design S34 · Colinha com a arte exata + + + +
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
+
+
+

Gate visual · S34

+

A colinha é a arte entregue — não uma recriação

+

A imagem 900×1600 permanece inteira e intocada. Sem estadual, ela aparece exatamente como foi entregue. Com JULIO PINHEIRO 13999, somente a segunda linha recebe nome e dígitos. O gate escolhe entre A e B.

+
arte exata · 900×1600saída · 1080×1920desktop 1280 + mobile 390NEEDS ASSET (fonte)
+
+ +
+

Cena 01 · desktop 1280 × 850 · vazio

+

A arte como está · CTA desabilitado

+

Caixas vazias e o selo CONFIRMA pleno já pertencem ao JPEG. Nenhum pixel é acrescentado no estado vazio.

+
+ +
+
+ +
+

Cena 02 · mobile 390 × 844 · vazio

+

Drawer · arte inteira, sem preenchimento

+
+

Minha colinha

Escolha seu estadual

+
Colinha oficial vazia

Escolha um estadual para baixar.A linha vazia será preenchida com o nome e os cinco dígitos.

+
+
+
+
+ +
+

Cena 03 · opção A recomendada · desktop 1280

+

Linha no mesmo idioma visual das linhas fixas

+

A base continua sendo o JPEG. Na faixa branca da segunda linha, o rótulo é reposto à esquerda e JULIO PINHEIRO entra à direita; os cinco dígitos pousam nas caixas existentes.

+
+
Colinha oficial preenchida com Julio Pinheiro 13999DEPUTADO ESTADUALJULIO PINHEIRO13999
+

Minha colinha · opção A

Pronta para levar com você

Confira o estadual escolhido. As demais escolhas já vêm preenchidas na imagem oficial — sem retexto, sem novo topo e sem novos selos.

Linha conferida

DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999

A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é solicitado.

+
+
+ +
+

Cena 04 · opção A · mobile 390 × 844

+

Preenchida e pronta para baixar

+

Minha colinha

Pronta para baixar

Colinha oficial preenchida com Julio Pinheiro 13999DEPUTADO ESTADUALJULIO PINHEIRO13999

Linha conferida

DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999

+
+ +
+

Cena 05 · escolha do gate · A × B

+

Duas leituras para a única linha nova

+

Recomendação: A. A variante B conserva o rótulo original, mas força a leitura “JULIO PINHEIRO DEPUTADO ESTADUAL”.

+
+

Opção A · recomendada

Rótulo à esquerda + nome à direita

RECOMENDADA
Opção ADEPUTADO ESTADUALJULIO PINHEIRO13999

Repete a sintaxe de “DEPUTADO FEDERAL Jorge Solla” e das demais linhas: cargo primeiro, nome em vermelho depois.

+

Variante B · secundária

Nome no vão à esquerda do rótulo original

Variante BJULIO PINHEIRO13999

Preserva cada pixel do rótulo já impresso, porém inverte a ordem visual e aperta o nome.

+
+
+ +
+

Cena 06 · detalhe tipográfico · conferência

+

Linha fixa da arte × linha preenchida

+

O alvo é equivalência de cor, peso, tamanho e linha de base — não uma aproximação “parecida”. A face pesada exata não está disponível no navegador deste artefato.

+
+
Referência fixa · pixels do JPEG
Linha fixa Deputado Federal Jorge Solla

DEPUTADO FEDERAL · Jorge Solla · 1313

+
Alvo novo · opção ANEEDS ASSET (fonte)
Linha preenchida Deputado Estadual Julio PinheiroDEPUTADO ESTADUALJULIO PINHEIRO13999

DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999

+
+
+ + +
+ + diff --git a/docs/plans/cards-colinha-arte-exata.md b/docs/plans/cards-colinha-arte-exata.md new file mode 100644 index 00000000..dcc8b38d --- /dev/null +++ b/docs/plans/cards-colinha-arte-exata.md @@ -0,0 +1,98 @@ +# S34 — Minha colinha: a arte exata entregue pelo humano + a linha do estadual preenchida + +Status: rascunho +Atualizado em: 2026-09-23 +Issue: #1298 +Priority: P1 +Impeccable: C — ajuste visual num modelo existente do funil público (sem superfície nova) +Design UI: docs/plans/cards-colinha-arte-exata-ui-design.html +Appetite: ~0,5–1 dia eng; a arte aprovada vira a base e só a linha do estadual é preenchida +Responsável: — + +## Intenção + +O humano aprovou uma arte exata para a colinha (o arquivo dele, `modelo-colinha.jpeg`) e o que chegou ao ar foi uma recriação do zero — parecida, mas lida como outro card. O verbatim: «E na criação da colinha parece que você gerou uma nova colinha do zero em vez de usar a imagem de colinha que eu te forneci. Era pra usar exatamente a imagem que eu forneci, apenas adicionando o preenchimento da linha de deputado estadual.» + +A correção é de premissa, não de polimento: a arte aprovada passa a ser a base da prévia e do download, e o único desenho novo é o preenchimento da linha `DEPUTADO ESTADUAL` (2ª linha) com o nome de urna e os cinco dígitos. Nada mais é redesenhado — topo, cinco linhas fixas, linha legal e selos vêm da imagem, intocados. + +## Persona e fluxo + +- **Persona / contexto:** militante/eleitor no celular, prestes a pedir voto na rua ou no grupo; quer a colinha exata que a coordenação aprovou, com o estadual dele preenchido. +- **Job principal:** baixar a colinha oficial com a linha do estadual preenchida, sem que a arte mude em nada. +- **Fluxo desejado:** home (`#cards`) ou `/cards` → escolhe `Minha colinha` → escolhe o estadual na lista da dobradinha (S30) → vê a prévia 9:16 igual à arte aprovada, com a linha preenchida → baixa o PNG 1080×1920. +- **Anti-goals de produto:** segundo editor/estúdio; redesenhar ou re-digitar o conteúdo fixo da arte; editar o arquivo de imagem; CMS/migration; PDF/A4; nome/foto do visitante; analytics novo. + +### Design UI (C) + +- Design UI (gate): `docs/plans/cards-colinha-arte-exata-ui-design.html` +- Cenas: prévia vazia (a arte como está), prévia com a linha do estadual preenchida e o detalhe da linha lado a lado com uma linha fixa da própria arte (tipografia, peso e tamanho). + +## Objetivo e aceite + +- A prévia e o PNG baixado (1080×1920) são a imagem fornecida — o asset aprovado, sem recriação, ampliado exatamente 1,2× (900×1600 → 1080×1920) — com SÓ a linha `DEPUTADO ESTADUAL` preenchida: nome de urna em caixa alta + os cinco dígitos, um por caixa existente. +- O topo, as cinco linhas fixas, a linha legal e os selos `CONFIRMA` vêm da arte, intocados; nenhum outro pixel é redesenhado. +- Sem estadual escolhido, a prévia mostra a linha em branco como está na arte e o download fica desabilitado. +- A linha preenchida lê como parte da arte: mesma tipografia/peso/cor/tamanho das linhas fixas, mesma linha de base, dígitos centrados nas caixas e nome cabendo sem colidir com o rótulo nem com a borda do desenho. +- O asset continua sendo o tile da galeria; um só editor/fluxo, 100% no aparelho, sem superfície nova de seleção; o analytics de S32 fica intocado. + +## Dados (intenção) + +- **Vou apresentar dados?** Não. +- **Decisões desbloqueadas:** N/A — nenhuma métrica; o catálogo de estaduais é conteúdo (arte + número), não análise. +- **Forma:** _adiada ao plano de implementação_ — a escolha do estadual segue insumo local da imagem; medir uso é S32. + +## Dados da decisão (literais) + +- Model id `minha-colinha`; rótulo `Minha colinha`. +- Base aprovada: `public/cards/modelo-colinha.jpeg` — cópia byte a byte do arquivo entregue (`docs/plans/cards-colinha-ui-design-assets/modelo-colinha.jpeg`), 900×1600, sha256 `76505492fb243c67313d237e58926afbd4d0847c00ab3bb43c090859cbdf18c8`; segue o tile da galeria. +- Saída PNG 1080×1920: a arte ampliada exatamente 1,2×, sem recorte e sem reescala parcial. +- Linha preenchida: `DEPUTADO ESTADUAL` (2ª linha do card) — nome de urna em caixa alta + os 5 dígitos do catálogo compartilhado com S30 (`stateDeputyCatalog`), um dígito por caixa existente. +- Estado vazio: a arte como está (caixas vazias e selo `CONFIRMA` pleno, como na arte) e download desabilitado. +- Sem nome/foto do visitante; topo e linhas fixas vêm da arte. + +## Direção no codebase (hipótese) + +- **Áreas prováveis:** `src/lib/cardRender.ts` (`renderColinhaCard` → base + preenchimento da linha), `src/lib/cardColinha.ts` (geometria/linhas — a maior parte do layout do zero morre; fica só o que o preenchimento precisa), `src/lib/cardModels.ts` (`assetSrc`/`lockupSrc` do modelo), `src/components/cards/CardComposer.tsx` (o branch da colinha carrega a base), testes. +- **Precedente a olhar:** S31 (#1272) e S30 (#1271) — modelo, catálogo e seletor já existem. +- **Risco de acoplamento:** a composição do zero deve ser REMOVIDA, não duplicada (sem segunda via morta); os pins de unit/e2e da composição antiga precisam ser reescritos; `#1277` (fatiar o `CardComposer`) mexe no mesmo arquivo — coordenar/rebasear. + +## Dependências + +- Nenhuma dura (S30/S31 entregues). Soft: `#1277` (mesmo arquivo — fatiar o `CardComposer`). + +## Fora de escopo + +- Redesenhar/editar a arte; mexer no topo, nas linhas fixas, na linha legal ou nos selos. +- PDF/A4 ou impressão; nome/foto do visitante; analytics novo (S32 intocado); segundo editor/rota. + +## Rabbit holes de produto + +- **Reconstruir a arte em vetor por cima do raster.** Se alguém "só completar": vira redesenho tipográfico infinito e o resultado deixa de ser a arte aprovada. **Corte neste item:** a arte exata é a base. +- **Melhorar a arte do humano.** Se alguém "só completar": reposiciona elementos, "corrige" cores e o humano deixa de reconhecer o próprio arquivo. **Corte neste item:** só a linha do estadual é tocada. +- **A4 no mesmo item.** Se alguém "só completar": entra diagramação de impressão e margem de impressora. **Corte neste item:** só PNG 9:16. + +## Questões em aberto (produto) + +- **Onde entra o nome, já que a arte em branco tem o rótulo `DEPUTADO ESTADUAL` no fim da linha (alinhado à direita) e o espaço vago à esquerda dele?** **Opções:** A) redesenhar a linha no padrão das linhas fixas — rótulo à esquerda + nome à direita, alinhados à direita (edição invisível sobre o fundo branco) | B) preencher só o vão à esquerda do rótulo, base intocada (leitura "NOME DEPUTADO ESTADUAL") | C) só os dígitos, sem nome. **Recomendação:** A — casa com as outras cinco linhas e é o que faz a linha ler como preenchida. _(assumido — validar com produto)_ +- **Fonte da linha preenchida?** **Opções:** A) aceitar a face mais próxima e provar lado a lado no PR | B) carregar uma face Black só para o preenchimento. **Recomendação:** A — menor custo; a conferência lado a lado é o aceite. _(assumido — validar com produto)_ +- **O rótulo pode ser reescrito por cima do fundo?** **Opções:** A) sim, é o que faz a linha ler como as outras | B) não tocar no que já está na arte. **Recomendação:** A. _(assumido — validar com produto)_ + +## Referências + +- GitHub Issue #1272 (S31 — modelo `Minha colinha` entregue) +- `docs/plans/cards-colinha.md` e `docs/plans/cards-colinha-impl.md` — S31 e a Decisão 2 (recusou usar a arte como base) +- `docs/plans/cards-estadual-dobradinha.md` — S30 (catálogo `stateDeputyCatalog`) +- `docs/plans/cards-analytics.md` — S32 (intocado) +- Arte aprovada: `docs/plans/cards-colinha-ui-design-assets/modelo-colinha.jpeg` (= `public/cards/modelo-colinha.jpeg`) +- Design UI (gate): `docs/plans/cards-colinha-arte-exata-ui-design.html` +- Arquivos úteis: `src/lib/cardColinha.ts`, `src/lib/cardRender.ts`, `src/components/cards/CardComposer.tsx`, `tests/unit/cardColinha.unit.spec.ts`, `tests/e2e/frontend.e2e.spec.ts` + +## Self-score (shaping) + +**5/5.** + +- Fatia = um outcome verificável (colinha baixada = arte aprovada com a linha do estadual preenchida) e nada além. +- Appetite (~0,5–1 dia) declarado e a intenção cabe: a arte já existe; só a linha do estadual é preenchida. +- Persona, job e aceite em linguagem de produto; anti-goals e rabbit holes nomeados. +- Direção no codebase é hipótese revisável; nenhuma signature, schema ou migration prescrita. +- As três questões abertas têm opções e recomendação; a fidelidade da fonte é provada lado a lado no PR, não presumida. diff --git a/docs/plans/cards-header-modal-largura-ui-design.html b/docs/plans/cards-header-modal-largura-ui-design.html new file mode 100644 index 00000000..84f7b8ba --- /dev/null +++ b/docs/plans/cards-header-modal-largura-ui-design.html @@ -0,0 +1,141 @@ + + + + + + + Design S35 · Header do modal na largura do card + + + +
+ Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório +
+
+
+

Gate visual · S35

+

O header volta a pertencer ao modal inteiro

+

+ Correção de fidelidade: no dialog desktop, a coluna de título ocupa toda a largura disponível e o × encosta na borda direita do conteúdo. Copy, tipografia, hierarquia, prévia e ações permanecem exatamente no idioma já aprovado. +

+
+ 1280px · antes × depois + 390px · referência inalterada + Paridade com o gate aprovado +
+
+ +
+

Cena 01 · desktop 1280 × 800

+

Mesmo modal, mesma prévia — só a largura do header muda

+

Contornos e medidas verdes são anotações do gate; não entram na interface.

+
+
+
+
+

Antes · cluster estreito à esquerda

Quebrado
+ +
+
+

Depois · header de ponta a ponta

Alvo aprovado
+ +
+
+
+
+ +
+

Cena 02 · mobile 390 × 844

+

Drawer · referência já correta, sem mudança

+

No celular, título e fechar já ocupam as extremidades do drawer. Esta cena documenta paridade, não propõe ajuste.

+
+
+
+ +
+ +
+
+ +
+

Anotação do gate · não portar para a tela

+

Alvo literal

+

O bloco de texto permanece à esquerda e usa o espaço necessário; o × permanece isolado no extremo direito. O eixo visual do header coincide com a largura do conteúdo e do card abaixo — exatamente como nos dialogs aprovados de “Time de você”, “Time do estadual” e “Minha colinha”.

+
+ + +
+ + diff --git a/docs/plans/cards-header-modal-largura.md b/docs/plans/cards-header-modal-largura.md new file mode 100644 index 00000000..11dd15d0 --- /dev/null +++ b/docs/plans/cards-header-modal-largura.md @@ -0,0 +1,97 @@ +# S35 — Header do modal de criação de card: largura do card e fechar na borda + +Status: rascunho +Atualizado em: 2026-09-24 +Issue: #1299 +Priority: P2 +Impeccable: C — ajuste visual num funil público existente (sem superfície nova) +Design UI: docs/plans/cards-header-modal-largura-ui-design.html +Appetite: ~0,3–0,5 dia eng; um ajuste visual verificável com prova no browser +Responsável: — + +## Intenção + +O modal de criação de card abre com o header com cara de quebrado: o título e o botão de fechar ficam agrupados à esquerda, ocupando menos largura que o próprio card. O design aprovado sempre mostrou o header atravessando o modal, com o × colado na borda direita. O relato é do humano testando o funil ao vivo («o header do modal da criação de card está quebrado. Ele fica menor que a largura do card.»). É um bug de fidelidade ao que foi aprovado, não um redesign: o desenho certo já existe nos artefatos do gate; a implementação é que divergiu (presente desde S13, 2026-09-12 — não é regressão). + +## Persona e fluxo + +- **Persona / contexto:** visitante/coordenador no funil de cards (home `#cards` ou `/cards`), no desktop, depois de escolher um modelo e abrir o compositor. +- **Job principal:** ler o título do passo e fechar o modal sem estranhar a moldura — o header precisa parecer a barra superior do card, de ponta a ponta. +- **Fluxo desejado:** abre o modelo → o modal aparece com o título do passo à esquerda e o × na borda direita, alinhados à largura do card → lê o passo → fecha pelo × (ou segue o fluxo). No celular, o mesmo compositor vive no drawer, que já está correto. +- **Anti-goals de produto:** redesenhar o shell ou o header; mexer nos primitivos de dialog/drawer usados por outras telas; mudar copy, hierarquia ou tipografia; criar controles novos. + +### Esboço de fluxo (C) + +```text +[home #cards ou /cards] → escolhe modelo → modal abre (header full-width, × na borda) + → lê o título do passo → fecha pelo × | segue o fluxo + (mobile: drawer — inalterado) +``` + +### Design UI (C) + +- Design UI (gate): `docs/plans/cards-header-modal-largura-ui-design.html` + +## Objetivo e aceite + +- No modal de criação de card no desktop, o header ocupa a largura do modal: bloco do título alinhado à esquerda e × na borda direita, exatamente como nas cenas de dialog dos artefatos aprovados. +- Títulos longos e curtos se comportam igual — o header não encolhe nem "flutua" à esquerda. +- O drawer mobile mantém o layout atual (já correto) — sem mudança visível. +- Nada mais no estúdio muda: sem copy nova, sem tipografia nova, sem outros diálogos afetados. +- A correção é paridade com o artefato aprovado — nenhuma invenção visual. + +## Dados (intenção) + +- **Vou apresentar dados?** Não — nenhuma métrica. +- **Decisões desbloqueadas:** N/A — o alvo é visual e já está aprovado no gate. +- **Forma:** _adiada ao plano de implementação_ — aqui só a restrição de produto: paridade com as cenas de dialog aprovadas. + +## Dados da decisão (literais) + +- Modelos/entradas do funil intocados: `#cards`, `/cards`, `?model=`. +- Modal desktop = dialog do `CardsStudio`; drawer mobile inalterado. +- Alvo visual = paridade com as cenas de dialog dos artefatos aprovados (`cards-time-de-voce-ui-design.html` e correlatos): header ocupando a largura, `×` na borda direita. +- Sem copy nova. + +## Direção no codebase (hipótese) + +- **Áreas prováveis:** `src/components/cards/CardComposer.tsx` (a linha do header) e `src/components/cards/CardsStudio.tsx` (o shell do dialog). +- **Precedente a olhar:** artefatos aprovados de S15/S23/S30/S31 (cenas de dialog) e os e2e do funil (`tests/e2e/frontend.e2e.spec.ts`). +- **Risco de acoplamento:** o header é o mesmo para os seis modelos; os primitivos em `src/components/ui/` são compartilhados por 13+ telas — a correção fica no ponto de uso do composer, nunca na primitiva. + +## Dependências + +- Nenhuma. Soft: `#1277` (fatiar o `CardComposer`) e S33/S34 tocam o mesmo arquivo — coordenar/rebase. + +## Fora de escopo + +- Mudar o drawer mobile. +- Mexer nas primitivas de UI (dialog/drawer). +- Redesenhar o header (hierarquia, tipografia, copy). +- Qualquer outra tela. + +## Rabbit holes de produto + +- **"Aproveitar e redesenhar o header".** Se alguém "só completar": vira redesign do compositor e do funil. **Corte neste item:** só a largura/posição já aprovadas. +- **"Corrigir a primitiva para todos".** Se alguém "só completar": 13+ telas mudam de comportamento sem pedido. **Corte neste item:** o ajuste fica no composer. + +## Questões em aberto (produto) + +- N/A — o alvo já está aprovado nos artefatos do gate; sem decisão nova. + +## Referências + +- Design UI (gate): `docs/plans/cards-header-modal-largura-ui-design.html` +- Artefatos aprovados (cenas de dialog): `cards-time-de-voce-ui-design.html`, `cards-estadual-dobradinha-ui-design.html`, `cards-colinha-ui-design.html` +- `src/components/cards/CardComposer.tsx`, `src/components/cards/CardsStudio.tsx` +- `tests/e2e/frontend.e2e.spec.ts` + +## Self-score (shaping) + +**5/5.** + +- Um outcome verificável: header do modal na largura do card com × na borda, nada mais. +- Appetite declarado (~0,3–0,5 dia) e a intenção cabe nele — ajuste visual localizado. +- Persona, job e aceite em linguagem de produto, sem jargão de stack. +- Direção no codebase é hipótese (arquivos prováveis), não contrato técnico. +- Zero decisões duras de engenharia; o alvo visual já está aprovado no gate. diff --git a/docs/plans/cards-time-ajuste-sem-limite-ui-design.html b/docs/plans/cards-time-ajuste-sem-limite-ui-design.html new file mode 100644 index 00000000..448b76e8 --- /dev/null +++ b/docs/plans/cards-time-ajuste-sem-limite-ui-design.html @@ -0,0 +1,193 @@ + + + + + + + Design S33 · Ajuste da foto livre, sem limite + + + +
+ Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório +
+
+
+

Gate visual · S33 · decisão revisada em 24/09/2026

+

A foto vai a qualquer ponto — inclusive para fora

+

+ O enquadramento automático S15 continua sendo o ponto de partida. Depois dele, arrastar, setas e teclado deixam a posição livre nos dois eixos. A pessoa pode esconder parte ou toda a própria foto e revelar a arte do time ao fundo; para voltar, arrasta de volta na mesma área ativa. +

+
+ 1280px · dialog + 390px · drawer + X + Y: sem limite + Zoom [1,4] · inalterado +
+
+ +
+

Cena 01 · desktop 1280 × 800

+

Dialog de ajuste · do limite atual à posição livre

+

Setas tracejadas, rótulos e silhueta são anotações do gate. O compositor não ganha controles nem copy.

+
+
+ +
+
+ +
+

Cena 02 · mobile 390 × 844

+

Drawer · foto totalmente fora, área ainda ativa

+

A prévia mostra a escolha extrema permitida: só a arte do time fica visível. O quadro inteiro continua sendo a área de arrasto para trazer a foto de volta.

+
+
+
+ +
+ +
+
+ +
+

Anotação do gate · não portar para a tela

+

O que muda — e o que não muda

+
+

Posição

Sem clamp em X ou Y. Pode passar da janela, ficar parcialmente fora ou desaparecer por completo do quadro.

+

Todo o resto

S15 como início; zoom na faixa [1,4]; mesmos controles, copy e área de arrasto; nenhuma telemetria.

+
+
+ + +
+ + diff --git a/docs/plans/cards-time-ajuste-sem-limite.md b/docs/plans/cards-time-ajuste-sem-limite.md new file mode 100644 index 00000000..1d418bc4 --- /dev/null +++ b/docs/plans/cards-time-ajuste-sem-limite.md @@ -0,0 +1,103 @@ +# S33 — Card do time (você e estadual): ajuste da foto livre, sem limite + +Status: rascunho +Atualizado em: 2026-09-24 +Issue: #1297 +Priority: P1 +Impeccable: C — ajuste de comportamento num funil público existente (sem controle novo) +Design UI: docs/plans/cards-time-ajuste-sem-limite-ui-design.html +Appetite: ~0,5 dia eng; um comportamento verificável no funil de cards +Responsável: — + +## Intenção + +No teste do card com estadual, o humano reencontrou o mesmo atrito: «No teste da criação do card "time de você" com estadual, encontrei novamente a limitação no ajuste, não consigo ajustar corretamente porque tem limite da movimentação pros lados.» A S20 já tinha corrigido exatamente isso no "Time de você" (Issue #1216), mas a correção foi revertida por uma razão de engenharia que continua válida: o detector de rosto saiu e o enquadramento automático voltou ao S15 (commit 48e08bf7, 2026-09-20). O limite que sobrou não vem da pessoa — vem do espaço transparente que o recorte deixa em volta dela, e é o mesmo nos dois modelos do time. + +Numa foto realista (1200×1600), um busto que preenche a moldura anda ~66px no total (±33); um busto menor, ~423px (±211); um busto fora do centro anda bem mais para um lado (+1036) que para o outro (−148). Quem trava é sempre a borda do arquivo da foto, nunca a borda visível da pessoa — que costuma estar bem dentro da janela quando o gesto para. + +A decisão do humano no gate (2026-09-24) é **liberar totalmente, sem limite**: o ajuste não é mais restringido em nenhum eixo — o que resolve o atrito pela raiz e dispensa âncora de silhueta, caixa medida ou união de alcances. O enquadramento automático S15 continua sendo só o ponto de partida. + +## Persona e fluxo + +- **Persona / contexto:** visitante no celular, no funil público dos cards de time (você e estadual), logo depois do recorte da foto; quer se encaixar na composição antes de baixar. +- **Job principal:** posicionar a própria foto — principalmente para os lados — onde ela fica boa no card. +- **Fluxo desejado:** escolhe a foto → recorte → enquadramento automático S15 (inalterado) → arrasta ou usa setas/teclado → a foto vai a qualquer posição → baixa o PNG. +- **Anti-goals de produto:** não vira editor de imagem; não ganha controle nem texto novo; não libera os limites do zoom; não muda o enquadramento automático nem os outros modelos. + +### Esboço de fluxo (C) + +```text +[foto escolhida] → [recorte] → [enquadramento automático S15] → [prévia: arrastar/setas/teclado — posição livre] → [PNG] +``` + +### Design UI (C) + +- Design UI (gate): `docs/plans/cards-time-ajuste-sem-limite-ui-design.html` + +## Objetivo e aceite + +- A foto pode ser movimentada livremente nos dois eixos: nenhum limite artificial — o arrasto, as setas e o teclado nunca são barrados pelo espaço transparente do recorte. +- A foto pode passar além da janela, sair do quadro e deixar a arte de trás aparecer — escolha do visitante; o retorno é arrastar de volta (a área de arrasto continua ativa). +- Arrastar, setas e teclado seguem iguais; os limites do zoom seguem iguais (a liberdade é da posição, não do zoom); o enquadramento automático S15 continua sendo o ponto de partida. +- Prévia e PNG baixado mostram a mesma posição — sem "voltar sozinho" ao soltar. +- Tudo no aparelho, sem telemetria de foto ou posição; os demais modelos (os 3 anteriores) ficam intocados. + +## Dados (intenção) + +- **Vou apresentar dados?** Não — nenhuma métrica de produto nesta tela. +- **Decisões desbloqueadas:** nenhuma — a posição é geometria efêmera no aparelho, não vira dado de campanha. +- **Forma:** _adiada ao plano de implementação_ — restrição de produto: nada de telemetria de foto/posição. + +## Dados da decisão (literais) + +- Modelos do time: `time-de-voce` e `time-do-estadual`. +- Decisão do humano no gate (2026-09-24): **liberar totalmente, sem limite** — o ajuste (arrasto, setas, teclado) não tem limite em nenhum eixo; sem âncora de silhueta e sem clamp do ajuste (o padding transparente do recorte deixa de importar). +- Enquadramento automático S15 `frameCardPhotoOnBbox` continua sendo o ponto de partida, aplicado uma vez ao carregar a foto. +- Zoom inalterado (faixa `[1,4]` de hoje): a liberação é da posição. +- Composer e renderizador: o ajuste do visitante não é re-limitado no desenho nem no PNG (sem snap-back); o limite de hoje deixa de valer para o ajuste. +- Sem controles, textos ou telemetria novos. + +## Direção no codebase (hipótese) + +- **Áreas prováveis:** `src/lib/cardPhotoTransform.ts` (o limite do ajuste/zoom), `src/components/cards/CardComposer.tsx` (os controles), `src/lib/cardRender.ts` (desenho do time — não re-limitar o ajuste do visitante), testes. +- **Precedente a olhar:** S20 — Issue #1216, commit e652f0ae e o revert 48e08bf7 (`docs/plans/cards-time-de-voce-ajuste-lateral.md` e `-impl.md`; `docs/changelog/2026-09-20-card-time-recorte-e-enquadramento.md`). +- **Risco de acoplamento:** o enquadramento inicial S15 e os 3 modelos anteriores (S13/S14) precisam ficar idênticos; `#1277` (S30-FOLLOWUP-DRY) mexe no mesmo arquivo — coordenar/rebase. + +## Dependências + +- Nenhuma dura. Suave: `#1277` (mesmo arquivo do composer). + +## Fora de escopo + +- Mudar os limites do zoom. +- Mudar o enquadramento automático (S15/S18 — decisão humana de 2026-09-20). +- Trazer o detector de rosto de volta, controles novos (slider lateral, "centralizar"/"re-enquadrar") e telemetria. +- Os 3 modelos anteriores. + +## Rabbit holes de produto + +- **"Proteger a composição com um limite novo".** Se alguém "só completar": reintroduz o atrito que o humano acabou de mandar remover. **Corte neste item:** sem limite, decisão do gate. +- **"Botão de voltar ao enquadramento".** Se alguém "só completar": novo controle e novo estado. **Corte neste item:** a área de arrasto continua ativa; voltar é arrastar. +- **"Re-detectar/rastrear a silhueta durante o arrasto".** Se alguém "só completar": custo por quadro e comportamento instável. **Corte neste item:** não há âncora. +- **"Reabrir o enquadramento".** Se alguém "só completar": rediscute a decisão humana de 2026-09-20. **Corte neste item:** S15 intocado. + +## Questões em aberto (produto) + +- **Até onde liberar o ajuste?** **Decidido no gate (2026-09-24): sem limite** — o ajuste é livre nos dois eixos. +- **Mudar o enquadramento inicial?** **Opções:** A) manter S15 (recomendado) | B) reabrir. **Recomendação:** A — decisão humana de 2026-09-20. _(assumido — validar com produto no gate)_ +- **Mexer nos limites do zoom?** **Opções:** A) manter `[1,4]` (recomendado) | B) liberar também. **Recomendação:** A — o relato é de posição. _(assumido — validar com produto no gate)_ + +## Referências + +- Issue #1216 (S20) + commit e652f0ae — mediu 248px de curso lateral total (≈±124); commit 48e08bf7 + `docs/changelog/2026-09-20-card-time-recorte-e-enquadramento.md` (o revert). +- `docs/plans/cards-time-de-voce-ajuste-lateral.md` e `-impl.md`; `docs/plans/cards-estadual-dobradinha.md`. +- Design UI (gate): `docs/plans/cards-time-ajuste-sem-limite-ui-design.html`; arquivos úteis: `src/lib/cardPhotoTransform.ts`, `src/components/cards/CardComposer.tsx`, `src/lib/cardRender.ts`, `tests/unit/cardPhotoTransform.unit.spec.ts`. + +## Self-score (shaping) + +**5/5.** + +- Um outcome verificável — o ajuste da foto não tem limite — e nada além. +- Appetite declarado (~0,5 dia) e a intenção cabe: remover o limite do ajuste é menor do que a âncora que ele substitui. +- Persona, job e aceite em linguagem de produto, ancorados no relato humano no funil e na decisão do gate. +- Direção no codebase é hipótese, com precedente e risco de acoplamento nomeados; nenhuma decisão dura de engenharia (schema, migration, assinatura) no plano.