myio-js-library 0.1.185 → 0.1.186

package/dist/index.cjs

@@ -592,6 +592,7 @@ __export(index_exports, {
   IMPORTANCE_COLORS: () => IMPORTANCE_COLORS,
   IMPORTANCE_LABELS: () => IMPORTANCE_LABELS,
   IMPORTANCE_LABELS_EN: () => IMPORTANCE_LABELS_EN,
+  InfoTooltip: () => InfoTooltip,
   MyIOChartModal: () => MyIOChartModal,
   MyIODraggableCard: () => MyIODraggableCard,
   MyIOSelectionStore: () => MyIOSelectionStore,
@@ -9039,8 +9040,8 @@ function getStatusDotClass(deviceStatus) {
       return "dot--offline";
   }
 }
-function buildDOM(state) {
-  const { entityObject, i18n, enableSelection, enableDragDrop } = state;
+function buildDOM(state2) {
+  const { entityObject, i18n, enableSelection, enableDragDrop } = state2;
   const root = document.createElement("div");
   root.className = "myio-ho-card";
   root.setAttribute("role", "group");
@@ -9366,8 +9367,8 @@ function verifyOfflineStatus(entityObject, delayTimeInMins = 15, LogHelper2) {
   }
   return isOffline;
 }
-function paint(root, state) {
-  const { entityObject, i18n, delayTimeConnectionInMins, isSelected, LogHelper: LogHelper2, activeTooltipDebug } = state;
+function paint(root, state2) {
+  const { entityObject, i18n, delayTimeConnectionInMins, isSelected, LogHelper: LogHelper2, activeTooltipDebug } = state2;
   let statusDecisionSource = "unknown";
   if (entityObject.connectionStatus) {
     if (entityObject.connectionStatus === "offline") {
@@ -9419,7 +9420,7 @@ function paint(root, state) {
   numSpan.textContent = primaryValue;
   const barContainer = root.querySelector(".bar");
   const effContainer = root.querySelector(".myio-ho-card__eff");
-  if (state.enableSelection) {
+  if (state2.enableSelection) {
     const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
     if (checkbox) {
       checkbox.checked = !!isSelected;
@@ -9467,8 +9468,8 @@ function paint(root, state) {
     statusDot.className = `status-dot ${dotClass}`;
   }
 }
-function bindEvents(root, state, callbacks) {
-  const { entityObject } = state;
+function bindEvents(root, state2, callbacks) {
+  const { entityObject } = state2;
   const kebabBtn = root.querySelector(".myio-ho-card__kebab");
   const menu = root.querySelector(".myio-ho-card__menu");
   function toggleMenu() {
@@ -9524,9 +9525,9 @@ function bindEvents(root, state, callbacks) {
     const onSelectionChange = () => {
       const selectedIds = MyIOSelectionStore2.getSelectedIds();
       const isSelected = selectedIds.includes(entityObject.entityId);
-      if (state.isSelected !== isSelected) {
-        state.isSelected = isSelected;
-        paint(root, state);
+      if (state2.isSelected !== isSelected) {
+        state2.isSelected = isSelected;
+        paint(root, state2);
       }
     };
     MyIOSelectionStore2.on("selection:change", onSelectionChange);
@@ -9539,7 +9540,7 @@ function bindEvents(root, state, callbacks) {
         clearTimeout(TempRangeTooltip._hideTimer);
         TempRangeTooltip._hideTimer = null;
       }
-      TempRangeTooltip.show(root, state.entityObject, e);
+      TempRangeTooltip.show(root, state2.entityObject, e);
     };
     const hideTooltip = () => {
       TempRangeTooltip._startDelayedHide();
@@ -9557,7 +9558,7 @@ function bindEvents(root, state, callbacks) {
         clearTimeout(EnergyRangeTooltip._hideTimer);
         EnergyRangeTooltip._hideTimer = null;
       }
-      EnergyRangeTooltip.show(root, state.entityObject, e);
+      EnergyRangeTooltip.show(root, state2.entityObject, e);
     };
     const hideEnergyTooltip = () => {
       EnergyRangeTooltip._startDelayedHide();
@@ -9609,7 +9610,7 @@ function bindEvents(root, state, callbacks) {
       }
     });
   }
-  if (state.enableDragDrop) {
+  if (state2.enableDragDrop) {
     root.addEventListener("dragstart", (e) => {
       root.classList.add("is-dragging");
       e.dataTransfer.setData("text/plain", entityObject.entityId);
@@ -9651,17 +9652,17 @@ function renderCardComponentHeadOffice(containerEl, params) {
     throw new Error("renderCardComponentHeadOffice: containerEl is required");
   }
   ensureCss();
-  const state = normalizeParams(params);
-  const root = buildDOM(state);
-  state.isSelected = params.isSelected || false;
+  const state2 = normalizeParams(params);
+  const root = buildDOM(state2);
+  state2.isSelected = params.isSelected || false;
   containerEl.appendChild(root);
-  bindEvents(root, state, state.callbacks);
-  paint(root, state);
+  bindEvents(root, state2, state2.callbacks);
+  paint(root, state2);
   return {
     update(next) {
       if (next) {
-        Object.assign(state.entityObject, next);
-        paint(root, state);
+        Object.assign(state2.entityObject, next);
+        paint(root, state2);
       }
     },
     destroy() {
@@ -21144,15 +21145,45 @@ var PowerLimitsPersister = class {
     }
   }
   /**
-   * Save mapInstantaneousPower to customer server_scope attributes
+   * Fetch child customer relations (level 1) from a parent customer
+   * Returns array of child customer IDs
    */
-  async saveCustomerPowerLimits(customerId, limits) {
+  async fetchChildCustomerIds(parentCustomerId) {
+    try {
+      const url = `${this.tbBaseUrl}/api/relations/info?fromId=${parentCustomerId}&fromType=CUSTOMER`;
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "X-Authorization": `Bearer ${this.jwtToken}`,
+          "Content-Type": "application/json"
+        }
+      });
+      if (!response.ok) {
+        console.warn("[PowerLimitsPersister] Failed to fetch relations:", response.status);
+        return [];
+      }
+      const relations = await response.json();
+      if (!Array.isArray(relations) || relations.length === 0) {
+        console.log("[PowerLimitsPersister] No child customer relations found");
+        return [];
+      }
+      const childCustomerIds = relations.filter((rel) => rel.to?.entityType === "CUSTOMER" && rel.to?.id).map((rel) => rel.to.id);
+      console.log(`[PowerLimitsPersister] Found ${childCustomerIds.length} child customer(s)`);
+      return childCustomerIds;
+    } catch (error) {
+      console.error("[PowerLimitsPersister] Error fetching relations:", error);
+      return [];
+    }
+  }
+  /**
+   * Save power limits to a single customer (internal method)
+   */
+  async saveToSingleCustomer(customerId, limits) {
     try {
       const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/attributes/SERVER_SCOPE`;
       const payload = {
         mapInstantaneousPower: limits
       };
-      console.log("[PowerLimitsPersister] Saving power limits:", payload);
       const response = await fetch(url, {
         method: "POST",
         headers: {
@@ -21162,10 +21193,41 @@ var PowerLimitsPersister = class {
         body: JSON.stringify(payload)
       });
       if (!response.ok) {
-        throw this.createHttpError(response.status, await response.text().catch(() => ""));
+        console.warn(`[PowerLimitsPersister] Failed to save to customer ${customerId}:`, response.status);
+        return false;
       }
-      console.log("[PowerLimitsPersister] Successfully saved power limits");
-      return { ok: true };
+      return true;
+    } catch (error) {
+      console.error(`[PowerLimitsPersister] Error saving to customer ${customerId}:`, error);
+      return false;
+    }
+  }
+  /**
+   * Save mapInstantaneousPower to customer server_scope attributes
+   * Also propagates to all child customers (level 1 relations)
+   */
+  async saveCustomerPowerLimits(customerId, limits) {
+    try {
+      console.log("[PowerLimitsPersister] Saving power limits:", { customerId, limits });
+      const mainSaveSuccess = await this.saveToSingleCustomer(customerId, limits);
+      if (!mainSaveSuccess) {
+        throw new Error("Failed to save to main customer");
+      }
+      console.log("[PowerLimitsPersister] Successfully saved to main customer");
+      const childCustomerIds = await this.fetchChildCustomerIds(customerId);
+      let successCount = 1;
+      if (childCustomerIds.length > 0) {
+        console.log(`[PowerLimitsPersister] Saving to ${childCustomerIds.length} child customer(s)...`);
+        const savePromises = childCustomerIds.map(
+          (childId) => this.saveToSingleCustomer(childId, limits)
+        );
+        const results = await Promise.all(savePromises);
+        const childSuccessCount = results.filter(Boolean).length;
+        successCount += childSuccessCount;
+        console.log(`[PowerLimitsPersister] Saved to ${childSuccessCount}/${childCustomerIds.length} child customer(s)`);
+      }
+      console.log(`[PowerLimitsPersister] Total: saved to ${successCount} customer(s)`);
+      return { ok: true, savedCount: successCount };
     } catch (error) {
       console.error("[PowerLimitsPersister] Error saving power limits:", error);
       return { ok: false, error: this.mapError(error) };
@@ -22355,6 +22417,136 @@ var AnnotationsTab = class {
       this.annotations = [];
     }
   }
+  /**
+   * Show a confirmation modal and return user's choice
+   * Replaces native confirm() for better UX
+   */
+  showConfirmation(message, title = "Confirmar") {
+    return new Promise((resolve) => {
+      const overlay = document.createElement("div");
+      overlay.className = "annotations-confirm-overlay";
+      overlay.innerHTML = `
+        <div class="annotations-confirm-modal">
+          <div class="annotations-confirm-header">
+            <span class="annotations-confirm-icon">\u26A0\uFE0F</span>
+            <span class="annotations-confirm-title">${title}</span>
+          </div>
+          <div class="annotations-confirm-body">
+            <p>${message}</p>
+          </div>
+          <div class="annotations-confirm-actions">
+            <button class="annotations-confirm-btn annotations-confirm-btn--cancel" data-action="cancel">
+              Cancelar
+            </button>
+            <button class="annotations-confirm-btn annotations-confirm-btn--confirm" data-action="confirm">
+              Confirmar
+            </button>
+          </div>
+        </div>
+      `;
+      if (!document.getElementById("annotations-confirm-styles")) {
+        const style = document.createElement("style");
+        style.id = "annotations-confirm-styles";
+        style.textContent = `
+          .annotations-confirm-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 100001;
+            animation: confirmFadeIn 0.2s ease;
+          }
+          @keyframes confirmFadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          .annotations-confirm-modal {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 400px;
+            width: 90%;
+            overflow: hidden;
+            animation: confirmSlideIn 0.25s ease;
+          }
+          @keyframes confirmSlideIn {
+            from { transform: translateY(-20px) scale(0.95); opacity: 0; }
+            to { transform: translateY(0) scale(1); opacity: 1; }
+          }
+          .annotations-confirm-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 16px 20px;
+            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+            border-bottom: 1px solid #f59e0b;
+          }
+          .annotations-confirm-icon {
+            font-size: 20px;
+          }
+          .annotations-confirm-title {
+            font-weight: 600;
+            color: #92400e;
+            font-size: 16px;
+          }
+          .annotations-confirm-body {
+            padding: 20px;
+          }
+          .annotations-confirm-body p {
+            margin: 0;
+            color: #374151;
+            font-size: 14px;
+            line-height: 1.5;
+          }
+          .annotations-confirm-actions {
+            display: flex;
+            gap: 12px;
+            padding: 16px 20px;
+            background: #f9fafb;
+            border-top: 1px solid #e5e7eb;
+            justify-content: flex-end;
+          }
+          .annotations-confirm-btn {
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: none;
+          }
+          .annotations-confirm-btn--cancel {
+            background: #e5e7eb;
+            color: #374151;
+          }
+          .annotations-confirm-btn--cancel:hover {
+            background: #d1d5db;
+          }
+          .annotations-confirm-btn--confirm {
+            background: #f59e0b;
+            color: white;
+          }
+          .annotations-confirm-btn--confirm:hover {
+            background: #d97706;
+          }
+        `;
+        document.head.appendChild(style);
+      }
+      document.body.appendChild(overlay);
+      const cleanup = (result) => {
+        overlay.remove();
+        resolve(result);
+      };
+      overlay.querySelector('[data-action="cancel"]')?.addEventListener("click", () => cleanup(false));
+      overlay.querySelector('[data-action="confirm"]')?.addEventListener("click", () => cleanup(true));
+      overlay.addEventListener("click", (e) => {
+        if (e.target === overlay) cleanup(false);
+      });
+    });
+  }
   async saveAnnotations() {
     try {
       const data = {
@@ -22418,7 +22610,7 @@ var AnnotationsTab = class {
       this.render();
     } else {
       this.annotations.shift();
-      alert("Erro ao salvar anota\xE7\xE3o. Tente novamente.");
+      MyIOToast.show("Erro ao salvar anota\xE7\xE3o. Tente novamente.", "error");
     }
   }
   async editAnnotation(id, changes) {
@@ -22428,9 +22620,10 @@ var AnnotationsTab = class {
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const changeRecord = {};
     for (const [key, value] of Object.entries(changes)) {
-      if (annotation[key] !== value) {
+      const annotationAny = annotation;
+      if (annotationAny[key] !== value) {
         changeRecord[key] = {
-          from: annotation[key],
+          from: annotationAny[key],
           to: value
         };
       }
@@ -22455,7 +22648,7 @@ var AnnotationsTab = class {
     const success = await this.saveAnnotations();
     if (!success) {
       this.annotations[index] = annotation;
-      alert("Erro ao atualizar anota\xE7\xE3o. Tente novamente.");
+      MyIOToast.show("Erro ao atualizar anota\xE7\xE3o. Tente novamente.", "error");
     }
   }
   async archiveAnnotation(id) {
@@ -22483,7 +22676,7 @@ var AnnotationsTab = class {
       this.render();
     } else {
       this.annotations[index] = annotation;
-      alert("Erro ao arquivar anota\xE7\xE3o. Tente novamente.");
+      MyIOToast.show("Erro ao arquivar anota\xE7\xE3o. Tente novamente.", "error");
     }
   }
   async acknowledgeAnnotation(id) {
@@ -22998,8 +23191,8 @@ var AnnotationsTab = class {
       card.querySelector('[data-action="details"]')?.addEventListener("click", () => {
         this.showDetailModal(id);
       });
-      card.querySelector('[data-action="archive"]')?.addEventListener("click", () => {
-        if (confirm("Tem certeza que deseja arquivar esta anota\xE7\xE3o?")) {
+      card.querySelector('[data-action="archive"]')?.addEventListener("click", async () => {
+        if (await this.showConfirmation("Tem certeza que deseja arquivar esta anota\xE7\xE3o?", "Arquivar Anota\xE7\xE3o")) {
           this.archiveAnnotation(id);
         }
       });
@@ -23016,8 +23209,8 @@ var AnnotationsTab = class {
       row.querySelector('[data-action="details"]')?.addEventListener("click", () => {
         this.showDetailModal(id);
       });
-      row.querySelector('[data-action="archive"]')?.addEventListener("click", () => {
-        if (confirm("Tem certeza que deseja arquivar esta anota\xE7\xE3o?")) {
+      row.querySelector('[data-action="archive"]')?.addEventListener("click", async () => {
+        if (await this.showConfirmation("Tem certeza que deseja arquivar esta anota\xE7\xE3o?", "Arquivar Anota\xE7\xE3o")) {
           this.archiveAnnotation(id);
         }
       });
@@ -23026,12 +23219,189 @@ var AnnotationsTab = class {
   // ============================================
   // EDIT MODAL
   // ============================================
-  showEditModal(id) {
+  /**
+   * Show a styled input modal for editing annotation text
+   * Replaces native prompt() for better UX
+   */
+  showInputModal(title, placeholder, initialValue) {
+    return new Promise((resolve) => {
+      const overlay = document.createElement("div");
+      overlay.className = "annotations-input-overlay";
+      overlay.innerHTML = `
+        <div class="annotations-input-modal">
+          <div class="annotations-input-header">
+            <span class="annotations-input-icon">\u270F\uFE0F</span>
+            <span class="annotations-input-title">${title}</span>
+          </div>
+          <div class="annotations-input-body">
+            <textarea
+              class="annotations-input-textarea"
+              placeholder="${placeholder}"
+              maxlength="255"
+            >${initialValue}</textarea>
+            <div class="annotations-input-char-count">
+              <span id="input-char-count">${initialValue.length}</span> / 255
+            </div>
+          </div>
+          <div class="annotations-input-actions">
+            <button class="annotations-input-btn annotations-input-btn--cancel" data-action="cancel">
+              Cancelar
+            </button>
+            <button class="annotations-input-btn annotations-input-btn--confirm" data-action="confirm">
+              Salvar
+            </button>
+          </div>
+        </div>
+      `;
+      if (!document.getElementById("annotations-input-styles")) {
+        const style = document.createElement("style");
+        style.id = "annotations-input-styles";
+        style.textContent = `
+          .annotations-input-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 100001;
+            animation: inputFadeIn 0.2s ease;
+          }
+          @keyframes inputFadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          .annotations-input-modal {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 500px;
+            width: 90%;
+            overflow: hidden;
+            animation: inputSlideIn 0.25s ease;
+          }
+          @keyframes inputSlideIn {
+            from { transform: translateY(-20px) scale(0.95); opacity: 0; }
+            to { transform: translateY(0) scale(1); opacity: 1; }
+          }
+          .annotations-input-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 16px 20px;
+            background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
+            border-bottom: 1px solid #5b4cdb;
+          }
+          .annotations-input-icon {
+            font-size: 20px;
+          }
+          .annotations-input-title {
+            font-weight: 600;
+            color: white;
+            font-size: 16px;
+          }
+          .annotations-input-body {
+            padding: 20px;
+          }
+          .annotations-input-textarea {
+            width: 100%;
+            min-height: 100px;
+            padding: 12px;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            font-size: 14px;
+            font-family: inherit;
+            resize: vertical;
+            color: #212529;
+          }
+          .annotations-input-textarea:focus {
+            outline: none;
+            border-color: #6c5ce7;
+            box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
+          }
+          .annotations-input-char-count {
+            font-size: 11px;
+            color: #6c757d;
+            text-align: right;
+            margin-top: 6px;
+          }
+          .annotations-input-actions {
+            display: flex;
+            gap: 12px;
+            padding: 16px 20px;
+            background: #f9fafb;
+            border-top: 1px solid #e5e7eb;
+            justify-content: flex-end;
+          }
+          .annotations-input-btn {
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: none;
+          }
+          .annotations-input-btn--cancel {
+            background: #e5e7eb;
+            color: #374151;
+          }
+          .annotations-input-btn--cancel:hover {
+            background: #d1d5db;
+          }
+          .annotations-input-btn--confirm {
+            background: #6c5ce7;
+            color: white;
+          }
+          .annotations-input-btn--confirm:hover {
+            background: #5b4cdb;
+          }
+        `;
+        document.head.appendChild(style);
+      }
+      document.body.appendChild(overlay);
+      const textarea = overlay.querySelector(".annotations-input-textarea");
+      const charCount = overlay.querySelector("#input-char-count");
+      textarea.focus();
+      textarea.select();
+      textarea.addEventListener("input", () => {
+        charCount.textContent = String(textarea.value.length);
+      });
+      const cleanup = (result) => {
+        overlay.remove();
+        resolve(result);
+      };
+      overlay.querySelector('[data-action="cancel"]')?.addEventListener("click", () => cleanup(null));
+      overlay.querySelector('[data-action="confirm"]')?.addEventListener("click", () => {
+        const value = textarea.value.trim();
+        cleanup(value || null);
+      });
+      overlay.addEventListener("click", (e) => {
+        if (e.target === overlay) cleanup(null);
+      });
+      textarea.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && e.ctrlKey) {
+          const value = textarea.value.trim();
+          cleanup(value || null);
+        }
+        if (e.key === "Escape") {
+          cleanup(null);
+        }
+      });
+    });
+  }
+  async showEditModal(id) {
     const annotation = this.annotations.find((a) => a.id === id);
     if (!annotation) return;
-    const newText = prompt("Editar texto da anota\xE7\xE3o:", annotation.text);
-    if (newText && newText.trim() !== annotation.text) {
-      this.updateAnnotation(id, { text: newText.trim() });
+    const newText = await this.showInputModal(
+      "Editar Anota\xE7\xE3o",
+      "Digite o novo texto da anota\xE7\xE3o...",
+      annotation.text
+    );
+    if (newText && newText !== annotation.text) {
+      await this.editAnnotation(id, { text: newText });
+      this.render();
     }
   }
   // ============================================
@@ -23125,7 +23495,7 @@ var AnnotationsTab = class {
     overlay.querySelector(".annotation-detail__close")?.addEventListener("click", () => overlay.remove());
     overlay.querySelector('[data-action="close"]')?.addEventListener("click", () => overlay.remove());
     overlay.querySelector('[data-action="archive"]')?.addEventListener("click", async () => {
-      if (confirm("Tem certeza que deseja arquivar esta anota\xE7\xE3o?")) {
+      if (await this.showConfirmation("Tem certeza que deseja arquivar esta anota\xE7\xE3o?", "Arquivar Anota\xE7\xE3o")) {
         overlay.remove();
         await this.archiveAnnotation(id);
       }
@@ -27690,7 +28060,7 @@ async function openTemperatureModal(params) {
   const defaultDateRange = getTodaySoFar();
   const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
   const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
-  const state = {
+  const state2 = {
     token: params.token,
     deviceId: params.deviceId,
     label: params.label || "Sensor de Temperatura",
@@ -27713,58 +28083,58 @@ async function openTemperatureModal(params) {
   };
   const savedGranularity = localStorage.getItem("myio-temp-modal-granularity");
   const savedTheme = localStorage.getItem("myio-temp-modal-theme");
-  if (savedGranularity) state.granularity = savedGranularity;
-  if (savedTheme) state.theme = savedTheme;
+  if (savedGranularity) state2.granularity = savedGranularity;
+  if (savedTheme) state2.theme = savedTheme;
   const modalContainer = document.createElement("div");
   modalContainer.id = modalId;
   document.body.appendChild(modalContainer);
-  renderModal(modalContainer, state, modalId);
+  renderModal(modalContainer, state2, modalId);
   try {
-    state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
-    state.stats = calculateStats(state.data, state.clampRange);
-    state.isLoading = false;
-    renderModal(modalContainer, state, modalId);
-    drawChart(modalId, state);
+    state2.data = await fetchTemperatureData(state2.token, state2.deviceId, state2.startTs, state2.endTs);
+    state2.stats = calculateStats(state2.data, state2.clampRange);
+    state2.isLoading = false;
+    renderModal(modalContainer, state2, modalId);
+    drawChart(modalId, state2);
   } catch (error) {
     console.error("[TemperatureModal] Error fetching data:", error);
-    state.isLoading = false;
-    renderModal(modalContainer, state, modalId, error);
+    state2.isLoading = false;
+    renderModal(modalContainer, state2, modalId, error);
   }
-  await setupEventListeners(modalContainer, state, modalId, params.onClose);
+  await setupEventListeners(modalContainer, state2, modalId, params.onClose);
   return {
     destroy: () => {
       modalContainer.remove();
       params.onClose?.();
     },
     updateData: async (startDate, endDate, granularity) => {
-      state.startTs = new Date(startDate).getTime();
-      state.endTs = new Date(endDate).getTime();
-      if (granularity) state.granularity = granularity;
-      state.isLoading = true;
-      renderModal(modalContainer, state, modalId);
+      state2.startTs = new Date(startDate).getTime();
+      state2.endTs = new Date(endDate).getTime();
+      if (granularity) state2.granularity = granularity;
+      state2.isLoading = true;
+      renderModal(modalContainer, state2, modalId);
       try {
-        state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
-        state.stats = calculateStats(state.data, state.clampRange);
-        state.isLoading = false;
-        renderModal(modalContainer, state, modalId);
-        drawChart(modalId, state);
+        state2.data = await fetchTemperatureData(state2.token, state2.deviceId, state2.startTs, state2.endTs);
+        state2.stats = calculateStats(state2.data, state2.clampRange);
+        state2.isLoading = false;
+        renderModal(modalContainer, state2, modalId);
+        drawChart(modalId, state2);
       } catch (error) {
         console.error("[TemperatureModal] Error updating data:", error);
-        state.isLoading = false;
-        renderModal(modalContainer, state, modalId, error);
+        state2.isLoading = false;
+        renderModal(modalContainer, state2, modalId, error);
       }
     }
   };
 }
-function renderModal(container, state, modalId, error) {
-  const colors = getThemeColors(state.theme);
-  const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale);
-  const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale);
-  const statusText = state.temperatureStatus === "ok" ? "Dentro da faixa" : state.temperatureStatus === "above" ? "Acima do limite" : state.temperatureStatus === "below" ? "Abaixo do limite" : "N/A";
-  const statusColor = state.temperatureStatus === "ok" ? colors.success : state.temperatureStatus === "above" ? colors.danger : state.temperatureStatus === "below" ? colors.primary : colors.textMuted;
-  const rangeText = state.temperatureMin !== null && state.temperatureMax !== null ? `${state.temperatureMin}\xB0C - ${state.temperatureMax}\xB0C` : "N\xE3o definida";
-  const startDateInput = new Date(state.startTs).toISOString().slice(0, 16);
-  const endDateInput = new Date(state.endTs).toISOString().slice(0, 16);
+function renderModal(container, state2, modalId, error) {
+  const colors = getThemeColors(state2.theme);
+  const startDateStr = new Date(state2.startTs).toLocaleDateString(state2.locale);
+  const endDateStr = new Date(state2.endTs).toLocaleDateString(state2.locale);
+  const statusText = state2.temperatureStatus === "ok" ? "Dentro da faixa" : state2.temperatureStatus === "above" ? "Acima do limite" : state2.temperatureStatus === "below" ? "Abaixo do limite" : "N/A";
+  const statusColor = state2.temperatureStatus === "ok" ? colors.success : state2.temperatureStatus === "above" ? colors.danger : state2.temperatureStatus === "below" ? colors.primary : colors.textMuted;
+  const rangeText = state2.temperatureMin !== null && state2.temperatureMax !== null ? `${state2.temperatureMin}\xB0C - ${state2.temperatureMax}\xB0C` : "N\xE3o definida";
+  const startDateInput = new Date(state2.startTs).toISOString().slice(0, 16);
+  const endDateInput = new Date(state2.endTs).toISOString().slice(0, 16);
   const isMaximized = container.__isMaximized || false;
   const contentMaxWidth = isMaximized ? "100%" : "900px";
   const contentMaxHeight = isMaximized ? "100vh" : "95vh";
@@ -27791,7 +28161,7 @@ function renderModal(container, state, modalId, error) {
           min-height: 20px;
         ">
           <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
-            \u{1F321}\uFE0F ${state.label} - Hist\xF3rico de Temperatura
+            \u{1F321}\uFE0F ${state2.label} - Hist\xF3rico de Temperatura
           </h2>
           <div style="display: flex; gap: 4px; align-items: center;">
             <!-- Theme Toggle -->
@@ -27799,7 +28169,7 @@ function renderModal(container, state, modalId, error) {
               background: none; border: none; font-size: 16px; cursor: pointer;
               padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,0.8);
               transition: background-color 0.2s;
-            ">${state.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
+            ">${state2.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
             <!-- Maximize Button -->
             <button id="${modalId}-maximize" title="${isMaximized ? "Restaurar" : "Maximizar"}" style="
               background: none; border: none; font-size: 16px; cursor: pointer;
@@ -27821,7 +28191,7 @@ function renderModal(container, state, modalId, error) {
         <!-- Controls Row -->
         <div style="
           display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
-          margin-bottom: 16px; padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
+          margin-bottom: 16px; padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
           border-radius: 6px; border: 1px solid ${colors.border};
         ">
           <!-- Granularity Select -->
@@ -27834,8 +28204,8 @@ function renderModal(container, state, modalId, error) {
               font-size: 14px; color: ${colors.text}; background: ${colors.surface};
               cursor: pointer; min-width: 130px;
             ">
-              <option value="hour" ${state.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
-              <option value="day" ${state.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
+              <option value="hour" ${state2.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
+              <option value="day" ${state2.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
             </select>
           </div>
           <!-- Day Period Filter (Multiselect) -->
@@ -27849,7 +28219,7 @@ function renderModal(container, state, modalId, error) {
               cursor: pointer; min-width: 180px; text-align: left;
               display: flex; align-items: center; justify-content: space-between; gap: 8px;
             ">
-              <span>${getSelectedPeriodsLabel(state.selectedPeriods)}</span>
+              <span>${getSelectedPeriodsLabel(state2.selectedPeriods)}</span>
               <span style="font-size: 10px;">\u25BC</span>
             </button>
             <div id="${modalId}-period-dropdown" style="
@@ -27862,12 +28232,12 @@ function renderModal(container, state, modalId, error) {
                 <label style="
                   display: flex; align-items: center; gap: 8px; padding: 8px 12px;
                   cursor: pointer; font-size: 13px; color: ${colors.text};
-                " onmouseover="this.style.background='${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
+                " onmouseover="this.style.background='${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
                    onmouseout="this.style.background='transparent'">
                   <input type="checkbox"
                     name="${modalId}-period"
                     value="${period.id}"
-                    ${state.selectedPeriods.includes(period.id) ? "checked" : ""}
+                    ${state2.selectedPeriods.includes(period.id) ? "checked" : ""}
                     style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
                   ${period.label}
                 </label>
@@ -27875,13 +28245,13 @@ function renderModal(container, state, modalId, error) {
               <div style="border-top: 1px solid ${colors.border}; margin-top: 8px; padding-top: 8px;">
                 <button id="${modalId}-period-select-all" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px 4px; padding: 6px;
-                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Selecionar Todos</button>
                 <button id="${modalId}-period-clear" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px; padding: 6px;
-                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Limpar Sele\xE7\xE3o</button>
@@ -27906,8 +28276,8 @@ function renderModal(container, state, modalId, error) {
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state.isLoading ? "disabled" : ""}>
-            ${state.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
+          " ${state2.isLoading ? "disabled" : ""}>
+            ${state2.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
           </button>
         </div>
 
@@ -27918,40 +28288,40 @@ function renderModal(container, state, modalId, error) {
         ">
           <!-- Current Temperature -->
           <div style="
-            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Temperatura Atual</span>
             <div style="font-weight: 700; font-size: 24px; color: ${statusColor}; margin-top: 4px;">
-              ${state.currentTemperature !== null ? formatTemperature(state.currentTemperature) : "N/A"}
+              ${state2.currentTemperature !== null ? formatTemperature(state2.currentTemperature) : "N/A"}
             </div>
             <div style="font-size: 11px; color: ${statusColor}; margin-top: 2px;">${statusText}</div>
           </div>
           <!-- Average -->
           <div style="
-            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">M\xE9dia do Per\xEDodo</span>
             <div id="${modalId}-avg" style="font-weight: 600; font-size: 20px; color: ${colors.text}; margin-top: 4px;">
-              ${state.stats.count > 0 ? formatTemperature(state.stats.avg) : "N/A"}
+              ${state2.stats.count > 0 ? formatTemperature(state2.stats.avg) : "N/A"}
             </div>
             <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${startDateStr} - ${endDateStr}</div>
           </div>
           <!-- Min/Max -->
           <div style="
-            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Min / Max</span>
             <div id="${modalId}-minmax" style="font-weight: 600; font-size: 20px; color: ${colors.text}; margin-top: 4px;">
-              ${state.stats.count > 0 ? `${formatTemperature(state.stats.min)} / ${formatTemperature(state.stats.max)}` : "N/A"}
+              ${state2.stats.count > 0 ? `${formatTemperature(state2.stats.min)} / ${formatTemperature(state2.stats.max)}` : "N/A"}
             </div>
-            <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${state.stats.count} leituras</div>
+            <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${state2.stats.count} leituras</div>
           </div>
           <!-- Ideal Range -->
           <div style="
-            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Faixa Ideal</span>
@@ -27967,18 +28337,18 @@ function renderModal(container, state, modalId, error) {
             Hist\xF3rico de Temperatura
           </h3>
           <div id="${modalId}-chart" style="
-            height: 320px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
+            height: 320px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
             border-radius: 12px; display: flex; justify-content: center; align-items: center;
             border: 1px solid ${colors.border}; position: relative;
           ">
-            ${state.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
+            ${state2.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
                    <div style="animation: spin 1s linear infinite; font-size: 32px; margin-bottom: 8px;">\u21BB</div>
                    <div>Carregando dados...</div>
                  </div>` : error ? `<div style="text-align: center; color: ${colors.danger};">
                      <div style="font-size: 32px; margin-bottom: 8px;">\u26A0\uFE0F</div>
                      <div>Erro ao carregar dados</div>
                      <div style="font-size: 12px; margin-top: 4px;">${error.message}</div>
-                   </div>` : state.data.length === 0 ? `<div style="text-align: center; color: ${colors.textMuted};">
+                   </div>` : state2.data.length === 0 ? `<div style="text-align: center; color: ${colors.textMuted};">
                        <div style="font-size: 32px; margin-bottom: 8px;">\u{1F4ED}</div>
                        <div>Sem dados para o per\xEDodo selecionado</div>
                      </div>` : `<canvas id="${modalId}-canvas" style="width: 100%; height: 100%;"></canvas>`}
@@ -27988,12 +28358,12 @@ function renderModal(container, state, modalId, error) {
         <!-- Actions -->
         <div style="display: flex; justify-content: flex-end; gap: 12px;">
           <button id="${modalId}-export" style="
-            background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
+            background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
             color: ${colors.text}; border: 1px solid ${colors.border};
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state.data.length === 0 ? "disabled" : ""}>
+          " ${state2.data.length === 0 ? "disabled" : ""}>
             \u{1F4E5} Exportar CSV
           </button>
           <button id="${modalId}-close-btn" style="
@@ -28044,14 +28414,14 @@ function renderModal(container, state, modalId, error) {
     </style>
   `;
 }
-function drawChart(modalId, state) {
+function drawChart(modalId, state2) {
   const chartContainer = document.getElementById(`${modalId}-chart`);
   const canvas = document.getElementById(`${modalId}-canvas`);
-  if (!chartContainer || !canvas || state.data.length === 0) return;
+  if (!chartContainer || !canvas || state2.data.length === 0) return;
   const ctx = canvas.getContext("2d");
   if (!ctx) return;
-  const colors = getThemeColors(state.theme);
-  const filteredData = filterByDayPeriods(state.data, state.selectedPeriods);
+  const colors = getThemeColors(state2.theme);
+  const filteredData = filterByDayPeriods(state2.data, state2.selectedPeriods);
   if (filteredData.length === 0) {
     canvas.width = chartContainer.clientWidth;
     canvas.height = chartContainer.clientHeight;
@@ -28062,14 +28432,14 @@ function drawChart(modalId, state) {
     return;
   }
   let chartData;
-  if (state.granularity === "hour") {
+  if (state2.granularity === "hour") {
     const interpolated = interpolateTemperature(filteredData, {
       intervalMinutes: 30,
-      startTs: state.startTs,
-      endTs: state.endTs,
-      clampRange: state.clampRange
+      startTs: state2.startTs,
+      endTs: state2.endTs,
+      clampRange: state2.clampRange
     });
-    const filteredInterpolated = filterByDayPeriods(interpolated, state.selectedPeriods);
+    const filteredInterpolated = filterByDayPeriods(interpolated, state2.selectedPeriods);
     chartData = filteredInterpolated.map((item) => ({
       x: item.ts,
       y: Number(item.value),
@@ -28077,7 +28447,7 @@ function drawChart(modalId, state) {
       screenY: 0
     }));
   } else {
-    const daily = aggregateByDay(filteredData, state.clampRange);
+    const daily = aggregateByDay(filteredData, state2.clampRange);
     chartData = daily.map((item) => ({
       x: item.dateTs,
       y: item.avg,
@@ -28095,12 +28465,12 @@ function drawChart(modalId, state) {
   const paddingRight = 20;
   const paddingTop = 20;
   const paddingBottom = 55;
-  const isPeriodsFiltered = state.selectedPeriods.length < 4 && state.selectedPeriods.length > 0;
+  const isPeriodsFiltered = state2.selectedPeriods.length < 4 && state2.selectedPeriods.length > 0;
   const values = chartData.map((d) => d.y);
   const dataMin = Math.min(...values);
   const dataMax = Math.max(...values);
-  const thresholdMin = state.temperatureMin !== null ? state.temperatureMin : dataMin;
-  const thresholdMax = state.temperatureMax !== null ? state.temperatureMax : dataMax;
+  const thresholdMin = state2.temperatureMin !== null ? state2.temperatureMin : dataMin;
+  const thresholdMax = state2.temperatureMax !== null ? state2.temperatureMax : dataMax;
   const minY = Math.min(dataMin, thresholdMin) - 1;
   const maxY = Math.max(dataMax, thresholdMax) + 1;
   const chartWidth = width - paddingLeft - paddingRight;
@@ -28132,9 +28502,9 @@ function drawChart(modalId, state) {
     ctx.lineTo(width - paddingRight, y);
     ctx.stroke();
   }
-  if (state.temperatureMin !== null && state.temperatureMax !== null) {
-    const rangeMinY = height - paddingBottom - (state.temperatureMin - minY) * scaleY;
-    const rangeMaxY = height - paddingBottom - (state.temperatureMax - minY) * scaleY;
+  if (state2.temperatureMin !== null && state2.temperatureMax !== null) {
+    const rangeMinY = height - paddingBottom - (state2.temperatureMin - minY) * scaleY;
+    const rangeMaxY = height - paddingBottom - (state2.temperatureMax - minY) * scaleY;
     ctx.fillStyle = "rgba(76, 175, 80, 0.1)";
     ctx.fillRect(paddingLeft, rangeMaxY, chartWidth, rangeMinY - rangeMaxY);
     ctx.strokeStyle = colors.success;
@@ -28176,10 +28546,10 @@ function drawChart(modalId, state) {
     const point = chartData[i];
     const date = new Date(point.x);
     let label;
-    if (state.granularity === "hour") {
-      label = date.toLocaleTimeString(state.locale, { hour: "2-digit", minute: "2-digit" });
+    if (state2.granularity === "hour") {
+      label = date.toLocaleTimeString(state2.locale, { hour: "2-digit", minute: "2-digit" });
     } else {
-      label = date.toLocaleDateString(state.locale, { day: "2-digit", month: "2-digit" });
+      label = date.toLocaleDateString(state2.locale, { day: "2-digit", month: "2-digit" });
     }
     ctx.strokeStyle = colors.chartGrid;
     ctx.lineWidth = 1;
@@ -28197,16 +28567,16 @@ function drawChart(modalId, state) {
   ctx.lineTo(paddingLeft, height - paddingBottom);
   ctx.lineTo(width - paddingRight, height - paddingBottom);
   ctx.stroke();
-  setupChartTooltip(canvas, chartContainer, chartData, state, colors);
+  setupChartTooltip(canvas, chartContainer, chartData, state2, colors);
 }
-function setupChartTooltip(canvas, container, chartData, state, colors) {
+function setupChartTooltip(canvas, container, chartData, state2, colors) {
   const existingTooltip = container.querySelector(".myio-chart-tooltip");
   if (existingTooltip) existingTooltip.remove();
   const tooltip = document.createElement("div");
   tooltip.className = "myio-chart-tooltip";
   tooltip.style.cssText = `
     position: absolute;
-    background: ${state.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    background: ${state2.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
     border: 1px solid ${colors.border};
     border-radius: 8px;
     padding: 10px 14px;
@@ -28243,17 +28613,17 @@ function setupChartTooltip(canvas, container, chartData, state, colors) {
     if (point) {
       const date = new Date(point.x);
       let dateStr;
-      if (state.granularity === "hour") {
-        dateStr = date.toLocaleDateString(state.locale, {
+      if (state2.granularity === "hour") {
+        dateStr = date.toLocaleDateString(state2.locale, {
           day: "2-digit",
           month: "2-digit",
           year: "numeric"
-        }) + " " + date.toLocaleTimeString(state.locale, {
+        }) + " " + date.toLocaleTimeString(state2.locale, {
           hour: "2-digit",
           minute: "2-digit"
         });
       } else {
-        dateStr = date.toLocaleDateString(state.locale, {
+        dateStr = date.toLocaleDateString(state2.locale, {
           day: "2-digit",
           month: "2-digit",
           year: "numeric"
@@ -28291,7 +28661,7 @@ function setupChartTooltip(canvas, container, chartData, state, colors) {
     canvas.style.cursor = "default";
   });
 }
-async function setupEventListeners(container, state, modalId, onClose) {
+async function setupEventListeners(container, state2, modalId, onClose) {
   const closeModal = () => {
     container.remove();
     onClose?.();
@@ -28302,19 +28672,19 @@ async function setupEventListeners(container, state, modalId, onClose) {
   document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
   document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
   const dateRangeInput = document.getElementById(`${modalId}-date-range`);
-  if (dateRangeInput && !state.dateRangePicker) {
+  if (dateRangeInput && !state2.dateRangePicker) {
     try {
-      state.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
-        presetStart: new Date(state.startTs).toISOString(),
-        presetEnd: new Date(state.endTs).toISOString(),
+      state2.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+        presetStart: new Date(state2.startTs).toISOString(),
+        presetEnd: new Date(state2.endTs).toISOString(),
         includeTime: true,
         timePrecision: "minute",
         maxRangeDays: 90,
-        locale: state.locale,
+        locale: state2.locale,
         parentEl: container.querySelector(".myio-temp-modal-content"),
         onApply: (result) => {
-          state.startTs = new Date(result.startISO).getTime();
-          state.endTs = new Date(result.endISO).getTime();
+          state2.startTs = new Date(result.startISO).getTime();
+          state2.endTs = new Date(result.endISO).getTime();
           console.log("[TemperatureModal] Date range applied:", result);
         }
       });
@@ -28323,19 +28693,19 @@ async function setupEventListeners(container, state, modalId, onClose) {
     }
   }
   document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
-    state.theme = state.theme === "dark" ? "light" : "dark";
-    localStorage.setItem("myio-temp-modal-theme", state.theme);
-    state.dateRangePicker = null;
-    renderModal(container, state, modalId);
-    if (state.data.length > 0) drawChart(modalId, state);
-    await setupEventListeners(container, state, modalId, onClose);
+    state2.theme = state2.theme === "dark" ? "light" : "dark";
+    localStorage.setItem("myio-temp-modal-theme", state2.theme);
+    state2.dateRangePicker = null;
+    renderModal(container, state2, modalId);
+    if (state2.data.length > 0) drawChart(modalId, state2);
+    await setupEventListeners(container, state2, modalId, onClose);
   });
   document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
     container.__isMaximized = !container.__isMaximized;
-    state.dateRangePicker = null;
-    renderModal(container, state, modalId);
-    if (state.data.length > 0) drawChart(modalId, state);
-    await setupEventListeners(container, state, modalId, onClose);
+    state2.dateRangePicker = null;
+    renderModal(container, state2, modalId);
+    if (state2.data.length > 0) drawChart(modalId, state2);
+    await setupEventListeners(container, state2, modalId, onClose);
   });
   const periodBtn = document.getElementById(`${modalId}-period-btn`);
   const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
@@ -28354,71 +28724,71 @@ async function setupEventListeners(container, state, modalId, onClose) {
   periodCheckboxes.forEach((checkbox) => {
     checkbox.addEventListener("change", () => {
       const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
-      state.selectedPeriods = checked;
+      state2.selectedPeriods = checked;
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
       }
-      if (state.data.length > 0) drawChart(modalId, state);
+      if (state2.data.length > 0) drawChart(modalId, state2);
     });
   });
   document.getElementById(`${modalId}-period-select-all`)?.addEventListener("click", () => {
     periodCheckboxes.forEach((cb) => {
       cb.checked = true;
     });
-    state.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+    state2.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
     const btnLabel = periodBtn?.querySelector("span:first-child");
     if (btnLabel) {
-      btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
     }
-    if (state.data.length > 0) drawChart(modalId, state);
+    if (state2.data.length > 0) drawChart(modalId, state2);
   });
   document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
     periodCheckboxes.forEach((cb) => {
       cb.checked = false;
     });
-    state.selectedPeriods = [];
+    state2.selectedPeriods = [];
     const btnLabel = periodBtn?.querySelector("span:first-child");
     if (btnLabel) {
-      btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
     }
-    if (state.data.length > 0) drawChart(modalId, state);
+    if (state2.data.length > 0) drawChart(modalId, state2);
   });
   document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
-    state.granularity = e.target.value;
-    localStorage.setItem("myio-temp-modal-granularity", state.granularity);
-    if (state.data.length > 0) drawChart(modalId, state);
+    state2.granularity = e.target.value;
+    localStorage.setItem("myio-temp-modal-granularity", state2.granularity);
+    if (state2.data.length > 0) drawChart(modalId, state2);
   });
   document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
-    if (state.startTs >= state.endTs) {
+    if (state2.startTs >= state2.endTs) {
       alert("Por favor, selecione um per\xEDodo v\xE1lido");
       return;
     }
-    state.isLoading = true;
-    state.dateRangePicker = null;
-    renderModal(container, state, modalId);
+    state2.isLoading = true;
+    state2.dateRangePicker = null;
+    renderModal(container, state2, modalId);
     try {
-      state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
-      state.stats = calculateStats(state.data, state.clampRange);
-      state.isLoading = false;
-      renderModal(container, state, modalId);
-      drawChart(modalId, state);
-      await setupEventListeners(container, state, modalId, onClose);
+      state2.data = await fetchTemperatureData(state2.token, state2.deviceId, state2.startTs, state2.endTs);
+      state2.stats = calculateStats(state2.data, state2.clampRange);
+      state2.isLoading = false;
+      renderModal(container, state2, modalId);
+      drawChart(modalId, state2);
+      await setupEventListeners(container, state2, modalId, onClose);
     } catch (error) {
       console.error("[TemperatureModal] Error fetching data:", error);
-      state.isLoading = false;
-      renderModal(container, state, modalId, error);
-      await setupEventListeners(container, state, modalId, onClose);
+      state2.isLoading = false;
+      renderModal(container, state2, modalId, error);
+      await setupEventListeners(container, state2, modalId, onClose);
     }
   });
   document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
-    if (state.data.length === 0) return;
-    const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale).replace(/\//g, "-");
-    const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+    if (state2.data.length === 0) return;
+    const startDateStr = new Date(state2.startTs).toLocaleDateString(state2.locale).replace(/\//g, "-");
+    const endDateStr = new Date(state2.endTs).toLocaleDateString(state2.locale).replace(/\//g, "-");
     exportTemperatureCSV(
-      state.data,
-      state.label,
-      state.stats,
+      state2.data,
+      state2.label,
+      state2.stats,
       startDateStr,
       endDateStr
     );
@@ -28431,7 +28801,7 @@ async function openTemperatureComparisonModal(params) {
   const defaultDateRange = getTodaySoFar();
   const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
   const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
-  const state = {
+  const state2 = {
     token: params.token,
     devices: params.devices,
     startTs,
@@ -28450,44 +28820,44 @@ async function openTemperatureComparisonModal(params) {
   };
   const savedGranularity = localStorage.getItem("myio-temp-comparison-granularity");
   const savedTheme = localStorage.getItem("myio-temp-comparison-theme");
-  if (savedGranularity) state.granularity = savedGranularity;
-  if (savedTheme) state.theme = savedTheme;
+  if (savedGranularity) state2.granularity = savedGranularity;
+  if (savedTheme) state2.theme = savedTheme;
   const modalContainer = document.createElement("div");
   modalContainer.id = modalId;
   document.body.appendChild(modalContainer);
-  renderModal2(modalContainer, state, modalId);
-  await fetchAllDevicesData(state);
-  renderModal2(modalContainer, state, modalId);
-  drawComparisonChart(modalId, state);
-  await setupEventListeners2(modalContainer, state, modalId, params.onClose);
+  renderModal2(modalContainer, state2, modalId);
+  await fetchAllDevicesData(state2);
+  renderModal2(modalContainer, state2, modalId);
+  drawComparisonChart(modalId, state2);
+  await setupEventListeners2(modalContainer, state2, modalId, params.onClose);
   return {
     destroy: () => {
       modalContainer.remove();
       params.onClose?.();
     },
     updateData: async (startDate, endDate, granularity) => {
-      state.startTs = new Date(startDate).getTime();
-      state.endTs = new Date(endDate).getTime();
-      if (granularity) state.granularity = granularity;
-      state.isLoading = true;
-      renderModal2(modalContainer, state, modalId);
-      await fetchAllDevicesData(state);
-      renderModal2(modalContainer, state, modalId);
-      drawComparisonChart(modalId, state);
-      setupEventListeners2(modalContainer, state, modalId, params.onClose);
+      state2.startTs = new Date(startDate).getTime();
+      state2.endTs = new Date(endDate).getTime();
+      if (granularity) state2.granularity = granularity;
+      state2.isLoading = true;
+      renderModal2(modalContainer, state2, modalId);
+      await fetchAllDevicesData(state2);
+      renderModal2(modalContainer, state2, modalId);
+      drawComparisonChart(modalId, state2);
+      setupEventListeners2(modalContainer, state2, modalId, params.onClose);
     }
   };
 }
-async function fetchAllDevicesData(state) {
-  state.isLoading = true;
-  state.deviceData = [];
+async function fetchAllDevicesData(state2) {
+  state2.isLoading = true;
+  state2.deviceData = [];
   try {
     const results = await Promise.all(
-      state.devices.map(async (device, index) => {
+      state2.devices.map(async (device, index) => {
         const deviceId = device.tbId || device.id;
         try {
-          const data = await fetchTemperatureData(state.token, deviceId, state.startTs, state.endTs);
-          const stats = calculateStats(data, state.clampRange);
+          const data = await fetchTemperatureData(state2.token, deviceId, state2.startTs, state2.endTs);
+          const stats = calculateStats(data, state2.clampRange);
           return {
             device,
             data,
@@ -28505,21 +28875,21 @@ async function fetchAllDevicesData(state) {
         }
       })
     );
-    state.deviceData = results;
+    state2.deviceData = results;
   } catch (error) {
     console.error("[TemperatureComparisonModal] Error fetching data:", error);
   }
-  state.isLoading = false;
+  state2.isLoading = false;
 }
-function renderModal2(container, state, modalId) {
-  const colors = getThemeColors(state.theme);
-  const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale);
-  const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale);
-  const startDateInput = new Date(state.startTs).toISOString().slice(0, 16);
-  const endDateInput = new Date(state.endTs).toISOString().slice(0, 16);
-  const legendHTML = state.deviceData.map((dd) => `
+function renderModal2(container, state2, modalId) {
+  const colors = getThemeColors(state2.theme);
+  const startDateStr = new Date(state2.startTs).toLocaleDateString(state2.locale);
+  const endDateStr = new Date(state2.endTs).toLocaleDateString(state2.locale);
+  const startDateInput = new Date(state2.startTs).toISOString().slice(0, 16);
+  const endDateInput = new Date(state2.endTs).toISOString().slice(0, 16);
+  const legendHTML = state2.deviceData.map((dd) => `
     <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px;
-      background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
+      background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
       border-radius: 8px;">
       <span style="width: 12px; height: 12px; border-radius: 50%; background: ${dd.color};"></span>
       <span style="color: ${colors.text}; font-size: 13px;">${dd.device.label}</span>
@@ -28528,9 +28898,9 @@ function renderModal2(container, state, modalId) {
       </span>
     </div>
   `).join("");
-  const statsHTML = state.deviceData.map((dd) => `
+  const statsHTML = state2.deviceData.map((dd) => `
     <div style="
-      padding: 12px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+      padding: 12px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
       border-radius: 10px; border-left: 4px solid ${dd.color};
       min-width: 150px;
     ">
@@ -28581,7 +28951,7 @@ function renderModal2(container, state, modalId) {
           min-height: 20px;
         ">
           <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
-            \u{1F321}\uFE0F Compara\xE7\xE3o de Temperatura - ${state.devices.length} sensores
+            \u{1F321}\uFE0F Compara\xE7\xE3o de Temperatura - ${state2.devices.length} sensores
           </h2>
           <div style="display: flex; gap: 4px; align-items: center;">
             <!-- Theme Toggle -->
@@ -28589,7 +28959,7 @@ function renderModal2(container, state, modalId) {
               background: none; border: none; font-size: 16px; cursor: pointer;
               padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,0.8);
               transition: background-color 0.2s;
-            ">${state.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
+            ">${state2.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
             <!-- Maximize Button -->
             <button id="${modalId}-maximize" title="${isMaximized ? "Restaurar" : "Maximizar"}" style="
               background: none; border: none; font-size: 16px; cursor: pointer;
@@ -28612,7 +28982,7 @@ function renderModal2(container, state, modalId) {
         <div style="
           display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
           margin-bottom: 16px; padding: 16px;
-          background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
+          background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
           border-radius: 6px; border: 1px solid ${colors.border};
         ">
           <!-- Granularity Select -->
@@ -28625,8 +28995,8 @@ function renderModal2(container, state, modalId) {
               font-size: 14px; color: ${colors.text}; background: ${colors.surface};
               cursor: pointer; min-width: 130px;
             ">
-              <option value="hour" ${state.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
-              <option value="day" ${state.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
+              <option value="hour" ${state2.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
+              <option value="day" ${state2.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
             </select>
           </div>
           <!-- Day Period Filter (Multiselect) -->
@@ -28640,7 +29010,7 @@ function renderModal2(container, state, modalId) {
               cursor: pointer; min-width: 180px; text-align: left;
               display: flex; align-items: center; justify-content: space-between; gap: 8px;
             ">
-              <span>${getSelectedPeriodsLabel(state.selectedPeriods)}</span>
+              <span>${getSelectedPeriodsLabel(state2.selectedPeriods)}</span>
               <span style="font-size: 10px;">\u25BC</span>
             </button>
             <div id="${modalId}-period-dropdown" style="
@@ -28653,12 +29023,12 @@ function renderModal2(container, state, modalId) {
                 <label style="
                   display: flex; align-items: center; gap: 8px; padding: 8px 12px;
                   cursor: pointer; font-size: 13px; color: ${colors.text};
-                " onmouseover="this.style.background='${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
+                " onmouseover="this.style.background='${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
                    onmouseout="this.style.background='transparent'">
                   <input type="checkbox"
                     name="${modalId}-period"
                     value="${period.id}"
-                    ${state.selectedPeriods.includes(period.id) ? "checked" : ""}
+                    ${state2.selectedPeriods.includes(period.id) ? "checked" : ""}
                     style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
                   ${period.label}
                 </label>
@@ -28666,13 +29036,13 @@ function renderModal2(container, state, modalId) {
               <div style="border-top: 1px solid ${colors.border}; margin-top: 8px; padding-top: 8px;">
                 <button id="${modalId}-period-select-all" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px 4px; padding: 6px;
-                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Selecionar Todos</button>
                 <button id="${modalId}-period-clear" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px; padding: 6px;
-                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Limpar Sele\xE7\xE3o</button>
@@ -28697,8 +29067,8 @@ function renderModal2(container, state, modalId) {
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state.isLoading ? "disabled" : ""}>
-            ${state.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
+          " ${state2.isLoading ? "disabled" : ""}>
+            ${state2.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
           </button>
         </div>
 
@@ -28714,14 +29084,14 @@ function renderModal2(container, state, modalId) {
         <div style="margin-bottom: 24px;">
           <div id="${modalId}-chart" style="
             height: 380px;
-            background: ${state.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
+            background: ${state2.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
             border-radius: 14px; display: flex; justify-content: center; align-items: center;
             border: 1px solid ${colors.border}; position: relative;
           ">
-            ${state.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
+            ${state2.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
                    <div style="animation: spin 1s linear infinite; font-size: 36px; margin-bottom: 12px;">\u21BB</div>
-                   <div style="font-size: 15px;">Carregando dados de ${state.devices.length} sensores...</div>
-                 </div>` : state.deviceData.every((dd) => dd.data.length === 0) ? `<div style="text-align: center; color: ${colors.textMuted};">
+                   <div style="font-size: 15px;">Carregando dados de ${state2.devices.length} sensores...</div>
+                 </div>` : state2.deviceData.every((dd) => dd.data.length === 0) ? `<div style="text-align: center; color: ${colors.textMuted};">
                      <div style="font-size: 48px; margin-bottom: 12px;">\u{1F4ED}</div>
                      <div style="font-size: 16px;">Sem dados para o per\xEDodo selecionado</div>
                    </div>` : `<canvas id="${modalId}-canvas" style="width: 100%; height: 100%;"></canvas>`}
@@ -28739,12 +29109,12 @@ function renderModal2(container, state, modalId) {
         <!-- Actions -->
         <div style="display: flex; justify-content: flex-end; gap: 12px;">
           <button id="${modalId}-export" style="
-            background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
+            background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
             color: ${colors.text}; border: 1px solid ${colors.border};
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
+          " ${state2.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
             \u{1F4E5} Exportar CSV
           </button>
           <button id="${modalId}-close-btn" style="
@@ -28779,15 +29149,15 @@ function renderModal2(container, state, modalId) {
     </style>
   `;
 }
-function drawComparisonChart(modalId, state) {
+function drawComparisonChart(modalId, state2) {
   const chartContainer = document.getElementById(`${modalId}-chart`);
   const canvas = document.getElementById(`${modalId}-canvas`);
   if (!chartContainer || !canvas) return;
-  const hasData = state.deviceData.some((dd) => dd.data.length > 0);
+  const hasData = state2.deviceData.some((dd) => dd.data.length > 0);
   if (!hasData) return;
   const ctx = canvas.getContext("2d");
   if (!ctx) return;
-  const colors = getThemeColors(state.theme);
+  const colors = getThemeColors(state2.theme);
   const width = chartContainer.clientWidth - 2;
   const height = 380;
   canvas.width = width;
@@ -28798,19 +29168,19 @@ function drawComparisonChart(modalId, state) {
   const paddingBottom = 55;
   ctx.clearRect(0, 0, width, height);
   const processedData = [];
-  state.deviceData.forEach((dd) => {
+  state2.deviceData.forEach((dd) => {
     if (dd.data.length === 0) return;
-    const filteredData = filterByDayPeriods(dd.data, state.selectedPeriods);
+    const filteredData = filterByDayPeriods(dd.data, state2.selectedPeriods);
     if (filteredData.length === 0) return;
     let points;
-    if (state.granularity === "hour") {
+    if (state2.granularity === "hour") {
       const interpolated = interpolateTemperature(filteredData, {
         intervalMinutes: 30,
-        startTs: state.startTs,
-        endTs: state.endTs,
-        clampRange: state.clampRange
+        startTs: state2.startTs,
+        endTs: state2.endTs,
+        clampRange: state2.clampRange
       });
-      const filteredInterpolated = filterByDayPeriods(interpolated, state.selectedPeriods);
+      const filteredInterpolated = filterByDayPeriods(interpolated, state2.selectedPeriods);
       points = filteredInterpolated.map((item) => ({
         x: item.ts,
         y: Number(item.value),
@@ -28820,7 +29190,7 @@ function drawComparisonChart(modalId, state) {
         deviceColor: dd.color
       }));
     } else {
-      const daily = aggregateByDay(filteredData, state.clampRange);
+      const daily = aggregateByDay(filteredData, state2.clampRange);
       points = daily.map((item) => ({
         x: item.dateTs,
         y: item.avg,
@@ -28841,7 +29211,7 @@ function drawComparisonChart(modalId, state) {
     ctx.fillText("Nenhum dado para os per\xEDodos selecionados", width / 2, height / 2);
     return;
   }
-  const isPeriodsFiltered = state.selectedPeriods.length < 4 && state.selectedPeriods.length > 0;
+  const isPeriodsFiltered = state2.selectedPeriods.length < 4 && state2.selectedPeriods.length > 0;
   let dataMinY = Infinity;
   let dataMaxY = -Infinity;
   processedData.forEach(({ points }) => {
@@ -28851,7 +29221,7 @@ function drawComparisonChart(modalId, state) {
     });
   });
   const rangeMap = /* @__PURE__ */ new Map();
-  state.deviceData.forEach((dd, index) => {
+  state2.deviceData.forEach((dd, index) => {
     const device = dd.device;
     const min = device.temperatureMin;
     const max = device.temperatureMax;
@@ -28870,10 +29240,10 @@ function drawComparisonChart(modalId, state) {
       }
     }
   });
-  if (rangeMap.size === 0 && state.temperatureMin !== null && state.temperatureMax !== null) {
+  if (rangeMap.size === 0 && state2.temperatureMin !== null && state2.temperatureMax !== null) {
     rangeMap.set("global", {
-      min: state.temperatureMin,
-      max: state.temperatureMax,
+      min: state2.temperatureMin,
+      max: state2.temperatureMax,
       customerName: "Global",
       color: colors.success,
       deviceLabels: []
@@ -28994,10 +29364,10 @@ function drawComparisonChart(modalId, state) {
     const point = xAxisPoints[i];
     const date = new Date(point.x);
     let label;
-    if (state.granularity === "hour") {
-      label = date.toLocaleTimeString(state.locale, { hour: "2-digit", minute: "2-digit" });
+    if (state2.granularity === "hour") {
+      label = date.toLocaleTimeString(state2.locale, { hour: "2-digit", minute: "2-digit" });
     } else {
-      label = date.toLocaleDateString(state.locale, { day: "2-digit", month: "2-digit" });
+      label = date.toLocaleDateString(state2.locale, { day: "2-digit", month: "2-digit" });
     }
     ctx.strokeStyle = colors.chartGrid;
     ctx.lineWidth = 1;
@@ -29016,16 +29386,16 @@ function drawComparisonChart(modalId, state) {
   ctx.lineTo(width - paddingRight, height - paddingBottom);
   ctx.stroke();
   const allChartPoints = processedData.flatMap((pd) => pd.points);
-  setupComparisonChartTooltip(canvas, chartContainer, allChartPoints, state, colors);
+  setupComparisonChartTooltip(canvas, chartContainer, allChartPoints, state2, colors);
 }
-function setupComparisonChartTooltip(canvas, container, chartData, state, colors) {
+function setupComparisonChartTooltip(canvas, container, chartData, state2, colors) {
   const existingTooltip = container.querySelector(".myio-chart-tooltip");
   if (existingTooltip) existingTooltip.remove();
   const tooltip = document.createElement("div");
   tooltip.className = "myio-chart-tooltip";
   tooltip.style.cssText = `
     position: absolute;
-    background: ${state.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    background: ${state2.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
     border: 1px solid ${colors.border};
     border-radius: 8px;
     padding: 10px 14px;
@@ -29062,17 +29432,17 @@ function setupComparisonChartTooltip(canvas, container, chartData, state, colors
     if (point) {
       const date = new Date(point.x);
       let dateStr;
-      if (state.granularity === "hour") {
-        dateStr = date.toLocaleDateString(state.locale, {
+      if (state2.granularity === "hour") {
+        dateStr = date.toLocaleDateString(state2.locale, {
           day: "2-digit",
           month: "2-digit",
           year: "numeric"
-        }) + " " + date.toLocaleTimeString(state.locale, {
+        }) + " " + date.toLocaleTimeString(state2.locale, {
           hour: "2-digit",
           minute: "2-digit"
         });
       } else {
-        dateStr = date.toLocaleDateString(state.locale, {
+        dateStr = date.toLocaleDateString(state2.locale, {
           day: "2-digit",
           month: "2-digit",
           year: "numeric"
@@ -29114,7 +29484,7 @@ function setupComparisonChartTooltip(canvas, container, chartData, state, colors
     canvas.style.cursor = "default";
   });
 }
-async function setupEventListeners2(container, state, modalId, onClose) {
+async function setupEventListeners2(container, state2, modalId, onClose) {
   const closeModal = () => {
     container.remove();
     onClose?.();
@@ -29125,19 +29495,19 @@ async function setupEventListeners2(container, state, modalId, onClose) {
   document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
   document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
   const dateRangeInput = document.getElementById(`${modalId}-date-range`);
-  if (dateRangeInput && !state.dateRangePicker) {
+  if (dateRangeInput && !state2.dateRangePicker) {
     try {
-      state.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
-        presetStart: new Date(state.startTs).toISOString(),
-        presetEnd: new Date(state.endTs).toISOString(),
+      state2.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+        presetStart: new Date(state2.startTs).toISOString(),
+        presetEnd: new Date(state2.endTs).toISOString(),
         includeTime: true,
         timePrecision: "minute",
         maxRangeDays: 90,
-        locale: state.locale,
+        locale: state2.locale,
         parentEl: container.querySelector(".myio-temp-comparison-content"),
         onApply: (result) => {
-          state.startTs = new Date(result.startISO).getTime();
-          state.endTs = new Date(result.endISO).getTime();
+          state2.startTs = new Date(result.startISO).getTime();
+          state2.endTs = new Date(result.endISO).getTime();
           console.log("[TemperatureComparisonModal] Date range applied:", result);
         }
       });
@@ -29146,23 +29516,23 @@ async function setupEventListeners2(container, state, modalId, onClose) {
     }
   }
   document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
-    state.theme = state.theme === "dark" ? "light" : "dark";
-    localStorage.setItem("myio-temp-comparison-theme", state.theme);
-    state.dateRangePicker = null;
-    renderModal2(container, state, modalId);
-    if (state.deviceData.some((dd) => dd.data.length > 0)) {
-      drawComparisonChart(modalId, state);
-    }
-    await setupEventListeners2(container, state, modalId, onClose);
+    state2.theme = state2.theme === "dark" ? "light" : "dark";
+    localStorage.setItem("myio-temp-comparison-theme", state2.theme);
+    state2.dateRangePicker = null;
+    renderModal2(container, state2, modalId);
+    if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state2);
+    }
+    await setupEventListeners2(container, state2, modalId, onClose);
   });
   document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
     container.__isMaximized = !container.__isMaximized;
-    state.dateRangePicker = null;
-    renderModal2(container, state, modalId);
-    if (state.deviceData.some((dd) => dd.data.length > 0)) {
-      drawComparisonChart(modalId, state);
+    state2.dateRangePicker = null;
+    renderModal2(container, state2, modalId);
+    if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state2);
     }
-    await setupEventListeners2(container, state, modalId, onClose);
+    await setupEventListeners2(container, state2, modalId, onClose);
   });
   const periodBtn = document.getElementById(`${modalId}-period-btn`);
   const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
@@ -29181,13 +29551,13 @@ async function setupEventListeners2(container, state, modalId, onClose) {
   periodCheckboxes.forEach((checkbox) => {
     checkbox.addEventListener("change", () => {
       const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
-      state.selectedPeriods = checked;
+      state2.selectedPeriods = checked;
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
       }
-      if (state.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state);
+      if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state2);
       }
     });
   });
@@ -29195,77 +29565,77 @@ async function setupEventListeners2(container, state, modalId, onClose) {
     periodCheckboxes.forEach((cb) => {
       cb.checked = true;
     });
-    state.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+    state2.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
     const btnLabel = periodBtn?.querySelector("span:first-child");
     if (btnLabel) {
-      btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
     }
-    if (state.deviceData.some((dd) => dd.data.length > 0)) {
-      drawComparisonChart(modalId, state);
+    if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state2);
     }
   });
   document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
     periodCheckboxes.forEach((cb) => {
       cb.checked = false;
     });
-    state.selectedPeriods = [];
+    state2.selectedPeriods = [];
     const btnLabel = periodBtn?.querySelector("span:first-child");
     if (btnLabel) {
-      btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
     }
-    if (state.deviceData.some((dd) => dd.data.length > 0)) {
-      drawComparisonChart(modalId, state);
+    if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state2);
     }
   });
   document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
-    state.granularity = e.target.value;
-    localStorage.setItem("myio-temp-comparison-granularity", state.granularity);
-    if (state.deviceData.some((dd) => dd.data.length > 0)) {
-      drawComparisonChart(modalId, state);
+    state2.granularity = e.target.value;
+    localStorage.setItem("myio-temp-comparison-granularity", state2.granularity);
+    if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state2);
     }
   });
   document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
-    if (state.startTs >= state.endTs) {
+    if (state2.startTs >= state2.endTs) {
       alert("Por favor, selecione um per\xEDodo v\xE1lido");
       return;
     }
-    state.isLoading = true;
-    state.dateRangePicker = null;
-    renderModal2(container, state, modalId);
-    await fetchAllDevicesData(state);
-    renderModal2(container, state, modalId);
-    drawComparisonChart(modalId, state);
-    await setupEventListeners2(container, state, modalId, onClose);
+    state2.isLoading = true;
+    state2.dateRangePicker = null;
+    renderModal2(container, state2, modalId);
+    await fetchAllDevicesData(state2);
+    renderModal2(container, state2, modalId);
+    drawComparisonChart(modalId, state2);
+    await setupEventListeners2(container, state2, modalId, onClose);
   });
   document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
-    if (state.deviceData.every((dd) => dd.data.length === 0)) return;
-    exportComparisonCSV(state);
+    if (state2.deviceData.every((dd) => dd.data.length === 0)) return;
+    exportComparisonCSV(state2);
   });
 }
-function exportComparisonCSV(state) {
-  const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale).replace(/\//g, "-");
-  const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+function exportComparisonCSV(state2) {
+  const startDateStr = new Date(state2.startTs).toLocaleDateString(state2.locale).replace(/\//g, "-");
+  const endDateStr = new Date(state2.endTs).toLocaleDateString(state2.locale).replace(/\//g, "-");
   const BOM = "\uFEFF";
   let csvContent = BOM;
   csvContent += `Compara\xE7\xE3o de Temperatura
 `;
   csvContent += `Per\xEDodo: ${startDateStr} at\xE9 ${endDateStr}
 `;
-  csvContent += `Sensores: ${state.devices.map((d) => d.label).join(", ")}
+  csvContent += `Sensores: ${state2.devices.map((d) => d.label).join(", ")}
 `;
   csvContent += "\n";
   csvContent += "Estat\xEDsticas por Sensor:\n";
   csvContent += "Sensor,M\xE9dia (\xB0C),Min (\xB0C),Max (\xB0C),Leituras\n";
-  state.deviceData.forEach((dd) => {
+  state2.deviceData.forEach((dd) => {
     csvContent += `"${dd.device.label}",${dd.stats.avg.toFixed(2)},${dd.stats.min.toFixed(2)},${dd.stats.max.toFixed(2)},${dd.stats.count}
 `;
   });
   csvContent += "\n";
   csvContent += "Dados Detalhados:\n";
   csvContent += "Data/Hora,Sensor,Temperatura (\xB0C)\n";
-  state.deviceData.forEach((dd) => {
+  state2.deviceData.forEach((dd) => {
     dd.data.forEach((item) => {
-      const date = new Date(item.ts).toLocaleString(state.locale);
+      const date = new Date(item.ts).toLocaleString(state2.locale);
       const temp = Number(item.value).toFixed(2);
       csvContent += `"${date}","${dd.device.label}",${temp}
 `;
@@ -29373,10 +29743,10 @@ async function saveCustomerAttributes(customerId, token, minTemperature, maxTemp
     throw new Error(`Failed to save attributes: ${response.status}`);
   }
 }
-function renderModal3(container, state, modalId, onClose, onSave) {
-  const colors = getColors(state.theme);
-  const minValue = state.minTemperature !== null ? state.minTemperature : "";
-  const maxValue = state.maxTemperature !== null ? state.maxTemperature : "";
+function renderModal3(container, state2, modalId, onClose, onSave) {
+  const colors = getColors(state2.theme);
+  const minValue = state2.minTemperature !== null ? state2.minTemperature : "";
+  const maxValue = state2.maxTemperature !== null ? state2.maxTemperature : "";
   container.innerHTML = `
     <style>
       @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@@ -29641,23 +30011,23 @@ function renderModal3(container, state, modalId, onClose, onSave) {
         </div>
 
         <div class="modal-body">
-          ${state.isLoading ? `
+          ${state2.isLoading ? `
             <div class="loading-overlay">
               <div class="loading-spinner"></div>
               <div>Carregando configura\xE7\xF5es...</div>
             </div>
           ` : `
-            ${state.error ? `
-              <div class="message message-error">${state.error}</div>
+            ${state2.error ? `
+              <div class="message message-error">${state2.error}</div>
             ` : ""}
 
-            ${state.successMessage ? `
-              <div class="message message-success">${state.successMessage}</div>
+            ${state2.successMessage ? `
+              <div class="message message-success">${state2.successMessage}</div>
             ` : ""}
 
             <div class="customer-info">
               <div class="customer-label">Shopping / Cliente</div>
-              <div class="customer-name">${state.customerName || "N\xE3o identificado"}</div>
+              <div class="customer-name">${state2.customerName || "N\xE3o identificado"}</div>
             </div>
 
             <div class="form-group">
@@ -29701,11 +30071,11 @@ function renderModal3(container, state, modalId, onClose, onSave) {
           `}
         </div>
 
-        ${!state.isLoading ? `
+        ${!state2.isLoading ? `
           <div class="modal-footer">
             <button class="btn btn-secondary" id="${modalId}-cancel">Cancelar</button>
-            <button class="btn btn-primary" id="${modalId}-save" ${state.isSaving ? "disabled" : ""}>
-              ${state.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
+            <button class="btn btn-primary" id="${modalId}-save" ${state2.isSaving ? "disabled" : ""}>
+              ${state2.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
             </button>
           </div>
         ` : ""}
@@ -29742,18 +30112,18 @@ function renderModal3(container, state, modalId, onClose, onSave) {
     const min = parseFloat(minInput.value);
     const max = parseFloat(maxInput.value);
     if (isNaN(min) || isNaN(max)) {
-      state.error = "Por favor, preencha ambos os valores.";
-      renderModal3(container, state, modalId, onClose, onSave);
+      state2.error = "Por favor, preencha ambos os valores.";
+      renderModal3(container, state2, modalId, onClose, onSave);
       return;
     }
     if (min >= max) {
-      state.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
-      renderModal3(container, state, modalId, onClose, onSave);
+      state2.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
+      renderModal3(container, state2, modalId, onClose, onSave);
       return;
     }
     if (min < 0 || max > 50) {
-      state.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
-      renderModal3(container, state, modalId, onClose, onSave);
+      state2.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
+      renderModal3(container, state2, modalId, onClose, onSave);
       return;
     }
     await onSave(min, max);
@@ -29761,7 +30131,7 @@ function renderModal3(container, state, modalId, onClose, onSave) {
 }
 function openTemperatureSettingsModal(params) {
   const modalId = `myio-temp-settings-${Date.now()}`;
-  const state = {
+  const state2 = {
     customerId: params.customerId,
     customerName: params.customerName || "",
     token: params.token,
@@ -29781,37 +30151,37 @@ function openTemperatureSettingsModal(params) {
     params.onClose?.();
   };
   const handleSave = async (min, max) => {
-    state.isSaving = true;
-    state.error = null;
-    state.successMessage = null;
-    renderModal3(container, state, modalId, destroy, handleSave);
+    state2.isSaving = true;
+    state2.error = null;
+    state2.successMessage = null;
+    renderModal3(container, state2, modalId, destroy, handleSave);
     try {
-      await saveCustomerAttributes(state.customerId, state.token, min, max, params.onError);
-      state.minTemperature = min;
-      state.maxTemperature = max;
-      state.isSaving = false;
-      state.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
-      renderModal3(container, state, modalId, destroy, handleSave);
+      await saveCustomerAttributes(state2.customerId, state2.token, min, max, params.onError);
+      state2.minTemperature = min;
+      state2.maxTemperature = max;
+      state2.isSaving = false;
+      state2.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
+      renderModal3(container, state2, modalId, destroy, handleSave);
       params.onSave?.({ minTemperature: min, maxTemperature: max });
       setTimeout(() => {
         destroy();
       }, 1500);
     } catch (error) {
-      state.isSaving = false;
-      state.error = `Erro ao salvar: ${error.message}`;
-      renderModal3(container, state, modalId, destroy, handleSave);
+      state2.isSaving = false;
+      state2.error = `Erro ao salvar: ${error.message}`;
+      renderModal3(container, state2, modalId, destroy, handleSave);
     }
   };
-  renderModal3(container, state, modalId, destroy, handleSave);
-  fetchCustomerAttributes(state.customerId, state.token, params.onError).then(({ minTemperature, maxTemperature }) => {
-    state.minTemperature = minTemperature;
-    state.maxTemperature = maxTemperature;
-    state.isLoading = false;
-    renderModal3(container, state, modalId, destroy, handleSave);
+  renderModal3(container, state2, modalId, destroy, handleSave);
+  fetchCustomerAttributes(state2.customerId, state2.token, params.onError).then(({ minTemperature, maxTemperature }) => {
+    state2.minTemperature = minTemperature;
+    state2.maxTemperature = maxTemperature;
+    state2.isLoading = false;
+    renderModal3(container, state2, modalId, destroy, handleSave);
   }).catch((error) => {
-    state.isLoading = false;
-    state.error = `Erro ao carregar: ${error.message}`;
-    renderModal3(container, state, modalId, destroy, handleSave);
+    state2.isLoading = false;
+    state2.error = `Erro ao carregar: ${error.message}`;
+    renderModal3(container, state2, modalId, destroy, handleSave);
   });
   return { destroy };
 }
@@ -29847,11 +30217,13 @@ var ENERGY_SUMMARY_TOOLTIP_CSS = `
   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);
+  min-width: 380px;
   width: max-content;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
   color: #1e293b;
+  overflow: hidden;
 }
 
 .energy-summary-tooltip__header {
@@ -30157,8 +30529,7 @@ var ENERGY_SUMMARY_TOOLTIP_CSS = `
   align-items: center;
   padding: 10px 14px;
   background: linear-gradient(135deg, #047857 0%, #059669 100%);
-  margin: 12px -14px -14px;
-  border-radius: 0 0 12px 12px;
+  border-radius: 0 0 11px 11px;
 }
 
 .energy-summary-tooltip__total-label {
@@ -30301,7 +30672,7 @@ var EnergySummaryTooltip = {
       { key: "failure", label: "Falha", count: status.failure },
       { key: "standby", label: "Standby", count: status.standby },
       { key: "offline", label: "Offline", count: status.offline },
-      { key: "no-consumption", label: "Sem Dados", count: status.noConsumption }
+      { key: "no-consumption", label: "Sem Consumo", count: status.noConsumption }
     ];
     return items.map((item) => `
       <div class="energy-summary-tooltip__status-item ${item.key}">
@@ -30746,7 +31117,7 @@ var EnergySummaryTooltip = {
    * Build summary data from TELEMETRY_INFO STATE
    * This is called by the widget controller to get data for the tooltip
    */
-  buildSummaryFromState(state, receivedData) {
+  buildSummaryFromState(state2, receivedData) {
     const summary = {
       totalDevices: 0,
       totalConsumption: 0,
@@ -30762,22 +31133,22 @@ var EnergySummaryTooltip = {
       },
       lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
     };
-    if (!state) return summary;
+    if (!state2) return summary;
     const entrada = {
       id: "entrada",
       name: "Entrada",
       icon: CATEGORY_ICONS.entrada,
-      deviceCount: state.entrada?.devices?.length || (receivedData?.entrada_total?.device_count || 0),
-      consumption: state.entrada?.total || 0,
+      deviceCount: state2.entrada?.devices?.length || (receivedData?.entrada_total?.device_count || 0),
+      consumption: state2.entrada?.total || 0,
       percentage: 100
     };
     const lojas = {
       id: "lojas",
       name: "Lojas",
       icon: CATEGORY_ICONS.lojas,
-      deviceCount: state.consumidores?.lojas?.devices?.length || (receivedData?.lojas_total?.device_count || 0),
-      consumption: state.consumidores?.lojas?.total || 0,
-      percentage: state.consumidores?.lojas?.perc || 0
+      deviceCount: state2.consumidores?.lojas?.devices?.length || (receivedData?.lojas_total?.device_count || 0),
+      consumption: state2.consumidores?.lojas?.total || 0,
+      percentage: state2.consumidores?.lojas?.perc || 0
     };
     const climatizacaoData = receivedData?.climatizacao || {};
     const elevadoresData = receivedData?.elevadores || {};
@@ -30788,9 +31159,9 @@ var EnergySummaryTooltip = {
       id: "climatizacao",
       name: "Climatizacao",
       icon: CATEGORY_ICONS.climatizacao,
-      deviceCount: climatizacaoData.count || state.consumidores?.climatizacao?.devices?.length || 0,
-      consumption: state.consumidores?.climatizacao?.total || 0,
-      percentage: state.consumidores?.climatizacao?.perc || 0
+      deviceCount: climatizacaoData.count || state2.consumidores?.climatizacao?.devices?.length || 0,
+      consumption: state2.consumidores?.climatizacao?.total || 0,
+      percentage: state2.consumidores?.climatizacao?.perc || 0
     };
     if (climatizacaoData.subcategories) {
       climatizacao.children = [];
@@ -30841,54 +31212,67 @@ var EnergySummaryTooltip = {
       id: "elevadores",
       name: "Elevadores",
       icon: CATEGORY_ICONS.elevadores,
-      deviceCount: elevadoresData.count || state.consumidores?.elevadores?.devices?.length || 0,
-      consumption: state.consumidores?.elevadores?.total || 0,
-      percentage: state.consumidores?.elevadores?.perc || 0
+      deviceCount: elevadoresData.count || state2.consumidores?.elevadores?.devices?.length || 0,
+      consumption: state2.consumidores?.elevadores?.total || 0,
+      percentage: state2.consumidores?.elevadores?.perc || 0
     });
     areaComumChildren.push({
       id: "escadasRolantes",
       name: "Esc. Rolantes",
       icon: CATEGORY_ICONS.escadas,
-      deviceCount: escadasData.count || state.consumidores?.escadasRolantes?.devices?.length || 0,
-      consumption: state.consumidores?.escadasRolantes?.total || 0,
-      percentage: state.consumidores?.escadasRolantes?.perc || 0
+      deviceCount: escadasData.count || state2.consumidores?.escadasRolantes?.devices?.length || 0,
+      consumption: state2.consumidores?.escadasRolantes?.total || 0,
+      percentage: state2.consumidores?.escadasRolantes?.perc || 0
     });
     areaComumChildren.push({
       id: "outros",
       name: "Outros",
       icon: CATEGORY_ICONS.outros,
-      deviceCount: outrosData.count || state.consumidores?.outros?.devices?.length || 0,
-      consumption: state.consumidores?.outros?.total || 0,
-      percentage: state.consumidores?.outros?.perc || 0
+      deviceCount: outrosData.count || state2.consumidores?.outros?.devices?.length || 0,
+      consumption: state2.consumidores?.outros?.total || 0,
+      percentage: state2.consumidores?.outros?.perc || 0
     });
     const areaComumDeviceCount = areaComumChildren.reduce((sum, c) => sum + c.deviceCount, 0);
-    const areaComumConsumption = state.consumidores?.areaComum?.total || areaComumChildren.reduce((sum, c) => sum + c.consumption, 0);
+    const areaComumConsumption = state2.consumidores?.areaComum?.total || areaComumChildren.reduce((sum, c) => sum + c.consumption, 0);
     const areaComum = {
       id: "areaComum",
       name: "Area Comum",
       icon: CATEGORY_ICONS.areaComum,
       deviceCount: areaComumDeviceCount,
       consumption: areaComumConsumption,
-      percentage: state.consumidores?.areaComum?.perc || 0,
+      percentage: state2.consumidores?.areaComum?.perc || 0,
       children: areaComumChildren
     };
     summary.byCategory = [entrada, lojas, areaComum];
     summary.totalDevices = entrada.deviceCount + lojas.deviceCount + areaComumDeviceCount;
-    summary.totalConsumption = state.grandTotal || entrada.consumption;
+    summary.totalConsumption = state2.grandTotal || entrada.consumption;
     const totalDevices = summary.totalDevices;
-    summary.byStatus = {
-      normal: Math.floor(totalDevices * 0.85),
-      // Estimate 85% normal
-      alert: Math.floor(totalDevices * 0.08),
-      // Estimate 8% alert
-      failure: Math.floor(totalDevices * 0.02),
-      // Estimate 2% failure
-      standby: Math.floor(totalDevices * 0.03),
-      // Estimate 3% standby
-      offline: Math.floor(totalDevices * 0.02),
-      // Estimate 2% offline
-      noConsumption: 0
-    };
+    const statusData = receivedData?.statusCounts || receivedData?.deviceStatus || null;
+    if (statusData && typeof statusData === "object") {
+      summary.byStatus = {
+        normal: statusData.normal || 0,
+        alert: statusData.alert || 0,
+        failure: statusData.failure || 0,
+        standby: statusData.standby || 0,
+        offline: statusData.offline || 0,
+        noConsumption: statusData.noConsumption || statusData.zeroConsumption || 0
+      };
+    } else {
+      summary.byStatus = {
+        normal: Math.floor(totalDevices * 0.75),
+        // Estimate 75% normal (with consumption)
+        alert: Math.floor(totalDevices * 0.06),
+        // Estimate 6% alert
+        failure: Math.floor(totalDevices * 0.02),
+        // Estimate 2% failure
+        standby: Math.floor(totalDevices * 0.02),
+        // Estimate 2% standby
+        offline: Math.floor(totalDevices * 0.03),
+        // Estimate 3% offline
+        noConsumption: Math.floor(totalDevices * 0.12)
+        // Estimate 12% sem consumo
+      };
+    }
     const statusSum = Object.values(summary.byStatus).reduce((a, b) => a + b, 0);
     if (statusSum !== totalDevices && totalDevices > 0) {
       summary.byStatus.normal += totalDevices - statusSum;
@@ -30897,6 +31281,654 @@ var EnergySummaryTooltip = {
   }
 };
 
+// src/utils/InfoTooltip.ts
+var INFO_TOOLTIP_CSS = `
+/* ============================================
+   Info Tooltip (RFC-0105)
+   Premium draggable tooltip with actions
+   ============================================ */
+
+.myio-info-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  transform: translateY(5px);
+}
+
+.myio-info-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.myio-info-tooltip.closing {
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.myio-info-tooltip.pinned {
+  box-shadow: 0 0 0 2px #047857, 0 10px 40px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+}
+
+.myio-info-tooltip.dragging {
+  transition: none !important;
+  cursor: move;
+}
+
+.myio-info-tooltip.maximized {
+  top: 20px !important;
+  left: 20px !important;
+  right: 20px !important;
+  bottom: 20px !important;
+  width: auto !important;
+  max-width: none !important;
+}
+
+.myio-info-tooltip.maximized .myio-info-tooltip__panel {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.myio-info-tooltip.maximized .myio-info-tooltip__content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.myio-info-tooltip__panel {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 320px;
+  max-width: 400px;
+  font-size: 12px;
+  color: #1e293b;
+  overflow: hidden;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+}
+
+.myio-info-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
+  border-bottom: 1px solid #cbd5e1;
+  cursor: move;
+  user-select: none;
+}
+
+.myio-info-tooltip__icon {
+  font-size: 18px;
+}
+
+.myio-info-tooltip__title {
+  font-weight: 700;
+  font-size: 14px;
+  color: #475569;
+  letter-spacing: 0.3px;
+  flex: 1;
+}
+
+.myio-info-tooltip__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.myio-info-tooltip__header-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  color: #64748b;
+}
+
+.myio-info-tooltip__header-btn:hover {
+  background: rgba(255, 255, 255, 0.9);
+  color: #1e293b;
+}
+
+.myio-info-tooltip__header-btn.pinned {
+  background: #047857;
+  color: white;
+}
+
+.myio-info-tooltip__header-btn.pinned:hover {
+  background: #065f46;
+  color: white;
+}
+
+.myio-info-tooltip__header-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.myio-info-tooltip__content {
+  padding: 16px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+/* Content styles */
+.myio-info-tooltip__section {
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.myio-info-tooltip__section:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.myio-info-tooltip__section-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.myio-info-tooltip__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 0;
+  gap: 12px;
+}
+
+.myio-info-tooltip__label {
+  color: #64748b;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.myio-info-tooltip__value {
+  color: #1e293b;
+  font-weight: 600;
+  text-align: right;
+}
+
+.myio-info-tooltip__value--highlight {
+  color: #10b981;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.myio-info-tooltip__notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  margin-top: 12px;
+}
+
+.myio-info-tooltip__notice-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.myio-info-tooltip__notice-text {
+  font-size: 11px;
+  color: #475569;
+  line-height: 1.5;
+}
+
+.myio-info-tooltip__notice-text strong {
+  font-weight: 700;
+  color: #334155;
+}
+
+.myio-info-tooltip__category {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+  margin-bottom: 6px;
+  border-left: 3px solid #94a3b8;
+}
+
+.myio-info-tooltip__category:last-child {
+  margin-bottom: 0;
+}
+
+.myio-info-tooltip__category--climatizacao {
+  border-left-color: #00C896;
+  background: #ecfdf5;
+}
+
+.myio-info-tooltip__category--outros {
+  border-left-color: #9C27B0;
+  background: #fdf4ff;
+}
+
+.myio-info-tooltip__category-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.myio-info-tooltip__category-info {
+  flex: 1;
+}
+
+.myio-info-tooltip__category-name {
+  font-weight: 600;
+  color: #334155;
+  font-size: 12px;
+}
+
+.myio-info-tooltip__category-desc {
+  font-size: 10px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.myio-info-tooltip__category-value {
+  font-weight: 700;
+  color: #334155;
+  font-size: 13px;
+}
+`;
+var cssInjected4 = false;
+function injectCSS4() {
+  if (cssInjected4) return;
+  if (typeof document === "undefined") return;
+  const styleId = "myio-info-tooltip-styles";
+  if (document.getElementById(styleId)) {
+    cssInjected4 = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = INFO_TOOLTIP_CSS;
+  document.head.appendChild(style);
+  cssInjected4 = true;
+}
+var state = {
+  hideTimer: null,
+  isMouseOverTooltip: false,
+  isMaximized: false,
+  isDragging: false,
+  dragOffset: { x: 0, y: 0 },
+  savedPosition: null,
+  pinnedCounter: 0
+};
+function generateHeaderHTML(icon, title) {
+  return `
+    <div class="myio-info-tooltip__header" data-drag-handle>
+      <span class="myio-info-tooltip__icon">${icon}</span>
+      <span class="myio-info-tooltip__title">${title}</span>
+      <div class="myio-info-tooltip__header-actions">
+        <button class="myio-info-tooltip__header-btn" data-action="pin" title="Fixar na tela">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 4v6l-2 4v2h10v-2l-2-4V4"/>
+            <line x1="12" y1="16" x2="12" y2="21"/>
+            <line x1="8" y1="4" x2="16" y2="4"/>
+          </svg>
+        </button>
+        <button class="myio-info-tooltip__header-btn" data-action="maximize" title="Maximizar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+          </svg>
+        </button>
+        <button class="myio-info-tooltip__header-btn" data-action="close" title="Fechar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `;
+}
+function setupHoverListeners(container) {
+  container.onmouseenter = () => {
+    state.isMouseOverTooltip = true;
+    if (state.hideTimer) {
+      clearTimeout(state.hideTimer);
+      state.hideTimer = null;
+    }
+  };
+  container.onmouseleave = () => {
+    state.isMouseOverTooltip = false;
+    startDelayedHide();
+  };
+}
+function setupButtonListeners(container) {
+  const buttons = container.querySelectorAll("[data-action]");
+  buttons.forEach((btn) => {
+    btn.onclick = (e) => {
+      e.stopPropagation();
+      const action = btn.dataset.action;
+      switch (action) {
+        case "pin":
+          createPinnedClone(container);
+          break;
+        case "maximize":
+          toggleMaximize(container);
+          break;
+        case "close":
+          InfoTooltip.close();
+          break;
+      }
+    };
+  });
+}
+function setupDragListeners(container) {
+  const header = container.querySelector("[data-drag-handle]");
+  if (!header) return;
+  header.onmousedown = (e) => {
+    if (e.target.closest("[data-action]")) return;
+    if (state.isMaximized) return;
+    state.isDragging = true;
+    container.classList.add("dragging");
+    const rect = container.getBoundingClientRect();
+    state.dragOffset = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+    const onMouseMove = (e2) => {
+      if (!state.isDragging) return;
+      const newLeft = e2.clientX - state.dragOffset.x;
+      const newTop = e2.clientY - state.dragOffset.y;
+      const maxLeft = window.innerWidth - container.offsetWidth;
+      const maxTop = window.innerHeight - container.offsetHeight;
+      container.style.left = Math.max(0, Math.min(newLeft, maxLeft)) + "px";
+      container.style.top = Math.max(0, Math.min(newTop, maxTop)) + "px";
+    };
+    const onMouseUp = () => {
+      state.isDragging = false;
+      container.classList.remove("dragging");
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+}
+function createPinnedClone(container) {
+  state.pinnedCounter++;
+  const pinnedId = `myio-info-tooltip-pinned-${state.pinnedCounter}`;
+  const clone = container.cloneNode(true);
+  clone.id = pinnedId;
+  clone.classList.add("pinned");
+  clone.classList.remove("closing");
+  const pinBtn = clone.querySelector('[data-action="pin"]');
+  if (pinBtn) {
+    pinBtn.classList.add("pinned");
+    pinBtn.setAttribute("title", "Desafixar");
+    pinBtn.innerHTML = `
+      <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
+        <path d="M9 4v6l-2 4v2h10v-2l-2-4V4"/>
+        <line x1="12" y1="16" x2="12" y2="21"/>
+        <line x1="8" y1="4" x2="16" y2="4"/>
+      </svg>
+    `;
+  }
+  document.body.appendChild(clone);
+  setupPinnedCloneListeners(clone, pinnedId);
+  InfoTooltip.hide();
+}
+function setupPinnedCloneListeners(clone, cloneId) {
+  let isMaximized = false;
+  let savedPosition = null;
+  const pinBtn = clone.querySelector('[data-action="pin"]');
+  if (pinBtn) {
+    pinBtn.onclick = (e) => {
+      e.stopPropagation();
+      closePinnedClone(cloneId);
+    };
+  }
+  const closeBtn = clone.querySelector('[data-action="close"]');
+  if (closeBtn) {
+    closeBtn.onclick = (e) => {
+      e.stopPropagation();
+      closePinnedClone(cloneId);
+    };
+  }
+  const maxBtn = clone.querySelector('[data-action="maximize"]');
+  if (maxBtn) {
+    maxBtn.onclick = (e) => {
+      e.stopPropagation();
+      isMaximized = !isMaximized;
+      if (isMaximized) {
+        savedPosition = { left: clone.style.left, top: clone.style.top };
+        maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="14" height="14" rx="2"/><path d="M9 5V3h12v12h-2"/></svg>`;
+        maxBtn.setAttribute("title", "Restaurar");
+      } else {
+        maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`;
+        maxBtn.setAttribute("title", "Maximizar");
+        if (savedPosition) {
+          clone.style.left = savedPosition.left;
+          clone.style.top = savedPosition.top;
+        }
+      }
+      clone.classList.toggle("maximized", isMaximized);
+    };
+  }
+  const header = clone.querySelector("[data-drag-handle]");
+  if (header) {
+    let isDragging = false;
+    let dragOffset = { x: 0, y: 0 };
+    header.onmousedown = (e) => {
+      if (e.target.closest("[data-action]")) return;
+      if (isMaximized) return;
+      isDragging = true;
+      clone.classList.add("dragging");
+      const rect = clone.getBoundingClientRect();
+      dragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      const onMouseMove = (e2) => {
+        if (!isDragging) return;
+        const newLeft = e2.clientX - dragOffset.x;
+        const newTop = e2.clientY - dragOffset.y;
+        const maxLeft = window.innerWidth - clone.offsetWidth;
+        const maxTop = window.innerHeight - clone.offsetHeight;
+        clone.style.left = Math.max(0, Math.min(newLeft, maxLeft)) + "px";
+        clone.style.top = Math.max(0, Math.min(newTop, maxTop)) + "px";
+      };
+      const onMouseUp = () => {
+        isDragging = false;
+        clone.classList.remove("dragging");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+  }
+}
+function closePinnedClone(cloneId) {
+  const clone = document.getElementById(cloneId);
+  if (clone) {
+    clone.classList.add("closing");
+    setTimeout(() => clone.remove(), 400);
+  }
+}
+function toggleMaximize(container) {
+  state.isMaximized = !state.isMaximized;
+  if (state.isMaximized) {
+    state.savedPosition = {
+      left: container.style.left,
+      top: container.style.top
+    };
+  }
+  container.classList.toggle("maximized", state.isMaximized);
+  const maxBtn = container.querySelector('[data-action="maximize"]');
+  if (maxBtn) {
+    if (state.isMaximized) {
+      maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="14" height="14" rx="2"/><path d="M9 5V3h12v12h-2"/></svg>`;
+      maxBtn.setAttribute("title", "Restaurar");
+    } else {
+      maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`;
+      maxBtn.setAttribute("title", "Maximizar");
+      if (state.savedPosition) {
+        container.style.left = state.savedPosition.left;
+        container.style.top = state.savedPosition.top;
+      }
+    }
+  }
+}
+function startDelayedHide() {
+  if (state.isMouseOverTooltip) return;
+  if (state.hideTimer) {
+    clearTimeout(state.hideTimer);
+  }
+  state.hideTimer = setTimeout(() => {
+    hideWithAnimation();
+  }, 1500);
+}
+function hideWithAnimation() {
+  const container = document.getElementById("myio-info-tooltip");
+  if (container && container.classList.contains("visible")) {
+    container.classList.add("closing");
+    setTimeout(() => {
+      container.classList.remove("visible", "closing");
+    }, 400);
+  }
+}
+function positionTooltip(container, triggerElement) {
+  const rect = triggerElement.getBoundingClientRect();
+  let left = rect.left;
+  let top = rect.bottom + 8;
+  const tooltipWidth = 380;
+  if (left + tooltipWidth > window.innerWidth - 20) {
+    left = window.innerWidth - tooltipWidth - 20;
+  }
+  if (left < 10) left = 10;
+  if (top + 400 > window.innerHeight) {
+    top = rect.top - 8 - 400;
+    if (top < 10) top = 10;
+  }
+  container.style.left = left + "px";
+  container.style.top = top + "px";
+}
+var InfoTooltip = {
+  containerId: "myio-info-tooltip",
+  /**
+   * Get or create container
+   */
+  getContainer() {
+    injectCSS4();
+    let container = document.getElementById(this.containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = this.containerId;
+      container.className = "myio-info-tooltip";
+      document.body.appendChild(container);
+    }
+    return container;
+  },
+  /**
+   * Show tooltip
+   */
+  show(triggerElement, options) {
+    if (state.hideTimer) {
+      clearTimeout(state.hideTimer);
+      state.hideTimer = null;
+    }
+    const container = this.getContainer();
+    container.classList.remove("closing");
+    container.innerHTML = `
+      <div class="myio-info-tooltip__panel">
+        ${generateHeaderHTML(options.icon, options.title)}
+        <div class="myio-info-tooltip__content">
+          ${options.content}
+        </div>
+      </div>
+    `;
+    positionTooltip(container, triggerElement);
+    container.classList.add("visible");
+    setupHoverListeners(container);
+    setupButtonListeners(container);
+    setupDragListeners(container);
+  },
+  /**
+   * Start delayed hide
+   */
+  startDelayedHide() {
+    startDelayedHide();
+  },
+  /**
+   * Hide immediately
+   */
+  hide() {
+    if (state.hideTimer) {
+      clearTimeout(state.hideTimer);
+      state.hideTimer = null;
+    }
+    state.isMouseOverTooltip = false;
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.classList.remove("visible", "closing");
+    }
+  },
+  /**
+   * Close and reset all states
+   */
+  close() {
+    state.isMaximized = false;
+    state.isDragging = false;
+    state.savedPosition = null;
+    if (state.hideTimer) {
+      clearTimeout(state.hideTimer);
+      state.hideTimer = null;
+    }
+    state.isMouseOverTooltip = false;
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.classList.remove("visible", "pinned", "maximized", "dragging", "closing");
+    }
+  },
+  /**
+   * Attach tooltip to trigger element with hover behavior
+   */
+  attach(triggerElement, getOptions) {
+    const self = this;
+    const handleMouseEnter = () => {
+      if (state.hideTimer) {
+        clearTimeout(state.hideTimer);
+        state.hideTimer = null;
+      }
+      const options = getOptions();
+      self.show(triggerElement, options);
+    };
+    const handleMouseLeave = () => {
+      startDelayedHide();
+    };
+    triggerElement.addEventListener("mouseenter", handleMouseEnter);
+    triggerElement.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      triggerElement.removeEventListener("mouseenter", handleMouseEnter);
+      triggerElement.removeEventListener("mouseleave", handleMouseLeave);
+      self.hide();
+    };
+  }
+};
+
 // src/components/ModalHeader/index.ts
 var DEFAULT_BG_COLOR = "#3e1a7d";
 var DEFAULT_TEXT_COLOR = "white";
@@ -34676,6 +35708,7 @@ function createDistributionChartWidget(config) {
   IMPORTANCE_COLORS,
   IMPORTANCE_LABELS,
   IMPORTANCE_LABELS_EN,
+  InfoTooltip,
   MyIOChartModal,
   MyIODraggableCard,
   MyIOSelectionStore,