agenciapsilmno/blueprints/melissa-page-blueprint.md

Blueprint — Melissa Page

Padrão de página fullscreen dentro do MelissaLayout (Direção B do redesign). Use isto como molde pra cada nova página: Financeiro, WhatsApp, Prontuários etc. Validado em MelissaAgenda.vue (referência canônica) e MelissaPacientes.vue.

---

1. Princípio

Cada Melissa Page é um componente fullscreen que ocupa o viewport inteiro (menos 6px de respiro + faixa do dock 76px no bottom), montado via v-if="layoutReady && secaoAberta === '<key>'" no MelissaLayout.vue.

A página tem uma área central de conteúdo principal (a coluna que importa) e 0–N colunas auxiliares (asides). No desktop convivem lado a lado; no mobile (<lg), as auxiliares saem do layout e viajam pra um drawer off-canvas via <Teleport>.

---

2. Estrutura macro do template

<template>
    <!-- 1) Drawer host: SEMPRE fora do .xx-page, sibling. v-show controla
         visibilidade pra ser um Teleport target válido em todo momento. -->
    <aside class="xx-mobile-drawer" :class="{ 'is-open': drawerOpen }" v-show="isMobile">
        <div id="xx-mobile-drawer-target" class="xx-mobile-drawer__scroll" />
    </aside>

    <!-- 2) Backdrop: irmão do drawer, animado via <Transition>. -->
    <Transition name="xx-drawer-fade">
        <div v-if="isMobile && drawerOpen" class="xx-mobile-drawer__backdrop" @click="fecharDrawer" />
    </Transition>

    <!-- 3) Página propriamente dita -->
    <section class="xx-page">
        <header class="xx-page__head">
            <button class="xx-menu-btn xx-menu-btn--mobile-only" @click="toggleDrawer">
                <i class="pi pi-bars" /><span>Menu</span>
            </button>
            <div class="xx-page__title">…</div>
            <div class="xx-page__actions">…</div>
        </header>

        <div class="xx-body">
            <!-- Asides: cada um vai pro drawer em mobile via Teleport -->
            <Teleport to="#xx-mobile-drawer-target" :disabled="!isMobile">
                <aside class="xx-side">…</aside>
            </Teleport>

            <!-- Conteúdo central — SEMPRE fica em .xx-page, nunca teleporta -->
            <div class="xx-main">…</div>

            <Teleport to="#xx-mobile-drawer-target" :disabled="!isMobile">
                <aside class="xx-widgets">…</aside>
            </Teleport>
        </div>
    </section>
</template>

Substitua xx- pelo prefixo da página (ma- agenda, mp- pacientes, mf- financeiro, etc.).

---

3. Breakpoints

≥1280px  (xl)       → todas as colunas + filtros inline na toolbar
1024–1279 (lg→xl)   → todas as colunas + filtros migram pro botão "Ações"
≤1023px   (<lg)     → 1 coluna (central 100%) + asides off-canvas no drawer
                      título da página some em <lg, "Menu" button aparece

Convenção: se a página não tem filtros/toolbar complexa, ignore o breakpoint xl e trabalhe só com lg.

---

4. Z-index hierarchy

.xx-mobile-drawer            80    ← drawer aberto cobre o ψ
.xx-mobile-drawer__backdrop  79    ← acima do ψ, abaixo do drawer
.psi-btn                     70    ← botão Melissa (workspace)
.melissa-dock                65    ← faixa bottom (chip cronômetro etc.)
.xx-page                     40    ← página em si

Drawer e backdrop devem ficar acima do ψ. O ψ continua abaixo pra ser coberto quando o drawer está aberto (decisão de UX validada com Leonardo).

---

5. Setup do <script setup>

import { ref, onMounted, onBeforeUnmount } from 'vue';

const drawerOpen = ref(false);
const isMobile = ref(false);
const isCompact = ref(false);

let _mqMobile = null;
let _mqCompact = null;
function _onMqMobileChange(e) {
    isMobile.value = e.matches;
    if (!e.matches) drawerOpen.value = false; // saiu do mobile, fecha drawer
}
function _onMqCompactChange(e) {
    isCompact.value = e.matches;
}
onMounted(() => {
    if (typeof window !== 'undefined' && window.matchMedia) {
        _mqMobile = window.matchMedia('(max-width: 1023px)');
        isMobile.value = _mqMobile.matches;
        _mqMobile.addEventListener('change', _onMqMobileChange);

        _mqCompact = window.matchMedia('(max-width: 1279px)');
        isCompact.value = _mqCompact.matches;
        _mqCompact.addEventListener('change', _onMqCompactChange);
    }
});
onBeforeUnmount(() => {
    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
    if (_mqCompact) _mqCompact.removeEventListener('change', _onMqCompactChange);
});

