myio-js-library 0.1.558 → 0.1.560

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.558",
+  version: "0.1.560",
   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;
@@ -69612,8 +69682,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 {
@@ -69906,8 +69977,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 {
@@ -73752,13 +73823,13 @@ function getStyles() {
   color: #ffffff;
   cursor: pointer;
   overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(62, 26, 125, 0.5), 0 4px 16px rgba(62, 26, 125, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc-compare-btn) 50%, transparent), 0 4px 16px color-mix(in srgb, var(--fc-compare-btn) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   transition: var(--fc-transition);
 }
 
 .myio-footer-compare:hover {
   background: linear-gradient(135deg, var(--fc-compare-btn-hover) 0%, var(--fc-compare-btn) 100%);
-  box-shadow: 0 0 0 1px rgba(62, 26, 125, 0.7), 0 6px 24px rgba(62, 26, 125, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc-compare-btn) 70%, transparent), 0 6px 24px color-mix(in srgb, var(--fc-compare-btn) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3);
   transform: translateY(-2px);
 }
 
@@ -73921,6 +73992,71 @@ function getStyles() {
   text-shadow: none;
 }
 
+/* ==========================================
+   Brand (paleta do dashboard): fundo s\xF3lido na cor do tema, conte\xFAdo branco
+   ========================================== */
+
+.myio-footer-component--brand {
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.myio-footer-component--brand .myio-footer-chip {
+  background: var(--fc-chip-bg);
+  box-shadow: none;
+}
+.myio-footer-component--brand .myio-footer-chip:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.32);
+  box-shadow: none;
+  transform: translateY(-2px);
+}
+.myio-footer-component--brand .myio-footer-chip-remove {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.85);
+}
+.myio-footer-component--brand .myio-footer-chip-remove:hover {
+  background: rgba(255, 107, 107, 0.22);
+  border-color: rgba(255, 107, 107, 0.5);
+  color: #fff;
+}
+.myio-footer-component--brand .myio-footer-meta {
+  background: var(--fc-meta-bg);
+  box-shadow: none;
+  cursor: default;
+}
+.myio-footer-component--brand .myio-footer-meta-title,
+.myio-footer-component--brand .myio-footer-totals,
+.myio-footer-component--brand .myio-footer-chip-name,
+.myio-footer-component--brand .myio-footer-chip-value {
+  text-shadow: none;
+}
+.myio-footer-component--brand .myio-footer-empty {
+  background: var(--fc-empty-bg);
+  color: rgba(255, 255, 255, 0.85);
+  text-shadow: none;
+  animation: none;
+}
+.myio-footer-component--brand .myio-footer-clear-btn {
+  background: var(--fc-clear-btn);
+  border-color: rgba(255, 255, 255, 0.24);
+}
+.myio-footer-component--brand .myio-footer-clear-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  box-shadow: none;
+}
+.myio-footer-component--brand .myio-footer-clear-btn:disabled {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.14);
+  color: rgba(255, 255, 255, 0.45);
+}
+.myio-footer-component--brand .myio-footer-compare:disabled {
+  background: rgba(255, 255, 255, 0.14);
+  color: rgba(255, 255, 255, 0.55);
+  opacity: 1;
+}
+
 /* ==========================================
    Responsive
    ========================================== */
