@meistrari/minuta-nuxt 0.1.0 → 1.0.0

package/dist/runtime/components/MinutaDocxEditor.vue

@@ -5,6 +5,8 @@ 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 type { Editor } from '@tiptap/core'
 import type { PocPageConfig, PocPageNote } from '../composables/paginationPlugin'
 import { POC_ASSET_SWAP, buildPocExtensions, renumberPocFootnotes } from '../composables/editorExtensions'
@@ -29,6 +31,13 @@ const props = defineProps<{
      * falha), a imagem vira data-URI embutida no documento.
      */
     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.
+     */
+    variables?: MinutaVariableDef[]
 }>()
 
 const emit = defineEmits<{
@@ -141,7 +150,10 @@ onMounted(() => {
             element: editorHost.value!,
             content: props.initialHtml,
             editable: props.editable,
-            extensions: buildPocExtensions(pageConfig),
+            extensions: buildPocExtensions(pageConfig, {
+                variables: () => props.variables ?? [],
+                handleKeyDown: onEditorKeyDown,
+            }),
             onCreate: ({ editor }) => {
                 emit('ready', editor as Editor)
                 nextTick(() => {
@@ -153,6 +165,7 @@ onMounted(() => {
             },
             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
@@ -658,6 +671,177 @@ 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
+    }
+
+    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 }
+}
+
+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()
+}
+
+/**
+ * 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
+}
+
+// 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>
 
@@ -759,6 +943,15 @@ defineExpose({ editor, schedulePaginate, refreshChrome, containerRef })
                 <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>
@@ -770,7 +963,7 @@ defineExpose({ editor, schedulePaginate, refreshChrome, containerRef })
             </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="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')">
@@ -817,6 +1010,17 @@ defineExpose({ editor, schedulePaginate, refreshChrome, containerRef })
                     <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) -->
@@ -933,7 +1137,7 @@ defineExpose({ editor, schedulePaginate, refreshChrome, containerRef })
 </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}
+: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;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>

package/dist/runtime/components/MinutaIcon.vue

@@ -5,6 +5,7 @@ import {
     PhArrowUUpRight,
     PhArrowsOutLineHorizontal,
     PhArrowsOutLineVertical,
+    PhBracketsCurly,
     PhEraser,
     PhHighlighter,
     PhImage,
@@ -29,6 +30,7 @@ const ICONS: Record<string, unknown> = {
     'i-ph-arrow-u-up-right': PhArrowUUpRight,
     'i-ph-arrows-out-line-horizontal': PhArrowsOutLineHorizontal,
     'i-ph-arrows-out-line-vertical': PhArrowsOutLineVertical,
+    'i-ph-brackets-curly': PhBracketsCurly,
     'i-ph-eraser': PhEraser,
     'i-ph-highlighter': PhHighlighter,
     'i-ph-image': PhImage,

package/dist/runtime/components/MinutaTemplateEditor.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import type { Editor } from '@tiptap/core'
+import MinutaDocxEditor from './MinutaDocxEditor.vue'
+import MinutaChromeEditor from './MinutaChromeEditor.vue'
+import type { MinutaVariableDef } from '../utils/templateVariables'
+import { extractTemplateVariables } from '../utils/templateVariables'
+import type { MinutaChrome } from '../composables/useMinutaApi'
+
+/**
+ * Editor de TEMPLATE de minuta — o mesmo documento paginado A4 do
+ * `<MinutaEmbed>`, só que sem minuta: o conteúdo é `v-model` do app hospedeiro,
+ * e onde entra um valor há um placeholder de variável.
+ *
+ * É componente separado do `MinutaEmbed` de propósito. O embed é uma minuta
+ * concreta: tem id, salva sozinho no CDB, tem histórico, agente, análise de
+ * margem e documentos-fonte — nada disso existe num template. Um `mode` no
+ * embed significaria desligar 80% dele e manter os dois caminhos vivos em cada
+ * mudança futura.
+ *
+ * O CDB não guarda template nenhum: quem persiste é o host, que já tem cadastro
+ * (na Omni, a definição de ocorrência). O que sai daqui é o HTML do documento e
+ * a lista de variáveis usadas — o host nunca precisa ler HTML.
+ *
+ * ```vue
+ * <MinutaTemplateEditor
+ *   v-model="definicao.templateHtml"
+ *   :variables="PETICAO_VARIAVEIS"
+ *   @update:used-variables="keys => definicao.variaveis = keys"
+ * />
+ * ```
+ */
+
+const props = withDefaults(defineProps<{
+    /** HTML do template (documento com os placeholders) */
+    modelValue?: string | null
+    /** catálogo de variáveis disponíveis — definido pelo host */
+    variables?: MinutaVariableDef[]
+    editable?: boolean
+    /** barra superior com o resumo das variáveis usadas (default: true) */
+    showToolbar?: boolean
+    /** margens da página em px @96dpi (default: 2,5cm topo/rodapé, 3cm laterais) */
+    margins?: { top: number, right: number, bottom: number, left: number }
+    /** cabeçalho/rodapé da folha; `v-model:chrome` para persistir junto */
+    chrome?: MinutaChrome | null
+}>(), {
+    modelValue: '',
+    variables: () => [],
+    editable: true,
+    showToolbar: true,
+    margins: () => ({ top: 95, right: 113, bottom: 95, left: 113 }),
+    chrome: null,
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [html: string]
+    /** chaves usadas no documento, na ordem de aparição e sem repetição */
+    'update:usedVariables': [keys: string[]]
+    'update:chrome': [chrome: MinutaChrome]
+    'ready': [editor: Editor]
+}>()
+
+const HEADER = { logoUrl: null as string | null, position: 'left' as const }
+
+const editor = ref<Editor | null>(null)
+const editorCompRef = ref<any>(null)
+/**
+ * Conteúdo inicial CONGELADO no mount. O editor é a fonte da verdade enquanto
+ * está vivo; realimentá-lo com o `modelValue` que ele mesmo acabou de emitir
+ * remontaria o documento a cada tecla e o cursor iria para o começo.
+ */
+const initialHtml = ref(props.modelValue || '<p></p>')
+
+const chromeText = reactive({
+    header: props.chrome?.header ?? '',
+    footer: props.chrome?.footer ?? '',
+    headerScope: props.chrome?.headerScope ?? 'all' as 'all' | 'first',
+    footerScope: props.chrome?.footerScope ?? 'all' as 'all' | 'first',
+    showPageNumber: props.chrome?.showPageNumber !== false,
+})
+
+const usedVariables = ref<string[]>(extractTemplateVariables(props.modelValue))
+
+const catalogByKey = computed(() => new Map(props.variables.map(v => [v.key, v])))
+
+/**
+ * Variáveis no documento que saíram do catálogo — o host renomeou ou removeu.
+ * Nunca vão resolver, então merecem aviso na hora de salvar, não na geração.
+ */
+const unknownVariables = computed(() =>
+    usedVariables.value.filter(key => !catalogByKey.value.has(key)))
+
+function labelOf(key: string) {
+    return catalogByKey.value.get(key)?.label ?? key
+}
+
+function currentHtml(): string {
+    return editor.value?.getHTML() ?? ''
+}
+
+function syncOut() {
+    const html = currentHtml()
+    const keys = extractTemplateVariables(html)
+    const changed = keys.length !== usedVariables.value.length
+        || keys.some((key, i) => key !== usedVariables.value[i])
+    if (changed) {
+        usedVariables.value = keys
+        emit('update:usedVariables', keys)
+    }
+    emit('update:modelValue', html)
+}
+
+function onReady(instance: Editor) {
+    editor.value = instance
+    // o parse do HTML inicial pode normalizar o documento (nós desconhecidos,
+    // wrapper de bloco): emite uma vez para o host guardar o que o editor de
+    // fato tem, e não o que ele mandou
+    syncOut()
+    emit('ready', instance)
+}
+
+// --- cabeçalho/rodapé (mesmo canvas do embed) ---
+const chromeEditor = ref<{ part: 'header' | 'footer' } | null>(null)
+
+function onEditChrome(event: Event) {
+    if (!props.editable)
+        return
+    const part = (event as CustomEvent).detail?.part
+    if (part === 'header' || part === 'footer')
+        chromeEditor.value = { part }
+}
+
+function applyChrome({ html, scope, showPageNumber }: { html: string, scope: 'all' | 'first', showPageNumber?: boolean }) {
+    if (!chromeEditor.value)
+        return
+    const part = chromeEditor.value.part
+    chromeText[part] = html
+    chromeText[part === 'header' ? 'headerScope' : 'footerScope'] = scope
+    if (showPageNumber !== undefined)
+        chromeText.showPageNumber = showPageNumber
+    chromeEditor.value = null
+    emit('update:chrome', { ...chromeText })
+}
+
+onMounted(() => window.addEventListener('poc:edit-chrome', onEditChrome))
+onUnmounted(() => window.removeEventListener('poc:edit-chrome', onEditChrome))
+
+// host trocando o template inteiro (abrir outro cadastro): remonta o editor
+watch(() => props.modelValue, (value) => {
+    if (!editor.value || value == null)
+        return
+    if (value === currentHtml())
+        return
+    initialHtml.value = value || '<p></p>'
+    editor.value.commands.setContent(initialHtml.value, false)
+    syncOut()
+})
+
+defineExpose({ editor, getHtml: currentHtml, usedVariables })
+</script>
+
+<template>
+    <div class="minuta-tpl">
+        <div v-if="showToolbar" class="minuta-tpl__bar">
+            <slot name="toolbar-start" />
+            <span class="minuta-tpl__count">
+                {{ usedVariables.length }}
+                {{ usedVariables.length === 1 ? 'variável no template' : 'variáveis no template' }}
+            </span>
+            <div class="minuta-tpl__chips">
+                <span
+                    v-for="key in usedVariables"
+                    :key="key"
+                    class="minuta-tpl__chip"
+                    :class="{ 'minuta-tpl__chip--unknown': !catalogByKey.has(key) }"
+                    :title="key"
+                >
+                    {{ labelOf(key) }}
+                </span>
+            </div>
+            <slot name="toolbar-end" />
+        </div>
+
+        <p v-if="unknownVariables.length" class="minuta-tpl__warn">
+            {{ unknownVariables.length === 1 ? 'A variável' : 'As variáveis' }}
+            <b>{{ unknownVariables.join(', ') }}</b>
+            {{ unknownVariables.length === 1 ? 'não está' : 'não estão' }}
+            no catálogo — {{ unknownVariables.length === 1 ? 'ela nunca vai' : 'elas nunca vão' }}
+            receber valor na geração.
+        </p>
+
+        <div class="minuta-tpl__body">
+            <MinutaDocxEditor
+                ref="editorCompRef"
+                :initial-html="initialHtml"
+                :margins="props.margins"
+                :header="HEADER"
+                :editable="props.editable"
+                :show-block-origin="false"
+                :variables="props.variables"
+                :chrome-text="chromeText"
+                @ready="onReady"
+                @changed="syncOut"
+            />
+
+            <div v-if="chromeEditor" class="minuta-tpl__chrome-overlay">
+                <MinutaChromeEditor
+                    :key="chromeEditor.part"
+                    :part="chromeEditor.part"
+                    :html="chromeText[chromeEditor.part]"
+                    :scope="chromeText[chromeEditor.part === 'header' ? 'headerScope' : 'footerScope']"
+                    :band-height-px="chromeEditor.part === 'header' ? props.margins.top : props.margins.bottom"
+                    :show-page-number="chromeText.showPageNumber"
+                    :allow-page-number-toggle="true"
+                    @apply="applyChrome"
+                    @close="chromeEditor = null"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.minuta-tpl{background:#f7f7f8;display:flex;flex-direction:column;height:100%}.minuta-tpl__bar{align-items:center;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;font-size:13px;gap:8px;padding:8px 16px}.minuta-tpl__count{color:#6b7280;white-space:nowrap}.minuta-tpl__chips{display:flex;flex:1;flex-wrap:wrap;gap:4px;min-width:0}.minuta-tpl__chip{background:rgba(251,191,36,.16);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(180,83,9,.25);color:#78350f;font-size:12px;padding:1px 8px}.minuta-tpl__chip--unknown{background:rgba(244,63,94,.12);box-shadow:inset 0 0 0 1px rgba(190,18,60,.35);color:#881337}.minuta-tpl__warn{background:#fff1f2;border-bottom:1px solid #fecdd3;color:#881337;font-size:12px;margin:0;padding:8px 16px}.minuta-tpl__body{flex:1;min-height:0;position:relative}.minuta-tpl__chrome-overlay{inset:0;position:absolute;z-index:40}
+</style>