@meistrari/minuta-nuxt 1.1.1 → 1.2.0

package/dist/runtime/components/MinutaDocxEditor.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
-import { Editor as TiptapEditor, BubbleMenu as TiptapBubbleMenu } from '@tiptap/vue-3'
-import { sanitizeRichHtml } from '../utils/sanitizeRichHtml'
-import { vaultImageHtml } from '../composables/vaultImages'
-import { sanitizeFootnoteHtml } from '../utils/footnoteHtml'
-import MinutaIcon from './MinutaIcon.vue'
-import MinutaVariablePicker from './MinutaVariablePicker.vue'
-import type { MinutaVariableDef } from '../utils/templateVariables'
+import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
 import type { Editor } from '@tiptap/core'
-import type { PocPageConfig, PocPageNote } from '../composables/paginationPlugin'
-import { POC_ASSET_SWAP, buildPocExtensions, renumberPocFootnotes } from '../composables/editorExtensions'
-import {
-    PAGINATE_META,
-    breaksEqual,
-    computePocBreaks,
-    pocPageKey,
-} from '../composables/paginationPlugin'
+import { createMinutaEditor } from '@meistrari/minuta-editor'
+import type { MinutaEditor, MinutaVariableDef } from '@meistrari/minuta-editor'
+import '@meistrari/minuta-editor/style.css'
+
+/**
+ * Casca Vue do editor. O editor em si — folha A4, paginação, toolbar,
+ * popovers, placeholders — mora em `@meistrari/minuta-editor`, sem framework;
+ * este componente só traduz props/emits/expose para a API dele.
+ *
+ * A API pública (props, eventos, `defineExpose`, slot `gutter`) é a mesma de
+ * antes da extração: quem consome `<MinutaDocxEditor>` — o embed, o editor de
+ * template, o client do defesa.ai — não muda uma linha.
+ */
 
 const props = defineProps<{
     initialHtml: string
@@ -33,9 +31,7 @@ const props = defineProps<{
     uploadImage?: ((file: File) => Promise<{ src: string, vaultSrc: string } | null>) | null
     /**
      * Catálogo de variáveis do app hospedeiro. Com ele o editor vira editor de
-     * TEMPLATE: `/` e o botão da toolbar inserem placeholders. Vazio (o padrão),
-     * nada muda — placeholders já existentes no documento continuam sendo
-     * renderizados, só não há como inserir novos.
+     * TEMPLATE: `/` e o botão da toolbar inserem placeholders.
      */
     variables?: MinutaVariableDef[]
 }>()
@@ -46,1309 +42,75 @@ const emit = defineEmits<{
     blockClick: [blockId: string]
 }>()
 
-/** Na fase de revisão (read-only), clicar num bloco abre o bloco no checklist. */
-function onSheetClick(event: MouseEvent) {
-    if (props.editable)
-        return
-    const target = event.target as HTMLElement
-    if (target.closest('.poc-varchip') || target.closest('.poc-page-headerarea')
-        || target.closest('.poc-page-footerarea') || target.closest('.poc-first-header')
-        || target.closest('.poc-last-footer')) {
-        return
-    }
-    const block = target.closest('[data-block-id]')
-    if (block)
-        emit('blockClick', block.getAttribute('data-block-id')!)
-}
-
-const A4_WIDTH_PX = 794
-const A4_HEIGHT_PX = 1123
-const PAGE_GAP_PX = 32
-
-const pageConfig: PocPageConfig = {
-    pageHeight: A4_HEIGHT_PX,
-    margins: props.margins,
-    gap: PAGE_GAP_PX,
-    headerLogoUrl: props.header.logoUrl,
-    headerPosition: props.header.position,
-    headerText: props.chromeText.header,
-    footerText: props.chromeText.footer,
-    headerScope: props.chromeText.headerScope ?? 'all',
-    footerScope: props.chromeText.footerScope ?? 'all',
-    showPageNumber: props.chromeText.showPageNumber !== false,
-    version: 0,
-}
-
+const host = ref<HTMLElement | null>(null)
+/** a instância do Tiptap — o que os consumidores sempre receberam em `editor` */
 const editor = shallowRef<Editor | null>(null)
-const editorHost = ref<HTMLElement | null>(null)
-const sheetRef = ref<HTMLElement | null>(null)
-const createError = ref<string | null>(null)
-const totalPages = ref(1)
-const uiTick = ref(0)
-/** notas de rodapé cujas chamadas caem na ÚLTIMA página (sem chrome próprio) */
-const lastPageNotes = ref<PocPageNote[]>([])
-
-/** Reconstrói o chrome (cabeçalhos/rodapés) com os textos atuais, sem repaginar. */
-function refreshChrome() {
-    const ed = editor.value
-    if (!ed)
-        return
-    pageConfig.headerLogoUrl = props.header.logoUrl
-    pageConfig.headerPosition = props.header.position
-    pageConfig.headerText = props.chromeText.header
-    pageConfig.footerText = props.chromeText.footer
-    pageConfig.headerScope = props.chromeText.headerScope ?? 'all'
-    pageConfig.footerScope = props.chromeText.footerScope ?? 'all'
-    pageConfig.showPageNumber = props.chromeText.showPageNumber !== false
-    pageConfig.version = (pageConfig.version ?? 0) + 1
-    const current = pocPageKey.getState(ed.state)
-    if (current)
-        ed.view.dispatch(ed.state.tr.setMeta(PAGINATE_META, { ...current, breaks: [...current.breaks] }))
-}
-
-watch(
-    () => [props.chromeText.header, props.chromeText.footer, props.chromeText.headerScope, props.chromeText.footerScope, props.chromeText.showPageNumber, props.header.logoUrl, props.header.position],
-    () => refreshChrome(),
-)
-
-// --- paginação: agenda a medição fora do ciclo do PM (rAF) e só despacha se os breaks mudaram ---
-// (lone rows — linha com uma única célula preenchida — agora são node
-// decorations do plugin de paginação: sobrevivem a qualquer redraw do PM)
-let paginateScheduled = false
-function schedulePaginate() {
-    if (paginateScheduled || !editor.value || !sheetRef.value)
-        return
-    paginateScheduled = true
-    requestAnimationFrame(() => {
-        paginateScheduled = false
-        const ed = editor.value
-        const sheet = sheetRef.value
-        if (!ed || ed.isDestroyed || !sheet)
-            return
-        const { breaks, total, markers, lastNotes } = computePocBreaks(ed.view, pageConfig, sheet)
-        const notesChanged = lastNotes.length !== lastPageNotes.value.length
-        if (notesChanged)
-            lastPageNotes.value = lastNotes
-        const current = pocPageKey.getState(ed.state)
-        if (current && breaksEqual(current.breaks, breaks) && current.total === total
-            && current.markers.length === markers.length && !notesChanged) {
-            return
-        }
-        totalPages.value = total
-        ed.view.dispatch(ed.state.tr.setMeta(PAGINATE_META, { breaks, total, markers }))
-    })
-}
+/** container com scroll: o embed ancora o gutter de anotações nele */
+const containerRef = ref<HTMLElement | null>(null)
+/** a folha: alvo do Teleport do slot `gutter` */
+const sheetEl = ref<HTMLElement | null>(null)
 
-let contentObserver: ResizeObserver | null = null
+let instance: MinutaEditor | null = null
 
 onMounted(() => {
-    // chamada de nota clicada (nodeview das extensões) → abre o popover
-    window.addEventListener('poc:edit-footnote', onEditFootnoteEvent)
-    try {
-        // TiptapEditor = classe Editor de @tiptap/vue-3 (auto-import do nuxt-tiptap-editor)
-        editor.value = new TiptapEditor({
-            element: editorHost.value!,
-            content: props.initialHtml,
-            editable: props.editable,
-            extensions: buildPocExtensions(pageConfig, {
-                variables: () => props.variables ?? [],
-                handleKeyDown: onEditorKeyDown,
-            }),
-            onCreate: ({ editor }) => {
-                emit('ready', editor as Editor)
-                nextTick(() => {
-                    schedulePaginate()
-                    const pmEl = (editor as Editor).view.dom as HTMLElement
-                    contentObserver = new ResizeObserver(() => schedulePaginate())
-                    contentObserver.observe(pmEl)
-                })
-            },
-            onTransaction: ({ transaction }) => {
-                uiTick.value++
-                syncVariableTrigger(transaction.docChanged)
-                if (transaction.docChanged) {
-                    // troca de imagem fria (load progressivo) não é edição do
-                    // advogado: repagina, mas não marca o doc como sujo — senão
-                    // o autosave dispararia sozinho durante o carregamento
-                    if (!transaction.getMeta(POC_ASSET_SWAP))
-                        emit('changed')
-                    schedulePaginate()
-                }
-            },
-        }) as unknown as Editor
-    }
-    catch (error: any) {
-        createError.value = error?.message ?? String(error)
-        console.error('[poc] falha ao criar editor:', error)
-    }
-})
-
-onBeforeUnmount(() => {
-    contentObserver?.disconnect()
-    editor.value?.destroy()
-})
-
-watch(() => props.editable, (value) => {
-    editor.value?.setEditable(value)
-})
-
-// --- zoom (mesma abordagem do preview: CSS zoom quando o painel é mais estreito que A4) ---
-const containerRef = ref<HTMLElement | null>(null)
-const zoom = ref(1)
-let resizeObserver: ResizeObserver | null = null
-watch(containerRef, (el) => {
-    resizeObserver?.disconnect()
-    resizeObserver = null
-    if (!el)
-        return
-    resizeObserver = new ResizeObserver(() => {
-        // respiro lateral da folha: 48px dá moldura no desktop, mas em tela de
-        // celular custa ~13% do zoom e o texto fica ilegível
-        const breathing = el.clientWidth < 640 ? 12 : 48
-        zoom.value = Math.min(1, (el.clientWidth - breathing) / A4_WIDTH_PX)
+    if (!host.value)
+        return
+    instance = createMinutaEditor(host.value, {
+        html: props.initialHtml,
+        editable: props.editable,
+        margins: props.margins,
+        header: props.header,
+        chrome: props.chromeText,
+        // getter: o catálogo pode chegar depois do mount (host que carrega async)
+        variables: () => props.variables ?? [],
+        uploadImage: props.uploadImage ?? undefined,
+        showBlockOrigin: props.showBlockOrigin,
+        onReady: (tiptap) => {
+            editor.value = tiptap
+            emit('ready', tiptap)
+        },
+        onChange: () => emit('changed'),
+        onBlockClick: blockId => emit('blockClick', blockId),
     })
-    resizeObserver.observe(el)
-}, { immediate: true })
-onUnmounted(() => {
-    window.removeEventListener('poc:edit-footnote', onEditFootnoteEvent)
-    resizeObserver?.disconnect()
-})
-
-const sheetStyle = computed(() => ({
-    width: `${A4_WIDTH_PX}px`,
-    minHeight: `${A4_HEIGHT_PX}px`,
-    padding: `${props.margins.top}px ${props.margins.right}px ${props.margins.bottom}px ${props.margins.left}px`,
-    boxSizing: 'border-box' as const,
-    zoom: zoom.value,
-}))
-
-/** chrome em formato canvas (editor estilo Word): coordenadas no frame da página */
-function isChromeCanvas(html: string | undefined) {
-    return !!html && html.includes('data-el=')
-}
-
-const chromeCanvasStyle = computed(() => ({
-    position: 'absolute' as const,
-    top: '0',
-    left: `${-props.margins.left}px`,
-    width: '794px',
-    height: '100%',
-    pointerEvents: 'none' as const,
-}))
-
-const firstHeaderStyle = computed(() => ({
-    height: `${props.margins.top}px`,
-    left: `${props.margins.left}px`,
-    right: `${props.margins.right}px`,
-    textAlign: props.header.position,
-    lineHeight: `${props.margins.top}px`,
-}))
-
-const lastFooterStyle = computed(() => ({
-    height: `${props.margins.bottom}px`,
-    left: `${props.margins.left}px`,
-    right: `${props.margins.right}px`,
-}))
-
-/** as notas da última página encostam no rodapé, dentro da área útil */
-const lastNotesStyle = computed(() => ({
-    position: 'absolute' as const,
-    bottom: `${props.margins.bottom}px`,
-    left: `${props.margins.left}px`,
-    right: `${props.margins.right}px`,
-}))
-
-function editChrome(part: 'header' | 'footer') {
-    window.dispatchEvent(new CustomEvent('poc:edit-chrome', { detail: { part } }))
-}
-
-// --- toolbar estilo Google Docs (etapa de edição) ---
-const PALETTE = [
-    '#000000',
-    '#434343',
-    '#666666',
-    '#999999',
-    '#B7B7B7',
-    '#CCCCCC',
-    '#D9D9D9',
-    '#EFEFEF',
-    '#F3F3F3',
-    '#FFFFFF',
-    '#980000',
-    '#FF0000',
-    '#FF9900',
-    '#FFFF00',
-    '#00FF00',
-    '#00FFFF',
-    '#4A86E8',
-    '#0000FF',
-    '#9900FF',
-    '#FF00FF',
-    '#E6B8AF',
-    '#F4CCCC',
-    '#FCE5CD',
-    '#FFF2CC',
-    '#D9EAD3',
-    '#D0E0E3',
-    '#C9DAF8',
-    '#CFE2F3',
-    '#D9D2E9',
-    '#EAD1DC',
-    '#CC4125',
-    '#E06666',
-    '#F6B26B',
-    '#FFD966',
-    '#93C47D',
-    '#76A5AF',
-    '#6D9EEB',
-    '#6FA8DC',
-    '#8E7CC3',
-    '#C27BA0',
-    '#A61C00',
-    '#CC0000',
-    '#E69138',
-    '#F1C232',
-    '#6AA84F',
-    '#45818E',
-    '#3C78D8',
-    '#3D85C6',
-    '#674EA7',
-    '#A64D79',
-]
-
-const FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36]
-
-/**
- * tamanho (pt) efetivo da seleção: mark inlineStyle manda; senão o computed
- * do bloco onde o cursor está (o pipeline inlina font-size nos parágrafos)
- */
-const currentFontSizePt = computed<number | null>(() => {
-    void uiTick.value
-    const ed = editor.value
-    if (!ed)
-        return null
-    const markStyle: string | undefined = ed.getAttributes('inlineStyle')?.style
-    const fromMark = markStyle?.match(/font-size:\s*([\d.]+)\s*(pt|px)/i)
-    if (fromMark) {
-        const value = Number.parseFloat(fromMark[1])
-        return Math.round(fromMark[2].toLowerCase() === 'pt' ? value : value / (96 / 72))
-    }
-    try {
-        const { node, offset } = ed.view.domAtPos(ed.state.selection.from)
-        const el = node.nodeType === Node.TEXT_NODE
-            ? node.parentElement
-            : (node.childNodes[offset] instanceof HTMLElement ? node.childNodes[offset] as HTMLElement : node as HTMLElement)
-        if (el instanceof HTMLElement)
-            return Math.round(Number.parseFloat(getComputedStyle(el).fontSize) / (96 / 72))
-    }
-    catch {
-        // posição sem DOM (ex.: seleção de nó atômico)
-    }
-    return null
-})
-
-const openPalette = ref<'color' | 'highlight' | null>(null)
-
-const active = computed(() => {
-    void uiTick.value
-    const ed = editor.value
-    if (!ed)
-        return { bold: false, italic: false, underline: false, strike: false, bullet: false, ordered: false, heading: 0 }
-    return {
-        bold: ed.isActive('bold'),
-        italic: ed.isActive('italic'),
-        underline: ed.isActive('underline'),
-        strike: ed.isActive('strike'),
-        bullet: ed.isActive('bulletList'),
-        ordered: ed.isActive('orderedList'),
-        heading: ed.isActive('heading', { level: 1 }) ? 1 : ed.isActive('heading', { level: 2 }) ? 2 : ed.isActive('heading', { level: 3 }) ? 3 : 0,
-    }
+    containerRef.value = instance.container
+    sheetEl.value = instance.sheet
 })
 
-/** aplica uma propriedade de estilo inline preservando as demais (cor + tamanho convivem) */
-function mergeInlineStyle(prop: string, value: string) {
-    const ed = editor.value
-    if (!ed)
-        return
-    const current: string = ed.getAttributes('inlineStyle')?.style || ''
-    const cleaned = current.replace(new RegExp(`${prop}:\\s*[^;]+;?`, 'gi'), '').trim()
-    const style = `${cleaned}${cleaned && !cleaned.endsWith(';') ? ';' : ''} ${prop}: ${value};`.trim()
-    ed.chain().focus().setMark('inlineStyle', { style }).run()
-}
-
-function setTextColor(color: string) {
-    mergeInlineStyle('color', color)
-    openPalette.value = null
-}
-
-function setHighlight(color: string) {
-    mergeInlineStyle('background-color', color)
-    openPalette.value = null
-}
-
-function setFontSize(event: Event) {
-    const value = (event.target as HTMLSelectElement).value
-    if (value)
-        mergeInlineStyle('font-size', `${value}pt`)
-}
-
-/** mesmas fontes do canvas de cabeçalho/rodapé — o export lê a fonte por run */
-const DOC_FONTS = ['Arial', 'Times New Roman', 'Calibri', 'Cambria', 'Georgia', 'Garamond', 'Verdana', 'Courier New']
-
-const currentFontFamily = computed<string | null>(() => {
-    void uiTick.value
-    const ed = editor.value
-    if (!ed)
-        return null
-    const markStyle: string | undefined = ed.getAttributes('inlineStyle')?.style
-    const fromMark = markStyle?.match(/font-family:\s*([^;]+)/i)
-    if (fromMark)
-        return fromMark[1].split(',')[0].trim().replace(/["']/g, '')
-    try {
-        const { node } = ed.view.domAtPos(ed.state.selection.from)
-        const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node as HTMLElement
-        const family = el ? getComputedStyle(el).fontFamily : ''
-        return family.split(',')[0]?.trim().replace(/["']/g, '') || null
-    }
-    catch {
-        return null
-    }
+onBeforeUnmount(() => {
+    instance?.destroy()
+    instance = null
+    editor.value = null
 })
 
-function setFontFamily(event: Event) {
-    const value = (event.target as HTMLSelectElement).value
-    if (value)
-        mergeInlineStyle('font-family', value)
-}
-
-// --- notas de rodapé: popover ancorado no documento (estilo Google Docs) ---
-const footnoteEditor = ref<{ pos: number, text: string, top: number, left: number, isNew: boolean } | null>(null)
-const footnoteInputRef = ref<HTMLDivElement | null>(null)
-
-/** personalização da nota: mesmos tamanhos/cores acessíveis num clique */
-const FOOTNOTE_SIZES = [7, 8, 9, 10, 11, 12]
-const FOOTNOTE_COLORS = ['#000000', '#6b7280', '#b91c1c', '#1d4ed8', '#047857']
-
-function openFootnoteEditor(pos: number, isNew: boolean) {
-    const ed = editor.value
-    const sheet = sheetRef.value
-    if (!ed || ed.isDestroyed || !sheet)
-        return
-    const node = ed.state.doc.nodeAt(pos)
-    if (!node || node.type.name !== 'footnoteRef')
-        return
-    const coords = ed.view.coordsAtPos(pos)
-    const sheetRect = sheet.getBoundingClientRect()
-    footnoteEditor.value = {
-        pos,
-        text: node.attrs.text,
-        top: coords.bottom - sheetRect.top + 6,
-        left: Math.max(8, Math.min(coords.left - sheetRect.left, sheetRect.width - 372)),
-        isNew,
-    }
-    nextTick(() => {
-        const el = footnoteInputRef.value
-        if (!el)
-            return
-        el.innerHTML = sanitizeFootnoteHtml(footnoteEditor.value?.text ?? '')
-        el.focus()
-        // caret no fim do conteúdo
-        const sel = window.getSelection()
-        if (sel) {
-            const range = document.createRange()
-            range.selectNodeContents(el)
-            range.collapse(false)
-            sel.removeAllRanges()
-            sel.addRange(range)
-        }
-    })
-}
-
-/** B/I/U no trecho selecionado dentro do popover */
-function footnoteExec(command: 'bold' | 'italic' | 'underline') {
-    footnoteInputRef.value?.focus()
-    document.execCommand(command)
-}
-
-/** fonte/tamanho/cor no trecho selecionado (span com estilo permitido) */
-function applyFootnoteStyle(prop: 'font-family' | 'font-size' | 'color', value: string) {
-    const el = footnoteInputRef.value
-    const sel = window.getSelection()
-    if (!el || !sel || sel.rangeCount === 0)
-        return
-    const range = sel.getRangeAt(0)
-    if (!el.contains(range.commonAncestorContainer) || range.collapsed)
-        return
-    const span = document.createElement('span')
-    span.style.setProperty(prop, value)
-    span.appendChild(range.extractContents())
-    range.insertNode(span)
-    sel.removeAllRanges()
-    const next = document.createRange()
-    next.selectNodeContents(span)
-    sel.addRange(next)
-    el.focus()
-}
-
-function onFootnoteFontChange(event: Event) {
-    const value = (event.target as HTMLSelectElement).value
-    if (value)
-        applyFootnoteStyle('font-family', value)
-    ;(event.target as HTMLSelectElement).value = ''
-}
-
-function onFootnoteSizeChange(event: Event) {
-    const value = (event.target as HTMLSelectElement).value
-    if (value)
-        applyFootnoteStyle('font-size', `${value}pt`)
-    ;(event.target as HTMLSelectElement).value = ''
-}
-
-/** insere a chamada no cursor e abre o popover pra digitar a nota */
-function insertFootnote() {
-    const ed = editor.value
-    if (!ed)
-        return
-    // colapsa a seleção (inserir com texto selecionado o substituiria)
-    const to = ed.state.selection.to
-    ed.chain().focus().setTextSelection(to).insertContent({ type: 'footnoteRef', attrs: { number: '?', text: '' } }).run()
-    renumberPocFootnotes(ed)
-    const pos = ed.state.selection.from - 1
-    openFootnoteEditor(pos, true)
-}
-
-function saveFootnote() {
-    const state = footnoteEditor.value
-    const ed = editor.value
-    // lê o conteúdo formatado ANTES de fechar o popover
-    const html = footnoteInputRef.value ? sanitizeFootnoteHtml(footnoteInputRef.value.innerHTML) : state?.text ?? ''
-    footnoteEditor.value = null
-    if (!state || !ed || ed.isDestroyed)
-        return
-    const node = ed.state.doc.nodeAt(state.pos)
-    if (!node || node.type.name !== 'footnoteRef')
-        return
-    const text = html.trim()
-    if (!text)
-        ed.chain().focus().deleteRange({ from: state.pos, to: state.pos + node.nodeSize }).run()
-    else
-        ed.view.dispatch(ed.state.tr.setNodeMarkup(state.pos, undefined, { ...node.attrs, text }))
-    renumberPocFootnotes(ed)
-}
-
-function cancelFootnote() {
-    const state = footnoteEditor.value
-    const ed = editor.value
-    footnoteEditor.value = null
-    // cancelar uma nota recém-criada (ainda vazia) remove a chamada
-    if (state?.isNew && ed && !ed.isDestroyed) {
-        const node = ed.state.doc.nodeAt(state.pos)
-        if (node?.type.name === 'footnoteRef' && !node.attrs.text)
-            ed.chain().focus().deleteRange({ from: state.pos, to: state.pos + node.nodeSize }).run()
-        renumberPocFootnotes(ed)
-    }
-}
-
-function removeFootnote() {
-    if (footnoteInputRef.value)
-        footnoteInputRef.value.innerHTML = ''
-    saveFootnote()
-}
-
-function onEditFootnoteEvent(event: Event) {
-    if (!props.editable)
-        return
-    const { pos } = (event as CustomEvent).detail || {}
-    if (typeof pos === 'number')
-        openFootnoteEditor(pos, false)
-}
-
-/** clicar na PRÓPRIA nota no pé da página também abre a edição */
-function onNotesClick(event: MouseEvent) {
-    if (!props.editable)
-        return
-    const line = (event.target as HTMLElement).closest?.('.poc-page-note')
-    if (!line)
-        return
-    const number = line.querySelector('sup')?.textContent?.trim()
-    const ed = editor.value
-    if (!number || !ed)
-        return
-    let target: number | null = null
-    ed.state.doc.descendants((node, pos) => {
-        if (target != null)
-            return false
-        if (node.type.name === 'footnoteRef' && node.attrs.number === number) {
-            target = pos
-            return false
-        }
-        return true
-    })
-    if (target != null)
-        openFootnoteEditor(target, false)
-}
-
-/** alinhamento por bloco: mescla text-align no style dos parágrafos/títulos selecionados */
-function setAlignment(align: 'left' | 'center' | 'right' | 'justify') {
-    const ed = editor.value
-    if (!ed)
-        return
-    const { state, view } = ed
-    const { from, to } = state.selection
-    const tr = state.tr
-    state.doc.nodesBetween(from, to, (node, pos) => {
-        if (node.type.name === 'paragraph' || node.type.name === 'heading') {
-            const style = (node.attrs.style || '').replace(/text-align:\s*[^;]+;?/gi, '').trim()
-            const merged = `${style}${style && !style.endsWith(';') ? ';' : ''} text-align: ${align};`.trim()
-            tr.setNodeMarkup(pos, undefined, { ...node.attrs, style: merged })
-        }
-    })
-    view.dispatch(tr)
-    ed.commands.focus()
-}
-
-// inserir imagem do computador (vira ilha: arrastável e redimensionável)
-const imageInput = ref<HTMLInputElement | null>(null)
-
-function pickImage() {
-    imageInput.value?.click()
-}
-
-function insertDataUriImage(file: File) {
-    const reader = new FileReader()
-    reader.onload = () => {
-        editor.value?.chain().focus().insertContent(
-            `<img src="${reader.result}" style="width: 420px; height: auto; max-width: 100%;">`,
-        ).run()
-    }
-    reader.readAsDataURL(file)
-}
-
-function onImageFile(event: Event) {
-    const file = (event.target as HTMLInputElement).files?.[0]
-    if (!file || !file.type.startsWith('image/'))
-        return
-    if (props.uploadImage) {
-        void (async () => {
-            try {
-                const uploaded = await props.uploadImage!(file)
-                if (uploaded) {
-                    editor.value?.chain().focus().insertContent(vaultImageHtml(uploaded.src, uploaded.vaultSrc)).run()
-                    return
-                }
-            }
-            catch (error) {
-                console.error('[minuta-nuxt] upload de imagem falhou, embutindo como data URI', error)
-            }
-            insertDataUriImage(file)
-        })()
-    }
-    else {
-        insertDataUriImage(file)
-    }
-    ;(event.target as HTMLInputElement).value = ''
-}
-
-/** insere a quebra de página manual do template (o engine e o DOCX respeitam) */
-function insertPageBreak() {
-    editor.value?.chain().focus().insertContent('<p>PAGEBREAK</p>').run()
-}
-
-function clearFormatting() {
-    editor.value?.chain().focus().unsetAllMarks().run()
-}
-
-const TEXT_COLORS = [
-    { label: 'Preto', value: '#1C242D' },
-    { label: 'Vermelho', value: '#DC2626' },
-    { label: 'Azul', value: '#2563EB' },
-    { label: 'Verde', value: '#16A34A' },
-    { label: 'Laranja', value: '#EA580C' },
-]
-
-function applyColor(color: string) {
-    editor.value?.chain().focus().setMark('inlineStyle', { style: `color: ${color}` }).run()
-}
-
-function clearColor() {
-    editor.value?.chain().focus().unsetMark('inlineStyle').run()
-}
-
-// --- variáveis de template: gatilho `/`, botão da toolbar e seletor ---
-
-const hasVariables = computed(() => (props.variables?.length ?? 0) > 0)
-const variablePickerRef = ref<any>(null)
-/**
- * `from` = posição do `/` que abriu o seletor (apagado na inserção); `null`
- * quando veio do botão da toolbar, que não digitou nada no documento.
- * `query === undefined` faz o popover usar o próprio campo de busca.
- */
-const variablePicker = ref<{ top: number, left: number, from: number | null, query: string | undefined } | null>(null)
-
-/**
- * Coordenada do documento → coordenada dentro da folha.
- *
- * A folha tem `zoom` CSS: `coordsAtPos` devolve px de TELA e o `top`/`left` do
- * popover é interpretado em px de LAYOUT lá dentro. Sem dividir pelo zoom o
- * seletor desgruda do cursor em qualquer zoom diferente de 100%.
- */
-function sheetCoords(pos: number): { top: number, left: number } | null {
-    const ed = editor.value
-    const sheet = sheetRef.value
-    if (!ed || ed.isDestroyed || !sheet)
-        return null
-    let coords
-    try {
-        coords = ed.view.coordsAtPos(pos)
-    }
-    catch {
-        return null
-    }
-    const rect = sheet.getBoundingClientRect()
-    const z = zoom.value || 1
-    return {
-        top: (coords.bottom - rect.top) / z + 6,
-        left: Math.max(8, Math.min((coords.left - rect.left) / z, A4_WIDTH_PX - 330)),
-    }
-}
-
-/**
- * `/` no início de palavra abre o seletor; o que vem depois filtra.
- *
- * Exige delimitador à esquerda para não disparar dentro de uma data ("12/03")
- * nem de uma referência de artigo ("art. 5º, II/CF") — onde a barra é conteúdo,
- * não comando.
- */
-const VARIABLE_TRIGGER_RE = /(?:^|[\s(\[«"'])\/([\p{L}\d_]*)$/u
-/** acima disto não é mais busca, é texto — o gatilho desiste */
-const VARIABLE_TRIGGER_MAX_QUERY = 24
-
-function closeVariablePicker() {
-    variablePicker.value = null
-}
-
-/**
- * Reavalia o gatilho a cada transação. Só ABRE quando o documento mudou (foi
- * alguém digitando); mover o cursor para perto de uma barra que já estava no
- * texto não abre nada, mas fecha o que estiver aberto.
- */
-function syncVariableTrigger(docChanged: boolean) {
-    const ed = editor.value
-    if (!ed || ed.isDestroyed || !hasVariables.value || !props.editable) {
-        if (variablePicker.value)
-            closeVariablePicker()
-        return
-    }
-    // seletor aberto pela toolbar não tem gatilho no texto para reavaliar
-    if (variablePicker.value && variablePicker.value.from === null)
-        return
-
-    const { from, empty } = ed.state.selection
-    if (!empty) {
-        closeVariablePicker()
-        return
-    }
+watch(() => props.editable, value => instance?.setEditable(value))
 
-    const blockStart = ed.state.doc.resolve(from).start()
-    // '\ufffc' (object replacement) para nós atômicos: um chip antes do cursor
-    // conta como 1 caractere e não some do texto, senão o `^` casaria errado
-    const textBefore = ed.state.doc.textBetween(blockStart, from, '\n', '\uFFFC')
-    const match = textBefore.match(VARIABLE_TRIGGER_RE)
-
-    if (!match || (match[1]?.length ?? 0) > VARIABLE_TRIGGER_MAX_QUERY) {
-        closeVariablePicker()
-        return
-    }
-    if (!variablePicker.value && !docChanged)
-        return
-
-    const slashPos = from - match[0].length + match[0].indexOf('/')
-    const coords = sheetCoords(slashPos)
-    if (!coords) {
-        closeVariablePicker()
-        return
-    }
-    variablePicker.value = { ...coords, from: slashPos, query: match[1] ?? '' }
-}
-
-/**
- * Botão da toolbar: mesmo seletor, ancorado no cursor, com campo de busca
- * próprio.
- *
- * NÃO devolve o foco ao editor aqui. O `focus()` do Tiptap é adiado por um
- * `requestAnimationFrame`, então ele chegava DEPOIS do popover montar e roubava
- * o foco do campo de busca — o que a pessoa digitava virava texto do documento
- * e o Enter inseria o primeiro item de uma lista que nunca chegou a ser
- * filtrada. A posição do cursor não depende do foco: `state.selection`
- * continua onde estava (ou no começo, se ninguém nunca clicou no documento).
- */
-function openVariablePicker() {
-    const ed = editor.value
-    if (!ed || ed.isDestroyed || !hasVariables.value)
-        return
-    const coords = sheetCoords(ed.state.selection.from)
-    if (!coords)
-        return
-    variablePicker.value = { ...coords, from: null, query: undefined }
-}
+watch(
+    () => [props.chromeText.header, props.chromeText.footer, props.chromeText.headerScope, props.chromeText.footerScope, props.chromeText.showPageNumber],
+    () => instance?.setChrome({ ...props.chromeText }),
+)
+watch(() => [props.header.logoUrl, props.header.position], () => instance?.setHeader({ ...props.header }))
+watch(() => props.variables, () => instance?.setVariables(() => props.variables ?? []))
 
-function insertVariable(variable: MinutaVariableDef) {
-    const ed = editor.value
-    if (!ed || ed.isDestroyed)
-        return
-    const trigger = variablePicker.value
-    const chain = ed.chain().focus()
-    // some com o `/consulta` que abriu o seletor — o placeholder toma o lugar dele
-    if (trigger?.from != null)
-        chain.deleteRange({ from: trigger.from, to: ed.state.selection.from })
-    chain.insertContent({
-        type: 'templateVariable',
-        attrs: { varKey: variable.key, label: variable.label },
-    }).run()
-    closeVariablePicker()
+function schedulePaginate() {
+    instance?.schedulePaginate()
 }
 
-/**
- * Com o seletor aberto o foco continua NO EDITOR (o usuário está digitando o
- * texto do filtro), então as setas e o Enter têm que ser interceptados aqui —
- * senão andam o cursor e quebram o parágrafo.
- */
-function onEditorKeyDown(_view: unknown, event: KeyboardEvent): boolean {
-    const picker = variablePickerRef.value
-    if (!variablePicker.value || !picker)
-        return false
-    if (event.key === 'ArrowDown') {
-        picker.move(1)
-        return true
-    }
-    if (event.key === 'ArrowUp') {
-        picker.move(-1)
-        return true
-    }
-    if (event.key === 'Escape') {
-        closeVariablePicker()
-        return true
-    }
-    if (event.key === 'Enter' || event.key === 'Tab') {
-        // sem resultado o Enter é Enter: quebrar o parágrafo é o que a pessoa quis
-        if (!picker.hasResults())
-            return false
-        picker.choose()
-        return true
-    }
-    return false
+function refreshChrome() {
+    instance?.refreshChrome()
 }
 
-// catálogo esvaziado (ou editor virou read-only) com o seletor aberto
-watch(() => [hasVariables.value, props.editable], () => {
-    if (variablePicker.value && (!hasVariables.value || !props.editable))
-        closeVariablePicker()
-})
-
 defineExpose({ editor, schedulePaginate, refreshChrome, containerRef })
 </script>
 
 <template>
-    <div class="h-full w-full flex flex-col poc-editor-root" :class="{ 'poc-no-block-origin': props.showBlockOrigin === false }">
-        <!-- toolbar de edição (estilo Google Docs) -->
-        <div v-if="editable" class="poc-toolbar">
-            <button class="poc-tool" title="Desfazer" @click="editor?.chain().focus().undo().run()">
-                <MinutaIcon name="i-ph-arrow-u-up-left" />
-            </button>
-            <button class="poc-tool" title="Refazer" @click="editor?.chain().focus().redo().run()">
-                <MinutaIcon name="i-ph-arrow-u-up-right" />
-            </button>
-            <div class="poc-tool-sep" />
-            <select class="poc-tool-select w-118px" title="Fonte" :value="currentFontFamily ?? ''" @change="setFontFamily">
-                <option value="" disabled>
-                    Fonte
-                </option>
-                <option v-if="currentFontFamily && !DOC_FONTS.includes(currentFontFamily)" :value="currentFontFamily">
-                    {{ currentFontFamily }}
-                </option>
-                <option v-for="font in DOC_FONTS" :key="font" :value="font" :style="{ fontFamily: font }">
-                    {{ font }}
-                </option>
-            </select>
-
-            <select class="poc-tool-select w-64px" title="Tamanho da fonte" :value="currentFontSizePt ?? ''" @change="setFontSize">
-                <option value="" disabled>
-                    Tam.
-                </option>
-                <option v-if="currentFontSizePt != null && !FONT_SIZES.includes(currentFontSizePt)" :value="currentFontSizePt">
-                    {{ currentFontSizePt }}
-                </option>
-                <option v-for="size in FONT_SIZES" :key="size" :value="size">
-                    {{ size }}
-                </option>
-            </select>
-            <div class="poc-tool-sep" />
-            <button class="poc-tool font-bold" :class="{ 'poc-tool--on': active.bold }" title="Negrito" @click="editor?.chain().focus().toggleBold().run()">
-                B
-            </button>
-            <button class="poc-tool italic" :class="{ 'poc-tool--on': active.italic }" title="Itálico" @click="editor?.chain().focus().toggleItalic().run()">
-                I
-            </button>
-            <button class="poc-tool underline" :class="{ 'poc-tool--on': active.underline }" title="Sublinhado" @click="editor?.chain().focus().toggleMark('underline').run()">
-                U
-            </button>
-            <button class="poc-tool line-through" :class="{ 'poc-tool--on': active.strike }" title="Tachado" @click="editor?.chain().focus().toggleStrike().run()">
-                S
-            </button>
-            <div class="poc-tool-sep" />
-            <div class="relative">
-                <button class="poc-tool" title="Cor do texto" @click="openPalette = openPalette === 'color' ? null : 'color'">
-                    <span class="font-semibold">A</span>
-                    <span class="poc-color-underline" />
-                </button>
-                <div v-if="openPalette === 'color'" class="poc-palette">
-                    <button v-for="c in PALETTE" :key="c" class="poc-palette-swatch" :style="{ background: c }" :title="c" @click="setTextColor(c)" />
-                    <label class="poc-palette-custom">
-                        Personalizada
-                        <input type="color" @change="setTextColor(($event.target as HTMLInputElement).value)">
-                    </label>
-                </div>
-            </div>
-            <div class="relative">
-                <button class="poc-tool" title="Cor de destaque" @click="openPalette = openPalette === 'highlight' ? null : 'highlight'">
-                    <MinutaIcon name="i-ph-highlighter" />
-                </button>
-                <div v-if="openPalette === 'highlight'" class="poc-palette">
-                    <button v-for="c in PALETTE" :key="c" class="poc-palette-swatch" :style="{ background: c }" :title="c" @click="setHighlight(c)" />
-                    <label class="poc-palette-custom">
-                        Personalizada
-                        <input type="color" @change="setHighlight(($event.target as HTMLInputElement).value)">
-                    </label>
-                </div>
-            </div>
-            <div class="poc-tool-sep" />
-            <button class="poc-tool" title="Alinhar à esquerda" @click="setAlignment('left')">
-                <MinutaIcon name="i-ph-text-align-left" />
-            </button>
-            <button class="poc-tool" title="Centralizar" @click="setAlignment('center')">
-                <MinutaIcon name="i-ph-text-align-center" />
-            </button>
-            <button class="poc-tool" title="Alinhar à direita" @click="setAlignment('right')">
-                <MinutaIcon name="i-ph-text-align-right" />
-            </button>
-            <button class="poc-tool" title="Justificar" @click="setAlignment('justify')">
-                <MinutaIcon name="i-ph-text-align-justify" />
-            </button>
-            <div class="poc-tool-sep" />
-            <button class="poc-tool" :class="{ 'poc-tool--on': active.bullet }" title="Lista com marcadores" @click="editor?.chain().focus().toggleBulletList().run()">
-                <MinutaIcon name="i-ph-list-bullets" />
-            </button>
-            <button class="poc-tool" :class="{ 'poc-tool--on': active.ordered }" title="Lista numerada" @click="editor?.chain().focus().toggleOrderedList().run()">
-                <MinutaIcon name="i-ph-list-numbers" />
-            </button>
-            <div class="poc-tool-sep" />
-            <button class="poc-tool" title="Inserir imagem" @click="pickImage">
-                <MinutaIcon name="i-ph-image" />
-            </button>
-            <input ref="imageInput" type="file" accept="image/*" class="hidden" @change="onImageFile">
-            <button
-                v-if="hasVariables"
-                class="poc-tool"
-                :class="{ 'poc-tool--on': !!variablePicker }"
-                title="Inserir variável (ou digite / no texto)"
-                @click="openVariablePicker"
-            >
-                <MinutaIcon name="i-ph-brackets-curly" />
-            </button>
-            <button class="poc-tool" title="Inserir nota de rodapé" @click="insertFootnote">
-                <MinutaIcon name="i-ph-note" />
-            </button>
-            <button class="poc-tool" title="Inserir quebra de página" @click="insertPageBreak">
-                <MinutaIcon name="i-ph-arrows-out-line-vertical" />
-            </button>
-            <button class="poc-tool" title="Limpar formatação" @click="clearFormatting">
-                <MinutaIcon name="i-ph-eraser" />
-            </button>
-        </div>
-
-        <div ref="containerRef" class="relative min-h-0 w-full flex-1 overflow-y-auto bg-gray-120 py-24px" @click="openPalette = null; closeVariablePicker()">
-            <div ref="sheetRef" class="poc-sheet relative mx-auto bg-white shadow-md" :style="sheetStyle" @click="onNotesClick">
-                <!-- cabeçalho da 1ª página (na margem superior da folha) -->
-                <div class="poc-first-header" :style="firstHeaderStyle" title="Clique para editar o cabeçalho" @click="editChrome('header')">
-                    <img
-                        v-if="header.logoUrl"
-                        :src="header.logoUrl"
-                        :style="{ maxHeight: `${Math.max(24, margins.top - 36)}px`, maxWidth: '50%' }"
-                        class="inline-block align-middle"
-                    >
-                    <!-- HTML persistido → sanitizado (stored XSS) -->
-                    <!-- eslint-disable-next-line vue/no-v-html -->
-                    <div v-if="isChromeCanvas(chromeText.header)" class="poc-chrome-canvas" :style="chromeCanvasStyle" v-html="sanitizeRichHtml(chromeText.header)" />
-                    <!-- eslint-disable-next-line vue/no-v-html -->
-                    <div v-else class="poc-chrome-text" v-html="sanitizeRichHtml(chromeText.header)" />
-                </div>
-
-                <p v-if="createError" class="body-13-regular text-red-600">
-                    Falha ao montar o editor: {{ createError }}
-                </p>
-                <div ref="editorHost" :class="{ 'poc-review-cursor': !editable }" @click="onSheetClick" />
-
-                <!-- notas cujas chamadas caem na última página (as demais moram no chrome) -->
-                <div v-if="lastPageNotes.length" class="poc-page-notes poc-last-notes" :style="lastNotesStyle">
-                    <!-- conteúdo da nota já sai sanitizado do render; re-sanitiza porque
-                         também pode vir de edição salva no servidor -->
-                    <!-- eslint-disable-next-line vue/no-v-html -->
-                    <p
-                        v-for="note in lastPageNotes"
-                        :key="note.n"
-                        class="poc-page-note"
-                        :style="note.size ? { fontSize: `${note.size}pt` } : undefined"
-                        v-html="`<sup>${note.n}</sup> ${sanitizeFootnoteHtml(note.text)}`"
-                    />
-                </div>
-
-                <!-- rodapé da última página (na margem inferior da folha) -->
-                <div class="poc-last-footer" :style="lastFooterStyle" title="Clique para editar o rodapé" @click="editChrome('footer')">
-                    <template v-if="!(chromeText.footerScope === 'first' && totalPages > 1)">
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div v-if="isChromeCanvas(chromeText.footer)" class="poc-chrome-canvas" :style="chromeCanvasStyle" v-html="sanitizeRichHtml(chromeText.footer)" />
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div v-else class="poc-chrome-text" v-html="sanitizeRichHtml(chromeText.footer)" />
-                    </template>
-                    <div v-else class="poc-chrome-text" />
-                    <span v-if="chromeText.showPageNumber !== false" class="ml-auto">Página {{ totalPages }} de {{ totalPages }}</span>
-                </div>
-                <MinutaVariablePicker
-                    v-if="variablePicker"
-                    ref="variablePickerRef"
-                    :variables="props.variables ?? []"
-                    :top="variablePicker.top"
-                    :left="variablePicker.left"
-                    :query="variablePicker.query"
-                    @select="insertVariable"
-                    @close="closeVariablePicker"
-                />
-
-                <slot name="gutter" />
-
-                <!-- popover de edição da nota de rodapé (ancorado na chamada) -->
-                <div
-                    v-if="footnoteEditor"
-                    class="poc-footnote-pop"
-                    :style="{ top: `${footnoteEditor.top}px`, left: `${footnoteEditor.left}px` }"
-                    @click.stop
-                >
-                    <div class="poc-footnote-pop__head">
-                        Nota de rodapé
-                    </div>
-                    <div class="poc-footnote-pop__toolbar">
-                        <button class="poc-footnote-pop__tool font-bold" type="button" title="Negrito" @mousedown.prevent @click="footnoteExec('bold')">
-                            B
-                        </button>
-                        <button class="poc-footnote-pop__tool italic" type="button" title="Itálico" @mousedown.prevent @click="footnoteExec('italic')">
-                            I
-                        </button>
-                        <button class="poc-footnote-pop__tool underline" type="button" title="Sublinhado" @mousedown.prevent @click="footnoteExec('underline')">
-                            U
-                        </button>
-                        <span class="poc-footnote-pop__sep" />
-                        <select class="poc-footnote-pop__select" title="Fonte do trecho selecionado" @mousedown.stop @change="onFootnoteFontChange">
-                            <option value="">
-                                Fonte
-                            </option>
-                            <option v-for="font in DOC_FONTS" :key="font" :value="font" :style="{ fontFamily: font }">
-                                {{ font }}
-                            </option>
-                        </select>
-                        <select class="poc-footnote-pop__select poc-footnote-pop__select--narrow" title="Tamanho do trecho selecionado" @mousedown.stop @change="onFootnoteSizeChange">
-                            <option value="">
-                                Tam.
-                            </option>
-                            <option v-for="size in FOOTNOTE_SIZES" :key="size" :value="size">
-                                {{ size }}
-                            </option>
-                        </select>
-                        <span class="poc-footnote-pop__sep" />
-                        <button
-                            v-for="color in FOOTNOTE_COLORS"
-                            :key="color"
-                            class="poc-footnote-pop__swatch"
-                            type="button"
-                            :style="{ background: color }"
-                            :title="`Cor ${color}`"
-                            @mousedown.prevent
-                            @click="applyFootnoteStyle('color', color)"
-                        />
-                    </div>
-                    <div
-                        ref="footnoteInputRef"
-                        class="poc-footnote-pop__input"
-                        contenteditable="true"
-                        data-placeholder="Escreva a nota…"
-                        @keydown.enter.exact.prevent="saveFootnote"
-                        @keydown.esc.prevent="cancelFootnote"
-                    />
-                    <div class="poc-footnote-pop__actions">
-                        <button v-if="!footnoteEditor.isNew" class="poc-footnote-pop__remove" type="button" @click="removeFootnote">
-                            Remover
-                        </button>
-                        <span class="poc-footnote-pop__spacer" />
-                        <button class="poc-footnote-pop__cancel" type="button" @click="cancelFootnote">
-                            Cancelar
-                        </button>
-                        <button class="poc-footnote-pop__save" type="button" @click="saveFootnote">
-                            Salvar
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <TiptapBubbleMenu v-if="editor && editable" :editor="editor" :tippy-options="{ duration: 100 }">
-                <div class="flex items-center gap-2px rounded-8px border border-gray-200 bg-white p-2px shadow-lg">
-                    <button
-                        class="poc-bubble-btn font-bold"
-                        :class="{ 'poc-bubble-btn--active': editor.isActive('bold') }"
-                        @click="editor.chain().focus().toggleBold().run()"
-                    >
-                        B
-                    </button>
-                    <button
-                        class="poc-bubble-btn italic"
-                        :class="{ 'poc-bubble-btn--active': editor.isActive('italic') }"
-                        @click="editor.chain().focus().toggleItalic().run()"
-                    >
-                        I
-                    </button>
-                    <button
-                        class="poc-bubble-btn underline"
-                        :class="{ 'poc-bubble-btn--active': editor.isActive('underline') }"
-                        @click="editor.chain().focus().toggleMark('underline').run()"
-                    >
-                        U
-                    </button>
-                    <div class="mx-2px h-16px w-1px bg-gray-200" />
-                    <button
-                        v-for="color in TEXT_COLORS"
-                        :key="color.value"
-                        class="poc-color-swatch"
-                        :style="{ background: color.value }"
-                        :title="color.label"
-                        @click="applyColor(color.value)"
-                    />
-                    <button class="poc-bubble-btn" title="Remover cor" @click="clearColor">
-                        <MinutaIcon name="i-ph-eraser" />
-                    </button>
-                </div>
-            </TiptapBubbleMenu>
-        </div>
-    </div>
+    <div ref="host" class="minuta-docx-editor" />
+    <!-- o slot continua sendo renderizado DENTRO da folha, como antes: o gutter
+         se posiciona em relação a ela -->
+    <Teleport v-if="sheetEl" :to="sheetEl">
+        <slot name="gutter" />
+    </Teleport>
 </template>
 
 <style scoped>
-:deep(.poc-ins){background:rgba(34,197,94,.16);text-decoration:underline;text-decoration-color:#16a34a}:deep(.poc-del){background:rgba(239,68,68,.12);color:#b91c1c;text-decoration:line-through}.poc-bubble-btn{border-radius:6px;font-size:13px;padding:4px 8px;transition:all .15s;transition-timing-function:ease}.poc-toolbar{align-items:center;background:#fafbfc;border-bottom:.5px solid #dee3e7;display:flex;flex-wrap:wrap;gap:2px;padding:4px 12px}@media (max-width:640px){.poc-toolbar{flex-wrap:nowrap;overflow-x:auto;padding:4px 8px;scrollbar-width:none}.poc-toolbar::-webkit-scrollbar{display:none}.poc-toolbar>*{flex:none}}.poc-tool{align-items:center;border-radius:6px;display:flex;font-size:13px;height:28px;justify-content:center;min-width:28px;padding-left:6px;padding-right:6px;position:relative;transition:all .15s;transition-timing-function:ease}.poc-tool-sep{background:#dee3e7;height:20px;margin:0 6px;width:1px}.poc-tool-select{background:#fff;border-radius:6px;font-size:12px;height:28px;padding-left:6px;padding-right:6px}.poc-color-underline{background:#dc2626;border-radius:1px;bottom:4px;height:3px;left:7px;position:absolute;right:7px}.poc-palette{background:#fff;border:.5px solid #dee3e7;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-wrap:wrap;gap:2px;left:0;padding:8px;position:absolute;top:32px;width:230px;z-index:50}.poc-palette-swatch{border:1px solid rgba(0,0,0,.1);border-radius:3px;cursor:pointer;height:19px;width:19px}.poc-palette-swatch:hover{transform:scale(1.2)}.poc-palette-custom{align-items:center;color:#565d69;cursor:pointer;display:flex;font-size:12px;margin-top:6px;width:100%}.poc-color-swatch{border:1px solid rgba(0,0,0,.12);border-radius:4px;cursor:pointer;height:16px;margin:0 2px;width:16px}.poc-color-swatch:hover{transform:scale(1.15)}.poc-first-header{align-items:center;cursor:pointer;display:flex;gap:12px;position:absolute;top:0}.poc-first-header[style*=center]{justify-content:center}.poc-first-header[style*=right]{justify-content:flex-end}.poc-first-header:hover,.poc-last-footer:hover,:deep(.poc-page-footerarea:hover),:deep(.poc-page-headerarea:hover){background:rgba(99,102,241,.06);outline:1px dashed #c7d2fe}.poc-last-footer{align-items:center;bottom:0;color:#94a3b8;cursor:pointer;display:flex;font-size:11px;justify-content:space-between;position:absolute}.poc-chrome-text,:deep(.poc-chrome-text){color:#64748b;font-size:11px}.poc-chrome-text :deep(img),:deep(.poc-chrome-text img){display:inline-block;max-height:48px;max-width:200px;vertical-align:middle}:deep(.poc-pagebreak-marker){border-top:1px dashed #a5b4fc;font-size:0!important;height:16px;line-height:0!important;margin:6px 0!important;position:relative}:deep(.poc-pagebreak-marker):after{background:#fff;color:#818cf8;content:"quebra de página do template";font-size:10px;left:50%;line-height:16px;padding:0 8px;position:absolute;top:-8px;transform:translateX(-50%)}:deep(.poc-page-chrome){display:block;pointer-events:none;text-align:initial;text-indent:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:deep(.poc-page-footerarea),:deep(.poc-page-headerarea){cursor:pointer;pointer-events:auto}:deep(.poc-page-footerarea){align-items:center;color:#94a3b8;display:flex;font-size:11px;justify-content:space-between}:deep(.poc-page-gapband){background:#eceef1;box-shadow:inset 0 6px 6px -6px rgba(0,0,0,.25),inset 0 -6px 6px -6px rgba(0,0,0,.25)}:deep(.poc-page-headerarea){align-items:center;display:flex}:deep(.poc-page-headerarea[style*=center]){justify-content:center}:deep(.poc-page-headerarea[style*=right]){justify-content:flex-end}:deep(.ProseMirror){outline:none;white-space:pre-wrap;word-wrap:break-word}:deep(h1){color:#0f172a;font-size:24px;font-weight:640;letter-spacing:-.3px;line-height:32px;margin:0 0 20px}:deep(h2){color:#0f172a;font-size:19px;font-weight:620;letter-spacing:-.2px;line-height:26px;margin:28px 0 14px}:deep(h3){color:#0f172a;font-size:17px;font-weight:600;letter-spacing:-.1px;line-height:24px;margin:24px 0 12px}:deep(h1):first-child,:deep(h2):first-child,:deep(h3):first-child{margin-top:0}:deep(strong){font-weight:540}:deep(p){color:#000;font-size:18px;font-weight:400;letter-spacing:-.4px;line-height:28px;line-height:1.7em;margin-bottom:.75em;text-align:justify}:deep(blockquote){font-size:18px;font-weight:400;letter-spacing:-.4px;line-height:28px;margin-bottom:2em;margin-left:35%}:deep(ol),:deep(ul){margin-bottom:2em}:deep(li){list-style-position:inside;margin-bottom:16px;margin-left:48px}:deep(ul)>li{list-style-type:disc}:deep(ol)>li{list-style-type:decimal}:deep(table){border:.5px solid #d4d9df;max-width:100%;table-layout:fixed;width:100%}:deep(th){color:inherit;font-size:inherit;font-weight:700;overflow-wrap:anywhere;padding:12px;text-align:left}:deep(td){color:inherit;font-size:inherit;line-height:inherit;overflow-wrap:anywhere;padding:12px;text-align:left}:deep(td p),:deep(th p){color:inherit;font-size:inherit;line-height:inherit;margin-bottom:0}:deep(img){display:block;max-width:100%}:deep(.poc-island--img>img),:deep(.poc-island>img:only-child){margin-left:auto;margin-right:auto}:deep(.poc-chrome-canvas){overflow:hidden}:deep(.poc-chrome-canvas [data-el]){position:absolute}:deep(.poc-chrome-canvas [data-el=text]){color:#64748b;font-size:11px;line-height:1.4;text-align:left;white-space:pre-wrap}:deep(img[data-vault-src]){animation:poc-img-loading 1.4s ease-in-out infinite}@keyframes poc-img-loading{0%,to{opacity:.5}50%{opacity:.9}}:deep(.poc-lone-row){justify-content:center!important}:deep(.poc-lone-row>:not(.poc-lone-cell)){flex:0 0 0!important;min-width:0!important;padding:0!important}:deep(.poc-lone-row>.poc-lone-cell){align-items:center!important;flex:0 0 auto!important;max-width:100%;min-width:0}:deep([data-horizontal-align=left] .poc-island--img>img),:deep([data-horizontal-align=left] .poc-island>img:only-child){margin-left:0}:deep([data-horizontal-align=right] .poc-island--img>img),:deep([data-horizontal-align=right] .poc-island>img:only-child){margin-right:0}.poc-review-cursor :deep(.poc-minuta-block){cursor:pointer}:deep(.poc-minuta-block){border-radius:4px;position:relative}:deep(.poc-minuta-block:hover){outline:1px dashed #c7d2fe;outline-offset:6px}.poc-no-block-origin :deep(.poc-minuta-block:hover){outline:none}.poc-no-block-origin :deep(.poc-minuta-block:hover):before{content:none}:deep(.poc-minuta-block:hover):before{background:#eef2ff;border:1px solid #c7d2fe;border-radius:4px;color:#6366f1;content:attr(data-block-title);font-size:10px;letter-spacing:.04em;padding:1px 8px;pointer-events:none;position:absolute;right:0;text-transform:uppercase;top:-22px;z-index:3}:deep(.poc-varchip){background:rgba(59,130,246,.06);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(59,130,246,.25);cursor:pointer;transition:background .15s ease}:deep(.poc-varchip:hover){background:rgba(59,130,246,.16)}:deep(.poc-tplvar){background:rgba(251,191,36,.16);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(180,83,9,.35);color:#78350f;display:inline;padding:0 2px;white-space:pre-wrap}:deep(.poc-tplvar--unknown){background:rgba(244,63,94,.12);box-shadow:inset 0 0 0 1px rgba(190,18,60,.45);color:#881337;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:deep(.ProseMirror-selectednode.poc-tplvar){box-shadow:inset 0 0 0 2px rgba(180,83,9,.75)}:deep(.poc-missing-image .missing-image-warning:hover){background-color:rgba(254,174,0,.09);border-color:rgba(223,139,13,.85)}:deep(.poc-missing-image__remove){background:hsla(0,0%,100%,.75);border:none;border-radius:999px;color:#773613;cursor:pointer;font-size:16px;height:22px;line-height:1;opacity:0;position:absolute;right:4px;top:4px;transition:opacity .15s ease,background .15s ease;width:22px}:deep(.poc-missing-image:hover .poc-missing-image__remove){opacity:1}:deep(.poc-missing-image__remove:hover){background:rgba(254,174,0,.35)}:deep(.poc-missing-image.ProseMirror-selectednode .missing-image-warning){outline:2px solid rgba(223,139,13,.9);outline-offset:2px}.poc-page-notes,:deep(.poc-page-notes){color:#1c242d;font-size:10.67px;line-height:1.25;padding-top:6px}.poc-page-notes:before,:deep(.poc-page-notes):before{border-top:.5px solid #9aa4ae;content:"";display:block;margin-bottom:6px;width:30%}.poc-page-note,:deep(.poc-page-note){color:#1c242d;font-size:10.67px;font-weight:400;line-height:1.25;margin:0;text-align:justify}.poc-page-note sup,:deep(.poc-page-note sup){font-size:.8em;line-height:0;vertical-align:super}.poc-page-note a,:deep(.poc-page-note a){color:#0563c1;text-decoration:underline}:deep(.poc-footnote){color:#1d4ed8;cursor:help;font-size:.7em;line-height:0;vertical-align:super}:deep(.poc-island){position:relative}:deep(.poc-island--img){cursor:grab}:deep(.poc-img-handle){background:#3b82f6;border:2px solid #fff;border-radius:3px;bottom:-6px;box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:nwse-resize;height:12px;opacity:0;position:absolute;right:-6px;transition:opacity .12s ease;width:12px}:deep(.poc-island--img.ProseMirror-selectednode .poc-img-handle),:deep(.poc-island--img:hover .poc-img-handle){opacity:1}:deep(.poc-island.ProseMirror-selectednode){outline:2px solid #93c5fd;outline-offset:2px}
-</style>
-
-<style scoped>
-/* utilities que no CDB vêm do UnoCSS — aqui o package se basta */
-.h-full { height: 100%; }
-.w-full { width: 100%; }
-.w-1px { width: 1px; }
-.w-64px { width: 64px; }
-.h-16px { height: 16px; }
-.flex { display: flex; }
-.flex-col { flex-direction: column; }
-.flex-1 { flex: 1 1 0%; }
-.items-center { align-items: center; }
-.gap-2px { gap: 2px; }
-.min-h-0 { min-height: 0; }
-.overflow-y-auto { overflow-y: auto; }
-.relative { position: relative; }
-.hidden { display: none; }
-.inline-block { display: inline-block; }
-.align-middle { vertical-align: middle; }
-.ml-auto { margin-left: auto; }
-.mx-auto { margin-left: auto; margin-right: auto; }
-.mx-2px { margin-left: 2px; margin-right: 2px; }
-.p-2px { padding: 2px; }
-.py-24px { padding-top: 24px; padding-bottom: 24px; }
-.bg-white { background: #fff; }
-.bg-gray-120 { background: #ebedf0; }
-.bg-gray-200 { background: #e5e7eb; }
-.border { border-width: 1px; border-style: solid; }
-.border-gray-200 { border-color: #e5e7eb; }
-.rounded-8px { border-radius: 8px; }
-.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
-.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
-.font-bold { font-weight: 700; }
-.font-semibold { font-weight: 600; }
-.italic { font-style: italic; }
-.underline { text-decoration: underline; }
-.line-through { text-decoration: line-through; }
-.text-red-600 { color: #dc2626; }
-.body-13-regular { font-size: 13px; font-weight: 400; }
-</style>
-
-<style scoped>
-/* acabamento de paridade com o defesa.ai (hover states + fonte + detalhes
-   que o conversor de utilities não cobre) */
-.poc-editor-root {
-    font-family: 'Inter Variable', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
-}
-
-.poc-toolbar {
-    background: #fafbfc;
-    border-bottom: 0.5px solid #dee3e7;
-}
-
-.poc-tool {
-    border: none;
-    background: transparent;
-    cursor: pointer;
-}
-
-.poc-tool:hover {
-    background: #ebedf0;
-}
-
-.poc-tool--on {
-    background: #e2e8f0;
-}
-
-.poc-tool-select {
-    border: 0.5px solid #d4d9df;
-    background: #fff;
-    cursor: pointer;
-}
-
-.poc-editor-root :deep(.ProseMirror) {
-    outline: none;
-}
-
-.poc-editor-root :deep(td),
-.poc-editor-root :deep(th) {
-    border: 0.5px solid #d4d9df;
-}
-
-/* popover de nota de rodapé (ancorado na chamada, estilo comentário) */
-.poc-footnote-pop {
-    position: absolute;
-    z-index: 40;
-    width: 364px;
-    background: #fff;
-    border: 0.5px solid #d4d9df;
-    border-radius: 10px;
-    padding: 10px 12px;
-    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.18);
-}
-
-.poc-footnote-pop__head {
-    font-size: 11px;
-    font-weight: 650;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: #6b7280;
-    margin-bottom: 6px;
-}
-
-.poc-footnote-pop__toolbar {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-bottom: 6px;
-}
-
-.poc-footnote-pop__tool {
-    width: 24px;
-    height: 24px;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: #374151;
-    font-size: 12px;
-    cursor: pointer;
-}
-
-.poc-footnote-pop__tool:hover {
-    background: rgba(28, 36, 45, 0.06);
-}
-
-.poc-footnote-pop__sep {
-    width: 1px;
-    height: 16px;
-    background: #e5e7eb;
-    margin: 0 2px;
-}
-
-.poc-footnote-pop__select {
-    height: 24px;
-    border: 1px solid #e5e7eb;
-    border-radius: 6px;
-    background: #fff;
-    font-size: 11px;
-    color: #374151;
-    max-width: 108px;
-    outline: none;
-}
-
-.poc-footnote-pop__select--narrow {
-    max-width: 58px;
-}
-
-.poc-footnote-pop__swatch {
-    width: 14px;
-    height: 14px;
-    border: 1px solid rgb(0 0 0 / 0.15);
-    border-radius: 4px;
-    padding: 0;
-    cursor: pointer;
-}
-
-.poc-footnote-pop__input {
-    width: 100%;
-    min-height: 58px;
-    max-height: 160px;
-    overflow-y: auto;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    padding: 6px 8px;
-    font-size: 12.5px;
-    line-height: 1.5;
-    color: #111827;
-    outline: none;
-}
-
-.poc-footnote-pop__input:focus {
-    border-color: #a5b4fc;
-}
-
-.poc-footnote-pop__input:empty::before {
-    content: attr(data-placeholder);
-    color: #9ca3af;
-}
-
-.poc-footnote-pop__actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 8px;
-}
-
-.poc-footnote-pop__spacer {
-    flex: 1;
-}
-
-.poc-footnote-pop__actions button {
-    border: none;
-    border-radius: 8px;
-    padding: 4px 12px;
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    background: transparent;
-    color: #565d69;
-}
-
-.poc-footnote-pop__remove {
-    color: #b91c1c !important;
-}
-
-.poc-footnote-pop__save {
-    background: rgba(0, 0, 0, 0.88) !important;
-    color: #fff !important;
-}
+.minuta-docx-editor{display:flex;flex-direction:column;height:100%;min-height:0;width:100%}
 </style>