@meistrari/minuta-nuxt 0.1.0 → 1.1.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.1.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'
 
@@ -15,6 +15,11 @@ const props = defineProps<{
     analysis: MinutaAnalysis
     /** container com scroll do documento (para o scroll suave ao clicar) */
     scrollContainer: HTMLElement | null
+    /**
+     * Modo lista: em tela estreita não há margem onde ancorar os cards, então
+     * eles viram uma coluna em fluxo normal (dentro de um painel lateral).
+     */
+    compact?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -66,6 +71,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 +92,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 +245,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 +276,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)
 }
 
@@ -290,7 +311,7 @@ watch(() => props.editor, (editor, old) => {
 }, { immediate: true })
 
 onMounted(() => {
-    const sheet = rootRef.value?.parentElement
+    const sheet = props.compact ? null : rootRef.value?.parentElement
     if (sheet) {
         // como o Google Docs: com os comentários abertos, a folha desloca pra
         // esquerda pra dar lugar à coluna (a classe vive enquanto o gutter vive)
@@ -315,7 +336,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div ref="rootRef" class="minuta-gutter">
+    <div ref="rootRef" class="minuta-gutter" :class="{ 'minuta-gutter--compact': props.compact }">
+        <!-- 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"
@@ -325,7 +352,8 @@ onUnmounted(() => {
                 'minuta-gutter-card--active': activeId === item.id,
                 'minuta-gutter-card--orphan': !item.range,
             }"
-            :style="{ transform: `translateY(${item.finalY}px)` }"
+            :style="props.compact ? undefined : { 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 +389,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--compact{display:flex;flex-direction:column;gap:8px;position:static;width:100%}.minuta-gutter--compact .minuta-gutter-card{position:static;transform:none!important}.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

@@ -4,57 +4,98 @@ 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.
+ * Visualização dos documentos do caso, aberta pelos cards de fato extraído da
+ * margem ou pelo botão Documentos.
+ *
+ * O corpo é o `TelaPreview` do Tela Build — o mesmo visualizador que o resto
+ * do produto usa. Ele resolve o que a implementação anterior (um `<iframe>`
+ * apontando para uma `blob:` URL) não resolvia:
+ *
+ * - **destaque do trecho.** O card de fato manda `highlight`, e antes esse
+ *   campo era recebido e descartado: o visualizador nativo do Chrome não tem
+ *   API de destaque. O TelaPreview aceita `highlightText`/`highlightPage`.
+ * - zoom, navegação por página, modo arrasto e tela cheia, que o `<iframe>`
+ *   delegava à barra cinza do browser.
+ * - `vault://` resolvido por `resolveFileUrl`, e o cartão de download para
+ *   formato que o navegador não abre.
  */
 
 const props = defineProps<{
     files: MinutaFile[]
     initialUrl?: string | null
-    /** página inicial (PDF em iframe via #page=N) */
+    /** página para onde rolar e destacar */
     initialPage?: number | null
+    /** trecho a destacar na página (vem do card de fato extraído) */
+    highlight?: string | null
 }>()
 
 const emit = defineEmits<{ close: [], error: [message: string] }>()
 
 const { getDownloadUrl } = useMinutaApi()
+const { pdfLoader } = usePdfLoader()
 
 const selected = ref(props.initialUrl || props.files[0]?.url || '')
-const content = ref<{ src: string, kind: 'image' | 'text' | 'frame', text?: string } | null>(null)
-const loading = ref(false)
+watch(() => props.initialUrl, (url) => {
+    if (url)
+        selected.value = url
+})
 
-const currentName = computed(() => props.files.find(f => f.url === selected.value)?.name ?? '')
+const EXT_MIME: Record<string, string> = {
+    pdf: 'application/pdf',
+    png: 'image/png',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    webp: 'image/webp',
+    svg: 'image/svg+xml',
+    txt: 'text/plain',
+    md: 'text/markdown',
+    csv: 'text/csv',
+    json: 'application/json',
+}
+
+function mimeOf(name: string): string {
+    const ext = name.split('.').pop()?.toLowerCase() ?? ''
+    return EXT_MIME[ext] ?? 'application/octet-stream'
+}
 
-async function load() {
-    const file = props.files.find(f => f.url === selected.value)
+/** o seletor do TelaPreview agrupa por "variável"; aqui só há uma categoria */
+const fileOptions = computed(() => props.files.map(file => ({
+    variable: 'Documentos do caso',
+    file: file.name,
+    value: file.url,
+    mimeType: mimeOf(file.name),
+})))
+
+const currentFile = computed(() => {
+    const file = props.files.find(f => f.url === selected.value) ?? props.files[0]
     if (!file)
-        return
-    loading.value = true
-    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 }
-        }
-        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' }
-        }
+        return null
+    return {
+        id: file.url,
+        fileName: file.name,
+        fileUrl: file.url,
+        fileType: mimeOf(file.name),
     }
-    catch {
-        emit('error', 'Não consegui carregar o documento')
+})
+
+/** o destaque só vale para o documento que o card apontou */
+const highlightForCurrent = computed(() => (
+    selected.value === props.initialUrl ? props.highlight ?? null : null
+))
+const pageForCurrent = computed(() => (
+    selected.value === props.initialUrl ? props.initialPage ?? null : null
+))
+
+async function resolveFileUrl(url: string): Promise<string> {
+    try {
+        return await getDownloadUrl(url)
     }
-    finally {
-        loading.value = false
+    catch (error: any) {
+        emit('error', error?.message || 'Não foi possível abrir o documento')
+        return ''
     }
 }
-
-watch(selected, load, { immediate: true })
 </script>
 
 <template>
@@ -62,23 +103,40 @@ watch(selected, load, { immediate: true })
         <div class="minuta-viewer__overlay" @click.self="emit('close')">
             <div class="minuta-viewer__modal">
                 <div class="minuta-viewer__head">
-                    <select v-if="files.length > 1" v-model="selected">
-                        <option v-for="file in files" :key="file.url" :value="file.url">
-                            {{ file.name }}
-                        </option>
-                    </select>
-                    <span v-else>{{ currentName }}</span>
-                    <button type="button" @click="emit('close')">
-                        ×
-                    </button>
+                    <span class="minuta-viewer__title">Documentos do caso</span>
+                    <TelaButton variant="ghost" size="sm" icon="i-ph-x" @click="emit('close')" />
                 </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">
-                    <pre v-else-if="content?.kind === 'text'">{{ content.text }}</pre>
-                    <iframe v-else-if="content" :src="content.src" />
+                    <TelaPreview
+                        class="h-full"
+                        :model-value="selected"
+                        :file-options="fileOptions"
+                        :current-file="currentFile"
+                        :resolve-file-url="resolveFileUrl"
+                        :pdf-loader="pdfLoader"
+                        :highlight-text="highlightForCurrent"
+                        :highlight-page="pageForCurrent"
+                        :labels="{ selectVariable: 'Selecionar documento', file: 'Documento' }"
+                        :select-variable-labels="{
+                            placeholder: 'Selecionar documento',
+                            searchPlaceholder: 'Buscar documento...',
+                            noVariablesFound: 'Nenhum documento encontrado',
+                            variablesLabel: 'Categoria',
+                            filesLabel: 'documentos',
+                        }"
+                        :content-labels="{
+                            failedToLoadFile: 'Não foi possível carregar o documento',
+                            page: 'Página',
+                            download: 'Baixar',
+                            unableToPreview: 'Este formato não abre no navegador',
+                            zoomOut: 'Diminuir',
+                            zoomIn: 'Aumentar',
+                            handMode: 'Modo arrasto',
+                            fullscreen: 'Tela cheia',
+                            pageOf: 'de',
+                        }"
+                        @update:model-value="selected = $event"
+                    />
                 </div>
             </div>
         </div>
@@ -86,5 +144,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(15,23,42,.45);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:60}.minuta-viewer__modal{background:#fff;border-radius:12px;box-shadow:0 24px 60px rgba(15,23,42,.28);display:flex;flex-direction:column;height:min(88vh,100%);overflow:hidden;width:min(1100px,100%)}.minuta-viewer__head{align-items:center;border-bottom:1px solid rgb(0 0 0/8%);display:flex;gap:12px;justify-content:space-between;padding:10px 12px 10px 16px}.minuta-viewer__title{color:#171717;font-size:13px;font-weight:540}.minuta-viewer__body{background:#fff;flex:1;min-height:0}@media (max-width:640px){.minuta-viewer__overlay{padding:0}.minuta-viewer__modal{border-radius:0;height:100%;width:100%}}
 </style>