From d7f6613892446cc62aafd4bbc78ebef11bf1759c Mon Sep 17 00:00:00 2001
From: lzm <l.mens@brabantsedelta.nl>
Date: Thu, 28 May 2026 08:59:28 +0200
Subject: [PATCH] refactor(measurement): modularize editor JS

Move inline <script> from measurement.html into 8 modules under
src/editor/. measurement.js adds the static-file routes that serve them
to Node-RED.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 measurement.html                  | 766 +++++++++++++++++++-----------
 measurement.js                    |  13 +
 src/editor/digital-channels.js    | 431 +++++++++++++++++
 src/editor/hover-couple.js        |  28 ++
 src/editor/index.js               |  42 ++
 src/editor/oneditprepare.js       | 160 +++++++
 src/editor/oneditsave.js          |  69 +++
 src/editor/pipeline-diagram.js    |  91 ++++
 src/editor/scaling-chart.js       |  82 ++++
 src/editor/smoothing-sparkline.js | 158 ++++++
 10 files changed, 1570 insertions(+), 270 deletions(-)
 create mode 100644 src/editor/digital-channels.js
 create mode 100644 src/editor/hover-couple.js
 create mode 100644 src/editor/index.js
 create mode 100644 src/editor/oneditprepare.js
 create mode 100644 src/editor/oneditsave.js
 create mode 100644 src/editor/pipeline-diagram.js
 create mode 100644 src/editor/scaling-chart.js
 create mode 100644 src/editor/smoothing-sparkline.js

diff --git a/measurement.html b/measurement.html
index c5434d3..78ee0d3 100644
--- a/measurement.html
+++ b/measurement.html
@@ -8,8 +8,18 @@
 | **Control Module**     | `#a9daee`           | zwart      |
 
 -->
-<script src="/measurement/menu.js"></script> <!-- Load the menu script for dynamic dropdowns --> 
-<script src="/measurement/configData.js"></script> <!-- Load the config script for node information --> 
+<script src="/measurement/menu.js"></script> <!-- Load the menu script for dynamic dropdowns -->
+<script src="/measurement/configData.js"></script> <!-- Load the config script for node information -->
+<!-- Editor JS modules — see nodes/measurement/src/editor/. Loaded in
+     dependency order: index.js (namespace + helpers) → visuals → handlers. -->
+<script src="/measurement/editor/index.js"></script>
+<script src="/measurement/editor/hover-couple.js"></script>
+<script src="/measurement/editor/pipeline-diagram.js"></script>
+<script src="/measurement/editor/scaling-chart.js"></script>
+<script src="/measurement/editor/smoothing-sparkline.js"></script>
+<script src="/measurement/editor/digital-channels.js"></script>
+<script src="/measurement/editor/oneditprepare.js"></script>
+<script src="/measurement/editor/oneditsave.js"></script>
 
 <script>
   RED.nodes.registerType("measurement", {
@@ -71,186 +81,9 @@
       const modeTag = this.mode === 'digital' ? ' [digital]' : '';
       return (this.positionIcon || "") + " " + (this.assetType || "Measurement") + modeTag;
     },
-    
-    oneditprepare: function() {
-        const node = this;
 
-        // === Asset / logger / position placeholders (dynamic menus) ===
-        // Kick these off FIRST so that any error in the downstream mode
-        // logic can never block the shared menus. Historical regression:
-        // a ReferenceError in the mode block aborted oneditprepare and
-        // stopped the asset menu from rendering at all.
-        const waitForMenuData = () => {
-            if (window.EVOLV?.nodes?.measurement?.initEditor) {
-                window.EVOLV.nodes.measurement.initEditor(node);
-            } else {
-                setTimeout(waitForMenuData, 50);
-            }
-        };
-        waitForMenuData();
-
-        // IMPORTANT: all DOM references are resolved up front so helper
-        // functions called during initial applyMode() don't trip over the
-        // Temporal Dead Zone on later `const` declarations.
-
-        const modeSelect   = document.getElementById('node-input-mode');
-        const analogBlock  = document.getElementById('analog-only-fields');
-        const digitalBlock = document.getElementById('digital-only-fields');
-        const modeHint     = document.getElementById('mode-hint');
-        const channelsArea = document.getElementById('node-input-channels');
-        const channelsHint = document.getElementById('channels-validation');
-
-        // Initialise the mode <select> from the saved node.mode. Legacy
-        // nodes (saved before the mode field existed) fall back to
-        // 'analog' so they keep behaving exactly like before.
-        const initialMode = (node.mode === 'digital' || node.mode === 'analog') ? node.mode : 'analog';
-        if (modeSelect) modeSelect.value = initialMode;
-
-        // Populate the channels textarea from the saved node.channels
-        // (stored as a raw JSON string; parsing happens server-side).
-        if (channelsArea && typeof node.channels === 'string') {
-            channelsArea.value = node.channels;
-        }
-
-        function validateChannelsJson() {
-            if (!channelsHint) return;
-            if (!modeSelect || modeSelect.value !== 'digital') {
-                channelsHint.textContent = '';
-                return;
-            }
-            const raw = (channelsArea && channelsArea.value || '').trim();
-            if (!raw || raw === '[]') {
-                channelsHint.innerHTML = '<span style="color:#b45309;">Digital mode with no channels — no measurements will be emitted.</span>';
-                return;
-            }
-            try {
-                const parsed = JSON.parse(raw);
-                if (!Array.isArray(parsed)) throw new Error('must be an array');
-                const missing = parsed
-                    .map((c, i) => (c && c.key && c.type ? null : 'entry ' + i + ': missing key or type'))
-                    .filter(Boolean);
-                if (missing.length) {
-                    channelsHint.innerHTML = '<span style="color:#b45309;">' + missing.join('; ') + '</span>';
-                } else {
-                    channelsHint.innerHTML = '<span style="color:#047857;">' + parsed.length + ' channel(s) defined: ' + parsed.map((c) => c.key).join(', ') + '</span>';
-                }
-            } catch (e) {
-                channelsHint.innerHTML = '<span style="color:#b91c1c;">Invalid JSON: ' + e.message + '</span>';
-            }
-        }
-
-        function applyMode(mode) {
-            const isDigital = mode === 'digital';
-            if (analogBlock)  analogBlock.style.display  = isDigital ? 'none' : 'block';
-            if (digitalBlock) digitalBlock.style.display = isDigital ? 'block' : 'none';
-            if (modeHint) {
-                modeHint.textContent = isDigital
-                    ? 'msg.payload must be an OBJECT, e.g. {"temperature": 22.5, "humidity": 45}. Define each key below.'
-                    : 'msg.payload must be a NUMBER (or numeric string). Configure scaling/smoothing below.';
-            }
-            validateChannelsJson();
-        }
-
-        if (modeSelect) modeSelect.addEventListener('change', (e) => applyMode(e.target.value));
-        if (channelsArea) channelsArea.addEventListener('input', validateChannelsJson);
-        try { applyMode(initialMode); } catch (e) {
-            console.error('measurement: applyMode failed', e);
-        }
-
-        // === Smoothing method dropdown (analog only) ===
-        const smoothMethodSelect = document.getElementById('node-input-smooth_method');
-        const options = window.EVOLV?.nodes?.measurement?.config?.smoothing?.smoothMethod?.rules?.values || [];
-        smoothMethodSelect.innerHTML = '';
-        const emptyOption = document.createElement('option');
-        emptyOption.value = '';
-        emptyOption.textContent = 'Select method...';
-        smoothMethodSelect.appendChild(emptyOption);
-        options.forEach(option => {
-            const optionElement = document.createElement('option');
-            optionElement.value = option.value;
-            optionElement.textContent = option.value;
-            optionElement.title = option.description;
-            smoothMethodSelect.appendChild(optionElement);
-        });
-        if (node.smooth_method) smoothMethodSelect.value = node.smooth_method;
-
-        // === Scale rows toggle (analog only) ===
-        const chk = document.getElementById('node-input-scaling');
-        const rowMin = document.getElementById('row-input-i_min');
-        const rowMax = document.getElementById('row-input-i_max');
-        function toggleScalingRows() {
-            const show = chk.checked;
-            rowMin.style.display = show ? 'block' : 'none';
-            rowMax.style.display = show ? 'block' : 'none';
-        }
-        chk.addEventListener('change', toggleScalingRows);
-        toggleScalingRows();
-
-        //------------------- END OF CUSTOM config UI ELEMENTS ------------------- //
-    },
-    oneditsave: function () {
-      const node = this;
-
-      // Validate asset properties using the asset menu
-      if (window.EVOLV?.nodes?.measurement?.assetMenu?.saveEditor) {
-        success = window.EVOLV.nodes.measurement.assetMenu.saveEditor(this);
-      }
-
-      // Validate logger properties using the logger menu
-      if (window.EVOLV?.nodes?.measurement?.loggerMenu?.saveEditor) {
-        success = window.EVOLV.nodes.measurement.loggerMenu.saveEditor(node);
-      }
-
-      // save position field
-      if (window.EVOLV?.nodes?.measurement?.positionMenu?.saveEditor) {
-        window.EVOLV.nodes.measurement.positionMenu.saveEditor(this);
-      }
-
-      // Mode is the top-level switch. Always save it first; its value
-      // drives which other fields are meaningful.
-      node.mode = document.getElementById('node-input-mode').value || 'analog';
-
-      // Channels JSON (digital). We store the raw string and let the
-      // server-side nodeClass.js parse it so we can surface parse errors
-      // at deploy time instead of silently dropping bad config.
-      node.channels = document.getElementById('node-input-channels').value || '[]';
-
-      // Analog smoothing method.
-      node.smooth_method = document.getElementById('node-input-smooth_method').value || '';
-
-      // Save checkbox properties (always safe to read regardless of mode;
-      // these elements exist in the DOM even when their section is hidden).
-      ["scaling", "simulator"].forEach(
-        (field) => (node[field] = document.getElementById(`node-input-${field}`).checked)
-      );
-
-      ["i_min", "i_max", "i_offset", "o_min", "o_max", "count"].forEach(
-        (field) => (node[field] = parseFloat(document.getElementById(`node-input-${field}`).value) || 0)
-      );
-
-      // Calibration stability threshold: 0 is a valid (very strict) value, so
-      // fall back to the default 0.01 only when the field is empty / NaN.
-      const stRaw = document.getElementById('node-input-stabilityThreshold').value;
-      const stParsed = parseFloat(stRaw);
-      node.stabilityThreshold = Number.isFinite(stParsed) ? stParsed : 0.01;
-
-      // Mode-dependent validation. In digital mode we don't care about
-      // scaling completeness (the channels have their own per-channel
-      // scaling); in analog mode we still warn about half-filled ranges.
-      if (node.mode === 'analog' && node.scaling && (isNaN(node.i_min) || isNaN(node.i_max))) {
-        RED.notify("Scaling enabled, but input range is incomplete!", "error");
-      }
-      if (node.mode === 'digital') {
-        try {
-          const parsed = JSON.parse(node.channels || '[]');
-          if (!Array.isArray(parsed) || parsed.length === 0) {
-            RED.notify("Digital mode: no channels defined. The node will emit nothing.", "warning");
-          }
-        } catch (e) {
-          RED.notify("Digital mode: Channels JSON is invalid (" + e.message + ")", "error");
-        }
-      }
-    },
+    oneditprepare: function () { window.MeasEditor.oneditprepare.call(this); },
+    oneditsave:    function () { window.MeasEditor.oneditsave.call(this); },
   });
 </script>
 
@@ -258,122 +91,515 @@
 
 <script type="text/html" data-template-name="measurement">
 
