myio-js-library 0.1.28 → 0.1.30

package/dist/index.cjs

@@ -1297,39 +1297,77 @@ function findValue(data, keyOrPath, legacyDataKey) {
 }
 
 // src/utils/deviceType.js
+function normalize(str) {
+  if (typeof str !== "string") return "";
+  let normalized = str.toUpperCase().trim();
+  normalized = normalized.replace(/[ÀÁÂÃÄÅ]/g, "A").replace(/[ÈÉÊË]/g, "E").replace(/[ÌÍÎÏ]/g, "I").replace(/[ÒÓÔÕÖ]/g, "O").replace(/[ÙÚÛÜ]/g, "U").replace(/[Ç]/g, "C").replace(/[Ñ]/g, "N");
+  normalized = normalized.replace(/\s+/g, " ");
+  return normalized;
+}
+function matchCaixaDAgua(normalizedStr) {
+  if (normalizedStr.includes("SCD")) return true;
+  const caixaVariants = [
+    "CAIXA D'AGUA",
+    "CAIXA D AGUA",
+    "CAIXA_D_AGUA",
+    "CAIXA DAGUA"
+  ];
+  return caixaVariants.some((variant) => normalizedStr.includes(variant));
+}
 var contexts = {
   building: (name) => {
-    const upper = name.toUpperCase();
-    if (upper.includes("COMPRESSOR")) return "COMPRESSOR";
-    if (upper.includes("VENT")) return "VENTILADOR";
-    if (upper.includes("AUTOMATICO") || upper.includes("AUTOM\xC1TICO")) return "SELETOR_AUTO_MANUAL";
-    if (upper.includes("TERMOSTATO")) return "TERMOSTATO";
-    if (upper.includes("3F")) return "3F_MEDIDOR";
-    if (upper.includes("TERMO") || upper.includes("TEMP")) return "TERMOSTATO";
-    if (upper.includes("HIDR")) return "HIDROMETRO";
-    if (upper.includes("ABRE")) return "SOLENOIDE";
-    if (upper.includes("RECALQUE")) return "MOTOR";
-    if (upper.includes("AUTOMACAO") || upper.includes("AUTOMA\xC7\xC3O")) return "GLOBAL_AUTOMACAO";
-    if (upper.includes("AC")) return "CONTROLE REMOTO";
-    if (upper.includes("SCD")) return "CAIXA_D_AGUA";
+    const normalized = normalize(name);
+    const rules = [
+      { test: (s) => s.includes("COMPRESSOR"), type: "COMPRESSOR" },
+      { test: (s) => s.includes("VENT"), type: "VENTILADOR" },
+      { test: (s) => s.includes("AUTOMATICO"), type: "SELETOR_AUTO_MANUAL" },
+      { test: (s) => s.includes("ESRL"), type: "ESCADA_ROLANTE" },
+      { test: (s) => s.includes("ESCADA"), type: "ESCADA_ROLANTE" },
+      { test: (s) => s.includes("ELEV"), type: "ELEVADOR" },
+      { test: (s) => s.includes("MOTR") || s.includes("RECALQUE"), type: "MOTOR" },
+      { test: (s) => s.includes("TERMOSTATO"), type: "TERMOSTATO" },
+      { test: (s) => s.includes("TERMO") || s.includes("TEMP"), type: "TERMOSTATO" },
+      { test: (s) => s.includes("3F"), type: "3F_MEDIDOR" },
+      { test: (s) => s.includes("HIDR"), type: "HIDROMETRO" },
+      { test: (s) => s.includes("ABRE"), type: "SOLENOIDE" },
+      { test: (s) => matchCaixaDAgua(s), type: "CAIXA_D_AGUA" },
+      { test: (s) => s.includes("AUTOMACAO") || s.includes("GW_AUTO"), type: "GLOBAL_AUTOMACAO" },
+      { test: (s) => s.includes("AC"), type: "CONTROLE REMOTO" }
+    ];
+    for (const rule of rules) {
+      if (rule.test(normalized)) {
+        return rule.type;
+      }
+    }
     return "default";
   },
   mall: (name) => {
-    const upper = name.toUpperCase();
-    if (upper.includes("CHILLER")) return "CHILLER";
-    if (upper.includes("ESCADA")) return "ESCADA_ROLANTE";
-    if (upper.includes("LOJA")) return "LOJA_SENSOR";
-    if (upper.includes("ILUMINACAO") || upper.includes("ILUMINA\xC7\xC3O")) return "ILUMINACAO";
+    const normalized = normalize(name);
+    const rules = [
+      { test: (s) => s.includes("CHILLER"), type: "CHILLER" },
+      { test: (s) => s.includes("ESCADA"), type: "ESCADA_ROLANTE" },
+      { test: (s) => s.includes("LOJA"), type: "LOJA_SENSOR" },
+      { test: (s) => s.includes("ILUMINACAO"), type: "ILUMINACAO" }
+    ];
+    for (const rule of rules) {
+      if (rule.test(normalized)) {
+        return rule.type;
+      }
+    }
     return "default";
   }
 };
