myio-js-library 0.1.560 → 0.1.561

package/dist/index.cjs

@@ -908,7 +908,7 @@ module.exports = __toCommonJS(src_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.560",
+  version: "0.1.561",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -68307,7 +68307,19 @@ var WelcomeModalView = class _WelcomeModalView {
       shoppingCardBg: themeConfig.shoppingCardBackgroundColor,
       shoppingCardBorder: themeConfig.shoppingCardBorderColor
     };
-    return { ...DEFAULT_PALETTE, ...configPalette, ...this.params.palette };
+    return { ...DEFAULT_PALETTE, ...configPalette, ...this.readDashboardBrand(), ...this.params.palette };
+  }
+  /**
+   * Paleta do tema do dashboard (createMyIOTheme publica --myio-brand-700/600 no :root).
+   * Quando presente, substitui o roxo padrão da modal; `params.palette` explícito ainda prevalece.
+   */
+  readDashboardBrand() {
+    if (typeof document === "undefined" || typeof getComputedStyle !== "function") return {};
+    const cs = getComputedStyle(document.documentElement);
+    const brand700 = cs.getPropertyValue("--myio-brand-700").trim();
+    if (!brand700) return {};
+    const brand600 = cs.getPropertyValue("--myio-brand-600").trim();
+    return { primary: brand700, secondary: brand600 || brand700 };
   }
   /**
    * Set theme mode and update UI
@@ -68684,9 +68696,9 @@ var WelcomeModalView = class _WelcomeModalView {
   background: linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 50%, #0d1117 100%);
   border-radius: 14px;
   box-shadow:
-    0 0 0 1px rgba(122, 47, 247, 0.2),
+    0 0 0 1px color-mix(in srgb, var(--wm-primary) 20%, transparent),
     0 25px 80px rgba(0, 0, 0, 0.5),
-    0 0 60px rgba(122, 47, 247, 0.15);
+    0 0 60px color-mix(in srgb, var(--wm-primary) 15%, transparent);
   overflow: hidden;
   /* Ensure flex children can handle their own overflow */
   min-height: 0;
