@meistrari/minuta-nuxt 0.1.0

package/dist/runtime/components/MinutaDocxEditor.vue

@@ -0,0 +1,1158 @@
+<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 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'
+
+const props = defineProps<{
+    initialHtml: string
+    margins: { top: number, right: number, bottom: number, left: number }
+    header: { logoUrl: string | null, position: 'left' | 'center' | 'right' }
+    editable: boolean
+    chromeText: { header: string, footer: string, headerScope?: 'all' | 'first', footerScope?: 'all' | 'first', showPageNumber?: boolean }
+    /** realce de proveniência de bloco no hover (só faz sentido no modo estruturado) */
+    showBlockOrigin?: boolean
+    /**
+     * upload da imagem inserida pela toolbar (ex.: Vault). Quando presente, a
+     * tag entra com src presignado + data-vault-src durável; sem ele (ou em
+     * falha), a imagem vira data-URI embutida no documento.
+     */
+    uploadImage?: ((file: File) => Promise<{ src: string, vaultSrc: string } | null>) | null
+}>()
+
+const emit = defineEmits<{
+    ready: [editor: Editor]
+    changed: []
+    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 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 }))
+    })
+}
+
+let contentObserver: ResizeObserver | 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),
+            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++
+                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(() => {
+        zoom.value = Math.min(1, (el.clientWidth - 48) / A4_WIDTH_PX)
+    })
+    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,
+    }
+})
+
+/** 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
+    }
+})
+
+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()
+}
+
+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 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">
+            <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>
+                <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>
+</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{background:#fafbfc;border-bottom:.5px solid #dee3e7;flex-wrap:wrap;gap:2px;padding:4px 12px}.poc-tool,.poc-toolbar{align-items:center;display:flex}.poc-tool{border-radius:6px;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){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}: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:16px;font-weight:540;letter-spacing:-.2px;line-height:20px;margin-bottom:20px}:deep(h2){color:#0f172a;font-size:14px;font-size:24px;font-weight:540;letter-spacing:-.15px;line-height:16px;margin-bottom:20px}:deep(h3){color:#0f172a;font-size:12px;font-size:20px;font-weight:540;letter-spacing:-.1px;line-height:14px;margin-bottom:20px}:deep(strong){font-weight:540}:deep(p){color:#000;font-size:18px;font-weight:400;letter-spacing:-.4px;line-height:28px;line-height:1.85em;margin-bottom:2em}: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;list-style-type:disc;margin-bottom:16px;margin-left:48px}: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-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;
+}
+
+/* no CDB os tokens de heading vencem os overrides text-24px/text-20px — replica */
+.poc-editor-root :deep(h2) {
+    font-size: 14px;
+    line-height: 16px;
+}
+
+.poc-editor-root :deep(h3) {
+    font-size: 12px;
+    line-height: 14px;
+}
+
+/* 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;
+}
+</style>