myio-js-library 0.1.177 → 0.1.180

package/dist/index.js

@@ -566,7 +566,7 @@ var init_template_card = __esm({
 });
 
 // src/format/energy.ts
-function formatEnergy(value, unit) {
+function formatEnergy(value, unit, decimals = 3) {
   if (value === null || value === void 0 || isNaN(value)) {
     return "-";
   }
@@ -584,8 +584,8 @@ function formatEnergy(value, unit) {
     }
   }
   const formattedValue = adjustedValue.toLocaleString("pt-BR", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
   });
   return `${formattedValue} ${adjustedUnit}`;
 }
@@ -3977,6 +3977,14 @@ var CSS_STRING = `
   --myio-chip-not-installed-fg: #7c3aed;
   --myio-border-not-installed: rgba(124, 58, 237, 0.5);
 
+  /* Temperature range colors - solid backgrounds for better visibility */
+  --myio-temp-cold-bg: #dbeafe;           /* Blue 100 - below ideal range */
+  --myio-temp-cold-border: rgba(59, 130, 246, 0.6);
+  --myio-temp-ok-bg: #dcfce7;             /* Green 100 - within ideal range */
+  --myio-temp-ok-border: rgba(34, 197, 94, 0.6);
+  --myio-temp-hot-bg: #fee2e2;            /* Red 100 - above ideal range */
+  --myio-temp-hot-border: rgba(239, 68, 68, 0.6);
+
   --myio-text-1: #0f172a;
   --myio-text-2: #4b5563;
   --myio-muted: #94a3b8;
@@ -4080,6 +4088,25 @@ var CSS_STRING = `
   box-shadow: 0 0 0 2px var(--myio-border-not-installed), var(--myio-card-shadow);
 }
 