@@ -68703,7 +68715,7 @@ var WelcomeModalView = class _WelcomeModalView {
   padding: 16px 32px 8px 32px;
   background:
     linear-gradient(180deg,
-      rgba(122, 47, 247, 0.25) 0%,
+      color-mix(in srgb, var(--wm-primary) 25%, transparent) 0%,
       var(--wm-gradient-start) 20%,
       var(--wm-gradient-end) 80%,
       rgba(13, 17, 23, 0.95) 100%
@@ -68712,7 +68724,7 @@ var WelcomeModalView = class _WelcomeModalView {
   background-size: cover;
   background-position: center;
   min-height: 22vh;
-  border-bottom: 1px solid rgba(122, 47, 247, 0.2);
+  border-bottom: 1px solid color-mix(in srgb, var(--wm-primary) 20%, transparent);
 }
 
 /* Brand Logo - Large floating */
@@ -68906,15 +68918,15 @@ var WelcomeModalView = class _WelcomeModalView {
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow:
-    0 4px 20px rgba(122, 47, 247, 0.4),
-    0 0 0 0 rgba(122, 47, 247, 0);
+    0 4px 20px color-mix(in srgb, var(--wm-primary) 40%, transparent),
+    0 0 0 0 color-mix(in srgb, var(--wm-primary) 0%, transparent);
 }
 
 .myio-welcome-cta-btn:hover {
   transform: translateY(-3px);
   box-shadow:
-    0 8px 30px rgba(122, 47, 247, 0.5),
-    0 0 0 4px rgba(122, 47, 247, 0.2);
+    0 8px 30px color-mix(in srgb, var(--wm-primary) 50%, transparent),
+    0 0 0 4px color-mix(in srgb, var(--wm-primary) 20%, transparent);
 }
 
 .myio-welcome-cta-btn:active {
@@ -68972,7 +68984,7 @@ var WelcomeModalView = class _WelcomeModalView {
 .myio-welcome-search:focus-within {
   background: rgba(255,255,255,0.12);
   border-color: var(--wm-primary);
-  box-shadow: 0 0 0 2px rgba(122, 47, 247, 0.2);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wm-primary) 20%, transparent);
 }
 
 .myio-welcome-search-icon {
@@ -69193,17 +69205,17 @@ var WelcomeModalView = class _WelcomeModalView {
 /* Hover effects only for clickable cards */
 .myio-welcome-card--clickable:hover {
   transform: scale(1.03);
-  border-color: rgba(122, 47, 247, 0.5);
+  border-color: color-mix(in srgb, var(--wm-primary) 50%, transparent);
   box-shadow:
     0 12px 40px rgba(0,0,0,0.4),
-    0 0 0 1px rgba(122, 47, 247, 0.4),
-    0 0 30px rgba(122, 47, 247, 0.15);
+    0 0 0 1px color-mix(in srgb, var(--wm-primary) 40%, transparent),
+    0 0 30px color-mix(in srgb, var(--wm-primary) 15%, transparent);
 }
 
 .myio-welcome-card--clickable:focus {
   outline: none;
   box-shadow:
-    0 0 0 3px rgba(122, 47, 247, 0.5),
+    0 0 0 3px color-mix(in srgb, var(--wm-primary) 50%, transparent),
     0 12px 40px rgba(0,0,0,0.4);
 }
 
@@ -69365,7 +69377,7 @@ var WelcomeModalView = class _WelcomeModalView {
 .myio-welcome-card-device-count.energy .count-spinner { border-top-color: #22c55e; }
 .myio-welcome-card-device-count.water .count-spinner { border-top-color: #3b82f6; }
 .myio-welcome-card-device-count.temperature .count-spinner { border-top-color: #f97316; }
-.myio-welcome-card-device-count.users .count-spinner { border-top-color: #a78bfa; }
+.myio-welcome-card-device-count.users .count-spinner { border-top-color: color-mix(in srgb, var(--wm-primary) 55%, white); }
 .myio-welcome-card-device-count.alarms .count-spinner { border-top-color: #ef4444; }
 .myio-welcome-card-device-count.annotations .count-spinner { border-top-color: #6c5ce7; }
 .myio-welcome-card-device-count.notifications .count-spinner { border-top-color: #f59e0b; }
@@ -69390,7 +69402,7 @@ var WelcomeModalView = class _WelcomeModalView {
   height: 100%;
   width: 0%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #7c3aed, #22c55e);
+  background: linear-gradient(90deg, var(--wm-primary), #22c55e);
   background-size: 200% 100%;
   animation: welcome-progress-shimmer 1.6s ease infinite;
   transition: width 0.4s ease;
@@ -69424,7 +69436,7 @@ var WelcomeModalView = class _WelcomeModalView {
   height: 100%;
   width: 0%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #7c3aed, #a78bfa, #22c55e);
+  background: linear-gradient(90deg, var(--wm-primary), color-mix(in srgb, var(--wm-primary) 55%, white), #22c55e);
   background-size: 200% 100%;
   animation: welcome-progress-shimmer 1.6s ease infinite;
   transition: width 0.4s ease;
@@ -69761,13 +69773,13 @@ var WelcomeModalView = class _WelcomeModalView {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  gap: 6px !important;
+  gap: 8px !important;
 }
 
 /* Extend device-count styles for meta types */
 .myio-welcome-card-device-count.users:hover {
-  background: rgba(124, 58, 237, 0.3);
-  border-color: rgba(124, 58, 237, 0.5);
+  background: color-mix(in srgb, var(--wm-primary) 30%, transparent);
+  border-color: color-mix(in srgb, var(--wm-primary) 50%, transparent);
 }
 
 .myio-welcome-card-device-count.alarms:hover {
@@ -69780,7 +69792,7 @@ var WelcomeModalView = class _WelcomeModalView {
   border-color: rgba(234, 179, 8, 0.5);
 }
 
-.myio-welcome-card-device-count.users .icon { color: #a78bfa; }
+.myio-welcome-card-device-count.users .icon { color: color-mix(in srgb, var(--wm-primary) 55%, white); }
 .myio-welcome-card-device-count.alarms .icon { color: #f87171; }
 .myio-welcome-card-device-count.notifications .icon { color: #fbbf24; }
 
@@ -69802,21 +69814,21 @@ var WelcomeModalView = class _WelcomeModalView {
 .myio-welcome-modal--light .myio-welcome-modal-container {
   background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 50%, #f0f2f5 100%);
   box-shadow:
-    0 0 0 1px rgba(122, 47, 247, 0.15),
+    0 0 0 1px color-mix(in srgb, var(--wm-primary) 15%, transparent),
     0 25px 80px rgba(0, 0, 0, 0.2),
-    0 0 60px rgba(122, 47, 247, 0.1);
+    0 0 60px color-mix(in srgb, var(--wm-primary) 10%, transparent);
 }
 
 .myio-welcome-modal--light .myio-welcome-hero {
   background:
     linear-gradient(180deg,
-      rgba(122, 47, 247, 0.12) 0%,
+      color-mix(in srgb, var(--wm-primary) 12%, transparent) 0%,
       rgba(255, 255, 255, 0.7) 20%,
       rgba(255, 255, 255, 0.85) 80%,
       rgba(248, 249, 252, 0.95) 100%
     ),
     var(--wm-bg-image, none);
-  border-bottom: 1px solid rgba(122, 47, 247, 0.15);
+  border-bottom: 1px solid color-mix(in srgb, var(--wm-primary) 15%, transparent);
 }
 
 .myio-welcome-modal--light .myio-welcome-hero-title {
@@ -69906,11 +69918,11 @@ var WelcomeModalView = class _WelcomeModalView {
 }
 
 .myio-welcome-modal--light .myio-welcome-card:hover {
-  border-color: rgba(122, 47, 247, 0.4);
+  border-color: color-mix(in srgb, var(--wm-primary) 40%, transparent);
   box-shadow:
     0 12px 40px rgba(0, 0, 0, 0.12),
-    0 0 0 1px rgba(122, 47, 247, 0.3),
-    0 0 30px rgba(122, 47, 247, 0.1);
+    0 0 0 1px color-mix(in srgb, var(--wm-primary) 30%, transparent),
+    0 0 30px color-mix(in srgb, var(--wm-primary) 10%, transparent);
 }
 
 .myio-welcome-modal--light .myio-welcome-card::before {
@@ -69998,8 +70010,8 @@ var WelcomeModalView = class _WelcomeModalView {
 
 /* Light theme - meta counts use same device-count light styles */
 .myio-welcome-modal--light .myio-welcome-card-device-count.users:hover {
-  background: rgba(124, 58, 237, 0.15);
-  border-color: rgba(124, 58, 237, 0.4);
+  background: color-mix(in srgb, var(--wm-primary) 15%, transparent);
+  border-color: color-mix(in srgb, var(--wm-primary) 40%, transparent);
 }
 
 .myio-welcome-modal--light .myio-welcome-card-device-count.alarms:hover {
@@ -70193,13 +70205,13 @@ var WelcomeModalView = class _WelcomeModalView {
   buildCardHTML(card, index) {
     const bgImage = card.bgImageUrl ? `<div class="myio-welcome-card-bg" data-src="${card.bgImageUrl}"></div>` : "";
     const meta = card.metaCounts || {};
-    const renderMetaCount = (count) => count === null ? '<span class="count-spinner"></span>' : String(count ?? 0);
+    const renderMetaCount = (count) => count === null ? '<span class="count-spinner"></span>' : `<span class="count">${count ?? 0}</span>`;
     const thirdBadgeHTML = meta.annotationsLocked ? `<span class="myio-welcome-card-device-count annotations locked"
               data-tooltip-type="annotations-locked"
               data-card-index="${index}"
               title="Anota\xE7\xF5es \u2014 funcionalidade n\xE3o liberada ainda (em breve)"
               style="opacity:.6;cursor:not-allowed;">
-          <span class="icon">\u{1F4CB}</span> <span class="icon" style="font-size:.85em;">\u{1F512}</span>
+          <span class="icon">\u{1F4CB}</span> <span class="count">\u{1F512}</span>
         </span>` : "annotations" in meta ? `<span class="myio-welcome-card-device-count annotations"
               data-tooltip-type="annotations"
               data-card-index="${index}"
@@ -70487,47 +70499,107 @@ var WelcomeModalView = class _WelcomeModalView {
     );
   }
   static metaChip(text2) {
-    return `<span style="display:inline-block;padding:2px 8px;margin:0 4px 4px 0;border-radius:10px;background:#334155;font-weight:700">${_WelcomeModalView.escapeMetaHtml(text2)}</span>`;
-  }
+    return `<span class="myio-welcome-meta-tip__chip">${_WelcomeModalView.escapeMetaHtml(text2)}</span>`;
+  }
+  // Mesmo padrão visual do EnergySummaryTooltip (card branco, header em degradê da cor do tipo,
+  // banner de total, títulos de seção em caixa alta). Usuários segue a cor do tema do dashboard.
+  static META_TIP_CSS = `
+.myio-welcome-meta-tip {
+  position: fixed; z-index: 100000; width: 360px; max-width: calc(100vw - 16px);
+  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
+  font: 12px 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: #1e293b; overflow: hidden; display: none;
+}
+.myio-welcome-meta-tip__header {
+  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
+  background: linear-gradient(90deg, var(--mt-bg1) 0%, var(--mt-bg2) 100%);
+  border-bottom: 1px solid var(--mt-border);
+}
+.myio-welcome-meta-tip__icon { font-size: 18px; }
+.myio-welcome-meta-tip__title { flex: 1; font-weight: 700; font-size: 14px; color: var(--mt-accent); }
+.myio-welcome-meta-tip__timestamp { font-size: 10px; color: #6b7280; }
+.myio-welcome-meta-tip__close {
+  width: 24px; height: 24px; border: none; border-radius: 4px; cursor: pointer;
+  background: rgba(255, 255, 255, 0.6); color: #64748b;
+  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
+}
+.myio-welcome-meta-tip__close:hover { background: rgba(255, 255, 255, 0.9); color: #1e293b; }
+.myio-welcome-meta-tip__body { padding: 14px; max-height: 60vh; overflow-y: auto; }
+.myio-welcome-meta-tip__total {
+  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px;
+}
+.myio-welcome-meta-tip__total-label { font-weight: 600; color: #475569; font-size: 12px; }
+.myio-welcome-meta-tip__total-value { font-weight: 700; font-size: 20px; color: #1e293b; }
+.myio-welcome-meta-tip__section-title {
+  font-weight: 700; font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;
+  margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0;
+}
+.myio-welcome-meta-tip__chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.myio-welcome-meta-tip__chip {
+  display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px;
+  color: var(--mt-accent); background: var(--mt-bg1); border: 1px solid var(--mt-border);
+}
+.myio-welcome-meta-tip__row { padding: 7px 10px; border-radius: 6px; }
+.myio-welcome-meta-tip__row:nth-child(odd) { background: #f8fafc; }
+.myio-welcome-meta-tip__row-title { font-weight: 600; color: #1e293b; }
+.myio-welcome-meta-tip__row-sub { color: #64748b; font-size: 11px; margin-top: 1px; }
+.myio-welcome-meta-tip__empty { color: #64748b; padding: 6px 2px; }
+`;
   ensureMetaTip() {
     if (this.metaTipEl && document.body.contains(this.metaTipEl)) return this.metaTipEl;
+    if (!document.getElementById("myio-welcome-meta-tip-styles")) {
+      const style = document.createElement("style");
+      style.id = "myio-welcome-meta-tip-styles";
+      style.textContent = _WelcomeModalView.META_TIP_CSS;
+      document.head.appendChild(style);
+    }
     const tip = document.createElement("div");
     tip.className = "myio-welcome-meta-tip";
-    Object.assign(tip.style, {
-      position: "fixed",
-      zIndex: "100000",
-      minWidth: "260px",
-      maxWidth: "360px",
-      maxHeight: "60vh",
-      overflow: "auto",
-      background: "#1e293b",
-      color: "#e2e8f0",
-      border: "1px solid #334155",
-      borderRadius: "10px",
-      boxShadow: "0 12px 40px rgba(0,0,0,.45)",
-      padding: "12px 14px",
-      font: "12px 'Nunito', system-ui, -apple-system, sans-serif",
-      display: "none"
-    });
     tip.addEventListener("mouseenter", () => {
       if (this.metaTipHideTimer) clearTimeout(this.metaTipHideTimer);
     });
     tip.addEventListener("mouseleave", () => this.startMetaTipDelayedHide());
+    tip.addEventListener("click", (e) => {
+      if (e.target.closest(".myio-welcome-meta-tip__close")) this.hideMetaTip();
+    });
     document.body.appendChild(tip);
     this.metaTipEl = tip;
     return tip;
   }
+  /** Cores do tooltip por tipo de badge (usuários = cor do tema). */
+  metaTipAccent(type) {
+    if (type === "alarms") return { accent: "#b91c1c", bg1: "#fef2f2", bg2: "#fee2e2", border: "#fca5a5" };
+    if (type.startsWith("annotations")) return { accent: "#5b21b6", bg1: "#f5f3ff", bg2: "#ede9fe", border: "#c4b5fd" };
+    if (type === "notifications") return { accent: "#b45309", bg1: "#fffbeb", bg2: "#fef3c7", border: "#fcd34d" };
+    const p = this.palette.primary || "#7A2FF7";
+    return {
+      accent: p,
+      bg1: `color-mix(in srgb, ${p} 6%, white)`,
+      bg2: `color-mix(in srgb, ${p} 16%, white)`,
+      border: `color-mix(in srgb, ${p} 40%, white)`
+    };
+  }
   showMetaTip(anchorEl, type, card) {
     const tip = this.ensureMetaTip();
     if (this.metaTipHideTimer) clearTimeout(this.metaTipHideTimer);
+    const c = this.metaTipAccent(type);
+    tip.style.setProperty("--mt-accent", c.accent);
+    tip.style.setProperty("--mt-bg1", c.bg1);
+    tip.style.setProperty("--mt-bg2", c.bg2);
+    tip.style.setProperty("--mt-border", c.border);
     tip.innerHTML = this.buildMetaTipHtml(type, card);
     tip.style.display = "block";
     const r = anchorEl.getBoundingClientRect();
-    const tw = Math.min(360, window.innerWidth - 16);
+    const tw = tip.offsetWidth || Math.min(360, window.innerWidth - 16);
     let left = r.left;
     if (left + tw > window.innerWidth - 8) left = window.innerWidth - tw - 8;
     tip.style.left = Math.max(8, left) + "px";
-    tip.style.top = r.bottom + 8 + "px";
+    const th = tip.offsetHeight;
+    const below = r.bottom + 8;
+    tip.style.top = (below + th > window.innerHeight - 8 ? Math.max(8, r.top - th - 8) : below) + "px";
   }
   startMetaTipDelayedHide() {
     if (this.metaTipHideTimer) clearTimeout(this.metaTipHideTimer);
@@ -70545,56 +70617,88 @@ var WelcomeModalView = class _WelcomeModalView {
     const chip = _WelcomeModalView.metaChip;
     const meta = card.metaCounts || {};
     const details = card.metaDetails || {};
-    const loadingBody = '<div style="opacity:.7;padding:6px 0">Carregando\u2026</div>';
-    const header = (icon2, label, count) => `<div style="font-weight:800;font-size:13px;margin-bottom:8px">${icon2} ${label}${count === null || count === void 0 ? "" : ` (${count})`} \u2014 ${esc8(card.title)}</div>`;
-    const row = (titleHtml, subHtml) => `<div style="padding:6px 0;border-top:1px solid #334155">
-         <div style="font-weight:600">${titleHtml}</div>
-         ${subHtml ? `<div style="opacity:.7">${subHtml}</div>` : ""}
+    const now = /* @__PURE__ */ new Date();
+    const stamp = `${String(now.getDate()).padStart(2, "0")}/${String(now.getMonth() + 1).padStart(2, "0")} ${String(
+      now.getHours()
+    ).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
+    const frame = (icon2, label, body) => `<div class="myio-welcome-meta-tip__header">
+         <span class="myio-welcome-meta-tip__icon">${icon2}</span>
+         <span class="myio-welcome-meta-tip__title">${label} (${esc8(card.title)})</span>
+         <span class="myio-welcome-meta-tip__timestamp">${stamp}</span>
+         <button type="button" class="myio-welcome-meta-tip__close" title="Fechar">\u2715</button>
+       </div>
+       <div class="myio-welcome-meta-tip__body">${body}</div>`;
+    const total = (label, value) => `<div class="myio-welcome-meta-tip__total">
+         <span class="myio-welcome-meta-tip__total-label">${label}</span>
+         <span class="myio-welcome-meta-tip__total-value">${value}</span>
        </div>`;
+    const section = (title) => `<div class="myio-welcome-meta-tip__section-title">${title}</div>`;
+    const empty = (text2) => `<div class="myio-welcome-meta-tip__empty">${text2}</div>`;
+    const loadingBody = empty("Carregando\u2026");
+    const row = (titleHtml, subHtml) => `<div class="myio-welcome-meta-tip__row">
+         <div class="myio-welcome-meta-tip__row-title">${titleHtml}</div>
+         ${subHtml ? `<div class="myio-welcome-meta-tip__row-sub">${subHtml}</div>` : ""}
+       </div>`;
+    const more = (n) => n > 10 ? empty(`\u2026 e mais ${n - 10}`) : "";
     if (type === "alarms") {
-      if (meta.alarms === null) return header("\u{1F6A8}", "Alarmes") + loadingBody;
+      if (meta.alarms === null) return frame("\u{1F6A8}", "Alarmes", loadingBody);
       const alarms = details.alarms || [];
       const byState = {};
       for (const a of alarms) {
         const s = a.state || "OPEN";
         byState[s] = (byState[s] || 0) + 1;
       }
-      const chips = Object.entries(byState).map(([s, n]) => chip(`${s}: ${n}`)).join("") || '<span style="opacity:.7">Sem alarmes ativos</span>';
+      const chips = Object.entries(byState).map(([s, n]) => chip(`${s}: ${n}`)).join("");
       const rows = alarms.slice(0, 10).map(
         (a) => row(
           esc8(a.deviceName ? `${a.deviceName} \u2014 ${a.title || "Alarme"}` : a.title || "Alarme"),
-          `${esc8(a.severity || "")} \xB7 ${esc8(a.state || "")}`
+          [a.severity, a.state].filter(Boolean).map(esc8).join(" \xB7 ")
         )
       ).join("");
-      return `${header("\u{1F6A8}", "Alarmes", meta.alarms ?? alarms.length)}<div style="margin-bottom:6px">${chips}</div>${rows}`;
+      return frame(
+        "\u{1F6A8}",
+        "Alarmes",
+        total("Total de Alarmes", meta.alarms ?? alarms.length) + (chips ? section("Por estado") + `<div class="myio-welcome-meta-tip__chips">${chips}</div>` : "") + section("Mais recentes") + (rows || empty("Sem alarmes ativos")) + more(alarms.length)
+      );
     }
     if (type === "annotations-locked") {
-      return header("\u{1F4CB}", "Anota\xE7\xF5es") + '<div style="opacity:.85;padding:6px 0">\u{1F512} Funcionalidade n\xE3o liberada ainda \u2014 em breve.</div>';
+      return frame("\u{1F4CB}", "Anota\xE7\xF5es", empty("\u{1F512} Funcionalidade n\xE3o liberada ainda \u2014 em breve."));
     }
     if (type === "annotations") {
-      if (meta.annotations === null) return header("\u{1F4CB}", "Anota\xE7\xF5es") + loadingBody;
+      if (meta.annotations === null) return frame("\u{1F4CB}", "Anota\xE7\xF5es", loadingBody);
       const annotations = details.annotations || [];
       const byType = {};
       for (const a of annotations) {
         const t = a.type || "observation";
         byType[t] = (byType[t] || 0) + 1;
       }
-      const chips = Object.entries(byType).map(([t, n]) => chip(`${t}: ${n}`)).join("") || '<span style="opacity:.7">Sem anota\xE7\xF5es ativas</span>';
+      const chips = Object.entries(byType).map(([t, n]) => chip(`${t}: ${n}`)).join("");
       const rows = annotations.slice(0, 10).map((a) => {
         const when = a.createdAt ? new Date(a.createdAt).toLocaleDateString("pt-BR") : "";
         const text2 = a.text.length > 90 ? `${a.text.slice(0, 90)}\u2026` : a.text;
         return row(esc8(a.deviceLabel || "Dispositivo"), `${esc8(text2)}${when ? ` \xB7 ${esc8(when)}` : ""}`);
       }).join("");
-      return `${header("\u{1F4CB}", "Anota\xE7\xF5es", meta.annotations ?? annotations.length)}<div style="margin-bottom:6px">${chips}</div>${rows}`;
+      return frame(
+        "\u{1F4CB}",
+        "Anota\xE7\xF5es",
+        total("Total de Anota\xE7\xF5es", meta.annotations ?? annotations.length) + (chips ? section("Por tipo") + `<div class="myio-welcome-meta-tip__chips">${chips}</div>` : "") + section("Mais recentes") + (rows || empty("Sem anota\xE7\xF5es ativas")) + more(annotations.length)
+      );
     }
     if (type === "users") {
-      if (meta.users === null) return header("\u{1F465}", "Usu\xE1rios") + loadingBody;
+      if (meta.users === null) return frame("\u{1F465}", "Usu\xE1rios", loadingBody);
       const users = details.users || [];
-      const rows = users.slice(0, 10).map((u) => row(esc8(u.name), esc8(u.email || ""))).join("") || '<div style="opacity:.7;padding:6px 0">Sem usu\xE1rios</div>';
-      const more = users.length > 10 ? `<div style="opacity:.7;padding:6px 0 0">\u2026 e mais ${users.length - 10}</div>` : "";
-      return `${header("\u{1F465}", "Usu\xE1rios", meta.users ?? users.length)}${rows}${more}`;
+      const rows = users.slice(0, 10).map((u) => row(esc8(u.name), esc8(u.email || ""))).join("");
+      return frame(
+        "\u{1F465}",
+        "Usu\xE1rios",
+        total("Total de Usu\xE1rios", meta.users ?? users.length) + section("Usu\xE1rios") + (rows || empty("Sem usu\xE1rios")) + more(users.length)
+      );
     }
-    return header("\u{1F514}", "Notifica\xE7\xF5es", meta.notifications ?? 0) + '<div style="opacity:.7;padding:6px 0">Sem notifica\xE7\xF5es</div>';
+    return frame(
+      "\u{1F514}",
+      "Notifica\xE7\xF5es",
+      total("Total de Notifica\xE7\xF5es", meta.notifications ?? 0) + empty("Sem notifica\xE7\xF5es")
+    );
   }
   /**
    * Handle tooltip icon click - shows the appropriate tooltip