diff --git a/docs/feat-reference-distances.md b/docs/feat-reference-distances.md
index 4e33709..6521f0e 100644
--- a/docs/feat-reference-distances.md
+++ b/docs/feat-reference-distances.md
@@ -289,22 +289,112 @@ This property is now documented in the test suite to prevent future confusion.
 
 ---
 
-### 🔲 Phase 2: UI Layer (Not Started)
+### ✅ Phase 1.5: Scale Helpers & State Extension (Completed)
 
-This phase implements the user-facing features: setting a reference distance and measuring arbitrary distances.
+**Date:** 2025-12-21
+
+This phase implements the pure utility functions for scale management and extends the application state.
+
+#### `src/scale/scale.js` (New Module)
+- [x] Created new `src/scale/` directory with `scale.js` module
+- [x] Implemented `computeReferenceScale(p1, p2, meters)` - computes m/px from two points and known distance
+- [x] Implemented `getMetersPerPixelFromCalibration(calibrationResult)` - extracts scale from calibration
+- [x] Implemented `getActiveScale(state)` - determines active scale source (manual > GPS priority)
+- [x] Implemented `measureDistance(p1, p2, metersPerPixel)` - calculates distance between pixel points
+- [x] Implemented `formatDistance(meters, unit)` - formats for display (m, cm, mm, ft, ft-in)
+- [x] Implemented `compareScales(scale1, scale2, threshold)` - detects scale disagreement
+- [x] Exported constants: `METERS_PER_DEGREE_EQUATOR`, `METERS_TO_FEET`
+
+#### `src/scale/scale.test.js`
+- [x] 52 comprehensive unit tests covering all functions
+- [x] 100% statement and branch coverage
+- [x] Edge cases: invalid inputs, null/undefined, coincident points, boundary conditions
 
 #### `src/index.js`
-- [ ] Add `referenceDistance` to application state
-- [ ] Implement "Set Scale" mode (`startReferenceMode()`)
-  - Two-tap workflow to define reference line
-  - Input dialog for distance in meters
-  - Visual feedback with dashed line and label
-- [ ] Implement "Measure" mode (`startMeasureMode()`)
-  - Two-tap workflow to draw measurement line
-  - Real-time distance calculation using `metersPerPixel`
-  - Draggable endpoints for refinement
-- [ ] Add UI buttons to toolbar
-- [ ] Persistence of `referenceDistance` to IndexedDB
+- [x] Added `referenceDistance: null` to state object (structure: `{ p1, p2, meters, metersPerPixel }`)
+- [x] Added `preferredUnit: 'm'` to state object for user's display preference
+
+**Test Results:** 99 tests pass, 98.6% overall coverage (scale module: 100%)
+
+---
+
+### ✅ Phase 1.6: State Machine Extraction (Completed)
+
+**Date:** 2025-12-21
+
+This phase extracts testable state machine logic from the UI layer into pure functions.
+
+#### `src/scale/scale-mode.js` (New Module)
+- [x] Created `scale-mode.js` with pure state machine functions
+- [x] Extracted shared `handleTwoPointModeClick()` helper (eliminates duplication)
 
+**Scale Mode Functions:**
+- [x] `createScaleModeState()` - Creates initial state
+- [x] `startScaleModeState(currentState)` - Activates scale mode
+- [x] `handleScaleModePoint(currentState, point)` - Processes point clicks
+- [x] `validateDistanceInput(input, unit)` - Validates user's distance input
+- [x] `computeReferenceDistanceFromInput(scaleModeState, meters)` - Computes reference distance
+- [x] `cancelScaleModeState()` - Resets state
 
+**Measure Mode Functions:**
+- [x] `createMeasureModeState()` - Creates initial state
+- [x] `canStartMeasureMode(appState)` - Checks if scale is available
+- [x] `startMeasureModeState(currentState)` - Activates measure mode
+- [x] `handleMeasureModePoint(currentState, point)` - Processes point clicks
+- [x] `updateMeasureModePoint(currentState, pointId, newPoint)` - Handles drag updates
+- [x] `computeMeasurement(measureState, appState)` - Computes distance
+- [x] `cancelMeasureModeState()` - Resets state
 
+**UI State Derivation:**
+- [x] `shouldEnableMeasureButton(appState, measureModeState)` - Button enablement logic
+- [x] `shouldEnableSetScaleButton(scaleModeState)` - Button enablement logic
+
+#### `src/scale/scale-mode.test.js`
+- [x] 48 comprehensive unit tests
+- [x] 100% statement and branch coverage
+- [x] Tests state transitions, validation, error handling, UI derivation
+
+**Test Results:** 147 tests pass, scale modules at 100% coverage, zero code duplication
+
+---
+
+### ✅ Phase 2: UI Layer (Complete)
+
+**Date:** 2025-12-21
+
+This phase implements the user-facing features and refactors `index.js` to use the testable state machine.
+
+#### `src/index.js` (UI Integration)
+- [x] Updated imports to use `scale-mode.js` functions
+- [x] Refactored `startScaleMode()` to use `startScaleModeState()`
+- [x] Refactored `cancelScaleMode()` to use `cancelScaleModeState()`
+- [x] Refactored `handleScaleModeClick()` to use `handleScaleModePoint()` with action dispatch
+- [x] Refactored `promptForReferenceDistance()` to use `validateDistanceInput()` and `computeReferenceDistanceFromInput()`
+- [x] Refactored `startMeasureMode()` to use `canStartMeasureMode()` and `startMeasureModeState()`
+- [x] Refactored `cancelMeasureMode()` to use `cancelMeasureModeState()`
+- [x] Refactored `handleMeasureModeClick()` to use `handleMeasureModePoint()` with action dispatch
+- [x] Refactored `updateMeasureLabel()` to use `computeMeasurement()`
+- [x] Refactored `updateMeasureButtonState()` to use `shouldEnableMeasureButton()`
+- [x] Drag handlers use `updateMeasureModePoint()` for state updates
+
+#### Architecture Pattern
+The refactored code follows an **action-based dispatch pattern**:
+1. User interaction (click/drag) → extract pixel coordinates
+2. Call pure state machine function → returns `{ state, action }`
+3. Update logical state with `Object.assign(state.mode, newState)`
+4. Dispatch UI side effects based on `action` string ('show-p2-toast', 'prompt-distance', 'measurement-complete')
+
+This separates:
+- **Testable logic** (in `scale-mode.js`) - state transitions, validation, computations
+- **UI effects** (in `index.js`) - Leaflet markers, toasts, DOM updates
+
+**Test Results:** 147 tests pass, 100% coverage on scale modules, zero code duplication, all quality checks pass
+
+---
+
+### 🔲 Phase 3: Remaining Work
+
+#### Not Yet Implemented
+- [ ] Persistence of `referenceDistance` to IndexedDB
+- [ ] Scale disagreement warning (when GPS and manual scales differ by >10%)
+- [ ] Unit selection UI (m/ft/ft-in preference)
diff --git a/index.html b/index.html
index 8636148..e97f531 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,31 @@
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha384-sHL9NAb7lN7rfvG5lfHpm643Xkcjzp4jFvuavGOndn6pjVqS6ny56CAt3nsEVT4H" crossorigin="anonymous">
   <link rel="stylesheet" href="https://unpkg.com/leaflet.locatecontrol/dist/L.Control.Locate.min.css" crossorigin="anonymous">
   <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    /* Custom marker and label styles for scale/measure features */
+    .scale-marker-dot {
+      width: 14px;
+      height: 14px;
+      border: 2px solid white;
+      border-radius: 50%;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+    .distance-label {
+      color: white;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      white-space: nowrap;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      transform: translate(-50%, -100%);
+      margin-top: -4px;
+    }
+    .distance-label--measure {
+      padding: 3px 10px;
+      font-size: 13px;
+    }
+  </style>
 </head>
 <body class="bg-slate-950 text-slate-100 min-h-screen">
   <div class="min-h-screen flex flex-col lg:items-stretch">
@@ -42,6 +67,9 @@ <h1 class="text-4xl font-black tracking-tight">Snap2Map</h1>
                 <button id="usePositionButton" class="px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-semibold hover:bg-emerald-500 transition">Use my position</button>
                 <button id="confirmPairButton" class="px-4 py-2 rounded-lg bg-violet-600 text-white text-sm font-semibold opacity-80 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-violet-500 transition" disabled>Confirm pair</button>
                 <button id="cancelPairButton" class="px-4 py-2 rounded-lg bg-slate-700 text-white text-sm font-semibold opacity-80 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-600 transition" disabled>Cancel</button>
+                <span class="hidden sm:inline-block w-px h-6 bg-slate-600 self-center"></span>
+                <button id="setScaleButton" class="px-4 py-2 rounded-lg bg-teal-600 text-white text-sm font-semibold hover:bg-teal-500 transition" title="Set a known distance on the photo to define the scale">📏 Set Scale</button>
+                <button id="measureButton" class="px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-semibold hover:bg-purple-500 disabled:opacity-40 disabled:cursor-not-allowed transition" disabled title="Measure distances on the photo">📐 Measure</button>
               </div>
             </div>
           </div>
@@ -113,6 +141,48 @@ <h2 class="text-lg font-semibold text-slate-100">Reference pairs</h2>
 
   <div id="toastContainer" class="fixed bottom-6 left-1/2 -translate-x-1/2 md:left-auto md:right-8 md:translate-x-0 z-50 space-y-2 w-[calc(100%-2rem)] max-w-sm pointer-events-none"></div>
 
+  <!-- Distance Input Modal -->
+  <div id="distanceModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/80 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="distanceModalTitle">
+    <div class="w-full max-w-sm mx-4 bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden">
+      <div class="px-6 py-5 border-b border-slate-800">
+        <h2 id="distanceModalTitle" class="text-lg font-semibold text-slate-100">Enter Reference Distance</h2>
+        <p class="text-sm text-slate-400 mt-1">Specify the real-world distance between the two points.</p>
+      </div>
+      <div class="px-6 py-5 space-y-4">
+        <div class="flex gap-3">
+          <div class="flex-1">
+            <label for="distanceInput" class="block text-sm font-medium text-slate-300 mb-2">Distance</label>
+            <input
+              id="distanceInput"
+              type="number"
+              step="any"
+              min="0"
+              inputmode="decimal"
+              placeholder="e.g. 10"
+              class="w-full px-4 py-2.5 rounded-lg bg-slate-800 border border-slate-600 text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              autocomplete="off"
+            >
+          </div>
+          <div class="w-28">
+            <label for="distanceUnit" class="block text-sm font-medium text-slate-300 mb-2">Unit</label>
+            <select
+              id="distanceUnit"
+              class="w-full px-3 py-2.5 rounded-lg bg-slate-800 border border-slate-600 text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            >
+              <option value="m">Meters</option>
+              <option value="ft">Feet</option>
+            </select>
+          </div>
+        </div>
+        <p id="distanceError" class="text-sm text-rose-400 hidden">Please enter a valid positive number.</p>
+      </div>
+      <div class="px-6 py-4 bg-slate-900/50 border-t border-slate-800 flex justify-end gap-3">
+        <button id="distanceCancelBtn" type="button" class="px-4 py-2 rounded-lg bg-slate-700 text-white text-sm font-semibold hover:bg-slate-600 transition">Cancel</button>
+        <button id="distanceConfirmBtn" type="button" class="px-4 py-2 rounded-lg bg-teal-600 text-white text-sm font-semibold hover:bg-teal-500 transition">Confirm</button>
+      </div>
+    </div>
+  </div>
+
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha384-cxOPjt7s7Iz04uaHJceBmS+qpjv2JkIHNVcuOrM+YHwZOmJGBXI00mdUXEq65HTH" crossorigin="anonymous"></script>
   <script src="https://unpkg.com/leaflet.locatecontrol/dist/L.Control.Locate.min.js" crossorigin="anonymous"></script>
   <script type="importmap">
diff --git a/service-worker.js b/service-worker.js
index 58f4c01..3b845fc 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -25,6 +25,44 @@ self.addEventListener('activate', (event) => {
   );
 });
 
