acai-ui 1.65.5

package/src/scss/_utilities.scss

@@ -0,0 +1,75 @@
+// Açaí UI — Utilitárias dark-aware para CONSUMIDORES (templates)
+//
+// Classes prontas que usam os tokens `--acai-*` → retingem sozinhas no escuro /
+// daltônico / alto contraste. Emitidas UMA vez no bundle (via `styles-global.scss`
+// → `dist/acai-ui.css`), então chegam pra qualquer consumidor de `.../styles`.
+//
+//   <div class="bg-acai border-acai">
+//     <h3 class="text-acai-heading">Título</h3>
+//     <p class="text-acai-muted">Descrição</p>
+//   </div>
+//
+// `!important` como as utilitárias do Quasar (`.text-*`/`.bg-*`), pra vencer o
+// default do componente de forma previsível. Namespace `acai` não colide com o
+// Quasar (que usa nomes de cor).
+
+// — Texto —
+.text-acai {
+  color: var(--acai-text) !important;
+}
+.text-acai-muted {
+  color: var(--acai-text-muted) !important;
+}
+.text-acai-heading {
+  color: var(--acai-heading) !important;
+}
+.text-acai-primary {
+  color: var(--acai-primary) !important;
+}
+.text-acai-on {
+  color: var(--acai-control-on) !important;
+}
+
+// — Status como tinta (dark-aware). Para FUNDO sólido use `bg-negative` etc. —
+.text-acai-negative {
+  color: var(--acai-negative) !important;
+}
+.text-acai-positive {
+  color: var(--acai-positive) !important;
+}
+.text-acai-info {
+  color: var(--acai-info) !important;
+}
+.text-acai-warning {
+  color: var(--acai-warning) !important;
+}
+
+// — Fundo —
+.bg-acai {
+  background-color: var(--acai-surface) !important;
+}
+.bg-acai-2 {
+  background-color: var(--acai-surface-2) !important;
+}
+.bg-acai-page {
+  background-color: var(--acai-page-bg) !important;
+}
+.bg-acai-elevated {
+  background-color: var(--acai-elevated) !important;
+}
+.bg-acai-hover {
+  background-color: var(--acai-surface-hover) !important;
+}
+
+// — Borda —
+.border-acai {
+  border: 1px solid var(--acai-border) !important;
+}
+.border-acai-subtle {
+  border: 1px solid var(--acai-border-subtle) !important;
+}
+
+// — Elevação (sombra por tema) —
+.shadow-acai {
+  box-shadow: var(--acai-elevation) !important;
+}

package/src/scss/_variables.scss

