@meistrari/minuta-nuxt 0.1.0

package/dist/runtime/components/MinutaChatEditCard.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { MinutaChatEdit } from '../composables/chatEditOps'
+
+/**
+ * Card renderizado dentro do chat para os blocos minuta-edit do agente.
+ * O clique em "Aplicar" dispara o CustomEvent `minuta-nuxt:chat-edit`; o
+ * MinutaEmbed escuta, aplica as operações no editor e devolve o resultado
+ * pelo callback `onResult`.
+ */
+
+const props = defineProps<{
+    /** nó do markstream: `content` traz o JSON bruto dentro da tag */
+    node?: { content?: string }
+}>()
+
+const state = ref<'idle' | 'applying' | 'done' | 'error'>('idle')
+const resultMessage = ref('')
+
+const edit = computed<MinutaChatEdit | null>(() => {
+    const raw = (props.node?.content ?? '').trim()
+    if (!raw)
+        return null
+    try {
+        const parsed = JSON.parse(raw)
+        if (parsed && typeof parsed === 'object')
+            return parsed as MinutaChatEdit
+        return null
+    }
+    catch {
+        // streaming: o JSON ainda pode estar chegando
+        return null
+    }
+})
+
+const opsCount = computed(() => edit.value?.ops?.length ?? 0)
+const annosCount = computed(() => edit.value?.anotacoes?.length ?? 0)
+
+const OP_LABEL: Record<string, string> = {
+    substituir: 'substituição',
+    inserir_apos: 'inserção',
+    remover: 'remoção',
+}
+
+const opsSummary = computed(() => {
+    const counts = new Map<string, number>()
+    for (const op of edit.value?.ops ?? [])
+        counts.set(op.op, (counts.get(op.op) ?? 0) + 1)
+    return [...counts.entries()]
+        .map(([op, count]) => `${count} ${OP_LABEL[op] ?? op}${count > 1 ? (OP_LABEL[op] ? 'ões' : '') : ''}`)
+        .join(', ')
+        .replace(/çãoões/g, 'ções')
+})
+
+function apply() {
+    if (!edit.value || state.value === 'applying' || state.value === 'done')
+        return
+    state.value = 'applying'
+    window.dispatchEvent(new CustomEvent('minuta-nuxt:chat-edit', {
+        detail: {
+            edit: edit.value,
+            onResult(result: { applied: number, failures: string[] }) {
+                if (result.failures.length) {
+                    state.value = result.applied > 0 ? 'done' : 'error'
+                    resultMessage.value = result.failures.join(' · ')
+                }
+                else {
+                    state.value = 'done'
+                    resultMessage.value = ''
+                }
+            },
+        },
+    }))
+    // sem host ouvindo (ex.: preview fora do editor), evita spinner infinito
+    setTimeout(() => {
+        if (state.value === 'applying') {
+            state.value = 'error'
+            resultMessage.value = 'O editor não respondeu — abra a minuta para aplicar.'
+        }
+    }, 4000)
+}
+</script>
+
+<template>
+    <div class="minuta-chat-edit">
+        <template v-if="edit">
+            <div class="minuta-chat-edit__head">
+                <span class="minuta-chat-edit__badge">Edição</span>
+                <span class="minuta-chat-edit__desc">{{ edit.descricao || 'Edição proposta' }}</span>
+            </div>
+            <p class="minuta-chat-edit__meta">
+                {{ opsSummary || 'sem operações' }}<template v-if="annosCount">
+                    · {{ annosCount }} {{ annosCount === 1 ? 'anotação nova' : 'anotações novas' }}
+                </template>
+            </p>
+            <p v-if="resultMessage" class="minuta-chat-edit__result" :class="{ 'minuta-chat-edit__result--error': state === 'error' }">
+                {{ resultMessage }}
+            </p>
+            <button
+                class="minuta-chat-edit__apply"
+                type="button"
+                :disabled="state === 'applying' || state === 'done' || !opsCount && !annosCount"
+                @click="apply"
+            >
+                <template v-if="state === 'done'">
+                    Aplicada ✓
+                </template>
+                <template v-else-if="state === 'applying'">
+                    Aplicando…
+                </template>
+                <template v-else>
+                    Aplicar na minuta
+                </template>
+            </button>
+        </template>
+        <p v-else class="minuta-chat-edit__loading">
+            Preparando edição…
+        </p>
+    </div>
+</template>
+
+<style scoped>
+.minuta-chat-edit{background:#fafbfc;border:.5px solid #dee3e7;border-radius:10px;margin:8px 0;padding:10px 12px}.minuta-chat-edit__head{align-items:center;display:flex;gap:8px;min-width:0}.minuta-chat-edit__badge{background:hsla(220,9%,46%,.12);border-radius:999px;color:#565d69;flex-shrink:0;font-size:9.5px;font-weight:650;letter-spacing:.05em;padding:1px 7px;text-transform:uppercase}.minuta-chat-edit__desc{color:#111827;font-size:12.5px;font-weight:590;line-height:1.35}.minuta-chat-edit__meta{color:#6b7280;font-size:11px;margin:4px 0 0}.minuta-chat-edit__result{color:#92400e;font-size:11px;line-height:1.4;margin:6px 0 0}.minuta-chat-edit__result--error{color:#b91c1c}.minuta-chat-edit__apply{background:rgba(0,0,0,.88);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:12px;font-weight:500;margin-top:8px;padding:4px 12px}.minuta-chat-edit__apply:disabled{background:#e5e7eb;color:#6b7280;cursor:default}.minuta-chat-edit__loading{color:#9ca3af;font-size:11.5px;margin:0}
+</style>

package/dist/runtime/components/MinutaChromeCanvas.vue

@@ -0,0 +1,549 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref, shallowRef, watch } from 'vue'
+import { sanitizeRichHtml } from '../utils/sanitizeRichHtml'
+import MinutaIcon from './MinutaIcon.vue'
+
+/**
+ * Editor CANVAS de cabeçalho/rodapé estilo Word: elementos livres (caixa de
+ * texto, imagem, retângulo) posicionados por arrasto, com resize por alças e
+ * fonte própria por caixa de texto.
+ *
+ * Formato persistido (HTML, coordenadas absolutas no frame da PÁGINA A4 —
+ * 794px de largura × altura da margem):
+ *   <div data-el="text" style="position:absolute;left:..;top:..;width:..;font-family:..;font-size:..">…</div>
+ *   <img data-el="img"  style="position:absolute;left:..;top:..;width:..;height:.." src="data:…">
+ *   <div data-el="rect" style="position:absolute;left:..;top:..;width:..;height:..;background:#…"></div>
+ *
+ * O preview (paginação) e o export DOCX (imagens flutuantes + parágrafos com
+ * frame) entendem esse formato. Conteúdo legado (flow) é migrado para uma
+ * caixa de texto na primeira edição.
+ */
+
+const props = withDefaults(defineProps<{
+    html: string
+    widthPx: number
+    heightPx: number
+    docFont?: string
+    /** texto fantasma (ex.: "Página 1 de 12" no rodapé) */
+    ghost?: string
+    placeholder?: string
+}>(), {
+    docFont: 'Arial',
+    ghost: '',
+    placeholder: 'Adicione texto, imagem ou forma pela barra acima',
+})
+
+const emit = defineEmits<{ change: [html: string] }>()
+
+const FONT_OPTIONS = ['Arial', 'Times New Roman', 'Calibri', 'Cambria', 'Georgia', 'Garamond', 'Verdana', 'Courier New']
+const SIZE_OPTIONS_PT = [7, 8, 9, 10, 11, 12, 14, 16, 18]
+
+const canvasRef = ref<HTMLElement | null>(null)
+const wrapperRef = ref<HTMLElement | null>(null)
+const selected = shallowRef<HTMLElement | null>(null)
+const editingText = ref(false)
+const imageInput = ref<HTMLInputElement | null>(null)
+const uiTick = ref(0)
+
+// --- carga / migração ---
+
+function migrate(html: string): string {
+    const clean = sanitizeRichHtml(html)
+    if (!clean.trim())
+        return ''
+    if (clean.includes('data-el='))
+        return clean
+    // conteúdo legado (flow) → vira uma caixa de texto posicionada
+    return `<div data-el="text" style="position:absolute;left:24px;top:8px;max-width:70%;font-size:11px;color:#64748b;font-family:${props.docFont}">${clean}</div>`
+}
+
+let lastEmitted: string | null = null
+
+function loadHtml() {
+    if (!canvasRef.value)
+        return
+    canvasRef.value.innerHTML = migrate(props.html)
+    selected.value = null
+    editingText.value = false
+}
+
+onMounted(loadHtml)
+watch(() => props.html, (next) => {
+    // ignora o eco do próprio emit
+    if (next === lastEmitted)
+        return
+    loadHtml()
+})
+
+function serialize() {
+    if (!canvasRef.value)
+        return
+    const clone = canvasRef.value.cloneNode(true) as HTMLElement
+    for (const el of [...clone.querySelectorAll('[contenteditable]')])
+        el.removeAttribute('contenteditable')
+    for (const el of [...clone.querySelectorAll('[data-selected]')])
+        el.removeAttribute('data-selected')
+    const html = sanitizeRichHtml(clone.innerHTML)
+    lastEmitted = html
+    emit('change', html)
+}
+
+// --- seleção + overlay de alças ---
+
+const overlay = reactive({ visible: false, left: 0, top: 0, width: 0, height: 0 })
+
+function refreshOverlay() {
+    const el = selected.value
+    if (!el || !canvasRef.value) {
+        overlay.visible = false
+        return
+    }
+    overlay.visible = !editingText.value
+    overlay.left = el.offsetLeft
+    overlay.top = el.offsetTop
+    overlay.width = el.offsetWidth
+    overlay.height = el.offsetHeight
+}
+
+function select(el: HTMLElement | null) {
+    if (selected.value && selected.value !== el)
+        exitTextEditing()
+    selected.value = el
+    uiTick.value++
+    nextTick(refreshOverlay)
+}
+
+function exitTextEditing() {
+    if (!editingText.value)
+        return
+    editingText.value = false
+    const el = selected.value
+    if (el?.getAttribute('data-el') === 'text') {
+        el.removeAttribute('contenteditable')
+        serialize()
+    }
+    nextTick(refreshOverlay)
+}
+
+// --- drag (mover) ---
+
+interface DragState { el: HTMLElement, startX: number, startY: number, left: number, top: number, width: number, height: number, mode: 'move' | string, aspect: number }
+let drag: DragState | null = null
+
+function onCanvasPointerDown(event: PointerEvent) {
+    const target = (event.target as HTMLElement).closest('[data-el]') as HTMLElement | null
+    if (!target || !canvasRef.value?.contains(target)) {
+        select(null)
+        exitTextEditing()
+        return
+    }
+    if (target === selected.value && editingText.value)
+        return // digitando dentro da caixa — não arrasta
+    select(target)
+    event.preventDefault()
+    startInteraction(event, target, 'move')
+}
+
+function startInteraction(event: PointerEvent, el: HTMLElement, mode: string) {
+    drag = {
+        el,
+        mode,
+        startX: event.clientX,
+        startY: event.clientY,
+        left: el.offsetLeft,
+        top: el.offsetTop,
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+        aspect: el.offsetWidth / Math.max(1, el.offsetHeight),
+    }
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', onPointerUp, { once: true })
+}
+
+/** snap às bordas da página e ao centro (listra de ponta a ponta sem pixel-hunting) */
+const SNAP = 6
+function snapAxis(value: number, size: number, total: number): number {
+    if (Math.abs(value) <= SNAP)
+        return 0 // borda esquerda/topo
+    if (Math.abs(value + size - total) <= SNAP)
+        return total - size // borda direita/fundo
+    if (Math.abs(value + size / 2 - total / 2) <= SNAP)
+        return Math.round((total - size) / 2) // centro
+    return value
+}
+
+function onPointerMove(event: PointerEvent) {
+    if (!drag)
+        return
+    const dx = event.clientX - drag.startX
+    const dy = event.clientY - drag.startY
+    const el = drag.el
+    if (drag.mode === 'move') {
+        const rawLeft = Math.min(props.widthPx - 8, Math.max(-drag.width + 8, drag.left + dx))
+        const rawTop = Math.min(props.heightPx - 6, Math.max(-drag.height + 6, drag.top + dy))
+        el.style.left = `${Math.round(snapAxis(rawLeft, drag.width, props.widthPx))}px`
+        el.style.top = `${Math.round(snapAxis(rawTop, drag.height, props.heightPx))}px`
+    }
+    else {
+        // resize pelas alças; imagens mantêm proporção nos cantos
+        const isImg = el.tagName === 'IMG'
+        let { left, top, width, height } = drag
+        if (drag.mode.includes('e')) {
+            width = Math.max(8, drag.width + dx)
+            // snap da borda direita à borda da página (listra de ponta a ponta)
+            if (Math.abs(left + width - props.widthPx) <= SNAP)
+                width = props.widthPx - left
+        }
+        if (drag.mode.includes('s')) {
+            height = Math.max(4, drag.height + dy)
+            if (Math.abs(top + height - props.heightPx) <= SNAP)
+                height = props.heightPx - top
+        }
+        if (drag.mode.includes('w')) {
+            width = Math.max(8, drag.width - dx)
+            left = drag.left + (drag.width - width)
+            if (Math.abs(left) <= SNAP) {
+                width += left
+                left = 0
+            }
+        }
+        if (drag.mode.includes('n')) {
+            height = Math.max(4, drag.height - dy)
+            top = drag.top + (drag.height - height)
+            if (Math.abs(top) <= SNAP) {
+                height += top
+                top = 0
+            }
+        }
+        if (isImg && drag.mode.length === 2) {
+            // canto de imagem: proporcional (largura manda)
+            height = Math.max(4, Math.round(width / drag.aspect))
+            if (drag.mode.includes('n'))
+                top = drag.top + (drag.height - height)
+        }
+        el.style.left = `${Math.round(left)}px`
+        el.style.top = `${Math.round(top)}px`
+        el.style.width = `${Math.round(width)}px`
+        if (el.getAttribute('data-el') !== 'text' || drag.mode.includes('s') || drag.mode.includes('n'))
+            el.style.height = `${Math.round(height)}px`
+    }
+    refreshOverlay()
+}
+
+function onPointerUp() {
+    window.removeEventListener('pointermove', onPointerMove)
+    if (drag) {
+        drag = null
+        serialize()
+        refreshOverlay()
+    }
+}
+
+function onHandleDown(event: PointerEvent, mode: string) {
+    if (!selected.value)
+        return
+    event.preventDefault()
+    event.stopPropagation()
+    startInteraction(event, selected.value, mode)
+}
+
+// --- edição de texto (duplo clique) ---
+
+function onCanvasDblClick(event: MouseEvent) {
+    const target = (event.target as HTMLElement).closest('[data-el="text"]') as HTMLElement | null
+    if (!target)
+        return
+    select(target)
+    editingText.value = true
+    target.setAttribute('contenteditable', 'true')
+    target.focus()
+    refreshOverlay()
+}
+
+// --- teclado ---
+
+function onKeydown(event: KeyboardEvent) {
+    if (editingText.value) {
+        if (event.key === 'Escape')
+            exitTextEditing()
+        return
+    }
+    const el = selected.value
+    if (!el)
+        return
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+        event.preventDefault()
+        el.remove()
+        select(null)
+        serialize()
+        return
+    }
+    const step = event.shiftKey ? 10 : 1
+    const nudge: Record<string, [number, number]> = {
+        ArrowLeft: [-step, 0],
+        ArrowRight: [step, 0],
+        ArrowUp: [0, -step],
+        ArrowDown: [0, step],
+    }
+    if (nudge[event.key]) {
+        event.preventDefault()
+        el.style.left = `${el.offsetLeft + nudge[event.key][0]}px`
+        el.style.top = `${el.offsetTop + nudge[event.key][1]}px`
+        refreshOverlay()
+        serialize()
+    }
+}
+
+// --- inserção de elementos ---
+
+function centerPos(w: number, h: number) {
+    return {
+        left: Math.max(8, Math.round((props.widthPx - w) / 3)),
+        top: Math.max(2, Math.round((props.heightPx - h) / 2)),
+    }
+}
+
+function addText() {
+    if (!canvasRef.value)
+        return
+    const el = document.createElement('div')
+    el.setAttribute('data-el', 'text')
+    const { left, top } = centerPos(160, 18)
+    el.style.cssText = `position:absolute;left:${left}px;top:${top}px;min-width:40px;font-size:11px;color:#334155;font-family:${props.docFont};line-height:1.4;`
+    el.textContent = 'Texto'
+    canvasRef.value.appendChild(el)
+    select(el)
+    serialize()
+}
+
+function pickImage() {
+    imageInput.value?.click()
+}
+
+function onImageFile(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0]
+    if (!file || !file.type.startsWith('image/'))
+        return
+    const reader = new FileReader()
+    reader.onload = () => {
+        const probe = new Image()
+        probe.onload = () => {
+            if (!canvasRef.value)
+                return
+            const maxH = Math.max(20, props.heightPx - 8)
+            const scale = Math.min(1, maxH / probe.naturalHeight, 300 / probe.naturalWidth)
+            const w = Math.round(probe.naturalWidth * scale)
+            const h = Math.round(probe.naturalHeight * scale)
+            const img = document.createElement('img')
+            img.setAttribute('data-el', 'img')
+            const { left, top } = centerPos(w, h)
+            img.style.cssText = `position:absolute;left:${left}px;top:${top}px;width:${w}px;height:${h}px;`
+            img.src = String(probe.src)
+            canvasRef.value.appendChild(img)
+            select(img)
+            serialize()
+        }
+        probe.src = String(reader.result)
+    }
+    reader.readAsDataURL(file)
+    ;(event.target as HTMLInputElement).value = ''
+}
+
+const rectColor = ref('#00B0F0')
+
+function addRect() {
+    if (!canvasRef.value)
+        return
+    const el = document.createElement('div')
+    el.setAttribute('data-el', 'rect')
+    const { left, top } = centerPos(180, 10)
+    el.style.cssText = `position:absolute;left:${left}px;top:${top}px;width:180px;height:10px;background:${rectColor.value};`
+    canvasRef.value.appendChild(el)
+    select(el)
+    serialize()
+}
+
+// --- formatação do elemento selecionado ---
+
+const selectedKind = computed(() => {
+    void uiTick.value
+    return selected.value?.getAttribute('data-el') ?? null
+})
+
+const selectedFont = computed(() => {
+    void uiTick.value
+    const family = selected.value?.style.fontFamily?.split(',')[0]?.replace(/["']/g, '').trim()
+    return family || props.docFont.split(',')[0].trim()
+})
+
+const selectedSizePt = computed(() => {
+    void uiTick.value
+    const raw = selected.value?.style.fontSize || '11px'
+    const num = Number.parseFloat(raw)
+    if (!Number.isFinite(num))
+        return 8
+    return Math.round(raw.endsWith('pt') ? num : num * 0.75)
+})
+
+function applyStyle(prop: string, value: string) {
+    const el = selected.value
+    if (!el)
+        return
+    el.style.setProperty(prop, value)
+    uiTick.value++
+    serialize()
+    nextTick(refreshOverlay)
+}
+
+function toggleInline(command: 'bold' | 'italic' | 'underline') {
+    if (editingText.value) {
+        document.execCommand(command)
+        serialize()
+        return
+    }
+    const el = selected.value
+    if (!el || el.getAttribute('data-el') !== 'text')
+        return
+    if (command === 'bold')
+        el.style.fontWeight = el.style.fontWeight === 'bold' ? '' : 'bold'
+    if (command === 'italic')
+        el.style.fontStyle = el.style.fontStyle === 'italic' ? '' : 'italic'
+    if (command === 'underline')
+        el.style.textDecoration = el.style.textDecoration.includes('underline') ? '' : 'underline'
+    uiTick.value++
+    serialize()
+}
+
+/** estica o elemento selecionado de ponta a ponta da página (listras) */
+function stretchFullWidth() {
+    const el = selected.value
+    if (!el)
+        return
+    el.style.left = '0px'
+    el.style.width = `${props.widthPx}px`
+    uiTick.value++
+    serialize()
+    nextTick(refreshOverlay)
+}
+
+function deleteSelected() {
+    selected.value?.remove()
+    select(null)
+    serialize()
+}
+
+const isEmpty = computed(() => {
+    void uiTick.value
+    return !migrate(props.html).trim() && !canvasRef.value?.childElementCount
+})
+
+const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'] as const
+</script>
+
+<template>
+    <div class="ccv-root">
+        <!-- toolbar -->
+        <div class="ccv-toolbar" @mousedown.prevent>
+            <button class="ccv-btn" title="Caixa de texto" @mousedown.stop @click="addText">
+                <MinutaIcon name="i-ph-text-t" /> <span class="ccv-btn-label">Texto</span>
+            </button>
+            <button class="ccv-btn" title="Imagem" @mousedown.stop @click="pickImage">
+                <MinutaIcon name="i-ph-image" /> <span class="ccv-btn-label">Imagem</span>
+            </button>
+            <button class="ccv-btn" title="Retângulo" @mousedown.stop @click="addRect">
+                <MinutaIcon name="i-ph-rectangle" /> <span class="ccv-btn-label">Forma</span>
+            </button>
+            <input ref="imageInput" type="file" accept="image/*" class="ccv-hidden" @change="onImageFile">
+
+            <template v-if="selectedKind === 'text'">
+                <div class="ccv-sep" />
+                <select class="ccv-select" :value="selectedFont" title="Fonte" @mousedown.stop @change="applyStyle('font-family', ($event.target as HTMLSelectElement).value)">
+                    <option v-for="font in FONT_OPTIONS" :key="font" :value="font" :style="{ fontFamily: font }">
+                        {{ font }}
+                    </option>
+                </select>
+                <select class="ccv-select ccv-select--narrow" :value="selectedSizePt" title="Tamanho (pt)" @mousedown.stop @change="applyStyle('font-size', `${($event.target as HTMLSelectElement).value}pt`)">
+                    <option v-for="pt in SIZE_OPTIONS_PT" :key="pt" :value="pt">
+                        {{ pt }}
+                    </option>
+                </select>
+                <button class="ccv-btn font-bold" title="Negrito" @click="toggleInline('bold')">
+                    B
+                </button>
+                <button class="ccv-btn italic" title="Itálico" @click="toggleInline('italic')">
+                    I
+                </button>
+                <button class="ccv-btn underline" title="Sublinhado" @click="toggleInline('underline')">
+                    U
+                </button>
+                <input
+                    class="ccv-color" type="color" title="Cor do texto"
+                    :value="selected?.style.color ? '#000000' : '#334155'"
+                    @mousedown.stop
+                    @input="applyStyle('color', ($event.target as HTMLInputElement).value)"
+                >
+            </template>
+            <template v-else-if="selectedKind === 'rect'">
+                <div class="ccv-sep" />
+                <input
+                    class="ccv-color" type="color" title="Cor da forma"
+                    @mousedown.stop
+                    @input="applyStyle('background', ($event.target as HTMLInputElement).value)"
+                >
+            </template>
+
+            <template v-if="selectedKind">
+                <div class="ccv-sep" />
+                <button class="ccv-btn" title="Esticar de ponta a ponta da página" @click="stretchFullWidth">
+                    <MinutaIcon name="i-ph-arrows-out-line-horizontal" />
+                </button>
+                <button class="ccv-btn ccv-btn--danger" title="Excluir (Delete)" @click="deleteSelected">
+                    <MinutaIcon name="i-ph-trash" />
+                </button>
+            </template>
+
+            <span class="ccv-hint">{{ selectedKind ? 'arraste para mover · alças para redimensionar · duplo clique edita texto' : 'clique num elemento para selecionar' }}</span>
+        </div>
+
+        <!-- viewport (faixa em tamanho real, com scroll horizontal se faltar espaço) -->
+        <div class="ccv-viewport">
+            <div
+                ref="wrapperRef"
+                class="ccv-band"
+                :style="{ width: `${widthPx}px`, height: `${heightPx}px`, fontFamily: docFont }"
+                tabindex="0"
+                @keydown="onKeydown"
+            >
+                <div
+                    ref="canvasRef"
+                    class="ccv-canvas"
+                    @pointerdown="onCanvasPointerDown"
+                    @dblclick="onCanvasDblClick"
+                    @input="serialize()"
+                    @blur.capture="exitTextEditing"
+                />
+                <span v-if="ghost" class="ccv-ghost">{{ ghost }}</span>
+                <span v-if="isEmpty" class="ccv-placeholder">{{ placeholder }}</span>
+
+                <!-- overlay de seleção -->
+                <div
+                    v-if="overlay.visible"
+                    class="ccv-overlay"
+                    :style="{ left: `${overlay.left}px`, top: `${overlay.top}px`, width: `${overlay.width}px`, height: `${overlay.height}px` }"
+                >
+                    <span
+                        v-for="handle in HANDLES"
+                        :key="handle"
+                        class="ccv-handle"
+                        :class="`ccv-handle--${handle}`"
+                        @pointerdown="onHandleDown($event, handle)"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.ccv-root{display:flex;flex-direction:column;max-width:100%;width:-moz-fit-content;width:fit-content}.ccv-toolbar{background:#fafbfc;border:.5px solid #e6e8f0;border-bottom:none;border-radius:8px 8px 0 0;flex-wrap:wrap;gap:2px;padding:4px 6px}.ccv-btn,.ccv-toolbar{align-items:center;display:flex}.ccv-btn{border-radius:6px;color:#475569;font-size:13px;gap:4px;height:26px;justify-content:center;min-width:26px;padding:0 6px;transition:background .15s ease}.ccv-btn:hover{background:#eef1f4}.ccv-btn--danger:hover{background:#fee2e2;color:#dc2626}.ccv-btn-label{font-size:12px}.ccv-sep{background:#e6e8f0;height:16px;margin:0 4px;width:1px}.ccv-select{background:#fff;border:.5px solid #e5e7eb;border-radius:6px;color:#374151;font-size:12px;max-width:130px;outline:none;padding:2px 4px}.ccv-select--narrow{max-width:56px}.ccv-color{background:none;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;height:22px;padding:0;width:26px}.ccv-hint{color:#9ca3af;font-size:11px;margin-left:auto;padding-right:6px}.ccv-viewport{border:.5px solid #e6e8f0;border-radius:0 0 8px 8px;max-width:100%;overflow-x:auto}.ccv-band{background:#fff;background-image:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(99,102,241,.02) 0,rgba(99,102,241,.02) 24px);box-sizing:border-box;outline:none;overflow:hidden;position:relative}.ccv-canvas{inset:0;position:absolute}.ccv-canvas :deep([data-el]){cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ccv-canvas :deep([data-el=text]){color:#64748b;font-size:11px;line-height:1.4;min-height:12px;min-width:12px;white-space:pre-wrap}.ccv-canvas :deep([data-el=text][contenteditable=true]){background:rgba(99,102,241,.03);cursor:text;outline:1px dashed #c7d2fe;-webkit-user-select:text;-moz-user-select:text;user-select:text}.ccv-ghost{bottom:8px;color:#94a3b8;font-size:11px;opacity:.65;right:24px}.ccv-ghost,.ccv-placeholder{pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ccv-placeholder{color:#b6bec7;font-size:12px;left:24px;top:50%;transform:translateY(-50%)}.ccv-overlay{pointer-events:none}.ccv-handle,.ccv-overlay{border:1px solid #6366f1;position:absolute}.ccv-handle{background:#fff;border-radius:2px;height:8px;pointer-events:auto;width:8px}.ccv-handle--nw{cursor:nwse-resize;left:-4px;top:-4px}.ccv-handle--n{cursor:ns-resize;left:calc(50% - 4px);top:-4px}.ccv-handle--ne{cursor:nesw-resize;right:-4px;top:-4px}.ccv-handle--e{cursor:ew-resize;right:-4px;top:calc(50% - 4px)}.ccv-handle--se{bottom:-4px;cursor:nwse-resize;right:-4px}.ccv-handle--s{bottom:-4px;cursor:ns-resize;left:calc(50% - 4px)}.ccv-handle--sw{bottom:-4px;cursor:nesw-resize;left:-4px}.ccv-handle--w{cursor:ew-resize;left:-4px;top:calc(50% - 4px)}.ccv-hidden{display:none}
+</style>