+/* Temperature range backgrounds (domain=temperature only) */
+.myio-ho-card.is-temp-cold {
+  background: var(--myio-temp-cold-bg);
+  border-color: var(--myio-temp-cold-border);
+  box-shadow: 0 0 0 2px var(--myio-temp-cold-border), var(--myio-card-shadow);
+}
+
+.myio-ho-card.is-temp-ok {
+  background: var(--myio-temp-ok-bg);
+  border-color: var(--myio-temp-ok-border);
+  box-shadow: 0 0 0 2px var(--myio-temp-ok-border), var(--myio-card-shadow);
+}
+
+.myio-ho-card.is-temp-hot {
+  background: var(--myio-temp-hot-bg);
+  border-color: var(--myio-temp-hot-border);
+  box-shadow: 0 0 0 2px var(--myio-temp-hot-border), var(--myio-card-shadow);
+}
+
 /* Header section */
 .myio-ho-card__header {
   display: flex;
@@ -5003,6 +5030,504 @@ var CSS_STRING = `
 .debug-tooltip__content::-webkit-scrollbar-thumb:hover {
   background: rgba(99, 102, 241, 0.6);
 }
+
+/* ============================================
+   Temperature Range Tooltip (for domain=temperature)
+   Shows temperature ruler with current position and deviation
+   ============================================ */
+.temp-range-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: translateY(5px);
+}
+
+.temp-range-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.temp-range-tooltip__content {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 280px;
+  max-width: 320px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  color: #1e293b;
+  overflow: hidden;
+}
+
+.temp-range-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(90deg, #fff7ed 0%, #fed7aa 100%);
+  border-bottom: 1px solid #fdba74;
+}
+
+.temp-range-tooltip__icon {
+  font-size: 18px;
+}
+
+.temp-range-tooltip__title {
+  font-weight: 700;
+  font-size: 13px;
+  color: #c2410c;
+}
+
+.temp-range-tooltip__body {
+  padding: 16px;
+}
+
+/* Temperature value display */
+.temp-range-tooltip__value-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.temp-range-tooltip__current {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.temp-range-tooltip__current sup {
+  font-size: 14px;
+  color: #64748b;
+}
+
+.temp-range-tooltip__deviation {
+  text-align: right;
+}
+
+.temp-range-tooltip__deviation-value {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.temp-range-tooltip__deviation-value.cold {
+  color: #2563eb;
+}
+
+.temp-range-tooltip__deviation-value.ok {
+  color: #16a34a;
+}
+
+.temp-range-tooltip__deviation-value.hot {
+  color: #dc2626;
+}
+
+.temp-range-tooltip__deviation-label {
+  font-size: 10px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Temperature ruler/gauge */
+.temp-range-tooltip__ruler {
+  position: relative;
+  height: 32px;
+  margin: 12px 0;
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.temp-range-tooltip__ruler-track {
+  position: absolute;
+  top: 12px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: linear-gradient(90deg, #dbeafe 0%, #dcfce7 50%, #fee2e2 100%);
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.temp-range-tooltip__ruler-range {
+  position: absolute;
+  top: 12px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 4px;
+  opacity: 0.6;
+}
+
+.temp-range-tooltip__ruler-marker {
+  position: absolute;
+  top: 4px;
+  width: 4px;
+  height: 24px;
+  background: #1e293b;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.temp-range-tooltip__ruler-marker::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #1e293b;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.temp-range-tooltip__ruler-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 10px;
+  color: #64748b;
+}
+
+.temp-range-tooltip__ruler-min,
+.temp-range-tooltip__ruler-max {
+  font-weight: 600;
+}
+
+/* Range info */
+.temp-range-tooltip__range-info {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+  margin-top: 12px;
+}
+
+.temp-range-tooltip__range-item {
+  text-align: center;
+}
+
+.temp-range-tooltip__range-label {
+  font-size: 10px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 2px;
+}
+
+.temp-range-tooltip__range-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
+}
+
+/* Status badge */
+.temp-range-tooltip__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.temp-range-tooltip__status.cold {
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #93c5fd;
+}
+
+.temp-range-tooltip__status.ok {
+  background: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
+}
+
+.temp-range-tooltip__status.hot {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.temp-range-tooltip__status.unknown {
+  background: #f3f4f6;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
+
+/* ============================================
+   Energy Range Tooltip (for domain=energy)
+   Shows power ruler with current position and status ranges
+   ============================================ */
+.energy-range-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: translateY(5px);
+}
+
+.energy-range-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.energy-range-tooltip__content {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 300px;
+  max-width: 360px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  color: #1e293b;
+  overflow: hidden;
+}
+
+.energy-range-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(90deg, #ecfdf5 0%, #d1fae5 100%);
+  border-bottom: 1px solid #6ee7b7;
+}
+
+.energy-range-tooltip__icon {
+  font-size: 18px;
+}
+
+.energy-range-tooltip__title {
+  font-weight: 700;
+  font-size: 13px;
+  color: #047857;
+}
+
+.energy-range-tooltip__body {
+  padding: 16px;
+}
+
+/* Power value display */
+.energy-range-tooltip__value-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.energy-range-tooltip__current {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.energy-range-tooltip__current sup {
+  font-size: 14px;
+  color: #64748b;
+}
+
+.energy-range-tooltip__status-badge {
+  text-align: right;
+}
+
+.energy-range-tooltip__status-value {
+  font-size: 14px;
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: 6px;
+}
+
+.energy-range-tooltip__status-value.standby {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.energy-range-tooltip__status-value.normal {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.energy-range-tooltip__status-value.alert {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.energy-range-tooltip__status-value.failure {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.energy-range-tooltip__status-value.offline {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+/* Power ruler/gauge */
+.energy-range-tooltip__ruler {
+  position: relative;
+  height: 40px;
+  margin: 12px 0;
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.energy-range-tooltip__ruler-track {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  display: flex;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.energy-range-tooltip__ruler-segment {
+  height: 100%;
+}
+
+.energy-range-tooltip__ruler-segment.standby {
+  background: #dbeafe;
+}
+
+.energy-range-tooltip__ruler-segment.normal {
+  background: #dcfce7;
+}
+
+.energy-range-tooltip__ruler-segment.alert {
+  background: #fef3c7;
+}
+
+.energy-range-tooltip__ruler-segment.failure {
+  background: #fee2e2;
+}
+
+.energy-range-tooltip__ruler-marker {
+  position: absolute;
+  top: 8px;
+  width: 4px;
+  height: 24px;
+  background: #1e293b;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.energy-range-tooltip__ruler-marker::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #1e293b;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Range info grid */
+.energy-range-tooltip__ranges {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.energy-range-tooltip__range-item {
+  text-align: center;
+  padding: 8px 4px;
+  border-radius: 6px;
+  background: #f8fafc;
+}
+
+.energy-range-tooltip__range-item.standby {
+  border-left: 3px solid #3b82f6;
+}
+
+.energy-range-tooltip__range-item.normal {
+  border-left: 3px solid #22c55e;
+}
+
+.energy-range-tooltip__range-item.alert {
+  border-left: 3px solid #f59e0b;
+}
+
+.energy-range-tooltip__range-item.failure {
+  border-left: 3px solid #ef4444;
+}
+
+.energy-range-tooltip__range-label {
+  font-size: 9px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 2px;
+}
+
+.energy-range-tooltip__range-value {
+  font-size: 11px;
+  font-weight: 600;
+  color: #334155;
+}
+
+/* Status info */
+.energy-range-tooltip__status-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.energy-range-tooltip__status-info.standby {
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #93c5fd;
+}
+
+.energy-range-tooltip__status-info.normal {
+  background: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
+}
+
+.energy-range-tooltip__status-info.alert {
+  background: #fef3c7;
+  color: #b45309;
+  border: 1px solid #fcd34d;
+}
+
+.energy-range-tooltip__status-info.failure {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.energy-range-tooltip__status-info.offline {
+  background: #f3f4f6;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
 `;
 
 // src/thingsboard/main-dashboard-shopping/v-4.0.0/head-office/card-head-office.icons.ts
@@ -5475,6 +6000,16 @@ function formatValueByDomain(value, domain) {
   }
   return formatEnergy(value);
 }