@@ -0,0 +1,143 @@
+// Açaí UI — Color Tokens
+
+$primary: #0e2a50;
+
+// — Açaí (superfície do menu) —
+//
+// 🔴 NÃO SÃO DEFAULT DA LIB. São a identidade da DOCUMENTAÇÃO, e ficam aqui só
+// como registro do tom canônico.
+//
+// Chegaram a ser promovidos a default de `--acai-drawer-bg` (1.59.0), com a
+// intenção de acabar com o desencontro de o fundo do menu sair do navy
+// (`$primary`) enquanto texto e hover saem da rampa `$color-primary-*`, que é
+// roxa. Só que o default da lib chega em TODO app consumidor, e o menu desses
+// apps é navy — eles ganharam um menu roxo sem pedir. Revertido: na lib o
+// drawer é `$primary`, e a documentação veste o roxo no próprio `app.scss`
+// (`packages/docs/src/css/app.scss`), que é pra isso que a var existe.
+//
+// Se um dia o desencontro navy×rampa-roxa for reatacado, a saída é a RAMPA
+// virar navy — não o menu virar roxo.
+//
+// ⚠️ NÃO trocar por um tom mais claro sem refazer a conta: o texto do menu é
+// `$color-primary-50` (#f5f4ff) e o eMAG 4.1 pede 4.5:1. Aqui sobra folga —
+// 16.22:1 no claro e 17.23:1 no escuro.
+$acai-menu: #2d033b;
+$acai-menu-dark: #1b0a26;
+// Cabeçalho do grupo que contém o item ativo — um degrau acima do fundo.
+// `//` e não `/** */`: em SCSS o bloco `/* */` é PRESERVADO e vaza pro CSS
+// final (este comentário estava saindo no meio do dist/acai-ui.css).
+$acai-menu-grupo-ativo: #3d0a50;
+$secondary: #26a69a;
+$accent: #9c27b0;
+$shadow-primary: #0000004a;
+$dark: #1d1d1d;
+$dark-page: #121212;
+
+// Fundo da área de conteúdo (atrás dos cards) — cinza frio com viés navy.
+$bg-conteudo: #eef1f7;
+
+// Cores alinhadas com a paleta DETRAN (gestao-pessoas-web) — decisão consciente
+// do user em 2026-05-28, priorizando consistência visual entre sistemas.
+// Trade-off: $positive (3.99:1) e $warning (2.33:1) NÃO atingem contraste WCAG AA
+// mínimo (4.5:1) com texto branco. Botões/badges dessas cores não atendem eMAG 4.1.
+// Ver AUDIT_EMAG.md item #9.
+// $info NÃO está mais nessa lista (medido em 2026-07-17): o 1.91:1 anotado aqui era do
+// ciano antigo (#31ccec); com o #0a76a0 escuro dá 5.11:1 e PASSA AA com texto branco.
+$positive: #38904c;
+$negative: #941c2a;
+$info: #0a76a0;     // mantido escuro (user só pediu positive/warning/negative) — 5.11:1 c/ branco
+
+$warning: #e19c2d;  // âmbar DETRAN (alinhado ao gestao-pessoas-web por pref. do user 2026-07-10)
+
+// variacoes primary
+$color-primary-900: #1e385a;
+$color-primary-800: #2a3f6e;
+$color-primary-700: #4944b3;
+$color-primary-600: #5a55c4;
+$color-primary-500: #6b66d5;
+$color-primary-400: #7a76de;
+$color-primary-300: #9f9ce8;
+$color-primary-200: #c4c2f1;
+$color-primary-100: #e1deff;
+$color-primary-50: #f5f4ff;
+$color-primary-25: #fdfdff;
+
+// variacoes gray
+$color-gray-900: #131313;
+$color-gray-800: #1f1f1f;
+$color-gray-700: #3d3d3d;
+$color-gray-600: #707070;
+$color-gray-500: #eeeeee;
+$color-gray-400: #f9f9f9;
+$color-gray-300: #e0e0e0;
+$color-gray-200: #c7c7c7;
+$color-gray-disabled-700: #d9d9d9;
+$color-gray-100: #f3f3f3;
+$color-gray-50: #f2f2f2;
+$color-gray-10: #fafafa;
+$color-gray-5: #fcfcfc;
+$color-white-100: #ffffff;
+
+// variacoes red
+$color-red-900: #5c0f1a;
+$color-red-800: #731320;
+$color-red-700: #8a1725;
+$color-red-600: #941c2a;
+$color-red-500: #b52232;
+$color-red-400: #d4394a;
+$color-red-300: #e06070;
+$color-red-200: #ec9da6;
+$color-red-100: #f5c8cd;
+$color-red-50: #fdeaec;
+
+// variacoes yellow
+$color-yellow-900: #7a5200;
+$color-yellow-800: #946300;
+$color-yellow-700: #b37800;
+$color-yellow-600: #cc8a00;
+$color-yellow-500: #e19c2d;
+$color-yellow-400: #f0b840;
+$color-yellow-300: #f5cb66;
+$color-yellow-200: #f9dd99;
+$color-yellow-100: #fceecc;
+$color-yellow-50: #fef8e8;
+
+// variacoes green
+$color-green-900: #1b4726;
+$color-green-800: #225a30;
+$color-green-700: #2b6e3b;
+$color-green-600: #38904c;
+$color-green-500: #43a858;
+$color-green-400: #5cbb6f;
+$color-green-300: #7fcd8e;
+$color-green-200: #a8deb3;
+$color-green-100: #d0eed6;
+$color-green-50: #edf8ef;
+
+// hover/active (pré-calculados para evitar @use sass:color)
+$primary-hover: #0b2242;
+$primary-active: #081a33;
+$negative-hover: #7d1723;
+$negative-active: #5f111a;
+// Hover/active de positive proporcionais ao $positive #38904c (paleta DETRAN).
+$positive-hover: #2f7a40;
+$positive-active: #256434;
+$accent-hover: #8420a0;
+$accent-active: #6c1a83;
+// Hover/active de info — mantidos derivados do $info escuro (não foi pedido reverter).
+$info-hover: #08607f;
+$info-active: #054b62;
+// Warning sem hover/active próprios — Quasar usa default (paleta original DETRAN
+// também não tinha — gestao-pessoas-web define só $warning base).
+
+// variacoes blue
+$color-blue-900: #0a1e3d;
+$color-blue-800: #0e2a50;
+$color-blue-700: #143a6e;
+$color-blue-600: #1a4a8c;
+$color-blue-500: #2060b0;
+$color-blue-400: #3a80d0;
+$color-blue-300: #6aa0e0;
+$color-blue-200: #9cc0ee;
+$color-blue-100: #c8dff5;
+$color-blue-50: #e8f0fb;

