myio-js-library 0.1.215 → 0.1.217

package/dist/index.js

@@ -43568,6 +43568,1064 @@ async function openContractDevicesModal(params) {
     throw error;
   }
 }
+
+// src/components/premium-modals/measurement-setup/types.ts
+var WATER_UNITS = [
+  { value: "m3", label: "Metros C\xFAbicos (m\xB3)" },
+  { value: "liters", label: "Litros (L)" }
+];
+var ENERGY_UNITS = [
+  { value: "auto", label: "Autom\xE1tico (kWh/MWh)" },
+  { value: "kwh", label: "Quilowatt-hora (kWh)" },
+  { value: "mwh", label: "Megawatt-hora (MWh)" }
+];
+var TEMPERATURE_UNITS = [
+  { value: "celsius", label: "Celsius (\xB0C)" },
+  { value: "fahrenheit", label: "Fahrenheit (\xB0F)" }
+];
+var DECIMAL_OPTIONS = [
+  { value: 0, label: "0 casas" },
+  { value: 1, label: "1 casa" },
+  { value: 2, label: "2 casas" },
+  { value: 3, label: "3 casas" },
+  { value: 4, label: "4 casas" },
+  { value: 5, label: "5 casas" },
+  { value: 6, label: "6 casas" }
+];
+var DOMAIN_CONFIG5 = {
+  water: {
+    icon: "\u{1F4A7}",
+    label: "\xC1gua",
+    color: "#3b82f6",
+    bgColor: "rgba(59, 130, 246, 0.1)"
+  },
+  energy: {
+    icon: "\u26A1",
+    label: "Energia",
+    color: "#f59e0b",
+    bgColor: "rgba(245, 158, 11, 0.1)"
+  },
+  temperature: {
+    icon: "\u{1F321}\uFE0F",
+    label: "Temperatura",
+    color: "#ef4444",
+    bgColor: "rgba(239, 68, 68, 0.1)"
+  }
+};
+var DEFAULT_SETTINGS = {
+  version: "1.0.0",
+  updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+  water: {
+    unit: "m3",
+    decimalPlaces: 3,
+    autoScale: true
+  },
+  energy: {
+    unit: "auto",
+    decimalPlaces: 3,
+    forceUnit: false
+  },
+  temperature: {
+    unit: "celsius",
+    decimalPlaces: 1
+  }
+};
+
+// src/components/premium-modals/measurement-setup/MeasurementSetupView.ts
+var MeasurementSetupView = class {
+  container = null;
+  overlayEl = null;
+  config;
+  formData;
+  isLoading = false;
+  isSaving = false;
+  constructor(config) {
+    this.config = config;
+    this.formData = {
+      water: { ...DEFAULT_SETTINGS.water },
+      energy: { ...DEFAULT_SETTINGS.energy },
+      temperature: { ...DEFAULT_SETTINGS.temperature }
+    };
+  }
+  render(targetContainer) {
+    this.overlayEl = document.createElement("div");
+    this.overlayEl.className = "myio-measurement-setup-overlay";
+    this.overlayEl.innerHTML = `
+      <style>${this.getStyles()}</style>
+      <div class="myio-measurement-setup-card">
+        ${this.renderHeader()}
+        <div class="myio-measurement-setup-body">
+          ${this.renderWaterSection()}
+          ${this.renderEnergySection()}
+          ${this.renderTemperatureSection()}
+        </div>
+        ${this.renderToolbar()}
+        ${this.renderLoadingState()}
+        ${this.renderErrorState()}
+        ${this.renderSuccessState()}
+      </div>
+    `;
+    const target = targetContainer || document.body;
+    target.appendChild(this.overlayEl);
+    this.container = this.overlayEl.querySelector(".myio-measurement-setup-card");
+    this.setupEventListeners();
+    requestAnimationFrame(() => {
+      this.overlayEl?.classList.add("active");
+    });
+    return this.overlayEl;
+  }
+  renderHeader() {
+    return `
+      <div class="myio-modal-header">
+        <h2 class="myio-modal-title">\u{1F4D0} Configura\xE7\xE3o de Medidas</h2>
+        <button class="myio-modal-close" id="msm-close-btn" type="button" aria-label="Fechar modal">\xD7</button>
+      </div>
+    `;
+  }
+  renderWaterSection() {
+    const cfg = DOMAIN_CONFIG5.water;
+    return `
+      <div class="myio-measurement-section" style="--section-color: ${cfg.color}; --section-bg: ${cfg.bgColor};">
+        <div class="myio-section-header">
+          <span class="myio-section-icon">${cfg.icon}</span>
+          <span class="myio-section-title">${cfg.label}</span>
+        </div>
+        <div class="myio-section-content">
+          <div class="myio-form-group">
+            <label for="msm-water-unit">Unidade</label>
+            <select id="msm-water-unit" class="myio-select">
+              ${WATER_UNITS.map((u) => `
+                <option value="${u.value}" ${u.value === this.formData.water.unit ? "selected" : ""}>
+                  ${u.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group">
+            <label for="msm-water-decimals">Casas Decimais</label>
+            <select id="msm-water-decimals" class="myio-select">
+              ${DECIMAL_OPTIONS.map((d) => `
+                <option value="${d.value}" ${d.value === this.formData.water.decimalPlaces ? "selected" : ""}>
+                  ${d.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group myio-checkbox-group">
+            <label class="myio-checkbox-label">
+              <input type="checkbox" id="msm-water-autoscale" ${this.formData.water.autoScale ? "checked" : ""}>
+              <span class="myio-checkbox-text">Escala autom\xE1tica (L\u2194m\xB3)</span>
+            </label>
+            <span class="myio-form-hint">Converte automaticamente entre unidades</span>
+          </div>
+        </div>
+        <div class="myio-section-preview">
+          <span class="myio-preview-label">Exemplo:</span>
+          <span class="myio-preview-value" id="msm-water-preview">1.234,567 m\xB3</span>
+        </div>
+      </div>
+    `;
+  }
+  renderEnergySection() {
+    const cfg = DOMAIN_CONFIG5.energy;
+    return `
+      <div class="myio-measurement-section" style="--section-color: ${cfg.color}; --section-bg: ${cfg.bgColor};">
+        <div class="myio-section-header">
+          <span class="myio-section-icon">${cfg.icon}</span>
+          <span class="myio-section-title">${cfg.label}</span>
+        </div>
+        <div class="myio-section-content">
+          <div class="myio-form-group">
+            <label for="msm-energy-unit">Unidade</label>
+            <select id="msm-energy-unit" class="myio-select">
+              ${ENERGY_UNITS.map((u) => `
+                <option value="${u.value}" ${u.value === this.formData.energy.unit ? "selected" : ""}>
+                  ${u.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group">
+            <label for="msm-energy-decimals">Casas Decimais</label>
+            <select id="msm-energy-decimals" class="myio-select">
+              ${DECIMAL_OPTIONS.filter((d) => d.value <= 4).map((d) => `
+                <option value="${d.value}" ${d.value === this.formData.energy.decimalPlaces ? "selected" : ""}>
+                  ${d.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group myio-checkbox-group">
+            <label class="myio-checkbox-label">
+              <input type="checkbox" id="msm-energy-forceunit" ${this.formData.energy.forceUnit ? "checked" : ""}>
+              <span class="myio-checkbox-text">For\xE7ar unidade selecionada</span>
+            </label>
+            <span class="myio-form-hint">Quando ativo, n\xE3o converte automaticamente kWh\u2194MWh</span>
+          </div>
+        </div>
+        <div class="myio-section-preview">
+          <span class="myio-preview-label">Exemplo:</span>
+          <span class="myio-preview-value" id="msm-energy-preview">1.234,567 kWh</span>
+        </div>
+      </div>
+    `;
+  }
+  renderTemperatureSection() {
+    const cfg = DOMAIN_CONFIG5.temperature;
+    return `
+      <div class="myio-measurement-section" style="--section-color: ${cfg.color}; --section-bg: ${cfg.bgColor};">
+        <div class="myio-section-header">
+          <span class="myio-section-icon">${cfg.icon}</span>
+          <span class="myio-section-title">${cfg.label}</span>
+        </div>
+        <div class="myio-section-content">
+          <div class="myio-form-group">
+            <label for="msm-temp-unit">Unidade</label>
+            <select id="msm-temp-unit" class="myio-select">
+              ${TEMPERATURE_UNITS.map((u) => `
+                <option value="${u.value}" ${u.value === this.formData.temperature.unit ? "selected" : ""}>
+                  ${u.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group">
+            <label for="msm-temp-decimals">Casas Decimais</label>
+            <select id="msm-temp-decimals" class="myio-select">
+              ${DECIMAL_OPTIONS.filter((d) => d.value <= 3).map((d) => `
+                <option value="${d.value}" ${d.value === this.formData.temperature.decimalPlaces ? "selected" : ""}>
+                  ${d.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+        </div>
+        <div class="myio-section-preview">
+          <span class="myio-preview-label">Exemplo:</span>
+          <span class="myio-preview-value" id="msm-temp-preview">23,5 \xB0C</span>
+        </div>
+      </div>
+    `;
+  }
+  renderToolbar() {
+    return `
+      <div class="myio-measurement-setup-toolbar">
+        <div class="myio-toolbar-actions">
+          <button class="myio-btn myio-btn-secondary" id="msm-reset-btn" type="button">
+            Restaurar Padr\xE3o
+          </button>
+          <button class="myio-btn myio-btn-primary" id="msm-save-btn" type="button">
+            <span class="myio-btn-text">Salvar</span>
+            <span class="myio-btn-spinner" style="display: none;"></span>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  renderLoadingState() {
+    return `
+      <div class="myio-measurement-setup-loading" id="msm-loading" style="display: none;">
+        <div class="myio-spinner"></div>
+        <span>Carregando configura\xE7\xE3o...</span>
+      </div>
+    `;
+  }
+  renderErrorState() {
+    return `
+      <div class="myio-measurement-setup-error" id="msm-error" style="display: none;">
+        <span class="myio-error-icon">&#x26A0;</span>
+        <span class="myio-error-message" id="msm-error-msg"></span>
+      </div>
+    `;
+  }
+  renderSuccessState() {
+    return `
+      <div class="myio-measurement-setup-success" id="msm-success" style="display: none;">
+        <span class="myio-success-icon">&#x2713;</span>
+        <span class="myio-success-message">Configura\xE7\xE3o salva com sucesso!</span>
+      </div>
+    `;
+  }
+  setupEventListeners() {
+    if (!this.overlayEl) return;
+    const closeBtn = this.overlayEl.querySelector("#msm-close-btn");
+    closeBtn?.addEventListener("click", () => this.close());
+    this.overlayEl.addEventListener("click", (e) => {
+      if (e.target === this.overlayEl) {
+        this.close();
+      }
+    });
+    document.addEventListener("keydown", this.handleKeyDown);
+    const saveBtn = this.overlayEl.querySelector("#msm-save-btn");
+    saveBtn?.addEventListener("click", () => this.handleSave());
+    const resetBtn = this.overlayEl.querySelector("#msm-reset-btn");
+    resetBtn?.addEventListener("click", () => this.handleReset());
+    const waterUnit = this.overlayEl.querySelector("#msm-water-unit");
+    const waterDecimals = this.overlayEl.querySelector("#msm-water-decimals");
+    const waterAutoScale = this.overlayEl.querySelector("#msm-water-autoscale");
+    waterUnit?.addEventListener("change", (e) => {
+      this.formData.water.unit = e.target.value;
+      this.updatePreviews();
+    });
+    waterDecimals?.addEventListener("change", (e) => {
+      this.formData.water.decimalPlaces = parseInt(e.target.value, 10);
+      this.updatePreviews();
+    });
+    waterAutoScale?.addEventListener("change", (e) => {
+      this.formData.water.autoScale = e.target.checked;
+    });
+    const energyUnit = this.overlayEl.querySelector("#msm-energy-unit");
+    const energyDecimals = this.overlayEl.querySelector("#msm-energy-decimals");
+    const energyForceUnit = this.overlayEl.querySelector("#msm-energy-forceunit");
+    energyUnit?.addEventListener("change", (e) => {
+      this.formData.energy.unit = e.target.value;
+      this.updatePreviews();
+    });
+    energyDecimals?.addEventListener("change", (e) => {
+      this.formData.energy.decimalPlaces = parseInt(e.target.value, 10);
+      this.updatePreviews();
+    });
+    energyForceUnit?.addEventListener("change", (e) => {
+      this.formData.energy.forceUnit = e.target.checked;
+    });
+    const tempUnit = this.overlayEl.querySelector("#msm-temp-unit");
+    const tempDecimals = this.overlayEl.querySelector("#msm-temp-decimals");
+    tempUnit?.addEventListener("change", (e) => {
+      this.formData.temperature.unit = e.target.value;
+      this.updatePreviews();
+    });
+    tempDecimals?.addEventListener("change", (e) => {
+      this.formData.temperature.decimalPlaces = parseInt(e.target.value, 10);
+      this.updatePreviews();
+    });
+    this.updatePreviews();
+  }
+  updatePreviews() {
+    const waterPreview = this.overlayEl?.querySelector("#msm-water-preview");
+    if (waterPreview) {
+      const sampleValue = 1234.567;
+      const unit = this.formData.water.unit === "liters" ? "L" : "m\xB3";
+      const displayValue = this.formData.water.unit === "liters" ? sampleValue * 1e3 : sampleValue;
+      waterPreview.textContent = this.formatNumber(displayValue, this.formData.water.decimalPlaces) + " " + unit;
+    }
+    const energyPreview = this.overlayEl?.querySelector("#msm-energy-preview");
+    if (energyPreview) {
+      const sampleValueKwh = 1234.567;
+      let displayValue = sampleValueKwh;
+      let unit = "kWh";
+      if (this.formData.energy.unit === "mwh") {
+        displayValue = sampleValueKwh / 1e3;
+        unit = "MWh";
+      } else if (this.formData.energy.unit === "auto" && sampleValueKwh > 1e3) {
+        displayValue = sampleValueKwh / 1e3;
+        unit = "MWh";
+      }
+      energyPreview.textContent = this.formatNumber(displayValue, this.formData.energy.decimalPlaces) + " " + unit;
+    }
+    const tempPreview = this.overlayEl?.querySelector("#msm-temp-preview");
+    if (tempPreview) {
+      const sampleCelsius = 23.5;
+      let displayValue = sampleCelsius;
+      let unit = "\xB0C";
+      if (this.formData.temperature.unit === "fahrenheit") {
+        displayValue = sampleCelsius * 9 / 5 + 32;
+        unit = "\xB0F";
+      }
+      tempPreview.textContent = this.formatNumber(displayValue, this.formData.temperature.decimalPlaces) + " " + unit;
+    }
+  }
+  formatNumber(value, decimals) {
+    const parts = value.toFixed(decimals).split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+    return decimals > 0 ? parts.join(",") : parts[0];
+  }
+  handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      this.close();
+    }
+  };
+  async handleSave() {
+    if (this.isSaving) return;
+    this.isSaving = true;
+    this.showSaveLoading(true);
+    this.hideError();
+    this.hideSuccess();
+    try {
+      await this.config.onSave();
+      this.showSuccess();
+      setTimeout(() => this.hideSuccess(), 3e3);
+    } catch (error) {
+      this.showError(error.message || "Falha ao salvar configura\xE7\xE3o");
+    } finally {
+      this.isSaving = false;
+      this.showSaveLoading(false);
+    }
+  }
+  handleReset() {
+    this.formData = {
+      water: { ...DEFAULT_SETTINGS.water },
+      energy: { ...DEFAULT_SETTINGS.energy },
+      temperature: { ...DEFAULT_SETTINGS.temperature }
+    };
+    this.updateFormInputs();
+    this.updatePreviews();
+    this.hideError();
+    this.hideSuccess();
+  }
+  updateFormInputs() {
+    const waterUnit = this.overlayEl?.querySelector("#msm-water-unit");
+    const waterDecimals = this.overlayEl?.querySelector("#msm-water-decimals");
+    const waterAutoScale = this.overlayEl?.querySelector("#msm-water-autoscale");
+    if (waterUnit) waterUnit.value = this.formData.water.unit;
+    if (waterDecimals) waterDecimals.value = String(this.formData.water.decimalPlaces);
+    if (waterAutoScale) waterAutoScale.checked = this.formData.water.autoScale;
+    const energyUnit = this.overlayEl?.querySelector("#msm-energy-unit");
+    const energyDecimals = this.overlayEl?.querySelector("#msm-energy-decimals");
+    const energyForceUnit = this.overlayEl?.querySelector("#msm-energy-forceunit");
+    if (energyUnit) energyUnit.value = this.formData.energy.unit;
+    if (energyDecimals) energyDecimals.value = String(this.formData.energy.decimalPlaces);
+    if (energyForceUnit) energyForceUnit.checked = this.formData.energy.forceUnit;
+    const tempUnit = this.overlayEl?.querySelector("#msm-temp-unit");
+    const tempDecimals = this.overlayEl?.querySelector("#msm-temp-decimals");
+    if (tempUnit) tempUnit.value = this.formData.temperature.unit;
+    if (tempDecimals) tempDecimals.value = String(this.formData.temperature.decimalPlaces);
+  }
+  close() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+    if (this.overlayEl) {
+      this.overlayEl.classList.remove("active");
+      setTimeout(() => {
+        this.overlayEl?.remove();
+        this.overlayEl = null;
+        this.container = null;
+        this.config.onClose();
+      }, 300);
+    }
+  }
+  destroy() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+    this.overlayEl?.remove();
+    this.overlayEl = null;
+    this.container = null;
+  }
+  showLoading() {
+    this.isLoading = true;
+    const loadingEl = this.overlayEl?.querySelector("#msm-loading");
+    const bodyEl = this.overlayEl?.querySelector(".myio-measurement-setup-body");
+    if (loadingEl) loadingEl.style.display = "flex";
+    if (bodyEl) bodyEl.style.opacity = "0.5";
+  }
+  hideLoading() {
+    this.isLoading = false;
+    const loadingEl = this.overlayEl?.querySelector("#msm-loading");
+    const bodyEl = this.overlayEl?.querySelector(".myio-measurement-setup-body");
+    if (loadingEl) loadingEl.style.display = "none";
+    if (bodyEl) bodyEl.style.opacity = "1";
+  }
+  showSaveLoading(show) {
+    const saveBtn = this.overlayEl?.querySelector("#msm-save-btn");
+    const btnText = saveBtn?.querySelector(".myio-btn-text");
+    const btnSpinner = saveBtn?.querySelector(".myio-btn-spinner");
+    if (saveBtn) saveBtn.disabled = show;
+    if (btnText) btnText.style.display = show ? "none" : "inline";
+    if (btnSpinner) btnSpinner.style.display = show ? "inline-block" : "none";
+  }
+  showError(message) {
+    const errorEl = this.overlayEl?.querySelector("#msm-error");
+    const errorMsg = this.overlayEl?.querySelector("#msm-error-msg");
+    if (errorEl) errorEl.style.display = "flex";
+    if (errorMsg) errorMsg.textContent = message;
+  }
+  hideError() {
+    const errorEl = this.overlayEl?.querySelector("#msm-error");
+    if (errorEl) errorEl.style.display = "none";
+  }
+  showSuccess() {
+    const successEl = this.overlayEl?.querySelector("#msm-success");
+    if (successEl) successEl.style.display = "flex";
+  }
+  hideSuccess() {
+    const successEl = this.overlayEl?.querySelector("#msm-success");
+    if (successEl) successEl.style.display = "none";
+  }
+  getFormData() {
+    return {
+      water: { ...this.formData.water },
+      energy: { ...this.formData.energy },
+      temperature: { ...this.formData.temperature }
+    };
+  }
+  setFormData(data) {
+    if (data.water) this.formData.water = { ...data.water };
+    if (data.energy) this.formData.energy = { ...data.energy };
+    if (data.temperature) this.formData.temperature = { ...data.temperature };
+    this.updateFormInputs();
+    this.updatePreviews();
+  }
+  getStyles() {
+    const styles = this.config.styles || {};
+    const primaryColor = styles.primaryColor || "#4A148C";
+    const successColor = styles.successColor || "#22c55e";
+    const dangerColor = styles.dangerColor || "#ef4444";
+    return `
+      .myio-measurement-setup-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: ${styles.zIndex || 1e4};
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+        font-family: ${styles.fontFamily || "'Roboto', Arial, sans-serif"};
+      }
+
+      .myio-measurement-setup-overlay.active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .myio-measurement-setup-card {
+        background: ${styles.backgroundColor || "#ffffff"};
+        border-radius: ${styles.borderRadius || "8px"};
+        width: 90%;
+        max-width: 580px;
+        max-height: 90vh;
+        overflow-y: auto;
+        transform: scale(0.9);
+        transition: transform 0.3s ease;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      }
+
+      .myio-measurement-setup-overlay.active .myio-measurement-setup-card {
+        transform: scale(1);
+      }
+
+      /* Header */
+      .myio-modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 12px;
+        background: ${primaryColor};
+        border-radius: 8px 8px 0 0;
+        min-height: 18px;
+      }
+
+      .myio-modal-title {
+        margin: 4px;
+        font-size: 14px;
+        font-weight: 600;
+        color: white;
+        line-height: 1.5;
+      }
+
+      .myio-modal-close {
+        background: none;
+        border: none;
+        font-size: 18px;
+        cursor: pointer;
+        padding: 2px 8px;
+        border-radius: 4px;
+        color: rgba(255, 255, 255, 0.8);
+        transition: background-color 0.2s, color 0.2s;
+        line-height: 1;
+      }
+
+      .myio-modal-close:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+        color: white;
+      }
+
+      /* Body */
+      .myio-measurement-setup-body {
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        transition: opacity 0.3s;
+      }
+
+      /* Section cards */
+      .myio-measurement-section {
+        background: var(--section-bg);
+        border: 1px solid var(--section-color);
+        border-radius: 6px;
+        padding: 10px 12px;
+        transition: transform 0.2s, box-shadow 0.2s;
+      }
+
+      .myio-measurement-section:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      }
+
+      .myio-section-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 8px;
+        padding-bottom: 6px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      }
+
+      .myio-section-icon {
+        font-size: 16px;
+        line-height: 1;
+      }
+
+      .myio-section-title {
+        font-weight: 600;
+        font-size: 13px;
+        color: #1f2937;
+      }
+
+      .myio-section-content {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 10px;
+      }
+
+      .myio-section-preview {
+        margin-top: 8px;
+        padding-top: 6px;
+        border-top: 1px dashed rgba(0, 0, 0, 0.08);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .myio-preview-label {
+        font-size: 11px;
+        color: #6b7280;
+      }
+
+      .myio-preview-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--section-color);
+        font-family: 'Consolas', 'Monaco', monospace;
+      }
+
+      /* Form elements */
+      .myio-form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+
+      .myio-form-group label {
+        font-size: 11px;
+        font-weight: 500;
+        color: #374151;
+      }
+
+      .myio-select {
+        padding: 6px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-size: 12px;
+        background: white;
+        color: #1f2937;
+        transition: border-color 0.2s, box-shadow 0.2s;
+        cursor: pointer;
+      }
+
+      .myio-select:focus {
+        outline: none;
+        border-color: ${primaryColor};
+        box-shadow: 0 0 0 2px ${this.hexToRgba(primaryColor, 0.1)};
+      }
+
+      .myio-checkbox-group {
+        grid-column: 1 / -1;
+      }
+
+      .myio-checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+      }
+
+      .myio-checkbox-label input[type="checkbox"] {
+        width: 14px;
+        height: 14px;
+        accent-color: ${primaryColor};
+        cursor: pointer;
+      }
+
+      .myio-checkbox-text {
+        font-size: 12px;
+        color: #374151;
+      }
+
+      .myio-form-hint {
+        font-size: 10px;
+        color: #9ca3af;
+        margin-top: 2px;
+      }
+
+      /* Toolbar */
+      .myio-measurement-setup-toolbar {
+        display: flex;
+        justify-content: flex-end;
+        padding: 10px 16px;
+        background: #f9fafb;
+        border-top: 1px solid #e5e7eb;
+        border-radius: 0 0 8px 8px;
+      }
+
+      .myio-toolbar-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .myio-btn {
+        padding: 6px 14px;
+        border-radius: ${styles.buttonRadius || "4px"};
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        border: none;
+        transition: all 0.2s;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .myio-btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .myio-btn-primary {
+        background: ${primaryColor};
+        color: white;
+      }
+
+      .myio-btn-primary:hover:not(:disabled) {
+        background: ${this.lightenColor(primaryColor, -10)};
+      }
+
+      .myio-btn-secondary {
+        background: #e5e7eb;
+        color: #374151;
+      }
+
+      .myio-btn-secondary:hover:not(:disabled) {
+        background: #d1d5db;
+      }
+
+      .myio-btn-spinner {
+        width: 12px;
+        height: 12px;
+        border: 2px solid white;
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+      /* Loading, Error, Success states */
+      .myio-measurement-setup-loading,
+      .myio-measurement-setup-error,
+      .myio-measurement-setup-success {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 8px 12px;
+        margin: 0 16px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+      }
+
+      .myio-measurement-setup-loading {
+        background: #f3f4f6;
+        color: #6b7280;
+      }
+
+      .myio-measurement-setup-error {
+        background: #fef2f2;
+        color: ${dangerColor};
+        border: 1px solid ${dangerColor};
+      }
+
+      .myio-measurement-setup-success {
+        background: #f0fdf4;
+        color: ${successColor};
+        border: 1px solid ${successColor};
+      }
+
+      .myio-spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid #e5e7eb;
+        border-top-color: ${primaryColor};
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      .myio-error-icon, .myio-success-icon {
+        font-size: 14px;
+      }
+
+      @media (max-width: 500px) {
+        .myio-section-content {
+          grid-template-columns: 1fr;
+        }
+
+        .myio-toolbar-actions {
+          flex-direction: column;
+          width: 100%;
+        }
+
+        .myio-btn {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    `;
+  }
+  lightenColor(hex, percent) {
+    const num = parseInt(hex.replace("#", ""), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) + amt;
+    const G = (num >> 8 & 255) + amt;
+    const B = (num & 255) + amt;
+    return "#" + (16777216 + (R < 255 ? R < 1 ? 0 : R : 255) * 65536 + (G < 255 ? G < 1 ? 0 : G : 255) * 256 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
+  }
+  hexToRgba(hex, alpha) {
+    const num = parseInt(hex.replace("#", ""), 16);
+    const R = num >> 16;
+    const G = num >> 8 & 255;
+    const B = num & 255;
+    return `rgba(${R}, ${G}, ${B}, ${alpha})`;
+  }
+};
+
+// src/components/premium-modals/measurement-setup/MeasurementSetupPersister.ts
+var MeasurementSetupPersister = class _MeasurementSetupPersister {
+  token;
+  tbBaseUrl;
+  static ATTRIBUTE_KEY = "measurementDisplaySettings";
+  static FETCH_TIMEOUT_MS = 8e3;
+  constructor(token, tbBaseUrl) {
+    this.token = token;
+    this.tbBaseUrl = tbBaseUrl || window.location.origin;
+  }
+  /**
+   * Fetch with timeout to prevent hanging requests
+   */
+  async fetchWithTimeout(url, options, timeoutMs = _MeasurementSetupPersister.FETCH_TIMEOUT_MS) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+      const response = await fetch(url, {
+        ...options,
+        signal: controller.signal
+      });
+      return response;
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+  /**
+   * Load measurement settings from customer SERVER_SCOPE
+   */
+  async loadSettings(customerId) {
+    try {
+      const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE?keys=${_MeasurementSetupPersister.ATTRIBUTE_KEY}`;
+      console.log("[MeasurementSetupPersister] Loading settings from:", url);
+      const response = await this.fetchWithTimeout(url, {
+        headers: {
+          "X-Authorization": `Bearer ${this.token}`,
+          "Content-Type": "application/json"
+        }
+      });
+      if (!response.ok) {
+        console.warn(`[MeasurementSetupPersister] HTTP ${response.status}: ${response.statusText}`);
+        return null;
+      }
+      const attrs = await response.json();
+      const settingsAttr = attrs.find((a) => a.key === _MeasurementSetupPersister.ATTRIBUTE_KEY);
+      if (!settingsAttr) {
+        console.log("[MeasurementSetupPersister] No existing settings found, using defaults");
+        return null;
+      }
+      const value = typeof settingsAttr.value === "string" ? JSON.parse(settingsAttr.value) : settingsAttr.value;
+      console.log("[MeasurementSetupPersister] Loaded settings:", value);
+      return this.validateAndMergeSettings(value);
+    } catch (error) {
+      console.error("[MeasurementSetupPersister] Failed to load settings:", error);
+      return null;
+    }
+  }
+  /**
+   * Save measurement settings to customer SERVER_SCOPE
+   */
+  async saveSettings(customerId, settings) {
+    try {
+      const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/attributes/SERVER_SCOPE`;
+      console.log("[MeasurementSetupPersister] Saving settings to:", url);
+      const payload = {
+        [_MeasurementSetupPersister.ATTRIBUTE_KEY]: JSON.stringify(settings)
+      };
+      const response = await this.fetchWithTimeout(url, {
+        method: "POST",
+        headers: {
+          "X-Authorization": `Bearer ${this.token}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+      });
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error("[MeasurementSetupPersister] Save failed:", response.status, errorText);
+        return {
+          ok: false,
+          error: {
+            code: response.status === 401 ? "AUTH_ERROR" : "NETWORK_ERROR",
+            message: `Failed to save settings: HTTP ${response.status}`,
+            cause: errorText
+          }
+        };
+      }
+      console.log("[MeasurementSetupPersister] Settings saved successfully");
+      return { ok: true, settings };
+    } catch (error) {
+      console.error("[MeasurementSetupPersister] Save error:", error);
+      return {
+        ok: false,
+        error: {
+          code: "UNKNOWN_ERROR",
+          message: error.message || "Failed to save settings",
+          cause: error
+        }
+      };
+    }
+  }
+  /**
+   * Validate and merge settings with defaults to ensure all fields exist
+   */
+  validateAndMergeSettings(settings) {
+    return {
+      version: settings.version || DEFAULT_SETTINGS.version,
+      updatedAt: settings.updatedAt || DEFAULT_SETTINGS.updatedAt,
+      updatedBy: settings.updatedBy,
+      water: {
+        unit: settings.water?.unit || DEFAULT_SETTINGS.water.unit,
+        decimalPlaces: settings.water?.decimalPlaces ?? DEFAULT_SETTINGS.water.decimalPlaces,
+        autoScale: settings.water?.autoScale ?? DEFAULT_SETTINGS.water.autoScale
+      },
+      energy: {
+        unit: settings.energy?.unit || DEFAULT_SETTINGS.energy.unit,
+        decimalPlaces: settings.energy?.decimalPlaces ?? DEFAULT_SETTINGS.energy.decimalPlaces,
+        forceUnit: settings.energy?.forceUnit ?? DEFAULT_SETTINGS.energy.forceUnit
+      },
+      temperature: {
+        unit: settings.temperature?.unit || DEFAULT_SETTINGS.temperature.unit,
+        decimalPlaces: settings.temperature?.decimalPlaces ?? DEFAULT_SETTINGS.temperature.decimalPlaces
+      }
+    };
+  }
+  /**
+   * Convert form data to full settings object for persistence
+   */
+  formDataToSettings(formData, existingSettings) {
+    return {
+      version: existingSettings?.version || DEFAULT_SETTINGS.version,
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      updatedBy: existingSettings?.updatedBy,
+      water: { ...formData.water },
+      energy: { ...formData.energy },
+      temperature: { ...formData.temperature }
+    };
+  }
+  /**
+   * Extract form data from settings
+   */
+  settingsToFormData(settings) {
+    const s = settings || DEFAULT_SETTINGS;
+    return {
+      water: { ...s.water },
+      energy: { ...s.energy },
+      temperature: { ...s.temperature }
+    };
+  }
+};
+
+// src/components/premium-modals/measurement-setup/openMeasurementSetupModal.ts
+async function openMeasurementSetupModal(params) {
+  if (!params.token) {
+    throw new Error("[MeasurementSetupModal] token is required");
+  }
+  if (!params.customerId) {
+    throw new Error("[MeasurementSetupModal] customerId is required");
+  }
+  const persister = new MeasurementSetupPersister(params.token, params.tbBaseUrl);
+  let existingSettings = params.existingSettings || null;
+  const view = new MeasurementSetupView({
+    styles: params.styles,
+    onSave: async () => {
+      const formData = view.getFormData();
+      const settings = persister.formDataToSettings(formData, existingSettings);
+      const result = await persister.saveSettings(params.customerId, settings);
+      if (!result.ok) {
+        throw new Error(result.error?.message || "Failed to save configuration");
+      }
+      existingSettings = settings;
+      if (params.onSave) {
+        params.onSave(settings);
+      }
+    },
+    onClose: () => {
+      if (params.onClose) {
+        params.onClose();
+      }
+    }
+  });
+  async function loadFormData() {
+    view.showLoading();
+    try {
+      if (!existingSettings) {
+        existingSettings = await persister.loadSettings(params.customerId);
+      }
+      const formData = persister.settingsToFormData(existingSettings);
+      view.setFormData(formData);
+    } catch (error) {
+      console.error("[MeasurementSetupModal] Error loading form data:", error);
+      view.showError(error.message || "Failed to load configuration");
+    } finally {
+      view.hideLoading();
+    }
+  }
+  let container;
+  if (params.container) {
+    if (typeof params.container === "string") {
+      container = document.querySelector(params.container);
+    } else {
+      container = params.container;
+    }
+  }
+  view.render(container);
+  await loadFormData();
+  return {
+    destroy: () => view.destroy(),
+    getFormData: () => view.getFormData(),
+    setFormData: (data) => view.setFormData(data)
+  };
+}
 export {
   ANNOTATION_TYPE_COLORS,
   ANNOTATION_TYPE_LABELS,
@@ -43579,14 +44637,17 @@ export {
   THEME_COLORS as CONSUMPTION_THEME_COLORS,
   ConnectionStatusType,
   ContractSummaryTooltip,
+  DECIMAL_OPTIONS,
   DEFAULT_CLAMP_RANGE,
   DEFAULT_ENERGY_GROUP_COLORS,
   DEFAULT_GAS_GROUP_COLORS,
+  DEFAULT_SETTINGS as DEFAULT_MEASUREMENT_SETTINGS,
   DEFAULT_SHOPPING_COLORS,
   DEFAULT_WATER_GROUP_COLORS,
   DEVICE_COUNT_KEYS,
   DeviceComparisonTooltip,
   DeviceStatusType,
+  ENERGY_UNITS,
   EXPORT_DEFAULT_COLORS,
   EXPORT_DOMAIN_ICONS,
   EXPORT_DOMAIN_LABELS,
@@ -43597,6 +44658,7 @@ export {
   IMPORTANCE_LABELS,
   IMPORTANCE_LABELS_EN,
   InfoTooltip,
+  DOMAIN_CONFIG5 as MEASUREMENT_DOMAIN_CONFIG,
   MyIOChartModal,
   MyIODraggableCard,
   MyIOSelectionStore,
@@ -43608,9 +44670,11 @@ export {
   STATUS_COLORS,
   STATUS_LABELS,
   STATUS_LABELS_EN,
+  TEMPERATURE_UNITS,
   TempComparisonTooltip,
   TempRangeTooltip,
   TempSensorSummaryTooltip,
+  WATER_UNITS,
   WaterSummaryTooltip,
   addDetectionContext,
   addNamespace,
@@ -43716,6 +44780,7 @@ export {
   openDashboardPopupWaterTank,
   openDemandModal,
   openGoalsPanel,
+  openMeasurementSetupModal,
   openPowerLimitsSetupModal,
   openRealTimeTelemetryModal,
   openTemperatureComparisonModal,