-  <!-- Input mode -->
-  <div class="form-row">
-    <label for="node-input-mode"><i class="fa fa-exchange"></i> Input Mode</label>
-    <select id="node-input-mode" style="width:60%;">
-      <option value="analog">analog — one scalar per msg.payload (classic PLC)</option>
-      <option value="digital">digital — object payload with many channel keys (MQTT/IoT)</option>
-    </select>
+  <style>
+    /* === Section headers ============================================== */
+    .meas-section { margin-top: 8px; }
+    .meas-section h4 { margin: 14px 0 6px 0; }
+    .meas-help {
+      font-size: 12px; color: #777; margin: 0 0 8px 0;
+    }
+
+    /* === Mode cards =================================================== */
+    .meas-mode-cards { display: flex; gap: 10px; margin: 6px 0 8px 0; }
+    .meas-mode-card {
+      flex: 1; cursor: pointer;
+      border: 2px solid #ccc; border-radius: 6px;
+      padding: 10px 12px; background: #fff;
+      transition: border-color 80ms, background 80ms;
+    }
+    .meas-mode-card:hover { border-color: #888; background: #fafafa; }
+    .meas-mode-card.meas-mode-active {
+      border-color: #0c99d9; background: #f0f8ff;
+    }
+    .meas-mode-card .meas-mode-title {
+      font-weight: 600; font-size: 13px; color: #222;
+    }
+    .meas-mode-card .meas-mode-sub {
+      font-size: 11px; color: #666; margin-top: 4px;
+    }
+    .meas-mode-card .meas-mode-payload {
+      font-family: monospace; font-size: 11px; color: #1F4E79;
+      margin-top: 4px; background: #f4f8fc; padding: 2px 6px;
+      border-radius: 3px; display: inline-block;
+    }
+
+    /* === Pipeline diagram ============================================= */
+    .meas-pipeline-svg {
+      display: block; width: 100%; max-width: 720px;
+      background: #fff; border: 1px solid #e5e5e5; border-radius: 4px;
+    }
+    .meas-stage rect {
+      transition: opacity 80ms, stroke-width 80ms;
+    }
+    .meas-stage-disabled rect { opacity: 0.35; }
+    .meas-stage-disabled text { opacity: 0.5; }
+    .meas-stage-highlight rect {
+      stroke-width: 3 !important; stroke: #0c99d9 !important;
+    }
+
+    /* === Two-column diag layout (used by scaling chart) =============== */
+    .meas-diag { display: flex; gap: 24px; align-items: flex-start; margin: 0 0 10px 0; flex-wrap: wrap; }
+    .meas-diag-side { width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; gap: 5px; }
+    .meas-diag-side .meas-row {
+      display: grid; grid-template-columns: minmax(0, 1fr) 80px 16px; align-items: center;
+      gap: 6px; padding: 4px 6px 4px 10px; border-left: 4px solid #ccc;
+      background: #fafafa; border-radius: 3px; font-size: 11px;
+      min-width: 0;
+    }
+    .meas-diag-side .meas-row:hover { background: #f0f0f0; }
+    .meas-diag-side .meas-row label { font-weight: 600; margin: 0; line-height: 1.2; }
+    .meas-diag-side .meas-row .meas-sub {
+      grid-column: 1; font-size: 10px; color: #888; font-weight: 400;
+    }
+    .meas-diag-side .meas-row input[type=number] {
+      width: 100%; height: 22px; box-sizing: border-box; font-size: 11px;
+      padding: 1px 4px; margin: 0; border: 1px solid #ccc; border-radius: 3px;
+      background: #fff;
+    }
+    .meas-diag-side .meas-row input[type=number]:focus {
+      outline: 1px solid #0c99d9; border-color: #0c99d9;
+    }
+    .meas-diag-side .meas-row .meas-unit { color: #888; font-size: 10px; }
+    .meas-diag-svg-wrap { flex: 1; min-width: 240px; }
+
+    /* Border colour per stage so the side-row matches its SVG stage. */
+    .meas-row[data-stroke="#1F4E79"] { border-left-color: #1F4E79; }
+    .meas-row[data-stroke="#1E8449"] { border-left-color: #1E8449; }
+    .meas-row[data-stroke="#D68910"] { border-left-color: #D68910; }
+    .meas-row[data-stroke="#7D3C98"] { border-left-color: #7D3C98; }
+    .meas-row[data-stroke="#C0392B"] { border-left-color: #C0392B; }
+
+    /* === Digital channel cards ======================================= */
+    .meas-ch-empty {
+      font-size: 12px; color: #888; font-style: italic;
+      padding: 10px 12px; background: #fafafa; border: 1px dashed #ddd;
+      border-radius: 4px;
+    }
+    .meas-ch-card {
+      border: 1px solid #ddd; border-radius: 4px;
+      background: #fff; margin-bottom: 6px;
+    }
+    .meas-ch-head {
+      display: grid;
+      grid-template-columns: 36px minmax(0, 1fr) 110px 110px minmax(0, 1fr) 70px 28px;
+      gap: 6px; align-items: center;
+      padding: 6px 8px;
+    }
+    .meas-ch-num-badge {
+      font-size: 10px; color: #888; font-family: monospace;
+      text-align: center;
+    }
+    .meas-ch-input {
+      height: 24px; box-sizing: border-box; font-size: 12px;
+      padding: 2px 5px; margin: 0; border: 1px solid #ccc; border-radius: 3px;
+      background: #fff; min-width: 0;
+    }
+    .meas-ch-input:focus { outline: 1px solid #0c99d9; border-color: #0c99d9; }
+    .meas-ch-input.meas-ch-err { border-color: #C0392B; background: #fdecea; }
+    .meas-ch-num { width: 100%; }
+    /* Unit cell wraps either a <select> (canonical type) or a free-text
+       <input> (custom type). Type-change swaps the wrapper's contents
+       without rerendering the rest of the card. Make the inner element
+       fill the grid cell. */
+    .meas-ch-unit-cell { min-width: 0; }
+    .meas-ch-unit-cell > * { width: 100%; }
+    .meas-ch-btn {
+      height: 24px; box-sizing: border-box;
+      padding: 0 8px; border: 1px solid #ccc; border-radius: 3px;
+      background: #f5f5f5; cursor: pointer; font-size: 11px;
+    }
+    .meas-ch-btn:hover { background: #ececec; }
+    .meas-ch-btn-del {
+      width: 28px; padding: 0; color: #C0392B; font-weight: bold;
+    }
+    .meas-ch-btn-del:hover { background: #fdecea; }
+    .meas-ch-adv {
+      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
+      padding: 8px 10px 10px 44px; border-top: 1px solid #eee;
+      background: #fafbfd;
+    }
+    .meas-ch-sub {
+      background: #fff; border: 1px solid #eee; border-radius: 3px;
+      padding: 6px 8px;
+    }
+    .meas-ch-sub-title {
+      font-size: 11px; font-weight: 600; color: #444; margin-bottom: 4px;
+    }
+    .meas-ch-sub-grid {
+      display: grid; grid-template-columns: auto 1fr; gap: 4px 6px;
+      align-items: center;
+    }
+    .meas-ch-sub-grid label { font-size: 10px; color: #666; margin: 0; }
+    .meas-ch-sub-grid.meas-ch-dim { opacity: 0.4; pointer-events: none; }
+    .meas-ch-cb {
+      font-size: 11px; font-weight: 600; color: #444;
+      display: inline-flex; align-items: center; gap: 4px; margin: 0;
+    }
+    .meas-ch-actions {
+      display: flex; gap: 8px; align-items: center; margin: 8px 0;
+    }
+    .meas-ch-actions .meas-ch-btn-add {
+      background: #1E8449; color: #fff; border-color: #186b3a;
+    }
+    .meas-ch-actions .meas-ch-btn-add:hover { background: #186b3a; }
+  </style>
+
+  <!-- ================================================================ -->
+  <!-- INPUT MODE                                                       -->
+  <!-- ================================================================ -->
+  <div class="meas-section">
+    <h4>Input mode</h4>
+    <p class="meas-help">Pick how this node should interpret <code>msg.payload</code>. Click a card to switch — the dropdown stays in sync.</p>
+
+    <div class="meas-mode-cards">
+      <div class="meas-mode-card" data-mode="analog">
+        <div class="meas-mode-title"><i class="fa fa-tachometer"></i> Analog</div>
+        <div class="meas-mode-sub">One scalar per message (classic PLC / 4–20 mA).</div>
+        <div class="meas-mode-payload">msg.payload = 22.5</div>
+      </div>
+      <div class="meas-mode-card" data-mode="digital">
+        <div class="meas-mode-title"><i class="fa fa-sitemap"></i> Digital</div>
+        <div class="meas-mode-sub">Object payload, many channels per message (MQTT / IoT).</div>
+        <div class="meas-mode-payload">msg.payload = {"temperature": 22.5, "humidity": 45}</div>
+      </div>
+    </div>
+
+    <div class="form-row">
+      <label for="node-input-mode"><i class="fa fa-exchange"></i> Mode</label>
+      <select id="node-input-mode" style="width:60%;">
+        <option value="analog">analog — one scalar per msg.payload (classic PLC)</option>
+        <option value="digital">digital — object payload with many channel keys (MQTT/IoT)</option>
+      </select>
+    </div>
+    <div class="form-row" id="mode-hint" style="margin-left:105px; font-size:12px; color:#666;"></div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- ANALOG PIPELINE DIAGRAM (top of the analog block)                -->
+  <!-- ================================================================ -->
+  <div id="meas-pipeline-wrap" class="meas-section">
+    <h4>Signal pipeline</h4>
+    <p class="meas-help">
+      Each incoming value flows through these stages. Stages dim when they're
+      switched off below. Hover an input row (offset / scale / smoothing) to
+      highlight the matching stage.
+    </p>
+
+    <!--
+      ============================================================
+      PIPELINE FLOW SVG
+      ============================================================
+      viewBox 720 x 140. Six stages, equal width, horizontal arrows.
+      Stage stroke + sub-label are updated by pipelineDiagram.redraw().
+      Hover-couple targets the <g class="meas-stage" id="meas-stage-*"> group.
+      ============================================================
+    -->
+    <svg class="meas-pipeline-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 140"
+         font-family="Arial,sans-serif" font-size="11">
+      <defs>
+        <marker id="meas-arrow" viewBox="0 0 10 10" refX="9" refY="5"
+                markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="#555" />
+        </marker>
+      </defs>
+
+      <!-- Six stage boxes at x = 8, 128, 248, 368, 488, 608  (width=104, gap=16) -->
+      <g class="meas-stage" id="meas-stage-input">
+        <rect x="8"   y="35" width="104" height="70" rx="6" fill="#eef6fb" stroke="#1F4E79" stroke-width="1.5" />
+        <text x="60"  y="60" text-anchor="middle" fill="#1F4E79" font-weight="bold">msg.payload</text>
+        <text x="60"  y="78" text-anchor="middle" fill="#555" font-size="10">number</text>
+        <text x="60"  y="94" text-anchor="middle" fill="#888" font-size="9">topic: measurement</text>
+      </g>
+
+      <g class="meas-stage" id="meas-stage-offset">
+        <rect x="128" y="35" width="104" height="70" rx="6" fill="#fdf4e7" stroke="#D68910" stroke-width="1.5" />
+        <text x="180" y="60" text-anchor="middle" fill="#D68910" font-weight="bold">+ offset</text>
+        <text id="meas-stage-offset-sub" x="180" y="78" text-anchor="middle" fill="#555" font-size="10">off</text>
+        <text x="180" y="94" text-anchor="middle" fill="#888" font-size="9">additive bias</text>
+      </g>
+
+      <g class="meas-stage" id="meas-stage-scale">
+        <rect x="248" y="35" width="104" height="70" rx="6" fill="#eafaf1" stroke="#1E8449" stroke-width="1.5" />
+        <text x="300" y="60" text-anchor="middle" fill="#1E8449" font-weight="bold">scale</text>
+        <text id="meas-stage-scale-sub" x="300" y="78" text-anchor="middle" fill="#555" font-size="10">off</text>
+        <text x="300" y="94" text-anchor="middle" fill="#888" font-size="9">[in]→[out]</text>
+      </g>
+
+      <g class="meas-stage" id="meas-stage-smooth">
+        <rect x="368" y="35" width="104" height="70" rx="6" fill="#eef2fb" stroke="#1F4E79" stroke-width="1.5" />
+        <text x="420" y="60" text-anchor="middle" fill="#1F4E79" font-weight="bold">smooth</text>
+        <text id="meas-stage-smooth-sub" x="420" y="78" text-anchor="middle" fill="#555" font-size="10">off</text>
+        <text x="420" y="94" text-anchor="middle" fill="#888" font-size="9">rolling window</text>
+      </g>
+
+      <g class="meas-stage" id="meas-stage-outlier">
+        <rect x="488" y="35" width="104" height="70" rx="6" fill="#fdecea" stroke="#C0392B" stroke-width="1.5" />
+        <text x="540" y="60" text-anchor="middle" fill="#C0392B" font-weight="bold">outlier</text>
+        <text x="540" y="78" text-anchor="middle" fill="#555" font-size="10">runtime toggle</text>
+        <text x="540" y="94" text-anchor="middle" fill="#888" font-size="9">topic: outlierDetection</text>
+      </g>
+
+      <g class="meas-stage" id="meas-stage-output">
+        <rect x="608" y="35" width="104" height="70" rx="6" fill="#f4f4f4" stroke="#333" stroke-width="1.5" />
+        <text x="660" y="60" text-anchor="middle" fill="#333" font-weight="bold">output</text>
+        <text id="meas-stage-output-sub" x="660" y="78" text-anchor="middle" fill="#555" font-size="10">process / influxdb</text>
+        <text x="660" y="94" text-anchor="middle" fill="#888" font-size="9">port 0 / port 1</text>
+      </g>
+
+      <!-- Arrows between stages -->
+      <line x1="112" y1="70" x2="128" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
+      <line x1="232" y1="70" x2="248" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
+      <line x1="352" y1="70" x2="368" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
+      <line x1="472" y1="70" x2="488" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
+      <line x1="592" y1="70" x2="608" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
+
+      <!-- Top caption -->
+      <text x="360" y="20" text-anchor="middle" fill="#444" font-size="11" font-style="italic">
+        analog signal pipeline (digital mode runs one pipeline per channel)
+      </text>
+      <!-- Hover hint -->
+      <text x="360" y="128" text-anchor="middle" fill="#888" font-size="10">
+        hover an input row below → its stage highlights
+      </text>
+    </svg>
   </div>
-  <div class="form-row" id="mode-hint" style="margin-left:105px; font-size:12px; color:#666;"></div>
 
   <!-- ===================== DIGITAL MODE FIELDS ===================== -->
-  <div id="digital-only-fields">
-    <div class="form-row" id="row-input-channels">
-      <label for="node-input-channels"><i class="fa fa-list"></i> Channels (JSON)</label>
-      <textarea id="node-input-channels" rows="6" style="width:60%; font-family:monospace;" placeholder='[{"key":"temperature","type":"temperature","position":"atEquipment","unit":"C","scaling":{"enabled":false,"inputMin":0,"inputMax":1,"absMin":-50,"absMax":150,"offset":0},"smoothing":{"smoothWindow":5,"smoothMethod":"mean"}}]'></textarea>
-      <div class="form-tips">One entry per payload key. Each channel has its own type / position / unit / scaling / smoothing / outlier detection. See README for the full schema.</div>
+  <div id="digital-only-fields" class="meas-section">
+    <h4>Digital channels</h4>
+    <p class="meas-help">
+      Define one entry per key in <code>msg.payload</code>. Each channel has its
+      own type, position, unit, and optional scaling / smoothing / outlier
+      detection (click <b>▾ more</b> to reveal). The analog settings further
+      down are ignored in digital mode.
+    </p>
+
+    <!-- Row editor — rendered by src/editor/digital-channels.js. The raw
+         textarea below is kept in sync on every edit (it remains the source
+         of truth on the node). -->
+    <div id="meas-channels-rows"></div>
+
+    <div class="meas-ch-actions">
+      <button type="button" id="meas-channels-add" class="meas-ch-btn meas-ch-btn-add">
+        + Add channel
+      </button>
+      <button type="button" id="meas-channels-raw-toggle" class="meas-ch-btn">
+        ▾ Show raw JSON
+      </button>
+    </div>
+
+    <!-- Raw JSON escape-hatch. Hidden by default; toggle button reveals it
+         for power-users that want to paste / bulk-edit. Validation below
+         (channels-validation) fires on every textarea input event. -->
+    <div id="meas-channels-raw" style="display:none;">
+      <div class="form-row" id="row-input-channels">
+        <label for="node-input-channels"><i class="fa fa-code"></i> Channels (JSON)</label>
+        <textarea id="node-input-channels" rows="8" style="width:60%; font-family:monospace;"
+          placeholder='[{"key":"temperature","type":"temperature","position":"atEquipment","unit":"C","scaling":{"enabled":false,"inputMin":0,"inputMax":1,"absMin":-50,"absMax":150,"offset":0},"smoothing":{"smoothWindow":5,"smoothMethod":"mean"}}]'></textarea>
+        <div class="form-tips">The row editor above mirrors edits into this field — usually you won't need to touch it directly.</div>
+      </div>
     </div>
     <div class="form-row" id="channels-validation" style="margin-left:105px; font-size:12px;"></div>
   </div>
 
   <!-- ===================== ANALOG MODE FIELDS ===================== -->
   <div id="analog-only-fields">
-    <hr>
-    <!-- Scaling Checkbox -->
-    <div class="form-row">
-      <label for="node-input-scaling"
-        ><i class="fa fa-compress"></i> Scaling</label>
-      <input type="checkbox" id="node-input-scaling" style="width:20px; vertical-align:baseline;"/>
-      <span>Enable input scaling?</span>
+
+    <!-- ============================================================ -->
+    <!-- SCALING                                                       -->
+    <!-- ============================================================ -->
+    <div class="meas-section">
+      <h4>Scaling</h4>
+      <p class="meas-help">
+        Map the raw input range (e.g. 4–20 mA, 0–3000 counts) to a physical
+        process range (e.g. 0–10 bar). Apply an offset first to zero-correct
+        the sensor.
+      </p>
+
+      <div class="form-row">
+        <label for="node-input-scaling"><i class="fa fa-compress"></i> Scaling</label>
+        <input type="checkbox" id="node-input-scaling" style="width:20px; vertical-align:baseline;" />
+        <span>Enable linear input scaling</span>
+      </div>
+
+      <div class="form-row">
+        <label for="node-input-i_offset"><i class="fa fa-adjust"></i> Input Offset</label>
+        <input type="number" id="node-input-i_offset" placeholder="0" />
+        <div class="form-tips">Applied before scaling (additive bias).</div>
+      </div>
+
+      <div class="meas-diag" id="meas-scaling-wrap">
+        <div class="meas-diag-side" id="meas-scaling-inputs">
+          <div class="meas-row" data-stroke="#1F4E79" data-couples-line="meas-scale-input-axis">
+            <div><label>Source Min</label><div class="meas-sub">raw input low</div></div>
+            <input type="number" id="node-input-i_min" placeholder="0" />
+            <span class="meas-unit">raw</span>
+          </div>
+          <div class="meas-row" data-stroke="#1F4E79" data-couples-line="meas-scale-input-axis">
+            <div><label>Source Max</label><div class="meas-sub">raw input high</div></div>
+            <input type="number" id="node-input-i_max" placeholder="3000" />
+            <span class="meas-unit">raw</span>
+          </div>
+          <div class="meas-row" data-stroke="#1E8449" data-couples-line="meas-scale-output-axis">
+            <div><label>Process Min</label><div class="meas-sub">scaled output low</div></div>
+            <input type="number" id="node-input-o_min" placeholder="0" />
+            <span class="meas-unit">eng</span>
+          </div>
+          <div class="meas-row" data-stroke="#1E8449" data-couples-line="meas-scale-output-axis">
+            <div><label>Process Max</label><div class="meas-sub">scaled output high</div></div>
+            <input type="number" id="node-input-o_max" placeholder="1" />
+            <span class="meas-unit">eng</span>
+          </div>
+        </div>
+
+        <!--
+          ============================================================
+          SCALING LINEAR-TRANSFORM CHART
+          ============================================================
+          viewBox 300 x 180. Axes at left=44, right=286, top=14, bot=156.
+          Line endpoints are placed by scalingChart.redraw().
+          ============================================================
+        -->
+        <div class="meas-diag-svg-wrap">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180"
+               style="display:block;width:100%;max-width:320px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;"
+               font-family="Arial,sans-serif" font-size="10">
+            <!-- Plot frame -->
+            <rect x="44" y="14" width="242" height="142" fill="#fafcff" stroke="#e5e5e5" />
+            <!-- Axes -->
+            <line id="meas-scale-input-axis"  x1="44" y1="156" x2="286" y2="156" stroke="#1F4E79" stroke-width="1.5" />
+            <line id="meas-scale-output-axis" x1="44" y1="156" x2="44"  y2="14"  stroke="#1E8449" stroke-width="1.5" />
+            <!-- Tick labels -->
+            <text id="meas-scale-x-min" x="44"  y="170" text-anchor="middle" fill="#1F4E79">0</text>
+            <text id="meas-scale-x-max" x="286" y="170" text-anchor="middle" fill="#1F4E79">1</text>
+            <text id="meas-scale-y-min" x="40"  y="159" text-anchor="end"    fill="#1E8449">0</text>
+            <text id="meas-scale-y-max" x="40"  y="17"  text-anchor="end"    fill="#1E8449">1</text>
+            <!-- Axis titles -->
+            <text x="165" y="178" text-anchor="middle" fill="#1F4E79" font-style="italic">raw input (Source Min → Source Max)</text>
+            <text x="14"  y="85"  text-anchor="middle" fill="#1E8449" font-style="italic" transform="rotate(-90 14 85)">process value (Process Min → Process Max)</text>
+            <!-- The transform line -->
+            <polyline id="meas-scale-line" fill="none" stroke="#0c99d9" stroke-width="2.5" points="44,156 286,14" />
+            <!-- Offset readout -->
+            <text id="meas-scale-offset-label" x="165" y="10" text-anchor="middle" fill="#D68910" font-size="10">offset: 0 (no shift)</text>
+          </svg>
+        </div>
+      </div>
     </div>
 
-    <!-- Source Min/Max (only if scaling is true) -->
-    <div class="form-row" id="row-input-i_min">
-      <label for="node-input-i_min"><i class="fa fa-arrow-down"></i> Source Min</label>
-      <input type="number" id="node-input-i_min" placeholder="0" />
+    <!-- ============================================================ -->
+    <!-- SMOOTHING                                                     -->
+    <!-- ============================================================ -->
+    <div class="meas-section">
+      <h4>Smoothing</h4>
+      <p class="meas-help">
+        Reduce noise on the scaled signal. Each method behaves differently
+        — the preview below shows the result on a fixed noisy test signal.
+      </p>
+
+      <div class="meas-diag">
+        <div class="meas-diag-side">
+          <div class="meas-row" data-stroke="#1F4E79" data-couples-line="meas-stage-smooth">
+            <div><label>Method</label><div class="meas-sub">none / mean / median / kalman / …</div></div>
+            <select id="node-input-smooth_method" style="grid-column: 2 / span 2; width: 100%;"></select>
+          </div>
+          <div class="meas-row" data-stroke="#1F4E79" data-couples-line="meas-stage-smooth">
+            <div><label>Window</label><div class="meas-sub">sample count</div></div>
+            <input type="number" id="node-input-count" placeholder="10" />
+            <span class="meas-unit">n</span>
+          </div>
+        </div>
+
+        <!--
+          ============================================================
+          SMOOTHING SPARKLINE
+          ============================================================
+          viewBox 390 x 100. Plot range left=10, right=380, top=8, bot=92.
+          ============================================================
+        -->
+        <div class="meas-diag-svg-wrap" id="meas-smooth-wrap">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 110"
+               style="display:block;width:100%;max-width:420px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;"
+               font-family="Arial,sans-serif" font-size="10">
+            <!-- Plot frame -->
+            <rect x="10" y="8" width="370" height="84" fill="#fafcff" stroke="#e5e5e5" />
+            <!-- Series -->
+            <polyline id="meas-smooth-raw"      fill="none" stroke="#aaa"     stroke-width="1"   points="" />
+            <polyline id="meas-smooth-smoothed" fill="none" stroke="#1E8449" stroke-width="1.8" points="" />
+            <!-- Legend -->
+            <line x1="18"  y1="103" x2="36" y2="103" stroke="#aaa" />
+            <text x="40" y="106" fill="#888">raw (noisy)</text>
+            <line x1="120" y1="103" x2="138" y2="103" stroke="#1E8449" stroke-width="1.8" />
+            <text x="142" y="106" fill="#1E8449">smoothed</text>
+            <!-- Method/window readout -->
+            <text id="meas-smooth-label" x="375" y="106" text-anchor="end" fill="#555" font-style="italic">no smoothing — raw value passed through</text>
+          </svg>
+        </div>
+      </div>
     </div>
 
-    <div class="form-row" id="row-input-i_max">
-      <label for="node-input-i_max"><i class="fa fa-arrow-up"></i> Source Max</label>
-      <input type="number" id="node-input-i_max" placeholder="3000" />
+    <!-- ============================================================ -->
+    <!-- SIMULATION                                                    -->
+    <!-- ============================================================ -->
+    <div class="meas-section">
+      <h4>Simulation</h4>
+      <div class="form-row">
+        <label for="node-input-simulator"><i class="fa fa-cog"></i> Simulator</label>
+        <input type="checkbox" id="node-input-simulator" style="width:20px; vertical-align:baseline;" />
+        <span>Replace the real input with an internal random-walk source (toggle at runtime via topic <code>simulator</code>).</span>
+      </div>
     </div>
 
-    <!-- Offset -->
-    <div class="form-row">
-      <label for="node-input-i_offset"><i class="fa fa-adjust"></i> Input Offset</label>
-      <input type="number" id="node-input-i_offset" placeholder="0" />
+    <!-- ============================================================ -->
+    <!-- CALIBRATION                                                   -->
+    <!-- ============================================================ -->
+    <div class="meas-section">
+      <h4>Calibration</h4>
+      <p class="meas-help">
+        The <code>calibrate</code> topic shifts the offset so the current
+        output matches the configured low end. It only fires when the rolling
+        window is "stable enough" — define what that means here.
+      </p>
+      <div class="form-row">
+        <label for="node-input-stabilityThreshold"><i class="fa fa-balance-scale"></i> Stability</label>
+        <input type="number" id="node-input-stabilityThreshold" placeholder="0.01" step="any" style="width:100px;" />
+        <span style="margin-left:6px; color:#666;">scaling-units</span>
+        <div class="form-tips">Maximum rolling-window standard deviation that still counts as stable. Default 0.01.</div>
+      </div>
     </div>
 
-    <!-- Output / Process Min/Max -->
-    <div class="form-row">
-      <label for="node-input-o_min"><i class="fa fa-tag"></i> Process Min</label>
-      <input type="number" id="node-input-o_min" placeholder="0" />
-    </div>
-    <div class="form-row">
-      <label for="node-input-o_max"><i class="fa fa-tag"></i> Process Max</label>
-      <input type="number" id="node-input-o_max" placeholder="1" />
-    </div>
+  </div>
 
-    <!-- Simulator Checkbox -->
+  <!-- ================================================================ -->
+  <!-- OUTPUT FORMATS                                                   -->
+  <!-- ================================================================ -->
+  <div class="meas-section">
+    <h4>Output formats</h4>
+    <p class="meas-help">
+      Process port (0) drives downstream control nodes; database port (1)
+      feeds telemetry/historian. Pick the encoding each consumer expects.
+    </p>
     <div class="form-row">
-      <label for="node-input-simulator"><i class="fa fa-cog"></i> Simulator</label>
-      <input type="checkbox" id="node-input-simulator" style="width:20px; vertical-align:baseline;"/>
-      <span>Activate internal simulation?</span>
-    </div>
-
-    <!-- Smoothing Method -->
-    <div class="form-row">
-      <label for="node-input-smooth_method"><i class="fa fa-line-chart"></i> Smoothing</label>
-      <select id="node-input-smooth_method" style="width:60%;">
+      <label for="node-input-processOutputFormat"><i class="fa fa-random"></i> Process port</label>
+      <select id="node-input-processOutputFormat" style="width:60%;">
+        <option value="process">process</option>
+        <option value="json">json</option>
+        <option value="csv">csv</option>
       </select>
     </div>
-
-    <!-- Smoothing Window -->
     <div class="form-row">
-      <label for="node-input-count">Window</label>
-      <input type="number" id="node-input-count" placeholder="10" style="width:60px;"/>
-      <div class="form-tips">Number of samples for smoothing</div>
-    </div>
-
-    <!-- Calibration Stability Threshold -->
-    <div class="form-row">
-      <label for="node-input-stabilityThreshold"><i class="fa fa-balance-scale"></i> Stability Threshold</label>
-      <input type="number" id="node-input-stabilityThreshold" placeholder="0.01" step="any" style="width:100px;"/>
-      <span style="margin-left:6px; color:#666;">(scaling-units)</span>
-      <div class="form-tips">Maximum stdDev of the rolling window for calibrate() and evaluateRepeatability() to accept the buffer as stable. Default 0.01.</div>
+      <label for="node-input-dbaseOutputFormat"><i class="fa fa-database"></i> Database port</label>
+      <select id="node-input-dbaseOutputFormat" style="width:60%;">
+        <option value="influxdb">influxdb</option>
+        <option value="frost">frost</option>
+        <option value="json">json</option>
+        <option value="csv">csv</option>
+      </select>
     </div>
   </div>
 
-  <hr>
-  <h3>Output Formats</h3>
-  <div class="form-row">
-    <label for="node-input-processOutputFormat"><i class="fa fa-random"></i> Process Output</label>
-    <select id="node-input-processOutputFormat" style="width:60%;">
-      <option value="process">process</option>
-      <option value="json">json</option>
-      <option value="csv">csv</option>
-    </select>
-  </div>
-  <div class="form-row">
-    <label for="node-input-dbaseOutputFormat"><i class="fa fa-database"></i> Database Output</label>
-    <select id="node-input-dbaseOutputFormat" style="width:60%;">
-      <option value="influxdb">influxdb</option>
-      <option value="frost">frost</option>
-      <option value="json">json</option>
-      <option value="csv">csv</option>
-    </select>
-  </div>
-
-  <!-- Optional Extended Fields: supplier, cat, type, model, unit -->
-  <!-- Asset fields will be injected here -->
+  <!-- Shared asset/logger/position menus (injected by /measurement/menu.js) -->
   <div id="asset-fields-placeholder"></div>
-
-  <!-- loglevel checkbox -->
   <div id="logger-fields-placeholder"></div>
-
-  <!-- Position fields will be injected here -->
   <div id="position-fields-placeholder"></div>
 
 </script>
diff --git a/measurement.js b/measurement.js
index 793e703..1a81e9e 100644
--- a/measurement.js
+++ b/measurement.js
@@ -1,4 +1,5 @@
 const nameOfNode = 'measurement'; // this is the name of the node, it should match the file name and the node type in Node-RED
+const path = require('path');
 const nodeClass = require('./src/nodeClass.js'); // this is the specific node class
 const { MenuManager, configManager, assetApiConfig } = require('generalFunctions');
 const assetUtils = require('generalFunctions/assetUtils');
@@ -38,6 +39,18 @@ module.exports = function(RED) {
     }
   });
 
+  // Editor JS modules — loaded by measurement.html via <script src=...> tags.
+  // Files live in src/editor/. Filename is restricted to a safe charset to
+  // prevent path-traversal. Mirror of the pumpingStation pattern.
+  RED.httpAdmin.get(`/${nameOfNode}/editor/:file`, (req, res) => {
+    const safe = String(req.params.file || '').replace(/[^a-zA-Z0-9._-]/g, '');
+    if (!safe.endsWith('.js')) return res.status(400).send('// invalid');
+    res.type('application/javascript');
+    res.sendFile(path.join(__dirname, 'src', 'editor', safe), (err) => {
+      if (err && !res.headersSent) res.status(404).send('// editor module not found');
+    });
+  });
+
   RED.httpAdmin.post(`/${nameOfNode}/asset-reg`, async (req, res) => {
     const body = req.body || {};
     const assetPayload = body.asset;
diff --git a/src/editor/digital-channels.js b/src/editor/digital-channels.js
new file mode 100644
index 0000000..077a23c
--- /dev/null
+++ b/src/editor/digital-channels.js
@@ -0,0 +1,431 @@
+// Measurement editor — digital-mode channel row editor.
+//
+// Replaces the raw JSON textarea with a repeatable card UI. The textarea
+// remains the source of truth on the node (node.channels is still a JSON
+// string), so server-side parsing in nodeClass.js is untouched.
+//
+// IMPORTANT ARCHITECTURE NOTE:
+// Field edits (typing in key/unit, changing a dropdown, ticking a checkbox)
+// MUST NOT trigger a full rerender. A full rebuild destroys the input you
+// are typing into and the next keystroke is lost (one-letter-then-stop bug).
+// We split the two paths explicitly:
+//   - commitFieldEdit() — state + textarea sync + targeted DOM updates
+//                         (duplicate-key red borders). Use for every per-
+//                         field edit.
+//   - rerenderAll()     — full rebuild. Use only for structural changes:
+//                         add channel, delete channel, expand/collapse,
+//                         raw-JSON toggle, init.
+
+(function () {
+  const ns = window.MeasEditor = window.MeasEditor || {};
+
+  // --- Option sources ---------------------------------------------------
+  // Canonical types map 1:1 to MeasurementContainer axes; for those, the
+  // conversion machinery in generalFunctions expects unit ∈ a known set.
+  // Free-text units would silently break conversion, so the unit field
+  // becomes a select for canonical types. Custom types (humidity, co2,
+  // voc, …) bypass conversion per the docs, so unit stays free text.
+  const TYPE_OPTIONS = [
+    'pressure', 'flow', 'power', 'temperature',
+    'volume', 'length', 'mass', 'energy',
+    'humidity', 'co2', 'voc',
+  ];
+  const POSITION_OPTIONS = ['upstream', 'atEquipment', 'downstream'];
+  const OUTLIER_METHODS  = ['zScore', 'iqr', 'modifiedZScore'];
+
+  // Per-type unit suggestions. The list is curated to the most common units
+  // from generalFunctions/src/convert/definitions/<type>.js; users who need
+  // exotic units can fall back to raw-JSON view.
+  const UNIT_OPTIONS = {
+    pressure:    ['Pa', 'kPa', 'MPa', 'hPa', 'bar', 'mbar', 'torr', 'psi'],
+    flow:        ['m³/s', 'm³/h', 'L/s', 'L/min', 'gpm'],
+    power:       ['W', 'kW', 'MW', 'hp'],
+    temperature: ['C', 'K', 'F', 'R'],
+    volume:      ['mL', 'L', 'm³', 'gal'],
+    length:      ['mm', 'cm', 'm', 'km', 'in', 'ft'],
+    mass:        ['mg', 'g', 'kg', 't', 'oz', 'lb'],
+    energy:      ['Wh', 'kWh', 'J', 'kJ', 'MJ'],
+    // custom types intentionally omitted → unit becomes free text
+  };
+  const isCanonicalType = (t) => Object.prototype.hasOwnProperty.call(UNIT_OPTIONS, t);
+
+  const getSmoothMethods = () => {
+    const arr = window.EVOLV?.nodes?.measurement?.config?.smoothing?.smoothMethod?.rules?.values || [];
+    const names = arr.map((o) => o.value);
+    return names.length ? names
+      : ['none', 'mean', 'min', 'max', 'sd', 'median', 'weightedMovingAverage',
+         'lowPass', 'highPass', 'bandPass', 'kalman', 'savitzkyGolay'];
+  };
+
+  const newChannel = () => ({
+    key: '',
+    type: 'pressure',
+    position: 'atEquipment',
+    unit: UNIT_OPTIONS.pressure[0],
+    scaling:          { enabled: false, inputMin: 0, inputMax: 1, absMin: 0, absMax: 100, offset: 0 },
+    smoothing:        { smoothWindow: 10, smoothMethod: 'mean' },
+    outlierDetection: { enabled: false, method: 'zScore', threshold: 3 },
+  });
+
+  const mergeDefaults = (raw) => {
+    const d = newChannel();
+    return {
+      key:      raw.key      ?? '',
+      type:     raw.type     ?? d.type,
+      position: raw.position ?? d.position,
+      unit:     raw.unit     ?? '',
+      distance: raw.distance ?? null,
+      scaling:          { ...d.scaling,          ...(raw.scaling          || {}) },
+      smoothing:        { ...d.smoothing,        ...(raw.smoothing        || {}) },
+      outlierDetection: { ...d.outlierDetection, ...(raw.outlierDetection || {}) },
+    };
+  };
+
+  // --- State ------------------------------------------------------------
+  let _channels = [];
+  const _expanded = new Set();
+  let _jsonMode = false;
+
+  // --- Small DOM helpers ------------------------------------------------
+  const el = (tag, attrs = {}, children = []) => {
+    const e = document.createElement(tag);
+    for (const [k, v] of Object.entries(attrs)) {
+      if (v == null) continue;
+      if (k === 'class') e.className = v;
+      else if (k === 'style' && typeof v === 'object') Object.assign(e.style, v);
+      else if (k.startsWith('on') && typeof v === 'function') e.addEventListener(k.slice(2), v);
+      else e.setAttribute(k, v);
+    }
+    for (const c of (Array.isArray(children) ? children : [children])) {
+      if (c == null || c === false) continue;
+      e.appendChild(typeof c === 'string' || typeof c === 'number'
+        ? document.createTextNode(String(c)) : c);
+    }
+    return e;
+  };
+
+  const selectFrom = (opts, value, onChange, extraClass) => {
+    const sel = el('select', { class: 'meas-ch-input' + (extraClass ? ' ' + extraClass : '') });
+    const optsWithValue = value && !opts.includes(value) ? [...opts, value] : opts;
+    for (const o of optsWithValue) sel.appendChild(el('option', { value: o }, o));
+    sel.value = value || '';
+    sel.addEventListener('change', () => onChange(sel.value));
+    return sel;
+  };
+
+  const numInput = (value, onChange, opts = {}) => {
+    const inp = el('input', {
+      type: 'number', class: 'meas-ch-input meas-ch-num',
+      step: opts.step ?? 'any',
+      placeholder: opts.placeholder ?? '',
+      value: (value === '' || value == null || Number.isNaN(value)) ? '' : value,
+    });
+    inp.addEventListener('input', () => {
+      const v = parseFloat(inp.value);
+      onChange(Number.isFinite(v) ? v : (opts.allowNull ? null : 0));
+    });
+    return inp;
+  };
+
+  const textInput = (value, onChange, placeholder) => {
+    const inp = el('input', { type: 'text', class: 'meas-ch-input', value: value || '', placeholder: placeholder || '' });
+    inp.addEventListener('input', () => onChange(inp.value));
+    return inp;
+  };
+
+  const checkbox = (checked, onChange, labelText) => {
+    const cb = el('input', { type: 'checkbox' });
+    cb.checked = !!checked;
+    cb.addEventListener('change', () => onChange(cb.checked));
+    return el('label', { class: 'meas-ch-cb' }, [cb, ' ', labelText]);
+  };
+
+  // --- Sync + targeted updates -----------------------------------------
+  const serialize = () => JSON.stringify(_channels, null, 2);
+
+  const syncTextarea = () => {
+    const ta = document.getElementById('node-input-channels');
+    if (!ta) return;
+    ta.value = serialize();
+    ta.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  const refreshKeyValidationClasses = () => {
+    const { dupes, blanks } = keyValidation();
+    document.querySelectorAll('#meas-channels-rows [data-role="ch-key"]').forEach((inp) => {
+      const i = parseInt(inp.dataset.idx, 10);
+      const bad = dupes.has(i) || blanks.has(i);
+      inp.classList.toggle('meas-ch-err', bad);
+    });
+  };
+
+  // Single entry point for every per-field edit. Does NOT rerender.
+  const commitFieldEdit = () => {
+    syncTextarea();
+    refreshKeyValidationClasses();
+  };
+
+  // --- Validation -------------------------------------------------------
+  const keyValidation = () => {
+    const seen = new Map();
+    const dupes = new Set();
+    const blanks = new Set();
+    _channels.forEach((c, i) => {
+      const k = (c.key || '').trim();
+      if (!k) { blanks.add(i); return; }
+      if (seen.has(k)) { dupes.add(i); dupes.add(seen.get(k)); }
+      else seen.set(k, i);
+    });
+    return { dupes, blanks };
+  };
+
+  // --- Unit cell (type-driven, swapped in-place on type change) --------
+  const renderUnitCell = (channel, cardIndex) => {
+    const cell = el('div', { class: 'meas-ch-unit-cell', 'data-role': 'ch-unit-cell', 'data-idx': String(cardIndex) });
+    if (isCanonicalType(channel.type)) {
+      const opts = UNIT_OPTIONS[channel.type];
+      const sel = selectFrom(opts, channel.unit || opts[0], (v) => {
+        channel.unit = v;
+        commitFieldEdit();
+      });
+      cell.appendChild(sel);
+    } else {
+      const inp = textInput(channel.unit, (v) => {
+        channel.unit = v;
+        commitFieldEdit();
+      }, 'unit (free text)');
+      cell.appendChild(inp);
+    }
+    return cell;
+  };
+
+  // Replace just the unit cell inside one card. No full rerender → focus
+  // on the type select is preserved.
+  const swapUnitCell = (cardIndex, channel) => {
+    const old = document.querySelector(`#meas-channels-rows [data-role="ch-unit-cell"][data-idx="${cardIndex}"]`);
+    if (!old) return;
+    old.replaceWith(renderUnitCell(channel, cardIndex));
+  };
+
+  // --- Render: advanced sub-sections ------------------------------------
+  // These call commitFieldEdit() on edits (no rerender). The only
+  // exceptions are the enabled-toggle checkboxes: ticking them dims the
+  // sub-grid, which requires re-rendering JUST that card. We accept the
+  // tiny focus blip on a checkbox click — focus on a checkbox after a
+  // click isn't ergonomically important.
+  const renderScalingSection = (channel, cardIndex) => {
+    const sc = channel.scaling;
+    return el('div', { class: 'meas-ch-sub' }, [
+      el('div', { class: 'meas-ch-sub-title' }, [
+        checkbox(sc.enabled, (v) => { sc.enabled = v; rerenderCard(cardIndex); }, 'Scaling'),
+      ]),
+      el('div', { class: 'meas-ch-sub-grid' + (sc.enabled ? '' : ' meas-ch-dim') }, [
+        el('label', {}, 'input min'),  numInput(sc.inputMin,  (v) => { sc.inputMin = v;  commitFieldEdit(); }),
+        el('label', {}, 'input max'),  numInput(sc.inputMax,  (v) => { sc.inputMax = v;  commitFieldEdit(); }),
+        el('label', {}, 'output min'), numInput(sc.absMin,    (v) => { sc.absMin = v;    commitFieldEdit(); }),
+        el('label', {}, 'output max'), numInput(sc.absMax,    (v) => { sc.absMax = v;    commitFieldEdit(); }),
+        el('label', {}, 'offset'),     numInput(sc.offset,    (v) => { sc.offset = v;    commitFieldEdit(); }),
+      ]),
+    ]);
+  };
+
+  const renderSmoothingSection = (channel) => {
+    const sm = channel.smoothing;
+    return el('div', { class: 'meas-ch-sub' }, [
+      el('div', { class: 'meas-ch-sub-title' }, 'Smoothing'),
+      el('div', { class: 'meas-ch-sub-grid' }, [
+        el('label', {}, 'method'),
+        selectFrom(getSmoothMethods(), sm.smoothMethod || 'mean', (v) => { sm.smoothMethod = v; commitFieldEdit(); }),
+        el('label', {}, 'window'),
+        numInput(sm.smoothWindow, (v) => { sm.smoothWindow = v; commitFieldEdit(); }, { step: 1, placeholder: '10' }),
+      ]),
+    ]);
+  };
+
+  const renderOutlierSection = (channel, cardIndex) => {
+    const od = channel.outlierDetection;
+    return el('div', { class: 'meas-ch-sub' }, [
+      el('div', { class: 'meas-ch-sub-title' }, [
+        checkbox(od.enabled, (v) => { od.enabled = v; rerenderCard(cardIndex); }, 'Outlier detection'),
+      ]),
+      el('div', { class: 'meas-ch-sub-grid' + (od.enabled ? '' : ' meas-ch-dim') }, [
+        el('label', {}, 'method'),
+        selectFrom(OUTLIER_METHODS, od.method || 'zScore', (v) => { od.method = v; commitFieldEdit(); }),
+        el('label', {}, 'threshold'),
+        numInput(od.threshold, (v) => { od.threshold = v; commitFieldEdit(); }, { placeholder: '3' }),
+      ]),
+    ]);
+  };
+
+  // --- Render: one card -------------------------------------------------
+  const renderCard = (channel, index) => {
+    const isExpanded = _expanded.has(index);
+
+    // Key input — tagged with data-role + data-idx so the validation pass
+    // can find and re-class it without rebuilding the card.
+    const keyInput = textInput(channel.key, (v) => {
+      channel.key = v;
+      commitFieldEdit();
+    }, 'e.g. temperature');
+    keyInput.dataset.role = 'ch-key';
+    keyInput.dataset.idx = String(index);
+
+    // Type select — on change: update unit (reset to first unit of the new
+    // type if previous unit isn't valid there), swap the unit cell in
+    // place, and sync. No card rebuild.
+    const typeSelect = selectFrom(TYPE_OPTIONS, channel.type, (v) => {
+      channel.type = v;
+      if (isCanonicalType(v)) {
+        const validUnits = UNIT_OPTIONS[v];
+        if (!validUnits.includes(channel.unit)) channel.unit = validUnits[0];
+      }
+      swapUnitCell(index, channel);
+      commitFieldEdit();
+    }, 'meas-ch-w-110');
+
+    const posSelect = selectFrom(POSITION_OPTIONS, channel.position, (v) => {
+      channel.position = v;
+      commitFieldEdit();
+    }, 'meas-ch-w-110');
+
+    const unitCell = renderUnitCell(channel, index);
+
+    const head = el('div', { class: 'meas-ch-head', 'data-card-idx': String(index) }, [
+      el('span', { class: 'meas-ch-num-badge' }, '#' + (index + 1)),
+      keyInput, typeSelect, posSelect, unitCell,
+      el('button', {
+        type: 'button',
+        class: 'meas-ch-btn meas-ch-btn-toggle',
+        title: isExpanded ? 'Hide advanced' : 'Show advanced (scaling / smoothing / outlier)',
+        onclick: () => {
+          if (isExpanded) _expanded.delete(index); else _expanded.add(index);
+          rerenderAll();
+        },
+      }, isExpanded ? '▴ less' : '▾ more'),
+      el('button', {
+        type: 'button',
+        class: 'meas-ch-btn meas-ch-btn-del',
+        title: 'Remove this channel',
+        onclick: () => {
+          _channels.splice(index, 1);
+          const next = new Set();
+          _expanded.forEach((i) => { if (i < index) next.add(i); else if (i > index) next.add(i - 1); });
+          _expanded.clear(); next.forEach((i) => _expanded.add(i));
+          syncTextarea();
+          rerenderAll();
+        },
+      }, '×'),
+    ]);
+
+    const card = el('div', { class: 'meas-ch-card', 'data-card-idx': String(index) }, [head]);
+    if (isExpanded) {
+      card.appendChild(el('div', { class: 'meas-ch-adv' }, [
+        renderScalingSection(channel, index),
+        renderSmoothingSection(channel),
+        renderOutlierSection(channel, index),
+      ]));
+    }
+    return card;
+  };
+
+  // Rebuild a single card in place. Used by the enabled-toggle handlers
+  // that need to flip the dim class on a sub-grid.
+  const rerenderCard = (index) => {
+    const existing = document.querySelector(`#meas-channels-rows .meas-ch-card[data-card-idx="${index}"]`);
+    if (!existing) { rerenderAll(); return; }
+    const replacement = renderCard(_channels[index], index);
+    existing.replaceWith(replacement);
+    syncTextarea();
+  };
+
+  // --- Render: full list ------------------------------------------------
+  const rerenderAll = () => {
+    const host = document.getElementById('meas-channels-rows');
+    if (!host) return;
+    host.innerHTML = '';
+    if (_channels.length === 0) {
+      host.appendChild(el('div', { class: 'meas-ch-empty' },
+        'No channels yet. Click "+ Add channel" to define the first one.'));
+    } else {
+      _channels.forEach((c, i) => host.appendChild(renderCard(c, i)));
+    }
+    refreshKeyValidationClasses();
+    updateRawToggleButtonLabel();
+  };
+
+  const updateRawToggleButtonLabel = () => {
+    const btn = document.getElementById('meas-channels-raw-toggle');
+    const raw = document.getElementById('meas-channels-raw');
+    if (!btn || !raw) return;
+    raw.style.display = _jsonMode ? '' : 'none';
+    btn.textContent = _jsonMode ? '▴ Hide raw JSON' : '▾ Show raw JSON';
+  };
+
+  // --- Public API -------------------------------------------------------
+  ns.digitalChannels = {
+    init(node) {
+      const host = document.getElementById('meas-channels-rows');
+      if (!host) return;
+
+      const ta = document.getElementById('node-input-channels');
+      const raw = (ta?.value || node?.channels || '[]').trim() || '[]';
+      try {
+        const parsed = JSON.parse(raw);
+        _channels = Array.isArray(parsed) ? parsed.map(mergeDefaults) : [];
+      } catch {
+        _channels = [];
+      }
+
+      const addBtn = document.getElementById('meas-channels-add');
+      if (addBtn && !addBtn.dataset.bound) {
+        addBtn.dataset.bound = '1';
+        addBtn.addEventListener('click', () => {
+          _channels.push(newChannel());
+          _expanded.add(_channels.length - 1);
+          syncTextarea();
+          rerenderAll();
+        });
+      }
+
+      const rawBtn = document.getElementById('meas-channels-raw-toggle');
+      if (rawBtn && !rawBtn.dataset.bound) {
+        rawBtn.dataset.bound = '1';
+        rawBtn.addEventListener('click', () => {
+          if (_jsonMode) {
+            try {
+              const parsed = JSON.parse((ta?.value || '[]').trim() || '[]');
+              if (!Array.isArray(parsed)) throw new Error('not an array');
+              _channels = parsed.map(mergeDefaults);
+            } catch (e) {
+              if (typeof RED !== 'undefined' && RED.notify) {
+                RED.notify('Channels JSON is invalid: ' + e.message
+                  + ' — stay in JSON view to fix.', 'error');
+              }
+              return;
+            }
+          }
+          _jsonMode = !_jsonMode;
+          rerenderAll();
+        });
+      }
+
+      if (ta && !ta.dataset.boundBlur) {
+        ta.dataset.boundBlur = '1';
+        ta.addEventListener('blur', () => {
+          if (!_jsonMode) return;
+          try {
+            const parsed = JSON.parse(ta.value.trim() || '[]');
+            if (Array.isArray(parsed)) _channels = parsed.map(mergeDefaults);
+          } catch {
+            /* leave alone */
+          }
+        });
+      }
+
+      syncTextarea();
+      rerenderAll();
+    },
+
+    commit() { syncTextarea(); },
+  };
+})();
diff --git a/src/editor/hover-couple.js b/src/editor/hover-couple.js
new file mode 100644
index 0000000..cdec01c
--- /dev/null
+++ b/src/editor/hover-couple.js
@@ -0,0 +1,28 @@
+// Measurement editor — hover-coupling between side-panel input rows
+// and SVG elements they describe. Each .meas-row that carries
+// data-couples-line="<svg-element-id>" highlights that SVG element on
+// mouseenter and clears the highlight on mouseleave. Mirrors the
+// pumpingStation pattern so the visual idiom is consistent across nodes.
+
+(function () {
+  const ns = window.MeasEditor = window.MeasEditor || {};
+
+  ns.hoverCouple = {
+    init() {
+      document.querySelectorAll('.meas-diag-side .meas-row[data-couples-line]').forEach((row) => {
+        const targetId = row.getAttribute('data-couples-line');
+        const target = document.getElementById(targetId);
+        if (!target) return;
+        const enter = () => target.classList.add('meas-stage-highlight');
+        const leave = () => target.classList.remove('meas-stage-highlight');
+        row.addEventListener('mouseenter', enter);
+        row.addEventListener('mouseleave', leave);
+        const input = row.querySelector('input, select');
+        if (input) {
+          input.addEventListener('focus', enter);
+          input.addEventListener('blur', leave);
+        }
+      });
+    },
+  };
+})();
diff --git a/src/editor/index.js b/src/editor/index.js
new file mode 100644
index 0000000..2cc7312
--- /dev/null
+++ b/src/editor/index.js
@@ -0,0 +1,42 @@
+// Measurement editor — shared namespace + helpers.
+// Loaded first by measurement.html via /measurement/editor/index.js.
+// Each sibling module attaches additional members to window.MeasEditor.
+
+(function () {
+  const ns = window.MeasEditor = window.MeasEditor || {};
+
+  // Read a numeric value from an input by node-input-<id>; null if blank/NaN.
+  ns.fNum = (id) => {
+    const v = parseFloat(document.getElementById(`node-input-${id}`)?.value);
+    return Number.isFinite(v) ? v : null;
+  };
+
+  // Read the value of a select/text input by id; '' if absent.
+  ns.fStr = (id) => document.getElementById(`node-input-${id}`)?.value || '';
+
+  // Read a checkbox by id; false if absent.
+  ns.fBool = (id) => !!document.getElementById(`node-input-${id}`)?.checked;
+
+  // Set a numeric input by id (no node-input- prefix); blank if not finite.
+  ns.setNumberField = (id, val) => {
+    const el = document.getElementById(id);
+    if (el) el.value = Number.isFinite(val) ? val : '';
+  };
+
+  // Add input + change listeners to a list of node-input-* ids.
+  ns.bindRedraw = (ids, handler) => {
+    ids.forEach((id) => {
+      const el = document.getElementById(`node-input-${id}`);
+      if (el) {
+        el.addEventListener('input', handler);
+        el.addEventListener('change', handler);
+      }
+    });
+  };
+
+  // Show/hide an element by id (block when shown).
+  ns.toggle = (id, show) => {
+    const el = document.getElementById(id);
+    if (el) el.style.display = show ? '' : 'none';
+  };
+})();
diff --git a/src/editor/oneditprepare.js b/src/editor/oneditprepare.js
new file mode 100644
index 0000000..0ad6fac
--- /dev/null
+++ b/src/editor/oneditprepare.js
@@ -0,0 +1,160 @@
+// Measurement editor — oneditprepare. Replaces the inline script that used
+// to live in measurement.html. Initialises form fields, mode toggle,
+// scaling toggle, the smoothing dropdown (populated from configData), and
+// wires the three live previews (pipeline / scaling / smoothing).
+
+(function () {
+  const ns = window.MeasEditor = window.MeasEditor || {};
+
+  ns.oneditprepare = function () {
+    const node = this;
+
+    // Kick off shared menu init (asset/logger/position) first so a downstream
+    // error never blocks the menus. Historical regression: a ReferenceError
+    // in the mode block once aborted oneditprepare and stopped the asset menu
+    // from rendering at all.
+    const waitForMenuData = () => {
+      if (window.EVOLV?.nodes?.measurement?.initEditor) {
+        window.EVOLV.nodes.measurement.initEditor(node);
+      } else {
+        setTimeout(waitForMenuData, 50);
+      }
+    };
+    waitForMenuData();
+
+    // === Resolve DOM up front ===
+    const modeSelect    = document.getElementById('node-input-mode');
+    const modeCards     = document.querySelectorAll('.meas-mode-card');
+    const analogBlock   = document.getElementById('analog-only-fields');
+    const digitalBlock  = document.getElementById('digital-only-fields');
+    const modeHint      = document.getElementById('mode-hint');
+    const channelsArea  = document.getElementById('node-input-channels');
+    const channelsHint  = document.getElementById('channels-validation');
+    const scalingChk    = document.getElementById('node-input-scaling');
+    const scaleRows     = document.getElementById('meas-scaling-inputs');
+
+    // === Initial values ===
+    const initialMode = (node.mode === 'digital' || node.mode === 'analog') ? node.mode : 'analog';
+    if (modeSelect) modeSelect.value = initialMode;
+    if (channelsArea && typeof node.channels === 'string') channelsArea.value = node.channels;
+
+    // === Mode cards (visual two-option picker) ===
+    const setActiveCard = (mode) => {
+      modeCards.forEach((c) => c.classList.toggle('meas-mode-active', c.dataset.mode === mode));
+    };
+
+    const applyMode = (mode) => {
+      const isDigital = mode === 'digital';
+      if (analogBlock)  analogBlock.style.display  = isDigital ? 'none' : '';
+      if (digitalBlock) digitalBlock.style.display = isDigital ? '' : 'none';
+      if (modeHint) {
+        modeHint.textContent = isDigital
+          ? 'msg.payload must be an OBJECT, e.g. {"temperature": 22.5, "humidity": 45}. Define each key below.'
+          : 'msg.payload must be a NUMBER (or numeric string). Configure offset / scaling / smoothing below.';
+      }
+      setActiveCard(mode);
+      validateChannelsJson();
+      ns.pipelineDiagram?.redraw();
+    };
+
+    function validateChannelsJson() {
+      if (!channelsHint) return;
+      if (!modeSelect || modeSelect.value !== 'digital') { channelsHint.textContent = ''; return; }
+      const raw = (channelsArea && channelsArea.value || '').trim();
+      if (!raw || raw === '[]') {
+        channelsHint.innerHTML = '<span style="color:#b45309;">Digital mode with no channels — no measurements will be emitted.</span>';
+        return;
+      }
+      try {
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed)) throw new Error('must be an array');
+        const missing = parsed
+          .map((c, i) => (c && c.key && c.type ? null : 'entry ' + i + ': missing key or type'))
+          .filter(Boolean);
+        if (missing.length) {
+          channelsHint.innerHTML = '<span style="color:#b45309;">' + missing.join('; ') + '</span>';
+        } else {
+          channelsHint.innerHTML = '<span style="color:#047857;">' + parsed.length + ' channel(s) defined: ' + parsed.map((c) => c.key).join(', ') + '</span>';
+        }
+      } catch (e) {
+        channelsHint.innerHTML = '<span style="color:#b91c1c;">Invalid JSON: ' + e.message + '</span>';
+      }
+    }
+
+    if (modeSelect) modeSelect.addEventListener('change', (e) => applyMode(e.target.value));
+    modeCards.forEach((card) => {
+      card.addEventListener('click', () => {
+        const m = card.dataset.mode;
+        if (modeSelect) modeSelect.value = m;
+        applyMode(m);
+      });
+    });
+    if (channelsArea) channelsArea.addEventListener('input', validateChannelsJson);
+
+    // === Smoothing method dropdown — populated from configData ===
+    const smoothMethodSelect = document.getElementById('node-input-smooth_method');
+    if (smoothMethodSelect) {
+      const options = window.EVOLV?.nodes?.measurement?.config?.smoothing?.smoothMethod?.rules?.values || [];
+      smoothMethodSelect.innerHTML = '';
+      const emptyOption = document.createElement('option');
+      emptyOption.value = '';
+      emptyOption.textContent = 'Select method...';
+      smoothMethodSelect.appendChild(emptyOption);
+      options.forEach((opt) => {
+        const o = document.createElement('option');
+        o.value = opt.value;
+        o.textContent = opt.value;
+        o.title = opt.description;
+        smoothMethodSelect.appendChild(o);
+      });
+      if (node.smooth_method) smoothMethodSelect.value = node.smooth_method;
+    }
+
+    // === Scaling toggle ===
+    const toggleScalingRows = () => {
+      const show = !!scalingChk?.checked;
+      if (scaleRows) scaleRows.style.display = show ? '' : 'none';
+      ns.scalingChart?.redraw();
+      ns.pipelineDiagram?.redraw();
+    };
+    if (scalingChk) scalingChk.addEventListener('change', toggleScalingRows);
+
+    // === Bind redraws ===
+    // Pipeline diagram listens to anything that flips a stage on/off or
+    // changes a sub-label.
+    ns.bindRedraw(
+      ['mode', 'scaling', 'i_min', 'i_max', 'i_offset', 'o_min', 'o_max',
+       'smooth_method', 'count', 'processOutputFormat', 'dbaseOutputFormat'],
+      () => ns.pipelineDiagram?.redraw(),
+    );
+    // Scaling chart listens to its own four inputs + offset.
+    ns.bindRedraw(
+      ['scaling', 'i_min', 'i_max', 'i_offset', 'o_min', 'o_max'],
+      () => ns.scalingChart?.redraw(),
+    );
+    // Smoothing sparkline listens to the method dropdown + window.
+    ns.bindRedraw(
+      ['smooth_method', 'count'],
+      () => ns.smoothingSparkline?.redraw(),
+    );
+
+    // Initial render once the DOM has settled.
+    setTimeout(() => {
+      try {
+        applyMode(initialMode);
+        toggleScalingRows();
+        // Build the digital-channel row UI from node.channels. Safe to call
+        // even when the user opens the editor in analog mode — the rows
+        // host is hidden by applyMode() and init() is a no-op when no host
+        // is present.
+        ns.digitalChannels?.init(node);
+        ns.pipelineDiagram?.redraw();
+        ns.scalingChart?.redraw();
+        ns.smoothingSparkline?.redraw();
+        ns.hoverCouple?.init();
+      } catch (e) {
+        console.error('measurement editor: initial render failed', e);
+      }
+    }, 60);
+  };
+})();
diff --git a/src/editor/oneditsave.js b/src/editor/oneditsave.js
new file mode 100644
index 0000000..94af255
--- /dev/null
+++ b/src/editor/oneditsave.js
@@ -0,0 +1,69 @@
+// Measurement editor — oneditsave. Validates and persists fields onto the
+// node. Behaviour preserved 1:1 from the previous inline script: mode-aware
+// channel JSON validation, scaling completeness warning, calibration
+// stability threshold default.
+
+(function () {
+  const ns = window.MeasEditor = window.MeasEditor || {};
+
+  ns.oneditsave = function () {
+    const node = this;
+
+    // Shared menu sections.
+    if (window.EVOLV?.nodes?.measurement?.assetMenu?.saveEditor) {
+      window.EVOLV.nodes.measurement.assetMenu.saveEditor(node);
+    }
+    if (window.EVOLV?.nodes?.measurement?.loggerMenu?.saveEditor) {
+      window.EVOLV.nodes.measurement.loggerMenu.saveEditor(node);
+    }
+    if (window.EVOLV?.nodes?.measurement?.positionMenu?.saveEditor) {
+      window.EVOLV.nodes.measurement.positionMenu.saveEditor(node);
+    }
+
+    // Mode is the top-level switch.
+    node.mode = document.getElementById('node-input-mode')?.value || 'analog';
+
+    // Channels JSON (digital). Stored as a raw string; server-side parses it.
+    // Make sure the row editor's in-memory state is flushed into the textarea
+    // before we read it — defensive, edits already sync on every change but
+    // commit() is idempotent.
+    ns.digitalChannels?.commit?.();
+    node.channels = document.getElementById('node-input-channels')?.value || '[]';
+
+    // Analog smoothing method.
+    node.smooth_method = document.getElementById('node-input-smooth_method')?.value || '';
+
+    // Checkboxes.
+    ['scaling', 'simulator'].forEach((field) => {
+      const el = document.getElementById(`node-input-${field}`);
+      if (el) node[field] = el.checked;
+    });
+
+    // Numeric fields (NaN → 0).
+    ['i_min', 'i_max', 'i_offset', 'o_min', 'o_max', 'count'].forEach((field) => {
+      const el = document.getElementById(`node-input-${field}`);
+      if (el) node[field] = parseFloat(el.value) || 0;
+    });
+
+    // Calibration stability threshold: 0 is a valid (very strict) value, so
+    // fall back to the default 0.01 only when the field is empty / NaN.
+    const stRaw = document.getElementById('node-input-stabilityThreshold')?.value;
+    const stParsed = parseFloat(stRaw);
+    node.stabilityThreshold = Number.isFinite(stParsed) ? stParsed : 0.01;
+
+    // Mode-dependent validation.
+    if (node.mode === 'analog' && node.scaling && (isNaN(node.i_min) || isNaN(node.i_max))) {
+      RED.notify('Scaling enabled, but input range is incomplete!', 'error');
+    }
+    if (node.mode === 'digital') {
+      try {
+        const parsed = JSON.parse(node.channels || '[]');
+        if (!Array.isArray(parsed) || parsed.length === 0) {
+          RED.notify('Digital mode: no channels defined. The node will emit nothing.', 'warning');
+        }
+      } catch (e) {
+        RED.notify('Digital mode: Channels JSON is invalid (' + e.message + ')', 'error');
+      }
+    }
+  };
+})();
diff --git a/src/editor/pipeline-diagram.js b/src/editor/pipeline-diagram.js
new file mode 100644
index 0000000..38edf98
--- /dev/null
+++ b/src/editor/pipeline-diagram.js
@@ -0,0 +1,91 @@
+// Measurement editor — analog signal-pipeline diagram.
+//
+// Renders a horizontal flow:
+//   msg.payload → +offset → scale → smooth → outlier → output (port 0/1)
+//
+// Each stage dims when its feature is disabled (scaling unchecked,
+// smoothMethod === '' or 'none', outlierDetection toggled off). Hover-coupling
+// (via data-couples-line on the side-panel rows) thickens the active stage
+// stroke so the user sees which control affects which stage.
+
+(function () {
+  const ns = window.MeasEditor = window.MeasEditor || {};
+
+  // SVG element IDs that the hover-couple module targets. Kept in one place
+  // so the HTML template + hover wiring + redraw all use the same names.
+  const STAGE_IDS = {
+    input:    'meas-stage-input',
+    offset:   'meas-stage-offset',
+    scale:    'meas-stage-scale',
+    smooth:   'meas-stage-smooth',
+    outlier:  'meas-stage-outlier',
+    output:   'meas-stage-output',
+  };
+
+  const setEnabled = (id, on) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.classList.toggle('meas-stage-disabled', !on);
+  };
+
+  const setLabel = (id, text) => {
+    const el = document.getElementById(id);
+    if (el) el.textContent = text;
+  };
+
+  ns.pipelineDiagram = {
+    stageIds: STAGE_IDS,
+    redraw() {
+      const mode = ns.fStr('mode') || 'analog';
+      const wrap = document.getElementById('meas-pipeline-wrap');
+      if (!wrap) return;
+      // The pipeline only describes the analog pipeline. In digital mode
+      // each channel has its own pipeline, so we hide the diagram and let
+      // the channels block speak for itself.
+      wrap.style.display = mode === 'digital' ? 'none' : '';
+      if (mode === 'digital') return;
+
+      const scalingOn  = ns.fBool('scaling');
+      const offset     = ns.fNum('i_offset');
+      const offsetOn   = offset != null && offset !== 0;
+      const method     = ns.fStr('smooth_method');
+      const smoothingOn = method && method.toLowerCase() !== 'none';
+      // Outlier detection has no static UI control on the analog page (it's
+      // toggled at runtime via the outlierDetection topic). We still draw
+      // its stage as a runtime-only hint so users see the full pipeline.
+
+      setEnabled(STAGE_IDS.offset,  offsetOn);
+      setEnabled(STAGE_IDS.scale,   scalingOn);
+      setEnabled(STAGE_IDS.smooth,  !!smoothingOn);
+      // 'outlier' and 'input'/'output' always rendered enabled.
+
+      // Update sub-labels with the live values so the diagram doubles as a
+      // configuration summary.
+      if (offsetOn) setLabel('meas-stage-offset-sub', `+${offset}`);
+      else          setLabel('meas-stage-offset-sub', 'off');
+
+      if (scalingOn) {
+        const iMin = ns.fNum('i_min');
+        const iMax = ns.fNum('i_max');
+        const oMin = ns.fNum('o_min');
+        const oMax = ns.fNum('o_max');
+        const lhs = `[${iMin ?? '?'},${iMax ?? '?'}]`;
+        const rhs = `[${oMin ?? '?'},${oMax ?? '?'}]`;
+        setLabel('meas-stage-scale-sub', `${lhs}→${rhs}`);
+      } else {
+        setLabel('meas-stage-scale-sub', 'off');
+      }
+
+      if (smoothingOn) {
+        const win = ns.fNum('count');
+        setLabel('meas-stage-smooth-sub', `${method} · win=${win ?? '?'}`);
+      } else {
+        setLabel('meas-stage-smooth-sub', 'off');
+      }
+
+      const procFmt = ns.fStr('processOutputFormat') || 'process';
+      const dbFmt   = ns.fStr('dbaseOutputFormat')   || 'influxdb';
+      setLabel('meas-stage-output-sub', `${procFmt} / ${dbFmt}`);
+    },
+  };
+})();
diff --git a/src/editor/scaling-chart.js b/src/editor/scaling-chart.js
new file mode 100644
index 0000000..1c6fa82
--- /dev/null
+++ b/src/editor/scaling-chart.js
@@ -0,0 +1,82 @@
+// Measurement editor — scaling line chart.
+//
+// Plots the analog scaling transform: input axis [i_min, i_max] mapped to
+// output axis [o_min, o_max], with the configured i_offset applied before
+// scaling (matching specificClass: v = value + offset, then clamp+lerp).
+//
+// Hidden when scaling is disabled; the static "no scaling" badge in the UI
+// already communicates that state.
+
+(function () {
+  const ns = window.MeasEditor = window.MeasEditor || {};
+
+  // Plot bounds in viewBox coords; matches the inline SVG in measurement.html.
+  const VB = { left: 44, right: 286, top: 14, bot: 156 };
+
+  const setAttrs = (el, attrs) => {
+    if (!el) return;
+    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  };
+
+  const fmt = (n) => (Number.isFinite(n) ? (Math.abs(n) >= 100 ? n.toFixed(0) : n.toFixed(2)) : '?');
+
+  ns.scalingChart = {
+    redraw() {
+      const wrap = document.getElementById('meas-scaling-wrap');
+      if (!wrap) return;
+      const enabled = ns.fBool('scaling');
+      wrap.style.display = enabled ? '' : 'none';
+      if (!enabled) return;
+
+      const iMin = ns.fNum('i_min');
+      const iMax = ns.fNum('i_max');
+      const oMin = ns.fNum('o_min');
+      const oMax = ns.fNum('o_max');
+      const offset = ns.fNum('i_offset') || 0;
+
+      // Axis tick labels
+      setAttrs(document.getElementById('meas-scale-x-min'), { });
+      const xMinEl = document.getElementById('meas-scale-x-min');
+      const xMaxEl = document.getElementById('meas-scale-x-max');
+      const yMinEl = document.getElementById('meas-scale-y-min');
+      const yMaxEl = document.getElementById('meas-scale-y-max');
+      if (xMinEl) xMinEl.textContent = fmt(iMin);
+      if (xMaxEl) xMaxEl.textContent = fmt(iMax);
+      if (yMinEl) yMinEl.textContent = fmt(oMin);
+      if (yMaxEl) yMaxEl.textContent = fmt(oMax);
+
+      // If the input domain is degenerate we still draw the box but skip
+      // the line — same defensive choice _applyScaling makes at runtime.
+      if (iMin == null || iMax == null || oMin == null || oMax == null) return;
+      if (iMax === iMin) return;
+
+      // Map data → plot pixel.
+      const xPx = (val) => VB.left + ((val - iMin) / (iMax - iMin)) * (VB.right - VB.left);
+      const yPx = (val) => VB.bot  - ((val - oMin) / (oMax - oMin)) * (VB.bot - VB.top);
+
+      // The scaling clamps input to [iMin, iMax] before lerping. We draw
+      // three segments: a flat clamp on the left, the diagonal mapping,
+      // and a flat clamp on the right. The offset shifts the input axis,
+      // so the diagonal endpoints map at (iMin - offset) and (iMax - offset)
+      // in raw-input space, but we plot in offset-applied space (the value
+      // that enters _applyScaling) — which is just [iMin, iMax]. So no
+      // additional shift is needed inside the plot; we annotate the offset
+      // separately.
+      const line = document.getElementById('meas-scale-line');
+      if (line) {
+        const points = [
+          `${xPx(iMin)},${yPx(oMin)}`,
+          `${xPx(iMax)},${yPx(oMax)}`,
+        ].join(' ');
+        line.setAttribute('points', points);
+      }
+
+      // Offset readout — small label under the chart.
+      const offEl = document.getElementById('meas-scale-offset-label');
+      if (offEl) {
+        if (offset === 0) offEl.textContent = 'offset: 0 (no shift)';
+        else offEl.textContent = `offset: +${offset} (applied before scaling)`;
+      }
+    },
+  };
+})();
diff --git a/src/editor/smoothing-sparkline.js b/src/editor/smoothing-sparkline.js
new file mode 100644
index 0000000..ee0b500
--- /dev/null
+++ b/src/editor/smoothing-sparkline.js
@@ -0,0 +1,158 @@
+// Measurement editor — smoothing sparkline.
+//
+// Renders a synthetic noisy signal (gray) and the same signal after the
+// selected smoothing method + window (green) so the user can see what each
+// method does before deploying. The smoothing math here is a small,
+// browser-side mirror of src/channel.js. Drift risk: if you add a method
+// there, add it here (and vice-versa). Keep parameters identical (e.g. the
+// 0.2 lowPass alpha) so the preview matches runtime behaviour.
+
+(function () {
+  const ns = window.MeasEditor = window.MeasEditor || {};
+
+  // Plot box in viewBox coords (matches the inline SVG in measurement.html).
+  const VB = { left: 10, right: 380, top: 8, bot: 92 };
+  const N = 80; // sample count
+
+  // Deterministic noisy signal: low-freq sine + medium-freq sine + a small
+  // pseudo-random component using a fixed seed so the preview never jitters
+  // between renders.
+  const buildSignal = () => {
+    const out = new Array(N);
+    let seed = 0xC0FFEE;
+    const rand = () => {
+      // mulberry32
+      seed |= 0; seed = (seed + 0x6D2B79F5) | 0;
+      let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+    for (let i = 0; i < N; i++) {
+      const base = 0.6 * Math.sin(i * 0.18) + 0.25 * Math.sin(i * 0.55);
+      // Inject an outlier at sample 40 so the median/iqr cases look different
+      const spike = (i === 40) ? 2.2 : 0;
+      const noise = (rand() - 0.5) * 0.7;
+      out[i] = base + noise + spike;
+    }
+    return out;
+  };
+
+  // --- Smoothing math (mirror of src/channel.js, kept self-contained) ---
+
+  const mean = (a) => a.reduce((s, v) => s + v, 0) / a.length;
+  const median = (a) => {
+    const s = [...a].sort((x, y) => x - y);
+    const mid = Math.floor(s.length / 2);
+    return s.length % 2 ? s[mid] : (s[mid - 1] + s[mid]) / 2;
+  };
+  const stdDev = (a) => {
+    if (a.length <= 1) return 0;
+    const m = mean(a);
+    return Math.sqrt(a.reduce((s, v) => s + (v - m) ** 2, 0) / (a.length - 1));
+  };
+  const wma = (a) => {
+    let num = 0, den = 0;
+    for (let i = 0; i < a.length; i++) { num += a[i] * (i + 1); den += (i + 1); }
+    return num / den;
+  };
+  const lowPass = (a) => {
+    let out = a[0];
+    for (let i = 1; i < a.length; i++) out = 0.2 * a[i] + 0.8 * out;
+    return out;
+  };
+  const highPass = (a) => {
+    const f = [a[0]];
+    for (let i = 1; i < a.length; i++) f[i] = 0.8 * (f[i - 1] + a[i] - a[i - 1]);
+    return f[f.length - 1];
+  };
+  const bandPass = (a) => {
+    const lp = lowPass(a), hp = highPass(a);
+    return a.map((v) => lp + hp - v).pop();
+  };
+  const kalman = (a) => {
+    let e = a[0];
+    const gain = 0.1 / (0.1 + 1);
+    for (let i = 1; i < a.length; i++) e = e + gain * (a[i] - e);
+    return e;
+  };
+  const savitzkyGolay = (a) => {
+    const c = [-3, 12, 17, 12, -3];
+    const norm = c.reduce((s, v) => s + v, 0);
+    if (a.length < c.length) return a[a.length - 1];
+    let s = 0;
+    for (let i = 0; i < c.length; i++) s += a[a.length - c.length + i] * c[i];
+    return s / norm;
+  };
+
+  const applyMethod = (window, method) => {
+    const m = (method || '').toLowerCase();
+    switch (m) {
+      case '':
+      case 'none': return window[window.length - 1];
+      case 'mean': return mean(window);
+      case 'min':  return Math.min(...window);
+      case 'max':  return Math.max(...window);
+      case 'sd':   return stdDev(window);
+      case 'median': return median(window);
+      case 'weightedmovingaverage': return wma(window);
+      case 'lowpass':  return lowPass(window);
+      case 'highpass': return highPass(window);
+      case 'bandpass': return bandPass(window);
+      case 'kalman':   return kalman(window);
+      case 'savitzkygolay': return savitzkyGolay(window);
+      default: return window[window.length - 1];
+    }
+  };
+
+  // --- Render ---
+
+  // Cache the synthetic signal so we don't rebuild it on every keystroke.
+  let _signalCache = null;
+  const getSignal = () => { _signalCache = _signalCache || buildSignal(); return _signalCache; };
+
+  ns.smoothingSparkline = {
+    redraw() {
+      const wrap = document.getElementById('meas-smooth-wrap');
+      if (!wrap) return;
+
+      const method = ns.fStr('smooth_method');
+      const win = Math.max(1, ns.fNum('count') || 1);
+
+      const raw = getSignal();
+      const smoothed = new Array(raw.length);
+      const buf = [];
+      for (let i = 0; i < raw.length; i++) {
+        buf.push(raw[i]);
+        if (buf.length > win) buf.shift();
+        smoothed[i] = applyMethod(buf, method);
+      }
+
+      // Compute y range from BOTH series so neither line clips at the edges.
+      let yMin = Infinity, yMax = -Infinity;
+      for (const v of raw)      { if (v < yMin) yMin = v; if (v > yMax) yMax = v; }
+      for (const v of smoothed) { if (v < yMin) yMin = v; if (v > yMax) yMax = v; }
+      if (!Number.isFinite(yMin) || !Number.isFinite(yMax) || yMin === yMax) {
+        yMin = yMin - 1; yMax = yMax + 1;
+      }
+      const pad = (yMax - yMin) * 0.08;
+      yMin -= pad; yMax += pad;
+
+      const xPx = (i) => VB.left + (i / (N - 1)) * (VB.right - VB.left);
+      const yPx = (v) => VB.bot  - ((v - yMin) / (yMax - yMin)) * (VB.bot - VB.top);
+
+      const toPoints = (arr) => arr.map((v, i) => `${xPx(i).toFixed(1)},${yPx(v).toFixed(1)}`).join(' ');
+
+      const rawEl = document.getElementById('meas-smooth-raw');
+      const smEl  = document.getElementById('meas-smooth-smoothed');
+      if (rawEl) rawEl.setAttribute('points', toPoints(raw));
+      if (smEl)  smEl.setAttribute('points', toPoints(smoothed));
+
+      const label = document.getElementById('meas-smooth-label');
+      if (label) {
+        const m = (method || 'none').toLowerCase();
+        if (m === '' || m === 'none') label.textContent = 'no smoothing — raw value passed through';
+        else label.textContent = `method: ${method} · window: ${win} samples`;
+      }
+    },
+  };
+})();