From 1a344b5c93106ad77a7ccbab40581b27dc43edc8 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Wed, 28 Oct 2026 20:36:17 -0400
Subject: [PATCH 1/3] feat: highlight occupied depth in en face views

---
 eslint.config.js                              |   9 +-
 scripts/samples/jhu-oct-provenance.json       |   2 +-
 src/core/slab/geometry.ts                     |   8 +
 src/core/streaming/dicom/frameGeometry.ts     |  72 +++
 src/core/streaming/dicom/octMetadata.ts       |  59 +--
 src/core/streaming/dicom/seriesGeometry.ts    | 150 +++++++
 src/enface/EnFaceControlPanel.vue             |   7 +
 src/enface/EnFaceControls.vue                 |   9 +-
 src/enface/EnFaceMeasurementStatus.vue        |  30 ++
 src/enface/EnFaceThicknessControls.vue        | 187 ++++++++
 src/enface/EnFaceViewer.vue                   |  19 +-
 .../VtkEnFaceLabelmapRepresentation.vue       |  41 ++
 src/enface/__tests__/calibration.spec.ts      |  44 ++
 src/enface/__tests__/controls.spec.ts         | 392 ++++++++++++++++-
 src/enface/__tests__/inputCalibration.spec.ts | 278 ++++++++++++
 src/enface/__tests__/labelmapGeometry.spec.ts |  99 +++++
 src/enface/__tests__/layout.spec.ts           |   2 +
 src/enface/__tests__/manualVolume.spec.ts     |  35 +-
 .../occupiedDepthPresentation.spec.ts         |  54 +++
 .../__tests__/occupiedDepthSupport.spec.ts    | 108 +++++
 src/enface/__tests__/restoreSelection.spec.ts | 237 ++++++++++
 src/enface/__tests__/seriesGeometry.spec.ts   | 125 +++++-
 src/enface/__tests__/store.spec.ts            |  95 +++-
 .../__tests__/thinRegionAppearance.spec.ts    | 139 ++++++
 src/enface/occupiedDepthSupport.ts            |  73 ++++
 src/enface/projectionMasks.ts                 |  18 +
 src/enface/store.ts                           |  56 ++-
 src/enface/thickness.ts                       |  27 ++
 src/enface/useEnFaceLabelmaps.ts              |  85 ++++
 src/enface/useEnFaceOccupiedDepth.ts          |  77 ++++
 src/enface/useOccupiedDepthInput.ts           | 290 ++++++++++++
 src/enface/useThinRegionAppearance.ts         |  41 ++
 src/io/import/processors/restoreStateFile.ts  |   6 +-
 src/io/state-file/schema.ts                   |  20 +-
 .../__tests__/occupiedDepth.spec.ts           | 139 ++++++
 .../__tests__/useOccupiedDepth.spec.ts        | 253 +++++++++++
 .../measurements/occupiedDepth.ts             | 166 +++++++
 .../measurements/occupiedDepth.worker.ts      |   9 +
 .../measurements/occupiedDepthHandler.ts      |  41 ++
 .../measurements/useOccupiedDepth.ts          | 170 ++++++++
 .../VtkSegmentationSliceRepresentation.vue    | 101 +----
 .../rendering/useLabelmapRepresentation.ts    |  90 ++++
 src/store/view-configs.ts                     |  10 +-
 tests/fixtures/oct/volumes.ts                 |  19 +
 tests/pageobjects/volview.page.ts             |   4 +-
 tests/specs/menuTestUtils.ts                  |  12 +
 tests/specs/oct-en-face.e2e.ts                |  69 ++-
 tests/specs/oct-import.e2e.ts                 |  23 +-
 tests/specs/oct-native-dicom.e2e.ts           |  61 ++-
 tests/specs/oct-navigation.e2e.ts             |  16 +-
 tests/specs/oct-occupied-depth.e2e.ts         | 402 +++++++++++++++++
 tests/specs/octInteractionTestUtils.ts        |  83 +++-
 tests/specs/octTestUtils.ts                   |  41 +-
 tests/specs/projection-camera.e2e.ts          |  89 +++-
 tests/specs/segmentationTestUtils.ts          |  20 +-
 tests/specs/slab-occupied-depth.e2e.ts        | 412 ++++++++++++++++++
 56 files changed, 4881 insertions(+), 243 deletions(-)
 create mode 100644 src/core/streaming/dicom/frameGeometry.ts
 create mode 100644 src/core/streaming/dicom/seriesGeometry.ts
 create mode 100644 src/enface/EnFaceMeasurementStatus.vue
 create mode 100644 src/enface/EnFaceThicknessControls.vue
 create mode 100644 src/enface/VtkEnFaceLabelmapRepresentation.vue
 create mode 100644 src/enface/__tests__/calibration.spec.ts
 create mode 100644 src/enface/__tests__/inputCalibration.spec.ts
 create mode 100644 src/enface/__tests__/labelmapGeometry.spec.ts
 create mode 100644 src/enface/__tests__/occupiedDepthPresentation.spec.ts
 create mode 100644 src/enface/__tests__/occupiedDepthSupport.spec.ts
 create mode 100644 src/enface/__tests__/restoreSelection.spec.ts
 create mode 100644 src/enface/__tests__/thinRegionAppearance.spec.ts
 create mode 100644 src/enface/occupiedDepthSupport.ts
 create mode 100644 src/enface/projectionMasks.ts
 create mode 100644 src/enface/thickness.ts
 create mode 100644 src/enface/useEnFaceLabelmaps.ts
 create mode 100644 src/enface/useEnFaceOccupiedDepth.ts
 create mode 100644 src/enface/useOccupiedDepthInput.ts
 create mode 100644 src/enface/useThinRegionAppearance.ts
 create mode 100644 src/segmentation/measurements/__tests__/occupiedDepth.spec.ts
 create mode 100644 src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
 create mode 100644 src/segmentation/measurements/occupiedDepth.ts
 create mode 100644 src/segmentation/measurements/occupiedDepth.worker.ts
 create mode 100644 src/segmentation/measurements/occupiedDepthHandler.ts
 create mode 100644 src/segmentation/measurements/useOccupiedDepth.ts
 create mode 100644 src/segmentation/rendering/useLabelmapRepresentation.ts
 create mode 100644 tests/specs/menuTestUtils.ts
 create mode 100644 tests/specs/oct-occupied-depth.e2e.ts
 create mode 100644 tests/specs/slab-occupied-depth.e2e.ts

diff --git a/eslint.config.js b/eslint.config.js
index e64605c27..5dcc45463 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -313,12 +313,19 @@ export default tseslint.config(
     {
       dir: 'enface',
       publicSurface: false,
-      pure: ['src/enface/sliceGeometry.ts'],
+      pure: [
+        'src/enface/thickness.ts',
+        'src/enface/sliceGeometry.ts',
+        'src/enface/projectionMasks.ts',
+      ],
     },
     {
       dir: 'segmentation',
       pure: [
         'src/segmentation/geometry.ts',
+        'src/segmentation/measurements/occupiedDepth.ts',
+        'src/segmentation/measurements/occupiedDepth.worker.ts',
+        'src/segmentation/measurements/occupiedDepthHandler.ts',
         'src/segmentation/color.ts',
         'src/segmentation/model.ts',
         'src/segmentation/segment.ts',
diff --git a/scripts/samples/jhu-oct-provenance.json b/scripts/samples/jhu-oct-provenance.json
index 873b51183..df63077ae 100644
--- a/scripts/samples/jhu-oct-provenance.json
+++ b/scripts/samples/jhu-oct-provenance.json
@@ -93,7 +93,7 @@
     "axial_spacing_microns": 3.867251332849264,
     "lateral_sampling": "Retain native lateral indices 0,2,...,1022; native index 1023 is omitted. ScaleX is doubled.",
     "slow_sampling": "Linearly resample transformed intensities and unrounded boundaries from per-B-scan physical positions to 49 evenly spaced positions across 6.149238953366875 mm. Native adjacent pitches range from 0.12010203066263614 to 0.13211284885730468 mm.",
-    "axial_sampling": "Native depth samples and ScaleZ are preserved at 3.867251332849264 microns per voxel.",
+    "axial_sampling": "Native depth samples and ScaleZ are preserved; thickness is occupied depth voxels multiplied by 3.867251332849264 microns.",
     "coordinates": "Shared local zero origin, identity direction, and millimetre spacing for image and segmentation. Patient anatomical orientation is not inferred.",
     "intensities": "Nested float32 square roots of source reflectivity before slow-axis interpolation, then nearest-even rounding of 255 times the regularized values to uint8. Stored values range from 0 to 255; divide by 255 for normalized display intensity. This is a display transform, not unmodified linear reflectivity.",
     "missing_reflectivity": "Non-finite or out-of-range native values are missing. A resampled voxel is valid only when every source with nonzero interpolation weight is valid. Missing output intensity is zero.",
diff --git a/src/core/slab/geometry.ts b/src/core/slab/geometry.ts
index 5aa8830cd..ce22f1fd3 100644
--- a/src/core/slab/geometry.ts
+++ b/src/core/slab/geometry.ts
@@ -21,6 +21,11 @@ export function deriveSlabGeometry(
   spec: SlabSpecification
 ) {
   const axes = [0, 1, 2].filter((axis) => axis !== spec.axis);
+  const dimensions = image.getDimensions();
+  const sourceSpacing = image.getSpacing();
+  const width = dimensions[axes[0]];
+  const height = dimensions[axes[1]];
+  const spacing = axes.map((axis) => Math.abs(sourceSpacing[axis]));
   const planeIndex: Vector3 = [0, 0, 0];
   planeIndex[spec.axis] = (spec.first + spec.last) / 2;
   const planeOrigin = image.indexToWorld(planeIndex) as Vector3;
@@ -48,6 +53,9 @@ export function deriveSlabGeometry(
     ...metadataFromVtkImageData(image),
   };
   return {
+    width,
+    height,
+    spacing,
     metadata,
     pixelToWorld,
     planeOrigin,
diff --git a/src/core/streaming/dicom/frameGeometry.ts b/src/core/streaming/dicom/frameGeometry.ts
new file mode 100644
index 000000000..99c1afda5
--- /dev/null
+++ b/src/core/streaming/dicom/frameGeometry.ts
@@ -0,0 +1,72 @@
+import { vec3 } from 'gl-matrix';
+
+export const numbersMatch = (a: number, b: number, tolerance = 1e-5) =>
+  Number.isFinite(a) && Number.isFinite(b) && Math.abs(a - b) <= tolerance;
+export const coordinatesMatch = (
+  a: ArrayLike<number>,
+  b: ArrayLike<number>,
+  tolerance = 1e-5
+) =>
+  a.length === b.length &&
+  Array.from(a).every((n, i) => numbersMatch(n, b[i], tolerance));
+export function imageDirection(basis: number[] | null | undefined) {
+  if (!basis || basis.length !== 6 || !basis.every(Number.isFinite))
+    return null;
+  const row = basis.slice(0, 3) as vec3;
+  const column = basis.slice(3) as vec3;
+  if (
+    !numbersMatch(vec3.length(row), 1, 1e-4) ||
+    !numbersMatch(vec3.length(column), 1, 1e-4) ||
+    // Rounding two unit vectors to four decimals can shift their dot by 1.8e-4.
+    !numbersMatch(vec3.dot(row, column), 0, 2e-4)
+  )
+    return null;
+  return [...basis, ...vec3.cross([0, 0, 0], row, column)];
+}
+
+/** Validate equally spaced slices along the positive image normal. */
+export function frameGridGeometry(positions: number[][], direction?: number[]) {
+  if (positions.some((p) => p.length !== 3 || !p.every(Number.isFinite)))
+    return {
+      reason:
+        'DICOM slice positions are invalid; spatial reconstruction is required.',
+    };
+  if (positions.length < 2) return { reason: null };
+  const step = positions
+    .at(-1)!
+    .map((n, axis) => (n - positions[0][axis]) / (positions.length - 1));
+  const distance = Math.hypot(...step);
+  // Patient positions may be printed to four decimal places in millimetres.
+  const tolerance = Math.max(1e-4, distance * 1e-3);
+  if (distance <= 1e-5)
+    return {
+      reason: 'Repeated DICOM slice locations need spatial reconstruction.',
+    };
+  if (
+    direction &&
+    !coordinatesMatch(
+      step,
+      direction.slice(6).map((n) => n * distance),
+      tolerance
+    )
+  )
+    return {
+      reason:
+        'DICOM slice positions do not follow the image grid; spatial reconstruction is required.',
+    };
+  if (
+    positions.some(
+      (position, i) =>
+        !coordinatesMatch(
+          position,
+          positions[0].map((n, axis) => n + i * step[axis]),
+          tolerance
+        )
+    )
+  )
+    return {
+      reason:
+        'DICOM slices have nonuniform positions; spatial reconstruction is required.',
+    };
+  return { reason: null, distance };
+}
diff --git a/src/core/streaming/dicom/octMetadata.ts b/src/core/streaming/dicom/octMetadata.ts
index f1153b755..141d0e744 100644
--- a/src/core/streaming/dicom/octMetadata.ts
+++ b/src/core/streaming/dicom/octMetadata.ts
@@ -1,8 +1,11 @@
 import dicomParser, { type DataSet } from 'dicom-parser';
 import { inflateSync } from 'fflate';
-import { vec3 } from 'gl-matrix';
 import { areEquals } from '@kitware/vtk.js/Common/Core/Math';
 import { Tags, toDicomParserKey } from '@/src/core/dicomTags';
+import {
+  frameGridGeometry,
+  imageDirection,
+} from '@/src/core/streaming/dicom/frameGeometry';
 import {
   isOCTMetadata,
   OCT_GEOMETRY_ERROR,
@@ -10,8 +13,6 @@ import {
 } from '@/src/core/streaming/dicom/octMetadataTags';
 import type { Maybe } from '@/src/types';
 
-const close = (a: number, b: number, tolerance: number) =>
-  Number.isFinite(a) && Number.isFinite(b) && Math.abs(a - b) <= tolerance;
 const finiteVector = (
   value: number[] | null | undefined,
   length: number
@@ -19,56 +20,6 @@ const finiteVector = (
   value?.length === length && value.every(Number.isFinite);
 const positiveNumber = (value: number) => Number.isFinite(value) && value > 0;
 
-function imageDirection(basis: number[] | null | undefined) {
-  if (!finiteVector(basis, 6)) return null;
-  const row = basis.slice(0, 3) as vec3;
-  const column = basis.slice(3) as vec3;
-  if (
-    !close(vec3.length(row), 1, 1e-4) ||
-    !close(vec3.length(column), 1, 1e-4) ||
-    // Rounding two unit vectors to four decimals can shift their dot by 1.8e-4.
-    !close(vec3.dot(row, column), 0, 2e-4)
-  )
-    return null;
-  return [...basis, ...vec3.cross([0, 0, 0], row, column)];
-}
-
-/** Validate equally spaced slices along the positive image normal. */
-function frameGridError(positions: number[][], direction: number[] | null) {
-  if (positions.some((p) => p.length !== 3 || !p.every(Number.isFinite)))
-    return 'DICOM slice positions are invalid; spatial reconstruction is required.';
-  if (positions.length < 2) return null;
-  const step = positions
-    .at(-1)!
-    .map((n, axis) => (n - positions[0][axis]) / (positions.length - 1));
-  const distance = Math.hypot(...step);
-  // Patient positions may be printed to four decimal places in millimetres.
-  const tolerance = Math.max(1e-4, distance * 1e-3);
-  if (distance <= 1e-5)
-    return 'Repeated DICOM slice locations need spatial reconstruction.';
-  if (
-    direction &&
-    !areEquals(
-      step,
-      direction.slice(6).map((n) => n * distance),
-      tolerance
-    )
-  )
-    return 'DICOM slice positions do not follow the image grid; spatial reconstruction is required.';
-  if (
-    positions.some(
-      (position, i) =>
-        !areEquals(
-          position,
-          positions[0].map((n, axis) => n + i * step[axis]),
-          tolerance
-        )
-    )
-  )
-    return 'DICOM slices have nonuniform positions; spatial reconstruction is required.';
-  return null;
-}
-
 const SHARED = 'x52009229';
 const PER_FRAME = 'x52009230';
 const MEASURES = 'x00289110';
@@ -161,7 +112,7 @@ function positionError(geometry: ReturnType<typeof frameGeometry>) {
     !positiveNumber(Number(geometry.sliceSpacing))
   )
     return 'OCT slice spacing is unavailable; spatial reconstruction is required.';
-  return frameGridError(positions, direction);
+  return frameGridGeometry(positions, direction ?? undefined).reason;
 }
 
 function geometryError(geometry: ReturnType<typeof frameGeometry>) {
diff --git a/src/core/streaming/dicom/seriesGeometry.ts b/src/core/streaming/dicom/seriesGeometry.ts
new file mode 100644
index 000000000..11df04076
--- /dev/null
+++ b/src/core/streaming/dicom/seriesGeometry.ts
@@ -0,0 +1,150 @@
+import { Tags } from '@/src/core/dicomTags';
+
+import {
+  coordinatesMatch,
+  frameGridGeometry,
+  imageDirection,
+  numbersMatch,
+} from '@/src/core/streaming/dicom/frameGeometry';
+import { OCT_GEOMETRY_ERROR } from '@/src/core/streaming/dicom/octMetadataTags';
+
+type Grid = {
+  spacing: ArrayLike<number>;
+  direction: ArrayLike<number>;
+  origin: ArrayLike<number>;
+};
+
+function vector(tags: Map<string, string>, tag: string, length: number) {
+  const result = tags.get(tag)?.split('\\').map(Number);
+  return result?.length === length && result.every(Number.isFinite)
+    ? result
+    : null;
+}
+
+function declaredSeriesReason(tags: Map<string, string>[]) {
+  const reason = tags
+    .map((entry) => entry.get(OCT_GEOMETRY_ERROR))
+    .find(Boolean);
+  if (reason) return reason;
+  const sop = tags[0].get(Tags.SOPClassUID)?.trim();
+  if (tags.some((entry) => entry.get(Tags.SOPClassUID)?.trim() !== sop))
+    return 'The DICOM files have incompatible image types; spatial reconstruction is required.';
+  const spacing = vector(tags[0], Tags.PixelSpacing, 2);
+  if (
+    tags.some((entry) => {
+      const other = vector(entry, Tags.PixelSpacing, 2);
+      return spacing && other
+        ? !coordinatesMatch(spacing, other)
+        : spacing !== other;
+    })
+  )
+    return 'The DICOM files have inconsistent pixel spacing; spatial reconstruction is required.';
+  return null;
+}
+
+function seriesPositions(tags: Map<string, string>[]) {
+  const positions = tags.map((entry) =>
+    vector(entry, Tags.ImagePositionPatient, 3)
+  );
+  return positions.every((position) => position !== null) ? positions : null;
+}
+
+function loadedGridReason(
+  grid: Grid | undefined,
+  direction: number[],
+  origin: number[],
+  distance: number
+) {
+  if (
+    grid &&
+    (!coordinatesMatch(grid.direction, direction) ||
+      !coordinatesMatch(grid.origin, origin) ||
+      !numbersMatch(grid.spacing[2], distance))
+  )
+    return 'The loaded DICOM grid does not match its file geometry; spatial reconstruction is required.';
+  return null;
+}
+
+function seriesGeometry(tags: Map<string, string>[], grid?: Grid) {
+  const declaredReason = declaredSeriesReason(tags);
+  if (declaredReason) return { reason: declaredReason };
+  const direction = imageDirection(
+    vector(tags[0], Tags.ImageOrientationPatient, 6)
+  );
+  if (
+    !direction ||
+    tags.some((entry) => {
+      const other = imageDirection(
+        vector(entry, Tags.ImageOrientationPatient, 6)
+      );
+      return !other || !coordinatesMatch(direction, other);
+    })
+  )
+    return {
+      reason:
+        'The DICOM files have missing or inconsistent image orientation; spatial reconstruction is required.',
+    };
+  const positions = seriesPositions(tags);
+  if (!positions)
+    return {
+      reason:
+        'The DICOM files have incomplete or invalid slice positions; spatial reconstruction is required.',
+    };
+  const geometry = frameGridGeometry(positions, direction);
+  if (geometry.reason) return geometry;
+  const distance = geometry.distance!;
+  const reason = loadedGridReason(grid, direction, positions[0], distance);
+  return { reason, distance };
+}
+
+function declaredPixelSpacing(tags: Map<string, string>, component: number) {
+  const spacing = tags.get(Tags.PixelSpacing)?.split('\\').map(Number);
+  const value = spacing?.length === 2 ? spacing[component] : NaN;
+  return Number.isFinite(value) && value! > 0 ? value : NaN;
+}
+
+function calibratedAxes(
+  tags: Map<string, string>[],
+  grid: Grid | undefined,
+  distance: number | undefined
+) {
+  const declared = [
+    declaredPixelSpacing(tags[0], 1),
+    declaredPixelSpacing(tags[0], 0),
+    tags.length > 1 ? distance : Number(tags[0].get(Tags.SpacingBetweenSlices)),
+  ];
+  return declared.map((spacing, axis) => {
+    if (!spacing || !Number.isFinite(spacing) || spacing <= 0) return false;
+    if (grid && !numbersMatch(Math.abs(grid.spacing[axis]), spacing))
+      return false;
+    return (
+      axis === 2 ||
+      tags.every((entry) =>
+        numbersMatch(declaredPixelSpacing(entry, 1 - axis), spacing)
+      )
+    );
+  });
+}
+
+/** Validate source slice arrangement against the loaded grid. */
+export function dicomSeriesGeometry(
+  metadata: readonly Iterable<[string, string]>[],
+  grid?: Grid
+) {
+  const tags = metadata.map((entry) =>
+    entry instanceof Map ? entry : new Map(entry)
+  );
+  if (!tags.length)
+    return { reason: null, calibratedAxes: [false, false, false] };
+  const geometry =
+    tags.length > 1
+      ? seriesGeometry(tags, grid)
+      : {
+          reason: tags[0].get(OCT_GEOMETRY_ERROR) ?? null,
+          distance: undefined,
+        };
+  return {
+    ...geometry,
+    calibratedAxes: calibratedAxes(tags, grid, geometry.distance),
+  };
+}
diff --git a/src/enface/EnFaceControlPanel.vue b/src/enface/EnFaceControlPanel.vue
index 72b3bbd71..b85a1f05e 100644
--- a/src/enface/EnFaceControlPanel.vue
+++ b/src/enface/EnFaceControlPanel.vue
@@ -31,6 +31,13 @@ const controlState = computed(() => {
     axes: [],
     depthMaximum: 0,
     projectionReason: reason,
+    thickness: {
+      thresholdMaximum: 1,
+      segmentationReason: reason,
+      highlightReason: reason,
+      thicknessReason: reason,
+      segments: [],
+    },
   } satisfies EnFaceViewControlState;
 });
 function patch(patchSettings: Partial<EnFaceViewConfig>) {
diff --git a/src/enface/EnFaceControls.vue b/src/enface/EnFaceControls.vue
index 891eea578..290840d9d 100644
--- a/src/enface/EnFaceControls.vue
+++ b/src/enface/EnFaceControls.vue
@@ -3,6 +3,7 @@ import { ref, watch } from 'vue';
 import ReasonedAction from '@/src/components/ReasonedAction.vue';
 import { rangeThumbLabels } from '@/src/utils/rangeThumbLabels';
 import { SLAB_METHODS } from '@/src/core/slab/types';
+import EnFaceThicknessControls from './EnFaceThicknessControls.vue';
 import type { EnFaceViewConfig, EnFaceViewControlState } from './store';
 
 const props = defineProps<
@@ -11,7 +12,7 @@ const props = defineProps<
 const emit = defineEmits<{
   patch: [settings: Partial<EnFaceViewConfig>];
 }>();
-const expandedSections = ref([0]);
+const expandedSections = ref([0, 1]);
 const slabDraft = ref<number[] | null>(null);
 watch(
   () => [
@@ -152,6 +153,12 @@ function updateAxis(axis: number) {
             </ReasonedAction>
           </v-expansion-panel-text>
         </v-expansion-panel>
+        <EnFaceThicknessControls
+          v-bind="thickness"
+          :settings="settings"
+          :embedded="embedded"
+          @patch="emit('patch', $event)"
+        />
       </v-expansion-panels>
     </v-card-text>
   </v-card>
diff --git a/src/enface/EnFaceMeasurementStatus.vue b/src/enface/EnFaceMeasurementStatus.vue
new file mode 100644
index 000000000..90571846f
--- /dev/null
+++ b/src/enface/EnFaceMeasurementStatus.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{ message: string | null }>();
+</script>
+
+<template>
+  <div
+    v-if="message"
+    class="measurement-status"
+    role="status"
+    aria-live="polite"
+    data-testid="enface-measurement-status"
+  >
+    {{ message }}
+  </div>
+</template>
+
+<style scoped>
+.measurement-status {
+  position: absolute;
+  bottom: 8px;
+  left: 12px;
+  right: 80px;
+  padding: 4px 6px;
+  background: rgb(0 0 0 / 65%);
+  border-radius: 4px;
+  color: white;
+  font-size: 0.75rem;
+  pointer-events: none;
+}
+</style>
diff --git a/src/enface/EnFaceThicknessControls.vue b/src/enface/EnFaceThicknessControls.vue
new file mode 100644
index 000000000..c893067b1
--- /dev/null
+++ b/src/enface/EnFaceThicknessControls.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import ReasonedAction from '@/src/components/ReasonedAction.vue';
+import ColorDot from '@/src/components/ColorDot.vue';
+import { EN_FACE_THICKNESS_HELP } from './thickness';
+import type { EnFaceViewConfig, ThicknessControlState } from './store';
+
+const props = defineProps<
+  ThicknessControlState & { settings: EnFaceViewConfig; embedded?: boolean }
+>();
+const emit = defineEmits<{
+  patch: [settings: Partial<EnFaceViewConfig>];
+}>();
+const thresholdReason = computed(
+  () =>
+    props.thicknessReason ||
+    (!props.settings.highlightThin
+      ? 'Enable thin-region highlighting to adjust the threshold.'
+      : null)
+);
+function updateThreshold(value: string | number | null) {
+  const parsed = Number(value);
+  if (value !== null && value !== '' && Number.isFinite(parsed))
+    emit('patch', { thresholdMicrons: Math.max(0, parsed) });
+}
+function updateSliderThreshold(value: number) {
+  updateThreshold(Math.round(value * 10) / 10);
+}
+function updateSegment(selectedSegmentId: string | null) {
+  emit('patch', { selectedSegmentId });
+}
+function updateHighlight(highlightThin: boolean | null) {
+  emit('patch', { highlightThin: !!highlightThin });
+}
+</script>
+
+<template>
+  <v-expansion-panel bg-color="transparent" :class="{ embedded }">
+    <v-expansion-panel-title
+      class="section-title"
+      :min-height="36"
+      data-testid="enface-thickness-toggle"
+      >Thickness highlighting</v-expansion-panel-title
+    >
+    <v-expansion-panel-text class="thickness-controls">
+      <ReasonedAction :reason="highlightReason ?? undefined" block>
+        <v-switch
+          :model-value="settings.highlightThin"
+          @update:model-value="updateHighlight"
+          color="secondary"
+          density="compact"
+          hide-details
+          :disabled="!!highlightReason"
+          aria-label="Highlight thin regions"
+          data-testid="enface-thin-highlight"
+          label="Highlight thin regions"
+        />
+      </ReasonedAction>
+      <ReasonedAction :reason="segmentationReason ?? undefined" block>
+        <v-select
+          :model-value="settings.selectedSegmentId"
+          @update:model-value="updateSegment"
+          :items="segments"
+          label="Thickness segment"
+          :placeholder="
+            segments.length ? undefined : 'No associated segmentation'
+          "
+          persistent-placeholder
+          density="compact"
+          variant="outlined"
+          hide-details
+          :disabled="!!segmentationReason"
+          aria-label="Thickness segment"
+          data-testid="enface-segmentation-segment"
+        >
+          <template #selection="{ item }">
+            <span class="d-inline-flex align-center overflow-hidden">
+              <ColorDot
+                v-if="item.raw.color"
+                :color="item.raw.color"
+                class="mr-2 flex-shrink-0"
+                aria-hidden="true"
+                data-testid="enface-segment-color"
+              />
+              <span class="text-truncate">{{ item.title }}</span>
+            </span>
+          </template>
+          <template #item="{ props: itemProps, item }">
+            <v-list-item v-bind="itemProps">
+              <template #prepend>
+                <ColorDot
+                  v-if="item.raw.color"
+                  :color="item.raw.color"
+                  class="mr-2"
+                  aria-hidden="true"
+                  data-testid="enface-segment-option-color"
+                />
+              </template>
+            </v-list-item>
+          </template>
+        </v-select>
+      </ReasonedAction>
+      <div class="threshold-heading">
+        <span class="threshold-label text-body-2">
+          Thickness below
+          <ReasonedAction :tooltip="EN_FACE_THICKNESS_HELP" class="ml-1">
+            <v-btn
+              icon="mdi-information-outline"
+              size="x-small"
+              variant="text"
+              aria-label="About thickness highlighting"
+              data-testid="enface-thickness-help"
+            />
+          </ReasonedAction>
+        </span>
+        <ReasonedAction
+          :reason="thresholdReason ?? undefined"
+          class="threshold-value"
+          block
+        >
+          <v-text-field
+            :model-value="settings.thresholdMicrons"
+            @update:model-value="updateThreshold"
+            type="number"
+            min="0"
+            step="any"
+            suffix="µm"
+            density="compact"
+            variant="outlined"
+            hide-details
+            :disabled="!!thresholdReason"
+            aria-label="Thickness threshold in micrometers"
+            data-testid="enface-thickness-threshold-input"
+          />
+        </ReasonedAction>
+      </div>
+      <ReasonedAction :reason="thresholdReason ?? undefined" block>
+        <v-slider
+          :model-value="Math.min(settings.thresholdMicrons, thresholdMaximum)"
+          @update:model-value="updateSliderThreshold"
+          min="0"
+          :max="thresholdMaximum"
+          :step="0"
+          density="compact"
+          hide-details
+          :disabled="!!thresholdReason"
+          name="Thickness threshold in micrometers"
+          data-testid="enface-thickness-threshold"
+        />
+      </ReasonedAction>
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+</template>
+
+<style scoped>
+.section-title {
+  padding: 0 4px;
+  font-size: 0.8125rem;
+}
+.threshold-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+}
+.embedded .threshold-heading {
+  flex-wrap: wrap;
+}
+.threshold-label {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.threshold-value {
+  width: 112px;
+  flex: 0 0 112px;
+}
+/* Outranks the parent's section padding regardless of stylesheet order. */
+.v-expansion-panel-text.thickness-controls
+  :deep(.v-expansion-panel-text__wrapper) {
+  padding-top: 0;
+}
+:deep(.v-switch .v-label) {
+  font-size: 0.875rem;
+}
+</style>
diff --git a/src/enface/EnFaceViewer.vue b/src/enface/EnFaceViewer.vue
index 3dd82e300..9455fff5a 100644
--- a/src/enface/EnFaceViewer.vue
+++ b/src/enface/EnFaceViewer.vue
@@ -4,6 +4,8 @@ import { useViewWindowingRanges } from '@/src/composables/useViewWindowingRanges
 import { useReferenceLinesStore } from '@/src/referenceLines';
 import { slabWindowRanges } from '@/src/core/slab/windowRanges';
 import { useEnFaceInput } from './useEnFaceInput';
+import { useEnFaceOccupiedDepth } from './useEnFaceOccupiedDepth';
+import VtkEnFaceLabelmapRepresentation from './VtkEnFaceLabelmapRepresentation.vue';
 import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
 import VtkSliceViewNavigation from '@/src/components/vtk/VtkSliceViewNavigation.vue';
 import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
@@ -21,6 +23,7 @@ import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
 import ReasonedAction from '@/src/components/ReasonedAction.vue';
 import EnFaceControlPanel from './EnFaceControlPanel.vue';
 import EnFaceStatus from './EnFaceStatus.vue';
+import EnFaceMeasurementStatus from './EnFaceMeasurementStatus.vue';
 import { useEnFaceViewStore } from './store';
 
 const props = defineProps<{ viewId: string }>();
@@ -70,10 +73,22 @@ const windowingManipulatorProps = computed(() => ({
 const stateMessage = computed(
   () => controls.value.projectionReason || fatalContextError.value
 );
+const {
+  overlay: thinRegions,
+  controls: thicknessControls,
+  measuring,
+  message: measurementMessage,
+} = useEnFaceOccupiedDepth(viewId, {
+  source,
+  slab: specification,
+  geometry,
+  blockedReason: stateMessage,
+});
 const enFaceStore = useEnFaceViewStore();
 const controlState = computed(() => ({
   ...controls.value,
   projectionReason: stateMessage.value,
+  thickness: thicknessControls.value,
 }));
 watch(
   [viewId, currentImageID, controlState],
@@ -88,7 +103,7 @@ watch(
   <div
     class="en-face-viewer"
     tabindex="0"
-    :aria-busy="sourceLoading"
+    :aria-busy="sourceLoading || measuring"
     data-testid="enface-viewer"
   >
     <v-progress-linear
@@ -142,8 +157,10 @@ watch(
         :plane-origin="geometry.planeOrigin"
         :plane-normal="geometry.planeNormal"
       />
+      <VtkEnFaceLabelmapRepresentation v-bind="thinRegions" />
     </VtkSliceView>
     <EnFaceStatus :message="stateMessage" :ready="projectionReady" />
+    <EnFaceMeasurementStatus :message="measurementMessage" />
     <ViewOverlayGrid class="overlay-no-events view-annotations">
       <template #top-left>
         <div class="annotation-cell" @click.stop @dblclick.stop>
diff --git a/src/enface/VtkEnFaceLabelmapRepresentation.vue b/src/enface/VtkEnFaceLabelmapRepresentation.vue
new file mode 100644
index 000000000..1b6a064d3
--- /dev/null
+++ b/src/enface/VtkEnFaceLabelmapRepresentation.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, inject, toRefs } from 'vue';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import {
+  useLabelmapRepresentation,
+  type LabelmapAppearance,
+} from '@/src/segmentation/rendering/useLabelmapRepresentation';
+import {
+  useEnFaceLabelmaps,
+  type MeasurementPlaneGeometry,
+} from './useEnFaceLabelmaps';
+import type { OccupiedDepthResult } from '@/src/segmentation/measurements/occupiedDepth';
+
+const props = defineProps<{
+  geometry: MeasurementPlaneGeometry | null;
+  measurement: OccupiedDepthResult | null;
+  micronsPerVoxel: number;
+  threshold: number;
+  appearance: LabelmapAppearance | null;
+}>();
+const { geometry, measurement, micronsPerVoxel, threshold, appearance } =
+  toRefs(props);
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+const thinRegions = useEnFaceLabelmaps(
+  geometry,
+  measurement,
+  threshold,
+  micronsPerVoxel
+);
+useLabelmapRepresentation(
+  view,
+  computed(() => (appearance.value ? thinRegions.value : null)),
+  appearance,
+  { axis: 2 }
+);
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/src/enface/__tests__/calibration.spec.ts b/src/enface/__tests__/calibration.spec.ts
new file mode 100644
index 000000000..7e7f6dc9a
--- /dev/null
+++ b/src/enface/__tests__/calibration.spec.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import type { Chunk } from '@/src/core/streaming/chunk';
+import { Tags } from '@/src/core/dicomTags';
+import { allocateImageFromChunks } from '@/src/utils/allocateImageFromChunks';
+import { OPHTHALMIC_TOMOGRAPHY_SOP } from '@/src/core/streaming/dicom/octMetadataTags';
+import { measureOccupiedDepth } from '@/src/segmentation/measurements/occupiedDepth';
+
+describe('OCT occupied depth through DICOM allocation', () => {
+  it.each(['0.0104\\0', '0.0104\\NaN'])(
+    'measures the declared A-line spacing when another axis is unavailable: %s',
+    (pixelSpacing) => {
+      const metadata = Object.entries({
+        [Tags.SOPClassUID]: OPHTHALMIC_TOMOGRAPHY_SOP,
+        [Tags.Rows]: '2',
+        [Tags.Columns]: '2',
+        [Tags.NumberOfFrames]: '2',
+        [Tags.BitsStored]: '16',
+        [Tags.PixelRepresentation]: '0',
+        [Tags.PixelSpacing]: pixelSpacing,
+        [Tags.SpacingBetweenSlices]: '0.1',
+      });
+      const image = allocateImageFromChunks([{ metadata } as unknown as Chunk]);
+      expect(image.getSpacing()).toEqual([1, 0.0104, 0.1]);
+      const result = measureOccupiedDepth({
+        dimensions: image.getDimensions(),
+        axis: 1,
+        first: 0,
+        last: 1,
+        mask: {
+          dimensions: image.getDimensions(),
+          extent: [0, 1, 0, 1, 0, 1],
+          values: new Uint8Array(8).fill(1),
+        },
+      });
+      expect(
+        Array.from(
+          result.counts,
+          (count) => count * image.getSpacing()[1] * 1000
+        )
+      ).toEqual(Array(4).fill(20.8));
+      image.delete();
+    }
+  );
+});
diff --git a/src/enface/__tests__/controls.spec.ts b/src/enface/__tests__/controls.spec.ts
index abf94ca6d..cad15aab2 100644
--- a/src/enface/__tests__/controls.spec.ts
+++ b/src/enface/__tests__/controls.spec.ts
@@ -1,13 +1,24 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { enableAutoUnmount, mount } from '@vue/test-utils';
-import { nextTick, reactive } from 'vue';
-
+import { computed, defineComponent, h, nextTick, reactive, ref } from 'vue';
+import { createPinia, setActivePinia } from 'pinia';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { CurrentImageInjectionKey } from '@/src/composables/useCurrentImage';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { useSegmentationStore } from '@/src/segmentation/store';
+import { useSegmentStore } from '@/src/segmentation/segments';
+import { useEnFaceInput } from '@/src/enface/useEnFaceInput';
+import { useEnFaceOccupiedDepth } from '@/src/enface/useEnFaceOccupiedDepth';
 import { createVuetify } from 'vuetify';
 import EnFaceControls from '@/src/enface/EnFaceControls.vue';
 import {
   defaultEnFaceViewConfig,
+  useEnFaceViewStore,
   type EnFaceViewConfig,
+  type ThicknessControlState,
 } from '@/src/enface/store';
+import ReasonedAction from '@/src/components/ReasonedAction.vue';
 
 beforeEach(() => {
   vi.stubGlobal('visualViewport', null);
@@ -18,6 +29,8 @@ enableAutoUnmount(afterEach);
 function mountControls(overrides = {}) {
   const settings = reactive({
     ...defaultEnFaceViewConfig(),
+    highlightThin: true,
+    selectedSegmentId: 'retina',
     ...overrides,
   });
   return mount(EnFaceControls, {
@@ -33,6 +46,15 @@ function mountControls(overrides = {}) {
         Object.assign(settings, patch),
       depthMaximum: 221,
       projectionReason: null,
+      thickness: {
+        thresholdMaximum: 200,
+        segmentationReason: null,
+        highlightReason: null,
+        thicknessReason: null,
+        segments: [
+          { value: 'retina', title: 'Retinal layer', color: '#ff0000' },
+        ],
+      },
     },
     global: { plugins: [createVuetify()] },
   });
@@ -42,18 +64,55 @@ function lastPatch(wrapper: ReturnType<typeof mountControls>) {
   return wrapper.emitted('patch')?.at(-1)?.[0];
 }
 
+function setThickness(
+  wrapper: ReturnType<typeof mountControls>,
+  thickness: Partial<ThicknessControlState>
+) {
+  return wrapper.setProps({
+    thickness: { ...wrapper.props('thickness'), ...thickness },
+  });
+}
+
 describe('En face rendering controls', () => {
-  it('starts projection controls expanded and can collapse them', async () => {
+  it('starts both sections expanded and collapses them independently', async () => {
     const wrapper = mountControls();
-    const projection = wrapper.get('[data-testid="enface-projection-toggle"]');
-    expect(projection.attributes('aria-expanded')).toBe('true');
+    for (const section of ['projection', 'thickness']) {
+      expect(
+        wrapper
+          .get(`[data-testid="enface-${section}-toggle"]`)
+          .attributes('aria-expanded')
+      ).toBe('true');
+    }
+    expect(
+      wrapper.find('[data-testid="enface-segmentation-segment"] input').exists()
+    ).toBe(true);
+    expect(
+      wrapper
+        .find('[data-testid="enface-thickness-threshold-input"] input')
+        .exists()
+    ).toBe(true);
     expect(wrapper.find('[data-testid="enface-window-width"]').exists()).toBe(
       false
     );
+    expect(
+      wrapper.get('[data-testid="enface-projection-method"] input').element
+    ).toBeDefined();
+    expect(
+      wrapper
+        .get('[data-testid="enface-thin-highlight"]')
+        .element.compareDocumentPosition(
+          wrapper.get('[data-testid="enface-segmentation-segment"]').element
+        ) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+    const projection = wrapper.get('[data-testid="enface-projection-toggle"]');
+    const thickness = wrapper.get('[data-testid="enface-thickness-toggle"]');
     await projection.trigger('click');
     expect(projection.attributes('aria-expanded')).toBe('false');
+    expect(thickness.attributes('aria-expanded')).toBe('true');
+    await thickness.trigger('click');
     await projection.trigger('click');
     expect(projection.attributes('aria-expanded')).toBe('true');
+    expect(thickness.attributes('aria-expanded')).toBe('false');
   });
 
   it('preserves saved projection settings when collapsed and reopened', async () => {
@@ -91,6 +150,178 @@ describe('En face rendering controls', () => {
     expect(wrapper.emitted('patch')).toBeUndefined();
   });
 
+  it('shows segment colors in the selected segment and its dropdown options', async () => {
+    const wrapper = mountControls();
+    const swatch = () => wrapper.get('[data-testid="enface-segment-color"]');
+    expect(swatch().attributes('style')).toContain('background-color: #ff0000');
+    await wrapper.setProps({
+      thickness: {
+        ...wrapper.props('thickness'),
+        segments: [
+          { value: 'retina', title: 'Retinal layer', color: '#ff0000' },
+          { value: 'other-layer', title: 'Other layer', color: '#00ff00' },
+        ],
+      },
+      settings: {
+        ...wrapper.props('settings'),
+        selectedSegmentId: 'other-layer',
+      },
+    });
+    expect(swatch().attributes('style')).toContain('background-color: #00ff00');
+    expect(
+      wrapper.get('[data-testid="enface-segmentation-segment"]').text()
+    ).toContain('Other layer');
+    await wrapper
+      .get('[data-testid="enface-segmentation-segment"] input')
+      .trigger('keydown', { key: 'Enter' });
+    await vi.waitFor(() => {
+      const options = document.body.querySelectorAll('[role="option"]');
+      expect(options).toHaveLength(2);
+      for (const [index, [name, color]] of [
+        ['Retinal layer', '#ff0000'],
+        ['Other layer', '#00ff00'],
+      ].entries()) {
+        expect(options[index].textContent).toContain(name);
+        expect(
+          options[index]
+            .querySelector('[data-testid="enface-segment-option-color"]')
+            ?.getAttribute('style')
+        ).toContain(`background-color: ${color}`);
+      }
+    });
+    (
+      document.body.querySelectorAll('[role="option"]')[0] as HTMLElement
+    ).click();
+    await nextTick();
+    expect(lastPatch(wrapper)).toEqual({ selectedSegmentId: 'retina' });
+    expect(
+      wrapper
+        .get('[data-testid="enface-thin-highlight"]')
+        .find('.color-dot')
+        .exists()
+    ).toBe(false);
+    expect(
+      wrapper.get('[data-testid="enface-thin-highlight"]').text()
+    ).toContain('Highlight thin regions');
+    await setThickness(wrapper, { segments: [] });
+    expect(wrapper.find('[data-testid="enface-segment-color"]').exists()).toBe(
+      false
+    );
+  });
+  it('preserves a decimal micron threshold and ignores a cleared numeric entry', async () => {
+    const wrapper = mountControls();
+    const input = wrapper.get(
+      '[data-testid="enface-thickness-threshold-input"] input'
+    );
+    await input.setValue('20.8');
+    expect(lastPatch(wrapper)).toEqual({ thresholdMicrons: 20.8 });
+    expect(
+      wrapper
+        .get('[data-testid="enface-thickness-threshold"] [role="slider"]')
+        .attributes('aria-valuenow')
+    ).toBe('20.8');
+    const previousCount = wrapper.emitted('patch')!.length;
+    await input.setValue('');
+    expect(wrapper.emitted('patch')).toHaveLength(previousCount);
+  });
+
+  it('keeps the threshold slider range fixed while preserving larger numeric thresholds', async () => {
+    const wrapper = mountControls();
+    const slider = wrapper.get(
+      '[data-testid="enface-thickness-threshold"] [role="slider"]'
+    );
+    expect(slider.attributes('aria-label')).toBe(
+      'Thickness threshold in micrometers'
+    );
+    expect(slider.attributes('aria-valuemax')).toBe('200');
+    await slider.trigger('keydown', { key: 'ArrowRight' });
+    expect(lastPatch(wrapper)).toEqual({ thresholdMicrons: 100.1 });
+    expect(
+      wrapper.get<HTMLInputElement>(
+        '[data-testid="enface-thickness-threshold-input"] input'
+      ).element.value
+    ).toBe(slider.attributes('aria-valuenow'));
+    for (const [key, expected] of [
+      ['Home', 0],
+      ['End', 200],
+    ] as const) {
+      await slider.trigger('keydown', { key });
+      expect(lastPatch(wrapper)).toEqual({ thresholdMicrons: expected });
+    }
+    await wrapper
+      .get<HTMLInputElement>(
+        '[data-testid="enface-thickness-threshold-input"] input'
+      )
+      .setValue('750.25');
+    expect(lastPatch(wrapper)).toEqual({ thresholdMicrons: 750.25 });
+    expect(slider.attributes('aria-valuemax')).toBe('200');
+    expect(slider.attributes('aria-valuenow')).toBe('200');
+    expect(
+      wrapper.get<HTMLInputElement>(
+        '[data-testid="enface-thickness-threshold-input"] input'
+      ).element.value
+    ).toBe('750.25');
+    await setThickness(wrapper, { thresholdMaximum: 50 });
+    expect(slider.attributes('aria-valuemax')).toBe('50');
+    expect(slider.attributes('aria-valuenow')).toBe('50');
+    expect(
+      wrapper.get<HTMLInputElement>(
+        '[data-testid="enface-thickness-threshold-input"] input'
+      ).element.value
+    ).toBe('750.25');
+  });
+
+  it('keeps thickness actions disabled when the selected axis has unusable spacing', async () => {
+    const wrapper = mountControls();
+    const reason = 'The selected image axis has unusable voxel spacing.';
+    await setThickness(wrapper, {
+      highlightReason: reason,
+      thicknessReason: reason,
+    });
+    expect(
+      wrapper
+        .get('[data-testid="enface-segmentation-segment"] input')
+        .attributes('disabled')
+    ).toBeUndefined();
+    expect(
+      wrapper
+        .get('[data-testid="enface-thin-highlight"] input')
+        .attributes('disabled')
+    ).toBeDefined();
+    const slider = wrapper.get(
+      '[data-testid="enface-thickness-threshold"] [role="slider"]'
+    );
+    expect(slider.attributes('aria-label')).toBe(
+      'Thickness threshold in micrometers'
+    );
+    expect(slider.attributes('tabindex')).toBe('-1');
+    await slider.trigger('keydown', { key: 'ArrowRight' });
+    expect(wrapper.emitted('patch')).toBeUndefined();
+    const action = wrapper
+      .findAllComponents(ReasonedAction)
+      .find((candidate) =>
+        candidate.find('[data-testid="enface-thin-highlight"]').exists()
+      );
+    expect(action?.props('reason')).toBe(reason);
+  });
+
+  it('explains occupied-mask thickness and its user threshold on keyboard focus', async () => {
+    const wrapper = mountControls();
+    expect(
+      wrapper.get('[data-testid="enface-segmentation-segment"]').text()
+    ).toContain('Thickness segment');
+    const help = wrapper.get<HTMLButtonElement>(
+      '[data-testid="enface-thickness-help"]'
+    );
+    help.element.focus();
+    expect(document.activeElement).toBe(help.element);
+    await vi.waitFor(() => {
+      expect(document.body.textContent).toContain(
+        'Thickness of the selected segment within the slab, along the projection axis.'
+      );
+    });
+  });
+
   it('keeps slab help on its information button while leaving the range free of hover tooltips', async () => {
     const wrapper = mountControls();
     await nextTick();
@@ -153,4 +384,155 @@ describe('En face rendering controls', () => {
     expect(end.attributes('aria-valuenow')).toBe('181');
     expect(range.text()).toContain('181');
   });
+  it('keeps unavailable thickness controls visible and exposes the reason through their wrapper', async () => {
+    const wrapper = mountControls();
+    const toggle = wrapper.get('[data-testid="enface-thin-highlight"] input');
+    const segment = wrapper.get(
+      '[data-testid="enface-segmentation-segment"] input'
+    );
+    await toggle.setValue(false);
+    expect(segment.attributes('disabled')).toBeUndefined();
+    const segmentAction = wrapper
+      .findAllComponents(ReasonedAction)
+      .find((action) =>
+        action.find('[data-testid="enface-segmentation-segment"]').exists()
+      );
+    expect(segmentAction?.props('reason')).toBeUndefined();
+    await setThickness(wrapper, {
+      thicknessReason: 'The selected segment is hidden.',
+    });
+    expect(toggle.attributes('disabled')).toBeUndefined();
+    await toggle.setValue(true);
+    expect(segment.attributes('disabled')).toBeUndefined();
+    const reason = 'Load an associated segmentation to measure thickness.';
+    await setThickness(wrapper, {
+      segments: [],
+      segmentationReason: reason,
+      highlightReason: reason,
+      thicknessReason: reason,
+    });
+    expect(
+      wrapper
+        .get('[data-testid="enface-thin-highlight"] input')
+        .attributes('disabled')
+    ).toBeDefined();
+    expect(
+      wrapper
+        .get<HTMLInputElement>(
+          '[data-testid="enface-thickness-threshold-input"] input'
+        )
+        .attributes('disabled')
+    ).toBeDefined();
+    const thresholdAction = wrapper
+      .findAllComponents(ReasonedAction)
+      .find((action) =>
+        action.find('[data-testid="enface-thickness-threshold-input"]').exists()
+      );
+    expect(thresholdAction?.props('reason')).toBe(reason);
+    expect(thresholdAction?.attributes('tabindex')).toBe('0');
+  });
+});
+
+function mountImageControls(spacing = 0.01) {
+  const pinia = createPinia();
+  setActivePinia(pinia);
+  const source = vtkImageData.newInstance();
+  source.setDimensions([2, 2, 2]);
+  source.setSpacing([0.03, spacing, 0.2]);
+  source
+    .getPointData()
+    .setScalars(
+      vtkDataArray.newInstance({ values: new Uint8Array(8).fill(1) })
+    );
+  const cache = useImageCacheStore();
+  const imageId = cache.addVTKImageData(source, 'relative-spacing.vti');
+  const segmentation = useSegmentationStore();
+  const segmentId = useSegmentStore().segments.addSegment({ name: 'Retina' });
+  const mask = segmentation.createMask(
+    segmentation.ensureSegmentationForImage(imageId).id,
+    segmentId
+  );
+  const voxels = segmentation.maskVoxels(mask.id);
+  voxels.materialize();
+  voxels.ensureContains([0, 1, 0, 1, 0, 1]);
+  voxels.apply(new Uint8Array(8).fill(1));
+  const component = defineComponent({
+    setup() {
+      const input = useEnFaceInput('measurement-view');
+      const thickness = useEnFaceOccupiedDepth('measurement-view', {
+        source: input.source,
+        slab: input.specification,
+        geometry: input.geometry,
+        blockedReason: computed(() => input.controls.value.projectionReason),
+      });
+      const enFaceStore = useEnFaceViewStore();
+      return () =>
+        h(EnFaceControls, {
+          ...input.controls.value,
+          settings: enFaceStore.settingsFor(
+            'measurement-view',
+            input.source.currentImageID.value
+          ),
+          thickness: thickness.controls.value,
+        });
+    },
+  });
+  const wrapper = mount(component, {
+    attachTo: document.body,
+    global: {
+      plugins: [pinia, createVuetify()],
+      provide: {
+        [CurrentImageInjectionKey as symbol]: { imageID: ref(imageId) },
+      },
+    },
+  });
+  return { source, wrapper, dispose: () => cache.removeImage(imageId) };
+}
+
+describe('thickness control geometry', () => {
+  it.each([0.01, -0.01])(
+    'allows loaded spacing %f without a separate physical-unit declaration',
+    (spacing) => {
+      const { wrapper, dispose } = mountImageControls(spacing);
+      try {
+        expect(
+          wrapper
+            .get('[data-testid="enface-thin-highlight"] input')
+            .attributes('disabled')
+        ).toBeUndefined();
+      } finally {
+        wrapper.unmount();
+        dispose();
+      }
+    }
+  );
+
+  it.each([0, NaN, Infinity])(
+    'disables thickness controls after the projection axis spacing becomes %s',
+    async (spacing) => {
+      const { source, wrapper, dispose } = mountImageControls();
+      try {
+        source.setSpacing([0.03, spacing, 0.2]);
+        await nextTick();
+        expect(
+          wrapper
+            .get('[data-testid="enface-thin-highlight"] input')
+            .attributes('disabled')
+        ).toBeDefined();
+        const action = wrapper
+          .get('[data-testid="enface-thin-highlight"]')
+          .element.closest<HTMLElement>('[tabindex="0"]');
+        expect(action).not.toBeNull();
+        action!.focus();
+        await vi.waitFor(() => {
+          expect(document.body.textContent).toContain(
+            'The projection axis has invalid voxel spacing'
+          );
+        });
+      } finally {
+        wrapper.unmount();
+        dispose();
+      }
+    }
+  );
 });
diff --git a/src/enface/__tests__/inputCalibration.spec.ts b/src/enface/__tests__/inputCalibration.spec.ts
new file mode 100644
index 000000000..899225da0
--- /dev/null
+++ b/src/enface/__tests__/inputCalibration.spec.ts
@@ -0,0 +1,278 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { computed, defineComponent, h, markRaw, nextTick, ref } from 'vue';
+import { createVuetify } from 'vuetify';
+import { Tags } from '@/src/core/dicomTags';
+import { CurrentImageInjectionKey } from '@/src/composables/useCurrentImage';
+import { untilLoaded } from '@/src/composables/untilLoaded';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { useEnFaceInput } from '@/src/enface/useEnFaceInput';
+import { useOccupiedDepthInput } from '@/src/enface/useOccupiedDepthInput';
+import EnFaceControls from '@/src/enface/EnFaceControls.vue';
+import { useEnFaceViewStore } from '@/src/enface/store';
+import { useSegmentStore } from '@/src/segmentation/segments';
+import { useSegmentationStore } from '@/src/segmentation/store';
+import { allocateMask } from '@/src/segmentation/masks/storage';
+import { measureOccupiedDepth } from '@/src/segmentation/measurements/occupiedDepth';
+import { createOCTFixture } from '@/tests/unit/octFixture';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import type { mat3 } from 'gl-matrix';
+import type { Extent3D } from '@/src/segmentation/geometry';
+
+beforeEach(() => setActivePinia(createPinia()));
+afterEach(() => {
+  const cache = useImageCacheStore();
+  [...cache.imageIds].forEach((id) => cache.removeImage(id));
+});
+
+async function inputFor(pixelSpacing: string, oblique = false) {
+  const fixture = createOCTFixture();
+  await fixture.chunk.loadMeta();
+  fixture.chunk.metadata!.push([Tags.PixelSpacing, pixelSpacing]);
+  await fixture.image.addChunks([fixture.chunk]);
+  const cache = useImageCacheStore();
+  const id = cache.addProgressiveImage(fixture.image);
+  fixture.image.startLoad();
+  await untilLoaded(id);
+  if (oblique) {
+    const angle = (3 * Math.PI) / 180;
+    const c = Number(Math.cos(angle).toFixed(14));
+    const s = Number(Math.sin(angle).toFixed(14));
+    fixture.image.getVtkImageData().setDirection([c, s, 0, -s, c, 0, 0, 0, 1]);
+  }
+  return mountInput(id);
+}
+
+async function mountInput(id: string) {
+  const image = useImageCacheStore().getVtkImageData(id)!;
+  const segmentation = useSegmentationStore();
+  const segment = useSegmentStore().segments.addSegment({ name: 'Layer' });
+  const mask = segmentation.createMask(
+    segmentation.ensureSegmentationForImage(id).id,
+    segment
+  );
+  const [i, , j, , k] = image.getExtent();
+  const extent: Extent3D = [i, i + 1, j, j + 1, k, k + 1];
+  mask.representations.labelmap = {
+    image: markRaw(allocateMask(image, extent)),
+    extent,
+    name: 'Layer.vti',
+  };
+  segmentation.maskVoxels(mask.id).apply(new Uint8Array(8).fill(1));
+  const settings = useEnFaceViewStore().configFor('calibration', id);
+  settings.highlightThin = true;
+  const host = defineComponent({
+    setup() {
+      const projection = useEnFaceInput('calibration');
+      const input = useOccupiedDepthInput('calibration', {
+        source: projection.source,
+        slab: projection.specification,
+        blockedReason: computed(
+          () => projection.controls.value.projectionReason
+        ),
+      });
+      return () => {
+        const request = input.request.value;
+        const result = request ? measureOccupiedDepth(request) : null;
+        return h('div', [
+          h(
+            'output',
+            {
+              'data-measurable': Boolean(request),
+              'data-counts': result ? Array.from(result.counts).join(',') : '',
+              'data-depth': result
+                ? result.maximumCount * input.micronsPerVoxel.value
+                : '',
+            },
+            input.thicknessReason.value ?? 'Ready'
+          ),
+          h(EnFaceControls, {
+            ...projection.controls.value,
+            settings: input.settings.value,
+            thickness: {
+              thresholdMaximum: 200,
+              segmentationReason: input.segmentationReason.value,
+              highlightReason: input.highlightReason.value,
+              thicknessReason: input.thicknessReason.value,
+              segments: input.segmentOptions.value,
+            },
+          }),
+        ]);
+      };
+    },
+  });
+  const wrapper = mount(host, {
+    global: {
+      plugins: [createVuetify()],
+      provide: {
+        [CurrentImageInjectionKey as symbol]: { imageID: ref(id) },
+      },
+    },
+  });
+  await nextTick();
+  return {
+    wrapper,
+    settings,
+    image,
+    maskImage: segmentation.findMaskBinding(mask.id)!.image,
+  };
+}
+
+describe('occupied-depth input calibration', () => {
+  it.each(['0\\0.0117', 'NaN\\0.0117', '0.0104'])(
+    'rejects fallback depth spacing from PixelSpacing %s',
+    async (spacing) => {
+      const { wrapper } = await inputFor(spacing);
+      try {
+        expect(wrapper.get('output').attributes('data-measurable')).toBe(
+          'false'
+        );
+        expect(wrapper.text()).toMatch(/no reliable declared voxel spacing/);
+        for (const control of ['thin-highlight', 'thickness-threshold-input'])
+          expect(
+            wrapper
+              .get(`[data-testid="enface-${control}"] input`)
+              .attributes('disabled')
+          ).toBeDefined();
+      } finally {
+        wrapper.unmount();
+      }
+    }
+  );
+
+  it('keeps the declared axis measurable and rejects a defaulted axis after switching', async () => {
+    const { wrapper, settings } = await inputFor('0.0104\\0');
+    try {
+      expect(wrapper.get('output').attributes('data-measurable')).toBe('true');
+      expect(wrapper.get('output').attributes('data-depth')).toBe('20.8');
+      const highlight = wrapper.get(
+        '[data-testid="enface-thin-highlight"] input'
+      );
+      const threshold = wrapper.get(
+        '[data-testid="enface-thickness-threshold-input"] input'
+      );
+      expect(highlight.attributes('disabled')).toBeUndefined();
+      expect(threshold.attributes('disabled')).toBeUndefined();
+      settings.axis = 0;
+      await nextTick();
+      expect(wrapper.get('output').attributes('data-measurable')).toBe('false');
+      expect(wrapper.text()).toMatch(/no reliable declared voxel spacing/);
+      expect(highlight.attributes('disabled')).toBeDefined();
+      expect(threshold.attributes('disabled')).toBeDefined();
+    } finally {
+      wrapper.unmount();
+    }
+  });
+
+  it('uses declared spacing without direction-cosine rounding at a threshold boundary', async () => {
+    const { wrapper } = await inputFor('0.0104\\0.02', true);
+    try {
+      expect(wrapper.get('output').attributes('data-depth')).toBe('20.8');
+    } finally {
+      wrapper.unmount();
+    }
+  });
+
+  it('rejects a mask that no longer matches the source grid', async () => {
+    const { wrapper, maskImage } = await inputFor('0.0104\\0.02');
+    try {
+      maskImage.setSpacing([0.04, 0.0104, 0.1]);
+      await nextTick();
+      expect(wrapper.get('output').attributes('data-measurable')).toBe('false');
+      expect(wrapper.text()).toMatch(
+        /mask does not match the source voxel grid/
+      );
+    } finally {
+      wrapper.unmount();
+    }
+  });
+
+  it.each([
+    { name: 'unit skewed', direction: [1, 0, 0, 0.1, 1, 0, 0, 0, 1] },
+    {
+      name: 'scaled skewed',
+      direction: [0.01, 0, 0, 0.005, 0.01, 0, 0, 0, 0.01],
+    },
+    { name: 'zero-length', direction: [0, 0, 0, 0, 1, 0, 0, 0, 1] },
+    { name: 'non-finite', direction: [Infinity, 0, 0, 0, 1, 0, 0, 0, 1] },
+  ] satisfies { name: string; direction: mat3 }[])(
+    'rejects a $name source grid',
+    async ({ direction }) => {
+      const { wrapper, image } = await inputFor('0.0104\\0.02');
+      try {
+        image.setDirection(direction);
+        await nextTick();
+        expect(wrapper.get('output').attributes('data-measurable')).toBe(
+          'false'
+        );
+        expect(wrapper.text()).toMatch(
+          /requires an orthogonal source voxel grid/
+        );
+      } finally {
+        wrapper.unmount();
+      }
+    }
+  );
+
+  it.each([
+    { extent: [1, 3, 1, 4, 1, 5] },
+    { extent: [5, 7, -4, -1, 10, 14] },
+  ] satisfies { extent: Extent3D }[])(
+    'aligns occupied-depth pixels and slab ranges for extent $extent',
+    async ({ extent }) => {
+      const image = vtkImageData.newInstance();
+      image.setExtent(extent);
+      image.setSpacing([0.01, 0.01, 0.01]);
+      image
+        .getPointData()
+        .setScalars(vtkDataArray.newInstance({ values: new Uint8Array(60) }));
+      const id = useImageCacheStore().addVTKImageData(image, 'offset.vti');
+      const { wrapper, settings } = await mountInput(id);
+      try {
+        expect(wrapper.get('output').attributes('data-measurable')).toBe(
+          'true'
+        );
+        expect(wrapper.get('output').attributes('data-depth')).toBe('20');
+        expect(wrapper.get('output').attributes('data-counts')).toBe(
+          '2,2,0,2,2,0,0,0,0,0,0,0,0,0,0'
+        );
+        settings.depthStart = 1;
+        settings.depthEnd = 1;
+        await nextTick();
+        expect(wrapper.get('output').attributes('data-depth')).toBe('10');
+        expect(wrapper.get('output').attributes('data-counts')).toBe(
+          '1,1,0,1,1,0,0,0,0,0,0,0,0,0,0'
+        );
+      } finally {
+        wrapper.unmount();
+      }
+    }
+  );
+
+  it.each([2, 0.01])(
+    'retains physical scale %s carried by an orthogonal generic image direction',
+    async (scale) => {
+      const image = vtkImageData.newInstance();
+      image.setDimensions([2, 2, 2]);
+      image.setSpacing([0.01, 0.01, 0.01]);
+      image.setDirection([1, 0, 0, 0, scale, 0, 0, 0, 1]);
+      image
+        .getPointData()
+        .setScalars(vtkDataArray.newInstance({ values: new Uint8Array(8) }));
+      const id = useImageCacheStore().addVTKImageData(image, 'scaled.vti');
+      const { wrapper } = await mountInput(id);
+      try {
+        expect(wrapper.get('output').attributes('data-measurable')).toBe(
+          'true'
+        );
+        expect(wrapper.get('output').attributes('data-depth')).toBe(
+          String(20 * scale)
+        );
+      } finally {
+        wrapper.unmount();
+      }
+    }
+  );
+});
diff --git a/src/enface/__tests__/labelmapGeometry.spec.ts b/src/enface/__tests__/labelmapGeometry.spec.ts
new file mode 100644
index 000000000..ac176b180
--- /dev/null
+++ b/src/enface/__tests__/labelmapGeometry.spec.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import type { mat3 } from 'gl-matrix';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { deriveSlabGeometry } from '@/src/core/slab/geometry';
+import { useEnFaceLabelmaps } from '@/src/enface/useEnFaceLabelmaps';
+
+const directions = [
+  [1, 0, 0, 0, 1, 0, 0, 0, 1],
+  [-1, 0, 0, 0, 1, 0, 0, 0, -1],
+  [0, 1, 0, -1, 0, 0, 0, 0, 1],
+  [0.8, 0.6, 0, -0.6, 0.8, 0, 0, 0, 1],
+] satisfies mat3[];
+
+describe('En face thin-region placement', () => {
+  it.each(
+    ([0, 1, 2] as const).flatMap((axis) =>
+      directions.map((direction, orientation) => ({
+        axis,
+        direction,
+        orientation,
+      }))
+    )
+  )(
+    'places rectangular axis $axis overlays at thick-slab midpoints for orientation $orientation',
+    async ({ axis, direction }) => {
+      const source = vtkImageData.newInstance();
+      source.setExtent([5, 7, -4, -1, 10, 14]);
+      source.setOrigin([23, -8, 100]);
+      source.setSpacing([-0.2, 0.7, 2]);
+      source.setDirection(direction);
+      const geometry = ref(
+        deriveSlabGeometry(source, { axis, first: 0, last: 0, method: 'mean' })
+      );
+      const { width, height } = geometry.value;
+      const planeAxes = [0, 1, 2].filter((candidate) => candidate !== axis);
+      const dimensions = [3, 4, 5];
+      expect([width, height]).toEqual(
+        planeAxes.map((candidate) => dimensions[candidate])
+      );
+      const counts = new Uint32Array(width * height);
+      counts[width - 1] = 1;
+      counts[width * (height - 1)] = 2;
+      counts[width * height - 1] = 3;
+      const scope = effectScope();
+      const labelmap = scope.run(() =>
+        useEnFaceLabelmaps(
+          geometry,
+          {
+            width,
+            height,
+            counts,
+            maximumCount: 3,
+          },
+          25,
+          10
+        )
+      )!;
+      for (const [first, last] of [
+        [0, 1],
+        [1, 2],
+      ]) {
+        geometry.value = deriveSlabGeometry(source, {
+          axis,
+          first,
+          last,
+          method: 'mean',
+        });
+        await nextTick();
+        expect(labelmap.value!.getDimensions()).toEqual([width, height, 1]);
+        for (const [x, y] of [
+          [0, 0],
+          [width - 1, 0],
+          [0, height - 1],
+          [width - 1, height - 1],
+        ]) {
+          const sourceIndex: [number, number, number] = [5, -4, 10];
+          sourceIndex[planeAxes[0]] += x;
+          sourceIndex[planeAxes[1]] += y;
+          sourceIndex[axis] += (first + last) / 2;
+          const world = labelmap.value!.indexToWorld([x, y, 0]);
+          const expected = source.indexToWorld(sourceIndex);
+          world.forEach((value, component) =>
+            expect(value).toBeCloseTo(expected[component], 6)
+          );
+        }
+        expect(
+          Array.from(labelmap.value!.getPointData().getScalars().getData())
+        ).toEqual(
+          Array.from({ length: width * height }, (_, index) =>
+            index === width - 1 || index === width * (height - 1) ? 1 : 0
+          )
+        );
+      }
+      scope.stop();
+      source.delete();
+    }
+  );
+});
diff --git a/src/enface/__tests__/layout.spec.ts b/src/enface/__tests__/layout.spec.ts
index 3be19ce4f..e43a40012 100644
--- a/src/enface/__tests__/layout.spec.ts
+++ b/src/enface/__tests__/layout.spec.ts
@@ -136,6 +136,7 @@ describe('En face view configuration', () => {
       method: 'max',
       depthStart: 1,
       depthEnd: 2,
+      thresholdMicrons: 31.5,
     });
     useViewSliceStore().updateConfig(source.id, 'oct', { slice: 2 });
     views.setActiveView(enface.id);
@@ -147,6 +148,7 @@ describe('En face view configuration', () => {
       method: 'max',
       depthStart: 1,
       depthEnd: 2,
+      thresholdMicrons: 31.5,
     });
     expect(useViewSliceStore().getConfig(source.id, 'oct').slice).toBe(2);
   });
diff --git a/src/enface/__tests__/manualVolume.spec.ts b/src/enface/__tests__/manualVolume.spec.ts
index a2ef572a4..2d720f938 100644
--- a/src/enface/__tests__/manualVolume.spec.ts
+++ b/src/enface/__tests__/manualVolume.spec.ts
@@ -16,6 +16,7 @@ import { repairUnusableSpacing } from '@/src/utils/imageSpace';
 import { useImageCacheStore } from '@/src/store/image-cache';
 import { cleanupCachedImages } from '@/tests/unit/imageCacheCleanup';
 import { getEnFaceUnavailableReason } from '@/src/enface/availability';
+import { measureOccupiedDepth } from '@/src/segmentation/measurements/occupiedDepth';
 
 const samples = Uint16Array.from({ length: 12 }, (_, index) => index);
 const dimensions = [2, 3, 2];
@@ -148,7 +149,7 @@ describe('manual En face with real generic image readers', () => {
     }
   );
 
-  it('loads per-axis NRRD spacing', async () => {
+  it('uses loaded per-axis NRRD spacing for occupied depth', async () => {
     const header = [
       'NRRD0005',
       'type: unsigned short',
@@ -166,6 +167,23 @@ describe('manual En face with real generic image readers', () => {
     );
     expect(data.getSpacing()).toEqual([0.03, 0.01, 0.2]);
     expect(getEnFaceUnavailableReason(id)).toBeNull();
+    const measurement = measureOccupiedDepth({
+      dimensions,
+      axis: 1,
+      first: 0,
+      last: 2,
+      mask: {
+        dimensions,
+        extent: [0, 1, 0, 2, 0, 1],
+        values: new Uint8Array(samples.length).fill(1),
+      },
+    });
+    expect(
+      Array.from(
+        measurement.counts,
+        (count) => count * data.getSpacing()[1] * 1000
+      )
+    ).toEqual([30, 30, 30, 30]);
   });
 
   it.each([1, 2, 3, 10])(
@@ -184,6 +202,21 @@ describe('manual En face with real generic image readers', () => {
       expect(Array.from(data.getDirection(), (value) => value || 0)).toEqual([
         -1, 0, 0, 0, -1, 0, 0, 0, 1,
       ]);
+      const measurement = measureOccupiedDepth({
+        dimensions,
+        axis: 1,
+        first: 0,
+        last: 2,
+        mask: {
+          dimensions,
+          extent: [0, 1, 0, 2, 0, 1],
+          values: new Uint8Array(12).fill(1),
+        },
+      });
+      expect(measurement.counts[0] * data.getSpacing()[1] * 1000).toBeCloseTo(
+        Math.fround(0.01) * scale * 1000 * 3,
+        4
+      );
     }
   );
 
diff --git a/src/enface/__tests__/occupiedDepthPresentation.spec.ts b/src/enface/__tests__/occupiedDepthPresentation.spec.ts
new file mode 100644
index 000000000..0867f0b71
--- /dev/null
+++ b/src/enface/__tests__/occupiedDepthPresentation.spec.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { measureOccupiedDepth } from '@/src/segmentation/measurements/occupiedDepth';
+import { createThinRegionMask } from '@/src/enface/projectionMasks';
+import {
+  isPresentThicknessBelow,
+  thicknessSliderMaximum,
+} from '@/src/enface/thickness';
+
+describe('occupied-depth threshold presentation', () => {
+  it.each([
+    [0.003872, 35, 135.52, false],
+    [0.0039, 13, 50.7, false],
+    [0.000511, 293, 149.723, false],
+    [0.003872, 35, 135.520000000001, true],
+    [0.0039, 13, 50.700000000001, true],
+    [1e-18, 1, 1.1e-15, true],
+    [0.003872, 35, 135.51, false],
+    [0.003872, 0, 135.52, false],
+    [0.003872, 35, 0, false],
+  ] as const)(
+    'preserves strict calibrated threshold %f * %i below %f',
+    (spacing, count, threshold, highlighted) => {
+      const field = {
+        width: 2,
+        height: 1,
+        counts: new Uint32Array([count, 0]),
+        maximumCount: count,
+      };
+      expect(
+        Array.from(createThinRegionMask(field, threshold, spacing * 1000))
+      ).toEqual([Number(highlighted), 0]);
+    }
+  );
+
+  it('fits the slider above the occupied maximum after slab clipping', () => {
+    const values = new Uint8Array(24);
+    for (const depth of [0, 1, 4, 5]) values[2 * depth] = 1;
+    const input = {
+      dimensions: [2, 6, 2],
+      axis: 1 as const,
+      first: 0,
+      last: 5,
+      mask: { values, dimensions: [2, 6, 2], extent: [0, 1, 0, 5, 0, 1] },
+    };
+    const full = measureOccupiedDepth(input);
+    const clipped = measureOccupiedDepth({ ...input, first: 1, last: 4 });
+    expect(thicknessSliderMaximum(full, 10.4)).toBe(41.7);
+    expect(thicknessSliderMaximum(clipped, 10.4)).toBe(20.9);
+    expect(
+      isPresentThicknessBelow(41.6, thicknessSliderMaximum(full, 10.4))
+    ).toBe(true);
+    expect(thicknessSliderMaximum(null, 10.4)).toBe(1);
+  });
+});
diff --git a/src/enface/__tests__/occupiedDepthSupport.spec.ts b/src/enface/__tests__/occupiedDepthSupport.spec.ts
new file mode 100644
index 000000000..6e58b8502
--- /dev/null
+++ b/src/enface/__tests__/occupiedDepthSupport.spec.ts
@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { markRaw } from 'vue';
+import DicomChunkImage from '@/src/core/streaming/dicomChunkImage';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { getOccupiedDepthSupport } from '@/src/enface/occupiedDepthSupport';
+import { createOCTFixture } from '@/tests/unit/octFixture';
+import { cleanupCachedImages } from '@/tests/unit/imageCacheCleanup';
+import { untilLoaded } from '@/src/composables/untilLoaded';
+import { Tags } from '@/src/core/dicomTags';
+import { Chunk } from '@/src/core/streaming/chunk';
+
+describe('occupied-depth support for loaded volumes', () => {
+  const pendingReads: (() => void)[] = [];
+  let emptyImage: DicomChunkImage | undefined;
+
+  beforeEach(() => setActivePinia(createPinia()));
+  afterEach(async () => {
+    vi.restoreAllMocks();
+    await cleanupCachedImages(pendingReads);
+    emptyImage?.dispose();
+    emptyImage = undefined;
+  });
+
+  it('reports no measurement blocker while a cached DICOM image has no metadata chunks', () => {
+    emptyImage = new DicomChunkImage();
+    useImageCacheStore().imageById.pending = markRaw(emptyImage);
+    expect(getOccupiedDepthSupport('pending')).toEqual({
+      reason: null,
+      calibratedAxes: undefined,
+    });
+  });
+
+  it('defers metadata inspection until complete loading and reuses it for an unchanged grid', async () => {
+    const fixture = createOCTFixture({ deferDecode: true });
+    pendingReads.push(fixture.releaseDecode);
+    const id = useImageCacheStore().addProgressiveImage(fixture.image);
+    await fixture.chunk.loadMeta();
+    await fixture.image.addChunks([fixture.chunk]);
+    const chunks = vi.spyOn(fixture.image, 'getChunks');
+    expect(getOccupiedDepthSupport(id).calibratedAxes).toBeUndefined();
+    expect(chunks).not.toHaveBeenCalled();
+    fixture.image.startLoad();
+    fixture.releaseDecode();
+    await untilLoaded(id);
+    chunks.mockClear();
+    const initial = getOccupiedDepthSupport(id);
+    const repeated = getOccupiedDepthSupport(id);
+    expect(initial.reason).toBeNull();
+    expect(repeated).toEqual(initial);
+    expect(chunks).toHaveBeenCalledTimes(1);
+    fixture.image.getVtkImageData().setSpacing([1, 1, 1]);
+    expect(getOccupiedDepthSupport(id).calibratedAxes).toEqual([
+      false,
+      false,
+      false,
+    ]);
+    expect(chunks).toHaveBeenCalledTimes(2);
+  });
+
+  it.each([
+    { regionCount: 1, calibrated: true },
+    { regionCount: 2, calibrated: false },
+  ])(
+    'calibrates ultrasound with $regionCount regions without PixelSpacing: $calibrated',
+    async ({ regionCount, calibrated }) => {
+      const fixture = createOCTFixture();
+      await fixture.chunk.loadMeta();
+      const metadata = fixture.chunk.metadata!.filter(
+        ([tag]) => ![Tags.Modality, Tags.PixelSpacing].includes(tag)
+      );
+      metadata.push([Tags.Modality, 'US']);
+      const blob = fixture.chunk.metaBlob!;
+      const chunk = new Chunk({
+        metaLoader: {
+          meta: metadata,
+          metaBlob: blob,
+          ultrasoundRegions: {
+            regionCount,
+            region: {
+              physicalUnitsXDirection: 3,
+              physicalUnitsYDirection: 3,
+              physicalDeltaX: 0.002,
+              physicalDeltaY: 0.00104,
+            },
+          },
+          load: () => {},
+          stop: () => {},
+        },
+        dataLoader: { data: blob, load: () => {}, stop: () => {} },
+      });
+      fixture.chunk.dispose();
+      const id = useImageCacheStore().addProgressiveImage(fixture.image);
+      await fixture.image.addChunks([chunk]);
+      fixture.image.startLoad();
+      await untilLoaded(id);
+      expect(fixture.image.getVtkImageData().getSpacing()[1]).toBeCloseTo(
+        0.0104,
+        7
+      );
+      expect(getOccupiedDepthSupport(id).calibratedAxes).toEqual([
+        calibrated,
+        calibrated,
+        true,
+      ]);
+    }
+  );
+});
diff --git a/src/enface/__tests__/restoreSelection.spec.ts b/src/enface/__tests__/restoreSelection.spec.ts
new file mode 100644
index 000000000..7f64c1f97
--- /dev/null
+++ b/src/enface/__tests__/restoreSelection.spec.ts
@@ -0,0 +1,237 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils';
+import { computed, defineComponent, h, nextTick, ref } from 'vue';
+import { disposePinia } from 'pinia';
+import { createVuetify } from 'vuetify';
+import JSZip from 'jszip';
+import { CurrentImageInjectionKey } from '@/src/composables/useCurrentImage';
+import { ManifestSchema, type StateFile } from '@/src/io/state-file/schema';
+import { useViewConfigStore } from '@/src/store/view-configs';
+import { useImageStatsStore } from '@/src/store/image-stats';
+import { useEnFaceViewStore } from '@/src/enface/store';
+import { useEnFaceInput } from '@/src/enface/useEnFaceInput';
+import { useEnFaceOccupiedDepth } from '@/src/enface/useEnFaceOccupiedDepth';
+import EnFaceControls from '@/src/enface/EnFaceControls.vue';
+import { createThinRegionMask } from '@/src/enface/projectionMasks';
+import { useSegmentStore } from '@/src/segmentation/segments';
+import { useSegmentationStore } from '@/src/segmentation/store';
+import {
+  createOccupiedDepthHandler,
+  type MeasurementRequest,
+} from '@/src/segmentation/measurements/occupiedDepthHandler';
+import {
+  activateAppPinia,
+  makeImage,
+  seatImage,
+} from '@/src/segmentation/__tests__/segmentMaskFixtures';
+import { defer } from '@/src/utils';
+
+let pinia: ReturnType<typeof activateAppPinia>;
+beforeEach(() => {
+  pinia = activateAppPinia();
+  vi.stubGlobal('visualViewport', null);
+});
+enableAutoUnmount(afterEach);
+afterEach(() => {
+  disposePinia(pinia);
+  vi.unstubAllGlobals();
+});
+
+function createMeasurementWorker() {
+  const handle = createOccupiedDepthHandler();
+  const worker = {
+    onmessage: null as Worker['onmessage'],
+    postMessage(message: MeasurementRequest, transfer: Transferable[]) {
+      const response = handle(structuredClone(message, { transfer }));
+      queueMicrotask(() =>
+        worker.onmessage?.call(
+          worker as unknown as Worker,
+          new MessageEvent('message', { data: response })
+        )
+      );
+    },
+    terminate() {},
+  };
+  return worker as unknown as Worker;
+}
+
+it('keeps the projection ready and restores the non-first segment after deferred mask decoding', async () => {
+  useImageStatsStore().stats.oct = {
+    scalarMin: 0,
+    scalarMax: 1,
+    autoRangeValues: {},
+  };
+  const image = await seatImage('oct', {
+    dimensions: [2, 2, 2],
+    spacing: [0.01, 0.01, 0.01],
+  });
+  const manifest = ManifestSchema.parse({
+    version: '7.0.0',
+    datasets: [],
+    dataSources: [],
+    segments: ['first', 'chosen'].map((id, index) => ({
+      id,
+      name: id,
+      color: index ? [0, 255, 0, 255] : [255, 0, 0, 255],
+      visible: true,
+      locked: false,
+    })),
+    segmentations: [
+      {
+        id: 'segmentation',
+        name: 'OCT layers',
+        parentImage: 'saved-oct',
+        order: ['first', 'chosen'],
+        masks: ['first', 'chosen'].map((id) => ({
+          id,
+          segmentId: id,
+          representations: {
+            labelmap: {
+              path: `${id}.vti`,
+              extent: [0, 1, 0, 1, 0, 1],
+            },
+          },
+        })),
+      },
+    ],
+    viewByID: {
+      view: {
+        id: 'view',
+        type: 'EnFace',
+        name: 'En face',
+        config: {
+          'saved-oct': {
+            enFace: {
+              axis: 1,
+              method: 'mean',
+              depthStart: 0,
+              depthEnd: null,
+              highlightThin: true,
+              thresholdMicrons: 15,
+              segmentId: 'chosen',
+            },
+          },
+        },
+      },
+    },
+  });
+  const { segmentIdMap } = useSegmentStore().deserialize(manifest);
+  const dataIDMap = { 'saved-oct': 'oct' };
+  useViewConfigStore().deserializeAll(manifest, dataIDMap, segmentIdMap);
+  const reading = defer<void>();
+  const release = defer<void>();
+  const segmentation = useSegmentationStore();
+  const restored = segmentation.deserialize({
+    manifest,
+    dataIDMap,
+    segmentIdMap,
+    stateFiles: ['first', 'chosen'].map((id) => ({
+      archivePath: `${id}.vti`,
+      file: new File([], `${id}.vti`),
+    })),
+    io: {
+      write: async () => '',
+      read: async (file) => {
+        reading.resolve();
+        await release.promise;
+        return {
+          image: makeImage({
+            dimensions: [2, 2, 2],
+            spacing: [0.01, 0.01, 0.01],
+            values:
+              file.name === 'chosen.vti'
+                ? new Uint8Array([1, 0, 0, 0, 0, 0, 0, 0])
+                : new Uint8Array(8).fill(1),
+          }),
+        };
+      },
+    },
+  });
+  await reading.promise;
+  let projection!: ReturnType<typeof useEnFaceInput>;
+  let thickness!: ReturnType<typeof useEnFaceOccupiedDepth>;
+  const wrapper = mount(
+    defineComponent({
+      setup() {
+        projection = useEnFaceInput('view');
+        thickness = useEnFaceOccupiedDepth(
+          'view',
+          {
+            source: projection.source,
+            slab: projection.specification,
+            geometry: projection.geometry,
+            blockedReason: computed(
+              () => projection.controls.value.projectionReason
+            ),
+          },
+          createMeasurementWorker
+        );
+        return () =>
+          h(EnFaceControls, {
+            ...projection.controls.value,
+            settings: useEnFaceViewStore().configFor('view', 'oct'),
+            thickness: thickness.controls.value,
+          });
+      },
+    }),
+    {
+      global: {
+        plugins: [pinia, createVuetify()],
+        provide: {
+          [CurrentImageInjectionKey as symbol]: { imageID: ref('oct') },
+        },
+      },
+    }
+  );
+  try {
+    await nextTick();
+    expect(projection.source.currentImageData.value).toBe(image);
+    expect(projection.geometry.value).not.toBeNull();
+    expect(
+      wrapper.get<HTMLInputElement>(
+        '[data-testid="enface-thin-highlight"] input'
+      ).element.checked
+    ).toBe(true);
+    expect(
+      wrapper.get('[data-testid="enface-segmentation-segment"]').text()
+    ).toContain('chosen');
+    for (const control of ['thin-highlight', 'thickness-threshold-input'])
+      expect(
+        wrapper
+          .get(`[data-testid="enface-${control}"] input`)
+          .attributes('disabled')
+      ).toBeDefined();
+    expect(thickness.overlay.value.measurement).toBeNull();
+    expect(thickness.overlay.value.appearance).toBeNull();
+
+    // Saving while decoding must retain the chosen segment, too.
+    const saved: StateFile = {
+      zip: new JSZip(),
+      manifest: { ...manifest, datasets: [{ id: 'oct', dataSourceId: 0 }] },
+    };
+    useEnFaceViewStore().serialize(saved);
+    expect(saved.manifest.viewByID!.view.config!.oct.enFace).toMatchObject({
+      segmentId: segmentIdMap.chosen,
+      highlightThin: true,
+    });
+  } finally {
+    release.resolve();
+    await restored;
+  }
+  await flushPromises();
+  expect(thickness.overlay.value.appearance?.color).toEqual([0, 255, 0, 255]);
+  expect(thickness.overlay.value.measurement?.counts).toEqual(
+    new Uint32Array([1, 0, 0, 0])
+  );
+  expect(
+    Array.from(
+      createThinRegionMask(thickness.overlay.value.measurement!, 15, 10)
+    )
+  ).toEqual([1, 0, 0, 0]);
+  for (const control of ['thin-highlight', 'thickness-threshold-input'])
+    expect(
+      wrapper
+        .get(`[data-testid="enface-${control}"] input`)
+        .attributes('disabled')
+    ).toBeUndefined();
+});
diff --git a/src/enface/__tests__/seriesGeometry.spec.ts b/src/enface/__tests__/seriesGeometry.spec.ts
index 1fd1f4dd0..2f9150252 100644
--- a/src/enface/__tests__/seriesGeometry.spec.ts
+++ b/src/enface/__tests__/seriesGeometry.spec.ts
@@ -10,10 +10,13 @@ import { createOCTFixture, readDicomTags } from '@/tests/unit/octFixture';
 import { cleanupCachedImages } from '@/tests/unit/imageCacheCleanup';
 import { buildSyntheticDicom } from '@/tests/specs/syntheticDicom';
 import { getEnFaceUnavailableReason } from '@/src/enface/availability';
+import { getOccupiedDepthSupport } from '@/src/enface/occupiedDepthSupport';
 import {
   OCT_GEOMETRY_ERROR,
   OCT_SCAN_PATTERN,
 } from '@/src/core/streaming/dicom/octMetadataTags';
+import { dicomSeriesGeometry } from '@/src/core/streaming/dicom/seriesGeometry';
+import { measureOccupiedDepth } from '@/src/segmentation/measurements/occupiedDepth';
 
 describe('assembled OCT series through real chunk and file collaborators', () => {
   beforeEach(() => setActivePinia(createPinia()));
@@ -62,10 +65,25 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
     const data = image.getVtkImageData();
     expect(data.getDimensions()).toEqual([2, 2, 3]);
     expect(getEnFaceUnavailableReason(id)).toBeNull();
+    expect(getOccupiedDepthSupport(id).reason).toBeNull();
     expect(data.getSpacing()[2]).toBeCloseTo(0.2, 7);
     expect([...data.getPointData().getScalars().getData()]).toEqual([
       1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3,
     ]);
+    const result = measureOccupiedDepth({
+      dimensions: data.getDimensions(),
+      axis: 1,
+      first: 0,
+      last: 1,
+      mask: {
+        dimensions: data.getDimensions(),
+        extent: [0, 1, 0, 1, 0, 2],
+        values: new Uint8Array(12).fill(1),
+      },
+    });
+    expect(
+      Array.from(result.counts, (count) => count * data.getSpacing()[1] * 1000)
+    ).toEqual(Array(6).fill(20.8));
   });
 
   it.each(['MR', 'CT'])(
@@ -73,6 +91,7 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
     async (modality) => {
       const { id } = await assemble(undefined, undefined, modality);
       expect(getEnFaceUnavailableReason(id)).toBeNull();
+      expect(getOccupiedDepthSupport(id).reason).toBeNull();
     }
   );
 
@@ -82,14 +101,80 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
     );
     const { id } = await assemble(positions, undefined, 'MR');
     expect(getEnFaceUnavailableReason(id)).toBeNull();
+    expect(getOccupiedDepthSupport(id).reason).toBeNull();
   });
 
-  it('projects the assembled grid for a nonuniform series', async () => {
-    const { id, image } = await assemble([0, 0.1, 0.4]);
-    expect(image.getVtkImageData().getSpacing()[2]).toBeCloseTo(0.2, 7);
+  it('accepts Float32 position rounding relative to the slice pitch', async () => {
+    const positions = Array.from({ length: 31 }, (_, index) =>
+      Math.fround(-1000 + index * 0.08)
+    );
+    const { id } = await assemble(positions, undefined, 'CT');
+    expect(getOccupiedDepthSupport(id).reason).toBeNull();
+  });
+
+  it('accepts sub-0.1 mm slice positions printed to four decimal places', async () => {
+    const positions = Array.from({ length: 5 }, (_, index) =>
+      Number((index * 0.023125).toFixed(4))
+    );
+    const { id } = await assemble(positions);
     expect(getEnFaceUnavailableReason(id)).toBeNull();
+    expect(getOccupiedDepthSupport(id).reason).toBeNull();
+  });
+
+  it('uses uniform file positions when optional slice spacing disagrees', async () => {
+    const { id, image } = await assemble(undefined, (chunks) => {
+      chunks.forEach((chunk) =>
+        chunk.metadata!.push([Tags.SpacingBetweenSlices, '0.3'])
+      );
+    });
+    expect(image.getVtkImageData().getSpacing()[2]).toBeCloseTo(0.2, 7);
+    expect(getOccupiedDepthSupport(id).reason).toBeNull();
+  });
+
+  it('accepts orthogonal direction cosines rounded to four decimals', async () => {
+    const { id } = await assemble(undefined, (chunks) => {
+      chunks.forEach((chunk) =>
+        chunk.metadata!.push([
+          Tags.ImageOrientationPatient,
+          '0.9986\\0.0523\\0\\-0.0523\\0.9986\\0',
+        ])
+      );
+    });
+    expect(getOccupiedDepthSupport(id).reason).toBeNull();
   });
 
+  it('does not calibrate in-plane axes when every file omits pixel spacing', async () => {
+    const { id } = await assemble(undefined, (chunks) => {
+      chunks.forEach((chunk) => {
+        const index = chunk.metadata!.findIndex(
+          ([tag]) => tag === Tags.PixelSpacing
+        );
+        chunk.metadata!.splice(index, 1);
+      });
+    });
+    expect(getOccupiedDepthSupport(id).calibratedAxes).toEqual([
+      false,
+      false,
+      true,
+    ]);
+  });
+
+  it.each([
+    { positions: [0, 0.1, 0.4] },
+    { positions: [0, 0.2, 0.4003, 0.6, 0.8] },
+  ])(
+    'keeps a nonuniform series projection-only: $positions',
+    async ({ positions }) => {
+      const { id, image, chunks } = await assemble(positions);
+      expect(image.getVtkImageData().getSpacing()[2]).toBeCloseTo(0.2, 7);
+      expect(getEnFaceUnavailableReason(id)).toBeNull();
+      expect(getOccupiedDepthSupport(id).reason).toMatch(/nonuniform/);
+      expect(
+        dicomSeriesGeometry(chunks.map((chunk) => chunk.metadata!)).reason
+      ).toMatch(/nonuniform/);
+    }
+  );
+
   it.each([
     [Tags.OphthalmicVolumetricPropertiesFlag, 'NO', /unsuitable/],
     [OCT_SCAN_PATTERN, '128282', /scan pattern/],
@@ -108,21 +193,24 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
     [Tags.PixelSpacing, '0.02\\0.02', /pixel spacing/],
     [Tags.ImageOrientationPatient, '0\\1\\0\\1\\0\\0', /orientation/],
     [Tags.ImageOrientationPatient, '2\\0\\0\\0\\1\\0', /orientation/],
-    [Tags.SpacingBetweenSlices, '0.3', /slice spacing/],
   ])(
-    'projects the loaded grid with inconsistent %s declarations',
-    async (tag, value) => {
-      const { id } = await assemble(undefined, (pending) =>
+    'keeps inconsistent %s geometry projection-only',
+    async (tag, value, reason) => {
+      const { id, chunks } = await assemble(undefined, (pending) =>
         pending[2].metadata!.push([tag, value])
       );
       expect(getEnFaceUnavailableReason(id)).toBeNull();
+      expect(getOccupiedDepthSupport(id).reason).toMatch(reason);
+      expect(
+        dicomSeriesGeometry(chunks.map((chunk) => chunk.metadata!)).reason
+      ).toMatch(reason);
     }
   );
 
   it.each([false, true])(
-    'projects the loaded grid with missing positions: allMissing=%s',
+    'requires complete positions for occupied-depth measurements: allMissing=%s',
     async (allMissing) => {
-      const { id } = await assemble(undefined, (pending) => {
+      const { id, chunks } = await assemble(undefined, (pending) => {
         const selected = allMissing ? pending : [pending[1]];
         selected.forEach((chunk) => {
           const index = chunk.metadata!.findIndex(
@@ -132,13 +220,28 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
         });
       });
       expect(getEnFaceUnavailableReason(id)).toBeNull();
+      expect(getOccupiedDepthSupport(id).reason).toMatch(/incomplete/);
+      expect(
+        dicomSeriesGeometry(chunks.map((chunk) => chunk.metadata!)).reason
+      ).toMatch(/incomplete/);
     }
   );
 
-  it('projects an altered loaded grid', async () => {
-    const { id, image } = await assemble();
+  it('keeps an altered loaded grid projection-only', async () => {
+    const { id, image, chunks } = await assemble();
     const data = image.getVtkImageData();
     data.setSpacing([0.02, 0.0104, 1]);
     expect(getEnFaceUnavailableReason(id)).toBeNull();
+    expect(getOccupiedDepthSupport(id).reason).toMatch(/loaded.*grid/);
+    expect(
+      dicomSeriesGeometry(
+        chunks.map((chunk) => chunk.metadata!),
+        {
+          spacing: data.getSpacing(),
+          direction: data.getDirection(),
+          origin: data.getOrigin(),
+        }
+      ).reason
+    ).toMatch(/loaded.*grid/);
   });
 });
diff --git a/src/enface/__tests__/store.spec.ts b/src/enface/__tests__/store.spec.ts
index 0cda72e70..c406e3b3b 100644
--- a/src/enface/__tests__/store.spec.ts
+++ b/src/enface/__tests__/store.spec.ts
@@ -1,7 +1,8 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import { createPinia, setActivePinia } from 'pinia';
 import JSZip from 'jszip';
-
+import { useSegmentationStore } from '@/src/segmentation/store';
+import { useSegmentStore } from '@/src/segmentation/segments';
 import { useEnFaceViewStore } from '@/src/enface/store';
 import { ManifestSchema, type StateFile } from '@/src/io/state-file/schema';
 import { parseNamedLayouts } from '@/src/utils/layoutParsing';
@@ -11,7 +12,7 @@ import { useWindowingStore } from '@/src/store/view-configs/windowing';
 
 beforeEach(() => setActivePinia(createPinia()));
 
-describe('OCT view settings', () => {
+describe('En face view settings', () => {
   it('isolates settings by view and dataset and removes them on deletion', () => {
     const store = useEnFaceViewStore();
     store.configFor('a', 'oct1').method = 'max';
@@ -32,6 +33,9 @@ describe('OCT view settings', () => {
       axis: 1,
       depthStart: 20,
       depthEnd: 40,
+      thresholdMicrons: 35,
+      highlightThin: true,
+      selectedSegmentId: 'missing-segment',
     });
     const state: StateFile = {
       zip: new JSZip(),
@@ -61,6 +65,8 @@ describe('OCT view settings', () => {
     expect(parsed.viewByID?.view.type).toBe('EnFace');
     const settings = parsed.viewByID!.view.config!;
     expect(settings.oct.enFace?.method).toBe('sum');
+    expect(settings.oct.enFace).not.toHaveProperty('selectedMaskId');
+    expect(settings.oct.enFace).not.toHaveProperty('selectedSegmentId');
     expect(settings.oct.enFace).not.toHaveProperty('windowWidth');
     expect(settings.oct.window).toMatchObject({
       width: 120,
@@ -73,7 +79,10 @@ describe('OCT view settings', () => {
       method: 'sum',
       depthStart: 20,
       depthEnd: 40,
+      thresholdMicrons: 35,
+      highlightThin: false,
     });
+    expect(store.configFor('restored', 'new-oct').selectedSegmentId).toBeNull();
     expect(useWindowingStore().getConfig('restored', 'new-oct')).toMatchObject({
       width: 120,
       level: 60,
@@ -81,6 +90,88 @@ describe('OCT view settings', () => {
     });
   });
 
+  it('restores a slab scene saved without occupied-depth settings', () => {
+    const parsed = ManifestSchema.parse({
+      version: '7.0.0',
+      datasets: [],
+      dataSources: [],
+      viewByID: {
+        saved: {
+          id: 'saved',
+          type: 'EnFace',
+          name: 'En face',
+          config: {
+            source: {
+              enFace: { axis: 2, method: 'max', depthStart: 1, depthEnd: 4 },
+            },
+          },
+        },
+      },
+    });
+    useViewConfigStore().deserialize(
+      'restored',
+      parsed.viewByID!.saved.config!,
+      {
+        source: 'loaded',
+      }
+    );
+    expect(useEnFaceViewStore().configFor('restored', 'loaded')).toMatchObject({
+      axis: 2,
+      method: 'max',
+      depthStart: 1,
+      depthEnd: 4,
+      highlightThin: false,
+      thresholdMicrons: 100,
+      selectedSegmentId: null,
+    });
+  });
+
+  it('restores the chosen segment instead of highlighting the first mask', () => {
+    const registry = useSegmentStore().segments;
+    const first = registry.addSegment({ name: 'First layer' });
+    const chosen = registry.addSegment({ name: 'Chosen layer' });
+    const segmentation = useSegmentationStore();
+    const group = segmentation.ensureSegmentationForImage('restored-oct');
+    segmentation.createMask(group.id, first);
+    segmentation.createMask(group.id, chosen);
+    const store = useEnFaceViewStore();
+    store.deserialize(
+      'view',
+      {
+        'restored-oct': {
+          enFace: {
+            axis: 1,
+            method: 'mean',
+            depthStart: 0,
+            depthEnd: null,
+            thresholdMicrons: 35,
+            highlightThin: true,
+            segmentId: 'saved-layer',
+          },
+        },
+      },
+      { 'saved-layer': chosen }
+    );
+    expect(store.configFor('view', 'restored-oct').selectedSegmentId).toBe(
+      chosen
+    );
+    expect(store.configFor('view', 'restored-oct').highlightThin).toBe(true);
+    store.deserialize('view', {
+      'restored-oct': {
+        enFace: {
+          axis: 1,
+          method: 'mean',
+          depthStart: 0,
+          depthEnd: null,
+          thresholdMicrons: 35,
+          highlightThin: true,
+          segmentId: 'missing-layer',
+        },
+      },
+    });
+    expect(store.configFor('view', 'restored-oct').highlightThin).toBe(false);
+  });
+
   it('resolves custom enface layouts without treating the projection as a slice', () => {
     const parsed = parseNamedLayouts({ OCT: [['enface', 'coronal']] });
     expect(parsed.OCT.views[0]).toMatchObject({
diff --git a/src/enface/__tests__/thinRegionAppearance.spec.ts b/src/enface/__tests__/thinRegionAppearance.spec.ts
new file mode 100644
index 000000000..889bce294
--- /dev/null
+++ b/src/enface/__tests__/thinRegionAppearance.spec.ts
@@ -0,0 +1,139 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { ref } from 'vue';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { useSegmentationStore } from '@/src/segmentation/store';
+import { useSegmentStore } from '@/src/segmentation/segments';
+import { useThinRegionAppearance } from '@/src/enface/useThinRegionAppearance';
+
+beforeEach(() => setActivePinia(createPinia()));
+
+function appearanceScene() {
+  const parent = vtkImageData.newInstance();
+  parent.setDimensions(2, 2, 2);
+  parent
+    .getPointData()
+    .setScalars(vtkDataArray.newInstance({ values: new Uint16Array(8) }));
+  const parentId = useImageCacheStore().addVTKImageData(parent, 'OCT');
+  const store = useSegmentationStore();
+  const registry = useSegmentStore().segments;
+  const group = store.ensureSegmentationForImage(parentId);
+  const segmentId = registry.addSegment({ color: [35, 215, 190, 255] });
+  const mask = store.createMask(group.id, segmentId);
+  const binding = store.ensureLabelmapBinding(mask.id);
+  const maskId = ref<string | null>(mask.id);
+  const appearance = useThinRegionAppearance(maskId);
+  return {
+    store,
+    registry,
+    group,
+    segmentId,
+    mask,
+    binding,
+    maskId,
+    appearance,
+  };
+}
+
+describe('thin-region appearance from the source segmentation', () => {
+  it('uses the selected segment color and normal default fill without modifying mask storage', () => {
+    const { appearance, binding } = appearanceScene();
+    const scalars = binding.image.getPointData().getScalars().getData();
+    expect(appearance.value).toEqual({
+      color: [35, 215, 190, 255],
+      fillOpacity: 0.3,
+      outlineThickness: 2,
+      outlineOpacity: 1,
+      value: 1,
+      reason: null,
+    });
+    expect(binding.image.getPointData().getScalars().getData()).toBe(scalars);
+  });
+
+  it('updates the resolved style when segment color or either fill opacity changes', () => {
+    const { appearance, registry, store, group, segmentId } = appearanceScene();
+    registry.updateSegment(segmentId, { color: [255, 0, 0, 255] });
+    expect(appearance.value).toMatchObject({
+      color: [255, 0, 0, 255],
+      fillOpacity: 0.3,
+    });
+    registry.updateSegment(segmentId, { fillOpacity: 0.5 });
+    expect(appearance.value!.fillOpacity).toBe(0.15);
+    store.updateSegmentationDisplay(group.id, { fillOpacity: 0.8 });
+    expect(appearance.value!.fillOpacity).toBe(0.4);
+    registry.updateSegment(segmentId, { color: [255, 0, 0, 128] });
+    expect(appearance.value!.color).toEqual([255, 0, 0, 128]);
+    expect(appearance.value!.fillOpacity).toBeCloseTo((128 / 255) * 0.5 * 0.8);
+  });
+
+  it('changes appearance with the selected mask and drops missing selections', () => {
+    const { appearance, registry, store, group, maskId } = appearanceScene();
+    const second = registry.addSegment({ color: [0, 255, 0, 255] });
+    const mask = store.createMask(group.id, second);
+    store.ensureLabelmapBinding(mask.id);
+    maskId.value = mask.id;
+    expect(appearance.value!.color).toEqual([0, 255, 0, 255]);
+    registry.deleteSegment(second);
+    expect(appearance.value).toBeNull();
+    maskId.value = null;
+    expect(appearance.value).toBeNull();
+  });
+
+  it('keeps outline-only highlighting available and explains fully hidden appearances', () => {
+    const { appearance, registry, store, group, segmentId } = appearanceScene();
+    registry.updateSegment(segmentId, { visible: false });
+    expect(appearance.value).toMatchObject({
+      fillOpacity: 0,
+      reason: 'Show the selected segment to highlight thin regions.',
+    });
+    registry.updateSegment(segmentId, { visible: true, fillOpacity: 0 });
+    expect(appearance.value).toMatchObject({
+      fillOpacity: 0,
+      outlineThickness: 2,
+      outlineOpacity: 1,
+      reason: null,
+    });
+    registry.updateSegment(segmentId, { fillOpacity: 1 });
+    store.updateSegmentationDisplay(group.id, { fillOpacity: 0 });
+    expect(appearance.value).toMatchObject({
+      fillOpacity: 0,
+      reason: null,
+    });
+    registry.updateSegment(segmentId, { outlineOpacity: 0.5 });
+    store.updateSegmentationDisplay(group.id, {
+      outlineOpacity: 0.4,
+      outlineThickness: 4,
+    });
+    expect(appearance.value).toMatchObject({
+      outlineThickness: 4,
+      outlineOpacity: 0.2,
+      reason: null,
+    });
+    store.updateSegmentationDisplay(group.id, { outlineOpacity: 0 });
+    expect(appearance.value!.reason).toContain(
+      'fill opacity or enable an outline'
+    );
+    store.updateSegmentationDisplay(group.id, { outlineOpacity: 1 });
+    expect(appearance.value!.reason).toBeNull();
+    store.updateSegmentationDisplay(group.id, { outlineThickness: 0 });
+    expect(appearance.value!.reason).toContain(
+      'fill opacity or enable an outline'
+    );
+    store.updateSegmentationDisplay(group.id, { outlineThickness: 2 });
+    store.updateSegmentationDisplay(group.id, { fillOpacity: 0.3 });
+    registry.updateSegment(segmentId, { color: [35, 215, 190, 0] });
+    expect(appearance.value).toMatchObject({ fillOpacity: 0 });
+    expect(appearance.value!.reason).toBeNull();
+    registry.updateSegment(segmentId, {
+      color: [35, 215, 190, 255],
+      outlineOpacity: 0,
+    });
+    store.updateSegmentationDisplay(group.id, {
+      outlineOpacity: 0,
+      outlineThickness: 0,
+    });
+    expect(appearance.value).toMatchObject({ fillOpacity: 0.3, reason: null });
+  });
+});
diff --git a/src/enface/occupiedDepthSupport.ts b/src/enface/occupiedDepthSupport.ts
new file mode 100644
index 000000000..abf0ee84c
--- /dev/null
+++ b/src/enface/occupiedDepthSupport.ts
@@ -0,0 +1,73 @@
+import type vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import DicomChunkImage from '@/src/core/streaming/dicomChunkImage';
+import type { Maybe } from '@/src/types';
+import { Tags } from '@/src/core/dicomTags';
+import { dicomSeriesGeometry } from '@/src/core/streaming/dicom/seriesGeometry';
+import type { Chunk } from '@/src/core/streaming/chunk';
+import { unitToMm } from '@/src/core/streaming/dicom/ultrasoundRegion';
+
+function measurementMetadata(chunk: Chunk) {
+  const tags = new Map(chunk.metadata ?? []);
+  const regions = chunk.ultrasoundRegions;
+  if (
+    tags.get(Tags.Modality)?.trim() !== 'US' ||
+    !regions?.region ||
+    regions.regionCount > 1
+  )
+    return tags;
+  const { region } = regions;
+  const xFactor = unitToMm(region.physicalUnitsXDirection);
+  const yFactor = unitToMm(region.physicalUnitsYDirection);
+  if (xFactor === null || yFactor === null) return tags;
+  const spacing = [
+    region.physicalDeltaY * yFactor,
+    region.physicalDeltaX * xFactor,
+  ];
+  if (spacing.every((value) => Number.isFinite(value) && value !== 0))
+    tags.set(Tags.PixelSpacing, spacing.map(Math.abs).join('\\'));
+  return tags;
+}
+
+function dicomSupport(image: DicomChunkImage, data: vtkImageData) {
+  const series = dicomSeriesGeometry(
+    image.getChunks().map(measurementMetadata),
+    {
+      spacing: data.getSpacing(),
+      direction: data.getDirection(),
+      origin: data.getOrigin(),
+    }
+  );
+  return {
+    reason: series.reason
+      ? `${series.reason} Occupied depth is unavailable.`
+      : null,
+    calibratedAxes: series.calibratedAxes,
+  };
+}
+
+const supportCache = new WeakMap<
+  vtkImageData,
+  { key: string; support: ReturnType<typeof dicomSupport> }
+>();
+
+/** DICOM series evidence for physical occupied depth; other images use their loaded grid. */
+export function getOccupiedDepthSupport(imageID: Maybe<string>) {
+  const cache = useImageCacheStore();
+  const image = cache.imageById[imageID || ''];
+  const loaded = Boolean(image?.isLoaded()) && !image?.isLoading();
+  const data = cache.getVtkImageData(imageID);
+  if (!(image instanceof DicomChunkImage) || !loaded || !data)
+    return { reason: null, calibratedAxes: undefined };
+  const key = [
+    ...data.getSpacing(),
+    ...data.getDirection(),
+    ...data.getOrigin(),
+    ...data.getDimensions(),
+  ].join(',');
+  const cached = supportCache.get(data);
+  if (cached?.key === key) return cached.support;
+  const support = dicomSupport(image, data);
+  supportCache.set(data, { key, support });
+  return support;
+}
diff --git a/src/enface/projectionMasks.ts b/src/enface/projectionMasks.ts
new file mode 100644
index 000000000..068be4210
--- /dev/null
+++ b/src/enface/projectionMasks.ts
@@ -0,0 +1,18 @@
+import { isPresentThicknessBelow } from '@/src/enface/thickness';
+import { SEGMENT_VALUE } from '@/src/segmentation/masks/labelValue';
+import type { OccupiedDepthResult } from '@/src/segmentation/measurements/occupiedDepth';
+
+export const createThinRegionMask = (
+  result: OccupiedDepthResult,
+  threshold: number,
+  micronsPerVoxel: number
+) => {
+  const pixels = new Uint8Array(result.counts.length);
+  for (let index = 0; index < pixels.length; index++) {
+    if (
+      isPresentThicknessBelow(result.counts[index] * micronsPerVoxel, threshold)
+    )
+      pixels[index] = SEGMENT_VALUE;
+  }
+  return pixels;
+};
diff --git a/src/enface/store.ts b/src/enface/store.ts
index 61be4e691..3481a6191 100644
--- a/src/enface/store.ts
+++ b/src/enface/store.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { useSegmentStore } from '@/src/segmentation/segments';
 import { reactive } from 'vue';
 import { createViewConfigSerializer } from '@/src/store/view-configs/common';
 import {
@@ -6,7 +7,7 @@ import {
   getDoubleKeyRecord,
   type DoubleKeyRecord,
 } from '@/src/utils/doubleKeyRecord';
-import type { ViewConfig } from '@/src/io/state-file/schema';
+import type { StateFile, ViewConfig } from '@/src/io/state-file/schema';
 import type { SlabAxis, SlabMethod } from '@/src/core/slab/types';
 import type { Maybe } from '@/src/types';
 
@@ -15,12 +16,24 @@ export type EnFaceViewConfig = {
   method: SlabMethod;
   depthStart: number;
   depthEnd: number | null;
+  highlightThin: boolean;
+  thresholdMicrons: number;
+  selectedSegmentId: string | null;
+};
+
+export type ThicknessControlState = {
+  thresholdMaximum: number;
+  segmentationReason: string | null;
+  highlightReason: string | null;
+  thicknessReason: string | null;
+  segments: { value: string; title: string; color?: string }[];
 };
 
 export type EnFaceViewControlState = {
   axes: { title: string; value: number }[];
   depthMaximum: number;
   projectionReason: string | null;
+  thickness: ThicknessControlState;
 };
 
 export const defaultEnFaceViewConfig = (): EnFaceViewConfig => ({
@@ -28,11 +41,15 @@ export const defaultEnFaceViewConfig = (): EnFaceViewConfig => ({
   method: 'mean',
   depthStart: 0,
   depthEnd: null,
+  highlightThin: false,
+  thresholdMicrons: 100,
+  selectedSegmentId: null,
 });
 
 export const useEnFaceViewStore = defineStore('enface-view', () => {
   const configs = reactive<DoubleKeyRecord<EnFaceViewConfig>>({});
   const controlStates = reactive<DoubleKeyRecord<EnFaceViewControlState>>({});
+  const segmentsRegistry = useSegmentStore().segments;
 
   function configFor(viewID: string, dataID: string) {
     configs[viewID] ??= {};
@@ -77,12 +94,41 @@ export const useEnFaceViewStore = defineStore('enface-view', () => {
     }
   }
 
-  const serialize = createViewConfigSerializer(configs, 'enFace');
+  function serialize(stateFile: StateFile) {
+    const saved: DoubleKeyRecord<NonNullable<ViewConfig['enFace']>> = {};
+    Object.entries(configs).forEach(([viewID, byDataID]) => {
+      saved[viewID] = {};
+      Object.entries(byDataID).forEach(([dataID, config]) => {
+        const segmentId =
+          segmentsRegistry.getSegment(config.selectedSegmentId)?.id ?? null;
+        saved[viewID][dataID] = {
+          axis: config.axis,
+          method: config.method,
+          depthStart: config.depthStart,
+          depthEnd: config.depthEnd,
+          highlightThin: config.highlightThin && !!segmentId,
+          segmentId,
+          thresholdMicrons: config.thresholdMicrons,
+        };
+      });
+    });
+    createViewConfigSerializer(saved, 'enFace')(stateFile);
+  }
 
-  function deserialize(viewID: string, config: Record<string, ViewConfig>) {
+  function deserialize(
+    viewID: string,
+    config: Record<string, ViewConfig>,
+    segmentIdMap: Record<string, string> = {}
+  ) {
     Object.entries(config).forEach(([dataID, viewConfig]) => {
-      if (viewConfig.enFace)
-        Object.assign(configFor(viewID, dataID), viewConfig.enFace);
+      if (viewConfig.enFace) {
+        const { segmentId, ...settings } = viewConfig.enFace;
+        const mappedSegmentId = segmentId ? segmentIdMap[segmentId] : undefined;
+        Object.assign(configFor(viewID, dataID), settings, {
+          selectedSegmentId: mappedSegmentId ?? null,
+          highlightThin: settings.highlightThin && !!mappedSegmentId,
+        });
+      }
     });
   }
 
diff --git a/src/enface/thickness.ts b/src/enface/thickness.ts
new file mode 100644
index 000000000..2f44130be
--- /dev/null
+++ b/src/enface/thickness.ts
@@ -0,0 +1,27 @@
+import type { OccupiedDepthResult } from '@/src/segmentation/measurements/occupiedDepth';
+
+const unitRoundoff = Number.EPSILON / 2;
+// Calibration and threshold conversion plus two products contribute roundoff.
+const relativeRoundoff = (4 * unitRoundoff) / (1 - 4 * unitRoundoff);
+
+export const isPresentThicknessBelow = (thickness: number, threshold: number) =>
+  thickness > 0 &&
+  threshold - thickness >
+    relativeRoundoff * Math.max(Math.abs(thickness), Math.abs(threshold));
+
+export function thicknessSliderMaximum(
+  result: OccupiedDepthResult | null,
+  micronsPerVoxel: number
+) {
+  if (!result || !Number.isFinite(micronsPerVoxel) || micronsPerVoxel <= 0)
+    return 1;
+  const maximum = result.maximumCount * micronsPerVoxel;
+  // The strict below-threshold comparison needs an endpoint above the maximum.
+  let rounded = (Math.floor(maximum * 10) + 1) / 10;
+  if (!Number.isFinite(rounded)) return maximum;
+  if (maximum > 0 && !isPresentThicknessBelow(maximum, rounded)) rounded += 0.1;
+  return Math.max(0.1, rounded);
+}
+
+export const EN_FACE_THICKNESS_HELP =
+  'Thickness of the selected segment within the slab, along the projection axis. Only occupied voxels are counted; gaps are excluded.';
diff --git a/src/enface/useEnFaceLabelmaps.ts b/src/enface/useEnFaceLabelmaps.ts
new file mode 100644
index 000000000..f829dd61e
--- /dev/null
+++ b/src/enface/useEnFaceLabelmaps.ts
@@ -0,0 +1,85 @@
+import { computed, onScopeDispose, unref, watch, type MaybeRef } from 'vue';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import { vec3, type mat4 } from 'gl-matrix';
+import type { OccupiedDepthResult } from '@/src/segmentation/measurements/occupiedDepth';
+import { createThinRegionMask } from './projectionMasks';
+
+export type MeasurementPlaneGeometry = {
+  width: number;
+  height: number;
+  spacing: readonly number[];
+  pixelToWorld: mat4;
+};
+
+const sameGeometry = (
+  left: MeasurementPlaneGeometry,
+  right: MeasurementPlaneGeometry | null | undefined
+) =>
+  !!right &&
+  left.width === right.width &&
+  left.height === right.height &&
+  left.spacing[0] === right.spacing[0] &&
+  left.spacing[1] === right.spacing[1] &&
+  left.pixelToWorld.every(
+    (value, index) => value === right.pixelToWorld[index]
+  );
+
+/** Owns only the binary qualification plane needed by normal labelmap rendering. */
+export function useEnFaceLabelmaps(
+  geometry: MaybeRef<MeasurementPlaneGeometry | null>,
+  measurement: MaybeRef<OccupiedDepthResult | null>,
+  threshold: MaybeRef<number>,
+  micronsPerVoxel: MaybeRef<number>
+) {
+  const image = vtkImageData.newInstance();
+  const scalars = vtkDataArray.newInstance({
+    numberOfComponents: 1,
+    values: new Uint8Array(1),
+  });
+  image.getPointData().setScalars(scalars);
+  const pixels = computed(() => {
+    const result = unref(measurement);
+    return result
+      ? createThinRegionMask(result, unref(threshold), unref(micronsPerVoxel))
+      : null;
+  });
+  watch(
+    [() => unref(geometry), pixels],
+    ([plane, values], [previousPlane, previousValues]) => {
+      if (!plane || !values) return;
+      const [sx, sy] = plane.spacing;
+      if (values === previousValues && sameGeometry(plane, previousPlane))
+        return;
+      image.setDimensions(plane.width, plane.height, 1);
+      image.setSpacing([sx, sy, 1]);
+      image.setOrigin(
+        vec3.transformMat4(
+          [0, 0, 0],
+          [0.5, 0.5, 0],
+          plane.pixelToWorld
+        ) as Vector3
+      );
+      image.setDirection([
+        plane.pixelToWorld[0] / sx,
+        plane.pixelToWorld[1] / sx,
+        plane.pixelToWorld[2] / sx,
+        plane.pixelToWorld[4] / sy,
+        plane.pixelToWorld[5] / sy,
+        plane.pixelToWorld[6] / sy,
+        plane.pixelToWorld[8],
+        plane.pixelToWorld[9],
+        plane.pixelToWorld[10],
+      ]);
+      scalars.setData(values, 1);
+      image.modified();
+    },
+    { immediate: true }
+  );
+  onScopeDispose(() => {
+    image.delete();
+    scalars.delete();
+  });
+  return computed(() => (unref(geometry) && pixels.value ? image : null));
+}
diff --git a/src/enface/useEnFaceOccupiedDepth.ts b/src/enface/useEnFaceOccupiedDepth.ts
new file mode 100644
index 000000000..a3e66280b
--- /dev/null
+++ b/src/enface/useEnFaceOccupiedDepth.ts
@@ -0,0 +1,77 @@
+import { computed, unref, type MaybeRef } from 'vue';
+import { useOccupiedDepth } from '@/src/segmentation/measurements/useOccupiedDepth';
+import type { SlabGeometry } from '@/src/core/slab/geometry';
+import {
+  useOccupiedDepthInput,
+  type OccupiedDepthProjection,
+} from './useOccupiedDepthInput';
+import { useThinRegionAppearance } from './useThinRegionAppearance';
+import { thicknessSliderMaximum } from './thickness';
+import type { ThicknessControlState } from './store';
+
+/** Thin-region highlighting for one En face view, layered over its projection. */
+export function useEnFaceOccupiedDepth(
+  viewId: MaybeRef<string>,
+  projection: OccupiedDepthProjection & {
+    geometry: MaybeRef<SlabGeometry | null>;
+  },
+  createWorker?: () => Worker
+) {
+  const { geometry, blockedReason } = projection;
+  const input = useOccupiedDepthInput(viewId, projection);
+  const { settings, micronsPerVoxel } = input;
+  const appearance = useThinRegionAppearance(
+    computed(() => input.selectedMask.value?.id)
+  );
+  const {
+    accepted: measurement,
+    computing: measuring,
+    stale,
+    error,
+  } = useOccupiedDepth(
+    input.request,
+    createWorker,
+    computed(() => settings.value.highlightThin)
+  );
+  const thicknessReason = computed(
+    () =>
+      input.thicknessReason.value ||
+      appearance.value?.reason ||
+      error.value ||
+      (measuring.value && !measurement.value
+        ? 'Measuring thickness in the selected slab…'
+        : null)
+  );
+  const message = computed(() => {
+    if (!settings.value.highlightThin || unref(blockedReason)) return null;
+    if (thicknessReason.value) return thicknessReason.value;
+    if (!measuring.value) return null;
+    return stale.value
+      ? 'Updating thickness; showing the previous result.'
+      : 'Measuring thickness in the selected slab…';
+  });
+  const overlay = computed(() => ({
+    geometry: unref(geometry),
+    measurement: measurement.value,
+    micronsPerVoxel: micronsPerVoxel.value,
+    threshold: settings.value.thresholdMicrons,
+    appearance:
+      settings.value.highlightThin && !thicknessReason.value && unref(geometry)
+        ? appearance.value
+        : null,
+  }));
+  const controls = computed(
+    () =>
+      ({
+        thresholdMaximum: thicknessSliderMaximum(
+          measurement.value,
+          micronsPerVoxel.value
+        ),
+        segmentationReason: input.segmentationReason.value,
+        highlightReason: input.highlightReason.value,
+        thicknessReason: thicknessReason.value,
+        segments: input.segmentOptions.value,
+      }) satisfies ThicknessControlState
+  );
+  return { overlay, controls, measuring, message };
+}
diff --git a/src/enface/useOccupiedDepthInput.ts b/src/enface/useOccupiedDepthInput.ts
new file mode 100644
index 000000000..91ae4feeb
--- /dev/null
+++ b/src/enface/useOccupiedDepthInput.ts
@@ -0,0 +1,290 @@
+import { computed, ref, unref, watch, type MaybeRef } from 'vue';
+import { areEquals, dot } from '@kitware/vtk.js/Common/Core/Math';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import type { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useSegmentationStore } from '@/src/segmentation/store';
+import { useSegmentStore } from '@/src/segmentation/segments';
+import {
+  extentSize,
+  extentWithin,
+  isEmptyExtent,
+} from '@/src/segmentation/geometry';
+import type { OccupiedDepthRequest } from '@/src/segmentation/measurements/useOccupiedDepth';
+import type { SlabSpecification } from '@/src/core/slab/types';
+import { getOccupiedDepthSupport } from './occupiedDepthSupport';
+import { useEnFaceViewStore } from './store';
+
+export type OccupiedDepthProjection = {
+  source: Pick<
+    ReturnType<typeof useCurrentImage>,
+    'currentImageID' | 'currentImageData'
+  >;
+  slab: MaybeRef<SlabSpecification>;
+  /** Blocks every thickness control, such as an unavailable projection. */
+  blockedReason: MaybeRef<string | null>;
+};
+
+/** Binds the selected segment mask and calibrated slab to a measurement request. */
+export function useOccupiedDepthInput(
+  viewId: MaybeRef<string>,
+  { source, slab, blockedReason }: OccupiedDepthProjection
+) {
+  const { currentImageID, currentImageData } = source;
+  const segmentationStore = useSegmentationStore();
+  const segmentsRegistry = useSegmentStore().segments;
+  const enFaceStore = useEnFaceViewStore();
+  const settings = computed(() =>
+    enFaceStore.settingsFor(unref(viewId), currentImageID.value)
+  );
+  // Separate fields keep projection method changes from invalidating requests.
+  const slabAxis = computed(() => unref(slab).axis);
+  const slabFirst = computed(() => unref(slab).first);
+  const slabLast = computed(() => unref(slab).last);
+  const volumeRevision = ref(0);
+  const maskRevision = ref(0);
+  const support = computed(() => {
+    void volumeRevision.value;
+    return getOccupiedDepthSupport(currentImageID.value);
+  });
+  const dimensions = computed(() => {
+    void volumeRevision.value;
+    return currentImageData.value?.getDimensions() ?? [1, 1, 1];
+  });
+
+  const segmentOptions = computed(() => {
+    if (!currentImageID.value) return [];
+    const segmentIds = segmentationStore
+      .imageMasks(currentImageID.value)
+      .map((mask) => mask.segmentId);
+    const selected = segmentsRegistry.getSegment(
+      settings.value.selectedSegmentId
+    );
+    // A restored segment can precede its mask record and decoded voxels.
+    if (selected && !segmentIds.includes(selected.id))
+      segmentIds.push(selected.id);
+    return segmentIds.map((segmentId) => {
+      const appearance = segmentsRegistry.appearanceOf(segmentId);
+      return {
+        value: segmentId,
+        title: appearance.displayName,
+        color: appearance.cssColor,
+      };
+    });
+  });
+  watch(
+    [settings, segmentOptions],
+    ([config, options]) => {
+      if (
+        !options.some((option) => option.value === config.selectedSegmentId)
+      ) {
+        if (config.selectedSegmentId) config.highlightThin = false;
+        config.selectedSegmentId = options[0]?.value ?? null;
+      }
+    },
+    { immediate: true }
+  );
+  const selectedMask = computed(() =>
+    segmentationStore.maskFor(
+      currentImageID.value,
+      settings.value.selectedSegmentId
+    )
+  );
+  const selectedBinding = computed(() =>
+    selectedMask.value
+      ? segmentationStore.findMaskBinding(selectedMask.value.id)
+      : undefined
+  );
+  const segmentationReason = computed(
+    () =>
+      unref(blockedReason) ||
+      (!segmentOptions.value.length
+        ? 'Load or create a segmentation mask associated with this volume.'
+        : null)
+  );
+  const maskStorageReason = computed(() => {
+    void maskRevision.value;
+    const binding = selectedBinding.value;
+    if (!binding)
+      return 'The selected segment voxels are not available; load or create its mask to measure occupied depth.';
+    if (isEmptyExtent(binding.extent))
+      return 'The selected segment has no occupied voxels to measure.';
+    const scalars = binding.image.getPointData().getScalars();
+    if (
+      !scalars ||
+      !(scalars.getData() instanceof Uint8Array) ||
+      scalars.getNumberOfComponents() !== 1
+    )
+      return 'The selected segment does not have a supported binary voxel mask.';
+    return null;
+  });
+  const measurementMask = computed(() => {
+    void volumeRevision.value;
+    void maskRevision.value;
+    const binding = selectedBinding.value;
+    const parent = currentImageData.value;
+    if (!binding || !parent) return null;
+    const scalars = binding.image.getPointData().getScalars();
+    const values = scalars?.getData();
+    if (
+      !(values instanceof Uint8Array) ||
+      scalars.getNumberOfComponents() !== 1
+    )
+      return null;
+    return {
+      values,
+      dimensions: binding.image.getDimensions(),
+      extent: extentWithin(binding.extent, parent.getExtent()),
+    };
+  });
+  const maskGeometryReason = computed(() => {
+    void volumeRevision.value;
+    void maskRevision.value;
+    const binding = selectedBinding.value;
+    const parent = currentImageData.value;
+    if (!binding || !parent) return null;
+    const extent = binding.extent;
+    const validExtent = measurementMask.value?.extent.every(
+      (value, index) =>
+        Number.isInteger(value) &&
+        value >= 0 &&
+        value < dimensions.value[Math.floor(index / 2)]
+    );
+    const direction = parent.getDirection();
+    const bases = [0, 1, 2].map((axis) => {
+      const offset = axis * 3;
+      const basis: Vector3 = [
+        direction[offset],
+        direction[offset + 1],
+        direction[offset + 2],
+      ];
+      const length = Math.hypot(...basis);
+      return Number.isFinite(length) && length > 0
+        ? (basis.map((value) => value / length) as Vector3)
+        : null;
+    });
+    const orthogonal = [
+      [0, 1],
+      [0, 2],
+      [1, 2],
+    ].every(([a, b]) => {
+      const left = bases[a];
+      const right = bases[b];
+      return (
+        left !== null && right !== null && Math.abs(dot(left, right)) < 1e-4
+      );
+    });
+    if (!orthogonal)
+      return 'Occupied depth requires an orthogonal source voxel grid.';
+    const gridMatches =
+      areEquals(binding.image.getDimensions(), extentSize(extent), 1e-5) &&
+      areEquals(binding.image.getSpacing(), parent.getSpacing(), 1e-5) &&
+      areEquals(
+        [...binding.image.getDirection()],
+        [...parent.getDirection()],
+        1e-5
+      );
+    const originMatches = areEquals(
+      binding.image.getOrigin(),
+      [...parent.indexToWorld([extent[0], extent[2], extent[4]])],
+      1e-5
+    );
+    return validExtent && gridMatches && originMatches
+      ? null
+      : 'This segmentation mask does not match the source voxel grid; align it to the volume before measuring thickness.';
+  });
+  const micronsPerVoxel = computed(() => {
+    void volumeRevision.value;
+    const image = currentImageData.value;
+    if (!image) return 0;
+    const direction = image.getDirection();
+    const offset = slabAxis.value * 3;
+    const directionLength = Math.hypot(
+      direction[offset],
+      direction[offset + 1],
+      direction[offset + 2]
+    );
+    // DICOM direction cosines describe unit vectors; rounded values retain
+    // their declared spacing. Generic image directions can also carry scale.
+    const scale =
+      support.value.calibratedAxes?.[slabAxis.value] &&
+      Math.abs(directionLength - 1) <= (slabAxis.value === 2 ? 2e-4 : 1e-4)
+        ? 1
+        : directionLength;
+    return Math.abs(image.getSpacing()[slabAxis.value]) * scale * 1000;
+  });
+  const highlightReason = computed(
+    () =>
+      segmentationReason.value ||
+      (!selectedBinding.value ? maskStorageReason.value : null) ||
+      support.value.reason ||
+      (support.value.calibratedAxes?.[slabAxis.value] === false
+        ? 'The projection axis has no reliable declared voxel spacing; occupied depth is unavailable.'
+        : null) ||
+      (!Number.isFinite(micronsPerVoxel.value) || micronsPerVoxel.value <= 0
+        ? 'The projection axis has invalid voxel spacing; occupied depth is unavailable.'
+        : null)
+  );
+  const thicknessReason = computed(
+    () =>
+      highlightReason.value ||
+      maskStorageReason.value ||
+      maskGeometryReason.value
+  );
+
+  // Scalar and mask storage can change in place during streaming or segmentation editing.
+  const volumeScalars = computed(() => {
+    void volumeRevision.value;
+    return currentImageData.value?.getPointData().getScalars();
+  });
+  const maskImage = computed(() => selectedBinding.value?.image);
+  const maskScalars = computed(() => {
+    void maskRevision.value;
+    return maskImage.value?.getPointData().getScalars();
+  });
+  onVTKEvent(currentImageData, 'onModified', () => {
+    volumeRevision.value += 1;
+  });
+  onVTKEvent(volumeScalars, 'onModified', () => {
+    volumeRevision.value += 1;
+  });
+  onVTKEvent(maskImage, 'onModified', () => {
+    maskRevision.value += 1;
+  });
+  onVTKEvent(maskScalars, 'onModified', () => {
+    maskRevision.value += 1;
+  });
+
+  const request = computed((): OccupiedDepthRequest | null => {
+    if (!settings.value.highlightThin) return null;
+    void volumeRevision.value;
+    const image = currentImageData.value;
+    const mask = measurementMask.value;
+    if (!image || !mask || thicknessReason.value) return null;
+    return {
+      dimensions: image.getDimensions(),
+      source: image,
+      segment: selectedMask.value!.id,
+      grid: JSON.stringify([
+        image.getOrigin(),
+        image.getSpacing(),
+        image.getDirection(),
+      ]),
+      axis: slabAxis.value,
+      first: slabFirst.value,
+      last: slabLast.value,
+      mask,
+    };
+  });
+
+  return {
+    settings,
+    selectedMask,
+    segmentOptions,
+    segmentationReason,
+    highlightReason,
+    thicknessReason,
+    micronsPerVoxel,
+    request,
+  };
+}
diff --git a/src/enface/useThinRegionAppearance.ts b/src/enface/useThinRegionAppearance.ts
new file mode 100644
index 000000000..1274afdc3
--- /dev/null
+++ b/src/enface/useThinRegionAppearance.ts
@@ -0,0 +1,41 @@
+import { computed, unref, type MaybeRef } from 'vue';
+import type { Maybe } from '@/src/types';
+import { useSegmentationStore } from '@/src/segmentation/store';
+import {
+  segmentFillAlpha,
+  segmentOutline,
+} from '@/src/segmentation/rendering/display';
+
+/** The selected mask uses its source slice's normal fill and outline settings. */
+export function useThinRegionAppearance(maskId: MaybeRef<Maybe<string>>) {
+  const segmentationStore = useSegmentationStore();
+  return computed(() => {
+    const id = unref(maskId);
+    if (!id) return null;
+    const descriptor = segmentationStore.labelmapDescriptorByMask[id];
+    const segmentation = segmentationStore.segmentationOfMask(id);
+    if (!descriptor || !segmentation) return null;
+    const fillOpacity = segmentFillAlpha(descriptor, segmentation.fillOpacity);
+    const { thicknesses, opacities } = segmentOutline(
+      descriptor,
+      segmentation.outlineThickness,
+      segmentation.outlineOpacity
+    );
+    const outlineThickness = thicknesses[0];
+    const outlineOpacity = opacities[0];
+    let reason: string | null = null;
+    if (!descriptor.visible)
+      reason = 'Show the selected segment to highlight thin regions.';
+    else if (fillOpacity <= 0 && (outlineThickness <= 0 || outlineOpacity <= 0))
+      reason =
+        'Increase segmentation fill opacity or enable an outline to highlight thin regions.';
+    return {
+      color: descriptor.color,
+      value: descriptor.value,
+      fillOpacity,
+      outlineThickness,
+      outlineOpacity,
+      reason,
+    };
+  });
+}
diff --git a/src/io/import/processors/restoreStateFile.ts b/src/io/import/processors/restoreStateFile.ts
index d7e42771c..9f3917253 100644
--- a/src/io/import/processors/restoreStateFile.ts
+++ b/src/io/import/processors/restoreStateFile.ts
@@ -207,7 +207,11 @@ export const createStateFileRestorer = ({
       useSegmentStore().deserialize(manifest);
 
     // Restore camera and contrast before asynchronous mask decoding.
-    useViewConfigStore().deserializeAll(manifest, stateIDToStoreID);
+    useViewConfigStore().deserializeAll(
+      manifest,
+      stateIDToStoreID,
+      segmentIdMap
+    );
     Object.entries(stateIDToStoreID).forEach(([stateID, storeID]) => {
       viewStore.bindViewsToData(stateID, storeID, manifest);
     });
diff --git a/src/io/state-file/schema.ts b/src/io/state-file/schema.ts
index 93801871d..0c7f1a007 100644
--- a/src/io/state-file/schema.ts
+++ b/src/io/state-file/schema.ts
@@ -27,7 +27,6 @@ import type {
 } from '@/src/store/view-configs/types';
 import type { LPSAxis } from '@/src/types/lps';
 import type { Segment as SegmentModel } from '@/src/segmentation/segment';
-import type { EnFaceViewConfig } from '@/src/enface/store';
 import type {
   ColorBy,
   ColorTransferFunction,
@@ -282,13 +281,6 @@ const CinePlaybackViewConfig = z.object({
   frame: z.number(),
 }) satisfies z.ZodType<CinePlaybackViewConfig>;
 
-const EnFaceViewConfig = z.object({
-  axis: z.union([z.literal(0), z.literal(1), z.literal(2)]),
-  method: z.enum(SLAB_METHODS),
-  depthStart: z.number().int().nonnegative(),
-  depthEnd: z.number().int().nonnegative().nullable(),
-}) satisfies z.ZodType<EnFaceViewConfig>;
-
 const ViewConfig = z.object({
   window: WindowLevelConfig.optional(),
   slice: SliceConfig.optional(),
@@ -296,7 +288,17 @@ const ViewConfig = z.object({
   camera: CameraConfig.optional(),
   volumeColorConfig: VolumeColorConfig.optional(),
   cinePlayback: CinePlaybackViewConfig.optional(),
-  enFace: EnFaceViewConfig.optional(),
+  enFace: z
+    .object({
+      axis: z.union([z.literal(0), z.literal(1), z.literal(2)]),
+      method: z.enum(SLAB_METHODS),
+      depthStart: z.number().int().nonnegative(),
+      depthEnd: z.number().int().nonnegative().nullable(),
+      highlightThin: z.boolean().default(false),
+      thresholdMicrons: z.number().nonnegative().default(100),
+      segmentId: z.string().nullable().optional(),
+    })
+    .optional(),
 });
 
 export type ViewConfig = z.infer<typeof ViewConfig>;
diff --git a/src/segmentation/measurements/__tests__/occupiedDepth.spec.ts b/src/segmentation/measurements/__tests__/occupiedDepth.spec.ts
new file mode 100644
index 000000000..a71d11b5d
--- /dev/null
+++ b/src/segmentation/measurements/__tests__/occupiedDepth.spec.ts
@@ -0,0 +1,139 @@
+import { describe, expect, it } from 'vitest';
+import {
+  createOccupiedDepthMeasurer,
+  measureOccupiedDepth,
+  type OccupiedDepthInput,
+} from '../occupiedDepth';
+
+function gappedColumn(): OccupiedDepthInput {
+  const values = new Uint8Array(2 * 6 * 2);
+  for (const depth of [0, 1, 4, 5]) values[2 * depth] = 1;
+  return {
+    dimensions: [2, 6, 2],
+    axis: 1,
+    first: 0,
+    last: 5,
+    mask: { values, dimensions: [2, 6, 2], extent: [0, 1, 0, 5, 0, 1] },
+  };
+}
+
+describe('selected-slab occupied depth', () => {
+  it.each([
+    [0, 5, 4],
+    [1, 4, 2],
+    [2, 3, 0],
+    [1, 1, 1],
+  ])('counts slab %i..%i without filling gaps', (first, last, count) => {
+    const field = measureOccupiedDepth({ ...gappedColumn(), first, last });
+    expect(Array.from(field.counts)).toEqual([count, 0, 0, 0]);
+    expect(field.maximumCount).toBe(count);
+  });
+
+  it.each([0, 1, 2] as const)(
+    'maps a nonzero cropped extent on axis %i',
+    (axis) => {
+      const field = measureOccupiedDepth({
+        dimensions: [5, 6, 7],
+        axis,
+        first: 0,
+        last: [4, 5, 6][axis],
+        mask: {
+          values: new Uint8Array(27).fill(1),
+          dimensions: [3, 3, 3],
+          extent: [1, 3, 2, 4, 3, 5],
+        },
+      });
+      const expectedSizes = [
+        [6, 7],
+        [5, 7],
+        [5, 6],
+      ];
+      const expectedCorner = [
+        [2, 3],
+        [1, 3],
+        [1, 2],
+      ][axis];
+      expect([field.width, field.height]).toEqual(expectedSizes[axis]);
+      const present = Array.from(field.counts.entries()).filter(
+        ([, count]) => count > 0
+      );
+      expect(present).toHaveLength(9);
+      expect(present[0]).toEqual([
+        expectedCorner[0] + field.width * expectedCorner[1],
+        3,
+      ]);
+      expect(field.maximumCount).toBe(3);
+    }
+  );
+
+  it('includes mask voxels when the slab midpoint lies outside the crop', () => {
+    const field = measureOccupiedDepth({
+      dimensions: [2, 20, 2],
+      axis: 1,
+      first: 0,
+      last: 19,
+      mask: {
+        values: new Uint8Array([1, 1]),
+        dimensions: [1, 2, 1],
+        extent: [1, 1, 1, 2, 1, 1],
+      },
+    });
+    expect(Array.from(field.counts)).toEqual([0, 0, 0, 2]);
+  });
+
+  it('rejects malformed or nonbinary masks instead of treating them as empty', () => {
+    const input = gappedColumn();
+    input.mask.values[0] = 2;
+    expect(() => measureOccupiedDepth(input)).toThrow('binary mask');
+    expect(() =>
+      measureOccupiedDepth({ ...gappedColumn(), first: -1 })
+    ).toThrow('inclusive source range');
+  });
+
+  it('reuses a prepared mask across clipped slabs without changing prior results', () => {
+    const { mask, ...slab } = gappedColumn();
+    const measure = createOccupiedDepthMeasurer(mask);
+    const full = measure(slab);
+    const clipped = measure({ ...slab, first: 1, last: 4 });
+    expect(Array.from(clipped.counts)).toEqual([2, 0, 0, 0]);
+    expect(Array.from(full.counts)).toEqual([4, 0, 0, 0]);
+    expect(full.maximumCount).toBe(4);
+    expect(clipped.maximumCount).toBe(2);
+  });
+
+  it('validates each source grid and slab after preparing the mask', () => {
+    const { mask, ...slab } = gappedColumn();
+    const measure = createOccupiedDepthMeasurer(mask);
+    expect(measure(slab).maximumCount).toBe(4);
+    expect(() => measure({ ...slab, dimensions: [1, 6, 2] })).toThrow(
+      'align with the source'
+    );
+    expect(() => measure({ ...slab, last: 6 })).toThrow(
+      'inclusive source range'
+    );
+    expect(measure({ ...slab, first: 1, last: 1 }).maximumCount).toBe(1);
+  });
+
+  it('validates one-shot mask contents again after the same array is edited', () => {
+    const input = gappedColumn();
+    expect(measureOccupiedDepth(input).maximumCount).toBe(4);
+    input.mask.values[0] = 2;
+    expect(() => measureOccupiedDepth(input)).toThrow('binary mask');
+  });
+
+  it('rejects malformed prepared storage and one-shot crop geometry', () => {
+    const input = gappedColumn();
+    expect(() =>
+      createOccupiedDepthMeasurer({
+        ...input.mask,
+        values: new Uint8Array(12),
+      })
+    ).toThrow('scalar count');
+    expect(() =>
+      measureOccupiedDepth({
+        ...input,
+        mask: { ...input.mask, extent: [0, 1, 0, 4, 0, 1] },
+      })
+    ).toThrow('align with the source');
+  });
+});
diff --git a/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts b/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
new file mode 100644
index 000000000..a15faf4e5
--- /dev/null
+++ b/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
@@ -0,0 +1,253 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { enableAutoUnmount, mount } from '@vue/test-utils';
+import { defineComponent, h, nextTick, shallowRef } from 'vue';
+import {
+  createOccupiedDepthHandler,
+  type MeasurementRequest,
+} from '../occupiedDepthHandler';
+import {
+  useOccupiedDepth,
+  type OccupiedDepthRequest,
+} from '../useOccupiedDepth';
+
+enableAutoUnmount(afterEach);
+
+function controlledMeasurements() {
+  const replies: Array<() => void> = [];
+  let fail: () => void = () => {};
+  const create = () => {
+    const handle = createOccupiedDepthHandler();
+    const worker = {
+      onmessage: null as Worker['onmessage'],
+      onerror: null as Worker['onerror'],
+      onmessageerror: null as Worker['onmessageerror'],
+      terminate: () => {},
+      postMessage(message: MeasurementRequest, transfer: Transferable[]) {
+        const snapshot = structuredClone(message, { transfer });
+        const response = handle(snapshot);
+        const receive = worker.onmessage!;
+        replies.push(() =>
+          receive.call(
+            worker as unknown as Worker,
+            new MessageEvent('message', {
+              data: response,
+            })
+          )
+        );
+      },
+    };
+    fail = () =>
+      worker.onerror?.call(
+        worker as unknown as Worker,
+        new ErrorEvent('error', { message: 'Measurement device unavailable.' })
+      );
+    return worker as unknown as Worker;
+  };
+  return {
+    create,
+    finish: async () => {
+      await nextTick();
+      replies.shift()?.();
+      await nextTick();
+    },
+    fail: () => fail(),
+  };
+}
+
+function mountMeasurement(keepEnabled = false) {
+  const request = shallowRef<OccupiedDepthRequest | null>({
+    source: {},
+    segment: 'segment',
+    grid: 'grid',
+    dimensions: [1, 6, 1],
+    axis: 1,
+    first: 0,
+    last: 5,
+    mask: {
+      values: new Uint8Array([1, 1, 0, 0, 1, 1]),
+      dimensions: [1, 6, 1],
+      extent: [0, 0, 0, 5, 0, 0],
+    },
+  });
+  const worker = controlledMeasurements();
+  const wrapper = mount(
+    defineComponent({
+      setup() {
+        const { accepted, computing, error, stale } = useOccupiedDepth(
+          request,
+          worker.create,
+          keepEnabled ? true : undefined
+        );
+        return () =>
+          h(
+            'output',
+            { role: 'status' },
+            stale.value
+              ? `${accepted.value!.counts.join(',')} occupied cells (updating)`
+              : computing.value
+                ? 'Measuring occupied depth'
+                : (error.value ??
+                  (accepted.value
+                    ? `${accepted.value.counts.join(',')} occupied cells`
+                    : 'Unavailable'))
+          );
+      },
+    })
+  );
+  return { request, worker, wrapper };
+}
+
+describe('occupied-depth result ownership', () => {
+  it('keeps obsolete overlays unavailable until the final selected slab completes', async () => {
+    const { request, worker, wrapper } = mountMeasurement();
+    const input = request.value!;
+    request.value = { ...input, first: 1, last: 4 };
+    request.value = { ...input, first: 2, last: 3 };
+    await nextTick();
+    expect(wrapper.text()).toBe('Measuring occupied depth');
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('Measuring occupied depth');
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('0 occupied cells');
+    expect(Array.from(input.mask.values)).toEqual([1, 1, 0, 0, 1, 1]);
+  });
+
+  it('keeps a compatible overlay visible and marked stale until the newest edit completes', async () => {
+    const { request, worker, wrapper } = mountMeasurement();
+    await worker.finish();
+    const input = request.value!;
+    input.mask.values[0] = 0;
+    request.value = { ...input, mask: { ...input.mask } };
+    await nextTick();
+    expect(wrapper.text()).toBe('4 occupied cells (updating)');
+    input.mask.values[1] = 0;
+    request.value = { ...input, mask: { ...input.mask } };
+    await worker.finish();
+    expect(wrapper.text()).toBe('4 occupied cells (updating)');
+    await worker.finish();
+    expect(wrapper.text()).toBe('2 occupied cells');
+  });
+
+  it.each(['source', 'segment', 'grid'] as const)(
+    'removes the previous overlay while a different %s is measured',
+    async (field) => {
+      const { request, worker, wrapper } = mountMeasurement();
+      await worker.finish();
+      request.value = {
+        ...request.value!,
+        [field]: field === 'source' ? {} : 'replacement',
+      };
+      await nextTick();
+      expect(wrapper.text()).toBe('Measuring occupied depth');
+      await worker.finish();
+      expect(wrapper.text()).toBe('4 occupied cells');
+    }
+  );
+
+  it('keeps the worker snapshot through a temporary invalid crop while highlighting stays enabled', async () => {
+    const { request, worker, wrapper } = mountMeasurement(true);
+    const input = request.value!;
+    await worker.finish();
+    request.value = null;
+    await nextTick();
+    expect(wrapper.text()).toBe('Unavailable');
+    input.mask.values[0] = 0;
+    request.value = input;
+    await worker.finish();
+    expect(wrapper.text()).toBe('4 occupied cells');
+    request.value = { ...input, mask: { ...input.mask } };
+    await worker.finish();
+    expect(wrapper.text()).toBe('3 occupied cells');
+  });
+
+  it('does not restore removed-source measurements when an old reply arrives', async () => {
+    const { request, worker, wrapper } = mountMeasurement();
+    request.value = null;
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('Unavailable');
+  });
+
+  it('keeps the prepared snapshot across slabs and refreshes announced in-place edits', async () => {
+    const { request, worker, wrapper } = mountMeasurement();
+    const input = request.value!;
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('4 occupied cells');
+
+    input.mask.values[0] = 0;
+    request.value = { ...input, last: 4 };
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('3 occupied cells');
+
+    request.value = { ...request.value!, mask: { ...input.mask } };
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('2 occupied cells');
+    expect(Array.from(input.mask.values)).toEqual([0, 1, 0, 0, 1, 1]);
+  });
+
+  it('moves a replacement crop to its source column and rechecks source geometry', async () => {
+    const { request, worker, wrapper } = mountMeasurement();
+    const input = request.value!;
+    await worker.finish();
+    request.value = {
+      ...input,
+      dimensions: [2, 6, 1],
+      mask: { ...input.mask, extent: [1, 1, 0, 5, 0, 0] },
+    };
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('0,4 occupied cells');
+
+    request.value = { ...request.value, dimensions: [1, 6, 1] };
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toContain('align with the source');
+  });
+
+  it('ignores an old reply after highlighting restarts with the same mask', async () => {
+    const { request, worker, wrapper } = mountMeasurement();
+    const input = request.value!;
+    request.value = null;
+    request.value = { ...input, first: 1, last: 1 };
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('Measuring occupied depth');
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('1 occupied cells');
+  });
+
+  it('does not reuse the prior mask after an invalid replacement', async () => {
+    const { request, worker, wrapper } = mountMeasurement();
+    const input = request.value!;
+    await worker.finish();
+    const mask = { ...input.mask, values: new Uint8Array([2, 1, 0, 0, 1, 1]) };
+    request.value = { ...input, mask };
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toContain('binary mask');
+
+    request.value = { ...input, mask, first: 1, last: 1 };
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('Occupied depth requires a binary mask.');
+  });
+
+  it('ends pending status on a real failure and can measure the next input', async () => {
+    const { request, worker, wrapper } = mountMeasurement();
+    const input = request.value!;
+    worker.fail();
+    await nextTick();
+    expect(wrapper.text()).toBe('Measurement device unavailable.');
+    await worker.finish();
+    request.value = { ...input, first: 1, last: 1 };
+    await worker.finish();
+    await nextTick();
+    expect(wrapper.text()).toBe('1 occupied cells');
+  });
+});
diff --git a/src/segmentation/measurements/occupiedDepth.ts b/src/segmentation/measurements/occupiedDepth.ts
new file mode 100644
index 000000000..c09c34566
--- /dev/null
+++ b/src/segmentation/measurements/occupiedDepth.ts
@@ -0,0 +1,166 @@
+export type OccupiedDepthInput = {
+  dimensions: readonly number[];
+  axis: 0 | 1 | 2;
+  first: number;
+  last: number;
+  mask: {
+    values: Uint8Array;
+    dimensions: readonly number[];
+    /** Inclusive parent-image bounds of the cropped binary mask. */
+    extent: readonly number[];
+  };
+};
+
+export type OccupiedDepthResult = {
+  width: number;
+  height: number;
+  counts: Uint32Array;
+  maximumCount: number;
+};
+
+function voxelCount(dimensions: readonly number[]) {
+  if (
+    dimensions.length !== 3 ||
+    dimensions.some((value) => !Number.isInteger(value) || value < 1)
+  )
+    throw new Error(
+      'Occupied depth requires three positive integer dimensions.'
+    );
+  const count = dimensions[0] * dimensions[1] * dimensions[2];
+  if (!Number.isSafeInteger(count))
+    throw new Error(
+      'Occupied depth dimensions exceed the supported voxel count.'
+    );
+  return count;
+}
+
+function validateMaskStorage(mask: OccupiedDepthInput['mask']) {
+  if (mask.values.length !== voxelCount(mask.dimensions))
+    throw new Error('Mask scalar count does not match its dimensions.');
+  validateBinaryValues(mask.values);
+}
+
+function validateMaskGeometry(input: OccupiedDepthInput) {
+  const { mask, dimensions } = input;
+  if (
+    mask.extent.length !== 6 ||
+    mask.extent.some((value) => !Number.isInteger(value))
+  )
+    throw new Error('Mask extent requires six integer bounds.');
+  for (let axis = 0; axis < 3; axis++) {
+    const first = mask.extent[2 * axis];
+    const last = mask.extent[2 * axis + 1];
+    if (
+      first < 0 ||
+      last < first ||
+      last >= dimensions[axis] ||
+      last - first + 1 !== mask.dimensions[axis]
+    )
+      throw new Error('Mask dimensions and extent must align with the source.');
+  }
+}
+
+function validateBinaryValues(values: Uint8Array) {
+  for (let index = 0; index < values.length; index++) {
+    if (values[index] > 1)
+      throw new Error('Occupied depth requires a binary mask.');
+  }
+}
+
+function validateInput(input: OccupiedDepthInput) {
+  voxelCount(input.dimensions);
+  if (![0, 1, 2].includes(input.axis))
+    throw new Error('Occupied depth axis must be 0, 1, or 2.');
+  if (
+    !Number.isInteger(input.first) ||
+    !Number.isInteger(input.last) ||
+    input.first < 0 ||
+    input.last < input.first ||
+    input.last >= input.dimensions[input.axis]
+  )
+    throw new Error('Occupied depth slab must be an inclusive source range.');
+  validateMaskGeometry(input);
+}
+
+function selectedExtent(input: OccupiedDepthInput) {
+  const extent = [...input.mask.extent];
+  const offset = input.axis * 2;
+  extent[offset] = Math.max(input.first, extent[offset]);
+  extent[offset + 1] = Math.min(input.last, extent[offset + 1]);
+  return extent;
+}
+
+const stridesOf = (dimensions: readonly number[]) => [
+  1,
+  dimensions[0],
+  dimensions[0] * dimensions[1],
+];
+
+function accumulateRow(
+  state: {
+    values: Uint8Array;
+    counts: Uint32Array;
+    length: number;
+    pixelStep: number;
+  },
+  maskStart: number,
+  pixelStart: number
+) {
+  for (let x = 0; x < state.length; x++) {
+    if (state.values[maskStart + x])
+      state.counts[pixelStart + x * state.pixelStep]++;
+  }
+}
+
+function countOccupiedDepth(input: OccupiedDepthInput): OccupiedDepthResult {
+  validateInput(input);
+  const horizontal = input.axis === 0 ? 1 : 0;
+  const vertical = input.axis === 2 ? 1 : 2;
+  const width = input.dimensions[horizontal];
+  const height = input.dimensions[vertical];
+  const counts = new Uint32Array(width * height);
+  const maskStrides = stridesOf(input.mask.dimensions);
+  const { extent } = input.mask;
+  const selected = selectedExtent(input);
+  const state = {
+    values: input.mask.values,
+    counts,
+    length: Math.max(0, selected[1] - selected[0] + 1),
+    pixelStep: input.axis === 0 ? 0 : 1,
+  };
+  // Contiguous X rows avoid strided full-depth reads on large masks.
+  for (let z = selected[4]; z <= selected[5]; z++) {
+    for (let y = selected[2]; y <= selected[3]; y++) {
+      const point = [selected[0], y, z];
+      accumulateRow(
+        state,
+        selected[0] -
+          extent[0] +
+          (y - extent[2]) * maskStrides[1] +
+          (z - extent[4]) * maskStrides[2],
+        point[horizontal] + width * point[vertical]
+      );
+    }
+  }
+  return {
+    width,
+    height,
+    counts,
+    maximumCount: counts.reduce(
+      (maximum, count) => Math.max(maximum, count),
+      0
+    ),
+  };
+}
+
+/** Reuses a validated, immutable mask snapshot across selected slabs. */
+export function createOccupiedDepthMeasurer(mask: OccupiedDepthInput['mask']) {
+  validateMaskStorage(mask);
+  return (input: Omit<OccupiedDepthInput, 'mask'>) =>
+    countOccupiedDepth({ ...input, mask });
+}
+
+/** Counts occupied source cells inside the selected slab, excluding gaps. */
+export function measureOccupiedDepth(input: OccupiedDepthInput) {
+  return createOccupiedDepthMeasurer(input.mask)(input);
+}
diff --git a/src/segmentation/measurements/occupiedDepth.worker.ts b/src/segmentation/measurements/occupiedDepth.worker.ts
new file mode 100644
index 000000000..b3bce6c10
--- /dev/null
+++ b/src/segmentation/measurements/occupiedDepth.worker.ts
@@ -0,0 +1,9 @@
+import { createOccupiedDepthHandler } from '@/src/segmentation/measurements/occupiedDepthHandler';
+import type { MeasurementRequest } from '@/src/segmentation/measurements/occupiedDepthHandler';
+
+const handle = createOccupiedDepthHandler();
+self.onmessage = ({ data }: MessageEvent<MeasurementRequest>) => {
+  const response = handle(data);
+  const transfer = response.result ? [response.result.counts.buffer] : [];
+  self.postMessage(response, transfer);
+};
diff --git a/src/segmentation/measurements/occupiedDepthHandler.ts b/src/segmentation/measurements/occupiedDepthHandler.ts
new file mode 100644
index 000000000..3b19bb886
--- /dev/null
+++ b/src/segmentation/measurements/occupiedDepthHandler.ts
@@ -0,0 +1,41 @@
+import { createOccupiedDepthMeasurer } from '@/src/segmentation/measurements/occupiedDepth';
+import type {
+  OccupiedDepthInput,
+  OccupiedDepthResult,
+} from '@/src/segmentation/measurements/occupiedDepth';
+
+export type MeasurementRequest = {
+  id: number;
+  input: Omit<OccupiedDepthInput, 'mask'>;
+  /** Omitted when the worker already holds this mask revision. */
+  mask?: OccupiedDepthInput['mask'];
+};
+
+export type MeasurementResponse = {
+  id: number;
+  result?: OccupiedDepthResult;
+  error?: string;
+};
+
+/** Owns the prepared mask snapshot for one worker. */
+export function createOccupiedDepthHandler() {
+  let measure: ReturnType<typeof createOccupiedDepthMeasurer> | undefined;
+  return (data: MeasurementRequest): MeasurementResponse => {
+    try {
+      if (data.mask) {
+        measure = undefined;
+        measure = createOccupiedDepthMeasurer(data.mask);
+      }
+      if (!measure) throw new Error('Occupied depth requires a binary mask.');
+      return { id: data.id, result: measure(data.input) };
+    } catch (cause) {
+      return {
+        id: data.id,
+        error:
+          cause instanceof Error
+            ? cause.message
+            : 'Occupied depth measurement failed.',
+      };
+    }
+  };
+}
diff --git a/src/segmentation/measurements/useOccupiedDepth.ts b/src/segmentation/measurements/useOccupiedDepth.ts
new file mode 100644
index 000000000..20c7dd739
--- /dev/null
+++ b/src/segmentation/measurements/useOccupiedDepth.ts
@@ -0,0 +1,170 @@
+import {
+  computed,
+  onScopeDispose,
+  ref,
+  shallowRef,
+  unref,
+  watch,
+  type MaybeRef,
+} from 'vue';
+import type { OccupiedDepthInput, OccupiedDepthResult } from './occupiedDepth';
+import type {
+  MeasurementRequest,
+  MeasurementResponse,
+} from './occupiedDepthHandler';
+
+export type OccupiedDepthRequest = OccupiedDepthInput & {
+  source: object;
+  segment: string;
+  grid: string;
+};
+
+function compatible(left: OccupiedDepthRequest, right: OccupiedDepthRequest) {
+  return (
+    left.source === right.source &&
+    left.segment === right.segment &&
+    left.grid === right.grid &&
+    left.axis === right.axis &&
+    left.first === right.first &&
+    left.last === right.last &&
+    left.dimensions.every((value, index) => value === right.dimensions[index])
+  );
+}
+
+const createMeasurementWorker = () =>
+  new Worker(new URL('./occupiedDepth.worker.ts', import.meta.url), {
+    type: 'module',
+  });
+
+/** One running measurement and the latest requested slab per mounted view. */
+export function useOccupiedDepth(
+  request: MaybeRef<OccupiedDepthRequest | null>,
+  createWorker = createMeasurementWorker,
+  enabled: MaybeRef<boolean> = computed(() => !!unref(request))
+) {
+  const result = shallowRef<OccupiedDepthResult | null>(null);
+  const computing = ref(false);
+  const error = ref<string | null>(null);
+  let worker: Worker | null = null;
+  let active: OccupiedDepthRequest | null = null;
+  let pending: OccupiedDepthRequest | null = null;
+  let sequence = 0;
+  const acceptedRequest = shallowRef<OccupiedDepthRequest | null>(null);
+  let mask: OccupiedDepthInput['mask'] | undefined;
+
+  function release() {
+    if (worker) {
+      worker.onmessage = null;
+      worker.onerror = null;
+      worker.onmessageerror = null;
+    }
+    worker?.terminate();
+    worker = null;
+    active = null;
+    acceptedRequest.value = null;
+    mask = undefined;
+    sequence++;
+  }
+
+  function fail(message: string) {
+    release();
+    pending = null;
+    result.value = null;
+    error.value = message;
+    computing.value = false;
+  }
+
+  function getWorker() {
+    if (!worker) {
+      worker = createWorker();
+      worker.onmessage = receive;
+      worker.onerror = (event) =>
+        fail(event.message || 'Occupied depth measurement failed.');
+      worker.onmessageerror = () =>
+        fail('Occupied depth measurement returned unreadable data.');
+    }
+    return worker;
+  }
+
+  function startPending() {
+    if (active || !pending) return;
+    const input = pending;
+    pending = null;
+    active = input;
+    try {
+      const target = getWorker();
+      const message: MeasurementRequest = {
+        id: ++sequence,
+        input: {
+          dimensions: [...input.dimensions],
+          axis: input.axis,
+          first: input.first,
+          last: input.last,
+        },
+      };
+      const transfer: Transferable[] = [];
+      if (mask !== input.mask) {
+        mask = input.mask;
+        const values = new Uint8Array(mask.values);
+        message.mask = {
+          values,
+          dimensions: [...mask.dimensions],
+          extent: [...mask.extent],
+        };
+        transfer.push(values.buffer);
+      }
+      target.postMessage(message, transfer);
+    } catch (cause) {
+      fail(
+        cause instanceof Error
+          ? cause.message
+          : 'Occupied depth measurement failed.'
+      );
+    }
+  }
+
+  function receive(event: MessageEvent<MeasurementResponse>) {
+    if (event.data.id !== sequence) return;
+    if (active === unref(request)) {
+      result.value = event.data.result ?? null;
+      acceptedRequest.value = event.data.result ? active : null;
+      error.value = event.data.error ?? null;
+      computing.value = false;
+    }
+    active = null;
+    startPending();
+  }
+
+  watch(
+    [() => unref(request), () => unref(enabled)],
+    ([input, isEnabled]) => {
+      if (
+        !isEnabled ||
+        !input ||
+        !acceptedRequest.value ||
+        !compatible(acceptedRequest.value, input)
+      ) {
+        result.value = null;
+        acceptedRequest.value = null;
+      }
+      error.value = null;
+      computing.value = isEnabled && !!input;
+      pending = isEnabled ? input : null;
+      if (!isEnabled) release();
+      else startPending();
+    },
+    { immediate: true, flush: 'pre' }
+  );
+  onScopeDispose(release);
+  const accepted = computed(() => {
+    const input = unref(request);
+    return unref(enabled) &&
+      input &&
+      acceptedRequest.value &&
+      compatible(acceptedRequest.value, input)
+      ? result.value
+      : null;
+  });
+  const stale = computed(() => computing.value && !!accepted.value);
+  return { accepted, computing, error, stale };
+}
diff --git a/src/segmentation/rendering/VtkSegmentationSliceRepresentation.vue b/src/segmentation/rendering/VtkSegmentationSliceRepresentation.vue
index 5d1bb3620..4546fbfdc 100644
--- a/src/segmentation/rendering/VtkSegmentationSliceRepresentation.vue
+++ b/src/segmentation/rendering/VtkSegmentationSliceRepresentation.vue
@@ -1,28 +1,14 @@
 <script setup lang="ts">
-import {
-  toRefs,
-  watchEffect,
-  inject,
-  computed,
-  ref,
-  shallowRef,
-  onScopeDispose,
-} from 'vue';
+import { toRefs, inject, computed, ref, shallowRef } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
-import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
+import { useLabelmapRepresentation } from '@/src/segmentation/rendering/useLabelmapRepresentation';
 import { LPSAxis } from '@/src/types/lps';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSegmentationStore } from '@/src/segmentation/store';
-import { InterpolationType } from '@kitware/vtk.js/Rendering/Core/ImageProperty/Constants';
-import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
-import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 import { watchImmediate } from '@vueuse/core';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import {
-  SEGMENT_ACTOR_OPACITY,
-  SEGMENT_COINCIDENT_OFFSET,
   segmentFillAlpha,
   segmentOutline,
 } from '@/src/segmentation/rendering/display';
@@ -108,84 +94,27 @@ watchImmediate(
   }
 );
 
-// setup slice rep
-const sliceRep = useSliceRepresentation(view, imageData);
-
-// Let widget fill representations be picked through the segment overlay
-sliceRep.actor.setPickable(false);
-
-const ownedColorTransferFunction = vtkColorTransferFunction.newInstance();
-const ownedOpacityFunction = vtkPiecewiseFunction.newInstance();
-sliceRep.property.setRGBTransferFunction(0, ownedColorTransferFunction);
-sliceRep.property.setScalarOpacity(0, ownedOpacityFunction);
-onScopeDispose(() => {
-  ownedColorTransferFunction.delete();
-  ownedOpacityFunction.delete();
-});
-sliceRep.property.setInterpolationType(InterpolationType.NEAREST);
-sliceRep.property.setOpacity(SEGMENT_ACTOR_OPACITY);
-// needed for vtk.js >= 23.0.0
-sliceRep.property.setUseLookupTableScalarRange(true);
-
-// Use one depth offset for every mask within the segmentation renderer.
-sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
-sliceRep.mapper.setRelativeCoincidentTopologyPolygonOffsetParameters(
-  ...SEGMENT_COINCIDENT_OFFSET
-);
-
-watchEffect(() => {
-  if (ijkAxis.value === undefined) return;
-  sliceRep.mapper.setSlicingMode(
-    [SlicingMode.I, SlicingMode.J, SlicingMode.K][ijkAxis.value]
-  );
-});
-// The render mask holds only the viewed plane.
-sliceRep.mapper.setSlice(0);
-
-// set coloring properties
-const applySegmentColoring = () => {
-  const cfun = sliceRep.property.getRGBTransferFunction(0);
-  const ofun = sliceRep.property.getPiecewiseFunction(0);
-
-  if (!cfun || !ofun) throw new Error('Missing transfer functions');
-
-  cfun.removeAllPoints();
-  ofun.removeAllPoints();
-
+const appearance = computed(() => {
   const segment = descriptor.value;
-  if (!segment) return; // segmentation just deleted
+  if (!segment) return null;
 
-  const [r, g, b] = segment.color;
-  cfun.addRGBPoint(0, 0, 0, 0);
-  ofun.addPoint(0, 0);
-  cfun.addRGBPoint(segment.value, r / 255, g / 255, b / 255);
   const normalAlpha = segmentFillAlpha(segment, display.value.fillOpacity);
   const pulseAlpha = segment.visible ? 0.7 * revealPulse.value : 0;
-  ofun.addPoint(segment.value, Math.max(normalAlpha, pulseAlpha));
-  cfun.addRGBPoint(segment.value + 1, 0, 0, 0);
-  ofun.addPoint(segment.value + 1, 0);
-
-  sliceRep.property.modified();
-};
-
-watchEffect(applySegmentColoring);
-
-const outlineThickness = computed(
-  () => display.value.outlineThickness + 3 * revealPulse.value
-);
-sliceRep.property.setUseLabelOutline(true);
-
-watchEffect(() => {
-  const segment = descriptor.value;
-  if (!segment) return; // segmentation just deleted
-
   const { thicknesses, opacities } = segmentOutline(
     segment,
-    outlineThickness.value,
+    display.value.outlineThickness + 3 * revealPulse.value,
     Math.max(display.value.outlineOpacity, revealPulse.value)
   );
-  sliceRep.property.setLabelOutlineThickness(thicknesses);
-  sliceRep.property.setLabelOutlineOpacity(opacities);
+  return {
+    value: segment.value,
+    color: segment.color,
+    fillOpacity: Math.max(normalAlpha, pulseAlpha),
+    outlineThickness: thicknesses[0],
+    outlineOpacity: opacities[0],
+  };
+});
+const sliceRep = useLabelmapRepresentation(view, imageData, appearance, {
+  axis: ijkAxis,
 });
 
 defineExpose(sliceRep);
diff --git a/src/segmentation/rendering/useLabelmapRepresentation.ts b/src/segmentation/rendering/useLabelmapRepresentation.ts
new file mode 100644
index 000000000..d84c01cd4
--- /dev/null
+++ b/src/segmentation/rendering/useLabelmapRepresentation.ts
@@ -0,0 +1,90 @@
+import { onScopeDispose, unref, watchEffect, type MaybeRef } from 'vue';
+import type vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
+import { InterpolationType } from '@kitware/vtk.js/Rendering/Core/ImageProperty/Constants';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
+import type { View } from '@/src/core/vtk/types';
+import type { Maybe } from '@/src/types';
+import {
+  SEGMENT_ACTOR_OPACITY,
+  SEGMENT_COINCIDENT_OFFSET,
+} from '@/src/segmentation/rendering/display';
+
+export type LabelmapAppearance = {
+  value: number;
+  color: readonly number[];
+  fillOpacity: number;
+  outlineThickness: number;
+  outlineOpacity: number;
+};
+
+type LabelmapRepresentationOptions = {
+  axis: MaybeRef<number | undefined>;
+};
+
+/** Renders a borrowed single-plane labelmap with resolved segment appearance. */
+export function useLabelmapRepresentation(
+  view: View,
+  imageData: MaybeRef<Maybe<vtkImageData>>,
+  appearance: MaybeRef<LabelmapAppearance | null>,
+  options: LabelmapRepresentationOptions
+) {
+  const sliceRep = useSliceRepresentation(view, imageData);
+
+  // Let widget fill representations be picked through the segment overlay.
+  sliceRep.actor.setPickable(false);
+
+  const colorTransferFunction = vtkColorTransferFunction.newInstance();
+  const opacityFunction = vtkPiecewiseFunction.newInstance();
+  sliceRep.property.setRGBTransferFunction(0, colorTransferFunction);
+  sliceRep.property.setScalarOpacity(0, opacityFunction);
+  onScopeDispose(() => {
+    colorTransferFunction.delete();
+    opacityFunction.delete();
+  });
+  sliceRep.property.setInterpolationType(InterpolationType.NEAREST);
+  sliceRep.property.setOpacity(SEGMENT_ACTOR_OPACITY);
+  sliceRep.property.setUseLookupTableScalarRange(true);
+  sliceRep.property.setUseLabelOutline(true);
+
+  // All labelmaps use the same depth offset within their renderer.
+  sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
+  sliceRep.mapper.setRelativeCoincidentTopologyPolygonOffsetParameters(
+    ...SEGMENT_COINCIDENT_OFFSET
+  );
+  watchEffect(() => {
+    const axisIndex = unref(options.axis);
+    if (axisIndex === undefined) return;
+    sliceRep.mapper.setSlicingMode(
+      [SlicingMode.I, SlicingMode.J, SlicingMode.K][axisIndex]
+    );
+  });
+  sliceRep.mapper.setSlice(0);
+
+  watchEffect(() => {
+    colorTransferFunction.removeAllPoints();
+    opacityFunction.removeAllPoints();
+
+    const segment = unref(appearance);
+    if (!segment) return;
+
+    const [r, g, b] = segment.color;
+    colorTransferFunction.addRGBPoint(0, 0, 0, 0);
+    opacityFunction.addPoint(0, 0);
+    colorTransferFunction.addRGBPoint(segment.value, r / 255, g / 255, b / 255);
+    opacityFunction.addPoint(segment.value, segment.fillOpacity);
+    colorTransferFunction.addRGBPoint(segment.value + 1, 0, 0, 0);
+    opacityFunction.addPoint(segment.value + 1, 0);
+    sliceRep.property.modified();
+
+    sliceRep.property.setLabelOutlineThickness([segment.outlineThickness]);
+    sliceRep.property.setLabelOutlineOpacity([segment.outlineOpacity]);
+  });
+
+  onVTKEvent(imageData, 'onModified', () => view.requestRender());
+
+  return sliceRep;
+}
diff --git a/src/store/view-configs.ts b/src/store/view-configs.ts
index a51f8b451..6d9aac4f8 100644
--- a/src/store/view-configs.ts
+++ b/src/store/view-configs.ts
@@ -56,7 +56,8 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
   const deserialize = (
     viewID: string,
     config: Record<string, ViewConfig>,
-    dataIDMap: Record<string, string>
+    dataIDMap: Record<string, string>,
+    segmentIdMap: Record<string, string> = {}
   ) => {
     // First update the view config map to use the new dataIDs
     const updatedConfig: Record<string, ViewConfig> = {};
@@ -72,12 +73,13 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     viewCameraStore.deserialize(viewID, updatedConfig);
     volumeColoringStore.deserialize(viewID, updatedConfig);
     cinePlaybackStore.deserialize(viewID, updatedConfig);
-    enFaceViewStore.deserialize(viewID, updatedConfig);
+    enFaceViewStore.deserialize(viewID, updatedConfig, segmentIdMap);
   };
 
   const deserializeAll = (
     manifest: StateFile['manifest'],
-    dataIDMap: Record<string, string>
+    dataIDMap: Record<string, string>,
+    segmentIdMap: Record<string, string> = {}
   ) => {
     // Layer images are rebuilt after view settings are restored.
     const configIDMap = { ...dataIDMap };
@@ -103,7 +105,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
 
     Object.entries(manifest.viewByID ?? {}).forEach(([viewID, view]) => {
       if (view.config) {
-        deserialize(viewID, view.config, configIDMap);
+        deserialize(viewID, view.config, configIDMap, segmentIdMap);
       }
     });
   };
diff --git a/tests/fixtures/oct/volumes.ts b/tests/fixtures/oct/volumes.ts
index 4b5a92e4f..e43b66ed6 100644
--- a/tests/fixtures/oct/volumes.ts
+++ b/tests/fixtures/oct/volumes.ts
@@ -245,3 +245,22 @@ export function syntheticMask(illustrative = false) {
         },
   });
 }
+
+export function gappedSyntheticMask() {
+  const [width, depth, frames] = reference.size;
+  const scalars = new Uint16Array(width * depth * frames);
+  for (let z = 1; z < frames - 1; z++)
+    for (let x = 1; x < width - 1; x++)
+      for (const y of [100, 101, 104, 105])
+        scalars[(z * depth + y) * width + x] = 1;
+  return createNrrdVolume({
+    scalars,
+    dimensions: reference.size,
+    spacing: reference.spacing,
+    metadata: {
+      Segment0_LabelValue: '1',
+      Segment0_Name: 'Gapped band',
+      Segment0_Color: '1 0 0',
+    },
+  });
+}
diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index 67975287b..a43763fea 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -368,8 +368,8 @@ class VolViewPage extends Page {
   async closeMenu(activator: ChainablePromiseElement) {
     const contentId = await activator.getAttribute('aria-controls');
     if ((await activator.getAttribute('aria-expanded')) === 'true') {
-      await activator.waitForClickable();
-      await activator.click();
+      // A tall popup can cover its activator in a compact pane.
+      await browser.keys(Key.Escape);
     }
     await expect(activator).toHaveAttribute('aria-expanded', 'false');
     if (contentId)
diff --git a/tests/specs/menuTestUtils.ts b/tests/specs/menuTestUtils.ts
new file mode 100644
index 000000000..0ff9c519e
--- /dev/null
+++ b/tests/specs/menuTestUtils.ts
@@ -0,0 +1,12 @@
+export async function closeMenuWithEscape(activator: WebdriverIO.Element) {
+  const id = await activator.getAttribute('aria-controls');
+  expect(id).toBeTruthy();
+  const content = $(`[id="${id}"] .v-overlay__content`);
+  if ((await activator.getAttribute('aria-expanded')) === 'true') {
+    await content.waitForDisplayed();
+    await content.waitForStable();
+    await browser.keys('Escape');
+    await expect(activator).toHaveAttribute('aria-expanded', 'false');
+  }
+  await content.waitForDisplayed({ reverse: true, opacityProperty: false });
+}
diff --git a/tests/specs/oct-en-face.e2e.ts b/tests/specs/oct-en-face.e2e.ts
index 7e5e0e86b..cedef380c 100644
--- a/tests/specs/oct-en-face.e2e.ts
+++ b/tests/specs/oct-en-face.e2e.ts
@@ -14,6 +14,7 @@ import {
   WINDOW_TOOL,
   openEnFaceProjection,
   openEnFaceControls,
+  expandEnFaceSection,
   selectSetting,
 } from './octTestUtils';
 import { TEMP_DIR } from '../../wdio.shared.conf';
@@ -30,9 +31,13 @@ import { createSyntheticOCT } from '../fixtures/oct/dicom';
 import { paddedSyntheticOCT } from '../fixtures/oct/padding';
 import {
   reference,
+  THRESHOLD,
   STEM,
   stageFixture,
   expectProjectionPixel,
+  observeSlabProjectionChanges,
+  enableHighlight,
+  setThicknessThreshold,
   expectCalibratedEnFace,
   openRetina,
   registerOctTestHooks,
@@ -54,7 +59,31 @@ describe('Retinal OCT en-face', () => {
     };
     await $(CONTROLS).doubleClick();
     await expectBothViews();
-    await openEnFaceProjection();
+    await openEnFaceControls();
+    await enableHighlight();
+    const inlineHelp = await $(
+      '.v-overlay--active [data-testid="enface-thickness-help"]'
+    ).execute((button) => {
+      const text = button.parentElement?.parentElement?.firstChild;
+      if (!text) return false;
+      const range = document.createRange();
+      range.selectNodeContents(text);
+      const caption = range.getBoundingClientRect();
+      const icon = button.getBoundingClientRect();
+      return (
+        icon.left >= caption.right &&
+        icon.top < caption.bottom &&
+        icon.bottom > caption.top
+      );
+    });
+    expect(inlineHelp).toBe(true);
+    await $(THRESHOLD).doubleClick();
+    await expectBothViews();
+    await $(
+      '.v-overlay--active [data-testid="enface-thickness-threshold"] [role="slider"]'
+    ).doubleClick();
+    await expectBothViews();
+    await expandEnFaceSection('projection');
     await slabThumb('start').doubleClick();
     await expectBothViews();
     await browser.keys('Escape');
@@ -87,9 +116,10 @@ describe('Retinal OCT en-face', () => {
       );
     });
     expect(contained).toBe(true);
-    await expect(
-      $(PANEL).$('[data-testid="enface-projection-toggle"]')
-    ).toHaveAttribute('aria-expanded', 'true');
+    for (const section of ['projection', 'thickness'])
+      await expect(
+        $(PANEL).$('[data-testid="enface-' + section + '-toggle"]')
+      ).toHaveAttribute('aria-expanded', 'true');
     await setEnFaceWindow(1000, 500);
     // The standard physical slab has mean 317, maximum 538 and sampled sum 140431.
     await expectProjectionPixel(81);
@@ -125,6 +155,14 @@ describe('Retinal OCT en-face', () => {
     ).toHaveValue('Sagittal');
     await expect(slabThumb('start')).toHaveAttribute('aria-valuenow', '0');
     await expect(slabThumb('end')).toHaveAttribute('aria-valuenow', '127');
+    await expandEnFaceSection('thickness');
+    await expect(
+      $('.v-overlay--active [data-testid="enface-thin-highlight"] input')
+    ).toBeDisabled();
+    await expect($(THRESHOLD)).toBeDisabled();
+    await expect(
+      $('.v-overlay--active [data-testid="enface-segmentation-segment"] input')
+    ).toBeDisabled();
     expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 
@@ -139,6 +177,15 @@ describe('Retinal OCT en-face', () => {
     await setEnFaceWindow(1000, 500);
     await expectProjectionPixel(81);
     await openEnFaceControls();
+    const threshold = $(
+      '.v-overlay--active [data-testid="enface-thickness-threshold"] [role="slider"]'
+    );
+    await enableHighlight();
+    await expect($(THRESHOLD)).toBeEnabled();
+    await setThicknessThreshold(0);
+    const thresholdMaximum = await threshold.getAttribute('aria-valuemax');
+    expect(Number(thresholdMaximum)).toBeGreaterThan(1);
+    const thresholdValue = await $(THRESHOLD).getValue();
     const start = slabThumb('start');
     const end = slabThumb('end');
     await start.scrollIntoView({ block: 'center', inline: 'nearest' });
@@ -150,6 +197,7 @@ describe('Retinal OCT en-face', () => {
     const startX = Math.round(startBounds.x + startSize.width / 2);
     const endX = Math.round(endBounds.x + endSize.width / 2);
     const y = Math.round(startBounds.y + startSize.height / 2);
+    const readProjectionChanges = await observeSlabProjectionChanges();
     let draggedStart = 0;
     try {
       await browser
@@ -160,17 +208,26 @@ describe('Retinal OCT en-face', () => {
         .perform(true);
       await expect(start).not.toHaveAttribute('aria-valuenow', '0');
       draggedStart = Number(await start.getAttribute('aria-valuenow'));
-      expect(draggedStart).toBeGreaterThan(90);
+      expect(draggedStart).toBeGreaterThan(reference.slab.end);
       expect(draggedStart).toBeLessThan(130);
       await expect(start.$('.v-slider-thumb__label')).toBeDisplayed();
+      await expect(threshold).toHaveAttribute(
+        'aria-valuemax',
+        thresholdMaximum!
+      );
+      await expect($(THRESHOLD)).toHaveValue(thresholdValue);
       await expectProjectionPixel(81);
+      expect(await readProjectionChanges()).toEqual([]);
     } finally {
       await browser.action('pointer', { id: 'oct-slab-drag' }).up().perform();
+      await readProjectionChanges();
     }
     await waitForEnFaceReady();
     await expectProjectionPixel(
       Math.round(((317 + draggedStart) * 255) / 1000)
     );
+    await expect(threshold).toHaveAttribute('aria-valuemax', '0.1');
+    await expect($(THRESHOLD)).toHaveValue(thresholdValue);
     await browser.keys(Key.Home);
     await expect(start).toHaveAttribute('aria-valuenow', '0');
     await expectProjectionPixel(81);
@@ -273,7 +330,7 @@ describe('Retinal OCT en-face', () => {
     await expectProjectionPixel(81);
     await openEnFaceControls();
     await selectSetting('enface-projection-method', 'Maximum');
-    await browser.keys('Escape');
+    await volViewPage.closeMenu($(CONTROLS));
     await waitForEnFaceReady();
     await setEnFaceWindow(1000, 500);
     await expectProjectionPixel(137);
diff --git a/tests/specs/oct-import.e2e.ts b/tests/specs/oct-import.e2e.ts
index 4c8a49423..e47057942 100644
--- a/tests/specs/oct-import.e2e.ts
+++ b/tests/specs/oct-import.e2e.ts
@@ -34,10 +34,14 @@ import {
 } from './segmentationTestUtils';
 import {
   reference,
+  THRESHOLD,
   STEM,
   stageFixture,
+  setThicknessThreshold,
   expectProjectionPixel,
+  enableHighlight,
   dragEnFaceContrast,
+  expectHighlight,
   expectStackedMaskWithoutSidebar,
   expectSliceLine,
   registerOctTestHooks,
@@ -81,17 +85,32 @@ describe('Retinal OCT import', () => {
     await expectStackedMaskWithoutSidebar();
 
     await openEnFaceControls();
+    await enableHighlight();
+    expect(
+      await $(
+        '.v-overlay--active [data-testid="enface-segmentation-segment"]'
+      ).getText()
+    ).toContain('Synthetic retinal layer');
+    await setThicknessThreshold(31);
+    await expectHighlight(true);
     await expectControlsBesideSelector();
     await browser.keys('Escape');
     await dragEnFaceContrast();
     const retainedWindow = await getWindow();
     const retainedSlice = await volViewPage.getFirst2DSlice();
     await selectTwoRowLayout();
-    await waitForEnFaceReady();
+    await expectHighlight(true);
     expect(await getWindow()).toEqual(retainedWindow);
     expect(await volViewPage.getFirst2DSlice()).toBe(retainedSlice);
     await expectSliceLine();
     await openEnFaceControls();
+    await expandEnFaceSection('thickness');
+    expect(
+      await $(
+        '.v-overlay--active [data-testid="enface-segmentation-segment"]'
+      ).getText()
+    ).toContain('Synthetic retinal layer');
+    expect(Number(await $(THRESHOLD).getValue())).toBe(31);
     await browser.keys('Escape');
     await volViewPage.focusFirst2DView();
     const before = await volViewPage.getFirst2DSlice();
@@ -119,7 +138,7 @@ describe('Retinal OCT import', () => {
     await volViewPage.open('?urls=[tmp/' + saved + ']');
     await volViewPage.waitForViews();
     await $(CANVAS).waitForDisplayed();
-    await waitForEnFaceReady();
+    await expectHighlight(true);
     await expectSliceLine();
     await expectStackedMaskWithoutSidebar();
     await volViewPage.waitForViewCounts(1, false);
diff --git a/tests/specs/oct-native-dicom.e2e.ts b/tests/specs/oct-native-dicom.e2e.ts
index bfd12f705..78c630d15 100644
--- a/tests/specs/oct-native-dicom.e2e.ts
+++ b/tests/specs/oct-native-dicom.e2e.ts
@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { JHU_RETINAL_LAYERS, RETINAL_OCT_DICOM } from '../datasets';
-import { volViewPage } from '../pageobjects/volview.page';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
 import { applyTestViewport } from '../../wdio.shared.conf';
 import { useCachedSample, writeManifestToFile, overlayOption } from './utils';
 import native from '../fixtures/oct/heidelberg-reference.json';
@@ -123,7 +123,7 @@ describe('Public OCT exports', () => {
     await applyTestViewport(browser);
   });
 
-  it('loads retinal layers from a ZIP URL or sample card and projects the volume on request', async () => {
+  it('loads retinal layers from a ZIP URL or sample card and projects a layer on request', async () => {
     const names = [
       'Retinal nerve fiber layer (RNFL)',
       'Ganglion cell and inner plexiform layers (GCL+IPL)',
@@ -194,17 +194,58 @@ describe('Public OCT exports', () => {
     await selectEnFace(1);
     await waitForEnFaceReady();
     await openEnFaceControls();
-    await expect($('[data-testid="enface-projection-toggle"]')).toHaveAttribute(
-      'aria-expanded',
-      'true'
-    );
-    await expandEnFaceSection();
+    for (const section of ['projection', 'thickness'])
+      await expect(
+        $('[data-testid="enface-' + section + '-toggle"]')
+      ).toHaveAttribute('aria-expanded', 'true');
+    await expandEnFaceSection('projection');
     const axis = $('.v-overlay--active [data-testid="enface-projection-axis"]');
     await axis.scrollIntoView({ block: 'center' });
     await axis.waitForClickable();
     await axis.click();
     await overlayOption('Coronal').waitForClickable();
     await overlayOption('Coronal').click();
+    await expandEnFaceSection('thickness');
+    await expect(
+      $('.v-overlay--active [data-testid="enface-segmentation-segment"] input')
+    ).toBeEnabled();
+    await $(
+      '.v-overlay--active [data-testid="enface-thin-highlight"] label'
+    ).click();
+    const segment = $(
+      '.v-overlay--active [data-testid="enface-segmentation-segment"]'
+    );
+    await segment.scrollIntoView({ block: 'center' });
+    await segment.waitForClickable();
+    await segment.click();
+    await overlayOption(names[2]).waitForClickable();
+    await overlayOption(names[2]).click();
+    const thresholdSlider = $(
+      '.v-overlay--active [data-testid="enface-thickness-threshold"] [role="slider"]'
+    );
+    await expect(thresholdSlider).toHaveAttribute('aria-valuemax', '58.1');
+    await setValueVueInput(
+      $(
+        '.v-overlay--active [data-testid="enface-thickness-threshold-input"] input'
+      ),
+      '20'
+    );
+    await expect(thresholdSlider).toHaveAttribute('aria-valuenow', '20');
+    await $(
+      '.v-overlay--active [data-testid="enface-projection-toggle"]'
+    ).click();
+    await $('.v-overlay--active [data-testid="enface-projection-toggle"]')
+      .$('..')
+      .$('.v-expansion-panel-text')
+      .waitForDisplayed({ reverse: true });
+    await expect(
+      $('.v-overlay--active [data-testid="enface-thickness-toggle"]')
+    ).toHaveAttribute('aria-expanded', 'true');
+    await expect(
+      $(
+        '.v-overlay--active [data-testid="enface-thickness-threshold-input"] input'
+      )
+    ).toHaveValue('20');
     const captureDirectory = process.env.VOLVIEW_OCT_CAPTURE_DIR;
     if (captureDirectory) {
       fs.mkdirSync(captureDirectory, { recursive: true });
@@ -213,7 +254,11 @@ describe('Public OCT exports', () => {
       );
     }
     await browser.keys('Escape');
-    await waitForEnFaceReady();
+    await browser.waitUntil(
+      async () => (await enFaceAppearance()).coloredPixels > 100,
+      { timeoutMsg: 'Expected the enface labelmap to be visible' }
+    );
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 
   it('keeps source contrast and pixels when replacing an independently windowed projection', async () => {
diff --git a/tests/specs/oct-navigation.e2e.ts b/tests/specs/oct-navigation.e2e.ts
index 830f93028..2aaec26b9 100644
--- a/tests/specs/oct-navigation.e2e.ts
+++ b/tests/specs/oct-navigation.e2e.ts
@@ -26,9 +26,12 @@ import { waitForDownload, SESSION_SAVE_TIMEOUT } from './utils';
 import {
   reference,
   SLICE_LINE,
+  setThicknessThreshold,
   expectProjectionPixel,
+  enableHighlight,
   dragEnFaceContrast,
   getOriginalWindow,
+  expectHighlight,
   expectStackedMaskWithoutSidebar,
   openRetina,
   expectSliceLine,
@@ -348,6 +351,9 @@ describe('Retinal OCT navigation', () => {
     // Select before capturing the comparison with a textured overlay.
     await $('button[data-testid^="control-button-Select "]').click();
     await openEnFaceControls();
+    await enableHighlight();
+    await setThicknessThreshold(31);
+    await expectHighlight(true);
     await expectSliceLine();
     await expectControlsBesideSelector();
     const captureDirectory = process.env.VOLVIEW_OCT_CAPTURE_DIR;
@@ -355,7 +361,7 @@ describe('Retinal OCT navigation', () => {
       fs.mkdirSync(captureDirectory, { recursive: true });
       await $('.Vue-Toastification__toast').waitForDisplayed({ reverse: true });
       await browser.saveScreenshot(
-        path.join(captureDirectory, 'retina-en-face-navigation.png')
+        path.join(captureDirectory, 'retina-en-face-thickness.png')
       );
     }
     await browser.keys('Escape');
@@ -370,8 +376,14 @@ describe('Retinal OCT navigation', () => {
     await volViewPage.open('?urls=[tmp/' + saved + ']');
     await volViewPage.waitForViews();
     await $(CANVAS).waitForDisplayed();
-    await waitForEnFaceReady();
+    await expectHighlight(true);
     await openEnFaceControls();
+    await expandEnFaceSection('thickness');
+    expect(
+      await $(
+        '.v-overlay--active [data-testid="enface-segmentation-segment"]'
+      ).getText()
+    ).toContain('Synthetic retinal layer');
     await browser.keys('Escape');
     await expectSliceLine();
     expect(await getWindow()).toEqual(savedWindow);
diff --git a/tests/specs/oct-occupied-depth.e2e.ts b/tests/specs/oct-occupied-depth.e2e.ts
new file mode 100644
index 000000000..717a21945
--- /dev/null
+++ b/tests/specs/oct-occupied-depth.e2e.ts
@@ -0,0 +1,402 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import JSZip from 'jszip';
+import { createNrrdVolume } from '../fixtures/oct/volumes';
+import { Key } from 'webdriverio';
+import {
+  PANEL,
+  attachMaskThroughDataPanel,
+  enFaceAppearance,
+  enFacePixel,
+  waitForEnFaceReady,
+  stageGenericOCT,
+  expandEnFaceSection,
+  setSlabRange,
+  setEnFaceWindow,
+  slabThumb,
+  selectEnFace,
+  openEnFaceControls,
+  selectSetting,
+} from './octTestUtils';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import { volViewPage } from '../pageobjects/volview.page';
+import {
+  makeTempDir,
+  openThroughDialog,
+  waitForDownload,
+  SESSION_SAVE_TIMEOUT,
+  waitForModuleTransitions,
+} from './utils';
+import {
+  openAnnotationSegments,
+  setSegmentationDisplaySlider as setDisplaySlider,
+  selectSegment,
+  waitForSegmentContent,
+} from './segmentationTestUtils';
+import {
+  THRESHOLD,
+  STEM,
+  stageFixture,
+  setThicknessThreshold,
+  expectProjectionPixel,
+  enableHighlight,
+  expectHighlight,
+  openHighlightedSegmentationDisplay,
+  openRetina,
+  registerOctTestHooks,
+} from './octInteractionTestUtils';
+
+async function stageOffsetDepthScene(offset: boolean) {
+  const directory = makeTempDir(STEM);
+  const name = offset ? 'offset-depth' : 'zero-depth';
+  const minimum = offset ? [1, 1, 1] : [0, 0, 0];
+  const origin = offset ? [0, 0, 0] : [1, 1, 1];
+  const extent = minimum.flatMap((first) => [first, first + 7]).join(' ');
+  fs.writeFileSync(
+    path.join(directory, name + '.vti'),
+    '<VTKFile type="ImageData" version="1.0" byte_order="LittleEndian">' +
+      `<ImageData WholeExtent="${extent}" Origin="${origin.join(' ')}" Spacing="1 1 1">` +
+      `<Piece Extent="${extent}"><PointData Scalars="intensity">` +
+      '<DataArray type="UInt16" Name="intensity" format="ascii">' +
+      new Array(8 ** 3).fill(100).join(' ') +
+      '</DataArray></PointData><CellData/></Piece></ImageData></VTKFile>'
+  );
+  const zip = new JSZip();
+  zip.file(
+    'mask.nrrd',
+    createNrrdVolume({
+      dimensions: [4, 4, 4],
+      spacing: [1, 1, 1],
+      origin: [2, 3, 2],
+      scalars: Uint16Array.from({ length: 4 ** 3 }, (_, index) =>
+        index % 4 < 2 && Math.floor(index / 4) % 4 >= 2 ? 0 : 1
+      ),
+    })
+  );
+  zip.file(
+    'manifest.json',
+    JSON.stringify({
+      version: '7.0.0',
+      dataSources: [{ id: 0, type: 'uri', uri: `/tmp/${STEM}/${name}.vti` }],
+      segments: [{ id: 'band', name: 'Offset band', color: [255, 0, 0, 255] }],
+      segmentations: [
+        {
+          id: 'segmentation',
+          name: 'Offset band',
+          parentImage: '0',
+          fillOpacity: 1,
+          outlineOpacity: 0,
+          outlineThickness: 0,
+          order: ['mask'],
+          masks: [
+            {
+              id: 'mask',
+              segmentId: 'band',
+              representations: {
+                labelmap: {
+                  path: 'mask.nrrd',
+                  extent: [1, 4, 2, 5, 1, 4].map(
+                    (value, index) => value + minimum[Math.floor(index / 2)]
+                  ),
+                },
+              },
+            },
+          ],
+        },
+      ],
+      viewByID: {
+        enface: {
+          id: 'enface',
+          name: 'En face',
+          type: 'EnFace',
+          dataID: '0',
+          config: {
+            '0': {
+              enFace: {
+                axis: 1,
+                method: 'mean',
+                depthStart: 0,
+                depthEnd: null,
+                highlightThin: true,
+                thresholdMicrons: 3000,
+                segmentId: 'band',
+              },
+            },
+          },
+        },
+      },
+      layout: { direction: 'row', items: [{ type: 'slot', slotIndex: 0 }] },
+      layoutSlots: ['enface'],
+      activeView: 'enface',
+    })
+  );
+  fs.writeFileSync(
+    path.join(directory, name + '.volview.zip'),
+    await zip.generateAsync({ type: 'nodebuffer' })
+  );
+  return `${STEM}/${name}.volview.zip`;
+}
+
+describe('Retinal OCT occupied-depth', () => {
+  registerOctTestHooks();
+  it('highlights physical thickness and restores its selected segment, threshold and slab', async () => {
+    await openRetina(true);
+    await enableHighlight();
+    await setThicknessThreshold(31);
+    await expectHighlight(true);
+    const expectThinColumns = async () => {
+      await browser.waitUntil(
+        async () => {
+          const thin = await enFacePixel(20, 12);
+          const thick = await enFacePixel(60, 12);
+          const absent = await enFacePixel(100, 12);
+          return (
+            thin[0] > thin[1] + 20 &&
+            thick[0] === thick[1] &&
+            absent[0] === absent[1]
+          );
+        },
+        {
+          timeoutMsg:
+            'Only positive thickness below the threshold should be highlighted',
+        }
+      );
+    };
+    await expectThinColumns();
+    const slider = $(
+      '.v-overlay--active [data-testid="enface-thickness-threshold"] [role="slider"]'
+    );
+    await $(THRESHOLD).click();
+    await browser.keys('Tab');
+    await expect(slider).toBeFocused();
+    await browser.keys('ArrowRight');
+    await expect($(THRESHOLD)).toHaveValue('31.1');
+    await browser.keys('Home');
+    await expect($(THRESHOLD)).toHaveValue('0');
+    await expectHighlight(false);
+    const maximum = await slider.getAttribute('aria-valuemax');
+    await browser.keys('End');
+    await expect($(THRESHOLD)).toHaveValue(maximum!);
+    await expectHighlight(true);
+    await setThicknessThreshold(20.8);
+    await expectHighlight(false);
+    await setThicknessThreshold(31);
+    await expectHighlight(true);
+    await expectThinColumns();
+    await expandEnFaceSection('projection');
+    await setSlabRange(0, 10);
+    await expectHighlight(false);
+    await expect(slider).toHaveAttribute('aria-valuemax', '0.1');
+    await expect($(THRESHOLD)).toHaveValue('31');
+    await setSlabRange(100, 114);
+    await expectHighlight(true);
+    await expectThinColumns();
+    await selectSetting(
+      'enface-segmentation-segment',
+      'Alternative synthetic band'
+    );
+    await expectHighlight(false);
+    await setThicknessThreshold(60);
+    await expectHighlight(true);
+    await selectSetting('enface-projection-method', 'Maximum');
+    await waitForEnFaceReady();
+    await browser.keys('Escape');
+    const saved = await volViewPage.saveSession();
+    await waitForDownload(path.join(TEMP_DIR, saved), SESSION_SAVE_TIMEOUT);
+    await volViewPage.open('?urls=[tmp/' + saved + ']');
+    await waitForEnFaceReady();
+    await expectHighlight(true);
+    await openEnFaceControls();
+    await expandEnFaceSection('projection');
+    await expect(
+      $('.v-overlay--active [data-testid="enface-projection-method"] input')
+    ).toHaveValue('Maximum');
+    await expect(slabThumb('start')).toHaveAttribute('aria-valuenow', '100');
+    await expect(slabThumb('end')).toHaveAttribute('aria-valuenow', '114');
+    await expandEnFaceSection('thickness');
+    await expect($(THRESHOLD)).toHaveValue('60');
+    await expect(
+      $('.v-overlay--active [data-testid="enface-segmentation-segment"]')
+    ).toHaveText(expect.stringContaining('Alternative synthetic band'));
+    await expect(
+      $('.v-overlay--active [data-testid="enface-thin-highlight"] input')
+    ).toBeSelected();
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
+  });
+
+  it('keeps highlighted pixels and selected slabs aligned on equivalent offset extents', async () => {
+    const expectedImages: string[] = [];
+    for (const offset of [false, true]) {
+      const scene = await stageOffsetDepthScene(offset);
+      await volViewPage.open(`?urls=[tmp/${scene}]`);
+      await waitForEnFaceReady();
+      await setEnFaceWindow(200, 100);
+      await openEnFaceControls();
+      await expandEnFaceSection('thickness');
+      await expect(
+        $('.v-overlay--active [data-testid="enface-thin-highlight"] input')
+      ).toBeEnabled();
+      const slabs = [
+        [0, 7, [true, false, false]],
+        [0, 1, [false, false, false]],
+        [2, 2, [true, true, false]],
+        [4, 5, [false, true, false]],
+      ] satisfies [number, number, boolean[]][];
+      for (const [step, [first, last, highlighted]] of slabs.entries()) {
+        await expandEnFaceSection('projection');
+        await setSlabRange(first, last);
+        await browser.waitUntil(
+          async () => {
+            const pixels = await Promise.all(
+              [1.5, 3.5, 6].map((x) => enFacePixel(x, 2.5))
+            );
+            return pixels.every((pixel, index) =>
+              highlighted[index]
+                ? pixel[0] > pixel[1] + 20 && pixel[0] > pixel[2] + 20
+                : pixel[0] === pixel[1] &&
+                  pixel[1] === pixel[2] &&
+                  pixel[0] > 20
+            );
+          },
+          {
+            timeoutMsg: `Expected occupied-depth pixels for slab ${first}-${last}`,
+          }
+        );
+        if (offset)
+          await browser.waitUntil(
+            async () =>
+              (await enFaceAppearance()).image === expectedImages[step],
+            {
+              timeoutMsg:
+                'Expected the same occupied-depth overlay for equivalent extents',
+            }
+          );
+        else expectedImages.push((await enFaceAppearance()).image);
+      }
+      expect(await volViewPage.getNotificationsCount()).toBe(0);
+    }
+  });
+
+  it('uses imported NIfTI geometry for thickness when units are unspecified', async () => {
+    const directory = makeTempDir(STEM);
+    const name = stageGenericOCT(directory, 'nii', false);
+    await volViewPage.open();
+    await openThroughDialog(path.join(directory, name));
+    await volViewPage.waitForViews();
+    await selectEnFace();
+    await openEnFaceControls();
+    await expandEnFaceSection('projection');
+    await selectSetting('enface-projection-axis', 'Coronal');
+    await waitForEnFaceReady();
+    await browser.keys('Escape');
+    await attachMaskThroughDataPanel(stageFixture('synthetic-thickness.nrrd'));
+    await openAnnotationSegments();
+    await waitForSegmentContent('Synthetic retinal band');
+    await selectSegment('Synthetic retinal band');
+    await openEnFaceControls();
+    await expandEnFaceSection('thickness');
+    await expect(
+      $('.v-overlay--active [data-testid="enface-thin-highlight"] input')
+    ).toBeEnabled();
+    await enableHighlight();
+    await setThicknessThreshold(1);
+    await expectHighlight(false);
+    await setThicknessThreshold(31);
+    await expectHighlight(true);
+    await browser.keys(Key.Escape);
+    await $(PANEL).waitForDisplayed({ reverse: true });
+    await volViewPage.renderingModuleTab.click();
+    await waitForModuleTransitions();
+    const toggle = $('[data-testid="enface-rendering-toggle"]');
+    await toggle.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await toggle.waitForClickable();
+    if ((await toggle.getAttribute('aria-expanded')) !== 'true')
+      await toggle.click();
+    const sidebar = $('[data-testid="enface-sidebar-controls"]');
+    await sidebar.waitForDisplayed();
+    await toggle.$('..').waitForStable();
+    for (const selector of [
+      '[data-testid="enface-thin-highlight"] input',
+      '[data-testid="enface-segmentation-segment"] input',
+      '[data-testid="enface-thickness-threshold-input"] input',
+    ])
+      await expect(sidebar.$(selector)).toBeEnabled();
+    await expect(
+      sidebar.$('[data-testid="enface-thickness-threshold-input"] input')
+    ).toHaveValue('31');
+    await expectHighlight(true);
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
+  });
+
+  it('renders below-threshold labels with normal fill, outline and visibility controls', async () => {
+    await openRetina(true);
+    await setEnFaceWindow(1000, 500);
+    await expectProjectionPixel(81);
+    const interior = () => enFacePixel(20, 12);
+    const boundary = () => enFacePixel(42.5, 12, { x: -2, y: 0 });
+    const innerBoundary = () => enFacePixel(42.5, 12, { x: -12, y: 0 });
+    const scanEdge = () => enFacePixel(-0.5, 12, { x: 2, y: 0 });
+    const outside = () => enFacePixel(60, 12);
+    const baseline = {
+      interior: await interior(),
+      boundary: await boundary(),
+      innerBoundary: await innerBoundary(),
+      scanEdge: await scanEdge(),
+      outside: await outside(),
+    };
+    const expectPixel = async (
+      sample: () => Promise<number[]>,
+      expected: number[]
+    ) =>
+      browser.waitUntil(
+        async () =>
+          (await sample()).every(
+            (channel, index) => Math.abs(channel - expected[index]) <= 2
+          ),
+        { timeoutMsg: `Expected rendered label pixel ${expected.join(',')}` }
+      );
+    const red = (background: number[], alpha: number) =>
+      background.map((channel, index) =>
+        index === 3
+          ? 255
+          : Math.round(channel * (1 - alpha) + (index === 0 ? 255 : 0) * alpha)
+      );
+    await openHighlightedSegmentationDisplay();
+
+    await setDisplaySlider('Outline Thickness', 10);
+    await setDisplaySlider('Fill Opacity', 0);
+    await expectPixel(boundary, [255, 0, 0, 255]);
+    await expectPixel(interior, baseline.interior);
+    await expectPixel(innerBoundary, baseline.innerBoundary);
+    await expectPixel(outside, baseline.outside);
+    // Standard label outlines stay inside the label and do not invent scan-edge background.
+    await expectPixel(scanEdge, baseline.scanEdge);
+    expect((await enFaceAppearance()).coloredPixels).toBeGreaterThan(100);
+
+    await setDisplaySlider('Fill Opacity', 0.5);
+    await setDisplaySlider('Outline Opacity', 0.5);
+    await expectPixel(interior, red(baseline.interior, 0.5));
+    await expectPixel(boundary, red(baseline.boundary, 0.5));
+    await expectPixel(outside, baseline.outside);
+
+    await setDisplaySlider('Outline Opacity', 0);
+    await expectPixel(boundary, baseline.boundary);
+    await expectPixel(interior, red(baseline.interior, 0.5));
+    await setDisplaySlider('Outline Thickness', 0);
+    await expectPixel(boundary, red(baseline.boundary, 0.5));
+    await setDisplaySlider('Fill Opacity', 0);
+    await expectHighlight(false);
+    await setDisplaySlider('Outline Opacity', 1);
+    await setDisplaySlider('Outline Thickness', 10);
+    await expectPixel(boundary, [255, 0, 0, 255]);
+    await expectPixel(interior, baseline.interior);
+
+    await $('[data-testid="toggle-segments-visible-button"]').click();
+    await expectHighlight(false);
+    await setDisplaySlider('Fill Opacity', 1);
+    await expectHighlight(false);
+    await $('[data-testid="toggle-segments-visible-button"]').click();
+    await expectPixel(interior, [255, 0, 0, 255]);
+    await expectPixel(boundary, [255, 0, 0, 255]);
+  });
+});
diff --git a/tests/specs/octInteractionTestUtils.ts b/tests/specs/octInteractionTestUtils.ts
index 0da7f8383..f4488a2dc 100644
--- a/tests/specs/octInteractionTestUtils.ts
+++ b/tests/specs/octInteractionTestUtils.ts
@@ -4,10 +4,12 @@ import path from 'node:path';
 import {
   dragContrast,
   attachAndSelectMask,
+  enFaceAppearance,
   expectEnFacePixel,
   waitForEnFaceReady,
   stageIllustrativeMask,
   expectStackedSourceMask,
+  expandEnFaceSection,
   getEnFaceWindow as getWindow,
   displayedWindow,
   selectEnFace,
@@ -17,16 +19,20 @@ import {
   PANEL,
   WINDOW_TOOL,
 } from './octTestUtils';
-import { volViewPage } from '../pageobjects/volview.page';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
 import { makeTempDir, writeManifestToFile } from './utils';
 import { applyTestViewport } from '../../wdio.shared.conf';
 import { syntheticMask } from '../fixtures/oct/volumes';
 import reference from '../fixtures/oct/reference.json';
 import { createSyntheticOCT } from '../fixtures/oct/dicom';
 import { waitForFirstCachedImageSpacing } from './imageCacheUtils';
+import { openAnnotationSegments } from './segmentationTestUtils';
 
 export { reference };
 
+export const THRESHOLD =
+  PANEL + ' [data-testid="enface-thickness-threshold-input"] input';
+
 export const SLICE_LINE = '[data-testid="enface-slice-lines"] line';
 
 export const STEM = 'oct-fixtures-' + process.pid;
@@ -40,10 +46,60 @@ export function stageFixture(name: string) {
   return STEM + '/' + name;
 }
 
+export async function setThicknessThreshold(value: number) {
+  await expandEnFaceSection('thickness');
+  const input = $(THRESHOLD);
+  await input.scrollIntoView({ block: 'center', inline: 'nearest' });
+  await input.waitForClickable();
+  await setValueVueInput(input, String(value));
+}
+
 export async function expectProjectionPixel(gray: number, x = 60, y = 12) {
   await expectEnFacePixel(gray, [x, y]);
 }
 
+export async function observeSlabProjectionChanges() {
+  await browser.execute(() => {
+    const viewer = document.querySelector('[data-testid="enface-viewer"]')!;
+    const threshold = document.querySelector(
+      '.v-overlay--active [data-testid="enface-thickness-threshold"] [role="slider"]'
+    )!;
+    const changes: string[] = [];
+    const observer = new MutationObserver((records) => {
+      records.forEach((record) => changes.push(record.attributeName!));
+    });
+    observer.observe(viewer, { attributeFilter: ['aria-busy'] });
+    observer.observe(threshold, { attributeFilter: ['aria-valuemax'] });
+    Object.assign(window, {
+      readSlabProjectionChanges: () => {
+        observer.disconnect();
+        return changes;
+      },
+    });
+  });
+  return () =>
+    browser.execute(() =>
+      (
+        window as typeof window & { readSlabProjectionChanges: () => string[] }
+      ).readSlabProjectionChanges()
+    );
+}
+
+export async function enableHighlight() {
+  await expandEnFaceSection('thickness');
+  const label = $(
+    '.v-overlay--active [data-testid="enface-thin-highlight"] label'
+  );
+  await label.scrollIntoView({ block: 'center', inline: 'nearest' });
+  await label.waitForClickable();
+  if (
+    !(await $(
+      '.v-overlay--active [data-testid="enface-thin-highlight"] input'
+    ).isSelected())
+  )
+    await label.click();
+}
+
 export async function dragEnFaceContrast() {
   await volViewPage.closeMenu($(WINDOW_TOOL));
   await volViewPage.closeMenu($(CONTROLS));
@@ -72,6 +128,31 @@ export async function getOriginalWindow() {
   return displayedWindow(source);
 }
 
+export async function expectHighlight(present: boolean) {
+  await waitForEnFaceReady();
+  await browser.waitUntil(
+    async () => {
+      const { coloredPixels } = await enFaceAppearance();
+      return present ? coloredPixels > 100 : coloredPixels === 0;
+    },
+    {
+      timeoutMsg: `Expected enface highlight to be ${present ? 'visible' : 'hidden'}`,
+    }
+  );
+}
+
+export async function openHighlightedSegmentationDisplay() {
+  await openEnFaceControls();
+  await enableHighlight();
+  await setThicknessThreshold(31);
+  await expectHighlight(true);
+  await browser.keys('Escape');
+  await openAnnotationSegments();
+  const display = $('[data-testid="segment-display-section"]');
+  if ((await display.getAttribute('aria-expanded')) !== 'true')
+    await display.click();
+}
+
 export async function expectCalibratedEnFace() {
   await waitForEnFaceReady();
   const spacing = await waitForFirstCachedImageSpacing();
diff --git a/tests/specs/octTestUtils.ts b/tests/specs/octTestUtils.ts
index 24aa25661..0c718afe2 100644
--- a/tests/specs/octTestUtils.ts
+++ b/tests/specs/octTestUtils.ts
@@ -147,8 +147,9 @@ export const windowedGray = (
   value: number,
   { width, level }: { width: number; level: number }
 ) => Math.round(255 * Math.min(1, Math.max(0, (value - level) / width + 0.5)));
-const PROJECTION_TOGGLE =
-  '.v-overlay--active [data-testid="enface-projection-toggle"]';
+type EnFaceSection = 'projection' | 'thickness';
+const sectionToggle = (section: EnFaceSection) =>
+  '.v-overlay--active [data-testid="enface-' + section + '-toggle"]';
 const enFaceView = async (view?: WebdriverIO.Element) =>
   view ?? $(VIEWER).getElement();
 
@@ -182,8 +183,10 @@ export async function displayedWindow(view: WebdriverIO.Element) {
   return { width: Number(match[1]), level: Number(match[2]) };
 }
 
-export async function expandEnFaceSection() {
-  const toggle = $(PROJECTION_TOGGLE);
+export async function expandEnFaceSection(
+  section: EnFaceSection = 'projection'
+) {
+  const toggle = $(sectionToggle(section));
   await toggle.scrollIntoView({ block: 'center', inline: 'nearest' });
   await toggle.waitForClickable();
   if ((await toggle.getAttribute('aria-expanded')) !== 'true')
@@ -223,6 +226,7 @@ export async function selectSetting(
   const option = overlayOption(title);
   await option.waitForClickable();
   await option.click();
+  await option.waitForDisplayed({ reverse: true });
 }
 
 export async function chooseEnFaceProjection(
@@ -234,7 +238,6 @@ export async function chooseEnFaceProjection(
   await volViewPage.closeMenu($(WINDOW_TOOL));
   await openEnFaceProjection(viewer);
   await selectSetting(testId, label);
-  await overlayOption(label).waitForDisplayed({ reverse: true });
   await volViewPage.closeMenu(viewer.$(CONTROLS));
   await $(PANEL).waitForDisplayed({ reverse: true });
 }
@@ -525,9 +528,15 @@ export async function getEnFaceWindow(view?: WebdriverIO.Element) {
   const controls = viewer.$(CONTROLS);
   const restorePanel =
     (await controls.getAttribute('aria-expanded')) === 'true';
-  const expanded =
-    restorePanel &&
-    (await $(PROJECTION_TOGGLE).getAttribute('aria-expanded')) === 'true';
+  const sections = ['projection', 'thickness'] as const;
+  const expanded = await Promise.all(
+    sections.map(
+      async (section) =>
+        restorePanel &&
+        (await $(sectionToggle(section)).getAttribute('aria-expanded')) ===
+          'true'
+    )
+  );
   await volViewPage.closeMenu(controls);
   if (restorePanel) await panel.waitForDisplayed({ reverse: true });
   await viewer.$(CANVAS).waitForClickable();
@@ -544,13 +553,15 @@ export async function getEnFaceWindow(view?: WebdriverIO.Element) {
     const reopened = $(PANEL);
     await reopened.waitForDisplayed();
     await reopened.waitForStable();
-    const toggle = $(PROJECTION_TOGGLE);
-    if (expanded) {
-      await expandEnFaceSection();
-    } else if ((await toggle.getAttribute('aria-expanded')) === 'true') {
-      await toggle.scrollIntoView({ block: 'center', inline: 'nearest' });
-      await toggle.waitForClickable();
-      await toggle.click();
+    for (const [index, section] of sections.entries()) {
+      const toggle = $(sectionToggle(section));
+      if (expanded[index]) {
+        await expandEnFaceSection(section);
+      } else if ((await toggle.getAttribute('aria-expanded')) === 'true') {
+        await toggle.scrollIntoView({ block: 'center', inline: 'nearest' });
+        await toggle.waitForClickable();
+        await toggle.click();
+      }
     }
     await reopened.waitForStable();
   }
diff --git a/tests/specs/projection-camera.e2e.ts b/tests/specs/projection-camera.e2e.ts
index 4e5655e02..d0b9aab52 100644
--- a/tests/specs/projection-camera.e2e.ts
+++ b/tests/specs/projection-camera.e2e.ts
@@ -5,10 +5,11 @@ import { TEMP_DIR } from '../../wdio.shared.conf';
 import { syntheticScalars } from '../fixtures/oct/dicom';
 import reference from '../fixtures/oct/reference.json';
 import { createNrrdVolume, syntheticMask } from '../fixtures/oct/volumes';
-import { volViewPage } from '../pageobjects/volview.page';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
 import {
   enFaceAppearance,
   canvasAppearance,
+  expandEnFaceSection,
   expectEnFaceProjectionSettings,
   expectProjectionTransform,
   dragContrast,
@@ -158,27 +159,35 @@ async function expectSourceMaskPixels(expectedImage?: string) {
 async function releaseMaskAfterReachableProjection(
   inspected: Awaited<ReturnType<typeof panAndZoom>>
 ) {
-  await browser.waitUntil(() =>
-    browser.execute(
-      () => (window as unknown as MaskGateWindow).maskRestoreGate.entered
-    )
-  );
-  await expect($(VIEWER + ' .annotation-cell')).toHaveText(
-    expect.stringContaining(SOURCE_NAME)
-  );
-  await expectCameraAndPixels(inspected);
-  const sourceCanvas = await $(
-    'div[data-testid~="vtk-two-view"] canvas'
-  ).getElement();
-  await browser.waitUntil(
-    async () => (await canvasAppearance(sourceCanvas)).visiblePixels > 1000
-  );
-  expect((await canvasAppearance(sourceCanvas)).coloredPixels).toBe(0);
-  await browser.execute(() => {
-    const gate = (window as unknown as MaskGateWindow).maskRestoreGate;
-    if (!gate.release) throw new Error('No decoded archived mask is held');
-    gate.release();
-  });
+  try {
+    await browser.waitUntil(() =>
+      browser.execute(
+        () => (window as unknown as MaskGateWindow).maskRestoreGate.entered
+      )
+    );
+    await expect($(VIEWER + ' .annotation-cell')).toHaveText(
+      expect.stringContaining(SOURCE_NAME)
+    );
+    await expectCameraAndPixels(inspected);
+    const sourceCanvas = await $(
+      'div[data-testid~="vtk-two-view"] canvas'
+    ).getElement();
+    await browser.waitUntil(
+      async () => (await canvasAppearance(sourceCanvas)).visiblePixels > 1000
+    );
+    expect((await canvasAppearance(sourceCanvas)).coloredPixels).toBe(0);
+    await browser.execute(() => {
+      const gate = (window as unknown as MaskGateWindow).maskRestoreGate;
+      if (!gate.release) throw new Error('No decoded archived mask is held');
+      gate.release();
+    });
+  } finally {
+    await browser.execute(() => {
+      const gate = (window as unknown as MaskGateWindow).maskRestoreGate;
+      gate.armed = false;
+      gate.release?.();
+    });
+  }
 }
 
 describe('Projection camera persistence', () => {
@@ -228,7 +237,29 @@ describe('Projection camera persistence', () => {
     await selectSetting('enface-projection-axis', 'Sagittal');
     await setSlabRange(10, 100);
     await waitForEnFaceReady();
-    const inspected = await panAndZoom();
+    const baseProjection = await panAndZoom();
+    await openEnFaceControls();
+    await expandEnFaceSection('thickness');
+    const highlight = $(
+      '.v-overlay--active [data-testid="enface-thin-highlight"]'
+    );
+    await highlight.$('label').click();
+    await selectSetting('enface-segmentation-segment', SEGMENT_NAME);
+    const threshold = $(
+      '.v-overlay--active [data-testid="enface-thickness-threshold-input"] input'
+    );
+    await threshold.scrollIntoView();
+    await threshold.waitForClickable();
+    await setValueVueInput(threshold, '6500');
+    await browser.waitUntil(
+      async () => (await enFaceAppearance()).coloredPixels > 100,
+      { timeoutMsg: 'Expected the enface labelmap to be visible' }
+    );
+    await expectProjectionTransform(baseProjection.transform);
+    const inspected = {
+      transform: baseProjection.transform,
+      image: (await enFaceAppearance()).image,
+    };
     const sourceMaskImage = await expectSourceMaskPixels();
     const saved = await saveScene();
 
@@ -237,11 +268,21 @@ describe('Projection camera persistence', () => {
       (window as unknown as MaskGateWindow).maskRestoreGate.armed = true;
     });
     await openThroughDialog(path.join(TEMP_DIR, saved));
-    await releaseMaskAfterReachableProjection(inspected);
+    await releaseMaskAfterReachableProjection(baseProjection);
     await expectSourceMaskPixels(sourceMaskImage);
     await expectCameraAndPixels(inspected);
     await openEnFaceControls();
     await expectEnFaceProjectionSettings('Sagittal', 10, 100);
+    await expandEnFaceSection('thickness');
+    await expect(
+      $('.v-overlay--active [data-testid="enface-segmentation-segment"]')
+    ).toHaveText(expect.stringContaining(SEGMENT_NAME));
+    await expect(highlight.$('input')).toBeSelected();
+    await expect(threshold).toHaveValue('6500');
+    await browser.waitUntil(
+      async () => (await enFaceAppearance()).coloredPixels > 100,
+      { timeoutMsg: 'Expected the enface labelmap to be visible' }
+    );
     expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 });
diff --git a/tests/specs/segmentationTestUtils.ts b/tests/specs/segmentationTestUtils.ts
index 067a3b1a5..a38f52690 100644
--- a/tests/specs/segmentationTestUtils.ts
+++ b/tests/specs/segmentationTestUtils.ts
@@ -1,4 +1,4 @@
-import type { ChainablePromiseElement } from 'webdriverio';
+import { Key, type ChainablePromiseElement } from 'webdriverio';
 import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
 
 const SEGMENT_LIST = '[data-testid="segment-list"]';
@@ -174,3 +174,21 @@ export const tooltipOf = async (element: ChainablePromiseElement) => {
   expect(id).toBeTruthy();
   return $(`[id="${id}"]`);
 };
+
+export async function setSegmentationDisplaySlider(
+  name: string,
+  value: number
+) {
+  const slider = $(
+    '[data-testid="segment-list"] [role="slider"][aria-label="' + name + '"]'
+  );
+  await slider.scrollIntoView({ block: 'center' });
+  await slider.waitForStable();
+  await slider.click();
+  const step = name === 'Outline Thickness' ? 1 : 0.01;
+  const keys = browser.action('key').down(Key.Home).up(Key.Home);
+  for (let i = 0; i < Math.round(value / step); i++)
+    keys.down(Key.ArrowRight).up(Key.ArrowRight);
+  await keys.perform();
+  await expect(slider).toHaveAttribute('aria-valuenow', String(value));
+}
diff --git a/tests/specs/slab-occupied-depth.e2e.ts b/tests/specs/slab-occupied-depth.e2e.ts
new file mode 100644
index 000000000..0abdd3f37
--- /dev/null
+++ b/tests/specs/slab-occupied-depth.e2e.ts
@@ -0,0 +1,412 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { setReferenceLinesEnabled } from './referenceLinesTestUtils';
+import { Key } from 'webdriverio';
+import { createSyntheticOCT } from '../fixtures/oct/dicom';
+import {
+  createNrrdVolume,
+  gappedSyntheticMask,
+  syntheticMask,
+} from '../fixtures/oct/volumes';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import {
+  makeTempDir,
+  writeManifestToFile,
+  waitForDownload,
+  SESSION_SAVE_TIMEOUT,
+} from './utils';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import {
+  attachMaskThroughDataPanel,
+  chooseEnFaceProjection,
+  enFacePixel,
+  expandEnFaceSection,
+  setSlabRange,
+  slabThumb,
+  waitForEnFaceReady,
+} from './octTestUtils';
+import {
+  openAnnotationSegments,
+  setSegmentationDisplaySlider,
+  selectSegment,
+  waitForSegmentContent,
+} from './segmentationTestUtils';
+
+const STEM = 'slab-occupied-depth';
+const PANEL = '.v-overlay--active [data-testid="enface-rendering-panel"]';
+const INPUT = PANEL + ' [data-testid="enface-thickness-threshold-input"] input';
+const SLIDER =
+  PANEL + ' [data-testid="enface-thickness-threshold"] [role="slider"]';
+
+async function expectHighlighted(present: boolean, point = [60, 12]) {
+  await waitForEnFaceReady();
+  await browser.waitUntil(
+    async () => {
+      const pixel = await enFacePixel(point[0], point[1]);
+      return present ? pixel[0] > pixel[1] + 20 : pixel[0] === pixel[1];
+    },
+    {
+      timeoutMsg: `Expected the selected slab to ${present ? 'qualify' : 'not qualify'} for highlighting`,
+    }
+  );
+}
+
+async function threshold(value: number) {
+  await expandEnFaceSection('thickness');
+  const input = $(INPUT);
+  await input.scrollIntoView({ block: 'center', inline: 'nearest' });
+  await input.waitForClickable();
+  await setValueVueInput(input, String(value));
+}
+
+async function openGappedMask(twoViews = false) {
+  const directory = makeTempDir(STEM);
+  fs.writeFileSync(path.join(directory, 'retina.dcm'), createSyntheticOCT());
+  fs.writeFileSync(
+    path.join(directory, 'gapped-band.nrrd'),
+    twoViews ? syntheticMask() : gappedSyntheticMask()
+  );
+  await writeManifestToFile(
+    {
+      layouts: {
+        'Occupied depth': twoViews
+          ? [['axial'], ['enface', 'enface']]
+          : [['axial'], ['enface']],
+      },
+    },
+    STEM + '.json'
+  );
+  await volViewPage.open(
+    '?urls=[tmp/' + STEM + '.json,tmp/' + STEM + '/retina.dcm]'
+  );
+  await waitForEnFaceReady();
+  await attachMaskThroughDataPanel(STEM + '/gapped-band.nrrd');
+  await openAnnotationSegments();
+  const segment = twoViews ? 'Synthetic retinal band' : 'Gapped band';
+  await waitForSegmentContent(segment);
+  await selectSegment(segment);
+  await $('[data-testid="enface-controls"]').click();
+  await expandEnFaceSection('thickness');
+  await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+}
+
+async function openAxisMask(axis: number) {
+  const dimensions = [32, 30, 28];
+  const spacing = [0.03, 0.02, 0.01];
+  const origin = [19, -25, 7];
+  const count = dimensions.reduce((size, n) => size * n, 1);
+  const labels = new Uint16Array(count);
+  for (let z = 2; z < dimensions[2] - 2; z++)
+    for (let y = 2; y < dimensions[1] - 2; y++)
+      for (let x = 2; x < dimensions[0] - 2; x++)
+        if ([3, 4, 7, 8].includes([x, y, z][axis]))
+          labels[x + dimensions[0] * (y + dimensions[1] * z)] = 1;
+  const directory = makeTempDir(STEM);
+  const sourceFile = `axis-${axis}.nrrd`;
+  const maskFile = `axis-${axis}-mask.nrrd`;
+  fs.writeFileSync(
+    path.join(directory, sourceFile),
+    createNrrdVolume({
+      scalars: new Uint16Array(count).fill(100),
+      dimensions,
+      spacing,
+      origin,
+      units: [],
+    })
+  );
+  fs.writeFileSync(
+    path.join(directory, maskFile),
+    createNrrdVolume({
+      scalars: labels,
+      dimensions,
+      spacing,
+      origin,
+      units: [],
+      metadata: {
+        Segment0_LabelValue: '1',
+        Segment0_Name: 'Directional band',
+        Segment0_Color: '1 0 0',
+      },
+    })
+  );
+  await writeManifestToFile(
+    { layouts: { 'Directional occupied depth': [['enface']] } },
+    STEM + '.json'
+  );
+  await volViewPage.open(
+    '?urls=[tmp/' + STEM + '.json,tmp/' + STEM + '/' + sourceFile + ']'
+  );
+  await waitForEnFaceReady();
+  await attachMaskThroughDataPanel(STEM + '/' + maskFile);
+  await openAnnotationSegments();
+  await waitForSegmentContent('Directional band');
+  await selectSegment('Directional band');
+  await chooseEnFaceProjection(
+    'enface-projection-axis',
+    ['Sagittal', 'Coronal', 'Axial'][axis]
+  );
+  await $('[data-testid="enface-controls"]').click();
+  await expandEnFaceSection('thickness');
+  await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+  return spacing[axis] * 1000;
+}
+
+async function openSharedAppearance() {
+  await browser.keys(Key.Escape);
+  await openAnnotationSegments();
+  const display = $('[data-testid="segment-display-section"]');
+  if ((await display.getAttribute('aria-expanded')) !== 'true')
+    await display.click();
+}
+
+describe('Selected-slab occupied depth', () => {
+  before(async () => {
+    await volViewPage.open();
+    await setReferenceLinesEnabled(true);
+  });
+  after(async () => setReferenceLinesEnabled(false));
+
+  it('excludes gaps, clips cropped masks to the slab, and keeps strict threshold endpoints', async () => {
+    await openGappedMask();
+    for (const [first, last, occupied, maximum] of [
+      [100, 105, 41.6, 41.7],
+      [101, 104, 20.8, 20.9],
+      [101, 101, 10.4, 10.5],
+      [0, 110, 41.6, 41.7],
+    ]) {
+      await expandEnFaceSection('projection');
+      await setSlabRange(first, last);
+      await waitForEnFaceReady();
+      await expandEnFaceSection('thickness');
+      await expect($(SLIDER)).toHaveAttribute('aria-valuemax', String(maximum));
+      await threshold(occupied);
+      await expectHighlighted(false);
+      await threshold(occupied + 0.1);
+      await expectHighlighted(true);
+      const absent = await enFacePixel(0, 12);
+      expect(absent[0]).toBe(absent[1]);
+    }
+    await expandEnFaceSection('projection');
+    await setSlabRange(102, 103);
+    await waitForEnFaceReady();
+    await expect($(SLIDER)).toHaveAttribute('aria-valuemax', '0.1');
+    await expect($(INPUT)).toHaveValue('41.7');
+    await expectHighlighted(false);
+    await expandEnFaceSection('thickness');
+    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await expandEnFaceSection('projection');
+    await setSlabRange(100, 105);
+    await waitForEnFaceReady();
+    await expectHighlighted(false);
+    await expandEnFaceSection('thickness');
+    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await expect($(SLIDER)).toHaveAttribute('aria-valuemax', '41.7');
+    await expectHighlighted(true);
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
+  });
+
+  it('remeasures mask storage grown by painting in an ordinary source slice', async () => {
+    await openGappedMask();
+    await threshold(50);
+    await expect($(SLIDER)).toHaveAttribute('aria-valuemax', '41.7');
+    await browser.keys(Key.Escape);
+    await $(
+      '.v-overlay--active [data-testid="enface-rendering-panel"]'
+    ).waitForDisplayed({
+      reverse: true,
+    });
+    const source = $('[data-testid~="vtk-two-view"]');
+    await source.click();
+    const slice = await volViewPage.getFirst2DSlice();
+    if (slice === null)
+      throw new Error('Source slice position is unavailable.');
+    const pixel = () => enFacePixel(64, slice - 1);
+    await browser.waitUntil(
+      async () => {
+        const [r, g] = await pixel();
+        return r > g + 20;
+      },
+      { timeoutMsg: 'Expected the original four-cell band to qualify.' }
+    );
+    await volViewPage.activatePaint();
+    const brush = $('[role="slider"][aria-label="Brush size"]');
+    await brush.waitForDisplayed();
+    const maximumBrushSize = await brush.getAttribute('aria-valuemax');
+    if (maximumBrushSize === null)
+      throw new Error('Brush size maximum is unavailable.');
+    await brush.execute((element) => element.focus());
+    await browser.keys(Key.End);
+    await expect(brush).toHaveAttribute('aria-valuenow', maximumBrushSize);
+    await volViewPage.paintStrokeOnView(source);
+    await browser.action('pointer').move({ x: 10, y: 10 }).perform();
+    await waitForEnFaceReady();
+    await browser.waitUntil(
+      async () => {
+        const [r, g] = await pixel();
+        return r === g;
+      },
+      { timeoutMsg: 'Expected the thicker painted column to stop qualifying.' }
+    );
+    await $('[data-testid="enface-controls"]').click();
+    await expandEnFaceSection('thickness');
+    await browser.waitUntil(
+      async () => Number(await $(SLIDER).getAttribute('aria-valuemax')) > 41.7,
+      {
+        timeoutMsg:
+          'Expected the fitted thickness maximum to reflect source mask growth.',
+      }
+    );
+    await expect($(INPUT)).toHaveValue('50');
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
+  });
+
+  it('restores different selected segments, slabs, thresholds and enabled states in two panes', async () => {
+    await openGappedMask(true);
+    const panes = await $$('[data-testid="enface-viewer"]').map((view) =>
+      view.getElement()
+    );
+    await threshold(31);
+    await expandEnFaceSection('projection');
+    await setSlabRange(100, 103);
+    await browser.keys(Key.Escape);
+    await panes[1].$('[data-testid="enface-controls"]').click();
+    await expandEnFaceSection('thickness');
+    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await chooseEnFaceProjection(
+      'enface-segmentation-segment',
+      'Alternative synthetic band',
+      panes[1]
+    );
+    await panes[1].$('[data-testid="enface-controls"]').click();
+    await threshold(60);
+    await expandEnFaceSection('projection');
+    await setSlabRange(110, 114);
+    await expandEnFaceSection('thickness');
+    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await browser.keys(Key.Escape);
+    await openSharedAppearance();
+    await setSegmentationDisplaySlider('Fill Opacity', 0.5);
+    await setSegmentationDisplaySlider('Outline Thickness', 5);
+    const firstPixel = () => enFacePixel(20, 12, undefined, panes[0]);
+    await browser.waitUntil(
+      async () => {
+        const [r, g] = await firstPixel();
+        return r > g + 20;
+      },
+      {
+        timeoutMsg:
+          'Expected only the first pane to show its selected thin band.',
+      }
+    );
+    const expected = [
+      await firstPixel(),
+      await enFacePixel(60, 12, undefined, panes[1]),
+    ];
+    expect(expected[1][0]).toBe(expected[1][1]);
+    const saved = await volViewPage.saveSession();
+    await waitForDownload(path.join(TEMP_DIR, saved), SESSION_SAVE_TIMEOUT);
+    await volViewPage.open('?urls=[tmp/' + saved + ']');
+    await browser.waitUntil(
+      async () => (await $$('[data-testid="enface-viewer"]').length) === 2
+    );
+    const restored = await $$('[data-testid="enface-viewer"]').map((view) =>
+      view.getElement()
+    );
+    for (const [index, pane] of restored.entries()) {
+      await waitForEnFaceReady(pane);
+      await browser.waitUntil(
+        async () =>
+          (await enFacePixel(index ? 60 : 20, 12, undefined, pane)).every(
+            (value, channel) => Math.abs(value - expected[index][channel]) <= 1
+          ),
+        {
+          timeoutMsg:
+            'Expected the saved pane to restore its segmentation appearance.',
+        }
+      );
+      await pane.$('[data-testid="enface-controls"]').click();
+      await expandEnFaceSection('projection');
+      await expect(slabThumb('start')).toHaveAttribute(
+        'aria-valuenow',
+        index ? '110' : '100'
+      );
+      await expect(slabThumb('end')).toHaveAttribute(
+        'aria-valuenow',
+        index ? '114' : '103'
+      );
+      await expandEnFaceSection('thickness');
+      await expect($(INPUT)).toHaveValue(index ? '60' : '31');
+      await expect(
+        $(PANEL).$('[data-testid="enface-segmentation-segment"]')
+      ).toHaveText(
+        expect.stringContaining(
+          index ? 'Alternative synthetic band' : 'Synthetic retinal band'
+        )
+      );
+      const enabled = $(PANEL).$('[data-testid="enface-thin-highlight"] input');
+      if (index) await expect(enabled).not.toBeSelected();
+      else await expect(enabled).toBeSelected();
+      await browser.keys(Key.Escape);
+    }
+    await openSharedAppearance();
+    for (const [label, value] of [
+      ['Fill Opacity', '0.5'],
+      ['Outline Thickness', '5'],
+    ]) {
+      await expect(
+        $(
+          '[data-testid="segment-list"] [role="slider"][aria-label="' +
+            label +
+            '"]'
+        )
+      ).toHaveAttribute('aria-valuenow', value);
+    }
+    await restored[1].$('[data-testid="enface-controls"]').click();
+    await expandEnFaceSection('thickness');
+    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await browser.waitUntil(
+      async () => {
+        const [r, g] = await enFacePixel(60, 12, undefined, restored[1]);
+        return g > r + 20;
+      },
+      {
+        timeoutMsg:
+          'Expected the second pane to use its own restored segment and threshold.',
+      }
+    );
+    expect(await enFacePixel(20, 12, undefined, restored[0])).toEqual(
+      expected[0]
+    );
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
+  });
+
+  for (const axis of [0, 1, 2]) {
+    it(`uses imported geometry without unit declarations on axis ${axis} at a translated source origin`, async () => {
+      const cellLength = await openAxisMask(axis);
+      for (const [first, last, count] of [
+        [3, 8, 4],
+        [4, 7, 2],
+      ]) {
+        await expandEnFaceSection('projection');
+        await setSlabRange(first, last);
+        await waitForEnFaceReady();
+        await expandEnFaceSection('thickness');
+        const occupied = count * cellLength;
+        await expect($(SLIDER)).toHaveAttribute(
+          'aria-valuemax',
+          String(occupied + 0.1)
+        );
+        await threshold(occupied);
+        await expectHighlighted(false, [15, 14]);
+        await threshold(occupied + 0.1);
+        await expectHighlighted(true, [15, 14]);
+      }
+      await expandEnFaceSection('projection');
+      await setSlabRange(5, 6);
+      await waitForEnFaceReady();
+      await expect($(SLIDER)).toHaveAttribute('aria-valuemax', '0.1');
+      await expectHighlighted(false, [15, 14]);
+      expect(await volViewPage.getNotificationsCount()).toBe(0);
+    });
+  }
+});

From ef7cb71667182553b897db3bf2ab0445bde98d12 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 1 Nov 2026 17:59:14 -0500
Subject: [PATCH 2/3] refactor: simplify occupied-depth highlighting

Assume zero-based image grids like en face slab viewing, so the mask
extent is used directly and the offset-extent tests are gone.

Share the labelmap appearance mapping with the segmentation slice
representation, compare DICOM geometry with vtk areEquals, name the
saved and stored segment field segmentId, and rebuild the thin-region
plane only when the threshold crosses a count boundary.

Move the thickness test helpers next to the other en face helpers and
reuse them across specs.
---
 eslint.config.js                              |   6 +-
 src/core/streaming/dicom/frameGeometry.ts     |  28 ++--
 src/core/streaming/dicom/octMetadata.ts       |   2 +-
 src/core/streaming/dicom/seriesGeometry.ts    |  46 +++---
 src/enface/EnFaceThicknessControls.vue        |   6 +-
 .../VtkEnFaceLabelmapRepresentation.vue       |   2 +-
 src/enface/__tests__/controls.spec.ts         |   6 +-
 src/enface/__tests__/inputCalibration.spec.ts |  61 ++++----
 src/enface/__tests__/labelmapGeometry.spec.ts |   4 +-
 .../occupiedDepthPresentation.spec.ts         |  10 +-
 src/enface/__tests__/restoreSelection.spec.ts |   8 +-
 src/enface/__tests__/seriesGeometry.spec.ts   |  11 +-
 src/enface/__tests__/store.spec.ts            |  51 +++---
 src/enface/projectionMasks.ts                 |  18 ---
 src/enface/store.ts                           |  49 +++---
 src/enface/thickness.ts                       |  24 +++
 src/enface/useEnFaceLabelmaps.ts              |  22 ++-
 src/enface/useEnFaceOccupiedDepth.ts          |  13 +-
 src/enface/useOccupiedDepthInput.ts           |  64 +++-----
 src/enface/useThinRegionAppearance.ts         |  28 +---
 src/io/state-file/schema.ts                   |  23 +--
 .../__tests__/useOccupiedDepth.spec.ts        |   6 +-
 .../measurements/useOccupiedDepth.ts          |  10 +-
 .../VtkSegmentationSliceRepresentation.vue    |  38 ++---
 src/segmentation/rendering/display.ts         |  27 ++++
 .../rendering/useLabelmapRepresentation.ts    |  10 +-
 src/store/view-configs.ts                     |   4 +-
 tests/specs/menuTestUtils.ts                  |  12 --
 tests/specs/oct-en-face.e2e.ts                |  10 +-
 tests/specs/oct-import.e2e.ts                 |  10 +-
 tests/specs/oct-native-dicom.e2e.ts           |  53 ++-----
 tests/specs/oct-navigation.e2e.ts             |   8 +-
 tests/specs/oct-occupied-depth.e2e.ts         | 146 +++++++-----------
 tests/specs/octInteractionTestUtils.ts        |  55 +------
 tests/specs/octTestUtils.ts                   |  36 +++++
 tests/specs/projection-camera.e2e.ts          |  34 ++--
 tests/specs/segmentationTestUtils.ts          |   7 +
 tests/specs/slab-occupied-depth.e2e.ts        | 131 +++++++---------
 38 files changed, 483 insertions(+), 596 deletions(-)
 delete mode 100644 src/enface/projectionMasks.ts
 delete mode 100644 tests/specs/menuTestUtils.ts

diff --git a/eslint.config.js b/eslint.config.js
index 5dcc45463..bba83a884 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -313,11 +313,7 @@ export default tseslint.config(
     {
       dir: 'enface',
       publicSurface: false,
-      pure: [
-        'src/enface/thickness.ts',
-        'src/enface/sliceGeometry.ts',
-        'src/enface/projectionMasks.ts',
-      ],
+      pure: ['src/enface/thickness.ts', 'src/enface/sliceGeometry.ts'],
     },
     {
       dir: 'segmentation',
diff --git a/src/core/streaming/dicom/frameGeometry.ts b/src/core/streaming/dicom/frameGeometry.ts
index 99c1afda5..17c82f04c 100644
--- a/src/core/streaming/dicom/frameGeometry.ts
+++ b/src/core/streaming/dicom/frameGeometry.ts
@@ -1,31 +1,29 @@
 import { vec3 } from 'gl-matrix';
+import { areEquals } from '@kitware/vtk.js/Common/Core/Math';
+
+export const near = (a: number, b: number, tolerance: number) =>
+  Math.abs(a - b) <= tolerance;
 
-export const numbersMatch = (a: number, b: number, tolerance = 1e-5) =>
-  Number.isFinite(a) && Number.isFinite(b) && Math.abs(a - b) <= tolerance;
-export const coordinatesMatch = (
-  a: ArrayLike<number>,
-  b: ArrayLike<number>,
-  tolerance = 1e-5
-) =>
-  a.length === b.length &&
-  Array.from(a).every((n, i) => numbersMatch(n, b[i], tolerance));
 export function imageDirection(basis: number[] | null | undefined) {
   if (!basis || basis.length !== 6 || !basis.every(Number.isFinite))
     return null;
   const row = basis.slice(0, 3) as vec3;
   const column = basis.slice(3) as vec3;
   if (
-    !numbersMatch(vec3.length(row), 1, 1e-4) ||
-    !numbersMatch(vec3.length(column), 1, 1e-4) ||
+    !near(vec3.length(row), 1, 1e-4) ||
+    !near(vec3.length(column), 1, 1e-4) ||
     // Rounding two unit vectors to four decimals can shift their dot by 1.8e-4.
-    !numbersMatch(vec3.dot(row, column), 0, 2e-4)
+    !near(vec3.dot(row, column), 0, 2e-4)
   )
     return null;
   return [...basis, ...vec3.cross([0, 0, 0], row, column)];
 }
 
 /** Validate equally spaced slices along the positive image normal. */
-export function frameGridGeometry(positions: number[][], direction?: number[]) {
+export function frameGridGeometry(
+  positions: number[][],
+  direction: number[] | null
+) {
   if (positions.some((p) => p.length !== 3 || !p.every(Number.isFinite)))
     return {
       reason:
@@ -44,7 +42,7 @@ export function frameGridGeometry(positions: number[][], direction?: number[]) {
     };
   if (
     direction &&
-    !coordinatesMatch(
+    !areEquals(
       step,
       direction.slice(6).map((n) => n * distance),
       tolerance
@@ -57,7 +55,7 @@ export function frameGridGeometry(positions: number[][], direction?: number[]) {
   if (
     positions.some(
       (position, i) =>
-        !coordinatesMatch(
+        !areEquals(
           position,
           positions[0].map((n, axis) => n + i * step[axis]),
           tolerance
diff --git a/src/core/streaming/dicom/octMetadata.ts b/src/core/streaming/dicom/octMetadata.ts
index 141d0e744..2111e3a37 100644
--- a/src/core/streaming/dicom/octMetadata.ts
+++ b/src/core/streaming/dicom/octMetadata.ts
@@ -112,7 +112,7 @@ function positionError(geometry: ReturnType<typeof frameGeometry>) {
     !positiveNumber(Number(geometry.sliceSpacing))
   )
     return 'OCT slice spacing is unavailable; spatial reconstruction is required.';
-  return frameGridGeometry(positions, direction ?? undefined).reason;
+  return frameGridGeometry(positions, direction).reason;
 }
 
 function geometryError(geometry: ReturnType<typeof frameGeometry>) {
diff --git a/src/core/streaming/dicom/seriesGeometry.ts b/src/core/streaming/dicom/seriesGeometry.ts
index 11df04076..430d41a5e 100644
--- a/src/core/streaming/dicom/seriesGeometry.ts
+++ b/src/core/streaming/dicom/seriesGeometry.ts
@@ -1,13 +1,14 @@
+import { areEquals } from '@kitware/vtk.js/Common/Core/Math';
 import { Tags } from '@/src/core/dicomTags';
-
 import {
-  coordinatesMatch,
   frameGridGeometry,
   imageDirection,
-  numbersMatch,
+  near,
 } from '@/src/core/streaming/dicom/frameGeometry';
 import { OCT_GEOMETRY_ERROR } from '@/src/core/streaming/dicom/octMetadataTags';
 
+const TOLERANCE = 1e-5;
+
 type Grid = {
   spacing: ArrayLike<number>;
   direction: ArrayLike<number>;
@@ -34,7 +35,7 @@ function declaredSeriesReason(tags: Map<string, string>[]) {
     tags.some((entry) => {
       const other = vector(entry, Tags.PixelSpacing, 2);
       return spacing && other
-        ? !coordinatesMatch(spacing, other)
+        ? !areEquals(spacing, other, TOLERANCE)
         : spacing !== other;
     })
   )
@@ -57,9 +58,9 @@ function loadedGridReason(
 ) {
   if (
     grid &&
-    (!coordinatesMatch(grid.direction, direction) ||
-      !coordinatesMatch(grid.origin, origin) ||
-      !numbersMatch(grid.spacing[2], distance))
+    (!areEquals(Array.from(grid.direction), direction, TOLERANCE) ||
+      !areEquals(Array.from(grid.origin), origin, TOLERANCE) ||
+      !near(grid.spacing[2], distance, TOLERANCE))
   )
     return 'The loaded DICOM grid does not match its file geometry; spatial reconstruction is required.';
   return null;
@@ -68,17 +69,15 @@ function loadedGridReason(
 function seriesGeometry(tags: Map<string, string>[], grid?: Grid) {
   const declaredReason = declaredSeriesReason(tags);
   if (declaredReason) return { reason: declaredReason };
-  const direction = imageDirection(
-    vector(tags[0], Tags.ImageOrientationPatient, 6)
+  const directions = tags.map((entry) =>
+    imageDirection(vector(entry, Tags.ImageOrientationPatient, 6))
   );
+  const [direction] = directions;
   if (
     !direction ||
-    tags.some((entry) => {
-      const other = imageDirection(
-        vector(entry, Tags.ImageOrientationPatient, 6)
-      );
-      return !other || !coordinatesMatch(direction, other);
-    })
+    directions.some(
+      (other) => !other || !areEquals(direction, other, TOLERANCE)
+    )
   )
     return {
       reason:
@@ -98,9 +97,8 @@ function seriesGeometry(tags: Map<string, string>[], grid?: Grid) {
 }
 
 function declaredPixelSpacing(tags: Map<string, string>, component: number) {
-  const spacing = tags.get(Tags.PixelSpacing)?.split('\\').map(Number);
-  const value = spacing?.length === 2 ? spacing[component] : NaN;
-  return Number.isFinite(value) && value! > 0 ? value : NaN;
+  const value = vector(tags, Tags.PixelSpacing, 2)?.[component] ?? NaN;
+  return value > 0 ? value : NaN;
 }
 
 function calibratedAxes(
@@ -115,25 +113,19 @@ function calibratedAxes(
   ];
   return declared.map((spacing, axis) => {
     if (!spacing || !Number.isFinite(spacing) || spacing <= 0) return false;
-    if (grid && !numbersMatch(Math.abs(grid.spacing[axis]), spacing))
+    if (grid && !near(Math.abs(grid.spacing[axis]), spacing, TOLERANCE))
       return false;
     return (
       axis === 2 ||
       tags.every((entry) =>
-        numbersMatch(declaredPixelSpacing(entry, 1 - axis), spacing)
+        near(declaredPixelSpacing(entry, 1 - axis), spacing, TOLERANCE)
       )
     );
   });
 }
 
 /** Validate source slice arrangement against the loaded grid. */
-export function dicomSeriesGeometry(
-  metadata: readonly Iterable<[string, string]>[],
-  grid?: Grid
-) {
-  const tags = metadata.map((entry) =>
-    entry instanceof Map ? entry : new Map(entry)
-  );
+export function dicomSeriesGeometry(tags: Map<string, string>[], grid?: Grid) {
   if (!tags.length)
     return { reason: null, calibratedAxes: [false, false, false] };
   const geometry =
diff --git a/src/enface/EnFaceThicknessControls.vue b/src/enface/EnFaceThicknessControls.vue
index c893067b1..cde234873 100644
--- a/src/enface/EnFaceThicknessControls.vue
+++ b/src/enface/EnFaceThicknessControls.vue
@@ -26,8 +26,8 @@ function updateThreshold(value: string | number | null) {
 function updateSliderThreshold(value: number) {
   updateThreshold(Math.round(value * 10) / 10);
 }
-function updateSegment(selectedSegmentId: string | null) {
-  emit('patch', { selectedSegmentId });
+function updateSegment(segmentId: string | null) {
+  emit('patch', { segmentId });
 }
 function updateHighlight(highlightThin: boolean | null) {
   emit('patch', { highlightThin: !!highlightThin });
@@ -58,7 +58,7 @@ function updateHighlight(highlightThin: boolean | null) {
       </ReasonedAction>
       <ReasonedAction :reason="segmentationReason ?? undefined" block>
         <v-select
-          :model-value="settings.selectedSegmentId"
+          :model-value="settings.segmentId"
           @update:model-value="updateSegment"
           :items="segments"
           label="Thickness segment"
diff --git a/src/enface/VtkEnFaceLabelmapRepresentation.vue b/src/enface/VtkEnFaceLabelmapRepresentation.vue
index 1b6a064d3..e2bbcd724 100644
--- a/src/enface/VtkEnFaceLabelmapRepresentation.vue
+++ b/src/enface/VtkEnFaceLabelmapRepresentation.vue
@@ -32,7 +32,7 @@ useLabelmapRepresentation(
   view,
   computed(() => (appearance.value ? thinRegions.value : null)),
   appearance,
-  { axis: 2 }
+  2
 );
 </script>
 
diff --git a/src/enface/__tests__/controls.spec.ts b/src/enface/__tests__/controls.spec.ts
index cad15aab2..31d8a4937 100644
--- a/src/enface/__tests__/controls.spec.ts
+++ b/src/enface/__tests__/controls.spec.ts
@@ -30,7 +30,7 @@ function mountControls(overrides = {}) {
   const settings = reactive({
     ...defaultEnFaceViewConfig(),
     highlightThin: true,
-    selectedSegmentId: 'retina',
+    segmentId: 'retina',
     ...overrides,
   });
   return mount(EnFaceControls, {
@@ -164,7 +164,7 @@ describe('En face rendering controls', () => {
       },
       settings: {
         ...wrapper.props('settings'),
-        selectedSegmentId: 'other-layer',
+        segmentId: 'other-layer',
       },
     });
     expect(swatch().attributes('style')).toContain('background-color: #00ff00');
@@ -193,7 +193,7 @@ describe('En face rendering controls', () => {
       document.body.querySelectorAll('[role="option"]')[0] as HTMLElement
     ).click();
     await nextTick();
-    expect(lastPatch(wrapper)).toEqual({ selectedSegmentId: 'retina' });
+    expect(lastPatch(wrapper)).toEqual({ segmentId: 'retina' });
     expect(
       wrapper
         .get('[data-testid="enface-thin-highlight"]')
diff --git a/src/enface/__tests__/inputCalibration.spec.ts b/src/enface/__tests__/inputCalibration.spec.ts
index 899225da0..2f4a3f52e 100644
--- a/src/enface/__tests__/inputCalibration.spec.ts
+++ b/src/enface/__tests__/inputCalibration.spec.ts
@@ -53,8 +53,7 @@ async function mountInput(id: string) {
     segmentation.ensureSegmentationForImage(id).id,
     segment
   );
-  const [i, , j, , k] = image.getExtent();
-  const extent: Extent3D = [i, i + 1, j, j + 1, k, k + 1];
+  const extent: Extent3D = [0, 1, 0, 1, 0, 1];
   mask.representations.labelmap = {
     image: markRaw(allocateMask(image, extent)),
     extent,
@@ -216,40 +215,32 @@ describe('occupied-depth input calibration', () => {
     }
   );
 
-  it.each([
-    { extent: [1, 3, 1, 4, 1, 5] },
-    { extent: [5, 7, -4, -1, 10, 14] },
-  ] satisfies { extent: Extent3D }[])(
-    'aligns occupied-depth pixels and slab ranges for extent $extent',
-    async ({ extent }) => {
-      const image = vtkImageData.newInstance();
-      image.setExtent(extent);
-      image.setSpacing([0.01, 0.01, 0.01]);
-      image
-        .getPointData()
-        .setScalars(vtkDataArray.newInstance({ values: new Uint8Array(60) }));
-      const id = useImageCacheStore().addVTKImageData(image, 'offset.vti');
-      const { wrapper, settings } = await mountInput(id);
-      try {
-        expect(wrapper.get('output').attributes('data-measurable')).toBe(
-          'true'
-        );
-        expect(wrapper.get('output').attributes('data-depth')).toBe('20');
-        expect(wrapper.get('output').attributes('data-counts')).toBe(
-          '2,2,0,2,2,0,0,0,0,0,0,0,0,0,0'
-        );
-        settings.depthStart = 1;
-        settings.depthEnd = 1;
-        await nextTick();
-        expect(wrapper.get('output').attributes('data-depth')).toBe('10');
-        expect(wrapper.get('output').attributes('data-counts')).toBe(
-          '1,1,0,1,1,0,0,0,0,0,0,0,0,0,0'
-        );
-      } finally {
-        wrapper.unmount();
-      }
+  it('aligns occupied-depth pixels and slab ranges', async () => {
+    const image = vtkImageData.newInstance();
+    image.setDimensions([3, 4, 5]);
+    image.setSpacing([0.01, 0.01, 0.01]);
+    image
+      .getPointData()
+      .setScalars(vtkDataArray.newInstance({ values: new Uint8Array(60) }));
+    const id = useImageCacheStore().addVTKImageData(image, 'slab.vti');
+    const { wrapper, settings } = await mountInput(id);
+    try {
+      expect(wrapper.get('output').attributes('data-measurable')).toBe('true');
+      expect(wrapper.get('output').attributes('data-depth')).toBe('20');
+      expect(wrapper.get('output').attributes('data-counts')).toBe(
+        '2,2,0,2,2,0,0,0,0,0,0,0,0,0,0'
+      );
+      settings.depthStart = 1;
+      settings.depthEnd = 1;
+      await nextTick();
+      expect(wrapper.get('output').attributes('data-depth')).toBe('10');
+      expect(wrapper.get('output').attributes('data-counts')).toBe(
+        '1,1,0,1,1,0,0,0,0,0,0,0,0,0,0'
+      );
+    } finally {
+      wrapper.unmount();
     }
-  );
+  });
 
   it.each([2, 0.01])(
     'retains physical scale %s carried by an orthogonal generic image direction',
diff --git a/src/enface/__tests__/labelmapGeometry.spec.ts b/src/enface/__tests__/labelmapGeometry.spec.ts
index ac176b180..80dc6950e 100644
--- a/src/enface/__tests__/labelmapGeometry.spec.ts
+++ b/src/enface/__tests__/labelmapGeometry.spec.ts
@@ -25,7 +25,7 @@ describe('En face thin-region placement', () => {
     'places rectangular axis $axis overlays at thick-slab midpoints for orientation $orientation',
     async ({ axis, direction }) => {
       const source = vtkImageData.newInstance();
-      source.setExtent([5, 7, -4, -1, 10, 14]);
+      source.setDimensions([3, 4, 5]);
       source.setOrigin([23, -8, 100]);
       source.setSpacing([-0.2, 0.7, 2]);
       source.setDirection(direction);
@@ -74,7 +74,7 @@ describe('En face thin-region placement', () => {
           [0, height - 1],
           [width - 1, height - 1],
         ]) {
-          const sourceIndex: [number, number, number] = [5, -4, 10];
+          const sourceIndex: [number, number, number] = [0, 0, 0];
           sourceIndex[planeAxes[0]] += x;
           sourceIndex[planeAxes[1]] += y;
           sourceIndex[axis] += (first + last) / 2;
diff --git a/src/enface/__tests__/occupiedDepthPresentation.spec.ts b/src/enface/__tests__/occupiedDepthPresentation.spec.ts
index 0867f0b71..366d10c08 100644
--- a/src/enface/__tests__/occupiedDepthPresentation.spec.ts
+++ b/src/enface/__tests__/occupiedDepthPresentation.spec.ts
@@ -1,9 +1,10 @@
 import { describe, expect, it } from 'vitest';
 import { measureOccupiedDepth } from '@/src/segmentation/measurements/occupiedDepth';
-import { createThinRegionMask } from '@/src/enface/projectionMasks';
 import {
+  createThinRegionMask,
   isPresentThicknessBelow,
   thicknessSliderMaximum,
+  thinCountCutoff,
 } from '@/src/enface/thickness';
 
 describe('occupied-depth threshold presentation', () => {
@@ -27,7 +28,12 @@ describe('occupied-depth threshold presentation', () => {
         maximumCount: count,
       };
       expect(
-        Array.from(createThinRegionMask(field, threshold, spacing * 1000))
+        Array.from(
+          createThinRegionMask(
+            field.counts,
+            thinCountCutoff(field, threshold, spacing * 1000)
+          )
+        )
       ).toEqual([Number(highlighted), 0]);
     }
   );
diff --git a/src/enface/__tests__/restoreSelection.spec.ts b/src/enface/__tests__/restoreSelection.spec.ts
index 7f64c1f97..baa496a7d 100644
--- a/src/enface/__tests__/restoreSelection.spec.ts
+++ b/src/enface/__tests__/restoreSelection.spec.ts
@@ -12,7 +12,7 @@ import { useEnFaceViewStore } from '@/src/enface/store';
 import { useEnFaceInput } from '@/src/enface/useEnFaceInput';
 import { useEnFaceOccupiedDepth } from '@/src/enface/useEnFaceOccupiedDepth';
 import EnFaceControls from '@/src/enface/EnFaceControls.vue';
-import { createThinRegionMask } from '@/src/enface/projectionMasks';
+import { createThinRegionMask, thinCountCutoff } from '@/src/enface/thickness';
 import { useSegmentStore } from '@/src/segmentation/segments';
 import { useSegmentationStore } from '@/src/segmentation/store';
 import {
@@ -223,9 +223,13 @@ it('keeps the projection ready and restores the non-first segment after deferred
   expect(thickness.overlay.value.measurement?.counts).toEqual(
     new Uint32Array([1, 0, 0, 0])
   );
+  const measurement = thickness.overlay.value.measurement!;
   expect(
     Array.from(
-      createThinRegionMask(thickness.overlay.value.measurement!, 15, 10)
+      createThinRegionMask(
+        measurement.counts,
+        thinCountCutoff(measurement, 15, 10)
+      )
     )
   ).toEqual([1, 0, 0, 0]);
   for (const control of ['thin-highlight', 'thickness-threshold-input'])
diff --git a/src/enface/__tests__/seriesGeometry.spec.ts b/src/enface/__tests__/seriesGeometry.spec.ts
index 2f9150252..3753d594d 100644
--- a/src/enface/__tests__/seriesGeometry.spec.ts
+++ b/src/enface/__tests__/seriesGeometry.spec.ts
@@ -170,7 +170,8 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
       expect(getEnFaceUnavailableReason(id)).toBeNull();
       expect(getOccupiedDepthSupport(id).reason).toMatch(/nonuniform/);
       expect(
-        dicomSeriesGeometry(chunks.map((chunk) => chunk.metadata!)).reason
+        dicomSeriesGeometry(chunks.map((chunk) => new Map(chunk.metadata!)))
+          .reason
       ).toMatch(/nonuniform/);
     }
   );
@@ -202,7 +203,8 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
       expect(getEnFaceUnavailableReason(id)).toBeNull();
       expect(getOccupiedDepthSupport(id).reason).toMatch(reason);
       expect(
-        dicomSeriesGeometry(chunks.map((chunk) => chunk.metadata!)).reason
+        dicomSeriesGeometry(chunks.map((chunk) => new Map(chunk.metadata!)))
+          .reason
       ).toMatch(reason);
     }
   );
@@ -222,7 +224,8 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
       expect(getEnFaceUnavailableReason(id)).toBeNull();
       expect(getOccupiedDepthSupport(id).reason).toMatch(/incomplete/);
       expect(
-        dicomSeriesGeometry(chunks.map((chunk) => chunk.metadata!)).reason
+        dicomSeriesGeometry(chunks.map((chunk) => new Map(chunk.metadata!)))
+          .reason
       ).toMatch(/incomplete/);
     }
   );
@@ -235,7 +238,7 @@ describe('assembled OCT series through real chunk and file collaborators', () =>
     expect(getOccupiedDepthSupport(id).reason).toMatch(/loaded.*grid/);
     expect(
       dicomSeriesGeometry(
-        chunks.map((chunk) => chunk.metadata!),
+        chunks.map((chunk) => new Map(chunk.metadata!)),
         {
           spacing: data.getSpacing(),
           direction: data.getDirection(),
diff --git a/src/enface/__tests__/store.spec.ts b/src/enface/__tests__/store.spec.ts
index c406e3b3b..30a3bad45 100644
--- a/src/enface/__tests__/store.spec.ts
+++ b/src/enface/__tests__/store.spec.ts
@@ -35,7 +35,7 @@ describe('En face view settings', () => {
       depthEnd: 40,
       thresholdMicrons: 35,
       highlightThin: true,
-      selectedSegmentId: 'missing-segment',
+      segmentId: 'missing-segment',
     });
     const state: StateFile = {
       zip: new JSZip(),
@@ -65,8 +65,7 @@ describe('En face view settings', () => {
     expect(parsed.viewByID?.view.type).toBe('EnFace');
     const settings = parsed.viewByID!.view.config!;
     expect(settings.oct.enFace?.method).toBe('sum');
-    expect(settings.oct.enFace).not.toHaveProperty('selectedMaskId');
-    expect(settings.oct.enFace).not.toHaveProperty('selectedSegmentId');
+    expect(settings.oct.enFace?.segmentId).toBeNull();
     expect(settings.oct.enFace).not.toHaveProperty('windowWidth');
     expect(settings.oct.window).toMatchObject({
       width: 120,
@@ -74,7 +73,12 @@ describe('En face view settings', () => {
       userTriggered: true,
     });
     store.removeView('view');
-    useViewConfigStore().deserialize('restored', settings, { oct: 'new-oct' });
+    useViewConfigStore().deserialize(
+      'restored',
+      settings,
+      { oct: 'new-oct' },
+      {}
+    );
     expect(store.configFor('restored', 'new-oct')).toMatchObject({
       method: 'sum',
       depthStart: 20,
@@ -82,7 +86,7 @@ describe('En face view settings', () => {
       thresholdMicrons: 35,
       highlightThin: false,
     });
-    expect(store.configFor('restored', 'new-oct').selectedSegmentId).toBeNull();
+    expect(store.configFor('restored', 'new-oct').segmentId).toBeNull();
     expect(useWindowingStore().getConfig('restored', 'new-oct')).toMatchObject({
       width: 120,
       level: 60,
@@ -111,9 +115,8 @@ describe('En face view settings', () => {
     useViewConfigStore().deserialize(
       'restored',
       parsed.viewByID!.saved.config!,
-      {
-        source: 'loaded',
-      }
+      { source: 'loaded' },
+      {}
     );
     expect(useEnFaceViewStore().configFor('restored', 'loaded')).toMatchObject({
       axis: 2,
@@ -122,7 +125,7 @@ describe('En face view settings', () => {
       depthEnd: 4,
       highlightThin: false,
       thresholdMicrons: 100,
-      selectedSegmentId: null,
+      segmentId: null,
     });
   });
 
@@ -152,23 +155,25 @@ describe('En face view settings', () => {
       },
       { 'saved-layer': chosen }
     );
-    expect(store.configFor('view', 'restored-oct').selectedSegmentId).toBe(
-      chosen
-    );
+    expect(store.configFor('view', 'restored-oct').segmentId).toBe(chosen);
     expect(store.configFor('view', 'restored-oct').highlightThin).toBe(true);
-    store.deserialize('view', {
-      'restored-oct': {
-        enFace: {
-          axis: 1,
-          method: 'mean',
-          depthStart: 0,
-          depthEnd: null,
-          thresholdMicrons: 35,
-          highlightThin: true,
-          segmentId: 'missing-layer',
+    store.deserialize(
+      'view',
+      {
+        'restored-oct': {
+          enFace: {
+            axis: 1,
+            method: 'mean',
+            depthStart: 0,
+            depthEnd: null,
+            thresholdMicrons: 35,
+            highlightThin: true,
+            segmentId: 'missing-layer',
+          },
         },
       },
-    });
+      {}
+    );
     expect(store.configFor('view', 'restored-oct').highlightThin).toBe(false);
   });
 
diff --git a/src/enface/projectionMasks.ts b/src/enface/projectionMasks.ts
deleted file mode 100644
index 068be4210..000000000
--- a/src/enface/projectionMasks.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { isPresentThicknessBelow } from '@/src/enface/thickness';
-import { SEGMENT_VALUE } from '@/src/segmentation/masks/labelValue';
-import type { OccupiedDepthResult } from '@/src/segmentation/measurements/occupiedDepth';
-
-export const createThinRegionMask = (
-  result: OccupiedDepthResult,
-  threshold: number,
-  micronsPerVoxel: number
-) => {
-  const pixels = new Uint8Array(result.counts.length);
-  for (let index = 0; index < pixels.length; index++) {
-    if (
-      isPresentThicknessBelow(result.counts[index] * micronsPerVoxel, threshold)
-    )
-      pixels[index] = SEGMENT_VALUE;
-  }
-  return pixels;
-};
diff --git a/src/enface/store.ts b/src/enface/store.ts
index 3481a6191..8e1899ad7 100644
--- a/src/enface/store.ts
+++ b/src/enface/store.ts
@@ -4,6 +4,7 @@ import { reactive } from 'vue';
 import { createViewConfigSerializer } from '@/src/store/view-configs/common';
 import {
   deleteSecondKey,
+  forEachEntry,
   getDoubleKeyRecord,
   type DoubleKeyRecord,
 } from '@/src/utils/doubleKeyRecord';
@@ -18,7 +19,7 @@ export type EnFaceViewConfig = {
   depthEnd: number | null;
   highlightThin: boolean;
   thresholdMicrons: number;
-  selectedSegmentId: string | null;
+  segmentId: string | null;
 };
 
 export type ThicknessControlState = {
@@ -43,7 +44,7 @@ export const defaultEnFaceViewConfig = (): EnFaceViewConfig => ({
   depthEnd: null,
   highlightThin: false,
   thresholdMicrons: 100,
-  selectedSegmentId: null,
+  segmentId: null,
 });
 
 export const useEnFaceViewStore = defineStore('enface-view', () => {
@@ -95,22 +96,16 @@ export const useEnFaceViewStore = defineStore('enface-view', () => {
   }
 
   function serialize(stateFile: StateFile) {
-    const saved: DoubleKeyRecord<NonNullable<ViewConfig['enFace']>> = {};
-    Object.entries(configs).forEach(([viewID, byDataID]) => {
-      saved[viewID] = {};
-      Object.entries(byDataID).forEach(([dataID, config]) => {
-        const segmentId =
-          segmentsRegistry.getSegment(config.selectedSegmentId)?.id ?? null;
-        saved[viewID][dataID] = {
-          axis: config.axis,
-          method: config.method,
-          depthStart: config.depthStart,
-          depthEnd: config.depthEnd,
-          highlightThin: config.highlightThin && !!segmentId,
-          segmentId,
-          thresholdMicrons: config.thresholdMicrons,
-        };
-      });
+    // Saved files name only segments that still exist.
+    const saved: DoubleKeyRecord<EnFaceViewConfig> = {};
+    forEachEntry(configs, (viewID, dataID, config) => {
+      const segmentId =
+        segmentsRegistry.getSegment(config.segmentId)?.id ?? null;
+      (saved[viewID] ??= {})[dataID] = {
+        ...config,
+        segmentId,
+        highlightThin: config.highlightThin && !!segmentId,
+      };
     });
     createViewConfigSerializer(saved, 'enFace')(stateFile);
   }
@@ -118,17 +113,17 @@ export const useEnFaceViewStore = defineStore('enface-view', () => {
   function deserialize(
     viewID: string,
     config: Record<string, ViewConfig>,
-    segmentIdMap: Record<string, string> = {}
+    segmentIdMap: Record<string, string>
   ) {
     Object.entries(config).forEach(([dataID, viewConfig]) => {
-      if (viewConfig.enFace) {
-        const { segmentId, ...settings } = viewConfig.enFace;
-        const mappedSegmentId = segmentId ? segmentIdMap[segmentId] : undefined;
-        Object.assign(configFor(viewID, dataID), settings, {
-          selectedSegmentId: mappedSegmentId ?? null,
-          highlightThin: settings.highlightThin && !!mappedSegmentId,
-        });
-      }
+      if (!viewConfig.enFace) return;
+      const saved = viewConfig.enFace;
+      const segmentId =
+        (saved.segmentId && segmentIdMap[saved.segmentId]) || null;
+      Object.assign(configFor(viewID, dataID), saved, {
+        segmentId,
+        highlightThin: saved.highlightThin && !!segmentId,
+      });
     });
   }
 
diff --git a/src/enface/thickness.ts b/src/enface/thickness.ts
index 2f44130be..26700a632 100644
--- a/src/enface/thickness.ts
+++ b/src/enface/thickness.ts
@@ -1,3 +1,4 @@
+import { SEGMENT_VALUE } from '@/src/segmentation/masks/labelValue';
 import type { OccupiedDepthResult } from '@/src/segmentation/measurements/occupiedDepth';
 
 const unitRoundoff = Number.EPSILON / 2;
@@ -9,6 +10,29 @@ export const isPresentThicknessBelow = (thickness: number, threshold: number) =>
   threshold - thickness >
     relativeRoundoff * Math.max(Math.abs(thickness), Math.abs(threshold));
 
+/** Counts are integers, so the highlighted set changes only when this does. */
+export function thinCountCutoff(
+  result: OccupiedDepthResult,
+  threshold: number,
+  micronsPerVoxel: number
+) {
+  let cutoff = 0;
+  while (
+    cutoff < result.maximumCount &&
+    isPresentThicknessBelow((cutoff + 1) * micronsPerVoxel, threshold)
+  )
+    cutoff++;
+  return cutoff;
+}
+
+export function createThinRegionMask(counts: Uint32Array, cutoff: number) {
+  const pixels = new Uint8Array(counts.length);
+  for (let index = 0; index < pixels.length; index++)
+    if (counts[index] > 0 && counts[index] <= cutoff)
+      pixels[index] = SEGMENT_VALUE;
+  return pixels;
+}
+
 export function thicknessSliderMaximum(
   result: OccupiedDepthResult | null,
   micronsPerVoxel: number
diff --git a/src/enface/useEnFaceLabelmaps.ts b/src/enface/useEnFaceLabelmaps.ts
index f829dd61e..659c60eb6 100644
--- a/src/enface/useEnFaceLabelmaps.ts
+++ b/src/enface/useEnFaceLabelmaps.ts
@@ -4,7 +4,8 @@ import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { vec3, type mat4 } from 'gl-matrix';
 import type { OccupiedDepthResult } from '@/src/segmentation/measurements/occupiedDepth';
-import { createThinRegionMask } from './projectionMasks';
+import { SEGMENT_VALUE } from '@/src/segmentation/masks/labelValue';
+import { createThinRegionMask, thinCountCutoff } from './thickness';
 
 export type MeasurementPlaneGeometry = {
   width: number;
@@ -39,11 +40,16 @@ export function useEnFaceLabelmaps(
     values: new Uint8Array(1),
   });
   image.getPointData().setScalars(scalars);
-  const pixels = computed(() => {
+  const cutoff = computed(() => {
     const result = unref(measurement);
     return result
-      ? createThinRegionMask(result, unref(threshold), unref(micronsPerVoxel))
-      : null;
+      ? thinCountCutoff(result, unref(threshold), unref(micronsPerVoxel))
+      : 0;
+  });
+  // Threshold drags rebuild the plane only when the count cutoff moves.
+  const pixels = computed(() => {
+    const result = unref(measurement);
+    return result ? createThinRegionMask(result.counts, cutoff.value) : null;
   });
   watch(
     [() => unref(geometry), pixels],
@@ -73,6 +79,14 @@ export function useEnFaceLabelmaps(
         plane.pixelToWorld[10],
       ]);
       scalars.setData(values, 1);
+      // The plane is binary; supplying its range avoids another scan.
+      scalars.setRange(
+        {
+          min: values.includes(0) ? 0 : SEGMENT_VALUE,
+          max: values.includes(SEGMENT_VALUE) ? SEGMENT_VALUE : 0,
+        },
+        0
+      );
       image.modified();
     },
     { immediate: true }
diff --git a/src/enface/useEnFaceOccupiedDepth.ts b/src/enface/useEnFaceOccupiedDepth.ts
index a3e66280b..6c2b66c55 100644
--- a/src/enface/useEnFaceOccupiedDepth.ts
+++ b/src/enface/useEnFaceOccupiedDepth.ts
@@ -26,7 +26,6 @@ export function useEnFaceOccupiedDepth(
   const {
     accepted: measurement,
     computing: measuring,
-    stale,
     error,
   } = useOccupiedDepth(
     input.request,
@@ -44,11 +43,13 @@ export function useEnFaceOccupiedDepth(
   );
   const message = computed(() => {
     if (!settings.value.highlightThin || unref(blockedReason)) return null;
-    if (thicknessReason.value) return thicknessReason.value;
-    if (!measuring.value) return null;
-    return stale.value
-      ? 'Updating thickness; showing the previous result.'
-      : 'Measuring thickness in the selected slab…';
+    // Without a reason, a running measurement has a previous result to show.
+    return (
+      thicknessReason.value ||
+      (measuring.value
+        ? 'Updating thickness; showing the previous result.'
+        : null)
+    );
   });
   const overlay = computed(() => ({
     geometry: unref(geometry),
diff --git a/src/enface/useOccupiedDepthInput.ts b/src/enface/useOccupiedDepthInput.ts
index 91ae4feeb..fd3ddc21a 100644
--- a/src/enface/useOccupiedDepthInput.ts
+++ b/src/enface/useOccupiedDepthInput.ts
@@ -6,8 +6,9 @@ import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useSegmentationStore } from '@/src/segmentation/store';
 import { useSegmentStore } from '@/src/segmentation/segments';
 import {
+  extentContains,
   extentSize,
-  extentWithin,
+  fullExtent,
   isEmptyExtent,
 } from '@/src/segmentation/geometry';
 import type { OccupiedDepthRequest } from '@/src/segmentation/measurements/useOccupiedDepth';
@@ -47,19 +48,13 @@ export function useOccupiedDepthInput(
     void volumeRevision.value;
     return getOccupiedDepthSupport(currentImageID.value);
   });
-  const dimensions = computed(() => {
-    void volumeRevision.value;
-    return currentImageData.value?.getDimensions() ?? [1, 1, 1];
-  });
 
   const segmentOptions = computed(() => {
     if (!currentImageID.value) return [];
     const segmentIds = segmentationStore
       .imageMasks(currentImageID.value)
       .map((mask) => mask.segmentId);
-    const selected = segmentsRegistry.getSegment(
-      settings.value.selectedSegmentId
-    );
+    const selected = segmentsRegistry.getSegment(settings.value.segmentId);
     // A restored segment can precede its mask record and decoded voxels.
     if (selected && !segmentIds.includes(selected.id))
       segmentIds.push(selected.id);
@@ -75,20 +70,15 @@ export function useOccupiedDepthInput(
   watch(
     [settings, segmentOptions],
     ([config, options]) => {
-      if (
-        !options.some((option) => option.value === config.selectedSegmentId)
-      ) {
-        if (config.selectedSegmentId) config.highlightThin = false;
-        config.selectedSegmentId = options[0]?.value ?? null;
+      if (!options.some((option) => option.value === config.segmentId)) {
+        if (config.segmentId) config.highlightThin = false;
+        config.segmentId = options[0]?.value ?? null;
       }
     },
     { immediate: true }
   );
   const selectedMask = computed(() =>
-    segmentationStore.maskFor(
-      currentImageID.value,
-      settings.value.selectedSegmentId
-    )
+    segmentationStore.maskFor(currentImageID.value, settings.value.segmentId)
   );
   const selectedBinding = computed(() =>
     selectedMask.value
@@ -102,28 +92,10 @@ export function useOccupiedDepthInput(
         ? 'Load or create a segmentation mask associated with this volume.'
         : null)
   );
-  const maskStorageReason = computed(() => {
-    void maskRevision.value;
-    const binding = selectedBinding.value;
-    if (!binding)
-      return 'The selected segment voxels are not available; load or create its mask to measure occupied depth.';
-    if (isEmptyExtent(binding.extent))
-      return 'The selected segment has no occupied voxels to measure.';
-    const scalars = binding.image.getPointData().getScalars();
-    if (
-      !scalars ||
-      !(scalars.getData() instanceof Uint8Array) ||
-      scalars.getNumberOfComponents() !== 1
-    )
-      return 'The selected segment does not have a supported binary voxel mask.';
-    return null;
-  });
   const measurementMask = computed(() => {
-    void volumeRevision.value;
     void maskRevision.value;
     const binding = selectedBinding.value;
-    const parent = currentImageData.value;
-    if (!binding || !parent) return null;
+    if (!binding) return null;
     const scalars = binding.image.getPointData().getScalars();
     const values = scalars?.getData();
     if (
@@ -134,9 +106,19 @@ export function useOccupiedDepthInput(
     return {
       values,
       dimensions: binding.image.getDimensions(),
-      extent: extentWithin(binding.extent, parent.getExtent()),
+      extent: binding.extent,
     };
   });
+  const maskStorageReason = computed(() => {
+    const binding = selectedBinding.value;
+    if (!binding)
+      return 'The selected segment voxels are not available; load or create its mask to measure occupied depth.';
+    if (isEmptyExtent(binding.extent))
+      return 'The selected segment has no occupied voxels to measure.';
+    if (!measurementMask.value)
+      return 'The selected segment does not have a supported binary voxel mask.';
+    return null;
+  });
   const maskGeometryReason = computed(() => {
     void volumeRevision.value;
     void maskRevision.value;
@@ -144,11 +126,9 @@ export function useOccupiedDepthInput(
     const parent = currentImageData.value;
     if (!binding || !parent) return null;
     const extent = binding.extent;
-    const validExtent = measurementMask.value?.extent.every(
-      (value, index) =>
-        Number.isInteger(value) &&
-        value >= 0 &&
-        value < dimensions.value[Math.floor(index / 2)]
+    const validExtent = extentContains(
+      fullExtent(parent.getDimensions()),
+      extent
     );
     const direction = parent.getDirection();
     const bases = [0, 1, 2].map((axis) => {
diff --git a/src/enface/useThinRegionAppearance.ts b/src/enface/useThinRegionAppearance.ts
index 1274afdc3..810bfa33b 100644
--- a/src/enface/useThinRegionAppearance.ts
+++ b/src/enface/useThinRegionAppearance.ts
@@ -1,10 +1,7 @@
 import { computed, unref, type MaybeRef } from 'vue';
 import type { Maybe } from '@/src/types';
 import { useSegmentationStore } from '@/src/segmentation/store';
-import {
-  segmentFillAlpha,
-  segmentOutline,
-} from '@/src/segmentation/rendering/display';
+import { labelmapAppearance } from '@/src/segmentation/rendering/display';
 
 /** The selected mask uses its source slice's normal fill and outline settings. */
 export function useThinRegionAppearance(maskId: MaybeRef<Maybe<string>>) {
@@ -15,27 +12,16 @@ export function useThinRegionAppearance(maskId: MaybeRef<Maybe<string>>) {
     const descriptor = segmentationStore.labelmapDescriptorByMask[id];
     const segmentation = segmentationStore.segmentationOfMask(id);
     if (!descriptor || !segmentation) return null;
-    const fillOpacity = segmentFillAlpha(descriptor, segmentation.fillOpacity);
-    const { thicknesses, opacities } = segmentOutline(
-      descriptor,
-      segmentation.outlineThickness,
-      segmentation.outlineOpacity
-    );
-    const outlineThickness = thicknesses[0];
-    const outlineOpacity = opacities[0];
+    const appearance = labelmapAppearance(descriptor, segmentation);
     let reason: string | null = null;
     if (!descriptor.visible)
       reason = 'Show the selected segment to highlight thin regions.';
-    else if (fillOpacity <= 0 && (outlineThickness <= 0 || outlineOpacity <= 0))
+    else if (
+      appearance.fillOpacity <= 0 &&
+      (appearance.outlineThickness <= 0 || appearance.outlineOpacity <= 0)
+    )
       reason =
         'Increase segmentation fill opacity or enable an outline to highlight thin regions.';
-    return {
-      color: descriptor.color,
-      value: descriptor.value,
-      fillOpacity,
-      outlineThickness,
-      outlineOpacity,
-      reason,
-    };
+    return { ...appearance, reason };
   });
 }
diff --git a/src/io/state-file/schema.ts b/src/io/state-file/schema.ts
index 0c7f1a007..224c56bed 100644
--- a/src/io/state-file/schema.ts
+++ b/src/io/state-file/schema.ts
@@ -27,6 +27,7 @@ import type {
 } from '@/src/store/view-configs/types';
 import type { LPSAxis } from '@/src/types/lps';
 import type { Segment as SegmentModel } from '@/src/segmentation/segment';
+import type { EnFaceViewConfig } from '@/src/enface/store';
 import type {
   ColorBy,
   ColorTransferFunction,
@@ -281,6 +282,16 @@ const CinePlaybackViewConfig = z.object({
   frame: z.number(),
 }) satisfies z.ZodType<CinePlaybackViewConfig>;
 
+const EnFaceViewConfig = z.object({
+  axis: z.union([z.literal(0), z.literal(1), z.literal(2)]),
+  method: z.enum(SLAB_METHODS),
+  depthStart: z.number().int().nonnegative(),
+  depthEnd: z.number().int().nonnegative().nullable(),
+  highlightThin: z.boolean().default(false),
+  thresholdMicrons: z.number().nonnegative().default(100),
+  segmentId: z.string().nullable().default(null),
+}) satisfies z.ZodType<EnFaceViewConfig>;
+
 const ViewConfig = z.object({
   window: WindowLevelConfig.optional(),
   slice: SliceConfig.optional(),
@@ -288,17 +299,7 @@ const ViewConfig = z.object({
   camera: CameraConfig.optional(),
   volumeColorConfig: VolumeColorConfig.optional(),
   cinePlayback: CinePlaybackViewConfig.optional(),
-  enFace: z
-    .object({
-      axis: z.union([z.literal(0), z.literal(1), z.literal(2)]),
-      method: z.enum(SLAB_METHODS),
-      depthStart: z.number().int().nonnegative(),
-      depthEnd: z.number().int().nonnegative().nullable(),
-      highlightThin: z.boolean().default(false),
-      thresholdMicrons: z.number().nonnegative().default(100),
-      segmentId: z.string().nullable().optional(),
-    })
-    .optional(),
+  enFace: EnFaceViewConfig.optional(),
 });
 
 export type ViewConfig = z.infer<typeof ViewConfig>;
diff --git a/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts b/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
index a15faf4e5..822418e2a 100644
--- a/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
+++ b/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
@@ -73,7 +73,7 @@ function mountMeasurement(keepEnabled = false) {
   const wrapper = mount(
     defineComponent({
       setup() {
-        const { accepted, computing, error, stale } = useOccupiedDepth(
+        const { accepted, computing, error } = useOccupiedDepth(
           request,
           worker.create,
           keepEnabled ? true : undefined
@@ -82,8 +82,8 @@ function mountMeasurement(keepEnabled = false) {
           h(
             'output',
             { role: 'status' },
-            stale.value
-              ? `${accepted.value!.counts.join(',')} occupied cells (updating)`
+            computing.value && accepted.value
+              ? `${accepted.value.counts.join(',')} occupied cells (updating)`
               : computing.value
                 ? 'Measuring occupied depth'
                 : (error.value ??
diff --git a/src/segmentation/measurements/useOccupiedDepth.ts b/src/segmentation/measurements/useOccupiedDepth.ts
index 20c7dd739..315f215c9 100644
--- a/src/segmentation/measurements/useOccupiedDepth.ts
+++ b/src/segmentation/measurements/useOccupiedDepth.ts
@@ -7,6 +7,7 @@ import {
   watch,
   type MaybeRef,
 } from 'vue';
+import { getErrorDetail } from '@/src/utils';
 import type { OccupiedDepthInput, OccupiedDepthResult } from './occupiedDepth';
 import type {
   MeasurementRequest,
@@ -115,11 +116,7 @@ export function useOccupiedDepth(
       }
       target.postMessage(message, transfer);
     } catch (cause) {
-      fail(
-        cause instanceof Error
-          ? cause.message
-          : 'Occupied depth measurement failed.'
-      );
+      fail(getErrorDetail(cause, 'Occupied depth measurement failed.'));
     }
   }
 
@@ -165,6 +162,5 @@ export function useOccupiedDepth(
       ? result.value
       : null;
   });
-  const stale = computed(() => computing.value && !!accepted.value);
-  return { accepted, computing, error, stale };
+  return { accepted, computing, error };
 }
diff --git a/src/segmentation/rendering/VtkSegmentationSliceRepresentation.vue b/src/segmentation/rendering/VtkSegmentationSliceRepresentation.vue
index 4546fbfdc..c308fff67 100644
--- a/src/segmentation/rendering/VtkSegmentationSliceRepresentation.vue
+++ b/src/segmentation/rendering/VtkSegmentationSliceRepresentation.vue
@@ -8,10 +8,7 @@ import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSegmentationStore } from '@/src/segmentation/store';
 import { watchImmediate } from '@vueuse/core';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
-import {
-  segmentFillAlpha,
-  segmentOutline,
-} from '@/src/segmentation/rendering/display';
+import { labelmapAppearance } from '@/src/segmentation/rendering/display';
 import {
   segmentRenderMask,
   type RenderMaskSlot,
@@ -94,28 +91,17 @@ watchImmediate(
   }
 );
 
-const appearance = computed(() => {
-  const segment = descriptor.value;
-  if (!segment) return null;
-
-  const normalAlpha = segmentFillAlpha(segment, display.value.fillOpacity);
-  const pulseAlpha = segment.visible ? 0.7 * revealPulse.value : 0;
-  const { thicknesses, opacities } = segmentOutline(
-    segment,
-    display.value.outlineThickness + 3 * revealPulse.value,
-    Math.max(display.value.outlineOpacity, revealPulse.value)
-  );
-  return {
-    value: segment.value,
-    color: segment.color,
-    fillOpacity: Math.max(normalAlpha, pulseAlpha),
-    outlineThickness: thicknesses[0],
-    outlineOpacity: opacities[0],
-  };
-});
-const sliceRep = useLabelmapRepresentation(view, imageData, appearance, {
-  axis: ijkAxis,
-});
+const appearance = computed(
+  () =>
+    descriptor.value &&
+    labelmapAppearance(descriptor.value, display.value, revealPulse.value)
+);
+const sliceRep = useLabelmapRepresentation(
+  view,
+  imageData,
+  appearance,
+  ijkAxis
+);
 
 defineExpose(sliceRep);
 </script>
diff --git a/src/segmentation/rendering/display.ts b/src/segmentation/rendering/display.ts
index e001c5e75..7cccefde3 100644
--- a/src/segmentation/rendering/display.ts
+++ b/src/segmentation/rendering/display.ts
@@ -42,3 +42,30 @@ export const segmentOutline = (
   thicknesses: [segment.visible ? thickness : 0],
   opacities: [segmentationOpacity * segment.outlineOpacity],
 });
+
+/** Resolved fill and outline for one labelmap; `pulse` briefly emphasizes it. */
+export const labelmapAppearance = (
+  segment: ResolvedLabelmapSegment,
+  display: {
+    fillOpacity: number;
+    outlineThickness: number;
+    outlineOpacity: number;
+  },
+  pulse = 0
+) => {
+  const { thicknesses, opacities } = segmentOutline(
+    segment,
+    display.outlineThickness + 3 * pulse,
+    Math.max(display.outlineOpacity, pulse)
+  );
+  return {
+    value: segment.value,
+    color: segment.color,
+    fillOpacity: Math.max(
+      segmentFillAlpha(segment, display.fillOpacity),
+      segment.visible ? 0.7 * pulse : 0
+    ),
+    outlineThickness: thicknesses[0],
+    outlineOpacity: opacities[0],
+  };
+};
diff --git a/src/segmentation/rendering/useLabelmapRepresentation.ts b/src/segmentation/rendering/useLabelmapRepresentation.ts
index d84c01cd4..0f62a3181 100644
--- a/src/segmentation/rendering/useLabelmapRepresentation.ts
+++ b/src/segmentation/rendering/useLabelmapRepresentation.ts
@@ -21,16 +21,12 @@ export type LabelmapAppearance = {
   outlineOpacity: number;
 };
 
-type LabelmapRepresentationOptions = {
-  axis: MaybeRef<number | undefined>;
-};
-
 /** Renders a borrowed single-plane labelmap with resolved segment appearance. */
 export function useLabelmapRepresentation(
   view: View,
   imageData: MaybeRef<Maybe<vtkImageData>>,
-  appearance: MaybeRef<LabelmapAppearance | null>,
-  options: LabelmapRepresentationOptions
+  appearance: MaybeRef<Maybe<LabelmapAppearance>>,
+  axis: MaybeRef<number | undefined>
 ) {
   const sliceRep = useSliceRepresentation(view, imageData);
 
@@ -56,7 +52,7 @@ export function useLabelmapRepresentation(
     ...SEGMENT_COINCIDENT_OFFSET
   );
   watchEffect(() => {
-    const axisIndex = unref(options.axis);
+    const axisIndex = unref(axis);
     if (axisIndex === undefined) return;
     sliceRep.mapper.setSlicingMode(
       [SlicingMode.I, SlicingMode.J, SlicingMode.K][axisIndex]
diff --git a/src/store/view-configs.ts b/src/store/view-configs.ts
index 6d9aac4f8..0845726e2 100644
--- a/src/store/view-configs.ts
+++ b/src/store/view-configs.ts
@@ -57,7 +57,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     viewID: string,
     config: Record<string, ViewConfig>,
     dataIDMap: Record<string, string>,
-    segmentIdMap: Record<string, string> = {}
+    segmentIdMap: Record<string, string>
   ) => {
     // First update the view config map to use the new dataIDs
     const updatedConfig: Record<string, ViewConfig> = {};
@@ -79,7 +79,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
   const deserializeAll = (
     manifest: StateFile['manifest'],
     dataIDMap: Record<string, string>,
-    segmentIdMap: Record<string, string> = {}
+    segmentIdMap: Record<string, string>
   ) => {
     // Layer images are rebuilt after view settings are restored.
     const configIDMap = { ...dataIDMap };
diff --git a/tests/specs/menuTestUtils.ts b/tests/specs/menuTestUtils.ts
deleted file mode 100644
index 0ff9c519e..000000000
--- a/tests/specs/menuTestUtils.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export async function closeMenuWithEscape(activator: WebdriverIO.Element) {
-  const id = await activator.getAttribute('aria-controls');
-  expect(id).toBeTruthy();
-  const content = $(`[id="${id}"] .v-overlay__content`);
-  if ((await activator.getAttribute('aria-expanded')) === 'true') {
-    await content.waitForDisplayed();
-    await content.waitForStable();
-    await browser.keys('Escape');
-    await expect(activator).toHaveAttribute('aria-expanded', 'false');
-  }
-  await content.waitForDisplayed({ reverse: true, opacityProperty: false });
-}
diff --git a/tests/specs/oct-en-face.e2e.ts b/tests/specs/oct-en-face.e2e.ts
index cedef380c..4c4918be0 100644
--- a/tests/specs/oct-en-face.e2e.ts
+++ b/tests/specs/oct-en-face.e2e.ts
@@ -16,6 +16,9 @@ import {
   openEnFaceControls,
   expandEnFaceSection,
   selectSetting,
+  THRESHOLD,
+  setHighlight,
+  setThicknessThreshold,
 } from './octTestUtils';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
@@ -31,13 +34,10 @@ import { createSyntheticOCT } from '../fixtures/oct/dicom';
 import { paddedSyntheticOCT } from '../fixtures/oct/padding';
 import {
   reference,
-  THRESHOLD,
   STEM,
   stageFixture,
   expectProjectionPixel,
   observeSlabProjectionChanges,
-  enableHighlight,
-  setThicknessThreshold,
   expectCalibratedEnFace,
   openRetina,
   registerOctTestHooks,
@@ -60,7 +60,7 @@ describe('Retinal OCT en-face', () => {
     await $(CONTROLS).doubleClick();
     await expectBothViews();
     await openEnFaceControls();
-    await enableHighlight();
+    await setHighlight(true);
     const inlineHelp = await $(
       '.v-overlay--active [data-testid="enface-thickness-help"]'
     ).execute((button) => {
@@ -180,7 +180,7 @@ describe('Retinal OCT en-face', () => {
     const threshold = $(
       '.v-overlay--active [data-testid="enface-thickness-threshold"] [role="slider"]'
     );
-    await enableHighlight();
+    await setHighlight(true);
     await expect($(THRESHOLD)).toBeEnabled();
     await setThicknessThreshold(0);
     const thresholdMaximum = await threshold.getAttribute('aria-valuemax');
diff --git a/tests/specs/oct-import.e2e.ts b/tests/specs/oct-import.e2e.ts
index e47057942..f11e7f49e 100644
--- a/tests/specs/oct-import.e2e.ts
+++ b/tests/specs/oct-import.e2e.ts
@@ -17,6 +17,10 @@ import {
   openEnFaceProjection,
   openEnFaceControls,
   selectSetting,
+  THRESHOLD,
+  setThicknessThreshold,
+  setHighlight,
+  expectHighlight,
 } from './octTestUtils';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
@@ -34,14 +38,10 @@ import {
 } from './segmentationTestUtils';
 import {
   reference,
-  THRESHOLD,
   STEM,
   stageFixture,
-  setThicknessThreshold,
   expectProjectionPixel,
-  enableHighlight,
   dragEnFaceContrast,
-  expectHighlight,
   expectStackedMaskWithoutSidebar,
   expectSliceLine,
   registerOctTestHooks,
@@ -85,7 +85,7 @@ describe('Retinal OCT import', () => {
     await expectStackedMaskWithoutSidebar();
 
     await openEnFaceControls();
-    await enableHighlight();
+    await setHighlight(true);
     expect(
       await $(
         '.v-overlay--active [data-testid="enface-segmentation-segment"]'
diff --git a/tests/specs/oct-native-dicom.e2e.ts b/tests/specs/oct-native-dicom.e2e.ts
index 78c630d15..87dea4077 100644
--- a/tests/specs/oct-native-dicom.e2e.ts
+++ b/tests/specs/oct-native-dicom.e2e.ts
@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { JHU_RETINAL_LAYERS, RETINAL_OCT_DICOM } from '../datasets';
-import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import { volViewPage } from '../pageobjects/volview.page';
 import { applyTestViewport } from '../../wdio.shared.conf';
 import { useCachedSample, writeManifestToFile, overlayOption } from './utils';
 import native from '../fixtures/oct/heidelberg-reference.json';
@@ -25,6 +25,12 @@ import {
   openEnFaceProjection,
   openEnFaceControls,
   setEnFaceSlab,
+  selectSetting,
+  setHighlight,
+  setThicknessThreshold,
+  expectHighlight,
+  THRESHOLD,
+  THRESHOLD_SLIDER,
 } from './octTestUtils';
 import {
   openAnnotationSegments,
@@ -199,38 +205,16 @@ describe('Public OCT exports', () => {
         $('[data-testid="enface-' + section + '-toggle"]')
       ).toHaveAttribute('aria-expanded', 'true');
     await expandEnFaceSection('projection');
-    const axis = $('.v-overlay--active [data-testid="enface-projection-axis"]');
-    await axis.scrollIntoView({ block: 'center' });
-    await axis.waitForClickable();
-    await axis.click();
-    await overlayOption('Coronal').waitForClickable();
-    await overlayOption('Coronal').click();
+    await selectSetting('enface-projection-axis', 'Coronal');
     await expandEnFaceSection('thickness');
     await expect(
       $('.v-overlay--active [data-testid="enface-segmentation-segment"] input')
     ).toBeEnabled();
-    await $(
-      '.v-overlay--active [data-testid="enface-thin-highlight"] label'
-    ).click();
-    const segment = $(
-      '.v-overlay--active [data-testid="enface-segmentation-segment"]'
-    );
-    await segment.scrollIntoView({ block: 'center' });
-    await segment.waitForClickable();
-    await segment.click();
-    await overlayOption(names[2]).waitForClickable();
-    await overlayOption(names[2]).click();
-    const thresholdSlider = $(
-      '.v-overlay--active [data-testid="enface-thickness-threshold"] [role="slider"]'
-    );
-    await expect(thresholdSlider).toHaveAttribute('aria-valuemax', '58.1');
-    await setValueVueInput(
-      $(
-        '.v-overlay--active [data-testid="enface-thickness-threshold-input"] input'
-      ),
-      '20'
-    );
-    await expect(thresholdSlider).toHaveAttribute('aria-valuenow', '20');
+    await setHighlight(true);
+    await selectSetting('enface-segmentation-segment', names[2]);
+    await expect($(THRESHOLD_SLIDER)).toHaveAttribute('aria-valuemax', '58.1');
+    await setThicknessThreshold(20);
+    await expect($(THRESHOLD_SLIDER)).toHaveAttribute('aria-valuenow', '20');
     await $(
       '.v-overlay--active [data-testid="enface-projection-toggle"]'
     ).click();
@@ -241,11 +225,7 @@ describe('Public OCT exports', () => {
     await expect(
       $('.v-overlay--active [data-testid="enface-thickness-toggle"]')
     ).toHaveAttribute('aria-expanded', 'true');
-    await expect(
-      $(
-        '.v-overlay--active [data-testid="enface-thickness-threshold-input"] input'
-      )
-    ).toHaveValue('20');
+    await expect($(THRESHOLD)).toHaveValue('20');
     const captureDirectory = process.env.VOLVIEW_OCT_CAPTURE_DIR;
     if (captureDirectory) {
       fs.mkdirSync(captureDirectory, { recursive: true });
@@ -254,10 +234,7 @@ describe('Public OCT exports', () => {
       );
     }
     await browser.keys('Escape');
-    await browser.waitUntil(
-      async () => (await enFaceAppearance()).coloredPixels > 100,
-      { timeoutMsg: 'Expected the enface labelmap to be visible' }
-    );
+    await expectHighlight(true);
     expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 
diff --git a/tests/specs/oct-navigation.e2e.ts b/tests/specs/oct-navigation.e2e.ts
index 2aaec26b9..c24db46fb 100644
--- a/tests/specs/oct-navigation.e2e.ts
+++ b/tests/specs/oct-navigation.e2e.ts
@@ -19,6 +19,9 @@ import {
   openEnFaceProjection,
   openEnFaceControls,
   selectSetting,
+  setThicknessThreshold,
+  setHighlight,
+  expectHighlight,
 } from './octTestUtils';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
@@ -26,12 +29,9 @@ import { waitForDownload, SESSION_SAVE_TIMEOUT } from './utils';
 import {
   reference,
   SLICE_LINE,
-  setThicknessThreshold,
   expectProjectionPixel,
-  enableHighlight,
   dragEnFaceContrast,
   getOriginalWindow,
-  expectHighlight,
   expectStackedMaskWithoutSidebar,
   openRetina,
   expectSliceLine,
@@ -351,7 +351,7 @@ describe('Retinal OCT navigation', () => {
     // Select before capturing the comparison with a textured overlay.
     await $('button[data-testid^="control-button-Select "]').click();
     await openEnFaceControls();
-    await enableHighlight();
+    await setHighlight(true);
     await setThicknessThreshold(31);
     await expectHighlight(true);
     await expectSliceLine();
diff --git a/tests/specs/oct-occupied-depth.e2e.ts b/tests/specs/oct-occupied-depth.e2e.ts
index 717a21945..7a2a486c7 100644
--- a/tests/specs/oct-occupied-depth.e2e.ts
+++ b/tests/specs/oct-occupied-depth.e2e.ts
@@ -1,11 +1,10 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import JSZip from 'jszip';
-import { createNrrdVolume } from '../fixtures/oct/volumes';
+import { createNrrdVolume, createVtiVolume } from '../fixtures/oct/volumes';
 import { Key } from 'webdriverio';
 import {
   PANEL,
-  attachMaskThroughDataPanel,
   enFaceAppearance,
   enFacePixel,
   waitForEnFaceReady,
@@ -17,6 +16,12 @@ import {
   selectEnFace,
   openEnFaceControls,
   selectSetting,
+  THRESHOLD,
+  THRESHOLD_SLIDER,
+  attachAndSelectMask,
+  setThicknessThreshold,
+  setHighlight,
+  expectHighlight,
 } from './octTestUtils';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
@@ -27,39 +32,27 @@ import {
   SESSION_SAVE_TIMEOUT,
   waitForModuleTransitions,
 } from './utils';
+import { setSegmentationDisplaySlider as setDisplaySlider } from './segmentationTestUtils';
 import {
-  openAnnotationSegments,
-  setSegmentationDisplaySlider as setDisplaySlider,
-  selectSegment,
-  waitForSegmentContent,
-} from './segmentationTestUtils';
-import {
-  THRESHOLD,
   STEM,
   stageFixture,
-  setThicknessThreshold,
   expectProjectionPixel,
-  enableHighlight,
-  expectHighlight,
   openHighlightedSegmentationDisplay,
   openRetina,
   registerOctTestHooks,
 } from './octInteractionTestUtils';
 
-async function stageOffsetDepthScene(offset: boolean) {
+async function stageDepthScene() {
   const directory = makeTempDir(STEM);
-  const name = offset ? 'offset-depth' : 'zero-depth';
-  const minimum = offset ? [1, 1, 1] : [0, 0, 0];
-  const origin = offset ? [0, 0, 0] : [1, 1, 1];
-  const extent = minimum.flatMap((first) => [first, first + 7]).join(' ');
+  const name = 'depth';
   fs.writeFileSync(
     path.join(directory, name + '.vti'),
-    '<VTKFile type="ImageData" version="1.0" byte_order="LittleEndian">' +
-      `<ImageData WholeExtent="${extent}" Origin="${origin.join(' ')}" Spacing="1 1 1">` +
-      `<Piece Extent="${extent}"><PointData Scalars="intensity">` +
-      '<DataArray type="UInt16" Name="intensity" format="ascii">' +
-      new Array(8 ** 3).fill(100).join(' ') +
-      '</DataArray></PointData><CellData/></Piece></ImageData></VTKFile>'
+    createVtiVolume({
+      values: new Uint16Array(8 ** 3).fill(100),
+      dimensions: [8, 8, 8],
+      origin: [1, 1, 1],
+      type: 'UInt16',
+    })
   );
   const zip = new JSZip();
   zip.file(
@@ -78,11 +71,11 @@ async function stageOffsetDepthScene(offset: boolean) {
     JSON.stringify({
       version: '7.0.0',
       dataSources: [{ id: 0, type: 'uri', uri: `/tmp/${STEM}/${name}.vti` }],
-      segments: [{ id: 'band', name: 'Offset band', color: [255, 0, 0, 255] }],
+      segments: [{ id: 'band', name: 'Depth band', color: [255, 0, 0, 255] }],
       segmentations: [
         {
           id: 'segmentation',
-          name: 'Offset band',
+          name: 'Depth band',
           parentImage: '0',
           fillOpacity: 1,
           outlineOpacity: 0,
@@ -95,9 +88,7 @@ async function stageOffsetDepthScene(offset: boolean) {
               representations: {
                 labelmap: {
                   path: 'mask.nrrd',
-                  extent: [1, 4, 2, 5, 1, 4].map(
-                    (value, index) => value + minimum[Math.floor(index / 2)]
-                  ),
+                  extent: [1, 4, 2, 5, 1, 4],
                 },
               },
             },
@@ -141,7 +132,7 @@ describe('Retinal OCT occupied-depth', () => {
   registerOctTestHooks();
   it('highlights physical thickness and restores its selected segment, threshold and slab', async () => {
     await openRetina(true);
-    await enableHighlight();
+    await setHighlight(true);
     await setThicknessThreshold(31);
     await expectHighlight(true);
     const expectThinColumns = async () => {
@@ -163,9 +154,7 @@ describe('Retinal OCT occupied-depth', () => {
       );
     };
     await expectThinColumns();
-    const slider = $(
-      '.v-overlay--active [data-testid="enface-thickness-threshold"] [role="slider"]'
-    );
+    const slider = $(THRESHOLD_SLIDER);
     await $(THRESHOLD).click();
     await browser.keys('Tab');
     await expect(slider).toBeFocused();
@@ -224,57 +213,42 @@ describe('Retinal OCT occupied-depth', () => {
     expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 
-  it('keeps highlighted pixels and selected slabs aligned on equivalent offset extents', async () => {
-    const expectedImages: string[] = [];
-    for (const offset of [false, true]) {
-      const scene = await stageOffsetDepthScene(offset);
-      await volViewPage.open(`?urls=[tmp/${scene}]`);
-      await waitForEnFaceReady();
-      await setEnFaceWindow(200, 100);
-      await openEnFaceControls();
-      await expandEnFaceSection('thickness');
-      await expect(
-        $('.v-overlay--active [data-testid="enface-thin-highlight"] input')
-      ).toBeEnabled();
-      const slabs = [
-        [0, 7, [true, false, false]],
-        [0, 1, [false, false, false]],
-        [2, 2, [true, true, false]],
-        [4, 5, [false, true, false]],
-      ] satisfies [number, number, boolean[]][];
-      for (const [step, [first, last, highlighted]] of slabs.entries()) {
-        await expandEnFaceSection('projection');
-        await setSlabRange(first, last);
-        await browser.waitUntil(
-          async () => {
-            const pixels = await Promise.all(
-              [1.5, 3.5, 6].map((x) => enFacePixel(x, 2.5))
-            );
-            return pixels.every((pixel, index) =>
-              highlighted[index]
-                ? pixel[0] > pixel[1] + 20 && pixel[0] > pixel[2] + 20
-                : pixel[0] === pixel[1] &&
-                  pixel[1] === pixel[2] &&
-                  pixel[0] > 20
-            );
-          },
-          {
-            timeoutMsg: `Expected occupied-depth pixels for slab ${first}-${last}`,
-          }
-        );
-        if (offset)
-          await browser.waitUntil(
-            async () =>
-              (await enFaceAppearance()).image === expectedImages[step],
-            {
-              timeoutMsg:
-                'Expected the same occupied-depth overlay for equivalent extents',
-            }
+  it('keeps highlighted pixels aligned with selected slabs', async () => {
+    const scene = await stageDepthScene();
+    await volViewPage.open(`?urls=[tmp/${scene}]`);
+    await waitForEnFaceReady();
+    await setEnFaceWindow(200, 100);
+    await openEnFaceControls();
+    await expandEnFaceSection('thickness');
+    await expect(
+      $('.v-overlay--active [data-testid="enface-thin-highlight"] input')
+    ).toBeEnabled();
+    const slabs = [
+      [0, 7, [true, false, false]],
+      [0, 1, [false, false, false]],
+      [2, 2, [true, true, false]],
+      [4, 5, [false, true, false]],
+    ] satisfies [number, number, boolean[]][];
+    for (const [first, last, highlighted] of slabs) {
+      await expandEnFaceSection('projection');
+      await setSlabRange(first, last);
+      await browser.waitUntil(
+        async () => {
+          const pixels = await Promise.all(
+            [1.5, 3.5, 6].map((x) => enFacePixel(x, 2.5))
+          );
+          return pixels.every((pixel, index) =>
+            highlighted[index]
+              ? pixel[0] > pixel[1] + 20 && pixel[0] > pixel[2] + 20
+              : pixel[0] === pixel[1] && pixel[1] === pixel[2] && pixel[0] > 20
           );
-        else expectedImages.push((await enFaceAppearance()).image);
-      }
-      expect(await volViewPage.getNotificationsCount()).toBe(0);
+        },
+        {
+          timeoutMsg: `Expected occupied-depth pixels for slab ${first}-${last}`,
+        }
+      );
     }
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 
   it('uses imported NIfTI geometry for thickness when units are unspecified', async () => {
@@ -289,16 +263,16 @@ describe('Retinal OCT occupied-depth', () => {
     await selectSetting('enface-projection-axis', 'Coronal');
     await waitForEnFaceReady();
     await browser.keys('Escape');
-    await attachMaskThroughDataPanel(stageFixture('synthetic-thickness.nrrd'));
-    await openAnnotationSegments();
-    await waitForSegmentContent('Synthetic retinal band');
-    await selectSegment('Synthetic retinal band');
+    await attachAndSelectMask(
+      stageFixture('synthetic-thickness.nrrd'),
+      'Synthetic retinal band'
+    );
     await openEnFaceControls();
     await expandEnFaceSection('thickness');
     await expect(
       $('.v-overlay--active [data-testid="enface-thin-highlight"] input')
     ).toBeEnabled();
-    await enableHighlight();
+    await setHighlight(true);
     await setThicknessThreshold(1);
     await expectHighlight(false);
     await setThicknessThreshold(31);
diff --git a/tests/specs/octInteractionTestUtils.ts b/tests/specs/octInteractionTestUtils.ts
index f4488a2dc..51d173d5d 100644
--- a/tests/specs/octInteractionTestUtils.ts
+++ b/tests/specs/octInteractionTestUtils.ts
@@ -4,35 +4,33 @@ import path from 'node:path';
 import {
   dragContrast,
   attachAndSelectMask,
-  enFaceAppearance,
   expectEnFacePixel,
   waitForEnFaceReady,
   stageIllustrativeMask,
   expectStackedSourceMask,
-  expandEnFaceSection,
   getEnFaceWindow as getWindow,
   displayedWindow,
   selectEnFace,
   openEnFaceControls,
+  setHighlight,
+  setThicknessThreshold,
+  expectHighlight,
   CANVAS,
   CONTROLS,
   PANEL,
   WINDOW_TOOL,
 } from './octTestUtils';
-import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import { volViewPage } from '../pageobjects/volview.page';
 import { makeTempDir, writeManifestToFile } from './utils';
 import { applyTestViewport } from '../../wdio.shared.conf';
 import { syntheticMask } from '../fixtures/oct/volumes';
 import reference from '../fixtures/oct/reference.json';
 import { createSyntheticOCT } from '../fixtures/oct/dicom';
 import { waitForFirstCachedImageSpacing } from './imageCacheUtils';
-import { openAnnotationSegments } from './segmentationTestUtils';
+import { openSegmentDisplay } from './segmentationTestUtils';
 
 export { reference };
 
-export const THRESHOLD =
-  PANEL + ' [data-testid="enface-thickness-threshold-input"] input';
-
 export const SLICE_LINE = '[data-testid="enface-slice-lines"] line';
 
 export const STEM = 'oct-fixtures-' + process.pid;
@@ -46,14 +44,6 @@ export function stageFixture(name: string) {
   return STEM + '/' + name;
 }
 
-export async function setThicknessThreshold(value: number) {
-  await expandEnFaceSection('thickness');
-  const input = $(THRESHOLD);
-  await input.scrollIntoView({ block: 'center', inline: 'nearest' });
-  await input.waitForClickable();
-  await setValueVueInput(input, String(value));
-}
-
 export async function expectProjectionPixel(gray: number, x = 60, y = 12) {
   await expectEnFacePixel(gray, [x, y]);
 }
@@ -85,21 +75,6 @@ export async function observeSlabProjectionChanges() {
     );
 }
 
-export async function enableHighlight() {
-  await expandEnFaceSection('thickness');
-  const label = $(
-    '.v-overlay--active [data-testid="enface-thin-highlight"] label'
-  );
-  await label.scrollIntoView({ block: 'center', inline: 'nearest' });
-  await label.waitForClickable();
-  if (
-    !(await $(
-      '.v-overlay--active [data-testid="enface-thin-highlight"] input'
-    ).isSelected())
-  )
-    await label.click();
-}
-
 export async function dragEnFaceContrast() {
   await volViewPage.closeMenu($(WINDOW_TOOL));
   await volViewPage.closeMenu($(CONTROLS));
@@ -128,29 +103,13 @@ export async function getOriginalWindow() {
   return displayedWindow(source);
 }
 
-export async function expectHighlight(present: boolean) {
-  await waitForEnFaceReady();
-  await browser.waitUntil(
-    async () => {
-      const { coloredPixels } = await enFaceAppearance();
-      return present ? coloredPixels > 100 : coloredPixels === 0;
-    },
-    {
-      timeoutMsg: `Expected enface highlight to be ${present ? 'visible' : 'hidden'}`,
-    }
-  );
-}
-
 export async function openHighlightedSegmentationDisplay() {
   await openEnFaceControls();
-  await enableHighlight();
+  await setHighlight(true);
   await setThicknessThreshold(31);
   await expectHighlight(true);
   await browser.keys('Escape');
-  await openAnnotationSegments();
-  const display = $('[data-testid="segment-display-section"]');
-  if ((await display.getAttribute('aria-expanded')) !== 'true')
-    await display.click();
+  await openSegmentDisplay();
 }
 
 export async function expectCalibratedEnFace() {
diff --git a/tests/specs/octTestUtils.ts b/tests/specs/octTestUtils.ts
index 0c718afe2..4693d4066 100644
--- a/tests/specs/octTestUtils.ts
+++ b/tests/specs/octTestUtils.ts
@@ -138,6 +138,12 @@ export const VIEWER = '[data-testid="enface-viewer"]';
 export const CONTROLS = '[data-testid="enface-controls"]';
 export const PANEL =
   '.v-overlay--active [data-testid="enface-rendering-panel"]';
+export const THRESHOLD =
+  PANEL + ' [data-testid="enface-thickness-threshold-input"] input';
+export const THRESHOLD_SLIDER =
+  PANEL + ' [data-testid="enface-thickness-threshold"] [role="slider"]';
+export const HIGHLIGHT_TOGGLE =
+  PANEL + ' [data-testid="enface-thin-highlight"]';
 export const WINDOW_TOOL =
   'button[data-testid^="control-button-Window & Level "]';
 export const toolButton = (name: string) =>
@@ -205,6 +211,36 @@ export async function openEnFaceControls(view?: WebdriverIO.Element) {
   await panel.waitForStable();
 }
 
+export async function setThicknessThreshold(value: number) {
+  await expandEnFaceSection('thickness');
+  const input = $(THRESHOLD);
+  await input.scrollIntoView({ block: 'center', inline: 'nearest' });
+  await input.waitForClickable();
+  await setValueVueInput(input, String(value));
+}
+
+export async function setHighlight(enabled: boolean) {
+  await expandEnFaceSection('thickness');
+  const label = $(HIGHLIGHT_TOGGLE + ' label');
+  await label.scrollIntoView({ block: 'center', inline: 'nearest' });
+  await label.waitForClickable();
+  if ((await $(HIGHLIGHT_TOGGLE + ' input').isSelected()) !== enabled)
+    await label.click();
+}
+
+export async function expectHighlight(present: boolean) {
+  await waitForEnFaceReady();
+  await browser.waitUntil(
+    async () => {
+      const { coloredPixels } = await enFaceAppearance();
+      return present ? coloredPixels > 100 : coloredPixels === 0;
+    },
+    {
+      timeoutMsg: `Expected enface highlight to be ${present ? 'visible' : 'hidden'}`,
+    }
+  );
+}
+
 export async function openEnFaceProjection(view?: WebdriverIO.Element) {
   await openEnFaceControls(view);
   await expandEnFaceSection();
diff --git a/tests/specs/projection-camera.e2e.ts b/tests/specs/projection-camera.e2e.ts
index d0b9aab52..4f07f4402 100644
--- a/tests/specs/projection-camera.e2e.ts
+++ b/tests/specs/projection-camera.e2e.ts
@@ -5,7 +5,7 @@ import { TEMP_DIR } from '../../wdio.shared.conf';
 import { syntheticScalars } from '../fixtures/oct/dicom';
 import reference from '../fixtures/oct/reference.json';
 import { createNrrdVolume, syntheticMask } from '../fixtures/oct/volumes';
-import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import { volViewPage } from '../pageobjects/volview.page';
 import {
   enFaceAppearance,
   canvasAppearance,
@@ -22,6 +22,11 @@ import {
   openEnFaceProjection,
   openEnFaceControls,
   selectSetting,
+  setHighlight,
+  setThicknessThreshold,
+  expectHighlight,
+  HIGHLIGHT_TOGGLE,
+  THRESHOLD,
 } from './octTestUtils';
 import {
   makeTempDir,
@@ -239,22 +244,10 @@ describe('Projection camera persistence', () => {
     await waitForEnFaceReady();
     const baseProjection = await panAndZoom();
     await openEnFaceControls();
-    await expandEnFaceSection('thickness');
-    const highlight = $(
-      '.v-overlay--active [data-testid="enface-thin-highlight"]'
-    );
-    await highlight.$('label').click();
+    await setHighlight(true);
     await selectSetting('enface-segmentation-segment', SEGMENT_NAME);
-    const threshold = $(
-      '.v-overlay--active [data-testid="enface-thickness-threshold-input"] input'
-    );
-    await threshold.scrollIntoView();
-    await threshold.waitForClickable();
-    await setValueVueInput(threshold, '6500');
-    await browser.waitUntil(
-      async () => (await enFaceAppearance()).coloredPixels > 100,
-      { timeoutMsg: 'Expected the enface labelmap to be visible' }
-    );
+    await setThicknessThreshold(6500);
+    await expectHighlight(true);
     await expectProjectionTransform(baseProjection.transform);
     const inspected = {
       transform: baseProjection.transform,
@@ -277,12 +270,9 @@ describe('Projection camera persistence', () => {
     await expect(
       $('.v-overlay--active [data-testid="enface-segmentation-segment"]')
     ).toHaveText(expect.stringContaining(SEGMENT_NAME));
-    await expect(highlight.$('input')).toBeSelected();
-    await expect(threshold).toHaveValue('6500');
-    await browser.waitUntil(
-      async () => (await enFaceAppearance()).coloredPixels > 100,
-      { timeoutMsg: 'Expected the enface labelmap to be visible' }
-    );
+    await expect($(HIGHLIGHT_TOGGLE + ' input')).toBeSelected();
+    await expect($(THRESHOLD)).toHaveValue('6500');
+    await expectHighlight(true);
     expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 });
diff --git a/tests/specs/segmentationTestUtils.ts b/tests/specs/segmentationTestUtils.ts
index a38f52690..ae2cd4b5d 100644
--- a/tests/specs/segmentationTestUtils.ts
+++ b/tests/specs/segmentationTestUtils.ts
@@ -192,3 +192,10 @@ export async function setSegmentationDisplaySlider(
   await keys.perform();
   await expect(slider).toHaveAttribute('aria-valuenow', String(value));
 }
+
+export async function openSegmentDisplay() {
+  await openAnnotationSegments();
+  const display = $('[data-testid="segment-display-section"]');
+  if ((await display.getAttribute('aria-expanded')) !== 'true')
+    await display.click();
+}
diff --git a/tests/specs/slab-occupied-depth.e2e.ts b/tests/specs/slab-occupied-depth.e2e.ts
index 0abdd3f37..719fd4bca 100644
--- a/tests/specs/slab-occupied-depth.e2e.ts
+++ b/tests/specs/slab-occupied-depth.e2e.ts
@@ -8,7 +8,7 @@ import {
   gappedSyntheticMask,
   syntheticMask,
 } from '../fixtures/oct/volumes';
-import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import { volViewPage } from '../pageobjects/volview.page';
 import {
   makeTempDir,
   writeManifestToFile,
@@ -17,26 +17,26 @@ import {
 } from './utils';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 import {
-  attachMaskThroughDataPanel,
+  attachAndSelectMask,
   chooseEnFaceProjection,
   enFacePixel,
   expandEnFaceSection,
+  openEnFaceControls,
+  setHighlight,
   setSlabRange,
+  setThicknessThreshold,
   slabThumb,
   waitForEnFaceReady,
+  PANEL,
+  THRESHOLD,
+  THRESHOLD_SLIDER,
 } from './octTestUtils';
 import {
-  openAnnotationSegments,
+  openSegmentDisplay,
   setSegmentationDisplaySlider,
-  selectSegment,
-  waitForSegmentContent,
 } from './segmentationTestUtils';
 
 const STEM = 'slab-occupied-depth';
-const PANEL = '.v-overlay--active [data-testid="enface-rendering-panel"]';
-const INPUT = PANEL + ' [data-testid="enface-thickness-threshold-input"] input';
-const SLIDER =
-  PANEL + ' [data-testid="enface-thickness-threshold"] [role="slider"]';
 
 async function expectHighlighted(present: boolean, point = [60, 12]) {
   await waitForEnFaceReady();
@@ -51,14 +51,6 @@ async function expectHighlighted(present: boolean, point = [60, 12]) {
   );
 }
 
-async function threshold(value: number) {
-  await expandEnFaceSection('thickness');
-  const input = $(INPUT);
-  await input.scrollIntoView({ block: 'center', inline: 'nearest' });
-  await input.waitForClickable();
-  await setValueVueInput(input, String(value));
-}
-
 async function openGappedMask(twoViews = false) {
   const directory = makeTempDir(STEM);
   fs.writeFileSync(path.join(directory, 'retina.dcm'), createSyntheticOCT());
@@ -80,14 +72,12 @@ async function openGappedMask(twoViews = false) {
     '?urls=[tmp/' + STEM + '.json,tmp/' + STEM + '/retina.dcm]'
   );
   await waitForEnFaceReady();
-  await attachMaskThroughDataPanel(STEM + '/gapped-band.nrrd');
-  await openAnnotationSegments();
-  const segment = twoViews ? 'Synthetic retinal band' : 'Gapped band';
-  await waitForSegmentContent(segment);
-  await selectSegment(segment);
-  await $('[data-testid="enface-controls"]').click();
-  await expandEnFaceSection('thickness');
-  await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+  await attachAndSelectMask(
+    STEM + '/gapped-band.nrrd',
+    twoViews ? 'Synthetic retinal band' : 'Gapped band'
+  );
+  await openEnFaceControls();
+  await setHighlight(true);
 }
 
 async function openAxisMask(axis: number) {
@@ -137,28 +127,16 @@ async function openAxisMask(axis: number) {
     '?urls=[tmp/' + STEM + '.json,tmp/' + STEM + '/' + sourceFile + ']'
   );
   await waitForEnFaceReady();
-  await attachMaskThroughDataPanel(STEM + '/' + maskFile);
-  await openAnnotationSegments();
-  await waitForSegmentContent('Directional band');
-  await selectSegment('Directional band');
+  await attachAndSelectMask(STEM + '/' + maskFile, 'Directional band');
   await chooseEnFaceProjection(
     'enface-projection-axis',
     ['Sagittal', 'Coronal', 'Axial'][axis]
   );
-  await $('[data-testid="enface-controls"]').click();
-  await expandEnFaceSection('thickness');
-  await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+  await openEnFaceControls();
+  await setHighlight(true);
   return spacing[axis] * 1000;
 }
 
-async function openSharedAppearance() {
-  await browser.keys(Key.Escape);
-  await openAnnotationSegments();
-  const display = $('[data-testid="segment-display-section"]');
-  if ((await display.getAttribute('aria-expanded')) !== 'true')
-    await display.click();
-}
-
 describe('Selected-slab occupied depth', () => {
   before(async () => {
     await volViewPage.open();
@@ -178,10 +156,13 @@ describe('Selected-slab occupied depth', () => {
       await setSlabRange(first, last);
       await waitForEnFaceReady();
       await expandEnFaceSection('thickness');
-      await expect($(SLIDER)).toHaveAttribute('aria-valuemax', String(maximum));
-      await threshold(occupied);
+      await expect($(THRESHOLD_SLIDER)).toHaveAttribute(
+        'aria-valuemax',
+        String(maximum)
+      );
+      await setThicknessThreshold(occupied);
       await expectHighlighted(false);
-      await threshold(occupied + 0.1);
+      await setThicknessThreshold(occupied + 0.1);
       await expectHighlighted(true);
       const absent = await enFacePixel(0, 12);
       expect(absent[0]).toBe(absent[1]);
@@ -189,32 +170,26 @@ describe('Selected-slab occupied depth', () => {
     await expandEnFaceSection('projection');
     await setSlabRange(102, 103);
     await waitForEnFaceReady();
-    await expect($(SLIDER)).toHaveAttribute('aria-valuemax', '0.1');
-    await expect($(INPUT)).toHaveValue('41.7');
+    await expect($(THRESHOLD_SLIDER)).toHaveAttribute('aria-valuemax', '0.1');
+    await expect($(THRESHOLD)).toHaveValue('41.7');
     await expectHighlighted(false);
-    await expandEnFaceSection('thickness');
-    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await setHighlight(false);
     await expandEnFaceSection('projection');
     await setSlabRange(100, 105);
     await waitForEnFaceReady();
     await expectHighlighted(false);
-    await expandEnFaceSection('thickness');
-    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
-    await expect($(SLIDER)).toHaveAttribute('aria-valuemax', '41.7');
+    await setHighlight(true);
+    await expect($(THRESHOLD_SLIDER)).toHaveAttribute('aria-valuemax', '41.7');
     await expectHighlighted(true);
     expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 
   it('remeasures mask storage grown by painting in an ordinary source slice', async () => {
     await openGappedMask();
-    await threshold(50);
-    await expect($(SLIDER)).toHaveAttribute('aria-valuemax', '41.7');
+    await setThicknessThreshold(50);
+    await expect($(THRESHOLD_SLIDER)).toHaveAttribute('aria-valuemax', '41.7');
     await browser.keys(Key.Escape);
-    await $(
-      '.v-overlay--active [data-testid="enface-rendering-panel"]'
-    ).waitForDisplayed({
-      reverse: true,
-    });
+    await $(PANEL).waitForDisplayed({ reverse: true });
     const source = $('[data-testid~="vtk-two-view"]');
     await source.click();
     const slice = await volViewPage.getFirst2DSlice();
@@ -247,16 +222,17 @@ describe('Selected-slab occupied depth', () => {
       },
       { timeoutMsg: 'Expected the thicker painted column to stop qualifying.' }
     );
-    await $('[data-testid="enface-controls"]').click();
+    await openEnFaceControls();
     await expandEnFaceSection('thickness');
     await browser.waitUntil(
-      async () => Number(await $(SLIDER).getAttribute('aria-valuemax')) > 41.7,
+      async () =>
+        Number(await $(THRESHOLD_SLIDER).getAttribute('aria-valuemax')) > 41.7,
       {
         timeoutMsg:
           'Expected the fitted thickness maximum to reflect source mask growth.',
       }
     );
-    await expect($(INPUT)).toHaveValue('50');
+    await expect($(THRESHOLD)).toHaveValue('50');
     expect(await volViewPage.getNotificationsCount()).toBe(0);
   });
 
@@ -265,26 +241,24 @@ describe('Selected-slab occupied depth', () => {
     const panes = await $$('[data-testid="enface-viewer"]').map((view) =>
       view.getElement()
     );
-    await threshold(31);
+    await setThicknessThreshold(31);
     await expandEnFaceSection('projection');
     await setSlabRange(100, 103);
     await browser.keys(Key.Escape);
-    await panes[1].$('[data-testid="enface-controls"]').click();
-    await expandEnFaceSection('thickness');
-    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await openEnFaceControls(panes[1]);
+    await setHighlight(true);
     await chooseEnFaceProjection(
       'enface-segmentation-segment',
       'Alternative synthetic band',
       panes[1]
     );
-    await panes[1].$('[data-testid="enface-controls"]').click();
-    await threshold(60);
+    await openEnFaceControls(panes[1]);
+    await setThicknessThreshold(60);
     await expandEnFaceSection('projection');
     await setSlabRange(110, 114);
-    await expandEnFaceSection('thickness');
-    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await setHighlight(false);
     await browser.keys(Key.Escape);
-    await openSharedAppearance();
+    await openSegmentDisplay();
     await setSegmentationDisplaySlider('Fill Opacity', 0.5);
     await setSegmentationDisplaySlider('Outline Thickness', 5);
     const firstPixel = () => enFacePixel(20, 12, undefined, panes[0]);
@@ -324,7 +298,7 @@ describe('Selected-slab occupied depth', () => {
             'Expected the saved pane to restore its segmentation appearance.',
         }
       );
-      await pane.$('[data-testid="enface-controls"]').click();
+      await openEnFaceControls(pane);
       await expandEnFaceSection('projection');
       await expect(slabThumb('start')).toHaveAttribute(
         'aria-valuenow',
@@ -335,7 +309,7 @@ describe('Selected-slab occupied depth', () => {
         index ? '114' : '103'
       );
       await expandEnFaceSection('thickness');
-      await expect($(INPUT)).toHaveValue(index ? '60' : '31');
+      await expect($(THRESHOLD)).toHaveValue(index ? '60' : '31');
       await expect(
         $(PANEL).$('[data-testid="enface-segmentation-segment"]')
       ).toHaveText(
@@ -348,7 +322,7 @@ describe('Selected-slab occupied depth', () => {
       else await expect(enabled).toBeSelected();
       await browser.keys(Key.Escape);
     }
-    await openSharedAppearance();
+    await openSegmentDisplay();
     for (const [label, value] of [
       ['Fill Opacity', '0.5'],
       ['Outline Thickness', '5'],
@@ -361,9 +335,8 @@ describe('Selected-slab occupied depth', () => {
         )
       ).toHaveAttribute('aria-valuenow', value);
     }
-    await restored[1].$('[data-testid="enface-controls"]').click();
-    await expandEnFaceSection('thickness');
-    await $(PANEL).$('[data-testid="enface-thin-highlight"] label').click();
+    await openEnFaceControls(restored[1]);
+    await setHighlight(true);
     await browser.waitUntil(
       async () => {
         const [r, g] = await enFacePixel(60, 12, undefined, restored[1]);
@@ -392,19 +365,19 @@ describe('Selected-slab occupied depth', () => {
         await waitForEnFaceReady();
         await expandEnFaceSection('thickness');
         const occupied = count * cellLength;
-        await expect($(SLIDER)).toHaveAttribute(
+        await expect($(THRESHOLD_SLIDER)).toHaveAttribute(
           'aria-valuemax',
           String(occupied + 0.1)
         );
-        await threshold(occupied);
+        await setThicknessThreshold(occupied);
         await expectHighlighted(false, [15, 14]);
-        await threshold(occupied + 0.1);
+        await setThicknessThreshold(occupied + 0.1);
         await expectHighlighted(true, [15, 14]);
       }
       await expandEnFaceSection('projection');
       await setSlabRange(5, 6);
       await waitForEnFaceReady();
-      await expect($(SLIDER)).toHaveAttribute('aria-valuemax', '0.1');
+      await expect($(THRESHOLD_SLIDER)).toHaveAttribute('aria-valuemax', '0.1');
       await expectHighlighted(false, [15, 14]);
       expect(await volViewPage.getNotificationsCount()).toBe(0);
     });

From fb191cd894472aebf664ce172cf00fa771c87d32 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Sun, 1 Nov 2026 18:54:33 -0500
Subject: [PATCH 3/3] refactor: simplify occupied-depth measurement and
 selection

Run measurements on the shared Comlink worker host instead of a
hand-rolled message protocol, release the worker when nothing is
measured, and drop the full-mask binary scan.

Keep the saved segment and highlight choice raw and derive what the
controls show, so neither a mounted view nor saving rewrites them.

Use declared DICOM spacing without a direction-length tolerance and
compute the threshold slider maximum in whole tenths.
---
 eslint.config.js                              |   1 -
 src/enface/EnFaceControlPanel.vue             |   2 +
 src/enface/EnFaceThicknessControls.vue        |  11 +-
 src/enface/__tests__/controls.spec.ts         |  17 +-
 src/enface/__tests__/inputCalibration.spec.ts |   4 +-
 .../occupiedDepthPresentation.spec.ts         |   7 +
 src/enface/__tests__/restoreSelection.spec.ts |  29 +--
 src/enface/__tests__/store.spec.ts            |  61 ++----
 src/enface/store.ts                           |  29 +--
 src/enface/thickness.ts                       |   8 +-
 src/enface/useEnFaceOccupiedDepth.ts          |  21 +-
 src/enface/useOccupiedDepthInput.ts           |  52 ++---
 .../editing/__tests__/processWorker.spec.ts   |  16 +-
 .../editing/__tests__/silentWorker.ts         |  11 +-
 src/segmentation/editing/processWorker.ts     |  15 +-
 .../__tests__/occupiedDepth.spec.ts           |  12 +-
 .../__tests__/useOccupiedDepth.spec.ts        | 199 +++++-------------
 .../measurements/occupiedDepth.ts             |   8 -
 .../measurements/occupiedDepth.worker.ts      |  35 ++-
 .../measurements/occupiedDepthHandler.ts      |  41 ----
 .../measurements/useOccupiedDepth.ts          | 186 +++++++---------
 21 files changed, 278 insertions(+), 487 deletions(-)
 delete mode 100644 src/segmentation/measurements/occupiedDepthHandler.ts

diff --git a/eslint.config.js b/eslint.config.js
index bba83a884..8b22d955e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -321,7 +321,6 @@ export default tseslint.config(
         'src/segmentation/geometry.ts',
         'src/segmentation/measurements/occupiedDepth.ts',
         'src/segmentation/measurements/occupiedDepth.worker.ts',
-        'src/segmentation/measurements/occupiedDepthHandler.ts',
         'src/segmentation/color.ts',
         'src/segmentation/model.ts',
         'src/segmentation/segment.ts',
diff --git a/src/enface/EnFaceControlPanel.vue b/src/enface/EnFaceControlPanel.vue
index b85a1f05e..07a44e71a 100644
--- a/src/enface/EnFaceControlPanel.vue
+++ b/src/enface/EnFaceControlPanel.vue
@@ -37,6 +37,8 @@ const controlState = computed(() => {
       highlightReason: reason,
       thicknessReason: reason,
       segments: [],
+      segmentId: null,
+      highlightThin: false,
     },
   } satisfies EnFaceViewControlState;
 });
diff --git a/src/enface/EnFaceThicknessControls.vue b/src/enface/EnFaceThicknessControls.vue
index cde234873..3e048c6f5 100644
--- a/src/enface/EnFaceThicknessControls.vue
+++ b/src/enface/EnFaceThicknessControls.vue
@@ -14,7 +14,7 @@ const emit = defineEmits<{
 const thresholdReason = computed(
   () =>
     props.thicknessReason ||
-    (!props.settings.highlightThin
+    (!props.highlightThin
       ? 'Enable thin-region highlighting to adjust the threshold.'
       : null)
 );
@@ -26,11 +26,12 @@ function updateThreshold(value: string | number | null) {
 function updateSliderThreshold(value: number) {
   updateThreshold(Math.round(value * 10) / 10);
 }
+// Edits save the shown pair, so a stale saved choice cannot resurface.
 function updateSegment(segmentId: string | null) {
-  emit('patch', { segmentId });
+  emit('patch', { segmentId, highlightThin: props.highlightThin });
 }
 function updateHighlight(highlightThin: boolean | null) {
-  emit('patch', { highlightThin: !!highlightThin });
+  emit('patch', { highlightThin: !!highlightThin, segmentId: props.segmentId });
 }
 </script>
 
@@ -45,7 +46,7 @@ function updateHighlight(highlightThin: boolean | null) {
     <v-expansion-panel-text class="thickness-controls">
       <ReasonedAction :reason="highlightReason ?? undefined" block>
         <v-switch
-          :model-value="settings.highlightThin"
+          :model-value="highlightThin"
           @update:model-value="updateHighlight"
           color="secondary"
           density="compact"
@@ -58,7 +59,7 @@ function updateHighlight(highlightThin: boolean | null) {
       </ReasonedAction>
       <ReasonedAction :reason="segmentationReason ?? undefined" block>
         <v-select
-          :model-value="settings.segmentId"
+          :model-value="segmentId"
           @update:model-value="updateSegment"
           :items="segments"
           label="Thickness segment"
diff --git a/src/enface/__tests__/controls.spec.ts b/src/enface/__tests__/controls.spec.ts
index 31d8a4937..e96663ded 100644
--- a/src/enface/__tests__/controls.spec.ts
+++ b/src/enface/__tests__/controls.spec.ts
@@ -27,12 +27,7 @@ afterEach(() => vi.unstubAllGlobals());
 enableAutoUnmount(afterEach);
 
 function mountControls(overrides = {}) {
-  const settings = reactive({
-    ...defaultEnFaceViewConfig(),
-    highlightThin: true,
-    segmentId: 'retina',
-    ...overrides,
-  });
+  const settings = reactive({ ...defaultEnFaceViewConfig(), ...overrides });
   return mount(EnFaceControls, {
     attachTo: document.body,
     props: {
@@ -54,6 +49,8 @@ function mountControls(overrides = {}) {
         segments: [
           { value: 'retina', title: 'Retinal layer', color: '#ff0000' },
         ],
+        segmentId: 'retina',
+        highlightThin: true,
       },
     },
     global: { plugins: [createVuetify()] },
@@ -161,9 +158,6 @@ describe('En face rendering controls', () => {
           { value: 'retina', title: 'Retinal layer', color: '#ff0000' },
           { value: 'other-layer', title: 'Other layer', color: '#00ff00' },
         ],
-      },
-      settings: {
-        ...wrapper.props('settings'),
         segmentId: 'other-layer',
       },
     });
@@ -193,7 +187,10 @@ describe('En face rendering controls', () => {
       document.body.querySelectorAll('[role="option"]')[0] as HTMLElement
     ).click();
     await nextTick();
-    expect(lastPatch(wrapper)).toEqual({ segmentId: 'retina' });
+    expect(lastPatch(wrapper)).toEqual({
+      segmentId: 'retina',
+      highlightThin: true,
+    });
     expect(
       wrapper
         .get('[data-testid="enface-thin-highlight"]')
diff --git a/src/enface/__tests__/inputCalibration.spec.ts b/src/enface/__tests__/inputCalibration.spec.ts
index 2f4a3f52e..83d907b2a 100644
--- a/src/enface/__tests__/inputCalibration.spec.ts
+++ b/src/enface/__tests__/inputCalibration.spec.ts
@@ -61,7 +61,7 @@ async function mountInput(id: string) {
   };
   segmentation.maskVoxels(mask.id).apply(new Uint8Array(8).fill(1));
   const settings = useEnFaceViewStore().configFor('calibration', id);
-  settings.highlightThin = true;
+  Object.assign(settings, { highlightThin: true, segmentId: segment });
   const host = defineComponent({
     setup() {
       const projection = useEnFaceInput('calibration');
@@ -96,6 +96,8 @@ async function mountInput(id: string) {
               highlightReason: input.highlightReason.value,
               thicknessReason: input.thicknessReason.value,
               segments: input.segmentOptions.value,
+              segmentId: input.segmentId.value,
+              highlightThin: input.highlightThin.value,
             },
           }),
         ]);
diff --git a/src/enface/__tests__/occupiedDepthPresentation.spec.ts b/src/enface/__tests__/occupiedDepthPresentation.spec.ts
index 366d10c08..1db340393 100644
--- a/src/enface/__tests__/occupiedDepthPresentation.spec.ts
+++ b/src/enface/__tests__/occupiedDepthPresentation.spec.ts
@@ -56,5 +56,12 @@ describe('occupied-depth threshold presentation', () => {
       isPresentThicknessBelow(41.6, thicknessSliderMaximum(full, 10.4))
     ).toBe(true);
     expect(thicknessSliderMaximum(null, 10.4)).toBe(1);
+    // 13 * 3.9 rounds just below 50.7, so the endpoint steps to 50.8 exactly.
+    const rounded = {
+      ...full,
+      counts: new Uint32Array([13]),
+      maximumCount: 13,
+    };
+    expect(thicknessSliderMaximum(rounded, 3.9)).toBe(50.8);
   });
 });
diff --git a/src/enface/__tests__/restoreSelection.spec.ts b/src/enface/__tests__/restoreSelection.spec.ts
index baa496a7d..5a4eeb51a 100644
--- a/src/enface/__tests__/restoreSelection.spec.ts
+++ b/src/enface/__tests__/restoreSelection.spec.ts
@@ -16,9 +16,9 @@ import { createThinRegionMask, thinCountCutoff } from '@/src/enface/thickness';
 import { useSegmentStore } from '@/src/segmentation/segments';
 import { useSegmentationStore } from '@/src/segmentation/store';
 import {
-  createOccupiedDepthHandler,
-  type MeasurementRequest,
-} from '@/src/segmentation/measurements/occupiedDepthHandler';
+  measureOccupiedDepth,
+  type OccupiedDepthInput,
+} from '@/src/segmentation/measurements/occupiedDepth';
 import {
   activateAppPinia,
   makeImage,
@@ -37,23 +37,10 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
-function createMeasurementWorker() {
-  const handle = createOccupiedDepthHandler();
-  const worker = {
-    onmessage: null as Worker['onmessage'],
-    postMessage(message: MeasurementRequest, transfer: Transferable[]) {
-      const response = handle(structuredClone(message, { transfer }));
-      queueMicrotask(() =>
-        worker.onmessage?.call(
-          worker as unknown as Worker,
-          new MessageEvent('message', { data: response })
-        )
-      );
-    },
-    terminate() {},
-  };
-  return worker as unknown as Worker;
-}
+const measureInProcess = () => ({
+  measure: async (input: OccupiedDepthInput) => measureOccupiedDepth(input),
+  release: () => {},
+});
 
 it('keeps the projection ready and restores the non-first segment after deferred mask decoding', async () => {
   useImageStatsStore().stats.oct = {
@@ -164,7 +151,7 @@ it('keeps the projection ready and restores the non-first segment after deferred
               () => projection.controls.value.projectionReason
             ),
           },
-          createMeasurementWorker
+          measureInProcess
         );
         return () =>
           h(EnFaceControls, {
diff --git a/src/enface/__tests__/store.spec.ts b/src/enface/__tests__/store.spec.ts
index 30a3bad45..d0515c772 100644
--- a/src/enface/__tests__/store.spec.ts
+++ b/src/enface/__tests__/store.spec.ts
@@ -1,8 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import { createPinia, setActivePinia } from 'pinia';
 import JSZip from 'jszip';
-import { useSegmentationStore } from '@/src/segmentation/store';
-import { useSegmentStore } from '@/src/segmentation/segments';
 import { useEnFaceViewStore } from '@/src/enface/store';
 import { ManifestSchema, type StateFile } from '@/src/io/state-file/schema';
 import { parseNamedLayouts } from '@/src/utils/layoutParsing';
@@ -34,8 +32,6 @@ describe('En face view settings', () => {
       depthStart: 20,
       depthEnd: 40,
       thresholdMicrons: 35,
-      highlightThin: true,
-      segmentId: 'missing-segment',
     });
     const state: StateFile = {
       zip: new JSZip(),
@@ -65,7 +61,6 @@ describe('En face view settings', () => {
     expect(parsed.viewByID?.view.type).toBe('EnFace');
     const settings = parsed.viewByID!.view.config!;
     expect(settings.oct.enFace?.method).toBe('sum');
-    expect(settings.oct.enFace?.segmentId).toBeNull();
     expect(settings.oct.enFace).not.toHaveProperty('windowWidth');
     expect(settings.oct.window).toMatchObject({
       width: 120,
@@ -129,52 +124,26 @@ describe('En face view settings', () => {
     });
   });
 
-  it('restores the chosen segment instead of highlighting the first mask', () => {
-    const registry = useSegmentStore().segments;
-    const first = registry.addSegment({ name: 'First layer' });
-    const chosen = registry.addSegment({ name: 'Chosen layer' });
-    const segmentation = useSegmentationStore();
-    const group = segmentation.ensureSegmentationForImage('restored-oct');
-    segmentation.createMask(group.id, first);
-    segmentation.createMask(group.id, chosen);
+  it('remaps saved segment ids and drops unknown ones on restore', () => {
     const store = useEnFaceViewStore();
-    store.deserialize(
-      'view',
-      {
-        'restored-oct': {
-          enFace: {
-            axis: 1,
-            method: 'mean',
-            depthStart: 0,
-            depthEnd: null,
-            thresholdMicrons: 35,
-            highlightThin: true,
-            segmentId: 'saved-layer',
-          },
-        },
+    const saved = (segmentId: string) => ({
+      enFace: {
+        axis: 1 as const,
+        method: 'mean' as const,
+        depthStart: 0,
+        depthEnd: null,
+        thresholdMicrons: 35,
+        highlightThin: true,
+        segmentId,
       },
-      { 'saved-layer': chosen }
-    );
-    expect(store.configFor('view', 'restored-oct').segmentId).toBe(chosen);
-    expect(store.configFor('view', 'restored-oct').highlightThin).toBe(true);
+    });
     store.deserialize(
       'view',
-      {
-        'restored-oct': {
-          enFace: {
-            axis: 1,
-            method: 'mean',
-            depthStart: 0,
-            depthEnd: null,
-            thresholdMicrons: 35,
-            highlightThin: true,
-            segmentId: 'missing-layer',
-          },
-        },
-      },
-      {}
+      { kept: saved('saved-layer'), dropped: saved('missing-layer') },
+      { 'saved-layer': 'chosen' }
     );
-    expect(store.configFor('view', 'restored-oct').highlightThin).toBe(false);
+    expect(store.configFor('view', 'kept').segmentId).toBe('chosen');
+    expect(store.configFor('view', 'dropped').segmentId).toBeNull();
   });
 
   it('resolves custom enface layouts without treating the projection as a slice', () => {
diff --git a/src/enface/store.ts b/src/enface/store.ts
index 8e1899ad7..1a5884955 100644
--- a/src/enface/store.ts
+++ b/src/enface/store.ts
@@ -1,14 +1,12 @@
 import { defineStore } from 'pinia';
-import { useSegmentStore } from '@/src/segmentation/segments';
 import { reactive } from 'vue';
 import { createViewConfigSerializer } from '@/src/store/view-configs/common';
 import {
   deleteSecondKey,
-  forEachEntry,
   getDoubleKeyRecord,
   type DoubleKeyRecord,
 } from '@/src/utils/doubleKeyRecord';
-import type { StateFile, ViewConfig } from '@/src/io/state-file/schema';
+import type { ViewConfig } from '@/src/io/state-file/schema';
 import type { SlabAxis, SlabMethod } from '@/src/core/slab/types';
 import type { Maybe } from '@/src/types';
 
@@ -28,6 +26,8 @@ export type ThicknessControlState = {
   highlightReason: string | null;
   thicknessReason: string | null;
   segments: { value: string; title: string; color?: string }[];
+  segmentId: string | null;
+  highlightThin: boolean;
 };
 
 export type EnFaceViewControlState = {
@@ -50,7 +50,6 @@ export const defaultEnFaceViewConfig = (): EnFaceViewConfig => ({
 export const useEnFaceViewStore = defineStore('enface-view', () => {
   const configs = reactive<DoubleKeyRecord<EnFaceViewConfig>>({});
   const controlStates = reactive<DoubleKeyRecord<EnFaceViewControlState>>({});
-  const segmentsRegistry = useSegmentStore().segments;
 
   function configFor(viewID: string, dataID: string) {
     configs[viewID] ??= {};
@@ -95,20 +94,7 @@ export const useEnFaceViewStore = defineStore('enface-view', () => {
     }
   }
 
-  function serialize(stateFile: StateFile) {
-    // Saved files name only segments that still exist.
-    const saved: DoubleKeyRecord<EnFaceViewConfig> = {};
-    forEachEntry(configs, (viewID, dataID, config) => {
-      const segmentId =
-        segmentsRegistry.getSegment(config.segmentId)?.id ?? null;
-      (saved[viewID] ??= {})[dataID] = {
-        ...config,
-        segmentId,
-        highlightThin: config.highlightThin && !!segmentId,
-      };
-    });
-    createViewConfigSerializer(saved, 'enFace')(stateFile);
-  }
+  const serialize = createViewConfigSerializer(configs, 'enFace');
 
   function deserialize(
     viewID: string,
@@ -116,13 +102,10 @@ export const useEnFaceViewStore = defineStore('enface-view', () => {
     segmentIdMap: Record<string, string>
   ) {
     Object.entries(config).forEach(([dataID, viewConfig]) => {
-      if (!viewConfig.enFace) return;
       const saved = viewConfig.enFace;
-      const segmentId =
-        (saved.segmentId && segmentIdMap[saved.segmentId]) || null;
+      if (!saved) return;
       Object.assign(configFor(viewID, dataID), saved, {
-        segmentId,
-        highlightThin: saved.highlightThin && !!segmentId,
+        segmentId: (saved.segmentId && segmentIdMap[saved.segmentId]) || null,
       });
     });
   }
diff --git a/src/enface/thickness.ts b/src/enface/thickness.ts
index 26700a632..064e34efc 100644
--- a/src/enface/thickness.ts
+++ b/src/enface/thickness.ts
@@ -41,10 +41,10 @@ export function thicknessSliderMaximum(
     return 1;
   const maximum = result.maximumCount * micronsPerVoxel;
   // The strict below-threshold comparison needs an endpoint above the maximum.
-  let rounded = (Math.floor(maximum * 10) + 1) / 10;
-  if (!Number.isFinite(rounded)) return maximum;
-  if (maximum > 0 && !isPresentThicknessBelow(maximum, rounded)) rounded += 0.1;
-  return Math.max(0.1, rounded);
+  const tenths = Math.floor(maximum * 10) + 1;
+  return maximum > 0 && !isPresentThicknessBelow(maximum, tenths / 10)
+    ? (tenths + 1) / 10
+    : tenths / 10;
 }
 
 export const EN_FACE_THICKNESS_HELP =
diff --git a/src/enface/useEnFaceOccupiedDepth.ts b/src/enface/useEnFaceOccupiedDepth.ts
index 6c2b66c55..fef465b97 100644
--- a/src/enface/useEnFaceOccupiedDepth.ts
+++ b/src/enface/useEnFaceOccupiedDepth.ts
@@ -1,5 +1,8 @@
 import { computed, unref, type MaybeRef } from 'vue';
-import { useOccupiedDepth } from '@/src/segmentation/measurements/useOccupiedDepth';
+import {
+  useOccupiedDepth,
+  type OccupiedDepthMeasurer,
+} from '@/src/segmentation/measurements/useOccupiedDepth';
 import type { SlabGeometry } from '@/src/core/slab/geometry';
 import {
   useOccupiedDepthInput,
@@ -15,11 +18,11 @@ export function useEnFaceOccupiedDepth(
   projection: OccupiedDepthProjection & {
     geometry: MaybeRef<SlabGeometry | null>;
   },
-  createWorker?: () => Worker
+  createMeasurer?: () => OccupiedDepthMeasurer
 ) {
   const { geometry, blockedReason } = projection;
   const input = useOccupiedDepthInput(viewId, projection);
-  const { settings, micronsPerVoxel } = input;
+  const { settings, highlightThin, micronsPerVoxel } = input;
   const appearance = useThinRegionAppearance(
     computed(() => input.selectedMask.value?.id)
   );
@@ -27,11 +30,7 @@ export function useEnFaceOccupiedDepth(
     accepted: measurement,
     computing: measuring,
     error,
-  } = useOccupiedDepth(
-    input.request,
-    createWorker,
-    computed(() => settings.value.highlightThin)
-  );
+  } = useOccupiedDepth(input.request, createMeasurer);
   const thicknessReason = computed(
     () =>
       input.thicknessReason.value ||
@@ -42,7 +41,7 @@ export function useEnFaceOccupiedDepth(
         : null)
   );
   const message = computed(() => {
-    if (!settings.value.highlightThin || unref(blockedReason)) return null;
+    if (!highlightThin.value || unref(blockedReason)) return null;
     // Without a reason, a running measurement has a previous result to show.
     return (
       thicknessReason.value ||
@@ -57,7 +56,7 @@ export function useEnFaceOccupiedDepth(
     micronsPerVoxel: micronsPerVoxel.value,
     threshold: settings.value.thresholdMicrons,
     appearance:
-      settings.value.highlightThin && !thicknessReason.value && unref(geometry)
+      highlightThin.value && !thicknessReason.value && unref(geometry)
         ? appearance.value
         : null,
   }));
@@ -72,6 +71,8 @@ export function useEnFaceOccupiedDepth(
         highlightReason: input.highlightReason.value,
         thicknessReason: thicknessReason.value,
         segments: input.segmentOptions.value,
+        segmentId: input.segmentId.value,
+        highlightThin: highlightThin.value,
       }) satisfies ThicknessControlState
   );
   return { overlay, controls, measuring, message };
diff --git a/src/enface/useOccupiedDepthInput.ts b/src/enface/useOccupiedDepthInput.ts
index fd3ddc21a..9bb19b00a 100644
--- a/src/enface/useOccupiedDepthInput.ts
+++ b/src/enface/useOccupiedDepthInput.ts
@@ -1,4 +1,4 @@
-import { computed, ref, unref, watch, type MaybeRef } from 'vue';
+import { computed, ref, unref, type MaybeRef } from 'vue';
 import { areEquals, dot } from '@kitware/vtk.js/Common/Core/Math';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import type { useCurrentImage } from '@/src/composables/useCurrentImage';
@@ -49,13 +49,16 @@ export function useOccupiedDepthInput(
     return getOccupiedDepthSupport(currentImageID.value);
   });
 
+  const storedSegment = computed(() =>
+    segmentsRegistry.getSegment(settings.value.segmentId)
+  );
   const segmentOptions = computed(() => {
     if (!currentImageID.value) return [];
     const segmentIds = segmentationStore
       .imageMasks(currentImageID.value)
       .map((mask) => mask.segmentId);
-    const selected = segmentsRegistry.getSegment(settings.value.segmentId);
-    // A restored segment can precede its mask record and decoded voxels.
+    const selected = storedSegment.value;
+    // A saved segment stays listed without a mask, as while restored voxels decode.
     if (selected && !segmentIds.includes(selected.id))
       segmentIds.push(selected.id);
     return segmentIds.map((segmentId) => {
@@ -67,18 +70,15 @@ export function useOccupiedDepthInput(
       };
     });
   });
-  watch(
-    [settings, segmentOptions],
-    ([config, options]) => {
-      if (!options.some((option) => option.value === config.segmentId)) {
-        if (config.segmentId) config.highlightThin = false;
-        config.segmentId = options[0]?.value ?? null;
-      }
-    },
-    { immediate: true }
+  // Saved choices stay raw; a deleted one shows the first option, unhighlighted.
+  const segmentId = computed(
+    () => storedSegment.value?.id ?? segmentOptions.value[0]?.value ?? null
+  );
+  const highlightThin = computed(
+    () => settings.value.highlightThin && !!storedSegment.value
   );
   const selectedMask = computed(() =>
-    segmentationStore.maskFor(currentImageID.value, settings.value.segmentId)
+    segmentationStore.maskFor(currentImageID.value, segmentId.value)
   );
   const selectedBinding = computed(() =>
     selectedMask.value
@@ -177,21 +177,13 @@ export function useOccupiedDepthInput(
     void volumeRevision.value;
     const image = currentImageData.value;
     if (!image) return 0;
-    const direction = image.getDirection();
-    const offset = slabAxis.value * 3;
-    const directionLength = Math.hypot(
-      direction[offset],
-      direction[offset + 1],
-      direction[offset + 2]
-    );
-    // DICOM direction cosines describe unit vectors; rounded values retain
-    // their declared spacing. Generic image directions can also carry scale.
-    const scale =
-      support.value.calibratedAxes?.[slabAxis.value] &&
-      Math.abs(directionLength - 1) <= (slabAxis.value === 2 ? 2e-4 : 1e-4)
-        ? 1
-        : directionLength;
-    return Math.abs(image.getSpacing()[slabAxis.value]) * scale * 1000;
+    const axis = slabAxis.value;
+    // Declared DICOM spacing is physical, so rounded unit cosines must not
+    // rescale it. Generic image directions can carry scale.
+    const scale = support.value.calibratedAxes?.[axis]
+      ? 1
+      : Math.hypot(...image.getDirection().slice(axis * 3, axis * 3 + 3));
+    return Math.abs(image.getSpacing()[axis]) * scale * 1000;
   });
   const highlightReason = computed(
     () =>
@@ -236,7 +228,7 @@ export function useOccupiedDepthInput(
   });
 
   const request = computed((): OccupiedDepthRequest | null => {
-    if (!settings.value.highlightThin) return null;
+    if (!highlightThin.value) return null;
     void volumeRevision.value;
     const image = currentImageData.value;
     const mask = measurementMask.value;
@@ -259,6 +251,8 @@ export function useOccupiedDepthInput(
 
   return {
     settings,
+    segmentId,
+    highlightThin,
     selectedMask,
     segmentOptions,
     segmentationReason,
diff --git a/src/segmentation/editing/__tests__/processWorker.spec.ts b/src/segmentation/editing/__tests__/processWorker.spec.ts
index 95d8e1104..02a21665e 100644
--- a/src/segmentation/editing/__tests__/processWorker.spec.ts
+++ b/src/segmentation/editing/__tests__/processWorker.spec.ts
@@ -1,5 +1,8 @@
 import { describe, expect, it } from 'vitest';
-import { terminateProcessWorkers } from '@/src/segmentation/editing/processWorker';
+import {
+  createWorkerHost,
+  terminateProcessWorkers,
+} from '@/src/segmentation/editing/processWorker';
 import { hostOverSilentWorkers } from '@/src/segmentation/editing/__tests__/silentWorker';
 
 describe('a process worker host', () => {
@@ -88,4 +91,15 @@ describe('a process worker host', () => {
     expect(workers).toHaveLength(2);
     expect(workers[1].terminated).toBe(false);
   });
+
+  it('leaves a plain host running when process runs are cancelled', async () => {
+    const { host, workers } = hostOverSilentWorkers(createWorkerHost);
+
+    const call = host.call((api) => api.smooth(1));
+    terminateProcessWorkers();
+
+    expect(workers[0].terminated).toBe(false);
+    host.terminate();
+    await expect(call).rejects.toThrow(/stopped/);
+  });
 });
diff --git a/src/segmentation/editing/__tests__/silentWorker.ts b/src/segmentation/editing/__tests__/silentWorker.ts
index 7986aa9db..a7ad96d0b 100644
--- a/src/segmentation/editing/__tests__/silentWorker.ts
+++ b/src/segmentation/editing/__tests__/silentWorker.ts
@@ -1,4 +1,7 @@
-import { createProcessWorkerHost } from '@/src/segmentation/editing/processWorker';
+import {
+  createProcessWorkerHost,
+  createWorkerHost,
+} from '@/src/segmentation/editing/processWorker';
 
 // A failed or abandoned worker accepts calls without ever replying.
 function silentEndpoint() {
@@ -38,9 +41,11 @@ function silentEndpoint() {
 
 export type SilentApi = { smooth: (value: number) => Promise<number> };
 
-export function hostOverSilentWorkers() {
+export function hostOverSilentWorkers(
+  create: typeof createWorkerHost = createProcessWorkerHost
+) {
   const workers: ReturnType<typeof silentEndpoint>[] = [];
-  const host = createProcessWorkerHost<SilentApi>(() => {
+  const host = create<SilentApi>(() => {
     const worker = silentEndpoint();
     workers.push(worker);
     return worker as unknown as Worker;
diff --git a/src/segmentation/editing/processWorker.ts b/src/segmentation/editing/processWorker.ts
index 7312f5c4b..0bedc1cfd 100644
--- a/src/segmentation/editing/processWorker.ts
+++ b/src/segmentation/editing/processWorker.ts
@@ -21,7 +21,7 @@ type ProcessWorkerHost<Api> = {
   terminate(): void;
 };
 
-/** Every host built here, so a cancelled run can drop the lot. */
+/** Every process host, so a cancelled run can drop the lot. */
 const hosts = new Set<{ terminate: () => void }>();
 
 /**
@@ -36,12 +36,10 @@ export function terminateProcessWorkers() {
 
 function workerFailure(event: Event) {
   const reported = (event as Partial<ErrorEvent>).message;
-  return new Error(
-    reported || `The worker running this process reported "${event.type}".`
-  );
+  return new Error(reported || `The worker reported "${event.type}".`);
 }
 
-export function createProcessWorkerHost<Api>(
+export function createWorkerHost<Api>(
   spawn: () => Worker
 ): ProcessWorkerHost<Api> {
   let live: {
@@ -84,11 +82,16 @@ export function createProcessWorkerHost<Api>(
     });
   }
 
-  const host = {
+  return {
     call,
     terminate: () =>
       live?.discard(new Error('The process worker was stopped.')),
   };
+}
+
+/** A host that `terminateProcessWorkers` ends with a cancelled run. */
+export function createProcessWorkerHost<Api>(spawn: () => Worker) {
+  const host = createWorkerHost<Api>(spawn);
   hosts.add(host);
   return host;
 }
diff --git a/src/segmentation/measurements/__tests__/occupiedDepth.spec.ts b/src/segmentation/measurements/__tests__/occupiedDepth.spec.ts
index a71d11b5d..1d6d1609d 100644
--- a/src/segmentation/measurements/__tests__/occupiedDepth.spec.ts
+++ b/src/segmentation/measurements/__tests__/occupiedDepth.spec.ts
@@ -81,10 +81,7 @@ describe('selected-slab occupied depth', () => {
     expect(Array.from(field.counts)).toEqual([0, 0, 0, 2]);
   });
 
-  it('rejects malformed or nonbinary masks instead of treating them as empty', () => {
-    const input = gappedColumn();
-    input.mask.values[0] = 2;
-    expect(() => measureOccupiedDepth(input)).toThrow('binary mask');
+  it('rejects slabs outside the source', () => {
     expect(() =>
       measureOccupiedDepth({ ...gappedColumn(), first: -1 })
     ).toThrow('inclusive source range');
@@ -114,13 +111,6 @@ describe('selected-slab occupied depth', () => {
     expect(measure({ ...slab, first: 1, last: 1 }).maximumCount).toBe(1);
   });
 
-  it('validates one-shot mask contents again after the same array is edited', () => {
-    const input = gappedColumn();
-    expect(measureOccupiedDepth(input).maximumCount).toBe(4);
-    input.mask.values[0] = 2;
-    expect(() => measureOccupiedDepth(input)).toThrow('binary mask');
-  });
-
   it('rejects malformed prepared storage and one-shot crop geometry', () => {
     const input = gappedColumn();
     expect(() =>
diff --git a/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts b/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
index 822418e2a..5bf5278ce 100644
--- a/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
+++ b/src/segmentation/measurements/__tests__/useOccupiedDepth.spec.ts
@@ -1,10 +1,10 @@
 import { afterEach, describe, expect, it } from 'vitest';
-import { enableAutoUnmount, mount } from '@vue/test-utils';
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils';
 import { defineComponent, h, nextTick, shallowRef } from 'vue';
 import {
-  createOccupiedDepthHandler,
-  type MeasurementRequest,
-} from '../occupiedDepthHandler';
+  measureOccupiedDepth,
+  type OccupiedDepthInput,
+} from '../occupiedDepth';
 import {
   useOccupiedDepth,
   type OccupiedDepthRequest,
@@ -12,49 +12,35 @@ import {
 
 enableAutoUnmount(afterEach);
 
-function controlledMeasurements() {
-  const replies: Array<() => void> = [];
-  let fail: () => void = () => {};
-  const create = () => {
-    const handle = createOccupiedDepthHandler();
-    const worker = {
-      onmessage: null as Worker['onmessage'],
-      onerror: null as Worker['onerror'],
-      onmessageerror: null as Worker['onmessageerror'],
-      terminate: () => {},
-      postMessage(message: MeasurementRequest, transfer: Transferable[]) {
-        const snapshot = structuredClone(message, { transfer });
-        const response = handle(snapshot);
-        const receive = worker.onmessage!;
-        replies.push(() =>
-          receive.call(
-            worker as unknown as Worker,
-            new MessageEvent('message', {
-              data: response,
-            })
-          )
-        );
-      },
-    };
-    fail = () =>
-      worker.onerror?.call(
-        worker as unknown as Worker,
-        new ErrorEvent('error', { message: 'Measurement device unavailable.' })
-      );
-    return worker as unknown as Worker;
+// Answers in call order when told to, measuring the mask as it was sent.
+function controlledMeasurer() {
+  const replies: Array<(failure?: Error) => void> = [];
+  const state = { releases: 0 };
+  const measure = (input: OccupiedDepthInput) => {
+    const values = input.mask.values.slice();
+    return new Promise<Error | undefined>((resolve) =>
+      replies.push(resolve)
+    ).then((failure) => {
+      if (failure) throw failure;
+      return measureOccupiedDepth({
+        ...input,
+        mask: { ...input.mask, values },
+      });
+    });
   };
   return {
-    create,
-    finish: async () => {
-      await nextTick();
-      replies.shift()?.();
-      await nextTick();
+    state,
+    create: () => ({ measure, release: () => state.releases++ }),
+    finish: async (failure?: Error) => {
+      // Lets a just-changed request reach the measurer first.
+      await flushPromises();
+      replies.shift()?.(failure);
+      await flushPromises();
     },
-    fail: () => fail(),
   };
 }
 
-function mountMeasurement(keepEnabled = false) {
+function mountMeasurement() {
   const request = shallowRef<OccupiedDepthRequest | null>({
     source: {},
     segment: 'segment',
@@ -69,14 +55,13 @@ function mountMeasurement(keepEnabled = false) {
       extent: [0, 0, 0, 5, 0, 0],
     },
   });
-  const worker = controlledMeasurements();
+  const measurer = controlledMeasurer();
   const wrapper = mount(
     defineComponent({
       setup() {
         const { accepted, computing, error } = useOccupiedDepth(
           request,
-          worker.create,
-          keepEnabled ? true : undefined
+          measurer.create
         );
         return () =>
           h(
@@ -94,29 +79,26 @@ function mountMeasurement(keepEnabled = false) {
       },
     })
   );
-  return { request, worker, wrapper };
+  return { request, measurer, wrapper };
 }
 
 describe('occupied-depth result ownership', () => {
   it('keeps obsolete overlays unavailable until the final selected slab completes', async () => {
-    const { request, worker, wrapper } = mountMeasurement();
+    const { request, measurer, wrapper } = mountMeasurement();
     const input = request.value!;
     request.value = { ...input, first: 1, last: 4 };
     request.value = { ...input, first: 2, last: 3 };
     await nextTick();
     expect(wrapper.text()).toBe('Measuring occupied depth');
-    await worker.finish();
-    await nextTick();
+    await measurer.finish();
     expect(wrapper.text()).toBe('Measuring occupied depth');
-    await worker.finish();
-    await nextTick();
+    await measurer.finish();
     expect(wrapper.text()).toBe('0 occupied cells');
-    expect(Array.from(input.mask.values)).toEqual([1, 1, 0, 0, 1, 1]);
   });
 
   it('keeps a compatible overlay visible and marked stale until the newest edit completes', async () => {
-    const { request, worker, wrapper } = mountMeasurement();
-    await worker.finish();
+    const { request, measurer, wrapper } = mountMeasurement();
+    await measurer.finish();
     const input = request.value!;
     input.mask.values[0] = 0;
     request.value = { ...input, mask: { ...input.mask } };
@@ -124,130 +106,49 @@ describe('occupied-depth result ownership', () => {
     expect(wrapper.text()).toBe('4 occupied cells (updating)');
     input.mask.values[1] = 0;
     request.value = { ...input, mask: { ...input.mask } };
-    await worker.finish();
+    await measurer.finish();
     expect(wrapper.text()).toBe('4 occupied cells (updating)');
-    await worker.finish();
+    await measurer.finish();
     expect(wrapper.text()).toBe('2 occupied cells');
   });
 
   it.each(['source', 'segment', 'grid'] as const)(
     'removes the previous overlay while a different %s is measured',
     async (field) => {
-      const { request, worker, wrapper } = mountMeasurement();
-      await worker.finish();
+      const { request, measurer, wrapper } = mountMeasurement();
+      await measurer.finish();
       request.value = {
         ...request.value!,
         [field]: field === 'source' ? {} : 'replacement',
       };
       await nextTick();
       expect(wrapper.text()).toBe('Measuring occupied depth');
-      await worker.finish();
+      await measurer.finish();
       expect(wrapper.text()).toBe('4 occupied cells');
     }
   );
 
-  it('keeps the worker snapshot through a temporary invalid crop while highlighting stays enabled', async () => {
-    const { request, worker, wrapper } = mountMeasurement(true);
+  it('releases the worker when the request is withdrawn and ignores its late reply', async () => {
+    const { request, measurer, wrapper } = mountMeasurement();
     const input = request.value!;
-    await worker.finish();
-    request.value = null;
-    await nextTick();
-    expect(wrapper.text()).toBe('Unavailable');
-    input.mask.values[0] = 0;
-    request.value = input;
-    await worker.finish();
-    expect(wrapper.text()).toBe('4 occupied cells');
-    request.value = { ...input, mask: { ...input.mask } };
-    await worker.finish();
-    expect(wrapper.text()).toBe('3 occupied cells');
-  });
-
-  it('does not restore removed-source measurements when an old reply arrives', async () => {
-    const { request, worker, wrapper } = mountMeasurement();
     request.value = null;
-    await worker.finish();
-    await nextTick();
+    await measurer.finish();
     expect(wrapper.text()).toBe('Unavailable');
-  });
-
-  it('keeps the prepared snapshot across slabs and refreshes announced in-place edits', async () => {
-    const { request, worker, wrapper } = mountMeasurement();
-    const input = request.value!;
-    await worker.finish();
-    await nextTick();
-    expect(wrapper.text()).toBe('4 occupied cells');
-
-    input.mask.values[0] = 0;
-    request.value = { ...input, last: 4 };
-    await worker.finish();
-    await nextTick();
-    expect(wrapper.text()).toBe('3 occupied cells');
-
-    request.value = { ...request.value!, mask: { ...input.mask } };
-    await worker.finish();
-    await nextTick();
-    expect(wrapper.text()).toBe('2 occupied cells');
-    expect(Array.from(input.mask.values)).toEqual([0, 1, 0, 0, 1, 1]);
-  });
-
-  it('moves a replacement crop to its source column and rechecks source geometry', async () => {
-    const { request, worker, wrapper } = mountMeasurement();
-    const input = request.value!;
-    await worker.finish();
-    request.value = {
-      ...input,
-      dimensions: [2, 6, 1],
-      mask: { ...input.mask, extent: [1, 1, 0, 5, 0, 0] },
-    };
-    await worker.finish();
-    await nextTick();
-    expect(wrapper.text()).toBe('0,4 occupied cells');
+    expect(measurer.state.releases).toBe(1);
 
-    request.value = { ...request.value, dimensions: [1, 6, 1] };
-    await worker.finish();
-    await nextTick();
-    expect(wrapper.text()).toContain('align with the source');
-  });
-
-  it('ignores an old reply after highlighting restarts with the same mask', async () => {
-    const { request, worker, wrapper } = mountMeasurement();
-    const input = request.value!;
-    request.value = null;
     request.value = { ...input, first: 1, last: 1 };
-    await worker.finish();
     await nextTick();
     expect(wrapper.text()).toBe('Measuring occupied depth');
-    await worker.finish();
-    await nextTick();
+    await measurer.finish();
     expect(wrapper.text()).toBe('1 occupied cells');
   });
 
-  it('does not reuse the prior mask after an invalid replacement', async () => {
-    const { request, worker, wrapper } = mountMeasurement();
-    const input = request.value!;
-    await worker.finish();
-    const mask = { ...input.mask, values: new Uint8Array([2, 1, 0, 0, 1, 1]) };
-    request.value = { ...input, mask };
-    await worker.finish();
-    await nextTick();
-    expect(wrapper.text()).toContain('binary mask');
-
-    request.value = { ...input, mask, first: 1, last: 1 };
-    await worker.finish();
-    await nextTick();
-    expect(wrapper.text()).toBe('Occupied depth requires a binary mask.');
-  });
-
-  it('ends pending status on a real failure and can measure the next input', async () => {
-    const { request, worker, wrapper } = mountMeasurement();
-    const input = request.value!;
-    worker.fail();
-    await nextTick();
+  it('shows a failed measurement and measures the next request', async () => {
+    const { request, measurer, wrapper } = mountMeasurement();
+    await measurer.finish(new Error('Measurement device unavailable.'));
     expect(wrapper.text()).toBe('Measurement device unavailable.');
-    await worker.finish();
-    request.value = { ...input, first: 1, last: 1 };
-    await worker.finish();
-    await nextTick();
+    request.value = { ...request.value!, first: 1, last: 1 };
+    await measurer.finish();
     expect(wrapper.text()).toBe('1 occupied cells');
   });
 });
diff --git a/src/segmentation/measurements/occupiedDepth.ts b/src/segmentation/measurements/occupiedDepth.ts
index c09c34566..5320af313 100644
--- a/src/segmentation/measurements/occupiedDepth.ts
+++ b/src/segmentation/measurements/occupiedDepth.ts
@@ -37,7 +37,6 @@ function voxelCount(dimensions: readonly number[]) {
 function validateMaskStorage(mask: OccupiedDepthInput['mask']) {
   if (mask.values.length !== voxelCount(mask.dimensions))
     throw new Error('Mask scalar count does not match its dimensions.');
-  validateBinaryValues(mask.values);
 }
 
 function validateMaskGeometry(input: OccupiedDepthInput) {
@@ -60,13 +59,6 @@ function validateMaskGeometry(input: OccupiedDepthInput) {
   }
 }
 
-function validateBinaryValues(values: Uint8Array) {
-  for (let index = 0; index < values.length; index++) {
-    if (values[index] > 1)
-      throw new Error('Occupied depth requires a binary mask.');
-  }
-}
-
 function validateInput(input: OccupiedDepthInput) {
   voxelCount(input.dimensions);
   if (![0, 1, 2].includes(input.axis))
diff --git a/src/segmentation/measurements/occupiedDepth.worker.ts b/src/segmentation/measurements/occupiedDepth.worker.ts
index b3bce6c10..700a3550d 100644
--- a/src/segmentation/measurements/occupiedDepth.worker.ts
+++ b/src/segmentation/measurements/occupiedDepth.worker.ts
@@ -1,9 +1,28 @@
-import { createOccupiedDepthHandler } from '@/src/segmentation/measurements/occupiedDepthHandler';
-import type { MeasurementRequest } from '@/src/segmentation/measurements/occupiedDepthHandler';
-
-const handle = createOccupiedDepthHandler();
-self.onmessage = ({ data }: MessageEvent<MeasurementRequest>) => {
-  const response = handle(data);
-  const transfer = response.result ? [response.result.counts.buffer] : [];
-  self.postMessage(response, transfer);
+import * as Comlink from 'comlink';
+import {
+  createOccupiedDepthMeasurer,
+  type OccupiedDepthInput,
+} from '@/src/segmentation/measurements/occupiedDepth';
+
+let measure: ReturnType<typeof createOccupiedDepthMeasurer> | undefined;
+
+const api = {
+  /** Without a mask, reuses the one this worker was last sent. */
+  measure(
+    input: Omit<OccupiedDepthInput, 'mask'>,
+    mask?: OccupiedDepthInput['mask']
+  ) {
+    if (mask) {
+      // A rejected replacement must not leave the previous mask measurable.
+      measure = undefined;
+      measure = createOccupiedDepthMeasurer(mask);
+    }
+    if (!measure) throw new Error('Occupied depth has no measurable mask.');
+    const result = measure(input);
+    return Comlink.transfer(result, [result.counts.buffer as ArrayBuffer]);
+  },
 };
+
+export type OccupiedDepthWorkerApi = typeof api;
+
+Comlink.expose(api);
diff --git a/src/segmentation/measurements/occupiedDepthHandler.ts b/src/segmentation/measurements/occupiedDepthHandler.ts
deleted file mode 100644
index 3b19bb886..000000000
--- a/src/segmentation/measurements/occupiedDepthHandler.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { createOccupiedDepthMeasurer } from '@/src/segmentation/measurements/occupiedDepth';
-import type {
-  OccupiedDepthInput,
-  OccupiedDepthResult,
-} from '@/src/segmentation/measurements/occupiedDepth';
-
-export type MeasurementRequest = {
-  id: number;
-  input: Omit<OccupiedDepthInput, 'mask'>;
-  /** Omitted when the worker already holds this mask revision. */
-  mask?: OccupiedDepthInput['mask'];
-};
-
-export type MeasurementResponse = {
-  id: number;
-  result?: OccupiedDepthResult;
-  error?: string;
-};
-
-/** Owns the prepared mask snapshot for one worker. */
-export function createOccupiedDepthHandler() {
-  let measure: ReturnType<typeof createOccupiedDepthMeasurer> | undefined;
-  return (data: MeasurementRequest): MeasurementResponse => {
-    try {
-      if (data.mask) {
-        measure = undefined;
-        measure = createOccupiedDepthMeasurer(data.mask);
-      }
-      if (!measure) throw new Error('Occupied depth requires a binary mask.');
-      return { id: data.id, result: measure(data.input) };
-    } catch (cause) {
-      return {
-        id: data.id,
-        error:
-          cause instanceof Error
-            ? cause.message
-            : 'Occupied depth measurement failed.',
-      };
-    }
-  };
-}
diff --git a/src/segmentation/measurements/useOccupiedDepth.ts b/src/segmentation/measurements/useOccupiedDepth.ts
index 315f215c9..b09c9bcdc 100644
--- a/src/segmentation/measurements/useOccupiedDepth.ts
+++ b/src/segmentation/measurements/useOccupiedDepth.ts
@@ -1,3 +1,4 @@
+import * as Comlink from 'comlink';
 import {
   computed,
   onScopeDispose,
@@ -8,11 +9,9 @@ import {
   type MaybeRef,
 } from 'vue';
 import { getErrorDetail } from '@/src/utils';
+import { createWorkerHost } from '@/src/segmentation/editing/processWorker';
 import type { OccupiedDepthInput, OccupiedDepthResult } from './occupiedDepth';
-import type {
-  MeasurementRequest,
-  MeasurementResponse,
-} from './occupiedDepthHandler';
+import type { OccupiedDepthWorkerApi } from './occupiedDepth.worker';
 
 export type OccupiedDepthRequest = OccupiedDepthInput & {
   source: object;
@@ -32,134 +31,101 @@ function compatible(left: OccupiedDepthRequest, right: OccupiedDepthRequest) {
   );
 }
 
-const createMeasurementWorker = () =>
+const spawnMeasurementWorker = () =>
   new Worker(new URL('./occupiedDepth.worker.ts', import.meta.url), {
     type: 'module',
   });
 
-/** One running measurement and the latest requested slab per mounted view. */
+/** A view's worker, sent each mask revision once and reusing it across slabs. */
+export function createWorkerMeasurer(spawn = spawnMeasurementWorker) {
+  const host = createWorkerHost<OccupiedDepthWorkerApi>(spawn);
+  let sent: { api: unknown; mask: OccupiedDepthInput['mask'] } | undefined;
+  return {
+    measure: ({ mask, dimensions, axis, first, last }: OccupiedDepthInput) =>
+      host.call((api) => {
+        // A respawned worker holds no mask.
+        const fresh = sent?.api !== api || sent?.mask !== mask;
+        sent = { api, mask };
+        const values = fresh ? new Uint8Array(mask.values) : undefined;
+        return api.measure(
+          { dimensions: [...dimensions], axis, first, last },
+          values &&
+            Comlink.transfer(
+              {
+                values,
+                dimensions: [...mask.dimensions],
+                extent: [...mask.extent],
+              },
+              [values.buffer]
+            )
+        );
+      }),
+    release() {
+      sent = undefined;
+      host.terminate();
+    },
+  };
+}
+
+export type OccupiedDepthMeasurer = ReturnType<typeof createWorkerMeasurer>;
+
+/** Measures the latest request, keeping a compatible result while it updates. */
 export function useOccupiedDepth(
   request: MaybeRef<OccupiedDepthRequest | null>,
-  createWorker = createMeasurementWorker,
-  enabled: MaybeRef<boolean> = computed(() => !!unref(request))
+  createMeasurer: () => OccupiedDepthMeasurer = createWorkerMeasurer
 ) {
-  const result = shallowRef<OccupiedDepthResult | null>(null);
+  const measurer = createMeasurer();
+  const latest = shallowRef<{
+    input: OccupiedDepthRequest;
+    result: OccupiedDepthResult;
+  } | null>(null);
   const computing = ref(false);
   const error = ref<string | null>(null);
-  let worker: Worker | null = null;
-  let active: OccupiedDepthRequest | null = null;
   let pending: OccupiedDepthRequest | null = null;
-  let sequence = 0;
-  const acceptedRequest = shallowRef<OccupiedDepthRequest | null>(null);
-  let mask: OccupiedDepthInput['mask'] | undefined;
-
-  function release() {
-    if (worker) {
-      worker.onmessage = null;
-      worker.onerror = null;
-      worker.onmessageerror = null;
-    }
-    worker?.terminate();
-    worker = null;
-    active = null;
-    acceptedRequest.value = null;
-    mask = undefined;
-    sequence++;
-  }
-
-  function fail(message: string) {
-    release();
-    pending = null;
-    result.value = null;
-    error.value = message;
-    computing.value = false;
-  }
+  let running = false;
 
-  function getWorker() {
-    if (!worker) {
-      worker = createWorker();
-      worker.onmessage = receive;
-      worker.onerror = (event) =>
-        fail(event.message || 'Occupied depth measurement failed.');
-      worker.onmessageerror = () =>
-        fail('Occupied depth measurement returned unreadable data.');
-    }
-    return worker;
-  }
-
-  function startPending() {
-    if (active || !pending) return;
-    const input = pending;
-    pending = null;
-    active = input;
-    try {
-      const target = getWorker();
-      const message: MeasurementRequest = {
-        id: ++sequence,
-        input: {
-          dimensions: [...input.dimensions],
-          axis: input.axis,
-          first: input.first,
-          last: input.last,
-        },
-      };
-      const transfer: Transferable[] = [];
-      if (mask !== input.mask) {
-        mask = input.mask;
-        const values = new Uint8Array(mask.values);
-        message.mask = {
-          values,
-          dimensions: [...mask.dimensions],
-          extent: [...mask.extent],
-        };
-        transfer.push(values.buffer);
+  // One measurement at a time; requests superseded meanwhile are skipped.
+  async function drain() {
+    if (running) return;
+    running = true;
+    while (pending) {
+      const input = pending;
+      pending = null;
+      let result: OccupiedDepthResult | null = null;
+      let failure: string | null = null;
+      try {
+        result = await measurer.measure(input);
+      } catch (cause) {
+        failure = getErrorDetail(cause, 'Occupied depth measurement failed.');
+      }
+      if (input === unref(request)) {
+        latest.value = result && { input, result };
+        error.value = failure;
+        computing.value = false;
       }
-      target.postMessage(message, transfer);
-    } catch (cause) {
-      fail(getErrorDetail(cause, 'Occupied depth measurement failed.'));
-    }
-  }
-
-  function receive(event: MessageEvent<MeasurementResponse>) {
-    if (event.data.id !== sequence) return;
-    if (active === unref(request)) {
-      result.value = event.data.result ?? null;
-      acceptedRequest.value = event.data.result ? active : null;
-      error.value = event.data.error ?? null;
-      computing.value = false;
     }
-    active = null;
-    startPending();
+    running = false;
   }
 
   watch(
-    [() => unref(request), () => unref(enabled)],
-    ([input, isEnabled]) => {
-      if (
-        !isEnabled ||
-        !input ||
-        !acceptedRequest.value ||
-        !compatible(acceptedRequest.value, input)
-      ) {
-        result.value = null;
-        acceptedRequest.value = null;
-      }
+    () => unref(request),
+    (input) => {
+      if (!input || (latest.value && !compatible(latest.value.input, input)))
+        latest.value = null;
       error.value = null;
-      computing.value = isEnabled && !!input;
-      pending = isEnabled ? input : null;
-      if (!isEnabled) release();
-      else startPending();
+      computing.value = !!input;
+      pending = input;
+      // An idle view keeps no worker or mask copy.
+      if (input) void drain();
+      else measurer.release();
     },
     { immediate: true, flush: 'pre' }
   );
-  onScopeDispose(release);
+  onScopeDispose(measurer.release);
   const accepted = computed(() => {
     const input = unref(request);
-    return unref(enabled) &&
-      input &&
-      acceptedRequest.value &&
-      compatible(acceptedRequest.value, input)
-      ? result.value
+    return input && latest.value && compatible(latest.value.input, input)
+      ? latest.value.result
       : null;
   });
   return { accepted, computing, error };