myio-js-library 0.1.559 → 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.559",
+  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 {
@@ -75035,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?.();
     }
@@ -75441,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();
   });
 }
 
@@ -79939,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");
@@ -81014,7 +81096,7 @@ ${state6.year}-03-15T08,15`)}">${esc4(state6.csv)}</textarea>
       }
     };
   }
-  mount2();
+  mount3();
   return instance;
 }
 
@@ -118275,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)
@@ -119867,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"
@@ -120167,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"
@@ -120506,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");
@@ -120521,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());
@@ -120786,6 +120883,7 @@ var MenuView = class {
     if (modal) {
       modal.classList.add("is-open");
       this.renderFilterList();
+      this.mountFilterModalFooter();
       requestAnimationFrame(() => {
         this.ensureFilterModalHeaderController();
         this.bindFilterModalButtonsFallback();
@@ -120804,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";
   }
@@ -143784,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";
@@ -143914,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";
@@ -144027,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);
       });
@@ -144040,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);
       });
@@ -144091,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");
@@ -144105,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;
@@ -144317,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,
@@ -144389,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();
   }
@@ -144402,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" : "";
@@ -144471,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;
@@ -144588,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;
@@ -144622,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();
@@ -144650,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);
   }
   // =====================================================================
@@ -144701,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 || "-");
@@ -144737,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>
@@ -144801,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);
@@ -145135,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>` : "";
@@ -145173,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);
@@ -145273,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");
@@ -145286,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);
@@ -145312,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));
@@ -145776,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");
@@ -145789,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);
@@ -165622,7 +165803,7 @@ function statusStyle(status) {
 }
 function createPresetupGateway(opts) {
   const {
-    mount: mount2,
+    mount: mount3,
     gatewayId,
     clientId,
     clientSecret,
@@ -165645,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";
@@ -165957,7 +166138,7 @@ function createPresetupGateway(opts) {
       await load();
     },
     destroy() {
-      mount2.innerHTML = "";
+      mount3.innerHTML = "";
     }
   };
 }