+function formatRelativeTime2(timestamp) {
+  if (!timestamp || isNaN(timestamp)) return "\u2014";
+  const date = new Date(timestamp);
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  return `${hours}:${minutes} ${day}/${month}/${year}`;
+}
 function calculateConsumptionPercentage(target, consumption) {
   const numericTarget = Number(target);
   const numericConsumption = Number(consumption);
@@ -5552,6 +6087,380 @@ function getCardStateClass(deviceStatus) {
       return "";
   }
 }
+function getTempRangeClass(entityObject) {
+  if (entityObject.domain !== "temperature") return "";
+  const currentTemp = Number(entityObject.val ?? entityObject.currentTemperature ?? entityObject.temperature) || 0;
+  const tempMin = entityObject.temperatureMin ?? entityObject.minTemperature;
+  const tempMax = entityObject.temperatureMax ?? entityObject.maxTemperature;
+  if (tempMin === void 0 || tempMax === void 0 || tempMin === null || tempMax === null) {
+    return "";
+  }
+  if (currentTemp > tempMax) return "is-temp-hot";
+  if (currentTemp < tempMin) return "is-temp-cold";
+  return "is-temp-ok";
+}
+var TempRangeTooltip = {
+  containerId: "myio-temp-range-tooltip",
+  /**
+   * Create or get the tooltip container
+   */
+  getContainer() {
+    let container = document.getElementById(this.containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = this.containerId;
+      container.className = "temp-range-tooltip";
+      document.body.appendChild(container);
+    }
+    return container;
+  },
+  /**
+   * Calculate temperature status and deviation
+   */
+  calculateStatus(currentTemp, tempMin, tempMax) {
+    if (tempMin == null || tempMax == null) {
+      return { status: "unknown", deviation: null, deviationPercent: null };
+    }
+    const rangeSize = tempMax - tempMin;
+    const midPoint = (tempMin + tempMax) / 2;
+    if (currentTemp < tempMin) {
+      const deviation = tempMin - currentTemp;
+      const deviationPercent = rangeSize > 0 ? deviation / rangeSize * 100 : 0;
+      return { status: "cold", deviation: -deviation, deviationPercent: -deviationPercent };
+    } else if (currentTemp > tempMax) {
+      const deviation = currentTemp - tempMax;
+      const deviationPercent = rangeSize > 0 ? deviation / rangeSize * 100 : 0;
+      return { status: "hot", deviation, deviationPercent };
+    } else {
+      const deviationFromMid = currentTemp - midPoint;
+      const halfRange = rangeSize / 2;
+      const deviationPercent = halfRange > 0 ? deviationFromMid / halfRange * 100 : 0;
+      return { status: "ok", deviation: deviationFromMid, deviationPercent: 0 };
+    }
+  },
+  /**
+   * Calculate marker position on ruler (0-100%)
+   */
+  calculateMarkerPosition(currentTemp, tempMin, tempMax) {
+    if (tempMin == null || tempMax == null) return 50;
+    const rangeSize = tempMax - tempMin;
+    const extension = rangeSize * 0.3;
+    const visibleMin = tempMin - extension;
+    const visibleMax = tempMax + extension;
+    const visibleRange = visibleMax - visibleMin;
+    const clampedTemp = Math.max(visibleMin, Math.min(visibleMax, currentTemp));
+    const position = (clampedTemp - visibleMin) / visibleRange * 100;
+    return Math.max(2, Math.min(98, position));
+  },
+  /**
+   * Show tooltip for a temperature card
+   * @param {HTMLElement} triggerElement - The card element
+   * @param {Object} entityObject - Entity data
+   * @param {MouseEvent} event - Mouse event for cursor position
+   */
+  show(triggerElement, entityObject, event) {
+    const container = this.getContainer();
+    const currentTemp = Number(entityObject.val ?? entityObject.currentTemperature ?? entityObject.temperature) || 0;
+    const tempMin = entityObject.temperatureMin ?? entityObject.minTemperature;
+    const tempMax = entityObject.temperatureMax ?? entityObject.maxTemperature;
+    const hasRange = tempMin != null && tempMax != null;
+    const { status, deviation, deviationPercent } = this.calculateStatus(currentTemp, tempMin, tempMax);
+    const markerPos = this.calculateMarkerPosition(currentTemp, tempMin, tempMax);
+    let rangeLeft = 0, rangeWidth = 100;
+    if (hasRange) {
+      const rangeSize = tempMax - tempMin;
+      const extension = rangeSize * 0.3;
+      const visibleMin = tempMin - extension;
+      const visibleMax = tempMax + extension;
+      const visibleRange = visibleMax - visibleMin;
+      rangeLeft = (tempMin - visibleMin) / visibleRange * 100;
+      rangeWidth = rangeSize / visibleRange * 100;
+    }
+    let deviationText = "";
+    let deviationClass = status;
+    if (status === "cold") {
+      deviationText = `${Math.abs(deviation).toFixed(1)}\xB0C abaixo`;
+    } else if (status === "hot") {
+      deviationText = `+${deviation.toFixed(1)}\xB0C acima`;
+    } else if (status === "ok") {
+      deviationText = "Na faixa ideal";
+    } else {
+      deviationText = "Faixa n\xE3o configurada";
+    }
+    const statusLabels = {
+      cold: "\u2744\uFE0F Abaixo da Faixa Ideal",
+      ok: "\u2714\uFE0F Dentro da Faixa Ideal",
+      hot: "\u{1F525} Acima da Faixa Ideal",
+      unknown: "\u2753 Faixa N\xE3o Configurada"
+    };
+    container.innerHTML = `
+      <div class="temp-range-tooltip__content">
+        <div class="temp-range-tooltip__header">
+          <span class="temp-range-tooltip__icon">\u{1F321}\uFE0F</span>
+          <span class="temp-range-tooltip__title">${entityObject.labelOrName || entityObject.name || "Sensor"}</span>
+        </div>
+        <div class="temp-range-tooltip__body">
+          <div class="temp-range-tooltip__value-row">
+            <div class="temp-range-tooltip__current">
+              ${currentTemp.toFixed(1)}<sup>\xB0C</sup>
+            </div>
+            <div class="temp-range-tooltip__deviation">
+              <div class="temp-range-tooltip__deviation-value ${deviationClass}">
+                ${status === "ok" ? "\u2713" : status === "cold" ? "\u2193" : status === "hot" ? "\u2191" : "?"} ${Math.abs(deviationPercent || 0).toFixed(0)}%
+              </div>
+              <div class="temp-range-tooltip__deviation-label">Desvio</div>
+            </div>
+          </div>
+
+          ${hasRange ? `
+          <div class="temp-range-tooltip__ruler">
+            <div class="temp-range-tooltip__ruler-track"></div>
+            <div class="temp-range-tooltip__ruler-range" style="left: ${rangeLeft}%; width: ${rangeWidth}%;"></div>
+            <div class="temp-range-tooltip__ruler-marker" style="left: ${markerPos}%;"></div>
+          </div>
+          <div class="temp-range-tooltip__ruler-labels">
+            <span class="temp-range-tooltip__ruler-min">${tempMin}\xB0C</span>
+            <span style="color: #22c55e; font-weight: 600;">Faixa Ideal</span>
+            <span class="temp-range-tooltip__ruler-max">${tempMax}\xB0C</span>
+          </div>
+          ` : ""}
+
+          <div class="temp-range-tooltip__range-info">
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">M\xEDnimo</div>
+              <div class="temp-range-tooltip__range-value">${hasRange ? tempMin + "\xB0C" : "--"}</div>
+            </div>
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">Atual</div>
+              <div class="temp-range-tooltip__range-value" style="color: ${status === "ok" ? "#16a34a" : status === "cold" ? "#2563eb" : "#dc2626"}">${currentTemp.toFixed(1)}\xB0C</div>
+            </div>
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">M\xE1ximo</div>
+              <div class="temp-range-tooltip__range-value">${hasRange ? tempMax + "\xB0C" : "--"}</div>
+            </div>
+          </div>
+
+          <div class="temp-range-tooltip__status ${status}">
+            ${statusLabels[status]}
+          </div>
+        </div>
+      </div>
+    `;
+    let left, top;
+    if (event && event.clientX && event.clientY) {
+      left = event.clientX + 15;
+      top = event.clientY + 15;
+    } else {
+      const rect = triggerElement.getBoundingClientRect();
+      left = rect.left + rect.width / 2 - 150;
+      top = rect.bottom + 8;
+    }
+    const tooltipWidth = 300;
+    const tooltipHeight = 350;
+    if (left + tooltipWidth > window.innerWidth - 10) {
+      left = (event?.clientX || left) - tooltipWidth - 15;
+    }
+    if (left < 10) left = 10;
+    if (top + tooltipHeight > window.innerHeight - 10) {
+      top = (event?.clientY || top) - tooltipHeight - 15;
+    }
+    if (top < 10) top = 10;
+    container.style.left = left + "px";
+    container.style.top = top + "px";
+    container.classList.add("visible");
+  },
+  /**
+   * Hide tooltip
+   */
+  hide() {
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.classList.remove("visible");
+    }
+  }
+};
+var EnergyRangeTooltip = {
+  containerId: "myio-energy-range-tooltip",
+  /**
+   * Create or get the tooltip container
+   */
+  getContainer() {
+    let container = document.getElementById(this.containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = this.containerId;
+      container.className = "energy-range-tooltip";
+      document.body.appendChild(container);
+    }
+    return container;
+  },
+  /**
+   * Determine status based on power value and ranges
+   */
+  calculateStatus(powerValue, ranges) {
+    if (!ranges || powerValue == null) {
+      return { status: "offline", label: "Sem dados" };
+    }
+    const power = Number(powerValue) || 0;
+    const { standbyRange, normalRange, alertRange, failureRange } = ranges;
+    if (standbyRange && power >= standbyRange.down && power <= standbyRange.up) {
+      return { status: "standby", label: "Standby" };
+    }
+    if (normalRange && power >= normalRange.down && power <= normalRange.up) {
+      return { status: "normal", label: "Normal" };
+    }
+    if (alertRange && power >= alertRange.down && power <= alertRange.up) {
+      return { status: "alert", label: "Alerta" };
+    }
+    if (failureRange && power >= failureRange.down && power <= failureRange.up) {
+      return { status: "failure", label: "Falha" };
+    }
+    return { status: "offline", label: "Fora da faixa" };
+  },
+  /**
+   * Calculate marker position on ruler (0-100%)
+   */
+  calculateMarkerPosition(powerValue, ranges) {
+    if (!ranges) return 50;
+    const power = Number(powerValue) || 0;
+    const maxRange = ranges.failureRange?.up || ranges.alertRange?.up || 1e3;
+    const displayMax = Math.min(maxRange, (ranges.alertRange?.up || maxRange) * 1.2);
+    const position = power / displayMax * 100;
+    return Math.max(2, Math.min(98, position));
+  },
+  /**
+   * Calculate segment widths for the ruler
+   */
+  calculateSegmentWidths(ranges) {
+    if (!ranges) return { standby: 25, normal: 25, alert: 25, failure: 25 };
+    const maxValue = ranges.failureRange?.up || 1e4;
+    const total = Math.min(maxValue, (ranges.alertRange?.up || maxValue) * 1.2);
+    return {
+      standby: (ranges.standbyRange?.up || 0) / total * 100,
+      normal: ((ranges.normalRange?.up || 0) - (ranges.normalRange?.down || 0)) / total * 100,
+      alert: ((ranges.alertRange?.up || 0) - (ranges.alertRange?.down || 0)) / total * 100,
+      failure: Math.max(5, 100 - (ranges.alertRange?.up || 0) / total * 100)
+    };
+  },
+  /**
+   * Format power value for display
+   */
+  formatPower(value) {
+    if (value == null || isNaN(value)) return "-";
+    const num = Number(value);
+    if (num >= 1e3) {
+      return `${(num / 1e3).toFixed(2)} kW`;
+    }
+    return `${Math.round(num)} W`;
+  },
+  /**
+   * Show tooltip for an energy card
+   */
+  show(triggerElement, entityObject, event) {
+    const container = this.getContainer();
+    const powerValue = entityObject.instantaneousPower ?? entityObject.consumption_power ?? 0;
+    const ranges = entityObject.powerRanges || entityObject.ranges;
+    const hasRanges = ranges && ranges.normalRange;
+    const { status, label } = this.calculateStatus(powerValue, ranges);
+    const markerPos = this.calculateMarkerPosition(powerValue, ranges);
+    const segmentWidths = this.calculateSegmentWidths(ranges);
+    const statusLabels = {
+      standby: "\u{1F535} Standby",
+      normal: "\u2705 Opera\xE7\xE3o Normal",
+      alert: "\u26A0\uFE0F Alerta",
+      failure: "\u{1F534} Falha",
+      offline: "\u26AB Offline / Sem dados"
+    };
+    container.innerHTML = `
+      <div class="energy-range-tooltip__content">
+        <div class="energy-range-tooltip__header">
+          <span class="energy-range-tooltip__icon">\u26A1</span>
+          <span class="energy-range-tooltip__title">${entityObject.labelOrName || entityObject.name || "Equipamento"}</span>
+        </div>
+        <div class="energy-range-tooltip__body">
+          <div class="energy-range-tooltip__value-row">
+            <div class="energy-range-tooltip__current">
+              ${this.formatPower(powerValue)}
+            </div>
+            <div class="energy-range-tooltip__status-badge">
+              <span class="energy-range-tooltip__status-value ${status}">${label}</span>
+            </div>
+          </div>
+
+          ${hasRanges ? `
+          <div class="energy-range-tooltip__ruler">
+            <div class="energy-range-tooltip__ruler-track">
+              <div class="energy-range-tooltip__ruler-segment standby" style="width: ${segmentWidths.standby}%"></div>
+              <div class="energy-range-tooltip__ruler-segment normal" style="width: ${segmentWidths.normal}%"></div>
+              <div class="energy-range-tooltip__ruler-segment alert" style="width: ${segmentWidths.alert}%"></div>
+              <div class="energy-range-tooltip__ruler-segment failure" style="width: ${segmentWidths.failure}%"></div>
+            </div>
+            <div class="energy-range-tooltip__ruler-marker" style="left: ${markerPos}%;"></div>
+          </div>
+
+          <div class="energy-range-tooltip__ranges">
+            <div class="energy-range-tooltip__range-item standby">
+              <div class="energy-range-tooltip__range-label">Standby</div>
+              <div class="energy-range-tooltip__range-value">${ranges.standbyRange?.down || 0}-${ranges.standbyRange?.up || 0}W</div>
+            </div>
+            <div class="energy-range-tooltip__range-item normal">
+              <div class="energy-range-tooltip__range-label">Normal</div>
+              <div class="energy-range-tooltip__range-value">${ranges.normalRange?.down || 0}-${ranges.normalRange?.up || 0}W</div>
+            </div>
+            <div class="energy-range-tooltip__range-item alert">
+              <div class="energy-range-tooltip__range-label">Alerta</div>
+              <div class="energy-range-tooltip__range-value">${ranges.alertRange?.down || 0}-${ranges.alertRange?.up || 0}W</div>
+            </div>
+            <div class="energy-range-tooltip__range-item failure">
+              <div class="energy-range-tooltip__range-label">Falha</div>
+              <div class="energy-range-tooltip__range-value">&gt;${ranges.failureRange?.down || 0}W</div>
+            </div>
+          </div>
+          ` : `
+          <div style="text-align: center; padding: 16px; color: #64748b; font-size: 12px;">
+            Ranges de pot\xEAncia n\xE3o configurados
+          </div>
+          `}
+
+          <div class="energy-range-tooltip__status-info ${status}">
+            ${statusLabels[status] || statusLabels.offline}
+          </div>
+        </div>
+      </div>
+    `;
+    let left, top;
+    if (event && event.clientX && event.clientY) {
+      left = event.clientX + 15;
+      top = event.clientY + 15;
+    } else {
+      const rect = triggerElement.getBoundingClientRect();
+      left = rect.left + rect.width / 2 - 150;
+      top = rect.bottom + 8;
+    }
+    const tooltipWidth = 320;
+    const tooltipHeight = 380;
+    if (left + tooltipWidth > window.innerWidth - 10) {
+      left = (event?.clientX || left) - tooltipWidth - 15;
+    }
+    if (left < 10) left = 10;
+    if (top + tooltipHeight > window.innerHeight - 10) {
+      top = (event?.clientY || top) - tooltipHeight - 15;
+    }
+    if (top < 10) top = 10;
+    container.style.left = left + "px";
+    container.style.top = top + "px";
+    container.classList.add("visible");
+  },
+  /**
+   * Hide tooltip
+   */
+  hide() {
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.classList.remove("visible");
+    }
+  }
+};
 function getStatusDotClass(deviceStatus) {
   switch (deviceStatus) {
     // --- Novos Status de Temperatura ---
@@ -5727,6 +6636,8 @@ function buildDOM(state) {
   powerLabel.className = "label";
   if (entityObject.domain === "water") {
     powerLabel.textContent = "Leitura";
+  } else if (entityObject.domain === "temperature") {
+    powerLabel.textContent = "\xDAlt. Telemetria";
   } else {
     powerLabel.textContent = i18n.instantaneous_power || "Pot\xEAncia";
   }
@@ -5942,11 +6853,16 @@ function paint(root, state) {
     }
   }
   const stateClass = getCardStateClass(entityObject.deviceStatus);
-  root.className = `myio-ho-card ${stateClass}`;
+  const tempRangeClass = getTempRangeClass(entityObject);
+  root.className = `myio-ho-card ${stateClass} ${tempRangeClass}`.trim();
   const statusInfo = getStatusInfo(entityObject.deviceStatus, i18n, entityObject.domain);
   const chip = root.querySelector(".chip");
   chip.className = `chip ${statusInfo.chipClass}`;
   chip.innerHTML = statusInfo.label;
+  const iconContainer = root.querySelector(".myio-ho-card__icon");
+  if (iconContainer) {
+    iconContainer.innerHTML = getIconSvg(entityObject.deviceType, entityObject.domain);
+  }
   if (activeTooltipDebug) {
     const debugInfo = buildDebugTooltipInfo(entityObject, statusInfo, stateClass, statusDecisionSource, delayTimeConnectionInMins);
     attachDebugTooltip(chip, debugInfo);
@@ -5980,14 +6896,19 @@ function paint(root, state) {
     effContainer.style.display = "none";
   }
   const opTimeVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(1) .val");
+  const opTimeLabel = root.querySelector(".myio-ho-card__footer .metric:nth-child(1) .label");
   if (opTimeVal) {
-    opTimeVal.textContent = entityObject.operationHours ?? "-";
+    if (opTimeLabel) opTimeLabel.textContent = i18n.operation_time;
+    const isOffline = entityObject.deviceStatus === DeviceStatusType.OFFLINE || entityObject.deviceStatus === "offline" || entityObject.deviceStatus === DeviceStatusType.NO_INFO;
+    opTimeVal.textContent = isOffline ? "-" : entityObject.operationHours ?? "-";
   }
   const powerVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .val");
   if (powerVal) {
     if (entityObject.domain === "water") {
       const pulses = entityObject.pulses ?? 0;
       powerVal.textContent = `${pulses} L`;
+    } else if (entityObject.domain === "temperature") {
+      powerVal.textContent = entityObject.lastActivityTime ? formatRelativeTime2(entityObject.lastActivityTime) : "-";
     } else {
       const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
       const powerFormatted = formatPower(instantPower);
@@ -6065,12 +6986,46 @@ function bindEvents(root, state, callbacks) {
     MyIOSelectionStore2.on("selection:change", onSelectionChange);
     root._selectionListener = onSelectionChange;
   }
+  if (entityObject.domain === "temperature") {
+    const showTooltip = (e) => {
+      TempRangeTooltip.show(root, state.entityObject, e);
+    };
+    const hideTooltip = () => {
+      TempRangeTooltip.hide();
+    };
+    root.addEventListener("mouseenter", showTooltip);
+    root.addEventListener("mouseleave", hideTooltip);
+    root._tempTooltipShowFn = showTooltip;
+    root._tempTooltipHideFn = hideTooltip;
+  }
+  if (entityObject.domain === "energy") {
+    const showEnergyTooltip = (e) => {
+      EnergyRangeTooltip.show(root, state.entityObject, e);
+    };
+    const hideEnergyTooltip = () => {
+      EnergyRangeTooltip.hide();
+    };
+    root.addEventListener("mouseenter", showEnergyTooltip);
+    root.addEventListener("mouseleave", hideEnergyTooltip);
+    root._energyTooltipShowFn = showEnergyTooltip;
+    root._energyTooltipHideFn = hideEnergyTooltip;
+  }
   root._cleanup = () => {
     document.removeEventListener("click", closeMenu);
     document.removeEventListener("keydown", closeMenu);
     if (MyIOSelectionStore2 && root._selectionListener) {
       MyIOSelectionStore2.off("selection:change", root._selectionListener);
     }
+    if (root._tempTooltipShowFn) {
+      root.removeEventListener("mouseenter", root._tempTooltipShowFn);
+      root.removeEventListener("mouseleave", root._tempTooltipHideFn);
+      TempRangeTooltip.hide();
+    }
+    if (root._energyTooltipShowFn) {
+      root.removeEventListener("mouseenter", root._energyTooltipShowFn);
+      root.removeEventListener("mouseleave", root._energyTooltipHideFn);
+      EnergyRangeTooltip.hide();
+    }
   };
   const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
   if (checkbox && callbacks.handleSelect) {