@meistrari/minuta-nuxt 0.1.0 → 1.0.0

package/README.md

@@ -66,6 +66,93 @@ const minuta = await createMinuta({
 // navegue para a tela que renderiza <MinutaEmbed :minuta-id="minuta.id" />
 ```
 
+Para peça de texto fixo com campos variáveis, sem agente, veja
+[Templates e variáveis](#templates-e-variáveis).
+
+## Templates e variáveis
+
+Nem toda peça precisa de agente. Quando o texto já está decidido e o que muda
+são alguns campos — petições intermediárias, ofícios, requerimentos de rotina —
+existe o caminho **template**: um documento com placeholders, escrito no mesmo
+editor A4, que vira minuta pronta no mesmo request, sem passar por agente
+nenhum.
+
+**O CDB não guarda template.** Quem guarda é o app hospedeiro, que já tem
+cadastro para isso. O que o embed entrega é o editor e o formato; o que o CDB
+faz é trocar placeholder por valor.
+
+### Escrever o template
+
+```vue
+<MinutaTemplateEditor
+    v-model="cadastro.templateHtml"
+    :variables="CATALOGO"
+    style="height: 100vh"
+    @update:used-variables="keys => cadastro.variaveis = keys"
+/>
+```
+
+O catálogo é um array plano, definido pelo host — o CDB não sabe o que significa
+nenhuma dessas chaves:
+
+```ts
+const CATALOGO = [
+    { key: 'PROCESSO', label: 'Nº do Processo', description: 'De info_processos.processo', group: 'Processo' },
+    { key: 'NOME_REU', label: 'Nome do Réu', group: 'Réu' },
+]
+```
+
+No documento, o advogado digita `/` (ou usa o botão `{ }` da barra), busca **pelo
+rótulo** e insere. O placeholder é um nó atômico: seleciona inteiro, apaga
+inteiro, e negrito/fonte aplicam nele por completo. Não dá para digitar uma
+chave que não existe, e não dá para partir uma pela metade ao formatar —
+que é o motivo de ser nó, e não `#NOME_VARIAVEL` no texto.
+
+`update:used-variables` devolve as chaves usadas, na ordem do documento e sem
+repetição. É com ela que o host sabe o que perguntar; ele nunca precisa ler o
+HTML.
+
+### Gerar a peça
+
+```ts
+const minuta = await createMinuta({
+    name: 'Requerimento — contrato 123',
+    templateHtml: cadastro.templateHtml,
+    variables: { PROCESSO: '1234567-89.2026.8.26.0100', NOME_REU: null },
+})
+
+minuta.status          // 'READY' — sem agente, sem polling
+minuta.missingVariables // ['NOME_REU']
+```
+
+Só texto nos valores: número e data chegam já formatados pelo host, que é quem
+sabe se `1234.5` é `R$ 1.234,50`. `null` significa "não resolveu".
+
+**Variável sem valor não some.** Ela continua sendo um placeholder vivo dentro
+do documento, no parágrafo em que está — quem abrir a minuta vê o buraco onde
+ele fica, em vez de descobrir que falta algo por um botão desabilitado. O host
+decide o que fazer com `missingVariables` (abrir pendência, bloquear o
+protocolo, ou deixar preencher no editor mesmo).
+
+`templateHtml` e `agentId` se excluem: mandar os dois é 400.
+
+### Props do `<MinutaTemplateEditor>`
+
+| Prop | Default | Descrição |
+|---|---|---|
+| `modelValue` | `''` | HTML do template (`v-model`) |
+| `variables` | `[]` | catálogo `{ key, label, description?, group? }` |
+| `editable` | `true` | permite editar |
+| `showToolbar` | `true` | barra com o resumo das variáveis usadas |
+| `margins` | 2,5cm/3cm | margens da página em px @96dpi |
+| `chrome` | `null` | cabeçalho/rodapé; `v-model:chrome` para persistir |
+
+Eventos: `update:modelValue`, `update:usedVariables`, `update:chrome`,
+`ready(editor)`. Slots: `toolbar-start`, `toolbar-end`.
+`defineExpose`: `getHtml()`, `usedVariables`, `editor`.
+
+Playground: `bun run dev` e abra `/?template`.
+
 ### Props do `<MinutaEmbed>`
 
 | Prop | Default | Descrição |
@@ -75,10 +162,20 @@ const minuta = await createMinuta({
 | `autoSave` | `true` | salva 2s após a última edição |
 | `showToolbar` | `true` | barra com nome, estado de save e export |
 | `margins` | 2,5cm/3cm | margens da página em px @96dpi |
+| `renamable` | segue `editable` | nome editável na própria barra |
+| `chatAgentId` | `null` | id de plataforma do agente assistente; sem ele, o chat não aparece |
 
 Eventos: `ready(editor)`, `saved(minuta)`, `error(message)`.
+Slot: `toolbar-start` (o host injeta navegação própria, ex.: botão voltar).
 `defineExpose`: `saveNow()`, `exportDocx()`, `editor`.
 
+**Dois agentes, dois lugares.** O que *escreve* a minuta vai no `agentId` da
+chamada de criação acima — é decisão de quem cria, e cada app manda o seu (o
+mesmo campo existe na Data API, para quem cria do servidor; a env
+`MINUTA_AVULSA_AGENT` do CDB é só o default de quem não mandar nada). O que
+*edita pelo chat* é prop do componente (`chatAgentId`), porque vive dentro da
+tela de edição.
+
 A barra do embed inclui **Histórico**: versões são criadas automaticamente
 conforme o documento é editado (snapshot no auto-save, com espaçamento mínimo
 de 10 min) e podem ser restauradas — o estado atual vira um snapshot antes.

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/minuta-nuxt",
   "configKey": "minutaNuxt",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/MinutaAnnotationsGutter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Editor } from '@tiptap/core'
-import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import type { MinutaAnalysis } from '../composables/useMinutaApi'
 import { annotationY, applyAnnotationDecorations, findTextRange, getAnnotationDecorationRanges, getUserEditRanges, locateAnnotationDetailed, scrollToAnnotation, setUserEditRanges, trackUserEdits } from '../composables/annotationAnchors'
 
@@ -66,6 +66,9 @@ function metaFor(item: GutterItem) {
 }
 
 const items = ref<GutterItem[]>([])
+/** itens sem `range`: a análise não trouxe âncora ou o trecho sumiu do texto */
+const orphanCount = computed(() => items.value.filter(i => !i.range).length)
+const noticeRef = ref<HTMLElement | null>(null)
 const activeId = ref<string | null>(null)
 const cardRefs = new Map<string, HTMLElement>()
 
@@ -84,17 +87,24 @@ function flatten(): GutterItem[] {
         manual: anno.manual,
         trechoOriginal: anno.trechoOriginal,
     })
+    /**
+     * `onde` é a âncora de reserva (seção da peça) quando não há `trecho`. Uma
+     * geração em produção escreveu `secao` no lugar de `onde` e derrubou até
+     * esse fallback — aceitar o sinônimo custa uma linha e salva a tela de
+     * uma análise fora do contrato.
+     */
+    const onde = (anno: { onde?: string, secao?: string }) => anno.onde ?? anno.secao
     analysis.teses?.forEach((tese, i) => {
-        out.push({ id: `tese-${i}`, kind: 'tese', source: { key: 'teses', index: i }, title: tese.titulo, body: tese.fundamento, onde: tese.onde, ...anchor(tese), range: null, y: null, finalY: 0 })
+        out.push({ id: `tese-${i}`, kind: 'tese', source: { key: 'teses', index: i }, title: tese.titulo, body: tese.fundamento, onde: onde(tese), ...anchor(tese), range: null, y: null, finalY: 0 })
     })
     analysis.jurisprudencias?.forEach((juris, i) => {
-        out.push({ id: `juris-${i}`, kind: 'jurisprudencia', source: { key: 'jurisprudencias', index: i }, title: juris.referencia, body: juris.tese, onde: juris.onde, ...anchor(juris), range: null, y: null, finalY: 0 })
+        out.push({ id: `juris-${i}`, kind: 'jurisprudencia', source: { key: 'jurisprudencias', index: i }, title: juris.referencia, body: juris.tese, onde: onde(juris), ...anchor(juris), range: null, y: null, finalY: 0 })
     })
     analysis.citacoes?.forEach((citacao, i) => {
-        out.push({ id: `cit-${i}`, kind: 'citacao', source: { key: 'citacoes', index: i }, title: citacao.referencia, body: citacao.como, onde: citacao.onde, ...anchor(citacao), range: null, y: null, finalY: 0 })
+        out.push({ id: `cit-${i}`, kind: 'citacao', source: { key: 'citacoes', index: i }, title: citacao.referencia, body: citacao.como, onde: onde(citacao), ...anchor(citacao), range: null, y: null, finalY: 0 })
     })
     analysis.fatos?.forEach((fato, i) => {
-        out.push({ id: `fato-${i}`, kind: 'fato', source: { key: 'fatos', index: i }, title: fato.dado, onde: fato.onde, documento: fato.documento, pagina: fato.pagina, ...anchor(fato), range: null, y: null, finalY: 0 })
+        out.push({ id: `fato-${i}`, kind: 'fato', source: { key: 'fatos', index: i }, title: fato.dado, onde: onde(fato), documento: fato.documento, pagina: fato.pagina, ...anchor(fato), range: null, y: null, finalY: 0 })
     })
     return out
 }
@@ -230,7 +240,9 @@ async function compute() {
 
     // passo 2: resolve sobreposição com as alturas reais renderizadas
     await nextTick()
-    let cursor = 8
+    // os cards são absolutos; o aviso é o único elemento no fluxo, então a
+    // primeira posição livre começa abaixo dele (senão ele cobre o 1º card)
+    let cursor = 8 + (noticeRef.value?.offsetHeight ? noticeRef.value.offsetHeight + 8 : 0)
     for (const item of items.value) {
         const desired = item.y ?? cursor
         item.finalY = Math.max(desired, cursor)
@@ -259,9 +271,13 @@ function syncDecorations() {
 }
 
 function onCardClick(item: GutterItem) {
+    // card sem âncora não tem para onde levar: ativá-lo só apagaria o destaque
+    // do card que está ativo, e ele já se apresenta como inerte (cursor normal)
+    if (!item.range)
+        return
     activeId.value = item.id
     syncDecorations()
-    if (item.range && props.editor)
+    if (props.editor)
         scrollToAnnotation(props.editor, item.range.from, props.scrollContainer)
 }
 
@@ -316,6 +332,12 @@ onUnmounted(() => {
 
 <template>
     <div ref="rootRef" class="minuta-gutter">
+        <!-- análise sem âncora: sem `trecho` não há onde grudar o card; diz isso
+             em vez de empilhar tudo no topo com clique morto -->
+        <div v-if="items.length && orphanCount === items.length" ref="noticeRef" class="minuta-gutter-notice">
+            Esta análise veio sem os trechos de referência, então os itens não
+            estão ligados a pontos do texto.
+        </div>
         <div
             v-for="item in items"
             :key="item.id"
@@ -326,6 +348,7 @@ onUnmounted(() => {
                 'minuta-gutter-card--orphan': !item.range,
             }"
             :style="{ transform: `translateY(${item.finalY}px)` }"
+            :title="item.range ? undefined : 'Sem trecho de referência: não dá para localizar no texto'"
             @click="onCardClick(item)"
         >
             <div class="minuta-gutter-card__kind">
@@ -361,7 +384,7 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.minuta-gutter{height:100%;left:calc(100% + 16px);pointer-events:none;position:absolute;top:0;width:264px;z-index:20}.minuta-gutter-card{background:#fff;border:.5px solid #dee3e7;border-radius:10px;cursor:pointer;left:0;padding:8px 12px;pointer-events:auto;position:absolute;right:0;transition:border-color .15s ease,background .15s ease,transform .2s ease}.minuta-gutter-card:hover{border-color:#b6bcc6}.minuta-gutter-card--active{background:#fafbfc;border-color:#565d69}.minuta-gutter-card--orphan{border-style:dashed;opacity:.7}.minuta-gutter-card__source{align-items:baseline;border-top:.5px solid #eceef1;display:flex;gap:8px;justify-content:space-between;margin-top:5px;padding-top:5px}.minuta-gutter-card__source-text{color:#9ca3af;font-size:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minuta-gutter-card__source-btn{background:none;border:none;color:#565d69;cursor:pointer;flex-shrink:0;font-size:10px;font-weight:500;padding:0}.minuta-gutter-card__source-btn:hover{color:#111827;text-decoration:underline}.minuta-gutter-card__badge{align-items:center;border-radius:999px;display:inline-flex;flex-shrink:0;font-size:9.5px;font-weight:650;letter-spacing:.05em;line-height:1.5;padding:1px 7px;text-transform:uppercase}.minuta-gutter-card__kind{align-items:center;display:flex;gap:6px;margin-bottom:4px;min-width:0}.minuta-gutter-card__onde{color:#b6bcc6;font-size:10px;font-weight:400;letter-spacing:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;text-transform:none;white-space:nowrap}.minuta-gutter-card__title{color:#111827;font-size:12px;font-weight:590;line-height:1.35;margin:0}.minuta-gutter-card__body{color:#6b7280;display:-webkit-box;font-size:11px;-webkit-line-clamp:3;line-height:1.45;margin:3px 0 0;-webkit-box-orient:vertical;overflow:hidden}
+.minuta-gutter{height:100%;left:calc(100% + 16px);pointer-events:none;position:absolute;top:0;width:264px;z-index:20}.minuta-gutter-card{background:#fff;border:.5px solid #dee3e7;border-radius:10px;cursor:pointer;left:0;padding:8px 12px;pointer-events:auto;position:absolute;right:0;transition:border-color .15s ease,background .15s ease,transform .2s ease}.minuta-gutter-card:hover{border-color:#b6bcc6}.minuta-gutter-card--active{background:#fafbfc;border-color:#565d69}.minuta-gutter-card--orphan{border-style:dashed;cursor:default;opacity:.7}.minuta-gutter-notice{background:#fafbfc;border:.5px solid #e5e7eb;border-radius:8px;color:#6b7280;font-size:11.5px;line-height:1.45;margin-bottom:8px;padding:8px 10px;position:relative}.minuta-gutter-card__source{align-items:baseline;border-top:.5px solid #eceef1;display:flex;gap:8px;justify-content:space-between;margin-top:5px;padding-top:5px}.minuta-gutter-card__source-text{color:#9ca3af;font-size:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minuta-gutter-card__source-btn{background:none;border:none;color:#565d69;cursor:pointer;flex-shrink:0;font-size:10px;font-weight:500;padding:0}.minuta-gutter-card__source-btn:hover{color:#111827;text-decoration:underline}.minuta-gutter-card__badge{align-items:center;border-radius:999px;display:inline-flex;flex-shrink:0;font-size:9.5px;font-weight:650;letter-spacing:.05em;line-height:1.5;padding:1px 7px;text-transform:uppercase}.minuta-gutter-card__kind{align-items:center;display:flex;gap:6px;margin-bottom:4px;min-width:0}.minuta-gutter-card__onde{color:#b6bcc6;font-size:10px;font-weight:400;letter-spacing:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;text-transform:none;white-space:nowrap}.minuta-gutter-card__title{color:#111827;font-size:12px;font-weight:590;line-height:1.35;margin:0}.minuta-gutter-card__body{color:#6b7280;display:-webkit-box;font-size:11px;-webkit-line-clamp:3;line-height:1.45;margin:3px 0 0;-webkit-box-orient:vertical;overflow:hidden}
 </style>
 
 <style>

package/dist/runtime/components/MinutaDocumentViewer.vue

@@ -1,17 +1,33 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import type { MinutaFile } from '../composables/useMinutaApi'
 import { useMinutaApi } from '../composables/useMinutaApi'
 
 /**
- * Overlay de visualização dos documentos do caso (imagem/texto/iframe),
- * aberto pelos cards de fato extraído da margem ou pelo botão Documentos.
+ * Overlay de visualização dos documentos do caso, aberto pelos cards de fato
+ * extraído da margem ou pelo botão Documentos.
+ *
+ * O documento é baixado com `fetch` e exibido a partir de uma `blob:` URL, e
+ * não apontando o `<iframe>` direto para a URL presignada do Vault.
+ *
+ * O sintoma que isso corrige é o "modal em branco que começa a baixar a peça",
+ * e ele tem duas causas possíveis que produzem exatamente a mesma tela:
+ *
+ * 1. a URL presignada responde `Content-Disposition: attachment` — o iframe
+ *    navega, o browser trata a navegação como download, e vale até para PDF;
+ * 2. o arquivo é de um formato que o browser não renderiza (docx, xlsx), e aí
+ *    o iframe baixa mesmo sem disposition nenhum.
+ *
+ * A `blob:` URL resolve (1): o disposition da origem não a acompanha, e o tipo
+ * do blob é o que dissermos que é. A classificação por tipo resolve (2): o que
+ * o browser não abre ganha um cartão com botão de baixar, em vez de cair no
+ * mesmo `else` do PDF e baixar sozinho sem nunca ter chance de aparecer.
  */
 
 const props = defineProps<{
     files: MinutaFile[]
     initialUrl?: string | null
-    /** página inicial (PDF em iframe via #page=N) */
+    /** página inicial (PDF via #page=N) */
     initialPage?: number | null
 }>()
 
@@ -19,42 +35,169 @@ const emit = defineEmits<{ close: [], error: [message: string] }>()
 
 const { getDownloadUrl } = useMinutaApi()
 
+type ViewerKind = 'image' | 'text' | 'pdf' | 'binary'
+type ViewerContent = { kind: ViewerKind, src: string, text?: string, sizeLabel?: string }
+
 const selected = ref(props.initialUrl || props.files[0]?.url || '')
-const content = ref<{ src: string, kind: 'image' | 'text' | 'frame', text?: string } | null>(null)
+const content = ref<ViewerContent | null>(null)
 const loading = ref(false)
+const loadError = ref<string | null>(null)
 
 const currentName = computed(() => props.files.find(f => f.url === selected.value)?.name ?? '')
 
+const IMAGE_RE = /\.(?:png|jpe?g|gif|webp|avif|bmp|svg)$/i
+const TEXT_RE = /\.(?:txt|md|json|csv|tsv|log|xml|ya?ml)$/i
+const PDF_RE = /\.pdf$/i
+
+/**
+ * O nome do arquivo manda; o `Content-Type` do blob é a reserva.
+ *
+ * Referência do Vault costuma trazer o nome original (extensão junto), mas
+ * upload sem extensão existe — e aí adivinhar pelo tipo é melhor do que mandar
+ * tudo para o cartão de download.
+ */
+function classify(name: string, mimeType: string): ViewerKind {
+    if (IMAGE_RE.test(name))
+        return 'image'
+    if (PDF_RE.test(name))
+        return 'pdf'
+    if (TEXT_RE.test(name))
+        return 'text'
+    if (mimeType.startsWith('image/'))
+        return 'image'
+    if (mimeType === 'application/pdf')
+        return 'pdf'
+    if (mimeType.startsWith('text/') || mimeType === 'application/json')
+        return 'text'
+    return 'binary'
+}
+
+function formatSize(bytes: number): string {
+    if (bytes < 1024)
+        return `${bytes} B`
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+/** só uma `blob:` viva por vez — sem isto, abrir 10 documentos segura os 10 na memória */
+let objectUrl: string | null = null
+function releaseObjectUrl() {
+    if (objectUrl) {
+        URL.revokeObjectURL(objectUrl)
+        objectUrl = null
+    }
+}
+
+let loadToken = 0
+
+/**
+ * Uma carga só pode escrever no estado se ainda for a carga corrente.
+ *
+ * Vale depois de CADA await, não só do primeiro: `blob.text()` de um arquivo
+ * grande termina depois de o usuário já ter trocado de documento, e escreveria
+ * o conteúdo antigo sob o nome novo.
+ *
+ * O desmonte também invalida (incrementa o token), e não só revoga a `blob:`
+ * atual: sem isso, uma carga em voo criaria uma `blob:` DEPOIS da limpeza —
+ * URL que ninguém mais revoga, segurando os bytes do arquivo pelo resto da vida
+ * da página.
+ */
+function isStale(token: number): boolean {
+    return token !== loadToken
+}
+
 async function load() {
     const file = props.files.find(f => f.url === selected.value)
     if (!file)
         return
+
+    const token = ++loadToken
     loading.value = true
+    loadError.value = null
     content.value = null
+
     try {
-        const src = await getDownloadUrl(file.url)
-        if (/\.(png|jpe?g|gif|webp|svg)$/i.test(file.name)) {
-            content.value = { src, kind: 'image' }
-        }
-        else if (/\.(txt|md|json|csv|log)$/i.test(file.name)) {
-            const text = await (await fetch(src)).text()
-            content.value = { src, kind: 'text', text }
+        const downloadUrl = await getDownloadUrl(file.url)
+        const response = await fetch(downloadUrl)
+        if (!response.ok)
+            throw new Error(`HTTP ${response.status}`)
+        const blob = await response.blob()
+        if (isStale(token))
+            return
+
+        const kind = classify(file.name, blob.type || '')
+
+        if (kind === 'text') {
+            const text = await blob.text()
+            if (isStale(token))
+                return
+            releaseObjectUrl()
+            content.value = { kind, src: '', text }
+            return
         }
-        else {
-            const isPdf = /\.pdf$/i.test(file.name)
-            const page = props.initialPage && file.url === props.initialUrl ? `#page=${props.initialPage}` : ''
-            content.value = { src: isPdf ? src + page : src, kind: 'frame' }
+
+        // daqui até o fim é síncrono: a checagem acima ainda vale, e nada é
+        // criado depois de a carga ter sido invalidada
+
+        // o tipo do blob manda no que o browser faz com ele: forçar
+        // application/pdf faz o visualizador nativo abrir mesmo quando o Vault
+        // devolveu octet-stream
+        const typed = kind === 'pdf' && blob.type !== 'application/pdf'
+            ? new Blob([blob], { type: 'application/pdf' })
+            : blob
+
+        releaseObjectUrl()
+        objectUrl = URL.createObjectURL(typed)
+        const page = kind === 'pdf' && props.initialPage && file.url === props.initialUrl
+            ? `#page=${props.initialPage}`
+            : ''
+        content.value = {
+            kind,
+            src: objectUrl + page,
+            sizeLabel: formatSize(blob.size),
         }
     }
     catch {
+        if (isStale(token))
+            return
+        loadError.value = 'Não consegui carregar o documento.'
         emit('error', 'Não consegui carregar o documento')
     }
     finally {
-        loading.value = false
+        if (!isStale(token))
+            loading.value = false
     }
 }
 
+/**
+ * Baixar de propósito. O `download` de uma `blob:` URL não depende do
+ * disposition da origem, então funciona igual para PDF e para docx.
+ */
+function downloadCurrent() {
+    const current = content.value
+    if (!current)
+        return
+    const link = document.createElement('a')
+    link.download = currentName.value || 'documento'
+    if (current.kind === 'text') {
+        const href = URL.createObjectURL(new Blob([current.text ?? ''], { type: 'text/plain' }))
+        link.href = href
+        link.click()
+        URL.revokeObjectURL(href)
+        return
+    }
+    // sem o fragmento `#page=`: ele é do visualizador, não do arquivo
+    link.href = current.src.split('#')[0]!
+    link.click()
+}
+
 watch(selected, load, { immediate: true })
+onBeforeUnmount(() => {
+    // invalida antes de revogar: ver `isStale`
+    loadToken++
+    releaseObjectUrl()
+})
 </script>
 
 <template>
@@ -68,17 +211,38 @@ watch(selected, load, { immediate: true })
                         </option>
                     </select>
                     <span v-else>{{ currentName }}</span>
-                    <button type="button" @click="emit('close')">
-                        ×
-                    </button>
+                    <div class="minuta-viewer__actions">
+                        <button v-if="content" type="button" class="minuta-viewer__download" @click="downloadCurrent">
+                            Baixar
+                        </button>
+                        <button type="button" class="minuta-viewer__close" @click="emit('close')">
+                            ×
+                        </button>
+                    </div>
                 </div>
                 <div class="minuta-viewer__body">
                     <p v-if="loading" class="minuta-viewer__loading">
                         Carregando…
                     </p>
-                    <img v-else-if="content?.kind === 'image'" :src="content.src">
+                    <p v-else-if="loadError" class="minuta-viewer__loading">
+                        {{ loadError }}
+                    </p>
+                    <img v-else-if="content?.kind === 'image'" :src="content.src" :alt="currentName">
                     <pre v-else-if="content?.kind === 'text'">{{ content.text }}</pre>
-                    <iframe v-else-if="content" :src="content.src" />
+                    <iframe v-else-if="content?.kind === 'pdf'" :src="content.src" :title="currentName" />
+                    <!-- formato que o browser não abre: cartão explícito, e não
+                         um iframe em branco que dispara download sozinho -->
+                    <div v-else-if="content" class="minuta-viewer__binary">
+                        <p class="minuta-viewer__binary-name">
+                            {{ currentName }}
+                        </p>
+                        <p class="minuta-viewer__binary-hint">
+                            Este formato não abre no navegador{{ content.sizeLabel ? ` — ${content.sizeLabel}` : '' }}.
+                        </p>
+                        <button type="button" class="minuta-viewer__download" @click="downloadCurrent">
+                            Baixar arquivo
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -86,5 +250,5 @@ watch(selected, load, { immediate: true })
 </template>
 
 <style scoped>
-.minuta-viewer__overlay{align-items:center;background:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:100}.minuta-viewer__modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,.2);display:flex;flex-direction:column;height:100%;max-height:90vh;max-width:960px;overflow:hidden;width:100%}.minuta-viewer__head{align-items:center;border-bottom:1px solid #e5e7eb;color:#111827;display:flex;font-size:14px;font-weight:600;gap:12px;justify-content:space-between;padding:10px 16px}.minuta-viewer__head select{background:#fff;border:.5px solid #d4d9df;border-radius:6px;font-size:13px;max-width:70%;padding:4px 8px}.minuta-viewer__head button{background:none;border:none;color:#6b7280;cursor:pointer;font-size:18px;line-height:1}.minuta-viewer__body{background:#f9fafb;flex:1;min-height:0;overflow-y:auto}.minuta-viewer__loading{color:#6b7280;font-size:13px;padding:24px}.minuta-viewer__body img{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.minuta-viewer__body pre{color:#1f2937;font-size:13px;line-height:1.6;margin:0;padding:20px;white-space:pre-wrap}.minuta-viewer__body iframe{border:0;height:100%;width:100%}
+.minuta-viewer__overlay{align-items:center;background:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:100}.minuta-viewer__modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,.2);display:flex;flex-direction:column;height:100%;max-height:90vh;max-width:960px;overflow:hidden;width:100%}.minuta-viewer__head{align-items:center;border-bottom:1px solid #e5e7eb;color:#111827;display:flex;font-size:14px;font-weight:600;gap:12px;justify-content:space-between;padding:10px 16px}.minuta-viewer__head select{background:#fff;border:.5px solid #d4d9df;border-radius:6px;font-size:13px;max-width:70%;padding:4px 8px}.minuta-viewer__actions{align-items:center;display:flex;gap:8px}.minuta-viewer__close{background:none;border:none;color:#6b7280;cursor:pointer;font-size:18px;line-height:1}.minuta-viewer__download{background:#fff;border:.5px solid #d4d9df;border-radius:6px;color:#374151;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;padding:4px 10px}.minuta-viewer__download:hover{background:#f9fafb}.minuta-viewer__binary{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;padding:24px;text-align:center}.minuta-viewer__binary-name{color:#111827;font-size:14px;font-weight:500;margin:0;word-break:break-all}.minuta-viewer__binary-hint{color:#6b7280;font-size:13px;margin:0}.minuta-viewer__body{background:#f9fafb;flex:1;min-height:0;overflow-y:auto}.minuta-viewer__loading{color:#6b7280;font-size:13px;padding:24px}.minuta-viewer__body img{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.minuta-viewer__body pre{color:#1f2937;font-size:13px;line-height:1.6;margin:0;padding:20px;white-space:pre-wrap}.minuta-viewer__body iframe{border:0;height:100%;width:100%}
 </style>