function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
function fecharDrawer() { drawerOpen.value = false; }

---

6. CSS base (copy-paste, troque xx- pelo prefixo)

/* Container glass — convenção das Melissa Pages */
.xx-page {
    position: absolute;
    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-medium);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1px solid var(--m-border);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--m-text);
    animation: xx-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes xx-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

/* Header da página */
.xx-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
    gap: 10px;
}
.xx-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
}
.xx-page__title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xx-page__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Body — flex row em desktop, column em mobile */
.xx-body {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

/* Botão "Menu" (mobile only) — primary filled, abre o drawer */
.xx-menu-btn { display: none; /* show via @media abaixo */ }
.xx-menu-btn {
    height: 32px;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--m-accent);
    border: 1px solid var(--m-accent);
    color: white;
    padding: 0 11px;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 140ms ease, transform 140ms ease;
}
.xx-menu-btn:hover { background: color-mix(in srgb, var(--m-accent) 88%, white); transform: translateY(-1px); }
.xx-menu-btn:active { transform: translateY(0); }

/* Drawer mobile — fora do .xx-page, fullheight */
.xx-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh; /* iOS toolbar dynamic */
    width: min(360px, 88vw);
    z-index: 80; /* acima do ψ (70) */
    background: var(--m-bg-medium);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-right: 1px solid var(--m-border);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--m-text);
}
.xx-mobile-drawer.is-open { transform: translateX(0); }

.xx-mobile-drawer__scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.xx-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.xx-mobile-drawer__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Asides perdem padding/scroll/borda próprios quando teleportados pro drawer */
.xx-mobile-drawer__scroll .xx-side,
.xx-mobile-drawer__scroll .xx-widgets {
    width: 100%;
    flex-shrink: 0;
    height: auto;
    overflow: visible;
    border-right: none;
    border-left: none;
    background: transparent;
    padding: 0;
}

/* Backdrop */
.xx-mobile-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 79;
}
.xx-drawer-fade-enter-active,
.xx-drawer-fade-leave-active { transition: opacity 200ms ease; }
.xx-drawer-fade-enter-from,
.xx-drawer-fade-leave-to { opacity: 0; }

/* Mobile (<lg) — central 100%, asides off-canvas, título some */
@media (max-width: 1023px) {
    .xx-body { flex-direction: column; }
    .xx-main { width: 100%; }
    .xx-page__title { display: none; }
    .xx-menu-btn { display: inline-flex; }
}

---