package/src/scss/api.scss

@@ -0,0 +1,77 @@
+// Açaí UI — API de tokens semânticos para CONSUMIDORES (SCSS)
+//
+// Use estes `$acai-*` no SEU SCSS em vez do primitivo `var(--acai-*)`. Cada um é um
+// alias para `var(--acai-*)`, então o valor RETINGE sozinho no escuro / daltônico /
+// alto contraste — você escreve uma vez e os 3 eixos das Preferências funcionam.
+//
+//   @import '@para-springboot/acai-ui/scss/api';
+//
+//   .meu-card {
+//     background: $acai-surface;
+//     color: $acai-text;
+//     border: 1px solid $acai-border;
+//     box-shadow: $acai-elevation;
+//   }
+//
+// (Sem esta camada, o dev usaria `var(--acai-surface)` cru e teria que lembrar os
+// nomes; ou pior, hardcodaria um hex e quebraria o dark.)
+
+// — Texto —
+$acai-text: var(--acai-text);
+$acai-text-muted: var(--acai-text-muted);
+$acai-heading: var(--acai-heading);
+
+// — Superfícies —
+$acai-page-bg: var(--acai-page-bg);
+$acai-surface: var(--acai-surface);
+$acai-surface-2: var(--acai-surface-2);
+$acai-surface-hover: var(--acai-surface-hover);
+$acai-elevated: var(--acai-elevated);
+
+// — Bordas —
+$acai-border: var(--acai-border);
+$acai-border-subtle: var(--acai-border-subtle);
+
+// — Marca / interativo —
+// `$acai-primary` = navy da marca (só interativo recolore no daltônico).
+// `$acai-control-on` = cor de destaque interativa (navy no claro, azul no escuro,
+// cor CVD no daltônico) — use em foco, switch ligado, item ativo.
+$acai-primary: var(--acai-primary);
+$acai-control-on: var(--acai-control-on);
+
+// — Status como TINTA (texto, ícone, borda, mensagem) —
+// Clareiam sozinhos no escuro e recolorem no daltônico. Use em vez de
+// `$negative`/`$positive`/`$info`/`$warning`, que são hex fixo e ficam
+// ilegíveis sobre a superfície escura.
+// Para FUNDO sólido continue usando `bg-negative` / `color="negative"` etc.: o
+// par fundo-sólido + texto branco já é legível, e clarear o fundo obrigaria a
+// inverter o texto para escuro.
+$acai-negative: var(--acai-negative);
+$acai-positive: var(--acai-positive);
+$acai-info: var(--acai-info);
+$acai-warning: var(--acai-warning);
+
+// — Elevação (sombra pronta, por tema) —
+$acai-elevation: var(--acai-elevation);
+
+// — Gráfico: séries categóricas —
+// Use na ORDEM (1 → 5): pares adjacentes são os que mais se distinguem. Da 6ª
+// categoria em diante use `$acai-chart-other` — a lib agrupa nele de propósito
+// (5 séries é o teto do que se lê num gráfico).
+// Cada um retinge sozinho no escuro e nos 4 modos de daltonismo.
+$acai-chart-1: var(--acai-chart-1);
+$acai-chart-2: var(--acai-chart-2);
+$acai-chart-3: var(--acai-chart-3);
+$acai-chart-4: var(--acai-chart-4);
+$acai-chart-5: var(--acai-chart-5);
+$acai-chart-other: var(--acai-chart-other);
+
+// — Gráfico: chrome —
+// São alias de `$acai-border-subtle` / `$acai-border` / `$acai-text*` /
+// `$acai-surface*`, então já vêm reforçados no alto contraste.
+$acai-chart-surface: var(--acai-chart-surface);
+$acai-chart-grid: var(--acai-chart-grid);
+$acai-chart-axis: var(--acai-chart-axis);
+$acai-chart-ink: var(--acai-chart-ink);
+$acai-chart-ink-muted: var(--acai-chart-ink-muted);
+$acai-chart-track: var(--acai-chart-track);

