From b761738cfb2bbe2d74cf52fe298060cccb50e678 Mon Sep 17 00:00:00 2001 From: Francisco Solla Date: Thu, 1 Oct 2026 17:13:20 -0300 Subject: [PATCH] =?UTF-8?q?docs(plan):=20S45=20=E2=80=94=20central=20de=20?= =?UTF-8?q?conte=C3=BAdos=20=E2=80=94=20cards=20verticais=20no=20cat=C3=A1?= =?UTF-8?q?logo=20e=20na=20se=C3=A7=C3=A3o=20da=20home=20(Related=20#1410)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...l-conteudos-cards-verticais-ui-design.html | 1127 +++++++++++++++++ .../central-conteudos-cards-verticais.md | 125 ++ 2 files changed, 1252 insertions(+) create mode 100644 docs/plans/central-conteudos-cards-verticais-ui-design.html create mode 100644 docs/plans/central-conteudos-cards-verticais.md diff --git a/docs/plans/central-conteudos-cards-verticais-ui-design.html b/docs/plans/central-conteudos-cards-verticais-ui-design.html new file mode 100644 index 00000000..fb79bd0f --- /dev/null +++ b/docs/plans/central-conteudos-cards-verticais-ui-design.html @@ -0,0 +1,1127 @@ + + + + + + + + Design — S45 · Cards verticais da Central de Conteúdos + + + +
+
+ S45 · design para o gate +

+ A peça aparece na forma em que foi criada. +

+

+ Reels respiram em 9:16, fotos em 4:5 e modelos em 3:4. Nenhuma mídia é cortada: horizontal + fica inteira sobre a superfície neutra. Áudio, texto e link continuam largos. +

+
+
+ Vídeo · 9:16 +

Frame e player usam contain.

+
+
+ Foto · 4:5 +

+ Imagem inteira, inclusive horizontal. +

+
+
+ Modelo · 3:4 +

Arte vertical, convite para /cards.

+
+
+
+ + +
+
+ CENA 01 +

Catálogo · desktop 1280 · quatro colunas verticais

+
+
+
+
+
+ Central de Conteúdos +
+
+
+
+ Encontre uma peça por assunto, cidade ou tema… +
+
+ Tipo⌄ + Cidade⌄ + Região⌄ + Tema⌄ +
+
+
+
+

Escolha, compartilhe e peça voto

+

A mídia só carrega quando você tocar.

+
+ Grade: 4 colunas · gap 20px +
+ +
+
+
+ + NEEDS ASSET · FRAME REAL + + Duração +
+
+ Vídeo +

Título da peça em vídeo

+

Tema · Cidade

+
+ Baixar + Compartilhar +
+
+
+ +
+
+
+
+ #SOU + ____ +
+ NEEDS ASSET · ARTE REAL +
+
+
+ Card +

Card com seu nome

+

+ Coloque seu nome no card oficial. +

+ Escolher este modelo → +
+
+ +
+
+ + NEEDS ASSET · FOTO REAL +
+
+ Foto +

Título da foto publicada

+

Tema da peça

+
+ Baixar + Compartilhar +
+
+
+ +
+
+
+ PEÇA HORIZONTAL +
+ NEEDS ASSET · MÍDIA REAL + + Duração +
+
+ Vídeo +

Peça horizontal inteira

+

Letterbox neutro · sem corte

+
+ Baixar + Compartilhar +
+
+
+
+ +
+
+
+ Áudio + + +
+
+ Áudio +

Mensagem para compartilhar

+

+ Formato largo: não existe enquadramento visual a preservar. +

+
+ BaixarCompartilhar +
+
+
+
+
+
+

+ Peça no Instagram +

+ Instagram +
+
+
+ Instagram +

Publicação na plataforma

+

+ Link largo: a plataforma é a pista, não uma moldura vazia. +

+ Compartilhar +
+
+
+ +
+
+
+ + NEEDS ASSET +
+
+ Foto +

Foto compacta na linha

+

Thumb 96 × 120 · 4:5 inteiro

+
+ BaixarCompartilhar +
+
+
+
+ Densidade decidida + O board principal passa de 3 para 4 colunas em lg, mantém 2 em + sm e 1 no celular. Áudio e link ocupam uma grade larga de 2 colunas; + fotos compactas preservam a linha. +
+
+
+
+
+
+ + +
+
+ CENA 02 +

Catálogo · mobile 390 · uma coluna, sem overflow

+
+
+
+
+ Conteúdos +
+
+

Escolha uma peça

+

Toque para ver, baixar ou compartilhar.

+
+
+
+ + NEEDS ASSET · FRAME REAL + + Duração +
+
+ Vídeo +

Título da peça em vídeo

+

Reel inteiro · 9:16

+
+ BaixarCompartilhar +
+ Ver detalhes da peça → +
+
+ +
+
+ + NEEDS ASSET · FOTO REAL +
+
+ Foto +

Título da foto publicada

+

Foto inteira · 4:5

+
+ BaixarCompartilhar +
+
+
+ +
+
+
+ 16:9 INTEIRO +
+ NEEDS ASSET · MÍDIA REAL + + Duração +
+
+ Vídeo +

Peça horizontal inteira

+

Letterbox neutro · sem corte

+
+ BaixarCompartilhar +
+
+
+ +
+
+ + NEEDS ASSET +
+
+ Foto +

Foto compacta na linha

+

Portrait inteiro · 4:5

+
+ Baixar + Compartilhar +
+
+
+ + +
+
+ #SOU
____ +
+ NEEDS ASSET +
+
+ Card +

Card com seu nome

+

+ Convite para criar, sem cromo de mídia. +

+ Escolher → +
+ + +
+
+
+ Áudio + +
+
+ Áudio +

Mensagem para compartilhar

+

Largo, sem vazio vertical.

+ Compartilhar +
+
+
+
+

+ Conteúdo útil: 350px dentro de 390px, com 20px de respiro de cada lado. Nenhum + elemento excede o viewport. +

+
+
+
+ + +
+
+ CENA 03 +

Home · desktop 1280 · até três peças verticais

+
+
+
+
+

+ Seção existente acima +

+
+
+
+
+
+

+ Central de Conteúdos +

+

+ Peça voto pra Solla 1313 +

+

+ Material do seu território para compartilhar. +

+ ⌖ Para seu município +
+
+
+
+ + NEEDS ASSET · FOTO REAL +
+
+
+ FotoDo seu município +
+

Título da peça local

+

Seu município · Tema

+ Compartilhar + Ver esta peça → +
+
+
+
+ + NEEDS ASSET · FRAME REAL + + Duração +
+
+
+ VídeoDa sua região +
+

Título da peça regional

+

Sem autoplay

+ Compartilhar + Ver esta peça → +
+
+
+
+
+ Áudio + +
+
+
+ ÁudioMais recente +
+

Mensagem recente

+

Mantém o bloco largo.

+ Compartilhar + Ver esta peça → +
+
+
+
+
+ Ver todas as peças → +
+
+
+
+

+ Seção existente abaixo +

+
+
+
+
+ + +
+
+ CENA 04 +

Home · mobile 390 · thumb vertical de 124px

+
+
+
+
+
+

+ Central de Conteúdos +

+

+ Peça voto pra
Solla 1313 +

+

+ Material do seu território para compartilhar. +

+
+
+
+
+ + NEEDS ASSET +
+
+
+ FotoLocal +
+

Título da peça local

+ Compartilhar + Ver esta peça → +
+
+
+
+ + Duração + +
+
+
+ VídeoRegião +
+

Título da peça regional

+ Compartilhar + Ver esta peça → +
+
+
+
+ Áudio + +
+
+
+ ÁudioRecente +
+

Mensagem recente

+ Compartilhar +
+
+
+ Ver todas as peças → +
+
+
+ + +
+
+ CENA 05 +

Página da peça · o detalhe cumpre a promessa do card

+
+
+
+
+
+ Central de Conteúdos +
+
+ ← Voltar para conteúdos +
+
+ + NEEDS ASSET · FRAME REAL + + Duração +
+
+ Vídeo +

+ Título da peça em vídeo +

+

+ Descrição da peça publicada, preservada como hoje. +

+
+
+
Tema
+
Tema da peça
+
+
+
Local
+
Município
+
+
+
Duração
+
Informada na peça
+
+
+
+ BaixarCompartilhar +
+
+ Palco compartilhadoVídeo usa 9:16; foto usa 4:5. + A coluna de mídia tem 360px no desktop e não cresce até dominar o texto. +
+
+
+
+
+ +
+
+ Central de Conteúdos +
+
+ ← Voltar +
+ + NEEDS ASSET · FOTO REAL +
+ Foto +

+ Título da foto publicada +

+

+ A foto inteira continua sendo a primeira evidência da página. +

+
+ BaixarCompartilhar +
+
+
+
+
+ + +
+
+ CENA 06 +

+ Estados críticos · sem frame, em reprodução e horizontal inteiro +

+
+
+
+
+ ×Frame indisponível + + Duração +
+
+ Vídeo +

Sem frame

+

+ Superfície neutra, play e duração. Sem imagem quebrada e sem novo cromo. +

+
+
+
+
+ +
+
+
+
+
+ ⅡVídeo em reprodução↗ +
+
+
+
+ Vídeo +

Depois do toque

+

+ O vídeo toca dentro do mesmo 9:16, com contain. Não há autoplay no carregamento da + página. +

+
+
+
+
+
+ 16:9 INTEIRO +
+ NEEDS ASSET · MÍDIA REAL + +
+
+ Vídeo +

Horizontal em letterbox

+

+ A superfície continua 9:16; a mídia usa contain. Nunca estica, nunca corta. +

+
+
+
+
+ + +
+
+ CENA 07 +

+ Decisão do gate · uma regra de enquadramento, sem redesenhar o cromo +

+
+
+
+
+

Forma por tipo na v1

+
    +
  • + Vídeo/Reel: slot 9:16; frame e vídeo em + object-contain. +
    • +
  • + Foto/carrossel: slot 4:5; imagem em + object-contain. +
    • +
  • + Modelo S38: palco 3:4; a arte real cabe inteira e o item + continua sendo convite para /cards. +
    • +
  • + Áudio, texto e link: largos; verticalizá-los produziria + vazio sem ganho de reconhecimento. +
    • +
+
+
+

Limites preservados

+
    +
  • Sem autoplay: a mídia entra somente após o toque.
    • +
  • Play atual: 56px no card, 44px no thumb; sem o cromo futuro da C228.
    • +
  • Um CTA primário por superfície; ações do card permanecem outline.
    • +
  • Alvos de toque com pelo menos 44px; foco amarelo visível.
    • +
  • + 390px: conteúdo com 20px de inset e trilhas minmax(0,1fr); overflow + horizontal esperado = 0. +
    • +
  • Detalhe incluído: card e página da peça usam o mesmo palco.
    • +
+
+
+

+ Por que não uma moldura única? 9:16 para tudo alongaria fotos + e modelos sem necessidade; 4:5 para Reels reduziria justamente o conteúdo que precisa + respirar. A família 9:16 · 4:5 · 3:4 preserva a intenção de cada tipo sem depender de + nova leitura de dimensões. Uma mídia horizontal continua inteira por + contain dentro da superfície neutra do seu tipo. +

+
+
+ +
+ Identificação: comunicação de campanha · Jorge Solla 1313 · PT + Bahia. Este artefato decide somente enquadramento e densidade. Filtros, busca, ações, LGPD, + kill switch e copy permanecem como aprovados nas entregas irmãs. +
+
+ + diff --git a/docs/plans/central-conteudos-cards-verticais.md b/docs/plans/central-conteudos-cards-verticais.md new file mode 100644 index 00000000..521cb6bd --- /dev/null +++ b/docs/plans/central-conteudos-cards-verticais.md @@ -0,0 +1,125 @@ +# S45 — Central de Conteúdos — cards verticais no catálogo e na seção da home + +Status: rascunho +Atualizado em: 2026-10-01 +Issue: #1410 +Priority: P1 +Impeccable: B — encaixe no slot/card existente, sem rota ou tela nova +Design UI: docs/plans/central-conteudos-cards-verticais-ui-design.html +Appetite: ~1–2 dias eng; um outcome verificável — o vertical aparece inteiro e o horizontal também, no catálogo e na seção da home +Responsável: — + +## Intenção + +A Central de Conteúdos (`/conteudos`) tem 281 peças publicadas, quase todas vindas do Instagram: Reels em 9:16 e fotos de feed em 4:5. São justamente as formas verticais que o eleitor reconhece e repassa. Mas os cards do board foram desenhados para mídia horizontal — o slot é `aspect-video` (16:9) em todas as superfícies —, então o enquadramento vertical é cortado no `object-cover` e o board parece uma parede de thumbs horizontais, todos iguais. + +O pedido é corrigir o enquadramento na Central e na seção dela na home (S39/S42): o card passa a apresentar a peça na forma em que ela respira — vertical é o padrão do board e nunca é cortado; peça genuinamente horizontal aparece inteira, em letterbox na superfície neutra, nunca esticada nem cortada. O board fica honesto: dá para reconhecer o Reel e a foto antes de decidir assistir ou baixar. + +## Persona e fluxo + +- **Persona / contexto:** eleitor/simpatizante no celular, chegando por link do WhatsApp ou rolando a home; reconhece o material pelo formato (Reel, foto de feed) e decide o que assistir, baixar ou repassar. +- **Job principal:** reconhecer a peça no formato em que ela foi feita, sem enquadramento cortado que a descaracterize, e escolher o que consumir. +- **Fluxo desejado:** abre `/conteudos` (ou passa pela seção da home) → vê cada peça na forma real: Reel em 9:16, foto em 4:5, arte de modelo vertical; peça horizontal inteira em letterbox → reconhece e escolhe → toca para reproduzir/baixar como hoje → no detalhe, se a página entrar no escopo, o mesmo enquadramento (coerência card→detalhe). +- **Anti-goals de produto:** não é redesenho da Central nem da home; não cria rota, tela, player ou galeria; não mexe em filtros, busca, ações, kill switch ou copy; não carrega mídia sozinha; não vira masonry nem grade de altura variável; não puxa dimensão real de mídia (migration/ffprobe) nesta fatia. + +### Esboço de fluxo (B) + +```text +[visitante no celular] → /conteudos (ou seção da Central na home) +→ card da peça na forma em que ela respira + ├─ vertical (Reel 9:16 · foto 4:5 · arte de modelo S38 vertical) + │ → enquadramento inteiro, nunca cortado + ├─ horizontal genuíno → peça inteira em letterbox na superfície neutra + │ → nunca esticado, nunca cortado + └─ áudio/texto/link → forma decidida pela coerência do board (sem enquadramento a preservar) +→ itens sintéticos de modelo do S38 seguem a mesma grade (convite para /cards intacto) +→ toque reproduz/baixa como hoje (mídia só no toque) +[se a página da peça entrar no escopo] → /conteudos/ com o mesmo enquadramento do card +[peça despublicada] → some como hoje (kill switch intacto) +``` + +### Design UI (B) + +- Design UI (gate): `docs/plans/central-conteudos-cards-verticais-ui-design.html` — cenas do catálogo e da seção da home em ~390 e ~1280: card full vertical (vídeo 9:16, foto 4:5), compacto de foto, item de modelo S38 vertical, peça horizontal em letterbox e a grade sem overflow. + +## Objetivo e aceite + +- No catálogo `/conteudos` e na seção da Central na home, peça vertical aparece no enquadramento vertical recomendado, **nunca cortada** — Reel (9:16) e foto/carrossel (4:5) preservam o que o autor enquadrou. +- Peça genuinamente horizontal aparece **inteira**, em letterbox na superfície neutra — nunca esticada nem cortada; o board deixa de ser uma parede de thumbs 16:9. +- Os itens sintéticos de modelo do S38, que dividem a mesma grade, ganham arte vertical para a coerência do board — **sem mudar a semântica de convite para `/cards`** (seguem itens, não peças, sem cromo de mídia). +- Guardrails: sem rota/tela nova; mídia continua só no toque (sem autoplay); reprodução, download, compartilhar, filtros, busca e copy intocados; kill switch instantâneo intocado; sem analytics nem PII nova; **nenhuma migration/schema/ffprobe decidido aqui** — v1 decide a forma pelo tipo, não pela dimensão real da mídia. +- Celular primeiro: nenhum overflow horizontal novo (o e2e mede ≤1 px a 390) e nenhuma mídia pesada antecipada. +- **Decidido no gate:** incluir também a página da peça (`ContentPieceDetail`) no mesmo enquadramento, pela coerência card→detalhe — nada de Issue sucessora. +- Demais seções da home, shell/nav e ficha interna intocados. + +## Dados (intenção) + +- **Vou apresentar dados?** Não — é enquadramento visual, não número: nenhum contador, série, ranking ou métrica nova. +- **Decisões desbloqueadas:** o eleitor reconhece a peça no formato real e decide o que consumir; a comunicação passa a ler o board como ele foi publicado (Reel × foto × horizontal). A contagem de circulação segue no mecanismo anônimo existente (C213), sem métrica nova. +- **Forma:** _adiada ao plano de implementação_ — aqui só a restrição de produto: o formato apresentado é o da própria peça, nunca um recorte inventado. + +## Dados da decisão (literais) + +- Item `S45`; slug `central-conteudos-cards-verticais`; tipo `feature`; Priority `P1`; Impeccable `B` ("encaixe no slot/card existente, sem rota ou tela nova" — mesmo enquadramento de classe do C226); model `deepseek/deepseek-flash`. +- Superfícies no escopo: (1) catálogo `/conteudos` — cards de peça full (video/audio/link) e compacto (foto/texto), **e** os itens sintéticos de modelo do S38 que compartilham a mesma grade (coerência do board, sem mudar a semântica de convite para `/cards`); (2) seção da home S39/S42 (`ContentPieceHomeCard`, thumb mobile de 124px e bloco `sm+`). +- Regra de produto central: o card apresenta a peça na forma em que ela respira — **vertical é o padrão do board; o enquadramento de peça vertical nunca é cortado**. Peças genuinamente horizontais aparecem inteiras (**letterbox na superfície neutra**), nunca esticadas nem cortadas. +- Formas recomendadas (o designer decide o número final no artefato): vídeo/Reel → **9:16**; foto/carrossel → **4:5**; arte dos itens de modelo S38 → **vertical**; áudio/texto/link não têm enquadramento a preservar — o designer decide a forma pela coerência do board. +- Sem dado de orientação/dimensão no item público hoje: a v1 decide a forma **pelo tipo**, não pela dimensão real da mídia; se o designer/impl optar por forma adaptativa por dimensão real, isso é decisão de implementação, **não requisito de produto**. +- Decisão do gate: incluir também o palco da página da peça (`ContentPieceDetail`) no mesmo item, pela coerência card→detalhe (`docs/plans/central-conteudos-cards-verticais-ui-design.html`, cena 05). +- **Supersessão explícita:** a decisão D5 do C226 ("o slot é 16:9 nas três superfícies", `docs/plans/central-conteudos-preview-frame-video-impl.md:91`) fica **revogada na parte do 16:9**. +- Relação **#1399 C240** (carrossel como conteúdo de primeira classe, `in-progress`, plano+design commitados, ainda sem código): reescreve os MESMOS arquivos (`contentPieceCatalog.ts`, `ContentPieceCard/Media/Detail`, catálogo/página pública) e seu design usa stage `aspect-video`. S45 **não roda em paralelo com C240** — o registrador grava `serializes: []` e a ordem fica **sem fixação** (decisão do gate): o executor coordena no claim; quem rodar depois porta sobre a base do outro (o design do C240 se ajusta ao palco vertical se o S45 vier primeiro). +- Relação **#1358 C228** (P3, aberto): é só cromo do mesmo slot (play 68px, acentos, badge) e o body manda fechá-lo antes de mexer no `ContentPieceMedia`. Para o S45, **C228 não bloqueia** (cromo ≠ ratio); o executor deve saber que ele existe e não puxar o cromo para dentro desta fatia. +- Fora de escopo (literal): galeria multi-mídia do C240; cromo do C228; imagem OG; filtros/busca/ações/kill switch/copy; ficha interna da assessoria; acervo/outras verticais; redesenho do shell/nav/home além do card da seção. + +## Direção no codebase (hipótese) + +- **Cards hoje:** `ContentPieceCard.tsx:99-129` compacto (foto/texto/outro) com thumb `h-24 w-32`; `:132-162` card full com `ContentPieceMedia className="aspect-video"` (`:143`). `ContentPieceCatalog.tsx:47-53` divide large (video/audio/link) vs compact (image/text/other); grids `sm:grid-cols-2 lg:grid-cols-3` (`:67`) e `sm:grid-cols-2` (`:79`). `ContentPieceHomeCard.tsx:74-87`: mobile `grid-cols-[124px_1fr]`, mídia `aspect-video self-start` (`:86`); `ContentPieceHomeBoard.tsx:241-245` grade `sm:grid-cols-2 lg:grid-cols-3`. `ContentCatalogCardItem.tsx:23-58,68-109`: arte `min-h-40 sm:aspect-video` (`:26`) e `grid-cols-[128px_1fr] sm:block` (`:75`). +- **Slot de mídia:** `ContentPieceMedia.tsx:110-126` — o slot não tem aspecto próprio; o host passa a classe. Imagem `object-cover` (`:190`), frame de vídeo `object-cover` (`:277`), vídeo em play `object-contain` (`:235`). Usado por catálogo, card da home e página da peça (`ContentPieceDetail.tsx:53-61`, slot `aspect-video` em `:60`). +- **Sem dado de orientação:** `ContentPiecePublicItem` (`contentPieceCatalog.ts:364-404`) não tem width/height; `ContentPiecePublicFile` (`:406-411`) só id/path/mimeType/downloadFilename; `mediaOf` (`:672-680`) descarta `url/thumbnailURL/width/height`. O DB tem dims só para imagem (`src/payload-types.ts:1398-1399`; sharp em `payload.config.ts:188`), mas o VM descarta; vídeo não tem dims em lugar nenhum (sem ffprobe). O frame do C226 preserva o aspecto com ffmpeg `scale=640:-2` (`contentPieceFrame.ts:102`) e o VM só expõe `framePath` (`contentPieceCatalog.ts:757-763`), nunca dims. +- **Precedentes visuais verticais:** `CampaignStorySection.tsx:50-52` (`aspect-[9/16]`, `max-w-[420px] lg:max-w-[300px]`); reels internos `ReelLibraryCard.tsx:13`/`ReelPlayer.tsx:12,26` (`aspect-[9/16]`); home S3 `CampaignContentCard.tsx:16-17,44` (`coverAspect 'video'|'square'`); `/fotos` `ArchivePhotoCard.tsx:37` (`aspect-square sm:aspect-[4/3]`); `/cards` `CardModelTile.tsx:16,44-45` usa spacer in-flow (bug WebKit com aspect-ratio); modelos verticais em `cardModels.ts:90-161` (1080×1440, 1000×1440, 1080×1920). +- **Evidência do volume:** 281 peças publicadas, todas Instagram (`docs/changelog/2026-10-01-c230-prune.md:1`); Reels = vídeo e feed = foto pelo MIME (`contentPiece.ts:248-264`); stories nunca entram (C230). Não há medição de proporção vertical×horizontal no repo. +- **Testes a respeitar:** `tests/e2e/frontendConteudos.e2e.spec.ts` (contagens `article[data-content-piece]`, frame antes/depois do play `:342,360`, seção da home `:745-805`, overflow ≤1 em 390, bounding boxes `:908-912`; frame stubado 320×180 `:212-224`); units `contentPieceMedia.unit.spec.tsx`, `contentPieceHomeSelection.unit.spec.ts:84-108` (pina keys da projeção lean — não engordar), `contentPieceCatalog.unit.spec.ts`; manifesto e2e já cobre `components/conteudos`/`(home)`/`conteudos` (`scripts/lib/e2e-affected-manifest.mjs:170-201`). +- **Risco de acoplamento:** o slot `ContentPieceMedia` é compartilhado (catálogo, home, detalhe) — o ratio vale para os hosts atuais e futuros; C240 reescreve os mesmos arquivos; os bounding boxes do e2e e o frame stub 320×180 podem acusar a mudança de ratio; não editar as seções irmãs da home. + +## Dependências + +- Nenhuma dura — catálogo (S27/S28), itens de modelo (S38), seção da home (S39/S42) e frame do C226 já estão no repo. +- **#1399 C240** — relação registrada acima: serializa (ordem sem fixação; coordenação no claim); sem código ainda. **#1358 C228** — não bloqueia (cromo ≠ ratio); ciência do executor. +- Design UI aprovado no gate. + +## Fora de escopo + +- Galeria multi-mídia do C240 e a promoção de carrossel a conteúdo de primeira classe. +- Cromo do C228 (play 68px, acentos radiais, badge, sombra) e qualquer polimento visual do slot. +- Imagem OG; filtros, busca, ações, kill switch e copy; ficha interna da assessoria. +- Acervo de falas e outras verticais internas; redesenho do shell/nav/home além do card da seção. +- Forma adaptativa por dimensão real de mídia (migration/ffprobe) e qualquer mudança de schema. + +## Rabbit holes de produto + +- **"Já que verticaliza, redesenha a Central inteira".** Se alguém "só completar": novo board, nova hierarquia, header, filtros. **Corte neste item:** só o enquadramento dos cards e a grade existentes. +- **"Masonry/altura variável por peça".** Se alguém "só completar": layout novo, colunas quebradas, e2e de overflow refeito. **Corte:** grade atual, uma forma por tipo de peça. +- **"Detecta a dimensão de toda mídia agora".** Se alguém "só completar": migration de width/height, ffprobe no acervo, backfill. **Corte:** v1 decide pelo tipo; adaptativa é decisão de implementação futura, não requisito. +- **"Cover em tudo para o board ficar uniforme".** Se alguém "só completar": corta o vertical para preencher o slot e destrói o pedido. **Corte:** vertical inteiro; horizontal em letterbox. +- **"Autoplay no card para aproveitar o formato".** Se alguém "só completar": vídeo carregando no board, quebra do contrato do S27. **Corte:** mídia só no toque, como hoje. + +## Questões em aberto (produto) + +- **Forma por tipo ou adaptativa pela dimensão real da mídia?** **Decidido no gate:** **A** — por tipo na v1 (vídeo 9:16, foto 4:5, arte de modelo 3:4); adaptativa por dimensão real vira decisão de implementação posterior, sem migration/ffprobe nesta fatia. +- **Foto compacta continua linha ou vira card vertical cheio?** **Decidido no gate:** **A** — mantém a linha compacta e corrige o enquadramento do thumb (96×120, 4:5), preservando a leitura de varredura do board. +- **A página da peça entra no mesmo item?** **Decidido no gate:** **A** — sim, `ContentPieceDetail` com o mesmo palco vertical (coerência card→detalhe; cena 05 do artefato). +- **Onde ficam as ações no card vertical?** **Decidido no gate:** **A** — abaixo da mídia, como hoje; mantém os alvos de toque do S27. +- **Áudio e link ficam verticais ou largos?** **Decidido no gate:** **B** — permanecem largos (não há enquadramento a preservar); decisão fechada no artefato. + +## Referências + +- GitHub Issue — a registrar (`pnpm agent:register`). +- Design UI (gate): `docs/plans/central-conteudos-cards-verticais-ui-design.html`. +- Planos irmãos: `central-conteudos-publica.md` (S27) · `central-conteudos-cards-no-catalogo.md` (S38) · `central-conteudos-secao-home.md` (S39) · `central-conteudos-secao-home-share-filtro.md` (S42) · `central-conteudos-preview-frame-video.md` e `-impl.md:91` (C226, D5 superseded na parte do 16:9) · `central-conteudos-carrossel.md` (C240, #1399). +- Arquivos-pista: `src/components/conteudos/ContentPieceCard.tsx:99-162` · `ContentPieceCatalog.tsx:47-79` · `ContentPieceHomeCard.tsx:74-87` · `ContentPieceHomeBoard.tsx:241-245` · `ContentCatalogCardItem.tsx:23-109` · `ContentPieceMedia.tsx:110-277` · `ContentPieceDetail.tsx:53-61` · `src/lib/contentPieceCatalog.ts:364-411,672-680,757-763` · `src/components/campaign/.../CardModelTile.tsx:16,44-45` e `src/lib/cardModels.ts:90-161`. +- Testes: `tests/e2e/frontendConteudos.e2e.spec.ts:212-224,342,360,745-805,908-912` · units de `contentPieceMedia`/`contentPieceHomeSelection`/`contentPieceCatalog` · `scripts/lib/e2e-affected-manifest.mjs:170-201`. +- `AGENTS-public.md` — convenções do site público (mídia, cache, kill switch). + +## Self-score (shaping) + +**5/5** — (1) fatia = um outcome verificável (vertical inteiro, horizontal em letterbox, no catálogo e na home); (2) appetite ~1–2 dias cabe: enquadramento no slot/cards existentes, sem rota, tela ou migração; (3) persona/job/aceite em linguagem de produto, com a regra central e os guardrails; (4) direção no codebase é hipótese, com achados e precedentes citados como pista; (5) zero decisão dura de engenharia — sem schema/migration/ffprobe, com as cinco dúvidas de produto posicionadas e as relações C240/C228 registradas.