7. Pegadinhas (DON'Ts)

❌ NÃO envolver Melissa Page com <Transition> no MelissaLayout

<!-- ❌ ERRADO — leave delay cria orphan placeholder em Teleport
     targets compartilhados. Crash: "Cannot set properties of null
     (setting '__vnode')". -->
<Transition name="page-fade">
    <MelissaXxx v-if="secaoAberta === 'xxx'" />
</Transition>

<!-- ✅ CERTO — animação como @keyframes na própria .xx-page -->
<MelissaXxx v-if="layoutReady && secaoAberta === 'xxx'" />

❌ NÃO importar Menu do PrimeVue manualmente

PrimeVueResolver auto-importa. Import duplo cria instâncias fantasmas e quebra o reconciler com emitsOptions: null em shouldUpdateComponent.

// ❌ NÃO faça
import Menu from 'primevue/menu';

❌ NÃO usar <Teleport><Transition><Element v-if>

Quando múltiplos Teleports compartilham target (ex: .melissa-dock):

<!-- ❌ ERRADO — placeholders órfãos no target compartilhado -->
<Teleport to=".melissa-dock">
    <Transition name="...">
        <Element v-if="cond" />
    </Transition>
</Teleport>

<!-- ✅ CERTO — Transition envolve Teleport, não o contrário -->
<Transition name="...">
    <Teleport v-if="cond" to=".melissa-dock">
        <Element />
    </Teleport>
</Transition>

❌ NÃO escopar CSS de Teleport target

Targets globais (.melissa-dock, #xx-mobile-drawer-target) precisam de CSS no <style> (sem scoped). Vue compiler hoista nodes static e perde data-v-{hash}, então o seletor scoped não casa.

⚠️ Em deep-link (URL → secaoAberta), precisa do layoutReady

MelissaLayout expõe layoutReady que vira true 1 nextTick após mount. Use v-if="layoutReady && secaoAberta === 'xxx'" no MelissaLayout, não só v-if="secaoAberta === 'xxx'". Sem isso, o <Teleport to=".melissa-dock"> da Melissa Page tenta achar target que ainda não foi montado → crash em moveTeleport → insertBefore(null, ...) quando triggers reativos do PrimeVue setTheme caem entre mount e flush.

⚠️ Tooltips PrimeVue

Em código real use v-tooltip.top="'texto'" (auto-registrado via PrimeVueResolver). NÃO use title="" em produção — só vale em preview.

---

8. Wire-up no MelissaLayout.vue

1. Importar o componente:

   import MelissaFinanceiro from './MelissaFinanceiro.vue';
   

2. Adicionar a section na lista de seções "promovidas" (perto de MelissaAgenda/MelissaPacientes em MelissaLayout.vue:~1273):

   <MelissaFinanceiro
       v-if="layoutReady && secaoAberta === 'financeiro'"
       @close="fecharSecao"
   />
   

3. Adicionar 'financeiro' ao SECOES map se ainda não estiver.

4. Atualizar o item correspondente no MelissaMenu.vue pra emit select('financeiro') (sem route) — fica seção interna do Melissa. OU manter com route: { name: 'therapist-financeiro' } se for navegar pra fora do Melissa (depende do escopo da página).

---

9. Loading states

Princípio: skeleton só na primeira carga (sem dados ainda). Refetches subsequentes (mudança de range, refresh manual) mantêm a UI estável e mostram só feedback discreto (overlay leve / spinner em botão).

Classe global .melissa-skeleton

Definida no bloco <style> (não scoped) do MelissaLayout.vue. Herda do shimmer global, respeita prefers-reduced-motion. Variantes:

Classe	Uso
.melissa-skeleton--text	Linha de texto (~12px)
.melissa-skeleton--title	Heading (~18px)
.melissa-skeleton--number	Número de stat (~24×32px)
.melissa-skeleton--avatar	Círculo 32×32

Pattern: skeleton só na 1ª carga

// Computed no <script setup>
const pacientesCarregandoInicial = computed(
    () => props.pacientesLoading && (props.pacientes?.length || 0) === 0
);

<!-- Template — bifurca pelo computed -->
<template v-if="pacientesCarregandoInicial">
    <div v-for="i in 6" :key="`psk-${i}`" class="xx-pat xx-pat--skeleton" aria-busy="true">
        <span class="xx-pat__avatar melissa-skeleton melissa-skeleton--avatar" />
        <span class="melissa-skeleton melissa-skeleton--text" :style="{ width: `${55 + (i * 7) % 30}%` }" />
    </div>
</template>
<div v-for="p in pacientes" v-else :key="p.id" class="xx-pat">…</div>

Variar a width do skeleton com a expressão ${55 + (i * 7) % 30}% evita linhas idênticas — fica mais natural visualmente.

Pattern: classe --skeleton neutraliza hover/cursor

.xx-pat--skeleton,
.xx-stat--skeleton,
.xx-sess--skeleton {
    cursor: default;
    pointer-events: none;
    opacity: 0.95;
}
.xx-pat--skeleton:hover { background: inherit; transform: none; }

Pattern: overlay de loading (refetch silencioso)

Quando o componente já tem dados mas tá refetcheando (ex: FullCalendar trocando de view), use um overlay pequeno no canto:

<Transition name="xx-loading-fade">
    <div v-if="loadingRef" class="xx-loading-corner" aria-busy="true">
        <i class="pi pi-spin pi-spinner" />
    </div>
</Transition>

.xx-loading-corner {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 5;
    pointer-events: none; /* não bloqueia clicks */
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-bg-medium) 80%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
}

Pattern: botão com spinner durante operação

<button
    class="xx-act-btn"
    :disabled="busy"
    @click="onClick"
>
    <i :class="busy ? 'pi pi-spin pi-spinner' : 'pi pi-plus'" />
    <span>Agendar</span>
</button>

const busy = ref(false);
async function onClick() {
    if (busy.value) return;
    busy.value = true;
    try {
        await operacao();
    } finally {
        // Pequeno timeout pra UI mostrar o spinner mesmo quando a operação
        // é síncrona (perceived performance).
        setTimeout(() => { busy.value = false; }, 200);
    }
}

---

10. Popover de "Ações" da toolbar

Quando filtros/toggles inline ficam apertados (<xl), migre pra um Popover com <SelectButton> em vez do antigo <Menu> com lista. Vantagens: estado visível direto (não precisa abrir/fechar pra ver), mudança imediata sem fechar o popover, melhor pra dedo em mobile.

<button class="xx-cal__btn xx-cal__btn--compact-only" @click="openActions">
    <i class="pi pi-ellipsis-v" /><span>Ações</span>
</button>
<Popover ref="actionsPopRef" class="xx-actions-pop">
    <div class="xx-actions">
        <div class="xx-actions__group">
            <div class="xx-actions__label">Visualização</div>
            <SelectButton v-model="view" :options="viewOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" class="w-full" />
        </div>
        <div class="xx-actions__divider" />
        <!-- Ações que não são toggle de estado ficam como botões -->
        <div class="xx-actions__group">
            <div class="xx-actions__label">Bloquear</div>
            <div class="xx-actions__buttons">
                <button class="xx-actions__btn" @click="onBlock('horario')">
                    <i class="pi pi-clock" /><span>Por horário</span>
                </button>
                <!-- … -->
            </div>
        </div>
    </div>
</Popover>

import Popover from 'primevue/popover'; // ← obrigatório (auto-import só pega Menu)

const actionsPopRef = ref(null);
function openActions(e) { actionsPopRef.value?.toggle(e); }
function closeActions() { try { actionsPopRef.value?.hide(); } catch {} }

CSS do popover: ver .ma-actions* em MelissaAgenda.vue como referência (min-width 260px, gap 14px entre groups, divisor sutil, botões em grid 2×2).

Quando usar <Menu> em vez de <Popover>: menus de ação simples com 1-2 items (kebab de paciente, etc.) — lista vertical funciona e é mais leve. Use <Popover> quando tiver SelectButton, layout custom ou quiser que mudanças não fechem.

---

11. Header — convenção de botões

Tipo	Tamanho	Border-radius	Notas
Botão close (X)	32×32 icon-only	9px	display: grid; place-items: center
Botão action icon-only (config, settings)	32×32 icon-only	9px	Mesmo template do close
Botão "Menu" mobile (abre drawer)	32px alto, padding 0 11px	9px	Primary filled (var(--m-accent))

Regra: botões icon-only no header sempre 32×32. Não use padding livre — sai com tamanho diferente do close e quebra alinhamento visual.

.xx-head-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 140ms ease;
}
.xx-head-btn > i { font-size: 0.85rem; }