package/src/scss/tokens.scss

@@ -0,0 +1,13 @@
+// Açaí UI — All Tokens (barrel import)
+@import './variables';
+@import './spacing';
+@import './breakpoints';
+@import './typography';
+@import './radius';
+@import './effects';
+@import './controls';
+@import './badge';
+@import './color-utilities';
+@import './reset';
+@import './overlays';
+@import './themes';

package/src/styles-global.scss

@@ -0,0 +1,30 @@
+// Açaí UI — Camada de tema GLOBAL do bundle.
+//
+// Importada pelo entry (`src/index.ts`) pra que o `dist/acai-ui.css` (o export
+// `@para-springboot/acai-ui/styles`) seja SELF-CONTAINED: passe a conter as
+// definições globais `:root { --acai-* }` / `.body--dark { --acai-* }` /
+// `html[data-acai-daltonismo]` / `html[data-acai-contraste]` que vivem em
+// `_themes.scss`.
+//
+// Sem isto, quem importa só `.../styles` recebe os componentes usando
+// `var(--acai-*)` SEM as custom properties definidas em lugar nenhum → dark,
+// daltônico e alto contraste caem no fallback claro silenciosamente (footgun).
+//
+// `@import` explícito de `variables` porque `_themes.scss` consome `$primary`,
+// `$warning`, `$bg-conteudo`, `$color-*` etc. — e consumidores via condition
+// `vue` (source: docs/sandboxes) compilam este arquivo pelo próprio Vite, SEM o
+// `additionalData` da lib. NÃO importar o `tokens.scss` inteiro aqui: arrastaria
+// reset/controls/badge/overlays pro bundle (só queremos a camada de tema).
+@import './scss/variables';
+@import './scss/themes';
+
+// Utilitárias dark-aware dev-facing (`.text-acai-*`/`.bg-acai-*`/`.border-acai`).
+// Só usa `var(--acai-*)`, então é emitida uma vez aqui e chega no dist pra qualquer
+// consumidor de `.../styles`.
+@import './scss/utilities';
+
+// Barra de rolagem no desenho do drawer, valendo pra aplicação inteira. Entra
+// aqui (e não no `tokens.scss`) porque é regra GLOBAL sem seletor de
+// componente: precisa ser emitida uma vez só, no bundle que todo consumidor
+// importa. Só usa `var(--acai-scroll-*)`, definidos logo acima em `_themes`.
+@import './scss/scrollbar';

package/src/utils/date-utils.ts

