@meistrari/minuta-nuxt 0.1.0 → 1.1.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
@@ -189,7 +202,10 @@ watch(containerRef, (el) => {
     if (!el)
         return
     resizeObserver = new ResizeObserver(() => {
-        zoom.value = Math.min(1, (el.clientWidth - 48) / A4_WIDTH_PX)
+        // 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)
     })
     resizeObserver.observe(el)
 }, { immediate: true })
@@ -658,6 +674,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 +946,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 +966,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 +1013,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 +1140,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{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>
@@ -1017,17 +1224,6 @@ defineExpose({ editor, schedulePaginate, refreshChrome, containerRef })
     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;

package/dist/runtime/components/MinutaEmbed.vue

@@ -251,6 +251,12 @@ async function exportDocx() {
 // ==========================================
 
 const historyOpen = ref(false)
+/**
+ * Painel de análise em tela estreita. Declarado aqui, e não junto do resto do
+ * layout responsivo, porque `toggleHistory` precisa fechá-lo: os dois painéis
+ * são mutuamente exclusivos.
+ */
+const showAnalysisPanel = ref(false)
 const versions = ref<MinutaVersion[]>([])
 const loadingVersions = ref(false)
 const savingCheckpoint = ref(false)
@@ -296,6 +302,8 @@ function toggleHistory() {
         closeHistory()
         return
     }
+    // só cabe um painel: dois de 320px lado a lado esmagam o documento
+    showAnalysisPanel.value = false
     historyOpen.value = true
     void loadVersions()
 }
@@ -446,6 +454,44 @@ async function applyChrome({ html, scope, showPageNumber }: { html: string, scop
     }
 }
 
+/**
+ * Comentários de margem só cabem quando há folha (≈794px) + coluna (264px) +
+ * respiro. Abaixo disso a margem fica fora da tela — então os cards viram um
+ * painel lateral que o usuário abre e fecha.
+ */
+const GUTTER_MIN_WIDTH = 1120
+const bodyRef = ref<HTMLElement | null>(null)
+const bodyWidth = ref(0)
+let bodyResizeObserver: ResizeObserver | null = null
+
+const narrowLayout = computed(() => bodyWidth.value > 0 && bodyWidth.value < GUTTER_MIN_WIDTH)
+
+function openAnalysisPanel() {
+    // mutuamente exclusivo com o histórico (ver toggleHistory)
+    closeHistory()
+    showAnalysisPanel.value = true
+}
+const analysisCount = computed(() => {
+    const a = minuta.value?.analysis
+    if (!a)
+        return 0
+    return (a.teses?.length ?? 0) + (a.jurisprudencias?.length ?? 0) + (a.citacoes?.length ?? 0) + (a.fatos?.length ?? 0)
+})
+
+watch(bodyRef, (el) => {
+    bodyResizeObserver?.disconnect()
+    bodyResizeObserver = null
+    if (!el || typeof ResizeObserver === 'undefined')
+        return
+    bodyWidth.value = el.clientWidth
+    bodyResizeObserver = new ResizeObserver(() => {
+        bodyWidth.value = el.clientWidth
+    })
+    bodyResizeObserver.observe(el)
+}, { immediate: true })
+
+onUnmounted(() => bodyResizeObserver?.disconnect())
+
 onMounted(() => window.addEventListener('poc:edit-chrome', onEditChrome))
 onUnmounted(() => window.removeEventListener('poc:edit-chrome', onEditChrome))
 
@@ -523,10 +569,22 @@ const editorCompRef = ref<any>(null)
 const docPreviewOpen = ref(false)
 const docPreviewUrl = ref<string | null>(null)
 const docPreviewPage = ref<number | null>(null)
-
-function openDocPreview(url?: string | null) {
+/** trecho que o card de fato pediu para destacar no documento-fonte */
+const docPreviewHighlight = ref<string | null>(null)
+
+/**
+ * `fromCard` separa os dois chamadores: o botão Documentos abre a lista limpa,
+ * e o card de fato extraído mantém página e destaque mesmo quando o documento
+ * que ele nomeia não casa com nenhum anexo (aí abre o primeiro arquivo, mas a
+ * localização que o card pediu continua valendo).
+ */
+function openDocPreview(url?: string | null, fromCard = false) {
     if (!minuta.value?.files.length)
         return
+    if (!fromCard) {
+        docPreviewPage.value = null
+        docPreviewHighlight.value = null
+    }
     docPreviewUrl.value = url ?? minuta.value.files[0].url
     docPreviewOpen.value = true
 }
@@ -555,7 +613,8 @@ function onOpenDocument(payload: { documento: string, pagina?: number, highlight
     const file = minuta.value?.files.find(f => f.name === payload.documento)
         ?? minuta.value?.files.find(f => f.name.includes(payload.documento) || payload.documento.includes(f.name))
     docPreviewPage.value = payload.pagina ?? null
-    openDocPreview(file?.url)
+    docPreviewHighlight.value = payload.highlight ?? null
+    openDocPreview(file?.url, true)
 }
 
 const hasAnalysis = computed(() => {
@@ -592,32 +651,41 @@ defineExpose({ saveNow, exportDocx, editor })
             >
             <span v-else class="minuta-embed__name">{{ minuta.name }}</span>
             <span class="minuta-embed__save-state">{{ SAVE_LABEL[saveState] }}</span>
-            <button
+            <TelaButton
                 v-if="minuta.status === 'READY' && minuta.files.length"
-                class="minuta-embed__ghost-btn"
-                type="button"
+                variant="ghost"
+                size="sm"
+                icon="i-ph-files"
+                leading
+                class="minuta-embed__toolbar-btn"
                 @click="openDocPreview()"
             >
-                Documentos
-            </button>
-            <button
+                <span class="minuta-embed__btn-label">Documentos</span>
+            </TelaButton>
+            <TelaButton
                 v-if="minuta.status === 'READY'"
-                class="minuta-embed__ghost-btn"
-                :class="{ 'minuta-embed__ghost-btn--on': historyOpen }"
-                type="button"
+                :variant="historyOpen ? 'secondary' : 'ghost'"
+                size="sm"
+                icon="i-ph-clock-counter-clockwise"
+                leading
+                class="minuta-embed__toolbar-btn"
                 @click="toggleHistory"
             >
-                Histórico
-            </button>
-            <button
+                <span class="minuta-embed__btn-label">Histórico</span>
+            </TelaButton>
+            <TelaButton
                 v-if="minuta.status === 'READY'"
-                class="minuta-embed__export"
+                variant="primary"
+                size="sm"
+                icon="i-ph-download-simple"
+                leading
+                :loading="isExporting"
                 :disabled="isExporting || !!versionPreview"
-                type="button"
+                class="minuta-embed__toolbar-btn"
                 @click="exportDocx"
             >
-                {{ isExporting ? 'Exportando…' : 'Baixar DOCX' }}
-            </button>
+                <span class="minuta-embed__btn-label">{{ isExporting ? 'Exportando…' : 'Baixar DOCX' }}</span>
+            </TelaButton>
         </div>
 
         <div v-if="isLoading" class="minuta-embed__status">
@@ -636,7 +704,7 @@ defineExpose({ saveNow, exportDocx, editor })
             A geração falhou: {{ minuta.error || 'erro desconhecido' }}
         </div>
 
-        <div v-else-if="minuta" class="minuta-embed__body">
+        <div v-else-if="minuta" ref="bodyRef" class="minuta-embed__body">
             <div class="minuta-embed__document">
                 <MinutaDocxEditor
                     ref="editorCompRef"
@@ -652,7 +720,7 @@ defineExpose({ saveNow, exportDocx, editor })
                 >
                     <template #gutter>
                         <MinutaAnnotationsGutter
-                            v-if="hasAnalysis && minuta.analysis"
+                            v-if="hasAnalysis && minuta.analysis && !narrowLayout"
                             :editor="editor"
                             :analysis="minuta.analysis"
                             :scroll-container="editorCompRef?.containerRef ?? null"
@@ -662,6 +730,17 @@ defineExpose({ saveNow, exportDocx, editor })
                     </template>
                 </MinutaDocxEditor>
 
+                <!-- tela estreita: os comentários viram painel lateral -->
+                <button
+                    v-if="hasAnalysis && narrowLayout && !showAnalysisPanel"
+                    type="button"
+                    class="minuta-embed__analysis-toggle"
+                    @click="openAnalysisPanel"
+                >
+                    Análise
+                    <span class="minuta-embed__analysis-count">{{ analysisCount }}</span>
+                </button>
+
                 <!-- edição de cabeçalho/rodapé (canvas estilo Word) -->
                 <div v-if="chromeEditor" class="minuta-embed__chrome-overlay">
                     <MinutaChromeEditor
@@ -703,6 +782,26 @@ defineExpose({ saveNow, exportDocx, editor })
                 </div>
             </div>
 
+            <!-- painel: análise (tela estreita — sem margem para ancorar os cards) -->
+            <aside v-if="hasAnalysis && narrowLayout && showAnalysisPanel && minuta.analysis" class="minuta-embed__panel minuta-embed__panel--analysis">
+                <div class="minuta-embed__panel-head">
+                    <span>Análise da peça</span>
+                    <button type="button" @click="showAnalysisPanel = false">
+                        ×
+                    </button>
+                </div>
+                <div class="minuta-embed__panel-scroll">
+                    <MinutaAnnotationsGutter
+                        :editor="editor"
+                        :analysis="minuta.analysis"
+                        :scroll-container="editorCompRef?.containerRef ?? null"
+                        compact
+                        @open-document="onOpenDocument"
+                        @update-analysis="onAnalysisUpdate"
+                    />
+                </div>
+            </aside>
+
             <!-- painel: histórico -->
             <aside v-if="historyOpen" class="minuta-embed__panel">
                 <div class="minuta-embed__panel-head">
@@ -771,6 +870,7 @@ defineExpose({ saveNow, exportDocx, editor })
                 :files="minuta.files"
                 :initial-url="docPreviewUrl"
                 :initial-page="docPreviewPage"
+                :highlight="docPreviewHighlight"
                 @close="docPreviewOpen = false"
                 @error="msg => emit('error', msg)"
             />
@@ -779,5 +879,5 @@ defineExpose({ saveNow, exportDocx, editor })
 </template>
 
 <style scoped>
-.minuta-embed{background:#f7f7f8;display:flex;flex-direction:column;height:100%}.minuta-embed__toolbar{align-items:center;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;gap:8px;padding:8px 16px}.minuta-embed__name--input{background:transparent;border:0;font-family:inherit;outline:none}.minuta-embed__name--input:focus{text-decoration:underline}.minuta-embed__name{color:#111827;flex:1;font-size:15px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minuta-embed__save-state{color:#9ca3af;font-size:12px;margin-right:4px}.minuta-embed__ghost-btn{background:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#374151;cursor:pointer;font-size:13px;padding:6px 12px}.minuta-embed__ghost-btn--on{background:#f3f4f6}.minuta-embed__export{background:#111827;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;padding:6px 12px}.minuta-embed__export:disabled{cursor:default;opacity:.6}.minuta-embed__chrome-overlay{bottom:16px;position:absolute;right:16px;z-index:30}.minuta-embed__status{color:#6b7280;font-size:14px;padding:48px 24px;text-align:center}.minuta-embed__status--error{color:#b91c1c}.minuta-embed__body,.minuta-embed__document{display:flex;flex:1;min-height:0}.minuta-embed__document{min-width:0;position:relative}.minuta-embed__banner{align-items:center;background:#fffbeb;border:1px solid #fcd34d;border-radius:16px;bottom:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;left:50%;max-width:calc(100% - 32px);padding:8px 16px;position:absolute;transform:translateX(-50%);width:-moz-max-content;width:max-content;z-index:30}.minuta-embed__banner-text{color:#92400e;font-size:12px;font-weight:500}.minuta-embed__banner-actions{display:flex;gap:8px}.minuta-embed__banner-actions button{background:#fff;border:1px solid #fcd34d;border-radius:6px;color:#92400e;cursor:pointer;font-size:12px;padding:4px 10px;white-space:nowrap}.minuta-embed__banner-actions button:disabled{cursor:default;opacity:.6}.minuta-embed__panel{background:#fff;border-left:1px solid #e5e7eb;display:flex;flex-direction:column;width:320px}.minuta-embed__panel-head{align-items:center;border-bottom:1px solid #e5e7eb;color:#111827;display:flex;font-size:14px;font-weight:600;justify-content:space-between;padding:10px 16px}.minuta-embed__panel-head button{background:none;border:none;color:#6b7280;cursor:pointer;font-size:18px;line-height:1}.minuta-embed__checkpoint{border-bottom:1px solid #e5e7eb;display:flex;flex-direction:column;gap:8px;padding:12px}.minuta-embed__checkpoint input{border:1px solid #e5e7eb;border-radius:6px;font-size:13px;padding:6px 10px}.minuta-embed__checkpoint button{background:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:13px;padding:6px 12px}.minuta-embed__versions{flex:1;min-height:0;overflow-y:auto;padding:8px}.minuta-embed__versions-empty{color:#6b7280;font-size:12px;margin:0;padding:8px 12px}.minuta-embed__version{background:#fff;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;display:block;margin-bottom:6px;padding:10px;text-align:left;width:100%}.minuta-embed__version:hover{background:#faf5ff;border-color:#c4b5fd}.minuta-embed__version--active{background:#f5f3ff;border-color:#a78bfa}.minuta-embed__version:disabled{cursor:wait;opacity:.7}.minuta-embed__version-row{align-items:center;color:#111827;display:flex;font-size:12px;gap:6px}.minuta-embed__version-type{background:#f3f4f6;border-radius:999px;color:#4b5563;font-size:11px;font-style:normal;padding:1px 8px}.minuta-embed__version-type[data-type=auto]{background:#f5f3ff;color:#6d28d9}.minuta-embed__version-type[data-type=manual]{background:#eff6ff;color:#1d4ed8}.minuta-embed__version-date{color:#9ca3af;font-size:11px;margin-left:auto}.minuta-embed__version-comment{color:#111827;display:block;font-size:12px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minuta-embed__version-author{color:#9ca3af;display:block;font-size:11px;margin-top:2px}
+.minuta-embed{background:#f7f7f8;display:flex;flex-direction:column;height:100%}.minuta-embed__toolbar{align-items:center;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;gap:8px;padding:8px 16px}@media (max-width:640px){.minuta-embed__toolbar{gap:4px;padding:6px 10px}.minuta-embed__btn-label{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.minuta-embed__save-state{display:none}}.minuta-embed__name--input{background:transparent;border:0;font-family:inherit;outline:none}.minuta-embed__name--input:focus{text-decoration:underline}.minuta-embed__name{color:#111827;flex:1;font-size:15px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minuta-embed__save-state{color:#9ca3af;font-size:12px;margin-right:4px}.minuta-embed__chrome-overlay{bottom:16px;position:absolute;right:16px;z-index:30}.minuta-embed__status{color:#6b7280;font-size:14px;padding:48px 24px;text-align:center}.minuta-embed__status--error{color:#b91c1c}.minuta-embed__body,.minuta-embed__document{display:flex;flex:1;min-height:0}.minuta-embed__document{min-width:0;position:relative}.minuta-embed__banner{align-items:center;background:#fffbeb;border:1px solid #fcd34d;border-radius:16px;bottom:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;left:50%;max-width:calc(100% - 32px);padding:8px 16px;position:absolute;transform:translateX(-50%);width:-moz-max-content;width:max-content;z-index:30}.minuta-embed__banner-text{color:#92400e;font-size:12px;font-weight:500}.minuta-embed__banner-actions{display:flex;gap:8px}.minuta-embed__banner-actions button{background:#fff;border:1px solid #fcd34d;border-radius:6px;color:#92400e;cursor:pointer;font-size:12px;padding:4px 10px;white-space:nowrap}.minuta-embed__banner-actions button:disabled{cursor:default;opacity:.6}.minuta-embed__analysis-toggle{align-items:center;background:#fff;border:1px solid #d4d9df;border-radius:999px;bottom:16px;box-shadow:0 2px 10px rgba(15,23,42,.12);color:#334155;cursor:pointer;display:inline-flex;font-size:13px;font-weight:540;gap:8px;padding:8px 14px;position:absolute;right:16px;z-index:20}.minuta-embed__analysis-toggle:hover{border-color:#b8bfc9;color:#0f172a}.minuta-embed__analysis-count{background:#eef1f5;border-radius:999px;color:#64748b;font-size:11px;font-variant-numeric:tabular-nums;padding:1px 7px}.minuta-embed__panel--analysis .minuta-embed__panel-scroll{flex:1;min-height:0;overflow-y:auto;padding:12px}.minuta-embed__panel{background:#fff;border-left:1px solid #e5e7eb;display:flex;flex-direction:column;flex-shrink:0;max-width:55%;width:320px}.minuta-embed__panel-head{align-items:center;border-bottom:1px solid #e5e7eb;color:#111827;display:flex;font-size:14px;font-weight:600;justify-content:space-between;padding:10px 16px}.minuta-embed__panel-head button{background:none;border:none;color:#6b7280;cursor:pointer;font-size:18px;line-height:1}.minuta-embed__checkpoint{border-bottom:1px solid #e5e7eb;display:flex;flex-direction:column;gap:8px;padding:12px}.minuta-embed__checkpoint input{border:1px solid #e5e7eb;border-radius:6px;font-size:13px;padding:6px 10px}.minuta-embed__checkpoint button{background:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:13px;padding:6px 12px}.minuta-embed__versions{flex:1;min-height:0;overflow-y:auto;padding:8px}.minuta-embed__versions-empty{color:#6b7280;font-size:12px;margin:0;padding:8px 12px}.minuta-embed__version{background:#fff;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;display:block;margin-bottom:6px;padding:10px;text-align:left;width:100%}.minuta-embed__version:hover{background:#faf5ff;border-color:#c4b5fd}.minuta-embed__version--active{background:#f5f3ff;border-color:#a78bfa}.minuta-embed__version:disabled{cursor:wait;opacity:.7}.minuta-embed__version-row{align-items:center;color:#111827;display:flex;font-size:12px;gap:6px}.minuta-embed__version-type{background:#f3f4f6;border-radius:999px;color:#4b5563;font-size:11px;font-style:normal;padding:1px 8px}.minuta-embed__version-type[data-type=auto]{background:#f5f3ff;color:#6d28d9}.minuta-embed__version-type[data-type=manual]{background:#eff6ff;color:#1d4ed8}.minuta-embed__version-date{color:#9ca3af;font-size:11px;margin-left:auto}.minuta-embed__version-comment{color:#111827;display:block;font-size:12px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minuta-embed__version-author{color:#9ca3af;display:block;font-size:11px;margin-top:2px}
 </style>

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,