myio-js-library 0.1.559 → 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.559",
+  version: "0.1.561",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -53165,6 +53165,14 @@ var AlarmApiClient = class {
     return raw?.data ?? raw;
   }
   // -----------------------------------------------------------------------
+  // Rule name (GCDR GET /rules/:id) — usado p/ alarmes cujo title veio como o UUID da regra
+  // -----------------------------------------------------------------------
+  async getRuleName(rulesApiBase, ruleId) {
+    const raw = await this.request(`${rulesApiBase}/rules/${encodeURIComponent(ruleId)}`);
+    const name = raw?.data?.name ?? raw?.name;
+    return typeof name === "string" && name.trim() ? name.trim() : null;
+  }
+  // -----------------------------------------------------------------------
   // Alarm list (GET /alarms)
   // -----------------------------------------------------------------------
   async getAlarms(params = {}) {
@@ -53367,6 +53375,14 @@ function mapApiTopOffenders(items, deviceNameMap) {
     // computed by caller if needed
   }));
 }
+var RULE_ID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function resolveRulesApiBase(explicit, alarmsBase) {
+  let base = explicit || globalThis?.MyIOUtils?.gcdrApiBaseUrl || "";
+  if (!base && alarmsBase.includes("alarms-api")) base = alarmsBase.replace("alarms-api", "gcdr-api");
+  if (!base) return "";
+  base = String(base).replace(/\/+$/, "").replace(/\/api\/v1$/, "");
+  return `${base}/api/v1`;
+}
 var AlarmServiceClass = class {
   client = new AlarmApiClient();
   cacheTtlMs = 3 * 60 * 1e3;
@@ -53375,6 +53391,10 @@ var AlarmServiceClass = class {
   alarmsCache = /* @__PURE__ */ new Map();
   statsCache = /* @__PURE__ */ new Map();
   trendCache = /* @__PURE__ */ new Map();
+  // ruleId → nome da regra (null = não encontrada); sobrevive ao clearCache — nomes de regra quase não mudam
+  ruleNameCache = /* @__PURE__ */ new Map();
+  alarmsBaseUrl = "";
+  rulesBaseUrl = "";
   // -----------------------------------------------------------------------
   // Availability (MTBF / MTTR per device)
   // -----------------------------------------------------------------------
@@ -53414,8 +53434,13 @@ var AlarmServiceClass = class {
     let summary;
     let totalPages = 1;
     let page = 1;
+    const titleByRuleId = /* @__PURE__ */ new Map();
     while (page <= totalPages) {
       const response = await this.client.getAlarms({ ...params, page });
+      for (const a of response.data || []) {
+        const rid = a.metadata?.ruleId;
+        if (rid && a.title && !RULE_ID_RE.test(a.title)) titleByRuleId.set(String(rid), a.title);
+      }
       const pageData = (response.data || []).map((a) => mapApiAlarm(a, customerMap));
       allData = allData.concat(pageData);
       if (page === 1) {
@@ -53424,6 +53449,7 @@ var AlarmServiceClass = class {
       }
       page++;
     }
+    await this.resolveRuleIdTitles(allData, titleByRuleId);
     const result = { data: allData, summary };
     this.alarmsCache.set(cacheKey, { data: result, timestamp: Date.now() });
     return result;
@@ -53534,11 +53560,47 @@ var AlarmServiceClass = class {
    * Set the Alarms API base URL (e.g. from MAIN_VIEW orchestrator settings).
    * Clears the cache so subsequent calls use the new endpoint.
    */
-  configure(baseUrl, cacheTtlMs, apiKey) {
+  configure(baseUrl, cacheTtlMs, apiKey, rulesBaseUrl) {
     this.client.configure(baseUrl ?? "", apiKey);
+    if (baseUrl) this.alarmsBaseUrl = baseUrl;
+    if (rulesBaseUrl) this.rulesBaseUrl = rulesBaseUrl;
     if (cacheTtlMs && cacheTtlMs > 0) this.cacheTtlMs = cacheTtlMs;
     this.clearCache();
   }
+  /**
+   * Alarmes com title = UUID da regra recebem o nome legível: primeiro o título de
+   * outro alarme da mesma regra; senão o nome da regra no GCDR (GET /rules/:id, cacheado).
+   * Falha de lookup mantém o UUID (nunca quebra a listagem).
+   */
+  async resolveRuleIdTitles(alarms, titleByRuleId) {
+    const pending = alarms.filter((a) => a.title && RULE_ID_RE.test(a.title));
+    if (!pending.length) return;
+    const rulesBase = resolveRulesApiBase(this.rulesBaseUrl, this.alarmsBaseUrl);
+    const toFetch = [
+      ...new Set(pending.map((a) => a.title).filter((rid) => !titleByRuleId.has(rid) && !this.ruleNameCache.has(rid)))
+    ];
+    if (rulesBase && toFetch.length) {
+      const CONCURRENCY = 6;
+      for (let i = 0; i < toFetch.length; i += CONCURRENCY) {
+        await Promise.all(
+          toFetch.slice(i, i + CONCURRENCY).map(async (rid) => {
+            try {
+              this.ruleNameCache.set(rid, await this.client.getRuleName(rulesBase, rid));
+            } catch {
+              this.ruleNameCache.set(rid, null);
+            }
+          })
+        );
+      }
+    }
+    for (const alarm of pending) {
+      const rid = alarm.title;
+      const name = titleByRuleId.get(rid) || this.ruleNameCache.get(rid);
+      if (!name) continue;
+      alarm.title = name;
+      if (alarm.tags?.alarmType === rid) alarm.tags.alarmType = name;
+    }
+  }
   // -----------------------------------------------------------------------
   // Cache management
   // -----------------------------------------------------------------------
@@ -55150,6 +55212,14 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   animation: afmSlideUp 0.2s ease;
 }
 
+.afm-modal.afm-modal--max {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
+}
+
 @keyframes afmSlideUp {
   from { transform: translateY(16px); opacity: 0.6; }
   to   { transform: translateY(0);    opacity: 1;   }
@@ -58767,7 +58837,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   background: #fff;
   border-radius: 14px;
   width: 92%;
-  max-width: 380px;
+  max-width: 480px; /* espa\xE7o p/ o footer premium (holding \xB7 hora \xB7 vers\xE3o) */
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
   transform: translateY(-12px) scale(0.97);
   transition: transform 0.2s ease;
@@ -59251,7 +59321,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   background: #fff;
   border-radius: 14px;
   width: 92%;
-  max-width: 360px;
+  max-width: 480px; /* espa\xE7o p/ o footer premium (holding \xB7 hora \xB7 vers\xE3o) */
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
   transform: translateY(-10px) scale(0.97);
   transition: transform 0.2s ease;
@@ -68237,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
@@ -68614,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;
@@ -68633,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%
@@ -68642,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 */
@@ -68836,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 {
@@ -68902,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 {
@@ -69123,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);
 }
 
@@ -69295,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; }
@@ -69320,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;
@@ -69354,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;
@@ -69612,8 +69694,9 @@ var WelcomeModalView = class _WelcomeModalView {
   align-items: center;
   justify-content: center;
   padding: 12px 20px;
-  background: #5B2EBC;
-  border-top: 1px solid rgba(122, 47, 247, 0.3);
+  /* paleta do tema do dashboard (createMyIOTheme \u2192 --myio-brand-700); roxo MYIO sem tema */
+  background: var(--myio-brand-700, #5B2EBC);
+  border-top: 1px solid color-mix(in srgb, var(--myio-brand-700, #7A2FF7) 30%, transparent);
 }
 
 .myio-welcome-footer-text {
@@ -69690,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 {
@@ -69709,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; }
 
@@ -69731,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 {
@@ -69835,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 {
@@ -69906,8 +69989,8 @@ var WelcomeModalView = class _WelcomeModalView {
 }
 
 .myio-welcome-modal--light .myio-welcome-footer {
-  background: #5B2EBC;
-  border-top-color: rgba(122, 47, 247, 0.3);
+  background: var(--myio-brand-700, #5B2EBC);
+  border-top-color: color-mix(in srgb, var(--myio-brand-700, #7A2FF7) 30%, transparent);
 }
 
 .myio-welcome-modal--light .myio-welcome-footer-text {
@@ -69927,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 {
@@ -70122,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}"
@@ -70416,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);
@@ -70474,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
@@ -75035,10 +75210,12 @@ function openOperationalComparisonModal(params) {
     endDate: params.endDate,
     devices: params.devices || []
   };
-  render2(wrapper, modalId, state6);
-  bindEvents3(wrapper, modalId, state6, params.onClose);
+  const ref = { chrome: null };
+  mount2(wrapper, modalId, state6, ref, params.onClose);
   return {
     destroy: () => {
+      ref.chrome?.destroy();
+      ref.chrome = null;
       wrapper.remove();
       params.onClose?.();
     }
@@ -75441,30 +75618,39 @@ function getThemeColors3(theme) {
     accent: "#7c3aed"
   };
 }
-function bindEvents3(container, modalId, state6, onClose) {
-  const closeBtn = container.querySelector(`#${modalId}-close`);
-  const themeBtn = container.querySelector(`#${modalId}-theme`);
-  const maxBtn = container.querySelector(`#${modalId}-max`);
+function mount2(container, modalId, state6, ref, onClose) {
+  ref.chrome?.destroy();
+  render2(container, modalId, state6);
+  const content = container.querySelector(".myio-op-compare-content");
   const overlay = container.querySelector(".myio-op-compare-overlay");
   const close = () => {
+    ref.chrome?.destroy();
+    ref.chrome = null;
     container.remove();
     onClose?.();
   };
-  closeBtn?.addEventListener("click", close);
-  if (overlay) {
-    overlay.addEventListener("click", (e) => {
-      if (e.target === overlay) close();
-    });
-  }
-  themeBtn?.addEventListener("click", () => {
-    state6.theme = state6.theme === "dark" ? "light" : "dark";
-    render2(container, modalId, state6);
-    bindEvents3(container, modalId, state6, onClose);
+  ref.chrome = createPremiumModalChrome({
+    modalId: `${modalId}-chrome`,
+    icon: "\u{1F4CA}",
+    title: `Compara\xE7\xE3o Operacional (${state6.devices.length} equipamentos)`,
+    modalEl: content,
+    headerSlot: content.querySelector(".myio-op-compare-header"),
+    theme: state6.theme,
+    showThemeToggle: true,
+    maximized: state6.isMaximized,
+    maximizedClass: "maximized",
+    headerRadius: "12px 12px 0 0",
+    onClose: close,
+    onThemeChange: (t) => {
+      state6.theme = t;
+      mount2(container, modalId, state6, ref, onClose);
+    },
+    onMaximizeChange: (m) => {
+      state6.isMaximized = m;
+    }
   });
-  maxBtn?.addEventListener("click", () => {
-    state6.isMaximized = !state6.isMaximized;
-    render2(container, modalId, state6);
-    bindEvents3(container, modalId, state6, onClose);
+  overlay?.addEventListener("click", (e) => {
+    if (e.target === overlay) close();
   });
 }
 
@@ -79939,7 +80125,7 @@ function openGoalsPanel(params) {
     state6.conflictVersion = null;
     render3();
   }
-  function mount2() {
+  function mount3() {
     const existing = document.getElementById(ROOT_ID2);
     if (existing) existing.remove();
     rootEl = document.createElement("div");
@@ -81014,7 +81200,7 @@ ${state6.year}-03-15T08,15`)}">${esc4(state6.csv)}</textarea>
       }
     };
   }
-  mount2();
+  mount3();
   return instance;
 }
 
@@ -118275,6 +118461,10 @@ var MenuView = class {
   // Tab being previewed in modal
   // Filter Modal (RFC-0121 ModalHeader controller pattern)
   filterModalHeaderController = null;
+  /** Footer premium (holding · hora · versão) da modal Filtro de Shoppings — criado a cada abertura */
+  filterModalFooter = null;
+  /** Idem para a modal "Selecione a visualização" */
+  unifiedModalFooter = null;
   // Unified Navigation Modal (RFC-0121 ModalHeader controller pattern)
   unifiedModalHeaderController = null;
   // RFC-0126: State for unified modal when controller fails (same as filter modal)
@@ -119867,7 +120057,10 @@ var MenuView = class {
       modalId: "menuUnified",
       theme: "dark",
       isMaximized: false,
-      showThemeToggle: true,
+      primaryColor: MYIO_ACCENT,
+      // padrão das modais premium: acento do tema do dashboard
+      showThemeToggle: false,
+      // corpo é sempre claro — o toggle só trocava a cor do header
       showMaximize: true,
       showClose: true,
       borderRadius: "16px 16px 0 0"
@@ -120167,7 +120360,10 @@ var MenuView = class {
       modalId: "menuFilter",
       theme: this.getFilterModalDefaultTheme(),
       isMaximized: false,
-      showThemeToggle: true,
+      primaryColor: MYIO_ACCENT,
+      // padrão das modais premium: acento do tema do dashboard
+      showThemeToggle: false,
+      // a modal não tem estilos escuros — o toggle só trocava a cor do header
       showMaximize: true,
       showClose: true,
       borderRadius: "12px 12px 0 0"
@@ -120506,6 +120702,9 @@ var MenuView = class {
       modal.classList.add("is-open");
       btn?.setAttribute("aria-expanded", "true");
       this.updateUnifiedModalActiveStates();
+      const content = modal.querySelector(".myio-unified-modal-content");
+      this.unifiedModalFooter?.destroy();
+      this.unifiedModalFooter = content ? this.createPremiumFooter(content) : null;
       this.bindUnifiedModalButtonsFallback();
       if (this.configTemplate.enableDebugMode) {
         console.log("[MenuView] Unified modal opened");
@@ -120521,6 +120720,8 @@ var MenuView = class {
     if (modal) {
       modal.classList.remove("is-open");
       btn?.setAttribute("aria-expanded", "false");
+      this.unifiedModalFooter?.destroy();
+      this.unifiedModalFooter = null;
       this.unifiedModalHeaderController?.reset();
       if (this.unifiedModalHeaderController) {
         this.applyUnifiedModalTheme(this.unifiedModalHeaderController.getTheme());
@@ -120786,6 +120987,7 @@ var MenuView = class {
     if (modal) {
       modal.classList.add("is-open");
       this.renderFilterList();
+      this.mountFilterModalFooter();
       requestAnimationFrame(() => {
         this.ensureFilterModalHeaderController();
         this.bindFilterModalButtonsFallback();
@@ -120804,12 +121006,32 @@ var MenuView = class {
     if (modal) {
       modal.classList.remove("is-open");
     }
+    this.filterModalFooter?.destroy();
+    this.filterModalFooter = null;
     this.filterModalHeaderController?.reset();
     if (this.filterModalHeaderController) {
       this.applyFilterModalTheme(this.filterModalHeaderController.getTheme());
       this.applyFilterModalMaximize(this.filterModalHeaderController.isMaximized());
     }
   }
+  /** Footer premium padrão (holding · hora · versão | Powered by MYIO) anexado ao fim do card. */
+  createPremiumFooter(card) {
+    const footer = createModalFooter({
+      customerName: resolveDashboardCustomerName(),
+      libVersion: { current: window.MyIOLibrary?.version },
+      themeMode: "light"
+    });
+    footer.element.style.flexShrink = "0";
+    card.appendChild(footer.element);
+    return footer;
+  }
+  /** Footer premium no fim do card (abaixo dos botões Cancelar/Aplicar). */
+  mountFilterModalFooter() {
+    const card = this.root.querySelector(".myio-menu-filter-modal-card");
+    if (!card) return;
+    this.filterModalFooter?.destroy();
+    this.filterModalFooter = this.createPremiumFooter(card);
+  }
   getFilterModalDefaultTheme() {
     return "dark";
   }
@@ -143784,7 +144006,9 @@ var AlarmsNotificationsPanelView = class {
   eventHandlers = /* @__PURE__ */ new Map();
   debug;
   // Bulk-selection state
-  selectedTitles = /* @__PURE__ */ new Set();
+  // Chave = id do card (único por card em todo modo de agrupamento). Por título, cards
+  // distintos com o mesmo tipo de alarme eram selecionados juntos.
+  selectedIds = /* @__PURE__ */ new Set();
   groupedAlarms = [];
   // View mode: 'card' (default) or 'list' (table)
   viewMode = "card";
@@ -143914,7 +144138,7 @@ var AlarmsNotificationsPanelView = class {
    * Build compact inline list header (filters + bulk actions button)
    */
   buildListHeaderTemplate(state6) {
-    const sel = this.selectedTitles.size;
+    const sel = this.selectedIds.size;
     const isCard = this.viewMode === "card";
     const isList = this.viewMode === "list";
     const isConsol = this.groupMode === "consolidado";
@@ -144027,7 +144251,7 @@ var AlarmsNotificationsPanelView = class {
       const mode = btn.getAttribute("data-group-mode");
       if (mode === this.groupMode) return;
       this.groupMode = mode;
-      this.selectedTitles.clear();
+      this.selectedIds.clear();
       this.root?.querySelectorAll(".alarms-group-btn").forEach((b) => {
         b.classList.toggle("is-active", b.getAttribute("data-group-mode") === mode);
       });
@@ -144040,7 +144264,7 @@ var AlarmsNotificationsPanelView = class {
       const mode = btn.getAttribute("data-hierarchy-mode");
       if (mode === this.hierarchyMode) return;
       this.hierarchyMode = mode;
-      this.selectedTitles.clear();
+      this.selectedIds.clear();
       this.root?.querySelectorAll(".alarms-hierarchy-btn").forEach((b) => {
         b.classList.toggle("is-active", b.getAttribute("data-hierarchy-mode") === mode);
       });
@@ -144091,10 +144315,10 @@ var AlarmsNotificationsPanelView = class {
     this.root.addEventListener("change", (e) => {
       const input = e.target;
       if (input.type !== "checkbox" || !input.classList.contains("alarm-card-select")) return;
-      const title = input.dataset.alarmTitle;
-      if (!title) return;
-      if (input.checked) this.selectedTitles.add(title);
-      else this.selectedTitles.delete(title);
+      const id = input.dataset.alarmId;
+      if (!id) return;
+      if (input.checked) this.selectedIds.add(id);
+      else this.selectedIds.delete(id);
       const card = input.closest(".alarm-card");
       if (card) card.classList.toggle("alarm-card--selected", input.checked);
       const row = input.closest(".atbl-row");
@@ -144105,9 +144329,9 @@ var AlarmsNotificationsPanelView = class {
       const input = e.target;
       if (input.id !== "tblSelectAll") return;
       if (input.checked) {
-        this.groupedAlarms.forEach((a) => this.selectedTitles.add(a.title));
+        this.groupedAlarms.forEach((a) => this.selectedIds.add(a.id));
       } else {
-        this.groupedAlarms.forEach((a) => this.selectedTitles.delete(a.title));
+        this.groupedAlarms.forEach((a) => this.selectedIds.delete(a.id));
       }
       this.root?.querySelectorAll(".alarm-card-select").forEach((cb) => {
         cb.checked = input.checked;
@@ -144317,7 +144541,7 @@ var AlarmsNotificationsPanelView = class {
           onMore: (id, e) => this.handleMore(id, e),
           themeMode: state6.themeMode,
           showCustomerName: this.params.showCustomerName ?? true,
-          selected: this.selectedTitles.has(alarm.title),
+          selected: this.selectedIds.has(alarm.id),
           showDeviceBadge: isSeparado,
           // separado: show device badge in header
           alarmTypes: isPorDispositivo ? alarm._alarmTypes ?? [] : void 0,
@@ -144389,11 +144613,11 @@ var AlarmsNotificationsPanelView = class {
   // =====================================================================
   // Bulk Selection
   // =====================================================================
-  handleAlarmSelect(title, selected) {
+  handleAlarmSelect(id, selected) {
     if (selected) {
-      this.selectedTitles.add(title);
+      this.selectedIds.add(id);
     } else {
-      this.selectedTitles.delete(title);
+      this.selectedIds.delete(id);
     }
     this.updateBulkButton();
   }
@@ -144402,7 +144626,7 @@ var AlarmsNotificationsPanelView = class {
     const btn = this.root.querySelector("#bulkActionsBtn");
     const count = this.root.querySelector("#bulkCount");
     if (!btn || !count) return;
-    const sel = this.selectedTitles.size;
+    const sel = this.selectedIds.size;
     btn.disabled = sel === 0;
     count.textContent = String(sel);
     count.style.display = sel === 0 ? "none" : "";
@@ -144471,6 +144695,24 @@ var AlarmsNotificationsPanelView = class {
       if (v) el2.style.setProperty(n, v);
     });
   }
+  /**
+   * Moldura padrão das modais premium: troca o header próprio pelo header no acento
+   * do tema (maximizar opcional + fechar) e anexa o footer premium (holding · hora · versão).
+   */
+  mountModalChrome(modal, opts) {
+    return createPremiumModalChrome({
+      modalId: opts.id,
+      icon: opts.icon,
+      title: opts.title,
+      modalEl: modal,
+      headerSlot: modal.firstElementChild,
+      theme: this.controller.getState().themeMode === "dark" ? "dark" : "light",
+      showMaximize: !!opts.maximizedClass,
+      maximizedClass: opts.maximizedClass,
+      headerRadius: `${opts.radius} ${opts.radius} 0 0`,
+      onClose: opts.onClose
+    });
+  }
   openFilterModal() {
     const state6 = this.controller.getState();
     const filters = state6.filters;
@@ -144588,7 +144830,11 @@ var AlarmsNotificationsPanelView = class {
         </div>
       </div>
     `;
-    const close = () => overlay.remove();
+    let chrome = null;
+    const close = () => {
+      chrome?.destroy();
+      overlay.remove();
+    };
     overlay.addEventListener("click", (e) => {
       const tabBtn = e.target.closest("[data-afm-tab]");
       if (!tabBtn) return;
@@ -144622,7 +144868,6 @@ var AlarmsNotificationsPanelView = class {
         item.style.display = label.includes(q) ? "" : "none";
       });
     });
-    overlay.querySelector(".afm-close").addEventListener("click", close);
     overlay.querySelector("#afmCancelBtn").addEventListener("click", close);
     overlay.addEventListener("click", (e) => {
       if (e.target === overlay) close();
@@ -144650,6 +144895,14 @@ var AlarmsNotificationsPanelView = class {
       close();
     });
     this._applyCssVars(overlay);
+    chrome = this.mountModalChrome(overlay.querySelector(".afm-modal"), {
+      id: "afmChrome",
+      icon: "\u{1F50D}",
+      title: "Filtrar Alarmes",
+      radius: "14px",
+      maximizedClass: "afm-modal--max",
+      onClose: close
+    });
     document.body.appendChild(overlay);
   }
   // =====================================================================
@@ -144701,7 +144954,7 @@ var AlarmsNotificationsPanelView = class {
       const sev = SEVERITY_CONFIG[alarm.severity];
       const st = STATE_CONFIG[alarm.state];
       const isActive = alarm.state !== "CLOSED";
-      const sel = this.selectedTitles.has(alarm.title);
+      const sel = this.selectedIds.has(alarm.id);
       const escTitle = this.esc(alarm.title);
       const escCustomer = this.esc(alarm.customerName || "-");
       const escSource = this.esc(alarm.source || "-");
@@ -144737,7 +144990,7 @@ var AlarmsNotificationsPanelView = class {
           <td class="atbl-cell atbl-cell--actions">${actionBtns}</td>
         </tr>`;
     }).join("");
-    const allSelected = alarms.length > 0 && alarms.every((a) => this.selectedTitles.has(a.title));
+    const allSelected = alarms.length > 0 && alarms.every((a) => this.selectedIds.has(a.id));
     return `
       <table class="alarms-table" aria-label="Lista de alarmes">
         <thead>
@@ -144801,9 +145054,17 @@ var AlarmsNotificationsPanelView = class {
       </div>
     `;
     this._applyCssVars(overlay);
+    const chrome = this.mountModalChrome(overlay.querySelector(".aex-modal"), {
+      id: "aexChrome",
+      icon: "\u{1F4E4}",
+      title: "Exportar Alarmes",
+      radius: "14px",
+      onClose: () => close()
+    });
     document.body.appendChild(overlay);
     requestAnimationFrame(() => overlay.classList.add("aex-overlay--visible"));
     const close = () => {
+      chrome.destroy();
       overlay.classList.remove("aex-overlay--visible");
       setTimeout(() => overlay.remove(), 220);
       document.removeEventListener("keydown", onKey);
@@ -145135,8 +145396,8 @@ var AlarmsNotificationsPanelView = class {
     }, 500);
   }
   openBulkActionPicker() {
-    if (this.selectedTitles.size === 0) return;
-    const selected = this.groupedAlarms.filter((a) => this.selectedTitles.has(a.title));
+    if (this.selectedIds.size === 0) return;
+    const selected = this.groupedAlarms.filter((a) => this.selectedIds.has(a.id));
     const count = selected.length;
     const listHtml = selected.slice(0, 5).map((a) => `<li class="abm-alarm-item">${this.esc(a.title)}</li>`).join("");
     const moreHtml = count > 5 ? `<li class="abm-alarm-item abm-alarm-more">+${count - 5} mais...</li>` : "";
@@ -145173,9 +145434,17 @@ var AlarmsNotificationsPanelView = class {
       </div>
     `;
     this._applyCssVars(overlay);
+    const chrome = this.mountModalChrome(overlay.querySelector(".abm-modal"), {
+      id: "abmChrome",
+      icon: "\u26A1",
+      title: "A\xE7\xF5es em Lote",
+      radius: "14px",
+      onClose: () => close()
+    });
     document.body.appendChild(overlay);
     requestAnimationFrame(() => overlay.classList.add("abm-overlay--visible"));
     const close = () => {
+      chrome.destroy();
       overlay.classList.remove("abm-overlay--visible");
       setTimeout(() => overlay.remove(), 220);
       document.removeEventListener("keydown", onKey);
@@ -145273,6 +145542,13 @@ var AlarmsNotificationsPanelView = class {
       </div>
     `;
     this._applyCssVars(overlay);
+    const chrome = this.mountModalChrome(overlay.querySelector(".alarm-action-modal"), {
+      id: "aamBulkChrome",
+      icon: cfg.icon,
+      title: cfg.title,
+      radius: "16px",
+      onClose: () => close()
+    });
     document.body.appendChild(overlay);
     requestAnimationFrame(() => overlay.classList.add("alarm-action-modal-overlay--visible"));
     const textarea = overlay.querySelector("#aamText");
@@ -145286,6 +145562,7 @@ var AlarmsNotificationsPanelView = class {
       if (cfg.textRequired) confirmBtn.disabled = len === 0;
     });
     const close = () => {
+      chrome.destroy();
       overlay.classList.remove("alarm-action-modal-overlay--visible");
       setTimeout(() => overlay.remove(), 220);
       document.removeEventListener("keydown", onKey);
@@ -145312,7 +145589,7 @@ var AlarmsNotificationsPanelView = class {
         const until = new Date(Date.now() + minutes * 60 * 1e3).toISOString();
         this.controller.handleSnooze(ids, until);
       }
-      this.selectedTitles.clear();
+      this.selectedIds.clear();
       this.updateBulkButton();
       close();
       this.emit(`alarm-${type}`, selectedAlarms.map((a) => a.id));
@@ -145776,6 +146053,13 @@ var AlarmsNotificationsPanelView = class {
       </div>
     `;
     this._applyCssVars(overlay);
+    const chrome = this.mountModalChrome(overlay.querySelector(".alarm-action-modal"), {
+      id: "aamChrome",
+      icon: cfg.icon,
+      title: cfg.title,
+      radius: "16px",
+      onClose: () => closeModal2()
+    });
     document.body.appendChild(overlay);
     requestAnimationFrame(() => overlay.classList.add("alarm-action-modal-overlay--visible"));
     const textarea = overlay.querySelector("#aamText");
@@ -145789,6 +146073,7 @@ var AlarmsNotificationsPanelView = class {
       if (cfg.textRequired) confirmBtn.disabled = len === 0;
     });
     const closeModal2 = () => {
+      chrome.destroy();
       overlay.classList.remove("alarm-action-modal-overlay--visible");
       setTimeout(() => overlay.remove(), 220);
       document.removeEventListener("keydown", onKeyDown);
@@ -165622,7 +165907,7 @@ function statusStyle(status) {
 }
 function createPresetupGateway(opts) {
   const {
-    mount: mount2,
+    mount: mount3,
     gatewayId,
     clientId,
     clientSecret,
@@ -165645,9 +165930,9 @@ function createPresetupGateway(opts) {
   });
   const ingestion = new IngestionApiClient(ingestionApiUrl, auth);
   const provisioning = new ProvisioningApiClient(provisioningApiUrl);
-  mount2.innerHTML = "";
+  mount3.innerHTML = "";
   const root = el("div", S.root);
-  mount2.appendChild(root);
+  mount3.appendChild(root);
   const header = el("div", S.header);
   const titleEl = el("span", "font-weight:600;font-size:15px;");
   titleEl.textContent = "PresetupGateway";
@@ -165957,7 +166242,7 @@ function createPresetupGateway(opts) {
       await load();
     },
     destroy() {
-      mount2.innerHTML = "";
+      mount3.innerHTML = "";
     }
   };
 }