@@ -0,0 +1,128 @@
+/** Faixa aceita pelos parsers/validadores de data da lib. */
+export const ANO_MIN = 1900
+export const ANO_MAX = 2100
+
+/**
+ * Parse ESTRITO de DD/MM/YYYY — retorna `null` se a data não existir no calendário.
+ *
+ * `new Date(2026, 1, 31)` não falha: o JS "rola" para 03/03. Por isso o round-trip
+ * abaixo é obrigatório — sem ele, 31/02/2026 passa como válida e ainda faz as
+ * comparações de minDate/maxDate rodarem contra o dia errado.
+ *
+ * Hora zerada, para comparação segura com outras datas normalizadas.
+ * @example
+ * parseDataIndian('28/02/2026') // Date
+ * parseDataIndian('31/02/2026') // null (fevereiro não tem 31)
+ * parseDataIndian('21/32/3213') // null (mês 32, ano fora da faixa)
+ */
+export function parseDataIndian(date: unknown): Date | null {
+  if (typeof date !== 'string') return null
+  const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(date.trim())
+  if (!m) return null
+  const dia = Number(m[1])
+  const mes = Number(m[2])
+  const ano = Number(m[3])
+  if (ano < ANO_MIN || ano > ANO_MAX) return null
+  const data = new Date(ano, mes - 1, dia)
+  if (data.getFullYear() !== ano || data.getMonth() !== mes - 1 || data.getDate() !== dia) {
+    return null
+  }
+  data.setHours(0, 0, 0, 0)
+  return data
+}
+
+/**
+ * `true` se for HH:mm válida em 24h (00–23 : 00–59).
+ * @example
+ * horaValida('23:59') // true
+ * horaValida('88:77') // false
+ */
+export function horaValida(hora: unknown): boolean {
+  if (typeof hora !== 'string') return false
+  const m = /^(\d{2}):(\d{2})$/.exec(hora.trim())
+  if (!m) return false
+  return Number(m[1]) <= 23 && Number(m[2]) <= 59
+}
+
+/** DD/MM/YYYY → YYYY-MM-DD */
+export function dateIndianToISO(date: string): string {
+  const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(date)
+  if (!m) return date
+  return `${m[3]}-${m[2]}-${m[1]}`
+}
+
+/** YYYY-MM-DD → DD/MM/YYYY */
+export function dateISOToIndian(date: string): string {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(date)
+  if (!m) return date
+  return `${m[3]}/${m[2]}/${m[1]}`
+}
+
+const LOCALE_BR = 'pt-BR'
+
+/** Data por extenso: "segunda-feira, 5 de junho de 2026". Default = hoje. */
+export function formatarDataPorExtenso(date: Date = new Date()): string {
+  return new Intl.DateTimeFormat(LOCALE_BR, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }).format(date)
+}
+
+/** ISO/Date string → "dd/mm/yyyy HH:mm" (timezone America/Sao_Paulo por padrão). */
+export function formatarDataHora(dataISO: string, timeZone = 'America/Sao_Paulo'): string {
+  const data = new Date(dataISO)
+  if (Number.isNaN(data.getTime())) return ''
+  const partes = new Intl.DateTimeFormat(LOCALE_BR, {
+    timeZone,
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }).formatToParts(data)
+  const pegar = (tipo: Intl.DateTimeFormatPartTypes): string =>
+    partes.find((p) => p.type === tipo)?.value ?? ''
+  return `${pegar('day')}/${pegar('month')}/${pegar('year')} ${pegar('hour')}:${pegar('minute')}`
+}
+
+/** Data de hoje em dd/mm/yyyy (pt-BR). */
+export function obterDataAtual(): string {
+  return new Date().toLocaleDateString(LOCALE_BR)
+}
+
+/** "ontem - hoje" em dd/mm/yyyy — útil como range default de filtro. */
+export function obterDataAtualEAnterior(): string {
+  const hoje = new Date()
+  const ontem = new Date()
+  ontem.setDate(hoje.getDate() - 1)
+  return `${ontem.toLocaleDateString(LOCALE_BR)} - ${hoje.toLocaleDateString(LOCALE_BR)}`
+}
+
+/** Ano (4 dígitos) de uma data — default hoje. */
+export function anoAtual(date: Date = new Date()): number {
+  return date.getFullYear()
+}
+
+/** Mês atual (1–12). */
+export function mesAtual(): number {
+  return new Date().getMonth() + 1
+}
+
+/** Meses pra selects: `[{ label: 'Janeiro', value: 1 }, ...]`. */
+export function getMeses(): { label: string; value: number }[] {
+  return Array.from({ length: 12 }, (_v, i) => {
+    const nome = new Intl.DateTimeFormat(LOCALE_BR, { month: 'long' }).format(new Date(0, i))
+    return { label: nome.charAt(0).toUpperCase() + nome.slice(1), value: i + 1 }
+  })
+}
+
+/** Anos do atual até `anoInicial` (decrescente). Default `anoInicial = 2021`. */
+export function getAnos(anoInicial = 2021): number[] {
+  const atual = new Date().getFullYear()
+  const anos: number[] = []
+  for (let ano = atual; ano >= anoInicial; ano--) anos.push(ano)
+  return anos
+}

