myio-js-library 0.1.180 → 0.1.182

package/dist/index.cjs

@@ -583,6 +583,7 @@ __export(index_exports, {
   EXPORT_DOMAIN_ICONS: () => EXPORT_DOMAIN_ICONS,
   EXPORT_DOMAIN_LABELS: () => EXPORT_DOMAIN_LABELS,
   EXPORT_DOMAIN_UNITS: () => EXPORT_DOMAIN_UNITS,
+  EnergyRangeTooltip: () => EnergyRangeTooltip,
   MyIOChartModal: () => MyIOChartModal,
   MyIODraggableCard: () => MyIODraggableCard,
   MyIOSelectionStore: () => MyIOSelectionStore,
@@ -591,6 +592,7 @@ __export(index_exports, {
   POWER_LIMITS_DEVICE_TYPES: () => DEVICE_TYPES,
   POWER_LIMITS_STATUS_CONFIG: () => STATUS_CONFIG,
   POWER_LIMITS_TELEMETRY_TYPES: () => TELEMETRY_TYPES2,
+  TempRangeTooltip: () => TempRangeTooltip,
   addDetectionContext: () => addDetectionContext,
   addNamespace: () => addNamespace,
   aggregateByDay: () => aggregateByDay,
@@ -6064,214 +6066,283 @@ function createLogHelper(debugActive = false) {
 }
 var LogHelper = createLogHelper(false);
 
-// src/thingsboard/main-dashboard-shopping/v-4.0.0/card/head-office/card-head-office.js
-var LABEL_CHAR_LIMIT = 18;
-var DEFAUL_DELAY_TIME_CONNECTION_IN_MINS = 1440;
-var CSS_TAG = "head-office-card-v1";
-function ensureCss() {
-  if (!document.querySelector(`style[data-myio-css="${CSS_TAG}"]`)) {
-    const style = document.createElement("style");
-    style.setAttribute("data-myio-css", CSS_TAG);
-    style.textContent = CSS_STRING;
-    document.head.appendChild(style);
-  }
+// src/utils/TempRangeTooltip.ts
+var TOOLTIP_STYLES = `
+.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);
 }
-function normalizeParams(params) {
-  if (!params || !params.entityObject) {
-    throw new Error("renderCardCompenteHeadOffice: entityObject is required");
-  }
-  const LogHelper2 = createLogHelper(params.debugActive ?? false);
-  const entityObject = params.entityObject;
-  if (!entityObject.entityId) {
-    LogHelper2.warn("[CardHeadOffice] entityId is missing, generating temporary ID");
-    entityObject.entityId = `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  }
-  if (!params.delayTimeConnectionInMins) {
-    LogHelper2.warn(
-      `[CardHeadOffice] delayTimeConnectionInMins is missing, defaulting to ${DEFAUL_DELAY_TIME_CONNECTION_IN_MINS} mins`
-    );
-  }
-  return {
-    entityObject,
-    i18n: { ...DEFAULT_I18N, ...params.i18n || {} },
-    enableSelection: Boolean(params.enableSelection),
-    enableDragDrop: Boolean(params.enableDragDrop),
-    useNewComponents: Boolean(params.useNewComponents),
-    // RFC-0091: Configurable delay time for connection status check (default 15 minutes)
-    delayTimeConnectionInMins: params.delayTimeConnectionInMins ?? DEFAUL_DELAY_TIME_CONNECTION_IN_MINS,
-    // Debug options
-    debugActive: params.debugActive ?? false,
-    activeTooltipDebug: params.activeTooltipDebug ?? false,
-    // LogHelper instance for this card
-    LogHelper: LogHelper2,
-    callbacks: {
-      handleActionDashboard: params.handleActionDashboard,
-      handleActionReport: params.handleActionReport,
-      handleActionSettings: params.handleActionSettings,
-      handleSelect: params.handleSelect,
-      handInfo: params.handInfo,
-      handleClickCard: params.handleClickCard
-    }
-  };
+
+.temp-range-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
 }
-function getIconSvg(deviceType, domain) {
-  if (domain === "water") {
-    return Icons.waterDrop;
-  }
-  if (domain === "temperature") {
-    return Icons.thermometer;
-  }
-  return ICON_MAP[deviceType] || ICON_MAP.DEFAULT;
+
+.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;
 }
-function formatPower(valueInWatts) {
-  if (valueInWatts === null || valueInWatts === void 0 || isNaN(valueInWatts)) {
-    return { num: "-", unit: "" };
-  }
-  const val = Number(valueInWatts);
-  if (val >= 1e3) {
-    const kw = Math.ceil(val / 1e3 * 100) / 100;
-    return { num: kw.toFixed(2), unit: "kW" };
-  } else {
-    const w = Math.ceil(val);
-    return { num: w.toString(), unit: "W" };
-  }
+
+.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;
 }
-function formatValueByDomain(value, domain) {
-  if (domain === "water") {
-    return formatWaterVolumeM3(value);
-  }
-  if (domain === "temperature") {
-    return formatTemperature(value, 0);
-  }
-  return formatEnergy(value);
+
+.temp-range-tooltip__icon {
+  font-size: 18px;
 }
-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}`;
+
+.temp-range-tooltip__title {
+  font-weight: 700;
+  font-size: 13px;
+  color: #c2410c;
 }
-function calculateConsumptionPercentage(target, consumption) {
-  const numericTarget = Number(target);
-  const numericConsumption = Number(consumption);
-  if (isNaN(numericTarget) || isNaN(numericConsumption) || numericTarget <= 0) {
-    return 0;
-  }
-  const percentage = numericConsumption / numericTarget * 100;
-  return percentage;
+
+.temp-range-tooltip__body {
+  padding: 16px;
 }
-function getStatusInfo(deviceStatus, i18n, domain) {
-  switch (deviceStatus) {
-    // --- Novos Status de Temperatura ---
-    case "normal":
-      return { chipClass: "chip--ok", label: "Normal" };
-    case "cold":
-      return { chipClass: "chip--standby", label: "Frio" };
-    case "hot":
-      return { chipClass: "chip--alert", label: "Quente" };
-    // --- Status Existentes (aligned with getCardStateClass) ---
-    case DeviceStatusType.POWER_ON:
-      if (domain === "water") {
-        return { chipClass: "chip--power-on", label: i18n.in_operation_water };
-      }
-      return { chipClass: "chip--power-on", label: i18n.in_operation };
-    case DeviceStatusType.STANDBY:
-      return { chipClass: "chip--standby", label: i18n.standby };
-    case DeviceStatusType.WARNING:
-      return { chipClass: "chip--warning", label: i18n.alert };
-    case DeviceStatusType.MAINTENANCE:
-      return { chipClass: "chip--maintenance", label: i18n.maintenance };
-    case DeviceStatusType.FAILURE:
-      return { chipClass: "chip--failure", label: i18n.failure };
-    case DeviceStatusType.POWER_OFF:
-      return { chipClass: "chip--power-off", label: i18n.power_off || i18n.failure };
-    case DeviceStatusType.OFFLINE:
-      return { chipClass: "chip--offline", label: i18n.offline };
-    case DeviceStatusType.NO_INFO:
-      return { chipClass: "chip--no-info", label: i18n.no_info || i18n.offline };
-    case DeviceStatusType.NOT_INSTALLED:
-      return { chipClass: "chip--not-installed", label: i18n.not_installed };
-    default:
-      return { chipClass: "chip--offline", label: i18n.offline };
-  }
+
+.temp-range-tooltip__value-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
 }
-function getCardStateClass(deviceStatus) {
-  switch (deviceStatus) {
-    case DeviceStatusType.POWER_ON:
-      return "is-power-on";
-    // Blue border
-    case DeviceStatusType.STANDBY:
-      return "is-standby";
-    // Green border
-    case DeviceStatusType.WARNING:
-      return "is-warning";
-    // Yellow border
-    case DeviceStatusType.MAINTENANCE:
-      return "is-maintenance";
-    // Yellow border
-    case DeviceStatusType.FAILURE:
-      return "is-failure";
-    // Dark Red border
-    case DeviceStatusType.POWER_OFF:
-      return "is-power-off";
-    // Light Red border
-    case DeviceStatusType.OFFLINE:
-      return "is-offline";
-    // Dark Gray border
-    case DeviceStatusType.NO_INFO:
-      return "is-no-info";
-    // Dark Orange border
-    case DeviceStatusType.NOT_INSTALLED:
-      return "is-not-installed";
-    // Purple border
-    default:
-      return "";
-  }
+
+.temp-range-tooltip__current {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
 }
-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";
+
+.temp-range-tooltip__current sup {
+  font-size: 14px;
+  color: #64748b;
 }
-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 };
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+`;
+function injectStyles() {
+  if (typeof document === "undefined") return;
+  const styleId = "myio-temp-range-tooltip-styles";
+  if (document.getElementById(styleId)) return;
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = TOOLTIP_STYLES;
+  document.head.appendChild(style);
+}
+function extractTemperature(entityData) {
+  return Number(entityData.val ?? entityData.currentTemperature ?? entityData.temperature) || 0;
+}
+function extractRange(entityData) {
+  const tempMin = entityData.temperatureMin ?? entityData.minTemperature ?? null;
+  const tempMax = entityData.temperatureMax ?? entityData.maxTemperature ?? null;
+  return { tempMin, tempMax };
+}
+function extractLabel(entityData) {
+  return entityData.labelOrName || entityData.name || entityData.label || "Sensor";
+}
+var TempRangeTooltip = {
+  containerId: "myio-temp-range-tooltip",
+  /**
+   * Create or get the tooltip container
+   */
+  getContainer() {
+    injectStyles();
+    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;
@@ -6299,20 +6370,20 @@ var TempRangeTooltip = {
   },
   /**
    * 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
+   * @param triggerElement - The card element
+   * @param entityData - Entity data with temperature info
+   * @param event - Mouse event for cursor position
    */
-  show(triggerElement, entityObject, event) {
+  show(triggerElement, entityData, 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 currentTemp = extractTemperature(entityData);
+    const { tempMin, tempMax } = extractRange(entityData);
+    const label = extractLabel(entityData);
     const hasRange = tempMin != null && tempMax != null;
-    const { status, deviation, deviationPercent } = this.calculateStatus(currentTemp, tempMin, tempMax);
+    const { status, deviationPercent } = this.calculateStatus(currentTemp, tempMin, tempMax);
     const markerPos = this.calculateMarkerPosition(currentTemp, tempMin, tempMax);
     let rangeLeft = 0, rangeWidth = 100;
-    if (hasRange) {
+    if (hasRange && tempMin != null && tempMax != null) {
       const rangeSize = tempMax - tempMin;
       const extension = rangeSize * 0.3;
       const visibleMin = tempMin - extension;
@@ -6321,28 +6392,23 @@ var TempRangeTooltip = {
       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"
     };
+    const statusColors = {
+      cold: "#2563eb",
+      ok: "#16a34a",
+      hot: "#dc2626",
+      unknown: "#64748b"
+    };
     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>
+          <span class="temp-range-tooltip__title">${label}</span>
         </div>
         <div class="temp-range-tooltip__body">
           <div class="temp-range-tooltip__value-row">
@@ -6350,7 +6416,7 @@ var TempRangeTooltip = {
               ${currentTemp.toFixed(1)}<sup>\xB0C</sup>
             </div>
             <div class="temp-range-tooltip__deviation">
-              <div class="temp-range-tooltip__deviation-value ${deviationClass}">
+              <div class="temp-range-tooltip__deviation-value ${status}">
                 ${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>
@@ -6377,7 +6443,7 @@ var TempRangeTooltip = {
             </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 class="temp-range-tooltip__range-value" style="color: ${statusColors[status]}">${currentTemp.toFixed(1)}\xB0C</div>
             </div>
             <div class="temp-range-tooltip__range-item">
               <div class="temp-range-tooltip__range-label">M\xE1ximo</div>
@@ -6422,7 +6488,320 @@ var TempRangeTooltip = {
     if (container) {
       container.classList.remove("visible");
     }
+  },
+  /**
+   * Attach tooltip to an element
+   * Returns cleanup function
+   */
+  attach(element, entityData) {
+    const showHandler = (e) => this.show(element, entityData, e);
+    const hideHandler = () => this.hide();
+    element.style.cursor = "help";
+    element.addEventListener("mouseenter", showHandler);
+    element.addEventListener("mouseleave", hideHandler);
+    return () => {
+      element.removeEventListener("mouseenter", showHandler);
+      element.removeEventListener("mouseleave", hideHandler);
+      element.style.cursor = "";
+      this.hide();
+    };
+  }
+};
+
+// src/utils/EnergyRangeTooltip.ts
+var ENERGY_RANGE_TOOLTIP_CSS = `
+/* ============================================
+   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;
+}
+`;
+var cssInjected = false;
+function injectCSS() {
+  if (cssInjected) return;
+  if (typeof document === "undefined") return;
+  const styleId = "myio-energy-range-tooltip-styles";
+  if (document.getElementById(styleId)) {
+    cssInjected = true;
+    return;
   }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = ENERGY_RANGE_TOOLTIP_CSS;
+  document.head.appendChild(style);
+  cssInjected = true;
+}
+var STATUS_LABELS = {
+  standby: "Standby",
+  normal: "Operacao Normal",
+  alert: "Alerta",
+  failure: "Falha",
+  offline: "Fora da faixa"
+};
+var STATUS_INFO_LABELS = {
+  standby: "\u{1F535} Standby",
+  normal: "\u2705 Operacao Normal",
+  alert: "\u26A0\uFE0F Alerta",
+  failure: "\u{1F534} Falha",
+  offline: "\u26AB Offline / Sem dados"
 };
 var EnergyRangeTooltip = {
   containerId: "myio-energy-range-tooltip",
@@ -6430,6 +6809,7 @@ var EnergyRangeTooltip = {
    * Create or get the tooltip container
    */
   getContainer() {
+    injectCSS();
     let container = document.getElementById(this.containerId);
     if (!container) {
       container = document.createElement("div");
@@ -6449,18 +6829,18 @@ var EnergyRangeTooltip = {
     const power = Number(powerValue) || 0;
     const { standbyRange, normalRange, alertRange, failureRange } = ranges;
     if (standbyRange && power >= standbyRange.down && power <= standbyRange.up) {
-      return { status: "standby", label: "Standby" };
+      return { status: "standby", label: STATUS_LABELS.standby };
     }
     if (normalRange && power >= normalRange.down && power <= normalRange.up) {
-      return { status: "normal", label: "Normal" };
+      return { status: "normal", label: STATUS_LABELS.normal };
     }
     if (alertRange && power >= alertRange.down && power <= alertRange.up) {
-      return { status: "alert", label: "Alerta" };
+      return { status: "alert", label: STATUS_LABELS.alert };
     }
     if (failureRange && power >= failureRange.down && power <= failureRange.up) {
-      return { status: "failure", label: "Falha" };
+      return { status: "failure", label: STATUS_LABELS.failure };
     }
-    return { status: "offline", label: "Fora da faixa" };
+    return { status: "offline", label: STATUS_LABELS.offline };
   },
   /**
    * Calculate marker position on ruler (0-100%)
@@ -6491,7 +6871,7 @@ var EnergyRangeTooltip = {
    * Format power value for display
    */
   formatPower(value) {
-    if (value == null || isNaN(value)) return "-";
+    if (value == null || isNaN(Number(value))) return "-";
     const num = Number(value);
     if (num >= 1e3) {
       return `${(num / 1e3).toFixed(2)} kW`;
@@ -6509,13 +6889,40 @@ var EnergyRangeTooltip = {
     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"
-    };
+    const rangesHtml = hasRanges && ranges ? `
+      <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 potencia nao configurados
+      </div>
+    `;
     container.innerHTML = `
       <div class="energy-range-tooltip__content">
         <div class="energy-range-tooltip__header">
@@ -6532,51 +6939,18 @@ var EnergyRangeTooltip = {
             </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>
-          `}
+          ${rangesHtml}
 
           <div class="energy-range-tooltip__status-info ${status}">
-            ${statusLabels[status] || statusLabels.offline}
+            ${STATUS_INFO_LABELS[status] || STATUS_INFO_LABELS.offline}
           </div>
         </div>
       </div>
     `;
     let left, top;
     if (event && event.clientX && event.clientY) {
-      left = event.clientX + 15;
-      top = event.clientY + 15;
+      left = event.clientX + 8;
+      top = event.clientY + 8;
     } else {
       const rect = triggerElement.getBoundingClientRect();
       left = rect.left + rect.width / 2 - 150;
@@ -6585,11 +6959,11 @@ var EnergyRangeTooltip = {
     const tooltipWidth = 320;
     const tooltipHeight = 380;
     if (left + tooltipWidth > window.innerWidth - 10) {
-      left = (event?.clientX || left) - tooltipWidth - 15;
+      left = (event?.clientX || left) - tooltipWidth - 8;
     }
     if (left < 10) left = 10;
     if (top + tooltipHeight > window.innerHeight - 10) {
-      top = (event?.clientY || top) - tooltipHeight - 15;
+      top = (event?.clientY || top) - tooltipHeight - 8;
     }
     if (top < 10) top = 10;
     container.style.left = left + "px";
@@ -6604,8 +6978,229 @@ var EnergyRangeTooltip = {
     if (container) {
       container.classList.remove("visible");
     }
+  },
+  /**
+   * Attach tooltip to an element with automatic show/hide on hover
+   * Returns cleanup function to remove event listeners
+   */
+  attach(element, entityData) {
+    const handleMouseEnter = (e) => {
+      this.show(element, entityData, e);
+    };
+    const handleMouseLeave = () => {
+      this.hide();
+    };
+    const handleMouseMove = (e) => {
+      const container = document.getElementById(this.containerId);
+      if (container && container.classList.contains("visible")) {
+        let left = e.clientX + 8;
+        let top = e.clientY + 8;
+        const tooltipWidth = 320;
+        const tooltipHeight = 380;
+        if (left + tooltipWidth > window.innerWidth - 10) {
+          left = e.clientX - tooltipWidth - 8;
+        }
+        if (left < 10) left = 10;
+        if (top + tooltipHeight > window.innerHeight - 10) {
+          top = e.clientY - tooltipHeight - 8;
+        }
+        if (top < 10) top = 10;
+        container.style.left = left + "px";
+        container.style.top = top + "px";
+      }
+    };
+    element.addEventListener("mouseenter", handleMouseEnter);
+    element.addEventListener("mouseleave", handleMouseLeave);
+    element.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      element.removeEventListener("mouseenter", handleMouseEnter);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+      element.removeEventListener("mousemove", handleMouseMove);
+      this.hide();
+    };
   }
 };
+
+// src/thingsboard/main-dashboard-shopping/v-4.0.0/card/head-office/card-head-office.js
+var LABEL_CHAR_LIMIT = 18;
+var DEFAUL_DELAY_TIME_CONNECTION_IN_MINS = 1440;
+var CSS_TAG = "head-office-card-v1";
+function ensureCss() {
+  if (!document.querySelector(`style[data-myio-css="${CSS_TAG}"]`)) {
+    const style = document.createElement("style");
+    style.setAttribute("data-myio-css", CSS_TAG);
+    style.textContent = CSS_STRING;
+    document.head.appendChild(style);
+  }
+}
+function normalizeParams(params) {
+  if (!params || !params.entityObject) {
+    throw new Error("renderCardCompenteHeadOffice: entityObject is required");
+  }
+  const LogHelper2 = createLogHelper(params.debugActive ?? false);
+  const entityObject = params.entityObject;
+  if (!entityObject.entityId) {
+    LogHelper2.warn("[CardHeadOffice] entityId is missing, generating temporary ID");
+    entityObject.entityId = `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  if (!params.delayTimeConnectionInMins) {
+    LogHelper2.warn(
+      `[CardHeadOffice] delayTimeConnectionInMins is missing, defaulting to ${DEFAUL_DELAY_TIME_CONNECTION_IN_MINS} mins`
+    );
+  }
+  return {
+    entityObject,
+    i18n: { ...DEFAULT_I18N, ...params.i18n || {} },
+    enableSelection: Boolean(params.enableSelection),
+    enableDragDrop: Boolean(params.enableDragDrop),
+    useNewComponents: Boolean(params.useNewComponents),
+    // RFC-0091: Configurable delay time for connection status check (default 15 minutes)
+    delayTimeConnectionInMins: params.delayTimeConnectionInMins ?? DEFAUL_DELAY_TIME_CONNECTION_IN_MINS,
+    // Debug options
+    debugActive: params.debugActive ?? false,
+    activeTooltipDebug: params.activeTooltipDebug ?? false,
+    // LogHelper instance for this card
+    LogHelper: LogHelper2,
+    callbacks: {
+      handleActionDashboard: params.handleActionDashboard,
+      handleActionReport: params.handleActionReport,
+      handleActionSettings: params.handleActionSettings,
+      handleSelect: params.handleSelect,
+      handInfo: params.handInfo,
+      handleClickCard: params.handleClickCard
+    }
+  };
+}
+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) {
+  if (valueInWatts === null || valueInWatts === void 0 || isNaN(valueInWatts)) {
+    return { num: "-", unit: "" };
+  }
+  const val = Number(valueInWatts);
+  if (val >= 1e3) {
+    const kw = Math.ceil(val / 1e3 * 100) / 100;
+    return { num: kw.toFixed(2), unit: "kW" };
+  } else {
+    const w = Math.ceil(val);
+    return { num: w.toString(), unit: "W" };
+  }
+}
+function formatValueByDomain(value, domain) {
+  if (domain === "water") {
+    return formatWaterVolumeM3(value);
+  }
+  if (domain === "temperature") {
+    return formatTemperature(value, 0);
+  }
+  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);
+  if (isNaN(numericTarget) || isNaN(numericConsumption) || numericTarget <= 0) {
+    return 0;
+  }
+  const percentage = numericConsumption / numericTarget * 100;
+  return percentage;
+}
+function getStatusInfo(deviceStatus, i18n, domain) {
+  switch (deviceStatus) {
+    // --- Novos Status de Temperatura ---
+    case "normal":
+      return { chipClass: "chip--ok", label: "Normal" };
+    case "cold":
+      return { chipClass: "chip--standby", label: "Frio" };
+    case "hot":
+      return { chipClass: "chip--alert", label: "Quente" };
+    // --- Status Existentes (aligned with getCardStateClass) ---
+    case DeviceStatusType.POWER_ON:
+      if (domain === "water") {
+        return { chipClass: "chip--power-on", label: i18n.in_operation_water };
+      }
+      return { chipClass: "chip--power-on", label: i18n.in_operation };
+    case DeviceStatusType.STANDBY:
+      return { chipClass: "chip--standby", label: i18n.standby };
+    case DeviceStatusType.WARNING:
+      return { chipClass: "chip--warning", label: i18n.alert };
+    case DeviceStatusType.MAINTENANCE:
+      return { chipClass: "chip--maintenance", label: i18n.maintenance };
+    case DeviceStatusType.FAILURE:
+      return { chipClass: "chip--failure", label: i18n.failure };
+    case DeviceStatusType.POWER_OFF:
+      return { chipClass: "chip--power-off", label: i18n.power_off || i18n.failure };
+    case DeviceStatusType.OFFLINE:
+      return { chipClass: "chip--offline", label: i18n.offline };
+    case DeviceStatusType.NO_INFO:
+      return { chipClass: "chip--no-info", label: i18n.no_info || i18n.offline };
+    case DeviceStatusType.NOT_INSTALLED:
+      return { chipClass: "chip--not-installed", label: i18n.not_installed };
+    default:
+      return { chipClass: "chip--offline", label: i18n.offline };
+  }
+}
+function getCardStateClass(deviceStatus) {
+  switch (deviceStatus) {
+    case DeviceStatusType.POWER_ON:
+      return "is-power-on";
+    // Blue border
+    case DeviceStatusType.STANDBY:
+      return "is-standby";
+    // Green border
+    case DeviceStatusType.WARNING:
+      return "is-warning";
+    // Yellow border
+    case DeviceStatusType.MAINTENANCE:
+      return "is-maintenance";
+    // Yellow border
+    case DeviceStatusType.FAILURE:
+      return "is-failure";
+    // Dark Red border
+    case DeviceStatusType.POWER_OFF:
+      return "is-power-off";
+    // Light Red border
+    case DeviceStatusType.OFFLINE:
+      return "is-offline";
+    // Dark Gray border
+    case DeviceStatusType.NO_INFO:
+      return "is-no-info";
+    // Dark Orange border
+    case DeviceStatusType.NOT_INSTALLED:
+      return "is-not-installed";
+    // Purple border
+    default:
+      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";
+}
 function getStatusDotClass(deviceStatus) {
   switch (deviceStatus) {
     // --- Novos Status de Temperatura ---
@@ -7131,29 +7726,34 @@ function bindEvents(root, state, callbacks) {
     MyIOSelectionStore2.on("selection:change", onSelectionChange);
     root._selectionListener = onSelectionChange;
   }
-  if (entityObject.domain === "temperature") {
+  const valueElement = root.querySelector(".myio-ho-card__value");
+  if (entityObject.domain === "temperature" && valueElement) {
     const showTooltip = (e) => {
       TempRangeTooltip.show(root, state.entityObject, e);
     };
     const hideTooltip = () => {
       TempRangeTooltip.hide();
     };
-    root.addEventListener("mouseenter", showTooltip);
-    root.addEventListener("mouseleave", hideTooltip);
+    valueElement.style.cursor = "help";
+    valueElement.addEventListener("mouseenter", showTooltip);
+    valueElement.addEventListener("mouseleave", hideTooltip);
     root._tempTooltipShowFn = showTooltip;
     root._tempTooltipHideFn = hideTooltip;
+    root._tooltipElement = valueElement;
   }
-  if (entityObject.domain === "energy") {
+  if (entityObject.domain === "energy" && valueElement) {
     const showEnergyTooltip = (e) => {
       EnergyRangeTooltip.show(root, state.entityObject, e);
     };
     const hideEnergyTooltip = () => {
       EnergyRangeTooltip.hide();
     };
-    root.addEventListener("mouseenter", showEnergyTooltip);
-    root.addEventListener("mouseleave", hideEnergyTooltip);
+    valueElement.style.cursor = "help";
+    valueElement.addEventListener("mouseenter", showEnergyTooltip);
+    valueElement.addEventListener("mouseleave", hideEnergyTooltip);
     root._energyTooltipShowFn = showEnergyTooltip;
     root._energyTooltipHideFn = hideEnergyTooltip;
+    root._tooltipElement = valueElement;
   }
   root._cleanup = () => {
     document.removeEventListener("click", closeMenu);
@@ -7161,14 +7761,14 @@ function bindEvents(root, state, callbacks) {
     if (MyIOSelectionStore2 && root._selectionListener) {
       MyIOSelectionStore2.off("selection:change", root._selectionListener);
     }
-    if (root._tempTooltipShowFn) {
-      root.removeEventListener("mouseenter", root._tempTooltipShowFn);
-      root.removeEventListener("mouseleave", root._tempTooltipHideFn);
+    if (root._tempTooltipShowFn && root._tooltipElement) {
+      root._tooltipElement.removeEventListener("mouseenter", root._tempTooltipShowFn);
+      root._tooltipElement.removeEventListener("mouseleave", root._tempTooltipHideFn);
       TempRangeTooltip.hide();
     }
-    if (root._energyTooltipShowFn) {
-      root.removeEventListener("mouseenter", root._energyTooltipShowFn);
-      root.removeEventListener("mouseleave", root._energyTooltipHideFn);
+    if (root._energyTooltipShowFn && root._tooltipElement) {
+      root._tooltipElement.removeEventListener("mouseenter", root._energyTooltipShowFn);
+      root._tooltipElement.removeEventListener("mouseleave", root._energyTooltipHideFn);
       EnergyRangeTooltip.hide();
     }
   };
@@ -7721,6 +8321,7 @@ function renderCardComponentV5({
   };
   const isTankDevice = deviceType === "TANK" || deviceType === "CAIXA_DAGUA";
   const isTermostatoDevice = deviceType?.toUpperCase() === "TERMOSTATO";
+  const isEnergyDeviceFlag = isEnergyDevice(deviceType);
   const percentageForDisplay = isTankDevice ? (waterPercentage || 0) * 100 : perc;
   const calculateTempStatus = () => {
     if (temperatureStatus) return temperatureStatus;
@@ -7737,33 +8338,6 @@ function renderCardComponentV5({
     tempStatus,
     isOffline
   });
-  const getTemperatureTooltip = () => {
-    if (!isTermostatoDevice) return "";
-    const currentTemp = Number(val) || 0;
-    const hasRange = temperatureMin !== void 0 && temperatureMax !== void 0 && temperatureMin !== null && temperatureMax !== null;
-    if (isOffline) {
-      return "Dispositivo offline";
-    }
-    if (!hasRange) {
-      return `Temperatura atual: ${currentTemp.toFixed(1)}\xB0C
-Faixa n\xE3o configurada`;
-    }
-    const rangeText = `Faixa ideal: ${temperatureMin}\xB0C a ${temperatureMax}\xB0C`;
-    if (tempStatus === "above") {
-      return `ACIMA da faixa ideal
-Temperatura atual: ${currentTemp.toFixed(1)}\xB0C
-${rangeText}`;
-    } else if (tempStatus === "below") {
-      return `ABAIXO da faixa ideal
-Temperatura atual: ${currentTemp.toFixed(1)}\xB0C
-${rangeText}`;
-    } else {
-      return `DENTRO da faixa ideal
-Temperatura atual: ${currentTemp.toFixed(1)}\xB0C
-${rangeText}`;
-    }
-  };
-  const temperatureTooltip = getTemperatureTooltip();
   const cardHTML = `
       <div class="device-card-centered clickable ${cardEntity.status === "offline" ? "offline" : ""}"
           data-entity-id="${entityId}"
@@ -7789,7 +8363,7 @@ ${rangeText}`;
                 ` : ""}
               </div>
 
-              <img class="device-image" src="${deviceImageUrl}" alt="${deviceType}" ${isTermostatoDevice && temperatureTooltip ? `title="${temperatureTooltip}"` : ""} style="${isTermostatoDevice ? "cursor: help;" : ""}" />
+              <img class="device-image ${isTermostatoDevice ? "temp-tooltip-trigger" : ""}${isEnergyDeviceFlag ? " energy-tooltip-trigger" : ""}" src="${deviceImageUrl}" alt="${deviceType}" style="${isTermostatoDevice || isEnergyDeviceFlag ? "cursor: help;" : ""}" />
 
 
               ${customerName && String(customerName).trim() !== "" ? `
@@ -8353,6 +8927,33 @@ ${rangeText}`;
       }
     });
   }
+  const tempTooltipTrigger = enhancedCardElement.querySelector(".temp-tooltip-trigger");
+  let tempTooltipCleanup = null;
+  if (tempTooltipTrigger && isTermostatoDevice) {
+    const tooltipEntityData = {
+      val,
+      temperatureMin,
+      temperatureMax,
+      labelOrName: cardEntity.name,
+      name: cardEntity.name
+    };
+    tempTooltipCleanup = TempRangeTooltip.attach(tempTooltipTrigger, tooltipEntityData);
+  }
+  const energyTooltipTrigger = enhancedCardElement.querySelector(".energy-tooltip-trigger");
+  let energyTooltipCleanup = null;
+  if (energyTooltipTrigger && isEnergyDeviceFlag) {
+    const energyTooltipData = {
+      labelOrName: cardEntity.name,
+      name: cardEntity.name,
+      instantaneousPower: entityObject.instantaneousPower ?? entityObject.consumption_power ?? val,
+      powerRanges: entityObject.powerRanges || entityObject.ranges
+    };
+    energyTooltipCleanup = EnergyRangeTooltip.attach(energyTooltipTrigger, energyTooltipData);
+  }
+  container._cleanup = () => {
+    if (tempTooltipCleanup) tempTooltipCleanup();
+    if (energyTooltipCleanup) energyTooltipCleanup();
+  };
   const jQueryLikeObject = {
     get: (index) => index === 0 ? container : void 0,
     0: container,
@@ -11337,7 +11938,7 @@ var chartJsLoaded = false;
 var zoomPluginLoaded = false;
 var jsPdfLoaded = false;
 var _jspdfPromise = null;
-var cssInjected = false;
+var cssInjected2 = false;
 var STRINGS2 = {
   "pt-BR": {
     title: "Demanda",
@@ -11513,8 +12114,8 @@ function ensureRoom(doc, nextY, minRoom = 40) {
   }
   return nextY;
 }
-function injectCSS(styles) {
-  if (cssInjected) return;
+function injectCSS2(styles) {
+  if (cssInjected2) return;
   const css = `
     .myio-demand-modal-overlay {
       position: fixed;
@@ -11909,7 +12510,7 @@ function injectCSS(styles) {
   const style = document.createElement("style");
   style.textContent = css;
   document.head.appendChild(style);
-  cssInjected = true;
+  cssInjected2 = true;
 }
 function formatDate2(date, locale) {
   return date.toLocaleDateString(locale, {
@@ -12091,7 +12692,7 @@ async function openDemandModal(params) {
   const locale = params.locale || "pt-BR";
   const strings = STRINGS2[locale] || STRINGS2["pt-BR"];
   await loadExternalLibraries();
-  injectCSS(styles);
+  injectCSS2(styles);
   const container = typeof params.container === "string" ? document.querySelector(params.container) : params.container || document.body;
   if (!container) {
     throw new Error("Container element not found");
@@ -21740,7 +22341,7 @@ async function createInputDateRangePickerInsideDIV(params) {
     placeholder = "Clique para selecionar per\xEDodo",
     pickerOptions = {},
     classNames = {},
-    injectStyles = true,
+    injectStyles: injectStyles2 = true,
     showHelper = true
   } = params;
   validateId(containerId, "containerId");
@@ -21749,7 +22350,7 @@ async function createInputDateRangePickerInsideDIV(params) {
   if (!container) {
     throw new Error(`[createInputDateRangePickerInsideDIV] Container '#${containerId}' not found`);
   }
-  if (injectStyles) {
+  if (injectStyles2) {
     injectPremiumStyles();
   }
   let inputEl = document.getElementById(inputId);
@@ -21944,7 +22545,7 @@ function openGoalsPanel(params) {
     modal.setAttribute("aria-labelledby", "goals-modal-title");
     modal.innerHTML = generateModalHTML();
     document.body.appendChild(modal);
-    injectStyles();
+    injectStyles2();
     attachEventListeners();
     trapFocus(modal);
     renderTabContent();
@@ -22697,7 +23298,7 @@ function openGoalsPanel(params) {
       maximumFractionDigits: 2
     }).format(value);
   }
-  function injectStyles() {
+  function injectStyles2() {
     const styleId = "myio-goals-panel-styles";
     if (document.getElementById(styleId)) return;
     const style = document.createElement("style");
@@ -24954,7 +25555,7 @@ var LIGHT_THEME2 = {
 function getColors(theme) {
   return theme === "dark" ? DARK_THEME2 : LIGHT_THEME2;
 }
-async function fetchCustomerAttributes(customerId, token) {
+async function fetchCustomerAttributes(customerId, token, onError) {
   const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE`;
   const response = await fetch(url, {
     method: "GET",
@@ -24967,6 +25568,10 @@ async function fetchCustomerAttributes(customerId, token) {
     if (response.status === 404 || response.status === 400) {
       return { minTemperature: null, maxTemperature: null };
     }
+    if (onError) {
+      onError({ status: response.status, message: `Failed to fetch attributes: ${response.status}` });
+      return { minTemperature: null, maxTemperature: null };
+    }
     throw new Error(`Failed to fetch attributes: ${response.status}`);
   }
   const attributes = await response.json();
@@ -24983,7 +25588,7 @@ async function fetchCustomerAttributes(customerId, token) {
   }
   return { minTemperature, maxTemperature };
 }
-async function saveCustomerAttributes(customerId, token, minTemperature, maxTemperature) {
+async function saveCustomerAttributes(customerId, token, minTemperature, maxTemperature, onError) {
   const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/SERVER_SCOPE`;
   const attributes = {
     minTemperature,
@@ -24998,6 +25603,10 @@ async function saveCustomerAttributes(customerId, token, minTemperature, maxTemp
     body: JSON.stringify(attributes)
   });
   if (!response.ok) {
+    if (onError) {
+      onError({ status: response.status, message: `Failed to save attributes: ${response.status}` });
+      return;
+    }
     throw new Error(`Failed to save attributes: ${response.status}`);
   }
 }
@@ -25414,7 +26023,7 @@ function openTemperatureSettingsModal(params) {
     state.successMessage = null;
     renderModal3(container, state, modalId, destroy, handleSave);
     try {
-      await saveCustomerAttributes(state.customerId, state.token, min, max);
+      await saveCustomerAttributes(state.customerId, state.token, min, max, params.onError);
       state.minTemperature = min;
       state.maxTemperature = max;
       state.isSaving = false;
@@ -25431,7 +26040,7 @@ function openTemperatureSettingsModal(params) {
     }
   };
   renderModal3(container, state, modalId, destroy, handleSave);
-  fetchCustomerAttributes(state.customerId, state.token).then(({ minTemperature, maxTemperature }) => {
+  fetchCustomerAttributes(state.customerId, state.token, params.onError).then(({ minTemperature, maxTemperature }) => {
     state.minTemperature = minTemperature;
     state.maxTemperature = maxTemperature;
     state.isLoading = false;
@@ -27592,7 +28201,7 @@ function createConsumptionChartWidget(config) {
       </div>
     `;
   }
-  function injectStyles() {
+  function injectStyles2() {
     if (styleElement) return;
     styleElement = document.createElement("style");
     styleElement.id = `${widgetId}-styles`;
@@ -28074,7 +28683,7 @@ function createConsumptionChartWidget(config) {
         console.error(`[ConsumptionWidget] Container #${config.containerId} not found`);
         return;
       }
-      injectStyles();
+      injectStyles2();
       containerElement.innerHTML = renderHTML();
       setupListeners();
       setLoading(true);
@@ -29214,6 +29823,7 @@ function createDistributionChartWidget(config) {
   EXPORT_DOMAIN_ICONS,
   EXPORT_DOMAIN_LABELS,
   EXPORT_DOMAIN_UNITS,
+  EnergyRangeTooltip,
   MyIOChartModal,
   MyIODraggableCard,
   MyIOSelectionStore,
@@ -29222,6 +29832,7 @@ function createDistributionChartWidget(config) {
   POWER_LIMITS_DEVICE_TYPES,
   POWER_LIMITS_STATUS_CONFIG,
   POWER_LIMITS_TELEMETRY_TYPES,
+  TempRangeTooltip,
   addDetectionContext,
   addNamespace,
   aggregateByDay,