myio-js-library 0.1.557 → 0.1.559

package/dist/index.cjs

@@ -908,7 +908,7 @@ module.exports = __toCommonJS(src_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.557",
+  version: "0.1.559",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -12855,6 +12855,26 @@ var CSS_STRING = `
   margin-left: 4px;
 }
 
+/* Consumo ainda carregando (spinner no lugar do valor) */
+.myio-ho-card__value.is-loading .num {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--myio-muted, #9ca3af);
+}
+.myio-ho-card__value-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: var(--myio-brand-700, #7c3aed);
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
+
 /* Efficiency bar */
 .myio-ho-card__eff {
   display: flex;
@@ -16527,7 +16547,20 @@ function paint(root, state6) {
   const primaryValue = formatValueByDomain(entityObject.val, entityObject.domain);
   const numSpan = root.querySelector(".myio-ho-card__value .num");
   const unitSpan = root.querySelector(".myio-ho-card__value .unit");
-  numSpan.textContent = primaryValue;
+  const valueBox = root.querySelector(".myio-ho-card__value");
+  const dataLoading = !!entityObject.dataLoading && entityObject.domain !== "temperature";
+  if (valueBox) {
+    valueBox.classList.toggle("is-loading", dataLoading);
+    if (dataLoading) valueBox.setAttribute("aria-busy", "true");
+    else valueBox.removeAttribute("aria-busy");
+  }
+  if (dataLoading) {
+    numSpan.innerHTML = '<span class="myio-ho-card__value-spinner" aria-hidden="true"></span>Carregando\u2026';
+    numSpan.title = "Carregando consumo do per\xEDodo";
+  } else {
+    numSpan.textContent = primaryValue;
+    numSpan.removeAttribute("title");
+  }
   const barContainer = root.querySelector(".bar");
   const effContainer = root.querySelector(".myio-ho-card__eff");
   if (state6.enableSelection) {
@@ -71709,6 +71742,25 @@ var HeaderView = class {
   transition: color 0.2s ease;
 }
 
+/* Consumo ainda carregando */
+.${HEADER_CSS_PREFIX}-kpi-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  opacity: 0.85;
+}
+.${HEADER_CSS_PREFIX}-kpi-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2.5px solid rgba(255, 255, 255, 0.3);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
+
 .${HEADER_CSS_PREFIX}-card__subrow {
   display: flex;
   align-items: center;
@@ -72147,7 +72199,28 @@ var HeaderView = class {
   /**
    * Update energy card
    */
+  /** Spinner nos KPIs de consumo (energia e água) enquanto o período carrega */
+  setConsumptionLoading(loading) {
+    if (!loading) {
+      [this.energyKpiEl, this.waterKpiEl].forEach((el2) => {
+        if (el2?.querySelector(`.${HEADER_CSS_PREFIX}-kpi-loading`)) el2.textContent = "-";
+      });
+      return;
+    }
+    const html = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+    if (this.energyKpiEl) this.energyKpiEl.innerHTML = html;
+    if (this.waterKpiEl) this.waterKpiEl.innerHTML = html;
+    if (this.energyTrendEl) this.energyTrendEl.textContent = "";
+    if (this.waterTrendEl) this.waterTrendEl.textContent = "";
+  }
   updateEnergyCard(data) {
+    if (data.loading) {
+      if (this.energyKpiEl) {
+        this.energyKpiEl.innerHTML = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+      }
+      if (this.energyTrendEl) this.energyTrendEl.textContent = "";
+      return;
+    }
     if (this.energyKpiEl) {
       if (data.isFiltered && data.unfilteredTotal > 0) {
         const filteredFormatted = this.formatEnergy(data.customerTotal);
@@ -72196,6 +72269,13 @@ var HeaderView = class {
    * Update water card
    */
   updateWaterCard(data) {
+    if (data.loading) {
+      if (this.waterKpiEl) {
+        this.waterKpiEl.innerHTML = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+      }
+      if (this.waterTrendEl) this.waterTrendEl.textContent = "";
+      return;
+    }
     if (this.waterKpiEl) {
       if (data.isFiltered && data.unfilteredTotal > 0) {
         const filteredFormatted = this.formatWater(data.filteredTotal);
@@ -73181,6 +73261,9 @@ function createHeaderComponent(params) {
     tooltipData.temperature = data;
     view.updateTemperatureCard(data);
   }
+  function setConsumptionLoading(loading) {
+    view.setConsumptionLoading(loading);
+  }
   function updateWaterKPI(data) {
     tooltipData.water = data;
     view.updateWaterCard(data);
@@ -73236,6 +73319,7 @@ function createHeaderComponent(params) {
     updateEnergyKPI,
     updateTemperatureKPI,
     updateWaterKPI,
+    setConsumptionLoading,
     updateTooltipData,
     // Shopping/Filter
     updateShoppings,
@@ -73668,13 +73752,13 @@ function getStyles() {
   color: #ffffff;
   cursor: pointer;
   overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(62, 26, 125, 0.5), 0 4px 16px rgba(62, 26, 125, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc-compare-btn) 50%, transparent), 0 4px 16px color-mix(in srgb, var(--fc-compare-btn) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   transition: var(--fc-transition);
 }
 
 .myio-footer-compare:hover {
   background: linear-gradient(135deg, var(--fc-compare-btn-hover) 0%, var(--fc-compare-btn) 100%);
-  box-shadow: 0 0 0 1px rgba(62, 26, 125, 0.7), 0 6px 24px rgba(62, 26, 125, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc-compare-btn) 70%, transparent), 0 6px 24px color-mix(in srgb, var(--fc-compare-btn) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3);
   transform: translateY(-2px);
 }
 
@@ -73837,6 +73921,71 @@ function getStyles() {
   text-shadow: none;
 }
 
+/* ==========================================
+   Brand (paleta do dashboard): fundo s\xF3lido na cor do tema, conte\xFAdo branco
+   ========================================== */
+
+.myio-footer-component--brand {
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.myio-footer-component--brand .myio-footer-chip {
+  background: var(--fc-chip-bg);
+  box-shadow: none;
+}
+.myio-footer-component--brand .myio-footer-chip:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.32);
+  box-shadow: none;
+  transform: translateY(-2px);
+}
+.myio-footer-component--brand .myio-footer-chip-remove {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.85);
+}
+.myio-footer-component--brand .myio-footer-chip-remove:hover {
+  background: rgba(255, 107, 107, 0.22);
+  border-color: rgba(255, 107, 107, 0.5);
+  color: #fff;
+}
+.myio-footer-component--brand .myio-footer-meta {
+  background: var(--fc-meta-bg);
+  box-shadow: none;
+  cursor: default;
+}
+.myio-footer-component--brand .myio-footer-meta-title,
+.myio-footer-component--brand .myio-footer-totals,
+.myio-footer-component--brand .myio-footer-chip-name,
+.myio-footer-component--brand .myio-footer-chip-value {
+  text-shadow: none;
+}
+.myio-footer-component--brand .myio-footer-empty {
+  background: var(--fc-empty-bg);
+  color: rgba(255, 255, 255, 0.85);
+  text-shadow: none;
+  animation: none;
+}
+.myio-footer-component--brand .myio-footer-clear-btn {
+  background: var(--fc-clear-btn);
+  border-color: rgba(255, 255, 255, 0.24);
+}
+.myio-footer-component--brand .myio-footer-clear-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  box-shadow: none;
+}
+.myio-footer-component--brand .myio-footer-clear-btn:disabled {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.14);
+  color: rgba(255, 255, 255, 0.45);
+}
+.myio-footer-component--brand .myio-footer-compare:disabled {
+  background: rgba(255, 255, 255, 0.14);
+  color: rgba(255, 255, 255, 0.55);
+  opacity: 1;
+}
+
 /* ==========================================
    Responsive
    ========================================== */
@@ -73917,6 +74066,7 @@ var ChipRenderer = class {
     const chip = document.createElement("div");
     chip.className = "myio-footer-chip";
     chip.dataset.entityId = entity.id;
+    chip.dataset.fullName = entity.name || "";
     const content = document.createElement("div");
     content.className = "myio-footer-chip-content";
     const name = document.createElement("span");
@@ -74027,7 +74177,43 @@ var FooterView = class {
   getThemeConfig() {
     const themeConfig = this.theme === "dark" ? this.configTemplate.darkMode : this.configTemplate.lightMode;
     const defaults = this.theme === "dark" ? DEFAULT_DARK_THEME2 : DEFAULT_LIGHT_THEME2;
-    return { ...defaults, ...themeConfig };
+    return { ...defaults, ...themeConfig, ...this.getBrandOverrides() };
+  }
+  /** Accent do tema do dashboard (createMyIOTheme → window.MyIOUtils.theme), se houver. */
+  getDashboardAccent() {
+    const theme = window.MyIOUtils?.theme;
+    if (!theme?.accent) return null;
+    return { accent: theme.accent, accentText: theme.accentText || "#ffffff" };
+  }
+  /**
+   * Com paleta do dashboard o footer segue o padrão do dashboard de shopping: fundo sólido na cor
+   * do tema e conteúdo branco (mesma identidade do header/tabs).
+   */
+  getBrandOverrides() {
+    const brand = this.getDashboardAccent();
+    if (!brand) return {};
+    const a = brand.accent;
+    return {
+      primaryColor: a,
+      primaryHoverColor: `color-mix(in srgb, ${a} 85%, #fff)`,
+      primaryDarkColor: `color-mix(in srgb, ${a} 70%, #000)`,
+      backgroundGradientStart: a,
+      backgroundGradientEnd: a,
+      borderTopColor: "rgba(255, 255, 255, 0.18)",
+      textColor: brand.accentText,
+      mutedTextColor: "rgba(255, 255, 255, 0.75)",
+      chipBackgroundColor: "rgba(255, 255, 255, 0.12)",
+      chipBorderColor: "rgba(255, 255, 255, 0.24)",
+      chipTextColor: brand.accentText,
+      compareButtonColor: `color-mix(in srgb, ${a} 55%, #0f172a)`,
+      compareButtonHoverColor: `color-mix(in srgb, ${a} 70%, #0f172a)`,
+      clearButtonColor: "rgba(255, 255, 255, 0.12)",
+      clearButtonTextColor: brand.accentText,
+      metaBackgroundColor: "rgba(255, 255, 255, 0.10)",
+      metaBorderColor: "rgba(255, 255, 255, 0.24)",
+      emptyBackgroundColor: "rgba(255, 255, 255, 0.06)",
+      emptyBorderColor: "rgba(255, 255, 255, 0.35)"
+    };
   }
   /**
    * Apply theme colors as CSS custom properties
@@ -74060,7 +74246,8 @@ var FooterView = class {
    */
   getClassName() {
     const base = "myio-footer-component";
-    return this.theme === "light" ? `${base} ${base}--light` : base;
+    const brand = this.getDashboardAccent() ? ` ${base}--brand` : "";
+    return (this.theme === "light" ? `${base} ${base}--light` : base) + brand;
   }
   /**
    * Render the footer component
@@ -74118,6 +74305,27 @@ var FooterView = class {
    * Bind event listeners
    */
   bindEvents() {
+    this.footerEl.addEventListener("mouseover", (e) => {
+      const target = e.target;
+      if (target.closest(".myio-footer-chip-remove")) return hideFooterZoom();
+      const chip = target.closest(".myio-footer-chip");
+      if (chip) {
+        const name = chip.dataset.fullName || chip.querySelector(".myio-footer-chip-name")?.textContent || "";
+        const value = chip.querySelector(".myio-footer-chip-value")?.textContent || "";
+        showFooterZoom(chip, name, value);
+        return;
+      }
+      const meta = target.closest(".myio-footer-meta");
+      if (meta) {
+        showFooterZoom(meta, "Sele\xE7\xE3o", this.totalsEl?.textContent || "");
+      }
+    });
+    this.footerEl.addEventListener("mouseout", (e) => {
+      const to = e.relatedTarget;
+      const from = e.target.closest(".myio-footer-chip, .myio-footer-meta");
+      if (from && to && from.contains(to)) return;
+      hideFooterZoom();
+    });
     window.addEventListener("myio:theme-change", ((e) => {
       this.setTheme(e.detail.mode);
     }));
@@ -74199,6 +74407,7 @@ var FooterView = class {
    */
   renderDock(entities) {
     if (!this.dockEl) return;
+    hideFooterZoom();
     if (entities.length === 0) {
       const emptyEl = this.chipRenderer.createEmptyState(this.emptyMessage);
       this.dockEl.replaceChildren(emptyEl);
@@ -74269,6 +74478,7 @@ var FooterView = class {
    */
   destroy() {
     this.eventHandlers.clear();
+    hideFooterZoom();
     if (this.footerEl.parentNode) {
       this.footerEl.parentNode.removeChild(this.footerEl);
     }
@@ -74278,6 +74488,58 @@ var FooterView = class {
     this.clearBtnEl = null;
   }
 };
+var FOOTER_ZOOM_ID = "myio-footer-chip-zoom";
+function ensureFooterZoomEl() {
+  if (!document.getElementById("myio-footer-chip-zoom-styles")) {
+    const st = document.createElement("style");
+    st.id = "myio-footer-chip-zoom-styles";
+    st.textContent = `
+      #${FOOTER_ZOOM_ID} {
+        position: fixed; z-index: 2147483000; pointer-events: none;
+        display: flex; flex-direction: column; gap: 2px;
+        min-width: 140px; max-width: 360px; padding: 10px 14px;
+        background: var(--myio-brand-700, #3e1a7d); color: #fff;
+        border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px;
+        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35);
+        font-family: 'Nunito', system-ui, sans-serif;
+        transform: translate(-50%, 6px) scale(0.92); transform-origin: 50% 100%;
+        opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease;
+      }
+      #${FOOTER_ZOOM_ID}.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
+      #${FOOTER_ZOOM_ID} .zoom-name {
+        font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
+        white-space: normal; word-break: break-word; line-height: 1.2;
+      }
+      #${FOOTER_ZOOM_ID} .zoom-value {
+        font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15;
+      }
+    `;
+    document.head.appendChild(st);
+  }
+  let el2 = document.getElementById(FOOTER_ZOOM_ID);
+  if (!el2) {
+    el2 = document.createElement("div");
+    el2.id = FOOTER_ZOOM_ID;
+    el2.setAttribute("role", "tooltip");
+    el2.innerHTML = '<span class="zoom-name"></span><span class="zoom-value"></span>';
+    document.body.appendChild(el2);
+  }
+  return el2;
+}
+function showFooterZoom(anchor, name, value) {
+  const el2 = ensureFooterZoomEl();
+  el2.querySelector(".zoom-name").textContent = name || "";
+  el2.querySelector(".zoom-value").textContent = value || "";
+  const r = anchor.getBoundingClientRect();
+  const half = 75;
+  const left = Math.min(Math.max(r.left + r.width / 2, half + 8), window.innerWidth - half - 8);
+  el2.style.left = `${left}px`;
+  el2.style.bottom = `${window.innerHeight - r.top + 8}px`;
+  el2.classList.add("show");
+}
+function hideFooterZoom() {
+  document.getElementById(FOOTER_ZOOM_ID)?.classList.remove("show");
+}
 
 // src/components/footer/AlertDialogs.ts
 var currentOverlay = null;
@@ -118243,14 +118505,14 @@ var MenuView = class {
    ========================================== */
 
 .myio-toolbar-item--nav {
-  background: var(--menu-nav-bg, #3e1a7d);
+  background: var(--menu-nav-bg, var(--myio-brand-700, #3e1a7d));
   color: var(--menu-nav-color, #ffffff);
   font-weight: 600;
   padding: 8px 16px;
 }
 
 .myio-toolbar-item--nav:hover {
-  background: var(--menu-nav-hover-bg, #4c2391);
+  background: var(--menu-nav-hover-bg, color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 85%, #fff));
 }
 
 .myio-toolbar-item--nav .nav-label {
@@ -118264,7 +118526,7 @@ var MenuView = class {
    ========================================== */
 
 .myio-toolbar-item--filter {
-  color: var(--menu-filter-color, #6366f1);
+  color: var(--menu-filter-color, var(--myio-brand-700, #6366f1));
 }
 
 .myio-toolbar-item--filter:hover {
@@ -118287,7 +118549,7 @@ var MenuView = class {
   min-width: 340px;
   padding: 0;
   background: transparent;
-  border: 2px solid var(--menu-date-border, #3e1a7d);
+  border: 2px solid var(--menu-date-border, var(--myio-brand-700, #3e1a7d));
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.2s ease;
@@ -118295,17 +118557,17 @@ var MenuView = class {
 }
 
 .myio-toolbar-item--date:hover {
-  border-color: var(--menu-date-hover-border, #5a2d9e);
-  box-shadow: 0 0 0 3px rgba(62, 26, 125, 0.15);
+  border-color: var(--menu-date-hover-border, color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 80%, #fff));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 15%, transparent);
 }
 
 .myio-toolbar-item--date:focus-within {
-  border-color: var(--menu-date-focus-border, #3e1a7d);
-  box-shadow: 0 0 0 3px rgba(62, 26, 125, 0.25);
+  border-color: var(--menu-date-focus-border, var(--myio-brand-700, #3e1a7d));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 25%, transparent);
 }
 
 .myio-toolbar-item--date .ico {
-  background: var(--menu-date-icon-bg, #3e1a7d);
+  background: var(--menu-date-icon-bg, var(--myio-brand-700, #3e1a7d));
   color: white;
   padding: 0 12px;
   margin: 0;
@@ -123722,6 +123984,20 @@ var HEADER_DEVICES_GRID_STYLES = `
   body.light-mode .telemetry-grid-wrap.maximized .telemetry-grid-header {
     background: #f8fafc;
   }
+
+/* Consumo ainda carregando */
+.hdg-value-spinner {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  margin-right: 6px;
+  vertical-align: -2px;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: var(--myio-brand-700, #7c3aed);
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
 `;
 function injectHeaderDevicesGridStyles() {
   const styleId = "hdg-styles";
@@ -123739,14 +124015,15 @@ var DOMAIN_CONFIG7 = {
     consumptionLabel: "Consumo Total",
     zeroLabel: "Sem Consumo",
     unit: "kWh",
-    formatValue: (value) => formatEnergy(value, void 0, 2)
+    // 3 casas: mesmo padrão do dashboard de shopping (RFC-0108, measurementSettings default)
+    formatValue: (value) => formatEnergy(value, void 0, 3)
   },
   water: {
     totalLabel: "Total Hidr\xF4metros",
     consumptionLabel: "Consumo Total",
     zeroLabel: "Sem Consumo",
     unit: "m\xB3",
-    formatValue: (value) => formatWater(value)
+    formatValue: (value) => `${(Number(value) || 0).toLocaleString("pt-BR", { minimumFractionDigits: 3, maximumFractionDigits: 3 })} m\xB3`
   },
   temperature: {
     totalLabel: "Total Sensores",
@@ -123914,6 +124191,16 @@ var HeaderDevicesGridView = class {
     const percentage = total > 0 ? (online / total * 100).toFixed(1) : "0.0";
     connectivityEl.textContent = `${online}/${total} (${percentage}%)`;
     totalEl.textContent = total.toString();
+    if (stats.loading) {
+      const spin = '<span class="hdg-value-spinner" aria-hidden="true"></span>';
+      consumptionEl.innerHTML = `${spin}Carregando\u2026`;
+      zeroEl.innerHTML = spin;
+      consumptionEl.setAttribute("aria-busy", "true");
+      zeroEl.setAttribute("aria-busy", "true");
+      return;
+    }
+    consumptionEl.removeAttribute("aria-busy");
+    zeroEl.removeAttribute("aria-busy");
     consumptionEl.textContent = this.domainConfig.formatValue(consumption);
     zeroEl.textContent = zeroCount.toString();
   }
@@ -124020,7 +124307,8 @@ var HeaderDevicesGridController = class {
       online,
       total: devices.length,
       consumption: displayValue,
-      zeroCount
+      zeroCount,
+      loading: this.domain !== "temperature" && devices.some((d) => d.dataLoading)
     });
   }
   setThemeMode(mode) {
@@ -124302,6 +124590,16 @@ function generateFilterModalStyles(containerId, modalClass, primaryColor) {
       opacity: 0.5;
     }
     #${containerId} .filter-tab:hover { opacity: 0.8; transform: translateY(-1px); }
+    /* Categorias (deviceProfile): r\xF3tulos longos s\xE3o encurtados (nome completo no title) */
+    #${containerId} .filter-tab--category {
+      max-width: 100%;
+      background: color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 8%, #fff);
+      color: var(--myio-brand-700, #3e1a7d);
+    }
+    #${containerId}[data-theme="dark"] .filter-tab--category {
+      background: color-mix(in srgb, var(--myio-brand-700, #3e1a7d) 30%, #1e293b);
+      color: #e2e8f0;
+    }
     #${containerId} .filter-tab.active { opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
     #${containerId} .filter-tab[data-filter="all"] { background: #e2e8f0; color: #475569; }
     #${containerId} .filter-tab[data-filter="online"],
@@ -124585,6 +124883,28 @@ function generateFilterModalStyles(containerId, modalClass, primaryColor) {
 }
 
 // src/components/filter-modal/FilterModalView.ts
+var CATEGORY_META = {
+  ELEVADOR: { label: "Elevadores", icon: "\u{1F6D7}" },
+  ESCADA_ROLANTE: { label: "Escadas Rolantes", icon: "\u{1F4F6}" },
+  CHILLER: { label: "Chillers", icon: "\u2744\uFE0F" },
+  FANCOIL: { label: "Fancoils", icon: "\u{1F300}" },
+  BOMBA_CAG: { label: "Bombas CAG", icon: "\u{1F4A7}" },
+  BOMBA_HIDRAULICA: { label: "Bombas Hidr\xE1ulicas", icon: "\u{1F4A7}" },
+  BOMBA_INCENDIO: { label: "Bombas de Inc\xEAndio", icon: "\u{1F9EF}" },
+  MOTOR: { label: "Motores", icon: "\u2699\uFE0F" },
+  "3F_MEDIDOR": { label: "Lojas", icon: "\u{1F3EA}" },
+  ENTRADA: { label: "Entrada", icon: "\u{1F50C}" },
+  HIDROMETRO: { label: "Hidr\xF4metros", icon: "\u{1F4A7}" },
+  HIDROMETRO_AREA_COMUM: { label: "Hidr\xF4metros \xC1rea Comum", icon: "\u{1F4A7}" },
+  HIDROMETRO_SHOPPING: { label: "Hidr\xF4metros Entrada", icon: "\u{1F4A7}" },
+  TERMOSTATO: { label: "Termostatos", icon: "\u{1F321}\uFE0F" }
+};
+function categoryMeta(profile) {
+  const key = String(profile || "").toUpperCase();
+  if (CATEGORY_META[key]) return CATEGORY_META[key];
+  const label = key.split(/[_\s]+/).filter(Boolean).map((w) => w.charAt(0) + w.slice(1).toLowerCase()).join(" ");
+  return { label: label || key, icon: "\u{1F3F7}\uFE0F" };
+}
 var FilterModalView = class {
   containerId;
   widgetName;
@@ -124601,6 +124921,13 @@ var FilterModalView = class {
   onApply;
   onClose;
   globalContainer = null;
+  /** Abas de categoria (uma por deviceProfile presente nos itens) — recriadas a cada open() */
+  dynamicTabs = [];
+  dynamicIcons = {};
+  dynamicTitles = {};
+  groups = FILTER_GROUPS;
+  /** Moldura padrão (header no acento do tema + maximizar/fechar + footer premium) */
+  chrome = null;
   escHandler = null;
   currentItems = [];
   constructor(params) {
@@ -124622,7 +124949,7 @@ var FilterModalView = class {
     });
   }
   generateFilterTabsHTML(counts) {
-    const allTab = this.filterTabs.find((t) => t.id === "all");
+    const allTab = this.allTabs().find((t) => t.id === "all");
     let html = "";
     if (allTab) {
       const icon2 = FILTER_TAB_ICONS["all"] || "";
@@ -124634,19 +124961,19 @@ var FilterModalView = class {
         </div>
       `;
     }
-    FILTER_GROUPS.forEach((group) => {
-      const groupTabs = this.filterTabs.filter((t) => group.filters.includes(t.id));
+    this.groups.forEach((group) => {
+      const groupTabs = this.allTabs().filter((t) => group.filters.includes(t.id));
       if (groupTabs.length === 0) return;
       html += `
         <div class="filter-group">
           <span class="filter-group-label">${group.label}</span>
           <div class="filter-group-tabs">
             ${groupTabs.map((tab) => {
-        const icon2 = FILTER_TAB_ICONS[tab.id] || "";
+        const icon2 = FILTER_TAB_ICONS[tab.id] || this.dynamicIcons[tab.id] || "";
         const count = counts[tab.id] || 0;
         const expandBtn = count > 0 ? `<button class="filter-tab-expand" data-expand-filter="${tab.id}" title="Ver dispositivos">+</button>` : "";
         return `
-              <button class="filter-tab active" data-filter="${tab.id}">
+              <button class="filter-tab active${tab.id.startsWith("cat_") ? " filter-tab--category" : ""}" data-filter="${tab.id}" title="${this.dynamicTitles[tab.id] || tab.label}">
                 ${icon2} ${tab.label} (<span id="count${tab.id.charAt(0).toUpperCase() + tab.id.slice(1)}">${count}</span>)${expandBtn}
               </button>
             `;
@@ -124716,9 +125043,29 @@ var FilterModalView = class {
       </div>
     `;
   }
+  allTabs() {
+    return [...this.filterTabs, ...this.dynamicTabs];
+  }
+  /** Grupo "Categoria": uma aba por deviceProfile presente nos itens (ex.: Elevadores, Escadas Rolantes). */
+  buildCategoryTabs(items) {
+    const profileOf3 = (item) => String(item.deviceProfile || "").trim().toUpperCase();
+    const profiles = Array.from(new Set(items.map(profileOf3).filter(Boolean)));
+    profiles.sort((a, b) => categoryMeta(a).label.localeCompare(categoryMeta(b).label, "pt-BR"));
+    this.dynamicIcons = {};
+    this.dynamicTitles = {};
+    this.dynamicTabs = profiles.map((profile) => {
+      const id = `cat_${profile.replace(/[^A-Za-z0-9]/g, "_")}`;
+      const meta = categoryMeta(profile);
+      this.dynamicIcons[id] = meta.icon;
+      this.dynamicTitles[id] = meta.label;
+      const label = meta.label.length > 22 ? `${meta.label.slice(0, 21).trimEnd()}\u2026` : meta.label;
+      return { id, label, filter: (item) => profileOf3(item) === profile };
+    });
+    this.groups = this.dynamicTabs.length ? [...FILTER_GROUPS, { id: "category", label: "Categoria", filters: this.dynamicTabs.map((t) => t.id) }] : FILTER_GROUPS;
+  }
   calculateCounts(items) {
     const counts = {};
-    this.filterTabs.forEach((tab) => {
+    this.allTabs().forEach((tab) => {
       counts[tab.id] = items.filter(tab.filter).length;
     });
     return counts;
@@ -124859,7 +125206,7 @@ var FilterModalView = class {
   bindFilterTabHandlers(modal, items) {
     const filterTabsEl = modal.querySelectorAll(".filter-tab");
     const getFilterFn = (filterId) => {
-      const tabConfig = this.filterTabs.find((t) => t.id === filterId);
+      const tabConfig = this.allTabs().find((t) => t.id === filterId);
       return tabConfig ? tabConfig.filter : () => false;
     };
     const applyActiveFilters = () => {
@@ -124868,16 +125215,16 @@ var FilterModalView = class {
         return groupActiveFilters.some((filterId) => getFilterFn(filterId)(item));
       };
       let filteredItems = [...items];
-      for (let i = 0; i < FILTER_GROUPS.length; i++) {
-        const group = FILTER_GROUPS[i];
+      for (let i = 0; i < this.groups.length; i++) {
+        const group = this.groups[i];
         const activeInGroup = Array.from(filterTabsEl).filter(
           (t) => group.filters.includes(t.getAttribute("data-filter") || "") && t.classList.contains("active")
         ).map((t) => t.getAttribute("data-filter") || "");
         if (activeInGroup.length > 0) {
           filteredItems = filteredItems.filter((item) => itemPassesGroup(item, activeInGroup));
         }
-        for (let j = i + 1; j < FILTER_GROUPS.length; j++) {
-          const nextGroup = FILTER_GROUPS[j];
+        for (let j = i + 1; j < this.groups.length; j++) {
+          const nextGroup = this.groups[j];
           nextGroup.filters.forEach((filterId) => {
             const tab = Array.from(filterTabsEl).find((t) => t.getAttribute("data-filter") === filterId);
             if (!tab) return;
@@ -124889,7 +125236,7 @@ var FilterModalView = class {
       }
       const activeFilters = Array.from(filterTabsEl).filter((t) => t.classList.contains("active") && t.getAttribute("data-filter") !== "all").map((t) => t.getAttribute("data-filter") || "");
       const activeByGroup = {};
-      FILTER_GROUPS.forEach((group) => {
+      this.groups.forEach((group) => {
         const activeInGroup = activeFilters.filter((id) => group.filters.includes(id));
         if (activeInGroup.length > 0) activeByGroup[group.id] = activeInGroup;
       });
@@ -124909,7 +125256,7 @@ var FilterModalView = class {
     };
     const getFilteredItems = () => {
       let filteredItems = [...items];
-      FILTER_GROUPS.forEach((group) => {
+      this.groups.forEach((group) => {
         const activeInGroup = Array.from(filterTabsEl).filter(
           (t) => group.filters.includes(t.getAttribute("data-filter") || "") && t.classList.contains("active")
         ).map((t) => t.getAttribute("data-filter") || "");
@@ -124922,7 +125269,7 @@ var FilterModalView = class {
       return filteredItems;
     };
     const updateFilterCounts = (filteredItems) => {
-      this.filterTabs.forEach((tabConfig) => {
+      this.allTabs().forEach((tabConfig) => {
         if (tabConfig.id === "all") {
           const countEl = modal.querySelector("#countAll");
           if (countEl) countEl.textContent = String(filteredItems.length);
@@ -124971,7 +125318,7 @@ var FilterModalView = class {
               connectivityTab.classList.add("active");
           }
           const filteredItems2 = getFilteredItems();
-          const typeIds = ["elevators", "escalators", "hvac", "others", "commonArea", "stores"];
+          const typeIds = ["elevators", "escalators", "hvac", "others", "commonArea", "stores", ...this.dynamicTabs.map((t) => t.id)];
           typeIds.forEach((typeId) => {
             const typeTab = Array.from(filterTabsEl).find((t) => t.getAttribute("data-filter") === typeId);
             if (!typeTab) return;
@@ -125001,7 +125348,7 @@ var FilterModalView = class {
     expandBtns.forEach((btn) => {
       const filterId = btn.getAttribute("data-expand-filter");
       if (!filterId) return;
-      const filterTabConfig = this.filterTabs.find((t) => t.id === filterId);
+      const filterTabConfig = this.allTabs().find((t) => t.id === filterId);
       const filterFn = filterTabConfig?.filter || (() => false);
       btn.addEventListener("mouseenter", (e) => {
         e.stopPropagation();
@@ -125022,9 +125369,9 @@ var FilterModalView = class {
   showDeviceTooltip(triggerEl, filterId, devices) {
     const InfoTooltip2 = window.MyIOLibrary;
     if (!InfoTooltip2?.InfoTooltip) return;
-    const filterTabConfig = this.filterTabs.find((t) => t.id === filterId);
+    const filterTabConfig = this.allTabs().find((t) => t.id === filterId);
     const label = filterTabConfig?.label || filterId;
-    const icon2 = FILTER_TAB_ICONS[filterId] || "\u{1F4CB}";
+    const icon2 = FILTER_TAB_ICONS[filterId] || this.dynamicIcons[filterId] || "\u{1F4CB}";
     let devicesHtml = "";
     if (devices.length === 0) {
       devicesHtml = `
@@ -125101,12 +125448,17 @@ var FilterModalView = class {
         this.globalContainer.innerHTML = `<style>${generateFilterModalStyles(this.containerId, this.modalClass, this.primaryColor)}</style>${this.generateModalHTML()}`;
         document.body.appendChild(this.globalContainer);
         const modal2 = this.globalContainer.querySelector("#filterModal");
-        if (modal2) this.setupHandlers(modal2, items);
+        if (modal2) {
+          this.setupHandlers(modal2, items);
+          this.mountChrome(modal2);
+        }
       }
     }
     this.globalContainer.setAttribute("data-theme", this.themeMode);
+    if (this.chrome && this.chrome.getTheme() !== this.themeMode) this.chrome.setTheme(this.themeMode);
     const modal = this.globalContainer.querySelector("#filterModal");
     if (!modal) return;
+    this.buildCategoryTabs(items);
     const counts = this.calculateCounts(items);
     const tabsContainer = modal.querySelector("#filterTabsContainer");
     if (tabsContainer) {
@@ -125121,6 +125473,28 @@ var FilterModalView = class {
     modal.classList.remove("hidden");
     document.body.classList.add("filter-modal-open");
   }
+  /** Troca o header próprio pela moldura padrão das modais premium e adiciona o footer premium. */
+  mountChrome(modal) {
+    const card = modal.querySelector(`.${this.modalClass}-card`);
+    if (!card || !this.globalContainer) return;
+    this.chrome = createPremiumModalChrome({
+      modalId: `${this.containerId}Chrome`,
+      icon: "\u{1F50D}",
+      title: "Filtrar e Ordenar",
+      modalEl: card,
+      headerSlot: modal.querySelector(`#${this.containerId}Header`),
+      themeTarget: this.globalContainer,
+      // estilos escuros da modal são por #container[data-theme]
+      theme: this.themeMode === "dark" ? "dark" : "light",
+      showThemeToggle: true,
+      maximizedClass: "maximized",
+      headerRadius: "16px 16px 0 0",
+      onClose: () => this.close(),
+      onThemeChange: (t) => {
+        this.themeMode = t;
+      }
+    });
+  }
   close() {
     if (this.globalContainer) {
       const modal = this.globalContainer.querySelector("#filterModal");
@@ -125135,12 +125509,15 @@ var FilterModalView = class {
     if (this.globalContainer) {
       this.globalContainer.setAttribute("data-theme", mode);
     }
+    this.chrome?.setTheme(mode === "dark" ? "dark" : "light");
   }
   destroy() {
     if (this.escHandler) {
       document.removeEventListener("keydown", this.escHandler);
       this.escHandler = null;
     }
+    this.chrome?.destroy();
+    this.chrome = null;
     if (this.globalContainer) {
       this.globalContainer.remove();
       this.globalContainer = null;