---

12. Border-radius — convenção

Teto 12px pra qualquer elemento dentro de uma Melissa Page. Hierarquia:

Nível	Elemento	Radius
Container externo	.xx-page (a "tela" inteira)	18px
Card / widget	.xx-w (containers internos)	12px
Item dentro de card	.xx-stat, .xx-sess, .xx-pat	10px
Botão small	.xx-head-btn, .xx-close, ações da toolbar	9px
Pill / badge	counts, novo, status	999px (full round)
Avatar	.xx-pat__avatar	50%

Não passe de 12px em cards internos. Visualmente conflita com o radius do container externo (18px) e fica "infantil".

---

13. Checklist pra cada nova Melissa Page

Estrutura

• Componente Melissa<Nome>.vue em src/layout/melissa/
• Prefixo CSS único (mf-, mw-, mr-...)
• Estrutura template: drawer host (sibling) + backdrop + <section class="xx-page">
• <Teleport> em cada aside, target #xx-mobile-drawer-target
• isMobile/isCompact via matchMedia (1023/1279)
• drawerOpen/toggleDrawer/fecharDrawer
• Botão "Menu" mobile-only no header
• Botão "Fechar" no header → emit('close') (volta pro resumo)
• @keyframes xx-page-enter em .xx-page (não use <Transition> no parent)
• z-index drawer 80, backdrop 79
• CSS de drawer e backdrop com mesmas dimensões da Agenda (min(360px, 88vw))
• Wire-up no MelissaLayout.vue com layoutReady &&
• Adicionar entry no MelissaMenu (com ou sem route)

Loading

• Composable expõe loading ref
• Prop xxxLoading na Melissa Page (passa do parent)
• Computed xxxCarregandoInicial (loading && data.length === 0)
• Skeleton com melissa-skeleton + variantes nos lugares que importam
• Botões de ação (criar, salvar) com :disabled="busy" + spinner

Visual

• Botões icon-only no header: 32×32, radius 9px
• Cards internos: radius 12px (containers) / 10px (items)
• Toggles/filtros em <Popover> com <SelectButton> (não <Menu> lista)

---

14. Pattern: CRUD de catálogo (Tags / Grupos / Médicos)

Páginas estilo "catálogo simples" — entidades com nome + cor (ou só dados de contato), CRUD básico, contagem de itens vinculados. Layout 2-col padrão:

