Editor: pipe-edge conventions + live derived safety levels

### P1 — match diagram naming (labels only, no schema change)

- "Inlet Elevation"    → "Inlet (bottom of pipe, m)"
- "Outlet Elevation"   → "Outlet (top of pipe, m)"
- "Overflow Level"     → "Overflow (weir crest, m)"
- "Basin Bottom (m Refheight)" → "Basin floor above datum (m)"
- Added a one-line banner at the top of Basin Geometry:
  "All heights measured from the basin floor (0 m)."

These map directly to the clarifications added to basin-model.drawio.svg
so editor and diagram speak the same vocabulary.

### P3 — live derived safety levels next to the % fields

Low/High Volume Threshold fields now show the resulting trip level
live as the operator types:

  Low Volume Threshold (%)  [ 2  ]  → dryRunLevel ≈ 0.21 m
  High Volume Threshold (%) [ 98 ]  → overfillLevel ≈ 4.41 m

Recomputed on every input/change of outflowLevel, inflowLevel,
overflowLevel, minHeightBasedOn, or either %. Pure UI feedback —
no schema change, no save-side change, same formulas as
specificClass._validateThresholdOrdering().

Also includes the user's latest basin-model.drawio.svg update
(inlet=bottom/outlet=top labels + datum annotation).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

pumpingStation.html

@@ -173,6 +173,32 @@
       setNumberField('node-input-flowSetpoint', this.flowSetpoint);
       setNumberField('node-input-flowDeadband', this.flowDeadband);
 
+      // Live-compute derived safety levels so the operator can see
+      // what the % will actually trip at. Mirrors the code formula
+      // in specificClass._validateThresholdOrdering.
+      const fNum = (id) => parseFloat(document.getElementById(`node-input-${id}`)?.value);
+      const updateDerivedLevels = () => {
+        const basedOn = document.getElementById('node-input-minHeightBasedOn')?.value || 'outlet';
+        const refLow = basedOn === 'inlet' ? fNum('inflowLevel') : fNum('outflowLevel');
+        const dryRunPct = fNum('dryRunThresholdPercent');
+        const overfillPct = fNum('overfillThresholdPercent');
+        const overflow = fNum('overflowLevel');
+        const dryRunLvl = Number.isFinite(refLow) && Number.isFinite(dryRunPct)
+          ? refLow * (1 + dryRunPct / 100) : null;
+        const overfillLvl = Number.isFinite(overflow) && Number.isFinite(overfillPct)
+          ? overflow * (overfillPct / 100) : null;
+        const dryEl = document.getElementById('derived-dryRunLevel');
+        const ovfEl = document.getElementById('derived-overfillLevel');
+        if (dryEl) dryEl.textContent = dryRunLvl != null ? `→ dryRunLevel ≈ ${dryRunLvl.toFixed(2)} m` : '→ dryRunLevel ≈ — m';
+        if (ovfEl) ovfEl.textContent = overfillLvl != null ? `→ overfillLevel ≈ ${overfillLvl.toFixed(2)} m` : '→ overfillLevel ≈ — m';
+      };
+      ['inflowLevel','outflowLevel','overflowLevel','minHeightBasedOn','dryRunThresholdPercent','overfillThresholdPercent']
+        .forEach((id) => {
+          const el = document.getElementById(`node-input-${id}`);
+          if (el) { el.addEventListener('input', updateDerivedLevels); el.addEventListener('change', updateDerivedLevels); }
+        });
+      setTimeout(updateDerivedLevels, 50);
+
         //------------------- END OF CUSTOM config UI ELEMENTS ------------------- //
     },
     oneditsave: function () {
@@ -225,6 +251,7 @@
   <hr>
   
   <h4>Basin Geometry</h4>
+  <p style="font-size:12px;color:#777;margin:0 0 8px 0;">All heights measured from the basin floor (0 m).</p>
   <div class="form-row">
     <label for="node-input-basinVolume"><i class="fa fa-cube"></i> Basin Volume (m³)</label>
     <input type="number" id="node-input-basinVolume" min="0" step="0.1" />
@@ -236,15 +263,15 @@
 
   <!-- Inlet/Outlet elevations -->
   <div class="form-row">
-    <label for="node-input-inflowLevel"><i class="fa fa-long-arrow-up"></i> Inlet Elevation (m)</label>
+    <label for="node-input-inflowLevel"><i class="fa fa-long-arrow-up"></i> Inlet (bottom of pipe, m)</label>
     <input type="number" id="node-input-inflowLevel" min="0" step="0.01" />
   </div>
   <div class="form-row">
-    <label for="node-input-outflowLevel"><i class="fa fa-long-arrow-down"></i> Outlet Elevation (m)</label>
+    <label for="node-input-outflowLevel"><i class="fa fa-long-arrow-down"></i> Outlet (top of pipe, m)</label>
     <input type="number" id="node-input-outflowLevel" min="0" step="0.01" />
   </div>
   <div class="form-row">
-    <label for="node-input-overflowLevel"><i class="fa fa-tint"></i> Overflow Level (m)</label>
+    <label for="node-input-overflowLevel"><i class="fa fa-tint"></i> Overflow (weir crest, m)</label>
     <input type="number" id="node-input-overflowLevel" min="0" step="0.01" />
   </div>
 
@@ -306,7 +333,7 @@
   </div>
 
   <div class="form-row">
-    <label for="node-input-basinBottomRef"><i class="fa fa-level-down"></i> Basin Bottom (m Refheight)</label>
+    <label for="node-input-basinBottomRef"><i class="fa fa-level-down"></i> Basin floor above datum (m)</label>
     <input type="number" id="node-input-basinBottomRef" step="0.01" />
   </div>
 
@@ -329,7 +356,8 @@
   </div>
   <div class="form-row">
     <label for="node-input-dryRunThresholdPercent" style="padding-left:20px;">Low Volume Threshold (%)</label>
-    <input type="number" id="node-input-dryRunThresholdPercent" min="0" max="100" step="0.1" />
+    <input type="number" id="node-input-dryRunThresholdPercent" min="0" max="100" step="0.1" style="width:80px;" />
+    <span id="derived-dryRunLevel" style="margin-left:8px;color:#777;font-size:12px;">→ dryRunLevel ≈ — m</span>
   </div>
 
   <div class="form-row">
@@ -341,7 +369,8 @@
   </div>
   <div class="form-row">
     <label for="node-input-overfillThresholdPercent" style="padding-left:20px;">High Volume Threshold (%)</label>
-    <input type="number" id="node-input-overfillThresholdPercent" min="0" max="100" step="0.1" />
+    <input type="number" id="node-input-overfillThresholdPercent" min="0" max="100" step="0.1" style="width:80px;" />
+    <span id="derived-overfillLevel" style="margin-left:8px;color:#777;font-size:12px;">→ overfillLevel ≈ — m</span>
   </div>
   <hr>