+var warnedContexts = /* @__PURE__ */ new Set();
 function detectDeviceType(name, context = "building") {
   if (typeof name !== "string") {
     throw new Error("Device name must be a string.");
   }
   const detectFunction = contexts[context];
   if (!detectFunction) {
-    console.warn(`[myio-js-library] Context "${context}" not found. Using default fallback.`);
+    if (!warnedContexts.has(context)) {
+      console.warn(`[myio-js-library] Context "${context}" not found. Using default fallback.`);
+      warnedContexts.add(context);
+    }
     return contexts.building(name);
   }
   return detectFunction(name);
@@ -2112,6 +2150,85 @@ function renderCardComponentV2({
     timeVal,
     valType
   } = entityObject;
+  const MyIOToast = (function() {
+    let toastContainer = null;
+    let toastTimeout = null;
+    const TOAST_CSS = `
+          #myio-global-toast-container {
+              position: fixed;
+              top: 25px;
+              right: 25px;
+              z-index: 99999;
+              width: 320px;
+              padding: 16px;
+              border-radius: 8px;
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+              font-size: 15px;
+              color: #fff;
+              transform: translateX(120%);
+              transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+              border-left: 5px solid transparent;
+              display: flex;
+              align-items: center;
+          }
+          #myio-global-toast-container.show {
+              transform: translateX(0);
+          }
+          #myio-global-toast-container.warning {
+              background-color: #ff9800; /* Laranja para alerta */
+              border-color: #f57c00;
+          }
+          #myio-global-toast-container.error {
+              background-color: #d32f2f; /* Vermelho para erro */
+              border-color: #b71c1c;
+          }
+          #myio-global-toast-container::before {
+              content: '\u26A0\uFE0F'; /* \xCDcone de alerta */
+              margin-right: 12px;
+              font-size: 20px;
+          }
+          #myio-global-toast-container.error::before {
+              content: '\u{1F6AB}'; /* \xCDcone de erro */
+          }
+      `;
+    function createToastElement() {
+      if (document.getElementById("myio-global-toast-container")) {
+        toastContainer = document.getElementById("myio-global-toast-container");
+        return;
+      }
+      const style = document.createElement("style");
+      style.id = "myio-global-toast-styles";
+      style.textContent = TOAST_CSS;
+      document.head.appendChild(style);
+      toastContainer = document.createElement("div");
+      toastContainer.id = "myio-global-toast-container";
+      document.body.appendChild(toastContainer);
+    }
+    function show(message, type = "warning", duration = 3500) {
+      if (!toastContainer) {
+        createToastElement();
+      }
+      clearTimeout(toastTimeout);
+      toastContainer.textContent = message;
+      toastContainer.className = "";
+      toastContainer.classList.add(type);
+      setTimeout(() => {
+        toastContainer.classList.add("show");
+      }, 10);
+      toastTimeout = setTimeout(() => {
+        toastContainer.classList.remove("show");
+      }, duration);
+    }
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", createToastElement);
+    } else {
+      createToastElement();
+    }
+    return {
+      show
+    };
+  })();
   if (!useNewComponents) {
     return renderCardComponentLegacy({
       entityObject,
@@ -2184,10 +2301,31 @@ function renderCardComponentV2({
     const normalizedType = deviceType2?.toUpperCase() || "";
     return typeMap[normalizedType] || "generic";
   };
-  const determineUnit = (valType2, val2) => {
+  const isEnergyDevice = (valType2, deviceType2) => {
+    if (valType2 === "ENERGY") {
+      return true;
+    }
+    const energyDeviceTypes = ["MOTOR", "3F_MEDIDOR", "RELOGIO", "ENTRADA"];
+    const normalizedType = deviceType2?.toUpperCase() || "";
+    return energyDeviceTypes.includes(normalizedType);
+  };
+  const formatCardValue = (value, valType2, deviceType2) => {
+    const numValue = Number(value) || 0;
+    if (isEnergyDevice(valType2, deviceType2)) {
+      return formatEnergy(numValue);
+    } else {
+      const unit = determineUnit(valType2, numValue, deviceType2);
+      const formattedValue = numValue.toLocaleString("pt-BR", {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2
+      });
+      return `${formattedValue} ${unit}`;
+    }
+  };
+  const determineUnit = (valType2, val2, deviceType2) => {
     switch (valType2) {
       case "ENERGY":
-        return "kWh";
+        return "";
       case "WATER":
         return "m\xB3";
       case "TANK":
@@ -2485,7 +2623,7 @@ function renderCardComponentV2({
                   <span class="flash-icon ${shouldFlashIcon ? "flash" : ""}">
                     ${icon}
                   </span>
-                  <span class="consumption-value">${cardEntity.lastValue.toLocaleString("pt-BR", { minimumFractionDigits: 0, maximumFractionDigits: 2 })} ${cardEntity.unit}</span>
+                  <span class="consumption-value">${formatCardValue(cardEntity.lastValue, valType, deviceType)}</span>
                   <span class="device-title-percent">(${perc.toFixed(1)}%)</span>
                 </div>
               </div>
@@ -2938,6 +3076,14 @@ function renderCardComponentV2({
       checkbox.addEventListener("change", (e) => {
         e.stopPropagation();
         if (e.target.checked) {
+          const currentCount = MyIOSelectionStore.getSelectedEntities().length;
+          const isTryingToAdd = e.target.checked;
+          if (isTryingToAdd && currentCount >= 6) {
+            e.preventDefault();
+            e.target.checked = false;
+            MyIOToast.show("N\xE3o \xE9 poss\xEDvel selecionar mais de 6 itens.", "warning");
+            return;
+          }
           MyIOSelectionStore.add(entityId);
         } else {
           MyIOSelectionStore.remove(entityId);
@@ -4123,7 +4269,10 @@ var MyIOChartModalClass = class {
     const store = this._getSelectionStore();
     if (store) {
       store.on("comparison:open", (data) => this.open(data));
-      store.on("comparison:too_many", (data) => this._showTooManyEntitiesWarning(data));
+      store.on(
+        "comparison:too_many",
+        (data) => this._showTooManyEntitiesWarning(data)
+      );
     }
   }
   async _createModal() {
@@ -4148,74 +4297,166 @@ var MyIOChartModalClass = class {
   _generateModalHTML() {
     const { entities, totals, count } = this.currentData;
     return `
-      <div class="chart-modal-container">
-        <div class="chart-modal-header">
-          <h2 id="chart-modal-title">Comparativo de Dispositivos (${count} selecionados)</h2>
-          <button class="chart-modal-close" aria-label="Fechar modal">\xD7</button>
+    <div class="chart-modal-container" 
+      style="
+        background: rgba(20, 20, 20, 0.95);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 16px;
+        padding: 20px;
+        max-width: 900px;
+        margin: auto;
+        color: #fff;
+        font-family: Arial, sans-serif;
+        box-shadow: 0 8px 30px rgba(0,0,0,0.5);
+      ">
+      
+      <div class="chart-modal-header" 
+        style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+        <h2 id="chart-modal-title" 
+          style="font-size: 20px; font-weight: bold; margin: 0; color: #fff;">
+          Comparativo de Dispositivos (${count} selecionados)
+        </h2>
+        <button class="chart-modal-close" aria-label="Fechar modal"
+          style="background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 5px; transition: 0.3s;">
+          \xD7
+        </button>
+      </div>
+      
+      <div class="chart-modal-controls" 
+        style="display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;">
+        
+        <div class="chart-type-controls" style="flex: 1; min-width: 180px;">
+          <label style="display: block; margin-bottom: 6px; color: rgba(255,255,255,0.8); font-size: 14px;">
+            Tipo de Gr\xE1fico:
+          </label>
+          <select class="chart-type-select" aria-label="Selecionar tipo de gr\xE1fico"
+            style="width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); 
+            background: rgba(255,255,255,0.08); color: #fff; outline: none; cursor: pointer;">
+            <option value="line" ${this.chartConfig.type === "line" ? "selected" : ""}>Linha</option>
+            <option value="bar" ${this.chartConfig.type === "bar" ? "selected" : ""}>Barras</option>
+          </select>
         </div>
         
-        <div class="chart-modal-controls">
-          <div class="chart-type-controls">
-            <label>Tipo de Gr\xE1fico:</label>
-            <select class="chart-type-select" aria-label="Selecionar tipo de gr\xE1fico">
-              <option value="line" ${this.chartConfig.type === "line" ? "selected" : ""}>Linha</option>
-              <option value="bar" ${this.chartConfig.type === "bar" ? "selected" : ""}>Barras</option>
-            </select>
-          </div>
-          
-          <div class="chart-range-controls">
-            <label>Per\xEDodo:</label>
-            <select class="chart-range-select" aria-label="Selecionar per\xEDodo">
-              <option value="7" ${this.chartConfig.timeRange === 7 ? "selected" : ""}>7 dias</option>
-              <option value="14" ${this.chartConfig.timeRange === 14 ? "selected" : ""}>14 dias</option>
-              <option value="30" ${this.chartConfig.timeRange === 30 ? "selected" : ""}>30 dias</option>
-            </select>
-          </div>
-          
-          <div class="chart-export-controls">
-            <button class="export-csv-btn">Exportar CSV</button>
-            <button class="export-png-btn">Exportar PNG</button>
-            <button class="export-pdf-btn">Exportar PDF</button>
-          </div>
+        <div class="chart-range-controls" style="flex: 1; min-width: 180px;">
+          <label style="display: block; margin-bottom: 6px; color: rgba(255,255,255,0.8); font-size: 14px;">
+            Per\xEDodo:
+          </label>
+          <select class="chart-range-select" aria-label="Selecionar per\xEDodo"
+            style="width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); 
+            background: rgba(255,255,255,0.08); color: #fff; outline: none; cursor: pointer;">
+            <option value="7" ${this.chartConfig.timeRange === 7 ? "selected" : ""}>7 dias</option>
+            <option value="14" ${this.chartConfig.timeRange === 14 ? "selected" : ""}>14 dias</option>
+            <option value="30" ${this.chartConfig.timeRange === 30 ? "selected" : ""}>30 dias</option>
+          </select>
         </div>
         
-        <div class="chart-modal-body">
-          <div class="chart-container">
-            <canvas id="comparison-chart" aria-label="Gr\xE1fico comparativo de dispositivos"></canvas>
-          </div>
-          
-          <div class="chart-summary">
-            <h3>Resumo da Sele\xE7\xE3o</h3>
-            <div class="summary-grid">
-              ${this._generateSummaryHTML(totals)}
-            </div>
-          </div>
+        <div class="chart-export-controls" style="display: flex; gap: 10px; align-items: end;">
+          <button class="export-csv-btn"
+            style="padding: 8px 14px; border-radius: 8px; border: none; cursor: pointer; 
+            background: rgba(255,255,255,0.08); color: #fff; transition: 0.3s;">
+            Exportar CSV
+          </button>
+          <button class="export-png-btn"
+            style="padding: 8px 14px; border-radius: 8px; border: none; cursor: pointer; 
+            background: rgba(255,255,255,0.08); color: #fff; transition: 0.3s;">
+            Exportar PNG
+          </button>
+          <button class="export-pdf-btn"
+            style="padding: 8px 14px; border-radius: 8px; border: none; cursor: pointer; 
+            background: rgba(255,255,255,0.08); color: #fff; transition: 0.3s;">
+            Exportar PDF
+          </button>
+        </div>
+      </div>
+      
+      <div class="chart-modal-body" style="display: flex; flex-direction: column; gap: 20px;">
+        <div class="chart-container" 
+          style="background: rgba(255,255,255,0.05); border-radius: 12px; padding: 15px;">
+          <canvas id="comparison-chart" aria-label="Gr\xE1fico comparativo de dispositivos"></canvas>
         </div>
         
-        <div class="chart-modal-footer">
-          <button class="chart-modal-close-btn">Fechar</button>
+        <div class="chart-summary" 
+          style="background: rgba(255,255,255,0.05); border-radius: 12px; padding: 15px;">
+          <h3 style="margin: 0 0 12px; font-size: 16px; font-weight: bold;">Resumo da Sele\xE7\xE3o</h3>
+          <div class="summary-grid" 
+            style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;">
+            ${this._generateSummaryHTML(totals)}
+          </div>
         </div>
       </div>
-    `;
+      
+      <div class="chart-modal-footer" 
+        style="display: flex; justify-content: flex-end; margin-top: 20px;">
+        <button class="chart-modal-close-btn"
+          style="padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; 
+          background: rgba(255,255,255,0.08); color: #fff; font-weight: bold; transition: 0.3s;">
+          Fechar
+        </button>
+      </div>
+    </div>
+  `;
+  }
+  _generateSummaryHTML(totals) {
+    const items = [];
+    if (totals.energyKwh > 0) {
+      items.push(`<div class="summary-item" 
+      style="background: rgba(255,255,255,0.08); padding: 10px; border-radius: 8px;">
+      <span class="summary-label" style="display: block; font-size: 13px; color: rgba(255,255,255,0.7);">Energia Total:</span>
+      <span class="summary-value" style="font-weight: bold; font-size: 14px;">${this._formatNumber(
+        totals.energyKwh
+      )} kWh</span>
+    </div>`);
+    }
+    if (totals.waterM3 > 0) {
+      items.push(`<div class="summary-item" 
+      style="background: rgba(255,255,255,0.08); padding: 10px; border-radius: 8px;">
+      <span class="summary-label" style="display: block; font-size: 13px; color: rgba(255,255,255,0.7);">\xC1gua Total:</span>
+      <span class="summary-value" style="font-weight: bold; font-size: 14px;">${this._formatNumber(
+        totals.waterM3
+      )} m\xB3</span>
+    </div>`);
+    }
+    if (totals.tempC > 0) {
+      items.push(`<div class="summary-item" 
+      style="background: rgba(255,255,255,0.08); padding: 10px; border-radius: 8px;">
+      <span class="summary-label" style="display: block; font-size: 13px; color: rgba(255,255,255,0.7);">Temperatura M\xE9dia:</span>
+      <span class="summary-value" style="font-weight: bold; font-size: 14px;">${this._formatNumber(
+        totals.tempC / totals.count
+      )} \xB0C</span>
+    </div>`);
+    }
+    items.push(`<div class="summary-item" 
+    style="background: rgba(255,255,255,0.08); padding: 10px; border-radius: 8px;">
+    <span class="summary-label" style="display: block; font-size: 13px; color: rgba(255,255,255,0.7);">Dispositivos:</span>
+    <span class="summary-value" style="font-weight: bold; font-size: 14px;">${totals.count}</span>
+  </div>`);
+    return items.join("");
   }
   _generateSummaryHTML(totals) {
     const items = [];
     if (totals.energyKwh > 0) {
       items.push(`<div class="summary-item">
         <span class="summary-label">Energia Total:</span>
-        <span class="summary-value">${this._formatNumber(totals.energyKwh)} kWh</span>
+        <span class="summary-value">${this._formatNumber(
+        totals.energyKwh
+      )} kWh</span>
       </div>`);
     }
     if (totals.waterM3 > 0) {
       items.push(`<div class="summary-item">
         <span class="summary-label">\xC1gua Total:</span>
-        <span class="summary-value">${this._formatNumber(totals.waterM3)} m\xB3</span>
+        <span class="summary-value">${this._formatNumber(
+        totals.waterM3
+      )} m\xB3</span>
       </div>`);
     }
     if (totals.tempC > 0) {
       items.push(`<div class="summary-item">
         <span class="summary-label">Temperatura M\xE9dia:</span>
-        <span class="summary-value">${this._formatNumber(totals.tempC / totals.count)} \xB0C</span>
+        <span class="summary-value">${this._formatNumber(
+        totals.tempC / totals.count
+      )} \xB0C</span>
       </div>`);
     }
     items.push(`<div class="summary-item">
@@ -4226,7 +4467,9 @@ var MyIOChartModalClass = class {
   }
   _attachModalEventListeners() {
     if (!this.modalElement) return;
-    const closeButtons = this.modalElement.querySelectorAll(".chart-modal-close, .chart-modal-close-btn");
+    const closeButtons = this.modalElement.querySelectorAll(
+      ".chart-modal-close, .chart-modal-close-btn"
+    );
     closeButtons.forEach((btn) => {
       btn.addEventListener("click", () => this.close());
     });
@@ -4302,7 +4545,11 @@ var MyIOChartModalClass = class {
     startDate.setDate(startDate.getDate() - this.chartConfig.timeRange);
     let timeSeriesData = {};
     if (store && store.getTimeSeriesData) {
-      timeSeriesData = await store.getTimeSeriesData(entityIds, startDate, endDate);
+      timeSeriesData = await store.getTimeSeriesData(
+        entityIds,
+        startDate,
+        endDate
+      );
     }
     const chartData = this._prepareChartData(timeSeriesData);
     this.chartInstance = new globalThis.Chart(canvas, {
@@ -7545,8 +7792,12 @@ var DEFAULT_STYLES = {
 };
 var CHART_JS_CDN = "https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js";
 var ZOOM_PLUGIN_CDN = "https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js";
+var JSPDF_VERSION = "2.5.1";
+var JSPDF_CDN = `https://cdnjs.cloudflare.com/ajax/libs/jspdf/${JSPDF_VERSION}/jspdf.umd.min.js`;
 var chartJsLoaded = false;
 var zoomPluginLoaded = false;
+var jsPdfLoaded = false;
+var _jspdfPromise = null;
 var cssInjected = false;
 var STRINGS = {
   "pt-BR": {
@@ -7596,25 +7847,24 @@ async function loadScript(url, checkGlobal) {
     }
     const existingScript = document.querySelector(`script[src="${url}"]`);
     if (existingScript) {
-      setTimeout(() => {
+      existingScript.addEventListener("load", () => {
         if (window[checkGlobal]) {
           resolve();
         } else {
           reject(new Error(`Library ${checkGlobal} not available after loading ${url}`));
         }
-      }, 500);
+      });
+      existingScript.addEventListener("error", () => reject(new Error(`Failed to load ${url}`)));
       return;
     }
     const script = document.createElement("script");
     script.src = url;
     script.onload = () => {
-      setTimeout(() => {
-        if (window[checkGlobal]) {
-          resolve();
-        } else {
-          reject(new Error(`Library ${checkGlobal} not available after loading ${url}`));
-        }
-      }, 200);
+      if (window[checkGlobal]) {
+        resolve();
+      } else {
+        reject(new Error(`Library ${checkGlobal} not available after loading ${url}`));
+      }
     };
     script.onerror = () => reject(new Error(`Failed to load ${url}`));
     document.head.appendChild(script);
@@ -7630,10 +7880,90 @@ async function loadExternalLibraries() {
       await loadScript(ZOOM_PLUGIN_CDN, "ChartZoom");
       zoomPluginLoaded = true;
     }
+    if (!jsPdfLoaded) {
+      await ensureJsPDF();
+      jsPdfLoaded = true;
+    }
   } catch (error) {
     throw new Error(`Failed to load external libraries: ${error}`);
   }
 }
+function ensureJsPDF() {
+  if (window.jspdf?.jsPDF) {
+    console.info("jsPDF already loaded.");
+    return Promise.resolve();
+  }
+  if (_jspdfPromise) {
+    console.info("jsPDF loading already in progress.");
+    return _jspdfPromise;
+  }
+  _jspdfPromise = new Promise((resolve, reject) => {
+    const existing = document.querySelector('script[data-lib="jspdf"]');
+    if (existing) {
+      existing.addEventListener("load", () => {
+        if (window.jspdf?.jsPDF) {
+          console.info("jsPDF loaded via existing script.");
+          resolve();
+        } else {
+          reject(new Error("jsPDF loaded but window.jspdf.jsPDF missing"));
+        }
+      });
+      existing.addEventListener("error", () => reject(new Error("Failed to load jsPDF via existing script")));
+      return;
+    }
+    const s = document.createElement("script");
+    s.src = JSPDF_CDN;
+    s.async = true;
+    s.defer = true;
+    s.dataset.lib = "jspdf";
+    s.onload = () => {
+      if (window.jspdf?.jsPDF) {
+        console.info("jsPDF loaded successfully.");
+        resolve();
+      } else {
+        reject(new Error("jsPDF loaded but window.jspdf.jsPDF missing"));
+      }
+    };
+    s.onerror = () => reject(new Error("Failed to load jsPDF from CDN"));
+    document.head.appendChild(s);
+  }).finally(() => {
+    _jspdfPromise = null;
+  });
+  return _jspdfPromise;
+}
+function getJsPDFCtor() {
+  if (window.jspdf?.jsPDF) return window.jspdf.jsPDF;
+  if (window.jsPDF?.jsPDF) return window.jsPDF.jsPDF;
+  if (window.jsPDF) return window.jsPDF;
+  throw new Error("jsPDF constructor not found on window");
+}
+function savePdfSafe(doc, filename) {
+  try {
+    doc.save(filename);
+  } catch (e) {
+    console.warn("doc.save() failed, attempting Blob URL fallback:", e);
+    const blob = doc.output("blob");
+    const url = URL.createObjectURL(blob);
+    window.open(url, "_blank") || alert("Pop-up blocked. Allow pop-ups to download the PDF.");
+    setTimeout(() => URL.revokeObjectURL(url), 3e4);
+  }
+}
+function addCanvasToPdf(doc, canvas, x = 10, y = 20, maxWmm = 190) {
+  const img = canvas.toDataURL("image/png", 1);
+  const pageWmm = doc.internal.pageSize.getWidth();
+  const mmW = Math.min(maxWmm, pageWmm - x * 2);
+  const mmH = canvas.height / canvas.width * mmW;
+  doc.addImage(img, "PNG", x, y, mmW, mmH, void 0, "FAST");
+  return y + mmH;
+}
+function ensureRoom(doc, nextY, minRoom = 40) {
+  const h = doc.internal.pageSize.getHeight();
+  if (nextY + minRoom > h) {
+    doc.addPage();
+    return 20;
+  }
+  return nextY;
+}
 function injectCSS(styles) {
   if (cssInjected) return;
   const css = `
@@ -8120,18 +8450,72 @@ async function openDemandModal(params) {
       alert("Nenhum dado dispon\xEDvel para exportar");
       return;
     }
+    const btn = pdfBtn;
+    const originalHtml = btn.innerHTML;
+    btn.disabled = true;
+    btn.innerHTML = "<span>\u23F3</span> Gerando PDF...";
     try {
-      const chartImage = chartCanvas.toDataURL("image/png");
-      const link = document.createElement("a");
-      link.download = `demanda-${params.label || "dispositivo"}-${params.startDate}-${params.endDate}.png`;
-      link.href = chartImage;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      alert("\u{1F4CA} Gr\xE1fico exportado como imagem PNG!\n\nO export em PDF ser\xE1 implementado em uma pr\xF3xima vers\xE3o.");
+      await ensureJsPDF();
+      await document.fonts?.ready?.catch((e) => console.warn("Font loading interrupted or failed:", e));
+      const JsPDF = getJsPDFCtor();
+      const doc = new JsPDF("p", "mm", "a4");
+      doc.setFontSize(20);
+      doc.setTextColor(74, 20, 140);
+      doc.text(strings.reportTitle, 20, 20);
+      doc.setFontSize(14);
+      doc.setTextColor(0, 0, 0);
+      const label2 = params.label || "Dispositivo";
+      doc.text(`${strings.title} - ${label2}`, 20, 35);
+      const startDate = formatDate(new Date(params.startDate), params.locale || "pt-BR");
+      const endDate = formatDate(new Date(params.endDate), params.locale || "pt-BR");
+      doc.text(`${strings.period}: ${startDate} - ${endDate}`, 20, 45);
+      let currentY = 55;
+      if (chartData.globalPeak) {
+        const peak = chartData.globalPeak;
+        doc.setFontSize(12);
+        doc.setTextColor(255, 152, 0);
+        doc.text(
+          `${strings.maximum}: ${peak.formattedValue} kW ${peak.key ? `(${peak.key}) ` : ""}${strings.at} ${peak.formattedTime}`,
+          20,
+          currentY
+        );
+        currentY += 10;
+      }
+      currentY = ensureRoom(doc, currentY, 120);
+      currentY = addCanvasToPdf(doc, chartCanvas, 20, currentY);
+      currentY += 10;
+      if (chartData.series.length > 0 && chartData.series[0].points.length > 0) {
+        currentY = ensureRoom(doc, currentY, 60);
+        doc.setFontSize(12);
+        doc.setTextColor(0, 0, 0);
+        doc.text("Amostra de Dados:", 20, currentY);
+        currentY += 10;
+        const samplePoints = chartData.series[0].points.slice(0, 10);
+        doc.setFontSize(10);
+        doc.text("Data/Hora", 20, currentY);
+        doc.text(params.yAxisLabel || strings.demand, 100, currentY);
+        currentY += 7;
+        samplePoints.forEach((point) => {
+          currentY = ensureRoom(doc, currentY, 10);
+          const dateStr = formatDateTime(new Date(point.x), params.locale || "pt-BR");
+          doc.text(dateStr, 20, currentY);
+          doc.text(point.y.toFixed(2), 100, currentY);
+          currentY += 7;
+        });
+      }
+      currentY = ensureRoom(doc, currentY, 20);
+      doc.setFontSize(8);
+      doc.setTextColor(128, 128, 128);
+      doc.text(`${strings.reportFooter}`, 20, doc.internal.pageSize.getHeight() - 15);
+      doc.text(`Gerado em: ${(/* @__PURE__ */ new Date()).toLocaleString(params.locale || "pt-BR")}`, 20, doc.internal.pageSize.getHeight() - 10);
+      const fileName = params.pdf?.fileName || `demanda_${label2.replace(/\s+/g, "_")}_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.pdf`;
+      savePdfSafe(doc, fileName);
     } catch (error) {
-      console.error("Image export failed:", error);
-      alert("Erro ao exportar gr\xE1fico. Tente novamente.");
+      console.error("[PDF Export] Error:", error);
+      alert("Erro ao gerar PDF. Por favor, tente novamente. Verifique o console para mais detalhes.");
+    } finally {
+      btn.disabled = false;
+      btn.innerHTML = originalHtml;
     }
   }
   closeBtn.addEventListener("click", closeModal);