• Aside (~280px): stats (4 cards 2×2) + busca
• Main: lista de cards (cor/avatar + nome + meta + actions)
• Click no card → dialog edit
• Botão "+ Novo" no header do mp-page__actions
• Lock visual em items "do sistema" (tags padrão, grupos sistema, etc.) — cards não-clicáveis, sem botões editar/excluir
• Color picker nativo (<input type="color">) + 12 preset colors clicáveis no dialog

Em mobile: Novo vira icon-only 32×32 (texto some via media query).

15. Pattern: Lista com dialog de detalhes (Cadastros Recebidos)

Páginas onde cada item tem muitas informações que não cabem no card. Padrão:

• Card mostra só o essencial (nome + contato + status + tempo)
• Click → dialog de detalhes com seções de campos (grid-cols-2 gap-x-4 gap-y-1)
• Footer do dialog tem ações principais à direita (Rejeitar / Converter)
• Dialog usa Dialog do PrimeVue com :visible controlado (não v-model:visible pra ter mais controle do close)

<Dialog
    :visible="dlg.open"
    modal
    dismissable-mask
    :style="{ width: '640px', maxWidth: '94vw' }"
    @update:visible="(v) => !v && closeDlg()"
>
    <div class="flex flex-col gap-4">
        <!-- Header com avatar + status + tempo -->
        <!-- Seções: Identificação, Documentos, Endereço, ... -->
        <div v-for="sec in dlgSections" :key="sec.title">
            <div class="text-[0.62rem] uppercase tracking-wider font-semibold opacity-70">{{ sec.title }}</div>
            <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
                <template v-for="r in sec.rows" :key="r.label">
                    <div class="text-[var(--text-color-secondary)]">{{ r.label }}</div>
                    <div>{{ r.value }}</div>
                </template>
            </div>
        </div>
    </div>
    <template #footer>
        <Button label="Fechar" text @click="closeDlg" />
        <div class="flex-1" />
        <!-- Ações principais à direita -->
    </template>
</Dialog>

16. Pattern: Kanban grid (Conversas / threads)

Páginas com status discretos (urgent / awaiting / resolved) como Conversas:

• Aside esquerda: filtros + atribuição + canais + resumo por status
• Main: grid kanban N-col (4 cols xl, 2 cols compact, 1 col mobile)
• Cada coluna tem header colorido por status (red/amber/blue/emerald)
• Cards são botões clicáveis dentro de scroll vertical da coluna

.xx-kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
}
.xx-col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.xx-col__body { flex: 1; overflow-y: auto; }

@media (max-width: 1279px) { .xx-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1023px) { .xx-kanban { grid-template-columns: 1fr; } }

Cores semânticas (consistentes em todas as Melissa Pages):

• red: 248,113,113 (urgente, faltou, rejeitado)
• amber: 251,191,36 (aguardando, novo, pendente)
• blue: 96,165,250 (info, remarcado)
• emerald/green: 74,222,128 (ok, resolvido, compareceu)

17. Reaproveitamento de composables/services

Sempre reutilizar a lógica de fetch/CRUD existente em vez de duplicar:

Página Melissa	Reutiliza
MelissaCompromissos	DeterminedCommitmentDialog, queries supabase diretas
MelissaRecorrencias	Lógica buildSessions/ruleStats da page antiga
MelissaConversas	useConversations, useConversationTags, ConversationDrawer
MelissaCadastrosRecebidos	Lógica de convertToPatient da page antiga
MelissaMedicos	Medicos.service.js (createMedico/updateMedico/deleteMedico)
MelissaPacientes	useMelissaPacientes, patientsRepository
MelissaAgenda	useMelissaAgenda (composable orquestrador)

Isso garante:

• 0 duplicação de regras de negócio
• Bugs corrigidos numa página antiga já valem na Melissa version
• Migração futura pra route real (Fase 5) é trivial

18. Referência canônica

• 3 colunas + breakpoints xl+lg + popover Ações + skeletons: MelissaAgenda.vue
• 3 colunas com filtros + cards + quickview + drill-down mobile: MelissaPacientes.vue
• CRUD catálogo simples (cor+nome+contagem): MelissaTags.vue, MelissaGrupos.vue
• Catálogo com mais campos: MelissaMedicos.vue
• Lista + dialog de detalhes + ações finais: MelissaCadastrosRecebidos.vue
• Cards com expansão (timeline/sessions): MelissaRecorrencias.vue
• Kanban N-col por status: MelissaConversas.vue
• Reusa dialog externo: MelissaCompromissos.vue (DeterminedCommitmentDialog)
• Wrapper: MelissaLayout.vue (layoutReady, montagem das páginas, classe global .melissa-skeleton)
• Menu de navegação: MelissaMenu.vue (drill-down mobile + drawer 360px)