package/src/utils/dialog-utils.ts

@@ -0,0 +1,59 @@
+import { Dialog } from 'quasar'
+import AcaiUiConfirm, { type AlertColor } from '../components/confirm/acai-ui-confirm.vue'
+import type { MaterialIconValues } from '../constants/lista-icons'
+
+export interface ConfirmarOpcoes {
+  title?: string
+  message?: string
+  htmlContent?: string
+  icon?: MaterialIconValues
+  color?: AlertColor
+  confirmLabel?: string
+  cancelLabel?: string
+  maxWidth?: string
+}
+
+export const DialogUtils = {
+  confirmar(
+    title = 'Confirmação',
+    message = 'Tem certeza?',
+    confirmLabel = 'Confirmar',
+    cancelLabel = 'Cancelar',
+  ): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      Dialog.create({
+        component: AcaiUiConfirm,
+        componentProps: {
+          title,
+          message,
+          confirmLabel,
+          cancelLabel,
+          persistent: true,
+        },
+      })
+        .onOk(() => resolve(true))
+        .onCancel(() => resolve(false))
+    })
+  },
+
+  alertar(opcoes: ConfirmarOpcoes): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      Dialog.create({
+        component: AcaiUiConfirm,
+        componentProps: {
+          title: opcoes.title ?? 'Atenção',
+          message: opcoes.message ?? '',
+          htmlContent: opcoes.htmlContent,
+          icon: opcoes.icon,
+          color: opcoes.color,
+          confirmLabel: opcoes.confirmLabel ?? 'OK',
+          cancelLabel: opcoes.cancelLabel ?? 'Cancelar',
+          maxWidth: opcoes.maxWidth,
+          persistent: true,
+        },
+      })
+        .onOk(() => resolve(true))
+        .onCancel(() => resolve(false))
+    })
+  },
+}

package/src/utils/file-utils.ts