@@ -74001,6 +74137,7 @@ var ChipRenderer = class {
     const chip = document.createElement("div");
     chip.className = "myio-footer-chip";
     chip.dataset.entityId = entity.id;
+    chip.dataset.fullName = entity.name || "";
     const content = document.createElement("div");
     content.className = "myio-footer-chip-content";
     const name = document.createElement("span");
@@ -74111,7 +74248,43 @@ var FooterView = class {
   getThemeConfig() {
     const themeConfig = this.theme === "dark" ? this.configTemplate.darkMode : this.configTemplate.lightMode;
     const defaults = this.theme === "dark" ? DEFAULT_DARK_THEME2 : DEFAULT_LIGHT_THEME2;
-    return { ...defaults, ...themeConfig };
+    return { ...defaults, ...themeConfig, ...this.getBrandOverrides() };
+  }
+  /** Accent do tema do dashboard (createMyIOTheme → window.MyIOUtils.theme), se houver. */
+  getDashboardAccent() {
+    const theme = window.MyIOUtils?.theme;
+    if (!theme?.accent) return null;
+    return { accent: theme.accent, accentText: theme.accentText || "#ffffff" };
+  }
+  /**
+   * Com paleta do dashboard o footer segue o padrão do dashboard de shopping: fundo sólido na cor
+   * do tema e conteúdo branco (mesma identidade do header/tabs).
+   */
+  getBrandOverrides() {
+    const brand = this.getDashboardAccent();
+    if (!brand) return {};
+    const a = brand.accent;
+    return {
+      primaryColor: a,
+      primaryHoverColor: `color-mix(in srgb, ${a} 85%, #fff)`,
+      primaryDarkColor: `color-mix(in srgb, ${a} 70%, #000)`,
+      backgroundGradientStart: a,
+      backgroundGradientEnd: a,
+      borderTopColor: "rgba(255, 255, 255, 0.18)",
+      textColor: brand.accentText,
+      mutedTextColor: "rgba(255, 255, 255, 0.75)",
+      chipBackgroundColor: "rgba(255, 255, 255, 0.12)",
+      chipBorderColor: "rgba(255, 255, 255, 0.24)",
+      chipTextColor: brand.accentText,
+      compareButtonColor: `color-mix(in srgb, ${a} 55%, #0f172a)`,
+      compareButtonHoverColor: `color-mix(in srgb, ${a} 70%, #0f172a)`,
+      clearButtonColor: "rgba(255, 255, 255, 0.12)",
+      clearButtonTextColor: brand.accentText,
+      metaBackgroundColor: "rgba(255, 255, 255, 0.10)",
+      metaBorderColor: "rgba(255, 255, 255, 0.24)",
+      emptyBackgroundColor: "rgba(255, 255, 255, 0.06)",
+      emptyBorderColor: "rgba(255, 255, 255, 0.35)"
+    };
   }
   /**
    * Apply theme colors as CSS custom properties
@@ -74144,7 +74317,8 @@ var FooterView = class {
    */
   getClassName() {
     const base = "myio-footer-component";
-    return this.theme === "light" ? `${base} ${base}--light` : base;
+    const brand = this.getDashboardAccent() ? ` ${base}--brand` : "";
+    return (this.theme === "light" ? `${base} ${base}--light` : base) + brand;
   }
   /**
    * Render the footer component
@@ -74202,6 +74376,27 @@ var FooterView = class {
    * Bind event listeners
    */
   bindEvents() {
+    this.footerEl.addEventListener("mouseover", (e) => {
+      const target = e.target;
+      if (target.closest(".myio-footer-chip-remove")) return hideFooterZoom();
+      const chip = target.closest(".myio-footer-chip");
+      if (chip) {
+        const name = chip.dataset.fullName || chip.querySelector(".myio-footer-chip-name")?.textContent || "";
+        const value = chip.querySelector(".myio-footer-chip-value")?.textContent || "";
+        showFooterZoom(chip, name, value);
+        return;
+      }
+      const meta = target.closest(".myio-footer-meta");
+      if (meta) {
+        showFooterZoom(meta, "Sele\xE7\xE3o", this.totalsEl?.textContent || "");
+      }
+    });
+    this.footerEl.addEventListener("mouseout", (e) => {
+      const to = e.relatedTarget;
+      const from = e.target.closest(".myio-footer-chip, .myio-footer-meta");
+      if (from && to && from.contains(to)) return;
+      hideFooterZoom();
+    });
     window.addEventListener("myio:theme-change", ((e) => {
       this.setTheme(e.detail.mode);
     }));
@@ -74283,6 +74478,7 @@ var FooterView = class {
    */
   renderDock(entities) {
     if (!this.dockEl) return;
+    hideFooterZoom();
     if (entities.length === 0) {
       const emptyEl = this.chipRenderer.createEmptyState(this.emptyMessage);
       this.dockEl.replaceChildren(emptyEl);
@@ -74353,6 +74549,7 @@ var FooterView = class {
    */
   destroy() {
     this.eventHandlers.clear();
+    hideFooterZoom();
     if (this.footerEl.parentNode) {
       this.footerEl.parentNode.removeChild(this.footerEl);
     }
@@ -74362,6 +74559,58 @@ var FooterView = class {
     this.clearBtnEl = null;
   }
 };
+var FOOTER_ZOOM_ID = "myio-footer-chip-zoom";
+function ensureFooterZoomEl() {
+  if (!document.getElementById("myio-footer-chip-zoom-styles")) {
+    const st = document.createElement("style");
+    st.id = "myio-footer-chip-zoom-styles";
+    st.textContent = `
+      #${FOOTER_ZOOM_ID} {
+        position: fixed; z-index: 2147483000; pointer-events: none;
+        display: flex; flex-direction: column; gap: 2px;
+        min-width: 140px; max-width: 360px; padding: 10px 14px;
+        background: var(--myio-brand-700, #3e1a7d); color: #fff;
+        border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px;
+        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35);
+        font-family: 'Nunito', system-ui, sans-serif;
+        transform: translate(-50%, 6px) scale(0.92); transform-origin: 50% 100%;
+        opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease;
+      }
+      #${FOOTER_ZOOM_ID}.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
+      #${FOOTER_ZOOM_ID} .zoom-name {
+        font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
+        white-space: normal; word-break: break-word; line-height: 1.2;
+      }
+      #${FOOTER_ZOOM_ID} .zoom-value {
+        font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15;
+      }
+    `;
+    document.head.appendChild(st);
+  }
+  let el2 = document.getElementById(FOOTER_ZOOM_ID);
+  if (!el2) {
+    el2 = document.createElement("div");
+    el2.id = FOOTER_ZOOM_ID;
+    el2.setAttribute("role", "tooltip");
+    el2.innerHTML = '<span class="zoom-name"></span><span class="zoom-value"></span>';
+    document.body.appendChild(el2);
+  }
+  return el2;
+}
+function showFooterZoom(anchor, name, value) {
+  const el2 = ensureFooterZoomEl();
+  el2.querySelector(".zoom-name").textContent = name || "";
+  el2.querySelector(".zoom-value").textContent = value || "";
+  const r = anchor.getBoundingClientRect();
+  const half = 75;
+  const left = Math.min(Math.max(r.left + r.width / 2, half + 8), window.innerWidth - half - 8);
+  el2.style.left = `${left}px`;
+  el2.style.bottom = `${window.innerHeight - r.top + 8}px`;
+  el2.classList.add("show");
+}
+function hideFooterZoom() {
+  document.getElementById(FOOTER_ZOOM_ID)?.classList.remove("show");
+}
 
 // src/components/footer/AlertDialogs.ts
 var currentOverlay = null;
@@ -74857,10 +75106,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?.();
     }
@@ -75263,30 +75514,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();
   });
 }
 
@@ -79761,7 +80021,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");
@@ -80836,7 +81096,7 @@ ${state6.year}-03-15T08,15`)}">${esc4(state6.csv)}</textarea>
       }
     };
   }
-  mount2();
+  mount3();
   return instance;
 }
 
@@ -118097,6 +118357,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)
@@ -118327,14 +118591,14 @@ var MenuView = class {
    ========================================== */
 
 .myio-toolbar-item--nav {
-  background: var(--menu-nav-bg, #3e1a7d);
+  background: var(--menu-nav-bg, var(--myio-brand-700, #3e1a7d));
   color: var(--menu-nav-color, #ffffff);
   font-weight: 600;
   padding: 8px 16px;
 }
 
 .myio-toolbar-item--nav:hover {
-  background: var(--menu-nav-hover-bg, #4c2391);
+  background: var(--menu-nav-hover-bg, color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 85%, #fff));
 }
 
 .myio-toolbar-item--nav .nav-label {
@@ -118348,7 +118612,7 @@ var MenuView = class {
    ========================================== */
 
 .myio-toolbar-item--filter {
-  color: var(--menu-filter-color, #6366f1);
+  color: var(--menu-filter-color, var(--myio-brand-700, #6366f1));
 }
 
 .myio-toolbar-item--filter:hover {
@@ -118371,7 +118635,7 @@ var MenuView = class {
   min-width: 340px;
   padding: 0;
   background: transparent;
-  border: 2px solid var(--menu-date-border, #3e1a7d);
+  border: 2px solid var(--menu-date-border, var(--myio-brand-700, #3e1a7d));
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.2s ease;
@@ -118379,17 +118643,17 @@ var MenuView = class {
 }
 
 .myio-toolbar-item--date:hover {
-  border-color: var(--menu-date-hover-border, #5a2d9e);
-  box-shadow: 0 0 0 3px rgba(62, 26, 125, 0.15);
+  border-color: var(--menu-date-hover-border, color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 80%, #fff));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 15%, transparent);
 }
 
 .myio-toolbar-item--date:focus-within {
-  border-color: var(--menu-date-focus-border, #3e1a7d);
-  box-shadow: 0 0 0 3px rgba(62, 26, 125, 0.25);
+  border-color: var(--menu-date-focus-border, var(--myio-brand-700, #3e1a7d));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 25%, transparent);
 }
 
 .myio-toolbar-item--date .ico {
-  background: var(--menu-date-icon-bg, #3e1a7d);
+  background: var(--menu-date-icon-bg, var(--myio-brand-700, #3e1a7d));
   color: white;
   padding: 0 12px;
   margin: 0;
@@ -119689,7 +119953,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"
@@ -119989,7 +120256,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"
@@ -120328,6 +120598,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");
@@ -120343,6 +120616,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());
@@ -120608,6 +120883,7 @@ var MenuView = class {
     if (modal) {
       modal.classList.add("is-open");
       this.renderFilterList();
+      this.mountFilterModalFooter();
       requestAnimationFrame(() => {
         this.ensureFilterModalHeaderController();
         this.bindFilterModalButtonsFallback();
@@ -120626,12 +120902,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";
   }
@@ -124412,6 +124708,16 @@ function generateFilterModalStyles(containerId, modalClass, primaryColor) {
       opacity: 0.5;
     }
     #${containerId} .filter-tab:hover { opacity: 0.8; transform: translateY(-1px); }
+    /* Categorias (deviceProfile): r\xF3tulos longos s\xE3o encurtados (nome completo no title) */
+    #${containerId} .filter-tab--category {
+      max-width: 100%;
+      background: color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 8%, #fff);
+      color: var(--myio-brand-700, #3e1a7d);
+    }
+    #${containerId}[data-theme="dark"] .filter-tab--category {
+      background: color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 30%, #1e293b);
+      color: #e2e8f0;
+    }
     #${containerId} .filter-tab.active { opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
     #${containerId} .filter-tab[data-filter="all"] { background: #e2e8f0; color: #475569; }
     #${containerId} .filter-tab[data-filter="online"],
@@ -124695,6 +125001,28 @@ function generateFilterModalStyles(containerId, modalClass, primaryColor) {
 }
 
 // src/components/filter-modal/FilterModalView.ts
+var CATEGORY_META = {
+  ELEVADOR: { label: "Elevadores", icon: "\u{1F6D7}" },
+  ESCADA_ROLANTE: { label: "Escadas Rolantes", icon: "\u{1F4F6}" },
+  CHILLER: { label: "Chillers", icon: "\u2744\uFE0F" },
+  FANCOIL: { label: "Fancoils", icon: "\u{1F300}" },
+  BOMBA_CAG: { label: "Bombas CAG", icon: "\u{1F4A7}" },
+  BOMBA_HIDRAULICA: { label: "Bombas Hidr\xE1ulicas", icon: "\u{1F4A7}" },
+  BOMBA_INCENDIO: { label: "Bombas de Inc\xEAndio", icon: "\u{1F9EF}" },
+  MOTOR: { label: "Motores", icon: "\u2699\uFE0F" },
+  "3F_MEDIDOR": { label: "Lojas", icon: "\u{1F3EA}" },
+  ENTRADA: { label: "Entrada", icon: "\u{1F50C}" },
+  HIDROMETRO: { label: "Hidr\xF4metros", icon: "\u{1F4A7}" },
+  HIDROMETRO_AREA_COMUM: { label: "Hidr\xF4metros \xC1rea Comum", icon: "\u{1F4A7}" },
+  HIDROMETRO_SHOPPING: { label: "Hidr\xF4metros Entrada", icon: "\u{1F4A7}" },
+  TERMOSTATO: { label: "Termostatos", icon: "\u{1F321}\uFE0F" }
+};
+function categoryMeta(profile) {
+  const key = String(profile || "").toUpperCase();
+  if (CATEGORY_META[key]) return CATEGORY_META[key];
+  const label = key.split(/[_\s]+/).filter(Boolean).map((w) => w.charAt(0) + w.slice(1).toLowerCase()).join(" ");
+  return { label: label || key, icon: "\u{1F3F7}\uFE0F" };
+}
 var FilterModalView = class {
   containerId;
   widgetName;
@@ -124711,6 +125039,13 @@ var FilterModalView = class {
   onApply;
   onClose;
   globalContainer = null;
+  /** Abas de categoria (uma por deviceProfile presente nos itens) — recriadas a cada open() */
+  dynamicTabs = [];
+  dynamicIcons = {};
+  dynamicTitles = {};
+  groups = FILTER_GROUPS;
+  /** Moldura padrão (header no acento do tema + maximizar/fechar + footer premium) */
+  chrome = null;
   escHandler = null;
   currentItems = [];
   constructor(params) {
@@ -124732,7 +125067,7 @@ var FilterModalView = class {
     });
   }
   generateFilterTabsHTML(counts) {
-    const allTab = this.filterTabs.find((t) => t.id === "all");
+    const allTab = this.allTabs().find((t) => t.id === "all");
     let html = "";
     if (allTab) {
       const icon2 = FILTER_TAB_ICONS["all"] || "";
@@ -124744,19 +125079,19 @@ var FilterModalView = class {
         </div>
       `;
     }
-    FILTER_GROUPS.forEach((group) => {
-      const groupTabs = this.filterTabs.filter((t) => group.filters.includes(t.id));
+    this.groups.forEach((group) => {
+      const groupTabs = this.allTabs().filter((t) => group.filters.includes(t.id));
       if (groupTabs.length === 0) return;
       html += `
         <div class="filter-group">
           <span class="filter-group-label">${group.label}</span>
           <div class="filter-group-tabs">
             ${groupTabs.map((tab) => {
-        const icon2 = FILTER_TAB_ICONS[tab.id] || "";
+        const icon2 = FILTER_TAB_ICONS[tab.id] || this.dynamicIcons[tab.id] || "";
         const count = counts[tab.id] || 0;
         const expandBtn = count > 0 ? `<button class="filter-tab-expand" data-expand-filter="${tab.id}" title="Ver dispositivos">+</button>` : "";
         return `
-              <button class="filter-tab active" data-filter="${tab.id}">
+              <button class="filter-tab active${tab.id.startsWith("cat_") ? " filter-tab--category" : ""}" data-filter="${tab.id}" title="${this.dynamicTitles[tab.id] || tab.label}">
                 ${icon2} ${tab.label} (<span id="count${tab.id.charAt(0).toUpperCase() + tab.id.slice(1)}">${count}</span>)${expandBtn}
               </button>
             `;
@@ -124826,9 +125161,29 @@ var FilterModalView = class {
       </div>
     `;
   }
+  allTabs() {
+    return [...this.filterTabs, ...this.dynamicTabs];
+  }
+  /** Grupo "Categoria": uma aba por deviceProfile presente nos itens (ex.: Elevadores, Escadas Rolantes). */
+  buildCategoryTabs(items) {
+    const profileOf3 = (item) => String(item.deviceProfile || "").trim().toUpperCase();
+    const profiles = Array.from(new Set(items.map(profileOf3).filter(Boolean)));
+    profiles.sort((a, b) => categoryMeta(a).label.localeCompare(categoryMeta(b).label, "pt-BR"));
+    this.dynamicIcons = {};
+    this.dynamicTitles = {};
+    this.dynamicTabs = profiles.map((profile) => {
+      const id = `cat_${profile.replace(/[^A-Za-z0-9]/g, "_")}`;
+      const meta = categoryMeta(profile);
+      this.dynamicIcons[id] = meta.icon;
+      this.dynamicTitles[id] = meta.label;
+      const label = meta.label.length > 22 ? `${meta.label.slice(0, 21).trimEnd()}\u2026` : meta.label;
+      return { id, label, filter: (item) => profileOf3(item) === profile };
+    });
+    this.groups = this.dynamicTabs.length ? [...FILTER_GROUPS, { id: "category", label: "Categoria", filters: this.dynamicTabs.map((t) => t.id) }] : FILTER_GROUPS;
+  }
   calculateCounts(items) {
     const counts = {};
-    this.filterTabs.forEach((tab) => {
+    this.allTabs().forEach((tab) => {
       counts[tab.id] = items.filter(tab.filter).length;
     });
     return counts;
@@ -124969,7 +125324,7 @@ var FilterModalView = class {
   bindFilterTabHandlers(modal, items) {
     const filterTabsEl = modal.querySelectorAll(".filter-tab");
     const getFilterFn = (filterId) => {
-      const tabConfig = this.filterTabs.find((t) => t.id === filterId);
+      const tabConfig = this.allTabs().find((t) => t.id === filterId);
       return tabConfig ? tabConfig.filter : () => false;
     };
     const applyActiveFilters = () => {
@@ -124978,16 +125333,16 @@ var FilterModalView = class {
         return groupActiveFilters.some((filterId) => getFilterFn(filterId)(item));
       };
       let filteredItems = [...items];
-      for (let i = 0; i < FILTER_GROUPS.length; i++) {
-        const group = FILTER_GROUPS[i];
+      for (let i = 0; i < this.groups.length; i++) {
+        const group = this.groups[i];
         const activeInGroup = Array.from(filterTabsEl).filter(
           (t) => group.filters.includes(t.getAttribute("data-filter") || "") && t.classList.contains("active")
         ).map((t) => t.getAttribute("data-filter") || "");
         if (activeInGroup.length > 0) {
           filteredItems = filteredItems.filter((item) => itemPassesGroup(item, activeInGroup));
         }
-        for (let j = i + 1; j < FILTER_GROUPS.length; j++) {
-          const nextGroup = FILTER_GROUPS[j];
+        for (let j = i + 1; j < this.groups.length; j++) {
+          const nextGroup = this.groups[j];
           nextGroup.filters.forEach((filterId) => {
             const tab = Array.from(filterTabsEl).find((t) => t.getAttribute("data-filter") === filterId);
             if (!tab) return;
@@ -124999,7 +125354,7 @@ var FilterModalView = class {
       }
       const activeFilters = Array.from(filterTabsEl).filter((t) => t.classList.contains("active") && t.getAttribute("data-filter") !== "all").map((t) => t.getAttribute("data-filter") || "");
       const activeByGroup = {};
-      FILTER_GROUPS.forEach((group) => {
+      this.groups.forEach((group) => {
         const activeInGroup = activeFilters.filter((id) => group.filters.includes(id));
         if (activeInGroup.length > 0) activeByGroup[group.id] = activeInGroup;
       });
@@ -125019,7 +125374,7 @@ var FilterModalView = class {
     };
     const getFilteredItems = () => {
       let filteredItems = [...items];
-      FILTER_GROUPS.forEach((group) => {
+      this.groups.forEach((group) => {
         const activeInGroup = Array.from(filterTabsEl).filter(
           (t) => group.filters.includes(t.getAttribute("data-filter") || "") && t.classList.contains("active")
         ).map((t) => t.getAttribute("data-filter") || "");
@@ -125032,7 +125387,7 @@ var FilterModalView = class {
       return filteredItems;
     };
     const updateFilterCounts = (filteredItems) => {
-      this.filterTabs.forEach((tabConfig) => {
+      this.allTabs().forEach((tabConfig) => {
         if (tabConfig.id === "all") {
           const countEl = modal.querySelector("#countAll");
           if (countEl) countEl.textContent = String(filteredItems.length);
@@ -125081,7 +125436,7 @@ var FilterModalView = class {
               connectivityTab.classList.add("active");
           }
           const filteredItems2 = getFilteredItems();
-          const typeIds = ["elevators", "escalators", "hvac", "others", "commonArea", "stores"];
+          const typeIds = ["elevators", "escalators", "hvac", "others", "commonArea", "stores", ...this.dynamicTabs.map((t) => t.id)];
           typeIds.forEach((typeId) => {
             const typeTab = Array.from(filterTabsEl).find((t) => t.getAttribute("data-filter") === typeId);
             if (!typeTab) return;
@@ -125111,7 +125466,7 @@ var FilterModalView = class {
     expandBtns.forEach((btn) => {
       const filterId = btn.getAttribute("data-expand-filter");
       if (!filterId) return;
-      const filterTabConfig = this.filterTabs.find((t) => t.id === filterId);
+      const filterTabConfig = this.allTabs().find((t) => t.id === filterId);
       const filterFn = filterTabConfig?.filter || (() => false);
       btn.addEventListener("mouseenter", (e) => {
         e.stopPropagation();
@@ -125132,9 +125487,9 @@ var FilterModalView = class {
   showDeviceTooltip(triggerEl, filterId, devices) {
     const InfoTooltip2 = window.MyIOLibrary;
     if (!InfoTooltip2?.InfoTooltip) return;
-    const filterTabConfig = this.filterTabs.find((t) => t.id === filterId);
+    const filterTabConfig = this.allTabs().find((t) => t.id === filterId);
     const label = filterTabConfig?.label || filterId;
-    const icon2 = FILTER_TAB_ICONS[filterId] || "\u{1F4CB}";
+    const icon2 = FILTER_TAB_ICONS[filterId] || this.dynamicIcons[filterId] || "\u{1F4CB}";
     let devicesHtml = "";
     if (devices.length === 0) {
       devicesHtml = `
@@ -125211,12 +125566,17 @@ var FilterModalView = class {
         this.globalContainer.innerHTML = `<style>${generateFilterModalStyles(this.containerId, this.modalClass, this.primaryColor)}</style>${this.generateModalHTML()}`;
         document.body.appendChild(this.globalContainer);
         const modal2 = this.globalContainer.querySelector("#filterModal");
-        if (modal2) this.setupHandlers(modal2, items);
+        if (modal2) {
+          this.setupHandlers(modal2, items);
+          this.mountChrome(modal2);
+        }
       }
     }
     this.globalContainer.setAttribute("data-theme", this.themeMode);
+    if (this.chrome && this.chrome.getTheme() !== this.themeMode) this.chrome.setTheme(this.themeMode);
     const modal = this.globalContainer.querySelector("#filterModal");
     if (!modal) return;
+    this.buildCategoryTabs(items);
     const counts = this.calculateCounts(items);
     const tabsContainer = modal.querySelector("#filterTabsContainer");
     if (tabsContainer) {
@@ -125231,6 +125591,28 @@ var FilterModalView = class {
     modal.classList.remove("hidden");
     document.body.classList.add("filter-modal-open");
   }
+  /** Troca o header próprio pela moldura padrão das modais premium e adiciona o footer premium. */
+  mountChrome(modal) {
+    const card = modal.querySelector(`.${this.modalClass}-card`);
+    if (!card || !this.globalContainer) return;
+    this.chrome = createPremiumModalChrome({
+      modalId: `${this.containerId}Chrome`,
+      icon: "\u{1F50D}",
+      title: "Filtrar e Ordenar",
+      modalEl: card,
+      headerSlot: modal.querySelector(`#${this.containerId}Header`),
+      themeTarget: this.globalContainer,
+      // estilos escuros da modal são por #container[data-theme]
+      theme: this.themeMode === "dark" ? "dark" : "light",
+      showThemeToggle: true,
+      maximizedClass: "maximized",
+      headerRadius: "16px 16px 0 0",
+      onClose: () => this.close(),
+      onThemeChange: (t) => {
+        this.themeMode = t;
+      }
+    });
+  }
   close() {
     if (this.globalContainer) {
       const modal = this.globalContainer.querySelector("#filterModal");
@@ -125245,12 +125627,15 @@ var FilterModalView = class {
     if (this.globalContainer) {
       this.globalContainer.setAttribute("data-theme", mode);
     }
+    this.chrome?.setTheme(mode === "dark" ? "dark" : "light");
   }
   destroy() {
     if (this.escHandler) {
       document.removeEventListener("keydown", this.escHandler);
       this.escHandler = null;
     }
+    this.chrome?.destroy();
+    this.chrome = null;
     if (this.globalContainer) {
       this.globalContainer.remove();
       this.globalContainer = null;
@@ -143517,7 +143902,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";
@@ -143647,7 +144034,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";
@@ -143760,7 +144147,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);
       });
@@ -143773,7 +144160,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);
       });
@@ -143824,10 +144211,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");
@@ -143838,9 +144225,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;
@@ -144050,7 +144437,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,
@@ -144122,11 +144509,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();
   }
@@ -144135,7 +144522,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" : "";
@@ -144204,6 +144591,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;
@@ -144321,7 +144726,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;
@@ -144355,7 +144764,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();
@@ -144383,6 +144791,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);
   }
   // =====================================================================
@@ -144434,7 +144850,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 || "-");
@@ -144470,7 +144886,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>
@@ -144534,9 +144950,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);
@@ -144868,8 +145292,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>` : "";
@@ -144906,9 +145330,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);
@@ -145006,6 +145438,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");
@@ -145019,6 +145458,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);
@@ -145045,7 +145485,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));
@@ -145509,6 +145949,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");
@@ -145522,6 +145969,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);
@@ -165355,7 +165803,7 @@ function statusStyle(status) {
 }
 function createPresetupGateway(opts) {
   const {
-    mount: mount2,
+    mount: mount3,
     gatewayId,
     clientId,
     clientSecret,
@@ -165378,9 +165826,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";
@@ -165690,7 +166138,7 @@ function createPresetupGateway(opts) {
       await load();
     },
     destroy() {
-      mount2.innerHTML = "";
+      mount3.innerHTML = "";
     }
   };
 }