myio-js-library 0.1.160 → 0.1.162

package/dist/index.cjs

@@ -569,9 +569,16 @@ var init_template_card = __esm({
 var index_exports = {};
 __export(index_exports, {
   CHART_COLORS: () => CHART_COLORS,
+  CONSUMPTION_CHART_COLORS: () => DEFAULT_COLORS,
+  CONSUMPTION_CHART_DEFAULTS: () => DEFAULT_CONFIG,
+  CONSUMPTION_THEME_COLORS: () => THEME_COLORS,
   ConnectionStatusType: () => ConnectionStatusType,
   DEFAULT_CLAMP_RANGE: () => DEFAULT_CLAMP_RANGE,
   DeviceStatusType: () => DeviceStatusType,
+  EXPORT_DEFAULT_COLORS: () => EXPORT_DEFAULT_COLORS,
+  EXPORT_DOMAIN_ICONS: () => EXPORT_DOMAIN_ICONS,
+  EXPORT_DOMAIN_LABELS: () => EXPORT_DOMAIN_LABELS,
+  EXPORT_DOMAIN_UNITS: () => EXPORT_DOMAIN_UNITS,
   MyIOChartModal: () => MyIOChartModal,
   MyIODraggableCard: () => MyIODraggableCard,
   MyIOSelectionStore: () => MyIOSelectionStore,
@@ -583,11 +590,13 @@ __export(index_exports, {
   averageByDay: () => averageByDay,
   buildListItemsThingsboardByUniqueDatasource: () => buildListItemsThingsboardByUniqueDatasource,
   buildMyioIngestionAuth: () => buildMyioIngestionAuth,
+  buildTemplateExport: () => buildTemplateExport,
   buildWaterReportCSV: () => buildWaterReportCSV,
   buildWaterStoresCSV: () => buildWaterStoresCSV,
   calcDeltaPercent: () => calcDeltaPercent,
   calculateDeviceStatus: () => calculateDeviceStatus,
   calculateDeviceStatusWithRanges: () => calculateDeviceStatusWithRanges,
+  calculateExportStats: () => calculateStats2,
   calculateStats: () => calculateStats,
   clampTemperature: () => clampTemperature,
   classify: () => classify,
@@ -595,8 +604,11 @@ __export(index_exports, {
   classifyWaterLabels: () => classifyWaterLabels,
   clearAllAuthCaches: () => clearAllAuthCaches,
   connectionStatusIcons: () => connectionStatusIcons,
+  createConsumption7DaysChart: () => createConsumption7DaysChart,
+  createConsumptionModal: () => createConsumptionModal,
   createDateRangePicker: () => createDateRangePicker2,
   createInputDateRangePickerInsideDIV: () => createInputDateRangePickerInsideDIV,
+  createModalHeader: () => createModalHeader,
   decodePayload: () => decodePayload,
   decodePayloadBase64Xor: () => decodePayloadBase64Xor,
   detectDeviceType: () => detectDeviceType,
@@ -610,6 +622,7 @@ __export(index_exports, {
   fetchThingsboardCustomerAttrsFromStorage: () => fetchThingsboardCustomerAttrsFromStorage,
   fetchThingsboardCustomerServerScopeAttrs: () => fetchThingsboardCustomerServerScopeAttrs,
   findValue: () => findValue,
+  findValueWithDefault: () => findValueWithDefault,
   fmtPerc: () => fmtPerc,
   fmtPercLegacy: () => fmtPerc2,
   formatAllInSameUnit: () => formatAllInSameUnit,
@@ -617,18 +630,24 @@ __export(index_exports, {
   formatDateForInput: () => formatDateForInput,
   formatDateToYMD: () => formatDateToYMD,
   formatDateWithTimezoneOffset: () => formatDateWithTimezoneOffset,
+  formatDuration: () => formatDuration,
   formatEnergy: () => formatEnergy,
   formatNumberReadable: () => formatNumberReadable,
+  formatRelativeTime: () => formatRelativeTime,
   formatTankHeadFromCm: () => formatTankHeadFromCm,
   formatTemperature: () => formatTemperature2,
+  formatWater: () => formatWater,
   formatWaterByGroup: () => formatWaterByGroup,
   formatWaterVolumeM3: () => formatWaterVolumeM3,
+  formatarDuracao: () => formatarDuracao,
+  generateExportFilename: () => generateFilename,
   getAuthCacheStats: () => getAuthCacheStats,
   getAvailableContexts: () => getAvailableContexts,
   getConnectionStatusIcon: () => getConnectionStatusIcon,
   getDateRangeArray: () => getDateRangeArray,
   getDeviceStatusIcon: () => getDeviceStatusIcon,
   getDeviceStatusInfo: () => getDeviceStatusInfo,
+  getModalHeaderStyles: () => getModalHeaderStyles,
   getSaoPauloISOString: () => getSaoPauloISOString,
   getSaoPauloISOStringFixed: () => getSaoPauloISOStringFixed,
   getValueByDatakey: () => getValueByDatakey,
@@ -640,8 +659,10 @@ __export(index_exports, {
   isValidConnectionStatus: () => isValidConnectionStatus,
   isValidDeviceStatus: () => isValidDeviceStatus,
   isWaterCategory: () => isWaterCategory,
+  mapConnectionStatus: () => mapConnectionStatus,
   mapDeviceStatusToCardStatus: () => mapDeviceStatusToCardStatus,
   mapDeviceToConnectionStatus: () => mapDeviceToConnectionStatus,
+  myioExportData: () => myioExportData,
   normalizeRecipients: () => normalizeRecipients,
   numbers: () => numbers_exports,
   openDashboardPopup: () => openDashboardPopup,
@@ -752,6 +773,10 @@ function formatNumberReadable(value, locale = "pt-BR", minimumFractionDigits = 2
 }
 
 // src/format/water.ts
+function formatWater(value) {
+  const num = Number(value) || 0;
+  return `${num.toFixed(2)} m\xB3`;
+}
 function formatWaterVolumeM3(value, locale = "pt-BR") {
   if (value === null || value === void 0 || isNaN(value)) {
     return "-";
@@ -829,6 +854,76 @@ function formatAllInSameWaterUnit(values) {
   };
 }
 
+// src/format/time.ts
+function formatRelativeTime(timestamp) {
+  if (!timestamp || timestamp <= 0) {
+    return "\u2014";
+  }
+  const now = Date.now();
+  const diffSeconds = Math.round((now - timestamp) / 1e3);
+  if (diffSeconds < 10) {
+    return "agora";
+  }
+  if (diffSeconds < 60) {
+    return `h\xE1 ${diffSeconds}s`;
+  }
+  const diffMinutes = Math.round(diffSeconds / 60);
+  if (diffMinutes === 1) {
+    return "h\xE1 1 min";
+  }
+  if (diffMinutes < 60) {
+    return `h\xE1 ${diffMinutes} mins`;
+  }
+  const diffHours = Math.round(diffMinutes / 60);
+  if (diffHours === 1) {
+    return "h\xE1 1 hora";
+  }
+  if (diffHours < 24) {
+    return `h\xE1 ${diffHours} horas`;
+  }
+  const diffDays = Math.round(diffHours / 24);
+  if (diffDays === 1) {
+    return "ontem";
+  }
+  if (diffDays <= 30) {
+    return `h\xE1 ${diffDays} dias`;
+  }
+  return new Date(timestamp).toLocaleDateString("pt-BR");
+}
+function formatarDuracao(ms) {
+  if (typeof ms !== "number" || ms < 0 || !isFinite(ms)) {
+    return "0s";
+  }
+  if (ms === 0) {
+    return "0s";
+  }
+  const segundos = Math.floor(ms / 1e3 % 60);
+  const minutos = Math.floor(ms / (1e3 * 60) % 60);
+  const horas = Math.floor(ms / (1e3 * 60 * 60) % 24);
+  const dias = Math.floor(ms / (1e3 * 60 * 60 * 24));
+  const parts = [];
+  if (dias > 0) {
+    parts.push(`${dias}d`);
+    if (horas > 0) {
+      parts.push(`${horas}h`);
+    }
+  } else if (horas > 0) {
+    parts.push(`${horas}h`);
+    if (minutos > 0) {
+      parts.push(`${minutos}m`);
+    }
+  } else if (minutos > 0) {
+    parts.push(`${minutos}m`);
+    if (segundos > 0) {
+      parts.push(`${segundos}s`);
+    }
+  } else {
+    parts.push(`${segundos}s`);
+  }
+  return parts.length > 0 ? parts.join(" ") : "0s";
+}
+var formatDuration = formatarDuracao;
+
 // src/date/ymd.ts
 function formatDateToYMD(date) {
   if (!date) {
@@ -1337,6 +1432,11 @@ function findValue(data, keyOrPath, legacyDataKey) {
   }
   return getValueByDatakey(data, keyOrPath);
 }
+function findValueWithDefault(values, key, defaultValue = null) {
+  if (!Array.isArray(values)) return defaultValue;
+  const found = values.find((v) => v.key === key || v.dataType === key);
+  return found ? found.value : defaultValue;
+}
 
 // src/utils/deviceStatus.js
 var DeviceStatusType = {
@@ -1393,6 +1493,16 @@ function mapDeviceToConnectionStatus(deviceStatus) {
   }
   return ConnectionStatusType.CONNECTED;
 }
+function mapConnectionStatus(rawStatus) {
+  const statusLower = String(rawStatus || "").toLowerCase().trim();
+  if (statusLower === "online" || statusLower === "ok" || statusLower === "running") {
+    return "online";
+  }
+  if (statusLower === "waiting" || statusLower === "connecting" || statusLower === "pending") {
+    return "waiting";
+  }
+  return "offline";
+}
 function mapDeviceStatusToCardStatus(deviceStatus) {
   const statusMap = {
     [DeviceStatusType.POWER_ON]: "ok",
@@ -2161,8 +2271,9 @@ var MyIOSelectionStoreClass = class _MyIOSelectionStoreClass {
       lastValue: Number(entity.lastValue) || 0,
       unit: entity.unit || "",
       status: entity.status || "unknown",
-      ingestionId: entity.ingestionId || entity.id
+      ingestionId: entity.ingestionId || entity.id,
       // ⭐ ADD: Store ingestionId for API calls
+      customerName: entity.customerName || ""
     };
     this.entities.set(entity.id, normalizedEntity);
   }
@@ -4790,6 +4901,13 @@ var Icons = {
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
   <circle cx="12" cy="12" r="5"/>
+</svg>`,
+  waterDrop: `
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="water" transform="translate(-4 -2)">
+    <path id="secondary" fill="#2ca9bc" d="M19,14A7,7,0,1,1,5,14C5,8,12,3,12,3S19,8,19,14Z"/>
+    <path id="primary" d="M19,14A7,7,0,1,1,5,14C5,8,12,3,12,3S19,8,19,14Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
 </svg>`,
   // ⋮ Kebab (for actions menu)
   kebab: `
@@ -4818,6 +4936,7 @@ var ICON_MAP = {
 var DEFAULT_I18N = {
   // Status labels with icons
   in_operation: "\u26A1 Normal",
+  in_operation_water: "\u{1F4A7} Normal",
   standby: "\u{1F4A4} Em standby",
   alert: "\u26A0\uFE0F Alerta",
   failure: "\u{1F6A8} Falha",
@@ -4874,7 +4993,13 @@ function normalizeParams(params) {
     }
   };
 }
-function getIconSvg(deviceType) {
+function getIconSvg(deviceType, domain) {
+  if (domain === "water") {
+    return Icons.waterDrop;
+  }
+  if (domain === "temperature") {
+    return Icons.thermometer;
+  }
   return ICON_MAP[deviceType] || ICON_MAP.DEFAULT;
 }
 function formatPower(valueInWatts) {
@@ -4914,9 +5039,23 @@ function calculateConsumptionPercentage(target, consumption) {
   const percentage = numericConsumption / numericTarget * 100;
   return percentage;
 }
-function getStatusInfo(deviceStatus, i18n) {
+function getStatusInfo(deviceStatus, i18n, domain) {
   switch (deviceStatus) {
+    // --- Novos Status de Temperatura ---
+    case "normal":
+      return { chipClass: "chip--ok", label: "Normal" };
+    // Verde/Azul
+    case "cold":
+      return { chipClass: "chip--standby", label: "Frio" };
+    // Azul claro/Ciano
+    case "hot":
+      return { chipClass: "chip--alert", label: "Quente" };
+    // Laranja/Amarelo
+    // --- Status Existentes ---
     case DeviceStatusType.POWER_ON:
+      if (domain === "water") {
+        return { chipClass: "chip--ok", label: i18n.in_operation_water };
+      }
       return { chipClass: "chip--ok", label: i18n.in_operation };
     case DeviceStatusType.STANDBY:
       return { chipClass: "chip--standby", label: i18n.standby };
@@ -4929,6 +5068,7 @@ function getStatusInfo(deviceStatus, i18n) {
       return { chipClass: "chip--alert", label: i18n.maintenance };
     case DeviceStatusType.NOT_INSTALLED:
       return { chipClass: "chip--offline", label: i18n.not_installed };
+    // Default (Cai aqui se não achar 'normal', 'hot' etc)
     case DeviceStatusType.NO_INFO:
     default:
       return { chipClass: "chip--offline", label: i18n.offline };
@@ -4960,6 +5100,14 @@ function getCardStateClass(deviceStatus) {
 }
 function getStatusDotClass(deviceStatus) {
   switch (deviceStatus) {
+    // --- Novos Status de Temperatura ---
+    case "normal":
+      return "dot--ok";
+    case "cold":
+      return "dot--standby";
+    case "hot":
+      return "dot--alert";
+    // --- Status Existentes ---
     case DeviceStatusType.POWER_ON:
       return "dot--ok";
     case DeviceStatusType.STANDBY:
@@ -4987,7 +5135,7 @@ function buildDOM(state) {
   header.className = "myio-ho-card__header";
   const iconContainer = document.createElement("div");
   iconContainer.className = "myio-ho-card__icon";
-  iconContainer.innerHTML = getIconSvg(entityObject.deviceType);
+  iconContainer.innerHTML = getIconSvg(entityObject.deviceType, entityObject.domain);
   header.appendChild(iconContainer);
   const titleSection = document.createElement("div");
   titleSection.className = "myio-ho-card__title";
@@ -5109,7 +5257,11 @@ function buildDOM(state) {
   powerMetric.appendChild(statusDot);
   const powerLabel = document.createElement("div");
   powerLabel.className = "label";
-  powerLabel.textContent = i18n.instantaneous_power || "Pot\xEAncia";
+  if (entityObject.domain === "water") {
+    powerLabel.textContent = "Leitura";
+  } else {
+    powerLabel.textContent = i18n.instantaneous_power || "Pot\xEAncia";
+  }
   powerMetric.appendChild(powerLabel);
   const powerVal = document.createElement("div");
   powerVal.className = "val";
@@ -5133,7 +5285,7 @@ function verifyOfflineStatus(entityObject, delayTimeInMins = 15) {
   return true;
 }
 function paint(root, state) {
-  const { entityObject, i18n, delayTimeConnectionInMins } = state;
+  const { entityObject, i18n, delayTimeConnectionInMins, isSelected } = state;
   if (entityObject.connectionStatus) {
     if (entityObject.connectionStatus === "offline") {
       entityObject.deviceStatus = DeviceStatusType.NO_INFO;
@@ -5145,16 +5297,23 @@ function paint(root, state) {
   }
   const stateClass = getCardStateClass(entityObject.deviceStatus);
   root.className = `myio-ho-card ${stateClass}`;
-  const statusInfo = getStatusInfo(entityObject.deviceStatus, i18n);
+  const statusInfo = getStatusInfo(entityObject.deviceStatus, i18n, entityObject.domain);
   const chip = root.querySelector(".chip");
   chip.className = `chip ${statusInfo.chipClass}`;
-  chip.textContent = statusInfo.label;
+  chip.innerHTML = statusInfo.label;
   const primaryValue = formatValueByDomain(entityObject.val, entityObject.domain);
   const numSpan = root.querySelector(".myio-ho-card__value .num");
   const unitSpan = root.querySelector(".myio-ho-card__value .unit");
   numSpan.textContent = primaryValue;
   const barContainer = root.querySelector(".bar");
   const effContainer = root.querySelector(".myio-ho-card__eff");
+  if (state.enableSelection) {
+    const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
+    if (checkbox) {
+      checkbox.checked = !!isSelected;
+    }
+    root.classList.toggle("is-selected", !!isSelected);
+  }
   const targetValue = entityObject.consumptionTargetValue;
   if (targetValue) {
     barContainer.style.display = "";
@@ -5176,9 +5335,14 @@ function paint(root, state) {
   }
   const powerVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .val");
   if (powerVal) {
-    const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
-    const powerFormatted = formatPower(instantPower);
-    powerVal.textContent = instantPower !== null ? `${powerFormatted.num} ${powerFormatted.unit}` : "-";
+    if (entityObject.domain === "water") {
+      const pulses = entityObject.pulses ?? 0;
+      powerVal.textContent = `${pulses} L`;
+    } else {
+      const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
+      const powerFormatted = formatPower(instantPower);
+      powerVal.textContent = instantPower !== null ? `${powerFormatted.num} ${powerFormatted.unit}` : "-";
+    }
   }
   const statusDot = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .status-dot");
   if (statusDot) {
@@ -5238,6 +5402,26 @@ function bindEvents(root, state, callbacks) {
       callbacks.handleActionSettings(e, entityObject);
     });
   }
+  const MyIOSelectionStore2 = window.MyIOLibrary?.MyIOSelectionStore || window.MyIOSelectionStore;
+  if (MyIOSelectionStore2) {
+    const onSelectionChange = () => {
+      const selectedIds = MyIOSelectionStore2.getSelectedIds();
+      const isSelected = selectedIds.includes(entityObject.entityId);
+      if (state.isSelected !== isSelected) {
+        state.isSelected = isSelected;
+        paint(root, state);
+      }
+    };
+    MyIOSelectionStore2.on("selection:change", onSelectionChange);
+    root._selectionListener = onSelectionChange;
+  }
+  root._cleanup = () => {
+    document.removeEventListener("click", closeMenu);
+    document.removeEventListener("keydown", closeMenu);
+    if (MyIOSelectionStore2 && root._selectionListener) {
+      MyIOSelectionStore2.off("selection:change", root._selectionListener);
+    }
+  };
   const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
   if (checkbox && callbacks.handleSelect) {
     checkbox.addEventListener("change", (e) => {
@@ -5305,6 +5489,7 @@ function renderCardComponentHeadOffice(containerEl, params) {
   ensureCss();
   const state = normalizeParams(params);
   const root = buildDOM(state);
+  state.isSelected = params.isSelected || false;
   containerEl.appendChild(root);
   bindEvents(root, state, state.callbacks);
   paint(root, state);
@@ -7731,14 +7916,14 @@ async function openRealTimeTelemetryModal(params) {
     return `${value.toFixed(config.decimals)} ${config.unit}`;
   }
   function initializeChart() {
-    const Chart = window.Chart;
-    if (!Chart) {
+    const Chart2 = window.Chart;
+    if (!Chart2) {
       console.warn("[RealTimeTelemetry] Chart.js not loaded");
       return;
     }
     chartContainer.style.display = "block";
     const config = TELEMETRY_CONFIG[selectedChartKey] || { label: selectedChartKey, unit: "" };
-    chart = new Chart(chartCanvas, {
+    chart = new Chart2(chartCanvas, {
       type: "line",
       data: {
         datasets: [{
@@ -10507,7 +10692,7 @@ async function openDemandModal(params) {
       params.timezoneOffset
     );
     if (!newChartData.isEmpty && chart && chartData) {
-      const Chart = window.Chart;
+      const Chart2 = window.Chart;
       newChartData.series.forEach((newSeries, seriesIndex) => {
         if (newSeries.points.length > 0 && chart.data.datasets[seriesIndex]) {
           newSeries.points.forEach((point) => {
@@ -10736,8 +10921,8 @@ async function openDemandModal(params) {
         peakEl.textContent = `${strings.maximum}: ${peak.formattedValue} kW ${peak.key ? `(${peak.key}) ` : ""}${strings.at} ${dateStr}`;
         peakEl.style.display = "block";
       }
-      const Chart = window.Chart;
-      Chart.register(window.ChartZoom);
+      const Chart2 = window.Chart;
+      Chart2.register(window.ChartZoom);
       if (chart) {
         chart.data.datasets = chartData.series.map((series) => ({
           label: series.label,
@@ -10789,7 +10974,7 @@ async function openDemandModal(params) {
         };
         chart.update();
       } else {
-        chart = new Chart(chartCanvas, {
+        chart = new Chart2(chartCanvas, {
           type: "line",
           data: {
             datasets: chartData.series.map((series) => ({
@@ -11048,11 +11233,13 @@ var EnergyModalView = class {
     console.log("[EnergyModalView] Bar mode toggled to:", this.currentBarMode);
   }
   /**
-   * Applies the current theme to the modal and charts
-   */
+     * Applies the current theme to the modal and charts (Updated with #root override)
+     */
   applyTheme() {
     const themeToggleBtn = document.getElementById("theme-toggle-btn");
-    const modalContent = document.querySelector(".myio-energy-modal-scope");
+    const modalContent = this.container;
+    const externalBody = this.container?.closest(".myio-modal-body") || document.querySelector(".myio-modal-body");
+    const rootDiv = document.querySelector("#root > div");
     if (themeToggleBtn) {
       const sunIcon = themeToggleBtn.querySelector(".myio-theme-icon-sun");
       const moonIcon = themeToggleBtn.querySelector(".myio-theme-icon-moon");
@@ -11065,6 +11252,14 @@ var EnergyModalView = class {
           moonIcon.style.opacity = "0";
           moonIcon.style.transform = "translate(-50%, -50%) rotate(90deg) scale(0)";
         }
+        if (externalBody) {
+          externalBody.style.backgroundColor = "#ffffff";
+          externalBody.style.color = "#1f2937";
+        }
+        if (rootDiv) {
+          rootDiv.style.backgroundColor = "#ffffff";
+          rootDiv.style.color = "#1f2937";
+        }
       } else {
         if (sunIcon) {
           sunIcon.style.opacity = "0";
@@ -11074,6 +11269,14 @@ var EnergyModalView = class {
           moonIcon.style.opacity = "1";
           moonIcon.style.transform = "translate(-50%, -50%) rotate(0deg) scale(1)";
         }
+        if (externalBody) {
+          externalBody.style.backgroundColor = "#1f1f1f";
+          externalBody.style.color = "#f3f4f6";
+        }
+        if (rootDiv) {
+          rootDiv.style.backgroundColor = "#1f1f1f";
+          rootDiv.style.color = "#f3f4f6";
+        }
       }
     }
     if (modalContent) {
@@ -11302,7 +11505,7 @@ var EnergyModalView = class {
             ${this.config.params.mode === "comparison" ? `
             <!-- RFC-0097: Granularity Selector (only 1h and 1d supported) -->
             <div class="myio-granularity-selector" style="display: flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 8px; background: rgba(0,0,0,0.05); border-radius: 8px;">
-              <span style="font-size: 11px; color: #666; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
+              <span class="myio-label-secondary" style="font-size: 11px; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
               <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1h" ? "active" : ""}" data-granularity="1h" title="Hora">1h</button>
               <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1d" ? "active" : ""}" data-granularity="1d" title="Dia">1d</button>
             </div>
@@ -11984,93 +12187,159 @@ var EnergyModalView = class {
     return i18n[key] || DEFAULT_I18N2[key];
   }
   /**
-   * Gets modal styles with header color matching openDashboardPopupEnergy
-   */
+     * Gets modal styles with fixed Dark/Light contrast
+     */
+  /**
+     * Gets modal styles with fixed Chart Border for Light Mode
+     */
   getModalStyles() {
     const styles = this.config.params.styles || {};
+    const defaultPrimary = styles.primaryColor || "#4A148C";
+    const defaultFont = styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
     return `
+      /* --- VARI\xC1VEIS DE TEMA (LIGHT MODE - PADR\xC3O) --- */
       .myio-energy-modal-scope {
-        --myio-energy-primary: ${styles.primaryColor || "#4A148C"};
-        --myio-energy-bg: ${styles.backgroundColor || "#ffffff"};
-        --myio-energy-text: ${styles.textColor || "#1f2937"};
-        --myio-energy-border: ${styles.borderColor || "#e5e7eb"};
-        --myio-energy-radius: ${styles.borderRadius || "8px"};
-        --myio-energy-font: ${styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'};
+        --myio-energy-primary: ${defaultPrimary};
+        --myio-energy-font: ${defaultFont};
+        --myio-energy-radius: 8px;
+        
+        /* Cores Gerais (Light Mode) */
+        --myio-energy-bg: #ffffff;
+        --myio-energy-text: #1f2937;
+        --myio-energy-text-secondary: #6b7280;
+        
+        /* Borda GERAL (para bot\xF5es e inputs) - Cinza suave */
+        --myio-energy-border: #e5e7eb;
+        
+        /* Borda ESPEC\xCDFICA DO GR\xC1FICO (Aqui est\xE1 a corre\xE7\xE3o) */
+        /* No Light Mode, definimos como transparente ou branco para "sumir" */
+        --myio-chart-border: transparent; 
+
+        --myio-energy-btn-bg: #f3f4f6;
+        --myio-energy-btn-hover: #e5e7eb;
+        --myio-energy-input-bg: #ffffff;
+        --myio-granularity-bg: #f9fafb;
         
         font-family: var(--myio-energy-font);
+        background-color: var(--myio-energy-bg);
         color: var(--myio-energy-text);
         height: -webkit-fill-available;
+        transition: background-color 0.3s ease, color 0.3s ease;
       }
 
-      .myio-btn {
-        padding: 8px 16px;
-        border-radius: var(--myio-energy-radius);
-        border: 1px solid var(--myio-energy-border);
-        background: var(--myio-energy-bg);
-        color: var(--myio-energy-text);
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.2s;
-      }
+      /* --- DARK MODE OVERRIDES --- */
+      .myio-energy-modal-scope[data-theme="dark"] {
+        --myio-energy-bg: #1f1f1f;
+        --myio-energy-text: #f3f4f6;
+        --myio-energy-text-secondary: #9ca3af;
+        
+        /* No Dark Mode, as bordas precisam aparecer */
+        --myio-energy-border: #374151;
+        --myio-chart-border: #374151; /* Borda vis\xEDvel no escuro */
 
-      .myio-btn:hover:not(:disabled) {
-        background: #f3f4f6;
+        --myio-energy-btn-bg: #374151;
+        --myio-energy-btn-hover: #4b5563;
+        --myio-energy-input-bg: #111827;
+        --myio-granularity-bg: #111827;
       }
 
-      .myio-btn:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
+      /* --- COMPONENTES --- */
 
-      .myio-btn-primary {
-        background: var(--myio-energy-primary);
-        color: white;
-        border-color: var(--myio-energy-primary);
+      .myio-energy-chart-container {
+        flex: 1 !important;
+        min-height: 353px !important;
+        height: 353px !important;
+        background: var(--myio-energy-bg);
+        border-radius: var(--myio-energy-radius);
+        
+        /* USO DA VARI\xC1VEL ESPEC\xCDFICA AQUI */
+        border: 1px solid var(--myio-chart-border);
+        
+        padding: 10px !important;
+        display: block !important;
+        overflow: hidden !important;
       }
 
-      .myio-btn-primary:hover:not(:disabled) {
-        background: #6A1B9A;
+      .myio-chart-container {
+        /* Aplica a mesma l\xF3gica para o gr\xE1fico de fallback */
+        border: 1px solid var(--myio-chart-border);
+        border-radius: var(--myio-energy-radius);
+        overflow: hidden;
       }
 
-      .myio-btn-secondary {
-        background: #f3f4f6;
-        color: var(--myio-energy-text);
-        border-color: var(--myio-energy-border);
+      /* --- Resto dos estilos (Bot\xF5es, Labels, etc.) --- */
+      
+      .myio-label-secondary {
+        color: var(--myio-energy-text-secondary);
+        font-weight: 500;
       }
 
-      .myio-btn-secondary:hover:not(:disabled) {
-        background: #e5e7eb;
+      .myio-granularity-selector {
+        display: flex; 
+        align-items: center; 
+        gap: 4px; 
+        margin-left: 8px; 
+        padding: 4px 8px; 
+        border-radius: 8px;
+        background: var(--myio-granularity-bg);
+        border: 1px solid var(--myio-energy-border); /* Granularidade mant\xE9m borda suave */
       }
 
-      /* RFC-0097: Granularity selector buttons */
       .myio-btn-granularity {
         padding: 4px 10px;
         font-size: 12px;
         font-weight: 600;
         border-radius: 6px;
-        border: 1px solid var(--myio-energy-border);
-        background: var(--myio-energy-bg);
-        color: var(--myio-energy-text);
         cursor: pointer;
         transition: all 0.2s ease;
         min-width: 36px;
+        background: transparent;
+        border: 1px solid transparent;
+        color: var(--myio-energy-text-secondary);
       }
 
       .myio-btn-granularity:hover:not(.active) {
-        background: #f3f4f6;
-        border-color: var(--myio-energy-primary);
-        color: var(--myio-energy-primary);
+        background: var(--myio-energy-btn-hover);
+        color: var(--myio-energy-text);
       }
 
       .myio-btn-granularity.active {
         background: var(--myio-energy-primary);
         color: white;
         border-color: var(--myio-energy-primary);
-        box-shadow: 0 2px 4px rgba(74, 20, 140, 0.25);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
       }
 
-      .myio-granularity-selector {
+      .myio-btn {
+        padding: 8px 16px;
+        border-radius: var(--myio-energy-radius);
         border: 1px solid var(--myio-energy-border);
+        background: var(--myio-energy-btn-bg);
+        color: var(--myio-energy-text);
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.2s;
+      }
+
+      .myio-btn:hover:not(:disabled) {
+        background: var(--myio-energy-btn-hover);
+        border-color: var(--myio-energy-border);
+      }
+
+      .myio-btn-primary {
+        background: var(--myio-energy-primary);
+        color: white;
+        border-color: var(--myio-energy-primary);
+      }
+
+      .myio-btn-primary:hover:not(:disabled) {
+        opacity: 0.9;
+      }
+
+      .myio-btn-secondary {
+        background: var(--myio-energy-btn-bg);
+        color: var(--myio-energy-text);
+        border-color: var(--myio-energy-border);
       }
 
       .myio-modal-scope {
@@ -12079,42 +12348,30 @@ var EnergyModalView = class {
         flex-direction: column !important;
       }
 
-      .myio-energy-chart-container {
-        flex: 1 !important;
-        min-height: 353px !important;
-        height: 353px !important;
-        background: var(--myio-energy-bg);
-        border-radius: var(--myio-energy-radius);
-        border: 1px solid var(--myio-energy-border);
-        padding: 10px !important;
-        display: block !important;
-        overflow: hidden !important;
-      }
-
-      .myio-energy-chart-container > iframe {
-        width: 100% !important;
-        height: 100% !important;
-        min-height: 408px !important;
-        border: none !important;
+      .myio-form-group {
+        display: flex;
+        flex-direction: column;
       }
 
-      .myio-energy-chart-container iframe,
-      .myio-energy-chart-container iframe body,
-      .myio-energy-chart-container iframe html {
-        height: 100% !important;
-        min-height: 408px !important;
+      .myio-label {
+        font-weight: 500;
+        margin-bottom: 5px;
+        color: var(--myio-energy-text);
       }
 
-      .myio-energy-chart-container .chart-wrapper,
-      .myio-energy-chart-container .chart-container,
-      .myio-energy-chart-container canvas,
-      .myio-energy-chart-container svg {
-        height: 408px !important;
-        min-height: 408px !important;
+      .myio-input {
+        padding: 8px 12px;
+        border: 1px solid var(--myio-energy-border);
+        border-radius: var(--myio-energy-radius);
+        font-size: 14px;
+        background: var(--myio-energy-input-bg);
+        color: var(--myio-energy-text);
       }
 
-      .myio-loading-state {
-        text-align: center;
+      .myio-input:focus {
+        outline: none;
+        border-color: var(--myio-energy-primary);
+        box-shadow: 0 0 0 1px var(--myio-energy-primary);
       }
 
       .myio-spinner {
@@ -12126,78 +12383,40 @@ var EnergyModalView = class {
         animation: spin 1s linear infinite;
         margin: 0 auto 16px;
       }
-
+      
       @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
       }
 
+      .myio-loading-state p {
+        color: var(--myio-energy-text);
+      }
+
       .myio-energy-error {
-        background: #fef2f2;
-        border: 1px solid #fecaca;
+        background: rgba(254, 202, 202, 0.15);
+        border: 1px solid rgba(248, 113, 113, 0.5);
         border-radius: var(--myio-energy-radius);
         padding: 16px;
       }
-
-      .myio-error-content {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-
-      .myio-error-icon {
-        font-size: 24px;
-      }
-
+      
       .myio-error-message {
-        color: #dc2626;
+        color: #ef4444;
         font-weight: 500;
       }
 
-
-
-      .myio-fallback-chart h4 {
-        margin: 0 0 16px 0;
-        text-align: center;
-      }
-
-      .myio-chart-container {
-        border: 1px solid var(--myio-energy-border);
-        border-radius: var(--myio-energy-radius);
-        overflow: hidden;
-      }
-
       .myio-chart-note {
         margin: 12px 0 0 0;
         font-size: 12px;
-        color: #666;
-        text-align: center;
-      }
-
-      .myio-form-group {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .myio-label {
-        font-weight: 500;
-        margin-bottom: 5px;
-        color: var(--myio-energy-text);
-      }
-
-      .myio-input {
-        padding: 8px 12px;
-        border: 1px solid var(--myio-energy-border);
-        border-radius: var(--myio-energy-radius);
-        font-size: 14px;
-        background: var(--myio-energy-bg);
         color: var(--myio-energy-text);
+        opacity: 0.7;
+        text-align: center;
       }
 
-      .myio-input:focus {
-        outline: none;
-        border-color: var(--myio-energy-primary);
-        box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.1);
+      .myio-energy-chart-container > iframe {
+        width: 100% !important;
+        height: 100% !important;
+        border: none !important;
       }
 
       @media (max-width: 768px) {
@@ -12205,12 +12424,6 @@ var EnergyModalView = class {
           grid-template-columns: 1fr;
           grid-template-rows: auto 1fr;
         }
-        
-        .myio-energy-header {
-          flex-direction: column;
-          gap: 12px;
-          align-items: stretch;
-        }
       }
     `;
   }
@@ -18934,8 +19147,8 @@ function openGoalsPanel(params) {
             <div class="myio-goals-progress-fill" style="width: ${Math.min(progress, 100)}%"></div>
           </div>
           <div class="myio-goals-progress-text">
-            <span>${formatNumber2(monthlySum, locale)} ${annual.unit}</span>
-            <span>${formatNumber2(annual.total, locale)} ${annual.unit}</span>
+            <span>${formatNumber3(monthlySum, locale)} ${annual.unit}</span>
+            <span>${formatNumber3(annual.total, locale)} ${annual.unit}</span>
           </div>
 
           <!-- Monthly Grid -->
@@ -19009,7 +19222,7 @@ function openGoalsPanel(params) {
             <span>${assetData.label || assetId}</span>
           </div>
           <div class="myio-goals-asset-total">
-            ${formatNumber2(assetData.annual?.total || 0, locale)} ${assetData.annual?.unit || "kWh"}
+            ${formatNumber3(assetData.annual?.total || 0, locale)} ${assetData.annual?.unit || "kWh"}
           </div>
           <button class="myio-goals-btn-icon" data-action="delete-asset" data-asset-id="${assetId}" aria-label="${i18n.deleteAsset}">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -19324,7 +19537,7 @@ function openGoalsPanel(params) {
         monthlySum += value;
       }
       if (monthlySum > annualTotal && annualTotal > 0) {
-        errors.push(`${i18n.errorMonthlyExceedsAnnual} (${formatNumber2(monthlySum, locale)} > ${formatNumber2(annualTotal, locale)})`);
+        errors.push(`${i18n.errorMonthlyExceedsAnnual} (${formatNumber3(monthlySum, locale)} > ${formatNumber3(annualTotal, locale)})`);
       }
     }
     return errors;
@@ -19415,8 +19628,8 @@ function openGoalsPanel(params) {
     }
     if (progressTexts.length === 2) {
       const unit = document.getElementById("unit-select")?.value || "kWh";
-      progressTexts[0].textContent = `${formatNumber2(monthlySum, locale)} ${unit}`;
-      progressTexts[1].textContent = `${formatNumber2(annualTotal, locale)} ${unit}`;
+      progressTexts[0].textContent = `${formatNumber3(monthlySum, locale)} ${unit}`;
+      progressTexts[1].textContent = `${formatNumber3(annualTotal, locale)} ${unit}`;
     }
   }
   function updateMonthlyUnits(unit) {
@@ -19514,7 +19727,7 @@ function openGoalsPanel(params) {
     modal.addEventListener("keydown", handleTab);
     firstElement.focus();
   }
-  function formatNumber2(value, locale2) {
+  function formatNumber3(value, locale2) {
     return new Intl.NumberFormat(locale2, {
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
@@ -22464,12 +22677,1743 @@ function openTemperatureSettingsModal(params) {
   });
   return { destroy };
 }
+
+// src/components/ModalHeader/index.ts
+var DEFAULT_BG_COLOR = "#3e1a7d";
+var DEFAULT_TEXT_COLOR = "white";
+var DEFAULT_BORDER_RADIUS = "10px 10px 0 0";
+var EXPORT_FORMAT_LABELS = {
+  csv: "CSV",
+  xls: "Excel (XLS)",
+  pdf: "PDF"
+};
+var EXPORT_FORMAT_ICONS = {
+  csv: "\u{1F4C4}",
+  xls: "\u{1F4CA}",
+  pdf: "\u{1F4D1}"
+};
+function createModalHeader(config) {
+  let currentTheme = config.theme || "light";
+  let currentIsMaximized = config.isMaximized || false;
+  let currentTitle = config.title;
+  let themeBtn = null;
+  let maximizeBtn = null;
+  let closeBtn = null;
+  let exportBtn = null;
+  let exportDropdown = null;
+  const cleanupHandlers = [];
+  const handleThemeClick = () => {
+    currentTheme = currentTheme === "light" ? "dark" : "light";
+    config.onThemeToggle?.(currentTheme);
+    updateButtonIcons();
+  };
+  const handleMaximizeClick = () => {
+    currentIsMaximized = !currentIsMaximized;
+    config.onMaximize?.(currentIsMaximized);
+    updateButtonIcons();
+  };
+  const handleCloseClick = () => {
+    config.onClose?.();
+  };
+  const handleExportClick = (format) => {
+    config.onExport?.(format);
+    if (exportDropdown) {
+      exportDropdown.style.display = "none";
+    }
+  };
+  function updateButtonIcons() {
+    if (themeBtn) {
+      themeBtn.textContent = currentTheme === "dark" ? "\u2600\uFE0F" : "\u{1F319}";
+      themeBtn.title = currentTheme === "dark" ? "Modo claro" : "Modo escuro";
+    }
+    if (maximizeBtn) {
+      maximizeBtn.textContent = currentIsMaximized ? "\u{1F5D7}" : "\u{1F5D6}";
+      maximizeBtn.title = currentIsMaximized ? "Restaurar" : "Maximizar";
+    }
+  }
+  function getButtonStyle() {
+    return `
+      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, color 0.2s;
+    `.replace(/\s+/g, " ").trim();
+  }
+  function renderExportDropdown() {
+    const formats = config.exportFormats || [];
+    if (formats.length === 0) return "";
+    if (formats.length === 1) {
+      return `
+        <button id="${config.id}-export" title="Exportar ${EXPORT_FORMAT_LABELS[formats[0]]}" style="${getButtonStyle()}">
+          \u{1F4E5}
+        </button>
+      `;
+    }
+    return `
+      <div style="position: relative; display: inline-block;">
+        <button id="${config.id}-export-btn" title="Exportar" style="${getButtonStyle()}">
+          \u{1F4E5}
+        </button>
+        <div id="${config.id}-export-dropdown" style="
+          display: none;
+          position: absolute;
+          top: 100%;
+          right: 0;
+          background: white;
+          border-radius: 6px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+          min-width: 140px;
+          z-index: 10001;
+          margin-top: 4px;
+          overflow: hidden;
+        ">
+          ${formats.map((format) => `
+            <button
+              id="${config.id}-export-${format}"
+              class="myio-export-option"
+              data-format="${format}"
+              style="
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                width: 100%;
+                padding: 10px 14px;
+                border: none;
+                background: white;
+                cursor: pointer;
+                font-size: 13px;
+                color: #333;
+                text-align: left;
+                transition: background-color 0.2s;
+              "
+            >
+              ${EXPORT_FORMAT_ICONS[format]} ${EXPORT_FORMAT_LABELS[format]}
+            </button>
+          `).join("")}
+        </div>
+      </div>
+    `;
+  }
+  const instance = {
+    render() {
+      const bgColor = config.backgroundColor || DEFAULT_BG_COLOR;
+      const textColor = config.textColor || DEFAULT_TEXT_COLOR;
+      const borderRadius = currentIsMaximized ? "0" : config.borderRadius || DEFAULT_BORDER_RADIUS;
+      const showTheme = config.showThemeToggle !== false;
+      const showMax = config.showMaximize !== false;
+      const showClose = config.showClose !== false;
+      const showExport = config.exportFormats && config.exportFormats.length > 0;
+      const iconHtml = config.icon ? `<span style="margin-right: 8px;">${config.icon}</span>` : "";
+      const buttonStyle = getButtonStyle();
+      return `
+        <div class="myio-modal-header" style="
+          padding: 4px 8px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          background: ${bgColor};
+          color: ${textColor};
+          border-radius: ${borderRadius};
+          min-height: 20px;
+          font-family: 'Roboto', Arial, sans-serif;
+        ">
+          <h2 id="${config.id}-header-title" style="
+            margin: 6px;
+            font-size: 18px;
+            font-weight: 600;
+            color: ${textColor};
+            line-height: 2;
+            display: flex;
+            align-items: center;
+          ">
+            ${iconHtml}${currentTitle}
+          </h2>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            ${showExport ? renderExportDropdown() : ""}
+            ${showTheme ? `
+              <button id="${config.id}-theme-toggle" title="${currentTheme === "dark" ? "Modo claro" : "Modo escuro"}" style="${buttonStyle}">
+                ${currentTheme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}
+              </button>
+            ` : ""}
+            ${showMax ? `
+              <button id="${config.id}-maximize" title="${currentIsMaximized ? "Restaurar" : "Maximizar"}" style="${buttonStyle}">
+                ${currentIsMaximized ? "\u{1F5D7}" : "\u{1F5D6}"}
+              </button>
+            ` : ""}
+            ${showClose ? `
+              <button id="${config.id}-close" title="Fechar" style="${buttonStyle}; font-size: 20px;">
+                \xD7
+              </button>
+            ` : ""}
+          </div>
+        </div>
+      `;
+    },
+    attachListeners() {
+      themeBtn = document.getElementById(`${config.id}-theme-toggle`);
+      maximizeBtn = document.getElementById(`${config.id}-maximize`);
+      closeBtn = document.getElementById(`${config.id}-close`);
+      const singleExportBtn = document.getElementById(`${config.id}-export`);
+      if (singleExportBtn && config.exportFormats?.length === 1) {
+        exportBtn = singleExportBtn;
+        const format = config.exportFormats[0];
+        const clickHandler = () => handleExportClick(format);
+        exportBtn.addEventListener("click", clickHandler);
+        cleanupHandlers.push(() => exportBtn?.removeEventListener("click", clickHandler));
+        const enterHandler = () => {
+          exportBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+        };
+        const leaveHandler = () => {
+          exportBtn.style.backgroundColor = "transparent";
+        };
+        exportBtn.addEventListener("mouseenter", enterHandler);
+        exportBtn.addEventListener("mouseleave", leaveHandler);
+        cleanupHandlers.push(() => {
+          exportBtn?.removeEventListener("mouseenter", enterHandler);
+          exportBtn?.removeEventListener("mouseleave", leaveHandler);
+        });
+      }
+      const exportDropdownBtn = document.getElementById(`${config.id}-export-btn`);
+      exportDropdown = document.getElementById(`${config.id}-export-dropdown`);
+      if (exportDropdownBtn && exportDropdown) {
+        exportBtn = exportDropdownBtn;
+        const toggleHandler = (e) => {
+          e.stopPropagation();
+          if (exportDropdown) {
+            exportDropdown.style.display = exportDropdown.style.display === "none" ? "block" : "none";
+          }
+        };
+        exportDropdownBtn.addEventListener("click", toggleHandler);
+        cleanupHandlers.push(() => exportDropdownBtn.removeEventListener("click", toggleHandler));
+        const outsideClickHandler = (e) => {
+          if (exportDropdown && !exportDropdown.contains(e.target) && e.target !== exportDropdownBtn) {
+            exportDropdown.style.display = "none";
+          }
+        };
+        document.addEventListener("click", outsideClickHandler);
+        cleanupHandlers.push(() => document.removeEventListener("click", outsideClickHandler));
+        config.exportFormats?.forEach((format) => {
+          const btn = document.getElementById(`${config.id}-export-${format}`);
+          if (btn) {
+            const clickHandler = () => handleExportClick(format);
+            btn.addEventListener("click", clickHandler);
+            cleanupHandlers.push(() => btn.removeEventListener("click", clickHandler));
+            const enterHandler2 = () => {
+              btn.style.backgroundColor = "#f0f0f0";
+            };
+            const leaveHandler2 = () => {
+              btn.style.backgroundColor = "white";
+            };
+            btn.addEventListener("mouseenter", enterHandler2);
+            btn.addEventListener("mouseleave", leaveHandler2);
+            cleanupHandlers.push(() => {
+              btn.removeEventListener("mouseenter", enterHandler2);
+              btn.removeEventListener("mouseleave", leaveHandler2);
+            });
+          }
+        });
+        const enterHandler = () => {
+          exportDropdownBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+        };
+        const leaveHandler = () => {
+          exportDropdownBtn.style.backgroundColor = "transparent";
+        };
+        exportDropdownBtn.addEventListener("mouseenter", enterHandler);
+        exportDropdownBtn.addEventListener("mouseleave", leaveHandler);
+        cleanupHandlers.push(() => {
+          exportDropdownBtn.removeEventListener("mouseenter", enterHandler);
+          exportDropdownBtn.removeEventListener("mouseleave", leaveHandler);
+        });
+      }
+      if (themeBtn && config.showThemeToggle !== false) {
+        themeBtn.addEventListener("click", handleThemeClick);
+        cleanupHandlers.push(() => themeBtn?.removeEventListener("click", handleThemeClick));
+        const enterHandler = () => {
+          themeBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+        };
+        const leaveHandler = () => {
+          themeBtn.style.backgroundColor = "transparent";
+        };
+        themeBtn.addEventListener("mouseenter", enterHandler);
+        themeBtn.addEventListener("mouseleave", leaveHandler);
+        cleanupHandlers.push(() => {
+          themeBtn?.removeEventListener("mouseenter", enterHandler);
+          themeBtn?.removeEventListener("mouseleave", leaveHandler);
+        });
+      }
+      if (maximizeBtn && config.showMaximize !== false) {
+        maximizeBtn.addEventListener("click", handleMaximizeClick);
+        cleanupHandlers.push(() => maximizeBtn?.removeEventListener("click", handleMaximizeClick));
+        const enterHandler = () => {
+          maximizeBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+        };
+        const leaveHandler = () => {
+          maximizeBtn.style.backgroundColor = "transparent";
+        };
+        maximizeBtn.addEventListener("mouseenter", enterHandler);
+        maximizeBtn.addEventListener("mouseleave", leaveHandler);
+        cleanupHandlers.push(() => {
+          maximizeBtn?.removeEventListener("mouseenter", enterHandler);
+          maximizeBtn?.removeEventListener("mouseleave", leaveHandler);
+        });
+      }
+      if (closeBtn && config.showClose !== false) {
+        closeBtn.addEventListener("click", handleCloseClick);
+        cleanupHandlers.push(() => closeBtn?.removeEventListener("click", handleCloseClick));
+        const enterHandler = () => {
+          closeBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+        };
+        const leaveHandler = () => {
+          closeBtn.style.backgroundColor = "transparent";
+        };
+        closeBtn.addEventListener("mouseenter", enterHandler);
+        closeBtn.addEventListener("mouseleave", leaveHandler);
+        cleanupHandlers.push(() => {
+          closeBtn?.removeEventListener("mouseenter", enterHandler);
+          closeBtn?.removeEventListener("mouseleave", leaveHandler);
+        });
+      }
+    },
+    update(updates) {
+      if (updates.theme !== void 0) {
+        currentTheme = updates.theme;
+        updateButtonIcons();
+      }
+      if (updates.isMaximized !== void 0) {
+        currentIsMaximized = updates.isMaximized;
+        updateButtonIcons();
+      }
+      if (updates.title !== void 0) {
+        currentTitle = updates.title;
+        const titleEl = document.getElementById(`${config.id}-header-title`);
+        if (titleEl) {
+          const iconHtml = config.icon ? `<span style="margin-right: 8px;">${config.icon}</span>` : "";
+          titleEl.innerHTML = `${iconHtml}${currentTitle}`;
+        }
+      }
+    },
+    getState() {
+      return {
+        theme: currentTheme,
+        isMaximized: currentIsMaximized
+      };
+    },
+    destroy() {
+      cleanupHandlers.forEach((handler) => handler());
+      cleanupHandlers.length = 0;
+      themeBtn = null;
+      maximizeBtn = null;
+      closeBtn = null;
+      exportBtn = null;
+      exportDropdown = null;
+    }
+  };
+  return instance;
+}
+function getModalHeaderStyles() {
+  return `
+    .myio-modal-header button:hover {
+      background-color: rgba(255, 255, 255, 0.2) !important;
+    }
+    .myio-modal-header button:active {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+    .myio-export-option:hover {
+      background-color: #f0f0f0 !important;
+    }
+  `;
+}
+
+// src/components/Consumption7DaysChart/types.ts
+var DEFAULT_COLORS = {
+  energy: {
+    primary: "#2563eb",
+    background: "rgba(37, 99, 235, 0.1)",
+    gradient: ["#f0fdf4", "#dcfce7"],
+    pointBackground: "#2563eb",
+    pointBorder: "#ffffff"
+  },
+  water: {
+    primary: "#0288d1",
+    background: "rgba(2, 136, 209, 0.1)",
+    gradient: ["#f0f9ff", "#bae6fd"],
+    pointBackground: "#0288d1",
+    pointBorder: "#ffffff"
+  },
+  gas: {
+    primary: "#ea580c",
+    background: "rgba(234, 88, 12, 0.1)",
+    gradient: ["#fff7ed", "#fed7aa"],
+    pointBackground: "#ea580c",
+    pointBorder: "#ffffff"
+  },
+  temperature: {
+    primary: "#dc2626",
+    background: "rgba(220, 38, 38, 0.1)",
+    gradient: ["#fef2f2", "#fecaca"],
+    pointBackground: "#dc2626",
+    pointBorder: "#ffffff"
+  }
+};
+var THEME_COLORS = {
+  light: {
+    chartBackground: "#ffffff",
+    text: "#1f2937",
+    textMuted: "#6b7280",
+    grid: "rgba(0, 0, 0, 0.1)",
+    border: "#e5e7eb",
+    tooltipBackground: "#ffffff",
+    tooltipText: "#1f2937"
+  },
+  dark: {
+    chartBackground: "#1f2937",
+    text: "#f9fafb",
+    textMuted: "#9ca3af",
+    grid: "rgba(255, 255, 255, 0.1)",
+    border: "#374151",
+    tooltipBackground: "#374151",
+    tooltipText: "#f9fafb"
+  }
+};
+var DEFAULT_CONFIG = {
+  defaultPeriod: 7,
+  defaultChartType: "line",
+  defaultVizMode: "total",
+  defaultTheme: "light",
+  cacheTTL: 3e5,
+  // 5 minutes
+  decimalPlaces: 1,
+  lineTension: 0.4,
+  pointRadius: 4,
+  borderWidth: 2,
+  fill: true,
+  showLegend: false,
+  enableExport: true
+};
+
+// src/components/Consumption7DaysChart/createConsumption7DaysChart.ts
+function createConsumption7DaysChart(config) {
+  let chartInstance = null;
+  let cachedData = null;
+  let currentPeriod = config.defaultPeriod ?? DEFAULT_CONFIG.defaultPeriod;
+  let currentChartType = config.defaultChartType ?? DEFAULT_CONFIG.defaultChartType;
+  let currentVizMode = config.defaultVizMode ?? DEFAULT_CONFIG.defaultVizMode;
+  let currentTheme = config.theme ?? DEFAULT_CONFIG.defaultTheme;
+  let currentIdealRange = config.idealRange ?? null;
+  let isRendered = false;
+  let autoRefreshTimer = null;
+  const colors = {
+    ...DEFAULT_COLORS[config.domain] ?? DEFAULT_COLORS.energy,
+    ...config.colors
+  };
+  function $id(id) {
+    if (config.$container && config.$container[0]) {
+      return config.$container[0].querySelector(`#${id}`);
+    }
+    return document.getElementById(id);
+  }
+  function log(level, ...args) {
+    const prefix = `[${config.domain.toUpperCase()}]`;
+    console[level](prefix, ...args);
+  }
+  function calculateYAxisMax(values) {
+    const maxValue = Math.max(...values, 0);
+    if (config.domain === "temperature") {
+      const tempConfig = config.temperatureConfig;
+      if (tempConfig?.clampRange) {
+        return tempConfig.clampRange.max;
+      }
+      const maxWithThreshold = Math.max(
+        maxValue,
+        tempConfig?.maxThreshold?.value ?? 0,
+        tempConfig?.idealRange?.max ?? 0
+      );
+      return Math.ceil(maxWithThreshold + 5);
+    }
+    if (maxValue === 0) {
+      return config.thresholdForLargeUnit ? config.thresholdForLargeUnit / 2 : 500;
+    }
+    let roundTo;
+    if (config.thresholdForLargeUnit && maxValue >= config.thresholdForLargeUnit) {
+      roundTo = config.thresholdForLargeUnit / 10;
+    } else if (maxValue >= 1e3) {
+      roundTo = 100;
+    } else if (maxValue >= 100) {
+      roundTo = 50;
+    } else if (maxValue >= 10) {
+      roundTo = 10;
+    } else {
+      roundTo = 5;
+    }
+    return Math.ceil(maxValue * 1.1 / roundTo) * roundTo;
+  }
+  function calculateYAxisMin(values) {
+    if (config.domain !== "temperature") {
+      return 0;
+    }
+    const tempConfig = config.temperatureConfig;
+    if (tempConfig?.clampRange) {
+      return tempConfig.clampRange.min;
+    }
+    const minValue = Math.min(...values);
+    const minWithThreshold = Math.min(
+      minValue,
+      tempConfig?.minThreshold?.value ?? minValue,
+      tempConfig?.idealRange?.min ?? minValue
+    );
+    return Math.floor(minWithThreshold - 5);
+  }
+  function buildTemperatureAnnotations() {
+    const tempConfig = config.temperatureConfig;
+    if (!tempConfig || config.domain !== "temperature") {
+      return {};
+    }
+    const annotations = {};
+    const createLineAnnotation = (line, id) => {
+      const borderDash = line.lineStyle === "dashed" ? [6, 6] : line.lineStyle === "dotted" ? [2, 2] : [];
+      return {
+        type: "line",
+        yMin: line.value,
+        yMax: line.value,
+        borderColor: line.color,
+        borderWidth: line.lineWidth ?? 2,
+        borderDash,
+        label: {
+          display: true,
+          content: line.label,
+          position: "end",
+          backgroundColor: line.color,
+          color: "#fff",
+          font: { size: 10, weight: "bold" },
+          padding: { x: 4, y: 2 }
+        }
+      };
+    };
+    if (tempConfig.minThreshold) {
+      annotations["minThreshold"] = createLineAnnotation(tempConfig.minThreshold, "minThreshold");
+    }
+    if (tempConfig.maxThreshold) {
+      annotations["maxThreshold"] = createLineAnnotation(tempConfig.maxThreshold, "maxThreshold");
+    }
+    if (tempConfig.idealRange) {
+      annotations["idealRange"] = {
+        type: "box",
+        yMin: tempConfig.idealRange.min,
+        yMax: tempConfig.idealRange.max,
+        backgroundColor: tempConfig.idealRange.color,
+        borderWidth: 0,
+        label: tempConfig.idealRange.label ? {
+          display: true,
+          content: tempConfig.idealRange.label,
+          position: { x: "start", y: "center" },
+          color: "#666",
+          font: { size: 10 }
+        } : void 0
+      };
+    }
+    return annotations;
+  }
+  function buildIdealRangeAnnotation() {
+    if (!currentIdealRange) {
+      return {};
+    }
+    const { min, max, enabled = true } = currentIdealRange;
+    if (!enabled || min === 0 && max === 0 || min >= max) {
+      return {};
+    }
+    const defaultColors = {
+      temperature: { bg: "rgba(34, 197, 94, 0.15)", border: "rgba(34, 197, 94, 0.4)" },
+      energy: { bg: "rgba(37, 99, 235, 0.1)", border: "rgba(37, 99, 235, 0.3)" },
+      water: { bg: "rgba(2, 136, 209, 0.1)", border: "rgba(2, 136, 209, 0.3)" },
+      gas: { bg: "rgba(234, 88, 12, 0.1)", border: "rgba(234, 88, 12, 0.3)" }
+    };
+    const domainDefaults = defaultColors[config.domain] || defaultColors.energy;
+    return {
+      idealRangeBox: {
+        type: "box",
+        yMin: min,
+        yMax: max,
+        backgroundColor: currentIdealRange.color || domainDefaults.bg,
+        borderColor: currentIdealRange.borderColor || domainDefaults.border,
+        borderWidth: 1,
+        label: currentIdealRange.label ? {
+          display: true,
+          content: currentIdealRange.label,
+          position: { x: "start", y: "center" },
+          color: "#666",
+          font: { size: 10, style: "italic" },
+          backgroundColor: "rgba(255, 255, 255, 0.8)",
+          padding: { x: 4, y: 2 }
+        } : void 0
+      }
+    };
+  }
+  function formatValue(value, includeUnit = true) {
+    const decimals = config.decimalPlaces ?? DEFAULT_CONFIG.decimalPlaces;
+    if (config.unitLarge && config.thresholdForLargeUnit && value >= config.thresholdForLargeUnit) {
+      const converted = value / config.thresholdForLargeUnit;
+      return includeUnit ? `${converted.toFixed(decimals)} ${config.unitLarge}` : converted.toFixed(decimals);
+    }
+    return includeUnit ? `${value.toFixed(decimals)} ${config.unit}` : value.toFixed(decimals);
+  }
+  function formatTickValue(value) {
+    if (config.unitLarge && config.thresholdForLargeUnit && value >= config.thresholdForLargeUnit) {
+      return `${(value / config.thresholdForLargeUnit).toFixed(1)}`;
+    }
+    return value.toFixed(0);
+  }
+  function buildChartConfig(data) {
+    const yAxisMax = calculateYAxisMax(data.dailyTotals);
+    const yAxisMin = calculateYAxisMin(data.dailyTotals);
+    const tension = config.lineTension ?? DEFAULT_CONFIG.lineTension;
+    const pointRadius = config.pointRadius ?? DEFAULT_CONFIG.pointRadius;
+    const borderWidth = config.borderWidth ?? DEFAULT_CONFIG.borderWidth;
+    const fill = config.fill ?? DEFAULT_CONFIG.fill;
+    const showLegend = config.showLegend ?? DEFAULT_CONFIG.showLegend;
+    const themeColors = THEME_COLORS[currentTheme];
+    const isTemperature = config.domain === "temperature";
+    let datasets;
+    if (currentVizMode === "separate" && data.shoppingData && data.shoppingNames) {
+      const shoppingColors = [
+        "#2563eb",
+        "#16a34a",
+        "#ea580c",
+        "#dc2626",
+        "#8b5cf6",
+        "#0891b2",
+        "#65a30d",
+        "#d97706",
+        "#be185d",
+        "#0d9488"
+      ];
+      datasets = Object.entries(data.shoppingData).map(([shoppingId, values], index) => ({
+        label: data.shoppingNames?.[shoppingId] || shoppingId,
+        data: values,
+        borderColor: shoppingColors[index % shoppingColors.length],
+        backgroundColor: currentChartType === "line" ? `${shoppingColors[index % shoppingColors.length]}20` : shoppingColors[index % shoppingColors.length],
+        fill: currentChartType === "line" && fill,
+        tension,
+        borderWidth,
+        pointRadius: currentChartType === "line" ? pointRadius : 0,
+        pointBackgroundColor: shoppingColors[index % shoppingColors.length],
+        pointBorderColor: "#fff",
+        pointBorderWidth: 2
+      }));
+    } else {
+      const datasetLabel = isTemperature ? `Temperatura (${config.unit})` : `Consumo (${config.unit})`;
+      datasets = [
+        {
+          label: datasetLabel,
+          data: data.dailyTotals,
+          borderColor: colors.primary,
+          backgroundColor: currentChartType === "line" ? colors.background : colors.primary,
+          fill: currentChartType === "line" && fill,
+          tension,
+          borderWidth,
+          pointRadius: currentChartType === "line" ? pointRadius : 0,
+          pointBackgroundColor: colors.pointBackground || colors.primary,
+          pointBorderColor: colors.pointBorder || "#fff",
+          pointBorderWidth: 2,
+          borderRadius: currentChartType === "bar" ? 4 : 0
+        }
+      ];
+    }
+    const temperatureAnnotations = buildTemperatureAnnotations();
+    const idealRangeAnnotations = buildIdealRangeAnnotation();
+    const allAnnotations = { ...temperatureAnnotations, ...idealRangeAnnotations };
+    const yAxisLabel = config.unitLarge && config.thresholdForLargeUnit && yAxisMax >= config.thresholdForLargeUnit ? config.unitLarge : config.unit;
+    return {
+      type: currentChartType,
+      data: {
+        labels: data.labels,
+        datasets
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: false,
+        // CRITICAL: Prevents infinite growth bug
+        plugins: {
+          legend: {
+            display: showLegend || currentVizMode === "separate",
+            position: "bottom",
+            labels: {
+              color: themeColors.text
+            }
+          },
+          tooltip: {
+            backgroundColor: themeColors.tooltipBackground,
+            titleColor: themeColors.tooltipText,
+            bodyColor: themeColors.tooltipText,
+            borderColor: themeColors.border,
+            borderWidth: 1,
+            callbacks: {
+              label: function(context) {
+                const value = context.parsed.y || 0;
+                const label = context.dataset.label || "";
+                return `${label}: ${formatValue(value)}`;
+              }
+            }
+          },
+          // Reference lines and ideal range (requires chartjs-plugin-annotation)
+          annotation: Object.keys(allAnnotations).length > 0 ? {
+            annotations: allAnnotations
+          } : void 0
+        },
+        scales: {
+          y: {
+            beginAtZero: !isTemperature,
+            // Temperature can have negative values
+            min: yAxisMin,
+            max: yAxisMax,
+            // CRITICAL: Fixed max prevents animation loop
+            grid: {
+              color: themeColors.grid
+            },
+            title: {
+              display: true,
+              text: yAxisLabel,
+              font: { size: 12 },
+              color: themeColors.text
+            },
+            ticks: {
+              font: { size: 11 },
+              color: themeColors.textMuted,
+              callback: function(value) {
+                return formatTickValue(value);
+              }
+            }
+          },
+          x: {
+            grid: {
+              color: themeColors.grid
+            },
+            ticks: {
+              font: { size: 11 },
+              color: themeColors.textMuted
+            }
+          }
+        }
+      }
+    };
+  }
+  function validateChartJs() {
+    if (typeof Chart === "undefined") {
+      log("error", "Chart.js not loaded. Cannot initialize chart.");
+      config.onError?.(new Error("Chart.js not loaded"));
+      return false;
+    }
+    return true;
+  }
+  function validateCanvas() {
+    const canvas = $id(config.containerId);
+    if (!canvas) {
+      log("error", `Canvas #${config.containerId} not found`);
+      config.onError?.(new Error(`Canvas #${config.containerId} not found`));
+      return null;
+    }
+    return canvas;
+  }
+  function setupAutoRefresh() {
+    if (config.autoRefreshInterval && config.autoRefreshInterval > 0) {
+      if (autoRefreshTimer) {
+        clearInterval(autoRefreshTimer);
+      }
+      autoRefreshTimer = setInterval(async () => {
+        log("log", "Auto-refreshing data...");
+        await instance.refresh(true);
+      }, config.autoRefreshInterval);
+    }
+  }
+  function cleanupAutoRefresh() {
+    if (autoRefreshTimer) {
+      clearInterval(autoRefreshTimer);
+      autoRefreshTimer = null;
+    }
+  }
+  function setupButtonHandlers() {
+    if (config.settingsButtonId && config.onSettingsClick) {
+      const settingsBtn = $id(config.settingsButtonId);
+      if (settingsBtn) {
+        settingsBtn.addEventListener("click", () => {
+          log("log", "Settings button clicked");
+          config.onSettingsClick?.();
+        });
+        log("log", "Settings button handler attached");
+      }
+    }
+    if (config.maximizeButtonId && config.onMaximizeClick) {
+      const maximizeBtn = $id(config.maximizeButtonId);
+      if (maximizeBtn) {
+        maximizeBtn.addEventListener("click", () => {
+          log("log", "Maximize button clicked");
+          config.onMaximizeClick?.();
+        });
+        log("log", "Maximize button handler attached");
+      }
+    }
+    const enableExport = config.enableExport ?? DEFAULT_CONFIG.enableExport;
+    if (enableExport && config.exportButtonId) {
+      const exportBtn = $id(config.exportButtonId);
+      if (exportBtn) {
+        exportBtn.addEventListener("click", () => {
+          log("log", "Export button clicked");
+          if (config.onExportCSV && cachedData) {
+            config.onExportCSV(cachedData);
+          } else {
+            instance.exportCSV();
+          }
+        });
+        log("log", "Export button handler attached");
+      }
+    }
+  }
+  function generateCSVContent(data) {
+    const rows = [];
+    const decimals = config.decimalPlaces ?? DEFAULT_CONFIG.decimalPlaces;
+    if (currentVizMode === "separate" && data.shoppingData && data.shoppingNames) {
+      const shoppingHeaders = Object.keys(data.shoppingData).map(
+        (id) => data.shoppingNames?.[id] || id
+      );
+      rows.push(["Data", ...shoppingHeaders, "Total"].join(";"));
+      data.labels.forEach((label, index) => {
+        const shoppingValues = Object.keys(data.shoppingData).map(
+          (id) => data.shoppingData[id][index].toFixed(decimals)
+        );
+        rows.push([label, ...shoppingValues, data.dailyTotals[index].toFixed(decimals)].join(";"));
+      });
+    } else {
+      rows.push(["Data", `Consumo (${config.unit})`].join(";"));
+      data.labels.forEach((label, index) => {
+        rows.push([label, data.dailyTotals[index].toFixed(decimals)].join(";"));
+      });
+    }
+    const total = data.dailyTotals.reduce((sum, v) => sum + v, 0);
+    const avg = total / data.dailyTotals.length;
+    rows.push("");
+    rows.push(["Total", total.toFixed(decimals)].join(";"));
+    rows.push(["M\xE9dia", avg.toFixed(decimals)].join(";"));
+    return rows.join("\n");
+  }
+  function downloadCSV(content, filename) {
+    const BOM = "\uFEFF";
+    const blob = new Blob([BOM + content], { type: "text/csv;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${filename}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    log("log", `CSV exported: ${filename}.csv`);
+  }
+  function updateTitle() {
+    if (config.titleElementId) {
+      const titleEl = $id(config.titleElementId);
+      if (titleEl) {
+        if (currentPeriod === 0) {
+          titleEl.textContent = `Consumo - Per\xEDodo Personalizado`;
+        } else {
+          titleEl.textContent = `Consumo dos \xFAltimos ${currentPeriod} dias`;
+        }
+      }
+    }
+  }
+  const instance = {
+    async render() {
+      log("log", "Rendering chart...");
+      if (!validateChartJs()) return;
+      const canvas = validateCanvas();
+      if (!canvas) return;
+      try {
+        log("log", `Fetching ${currentPeriod} days of data...`);
+        cachedData = await config.fetchData(currentPeriod);
+        cachedData.fetchTimestamp = Date.now();
+        if (config.onBeforeRender) {
+          cachedData = config.onBeforeRender(cachedData);
+        }
+        if (chartInstance) {
+          chartInstance.destroy();
+          chartInstance = null;
+        }
+        const ctx = canvas.getContext("2d");
+        const chartConfig = buildChartConfig(cachedData);
+        chartInstance = new Chart(ctx, chartConfig);
+        isRendered = true;
+        const yAxisMax = calculateYAxisMax(cachedData.dailyTotals);
+        log("log", `Chart initialized with yAxisMax: ${yAxisMax}`);
+        config.onDataLoaded?.(cachedData);
+        config.onAfterRender?.(chartInstance);
+        setupButtonHandlers();
+        updateTitle();
+        setupAutoRefresh();
+      } catch (error) {
+        log("error", "Failed to render chart:", error);
+        config.onError?.(error instanceof Error ? error : new Error(String(error)));
+      }
+    },
+    async update(data) {
+      if (data) {
+        cachedData = data;
+        cachedData.fetchTimestamp = Date.now();
+      }
+      if (!chartInstance || !cachedData) {
+        log("warn", "Cannot update: chart not initialized or no data");
+        return;
+      }
+      let renderData = cachedData;
+      if (config.onBeforeRender) {
+        renderData = config.onBeforeRender(cachedData);
+      }
+      const chartConfig = buildChartConfig(renderData);
+      chartInstance.data = chartConfig.data;
+      chartInstance.options = chartConfig.options;
+      chartInstance.update("none");
+      log("log", "Chart updated");
+    },
+    setChartType(type) {
+      if (currentChartType === type) return;
+      log("log", `Changing chart type to: ${type}`);
+      currentChartType = type;
+      if (cachedData && chartInstance) {
+        const canvas = validateCanvas();
+        if (canvas) {
+          chartInstance.destroy();
+          const ctx = canvas.getContext("2d");
+          chartInstance = new Chart(ctx, buildChartConfig(cachedData));
+        }
+      }
+    },
+    setVizMode(mode) {
+      if (currentVizMode === mode) return;
+      log("log", `Changing viz mode to: ${mode}`);
+      currentVizMode = mode;
+      if (cachedData) {
+        this.update();
+      }
+    },
+    async setPeriod(days) {
+      if (currentPeriod === days) return;
+      log("log", `Changing period to: ${days} days`);
+      currentPeriod = days;
+      updateTitle();
+      await this.refresh(true);
+    },
+    async refresh(forceRefresh = false) {
+      if (!forceRefresh && cachedData?.fetchTimestamp) {
+        const age = Date.now() - cachedData.fetchTimestamp;
+        const ttl = config.cacheTTL ?? DEFAULT_CONFIG.cacheTTL;
+        if (age < ttl) {
+          log("log", `Using cached data (age: ${Math.round(age / 1e3)}s)`);
+          return;
+        }
+      }
+      log("log", "Refreshing data...");
+      await this.render();
+    },
+    destroy() {
+      log("log", "Destroying chart...");
+      cleanupAutoRefresh();
+      if (chartInstance) {
+        chartInstance.destroy();
+        chartInstance = null;
+      }
+      cachedData = null;
+      isRendered = false;
+    },
+    getChartInstance() {
+      return chartInstance;
+    },
+    getCachedData() {
+      return cachedData;
+    },
+    getState() {
+      return {
+        period: currentPeriod,
+        chartType: currentChartType,
+        vizMode: currentVizMode,
+        theme: currentTheme,
+        isRendered
+      };
+    },
+    exportCSV(filename) {
+      if (!cachedData) {
+        log("warn", "Cannot export: no data available");
+        return;
+      }
+      const defaultFilename = config.exportFilename || `${config.domain}-consumo-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
+      const csvContent = generateCSVContent(cachedData);
+      downloadCSV(csvContent, filename || defaultFilename);
+    },
+    setTheme(theme) {
+      if (currentTheme === theme) return;
+      log("log", `Changing theme to: ${theme}`);
+      currentTheme = theme;
+      if (cachedData && chartInstance) {
+        const canvas = validateCanvas();
+        if (canvas) {
+          chartInstance.destroy();
+          const ctx = canvas.getContext("2d");
+          chartInstance = new Chart(ctx, buildChartConfig(cachedData));
+        }
+      }
+    },
+    setIdealRange(range) {
+      const rangeChanged = JSON.stringify(currentIdealRange) !== JSON.stringify(range);
+      if (!rangeChanged) return;
+      if (range) {
+        log("log", `Setting ideal range: ${range.min} - ${range.max}`);
+      } else {
+        log("log", "Clearing ideal range");
+      }
+      currentIdealRange = range;
+      if (cachedData && chartInstance) {
+        const canvas = validateCanvas();
+        if (canvas) {
+          chartInstance.destroy();
+          const ctx = canvas.getContext("2d");
+          chartInstance = new Chart(ctx, buildChartConfig(cachedData));
+        }
+      }
+    },
+    getIdealRange() {
+      return currentIdealRange;
+    }
+  };
+  return instance;
+}
+
+// src/components/Consumption7DaysChart/createConsumptionModal.ts
+var DOMAIN_CONFIG3 = {
+  energy: { name: "Energia", icon: "\u26A1" },
+  water: { name: "\xC1gua", icon: "\u{1F4A7}" },
+  gas: { name: "G\xE1s", icon: "\u{1F525}" },
+  temperature: { name: "Temperatura", icon: "\u{1F321}\uFE0F" }
+};
+function createConsumptionModal(config) {
+  const modalId = `myio-consumption-modal-${Date.now()}`;
+  let modalElement = null;
+  let chartInstance = null;
+  let headerInstance = null;
+  let currentTheme = config.theme ?? "light";
+  let currentChartType = config.defaultChartType ?? "line";
+  let currentVizMode = config.defaultVizMode ?? "total";
+  let isMaximized = false;
+  const domainCfg = DOMAIN_CONFIG3[config.domain] || { name: config.domain, icon: "\u{1F4CA}" };
+  const title = config.title || `${domainCfg.name} - Hist\xF3rico de Consumo`;
+  function getThemeColors2() {
+    return THEME_COLORS[currentTheme];
+  }
+  function renderModal4() {
+    const colors = getThemeColors2();
+    const exportFormats = config.exportFormats || ["csv"];
+    headerInstance = createModalHeader({
+      id: modalId,
+      title,
+      icon: domainCfg.icon,
+      theme: currentTheme,
+      isMaximized,
+      exportFormats,
+      onExport: (format) => {
+        if (config.onExport) {
+          config.onExport(format);
+        } else {
+          if (format === "csv") {
+            chartInstance?.exportCSV();
+          } else {
+            console.warn(`[ConsumptionModal] Export format "${format}" requires custom onExport handler`);
+          }
+        }
+      },
+      onThemeToggle: (theme) => {
+        currentTheme = theme;
+        chartInstance?.setTheme(currentTheme);
+        updateModal();
+      },
+      onMaximize: (maximized) => {
+        isMaximized = maximized;
+        updateModal();
+      },
+      onClose: () => {
+        instance.close();
+      }
+    });
+    return `
+      <div class="myio-consumption-modal-overlay" style="
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(2px);
+        z-index: 99998;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      ">
+        <div class="myio-consumption-modal-content" style="
+          background: ${colors.chartBackground};
+          border-radius: ${isMaximized ? "0" : "10px"};
+          width: ${isMaximized ? "100%" : "95%"};
+          max-width: ${isMaximized ? "100%" : "1200px"};
+          height: ${isMaximized ? "100%" : "85vh"};
+          display: flex;
+          flex-direction: column;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          overflow: hidden;
+        ">
+          <!-- MyIO Premium Header (using ModalHeader component) -->
+          ${headerInstance.render()}
+
+          <!-- Controls Bar -->
+          <div class="myio-consumption-modal-controls" style="
+            display: flex;
+            gap: 16px;
+            padding: 12px 16px;
+            background: ${currentTheme === "dark" ? "#374151" : "#f7f7f7"};
+            border-bottom: 1px solid ${colors.border};
+            align-items: center;
+            flex-wrap: wrap;
+          ">
+            <!-- Viz Mode Tabs -->
+            <div style="display: flex; gap: 2px; background: ${currentTheme === "dark" ? "#4b5563" : "#e5e7eb"}; border-radius: 8px; padding: 2px;">
+              <button id="${modalId}-viz-total" style="
+                padding: 6px 12px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                cursor: pointer;
+                transition: all 0.2s;
+                background: ${currentVizMode === "total" ? "#3e1a7d" : "transparent"};
+                color: ${currentVizMode === "total" ? "white" : colors.text};
+              ">Consolidado</button>
+              <button id="${modalId}-viz-separate" style="
+                padding: 6px 12px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                cursor: pointer;
+                transition: all 0.2s;
+                background: ${currentVizMode === "separate" ? "#3e1a7d" : "transparent"};
+                color: ${currentVizMode === "separate" ? "white" : colors.text};
+              ">Por Shopping</button>
+            </div>
+
+            <!-- Chart Type Tabs -->
+            <div style="display: flex; gap: 2px; background: ${currentTheme === "dark" ? "#4b5563" : "#e5e7eb"}; border-radius: 8px; padding: 2px;">
+              <button id="${modalId}-type-line" style="
+                padding: 6px 12px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                cursor: pointer;
+                transition: all 0.2s;
+                background: ${currentChartType === "line" ? "#3e1a7d" : "transparent"};
+                color: ${currentChartType === "line" ? "white" : colors.text};
+              ">Linhas</button>
+              <button id="${modalId}-type-bar" style="
+                padding: 6px 12px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                cursor: pointer;
+                transition: all 0.2s;
+                background: ${currentChartType === "bar" ? "#3e1a7d" : "transparent"};
+                color: ${currentChartType === "bar" ? "white" : colors.text};
+              ">Barras</button>
+            </div>
+          </div>
+
+          <!-- Chart Container -->
+          <div style="
+            flex: 1;
+            padding: 16px;
+            min-height: 0;
+            position: relative;
+            background: ${colors.chartBackground};
+          ">
+            <canvas id="${modalId}-chart" style="width: 100%; height: 100%;"></canvas>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  function setupListeners() {
+    if (!modalElement) return;
+    headerInstance?.attachListeners();
+    document.getElementById(`${modalId}-viz-total`)?.addEventListener("click", () => {
+      currentVizMode = "total";
+      chartInstance?.setVizMode("total");
+      updateControlStyles();
+    });
+    document.getElementById(`${modalId}-viz-separate`)?.addEventListener("click", () => {
+      currentVizMode = "separate";
+      chartInstance?.setVizMode("separate");
+      updateControlStyles();
+    });
+    document.getElementById(`${modalId}-type-line`)?.addEventListener("click", () => {
+      currentChartType = "line";
+      chartInstance?.setChartType("line");
+      updateControlStyles();
+    });
+    document.getElementById(`${modalId}-type-bar`)?.addEventListener("click", () => {
+      currentChartType = "bar";
+      chartInstance?.setChartType("bar");
+      updateControlStyles();
+    });
+    modalElement.querySelector(".myio-consumption-modal-overlay")?.addEventListener("click", (e) => {
+      if (e.target.classList.contains("myio-consumption-modal-overlay")) {
+        instance.close();
+      }
+    });
+    const handleKeydown = (e) => {
+      if (e.key === "Escape") {
+        instance.close();
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    modalElement.__handleKeydown = handleKeydown;
+  }
+  function updateControlStyles() {
+    const colors = getThemeColors2();
+    const vizTotalBtn = document.getElementById(`${modalId}-viz-total`);
+    const vizSeparateBtn = document.getElementById(`${modalId}-viz-separate`);
+    if (vizTotalBtn) {
+      vizTotalBtn.style.background = currentVizMode === "total" ? "#3e1a7d" : "transparent";
+      vizTotalBtn.style.color = currentVizMode === "total" ? "white" : colors.text;
+    }
+    if (vizSeparateBtn) {
+      vizSeparateBtn.style.background = currentVizMode === "separate" ? "#3e1a7d" : "transparent";
+      vizSeparateBtn.style.color = currentVizMode === "separate" ? "white" : colors.text;
+    }
+    const typeLineBtn = document.getElementById(`${modalId}-type-line`);
+    const typeBarBtn = document.getElementById(`${modalId}-type-bar`);
+    if (typeLineBtn) {
+      typeLineBtn.style.background = currentChartType === "line" ? "#3e1a7d" : "transparent";
+      typeLineBtn.style.color = currentChartType === "line" ? "white" : colors.text;
+    }
+    if (typeBarBtn) {
+      typeBarBtn.style.background = currentChartType === "bar" ? "#3e1a7d" : "transparent";
+      typeBarBtn.style.color = currentChartType === "bar" ? "white" : colors.text;
+    }
+  }
+  function updateModal() {
+    if (!modalElement) return;
+    const cachedData = chartInstance?.getCachedData();
+    headerInstance?.destroy();
+    chartInstance?.destroy();
+    modalElement.innerHTML = renderModal4();
+    setupListeners();
+    if (cachedData) {
+      chartInstance = createConsumption7DaysChart({
+        ...config,
+        containerId: `${modalId}-chart`,
+        theme: currentTheme,
+        defaultChartType: currentChartType,
+        defaultVizMode: currentVizMode
+      });
+      chartInstance.update(cachedData);
+    }
+  }
+  const instance = {
+    async open() {
+      modalElement = document.createElement("div");
+      modalElement.id = modalId;
+      modalElement.innerHTML = renderModal4();
+      const container = config.container || document.body;
+      container.appendChild(modalElement);
+      setupListeners();
+      chartInstance = createConsumption7DaysChart({
+        ...config,
+        containerId: `${modalId}-chart`,
+        theme: currentTheme,
+        defaultChartType: currentChartType,
+        defaultVizMode: currentVizMode
+      });
+      await chartInstance.render();
+    },
+    close() {
+      if (modalElement) {
+        const handleKeydown = modalElement.__handleKeydown;
+        if (handleKeydown) {
+          document.removeEventListener("keydown", handleKeydown);
+        }
+        headerInstance?.destroy();
+        headerInstance = null;
+        chartInstance?.destroy();
+        chartInstance = null;
+        modalElement.remove();
+        modalElement = null;
+        config.onClose?.();
+      }
+    },
+    getChart() {
+      return chartInstance;
+    },
+    destroy() {
+      instance.close();
+    }
+  };
+  return instance;
+}
+
+// src/components/ExportData/index.ts
+var DEFAULT_COLORS3 = {
+  primary: "#3e1a7d",
+  // MyIO purple
+  secondary: "#6b4c9a",
+  // Light purple
+  accent: "#00bcd4",
+  // Cyan accent
+  background: "#ffffff",
+  // White
+  text: "#333333",
+  // Dark gray
+  chartColors: ["#3e1a7d", "#00bcd4", "#4caf50", "#ff9800", "#e91e63", "#9c27b0"]
+};
+var DOMAIN_ICONS = {
+  energy: "\u26A1",
+  // Lightning bolt
+  water: "\u{1F4A7}",
+  // Water drop
+  temperature: "\u{1F321}\uFE0F"
+  // Thermometer
+};
+var DOMAIN_LABELS = {
+  energy: "Energia",
+  water: "\xC1gua",
+  temperature: "Temperatura"
+};
+var DOMAIN_LABELS_EN = {
+  energy: "Energy",
+  water: "Water",
+  temperature: "Temperature"
+};
+var DOMAIN_UNITS = {
+  energy: "kWh",
+  water: "m\xB3",
+  temperature: "\xB0C"
+};
+var CSV_SEPARATORS = {
+  "pt-BR": ";",
+  "en-US": ",",
+  "default": ";"
+};
+function formatDateForFilename(date) {
+  const pad = (n) => n.toString().padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}-${pad(date.getHours())}-${pad(date.getMinutes())}-${pad(date.getSeconds())}`;
+}
+function sanitizeFilename(str) {
+  return str.replace(/[<>:"/\\|?*]/g, "").replace(/\s+/g, "_").substring(0, 50);
+}
+function generateFilename(data, config) {
+  const timestamp = formatDateForFilename(/* @__PURE__ */ new Date());
+  const domainLabel = DOMAIN_LABELS_EN[config.domain].toUpperCase();
+  const ext = config.formatExport;
+  let baseName = "export";
+  if ("device" in data && data.device) {
+    const device = data.device;
+    const label = device.label || device.name || "device";
+    const identifier = device.identifier ? `-${device.identifier}` : "";
+    baseName = `${sanitizeFilename(label)}${identifier}`;
+  } else if ("customer" in data && data.customer?.customerName) {
+    baseName = sanitizeFilename(data.customer.customerName);
+  } else if ("groupName" in data) {
+    baseName = sanitizeFilename(data.groupName);
+  }
+  return `${baseName}-${domainLabel}-${timestamp}.${ext}`;
+}
+function normalizeTimestamp(ts) {
+  if (ts instanceof Date) return ts;
+  if (typeof ts === "number") return new Date(ts);
+  return new Date(ts);
+}
+function calculateStats2(dataPoints) {
+  if (dataPoints.length === 0) {
+    return { min: 0, max: 0, average: 0, sum: 0, count: 0 };
+  }
+  const values = dataPoints.map((d) => d.value);
+  const sum = values.reduce((a, b) => a + b, 0);
+  return {
+    min: Math.min(...values),
+    max: Math.max(...values),
+    average: sum / values.length,
+    sum,
+    count: values.length
+  };
+}
+function formatNumber2(value, locale, decimals = 2) {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  }).format(value);
+}
+function formatDate3(date, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(date);
+}
+function generateCSV(data, config) {
+  const sep = CSV_SEPARATORS[config.locale] || CSV_SEPARATORS["default"];
+  const rows = [];
+  const escapeCSV = (val) => {
+    const str = String(val ?? "");
+    if (str.includes(sep) || str.includes('"') || str.includes("\n")) {
+      return `"${str.replace(/"/g, '""')}"`;
+    }
+    return str;
+  };
+  const formatNumCSV = (val) => {
+    return formatNumber2(val, config.locale);
+  };
+  if ("device" in data && "data" in data && Array.isArray(data.data)) {
+    const deviceData = data;
+    rows.push(["Timestamp", config.domainLabel, `Unit (${config.domainUnit})`]);
+    for (const point of deviceData.data) {
+      const ts = normalizeTimestamp(point.timestamp);
+      rows.push([
+        formatDate3(ts, config.locale),
+        formatNumCSV(point.value),
+        point.unit || config.domainUnit
+      ]);
+    }
+    if (config.includeStats) {
+      const stats = calculateStats2(deviceData.data);
+      rows.push([]);
+      rows.push(["Statistics", "", ""]);
+      rows.push(["Minimum", formatNumCSV(stats.min), config.domainUnit]);
+      rows.push(["Maximum", formatNumCSV(stats.max), config.domainUnit]);
+      rows.push(["Average", formatNumCSV(stats.average), config.domainUnit]);
+      rows.push(["Total", formatNumCSV(stats.sum), config.domainUnit]);
+      rows.push(["Count", String(stats.count), "points"]);
+    }
+  } else if ("devices" in data && Array.isArray(data.devices)) {
+    const compData = data;
+    const deviceHeaders = compData.devices.map(
+      (d) => d.device.label || d.device.name || "Device"
+    );
+    rows.push(["Timestamp", ...deviceHeaders]);
+    const allTimestamps = /* @__PURE__ */ new Set();
+    compData.devices.forEach((d) => {
+      d.data.forEach((point) => {
+        allTimestamps.add(normalizeTimestamp(point.timestamp).getTime());
+      });
+    });
+    const sortedTimestamps = Array.from(allTimestamps).sort((a, b) => a - b);
+    for (const ts of sortedTimestamps) {
+      const row = [formatDate3(new Date(ts), config.locale)];
+      for (const device of compData.devices) {
+        const point = device.data.find(
+          (p) => normalizeTimestamp(p.timestamp).getTime() === ts
+        );
+        row.push(point ? formatNumCSV(point.value) : "");
+      }
+      rows.push(row);
+    }
+  }
+  return rows.map((row) => row.map(escapeCSV).join(sep)).join("\r\n");
+}
+function generateXLSX(data, config) {
+  return generateCSV(data, config);
+}
+function generatePDFContent(data, config) {
+  const { colors, domainIcon, domainLabel, domainUnit, locale, includeStats, includeChart } = config;
+  let deviceLabel = "Export";
+  let customerName = "";
+  let identifier = "";
+  let dataPoints = [];
+  if ("device" in data && "data" in data) {
+    const deviceData = data;
+    deviceLabel = deviceData.device.label || deviceData.device.name || "Device";
+    identifier = deviceData.device.identifier || "";
+    customerName = deviceData.customer?.customerName || "";
+    dataPoints = deviceData.data;
+  }
+  const stats = calculateStats2(dataPoints);
+  const tableRows = dataPoints.slice(0, 100).map((point) => {
+    const ts = normalizeTimestamp(point.timestamp);
+    return `
+      <tr>
+        <td style="padding: 8px; border-bottom: 1px solid #eee;">${formatDate3(ts, locale)}</td>
+        <td style="padding: 8px; border-bottom: 1px solid #eee; text-align: right;">${formatNumber2(point.value, locale)}</td>
+        <td style="padding: 8px; border-bottom: 1px solid #eee;">${point.unit || domainUnit}</td>
+      </tr>
+    `;
+  }).join("");
+  const statsSection = includeStats ? `
+    <div style="margin-top: 24px; padding: 16px; background: #f5f5f5; border-radius: 8px;">
+      <h3 style="margin: 0 0 12px 0; color: ${colors.primary};">Statistics</h3>
+      <table style="width: 100%;">
+        <tr>
+          <td><strong>Minimum:</strong></td>
+          <td>${formatNumber2(stats.min, locale)} ${domainUnit}</td>
+          <td><strong>Maximum:</strong></td>
+          <td>${formatNumber2(stats.max, locale)} ${domainUnit}</td>
+        </tr>
+        <tr>
+          <td><strong>Average:</strong></td>
+          <td>${formatNumber2(stats.average, locale)} ${domainUnit}</td>
+          <td><strong>Total:</strong></td>
+          <td>${formatNumber2(stats.sum, locale)} ${domainUnit}</td>
+        </tr>
+      </table>
+    </div>
+  ` : "";
+  return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="UTF-8">
+      <title>${deviceLabel} - ${domainLabel} Report</title>
+      <style>
+        body {
+          font-family: 'Roboto', Arial, sans-serif;
+          margin: 0;
+          padding: 24px;
+          color: ${colors.text};
+          background: ${colors.background};
+        }
+        .header {
+          background: ${colors.primary};
+          color: white;
+          padding: 20px;
+          border-radius: 8px;
+          margin-bottom: 24px;
+        }
+        .header h1 {
+          margin: 0;
+          font-size: 24px;
+        }
+        .header .subtitle {
+          opacity: 0.9;
+          margin-top: 8px;
+        }
+        .device-info {
+          display: flex;
+          gap: 16px;
+          margin-bottom: 16px;
+          padding: 12px;
+          background: #f5f5f5;
+          border-radius: 8px;
+        }
+        .device-info span {
+          padding: 4px 12px;
+          background: ${colors.secondary};
+          color: white;
+          border-radius: 4px;
+          font-size: 14px;
+        }
+        table {
+          width: 100%;
+          border-collapse: collapse;
+        }
+        th {
+          background: ${colors.primary};
+          color: white;
+          padding: 12px 8px;
+          text-align: left;
+        }
+        th:nth-child(2) {
+          text-align: right;
+        }
+        .footer {
+          margin-top: 24px;
+          padding-top: 16px;
+          border-top: 1px solid #eee;
+          text-align: center;
+          font-size: 12px;
+          color: #999;
+        }
+        @media print {
+          body { padding: 0; }
+          .header { border-radius: 0; }
+        }
+      </style>
+    </head>
+    <body>
+      <div class="header">
+        <h1>${domainIcon} ${deviceLabel}</h1>
+        <div class="subtitle">${domainLabel} Report - Generated ${formatDate3(/* @__PURE__ */ new Date(), locale)}</div>
+      </div>
+
+      ${customerName ? `<div class="customer-name" style="margin-bottom: 16px; font-size: 18px;"><strong>Customer:</strong> ${customerName}</div>` : ""}
+
+      ${identifier ? `
+        <div class="device-info">
+          <span>ID: ${identifier}</span>
+          <span>Domain: ${domainLabel}</span>
+          <span>Unit: ${domainUnit}</span>
+        </div>
+      ` : ""}
+
+      <table>
+        <thead>
+          <tr>
+            <th>Timestamp</th>
+            <th>${domainLabel} (${domainUnit})</th>
+            <th>Unit</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${tableRows}
+          ${dataPoints.length > 100 ? `<tr><td colspan="3" style="text-align: center; padding: 16px; color: #999;">... and ${dataPoints.length - 100} more rows</td></tr>` : ""}
+        </tbody>
+      </table>
+
+      ${statsSection}
+
+      <div class="footer">
+        <p>${config.footerText || "Generated by MyIO Platform"}</p>
+      </div>
+    </body>
+    </html>
+  `;
+}
+function buildTemplateExport(params) {
+  const {
+    domain,
+    formatExport,
+    typeExport,
+    colorsPallet,
+    locale = "pt-BR",
+    includeChart = formatExport === "pdf",
+    includeStats = true,
+    headerText,
+    footerText
+  } = params;
+  const colors = {
+    ...DEFAULT_COLORS3,
+    ...colorsPallet,
+    chartColors: colorsPallet?.chartColors || DEFAULT_COLORS3.chartColors
+  };
+  return {
+    domain,
+    formatExport,
+    typeExport,
+    colors,
+    locale,
+    includeChart,
+    includeStats,
+    headerText: headerText || `${DOMAIN_LABELS[domain]} Report`,
+    footerText: footerText || "Generated by MyIO Platform",
+    domainIcon: DOMAIN_ICONS[domain],
+    domainLabel: DOMAIN_LABELS[domain],
+    domainUnit: DOMAIN_UNITS[domain]
+  };
+}
+function myioExportData(data, config, options) {
+  const filename = generateFilename(data, config);
+  let allDataPoints = [];
+  if ("data" in data && Array.isArray(data.data)) {
+    allDataPoints = data.data;
+  } else if ("devices" in data && Array.isArray(data.devices)) {
+    allDataPoints = data.devices.flatMap((d) => d.data);
+  }
+  const stats = calculateStats2(allDataPoints);
+  const instance = {
+    async export() {
+      try {
+        options?.onProgress?.(10, "Generating content...");
+        let content;
+        let mimeType;
+        let finalFilename = filename;
+        switch (config.formatExport) {
+          case "csv":
+            content = generateCSV(data, config);
+            mimeType = "text/csv;charset=utf-8;";
+            break;
+          case "xlsx":
+            content = generateXLSX(data, config);
+            mimeType = "text/csv;charset=utf-8;";
+            finalFilename = filename.replace(".xlsx", ".csv");
+            break;
+          case "pdf":
+            content = generatePDFContent(data, config);
+            mimeType = "text/html;charset=utf-8;";
+            finalFilename = filename.replace(".pdf", ".html");
+            break;
+          default:
+            throw new Error(`Unsupported format: ${config.formatExport}`);
+        }
+        options?.onProgress?.(80, "Creating file...");
+        const bom = config.formatExport === "csv" ? "\uFEFF" : "";
+        const blob = new Blob([bom + content], { type: mimeType });
+        options?.onProgress?.(100, "Export complete");
+        return {
+          success: true,
+          filename: finalFilename,
+          blob,
+          dataUrl: URL.createObjectURL(blob)
+        };
+      } catch (error) {
+        return {
+          success: false,
+          filename,
+          error: error instanceof Error ? error.message : "Unknown error"
+        };
+      }
+    },
+    async download() {
+      const result = await this.export();
+      if (!result.success || !result.blob) {
+        console.error("Export failed:", result.error);
+        return;
+      }
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(result.blob);
+      link.download = result.filename;
+      link.style.display = "none";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
+    },
+    async preview() {
+      if (config.formatExport !== "pdf") {
+        return null;
+      }
+      const result = await this.export();
+      return result.dataUrl || null;
+    },
+    getStats() {
+      return stats;
+    },
+    getFilename() {
+      return filename;
+    }
+  };
+  if (options?.autoDownload) {
+    instance.download();
+  }
+  return instance;
+}
+var EXPORT_DEFAULT_COLORS = DEFAULT_COLORS3;
+var EXPORT_DOMAIN_ICONS = DOMAIN_ICONS;
+var EXPORT_DOMAIN_LABELS = DOMAIN_LABELS;
+var EXPORT_DOMAIN_UNITS = DOMAIN_UNITS;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CHART_COLORS,
+  CONSUMPTION_CHART_COLORS,
+  CONSUMPTION_CHART_DEFAULTS,
+  CONSUMPTION_THEME_COLORS,
   ConnectionStatusType,
   DEFAULT_CLAMP_RANGE,
   DeviceStatusType,
+  EXPORT_DEFAULT_COLORS,
+  EXPORT_DOMAIN_ICONS,
+  EXPORT_DOMAIN_LABELS,
+  EXPORT_DOMAIN_UNITS,
   MyIOChartModal,
   MyIODraggableCard,
   MyIOSelectionStore,
@@ -22481,11 +24425,13 @@ function openTemperatureSettingsModal(params) {
   averageByDay,
   buildListItemsThingsboardByUniqueDatasource,
   buildMyioIngestionAuth,
+  buildTemplateExport,
   buildWaterReportCSV,
   buildWaterStoresCSV,
   calcDeltaPercent,
   calculateDeviceStatus,
   calculateDeviceStatusWithRanges,
+  calculateExportStats,
   calculateStats,
   clampTemperature,
   classify,
@@ -22493,8 +24439,11 @@ function openTemperatureSettingsModal(params) {
   classifyWaterLabels,
   clearAllAuthCaches,
   connectionStatusIcons,
+  createConsumption7DaysChart,
+  createConsumptionModal,
   createDateRangePicker,
   createInputDateRangePickerInsideDIV,
+  createModalHeader,
   decodePayload,
   decodePayloadBase64Xor,
   detectDeviceType,
@@ -22508,6 +24457,7 @@ function openTemperatureSettingsModal(params) {
   fetchThingsboardCustomerAttrsFromStorage,
   fetchThingsboardCustomerServerScopeAttrs,
   findValue,
+  findValueWithDefault,
   fmtPerc,
   fmtPercLegacy,
   formatAllInSameUnit,
@@ -22515,18 +24465,24 @@ function openTemperatureSettingsModal(params) {
   formatDateForInput,
   formatDateToYMD,
   formatDateWithTimezoneOffset,
+  formatDuration,
   formatEnergy,
   formatNumberReadable,
+  formatRelativeTime,
   formatTankHeadFromCm,
   formatTemperature,
+  formatWater,
   formatWaterByGroup,
   formatWaterVolumeM3,
+  formatarDuracao,
+  generateExportFilename,
   getAuthCacheStats,
   getAvailableContexts,
   getConnectionStatusIcon,
   getDateRangeArray,
   getDeviceStatusIcon,
   getDeviceStatusInfo,
+  getModalHeaderStyles,
   getSaoPauloISOString,
   getSaoPauloISOStringFixed,
   getValueByDatakey,
@@ -22538,8 +24494,10 @@ function openTemperatureSettingsModal(params) {
   isValidConnectionStatus,
   isValidDeviceStatus,
   isWaterCategory,
+  mapConnectionStatus,
   mapDeviceStatusToCardStatus,
   mapDeviceToConnectionStatus,
+  myioExportData,
   normalizeRecipients,
   numbers,
   openDashboardPopup,