@@ -0,0 +1,85 @@
+export const FileUtils = {
+  /** Lê um File e retorna a Data URL completa (`data:...;base64,...`). */
+  toBase64(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(reader.result as string)
+      reader.onerror = (error) => reject(error)
+      reader.readAsDataURL(file)
+    })
+  },
+
+  /** Como `toBase64`, mas remove o prefixo `data:...;base64,` — útil quando o
+   * backend espera só o conteúdo base64. */
+  toBase64SemPrefixo(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () =>
+        resolve((reader.result as string).replace(/^data:.*;base64,/, ''))
+      reader.onerror = (error) => reject(error)
+      reader.readAsDataURL(file)
+    })
+  },
+
+  /** Converte uma lista de arquivos (aceita `null`) em base64 SEM prefixo,
+   * preservando as posições (`null` → `null`). */
+  arquivosParaBase64(arquivos: (File | null)[]): Promise<(string | null)[]> {
+    const ler = (arquivo: File | null): Promise<string | null> =>
+      arquivo ? FileUtils.toBase64SemPrefixo(arquivo) : Promise.resolve(null)
+    return Promise.all(arquivos.map(ler))
+  },
+
+  /** Reconstrói um `File` a partir de uma string base64 (sem prefixo). */
+  base64ParaFile(base64: string, nomeArquivo: string, tipo: string): File {
+    const byteString = atob(base64)
+    const intArray = new Uint8Array(byteString.length)
+    for (let i = 0; i < byteString.length; i++) {
+      intArray[i] = byteString.charCodeAt(i)
+    }
+    const blob = new Blob([intArray], { type: tipo })
+    return new File([blob], nomeArquivo, { type: tipo })
+  },
+
+  fromBase64ToDataUrl(base64: string): string | null {
+    if (!base64) return null
+    const trimmed = base64.trim()
+    if (!trimmed) return null
+    if (trimmed.startsWith('data:image/')) return trimmed
+
+    const header = trimmed.replace(/^data:[^;]+;base64,/, '').slice(0, 10)
+    let mime = 'image/jpeg'
+    if (header.startsWith('iVBOR')) mime = 'image/png'
+    if (header.startsWith('R0lGOD')) mime = 'image/gif'
+    if (header.startsWith('UklGR')) mime = 'image/webp'
+    return `data:${mime};base64,${trimmed}`
+  },
+
+  /** Dispara o download de um Blob/File no navegador (cria `<a>`, clica e
+   * revoga a URL). Substitui o `downloadBlob`/`exportarArquivoBlob` que era
+   * copiado em todos os apps. */
+  baixarBlob(conteudo: Blob | File, nomeArquivo: string): void {
+    const url = window.URL.createObjectURL(conteudo)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = nomeArquivo
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    window.URL.revokeObjectURL(url)
+  },
+
+  /** Formata bytes em string legível: `1536` → `1.50 KB`. */
+  formatarTamanhoArquivo(tamanhoEmBytes: number): string {
+    const unidades = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB']
+    if (!Number.isFinite(tamanhoEmBytes) || tamanhoEmBytes < 1) {
+      return `${Math.max(0, tamanhoEmBytes || 0).toFixed(2)} Bytes`
+    }
+    let tamanho = tamanhoEmBytes
+    let indice = 0
+    while (tamanho >= 1024 && indice < unidades.length - 1) {
+      tamanho /= 1024
+      indice++
+    }
+    return `${tamanho.toFixed(2)} ${unidades[indice]}`
+  },
+}

package/src/utils/filtro-input.ts

@@ -0,0 +1,41 @@
+/**
+ * Cria listeners de teclado que bloqueiam caracteres não permitidos.
+ * Uso no template: `v-on="filtro"`
+ */
+export function criarFiltroTeclado(permitidos: RegExp) {
+  return {
+    keydown(e: KeyboardEvent) {
+      // `e.key` pode vir undefined em eventos sintéticos / autofill — guardar antes
+      // de ler `.length` (senão "Cannot read properties of undefined (reading 'length')"
+      // derruba o handler em todo campo com `v-on="filtroNome"`).
+      if (e.ctrlKey || e.metaKey || e.altKey || !e.key || e.key.length > 1) return
+      if (!permitidos.test(e.key)) {
+        e.preventDefault()
+      }
+    },
+  }
+}
+
+/**
+ * Cria uma regra de validação que rejeita caracteres fora do permitido.
+ * Uso: `:rules="[criarRegraCaracteres(/regex/, 'message')]"`
+ */
+export function criarRegraCaracteres(invalidos: RegExp, message: string) {
+  return (valor: string) => {
+    if (!valor) return true
+    if (invalidos.test(valor)) return message
+    return true
+  }
+}
+
+// Preset: NOME (letras com acento, espaço e hífen)
+const PERMITIDO_NOME = /^[a-zA-ZÀ-ÿ\s-]$/
+
+/** Eventos de teclado para campos de nome. Uso: `v-on="filtroNome"` */
+export const filtroNome = criarFiltroTeclado(PERMITIDO_NOME)
+
+/** Regra de validação para campos de nome. Uso: `:rules="[regraNome]"` */
+export const regraNome = criarRegraCaracteres(
+  /[^a-zA-ZÀ-ÿ\s-]|[ ]{2}/,
+  'Apenas letras, espaços e hífen. Sem espaços duplos.',
+)