+async function fetchAndUpdate(request, cache) {
+  const response = await fetch(request);
+  if (response && response.ok) {
+    cache.put(request, response.clone());
+  }
+  return response;
+}
+
+async function getNavigationFallback(cache) {
+  const fallback = (await cache.match('/index.html')) || (await cache.match('/'));
+  return fallback || null;
+}
+
+async function handleShellOrNavigation(request, cache, cached) {
+  const isNavigation = request.mode === 'navigate';
+  try {
+    const response = await fetchAndUpdate(request, cache);
+    if (response && response.ok) {
+      return response;
+    }
+  } catch {
+    // network request failed, fall back to cache if possible
+  }
+
+  if (cached) {
+    return cached;
+  }
+
+  if (isNavigation) {
+    const fallback = await getNavigationFallback(cache);
+    if (fallback) {
+      return fallback;
+    }
+  }
+
+  return Response.error();
+}
+
 self.addEventListener('fetch', (event) => {
   if (event.request.method !== 'GET') {
     return;
@@ -32,66 +70,30 @@ self.addEventListener('fetch', (event) => {
 
   const url = new URL(event.request.url);
   const isSameOrigin = url.origin === self.location.origin;
-  const isNavigation = event.request.mode === 'navigate';
-  const isShellResource = isSameOrigin && SHELL_ASSETS.includes(url.pathname);
-
   if (!isSameOrigin) {
     return;
   }
 
+  const isNavigation = event.request.mode === 'navigate';
+  const isShellResource = SHELL_ASSETS.includes(url.pathname);
+
   event.respondWith(
     caches.open(CACHE_NAME).then(async (cache) => {
       const cached = await cache.match(event.request);
 
-      const fetchAndUpdate = async () => {
-        const response = await fetch(event.request);
-        if (response && response.ok) {
-          cache.put(event.request, response.clone());
-        }
-        return response;
-      };
-
-      const getNavigationFallback = async () => {
-        const fallback = (await cache.match('/index.html')) || (await cache.match('/'));
-        return fallback || null;
-      };
-
       if (isNavigation || isShellResource) {
-        try {
-          const response = await fetchAndUpdate();
-          if (response) {
-            return response;
-          }
-        } catch {
-          // network request failed, fall back to cache if possible
-        }
-
-        if (cached) {
-          return cached;
-        }
-
-        if (isNavigation) {
-          const fallback = await getNavigationFallback();
-          if (fallback) {
-            return fallback;
-          }
-        }
-
-        return Response.error();
+        return handleShellOrNavigation(event.request, cache, cached);
       }
 
       if (cached) {
-        fetchAndUpdate().catch(() => null);
+        fetchAndUpdate(event.request, cache).catch(() => null);
         return cached;
       }
 
       try {
-        return await fetchAndUpdate();
+        return await fetchAndUpdate(event.request, cache);
       } catch {
-        if (cached) {
-          return cached;
-        }
-        return Response.error();
+        return cached || Response.error();
       }
     }),
   );
diff --git a/src/index.js b/src/index.js
index cac7882..8afda8a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,10 +6,39 @@ import {
   projectLocationToPixel,
   accuracyRingRadiusPixels,
 } from 'snap2map/calibrator';
+import {
+  formatDistance,
+} from './scale/scale.js';
+import {
+  createScaleModeState,
+  startScaleModeState,
+  handleScaleModePoint,
+  validateDistanceInput,
+  computeReferenceDistanceFromInput,
+  cancelScaleModeState,
+  canStartMeasureMode,
+  createMeasureModeState,
+  startMeasureModeState,
+  handleMeasureModePoint,
+  updateMeasureModePoint,
+  computeMeasurement,
+  cancelMeasureModeState,
+  shouldEnableMeasureButton,
+  shouldEnableSetScaleButton,
+} from './scale/scale-mode.js';
 
 const GUIDED_PAIR_TARGET = 2;
 const MAX_PHOTO_DIMENSION = 2048*2; // pixels
 
+const COLORS = {
+  PRIMARY: '#2563eb',    // blue-600
+  INLIER: '#16a34a',     // green-600
+  OUTLIER: '#dc2626',    // red-600
+  SCALE: '#3b82f6',      // blue-500
+  REFERENCE: '#10b981',  // emerald-500
+  MEASURE: '#8b5cf6',    // violet-500
+};
+
 const state = {
   imageDataUrl: null,
   imageSize: null,
@@ -41,6 +70,37 @@ const state = {
     pairsCompleted: 0,
     pendingToast: false,
   },
+  // Reference distance for manual scale definition (Phase 2 feature)
+  // Structure: { p1: {x, y}, p2: {x, y}, meters: number, metersPerPixel: number }
+  referenceDistance: null,
+  // User's preferred display unit for distances: 'm' | 'ft' | 'ft-in'
+  preferredUnit: 'm',
+  // Scale mode: setting the reference distance line
+  scaleMode: {
+    logic: createScaleModeState(),
+    ui: {
+      marker1: null,
+      marker2: null,
+      line: null,
+    },
+  },
+  // Reference distance visualization (persists after scaleMode is done)
+  referenceMarkers: {
+    marker1: null,
+    marker2: null,
+    line: null,
+    label: null,
+  },
+  // Measure mode: measuring arbitrary distances
+  measureMode: {
+    logic: createMeasureModeState(),
+    ui: {
+      marker1: null,
+      marker2: null,
+      line: null,
+      label: null,
+    },
+  },
 };
 
 const dom = {};
@@ -214,7 +274,7 @@ function refreshPairMarkers() {
   state.pairs.forEach((pair, index) => {
     const residual = state.calibration && state.calibration.residuals ? state.calibration.residuals[index] : null;
     const inlier = state.calibration && state.calibration.inliers ? state.calibration.inliers[index] : false;
-    const color = !state.calibration ? '#2563eb' : inlier ? '#16a34a' : '#dc2626';
+    const color = !state.calibration ? COLORS.PRIMARY : inlier ? COLORS.INLIER : COLORS.OUTLIER;
     const label = residual !== null && residual !== undefined ? `${residual.toFixed(1)} m` : '—';
 
     const photoMarker = L.circleMarker([pair.pixel.y, pair.pixel.x], {
@@ -278,8 +338,49 @@ function updateGpsStatus(message, isError) {
   dom.gpsStatus.className = isError ? 'text-sm text-rose-400' : 'text-sm text-slate-200';
 }
 
+function ensureUserMarker(latlng) {
+  if (!state.userMarker) {
+    state.userMarker = L.circleMarker(latlng, {
+      radius: 6,
+      color: COLORS.PRIMARY,
+      fillColor: COLORS.PRIMARY,
+      fillOpacity: 0.9,
+    }).addTo(state.photoMap);
+  } else {
+    state.userMarker.setLatLng(latlng);
+  }
+}
+
+function updateAccuracyCircle(latlng, ring) {
+  if (!ring || !ring.pixelRadius) {
+    return;
+  }
+  if (!state.accuracyCircle) {
+    state.accuracyCircle = L.circle(latlng, {
+      radius: ring.pixelRadius,
+      color: ring.color,
+      weight: 1,
+      fillColor: ring.color,
+      fillOpacity: 0.15,
+    }).addTo(state.photoMap);
+  } else {
+    state.accuracyCircle.setLatLng(latlng);
+    state.accuracyCircle.setRadius(ring.pixelRadius);
+    state.accuracyCircle.setStyle({ color: ring.color, fillColor: ring.color });
+  }
+}
+
+function isCalibrationReady() {
+  return !!(
+    state.photoMap &&
+    state.calibration &&
+    state.calibration.status === 'ok' &&
+    state.lastPosition
+  );
+}
+
 function updateLivePosition() {
-  if (!state.photoMap || !state.calibration || state.calibration.status !== 'ok' || !state.lastPosition) {
+  if (!isCalibrationReady()) {
     return;
   }
 
@@ -291,38 +392,6 @@ function updateLivePosition() {
   }
   const latlng = L.latLng(pixel.y, pixel.x);
 
-  function ensureUserMarker(latlngLocal) {
-    if (!state.userMarker) {
-      state.userMarker = L.circleMarker(latlngLocal, {
-        radius: 6,
-        color: '#2563eb',
-        fillColor: '#2563eb',
-        fillOpacity: 0.9,
-      }).addTo(state.photoMap);
-    } else {
-      state.userMarker.setLatLng(latlngLocal);
-    }
-  }
-
-  function updateAccuracyCircle(latlngLocal, ring) {
-    if (!ring || !ring.pixelRadius) {
-      return;
-    }
-    if (!state.accuracyCircle) {
-      state.accuracyCircle = L.circle(latlngLocal, {
-        radius: ring.pixelRadius,
-        color: ring.color,
-        weight: 1,
-        fillColor: ring.color,
-        fillOpacity: 0.15,
-      }).addTo(state.photoMap);
-    } else {
-      state.accuracyCircle.setLatLng(latlngLocal);
-      state.accuracyCircle.setRadius(ring.pixelRadius);
-      state.accuracyCircle.setStyle({ color: ring.color, fillColor: ring.color });
-    }
-  }
-
   ensureUserMarker(latlng);
 
   if (state.photoPendingCenter && state.photoMap) {
@@ -507,6 +576,21 @@ function advanceGuidedFlow() {
   promptNextGuidedPair();
 }
 
+function showPairSavedToast(savedIndex) {
+  if (isGuidedActive()) {
+    showGuidedPairSavedToast(savedIndex);
+    return;
+  }
+
+  const residual =
+    state.calibration && Array.isArray(state.calibration.residuals)
+      ? state.calibration.residuals[savedIndex]
+      : null;
+  const residualText = residual !== null && residual !== undefined ? `${residual.toFixed(1)} m` : '—';
+  const tone = residual !== null && residual <= 30 ? 'success' : 'info';
+  showToast(`Pair ${savedIndex + 1} saved — residual ${residualText}.`, { tone });
+}
+
 function confirmPair() {
   if (!state.activePair || !state.activePair.pixel || !state.activePair.wgs84) {
     return;
@@ -521,16 +605,7 @@ function confirmPair() {
   recalculateCalibration();
 
   const savedIndex = state.pairs.length - 1;
-  if (!isGuidedActive()) {
-    const residual =
-      state.calibration && Array.isArray(state.calibration.residuals)
-        ? state.calibration.residuals[savedIndex]
-        : null;
-    const residualText = residual !== null && residual !== undefined ? `${residual.toFixed(1)} m` : '—';
-    const tone = residual !== null && residual <= 30 ? 'success' : 'info';
-    showToast(`Pair ${savedIndex + 1} saved — residual ${residualText}.`, { tone });
-  }
-  showGuidedPairSavedToast(savedIndex);
+  showPairSavedToast(savedIndex);
   advanceGuidedFlow();
 }
 
@@ -547,6 +622,17 @@ function onPairTableClick(event) {
 }
 
 function handlePhotoClick(event) {
+  // Route to scale mode handler first
+  if (handleScaleModeClick(event)) {
+    return;
+  }
+  
+  // Route to measure mode handler
+  if (handleMeasureModeClick(event)) {
+    return;
+  }
+  
+  // Default: pair mode
   if (!state.activePair) {
     return;
   }
@@ -617,12 +703,423 @@ function useCurrentPositionForPair() {
   );
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Scale Mode: Set reference distance for manual scale definition
+// ─────────────────────────────────────────────────────────────────────────────
+
+function createScaleMarkerIcon(color = COLORS.SCALE) {
+  return L.divIcon({
+    className: 'scale-marker',
+    html: `<div class="scale-marker-dot" style="background:${color};"></div>`,
+    iconSize: [14, 14],
+    iconAnchor: [7, 7],
+  });
+}
+
+function clearScaleModeMarkers() {
+  if (state.scaleMode.ui.marker1) {
+    state.scaleMode.ui.marker1.remove();
+    state.scaleMode.ui.marker1 = null;
+  }
+  if (state.scaleMode.ui.marker2) {
+    state.scaleMode.ui.marker2.remove();
+    state.scaleMode.ui.marker2 = null;
+  }
+  if (state.scaleMode.ui.line) {
+    state.scaleMode.ui.line.remove();
+    state.scaleMode.ui.line = null;
+  }
+}
+
+function clearReferenceVisualization() {
+  if (state.referenceMarkers.marker1) {
+    state.referenceMarkers.marker1.remove();
+    state.referenceMarkers.marker1 = null;
+  }
+  if (state.referenceMarkers.marker2) {
+    state.referenceMarkers.marker2.remove();
+    state.referenceMarkers.marker2 = null;
+  }
+  if (state.referenceMarkers.line) {
+    state.referenceMarkers.line.remove();
+    state.referenceMarkers.line = null;
+  }
+  if (state.referenceMarkers.label) {
+    state.referenceMarkers.label.remove();
+    state.referenceMarkers.label = null;
+  }
+}
+
+function drawReferenceVisualization() {
+  if (!state.referenceDistance || !state.photoMap) {
+    return;
+  }
+  clearReferenceVisualization();
+  
+  const { p1, p2, meters } = state.referenceDistance;
+  const latlng1 = L.latLng(p1.y, p1.x);
+  const latlng2 = L.latLng(p2.y, p2.x);
+  
+  state.referenceMarkers.marker1 = L.marker(latlng1, {
+    icon: createScaleMarkerIcon(COLORS.REFERENCE),
+    draggable: false,
+  }).addTo(state.photoMap);
+  
+  state.referenceMarkers.marker2 = L.marker(latlng2, {
+    icon: createScaleMarkerIcon(COLORS.REFERENCE),
+    draggable: false,
+  }).addTo(state.photoMap);
+  
+  state.referenceMarkers.line = L.polyline([latlng1, latlng2], {
+    color: COLORS.REFERENCE,
+    weight: 3,
+    dashArray: '8, 8',
+    opacity: 0.9,
+  }).addTo(state.photoMap);
+  
+  const midLat = (p1.y + p2.y) / 2;
+  const midLng = (p1.x + p2.x) / 2;
+  state.referenceMarkers.label = L.marker(L.latLng(midLat, midLng), {
+    icon: L.divIcon({
+      className: 'reference-label',
+      html: `<div class="distance-label" style="background:${COLORS.REFERENCE};">📏 ${formatDistance(meters, state.preferredUnit)}</div>`,
+      iconAnchor: [0, 0],
+    }),
+  }).addTo(state.photoMap);
+}
+
+function updateScaleModeLine() {
+  const { p1, p2 } = state.scaleMode.logic;
+  if (!p1 || !p2) {
+    return;
+  }
+  const latlng1 = L.latLng(p1.y, p1.x);
+  const latlng2 = L.latLng(p2.y, p2.x);
+  
+  if (state.scaleMode.ui.line) {
+    state.scaleMode.ui.line.setLatLngs([latlng1, latlng2]);
+  } else {
+    state.scaleMode.ui.line = L.polyline([latlng1, latlng2], {
+      color: COLORS.SCALE,
+      weight: 3,
+      dashArray: '6, 6',
+      opacity: 0.9,
+    }).addTo(state.photoMap);
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Distance Input Modal: Custom dialog for entering reference distances
+// ─────────────────────────────────────────────────────────────────────────────
+
+function showDistanceModal() {
+  if (!dom.distanceModal) {
+    return;
+  }
+  
+  // Reset modal state
+  dom.distanceInput.value = '';
+  dom.distanceUnit.value = state.preferredUnit;
+  dom.distanceError.classList.add('hidden');
+  
+  // Show modal with flex display for centering
+  dom.distanceModal.classList.remove('hidden');
+  dom.distanceModal.classList.add('flex');
+  
+  // Focus input after a short delay for transition
+  requestAnimationFrame(() => {
+    dom.distanceInput.focus();
+  });
+}
+
+function hideDistanceModal() {
+  if (!dom.distanceModal) {
+    return;
+  }
+  dom.distanceModal.classList.add('hidden');
+  dom.distanceModal.classList.remove('flex');
+}
+
+function handleDistanceModalCancel() {
+  hideDistanceModal();
+  cancelScaleMode();
+}
+
+function handleDistanceModalConfirm() {
+  const inputValue = dom.distanceInput.value;
+  const unit = dom.distanceUnit.value;
+  
+  // Update preferred unit for future use
+  state.preferredUnit = unit;
+  
+  const validation = validateDistanceInput(inputValue, unit);
+  
+  if (!validation.valid) {
+    dom.distanceError.classList.remove('hidden');
+    dom.distanceInput.focus();
+    return;
+  }
+  
+  const { meters } = validation;
+  
+  hideDistanceModal();
+  
+  const result = computeReferenceDistanceFromInput(state.scaleMode.logic, meters);
+  
+  if (!result.success) {
+    showToast('Could not compute scale. Points may be too close.', { tone: 'warning' });
+    cancelScaleMode();
+    return;
+  }
+  
+  state.referenceDistance = result.referenceDistance;
+  clearScaleModeMarkers();
+  state.scaleMode.logic = cancelScaleModeState();
+  
+  drawReferenceVisualization();
+  updateMeasureButtonState();
+  showToast(`Scale set: ${formatDistance(result.referenceDistance.meters, state.preferredUnit)} = ${result.referenceDistance.metersPerPixel.toFixed(4)} m/px`, { tone: 'success' });
+}
+
+function promptForReferenceDistance() {
+  showDistanceModal();
+}
+
+function startScaleMode() {
+  if (state.activePair) {
+    cancelPairMode();
+  }
+  if (state.measureMode.logic.active) {
+    cancelMeasureMode();
+  }
+  
+  state.scaleMode.logic = startScaleModeState(state.scaleMode.logic);
+  clearScaleModeMarkers();
+  
+  if (dom.setScaleButton) {
+    dom.setScaleButton.disabled = !shouldEnableSetScaleButton(state.scaleMode.logic);
+  }
+  
+  setActiveView('photo');
+  showToast('Tap the start point of a known distance.');
+}
+
+function cancelScaleMode() {
+  clearScaleModeMarkers();
+  state.scaleMode.logic = cancelScaleModeState();
+  
+  if (dom.setScaleButton) {
+    dom.setScaleButton.disabled = !shouldEnableSetScaleButton(state.scaleMode.logic);
+  }
+}
+
+function handleScaleModeClick(event) {
+  const pixel = { x: event.latlng.lng, y: event.latlng.lat };
+  const { state: newState, action } = handleScaleModePoint(state.scaleMode.logic, pixel);
+  
+  if (!action) {
+    return false;
+  }
+  
+  // Update logical state
+  state.scaleMode.logic = newState;
+  
+  // Handle UI side effects based on action
+  if (action === 'show-p2-toast') {
+    state.scaleMode.ui.marker1 = L.marker(event.latlng, {
+      icon: createScaleMarkerIcon(COLORS.SCALE),
+      draggable: false,
+    }).addTo(state.photoMap);
+    showToast('Now tap the end point.');
+    return true;
+  }
+  
+  if (action === 'prompt-distance') {
+    state.scaleMode.ui.marker2 = L.marker(event.latlng, {
+      icon: createScaleMarkerIcon(COLORS.SCALE),
+      draggable: false,
+    }).addTo(state.photoMap);
+    updateScaleModeLine();
+    promptForReferenceDistance();
+    return true;
+  }
+  
+  return false;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Measure Mode: Measure arbitrary distances using the active scale
+// ─────────────────────────────────────────────────────────────────────────────
+
+function clearMeasureModeMarkers() {
+  if (state.measureMode.ui.marker1) {
+    state.measureMode.ui.marker1.remove();
+    state.measureMode.ui.marker1 = null;
+  }
+  if (state.measureMode.ui.marker2) {
+    state.measureMode.ui.marker2.remove();
+    state.measureMode.ui.marker2 = null;
+  }
+  if (state.measureMode.ui.line) {
+    state.measureMode.ui.line.remove();
+    state.measureMode.ui.line = null;
+  }
+  if (state.measureMode.ui.label) {
+    state.measureMode.ui.label.remove();
+    state.measureMode.ui.label = null;
+  }
+}
+
+function updateMeasureLabel() {
+  const { p1, p2 } = state.measureMode.logic;
+  if (!p1 || !p2) {
+    return;
+  }
+  
+  const result = computeMeasurement(state.measureMode.logic, state);
+  if (!result.success) {
+    return;
+  }
+  
+  const midLat = (p1.y + p2.y) / 2;
+  const midLng = (p1.x + p2.x) / 2;
+  const sourceIcon = result.source === 'manual' ? '📏' : '📡';
+  
+  if (state.measureMode.ui.label) {
+    state.measureMode.ui.label.remove();
+  }
+  
+  state.measureMode.ui.label = L.marker(L.latLng(midLat, midLng), {
+    icon: L.divIcon({
+      className: 'measure-label',
+      html: `<div class="distance-label distance-label--measure" style="background:${COLORS.MEASURE};">${sourceIcon} ${formatDistance(result.meters, state.preferredUnit)}</div>`,
+      iconAnchor: [0, 0],
+    }),
+  }).addTo(state.photoMap);
+}
+
+function updateMeasureModeLine() {
+  const { p1, p2 } = state.measureMode.logic;
+  if (!p1 || !p2) {
+    return;
+  }
+  
+  const latlng1 = L.latLng(p1.y, p1.x);
+  const latlng2 = L.latLng(p2.y, p2.x);
+  
+  if (state.measureMode.ui.line) {
+    state.measureMode.ui.line.setLatLngs([latlng1, latlng2]);
+  } else {
+    state.measureMode.ui.line = L.polyline([latlng1, latlng2], {
+      color: COLORS.MEASURE,
+      weight: 3,
+      opacity: 0.9,
+    }).addTo(state.photoMap);
+  }
+  
+  updateMeasureLabel();
+}
+
+function startMeasureMode() {
+  const check = canStartMeasureMode(state);
+  if (!check.canStart) {
+    showToast('Set a reference scale or add GPS pairs first.', { tone: 'warning' });
+    return;
+  }
+  
+  if (state.activePair) {
+    cancelPairMode();
+  }
+  if (state.scaleMode.logic.active) {
+    cancelScaleMode();
+  }
+  
+  clearMeasureModeMarkers();
+  state.measureMode.logic = startMeasureModeState(state.measureMode.logic);
+  
+  if (dom.measureButton) {
+    dom.measureButton.disabled = !shouldEnableMeasureButton(state, state.measureMode.logic);
+  }
+  
+  setActiveView('photo');
+  const sourceText = check.scale.source === 'manual' ? 'manual scale' : 'GPS calibration';
+  showToast(`Measure mode (${sourceText}). Tap start point.`);
+}
+
+function cancelMeasureMode() {
+  clearMeasureModeMarkers();
+  state.measureMode.logic = cancelMeasureModeState();
+  
+  updateMeasureButtonState();
+}
+
+function handleMeasureModeClick(event) {
+  const pixel = { x: event.latlng.lng, y: event.latlng.lat };
+  const { state: newState, action } = handleMeasureModePoint(state.measureMode.logic, pixel);
+  
+  if (!action) {
+    return false;
+  }
+  
+  // Update logical state
+  state.measureMode.logic = newState;
+
+  const createDragHandler = (marker, pointId) => {
+    marker.on('drag', () => {
+      const latlng = marker.getLatLng();
+      state.measureMode.logic = updateMeasureModePoint(state.measureMode.logic, pointId, { x: latlng.lng, y: latlng.lat });
+      updateMeasureModeLine();
+    });
+  };
+  
+  // Handle UI side effects based on action
+  if (action === 'show-p2-toast') {
+    state.measureMode.ui.marker1 = L.marker(event.latlng, {
+      icon: createScaleMarkerIcon(COLORS.MEASURE),
+      draggable: true,
+    }).addTo(state.photoMap);
+    
+    createDragHandler(state.measureMode.ui.marker1, 'p1');
+    
+    showToast('Tap the end point to measure.');
+    return true;
+  }
+  
+  if (action === 'measurement-complete') {
+    state.measureMode.ui.marker2 = L.marker(event.latlng, {
+      icon: createScaleMarkerIcon(COLORS.MEASURE),
+      draggable: true,
+    }).addTo(state.photoMap);
+    
+    createDragHandler(state.measureMode.ui.marker2, 'p2');
+    
+    updateMeasureModeLine();
+    
+    if (dom.measureButton) {
+      dom.measureButton.disabled = !shouldEnableMeasureButton(state, state.measureMode.logic);
+    }
+    
+    showToast('Drag endpoints to refine. Tap Measure again for a new measurement.', { duration: 5000 });
+    return true;
+  }
+  
+  return false;
+}
+
+function updateMeasureButtonState() {
+  if (!dom.measureButton) {
+    return;
+  }
+  dom.measureButton.disabled = !shouldEnableMeasureButton(state, state.measureMode.logic);
+}
+
 function recalculateCalibration() {
   if (state.pairs.length < 2) {
     state.calibration = null;
     refreshPairMarkers();
     updateStatusText();
     stopGeolocationWatch();
+    updateMeasureButtonState();
     return;
   }
 
@@ -645,6 +1142,7 @@ function recalculateCalibration() {
   refreshPairMarkers();
   updateStatusText();
   updateLivePosition();
+  updateMeasureButtonState();
 }
 
 function loadPhotoMap(dataUrl, width, height) {
@@ -874,6 +1372,26 @@ function requestAndCenterOsmOnUser() {
   );
 }
 
+function handleGeolocationPermission(shouldPrompt, doRequest) {
+  if (!navigator.permissions || !navigator.permissions.query) {
+    if (shouldPrompt) doRequest();
+    return;
+  }
+
+  navigator.permissions
+    .query({ name: 'geolocation' })
+    .then((status) => {
+      if (status.state === 'granted') {
+        requestAndCenterOsmOnUser();
+      } else if (status.state === 'prompt' && shouldPrompt) {
+        doRequest();
+      }
+    })
+    .catch(() => {
+      if (shouldPrompt) doRequest();
+    });
+}
+
 function maybePromptGeolocationForOsm() {
   // If we already have a recent position, prefer that immediately
   if (state.lastPosition && Date.now() - (state.lastGpsUpdate || 0) <= 5_000) {
@@ -896,36 +1414,12 @@ function maybePromptGeolocationForOsm() {
   if (!navigator.geolocation) return;
 
   const shouldPrompt = !state.osmGeoPrompted;
-
-  // Try Permissions API to avoid unnecessary prompt where already denied/granted
   const doRequest = () => {
     if (shouldPrompt) state.osmGeoPrompted = true;
     requestAndCenterOsmOnUser();
   };
 
-  if (navigator.permissions && navigator.permissions.query) {
-    try {
-      navigator.permissions
-        .query({ name: 'geolocation' })
-        .then((status) => {
-          if (status.state === 'granted') {
-            // No prompt needed; just center
-            requestAndCenterOsmOnUser();
-          } else if (status.state === 'prompt') {
-            // Only trigger the browser prompt the first time we open OSM
-            if (shouldPrompt) doRequest();
-          }
-          // if denied → do nothing
-        })
-        .catch(() => {
-          if (shouldPrompt) doRequest();
-        });
-    } catch {
-      if (shouldPrompt) doRequest();
-    }
-  } else {
-    if (shouldPrompt) doRequest();
-  }
+  handleGeolocationPermission(shouldPrompt, doRequest);
 }
 
 function setActiveView(view) {
@@ -981,6 +1475,16 @@ function cacheDom() {
   dom.pairTable = $('pairTable');
   dom.toastContainer = $('toastContainer');
   dom.replacePhotoButton = $('replacePhotoButton');
+  // Scale and measure mode buttons
+  dom.setScaleButton = $('setScaleButton');
+  dom.measureButton = $('measureButton');
+  // Distance input modal
+  dom.distanceModal = $('distanceModal');
+  dom.distanceInput = $('distanceInput');
+  dom.distanceUnit = $('distanceUnit');
+  dom.distanceError = $('distanceError');
+  dom.distanceCancelBtn = $('distanceCancelBtn');
+  dom.distanceConfirmBtn = $('distanceConfirmBtn');
 }
 
 function setupEventHandlers() {
@@ -998,6 +1502,45 @@ function setupEventHandlers() {
   dom.pairTableBody.addEventListener('click', onPairTableClick);
   dom.photoTabButton.addEventListener('click', () => setActiveView('photo'));
   dom.osmTabButton.addEventListener('click', () => setActiveView('osm'));
+  
+  // Scale and measure mode handlers
+  if (dom.setScaleButton) {
+    dom.setScaleButton.addEventListener('click', startScaleMode);
+  }
+  if (dom.measureButton) {
+    dom.measureButton.addEventListener('click', startMeasureMode);
+  }
+  
+  // Distance modal handlers
+  if (dom.distanceCancelBtn) {
+    dom.distanceCancelBtn.addEventListener('click', handleDistanceModalCancel);
+  }
+  if (dom.distanceConfirmBtn) {
+    dom.distanceConfirmBtn.addEventListener('click', handleDistanceModalConfirm);
+  }
+  if (dom.distanceInput) {
+    dom.distanceInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        handleDistanceModalConfirm();
+      }
+    });
+    dom.distanceInput.addEventListener('input', () => {
+      dom.distanceError.classList.add('hidden');
+    });
+  }
+  if (dom.distanceModal) {
+    dom.distanceModal.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        handleDistanceModalCancel();
+      }
+    });
+    // Close on backdrop click
+    dom.distanceModal.addEventListener('click', (e) => {
+      if (e.target === dom.distanceModal) {
+        handleDistanceModalCancel();
+      }
+    });
+  }
 }
 
 function init() {
diff --git a/src/scale/scale-mode.js b/src/scale/scale-mode.js
new file mode 100644
index 0000000..e713096
--- /dev/null
+++ b/src/scale/scale-mode.js
@@ -0,0 +1,274 @@
+/**
+ * Scale and Measure mode state machine logic.
+ * This module contains pure functions for managing the scale/measure mode state,
+ * separating business logic from DOM/Leaflet interactions.
+ */
+
+import { computeReferenceScale, getActiveScale, measureDistance, convertToMeters } from './scale.js';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared Two-Point Mode Handler
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Generic handler for two-point mode click events.
+ * @param {Object} currentState - Current mode state
+ * @param {Object} point - The clicked point {x, y}
+ * @param {string} p2Action - Action to return when p2 is clicked
+ * @param {string} p2NextStep - Next step after p2 click (e.g., 'input' or null)
+ * @returns {{ state: Object, action: string | null }}
+ */
+function handleTwoPointModeClick(currentState, point, p2Action, p2NextStep) {
+  if (!currentState.active) {
+    return { state: currentState, action: null };
+  }
+
+  if (currentState.step === 'p1') {
+    return {
+      state: { ...currentState, p1: point, step: 'p2' },
+      action: 'show-p2-toast',
+    };
+  }
+
+  if (currentState.step === 'p2') {
+    return {
+      state: { ...currentState, p2: point, step: p2NextStep },
+      action: p2Action,
+    };
+  }
+
+  return { state: currentState, action: null };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Scale Mode State Machine
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Creates the initial scale mode state.
+ * @returns {Object} Initial scale mode state
+ */
+export function createScaleModeState() {
+  return {
+    active: false,
+    step: null, // 'p1' | 'p2' | 'input' | null
+    p1: null,
+    p2: null,
+  };
+}
+
+/**
+ * Starts the scale mode, returning the new state.
+ * @param {Object} currentState - Current scale mode state
+ * @returns {Object} New state with mode activated
+ */
+export function startScaleModeState(currentState) {
+  return {
+    ...currentState,
+    active: true,
+    step: 'p1',
+    p1: null,
+    p2: null,
+  };
+}
+
+/**
+ * Handles a point click during scale mode.
+ * @param {Object} currentState - Current scale mode state
+ * @param {Object} point - The clicked point {x, y}
+ * @returns {{ state: Object, action: string | null }} New state and action to perform
+ */
+export function handleScaleModePoint(currentState, point) {
+  return handleTwoPointModeClick(currentState, point, 'prompt-distance', 'input');
+}
+
+/**
+ * Validates and processes the user's distance input.
+ * @param {string | null} input - Raw user input from prompt
+ * @param {string} [unit='m'] - Unit of the input value ('m', 'ft')
+ * @returns {{ valid: boolean, meters?: number, error?: string }}
+ */
+export function validateDistanceInput(input, unit = 'm') {
+  if (input === null) {
+    return { valid: false, error: 'cancelled' };
+  }
+
+  const value = parseFloat(input);
+  const meters = convertToMeters(value, unit);
+  if (meters === null) {
+    return { valid: false, error: 'invalid-number' };
+  }
+
+  return { valid: true, meters };
+}
+
+/**
+ * Computes the reference distance from scale mode state and user input.
+ * @param {Object} scaleModeState - Current scale mode state with p1 and p2
+ * @param {number} meters - Validated distance in meters
+ * @returns {{ success: boolean, referenceDistance?: Object, error?: string }}
+ */
+export function computeReferenceDistanceFromInput(scaleModeState, meters) {
+  const { p1, p2 } = scaleModeState;
+  
+  if (!p1 || !p2) {
+    return { success: false, error: 'missing-points' };
+  }
+
+  const metersPerPixel = computeReferenceScale(p1, p2, meters);
+  
+  if (!metersPerPixel) {
+    return { success: false, error: 'computation-failed' };
+  }
+
+  return {
+    success: true,
+    referenceDistance: { p1, p2, meters, metersPerPixel },
+  };
+}
+
+/**
+ * Resets the scale mode state to inactive.
+ * @returns {Object} Reset state
+ */
+export function cancelScaleModeState() {
+  return createScaleModeState();
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Measure Mode State Machine
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Creates the initial measure mode state.
+ * @returns {Object} Initial measure mode state
+ */
+export function createMeasureModeState() {
+  return {
+    active: false,
+    step: null, // 'p1' | 'p2' | null (null when measurement complete)
+    p1: null,
+    p2: null,
+  };
+}
+
+/**
+ * Checks if measure mode can be started based on available scale sources.
+ * @param {Object} appState - Application state with referenceDistance and/or calibration
+ * @returns {{ canStart: boolean, scale?: Object, reason?: string }}
+ */
+export function canStartMeasureMode(appState) {
+  const scale = getActiveScale(appState);
+  if (!scale) {
+    return { canStart: false, reason: 'no-scale' };
+  }
+  return { canStart: true, scale };
+}
+
+/**
+ * Starts the measure mode, returning the new state.
+ * @param {Object} currentState - Current measure mode state
+ * @returns {Object} New state with mode activated
+ */
+export function startMeasureModeState(currentState) {
+  return {
+    ...currentState,
+    active: true,
+    step: 'p1',
+    p1: null,
+    p2: null,
+  };
+}
+
+/**
+ * Handles a point click during measure mode.
+ * @param {Object} currentState - Current measure mode state
+ * @param {Object} point - The clicked point {x, y}
+ * @returns {{ state: Object, action: string | null }} New state and action to perform
+ */
+export function handleMeasureModePoint(currentState, point) {
+  return handleTwoPointModeClick(currentState, point, 'measurement-complete', null);
+}
+
+/**
+ * Updates a point in measure mode (e.g., during drag).
+ * @param {Object} currentState - Current measure mode state
+ * @param {'p1' | 'p2'} pointId - Which point to update
+ * @param {Object} newPoint - New point coordinates {x, y}
+ * @returns {Object} Updated state
+ */
+export function updateMeasureModePoint(currentState, pointId, newPoint) {
+  if (!currentState.active || currentState.step !== null) {
+    return currentState;
+  }
+  return {
+    ...currentState,
+    [pointId]: newPoint,
+  };
+}
+
+/**
+ * Computes the current measurement distance.
+ * @param {Object} measureState - Measure mode state with p1 and p2
+ * @param {Object} appState - Application state for getting active scale
+ * @returns {{ success: boolean, meters?: number, source?: string, error?: string }}
+ */
+export function computeMeasurement(measureState, appState) {
+  const { p1, p2 } = measureState;
+  
+  if (!p1 || !p2) {
+    return { success: false, error: 'missing-points' };
+  }
+
+  const scale = getActiveScale(appState);
+  if (!scale) {
+    return { success: false, error: 'no-scale' };
+  }
+
+  const meters = measureDistance(p1, p2, scale.metersPerPixel);
+  if (meters === null) {
+    return { success: false, error: 'computation-failed' };
+  }
+
+  return {
+    success: true,
+    meters,
+    source: scale.source,
+  };
+}
+
+/**
+ * Resets the measure mode state to inactive.
+ * @returns {Object} Reset state
+ */
+export function cancelMeasureModeState() {
+  return createMeasureModeState();
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// UI State Derivation
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Determines whether the measure button should be enabled.
+ * @param {Object} appState - Application state
+ * @param {Object} measureModeState - Measure mode state
+ * @returns {boolean} True if measure button should be enabled
+ */
+export function shouldEnableMeasureButton(appState, measureModeState) {
+  if (measureModeState.active) {
+    // Re-enable when measurement is complete (step is null)
+    return measureModeState.step === null;
+  }
+  // Enable if a scale is available
+  return getActiveScale(appState) !== null;
+}
+
+/**
+ * Determines whether the set scale button should be enabled.
+ * @param {Object} scaleModeState - Scale mode state
+ * @returns {boolean} True if set scale button should be enabled
+ */
+export function shouldEnableSetScaleButton(scaleModeState) {
+  return !scaleModeState.active;
+}
diff --git a/src/scale/scale-mode.test.js b/src/scale/scale-mode.test.js
new file mode 100644
index 0000000..571c428
--- /dev/null
+++ b/src/scale/scale-mode.test.js
@@ -0,0 +1,472 @@
+import {
+  createScaleModeState,
+  startScaleModeState,
+  handleScaleModePoint,
+  validateDistanceInput,
+  computeReferenceDistanceFromInput,
+  cancelScaleModeState,
+  createMeasureModeState,
+  canStartMeasureMode,
+  startMeasureModeState,
+  handleMeasureModePoint,
+  updateMeasureModePoint,
+  computeMeasurement,
+  cancelMeasureModeState,
+  shouldEnableMeasureButton,
+  shouldEnableSetScaleButton,
+} from './scale-mode.js';
+
+describe('scale-mode state machine', () => {
+  // ─────────────────────────────────────────────────────────────────────────
+  // Scale Mode Tests
+  // ─────────────────────────────────────────────────────────────────────────
+
+  describe('createScaleModeState', () => {
+    test('creates inactive state with null values', () => {
+      const state = createScaleModeState();
+      expect(state).toEqual({
+        active: false,
+        step: null,
+        p1: null,
+        p2: null,
+      });
+    });
+  });
+
+  describe('startScaleModeState', () => {
+    test('activates mode and sets step to p1', () => {
+      const initial = createScaleModeState();
+      const started = startScaleModeState(initial);
+      expect(started).toEqual({
+        active: true,
+        step: 'p1',
+        p1: null,
+        p2: null,
+      });
+    });
+
+    test('preserves other properties and resets points', () => {
+      const withPoints = { active: false, step: null, p1: { x: 10, y: 20 }, p2: { x: 30, y: 40 } };
+      const started = startScaleModeState(withPoints);
+      expect(started.p1).toBeNull();
+      expect(started.p2).toBeNull();
+    });
+  });
+
+  describe('handleScaleModePoint', () => {
+    test('returns unchanged state when not active', () => {
+      const inactive = createScaleModeState();
+      const { state, action } = handleScaleModePoint(inactive, { x: 100, y: 200 });
+      expect(state).toEqual(inactive);
+      expect(action).toBeNull();
+    });
+
+    test('handles p1 click - stores point and advances to p2', () => {
+      const atP1 = startScaleModeState(createScaleModeState());
+      const point = { x: 100, y: 200 };
+      const { state, action } = handleScaleModePoint(atP1, point);
+      
+      expect(state.p1).toEqual(point);
+      expect(state.step).toBe('p2');
+      expect(state.active).toBe(true);
+      expect(action).toBe('show-p2-toast');
+    });
+
+    test('handles p2 click - stores point and advances to input', () => {
+      const atP2 = {
+        active: true,
+        step: 'p2',
+        p1: { x: 100, y: 200 },
+        p2: null,
+      };
+      const point = { x: 300, y: 400 };
+      const { state, action } = handleScaleModePoint(atP2, point);
+      
+      expect(state.p2).toEqual(point);
+      expect(state.step).toBe('input');
+      expect(action).toBe('prompt-distance');
+    });
+
+    test('ignores click during input step', () => {
+      const atInput = {
+        active: true,
+        step: 'input',
+        p1: { x: 100, y: 200 },
+        p2: { x: 300, y: 400 },
+      };
+      const { state, action } = handleScaleModePoint(atInput, { x: 500, y: 600 });
+      expect(state).toEqual(atInput);
+      expect(action).toBeNull();
+    });
+  });
+
+  describe('validateDistanceInput', () => {
+    test('returns cancelled for null input', () => {
+      expect(validateDistanceInput(null)).toEqual({ valid: false, error: 'cancelled' });
+    });
+
+    test('returns invalid for empty string', () => {
+      expect(validateDistanceInput('')).toEqual({ valid: false, error: 'invalid-number' });
+    });
+
+    test('returns invalid for non-numeric string', () => {
+      expect(validateDistanceInput('abc')).toEqual({ valid: false, error: 'invalid-number' });
+    });
+
+    test('returns invalid for zero', () => {
+      expect(validateDistanceInput('0')).toEqual({ valid: false, error: 'invalid-number' });
+    });
+
+    test('returns invalid for negative number', () => {
+      expect(validateDistanceInput('-5')).toEqual({ valid: false, error: 'invalid-number' });
+    });
+
+    test('returns valid for positive number', () => {
+      expect(validateDistanceInput('10.5')).toEqual({ valid: true, meters: 10.5 });
+    });
+
+    test('returns valid for integer string', () => {
+      expect(validateDistanceInput('7')).toEqual({ valid: true, meters: 7 });
+    });
+
+    test('handles whitespace around number', () => {
+      expect(validateDistanceInput('  5.25  ')).toEqual({ valid: true, meters: 5.25 });
+    });
+
+    test('handles feet conversion', () => {
+      const result = validateDistanceInput('10', 'ft');
+      expect(result.valid).toBe(true);
+      expect(result.meters).toBeCloseTo(10 / 3.28084);
+    });
+  });
+
+  describe('computeReferenceDistanceFromInput', () => {
+    test('returns error for missing p1', () => {
+      const state = { p1: null, p2: { x: 100, y: 0 } };
+      expect(computeReferenceDistanceFromInput(state, 10)).toEqual({
+        success: false,
+        error: 'missing-points',
+      });
+    });
+
+    test('returns error for missing p2', () => {
+      const state = { p1: { x: 0, y: 0 }, p2: null };
+      expect(computeReferenceDistanceFromInput(state, 10)).toEqual({
+        success: false,
+        error: 'missing-points',
+      });
+    });
+
+    test('returns error for coincident points', () => {
+      const state = { p1: { x: 50, y: 50 }, p2: { x: 50, y: 50 } };
+      expect(computeReferenceDistanceFromInput(state, 10)).toEqual({
+        success: false,
+        error: 'computation-failed',
+      });
+    });
+
+    test('computes correct reference distance', () => {
+      const state = { p1: { x: 0, y: 0 }, p2: { x: 100, y: 0 } };
+      const result = computeReferenceDistanceFromInput(state, 10);
+      
+      expect(result.success).toBe(true);
+      expect(result.referenceDistance).toEqual({
+        p1: { x: 0, y: 0 },
+        p2: { x: 100, y: 0 },
+        meters: 10,
+        metersPerPixel: 0.1,
+      });
+    });
+
+    test('computes diagonal distance correctly', () => {
+      const state = { p1: { x: 0, y: 0 }, p2: { x: 30, y: 40 } }; // 50px distance
+      const result = computeReferenceDistanceFromInput(state, 5);
+      
+      expect(result.success).toBe(true);
+      expect(result.referenceDistance.metersPerPixel).toBe(0.1);
+    });
+  });
+
+  describe('cancelScaleModeState', () => {
+    test('returns inactive state', () => {
+      const cancelled = cancelScaleModeState();
+      expect(cancelled).toEqual(createScaleModeState());
+    });
+  });
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Measure Mode Tests
+  // ─────────────────────────────────────────────────────────────────────────
+
+  describe('createMeasureModeState', () => {
+    test('creates inactive state with null values', () => {
+      const state = createMeasureModeState();
+      expect(state).toEqual({
+        active: false,
+        step: null,
+        p1: null,
+        p2: null,
+      });
+    });
+  });
+
+  describe('canStartMeasureMode', () => {
+    test('returns false when no scale available', () => {
+      const appState = { referenceDistance: null, calibration: null };
+      const result = canStartMeasureMode(appState);
+      expect(result).toEqual({ canStart: false, reason: 'no-scale' });
+    });
+
+    test('returns true with manual reference', () => {
+      const appState = { 
+        referenceDistance: { metersPerPixel: 0.1 }, 
+        calibration: null 
+      };
+      const result = canStartMeasureMode(appState);
+      expect(result.canStart).toBe(true);
+      expect(result.scale).toEqual({ metersPerPixel: 0.1, source: 'manual' });
+    });
+
+    test('returns true with GPS calibration', () => {
+      const appState = { 
+        referenceDistance: null, 
+        calibration: { status: 'ok', model: { type: 'similarity', scale: 0.05 } }
+      };
+      const result = canStartMeasureMode(appState);
+      expect(result.canStart).toBe(true);
+      expect(result.scale).toEqual({ metersPerPixel: 0.05, source: 'gps' });
+    });
+  });
+
+  describe('startMeasureModeState', () => {
+    test('activates mode and sets step to p1', () => {
+      const initial = createMeasureModeState();
+      const started = startMeasureModeState(initial);
+      expect(started).toEqual({
+        active: true,
+        step: 'p1',
+        p1: null,
+        p2: null,
+      });
+    });
+  });
+
+  describe('handleMeasureModePoint', () => {
+    test('returns unchanged state when not active', () => {
+      const inactive = createMeasureModeState();
+      const { state, action } = handleMeasureModePoint(inactive, { x: 100, y: 200 });
+      expect(state).toEqual(inactive);
+      expect(action).toBeNull();
+    });
+
+    test('handles p1 click - stores point and advances to p2', () => {
+      const atP1 = startMeasureModeState(createMeasureModeState());
+      const point = { x: 100, y: 200 };
+      const { state, action } = handleMeasureModePoint(atP1, point);
+      
+      expect(state.p1).toEqual(point);
+      expect(state.step).toBe('p2');
+      expect(action).toBe('show-p2-toast');
+    });
+
+    test('handles p2 click - completes measurement', () => {
+      const atP2 = {
+        active: true,
+        step: 'p2',
+        p1: { x: 100, y: 200 },
+        p2: null,
+      };
+      const point = { x: 300, y: 400 };
+      const { state, action } = handleMeasureModePoint(atP2, point);
+      
+      expect(state.p2).toEqual(point);
+      expect(state.step).toBeNull(); // Null = complete, endpoints draggable
+      expect(state.active).toBe(true);
+      expect(action).toBe('measurement-complete');
+    });
+
+    test('ignores click after measurement complete', () => {
+      const complete = {
+        active: true,
+        step: null,
+        p1: { x: 100, y: 200 },
+        p2: { x: 300, y: 400 },
+      };
+      const { state, action } = handleMeasureModePoint(complete, { x: 500, y: 600 });
+      expect(state).toEqual(complete);
+      expect(action).toBeNull();
+    });
+  });
+
+  describe('updateMeasureModePoint', () => {
+    test('returns unchanged state when not active', () => {
+      const inactive = createMeasureModeState();
+      const result = updateMeasureModePoint(inactive, 'p1', { x: 50, y: 50 });
+      expect(result).toEqual(inactive);
+    });
+
+    test('returns unchanged state when step is not null (still placing points)', () => {
+      const placingP2 = {
+        active: true,
+        step: 'p2',
+        p1: { x: 100, y: 200 },
+        p2: null,
+      };
+      const result = updateMeasureModePoint(placingP2, 'p1', { x: 50, y: 50 });
+      expect(result).toEqual(placingP2);
+    });
+
+    test('updates p1 when measurement is complete', () => {
+      const complete = {
+        active: true,
+        step: null,
+        p1: { x: 100, y: 200 },
+        p2: { x: 300, y: 400 },
+      };
+      const result = updateMeasureModePoint(complete, 'p1', { x: 150, y: 250 });
+      expect(result.p1).toEqual({ x: 150, y: 250 });
+      expect(result.p2).toEqual({ x: 300, y: 400 });
+    });
+
+    test('updates p2 when measurement is complete', () => {
+      const complete = {
+        active: true,
+        step: null,
+        p1: { x: 100, y: 200 },
+        p2: { x: 300, y: 400 },
+      };
+      const result = updateMeasureModePoint(complete, 'p2', { x: 350, y: 450 });
+      expect(result.p1).toEqual({ x: 100, y: 200 });
+      expect(result.p2).toEqual({ x: 350, y: 450 });
+    });
+  });
+
+  describe('computeMeasurement', () => {
+    test('returns error for missing p1', () => {
+      const measureState = { p1: null, p2: { x: 100, y: 0 } };
+      const appState = { referenceDistance: { metersPerPixel: 0.1 } };
+      expect(computeMeasurement(measureState, appState)).toEqual({
+        success: false,
+        error: 'missing-points',
+      });
+    });
+
+    test('returns error for missing p2', () => {
+      const measureState = { p1: { x: 0, y: 0 }, p2: null };
+      const appState = { referenceDistance: { metersPerPixel: 0.1 } };
+      expect(computeMeasurement(measureState, appState)).toEqual({
+        success: false,
+        error: 'missing-points',
+      });
+    });
+
+    test('returns error for no scale', () => {
+      const measureState = { p1: { x: 0, y: 0 }, p2: { x: 100, y: 0 } };
+      const appState = { referenceDistance: null, calibration: null };
+      expect(computeMeasurement(measureState, appState)).toEqual({
+        success: false,
+        error: 'no-scale',
+      });
+    });
+
+    test('returns error when measureDistance fails (invalid point coordinates)', () => {
+      // Points have non-numeric coordinates, which passes the p1/p2 null check
+      // but fails in measureDistance's arePointsValid check
+      const measureState = { p1: { x: 'invalid', y: 0 }, p2: { x: 100, y: 0 } };
+      const appState = { referenceDistance: { metersPerPixel: 0.1 } };
+      expect(computeMeasurement(measureState, appState)).toEqual({
+        success: false,
+        error: 'computation-failed',
+      });
+    });
+
+    test('computes distance with manual scale', () => {
+      const measureState = { p1: { x: 0, y: 0 }, p2: { x: 100, y: 0 } };
+      const appState = { referenceDistance: { metersPerPixel: 0.1 }, calibration: null };
+      const result = computeMeasurement(measureState, appState);
+      
+      expect(result.success).toBe(true);
+      expect(result.meters).toBe(10); // 100px * 0.1 m/px
+      expect(result.source).toBe('manual');
+    });
+
+    test('computes distance with GPS scale', () => {
+      const measureState = { p1: { x: 0, y: 0 }, p2: { x: 200, y: 0 } };
+      const appState = { 
+        referenceDistance: null, 
+        calibration: { status: 'ok', model: { type: 'similarity', scale: 0.05 } }
+      };
+      const result = computeMeasurement(measureState, appState);
+      
+      expect(result.success).toBe(true);
+      expect(result.meters).toBe(10); // 200px * 0.05 m/px
+      expect(result.source).toBe('gps');
+    });
+
+    test('prioritizes manual scale over GPS', () => {
+      const measureState = { p1: { x: 0, y: 0 }, p2: { x: 100, y: 0 } };
+      const appState = { 
+        referenceDistance: { metersPerPixel: 0.1 },
+        calibration: { status: 'ok', model: { type: 'similarity', scale: 0.05 } }
+      };
+      const result = computeMeasurement(measureState, appState);
+      
+      expect(result.meters).toBe(10); // Uses 0.1, not 0.05
+      expect(result.source).toBe('manual');
+    });
+  });
+
+  describe('cancelMeasureModeState', () => {
+    test('returns inactive state', () => {
+      const cancelled = cancelMeasureModeState();
+      expect(cancelled).toEqual(createMeasureModeState());
+    });
+  });
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // UI State Derivation Tests
+  // ─────────────────────────────────────────────────────────────────────────
+
+  describe('shouldEnableMeasureButton', () => {
+    test('returns false when no scale available', () => {
+      const appState = { referenceDistance: null, calibration: null };
+      const measureState = createMeasureModeState();
+      expect(shouldEnableMeasureButton(appState, measureState)).toBe(false);
+    });
+
+    test('returns true when scale available and mode inactive', () => {
+      const appState = { referenceDistance: { metersPerPixel: 0.1 }, calibration: null };
+      const measureState = createMeasureModeState();
+      expect(shouldEnableMeasureButton(appState, measureState)).toBe(true);
+    });
+
+    test('returns false while placing points', () => {
+      const appState = { referenceDistance: { metersPerPixel: 0.1 }, calibration: null };
+      const measureState = { active: true, step: 'p1', p1: null, p2: null };
+      expect(shouldEnableMeasureButton(appState, measureState)).toBe(false);
+    });
+
+    test('returns true after measurement complete (step is null)', () => {
+      const appState = { referenceDistance: { metersPerPixel: 0.1 }, calibration: null };
+      const measureState = { 
+        active: true, 
+        step: null, 
+        p1: { x: 0, y: 0 }, 
+        p2: { x: 100, y: 0 } 
+      };
+      expect(shouldEnableMeasureButton(appState, measureState)).toBe(true);
+    });
+  });
+
+  describe('shouldEnableSetScaleButton', () => {
+    test('returns true when scale mode inactive', () => {
+      const scaleState = createScaleModeState();
+      expect(shouldEnableSetScaleButton(scaleState)).toBe(true);
+    });
+
+    test('returns false when scale mode active', () => {
+      const scaleState = startScaleModeState(createScaleModeState());
+      expect(shouldEnableSetScaleButton(scaleState)).toBe(false);
+    });
+  });
+});
diff --git a/src/scale/scale.js b/src/scale/scale.js
new file mode 100644
index 0000000..8445f30
--- /dev/null
+++ b/src/scale/scale.js
@@ -0,0 +1,259 @@
+/**
+ * Scale management utilities for the reference distance feature.
+ * Provides functions for extracting scale from calibration, determining active scale source,
+ * and formatting distances for display.
+ */
+
+/** Meters per degree at equator (WGS84 approximation) */
+export const METERS_PER_DEGREE_EQUATOR = 111320;
+
+/** Conversion factor from meters to feet */
+export const METERS_TO_FEET = 3.28084;
+
+/**
+ * Validates that two points have valid numeric x,y coordinates.
+ * @param {Object} p1 - First point
+ * @param {Object} p2 - Second point
+ * @returns {boolean} - True if both points are valid
+ */
+function arePointsValid(p1, p2) {
+  return p1 && p2 && 
+    typeof p1.x === 'number' && typeof p1.y === 'number' &&
+    typeof p2.x === 'number' && typeof p2.y === 'number';
+}
+
+/**
+ * Computes the pixel distance between two points.
+ * @param {Object} p1 - First point {x, y}
+ * @param {Object} p2 - Second point {x, y}
+ * @returns {number} - Euclidean distance in pixels
+ */
+function pixelDistance(p1, p2) {
+  const dx = p2.x - p1.x;
+  const dy = p2.y - p1.y;
+  return Math.hypot(dx, dy);
+}
+
+/**
+ * Computes the meters per pixel scale from a reference distance definition.
+ * 
+ * @param {Object} p1 - First point in pixel coordinates {x, y}
+ * @param {Object} p2 - Second point in pixel coordinates {x, y}
+ * @param {number} meters - Known distance in meters between the two points
+ * @returns {number|null} - Meters per pixel, or null if inputs are invalid
+ */
+export function computeReferenceScale(p1, p2, meters) {
+  if (!arePointsValid(p1, p2)) {
+    return null;
+  }
+  
+  if (!Number.isFinite(meters) || meters <= 0) {
+    return null;
+  }
+  
+  const distance = pixelDistance(p1, p2);
+  
+  if (distance === 0) {
+    return null;
+  }
+  
+  return meters / distance;
+}
+
+/**
+ * Extracts scale from a similarity model.
+ * @param {Object} model - Calibration model
+ * @returns {number|null} - Scale or null
+ */
+function extractSimilarityScale(model) {
+  if (typeof model.scale === 'number') {
+    return Math.abs(model.scale);
+  }
+  return null;
+}
+
+/**
+ * Extracts average scale from an affine model.
+ * @param {Object} model - Calibration model
+ * @returns {number|null} - Scale or null
+ */
+function extractAffineScale(model) {
+  if (!model.matrix) {
+    return null;
+  }
+  const { a, b, c, d } = model.matrix;
+  if (typeof a !== 'number' || typeof b !== 'number' || 
+      typeof c !== 'number' || typeof d !== 'number') {
+    return null;
+  }
+  const scaleX = Math.hypot(a, b);
+  const scaleY = Math.hypot(c, d);
+  return (scaleX + scaleY) / 2;
+}
+
+/**
+ * Extracts the scale (meters per pixel) from a calibration result.
+ * For similarity transforms, scale = sqrt(a² + b²) where the matrix coefficients
+ * represent the scale and rotation components.
+ * 
+ * The calibration matrix maps pixels → geo coordinates (ENU in meters),
+ * so the scale directly gives meters per pixel.
+ * 
+ * @param {Object} calibrationResult - Result from calibrateMap()
+ * @returns {number|null} - Scale in meters per pixel, or null if not extractable
+ */
+export function getMetersPerPixelFromCalibration(calibrationResult) {
+  if (!calibrationResult || calibrationResult.status !== 'ok' || !calibrationResult.model) {
+    return null;
+  }
+  
+  const { model } = calibrationResult;
+  
+  const extractors = {
+    similarity: extractSimilarityScale,
+    affine: extractAffineScale,
+    homography: () => null, // Scale varies across image
+  };
+  
+  const extractor = extractors[model.type];
+  return extractor ? extractor(model) : null;
+}
+
+/**
+ * Determines the active metersPerPixel value based on available sources.
+ * Priority: manual referenceDistance > GPS calibration
+ * 
+ * @param {Object} state - Application state containing referenceDistance and/or calibration
+ * @returns {{ metersPerPixel: number, source: 'manual' | 'gps' } | null}
+ */
+export function getActiveScale(state) {
+  if (!state) {
+    return null;
+  }
+  
+  // Priority 1: Manual reference distance (most trusted)
+  if (state.referenceDistance && 
+      typeof state.referenceDistance.metersPerPixel === 'number' &&
+      state.referenceDistance.metersPerPixel > 0) {
+    return { 
+      metersPerPixel: state.referenceDistance.metersPerPixel, 
+      source: 'manual' 
+    };
+  }
+  
+  // Priority 2: GPS calibration
+  if (state.calibration) {
+    const scale = getMetersPerPixelFromCalibration(state.calibration);
+    if (scale !== null && scale > 0) {
+      return { 
+        metersPerPixel: scale, 
+        source: 'gps' 
+      };
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Calculates the distance in meters between two pixel points given a scale.
+ * 
+ * @param {Object} p1 - First point in pixel coordinates {x, y}
+ * @param {Object} p2 - Second point in pixel coordinates {x, y}
+ * @param {number} metersPerPixel - Scale factor
+ * @returns {number|null} - Distance in meters, or null if inputs are invalid
+ */
+export function measureDistance(p1, p2, metersPerPixel) {
+  if (!arePointsValid(p1, p2)) {
+    return null;
+  }
+  
+  if (!Number.isFinite(metersPerPixel) || metersPerPixel <= 0) {
+    return null;
+  }
+  
+  return pixelDistance(p1, p2) * metersPerPixel;
+}
+
+/**
+ * Converts a distance value from a given unit to meters.
+ * Validates that the input is a positive finite number.
+ * 
+ * @param {number} value - Numeric distance value
+ * @param {string} unit - Unit of the input value ('m', 'ft')
+ * @returns {number|null} - Distance in meters, or null if invalid
+ */
+export function convertToMeters(value, unit) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return null;
+  }
+  switch (unit) {
+    case 'ft':
+      return value / METERS_TO_FEET;
+    default:
+      return value;
+  }
+}
+
+/**
+ * Formats a distance value for display in the user's preferred unit.
+ * 
+ * @param {number} meters - Distance in meters
+ * @param {'m' | 'ft' | 'ft-in'} unit - Display unit preference
+ * @returns {string} - Formatted distance string
+ */
+export function formatDistance(meters, unit = 'm') {
+  if (!Number.isFinite(meters) || meters < 0) {
+    return '—';
+  }
+  
+  switch (unit) {
+    case 'ft': {
+      const feet = meters * METERS_TO_FEET;
+      return `${feet.toFixed(2)} ft`;
+    }
+    case 'ft-in': {
+      const totalInches = meters * METERS_TO_FEET * 12;
+      const feet = Math.floor(totalInches / 12);
+      const inches = Math.round(totalInches % 12);
+      // Handle case where inches rounds to 12
+      if (inches === 12) {
+        return `${feet + 1}' 0"`;
+      }
+      return `${feet}' ${inches}"`;
+    }
+    default: {
+      // Meters (default)
+      if (meters < 0.01) {
+        return `${(meters * 1000).toFixed(1)} mm`;
+      }
+      if (meters < 1) {
+        return `${(meters * 100).toFixed(1)} cm`;
+      }
+      return `${meters.toFixed(2)} m`;
+    }
+  }
+}
+
+/**
+ * Compares two scale values and determines if they differ significantly.
+ * Used to warn users when manual reference and GPS-derived scales disagree.
+ * 
+ * @param {number} scale1 - First scale (meters per pixel)
+ * @param {number} scale2 - Second scale (meters per pixel)
+ * @param {number} [threshold=0.10] - Relative difference threshold (default 10%)
+ * @returns {{ differs: boolean, percentDifference: number } | null}
+ */
+export function compareScales(scale1, scale2, threshold = 0.10) {
+  if (!Number.isFinite(scale1) || !Number.isFinite(scale2) ||
+      scale1 <= 0 || scale2 <= 0) {
+    return null;
+  }
+  
+  const percentDifference = Math.abs(scale1 - scale2) / Math.max(scale1, scale2);
+  
+  return {
+    differs: percentDifference > threshold,
+    percentDifference
+  };
+}
diff --git a/src/scale/scale.test.js b/src/scale/scale.test.js
new file mode 100644
index 0000000..2142b19
--- /dev/null
+++ b/src/scale/scale.test.js
@@ -0,0 +1,449 @@
+import {
+  computeReferenceScale,
+  getMetersPerPixelFromCalibration,
+  getActiveScale,
+  measureDistance,
+  formatDistance,
+  convertToMeters,
+  compareScales,
+  METERS_TO_FEET,
+} from './scale.js';
+
+describe('scale module', () => {
+  describe('computeReferenceScale', () => {
+    test('computes correct scale for horizontal line', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 100, y: 0 };
+      const meters = 10;
+      expect(computeReferenceScale(p1, p2, meters)).toBe(0.1); // 10m / 100px = 0.1 m/px
+    });
+
+    test('computes correct scale for vertical line', () => {
+      const p1 = { x: 50, y: 0 };
+      const p2 = { x: 50, y: 200 };
+      const meters = 20;
+      expect(computeReferenceScale(p1, p2, meters)).toBe(0.1); // 20m / 200px = 0.1 m/px
+    });
+
+    test('computes correct scale for diagonal line', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 30, y: 40 }; // 3-4-5 triangle, distance = 50
+      const meters = 5;
+      expect(computeReferenceScale(p1, p2, meters)).toBe(0.1); // 5m / 50px = 0.1 m/px
+    });
+
+    test('returns null for coincident points', () => {
+      const p1 = { x: 100, y: 200 };
+      const p2 = { x: 100, y: 200 };
+      expect(computeReferenceScale(p1, p2, 10)).toBeNull();
+    });
+
+    test('returns null for zero meters', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 100, y: 0 };
+      expect(computeReferenceScale(p1, p2, 0)).toBeNull();
+    });
+
+    test('returns null for negative meters', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 100, y: 0 };
+      expect(computeReferenceScale(p1, p2, -5)).toBeNull();
+    });
+
+    test('returns null for NaN meters', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 100, y: 0 };
+      expect(computeReferenceScale(p1, p2, NaN)).toBeNull();
+    });
+
+    test('returns null for Infinity meters', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 100, y: 0 };
+      expect(computeReferenceScale(p1, p2, Infinity)).toBeNull();
+    });
+
+    test('returns null for null/undefined points', () => {
+      expect(computeReferenceScale(null, { x: 0, y: 0 }, 10)).toBeNull();
+      expect(computeReferenceScale({ x: 0, y: 0 }, undefined, 10)).toBeNull();
+      expect(computeReferenceScale(null, null, 10)).toBeNull();
+    });
+
+    test('returns null for points with missing coordinates', () => {
+      expect(computeReferenceScale({ x: 0 }, { x: 100, y: 0 }, 10)).toBeNull();
+      expect(computeReferenceScale({ x: 0, y: 0 }, { y: 100 }, 10)).toBeNull();
+    });
+  });
+
+  describe('getMetersPerPixelFromCalibration', () => {
+    test('extracts scale from similarity calibration', () => {
+      const calibration = {
+        status: 'ok',
+        model: {
+          type: 'similarity',
+          scale: 0.05,
+          rotation: 0,
+          translation: { x: 0, y: 0 }
+        }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBe(0.05);
+    });
+
+    test('returns absolute value for negative similarity scale', () => {
+      const calibration = {
+        status: 'ok',
+        model: {
+          type: 'similarity',
+          scale: -0.05,
+          rotation: Math.PI,
+          translation: { x: 0, y: 0 }
+        }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBe(0.05);
+    });
+
+    test('extracts average scale from affine calibration', () => {
+      // Affine with uniform scale of 0.1 (no shear)
+      const calibration = {
+        status: 'ok',
+        model: {
+          type: 'affine',
+          matrix: { a: 0.1, b: 0, c: 0, d: 0.1, tx: 10, ty: 20 }
+        }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBe(0.1);
+    });
+
+    test('extracts average scale from affine with rotation', () => {
+      // Affine with scale=0.1 and 45° rotation
+      const cos45 = Math.cos(Math.PI / 4);
+      const sin45 = Math.sin(Math.PI / 4);
+      const scale = 0.1;
+      const calibration = {
+        status: 'ok',
+        model: {
+          type: 'affine',
+          matrix: { 
+            a: scale * cos45, 
+            b: -scale * sin45, 
+            c: scale * sin45, 
+            d: scale * cos45, 
+            tx: 0, 
+            ty: 0 
+          }
+        }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBeCloseTo(0.1, 10);
+    });
+
+    test('returns null for homography (scale varies)', () => {
+      const calibration = {
+        status: 'ok',
+        model: {
+          type: 'homography',
+          matrix: [[1, 0, 0], [0, 1, 0], [0.001, 0.001, 1]]
+        }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBeNull();
+    });
+
+    test('returns null for failed calibration', () => {
+      expect(getMetersPerPixelFromCalibration({ status: 'fit-failed' })).toBeNull();
+      expect(getMetersPerPixelFromCalibration({ status: 'insufficient-pairs' })).toBeNull();
+    });
+
+    test('returns null for null/undefined calibration', () => {
+      expect(getMetersPerPixelFromCalibration(null)).toBeNull();
+      expect(getMetersPerPixelFromCalibration(undefined)).toBeNull();
+    });
+
+    test('returns null for calibration without model', () => {
+      expect(getMetersPerPixelFromCalibration({ status: 'ok' })).toBeNull();
+      expect(getMetersPerPixelFromCalibration({ status: 'ok', model: null })).toBeNull();
+    });
+
+    test('returns null for affine with invalid matrix coefficients', () => {
+      const calibration = {
+        status: 'ok',
+        model: {
+          type: 'affine',
+          matrix: { a: 'invalid', b: 0, c: 0, d: 0.1 }
+        }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBeNull();
+    });
+
+    test('returns null for affine without matrix property', () => {
+      const calibration = {
+        status: 'ok',
+        model: { type: 'affine' }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBeNull();
+    });
+
+    test('returns null for similarity with non-number scale', () => {
+      const calibration = {
+        status: 'ok',
+        model: { type: 'similarity', scale: 'invalid' }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBeNull();
+    });
+
+    test('returns null for unknown model type', () => {
+      const calibration = {
+        status: 'ok',
+        model: { type: 'unknown', foo: 'bar' }
+      };
+      expect(getMetersPerPixelFromCalibration(calibration)).toBeNull();
+    });
+  });
+
+  describe('getActiveScale', () => {
+    test('returns manual reference when both sources exist (priority)', () => {
+      const state = {
+        referenceDistance: { metersPerPixel: 0.05 },
+        calibration: {
+          status: 'ok',
+          model: { type: 'similarity', scale: 0.08 }
+        }
+      };
+      const result = getActiveScale(state);
+      expect(result).toEqual({ metersPerPixel: 0.05, source: 'manual' });
+    });
+
+    test('returns manual reference when only manual exists', () => {
+      const state = {
+        referenceDistance: { metersPerPixel: 0.05 },
+        calibration: null
+      };
+      const result = getActiveScale(state);
+      expect(result).toEqual({ metersPerPixel: 0.05, source: 'manual' });
+    });
+
+    test('returns GPS calibration when only calibration exists', () => {
+      const state = {
+        referenceDistance: null,
+        calibration: {
+          status: 'ok',
+          model: { type: 'similarity', scale: 0.08 }
+        }
+      };
+      const result = getActiveScale(state);
+      expect(result).toEqual({ metersPerPixel: 0.08, source: 'gps' });
+    });
+
+    test('returns null when no scale sources exist', () => {
+      expect(getActiveScale({ referenceDistance: null, calibration: null })).toBeNull();
+      expect(getActiveScale({})).toBeNull();
+    });
+
+    test('returns null for null state', () => {
+      expect(getActiveScale(null)).toBeNull();
+      expect(getActiveScale(undefined)).toBeNull();
+    });
+
+    test('falls back to GPS when manual reference has invalid scale', () => {
+      const state = {
+        referenceDistance: { metersPerPixel: 0 },
+        calibration: {
+          status: 'ok',
+          model: { type: 'similarity', scale: 0.08 }
+        }
+      };
+      const result = getActiveScale(state);
+      expect(result).toEqual({ metersPerPixel: 0.08, source: 'gps' });
+    });
+
+    test('falls back to GPS when manual reference has negative scale', () => {
+      const state = {
+        referenceDistance: { metersPerPixel: -0.05 },
+        calibration: {
+          status: 'ok',
+          model: { type: 'similarity', scale: 0.08 }
+        }
+      };
+      const result = getActiveScale(state);
+      expect(result).toEqual({ metersPerPixel: 0.08, source: 'gps' });
+    });
+
+    test('returns null when GPS calibration failed', () => {
+      const state = {
+        referenceDistance: null,
+        calibration: { status: 'fit-failed' }
+      };
+      expect(getActiveScale(state)).toBeNull();
+    });
+  });
+
+  describe('measureDistance', () => {
+    test('calculates correct distance for horizontal line', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 100, y: 0 };
+      const metersPerPixel = 0.1;
+      expect(measureDistance(p1, p2, metersPerPixel)).toBe(10); // 100px * 0.1 = 10m
+    });
+
+    test('calculates correct distance for diagonal line', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 30, y: 40 }; // distance = 50px
+      const metersPerPixel = 0.2;
+      expect(measureDistance(p1, p2, metersPerPixel)).toBe(10); // 50px * 0.2 = 10m
+    });
+
+    test('returns 0 for coincident points', () => {
+      const p1 = { x: 50, y: 50 };
+      const p2 = { x: 50, y: 50 };
+      expect(measureDistance(p1, p2, 0.1)).toBe(0);
+    });
+
+    test('returns null for invalid points', () => {
+      expect(measureDistance(null, { x: 0, y: 0 }, 0.1)).toBeNull();
+      expect(measureDistance({ x: 0, y: 0 }, null, 0.1)).toBeNull();
+      expect(measureDistance({ x: 0 }, { x: 0, y: 0 }, 0.1)).toBeNull();
+    });
+
+    test('returns null for invalid scale', () => {
+      const p1 = { x: 0, y: 0 };
+      const p2 = { x: 100, y: 0 };
+      expect(measureDistance(p1, p2, 0)).toBeNull();
+      expect(measureDistance(p1, p2, -0.1)).toBeNull();
+      expect(measureDistance(p1, p2, NaN)).toBeNull();
+      expect(measureDistance(p1, p2, Infinity)).toBeNull();
+    });
+  });
+
+  describe('convertToMeters', () => {
+    test('returns value as is for meters', () => {
+      expect(convertToMeters(10, 'm')).toBe(10);
+    });
+
+    test('converts feet to meters', () => {
+      expect(convertToMeters(10, 'ft')).toBe(10 / METERS_TO_FEET);
+    });
+
+    test('returns null for non-finite values', () => {
+      expect(convertToMeters(NaN, 'm')).toBeNull();
+      expect(convertToMeters(Infinity, 'm')).toBeNull();
+    });
+
+    test('returns null for zero or negative values', () => {
+      expect(convertToMeters(0, 'm')).toBeNull();
+      expect(convertToMeters(-5, 'm')).toBeNull();
+    });
+
+    test('defaults to meters for unknown units', () => {
+      expect(convertToMeters(10, 'unknown')).toBe(10);
+    });
+  });
+
+  describe('formatDistance', () => {
+    describe('meters (default)', () => {
+      test('formats large distances in meters', () => {
+        expect(formatDistance(5.25, 'm')).toBe('5.25 m');
+        expect(formatDistance(100, 'm')).toBe('100.00 m');
+        expect(formatDistance(1.5)).toBe('1.50 m'); // default unit
+      });
+
+      test('formats sub-meter distances in centimeters', () => {
+        expect(formatDistance(0.5, 'm')).toBe('50.0 cm');
+        expect(formatDistance(0.01, 'm')).toBe('1.0 cm');
+      });
+
+      test('formats tiny distances in millimeters', () => {
+        expect(formatDistance(0.005, 'm')).toBe('5.0 mm');
+        expect(formatDistance(0.001, 'm')).toBe('1.0 mm');
+      });
+    });
+
+    describe('feet', () => {
+      test('formats distance in feet', () => {
+        expect(formatDistance(1, 'ft')).toBe(`${METERS_TO_FEET.toFixed(2)} ft`);
+        expect(formatDistance(3.048, 'ft')).toBe('10.00 ft'); // 3.048m ≈ 10ft
+      });
+
+      test('formats fractional feet', () => {
+        expect(formatDistance(0.3048, 'ft')).toBe('1.00 ft'); // 0.3048m = 1ft
+      });
+    });
+
+    describe('feet and inches', () => {
+      test('formats whole feet with zero inches', () => {
+        expect(formatDistance(0.3048, 'ft-in')).toBe("1' 0\"");
+        expect(formatDistance(1.8288, 'ft-in')).toBe("6' 0\"");
+      });
+
+      test('formats feet with inches', () => {
+        // 1.7018m ≈ 5'7"
+        expect(formatDistance(1.7018, 'ft-in')).toBe("5' 7\"");
+      });
+
+      test('handles rounding to 12 inches', () => {
+        // Edge case: when inches rounds to 12, should become next foot
+        // 0.6096m = 2ft exactly, but 0.6090m rounds to 2'0"
+        const almostTwoFeet = 0.6090; // Just under 2 feet
+        const result = formatDistance(almostTwoFeet, 'ft-in');
+        // Should be close to 2' 0"
+        expect(result).toMatch(/[12]' \d+"/);
+      });
+    });
+
+    describe('edge cases', () => {
+      test('returns dash for NaN', () => {
+        expect(formatDistance(NaN, 'm')).toBe('—');
+      });
+
+      test('returns dash for negative values', () => {
+        expect(formatDistance(-5, 'm')).toBe('—');
+      });
+
+      test('returns dash for Infinity', () => {
+        expect(formatDistance(Infinity, 'm')).toBe('—');
+      });
+
+      test('handles zero correctly', () => {
+        expect(formatDistance(0, 'm')).toBe('0.0 mm');
+        expect(formatDistance(0, 'ft')).toBe('0.00 ft');
+        expect(formatDistance(0, 'ft-in')).toBe("0' 0\"");
+      });
+    });
+  });
+
+  describe('compareScales', () => {
+    test('detects scales that differ by more than threshold', () => {
+      const result = compareScales(0.10, 0.05, 0.10);
+      expect(result.differs).toBe(true);
+      expect(result.percentDifference).toBeCloseTo(0.5, 10); // 50% difference
+    });
+
+    test('detects scales within threshold', () => {
+      const result = compareScales(0.10, 0.095, 0.10);
+      expect(result.differs).toBe(false);
+      expect(result.percentDifference).toBeCloseTo(0.05, 10); // 5% difference
+    });
+
+    test('uses 10% default threshold', () => {
+      expect(compareScales(1.0, 0.91).differs).toBe(false); // 9% diff
+      expect(compareScales(1.0, 0.89).differs).toBe(true);  // 11% diff
+    });
+
+    test('is symmetric (order independent)', () => {
+      const result1 = compareScales(0.10, 0.05);
+      const result2 = compareScales(0.05, 0.10);
+      expect(result1.percentDifference).toBeCloseTo(result2.percentDifference, 10);
+      expect(result1.differs).toBe(result2.differs);
+    });
+
+    test('returns null for invalid inputs', () => {
+      expect(compareScales(0, 0.1)).toBeNull();
+      expect(compareScales(0.1, 0)).toBeNull();
+      expect(compareScales(-0.1, 0.1)).toBeNull();
+      expect(compareScales(NaN, 0.1)).toBeNull();
+      expect(compareScales(0.1, Infinity)).toBeNull();
+    });
+
+    test('handles identical scales', () => {
+      const result = compareScales(0.05, 0.05);
+      expect(result.differs).toBe(false);
+      expect(result.percentDifference).toBe(0);
+    });
+  });
+});