diff --git a/docs/loading_data.md b/docs/loading_data.md
index dce2ce0c8..15e97f5d4 100644
--- a/docs/loading_data.md
+++ b/docs/loading_data.md
@@ -6,10 +6,6 @@ The most straightfoward way to load files into VolView is to drag-and-drop them
 
 VolView can load multiple DICOM files, folders containing multiple DICOM files, or zipped files containing multiple DICOM files. It also supports loading Nifti, NRRD, MHA, and 20+ other file formats thanks to the extensive I/O capabilities of ITK and itk.wasm, but care must be taken when loading non-DICOM data as the orientation of the data in those files cannot be assured.
 
-## Sample Data
-
-VolView includes links to a variety of sample data. Clicking on those thumbnails in the Data tab will download that data from Kitware data.kitware.com website into your local machine.
-
 ## DICOMWeb
 
 VolView lists and downloads DICOM files served by a DICOMWeb service. The host address of the DICOMWeb service is configurable by:
@@ -64,7 +60,7 @@ To layer images:
 
 1. Load the base image.
 1. On the Data tab, click the Add Layer button on the upper layer dataset.
-1. Under the Rendering tab, an opacity slider changes the transparency of the upper layer.
+1. Under the Rendering tab, open Layers to adjust the overlay color map, display range, opacity, and transparent background.
 
 ![Add Layer](./assets/add-layer.jpg)
 
diff --git a/docs/quick_start_guide.md b/docs/quick_start_guide.md
index c4baa90de..cf2f6ed2d 100644
--- a/docs/quick_start_guide.md
+++ b/docs/quick_start_guide.md
@@ -19,7 +19,7 @@ VolView accepts DICOM data in a vareity of formats:
 - Selections of files: a selection of multiple DICOM files
 - Zipped collections: containing a folder or selection of DICOM files
 
-From the Data tab (default tab when VolView is started) you can drag-and-drop DICOM data in any of the above formats or you can click to bring up a file browser and select your DICOM data. You can also select one of the sample DICOM collections listed, and it will be downloaded onto your machine from [https://data.kitware.com](https://data.kitware.com/#collection/586fef9f8d777f05f44a5c86/folder/634713cf11dab81428208e1e).
+From the Data tab (default tab when VolView is started) you can drag-and-drop DICOM data in any of the above formats or you can click to bring up a file browser and select your DICOM data. You can also select a sample dataset in the Data tab to download and open it.
 
 [**_Watch the video!_**](https://youtu.be/4PvZd7yTzf0)
 
diff --git a/docs/rendering.md b/docs/rendering.md
index 11edadb5a..c82921e04 100644
--- a/docs/rendering.md
+++ b/docs/rendering.md
@@ -1,17 +1,26 @@
-# Cinematic Volume Rendering
+# Rendering
 
-VolView reads the DICOM tags of your data to determine appropriate preset parameter values for cinematic volume rendering for your data, but often you will want to tweak those presets to emphasize specific details. Rendering controls apply to the currently selected/active view. We recommend the following sequence of tweaks to improve your visualizations.
+## Image layers in 2D views
+
+The color bar always spans the image's full intensity range, even when the
+selected display range extends beyond it.
+
+**Transparent background** makes overlay values at or below Min transparent,
+then fades linearly to the selected opacity over the first 10% of the display
+range above Min.
 
-1. Cinematic volume rendering involves two "transfer functions": one maps the recorded intensity values (e.g., CT hounsfield units) to opacity and the other maps recorded intensity values to color. Both can be adjusted using the controls at the top of the Rendering tab. The graph at the top shows a histogram of the recorded intensity values in light gray and the current opacity transfer function as an overlaid curve in black. In that graph, beneath the black curve, is a depiction of the color transfer function. ![Cinematic](./assets/16-volview-rendering.jpg)
+## Cinematic rendering controls
 
+VolView reads the DICOM tags of your data to determine appropriate preset parameter values for cinematic volume rendering for your data, but often you will want to tweak those presets to emphasize specific details. Rendering controls apply to the currently selected/active view. We recommend the following sequence of tweaks to improve your visualizations.
+
+1. Cinematic volume rendering involves two "transfer functions": one maps the recorded intensity values (e.g., CT hounsfield units) to opacity and the other maps recorded intensity values to color. Both can be adjusted by expanding **3D Rendering** in the Rendering tab. The graph at the top shows a histogram of the recorded intensity values in light gray and the current opacity transfer function as an overlaid curve in black. In that graph, beneath the black curve, is a depiction of the color transfer function. ![Cinematic](./assets/16-volview-rendering.jpg)
    1. Begin by adjusting the opacity transfer function by a press-and-drag right/left on the top graph. ![Opacity](./assets/17-volview-opacity-notes.jpg)
    2. Then adjust the color transfer function by moving the blue dots on the colorbar beneath the graph. ![Color](./assets/17-volview-colormap-notes.jpg)
 
-2. You may decide that the colormaps and/or transfer function aren't suitable for your data. Click on the "Presets" bar to expand and show the available presets that offer alternative opacity and color transfer functions. ![Presets](./assets/18-volview-presets.jpg)
+2. You may decide that the colormaps and/or transfer function aren't suitable for your data. Expand **Color Presets** within **3D Rendering** to show the available presets that offer alternative opacity and color transfer functions. ![Presets](./assets/18-volview-presets.jpg)
    [**_Watch the video!_**](https://youtu.be/eyrGd-meg6I)
 
 3. Next, the lighting can be controlled.
-
    1. Ambient lighting is the general brightness of the scene.
    2. Diffuse lighting controls how the light reflects off the data. It is influenced by the position of the light relative to the orientation of the data's local surface.
    3. Light-follows-camera can be enabled / disabled to create shadows that highlights details within the data. When enabled, the light will be positioned in-line with the camera. When disabled, the last position of the light stays fixed relative to the data, even if the camera is moved. With light-follows-camera enabled, here is a view when the light is following the camera: ![Default Lighting](./assets/20-volview-lightfollowcamera1.jpg). By moving the camera (and thereby the light) to the front of the data and then disabling light-follows-camera, the view should look light this: ![Light Setup](./assets/20-volview-lightfollowcamera2.jpg). Then moving back to the side view will show shadows that emphasize depth and details: ![Shadows](./assets/20-volview-lightfollowcamera3.jpg).
diff --git a/docs/welcome_screen.md b/docs/welcome_screen.md
index 92df151c9..57f12d472 100644
--- a/docs/welcome_screen.md
+++ b/docs/welcome_screen.md
@@ -8,7 +8,9 @@
 
 Information on the Patient data and non-DICOM data that have been loaded. The currently display image data is highlighted in blue.
 
-**Sample Data** presents a variety of DICOM data that can be used to quickly explore the capabilities of VolView. When you select a sample dataset, that data is downloaded from [http://data.kitware.com/](https://data.kitware.com/#collection/586fef9f8d777f05f44a5c86/folder/634713cf11dab81428208e1e).
+**Sample Data** presents datasets for exploring VolView. Select a thumbnail to
+download and open its images. The PET/CT Chest sample includes a configured PET
+overlay for trying the [layer display controls](./rendering.md).
 
 ### Annotations
 
@@ -16,7 +18,7 @@ Lists the ruler and other measures that have been made on the currently loaded d
 
 ### Rendering
 
-Controls for the 3D cinematic volume rendering.
+Controls for 3D cinematic rendering and 2D image overlays. See [Rendering](./rendering.md) for details.
 
 ## Load / Save State
 
diff --git a/package-lock.json b/package-lock.json
index b27eefb07..8e2a336b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@types/express": "^5.0.5",
         "@types/file-saver": "^2.0.7",
         "@types/mocha": "^10.0.10",
+        "@types/pngjs": "^6.0.5",
         "@velipso/polybool": "^2.0.11",
         "@vitejs/plugin-vue": "^6.0.2",
         "@vue/test-utils": "^2.4.6",
@@ -63,6 +64,7 @@
         "nanoid": "^5.1.6",
         "patch-package": "^8.0.1",
         "pinia": "^3.0.4",
+        "pngjs": "^7.0.0",
         "prettier": "3.7.2",
         "rollup-plugin-visualizer": "^6.0.5",
         "sass": "^1.94.2",
@@ -5332,6 +5334,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/pngjs": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pngjs/-/pngjs-6.0.5.tgz",
+      "integrity": "sha512-0k5eKfrA83JOZPppLtS2C7OUtyNAl2wKNxfyYl9Q5g9lPkgBl/9hNyAu6HuEH2J4XmIv2znEpkDd0SaZVxW6iQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/qs": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.0.tgz",
diff --git a/package.json b/package.json
index 9d9d40668..7d31afe3f 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@types/express": "^5.0.5",
     "@types/file-saver": "^2.0.7",
     "@types/mocha": "^10.0.10",
+    "@types/pngjs": "^6.0.5",
     "@velipso/polybool": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vue/test-utils": "^2.4.6",
@@ -89,6 +90,7 @@
     "nanoid": "^5.1.6",
     "patch-package": "^8.0.1",
     "pinia": "^3.0.4",
+    "pngjs": "^7.0.0",
     "prettier": "3.7.2",
     "rollup-plugin-visualizer": "^6.0.5",
     "sass": "^1.94.2",
diff --git a/src/assets/samples/PET-CT-Chest.png b/src/assets/samples/PET-CT-Chest.png
new file mode 100644
index 000000000..2f3f54f71
Binary files /dev/null and b/src/assets/samples/PET-CT-Chest.png differ
diff --git a/src/components/AboutBox.vue b/src/components/AboutBox.vue
index 2ff62f19b..bcd131457 100644
--- a/src/components/AboutBox.vue
+++ b/src/components/AboutBox.vue
@@ -166,36 +166,79 @@
       NIBIB R01EB014955, NCI R01CA220681, and NINDS R42NS086295
       <br />
       <br />
-      Sample data provided by the following sources:
-      <ul>
+      <h2 class="mt-2">Sample Data Sources</h2>
+      <v-divider class="mb-2" />
+      <ul class="sample-data-sources">
         <li>
-          PROSTATEx Challenge Data: Geert Litjens, Oscar Debats, Jelle Barentsz,
-          Nico Karssemeijer, and Henkjan Huisman. "ProstateX Challenge data",
-          The Cancer Imaging Archive (2017). DOI: 10.7937/K9TCIA.2017.MURS5CL
-          (<a
+          <strong>CTA Head and Neck:</strong> Sample distributed through
+          <a
             rel="noopener noreferrer"
             target="_blank"
-            href="https://wiki.cancerimagingarchive.net/pages/viewpage.action?pageId=23691656"
-            >TCIA</a
-          >)
+            href="https://data.kitware.com/#item/6347159711dab81428208e24"
+            >Kitware Data</a
+          >.
         </li>
         <li>
-          MRA Head and Neck: Test case 98890234 from the "Patient Contributed
-          Image Repository" (<a
+          <strong>MRA Head and Neck:</strong> Test case 98890234 from the
+          Patient Contributed Image Repository (<a
             rel="noopener noreferrer"
             target="_blank"
             href="http://www.pcir.org/researchers/98890234_20030505_MR.html"
             >PCIR.org</a
-          >)
+          >).
+        </li>
+        <li>
+          <strong>MRI PROSTATEx:</strong> Geert Litjens, Oscar Debats, Jelle
+          Barentsz, Nico Karssemeijer, and Henkjan Huisman. "ProstateX Challenge
+          data", The Cancer Imaging Archive (2017). (<a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://doi.org/10.7937/K9TCIA.2017.MURS5CL"
+            >DOI: 10.7937/K9TCIA.2017.MURS5CL</a
+          >).
         </li>
         <li>
-          3D ultrasound of a fetus: Sample data from
+          <strong>3D US Fetus:</strong> Sample data from
           <a
             rel="noopener noreferrer"
             target="_blank"
             href="http://tomovision.com"
-            >tomovision.com</a
-          >
+            >Tomovision</a
+          >.
+        </li>
+        <li>
+          <strong>Ultrasound Cine:</strong>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/pydicom/pydicom/blob/v3.0.1/src/pydicom/data/test_files/examples_ybr_color.dcm"
+            >pydicom v3.0.1 example data</a
+          >, derived from color3d_jpeg_baseline.dcm with fewer frames and
+          rescaled pixels. See the
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/pydicom/pydicom/blob/v3.0.1/src/pydicom/data/test_files/README.txt"
+            >source and data notices</a
+          >.
+        </li>
+        <li>
+          <strong>PET/CT Chest:</strong> Li, P., Wang, S., Li, T., Lu, J.,
+          HuangFu, Y., and Wang, D. (2020). "A Large-Scale CT and PET/CT Dataset
+          for Lung Cancer Diagnosis (Lung-PET-CT-Dx)." The Cancer Imaging
+          Archive.
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://doi.org/10.7937/TCIA.2020.NNC2-0461"
+            >DOI: 10.7937/TCIA.2020.NNC2-0461</a
+          >.
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://creativecommons.org/licenses/by/4.0/"
+            >CC BY 4.0</a
+          >. Ten original DICOM instances selected from each series.
         </li>
       </ul>
     </v-card-text>
@@ -208,6 +251,10 @@
   margin: 0 auto;
   text-transform: uppercase;
 }
+
+.sample-data-sources li + li {
+  margin-top: 12px;
+}
 </style>
 
 <script>
diff --git a/src/components/BaseImageProperties.vue b/src/components/BaseImageProperties.vue
new file mode 100644
index 000000000..2fc79bd31
--- /dev/null
+++ b/src/components/BaseImageProperties.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { isCineImage } from '@/src/core/cine/isCineImage';
+import { NO_NAME } from '@/src/constants';
+import { useImageStatsStore } from '@/src/store/image-stats';
+import { useViewStore } from '@/src/store/views';
+import { useWindowingStore } from '@/src/store/view-configs/windowing';
+import '@/src/vtk/ColorMaps';
+import DisplayRangeControl from './DisplayRangeControl.vue';
+import ColorMapSelect from './ColorMapSelect.vue';
+import { resolveBaseColorPreset } from '@/src/vtk/LayerColorPresets';
+import WindowLevelControls from './tools/windowing/WindowLevelControls.vue';
+
+const props = defineProps<{ imageId: string }>();
+const { imageData, metadata } = useImage(computed(() => props.imageId));
+const viewStore = useViewStore();
+const windowingStore = useWindowingStore();
+const statsStore = useImageStatsStore();
+const imageName = computed(() => metadata.value.name ?? NO_NAME);
+const scalars = computed(() => imageData.value?.getPointData().getScalars());
+const matchingViews = computed(() =>
+  viewStore.visibleViews.filter((view) => view.dataID === props.imageId)
+);
+const sliceView = computed(() => {
+  const views = matchingViews.value.filter(
+    ({ type }) =>
+      isCineImage(props.imageId) || type === '2D' || type === 'Oblique'
+  );
+  return views.find(({ id }) => id === viewStore.activeView) ?? views[0];
+});
+const referenceView = computed(
+  () =>
+    sliceView.value ??
+    matchingViews.value.find(({ id }) => id === viewStore.activeView) ??
+    matchingViews.value[0]
+);
+const windowing = computed(() =>
+  referenceView.value
+    ? windowingStore.getConfig(referenceView.value.id, props.imageId)
+    : undefined
+);
+const visibility = computed(() => windowing.value?.visibility ?? true);
+const visibilityUnavailableReason = computed(() => {
+  if (!imageData.value || !scalars.value)
+    return 'The image must finish loading first.';
+  if (!sliceView.value)
+    return 'Open a 2D or oblique view showing this image to change visibility.';
+  return '';
+});
+function toggleVisibility() {
+  if (visibilityUnavailableReason.value || !sliceView.value) return;
+  windowingStore.updateConfig(
+    sliceView.value.id,
+    props.imageId,
+    { visibility: !visibility.value },
+    true
+  );
+}
+const preset = computed(() => resolveBaseColorPreset(windowing.value?.preset));
+function setPreset(value: string) {
+  if (unavailableReason.value || !sliceView.value) return;
+  windowingStore.updateConfig(
+    sliceView.value.id,
+    props.imageId,
+    {
+      preset: resolveBaseColorPreset(value),
+    },
+    true
+  );
+}
+const mappingRange = computed(() => {
+  const width = windowing.value?.width ?? 1;
+  const level = windowing.value?.level ?? 0.5;
+  return [level - width / 2, level + width / 2] as const;
+});
+const imageRange = computed(() => {
+  const stats = statsStore.stats[props.imageId];
+  const range = scalars.value?.getRange() ?? [0, 1];
+  return [stats?.scalarMin ?? range[0], stats?.scalarMax ?? range[1]] as const;
+});
+const histogram = computed(() =>
+  !isCineImage(props.imageId) && scalars.value?.getNumberOfComponents() === 1
+    ? statsStore.stats[props.imageId]?.histogram
+    : undefined
+);
+const unavailableReason = computed(() => {
+  if (!imageData.value || !scalars.value)
+    return 'The image must finish loading first.';
+  if (isCineImage(props.imageId))
+    return 'Cine images already contain display-encoded pixels.';
+  if (scalars.value.getNumberOfComponents() !== 1)
+    return 'Window/level editing requires a single-component image.';
+  if (!sliceView.value)
+    return 'Open a 2D or oblique view showing this image to adjust window/level.';
+  return '';
+});
+const rangeControl = ref<InstanceType<typeof DisplayRangeControl>>();
+async function resetRangeDrafts() {
+  await nextTick();
+  rangeControl.value?.resetDrafts();
+}
+const contrastOpen = ref(false);
+watch(unavailableReason, (reason) => {
+  if (reason) contrastOpen.value = false;
+});
+function setRange([min, max]: [number, number]) {
+  const view = sliceView.value;
+  const width = max - min;
+  const level = min + width / 2;
+  if (
+    unavailableReason.value ||
+    !view ||
+    ![min, max, width, level].every(Number.isFinite) ||
+    width <= 0 ||
+    ![level - width / 2, level + width / 2].every(Number.isFinite) ||
+    level - width / 2 >= level + width / 2
+  )
+    return;
+  windowingStore.updateConfig(view.id, props.imageId, { width, level }, true);
+}
+</script>
+
+<template>
+  <section :aria-label="imageName" data-testid="base-image-properties">
+    <div class="d-flex align-center ga-3 mb-3">
+      <v-tooltip :text="imageName" location="top">
+        <template #activator="{ props: tooltipProps }">
+          <h4 class="text-ellipsis" v-bind="tooltipProps">{{ imageName }}</h4>
+        </template>
+      </v-tooltip>
+      <span class="text-caption text-medium-emphasis text-no-wrap"
+        >Base image</span
+      >
+    </div>
+    <div class="ms-4">
+      <div class="d-flex align-center ga-2">
+        <v-tooltip
+          :text="visibilityUnavailableReason"
+          :disabled="!visibilityUnavailableReason"
+        >
+          <template #activator="{ props: tooltipProps }">
+            <span
+              v-bind="tooltipProps"
+              :tabindex="visibilityUnavailableReason ? 0 : undefined"
+            >
+              <v-btn
+                size="small"
+                height="40"
+                width="88"
+                :prepend-icon="visibility ? 'mdi-eye' : 'mdi-eye-off'"
+                :aria-label="`${visibility ? 'Hide' : 'Show'} ${imageName}`"
+                :disabled="!!visibilityUnavailableReason"
+                data-testid="base-image-visibility"
+                @click="toggleVisibility"
+              >
+                {{ visibility ? 'Hide' : 'Show' }}
+              </v-btn>
+            </span>
+          </template>
+        </v-tooltip>
+        <v-tooltip :text="unavailableReason" :disabled="!unavailableReason">
+          <template #activator="{ props: tooltipProps }">
+            <div
+              class="base-colormap"
+              v-bind="tooltipProps"
+              :tabindex="unavailableReason ? 0 : undefined"
+            >
+              <ColorMapSelect
+                :model-value="preset"
+                :disabled="!!unavailableReason"
+                test-id-prefix="base-image"
+                @update:model-value="setPreset"
+              />
+            </div>
+          </template>
+        </v-tooltip>
+      </div>
+      <v-tooltip :text="unavailableReason" :disabled="!unavailableReason">
+        <template #activator="{ props: tooltipProps }">
+          <div
+            v-bind="tooltipProps"
+            :tabindex="unavailableReason ? 0 : undefined"
+          >
+            <DisplayRangeControl
+              ref="rangeControl"
+              class="mt-1"
+              :key="imageId"
+              :model-value="mappingRange"
+              :data-range="imageRange"
+              :histogram="histogram"
+              :preset="preset"
+              :disabled="!!unavailableReason"
+              window-level
+              test-id-prefix="base-image-range"
+              @update:model-value="setRange"
+            >
+              <template #actions>
+                <v-menu
+                  v-model="contrastOpen"
+                  :close-on-content-click="false"
+                  :disabled="!!unavailableReason"
+                  location="bottom"
+                >
+                  <template #activator="{ props: menuProps }">
+                    <v-btn
+                      v-bind="menuProps"
+                      size="small"
+                      height="40"
+                      prepend-icon="mdi-circle-half-full"
+                      append-icon="mdi-menu-down"
+                      :disabled="!!unavailableReason"
+                      data-testid="base-image-contrast"
+                    >
+                      Contrast
+                    </v-btn>
+                  </template>
+                  <WindowLevelControls
+                    v-if="sliceView"
+                    :view-id="sliceView.id"
+                    :image-id="imageId"
+                    @change="resetRangeDrafts"
+                  />
+                </v-menu>
+              </template>
+            </DisplayRangeControl>
+          </div>
+        </template>
+      </v-tooltip>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.base-colormap {
+  flex: 1;
+  min-width: 0;
+}
+</style>
diff --git a/src/components/ColorMapHistogram.vue b/src/components/ColorMapHistogram.vue
new file mode 100644
index 000000000..f6922ccaf
--- /dev/null
+++ b/src/components/ColorMapHistogram.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ImageHistogram } from '@/src/store/image-stats';
+
+const PREVIEW_BIN_COUNT = 128;
+
+const props = defineProps<{
+  histogram?: ImageHistogram;
+  dataRange: readonly [number, number];
+}>();
+const path = computed(() => {
+  const histogram = props.histogram;
+  const [min, max] = props.dataRange;
+  const span = max - min;
+  if (
+    !histogram ||
+    ![min, max, span, histogram.origin, histogram.binWidth].every(
+      Number.isFinite
+    ) ||
+    span <= 0 ||
+    histogram.binWidth <= 0 ||
+    !histogram.counts.every((count) => Number.isFinite(count) && count >= 0)
+  )
+    return '';
+  const firstBin = Math.max(
+    0,
+    Math.floor((min - histogram.origin) / histogram.binWidth)
+  );
+  const lastBin = Math.min(
+    histogram.counts.length,
+    Math.floor((max - histogram.origin) / histogram.binWidth) + 1
+  );
+  const visibleCounts = histogram.counts.slice(
+    firstBin,
+    Math.max(firstBin, lastBin)
+  );
+  const groupSize = Math.max(
+    1,
+    Math.ceil(visibleCounts.length / PREVIEW_BIN_COUNT)
+  );
+  const counts = Array.from(
+    { length: Math.ceil(visibleCounts.length / groupSize) },
+    (_, index) =>
+      visibleCounts
+        .slice(index * groupSize, (index + 1) * groupSize)
+        .reduce((sum, count) => sum + count, 0)
+  );
+  const binWidth = histogram.binWidth * groupSize;
+  const peak = Math.max(0, ...counts);
+  if (!peak) return '';
+  const position = (value: number) =>
+    Math.max(0, Math.min(1, (value - min) / span));
+  const steps = counts.flatMap((count, index) => {
+    const start =
+      histogram.origin + firstBin * histogram.binWidth + index * binWidth;
+    const end = start + binWidth;
+    if (start > max || end < min) return [];
+    const height = 15.5 - (count / peak) * 15;
+    return [`H${position(start)} V${height} H${position(end)}`];
+  });
+  return steps.length ? `M0 15.5 ${steps.join(' ')} V15.5 H0 Z` : '';
+});
+</script>
+
+<template>
+  <svg
+    v-if="path"
+    class="color-map-histogram"
+    viewBox="0 0 1 16"
+    preserveAspectRatio="none"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path :d="path" vector-effect="non-scaling-stroke" />
+  </svg>
+</template>
+
+<style scoped>
+.color-map-histogram {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+path {
+  fill: rgb(var(--v-theme-on-surface));
+  fill-opacity: 0.15;
+  stroke: rgb(var(--v-theme-on-surface));
+  stroke-opacity: 0.35;
+  stroke-width: 0.75;
+}
+</style>
diff --git a/src/components/ColorMapRangeControl.vue b/src/components/ColorMapRangeControl.vue
new file mode 100644
index 000000000..39c6dd83c
--- /dev/null
+++ b/src/components/ColorMapRangeControl.vue
@@ -0,0 +1,495 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue';
+import { adjacentNumber } from '@/src/utils/adjacentNumber';
+import { useDevicePixelRatio, useElementSize } from '@vueuse/core';
+import ColorMapSwatch from './ColorMapSwatch.vue';
+import ColorMapHistogram from './ColorMapHistogram.vue';
+import type { ImageHistogram } from '@/src/store/image-stats';
+
+type Range = readonly [number, number];
+type Handle = 'min' | 'max' | 'center';
+type Drag = {
+  handle: Handle;
+  pointerId: number;
+  startX: number;
+  width: number;
+  dataRange: Range;
+  moved: boolean;
+  range: Range;
+  target: HTMLButtonElement;
+};
+
+const props = defineProps<{
+  modelValue: Range;
+  dataRange: Range;
+  histogram?: ImageHistogram;
+  preset: string;
+  transparentBackground?: boolean;
+  disabled?: boolean;
+  windowLevel?: boolean;
+  describedby?: string;
+  testIdPrefix?: string;
+}>();
+const emit = defineEmits<{
+  'update:modelValue': [range: [number, number]];
+}>();
+const testIdPrefix = computed(() => props.testIdPrefix ?? 'layer-range');
+const track = ref<HTMLElement>();
+const { width: trackWidth } = useElementSize(track);
+const { pixelRatio } = useDevicePixelRatio();
+// Whole device pixels keep both marks equally weighted at fractional display scales.
+const centerIcon = computed(() => {
+  const ratio = pixelRatio.value;
+  const bar = Math.max(1, Math.round(2 * ratio));
+  const gap = Math.max(1, Math.round(2 * ratio));
+  const height = Math.max(1, Math.round(10 * ratio));
+  const width = 2 * bar + gap;
+  return {
+    bar,
+    gap,
+    width,
+    height,
+    cssWidth: width / ratio,
+    cssHeight: height / ratio,
+  };
+});
+let drag: Drag | undefined;
+const handles = ['min', 'max', 'center'] as const;
+const clamp = (value: number, low: number, high: number) =>
+  Math.max(low, Math.min(high, value));
+const span = computed(() => props.dataRange[1] - props.dataRange[0]);
+const validRange = (range: Range) =>
+  range.every(Number.isFinite) &&
+  range[0] < range[1] &&
+  Number.isFinite(range[1] - range[0]);
+const valid = computed(
+  () => validRange(props.dataRange) && validRange(props.modelValue)
+);
+
+const endpointLimit = (value: number, direction: number) => {
+  const next = adjacentNumber(value, direction);
+  // A window/level pair needs a representable midpoint between its endpoints.
+  return props.windowLevel ? adjacentNumber(next, direction) : next;
+};
+const bounds = (
+  handle: Handle,
+  range: Range = props.modelValue,
+  domain: Range = props.dataRange
+): Range => {
+  const [low, high] = domain;
+  if (!valid.value) return [0, 0];
+  if (handle === 'min')
+    return [low, Math.min(high, endpointLimit(range[1], -1))];
+  if (handle === 'max')
+    return [Math.max(low, endpointLimit(range[0], 1)), high];
+  const halfWidth = (range[1] - range[0]) / 2;
+  const limit = Number.MAX_VALUE - halfWidth;
+  const first = clamp(low + halfWidth, -limit, limit);
+  const second = clamp(high - halfWidth, -limit, limit);
+  // A wide window can move while continuing to cover the image range.
+  return [Math.min(first, second), Math.max(first, second)];
+};
+const value = (handle: Handle, range: Range = props.modelValue) => {
+  if (!validRange(range)) return 0;
+  if (handle === 'min') return range[0];
+  if (handle === 'max') return range[1];
+  return range[0] + (range[1] - range[0]) / 2;
+};
+const interactionBounds = (
+  handle: Handle,
+  range: Range = props.modelValue,
+  domain: Range = props.dataRange
+): Range => {
+  const [low, high] = bounds(handle, range, domain);
+  const current = value(handle, range);
+  // Preserve an out-of-range starting value until the gesture brings it inward.
+  return [Math.min(low, current), Math.max(high, current)];
+};
+const disabledReason = () => {
+  if (props.disabled) return 'Display range controls are unavailable.';
+  if (!valid.value)
+    return 'A finite, nonconstant image and display range is required.';
+  return '';
+};
+const overflowDirection = (handle: Handle) => {
+  if (!valid.value) return undefined;
+  const current = value(handle);
+  if (current < props.dataRange[0]) return 'left';
+  if (current > props.dataRange[1]) return 'right';
+  return undefined;
+};
+const valueText = (handle: Handle) => {
+  const outside = overflowDirection(handle);
+  return outside
+    ? String(value(handle)) +
+        (outside === 'left' ? ' (below image range)' : ' (above image range)')
+    : String(value(handle));
+};
+const positionFraction = (handle: Handle) =>
+  valid.value
+    ? (clamp(value(handle), ...props.dataRange) - props.dataRange[0]) /
+      span.value
+    : 0.5;
+const position = (handle: Handle) => `${positionFraction(handle) * 100}%`;
+const projectedWindowWidth = computed(
+  () => positionFraction('max') - positionFraction('min')
+);
+const overlapping = computed(() => {
+  const center = positionFraction('center');
+  return (
+    Math.min(
+      center - positionFraction('min'),
+      positionFraction('max') - center
+    ) *
+      trackWidth.value <
+    24
+  );
+});
+const title = (handle: Handle) =>
+  disabledReason() ||
+  (overflowDirection(handle)
+    ? valueText(handle)
+    : handle === 'center'
+      ? 'Move the display window'
+      : 'Adjust display range ' + (handle === 'min' ? 'minimum' : 'maximum'));
+const update = (
+  handle: Handle,
+  target: number,
+  range: Range,
+  domain: Range = props.dataRange
+) => {
+  if (disabledReason() || !Number.isFinite(target)) return;
+  const [low, high] = interactionBounds(handle, range, domain);
+  const next = clamp(target, low, high);
+  let result: [number, number];
+  if (handle === 'min') result = [next, range[1]];
+  else if (handle === 'max') result = [range[0], next];
+  else {
+    const width = range[1] - range[0];
+    const first = Math.min(domain[0], Number.MAX_VALUE - width);
+    const second = Math.max(-Number.MAX_VALUE, domain[1] - width);
+    const delta = next - value('center', range);
+    const minimum = clamp(
+      Number.isFinite(delta) ? range[0] + delta : next - width / 2,
+      Math.min(first, second, range[0]),
+      Math.max(first, second, range[0])
+    );
+    result = [minimum, minimum + width];
+  }
+  if (
+    validRange(result) &&
+    result.some((endpoint, index) => endpoint !== props.modelValue[index])
+  )
+    emit('update:modelValue', result);
+};
+const endDrag = () => {
+  const previous = drag;
+  drag = undefined;
+  if (previous?.target.hasPointerCapture(previous.pointerId))
+    previous.target.releasePointerCapture(previous.pointerId);
+};
+const beginDrag = (event: PointerEvent, handle: Handle) => {
+  if (drag || disabledReason() || event.button !== 0) return;
+  const width = track.value?.getBoundingClientRect().width;
+  if (!width) return;
+  const target = event.currentTarget as HTMLButtonElement;
+  target.focus({ preventScroll: true });
+  target.setPointerCapture(event.pointerId);
+  drag = {
+    handle,
+    target,
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    width,
+    dataRange: [...props.dataRange],
+    moved: false,
+    range: [...props.modelValue],
+  };
+};
+const moveDrag = (event: PointerEvent) => {
+  if (!drag || event.pointerId !== drag.pointerId) return;
+  if (!drag.moved && event.clientX === drag.startX) return;
+  drag.moved = true;
+  const scalarSpan = drag.dataRange[1] - drag.dataRange[0];
+  const delta = ((event.clientX - drag.startX) / drag.width) * scalarSpan;
+  update(
+    drag.handle,
+    value(drag.handle, drag.range) + delta,
+    drag.range,
+    drag.dataRange
+  );
+};
+const releaseDrag = (event: PointerEvent) => {
+  if (drag?.pointerId === event.pointerId) endDrag();
+};
+const onKeydown = (event: KeyboardEvent, handle: Handle) => {
+  const directions: Record<string, number> = {
+    ArrowLeft: -1,
+    ArrowDown: -1,
+    ArrowRight: 1,
+    ArrowUp: 1,
+    PageDown: -10,
+    PageUp: 10,
+  };
+  const direction = directions[event.key];
+  if (!direction && event.key !== 'Home' && event.key !== 'End') return;
+  event.preventDefault();
+  event.stopPropagation();
+  const current = value(handle);
+  const [low, high] = bounds(handle);
+  let next = current + (span.value / 100) * direction;
+  if (event.key === 'Home') next = low;
+  else if (event.key === 'End') next = high;
+  else if (next === current)
+    next = adjacentNumber(current, Math.sign(direction));
+  update(handle, next, props.modelValue);
+};
+onBeforeUnmount(endDrag);
+</script>
+
+<template>
+  <div class="range-control" :data-testid="`${testIdPrefix}-slider`">
+    <div
+      ref="track"
+      class="palette-window-bar"
+      :class="{ overlapping }"
+      :style="{ '--window-width': `${projectedWindowWidth * 100}%` }"
+      :data-testid="
+        testIdPrefix === 'layer-range'
+          ? 'palette-window-bar'
+          : `${testIdPrefix}-bar`
+      "
+    >
+      <ColorMapSwatch
+        class="palette-window-colors"
+        :preset="preset"
+        :domain="dataRange"
+        :mapping-range="modelValue"
+        :transparent-background="transparentBackground"
+        aria-hidden="true"
+      />
+      <ColorMapHistogram
+        :histogram="histogram"
+        :data-range="dataRange"
+        :data-testid="`${testIdPrefix}-histogram`"
+      />
+      <span
+        v-for="handle in handles"
+        :key="handle"
+        class="handle-position"
+        :class="`handle-position-${handle}`"
+        :style="{
+          left: position(handle),
+          zIndex: disabledReason() ? 0 : undefined,
+        }"
+        :title="title(handle)"
+      >
+        <button
+          type="button"
+          role="slider"
+          class="range-handle"
+          :class="`range-handle-${handle}`"
+          :data-testid="`${testIdPrefix}-${handle}-handle`"
+          :aria-label="`Display range ${handle === 'min' ? 'minimum' : handle === 'max' ? 'maximum' : 'center'}`"
+          :aria-valuemin="interactionBounds(handle)[0]"
+          :aria-valuemax="interactionBounds(handle)[1]"
+          :aria-valuenow="value(handle)"
+          :aria-valuetext="valueText(handle)"
+          :aria-describedby="describedby"
+          aria-orientation="horizontal"
+          :disabled="!!disabledReason()"
+          :tabindex="disabledReason() ? -1 : 0"
+          @pointerdown.stop.prevent="beginDrag($event, handle)"
+          @pointermove.stop.prevent="moveDrag"
+          @pointerup.stop="releaseDrag"
+          @pointercancel.stop="releaseDrag"
+          @lostpointercapture="releaseDrag"
+          @click.stop
+          @keydown="onKeydown($event, handle)"
+        >
+          <span
+            class="handle-grip"
+            :data-direction="overflowDirection(handle)"
+            aria-hidden="true"
+          >
+            <v-icon v-if="overflowDirection(handle)" size="14">
+              {{
+                overflowDirection(handle) === 'left'
+                  ? 'mdi-chevron-left'
+                  : 'mdi-chevron-right'
+              }}
+            </v-icon>
+            <svg
+              v-else-if="handle === 'center'"
+              :width="centerIcon.cssWidth"
+              :height="centerIcon.cssHeight"
+              :viewBox="`0 0 ${centerIcon.width} ${centerIcon.height}`"
+              fill="currentColor"
+              shape-rendering="crispEdges"
+              focusable="false"
+            >
+              <rect :width="centerIcon.bar" :height="centerIcon.height" />
+              <rect
+                :x="centerIcon.bar + centerIcon.gap"
+                :width="centerIcon.bar"
+                :height="centerIcon.height"
+              />
+            </svg>
+          </span>
+        </button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.range-control {
+  width: 100%;
+  padding: 6px 12px 18px;
+  touch-action: none;
+  user-select: none;
+}
+.palette-window-bar {
+  position: relative;
+  width: 100%;
+  height: 32px;
+}
+.palette-window-colors {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.handle-position {
+  position: absolute;
+  top: 50%;
+  width: min(24px, calc(12px + var(--window-width) / 2));
+  height: 24px;
+  z-index: 1;
+}
+/* Split overlapping hit targets at their midpoint to keep both ends draggable. */
+.handle-position-min {
+  transform: translate(-12px, -50%);
+}
+.handle-position-max {
+  transform: translate(calc(12px - 100%), -50%);
+}
+.handle-position:focus-within {
+  z-index: 2;
+}
+.range-handle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: ew-resize;
+  touch-action: none;
+}
+.handle-grip {
+  position: absolute;
+  top: 12px;
+  pointer-events: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgb(var(--v-theme-surface-variant));
+  color: color-mix(
+    in srgb,
+    rgb(var(--v-theme-surface-variant)) 38%,
+    rgb(var(--v-theme-surface))
+  );
+  isolation: isolate;
+}
+.handle-grip[data-direction] {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.handle-grip::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: rgb(var(--v-theme-surface-variant));
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1;
+  transition:
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s;
+}
+@media (hover: hover) {
+  .range-handle:hover:not(:disabled) .handle-grip::before {
+    transform: scale(2);
+    opacity: var(--v-hover-opacity);
+  }
+}
+.range-handle:focus-visible .handle-grip::before {
+  transform: scale(2);
+  opacity: var(--v-focus-opacity);
+}
+.range-handle:active:not(:disabled) .handle-grip::before {
+  transform: scale(2);
+  opacity: var(--v-pressed-opacity);
+}
+@media (prefers-reduced-motion: reduce) {
+  .handle-grip::before {
+    transition: none;
+  }
+}
+.range-handle-min .handle-grip {
+  left: 12px;
+  transform: translate(-50%, -50%);
+}
+.range-handle-max .handle-grip {
+  right: 12px;
+  transform: translate(50%, -50%);
+}
+.handle-position-center {
+  width: 24px;
+  transform: translate(-50%, -50%);
+}
+.range-handle-center .handle-grip {
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.range-handle-center svg {
+  display: block;
+  overflow: visible;
+}
+.overlapping .handle-position {
+  height: 12px;
+}
+.overlapping .handle-position-min,
+.overlapping .handle-position-max {
+  top: calc(50% - 6px);
+}
+.overlapping .handle-position-center {
+  top: calc(50% + 6px);
+}
+.overlapping .range-handle-center .handle-grip {
+  top: 0;
+}
+.range-handle:focus-visible {
+  outline: none;
+}
+.range-handle:focus-visible .handle-grip {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  outline-offset: 3px;
+}
+.range-handle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+</style>
diff --git a/src/components/ColorMapSelect.vue b/src/components/ColorMapSelect.vue
new file mode 100644
index 000000000..41358c235
--- /dev/null
+++ b/src/components/ColorMapSelect.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { LAYER_PRESET_OPTIONS } from '@/src/vtk/LayerColorPresets';
+import ColorMapSwatch from './ColorMapSwatch.vue';
+
+withDefaults(
+  defineProps<{
+    modelValue: string;
+    disabled?: boolean;
+    testIdPrefix?: string;
+  }>(),
+  { testIdPrefix: 'layer' }
+);
+defineEmits<{ 'update:modelValue': [value: string] }>();
+</script>
+
+<template>
+  <v-select
+    label="Color map"
+    :items="LAYER_PRESET_OPTIONS"
+    :menu-props="{ width: 0 }"
+    :model-value="modelValue"
+    :disabled="disabled"
+    density="compact"
+    variant="plain"
+    hide-details
+    :data-testid="`${testIdPrefix}-colormap`"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template #item="{ item, props: itemProps }">
+      <v-list-item v-bind="itemProps">
+        <template #prepend>
+          <ColorMapSwatch
+            :preset="item.value"
+            class="palette-swatch mr-3"
+            aria-hidden="true"
+            :data-testid="`${testIdPrefix}-palette-option-swatch`"
+          />
+        </template>
+      </v-list-item>
+    </template>
+    <template #selection="{ item }">
+      <div class="palette-selection d-flex align-center ga-2">
+        <ColorMapSwatch
+          :preset="item.value"
+          class="palette-swatch"
+          aria-hidden="true"
+        />
+        <span class="text-ellipsis" :title="item.title">{{ item.title }}</span>
+      </div>
+    </template>
+  </v-select>
+</template>
+
+<style scoped>
+.palette-swatch {
+  width: 88px;
+  flex: 0 0 88px;
+}
+.palette-selection {
+  min-width: 0;
+  max-width: 100%;
+}
+</style>
diff --git a/src/components/ColorMapSwatch.vue b/src/components/ColorMapSwatch.vue
new file mode 100644
index 000000000..3ebbcc4b9
--- /dev/null
+++ b/src/components/ColorMapSwatch.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { colorMapGradient } from '@/src/utils/colorMapGradient';
+
+const props = defineProps<{
+  preset: string;
+  domain?: readonly [number, number];
+  mappingRange?: readonly [number, number];
+  transparentBackground?: boolean;
+}>();
+const gradient = computed(() =>
+  colorMapGradient(
+    props.preset,
+    props.domain,
+    props.mappingRange,
+    props.transparentBackground
+  )
+);
+</script>
+
+<template>
+  <div class="color-map-swatch" :style="{ backgroundImage: gradient }" />
+</template>
+
+<style scoped>
+.color-map-swatch {
+  height: 16px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.5);
+  border-radius: 2px;
+  background-color: rgb(var(--v-theme-surface));
+}
+</style>
diff --git a/src/components/ControlsStripTools.vue b/src/components/ControlsStripTools.vue
index 28be15f42..b285ddf5c 100644
--- a/src/components/ControlsStripTools.vue
+++ b/src/components/ControlsStripTools.vue
@@ -9,15 +9,29 @@
       v-slot:default="{ active, toggle }"
       :value="Tools.WindowLevel"
     >
-      <menu-control-button
-        icon="mdi-circle-half-full"
-        :name="`Window & Level [${nameToShortcut['Window & Level']}]`"
-        :active="active"
-        :disabled="noCurrentImage"
-        @click="toggle"
+      <v-tooltip
+        :text="windowingUnavailableReason"
+        :disabled="!windowingUnavailableReason"
+        location="right"
       >
-        <window-level-controls />
-      </menu-control-button>
+        <template #activator="{ props: tooltipProps }">
+          <span
+            v-bind="tooltipProps"
+            :tabindex="windowingUnavailableReason ? 0 : undefined"
+            data-testid="windowing-tool"
+          >
+            <menu-control-button
+              icon="mdi-circle-half-full"
+              :name="`Window & Level [${nameToShortcut['Window & Level']}]`"
+              :active="active"
+              :disabled="!!windowingUnavailableReason"
+              @click="toggle"
+            >
+              <window-level-controls />
+            </menu-control-button>
+          </span>
+        </template>
+      </v-tooltip>
     </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Pan">
       <control-button
@@ -143,6 +157,7 @@ import {
 } from '@/src/composables/useKeyboardShortcuts';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useViewStore } from '@/src/store/views';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 
 export default defineComponent({
   components: {
@@ -158,9 +173,19 @@ export default defineComponent({
     const toolStore = useToolStore();
     const viewStore = useViewStore();
 
-    const { currentImageID } = useCurrentImage();
+    const { currentImageID, currentImageData } = useCurrentImage();
     const noCurrentImage = computed(() => !currentImageID.value);
     const currentTool = computed(() => toolStore.currentTool);
+    const windowingUnavailableReason = computed(() => {
+      if (!currentImageID.value) return 'Load an image to adjust window/level.';
+      const scalars = currentImageData.value?.getPointData().getScalars();
+      if (!scalars) return 'The image must finish loading first.';
+      if (isCineImage(currentImageID.value))
+        return 'Cine images already contain display-encoded pixels.';
+      if (scalars.getNumberOfComponents() !== 1)
+        return 'Window/level editing requires a single-component image.';
+      return '';
+    });
 
     const activeViewRef = toRef(viewStore, 'activeView');
     const activeEffective = useEffectiveView(
@@ -216,6 +241,7 @@ export default defineComponent({
       currentTool,
       setCurrentTool: toolStore.setCurrentTool,
       noCurrentImage,
+      windowingUnavailableReason,
       isObliqueLayout,
       isDisallowedOnCine,
       paintUnavailableReason,
diff --git a/src/components/DisplayRangeControl.vue b/src/components/DisplayRangeControl.vue
new file mode 100644
index 000000000..aa461e95e
--- /dev/null
+++ b/src/components/DisplayRangeControl.vue
@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch, useId } from 'vue';
+import { adjacentNumber } from '@/src/utils/adjacentNumber';
+import { formatDisplayRange } from '@/src/utils/formatDisplayRange';
+import type { ImageHistogram } from '@/src/store/image-stats';
+import ColorMapRangeControl from './ColorMapRangeControl.vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: readonly [number, number];
+    dataRange: readonly [number, number];
+    histogram?: ImageHistogram;
+    preset: string;
+    transparentBackground?: boolean;
+    disabled?: boolean;
+    windowLevel?: boolean;
+    testIdPrefix?: string;
+  }>(),
+  { testIdPrefix: 'layer-range' }
+);
+const emit = defineEmits<{
+  'update:modelValue': [range: [number, number]];
+}>();
+const rangeMessageId = useId();
+
+const minimum = ref('');
+const maximum = ref('');
+type RangeEndpoint = 'min' | 'max';
+const dirty = ref({ min: false, max: false });
+const focused = ref<RangeEndpoint>();
+const formattedRange = computed(() => formatDisplayRange(props.modelValue));
+function refreshRangeInputs() {
+  if (!dirty.value.min) minimum.value = formattedRange.value[0];
+  if (!dirty.value.max) maximum.value = formattedRange.value[1];
+}
+watch(
+  [() => props.modelValue[0], () => props.modelValue[1]],
+  refreshRangeInputs,
+  { immediate: true }
+);
+function blurRangeInput(endpoint: RangeEndpoint) {
+  focused.value = undefined;
+  if (!props.disabled && !rangeError.value) dirty.value[endpoint] = false;
+  refreshRangeInputs();
+}
+const draftRange = computed(() => [
+  dirty.value.min ? Number(minimum.value) : props.modelValue[0],
+  dirty.value.max ? Number(maximum.value) : props.modelValue[1],
+]);
+const rangeError = computed(() => {
+  if (props.disabled) return '';
+  if (!minimum.value.trim() || !maximum.value.trim())
+    return 'Enter both Min and Max.';
+  const [min, max] = draftRange.value;
+  if (
+    min === undefined ||
+    max === undefined ||
+    !Number.isFinite(min) ||
+    !Number.isFinite(max)
+  )
+    return 'Min and Max must be finite numbers.';
+  if (min >= max) return 'Min must be less than Max.';
+  if (!Number.isFinite(max - min)) return 'The display range is too large.';
+  return '';
+});
+function setRange(range: number[]) {
+  const [min, max] = range;
+  if (
+    props.disabled ||
+    !Number.isFinite(min) ||
+    !Number.isFinite(max) ||
+    min >= max ||
+    !Number.isFinite(max - min)
+  )
+    return;
+  emit('update:modelValue', [min, max]);
+}
+async function updateRangeInput(endpoint: RangeEndpoint, value: string) {
+  dirty.value[endpoint] = true;
+  if (endpoint === 'min') minimum.value = value;
+  else maximum.value = value;
+  const [min, max] = draftRange.value;
+  if (rangeError.value || min === undefined || max === undefined) return;
+  setRange([min, max]);
+  const halfWidth = (max - min) / 2;
+  const level = min + halfWidth;
+  const expected = props.windowLevel
+    ? [level - halfWidth, level + halfWidth]
+    : [min, max];
+  await nextTick();
+  if (
+    expected.some(
+      (endpointValue, index) => endpointValue !== props.modelValue[index]
+    )
+  )
+    return;
+  const sibling = endpoint === 'min' ? 'max' : 'min';
+  if (focused.value !== sibling) dirty.value[sibling] = false;
+  refreshRangeInputs();
+}
+const inputStep = computed(() => {
+  const imageSpan = props.dataRange[1] - props.dataRange[0];
+  const span =
+    Number.isFinite(imageSpan) && imageSpan > 0
+      ? imageSpan
+      : props.modelValue[1] - props.modelValue[0];
+  if (!Number.isFinite(span) || span <= 0) return 0;
+  return Math.max(
+    Number.MIN_VALUE,
+    Math.min(1, 10 ** (Math.floor(Math.log10(span)) - 2))
+  );
+});
+function steppedRange(endpoint: RangeEndpoint, direction: number) {
+  if (props.disabled || rangeError.value) return undefined;
+  const index = endpoint === 'min' ? 0 : 1;
+  const current = draftRange.value[index];
+  // Width/level reconstruction needs room for rounding at both endpoints.
+  const resolution =
+    2 * Number.EPSILON * Math.max(...props.modelValue.map(Math.abs));
+  const step = Math.max(inputStep.value, resolution);
+  const stepped = current + direction * step;
+  const next =
+    stepped === current ? adjacentNumber(current, direction) : stepped;
+  const range: [number, number] = [...props.modelValue];
+  range[index] = next;
+  if (
+    next === current ||
+    !Number.isFinite(next) ||
+    range[0] >= range[1] ||
+    !Number.isFinite(range[1] - range[0])
+  )
+    return undefined;
+  return range;
+}
+function stepRange(endpoint: RangeEndpoint, direction: number) {
+  const range = steppedRange(endpoint, direction);
+  if (!range) return;
+  dirty.value[endpoint] = false;
+  setRange(range);
+  refreshRangeInputs();
+}
+function resetDrafts() {
+  dirty.value = { min: false, max: false };
+  refreshRangeInputs();
+}
+defineExpose({ resetDrafts });
+function updateRangeControl(range: number[]) {
+  dirty.value = { min: false, max: false };
+  setRange(range);
+  refreshRangeInputs();
+}
+</script>
+
+<template>
+  <div>
+    <ColorMapRangeControl
+      :model-value="modelValue"
+      :data-range="dataRange"
+      :histogram="histogram"
+      :preset="preset"
+      :test-id-prefix="testIdPrefix"
+      :transparent-background="transparentBackground"
+      :disabled="disabled"
+      :window-level="windowLevel"
+      :describedby="rangeError ? rangeMessageId : undefined"
+      @update:model-value="updateRangeControl"
+    />
+    <div
+      class="d-flex align-end justify-space-between flex-nowrap"
+      :class="$slots.actions ? 'ga-2' : 'ga-4'"
+    >
+      <v-text-field
+        :model-value="minimum"
+        label="Min"
+        aria-label="Display range minimum"
+        :aria-describedby="rangeError ? rangeMessageId : undefined"
+        inputmode="decimal"
+        :disabled="disabled"
+        :error="!!rangeError"
+        class="range-input"
+        density="compact"
+        variant="underlined"
+        hide-details
+        :data-testid="`${testIdPrefix}-min`"
+        :title="String(modelValue[0])"
+        @focus="focused = 'min'"
+        @blur="blurRangeInput('min')"
+        @update:model-value="updateRangeInput('min', $event)"
+        @keydown.up.prevent="stepRange('min', 1)"
+        @keydown.down.prevent="stepRange('min', -1)"
+      >
+        <template #append-inner>
+          <div class="range-stepper">
+            <button
+              v-for="direction in [1, -1]"
+              :key="direction"
+              type="button"
+              :aria-label="`${direction === 1 ? 'Increase' : 'Decrease'} display range minimum`"
+              :data-testid="`${testIdPrefix}-min-${direction === 1 ? 'increase' : 'decrease'}`"
+              :disabled="!steppedRange('min', direction)"
+              @mousedown.prevent
+              @click="stepRange('min', direction)"
+            >
+              <v-icon
+                :icon="direction === 1 ? 'mdi-menu-up' : 'mdi-menu-down'"
+                size="14"
+              />
+            </button>
+          </div>
+        </template>
+      </v-text-field>
+      <div v-if="$slots.actions" class="range-actions">
+        <slot name="actions" />
+      </div>
+      <v-text-field
+        :model-value="maximum"
+        label="Max"
+        aria-label="Display range maximum"
+        :aria-describedby="rangeError ? rangeMessageId : undefined"
+        inputmode="decimal"
+        :disabled="disabled"
+        :error="!!rangeError"
+        class="range-input"
+        density="compact"
+        variant="underlined"
+        hide-details
+        :data-testid="`${testIdPrefix}-max`"
+        :title="String(modelValue[1])"
+        @focus="focused = 'max'"
+        @blur="blurRangeInput('max')"
+        @update:model-value="updateRangeInput('max', $event)"
+        @keydown.up.prevent="stepRange('max', 1)"
+        @keydown.down.prevent="stepRange('max', -1)"
+      >
+        <template #append-inner>
+          <div class="range-stepper">
+            <button
+              v-for="direction in [1, -1]"
+              :key="direction"
+              type="button"
+              :aria-label="`${direction === 1 ? 'Increase' : 'Decrease'} display range maximum`"
+              :data-testid="`${testIdPrefix}-max-${direction === 1 ? 'increase' : 'decrease'}`"
+              :disabled="!steppedRange('max', direction)"
+              @mousedown.prevent
+              @click="stepRange('max', direction)"
+            >
+              <v-icon
+                :icon="direction === 1 ? 'mdi-menu-up' : 'mdi-menu-down'"
+                size="14"
+              />
+            </button>
+          </div>
+        </template>
+      </v-text-field>
+    </div>
+    <div
+      v-if="rangeError"
+      :id="rangeMessageId"
+      class="text-caption text-error mt-1"
+      role="status"
+      :data-testid="`${testIdPrefix}-status`"
+    >
+      {{ rangeError }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.range-actions {
+  flex: 0 0 auto;
+}
+
+.range-input {
+  flex: 0 1 104px;
+  min-width: 0;
+}
+
+.range-stepper {
+  display: flex;
+  flex-direction: column;
+  width: 14px;
+  height: 24px;
+  opacity: 0;
+}
+.range-input:hover .range-stepper,
+.range-input:focus-within .range-stepper {
+  opacity: 1;
+}
+.range-stepper button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 12px;
+  color: rgb(var(--v-theme-on-surface));
+}
+.range-stepper button:hover:not(:disabled),
+.range-stepper button:focus-visible {
+  background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+}
+.range-stepper button:disabled {
+  opacity: var(--v-disabled-opacity);
+}
+.range-input :deep(.v-field__append-inner) {
+  padding-inline-start: 0;
+}
+</style>
diff --git a/src/components/ImageListCard.vue b/src/components/ImageListCard.vue
index 8bb1d2b28..6f6146396 100644
--- a/src/components/ImageListCard.vue
+++ b/src/components/ImageListCard.vue
@@ -11,7 +11,7 @@
       }"
       v-bind="{ ...props, ...$attrs }"
     >
-      <v-container :title="htmlTitle">
+      <v-container :title="htmlTitle" :class="{ 'pa-2': compact }">
         <v-row no-gutters class="flex-nowrap">
           <v-col v-if="selectable" cols="1" class="d-flex align-center">
             <v-checkbox
@@ -27,6 +27,7 @@
           <v-col
             cols="4"
             class="image-container flex-grow-0"
+            :class="{ 'mx-0': compact }"
             :style="{ maxWidth: `${imageSize}px` }"
           >
             <v-img
@@ -72,6 +73,7 @@ import PersistentOverlay from './PersistentOverlay.vue';
 export default defineComponent({
   name: 'ImageListCard',
   props: {
+    compact: Boolean,
     active: Boolean,
     imageSize: {
       type: Number,
diff --git a/src/components/LayerList.vue b/src/components/LayerList.vue
index b15861756..d1d9cd2b3 100644
--- a/src/components/LayerList.vue
+++ b/src/components/LayerList.vue
@@ -1,32 +1,25 @@
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { useCurrentImage } from '../composables/useCurrentImage';
+import BaseImageProperties from './BaseImageProperties.vue';
 import LayerProperties from './LayerProperties.vue';
 
-export default defineComponent({
-  name: 'LayerList',
-  components: {
-    LayerProperties,
-  },
-  setup() {
-    const { currentLayers } = useCurrentImage();
-    const layers = computed(() => [...currentLayers.value].reverse());
-
-    return {
-      layers,
-    };
-  },
-});
+const { currentLayers, currentImageID } = useCurrentImage('global');
+const layers = computed(() => [...currentLayers.value].reverse());
 </script>
 
 <template>
-  <div class="mx-2">
-    <layer-properties
-      v-for="layer in layers"
-      :key="layer.id"
-      :layer="layer"
-      class="py-4"
-    >
-    </layer-properties>
+  <div>
+    <template v-for="(layer, index) in layers" :key="layer.id">
+      <v-divider v-if="index > 0" />
+      <layer-properties :layer="layer" :class="index > 0 ? 'py-4' : 'pb-4'" />
+    </template>
+    <template v-if="currentImageID">
+      <v-divider v-if="layers.length" />
+      <BaseImageProperties
+        :image-id="currentImageID"
+        :class="layers.length ? 'py-4' : 'pb-4'"
+      />
+    </template>
   </div>
 </template>
diff --git a/src/components/LayerProperties.vue b/src/components/LayerProperties.vue
index 37d0b1a9f..4ba0d4084 100644
--- a/src/components/LayerProperties.vue
+++ b/src/components/LayerProperties.vue
@@ -1,88 +1,312 @@
-<script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from 'vue';
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import '@/src/vtk/ColorMaps';
 import { useImageCacheStore } from '@/src/store/image-cache';
-import { NO_NAME } from '@/src/constants';
-import { BlendConfig } from '@/src/types/views';
-import { Layer } from '@/src/store/datasets-layers';
+import { isCineImage } from '@/src/core/cine/isCineImage';
+import { NO_NAME, WLAutoRanges } from '@/src/constants';
+import { useImageStatsStore } from '@/src/store/image-stats';
+import { Layer, useLayersStore } from '@/src/store/datasets-layers';
 import useLayerColoringStore from '@/src/store/view-configs/layers';
 import { useViewStore } from '@/src/store/views';
+import ColorMapSelect from './ColorMapSelect.vue';
+import DisplayRangeControl from './DisplayRangeControl.vue';
 
-export default defineComponent({
-  name: 'LayerProperties',
-  props: {
-    layer: {
-      required: true,
-      type: Object as PropType<Layer>,
-    },
-  },
-  setup(props) {
-    const { layer } = toRefs(props);
-    const imageCacheStore = useImageCacheStore();
-    const viewStore = useViewStore();
-
-    const imageName = computed(() => {
-      const { selection } = props.layer;
-      return imageCacheStore.getImageMetadata(selection)?.name ?? NO_NAME;
-    });
-
-    const layerColoringStore = useLayerColoringStore();
-
-    const layerID = computed(() => layer.value.id);
-
-    const layerConfigs = computed(() =>
-      viewStore
-        .getAllViews()
-        .filter((view) => view.type === '2D')
-        .map((view) => ({
-          config: layerColoringStore.getConfig(view.id, layerID.value),
-          viewID: view.id,
-        }))
-    );
+const props = defineProps<{ layer: Layer }>();
+const imageCacheStore = useImageCacheStore();
+const viewStore = useViewStore();
+const layersStore = useLayersStore();
+const layerColoringStore = useLayerColoringStore();
+const imageStatsStore = useImageStatsStore();
+const imageName = computed(
+  () => imageCacheStore.getImageMetadata(props.layer.selection)?.name ?? NO_NAME
+);
+const image = computed(() => imageCacheStore.getVtkImageData(props.layer.id));
+const hasVisibleView = computed(() =>
+  viewStore.visibleViews.some(
+    (view) =>
+      view.type === '2D' &&
+      layersStore.getLayers(view.dataID).some(({ id }) => id === props.layer.id)
+  )
+);
+const componentCount = computed(
+  () => image.value?.getPointData().getScalars()?.getNumberOfComponents() ?? 0
+);
+const unavailableReason = computed(() => {
+  if (!image.value) return 'The overlay image must finish loading first.';
+  if (![1, 3, 4].includes(componentCount.value))
+    return `${componentCount.value}-component overlays are not supported. Use a single-component, RGB, or RGBA image.`;
+  if (!hasVisibleView.value)
+    return 'Open a 2D view showing this overlay to adjust it.';
+  return '';
+});
+const coloringUnavailableReason = computed(() => {
+  if (unavailableReason.value) return unavailableReason.value;
+  if (componentCount.value !== 1)
+    return 'Color map, range, and contrast require a single-component overlay.';
+  return '';
+});
+const transparencyUnavailableReason = computed(() => {
+  if (unavailableReason.value) return unavailableReason.value;
+  if (componentCount.value !== 1)
+    return 'Transparent background requires a single-component image.';
+  return '';
+});
+const config = computed(() => {
+  if (!image.value) return undefined;
+  return layerColoringStore.getDisplayConfig(props.layer.id);
+});
+const mappingRange = computed(() => config.value?.mappingRange);
+const preset = computed(() => config.value?.preset ?? '');
+const opacity = computed(() => config.value?.opacity ?? 0.3);
+const visibility = computed(() => config.value?.visibility ?? true);
+const transparentBackground = computed(
+  () => config.value?.transparentBackground ?? true
+);
 
-    const blendConfig = computed(
-      () =>
-        // may be undefined if a 2D view has not been mounted
-        layerConfigs.value.find(({ config }) => config)?.config?.blendConfig
-    );
+function setPreset(value: string) {
+  if (coloringUnavailableReason.value || !vtkColorMaps.getPresetByName(value))
+    return;
+  layerColoringStore.updateDisplayConfig(props.layer.id, { preset: value });
+}
+function toggleVisibility() {
+  if (unavailableReason.value) return;
+  layerColoringStore.updateDisplayConfig(props.layer.id, {
+    visibility: !visibility.value,
+  });
+}
+function setOpacity(value: number) {
+  if (unavailableReason.value) return;
+  layerColoringStore.updateDisplayConfig(props.layer.id, { opacity: value });
+}
 
-    const setBlendConfig = (key: keyof BlendConfig, value: any) => {
-      if (layerConfigs.value.length === 0) return;
-      layerConfigs.value.forEach(({ viewID }) =>
-        layerColoringStore.updateBlendConfig(viewID, layerID.value, {
-          [key]: value,
-        })
-      );
-    };
+function setTransparentBackground(value: boolean | null) {
+  if (transparencyUnavailableReason.value || value === null) return;
+  layerColoringStore.updateDisplayConfig(props.layer.id, {
+    transparentBackground: value,
+  });
+}
 
+const imageRange = computed(() => {
+  const range = image.value?.getPointData().getScalars().getRange() ?? [0, 1];
+  return [range[0], range[1]] as const;
+});
+const histogram = computed(() =>
+  !isCineImage(props.layer.selection) && componentCount.value === 1
+    ? imageStatsStore.stats[props.layer.id]?.histogram
+    : undefined
+);
+const validRange = (
+  range: readonly [number, number] | undefined
+): range is readonly [number, number] =>
+  !!range &&
+  range.every(Number.isFinite) &&
+  range[0] < range[1] &&
+  Number.isFinite(range[1] - range[0]);
+const contrastOpen = ref(false);
+const rangeControl = ref<InstanceType<typeof DisplayRangeControl>>();
+watch(coloringUnavailableReason, (reason) => {
+  if (reason) contrastOpen.value = false;
+});
+const contrastOptions = computed(() => {
+  const autoRanges = imageStatsStore.getAutoRangeValues(props.layer.id);
+  return Object.keys(WLAutoRanges).map((key) => {
+    const range = key === 'FullRange' ? imageRange.value : autoRanges[key];
+    const unavailable =
+      coloringUnavailableReason.value ||
+      (!validRange(imageRange.value)
+        ? 'Contrast requires a finite, nonconstant image range.'
+        : !range
+          ? 'Image statistics are still being computed.'
+          : !validRange(range)
+            ? 'This contrast setting does not have a finite, nonconstant range.'
+            : '');
     return {
-      imageName,
-      blendConfig,
-      setBlendConfig,
+      key,
+      label: key.replace(/([A-Z])/g, ' $1').trim(),
+      range,
+      unavailable,
     };
-  },
+  });
 });
+async function setContrast(key: string) {
+  const option = contrastOptions.value.find(
+    (candidate) => candidate.key === key
+  );
+  if (!option || option.unavailable || !validRange(option.range)) return;
+  setRange([option.range[0], option.range[1]]);
+  contrastOpen.value = false;
+  await nextTick();
+  rangeControl.value?.resetDrafts();
+}
+function setRange(range: [number, number]) {
+  if (coloringUnavailableReason.value || !validRange(range)) return;
+  layerColoringStore.updateDisplayConfig(props.layer.id, {
+    mappingRange: range,
+  });
+}
 </script>
 
 <template>
-  <div class="mx-2" v-if="blendConfig">
+  <section :aria-label="imageName">
     <v-tooltip :text="imageName" location="top">
-      <template v-slot:activator="{ props }">
-        <h4 class="text-ellipsis" v-bind="props">{{ imageName }}</h4>
+      <template #activator="{ props: tooltipProps }">
+        <h4 class="text-ellipsis mb-3" v-bind="tooltipProps">
+          {{ imageName }}
+        </h4>
       </template>
     </v-tooltip>
-    <!-- padding top so thumb value tip does not overlap image name too much -->
-    <v-slider
-      class="pt-4"
-      label="Opacity"
-      min="0"
-      max="1"
-      step="0.01"
-      density="compact"
-      hide-details
-      thumb-label
-      :model-value="blendConfig.opacity"
-      @update:model-value="setBlendConfig('opacity', $event)"
-      data-testid="layer-opacity-slider"
-    />
-  </div>
+    <v-tooltip
+      :text="coloringUnavailableReason"
+      :disabled="!coloringUnavailableReason"
+    >
+      <template #activator="{ props: tooltipProps }">
+        <div
+          class="ms-4"
+          data-testid="layer-display-controls"
+          v-bind="tooltipProps"
+          :tabindex="coloringUnavailableReason ? 0 : undefined"
+        >
+          <div class="d-flex align-center ga-2">
+            <v-btn
+              class="layer-visibility"
+              size="small"
+              height="40"
+              width="88"
+              :prepend-icon="visibility ? 'mdi-eye' : 'mdi-eye-off'"
+              :aria-label="`${visibility ? 'Hide' : 'Show'} ${imageName}`"
+              :disabled="!!unavailableReason"
+              data-testid="layer-visibility"
+              @click="toggleVisibility"
+            >
+              {{ visibility ? 'Hide' : 'Show' }}
+            </v-btn>
+            <ColorMapSelect
+              class="layer-colormap"
+              :model-value="preset"
+              :disabled="!!coloringUnavailableReason"
+              @update:model-value="setPreset"
+            />
+          </div>
+          <DisplayRangeControl
+            ref="rangeControl"
+            :key="layer.id"
+            class="mt-1"
+            :model-value="mappingRange ?? [0, 1]"
+            :data-range="imageRange"
+            :histogram="histogram"
+            :preset="preset"
+            :transparent-background="transparentBackground"
+            :disabled="!!coloringUnavailableReason"
+            @update:model-value="setRange"
+          >
+            <template #actions>
+              <v-menu
+                v-model="contrastOpen"
+                :disabled="!!coloringUnavailableReason"
+                location="bottom"
+              >
+                <template #activator="{ props: menuProps }">
+                  <v-btn
+                    v-bind="menuProps"
+                    size="small"
+                    height="40"
+                    prepend-icon="mdi-circle-half-full"
+                    append-icon="mdi-menu-down"
+                    :disabled="!!coloringUnavailableReason"
+                    data-testid="layer-contrast"
+                  >
+                    Contrast
+                  </v-btn>
+                </template>
+                <v-list
+                  density="compact"
+                  :aria-label="`${imageName} contrast`"
+                  data-testid="layer-contrast-menu"
+                >
+                  <v-tooltip
+                    v-for="option in contrastOptions"
+                    :key="option.key"
+                    :text="option.unavailable"
+                    :disabled="!option.unavailable"
+                  >
+                    <template #activator="{ props: optionProps }">
+                      <div
+                        v-bind="optionProps"
+                        :tabindex="option.unavailable ? 0 : undefined"
+                      >
+                        <v-list-item
+                          :title="option.label"
+                          :disabled="!!option.unavailable"
+                          :data-testid="`layer-contrast-${option.key}`"
+                          @click="setContrast(option.key)"
+                        />
+                      </div>
+                    </template>
+                  </v-tooltip>
+                </v-list>
+              </v-menu>
+            </template>
+          </DisplayRangeControl>
+          <v-slider
+            class="pt-2"
+            label="Opacity"
+            name="Opacity"
+            min="0"
+            max="1"
+            step="0.01"
+            density="compact"
+            hide-details
+            thumb-label
+            :disabled="!!unavailableReason"
+            :model-value="opacity"
+            data-testid="layer-opacity-slider"
+            @update:model-value="setOpacity"
+          >
+            <template #thumb-label="{ modelValue }">
+              {{ Math.round(modelValue * 100) }}%
+            </template>
+          </v-slider>
+          <v-tooltip
+            :text="
+              transparencyUnavailableReason ||
+              'Values at or below Min are transparent, with a gradual fade over the first 10% of the display range above Min.'
+            "
+          >
+            <template #activator="{ props: switchProps }">
+              <div
+                v-bind="switchProps"
+                :tabindex="transparencyUnavailableReason ? 0 : undefined"
+              >
+                <v-switch
+                  class="ms-3"
+                  label="Transparent background"
+                  :aria-describedby="switchProps['aria-describedby']"
+                  @focus="switchProps.onFocus?.($event)"
+                  @blur="switchProps.onBlur?.($event)"
+                  :model-value="transparentBackground"
+                  :disabled="!!transparencyUnavailableReason"
+                  density="compact"
+                  hide-details
+                  color="primary"
+                  data-testid="layer-transparent-background"
+                  @update:model-value="setTransparentBackground"
+                />
+              </div>
+            </template>
+          </v-tooltip>
+        </div>
+      </template>
+    </v-tooltip>
+  </section>
 </template>
+
+<style scoped>
+.layer-colormap {
+  flex: 1;
+  min-width: 0;
+}
+.layer-visibility {
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/ObliqueViewer.vue b/src/components/ObliqueViewer.vue
index 8ec44e2a7..34dafb751 100644
--- a/src/components/ObliqueViewer.vue
+++ b/src/components/ObliqueViewer.vue
@@ -56,6 +56,8 @@
 </template>
 
 <script setup lang="ts">
+import { provide, toRef } from 'vue';
+import { WindowingViewContext } from '@/src/composables/useWindowingConfig';
 import MultiObliqueSliceViewer from '@/src/components/MultiObliqueSliceViewer.vue';
 import ObliqueSliceViewer from '@/src/components/ObliqueSliceViewer.vue';
 import useResliceCursorStore from '@/src/store/reslice-cursor';
@@ -67,7 +69,8 @@ interface Props {
   viewId: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+provide(WindowingViewContext, toRef(props, 'viewId'));
 
 const { currentImageID } = useCurrentImage();
 
diff --git a/src/components/RenderingModule.vue b/src/components/RenderingModule.vue
index 7091a2a89..e93d183a1 100644
--- a/src/components/RenderingModule.vue
+++ b/src/components/RenderingModule.vue
@@ -11,7 +11,7 @@ export default defineComponent({
   components: { VolumeRendering, VolumePresets, VolumeProperties, LayerList },
   setup() {
     // Use global current image - this gets the first loaded image when no view is selected
-    const { currentImageData, currentImage, currentLayers, currentImageID } =
+    const { currentImageData, currentImage, currentImageID } =
       useCurrentImage('global');
 
     const viewStore = useViewStore();
@@ -42,14 +42,13 @@ export default defineComponent({
       () => hasCurrentImage.value && !!view3DId.value
     );
 
-    const hasLayers = computed(() => !!currentLayers.value.length);
-
-    const panels = ref<string[]>(['properties', 'layers']);
+    const panels = ref<string[]>(['volume', 'layers']);
+    const volumePanels = ref<string[]>(['properties']);
 
     return {
       panels,
+      volumePanels,
       hasCurrentImage,
-      hasLayers,
       isImageLoading,
       canShow3DControls,
       view3DId,
@@ -61,39 +60,56 @@ export default defineComponent({
 <template>
   <div class="mx-2 mt-1">
     <template v-if="hasCurrentImage">
-      <template v-if="canShow3DControls">
-        <v-skeleton-loader v-if="isImageLoading" type="image">
-        </v-skeleton-loader>
-        <volume-rendering v-else :view-id="view3DId" />
-      </template>
-      <template v-else>
-        <div class="pt-4 text-body-2 text-center text-medium-emphasis">
-          Create a 3D view to access volume rendering controls
-        </div>
-      </template>
+      <div
+        v-if="!canShow3DControls"
+        class="pt-4 text-body-2 text-center text-medium-emphasis"
+      >
+        Create a 3D view to access volume rendering controls
+      </div>
 
       <v-expansion-panels v-model="panels" multiple variant="accordion">
-        <v-expansion-panel v-if="canShow3DControls" value="preset">
-          <v-expansion-panel-title>
-            <v-icon class="flex-grow-0 mr-4">mdi-palette</v-icon>
-            Color Presets
+        <v-expansion-panel
+          v-if="canShow3DControls"
+          value="volume"
+          data-testid="volume-rendering-panel"
+        >
+          <v-expansion-panel-title data-testid="volume-rendering-toggle">
+            <v-icon class="flex-grow-0 mr-4">mdi-cube-outline</v-icon>
+            3D Rendering
           </v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <volume-presets :view-id="view3DId" />
-          </v-expansion-panel-text>
-        </v-expansion-panel>
+          <v-expansion-panel-text eager class="volume-controls">
+            <v-skeleton-loader v-if="isImageLoading" type="image" />
+            <volume-rendering v-else :view-id="view3DId" />
 
-        <v-expansion-panel v-if="canShow3DControls" value="properties">
-          <v-expansion-panel-title>
-            <v-icon class="flex-grow-0 mr-4">mdi-cube-scan</v-icon>
-            Cinematic Rendering
-          </v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <volume-properties :view-id="view3DId" />
+            <v-expansion-panels
+              v-model="volumePanels"
+              multiple
+              variant="accordion"
+            >
+              <v-expansion-panel value="preset">
+                <v-expansion-panel-title>
+                  <v-icon class="flex-grow-0 mr-4">mdi-palette</v-icon>
+                  Color Presets
+                </v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <volume-presets :view-id="view3DId" />
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+
+              <v-expansion-panel value="properties">
+                <v-expansion-panel-title>
+                  <v-icon class="flex-grow-0 mr-4">mdi-cube-scan</v-icon>
+                  Cinematic Rendering
+                </v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <volume-properties :view-id="view3DId" />
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
           </v-expansion-panel-text>
         </v-expansion-panel>
 
-        <v-expansion-panel v-if="hasLayers" value="layers">
+        <v-expansion-panel value="layers">
           <v-expansion-panel-title>
             <v-icon class="flex-grow-0 mr-4">mdi-layers</v-icon>
             Layers
@@ -107,9 +123,15 @@ export default defineComponent({
     <template v-else>
       <div class="pt-12 text-subtitle-1 d-flex flex-row justify-center">
         <div class="text-center" style="max-width: 75%">
-          Load an image and add a 3D view to see rendering controls
+          Load an image to adjust its display settings
         </div>
       </div>
     </template>
   </div>
 </template>
+
+<style scoped>
+.volume-controls > :deep(.v-expansion-panel-text__wrapper) {
+  padding: 0;
+}
+</style>
diff --git a/src/components/SampleDataBrowser.vue b/src/components/SampleDataBrowser.vue
index cd6ee1d1a..48f1c5c0e 100644
--- a/src/components/SampleDataBrowser.vue
+++ b/src/components/SampleDataBrowser.vue
@@ -14,19 +14,7 @@ import { useImageStore } from '@/src/store/datasets-images';
 import { useDICOMStore } from '@/src/store/datasets-dicom';
 import { fetchFile } from '@/src/utils/fetch';
 import { useViewStore } from '@/src/store/views';
-
-enum ProgressState {
-  Pending,
-  Error,
-  Done,
-}
-
-interface Progress {
-  [name: string]: {
-    state: ProgressState;
-    progress: number;
-  };
-}
+import { showSampleOverlay } from '@/src/samples/showSampleOverlay';
 
 export default defineComponent({
   components: {
@@ -34,23 +22,24 @@ export default defineComponent({
   },
   setup() {
     const viewStore = useViewStore();
-    const status = reactive<{ progress: Progress }>({
+    const status = reactive<{ progress: Record<string, number> }>({
       progress: {},
     });
-    // URL -> data ID
     const loaded = reactive<{
-      urlToID: Record<string, string>;
-      idToURL: Record<string, string>;
+      nameToIDs: Record<string, string[]>;
+      idToName: Record<string, string>;
     }>({
-      urlToID: {},
-      idToURL: {},
+      nameToIDs: {},
+      idToName: {},
     });
 
     const clearLoadedStatus = (id: string) => {
-      const url = loaded.idToURL[id];
-      if (url) {
-        delete loaded.idToURL[id];
-        delete loaded.urlToID[url];
+      const name = loaded.idToName[id];
+      if (name) {
+        loaded.nameToIDs[name].forEach((memberID) => {
+          delete loaded.idToName[memberID];
+        });
+        delete loaded.nameToIDs[name];
       }
     };
 
@@ -75,45 +64,56 @@ export default defineComponent({
     });
 
     async function downloadSample(sample: SampleDataset) {
+      if (sample.name in status.progress) return;
       const progress = (percent: number) => {
-        status.progress[sample.name] = {
-          state: ProgressState.Pending,
-          progress: percent * 100,
-        };
+        status.progress[sample.name] = percent * 100;
       };
       try {
         progress(Infinity);
-
-        const sampleFile = await fetchFile(sample.url, sample.filename, {
-          progress,
+        const files =
+          'urls' in sample
+            ? await Promise.all(
+                sample.urls.map(async (url, index) =>
+                  remoteFileToDataSource(
+                    await fetchFile(url, `sample-${index}.dcm`),
+                    url
+                  )
+                )
+              )
+            : [
+                remoteFileToDataSource(
+                  await fetchFile(sample.url, sample.filename, { progress }),
+                  sample.url
+                ),
+              ];
+        const loadResults = await importDataSources(files);
+        const errors = loadResults.flatMap((result) =>
+          result.type === 'error' ? [result.error] : []
+        );
+        if (errors.length) {
+          throw new Error(errors.map((error) => error.message).join('\n'));
+        }
+        const selections = loadResults.flatMap((result) => {
+          const id = convertSuccessResultToDataSelection(result);
+          return id ? [id] : [];
         });
-        status.progress[sample.name].state = ProgressState.Done;
-
-        const [loadResult] = await importDataSources([
-          remoteFileToDataSource(sampleFile, sample.url),
-        ]);
-
-        if (!loadResult) {
+        if (!selections.length)
           throw new Error('Did not receive a load result');
-        }
-        if (loadResult.type === 'error') {
-          throw loadResult.error;
-        }
-
-        const selection = convertSuccessResultToDataSelection(loadResult);
-        if (selection) {
-          loaded.idToURL[selection] = sample.url;
-          loaded.urlToID[sample.url] = selection;
 
+        if (sample.overlay) {
+          await showSampleOverlay(selections, sample.overlay);
+        } else {
+          const [selection] = selections;
           useVolumeColoringStore().setDefaults(selection, {
-            transferFunction: {
-              preset: sample.defaults?.colorPreset,
-            },
+            transferFunction: { preset: sample.defaults?.colorPreset },
           });
+          viewStore.setDataForAllViews(selection);
         }
-        viewStore.setDataForAllViews(selection);
+        loaded.nameToIDs[sample.name] = selections;
+        selections.forEach((id) => {
+          loaded.idToName[id] = sample.name;
+        });
       } catch (error) {
-        status.progress[sample.name].state = ProgressState.Error;
         const messageStore = useMessageStore();
         messageStore.addError('Failed to load sample data', {
           error: error as Error,
@@ -125,20 +125,16 @@ export default defineComponent({
 
     const samples = computed(() =>
       SAMPLE_DATA.map((sample) => {
-        const isDone =
-          status.progress[sample.name]?.state === ProgressState.Done;
-        const isError =
-          status.progress[sample.name]?.state === ProgressState.Error;
-        const isLoaded = !!loaded.urlToID[sample.url];
-        const progress =
-          isDone || isLoaded
+        const isDownloading = sample.name in status.progress;
+        const isLoaded = !!loaded.nameToIDs[sample.name];
+        const progress = isDownloading
+          ? Math.floor(status.progress[sample.name])
+          : isLoaded
             ? 100
-            : Math.floor(status.progress[sample.name]?.progress);
+            : 0;
         return {
           ...sample,
-          isDownloading: sample.name in status.progress,
-          isDone,
-          isError,
+          isDownloading,
           isLoaded,
           indeterminate: progress === Infinity,
           progress,
@@ -158,7 +154,10 @@ export default defineComponent({
   <div data-testid="samples-list">
     <image-list-card
       v-for="sample in samples"
-      :disabled="sample.isDownloading || sample.isLoaded"
+      compact
+      :disabled="
+        sample.isDownloading || (sample.isLoaded && !('urls' in sample))
+      "
       :key="sample.name"
       :html-title="sample.name"
       :image-url="sample.image"
@@ -169,21 +168,22 @@ export default defineComponent({
       <div class="text-body-2 font-weight-bold text-no-wrap text-truncate">
         {{ sample.name }}
       </div>
-      <div class="text-body-2 mt-2">{{ sample.description }}</div>
+      <div class="text-body-2 mt-1">{{ sample.description }}</div>
       <template #image-overlay v-if="sample.isDownloading || sample.isLoaded">
         <v-row class="fill-height ma-0 align-center justify-center">
           <v-progress-circular
             class="sample-progress"
             color="white"
-            :indeterminate="sample.indeterminate && !sample.isDone"
+            :indeterminate="sample.indeterminate"
             :model-value="sample.progress"
           >
-            <v-icon v-if="sample.isDone || sample.isLoaded" small color="white">
+            <v-icon
+              v-if="sample.isLoaded && !sample.isDownloading"
+              small
+              color="white"
+            >
               mdi-check
             </v-icon>
-            <v-icon v-else-if="sample.isError" small color="white">
-              mdi-alert-circle
-            </v-icon>
             <span
               v-else-if="!sample.indeterminate"
               class="text-caption text--white"
diff --git a/src/components/__tests__/LayerProperties.spec.ts b/src/components/__tests__/LayerProperties.spec.ts
new file mode 100644
index 000000000..11dddcda8
--- /dev/null
+++ b/src/components/__tests__/LayerProperties.spec.ts
@@ -0,0 +1,389 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { enableAutoUnmount, mount } from '@vue/test-utils';
+import { createVuetify } from 'vuetify';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import LayerProperties from '@/src/components/LayerProperties.vue';
+import DisplayRangeControl from '@/src/components/DisplayRangeControl.vue';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { useImageStatsStore } from '@/src/store/image-stats';
+import { useLayersStore } from '@/src/store/datasets-layers';
+import { useViewStore } from '@/src/store/views';
+import { useLayerColoringStore } from '@/src/store/view-configs/layers';
+
+enableAutoUnmount(afterEach);
+
+const layer = { id: 'base::pet', selection: 'pet' };
+
+function seatImage(
+  id: string,
+  values = [-5, 0, 4.5, 20],
+  numberOfComponents = 1
+) {
+  useImageStatsStore().stats[id] = {
+    scalarMin: Math.min(...values),
+    scalarMax: Math.max(...values),
+    autoRangeValues: {},
+  };
+  const image = vtkImageData.newInstance();
+  image.setDimensions(2, 2, 1);
+  image.getPointData().setScalars(
+    vtkDataArray.newInstance({
+      name: 'scalars',
+      numberOfComponents,
+      values: Float64Array.from(values),
+    })
+  );
+  const cache = useImageCacheStore();
+  if (cache.getVtkImageData(id)) cache.updateVTKImageData(id, image);
+  else cache.addVTKImageData(image, id, { id });
+}
+
+const views2D = () =>
+  useViewStore()
+    .getAllViews()
+    .filter((view) => view.type === '2D');
+
+const mountControls = () =>
+  mount(LayerProperties, {
+    props: { layer },
+    global: { plugins: [createVuetify()] },
+  });
+
+async function draftRange(
+  wrapper: ReturnType<typeof mountControls>,
+  min: string,
+  max: string
+) {
+  await wrapper.get('[data-testid="layer-range-min"] input').setValue(min);
+  await wrapper.get('[data-testid="layer-range-max"] input').setValue(max);
+}
+
+function appliedRange(wrapper: ReturnType<typeof mountControls>) {
+  return ['min', 'max'].map((endpoint) =>
+    wrapper
+      .get(`[data-testid="layer-range-${endpoint}"] input`)
+      .attributes('title')
+  );
+}
+
+beforeEach(() => {
+  setActivePinia(createPinia());
+  [layer.id, layer.selection, 'base'].forEach((id) => seatImage(id));
+  useLayersStore().parentToLayers.base = [layer];
+  useViewStore().setDataForAllViews('base');
+  useLayerColoringStore().updateDisplayConfig(layer.id, {
+    preset: 'DICOM Hot Iron',
+    mappingRange: [0, 10],
+    opacity: 0.5,
+  });
+});
+
+describe('LayerProperties', () => {
+  it('enables transparent background by default and retains its selection through other edits', async () => {
+    const wrapper = mountControls();
+    const toggle = wrapper.get<HTMLInputElement>(
+      '[data-testid="layer-transparent-background"] input'
+    );
+    expect(toggle.element.checked).toBe(true);
+    expect(
+      wrapper.get('[data-testid="layer-transparent-background"]').text()
+    ).toContain('Transparent background');
+    await toggle.setValue(false);
+    await draftRange(wrapper, '-2.75', '6.25');
+    expect(toggle.element.checked).toBe(false);
+    await toggle.setValue(true);
+    expect(toggle.element.checked).toBe(true);
+  });
+
+  it.each([3, 4])(
+    'disables scalar coloring for %s-component images while keeping opacity and visibility adjustable',
+    async (numberOfComponents) => {
+      seatImage(
+        layer.id,
+        Array.from({ length: 4 * numberOfComponents }, (_, index) => index),
+        numberOfComponents
+      );
+      const wrapper = mountControls();
+      for (const selector of [
+        '[data-testid="layer-colormap"] input',
+        '[data-testid="layer-range-min"] input',
+        '[data-testid="layer-range-max"] input',
+      ]) {
+        expect(wrapper.get<HTMLInputElement>(selector).element.disabled).toBe(
+          true
+        );
+      }
+      expect(
+        wrapper.get<HTMLButtonElement>('[data-testid="layer-contrast"]').element
+          .disabled
+      ).toBe(true);
+      const visibility = wrapper.get<HTMLButtonElement>(
+        '[data-testid="layer-visibility"]'
+      );
+      expect(visibility.element.disabled).toBe(false);
+      await visibility.trigger('click');
+      expect(visibility.text()).toBe('Show');
+      const toggle = wrapper.get<HTMLInputElement>(
+        '[data-testid="layer-transparent-background"] input'
+      );
+      expect(toggle.element.disabled).toBe(true);
+      const activator = wrapper.get(
+        '[data-testid="layer-transparent-background"]'
+      ).element.parentElement!;
+      expect(activator.getAttribute('tabindex')).toBe('0');
+      const descriptionId = activator.getAttribute('aria-describedby');
+      expect(descriptionId).toBeTruthy();
+      expect(document.getElementById(descriptionId!)?.textContent).toContain(
+        'Transparent background requires a single-component image.'
+      );
+      const opacity = wrapper.get(
+        '[data-testid="layer-opacity-slider"] [role="slider"]'
+      );
+      expect(opacity.attributes('tabindex')).toBe('0');
+      await opacity.trigger('keydown', { key: 'ArrowRight' });
+      expect(Number(opacity.attributes('aria-valuenow'))).toBeGreaterThan(0.5);
+    }
+  );
+
+  it('updates the applied values immediately for signed decimal inputs', async () => {
+    const wrapper = mountControls();
+    await draftRange(wrapper, '-2.75', '6.25');
+    expect(wrapper.find('[data-testid="layer-range-apply"]').exists()).toBe(
+      false
+    );
+
+    expect(wrapper.find('[data-testid="layer-range-status"]').exists()).toBe(
+      false
+    );
+    expect(appliedRange(wrapper)).toEqual(['-2.75', '6.25']);
+  });
+
+  it.each([
+    ['', '5', 'Enter both Min and Max.'],
+    ['NaN', '5', 'Min and Max must be finite numbers.'],
+    ['-Infinity', '5', 'Min and Max must be finite numbers.'],
+    ['1', 'Infinity', 'Min and Max must be finite numbers.'],
+    ['5', '5', 'Min must be less than Max.'],
+    ['6', '5', 'Min must be less than Max.'],
+  ])(
+    'explains invalid range %s to %s and keeps the applied range on Enter',
+    async (min, max, message) => {
+      const wrapper = mountControls();
+      await draftRange(wrapper, '', max);
+      await wrapper.get('[data-testid="layer-range-min"] input').setValue(min);
+      expect(wrapper.get('[data-testid="layer-range-status"]').text()).toBe(
+        message
+      );
+      await wrapper
+        .get('[data-testid="layer-range-max"] input')
+        .trigger('keydown', { key: 'Enter' });
+      expect(appliedRange(wrapper)).toEqual(['0', '10']);
+    }
+  );
+
+  it.each(['-', '.', '-.', '1e', '1e-'])(
+    'keeps incomplete numeric text %s through palette and opacity changes',
+    async (draft) => {
+      const wrapper = mountControls();
+      await wrapper
+        .get('[data-testid="layer-range-min"] input')
+        .setValue(draft);
+      useLayerColoringStore().updateDisplayConfig(layer.id, {
+        preset: 'Grayscale',
+        opacity: 0.75,
+      });
+      await wrapper.vm.$nextTick();
+      expect(
+        wrapper.get<HTMLInputElement>('[data-testid="layer-range-min"] input')
+          .element.value
+      ).toBe(draft);
+      expect(appliedRange(wrapper)).toEqual(['0', '10']);
+      expect(
+        wrapper
+          .get('[data-testid="layer-opacity-slider"] [role="slider"]')
+          .attributes('aria-valuenow')
+      ).toBe('0.75');
+      await draftRange(wrapper, '-25.75', '40.25');
+      expect(appliedRange(wrapper)).toEqual(['-25.75', '40.25']);
+      await draftRange(wrapper, '-5', '20');
+      expect(appliedRange(wrapper)).toEqual(['-5', '20']);
+      expect(
+        wrapper
+          .get('[data-testid="layer-opacity-slider"] [role="slider"]')
+          .attributes('aria-valuenow')
+      ).toBe('0.75');
+    }
+  );
+
+  it('updates the displayed range with the slider keyboard controls', async () => {
+    const wrapper = mountControls();
+    const thumbs = wrapper.findAll(
+      '[data-testid="layer-range-slider"] [role="slider"]'
+    );
+    expect(thumbs).toHaveLength(3);
+    const minimumThumb = wrapper.get(
+      '[role="slider"][aria-label="Display range minimum"]'
+    );
+    const maximumThumb = wrapper.get(
+      '[role="slider"][aria-label="Display range maximum"]'
+    );
+    expect(minimumThumb.attributes('tabindex')).toBe('0');
+    expect(maximumThumb.attributes('tabindex')).toBe('0');
+    await minimumThumb.trigger('keydown', { key: 'ArrowRight' });
+    expect(
+      wrapper
+        .find('[role="slider"][aria-label="Display range minimum"]')
+        .exists()
+    ).toBe(true);
+    expect(
+      wrapper
+        .find('[role="slider"][aria-label="Display range maximum"]')
+        .exists()
+    ).toBe(true);
+    expect(
+      Number(
+        wrapper.get<HTMLInputElement>('[data-testid="layer-range-min"] input')
+          .element.value
+      )
+    ).toBeGreaterThan(0);
+    expect(appliedRange(wrapper)).not.toEqual(['0', '10']);
+  });
+
+  it('displays global controls even when the active view has independent settings', () => {
+    const second = views2D()[1];
+    const coloring = useLayerColoringStore();
+    const config = coloring.getConfig(second.id, layer.id);
+    coloring.deserialize(second.id, {
+      [layer.id]: {
+        layers: {
+          ...config,
+          transferFunction: { preset: 'Grayscale', mappingRange: [-3, 7] },
+          blendConfig: { ...config.blendConfig, opacity: 0.9 },
+        },
+      },
+    });
+    useViewStore().setActiveView(second.id);
+    const wrapper = mountControls();
+    expect(
+      wrapper.get<HTMLInputElement>('[data-testid="layer-range-min"] input')
+        .element.value
+    ).toBe('0');
+    expect(
+      wrapper.get<HTMLInputElement>('[data-testid="layer-range-max"] input')
+        .element.value
+    ).toBe('10');
+    expect(appliedRange(wrapper)).toEqual(['0', '10']);
+    expect(wrapper.get('[data-testid="layer-colormap"]').text()).toContain(
+      'DICOM Hot Iron'
+    );
+    expect(
+      wrapper
+        .get('[data-testid="layer-opacity-slider"] [role="slider"]')
+        .attributes('aria-valuenow')
+    ).toBe('0.5');
+  });
+  it.each([
+    [0.123456789, 0.987654321, '0.1235', '0.9877'],
+    [1.23456789e-12, 9.87654321e-12, '1.235e-12', '9.877e-12'],
+    [1.23456789e12, 9.87654321e12, '1.235e+12', '9.877e+12'],
+    [100.00001, 100.00002, '100.00001', '100.00002'],
+    [1, 1 + Number.EPSILON, '1', '1.0000000000000002'],
+    [Number.MIN_VALUE, Number.MIN_VALUE * 2, '5e-324', '1e-323'],
+  ])(
+    'displays distinguishable range inputs for %s to %s',
+    (min, max, minText, maxText) => {
+      seatImage(layer.id, [min, min, max, max]);
+      useLayerColoringStore().updateDisplayConfig(layer.id, {
+        mappingRange: [min, max],
+      });
+      const wrapper = mountControls();
+      expect(
+        wrapper.get<HTMLInputElement>('[data-testid="layer-range-min"] input')
+          .element.value
+      ).toBe(minText);
+      expect(
+        wrapper.get<HTMLInputElement>('[data-testid="layer-range-max"] input')
+          .element.value
+      ).toBe(maxText);
+      expect(appliedRange(wrapper)).toEqual([String(min), String(max)]);
+      expect(wrapper.find('[data-testid="layer-range-status"]').exists()).toBe(
+        false
+      );
+    }
+  );
+
+  it.each([
+    ['min', '0.1235', '0.123456789'],
+    ['max', '0.9877', '0.987654321'],
+  ])(
+    'keeps %s rounded on focus and exposes its exact value on hover',
+    async (endpoint, rounded, exact) => {
+      useLayerColoringStore().updateDisplayConfig(layer.id, {
+        mappingRange: [0.123456789, 0.987654321],
+      });
+      const wrapper = mountControls();
+      const input = wrapper.get<HTMLInputElement>(
+        `[data-testid="layer-range-${endpoint}"] input`
+      );
+      expect(input.attributes('title')).toBe(exact);
+      expect(input.element.value).toBe(rounded);
+      await input.trigger('focus');
+      expect(input.element.value).toBe(rounded);
+      expect(appliedRange(wrapper)).toEqual(['0.123456789', '0.987654321']);
+      await input.trigger('blur');
+      expect(input.element.value).toBe(rounded);
+      expect(appliedRange(wrapper)).toEqual(['0.123456789', '0.987654321']);
+    }
+  );
+
+  it('refreshes a valid blurred draft after a window-level round trip and a later preset', async () => {
+    const wrapper = mount(DisplayRangeControl, {
+      props: {
+        modelValue: [0, 200],
+        dataRange: [0, 200],
+        preset: 'Grayscale',
+      },
+      global: { plugins: [createVuetify()] },
+    });
+    const input = wrapper.get<HTMLInputElement>(
+      '[data-testid="layer-range-min"] input'
+    );
+    await input.setValue('0.1');
+    const width = 200 - 0.1;
+    const level = 0.1 + width / 2;
+    await wrapper.setProps({
+      modelValue: [level - width / 2, level + width / 2],
+    });
+    expect(input.element.value).toBe('0.1');
+    await input.trigger('blur');
+    await wrapper.setProps({ modelValue: [20, 150] });
+    expect(input.element.value).toBe('20');
+    expect(input.attributes('title')).toBe('20');
+  });
+
+  it.each(['min', 'max'])(
+    'editing %s retains the exact untouched endpoint and delays formatting until blur',
+    async (endpoint) => {
+      useLayerColoringStore().updateDisplayConfig(layer.id, {
+        mappingRange: [0.123456789, 0.987654321],
+      });
+      const wrapper = mountControls();
+      const input = wrapper.get<HTMLInputElement>(
+        `[data-testid="layer-range-${endpoint}"] input`
+      );
+      await input.trigger('focus');
+      await input.setValue('0.54321098700');
+      expect(input.element.value).toBe('0.54321098700');
+      const exactRange =
+        endpoint === 'min'
+          ? ['0.543210987', '0.987654321']
+          : ['0.123456789', '0.543210987'];
+      expect(appliedRange(wrapper)).toEqual(exactRange);
+      await input.trigger('blur');
+      expect(input.element.value).toBe('0.5432');
+      expect(appliedRange(wrapper)).toEqual(exactRange);
+    }
+  );
+});
diff --git a/src/components/tools/windowing/WindowLevelControls.vue b/src/components/tools/windowing/WindowLevelControls.vue
index 0ce237029..af2c0260f 100644
--- a/src/components/tools/windowing/WindowLevelControls.vue
+++ b/src/components/tools/windowing/WindowLevelControls.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import {
   useWindowingStore,
@@ -11,15 +11,20 @@ import { getWindowLevels, useDICOMStore } from '@/src/store/datasets-dicom';
 import { isDicomImage } from '@/src/utils/dataSelection';
 import { storeToRefs } from 'pinia';
 
-const MIN_VALUE = 0.001;
-
 export default defineComponent({
-  setup() {
+  props: {
+    viewId: String,
+    imageId: String,
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
     const { currentImageID } = useCurrentImage();
     const windowingStore = useWindowingStore();
     const viewStore = useViewStore();
     const dicomStore = useDICOMStore();
     const { activeView } = storeToRefs(viewStore);
+    const targetViewID = computed(() => props.viewId ?? activeView.value);
+    const targetImageID = computed(() => props.imageId ?? currentImageID.value);
 
     function parseLabel(text: string) {
       return text.replace(/([A-Z])/g, ' $1').trim();
@@ -28,8 +33,8 @@ export default defineComponent({
     // --- CT Preset Options --- //
 
     const modality = computed(() => {
-      if (currentImageID.value && isDicomImage(currentImageID.value)) {
-        const volKey = currentImageID.value;
+      if (targetImageID.value && isDicomImage(targetImageID.value)) {
+        const volKey = targetImageID.value;
         const { Modality } = dicomStore.volumeInfo[volKey];
         return Modality;
       }
@@ -38,7 +43,7 @@ export default defineComponent({
 
     const ctTags = ['ct', 'ctprotocol'];
     const showCtPresets = computed(() => {
-      if (currentImageID.value && !isDicomImage(currentImageID.value)) {
+      if (targetImageID.value && !isDicomImage(targetImageID.value)) {
         return true;
       }
       return modality.value && ctTags.includes(modality.value.toLowerCase());
@@ -50,9 +55,8 @@ export default defineComponent({
     type PresetValue = { width: number; level: number };
 
     const wlConfig = computed(() => {
-      // All views will have the same settings, just grab the first
-      const viewID = activeView.value;
-      const imageID = currentImageID.value;
+      const viewID = targetViewID.value;
+      const imageID = targetImageID.value;
       if (!imageID || !viewID) return defaultWindowLevelConfig();
       return (
         windowingStore.getConfig(viewID, imageID) ?? defaultWindowLevelConfig()
@@ -62,16 +66,17 @@ export default defineComponent({
     const wlWidth = computed(() => wlConfig.value.width ?? 1);
     const wlLevel = computed(() => wlConfig.value.level ?? 0.5);
 
-    const formatForDisplay = (value: number) => {
-      if (Math.abs(value) < MIN_VALUE) return 0;
-      return Math.round(value * 100) / 100;
-    };
+    const widthFocused = ref(false);
+    const levelFocused = ref(false);
+
+    const formatForDisplay = (value: number) => Number(value.toPrecision(4));
 
     const displayWidth = computed({
-      get: () => formatForDisplay(wlWidth.value),
+      get: () =>
+        widthFocused.value ? wlWidth.value : formatForDisplay(wlWidth.value),
       set: (value: number) => {
-        const imageID = currentImageID.value;
-        const viewID = activeView.value;
+        const imageID = targetImageID.value;
+        const viewID = targetViewID.value;
         if (!imageID || !viewID || !Number.isFinite(value)) return;
         windowingStore.updateConfig(
           viewID,
@@ -79,14 +84,16 @@ export default defineComponent({
           { width: value, level: wlLevel.value },
           true
         );
+        emit('change');
       },
     });
 
     const displayLevel = computed({
-      get: () => formatForDisplay(wlLevel.value),
+      get: () =>
+        levelFocused.value ? wlLevel.value : formatForDisplay(wlLevel.value),
       set: (value: number) => {
-        const imageID = currentImageID.value;
-        const viewID = activeView.value;
+        const imageID = targetImageID.value;
+        const viewID = targetViewID.value;
         if (!imageID || !viewID || !Number.isFinite(value)) return;
         windowingStore.updateConfig(
           viewID,
@@ -94,6 +101,7 @@ export default defineComponent({
           { width: wlWidth.value, level: value },
           true
         );
+        emit('change');
       },
     });
 
@@ -107,8 +115,8 @@ export default defineComponent({
         return { width: wlWidth.value, level: wlLevel.value };
       },
       set(selection: AutoRangeKey | PresetValue) {
-        const imageID = currentImageID.value;
-        const viewID = activeView.value;
+        const imageID = targetImageID.value;
+        const viewID = targetViewID.value;
         if (!imageID || !viewID) {
           return;
         }
@@ -139,8 +147,8 @@ export default defineComponent({
 
     // --- Tag WL Options --- //
     const tags = computed(() => {
-      if (currentImageID.value && isDicomImage(currentImageID.value)) {
-        const volKey = currentImageID.value;
+      if (targetImageID.value && isDicomImage(targetImageID.value)) {
+        const volKey = targetImageID.value;
         return getWindowLevels(dicomStore.volumeInfo[volKey]);
       }
       return [];
@@ -155,6 +163,8 @@ export default defineComponent({
       WLAutoRanges,
       displayWidth,
       displayLevel,
+      widthFocused,
+      levelFocused,
     };
   },
 });
@@ -173,6 +183,7 @@ export default defineComponent({
               :label="`Tag ${idx + 1} [W:${value.width},L:${value.level}]`"
               :value="value"
               density="compact"
+              @click="$emit('change')"
             />
           </div>
         </template>
@@ -186,6 +197,7 @@ export default defineComponent({
               :label="parseLabel(name)"
               :value="wl"
               density="compact"
+              @click="$emit('change')"
             />
           </div>
         </template>
@@ -198,6 +210,7 @@ export default defineComponent({
             :label="parseLabel(key)"
             :value="key"
             density="compact"
+            @click="$emit('change')"
           />
         </div>
       </v-radio-group>
@@ -207,15 +220,19 @@ export default defineComponent({
         <div class="manual-inputs">
           <v-text-field
             v-model.number="displayWidth"
+            v-model:focused="widthFocused"
             label="Window"
             type="number"
+            variant="underlined"
             density="compact"
             hide-details
           />
           <v-text-field
             v-model.number="displayLevel"
+            v-model:focused="levelFocused"
             label="Level"
             type="number"
+            variant="underlined"
             density="compact"
             hide-details
           />
diff --git a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
index 9cc07f56b..72166cbe3 100644
--- a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { toRefs, watchEffect, inject, onScopeDispose } from 'vue';
+import { nativeColorWindow } from '@/src/utils/nativeColorWindow';
+import { computed, toRefs, watchEffect, inject, onScopeDispose } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useResliceRepresentation } from '@/src/core/vtk/useResliceRepresentation';
+import { useBaseSliceColoring } from '@/src/composables/useBaseSliceColoring';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
@@ -34,7 +37,26 @@ const { imageData } = useImage(imageID);
 const wlConfig = useWindowingConfig(viewID, imageID);
 
 // setup base image
-const sliceRep = useResliceRepresentation(view, imageData);
+const components = computed(
+  () =>
+    imageData.value?.getPointData().getScalars()?.getNumberOfComponents() ?? 0
+);
+const renderInput = computed(() =>
+  components.value >= 1 && components.value <= 4 ? imageData.value : undefined
+);
+const sliceRep = useResliceRepresentation(view, renderInput);
+watchEffect(() => {
+  sliceRep.actor.setVisibility(wlConfig.config.value?.visibility ?? true);
+});
+useBaseSliceColoring(
+  sliceRep.property,
+  computed(() => wlConfig.config.value?.preset),
+  computed(
+    () =>
+      !!imageID.value && !isCineImage(imageID.value) && components.value === 1
+  ),
+  view.requestRender
+);
 
 // set slice ordering to be in the back
 sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
@@ -59,8 +81,20 @@ watchImmediate([planeNormal, planeOrigin], ([normal, origin]) => {
 
 // sync windowing
 watchEffect(() => {
-  sliceRep.property.setColorLevel(wlConfig.level.value);
-  sliceRep.property.setColorWindow(wlConfig.width.value);
+  const cine = !!imageID.value && isCineImage(imageID.value);
+  sliceRep.property.setIndependentComponents(false);
+  if (components.value > 1 || cine) {
+    const { width, level } = nativeColorWindow(
+      cine
+        ? 'Uint8Array'
+        : imageData.value?.getPointData().getScalars()?.getDataType()
+    );
+    sliceRep.property.setColorLevel(level);
+    sliceRep.property.setColorWindow(width);
+  } else {
+    sliceRep.property.setColorLevel(wlConfig.level.value);
+    sliceRep.property.setColorWindow(wlConfig.width.value);
+  }
 });
 
 defineExpose(sliceRep);
diff --git a/src/components/vtk/VtkBaseSliceRepresentation.vue b/src/components/vtk/VtkBaseSliceRepresentation.vue
index 11de7e378..ca102b96c 100644
--- a/src/components/vtk/VtkBaseSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseSliceRepresentation.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { nativeColorWindow } from '@/src/utils/nativeColorWindow';
 import { computed, toRefs, watchEffect, inject } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useBaseSliceColoring } from '@/src/composables/useBaseSliceColoring';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
 import { useCineRendering } from '@/src/composables/useCineRendering';
 import { LPSAxis } from '@/src/types/lps';
@@ -37,7 +39,23 @@ const { cine, mapperInput } = useCineRendering(
   () => props.frame
 );
 
-const sliceRep = useSliceRepresentation(view, mapperInput);
+const components = computed(
+  () =>
+    mapperInput.value?.getPointData().getScalars()?.getNumberOfComponents() ?? 0
+);
+const renderInput = computed(() =>
+  components.value >= 1 && components.value <= 4 ? mapperInput.value : undefined
+);
+const sliceRep = useSliceRepresentation(view, renderInput);
+watchEffect(() => {
+  sliceRep.actor.setVisibility(wlConfig.config.value?.visibility ?? true);
+});
+useBaseSliceColoring(
+  sliceRep.property,
+  computed(() => wlConfig.config.value?.preset),
+  computed(() => !cine.value && components.value === 1),
+  view.requestRender
+);
 
 // Push the base image behind layers/segmentations.
 sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
@@ -56,16 +74,20 @@ const slice = vtkFieldRef(sliceRep.mapper, 'slice');
 const renderSlice = computed(() => (cine.value ? 0 : sliceConfig.slice.value));
 syncRefs(renderSlice, slice, { immediate: true });
 
-// Cine pixels are 8-bit display-encoded — pin W/L to a full-byte pass-through
-// and skip the bidirectional wlConfig sync, which would otherwise overwrite
-// these with uninitialized defaults on first paint.
+// Cine and dependent color pixels bypass scalar window/level settings.
 const colorLevel = vtkFieldRef(sliceRep.property, 'colorLevel');
 const colorWindow = vtkFieldRef(sliceRep.property, 'colorWindow');
 
 watchEffect((onCleanup) => {
-  if (cine.value) {
-    colorWindow.value = 255;
-    colorLevel.value = 127.5;
+  sliceRep.property.setIndependentComponents(false);
+  if (cine.value || components.value > 1) {
+    const { width, level } = nativeColorWindow(
+      cine.value
+        ? 'Uint8Array'
+        : mapperInput.value?.getPointData().getScalars()?.getDataType()
+    );
+    colorWindow.value = width;
+    colorLevel.value = level;
     return;
   }
   const stopLevel = syncRefs(wlConfig.level, colorLevel, { immediate: true });
diff --git a/src/components/vtk/VtkLayerSliceRepresentation.vue b/src/components/vtk/VtkLayerSliceRepresentation.vue
index 1d5946f50..ef5c593d8 100644
--- a/src/components/vtk/VtkLayerSliceRepresentation.vue
+++ b/src/components/vtk/VtkLayerSliceRepresentation.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { nativeColorWindow } from '@/src/utils/nativeColorWindow';
 import { toRefs, watchEffect, inject, computed, onScopeDispose } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
@@ -37,17 +38,65 @@ const imageCacheStore = useImageCacheStore();
 const imageData = computed(() =>
   imageCacheStore.getVtkImageData(layerId.value)
 );
-const sliceRep = useSliceRepresentation(view, imageData);
+const componentCount = computed(
+  () =>
+    imageData.value?.getPointData().getScalars()?.getNumberOfComponents() ?? 0
+);
+const scalarImage = computed(() => componentCount.value === 1);
+const supportedImage = computed(() => [1, 3, 4].includes(componentCount.value));
+const mapperInput = computed(() =>
+  supportedImage.value ? imageData.value : undefined
+);
+const sliceRep = useSliceRepresentation(view, mapperInput);
+// Keep overlays in the same compositing pass as segments at every opacity.
+sliceRep.actor.setForceTranslucent(true);
 
 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.setUseLookupTableScalarRange(false);
+
+const backgroundFragment = computed(() => {
+  const config = coloringConfig.value;
+  if (!scalarImage.value || !(config?.transparentBackground ?? true)) return '';
+  const [min, max] = config.transferFunction.mappingRange;
+  const width = max - min;
+  if (!Number.isFinite(width) || width <= 0) {
+    return 'gl_FragData[0] = vec4(0.0);';
+  }
+  // Color coordinates track the display range without resampling preset opacity.
+  return 'gl_FragData[0] = vec4(tcolor, scalarOpacity * opacity * clamp(10.0 * (intensity * cscale0 + cshift0), 0.0, 1.0));';
+});
+
+watchEffect(() => {
+  const rgba = componentCount.value === 4;
+  const originalValue = rgba
+    ? 'texture2D(colorTexture1, vec2(tcolor.b,0.5)).r, tcolor.a);'
+    : 'gl_FragData[0] = vec4(tcolor, scalarOpacity * opacity);';
+  const replacementValue = rgba
+    ? 'texture2D(colorTexture1, vec2(tcolor.b,0.5)).r, tcolor.a * opacity);'
+    : backgroundFragment.value;
+  sliceRep.mapper.set({
+    viewSpecificProperties: {
+      OpenGL: {
+        ShaderReplacements: replacementValue
+          ? [
+              {
+                shaderType: 'Fragment',
+                originalValue,
+                replaceFirst: false,
+                replaceAll: false,
+                replacementValue,
+              },
+            ]
+          : [],
+      },
+    },
+  });
+  view.requestRender();
+});
 
 // set slice ordering to be in front of the segmentations
 sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
@@ -73,30 +122,37 @@ const applyLayerColoring = () => {
   const config = coloringConfig.value;
   if (!config) return;
 
-  const cfun = sliceRep.property.getRGBTransferFunction(0);
-  const ofun = sliceRep.property.getPiecewiseFunction(0);
-
-  if (!cfun || !ofun) throw new Error('Missing transfer functions');
-
-  applyColoring({
-    props: {
-      colorFunction: config.transferFunction,
-      opacityFunction: config.opacityFunction,
-    },
-    cfun,
-    ofun,
-  });
-
-  const { opacityFunction } = config;
-
-  const { mappingRange } = opacityFunction;
-  const width = mappingRange[1] - mappingRange[0];
-  const center = (mappingRange[1] + mappingRange[0]) / 2;
-
-  sliceRep.property.setColorWindow(width);
-  sliceRep.property.setColorLevel(center);
+  sliceRep.property.setIndependentComponents(false);
+  sliceRep.property.setUseLookupTableScalarRange(scalarImage.value);
+  sliceRep.property.setRGBTransferFunction(
+    0,
+    scalarImage.value ? ownedColorTransferFunction : null
+  );
+  sliceRep.property.setScalarOpacity(
+    0,
+    scalarImage.value ? ownedOpacityFunction : null
+  );
+  if (scalarImage.value) {
+    applyColoring({
+      props: {
+        colorFunction: config.transferFunction,
+        opacityFunction: config.opacityFunction,
+      },
+      cfun: ownedColorTransferFunction,
+      ofun: ownedOpacityFunction,
+    });
+  } else {
+    const { width, level } = nativeColorWindow(
+      mapperInput.value?.getPointData().getScalars()?.getDataType()
+    );
+    sliceRep.property.setColorWindow(width);
+    sliceRep.property.setColorLevel(level);
+  }
   sliceRep.property.setOpacity(config.blendConfig.opacity);
-  sliceRep.actor.setVisibility(config.blendConfig.visibility);
+  sliceRep.actor.setVisibility(
+    supportedImage.value && config.blendConfig.visibility
+  );
+  view.requestRender();
 };
 
 watchEffect(applyLayerColoring);
diff --git a/src/components/vtk/VtkSliceViewWindowManipulator.vue b/src/components/vtk/VtkSliceViewWindowManipulator.vue
index d47c069db..e1d490b82 100644
--- a/src/components/vtk/VtkSliceViewWindowManipulator.vue
+++ b/src/components/vtk/VtkSliceViewWindowManipulator.vue
@@ -49,7 +49,7 @@ const { instance: rangeManipulator } = useVtkInteractionManipulator(
 
 const wlConfig = useWindowingConfig(viewId, imageId);
 useResetViewsEvents().onClick(() => {
-  useWindowingStore().resetConfig(imageId.value, viewId.value);
+  useWindowingStore().resetConfig(wlConfig.viewID.value, imageId.value);
 });
 
 const computeStep = (range: Vector2) => {
diff --git a/src/composables/useBaseSliceColoring.ts b/src/composables/useBaseSliceColoring.ts
new file mode 100644
index 000000000..c04bdffd9
--- /dev/null
+++ b/src/composables/useBaseSliceColoring.ts
@@ -0,0 +1,30 @@
+import { MaybeRef, onScopeDispose, unref, watchEffect } from 'vue';
+import vtkImageProperty from '@kitware/vtk.js/Rendering/Core/ImageProperty';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import '@/src/vtk/ColorMaps';
+import { resolveBaseColorPreset } from '@/src/vtk/LayerColorPresets';
+
+export function useBaseSliceColoring(
+  property: vtkImageProperty,
+  preset: MaybeRef<string | undefined>,
+  enabled: MaybeRef<boolean>,
+  requestRender: () => void
+) {
+  const colors = vtkColorTransferFunction.newInstance();
+  onScopeDispose(() => colors.delete());
+  watchEffect(() => {
+    const name = resolveBaseColorPreset(unref(preset));
+    if (!unref(enabled) || name === 'Grayscale') {
+      property.setRGBTransferFunction(0, null);
+    } else {
+      colors.applyColorMap(vtkColorMaps.getPresetByName(name)!);
+      colors.setMappingRange(0, 1);
+      colors.updateRange();
+      property.setRGBTransferFunction(0, colors);
+    }
+    // The image property's window/level maps scalar values onto the palette.
+    property.setUseLookupTableScalarRange(false);
+    requestRender();
+  });
+}
diff --git a/src/composables/useWindowingConfig.ts b/src/composables/useWindowingConfig.ts
index 8de67ed56..81a558980 100644
--- a/src/composables/useWindowingConfig.ts
+++ b/src/composables/useWindowingConfig.ts
@@ -1,19 +1,24 @@
 import { useWindowingStore } from '@/src/store/view-configs/windowing';
 import { Maybe } from '@/src/types';
 import type { Vector2 } from '@kitware/vtk.js/types';
-import { MaybeRef, unref, computed } from 'vue';
+import { MaybeRef, unref, computed, inject, InjectionKey } from 'vue';
 import { useImageStatsStore } from '@/src/store/image-stats';
 
+export const WindowingViewContext: InjectionKey<MaybeRef<string>> = Symbol(
+  'WindowingViewContext'
+);
+
 export function useWindowingConfig(
   viewID: MaybeRef<string>,
   imageID: MaybeRef<Maybe<string>>
 ) {
+  const windowingViewID = inject(WindowingViewContext, viewID);
   const store = useWindowingStore();
   const imageStatsStore = useImageStatsStore();
   const config = computed(() => {
     const imageIdVal = unref(imageID);
     if (!imageIdVal) return undefined;
-    const viewIdVal = unref(viewID);
+    const viewIdVal = unref(windowingViewID);
     if (!viewIdVal) return undefined;
     return store.getConfig(viewIdVal, imageIdVal);
   });
@@ -28,7 +33,12 @@ export function useWindowingConfig(
       set: (val) => {
         const imageIdVal = unref(imageID);
         if (!imageIdVal || val == null) return;
-        store.updateConfig(unref(viewID), imageIdVal, { [prop]: val }, true);
+        store.updateConfig(
+          unref(windowingViewID),
+          imageIdVal,
+          { [prop]: val },
+          true
+        );
       },
     });
   };
@@ -43,6 +53,7 @@ export function useWindowingConfig(
   });
 
   return {
+    viewID: computed(() => unref(windowingViewID)),
     config,
     width: generateComputed('width'),
     level: generateComputed('level'),
diff --git a/src/config.ts b/src/config.ts
index 8e1b9d12a..e100b2324 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,9 +1,10 @@
-import MRICardiacThumbnail from '@/src/assets/samples/MRI-Cardiac.jpg';
 import MRIPROSTATExThumbnail from '@/src/assets/samples/MRI-PROSTATEx.jpg';
 import MRAHeadThumbnail from '@/src/assets/samples/MRA-Head_and_Neck.jpg';
 import CTAHeadThumbnail from '@/src/assets/samples/CTA-Head_and_Neck.jpg';
 import USFetusThumbnail from '@/src/assets/samples/3DUS-Fetus.jpg';
 import USCineThumbnail from '@/src/assets/samples/US-Cine.jpg';
+import { PET_CT_URLS } from './samples/petCT';
+import PETCTChestThumbnail from '@/src/assets/samples/PET-CT-Chest.png';
 import type { LayoutConfig } from './utils/layoutParsing';
 import type { ViewInfoInit } from './types/views';
 import { SampleDataset } from './types';
@@ -110,40 +111,28 @@ export const SAMPLE_DATA: SampleDataset[] = [
   {
     name: 'CTA Head and Neck',
     filename: 'CTA-Head_and_Neck.zip',
-    description:
-      'CTA head and neck scan of elderly patient with tumor. (80 MB)',
+    description: 'Head and neck CT angiography. 80 MB',
     url: 'https://data.kitware.com/api/v1/item/6347159711dab81428208e24/download',
     image: CTAHeadThumbnail,
   },
   {
     name: 'MRA Head and Neck',
     filename: 'MRA-Head_and_Neck.zip',
-    description:
-      'MRA from Patient Contributed Image Repository. Click application help icon "(?)" for more info. (15 MB)',
+    description: 'Head and neck MR angiography. 15 MB',
     url: 'https://data.kitware.com/api/v1/item/6352a2b311dab8142820a33b/download',
     image: MRAHeadThumbnail,
   },
-  {
-    name: 'MRI Cardiac 3D and Cine',
-    filename: 'MRI-Cardiac-3D_and_Cine.zip',
-    description:
-      'MRI scan with two series: 3D axial non-gated and 2 chamber cine. (4 MB)',
-    url: 'https://data.kitware.com/api/v1/item/6350b28f11dab8142820949d/download',
-    image: MRICardiacThumbnail,
-  },
   {
     name: 'MRI PROSTATEx',
     filename: 'MRI-PROSTATEx-0004.zip',
-    description:
-      'MRI from the SPIE-AAPM-NCI PROSTATEx challenge. Click application help "(?)" icon for more info. (3 MB)',
+    description: 'Prostate MRI. 3 MB',
     url: 'https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download',
     image: MRIPROSTATExThumbnail,
   },
   {
     name: '3D US Fetus',
     filename: '3DUS-Fetus.mha',
-    description:
-      '3D ultrasound of a baby. Downloaded from tomovision.com.(8 MB)',
+    description: '3D fetal ultrasound. 8 MB',
     url: 'https://data.kitware.com/api/v1/item/635679c311dab8142820a4f4/download',
     image: USFetusThumbnail,
     defaults: {
@@ -153,10 +142,20 @@ export const SAMPLE_DATA: SampleDataset[] = [
   {
     name: 'Ultrasound Cine',
     filename: 'US_multiframe_30frames.dcm',
-    description: '30-frame echocardiogram with cine playback. (225 KB)',
+    description: '30-frame echocardiogram with cine playback. 225 KB',
     url: 'https://raw.githubusercontent.com/pydicom/pydicom/v3.0.1/src/pydicom/data/test_files/examples_ybr_color.dcm',
     image: USCineThumbnail,
   },
+  {
+    name: 'PET/CT Chest',
+    description: 'PET layered over chest CT. 6 MB',
+    urls: PET_CT_URLS,
+    image: PETCTChestThumbnail,
+    overlay: {
+      baseModality: 'CT',
+      modality: 'PT',
+    },
+  },
 ];
 
 export const TOOL_COLORS = [
@@ -177,12 +176,6 @@ export const DEFAULT_PRESET_BY_MODALITY: Record<string, string> = {
 };
 export const DEFAULT_PRESET = 'CT-AAA';
 
-export const LAYER_PRESET_BY_MODALITY: Record<string, string> = {
-  ...DEFAULT_PRESET_BY_MODALITY,
-  PT: '2hot-opaque',
-};
-export const LAYER_PRESET_DEFAULT = '2hot-opaque';
-
 // Keyboard shortcuts/hotkeys. Can add modifiers: 'Shift+Ctrl+a'
 export const ACTION_TO_KEY = {
   windowLevel: 'l',
diff --git a/src/core/dicomTags.ts b/src/core/dicomTags.ts
index fe2e13cc7..d042b06ea 100644
--- a/src/core/dicomTags.ts
+++ b/src/core/dicomTags.ts
@@ -21,6 +21,7 @@ const tags: Tag[] = [
   { name: 'SeriesDescription', tag: '0008|103e' },
   { name: 'WindowLevel', tag: '0028|1050' },
   { name: 'WindowWidth', tag: '0028|1051' },
+  { name: 'VOILUTFunction', tag: '0028|1056' },
   { name: 'Rows', tag: '0028|0010' },
   { name: 'Columns', tag: '0028|0011' },
   { name: 'BitsAllocated', tag: '0028|0100' },
diff --git a/src/core/streaming/dicomChunkImage.ts b/src/core/streaming/dicomChunkImage.ts
index 1b3ab6026..b83edcf34 100644
--- a/src/core/streaming/dicomChunkImage.ts
+++ b/src/core/streaming/dicomChunkImage.ts
@@ -227,6 +227,8 @@ export default class DicomChunkImage
   }
 
   startLoad() {
+    if (this.chunkStatus.every((status) => status === ChunkStatus.Loaded))
+      return;
     this.chunks.forEach((chunk) => {
       chunk.loadData();
     });
@@ -250,12 +252,17 @@ export default class DicomChunkImage
   }
 
   private async addChunksInOrder(chunks: Chunk[]) {
-    this.unregisterChunkListeners();
-
     const existingIds = new Set(this.chunks.map((chunk) => getChunkId(chunk)));
     const newChunks = chunks.filter(
       (chunk) => !existingIds.has(getChunkId(chunk))
     );
+    if (
+      !newChunks.length &&
+      this.chunkStatus.every((status) => status === ChunkStatus.Loaded)
+    )
+      return;
+
+    this.unregisterChunkListeners();
     newChunks.forEach((chunk) => {
       this.chunks.push(chunk);
     });
diff --git a/src/core/thumbnailers/__tests__/vtk-image.spec.ts b/src/core/thumbnailers/__tests__/vtk-image.spec.ts
index 78bf19839..706550195 100644
--- a/src/core/thumbnailers/__tests__/vtk-image.spec.ts
+++ b/src/core/thumbnailers/__tests__/vtk-image.spec.ts
@@ -1,16 +1,21 @@
-import { describe, it, expect } from 'vitest';
+import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import { ThumbnailSlice } from '..';
 import { createVTKImageThumbnailer } from '../vtk-image';
 
-// workaround to get ImageData in the global scope
-/*
-global.ImageData = document
-  .createElement('canvas')
-  .getContext('2d')
-  ?.createImageData(1, 1).constructor as any;
-*/
+// Happy DOM has no canvas context or ImageData. Pixel generation only needs
+// an RGBA buffer; canvas drawing and JPEG encoding are outside these cases.
+class PixelBuffer {
+  readonly data: Uint8ClampedArray;
+
+  constructor(
+    public width: number,
+    public height: number
+  ) {
+    this.data = new Uint8ClampedArray(width * height * 4);
+  }
+}
 
 // creates a 3x3x3 image
 function createImageData() {
@@ -30,7 +35,19 @@ function i2o(x: number, y: number, z: number) {
   return z * 9 + y * 3 + x;
 }
 
-describe.skip('VTK Image Thumbnailer', () => {
+describe('VTK Image Thumbnailer', () => {
+  beforeEach(() => {
+    vi.stubGlobal('ImageData', PixelBuffer);
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(
+      {} as CanvasRenderingContext2D
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
   const SLICE_POSITION_WORDS = ['first', 'middle', 'last'];
   const SLICE_POSITIONS = [
     ThumbnailSlice.First,
@@ -45,19 +62,27 @@ describe.skip('VTK Image Thumbnailer', () => {
 
       it(`should thumbnail the ${sliceWord} slice on axis ${axis}`, () => {
         const { imageData, scalars } = createImageData();
-        const thumbnailer = createVTKImageThumbnailer();
-
-        const point: [number, number, number] = [1, 1, 1];
-        point[axis] = slice;
-        scalars[i2o(...point)] = 255;
+        try {
+          const thumbnailer = createVTKImageThumbnailer();
+          const point: [number, number, number] = [0, 1, 2];
+          point[axis] = slice;
+          scalars[i2o(...point)] = 255;
 
-        const im = thumbnailer.generate(
-          imageData,
-          axis as 0 | 1 | 2,
-          thumbSlice
-        );
-        // each pixel is rgba
-        expect(im.data[4 * 4]).to.equal(255);
+          const im = thumbnailer.generate(
+            imageData,
+            axis as 0 | 1 | 2,
+            thumbSlice
+          );
+          const markerPixel = [7, 6, 3][axis];
+          const expected = Array.from({ length: 9 }, (_, pixel) =>
+            pixel === markerPixel ? [255, 255, 255, 255] : [0, 0, 0, 255]
+          ).flat();
+          expect([im.width, im.height]).toEqual([3, 3]);
+          expect(Array.from(im.data)).toEqual(expected);
+        } finally {
+          imageData.getPointData().getScalars().delete();
+          imageData.delete();
+        }
       });
     }
   }
diff --git a/src/io/state-file/schema.ts b/src/io/state-file/schema.ts
index a5e7c2fe0..b29122073 100644
--- a/src/io/state-file/schema.ts
+++ b/src/io/state-file/schema.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_LAYER_PRESET } from '@/src/vtk/LayerColorPresets';
 import JSZip from 'jszip';
 import { z } from 'zod';
 import type { Vector3 } from '@kitware/vtk.js/types';
@@ -20,6 +21,7 @@ import type {
   SliceConfig,
   WindowLevelConfig,
   LayersConfig,
+  LayerDisplayConfig,
   VolumeColorConfig,
   CinePlaybackViewConfig,
 } from '@/src/store/view-configs/types';
@@ -139,6 +141,8 @@ const Vector3 = z.tuple([
 type AutoRangeKeys = keyof typeof WLAutoRanges;
 const WindowLevelConfig = z
   .object({
+    preset: z.string().default('Grayscale'),
+    visibility: z.boolean().default(true),
     width: z.number().optional(),
     level: z.number().optional(),
     auto: z.string() as z.ZodType<AutoRangeKeys>,
@@ -260,13 +264,24 @@ const BlendConfig = z.object({
   visibility: z.boolean(),
 }) satisfies z.ZodType<BlendConfig>;
 
+const LayerColorTransferFunction = ColorTransferFunction.extend({
+  preset: z.string().default(DEFAULT_LAYER_PRESET),
+});
+
 const LayersConfig = z.object({
   colorBy: ColorBy,
-  transferFunction: ColorTransferFunction,
+  transferFunction: LayerColorTransferFunction,
   opacityFunction: OpacityFunction,
   blendConfig: BlendConfig,
+  transparentBackground: z.boolean().default(true),
 }) satisfies z.ZodType<LayersConfig>;
 
+const LayerDisplayConfig = LayerColorTransferFunction.extend({
+  opacity: z.number(),
+  visibility: z.boolean().default(true),
+  transparentBackground: z.boolean().default(true),
+}) satisfies z.ZodType<LayerDisplayConfig>;
+
 const CinePlaybackViewConfig = z.object({
   frame: z.number(),
 }) satisfies z.ZodType<CinePlaybackViewConfig>;
@@ -517,6 +532,7 @@ export const ManifestSchema = z.object({
   layout: Layout.optional(),
   layoutSlots: z.array(z.string()).optional(),
   parentToLayers: ParentToLayers.optional(),
+  layerDisplay: z.record(z.string(), LayerDisplayConfig).optional(),
 });
 
 export type Manifest = z.infer<typeof ManifestSchema>;
diff --git a/src/io/state-file/serialize.ts b/src/io/state-file/serialize.ts
index 89b998bcb..9a835f2cb 100644
--- a/src/io/state-file/serialize.ts
+++ b/src/io/state-file/serialize.ts
@@ -247,6 +247,7 @@ export function normalizeManifest(manifest: Manifest, zip: JSZip) {
   // is assembled from the parsed pieces, so nothing is validated (or
   // deep-copied) twice.
   const optionalRoots = [
+    'layerDisplay',
     'tools',
     'segments',
     'selectedSegment',
diff --git a/src/samples/petCT.ts b/src/samples/petCT.ts
new file mode 100644
index 000000000..773871c32
--- /dev/null
+++ b/src/samples/petCT.ts
@@ -0,0 +1,22 @@
+export const PET_CT_URLS = [
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.125971577518855152164687925479',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.164470072637482892742730606415',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.645656839545863315258382059304',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.171033599854331402388163035916',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.757229251338810950547930294076',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.290313076131916328810257384513',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.167034157012705076112347098246',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.305525101475115108798705213666',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.180547818912813778100247492512',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.190211187176681563808826571096',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.330442471593744252750634668562',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.787146087385319992976365569088',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.754367593034585495537680981967',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.268694914226381205284654198517',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.273002091516249828143197374115',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.251520880093056497198942071424',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.254151550624375545322457061626',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.477776731601464757864806040291',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.831869199671510110705249657284',
+  'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.243468898389109491372438016818',
+];
diff --git a/src/samples/showSampleOverlay.ts b/src/samples/showSampleOverlay.ts
new file mode 100644
index 000000000..4fe999ef5
--- /dev/null
+++ b/src/samples/showSampleOverlay.ts
@@ -0,0 +1,26 @@
+import type { SampleDataset } from '@/src/types';
+import { useDICOMStore } from '@/src/store/datasets-dicom';
+import { useLayersStore } from '@/src/store/datasets-layers';
+import { useViewStore } from '@/src/store/views';
+import { useViewSliceStore } from '@/src/store/view-configs/slicing';
+import { untilLoaded } from '@/src/composables/untilLoaded';
+
+export async function showSampleOverlay(
+  selections: string[],
+  overlay: NonNullable<SampleDataset['overlay']>
+) {
+  const dicomStore = useDICOMStore();
+  const byModality = (modality: string) =>
+    selections.find((id) => dicomStore.volumeInfo[id]?.Modality === modality);
+  const base = byModality(overlay.baseModality);
+  const source = byModality(overlay.modality);
+  if (!base || !source)
+    throw new Error('Sample is missing a required modality');
+  await Promise.all([untilLoaded(base), untilLoaded(source)]);
+  const layerID = await useLayersStore().addLayer(base, source);
+  if (!layerID) throw new Error('Sample overlay could not be loaded');
+  const views = useViewStore();
+  views.setDataForAllViews(base);
+  const slices = useViewSliceStore();
+  views.viewIDs.forEach((viewID) => slices.resetSlice(viewID, base));
+}
diff --git a/src/store/datasets-layers.ts b/src/store/datasets-layers.ts
index f87ba8405..c5dd53f5f 100644
--- a/src/store/datasets-layers.ts
+++ b/src/store/datasets-layers.ts
@@ -6,6 +6,8 @@ import { Maybe } from '@/src/types';
 import { ensureSameSpace } from '@/src/io/resample/resample';
 import { useImageCacheStore } from '@/src/store/image-cache';
 import { NO_NAME } from '@/src/constants';
+import { getLayerId } from '@/src/utils/layers';
+import { useLayerColoringStore } from './view-configs/layers';
 import { useErrorMessage } from '../composables/useErrorMessage';
 import { Manifest, StateFile } from '../io/state-file/schema';
 import { untilLoaded } from '../composables/untilLoaded';
@@ -19,18 +21,10 @@ export const useLayersStore = defineStore('layer', () => {
   const imageCacheStore = useImageCacheStore();
 
   const parentToLayers = reactive<Record<string, Layer[]>>({});
+  const pendingLayers = new Map<string, Promise<string | undefined>>();
 
-  async function _addLayer(parent: DataSelection, source: DataSelection) {
-    if (!parent) {
-      throw new Error('Tried to addLayer without parent data selection');
-    }
-
-    const id = `${parent}::${source}` as string;
-    parentToLayers[parent] = [
-      ...(parentToLayers[parent] ?? []),
-      { selection: source, id } as Layer,
-    ];
-
+  async function buildLayerImage(parent: DataSelection, layer: Layer) {
+    const { selection: source, id } = layer;
     // ensureSameSpace need final image array to resample, so wait for all chunks
     await untilLoaded(source);
 
@@ -51,7 +45,6 @@ export const useLayersStore = defineStore('layer', () => {
         sourceImage.getBounds()
       )
     ) {
-      deleteLayer(parent, source);
       throw new Error(
         'Image bounds do not intersect, so no overlap in physical space'
       );
@@ -59,28 +52,41 @@ export const useLayersStore = defineStore('layer', () => {
 
     const image = await ensureSameSpace(parentImage, sourceImage);
     // Deleted while resampling: caching the image now would leave it unowned.
-    if (!parentToLayers[parent]?.some((layer) => layer.id === id))
-      return undefined;
+    if (!parentToLayers[parent]?.includes(layer)) return undefined;
 
     const name = imageCacheStore.getImageMetadata(source)?.name ?? NO_NAME;
     imageCacheStore.addVTKImageData(image, name, { id });
     return id;
   }
 
+  async function _addLayer(parent: DataSelection, source: DataSelection) {
+    if (!parent) {
+      throw new Error('Tried to addLayer without parent data selection');
+    }
+
+    const id = getLayerId(parent, source);
+    const pending = pendingLayers.get(id);
+    if (pending) return pending;
+    if (parentToLayers[parent]?.some((layer) => layer.id === id)) return id;
+
+    const layer = reactive({ selection: source, id });
+    parentToLayers[parent] = [...(parentToLayers[parent] ?? []), layer];
+    const task = buildLayerImage(parent, layer);
+    pendingLayers.set(id, task);
+    try {
+      return await task;
+    } catch (error) {
+      if (parentToLayers[parent]?.includes(layer)) deleteLayer(parent, source);
+      throw error;
+    } finally {
+      if (pendingLayers.get(id) === task) pendingLayers.delete(id);
+    }
+  }
+
   async function addLayer(parent: DataSelection, source: DataSelection) {
-    return useErrorMessage('Failed to build layer', async () => {
-      try {
-        return await _addLayer(parent, source);
-      } catch (error) {
-        // remove failed layer from parent's layer list
-        const layers = parentToLayers[parent];
-        if (layers)
-          parentToLayers[parent] = layers.filter(
-            ({ selection }) => selection !== source
-          );
-        throw error;
-      }
-    });
+    return useErrorMessage('Failed to build layer', () =>
+      _addLayer(parent, source)
+    );
   }
 
   function deleteLayer(parent: DataSelection, source: DataSelection) {
@@ -93,9 +99,13 @@ export const useLayersStore = defineStore('layer', () => {
     const layerToDelete = layers.find(({ selection }) => selection === source);
     if (!layerToDelete) return;
 
-    parentToLayers[parent] = layers.filter((layer) => layer !== layerToDelete);
+    parentToLayers[parent] = layers.filter(
+      (layer) => layer.id !== layerToDelete.id
+    );
 
+    pendingLayers.delete(layerToDelete.id);
     imageCacheStore.removeImage(layerToDelete.id);
+    useLayerColoringStore().removeData(layerToDelete.id);
   }
 
   function getLayers(key: Maybe<DataSelection>) {
diff --git a/src/store/image-stats.ts b/src/store/image-stats.ts
index 6f40bc3b6..64eb44787 100644
--- a/src/store/image-stats.ts
+++ b/src/store/image-stats.ts
@@ -21,10 +21,17 @@ import { useImageCacheStore } from './image-cache';
 import { useMessageStore } from './messages';
 import { isCineImage } from '@/src/core/cine/isCineImage';
 
+export type ImageHistogram = {
+  counts: readonly number[];
+  origin: number;
+  binWidth: number;
+};
+
 export type ImageStats = {
   scalarMin: number;
   scalarMax: number;
   autoRangeValues?: Record<string, [number, number]>;
+  histogram?: ImageHistogram;
 };
 
 function getRangesWithCache(scalars: vtkDataArray) {
@@ -48,10 +55,10 @@ function getAllComponentRange(scalars: vtkDataArray) {
   return { min, max };
 }
 
-async function computeAutoRangeValues(imageData: vtkImageData) {
+async function computeHistogramStats(imageData: vtkImageData) {
   const scalars = imageData.getPointData()?.getScalars();
   if (!scalars) {
-    return {};
+    return { autoRangeValues: {} };
   }
 
   const { min, max } = getAllComponentRange(scalars);
@@ -78,7 +85,7 @@ async function computeAutoRangeValues(imageData: vtkImageData) {
   const width = (max - min + 1) / WL_HIST_BINS;
   const totalCount = scalarData.length;
 
-  return Object.fromEntries(
+  const autoRangeValues = Object.fromEntries(
     Object.entries(WLAutoRanges).map(([key, percentage]) => {
       const lowerBound = percentage * 0.01 * totalCount;
       const upperBound = (1 - percentage * 0.01) * totalCount;
@@ -91,6 +98,10 @@ async function computeAutoRangeValues(imageData: vtkImageData) {
       return [key, [start, end] as [number, number]];
     })
   );
+  return {
+    autoRangeValues,
+    histogram: { counts: hist, origin: min, binWidth: width },
+  };
 }
 
 export const useImageStatsStore = defineStore('image-stats', () => {
@@ -101,7 +112,7 @@ export const useImageStatsStore = defineStore('image-stats', () => {
   const statsEffectScope: Record<string, EffectScope> = {};
   const autoRangeComputations: Record<
     string,
-    Promise<Record<string, [number, number]>>
+    ReturnType<typeof computeHistogramStats>
   > = {};
 
   const internalSetScalarRange = (
@@ -116,13 +127,13 @@ export const useImageStatsStore = defineStore('image-stats', () => {
     };
   };
 
-  const internalSetAutoRangeValues = (
+  const internalSetHistogramStats = (
     imageID: string,
-    autoValues: Record<string, [number, number]>
+    histogramStats: Awaited<ReturnType<typeof computeHistogramStats>>
   ) => {
     stats[imageID] = {
       ...stats[imageID],
-      autoRangeValues: autoValues,
+      ...histogramStats,
     };
   };
 
@@ -169,13 +180,13 @@ export const useImageStatsStore = defineStore('image-stats', () => {
     });
 
     const triggerAutoRangeComputation = (image: vtkImageData) => {
-      autoRangeComputations[id] = computeAutoRangeValues(image);
+      autoRangeComputations[id] = computeHistogramStats(image);
 
       autoRangeComputations[id]
-        .then((autoValues) => {
+        .then((histogramStats) => {
           if (imageCacheStore.imageIds.includes(id)) {
             // not deleted yet, save values
-            internalSetAutoRangeValues(id, autoValues);
+            internalSetHistogramStats(id, histogramStats);
           }
         })
         .catch((error) => {
diff --git a/src/store/view-configs.ts b/src/store/view-configs.ts
index 7dc0e9ac0..b07601838 100644
--- a/src/store/view-configs.ts
+++ b/src/store/view-configs.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { getLayerId } from '@/src/utils/layers';
 
 import useViewSliceStore from './view-configs/slicing';
 import { useWindowingStore } from './view-configs/windowing';
@@ -74,11 +75,31 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     manifest: StateFile['manifest'],
     dataIDMap: Record<string, string>
   ) => {
-    if (!manifest.viewByID) return;
+    // Layer images are rebuilt after view settings are restored.
+    const configIDMap = { ...dataIDMap };
+    manifest.parentToLayers?.forEach(
+      ({ selectionKey, sourceSelectionKeys }) => {
+        const parent = dataIDMap[selectionKey];
+        if (!parent) return;
+        sourceSelectionKeys.forEach((sourceKey) => {
+          const source = dataIDMap[sourceKey];
+          if (!source) return;
+          configIDMap[getLayerId(selectionKey, sourceKey)] = getLayerId(
+            parent,
+            source
+          );
+        });
+      }
+    );
+
+    layerColoringStore.deserializeDisplayConfigs(
+      manifest.layerDisplay ?? {},
+      configIDMap
+    );
 
-    Object.entries(manifest.viewByID).forEach(([viewID, view]) => {
+    Object.entries(manifest.viewByID ?? {}).forEach(([viewID, view]) => {
       if (view.config) {
-        deserialize(viewID, view.config, dataIDMap);
+        deserialize(viewID, view.config, configIDMap);
       }
     });
   };
diff --git a/src/store/view-configs/layers.ts b/src/store/view-configs/layers.ts
index 05a9b7850..2597c5dcd 100644
--- a/src/store/view-configs/layers.ts
+++ b/src/store/view-configs/layers.ts
@@ -13,34 +13,13 @@ import {
   patchDoubleKeyRecord,
 } from '@/src/utils/doubleKeyRecord';
 import { Maybe } from '@/src/types';
-import { identity } from '@/src/utils';
-import { LAYER_PRESET_BY_MODALITY, LAYER_PRESET_DEFAULT } from '@/src/config';
-import { isDicomImage } from '@/src/utils/dataSelection';
+import { resolveLayerColorPreset } from '@/src/vtk/LayerColorPresets';
 import { useImageCacheStore } from '@/src/store/image-cache';
-import { createViewConfigSerializer } from './common';
-import { ViewConfig } from '../../io/state-file/schema';
-import { LayersConfig } from './types';
+import DicomChunkImage from '@/src/core/streaming/dicomChunkImage';
+import { getConsistentDicomWindowRange } from '@/src/utils/dicomWindowRange';
+import { StateFile, ViewConfig } from '../../io/state-file/schema';
+import { LayerDisplayConfig, LayersConfig } from './types';
 import { useLayersStore } from '../datasets-layers';
-import { useDICOMStore } from '../datasets-dicom';
-
-function getPreset(id: string) {
-  const layersStore = useLayersStore();
-  const layer = layersStore.getLayer(id);
-  if (!layer) {
-    // A layer can be gone by the time its preset is asked for.
-    return LAYER_PRESET_DEFAULT;
-  }
-
-  if (isDicomImage(layer.selection)) {
-    const dicomStore = useDICOMStore();
-    const { Modality = undefined } = dicomStore.volumeInfo[layer.selection];
-    return (
-      (Modality && LAYER_PRESET_BY_MODALITY[Modality]) || LAYER_PRESET_DEFAULT
-    );
-  }
-
-  return LAYER_PRESET_DEFAULT;
-}
 
 export const defaultLayersConfig = (): LayersConfig => ({
   colorBy: {
@@ -48,58 +27,150 @@ export const defaultLayersConfig = (): LayersConfig => ({
     location: 'pointData',
   },
   transferFunction: {
-    preset: '',
+    preset: resolveLayerColorPreset(),
     mappingRange: [0, 1],
   },
-  // opacity function not used in VtkTwoView
   opacityFunction: {
-    mode: vtkPiecewiseFunctionProxy.Mode.Gaussians,
-    gaussians: [],
+    mode: vtkPiecewiseFunctionProxy.Mode.Nodes,
+    nodes: [
+      { x: 0, y: 1, midpoint: 0.5, sharpness: 0 },
+      { x: 1, y: 1, midpoint: 0.5, sharpness: 0 },
+    ],
     mappingRange: [0, 1],
   },
   blendConfig: { opacity: 0.3, visibility: true },
+  transparentBackground: true,
+});
+
+const normalizeConfig = (config: LayersConfig): LayersConfig => ({
+  ...config,
+  transferFunction: {
+    ...config.transferFunction,
+    preset: resolveLayerColorPreset(config.transferFunction.preset),
+  },
+});
+
+const displayFromConfig = (config: LayersConfig): LayerDisplayConfig => ({
+  preset: resolveLayerColorPreset(config.transferFunction.preset),
+  mappingRange: [...config.transferFunction.mappingRange],
+  opacity: config.blendConfig.opacity,
+  visibility: config.blendConfig.visibility ?? true,
+  transparentBackground: config.transparentBackground ?? true,
+});
+
+const applyDisplayPatch = (
+  config: LayersConfig,
+  display: Partial<LayerDisplayConfig>
+): LayersConfig => ({
+  ...config,
+  transparentBackground:
+    display.transparentBackground ?? config.transparentBackground ?? true,
+  transferFunction: {
+    ...config.transferFunction,
+    preset: resolveLayerColorPreset(
+      display.preset ?? config.transferFunction.preset
+    ),
+    mappingRange: [
+      ...(display.mappingRange ?? config.transferFunction.mappingRange),
+    ],
+  },
+  blendConfig: {
+    ...config.blendConfig,
+    opacity: display.opacity ?? config.blendConfig.opacity,
+    visibility: display.visibility ?? config.blendConfig.visibility ?? true,
+  },
 });
 
 export const useLayerColoringStore = defineStore('layerColoring', () => {
   const imageCacheStore = useImageCacheStore();
 
   const configs = reactive<DoubleKeyRecord<LayersConfig>>({});
+  const displayConfigs = reactive<Record<string, LayerDisplayConfig>>({});
 
   const computeDefaultConfig = (dataID: string): LayersConfig => {
     const defaults = defaultLayersConfig();
-    const preset = getPreset(dataID);
+    const preset = defaults.transferFunction.preset;
 
     const image = imageCacheStore.getVtkImageData(dataID);
     if (!image) return defaults;
 
     const imageDataRange = image.getPointData().getScalars().getRange();
 
+    const layer = useLayersStore().getLayer(dataID);
+    const source = layer && imageCacheStore.imageById[layer.selection];
+    const isPET =
+      source instanceof DicomChunkImage && source.getModality() === 'PT';
+    const dicomRange =
+      isPET && image.getPointData().getScalars().getNumberOfComponents() === 1
+        ? getConsistentDicomWindowRange(
+            source.getChunks().map((chunk) => chunk.metadata)
+          )
+        : undefined;
     const ctRange = getColorFunctionRangeFromPreset(preset);
     const ctFunc: Partial<ColorTransferFunction> = {
       preset,
-      mappingRange: ctRange || imageDataRange,
+      mappingRange: dicomRange ?? ctRange ?? imageDataRange,
     };
 
-    const opacityFunction = {
-      ...getOpacityFunctionFromPreset(preset),
-      mappingRange: imageDataRange,
-    };
+    const opacityFunction = getOpacityFunctionFromPreset(preset);
 
     return {
       ...defaults,
       transferFunction: { ...defaults.transferFunction, ...ctFunc },
-      opacityFunction,
+      blendConfig: {
+        ...defaults.blendConfig,
+        opacity: isPET ? 0.5 : defaults.blendConfig.opacity,
+      },
+      opacityFunction:
+        opacityFunction.mode === vtkPiecewiseFunctionProxy.Mode.Points
+          ? { ...opacityFunction, mappingRange: imageDataRange }
+          : defaults.opacityFunction,
     };
   };
 
+  const getDisplayConfig = (dataID: string) => {
+    const current = displayConfigs[dataID];
+    if (current) {
+      const preset = resolveLayerColorPreset(current.preset);
+      if (preset !== current.preset) {
+        displayConfigs[dataID] = { ...current, preset };
+      }
+      return displayConfigs[dataID];
+    }
+    const existing = Object.values(configs).find((view) => view[dataID])?.[
+      dataID
+    ];
+    const display = displayFromConfig(existing ?? computeDefaultConfig(dataID));
+    // Loading placeholders must not become the defaults for future views.
+    if (existing || imageCacheStore.getVtkImageData(dataID)) {
+      displayConfigs[dataID] = display;
+      return displayConfigs[dataID];
+    }
+    return display;
+  };
+
   const getConfig = (viewID: Maybe<string>, dataID: Maybe<string>) => {
     if (!viewID || !dataID) return defaultLayersConfig();
     const config = getDoubleKeyRecord(configs, viewID, dataID);
-    if (config) return config;
+    if (config) {
+      if (
+        config.transferFunction.preset !==
+        resolveLayerColorPreset(config.transferFunction.preset)
+      ) {
+        const normalized = normalizeConfig(config);
+        patchDoubleKeyRecord(configs, viewID, dataID, normalized);
+        return normalized;
+      }
+      return config;
+    }
 
-    // If no config exists, compute and store the default with proper preset
-    const defaultConfig = computeDefaultConfig(dataID);
-    patchDoubleKeyRecord(configs, viewID, dataID, defaultConfig);
+    const defaultConfig = applyDisplayPatch(
+      computeDefaultConfig(dataID),
+      getDisplayConfig(dataID)
+    );
+    if (imageCacheStore.getVtkImageData(dataID)) {
+      patchDoubleKeyRecord(configs, viewID, dataID, defaultConfig);
+    }
     return defaultConfig;
   };
 
@@ -108,59 +179,36 @@ export const useLayerColoringStore = defineStore('layerColoring', () => {
     dataID: string,
     patch: Partial<LayersConfig>
   ) => {
-    const config = {
+    const config = normalizeConfig({
       ...defaultLayersConfig(),
       ...getConfig(viewID, dataID),
       ...patch,
-    };
+    });
 
     patchDoubleKeyRecord(configs, viewID, dataID, config);
   };
 
-  const createUpdateFunc = <K extends keyof LayersConfig>(
-    key: K,
-    transform: (config: LayersConfig[K]) => LayersConfig[K] = identity
+  const updateDisplayConfig = (
+    dataID: string,
+    patch: Partial<LayerDisplayConfig>
   ) => {
-    return (
-      viewID: string,
-      dataID: string,
-      update: Partial<LayersConfig[K]>
-    ) => {
-      const config = getConfig(viewID, dataID) ?? defaultLayersConfig();
-      const updatedConfig = transform({
-        ...config[key],
-        ...update,
-      });
-      updateConfig(viewID, dataID, { [key]: updatedConfig });
-    };
-  };
-
-  const updateColorBy = createUpdateFunc('colorBy');
-  const updateColorTransferFunction = createUpdateFunc('transferFunction');
-  const updateOpacityFunction = createUpdateFunc('opacityFunction');
-  const updateBlendConfig = createUpdateFunc('blendConfig');
-
-  const setColorPreset = (viewID: string, layerID: string, preset: string) => {
-    const image = imageCacheStore.getVtkImageData(layerID);
-    if (!image) return;
-    const imageDataRange = image.getPointData().getScalars().getRange();
-
-    const ctRange = getColorFunctionRangeFromPreset(preset);
-    const ctFunc: Partial<ColorTransferFunction> = {
-      preset,
-      mappingRange: ctRange || imageDataRange,
-    };
-    updateColorTransferFunction(viewID, layerID, ctFunc);
-
-    const opFunc = {
-      ...getOpacityFunctionFromPreset(preset),
-      mappingRange: imageDataRange,
+    const current = getDisplayConfig(dataID);
+    displayConfigs[dataID] = {
+      ...current,
+      ...patch,
+      preset: resolveLayerColorPreset(patch.preset ?? current.preset),
+      visibility: patch.visibility ?? current.visibility ?? true,
+      transparentBackground:
+        patch.transparentBackground ?? current.transparentBackground ?? true,
+      mappingRange: patch.mappingRange
+        ? [...patch.mappingRange]
+        : current.mappingRange,
     };
-    updateOpacityFunction(viewID, layerID, opFunc);
-  };
-
-  const resetColorPreset = (viewID: string, layerID: string) => {
-    setColorPreset(viewID, layerID, getPreset(layerID));
+    Object.entries(configs).forEach(([viewID, viewConfigs]) => {
+      const config = viewConfigs[dataID];
+      if (config)
+        updateConfig(viewID, dataID, applyDisplayPatch(config, patch));
+    });
   };
 
   const removeView = (viewID: string) => {
@@ -172,14 +220,59 @@ export const useLayerColoringStore = defineStore('layerColoring', () => {
       delete configs[viewID]?.[dataID];
     } else {
       deleteSecondKey(configs, dataID);
+      delete displayConfigs[dataID];
     }
   };
 
-  const serialize = createViewConfigSerializer(configs, 'layers');
+  const serialize = ({ manifest }: StateFile) => {
+    const dataIDs = new Set((manifest.datasets ?? []).map(({ id }) => id));
+    const layerIDs = Object.entries(useLayersStore().parentToLayers).flatMap(
+      ([parent, layers]) =>
+        dataIDs.has(parent)
+          ? layers
+              .filter(({ selection }) => dataIDs.has(selection))
+              .map(({ id }) => id)
+          : []
+    );
+
+    manifest.layerDisplay = {};
+    layerIDs.forEach((layerID) => {
+      const display = displayConfigs[layerID];
+      if (display) {
+        manifest.layerDisplay![layerID] = {
+          ...display,
+          mappingRange: [...display.mappingRange],
+        };
+      }
+    });
+
+    Object.values(manifest.viewByID ?? {}).forEach((view) => {
+      layerIDs.forEach((layerID) => {
+        const config = configs[view.id]?.[layerID];
+        if (!config) return;
+        view.config ??= {};
+        view.config[layerID] ??= {};
+        view.config[layerID].layers = config;
+      });
+    });
+  };
+
+  const deserializeDisplayConfigs = (
+    saved: Record<string, LayerDisplayConfig>,
+    dataIDMap: Record<string, string>
+  ) => {
+    Object.entries(saved).forEach(([dataID, display]) => {
+      const mappedID = dataIDMap[dataID];
+      if (mappedID) {
+        updateDisplayConfig(mappedID, display);
+      }
+    });
+  };
 
   const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
     Object.entries(config).forEach(([dataID, viewConfig]) => {
       if (viewConfig.layers) {
+        displayConfigs[dataID] ??= displayFromConfig(viewConfig.layers);
         updateConfig(viewID, dataID, viewConfig.layers);
       }
     });
@@ -187,18 +280,15 @@ export const useLayerColoringStore = defineStore('layerColoring', () => {
 
   return {
     configs,
+    displayConfigs,
+    getDisplayConfig,
+    updateDisplayConfig,
     getConfig,
-    updateConfig,
-    updateColorBy,
-    updateColorTransferFunction,
-    updateOpacityFunction,
-    updateBlendConfig,
-    setColorPreset,
-    resetColorPreset,
     removeView,
     removeData,
     serialize,
     deserialize,
+    deserializeDisplayConfigs,
   };
 });
 
diff --git a/src/store/view-configs/types.ts b/src/store/view-configs/types.ts
index 6503e2fbd..23d60999f 100644
--- a/src/store/view-configs/types.ts
+++ b/src/store/view-configs/types.ts
@@ -34,6 +34,8 @@ export interface VolumeColorConfig {
 }
 
 export interface WindowLevelConfig {
+  preset?: string;
+  visibility?: boolean;
   width?: number;
   level?: number;
   auto: keyof typeof WLAutoRanges; // User-selected percentile range
@@ -41,7 +43,7 @@ export interface WindowLevelConfig {
   userTriggered?: boolean; // Whether the user has changed the window/level
 }
 
-export interface LayersConfig {
+export type LayersConfig = {
   colorBy: {
     arrayName: string;
     location: string;
@@ -49,7 +51,12 @@ export interface LayersConfig {
   transferFunction: ColorTransferFunction;
   opacityFunction: OpacityFunction;
   blendConfig: BlendConfig;
-}
+  transparentBackground: boolean;
+};
+
+export type LayerDisplayConfig = ColorTransferFunction &
+  Pick<BlendConfig, 'opacity' | 'visibility'> &
+  Pick<LayersConfig, 'transparentBackground'>;
 
 export interface CinePlaybackViewConfig {
   frame: number;
diff --git a/src/store/view-configs/windowing.ts b/src/store/view-configs/windowing.ts
index 02c2ef91f..cd1f3f7f9 100644
--- a/src/store/view-configs/windowing.ts
+++ b/src/store/view-configs/windowing.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { resolveBaseColorPreset } from '@/src/vtk/LayerColorPresets';
 import { markRaw, reactive, ref } from 'vue';
 import { createEventHook } from '@vueuse/core';
 import {
@@ -11,7 +12,7 @@ import { Maybe } from '@/src/types';
 import { WL_AUTO_DEFAULT } from '@/src/constants';
 import { useImageStatsStore } from '@/src/store/image-stats';
 import { createViewConfigSerializer } from '@/src/store/view-configs/common';
-import { ViewConfig } from '@/src/io/state-file/schema';
+import { StateFile, ViewConfig } from '@/src/io/state-file/schema';
 import { WindowLevelConfig } from '@/src/store/view-configs/types';
 import { isDicomImage } from '@/src/utils/dataSelection';
 import { getWindowLevels, useDICOMStore } from '@/src/store/datasets-dicom';
@@ -26,8 +27,15 @@ const minMaxToWidthLevel = (min: number, max: number) => ({
   level: (max + min) / 2,
 });
 
+const withAppearanceDefaults = (config: WindowLevelConfig) => ({
+  ...config,
+  preset: resolveBaseColorPreset(config.preset),
+  visibility: config.visibility ?? true,
+});
+
 export const defaultWindowLevelConfig = () =>
   ({
+    visibility: true,
     width: 1,
     level: 0.5,
     auto: WL_AUTO_DEFAULT,
@@ -75,12 +83,13 @@ export const useWindowingStore = defineStore('windowing', () => {
   };
 
   const getConfig = (viewID: string, dataID: string): WindowLevelConfig => {
-    const internalConfig =
+    const internalConfig = withAppearanceDefaults(
       getDoubleKeyRecord(configs, viewID, dataID) ??
-      computeDefaultConfig(dataID);
+        computeDefaultConfig(dataID)
+    );
 
     if (!internalConfig.useAuto) {
-      return { ...internalConfig };
+      return internalConfig;
     }
 
     const autoKey = internalConfig.auto;
@@ -92,7 +101,7 @@ export const useWindowingStore = defineStore('windowing', () => {
         ...minMaxToWidthLevel(min, max),
       };
     }
-    return { ...internalConfig };
+    return internalConfig;
   };
 
   const getInternalConfig = (viewID: Maybe<string>, dataID: Maybe<string>) =>
@@ -105,7 +114,7 @@ export const useWindowingStore = defineStore('windowing', () => {
     userTriggered = false
   ) => {
     const currentInternalConfig = getInternalConfig(viewID, dataID);
-    const defaults = defaultWindowLevelConfig();
+    const defaults = computeDefaultConfig(dataID);
 
     let effectiveUseAuto = currentInternalConfig?.useAuto ?? defaults.useAuto;
     let widthLevelPatchOnSwitchingFromAuto;
@@ -169,7 +178,20 @@ export const useWindowingStore = defineStore('windowing', () => {
     }
   };
 
-  const serialize = createViewConfigSerializer(configs, 'window');
+  const serialize = (stateFile: StateFile) => {
+    const savedConfigs = Object.fromEntries(
+      Object.entries(configs).map(([viewID, viewConfigs]) => [
+        viewID,
+        Object.fromEntries(
+          Object.entries(viewConfigs).map(([dataID, config]) => [
+            dataID,
+            withAppearanceDefaults(config),
+          ])
+        ),
+      ])
+    );
+    createViewConfigSerializer(savedConfigs, 'window')(stateFile);
+  };
 
   const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
     Object.entries(config).forEach(([dataID, viewConfig]) => {
diff --git a/src/store/views.ts b/src/store/views.ts
index b1039afea..2055a0237 100644
--- a/src/store/views.ts
+++ b/src/store/views.ts
@@ -206,7 +206,8 @@ export const useViewStore = defineStore('view', () => {
   }
 
   function addView(viewInit: ViewInfoInit) {
-    const id = idStore.nextId();
+    let id = idStore.nextId();
+    while (id in viewByID) id = idStore.nextId();
 
     const view = {
       id,
diff --git a/src/types/index.ts b/src/types/index.ts
index da5c51b35..34189e419 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -24,14 +24,16 @@ export type ProcessingResultSource = {
 
 export type SampleDataset = {
   name: string;
-  filename: string;
   description: string;
-  url: string;
   image: string;
   defaults?: {
     colorPreset?: string;
   };
-};
+  overlay?: {
+    baseModality: string;
+    modality: string;
+  };
+} & ({ url: string; filename: string } | { urls: string[] });
 
 /**
  * Sets certain keys to be required and the rest to optional.
diff --git a/src/utils/__tests__/dicomWindowRange.spec.ts b/src/utils/__tests__/dicomWindowRange.spec.ts
new file mode 100644
index 000000000..4481cbcd4
--- /dev/null
+++ b/src/utils/__tests__/dicomWindowRange.spec.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest';
+import { Tags } from '@/src/core/dicomTags';
+import { getConsistentDicomWindowRange } from '@/src/utils/dicomWindowRange';
+
+function windowTags(center: string, width: string, voiFunction?: string) {
+  return Object.entries({
+    [Tags.WindowLevel]: center,
+    [Tags.WindowWidth]: width,
+    ...(voiFunction === undefined
+      ? {}
+      : { [Tags.VOILUTFunction]: voiFunction }),
+  });
+}
+
+describe('DICOM window display range', () => {
+  it.each([
+    ['unsigned identity', '2048', '4096', undefined, [0, 4095]],
+    ['signed window', '0', '100', 'LINEAR', [-50, 49]],
+    ['fractional exact window', '0.5', '1', 'LINEAR_EXACT', [0, 1]],
+    ['sub-unit exact width', '0', '0.25', 'LINEAR_EXACT', [-0.125, 0.125]],
+  ] as const)(
+    'uses the standard boundaries for %s',
+    (_name, center, width, voiFunction, expected) => {
+      expect(
+        getConsistentDicomWindowRange([windowTags(center, width, voiFunction)])
+      ).toEqual(expected);
+    }
+  );
+
+  it('compares parsed values across chunks and defaults an absent function to LINEAR', () => {
+    expect(
+      getConsistentDicomWindowRange([
+        windowTags('1000', '2000'),
+        windowTags(' +1e3 ', '2.000E+3', ' LINEAR '),
+        windowTags('1000.0', '2000.', ''),
+      ])
+    ).toEqual([0, 1999]);
+  });
+
+  it('chooses the first paired alternative without mixing centers and widths', () => {
+    expect(
+      getConsistentDicomWindowRange([
+        windowTags('50\\500', '100\\1000'),
+        windowTags('50.0\\750', '1e2\\1500'),
+      ])
+    ).toEqual([0, 99]);
+  });
+
+  it.each([
+    ['no chunks', []],
+    ['missing first metadata', [undefined, windowTags('50', '100')]],
+    ['missing later metadata', [windowTags('50', '100'), null]],
+    ['missing center', [[[Tags.WindowWidth, '100']]]],
+    ['missing width', [[[Tags.WindowLevel, '50']]]],
+    ['different centers', [windowTags('50', '100'), windowTags('51', '100')]],
+    ['different widths', [windowTags('50', '100'), windowTags('50', '101')]],
+    [
+      'different functions',
+      [windowTags('50', '100'), windowTags('50', '100', 'LINEAR_EXACT')],
+    ],
+  ] as const)('rejects %s', (_name, metadata) => {
+    expect(getConsistentDicomWindowRange(metadata)).toBeUndefined();
+  });
+
+  it.each([
+    ['empty center', '', '100', undefined],
+    ['blank center', '   ', '100', undefined],
+    ['empty width', '50', '', undefined],
+    ['blank width', '50', '   ', undefined],
+    ['incomplete exponent', '1e-', '100', undefined],
+    ['trailing center text', '50abc', '100', undefined],
+    ['trailing width text', '50', '100abc', undefined],
+    ['hexadecimal center', '0x10', '100', undefined],
+    ['infinite center', 'Infinity', '100', undefined],
+    ['infinite width', '50', 'Infinity', undefined],
+    ['nonfinite decimal', '1e999', '100', undefined],
+    ['NaN center', 'NaN', '100', undefined],
+    ['zero width', '50', '0', undefined],
+    ['negative width', '50', '-100', undefined],
+    ['LINEAR threshold', '50', '1', undefined],
+    ['sub-unit LINEAR width', '50', '0.5', 'LINEAR'],
+    ['zero exact width', '50', '0', 'LINEAR_EXACT'],
+    ['SIGMOID function', '50', '100', 'SIGMOID'],
+    ['unknown function', '50', '100', 'CUSTOM'],
+    ['mismatched alternatives', '50\\500', '100', undefined],
+    ['blank alternative', '50\\', '100\\1000', undefined],
+    ['malformed alternative', '50\\bad', '100\\1000', undefined],
+    ['nonpositive alternative', '50\\500', '100\\0', undefined],
+    ['overflowing endpoint', '1.7e308', '1e308', 'LINEAR_EXACT'],
+    ['rounded equal endpoints', '1e20', '2', 'LINEAR_EXACT'],
+    ['underflowing half-width', '0', '5e-324', 'LINEAR_EXACT'],
+  ] as const)('rejects %s', (_name, center, width, voiFunction) => {
+    expect(
+      getConsistentDicomWindowRange([windowTags(center, width, voiFunction)])
+    ).toBeUndefined();
+  });
+});
diff --git a/src/utils/adjacentNumber.ts b/src/utils/adjacentNumber.ts
new file mode 100644
index 000000000..0a603f59f
--- /dev/null
+++ b/src/utils/adjacentNumber.ts
@@ -0,0 +1,9 @@
+// Adjacent floating-point values keep even very narrow windows from collapsing.
+export const adjacentNumber = (value: number, direction: number) => {
+  if (value === 0) return direction * Number.MIN_VALUE;
+  const view = new DataView(new ArrayBuffer(8));
+  view.setFloat64(0, value);
+  const bits = view.getBigUint64(0);
+  view.setBigUint64(0, bits + BigInt((value > 0 ? 1 : -1) * direction));
+  return view.getFloat64(0);
+};
diff --git a/src/utils/colorMapGradient.ts b/src/utils/colorMapGradient.ts
new file mode 100644
index 000000000..33c666b34
--- /dev/null
+++ b/src/utils/colorMapGradient.ts
@@ -0,0 +1,75 @@
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+
+type Range = readonly [number, number];
+const samples = new WeakMap<object, number[][]>();
+const clamp = (value: number) => Math.max(0, Math.min(1, value));
+
+function getSamples(
+  preset: NonNullable<ReturnType<typeof vtkColorMaps.getPresetByName>>
+) {
+  const cached = samples.get(preset);
+  if (cached) return cached;
+  const colors = vtkColorTransferFunction.newInstance();
+  colors.applyColorMap(preset);
+  colors.setMappingRange(0, 1);
+  colors.updateRange();
+  // Sample VTK interpolation so HSV and Lab palettes match the rendered image.
+  const result = Array.from({ length: 256 }, (_, index) => {
+    const rgb = [0, 0, 0];
+    colors.getColor(index / 255, rgb);
+    return rgb;
+  });
+  colors.delete();
+  samples.set(preset, result);
+  return result;
+}
+
+export function colorMapGradient(
+  name: string,
+  domain: Range = [0, 1],
+  mappingRange: Range = [0, 1],
+  transparentBackground = false
+) {
+  const preset = vtkColorMaps.getPresetByName(name);
+  const [low, high] = domain;
+  const [min, max] = mappingRange;
+  const width = max - min;
+  const span = high - low;
+  if (
+    !preset ||
+    ![...domain, ...mappingRange, span, width].every(Number.isFinite) ||
+    span < 0 ||
+    width <= 0
+  )
+    return undefined;
+  const colors = getSamples(preset);
+  const mix = (start: number, end: number, fraction: number) =>
+    start * (1 - fraction) + end * fraction;
+  // Sampling the window preserves narrow ramps within a much wider image range.
+  const values = [
+    low,
+    high,
+    mix(min, max, 0.1),
+    ...Array.from({ length: colors.length }, (_, index) =>
+      mix(min, max, index / (colors.length - 1))
+    ),
+  ].filter((value) => value >= low && value <= high);
+  const stops = [...new Set(values)]
+    .sort((a, b) => a - b)
+    .map((value) => {
+      const fraction =
+        value <= min ? 0 : value >= max ? 1 : (value - min) / width;
+      const index = clamp(fraction) * (colors.length - 1);
+      const first = Math.floor(index);
+      const second = Math.min(first + 1, colors.length - 1);
+      const rgb = colors[first].map((channel, component) =>
+        Math.round(mix(channel, colors[second][component], index - first) * 255)
+      );
+      const alpha = transparentBackground ? clamp(fraction * 10) : 1;
+      const position = span === 0 ? 0 : ((value - low) / span) * 100;
+      return `rgba(${rgb.join(',')},${alpha}) ${position}%`;
+    });
+  if (stops.length === 1) stops.push(stops[0].replace(' 0%', ' 100%'));
+  return `linear-gradient(to right, ${stops.join(',')})`;
+}
diff --git a/src/utils/dicomWindowRange.ts b/src/utils/dicomWindowRange.ts
new file mode 100644
index 000000000..e5cc03b6b
--- /dev/null
+++ b/src/utils/dicomWindowRange.ts
@@ -0,0 +1,56 @@
+import { Tags } from '@/src/core/dicomTags';
+
+type DicomMetadata = Iterable<readonly [string, string]> | null | undefined;
+
+const decimal = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/;
+const parseValues = (value?: string) =>
+  value
+    ?.split('\\')
+    .map((token) => (decimal.test(token.trim()) ? Number(token) : NaN)) ?? [];
+
+function readWindow(metadata: DicomMetadata) {
+  if (!metadata) return undefined;
+  const tags = Object.fromEntries(metadata);
+  const centers = parseValues(tags[Tags.WindowLevel]);
+  const widths = parseValues(tags[Tags.WindowWidth]);
+  const voiFunction =
+    tags[Tags.VOILUTFunction]?.trim().toUpperCase() || 'LINEAR';
+  if (
+    !centers.length ||
+    centers.length !== widths.length ||
+    !centers.every(Number.isFinite) ||
+    !widths.every((width) => Number.isFinite(width) && width > 0) ||
+    !['LINEAR', 'LINEAR_EXACT'].includes(voiFunction)
+  )
+    return undefined;
+  return { center: centers[0], width: widths[0], voiFunction };
+}
+
+export function getConsistentDicomWindowRange(
+  metadata: readonly DicomMetadata[]
+): [number, number] | undefined {
+  const windows = metadata.map(readWindow);
+  const first = windows[0];
+  if (
+    !first ||
+    !windows.every(
+      (window) =>
+        window?.center === first.center &&
+        window.width === first.width &&
+        window.voiFunction === first.voiFunction
+    )
+  )
+    return undefined;
+  // DICOM LINEAR has half-value offsets; LINEAR_EXACT uses the full width.
+  const offset = first.voiFunction === 'LINEAR' ? 1 : 0;
+  const center = first.center - offset / 2;
+  const halfWidth = (first.width - offset) / 2;
+  const min = center - halfWidth;
+  const max = center + halfWidth;
+  return Number.isFinite(min) &&
+    Number.isFinite(max) &&
+    min < max &&
+    Number.isFinite(max - min)
+    ? [min, max]
+    : undefined;
+}
diff --git a/src/utils/formatDisplayRange.ts b/src/utils/formatDisplayRange.ts
new file mode 100644
index 000000000..527efb5c9
--- /dev/null
+++ b/src/utils/formatDisplayRange.ts
@@ -0,0 +1,25 @@
+const compactNumber = (value: number) => {
+  const magnitude = Math.abs(value);
+  return magnitude !== 0 && (magnitude < 1e-4 || magnitude >= 1e6)
+    ? value.toExponential()
+    : String(value);
+};
+
+export function formatDisplayRange([min, max]: readonly [number, number]) {
+  const span = max - min;
+  if (Number.isFinite(span) && span > 0) {
+    for (let precision = 4; precision <= 17; precision += 1) {
+      const roundedMin = Number(min.toPrecision(precision));
+      const roundedMax = Number(max.toPrecision(precision));
+      // Divide by the span so subnormal intervals do not lose their tolerance.
+      if (
+        roundedMin < roundedMax &&
+        Math.abs(roundedMin - min) / span <= 0.001 &&
+        Math.abs(roundedMax - max) / span <= 0.001
+      ) {
+        return [compactNumber(roundedMin), compactNumber(roundedMax)] as const;
+      }
+    }
+  }
+  return [compactNumber(min), compactNumber(max)] as const;
+}
diff --git a/src/utils/layers.ts b/src/utils/layers.ts
new file mode 100644
index 000000000..95ffd3bb8
--- /dev/null
+++ b/src/utils/layers.ts
@@ -0,0 +1,2 @@
+export const getLayerId = (parent: string, source: string) =>
+  `${parent}::${source}`;
diff --git a/src/utils/nativeColorWindow.ts b/src/utils/nativeColorWindow.ts
new file mode 100644
index 000000000..95d1d23f8
--- /dev/null
+++ b/src/utils/nativeColorWindow.ts
@@ -0,0 +1,17 @@
+const nativeColorWidths: Record<string, number> = {
+  Uint8Array: 255,
+  Uint8ClampedArray: 255,
+  Uint16Array: 65535,
+  Uint32Array: 4294967295,
+  Int8Array: 127,
+  Int16Array: 32767,
+  Int32Array: 2147483647,
+  Float32Array: 1,
+  Float64Array: 1,
+};
+
+export function nativeColorWindow(dataType: string | undefined) {
+  // One zero-based range preserves channel proportions and transparent alpha.
+  const width = nativeColorWidths[dataType ?? 'Uint8Array'] ?? 255;
+  return { width, level: width / 2 };
+}
diff --git a/src/vtk/ColorMaps.ts b/src/vtk/ColorMaps.ts
index 0a52d9995..9852ebe5c 100644
--- a/src/vtk/ColorMaps.ts
+++ b/src/vtk/ColorMaps.ts
@@ -1,20 +1,10 @@
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import MedicalPresets from '@/src/vtk/MedicalColorPresets.json';
+import DicomPresets from '@/src/vtk/DicomColorPresets.json';
 
-function registerPresets(presets: typeof MedicalPresets) {
-  for (let i = 0; i < presets.length; i += 1) {
-    vtkColorMaps.addPreset(presets[i]);
-  }
-}
-
-registerPresets(MedicalPresets);
-
-const twoHotOpaque = {
-  ...vtkColorMaps.getPresetByName('2hot'),
-  Name: '2hot-opaque',
-  OpacityPoints: [0, 1],
-};
-vtkColorMaps.addPreset(twoHotOpaque);
+MedicalPresets.forEach(vtkColorMaps.addPreset);
+// DICOM PS3.6 Annex B: https://dicom.nema.org/medical/dicom/current/output/chtml/part06/chapter_B.html
+DicomPresets.forEach(vtkColorMaps.addPreset);
 
 /* prettier-ignore */
 const GroupedPresets = [
diff --git a/src/vtk/DicomColorPresets.json b/src/vtk/DicomColorPresets.json
new file mode 100644
index 000000000..de850ddaa
--- /dev/null
+++ b/src/vtk/DicomColorPresets.json
@@ -0,0 +1,1312 @@
+[
+  {
+    "Name": "DICOM Hot Iron",
+    "ColorSpace": "RGB",
+    "RGBPoints": [
+      0, 0, 0, 0,
+      1, 0.00784313725490196, 0, 0,
+      2, 0.01568627450980392, 0, 0,
+      3, 0.023529411764705882, 0, 0,
+      4, 0.03137254901960784, 0, 0,
+      5, 0.0392156862745098, 0, 0,
+      6, 0.047058823529411764, 0, 0,
+      7, 0.054901960784313725, 0, 0,
+      8, 0.06274509803921569, 0, 0,
+      9, 0.07058823529411765, 0, 0,
+      10, 0.0784313725490196, 0, 0,
+      11, 0.08627450980392157, 0, 0,
+      12, 0.09411764705882353, 0, 0,
+      13, 0.10196078431372549, 0, 0,
+      14, 0.10980392156862745, 0, 0,
+      15, 0.11764705882352941, 0, 0,
+      16, 0.12549019607843137, 0, 0,
+      17, 0.13333333333333333, 0, 0,
+      18, 0.1411764705882353, 0, 0,
+      19, 0.14901960784313725, 0, 0,
+      20, 0.1568627450980392, 0, 0,
+      21, 0.16470588235294117, 0, 0,
+      22, 0.17254901960784313, 0, 0,
+      23, 0.1803921568627451, 0, 0,
+      24, 0.18823529411764706, 0, 0,
+      25, 0.19607843137254902, 0, 0,
+      26, 0.20392156862745098, 0, 0,
+      27, 0.21176470588235294, 0, 0,
+      28, 0.2196078431372549, 0, 0,
+      29, 0.22745098039215686, 0, 0,
+      30, 0.23529411764705882, 0, 0,
+      31, 0.24313725490196078, 0, 0,
+      32, 0.25098039215686274, 0, 0,
+      33, 0.25882352941176473, 0, 0,
+      34, 0.26666666666666666, 0, 0,
+      35, 0.27450980392156865, 0, 0,
+      36, 0.2823529411764706, 0, 0,
+      37, 0.2901960784313726, 0, 0,
+      38, 0.2980392156862745, 0, 0,
+      39, 0.3058823529411765, 0, 0,
+      40, 0.3137254901960784, 0, 0,
+      41, 0.3215686274509804, 0, 0,
+      42, 0.32941176470588235, 0, 0,
+      43, 0.33725490196078434, 0, 0,
+      44, 0.34509803921568627, 0, 0,
+      45, 0.35294117647058826, 0, 0,
+      46, 0.3607843137254902, 0, 0,
+      47, 0.3686274509803922, 0, 0,
+      48, 0.3764705882352941, 0, 0,
+      49, 0.3843137254901961, 0, 0,
+      50, 0.39215686274509803, 0, 0,
+      51, 0.4, 0, 0,
+      52, 0.40784313725490196, 0, 0,
+      53, 0.41568627450980394, 0, 0,
+      54, 0.4235294117647059, 0, 0,
+      55, 0.43137254901960786, 0, 0,
+      56, 0.4392156862745098, 0, 0,
+      57, 0.4470588235294118, 0, 0,
+      58, 0.4549019607843137, 0, 0,
+      59, 0.4627450980392157, 0, 0,
+      60, 0.47058823529411764, 0, 0,
+      61, 0.47843137254901963, 0, 0,
+      62, 0.48627450980392156, 0, 0,
+      63, 0.49411764705882355, 0, 0,
+      64, 0.5019607843137255, 0, 0,
+      65, 0.5098039215686274, 0, 0,
+      66, 0.5176470588235295, 0, 0,
+      67, 0.5254901960784314, 0, 0,
+      68, 0.5333333333333333, 0, 0,
+      69, 0.5411764705882353, 0, 0,
+      70, 0.5490196078431373, 0, 0,
+      71, 0.5568627450980392, 0, 0,
+      72, 0.5647058823529412, 0, 0,
+      73, 0.5725490196078431, 0, 0,
+      74, 0.5803921568627451, 0, 0,
+      75, 0.5882352941176471, 0, 0,
+      76, 0.596078431372549, 0, 0,
+      77, 0.6039215686274509, 0, 0,
+      78, 0.611764705882353, 0, 0,
+      79, 0.6196078431372549, 0, 0,
+      80, 0.6274509803921569, 0, 0,
+      81, 0.6352941176470588, 0, 0,
+      82, 0.6431372549019608, 0, 0,
+      83, 0.6509803921568628, 0, 0,
+      84, 0.6588235294117647, 0, 0,
+      85, 0.6666666666666666, 0, 0,
+      86, 0.6745098039215687, 0, 0,
+      87, 0.6823529411764706, 0, 0,
+      88, 0.6901960784313725, 0, 0,
+      89, 0.6980392156862745, 0, 0,
+      90, 0.7058823529411765, 0, 0,
+      91, 0.7137254901960784, 0, 0,
+      92, 0.7215686274509804, 0, 0,
+      93, 0.7294117647058823, 0, 0,
+      94, 0.7372549019607844, 0, 0,
+      95, 0.7450980392156863, 0, 0,
+      96, 0.7529411764705882, 0, 0,
+      97, 0.7607843137254902, 0, 0,
+      98, 0.7686274509803922, 0, 0,
+      99, 0.7764705882352941, 0, 0,
+      100, 0.7843137254901961, 0, 0,
+      101, 0.792156862745098, 0, 0,
+      102, 0.8, 0, 0,
+      103, 0.807843137254902, 0, 0,
+      104, 0.8156862745098039, 0, 0,
+      105, 0.8235294117647058, 0, 0,
+      106, 0.8313725490196079, 0, 0,
+      107, 0.8392156862745098, 0, 0,
+      108, 0.8470588235294118, 0, 0,
+      109, 0.8549019607843137, 0, 0,
+      110, 0.8627450980392157, 0, 0,
+      111, 0.8705882352941177, 0, 0,
+      112, 0.8784313725490196, 0, 0,
+      113, 0.8862745098039215, 0, 0,
+      114, 0.8941176470588236, 0, 0,
+      115, 0.9019607843137255, 0, 0,
+      116, 0.9098039215686274, 0, 0,
+      117, 0.9176470588235294, 0, 0,
+      118, 0.9254901960784314, 0, 0,
+      119, 0.9333333333333333, 0, 0,
+      120, 0.9411764705882353, 0, 0,
+      121, 0.9490196078431372, 0, 0,
+      122, 0.9568627450980393, 0, 0,
+      123, 0.9647058823529412, 0, 0,
+      124, 0.9725490196078431, 0, 0,
+      125, 0.9803921568627451, 0, 0,
+      126, 0.9882352941176471, 0, 0,
+      127, 0.996078431372549, 0, 0,
+      128, 1, 0, 0,
+      129, 1, 0.00784313725490196, 0,
+      130, 1, 0.01568627450980392, 0,
+      131, 1, 0.023529411764705882, 0,
+      132, 1, 0.03137254901960784, 0,
+      133, 1, 0.0392156862745098, 0,
+      134, 1, 0.047058823529411764, 0,
+      135, 1, 0.054901960784313725, 0,
+      136, 1, 0.06274509803921569, 0,
+      137, 1, 0.07058823529411765, 0,
+      138, 1, 0.0784313725490196, 0,
+      139, 1, 0.08627450980392157, 0,
+      140, 1, 0.09411764705882353, 0,
+      141, 1, 0.10196078431372549, 0,
+      142, 1, 0.10980392156862745, 0,
+      143, 1, 0.11764705882352941, 0,
+      144, 1, 0.12549019607843137, 0,
+      145, 1, 0.13333333333333333, 0,
+      146, 1, 0.1411764705882353, 0,
+      147, 1, 0.14901960784313725, 0,
+      148, 1, 0.1568627450980392, 0,
+      149, 1, 0.16470588235294117, 0,
+      150, 1, 0.17254901960784313, 0,
+      151, 1, 0.1803921568627451, 0,
+      152, 1, 0.18823529411764706, 0,
+      153, 1, 0.19607843137254902, 0,
+      154, 1, 0.20392156862745098, 0,
+      155, 1, 0.21176470588235294, 0,
+      156, 1, 0.2196078431372549, 0,
+      157, 1, 0.22745098039215686, 0,
+      158, 1, 0.23529411764705882, 0,
+      159, 1, 0.24313725490196078, 0,
+      160, 1, 0.25098039215686274, 0,
+      161, 1, 0.25882352941176473, 0,
+      162, 1, 0.26666666666666666, 0,
+      163, 1, 0.27450980392156865, 0,
+      164, 1, 0.2823529411764706, 0,
+      165, 1, 0.2901960784313726, 0,
+      166, 1, 0.2980392156862745, 0,
+      167, 1, 0.3058823529411765, 0,
+      168, 1, 0.3137254901960784, 0,
+      169, 1, 0.3215686274509804, 0,
+      170, 1, 0.32941176470588235, 0,
+      171, 1, 0.33725490196078434, 0,
+      172, 1, 0.34509803921568627, 0,
+      173, 1, 0.35294117647058826, 0,
+      174, 1, 0.3607843137254902, 0,
+      175, 1, 0.3686274509803922, 0,
+      176, 1, 0.3764705882352941, 0,
+      177, 1, 0.3843137254901961, 0,
+      178, 1, 0.39215686274509803, 0,
+      179, 1, 0.4, 0,
+      180, 1, 0.40784313725490196, 0,
+      181, 1, 0.41568627450980394, 0,
+      182, 1, 0.4235294117647059, 0,
+      183, 1, 0.43137254901960786, 0,
+      184, 1, 0.4392156862745098, 0,
+      185, 1, 0.4470588235294118, 0,
+      186, 1, 0.4549019607843137, 0,
+      187, 1, 0.4627450980392157, 0,
+      188, 1, 0.47058823529411764, 0,
+      189, 1, 0.47843137254901963, 0,
+      190, 1, 0.48627450980392156, 0,
+      191, 1, 0.49411764705882355, 0,
+      192, 1, 0.5019607843137255, 0.01568627450980392,
+      193, 1, 0.5098039215686274, 0.03137254901960784,
+      194, 1, 0.5176470588235295, 0.047058823529411764,
+      195, 1, 0.5254901960784314, 0.06274509803921569,
+      196, 1, 0.5333333333333333, 0.0784313725490196,
+      197, 1, 0.5411764705882353, 0.09411764705882353,
+      198, 1, 0.5490196078431373, 0.10980392156862745,
+      199, 1, 0.5568627450980392, 0.12549019607843137,
+      200, 1, 0.5647058823529412, 0.1411764705882353,
+      201, 1, 0.5725490196078431, 0.1568627450980392,
+      202, 1, 0.5803921568627451, 0.17254901960784313,
+      203, 1, 0.5882352941176471, 0.18823529411764706,
+      204, 1, 0.596078431372549, 0.20392156862745098,
+      205, 1, 0.6039215686274509, 0.2196078431372549,
+      206, 1, 0.611764705882353, 0.23529411764705882,
+      207, 1, 0.6196078431372549, 0.25098039215686274,
+      208, 1, 0.6274509803921569, 0.26666666666666666,
+      209, 1, 0.6352941176470588, 0.2823529411764706,
+      210, 1, 0.6431372549019608, 0.2980392156862745,
+      211, 1, 0.6509803921568628, 0.3137254901960784,
+      212, 1, 0.6588235294117647, 0.32941176470588235,
+      213, 1, 0.6666666666666666, 0.34509803921568627,
+      214, 1, 0.6745098039215687, 0.3607843137254902,
+      215, 1, 0.6823529411764706, 0.3764705882352941,
+      216, 1, 0.6901960784313725, 0.39215686274509803,
+      217, 1, 0.6980392156862745, 0.40784313725490196,
+      218, 1, 0.7058823529411765, 0.4235294117647059,
+      219, 1, 0.7137254901960784, 0.4392156862745098,
+      220, 1, 0.7215686274509804, 0.4549019607843137,
+      221, 1, 0.7294117647058823, 0.47058823529411764,
+      222, 1, 0.7372549019607844, 0.48627450980392156,
+      223, 1, 0.7450980392156863, 0.5019607843137255,
+      224, 1, 0.7529411764705882, 0.5176470588235295,
+      225, 1, 0.7607843137254902, 0.5333333333333333,
+      226, 1, 0.7686274509803922, 0.5490196078431373,
+      227, 1, 0.7764705882352941, 0.5647058823529412,
+      228, 1, 0.7843137254901961, 0.5803921568627451,
+      229, 1, 0.792156862745098, 0.596078431372549,
+      230, 1, 0.8, 0.611764705882353,
+      231, 1, 0.807843137254902, 0.6274509803921569,
+      232, 1, 0.8156862745098039, 0.6431372549019608,
+      233, 1, 0.8235294117647058, 0.6588235294117647,
+      234, 1, 0.8313725490196079, 0.6745098039215687,
+      235, 1, 0.8392156862745098, 0.6901960784313725,
+      236, 1, 0.8470588235294118, 0.7058823529411765,
+      237, 1, 0.8549019607843137, 0.7215686274509804,
+      238, 1, 0.8627450980392157, 0.7372549019607844,
+      239, 1, 0.8705882352941177, 0.7529411764705882,
+      240, 1, 0.8784313725490196, 0.7686274509803922,
+      241, 1, 0.8862745098039215, 0.7843137254901961,
+      242, 1, 0.8941176470588236, 0.8,
+      243, 1, 0.9019607843137255, 0.8156862745098039,
+      244, 1, 0.9098039215686274, 0.8313725490196079,
+      245, 1, 0.9176470588235294, 0.8470588235294118,
+      246, 1, 0.9254901960784314, 0.8627450980392157,
+      247, 1, 0.9333333333333333, 0.8784313725490196,
+      248, 1, 0.9411764705882353, 0.8941176470588236,
+      249, 1, 0.9490196078431372, 0.9098039215686274,
+      250, 1, 0.9568627450980393, 0.9254901960784314,
+      251, 1, 0.9647058823529412, 0.9411764705882353,
+      252, 1, 0.9725490196078431, 0.9568627450980393,
+      253, 1, 0.9803921568627451, 0.9725490196078431,
+      254, 1, 0.9882352941176471, 0.9882352941176471,
+      255, 1, 1, 1
+    ]
+  },
+  {
+    "Name": "DICOM PET",
+    "ColorSpace": "RGB",
+    "RGBPoints": [
+      0, 0, 0, 0,
+      1, 0, 0.00784313725490196, 0.00392156862745098,
+      2, 0, 0.01568627450980392, 0.011764705882352941,
+      3, 0, 0.023529411764705882, 0.0196078431372549,
+      4, 0, 0.03137254901960784, 0.027450980392156862,
+      5, 0, 0.0392156862745098, 0.03529411764705882,
+      6, 0, 0.047058823529411764, 0.043137254901960784,
+      7, 0, 0.054901960784313725, 0.050980392156862744,
+      8, 0, 0.06274509803921569, 0.058823529411764705,
+      9, 0, 0.07058823529411765, 0.06666666666666667,
+      10, 0, 0.0784313725490196, 0.07450980392156863,
+      11, 0, 0.08627450980392157, 0.08235294117647059,
+      12, 0, 0.09411764705882353, 0.09019607843137255,
+      13, 0, 0.10196078431372549, 0.09803921568627451,
+      14, 0, 0.10980392156862745, 0.10588235294117647,
+      15, 0, 0.11764705882352941, 0.11372549019607843,
+      16, 0, 0.12549019607843137, 0.12156862745098039,
+      17, 0, 0.13333333333333333, 0.12941176470588237,
+      18, 0, 0.1411764705882353, 0.13725490196078433,
+      19, 0, 0.14901960784313725, 0.1450980392156863,
+      20, 0, 0.1568627450980392, 0.15294117647058825,
+      21, 0, 0.16470588235294117, 0.1607843137254902,
+      22, 0, 0.17254901960784313, 0.16862745098039217,
+      23, 0, 0.1803921568627451, 0.17647058823529413,
+      24, 0, 0.18823529411764706, 0.1843137254901961,
+      25, 0, 0.19607843137254902, 0.19215686274509805,
+      26, 0, 0.20392156862745098, 0.2,
+      27, 0, 0.21176470588235294, 0.20784313725490197,
+      28, 0, 0.2196078431372549, 0.21568627450980393,
+      29, 0, 0.22745098039215686, 0.2235294117647059,
+      30, 0, 0.23529411764705882, 0.23137254901960785,
+      31, 0, 0.24313725490196078, 0.23921568627450981,
+      32, 0, 0.2549019607843137, 0.24705882352941178,
+      33, 0, 0.2627450980392157, 0.2549019607843137,
+      34, 0, 0.27058823529411763, 0.2627450980392157,
+      35, 0, 0.2784313725490196, 0.27058823529411763,
+      36, 0, 0.28627450980392155, 0.2784313725490196,
+      37, 0, 0.29411764705882354, 0.28627450980392155,
+      38, 0, 0.30196078431372547, 0.29411764705882354,
+      39, 0, 0.30980392156862746, 0.30196078431372547,
+      40, 0, 0.3176470588235294, 0.30980392156862746,
+      41, 0, 0.3254901960784314, 0.3176470588235294,
+      42, 0, 0.3333333333333333, 0.3254901960784314,
+      43, 0, 0.3411764705882353, 0.3333333333333333,
+      44, 0, 0.34901960784313724, 0.3411764705882353,
+      45, 0, 0.3568627450980392, 0.34901960784313724,
+      46, 0, 0.36470588235294116, 0.3568627450980392,
+      47, 0, 0.37254901960784315, 0.36470588235294116,
+      48, 0, 0.3803921568627451, 0.37254901960784315,
+      49, 0, 0.38823529411764707, 0.3803921568627451,
+      50, 0, 0.396078431372549, 0.38823529411764707,
+      51, 0, 0.403921568627451, 0.396078431372549,
+      52, 0, 0.4117647058823529, 0.403921568627451,
+      53, 0, 0.4196078431372549, 0.4117647058823529,
+      54, 0, 0.42745098039215684, 0.4196078431372549,
+      55, 0, 0.43529411764705883, 0.42745098039215684,
+      56, 0, 0.44313725490196076, 0.43529411764705883,
+      57, 0, 0.45098039215686275, 0.44313725490196076,
+      58, 0, 0.4588235294117647, 0.45098039215686275,
+      59, 0, 0.4666666666666667, 0.4588235294117647,
+      60, 0, 0.4745098039215686, 0.4666666666666667,
+      61, 0, 0.4823529411764706, 0.4745098039215686,
+      62, 0, 0.49019607843137253, 0.4823529411764706,
+      63, 0, 0.5019607843137255, 0.49019607843137253,
+      64, 0.00392156862745098, 0.49411764705882355, 0.4980392156862745,
+      65, 0.011764705882352941, 0.48627450980392156, 0.5058823529411764,
+      66, 0.0196078431372549, 0.47843137254901963, 0.5137254901960784,
+      67, 0.027450980392156862, 0.47058823529411764, 0.5215686274509804,
+      68, 0.03529411764705882, 0.4627450980392157, 0.5294117647058824,
+      69, 0.043137254901960784, 0.4549019607843137, 0.5372549019607843,
+      70, 0.050980392156862744, 0.4470588235294118, 0.5450980392156862,
+      71, 0.058823529411764705, 0.4392156862745098, 0.5529411764705883,
+      72, 0.06666666666666667, 0.43137254901960786, 0.5607843137254902,
+      73, 0.07450980392156863, 0.4235294117647059, 0.5686274509803921,
+      74, 0.08235294117647059, 0.41568627450980394, 0.5764705882352941,
+      75, 0.09019607843137255, 0.40784313725490196, 0.5843137254901961,
+      76, 0.09803921568627451, 0.4, 0.592156862745098,
+      77, 0.10588235294117647, 0.39215686274509803, 0.6,
+      78, 0.11372549019607843, 0.3843137254901961, 0.6078431372549019,
+      79, 0.12156862745098039, 0.3764705882352941, 0.615686274509804,
+      80, 0.12941176470588237, 0.3686274509803922, 0.6235294117647059,
+      81, 0.13725490196078433, 0.3607843137254902, 0.6313725490196078,
+      82, 0.1450980392156863, 0.35294117647058826, 0.6392156862745098,
+      83, 0.15294117647058825, 0.34509803921568627, 0.6470588235294118,
+      84, 0.1607843137254902, 0.33725490196078434, 0.6549019607843137,
+      85, 0.16862745098039217, 0.32941176470588235, 0.6627450980392157,
+      86, 0.17647058823529413, 0.3215686274509804, 0.6705882352941176,
+      87, 0.1843137254901961, 0.3137254901960784, 0.6784313725490196,
+      88, 0.19215686274509805, 0.3058823529411765, 0.6862745098039216,
+      89, 0.2, 0.2980392156862745, 0.6941176470588235,
+      90, 0.20784313725490197, 0.2901960784313726, 0.7019607843137254,
+      91, 0.21568627450980393, 0.2823529411764706, 0.7098039215686275,
+      92, 0.2235294117647059, 0.27450980392156865, 0.7176470588235294,
+      93, 0.23137254901960785, 0.26666666666666666, 0.7254901960784313,
+      94, 0.23921568627450981, 0.25882352941176473, 0.7333333333333333,
+      95, 0.24705882352941178, 0.25098039215686274, 0.7411764705882353,
+      96, 0.2549019607843137, 0.24705882352941178, 0.7490196078431373,
+      97, 0.2627450980392157, 0.23921568627450981, 0.7568627450980392,
+      98, 0.27058823529411763, 0.23137254901960785, 0.7647058823529411,
+      99, 0.2784313725490196, 0.2235294117647059, 0.7725490196078432,
+      100, 0.28627450980392155, 0.21568627450980393, 0.7803921568627451,
+      101, 0.29411764705882354, 0.20784313725490197, 0.788235294117647,
+      102, 0.30196078431372547, 0.2, 0.796078431372549,
+      103, 0.30980392156862746, 0.19215686274509805, 0.803921568627451,
+      104, 0.3176470588235294, 0.1843137254901961, 0.8117647058823529,
+      105, 0.3254901960784314, 0.17647058823529413, 0.8196078431372549,
+      106, 0.3333333333333333, 0.16862745098039217, 0.8274509803921568,
+      107, 0.33725490196078434, 0.1607843137254902, 0.8352941176470589,
+      108, 0.34509803921568627, 0.15294117647058825, 0.8431372549019608,
+      109, 0.35294117647058826, 0.1450980392156863, 0.8509803921568627,
+      110, 0.3607843137254902, 0.13725490196078433, 0.8588235294117647,
+      111, 0.3686274509803922, 0.12941176470588237, 0.8666666666666667,
+      112, 0.3764705882352941, 0.12156862745098039, 0.8745098039215686,
+      113, 0.3843137254901961, 0.11372549019607843, 0.8823529411764706,
+      114, 0.39215686274509803, 0.10588235294117647, 0.8901960784313725,
+      115, 0.4, 0.09803921568627451, 0.8980392156862745,
+      116, 0.40784313725490196, 0.09019607843137255, 0.9058823529411765,
+      117, 0.41568627450980394, 0.08235294117647059, 0.9137254901960784,
+      118, 0.4235294117647059, 0.07450980392156863, 0.9215686274509803,
+      119, 0.43137254901960786, 0.06666666666666667, 0.9294117647058824,
+      120, 0.4392156862745098, 0.058823529411764705, 0.9372549019607843,
+      121, 0.4470588235294118, 0.050980392156862744, 0.9450980392156862,
+      122, 0.4549019607843137, 0.043137254901960784, 0.9529411764705882,
+      123, 0.4627450980392157, 0.03529411764705882, 0.9607843137254902,
+      124, 0.47058823529411764, 0.027450980392156862, 0.9686274509803922,
+      125, 0.47843137254901963, 0.0196078431372549, 0.9764705882352941,
+      126, 0.48627450980392156, 0.011764705882352941, 0.984313725490196,
+      127, 0.49411764705882355, 0.00392156862745098, 0.9921568627450981,
+      128, 0.5019607843137255, 0, 1,
+      129, 0.5098039215686274, 0.00784313725490196, 0.9882352941176471,
+      130, 0.5176470588235295, 0.01568627450980392, 0.9725490196078431,
+      131, 0.5254901960784314, 0.023529411764705882, 0.9568627450980393,
+      132, 0.5333333333333333, 0.03137254901960784, 0.9411764705882353,
+      133, 0.5411764705882353, 0.0392156862745098, 0.9254901960784314,
+      134, 0.5490196078431373, 0.047058823529411764, 0.9098039215686274,
+      135, 0.5568627450980392, 0.054901960784313725, 0.8941176470588236,
+      136, 0.5647058823529412, 0.06274509803921569, 0.8784313725490196,
+      137, 0.5725490196078431, 0.07058823529411765, 0.8627450980392157,
+      138, 0.5803921568627451, 0.0784313725490196, 0.8470588235294118,
+      139, 0.5882352941176471, 0.08627450980392157, 0.8313725490196079,
+      140, 0.596078431372549, 0.09411764705882353, 0.8156862745098039,
+      141, 0.6039215686274509, 0.10196078431372549, 0.8,
+      142, 0.611764705882353, 0.10980392156862745, 0.7843137254901961,
+      143, 0.6196078431372549, 0.11764705882352941, 0.7686274509803922,
+      144, 0.6274509803921569, 0.12549019607843137, 0.7529411764705882,
+      145, 0.6352941176470588, 0.13333333333333333, 0.7372549019607844,
+      146, 0.6431372549019608, 0.1411764705882353, 0.7215686274509804,
+      147, 0.6509803921568628, 0.14901960784313725, 0.7058823529411765,
+      148, 0.6588235294117647, 0.1568627450980392, 0.6901960784313725,
+      149, 0.6666666666666666, 0.16470588235294117, 0.6745098039215687,
+      150, 0.6705882352941176, 0.17254901960784313, 0.6588235294117647,
+      151, 0.6784313725490196, 0.1803921568627451, 0.6431372549019608,
+      152, 0.6862745098039216, 0.18823529411764706, 0.6274509803921569,
+      153, 0.6941176470588235, 0.19607843137254902, 0.611764705882353,
+      154, 0.7019607843137254, 0.20392156862745098, 0.596078431372549,
+      155, 0.7098039215686275, 0.21176470588235294, 0.5803921568627451,
+      156, 0.7176470588235294, 0.2196078431372549, 0.5647058823529412,
+      157, 0.7254901960784313, 0.22745098039215686, 0.5490196078431373,
+      158, 0.7333333333333333, 0.23529411764705882, 0.5333333333333333,
+      159, 0.7411764705882353, 0.24313725490196078, 0.5176470588235295,
+      160, 0.7490196078431373, 0.25098039215686274, 0.5019607843137255,
+      161, 0.7568627450980392, 0.25882352941176473, 0.48627450980392156,
+      162, 0.7647058823529411, 0.26666666666666666, 0.47058823529411764,
+      163, 0.7725490196078432, 0.27450980392156865, 0.4549019607843137,
+      164, 0.7803921568627451, 0.2823529411764706, 0.4392156862745098,
+      165, 0.788235294117647, 0.2901960784313726, 0.4235294117647059,
+      166, 0.796078431372549, 0.2980392156862745, 0.40784313725490196,
+      167, 0.803921568627451, 0.3058823529411765, 0.39215686274509803,
+      168, 0.8117647058823529, 0.3137254901960784, 0.3764705882352941,
+      169, 0.8196078431372549, 0.3215686274509804, 0.3607843137254902,
+      170, 0.8274509803921568, 0.32941176470588235, 0.34509803921568627,
+      171, 0.8352941176470589, 0.33725490196078434, 0.32941176470588235,
+      172, 0.8431372549019608, 0.34509803921568627, 0.3137254901960784,
+      173, 0.8509803921568627, 0.35294117647058826, 0.2980392156862745,
+      174, 0.8588235294117647, 0.3607843137254902, 0.2823529411764706,
+      175, 0.8666666666666667, 0.3686274509803922, 0.26666666666666666,
+      176, 0.8745098039215686, 0.3764705882352941, 0.25098039215686274,
+      177, 0.8823529411764706, 0.3843137254901961, 0.23529411764705882,
+      178, 0.8901960784313725, 0.39215686274509803, 0.2196078431372549,
+      179, 0.8980392156862745, 0.4, 0.20392156862745098,
+      180, 0.9058823529411765, 0.40784313725490196, 0.18823529411764706,
+      181, 0.9137254901960784, 0.41568627450980394, 0.17254901960784313,
+      182, 0.9215686274509803, 0.4235294117647059, 0.1568627450980392,
+      183, 0.9294117647058824, 0.43137254901960786, 0.1411764705882353,
+      184, 0.9372549019607843, 0.4392156862745098, 0.12549019607843137,
+      185, 0.9450980392156862, 0.4470588235294118, 0.10980392156862745,
+      186, 0.9529411764705882, 0.4549019607843137, 0.09411764705882353,
+      187, 0.9607843137254902, 0.4627450980392157, 0.0784313725490196,
+      188, 0.9686274509803922, 0.47058823529411764, 0.06274509803921569,
+      189, 0.9764705882352941, 0.47843137254901963, 0.047058823529411764,
+      190, 0.984313725490196, 0.48627450980392156, 0.03137254901960784,
+      191, 0.9921568627450981, 0.49411764705882355, 0.01568627450980392,
+      192, 1, 0.5019607843137255, 0,
+      193, 1, 0.5098039215686274, 0.01568627450980392,
+      194, 1, 0.5176470588235295, 0.03137254901960784,
+      195, 1, 0.5254901960784314, 0.047058823529411764,
+      196, 1, 0.5333333333333333, 0.06274509803921569,
+      197, 1, 0.5411764705882353, 0.0784313725490196,
+      198, 1, 0.5490196078431373, 0.09411764705882353,
+      199, 1, 0.5568627450980392, 0.10980392156862745,
+      200, 1, 0.5647058823529412, 0.12549019607843137,
+      201, 1, 0.5725490196078431, 0.1411764705882353,
+      202, 1, 0.5803921568627451, 0.1568627450980392,
+      203, 1, 0.5882352941176471, 0.17254901960784313,
+      204, 1, 0.596078431372549, 0.18823529411764706,
+      205, 1, 0.6039215686274509, 0.20392156862745098,
+      206, 1, 0.611764705882353, 0.2196078431372549,
+      207, 1, 0.6196078431372549, 0.23529411764705882,
+      208, 1, 0.6274509803921569, 0.25098039215686274,
+      209, 1, 0.6352941176470588, 0.26666666666666666,
+      210, 1, 0.6431372549019608, 0.2823529411764706,
+      211, 1, 0.6509803921568628, 0.2980392156862745,
+      212, 1, 0.6588235294117647, 0.3137254901960784,
+      213, 1, 0.6666666666666666, 0.3333333333333333,
+      214, 1, 0.6745098039215687, 0.34901960784313724,
+      215, 1, 0.6823529411764706, 0.36470588235294116,
+      216, 1, 0.6901960784313725, 0.3803921568627451,
+      217, 1, 0.6980392156862745, 0.396078431372549,
+      218, 1, 0.7058823529411765, 0.4117647058823529,
+      219, 1, 0.7137254901960784, 0.42745098039215684,
+      220, 1, 0.7215686274509804, 0.44313725490196076,
+      221, 1, 0.7294117647058823, 0.4588235294117647,
+      222, 1, 0.7372549019607844, 0.4745098039215686,
+      223, 1, 0.7450980392156863, 0.49019607843137253,
+      224, 1, 0.7529411764705882, 0.5058823529411764,
+      225, 1, 0.7607843137254902, 0.5215686274509804,
+      226, 1, 0.7686274509803922, 0.5372549019607843,
+      227, 1, 0.7764705882352941, 0.5529411764705883,
+      228, 1, 0.7843137254901961, 0.5686274509803921,
+      229, 1, 0.792156862745098, 0.5843137254901961,
+      230, 1, 0.8, 0.6,
+      231, 1, 0.807843137254902, 0.615686274509804,
+      232, 1, 0.8156862745098039, 0.6313725490196078,
+      233, 1, 0.8235294117647058, 0.6470588235294118,
+      234, 1, 0.8313725490196079, 0.6666666666666666,
+      235, 1, 0.8392156862745098, 0.6823529411764706,
+      236, 1, 0.8470588235294118, 0.6980392156862745,
+      237, 1, 0.8549019607843137, 0.7137254901960784,
+      238, 1, 0.8627450980392157, 0.7294117647058823,
+      239, 1, 0.8705882352941177, 0.7450980392156863,
+      240, 1, 0.8784313725490196, 0.7607843137254902,
+      241, 1, 0.8862745098039215, 0.7764705882352941,
+      242, 1, 0.8941176470588236, 0.792156862745098,
+      243, 1, 0.9019607843137255, 0.807843137254902,
+      244, 1, 0.9098039215686274, 0.8235294117647058,
+      245, 1, 0.9176470588235294, 0.8392156862745098,
+      246, 1, 0.9254901960784314, 0.8549019607843137,
+      247, 1, 0.9333333333333333, 0.8705882352941177,
+      248, 1, 0.9411764705882353, 0.8862745098039215,
+      249, 1, 0.9490196078431372, 0.9019607843137255,
+      250, 1, 0.9568627450980393, 0.9176470588235294,
+      251, 1, 0.9647058823529412, 0.9333333333333333,
+      252, 1, 0.9725490196078431, 0.9490196078431372,
+      253, 1, 0.9803921568627451, 0.9647058823529412,
+      254, 1, 0.9882352941176471, 0.9803921568627451,
+      255, 1, 1, 1
+    ]
+  },
+  {
+    "Name": "DICOM Hot Metal Blue",
+    "ColorSpace": "RGB",
+    "RGBPoints": [
+      0, 0, 0, 0,
+      1, 0, 0, 0.00784313725490196,
+      2, 0, 0, 0.01568627450980392,
+      3, 0, 0, 0.023529411764705882,
+      4, 0, 0, 0.03137254901960784,
+      5, 0, 0, 0.0392156862745098,
+      6, 0, 0, 0.047058823529411764,
+      7, 0, 0, 0.054901960784313725,
+      8, 0, 0, 0.06274509803921569,
+      9, 0, 0, 0.06666666666666667,
+      10, 0, 0, 0.07450980392156863,
+      11, 0, 0, 0.08235294117647059,
+      12, 0, 0, 0.09019607843137255,
+      13, 0, 0, 0.09803921568627451,
+      14, 0, 0, 0.10588235294117647,
+      15, 0, 0, 0.11372549019607843,
+      16, 0, 0, 0.12156862745098039,
+      17, 0, 0, 0.12941176470588237,
+      18, 0, 0, 0.13725490196078433,
+      19, 0, 0, 0.1450980392156863,
+      20, 0, 0, 0.15294117647058825,
+      21, 0, 0, 0.1607843137254902,
+      22, 0, 0, 0.16862745098039217,
+      23, 0, 0, 0.17647058823529413,
+      24, 0, 0, 0.1843137254901961,
+      25, 0, 0, 0.19215686274509805,
+      26, 0, 0, 0.2,
+      27, 0, 0, 0.20784313725490197,
+      28, 0, 0, 0.21568627450980393,
+      29, 0, 0, 0.2235294117647059,
+      30, 0, 0, 0.23137254901960785,
+      31, 0, 0, 0.23921568627450981,
+      32, 0, 0, 0.24705882352941178,
+      33, 0, 0, 0.2549019607843137,
+      34, 0, 0, 0.2627450980392157,
+      35, 0, 0, 0.27058823529411763,
+      36, 0, 0, 0.2784313725490196,
+      37, 0, 0, 0.28627450980392155,
+      38, 0, 0, 0.29411764705882354,
+      39, 0, 0, 0.30196078431372547,
+      40, 0, 0, 0.30980392156862746,
+      41, 0, 0, 0.3176470588235294,
+      42, 0, 0, 0.3254901960784314,
+      43, 0, 0, 0.32941176470588235,
+      44, 0, 0, 0.33725490196078434,
+      45, 0, 0, 0.34509803921568627,
+      46, 0, 0, 0.35294117647058826,
+      47, 0, 0, 0.3607843137254902,
+      48, 0, 0, 0.3686274509803922,
+      49, 0, 0, 0.3764705882352941,
+      50, 0, 0, 0.3843137254901961,
+      51, 0, 0, 0.39215686274509803,
+      52, 0, 0, 0.4,
+      53, 0, 0, 0.40784313725490196,
+      54, 0, 0, 0.41568627450980394,
+      55, 0, 0, 0.4235294117647059,
+      56, 0, 0, 0.43137254901960786,
+      57, 0, 0, 0.4392156862745098,
+      58, 0, 0, 0.4470588235294118,
+      59, 0, 0, 0.4549019607843137,
+      60, 0, 0, 0.4588235294117647,
+      61, 0, 0, 0.4666666666666667,
+      62, 0, 0, 0.4745098039215686,
+      63, 0, 0, 0.4823529411764706,
+      64, 0, 0, 0.49019607843137253,
+      65, 0, 0, 0.4980392156862745,
+      66, 0, 0, 0.5058823529411764,
+      67, 0, 0, 0.5137254901960784,
+      68, 0, 0, 0.5215686274509804,
+      69, 0, 0, 0.5294117647058824,
+      70, 0, 0, 0.5372549019607843,
+      71, 0, 0, 0.5450980392156862,
+      72, 0, 0, 0.5529411764705883,
+      73, 0, 0, 0.5607843137254902,
+      74, 0, 0, 0.5686274509803921,
+      75, 0, 0, 0.5764705882352941,
+      76, 0, 0, 0.5843137254901961,
+      77, 0, 0, 0.592156862745098,
+      78, 0, 0, 0.6,
+      79, 0, 0, 0.6078431372549019,
+      80, 0, 0, 0.615686274509804,
+      81, 0, 0, 0.6235294117647059,
+      82, 0, 0, 0.6313725490196078,
+      83, 0, 0, 0.6392156862745098,
+      84, 0, 0, 0.6470588235294118,
+      85, 0, 0, 0.6549019607843137,
+      86, 0.011764705882352941, 0, 0.6627450980392157,
+      87, 0.023529411764705882, 0, 0.6705882352941176,
+      88, 0.03529411764705882, 0, 0.6784313725490196,
+      89, 0.047058823529411764, 0, 0.6862745098039216,
+      90, 0.058823529411764705, 0, 0.6941176470588235,
+      91, 0.07058823529411765, 0, 0.7019607843137254,
+      92, 0.08235294117647059, 0, 0.7098039215686275,
+      93, 0.09411764705882353, 0, 0.7176470588235294,
+      94, 0.10196078431372549, 0, 0.7215686274509804,
+      95, 0.11372549019607843, 0, 0.7294117647058823,
+      96, 0.12549019607843137, 0, 0.7372549019607844,
+      97, 0.13725490196078433, 0, 0.7450980392156863,
+      98, 0.14901960784313725, 0, 0.7529411764705882,
+      99, 0.1607843137254902, 0, 0.7607843137254902,
+      100, 0.17254901960784313, 0, 0.7686274509803922,
+      101, 0.1843137254901961, 0, 0.7764705882352941,
+      102, 0.19607843137254902, 0, 0.7843137254901961,
+      103, 0.20392156862745098, 0, 0.7725490196078432,
+      104, 0.21568627450980393, 0, 0.7607843137254902,
+      105, 0.2235294117647059, 0, 0.7490196078431373,
+      106, 0.23137254901960785, 0, 0.7372549019607844,
+      107, 0.24313725490196078, 0, 0.7254901960784313,
+      108, 0.25098039215686274, 0, 0.7137254901960784,
+      109, 0.25882352941176473, 0, 0.7019607843137254,
+      110, 0.27058823529411763, 0, 0.6901960784313725,
+      111, 0.2784313725490196, 0, 0.6823529411764706,
+      112, 0.2901960784313726, 0, 0.6705882352941176,
+      113, 0.2980392156862745, 0, 0.6588235294117647,
+      114, 0.3058823529411765, 0, 0.6470588235294118,
+      115, 0.3176470588235294, 0, 0.6352941176470588,
+      116, 0.3254901960784314, 0, 0.6235294117647059,
+      117, 0.3333333333333333, 0, 0.611764705882353,
+      118, 0.34509803921568627, 0, 0.6,
+      119, 0.35294117647058826, 0, 0.5882352941176471,
+      120, 0.36470588235294116, 0.00784313725490196, 0.5647058823529412,
+      121, 0.3764705882352941, 0.01568627450980392, 0.5411764705882353,
+      122, 0.38823529411764707, 0.023529411764705882, 0.5176470588235295,
+      123, 0.4, 0.03137254901960784, 0.49411764705882355,
+      124, 0.4117647058823529, 0.03529411764705882, 0.4745098039215686,
+      125, 0.4235294117647059, 0.043137254901960784, 0.45098039215686275,
+      126, 0.43529411764705883, 0.050980392156862744, 0.42745098039215684,
+      127, 0.4470588235294118, 0.058823529411764705, 0.403921568627451,
+      128, 0.4549019607843137, 0.06666666666666667, 0.3803921568627451,
+      129, 0.4666666666666667, 0.07450980392156863, 0.3568627450980392,
+      130, 0.47843137254901963, 0.08235294117647059, 0.3333333333333333,
+      131, 0.49019607843137253, 0.09019607843137255, 0.30980392156862746,
+      132, 0.5019607843137255, 0.09411764705882353, 0.2901960784313726,
+      133, 0.5137254901960784, 0.10196078431372549, 0.26666666666666666,
+      134, 0.5254901960784314, 0.10980392156862745, 0.24313725490196078,
+      135, 0.5372549019607843, 0.11764705882352941, 0.2196078431372549,
+      136, 0.5490196078431373, 0.12549019607843137, 0.19607843137254902,
+      137, 0.5607843137254902, 0.13333333333333333, 0.1843137254901961,
+      138, 0.5725490196078431, 0.1411764705882353, 0.17254901960784313,
+      139, 0.5843137254901961, 0.14901960784313725, 0.1607843137254902,
+      140, 0.596078431372549, 0.1568627450980392, 0.14901960784313725,
+      141, 0.6078431372549019, 0.1607843137254902, 0.13725490196078433,
+      142, 0.6196078431372549, 0.16862745098039217, 0.12549019607843137,
+      143, 0.6313725490196078, 0.17647058823529413, 0.11372549019607843,
+      144, 0.6431372549019608, 0.1843137254901961, 0.10196078431372549,
+      145, 0.6509803921568628, 0.19215686274509805, 0.09411764705882353,
+      146, 0.6627450980392157, 0.2, 0.08235294117647059,
+      147, 0.6745098039215687, 0.20784313725490197, 0.07058823529411765,
+      148, 0.6862745098039216, 0.21568627450980393, 0.058823529411764705,
+      149, 0.6980392156862745, 0.2196078431372549, 0.047058823529411764,
+      150, 0.7098039215686275, 0.22745098039215686, 0.03529411764705882,
+      151, 0.7215686274509804, 0.23529411764705882, 0.023529411764705882,
+      152, 0.7333333333333333, 0.24313725490196078, 0.011764705882352941,
+      153, 0.7450980392156863, 0.25098039215686274, 0,
+      154, 0.7607843137254902, 0.25882352941176473, 0,
+      155, 0.7764705882352941, 0.26666666666666666, 0,
+      156, 0.788235294117647, 0.27450980392156865, 0,
+      157, 0.803921568627451, 0.2823529411764706, 0,
+      158, 0.8196078431372549, 0.28627450980392155, 0,
+      159, 0.8352941176470589, 0.29411764705882354, 0,
+      160, 0.8509803921568627, 0.30196078431372547, 0,
+      161, 0.8666666666666667, 0.30980392156862746, 0,
+      162, 0.8784313725490196, 0.3176470588235294, 0,
+      163, 0.8941176470588236, 0.3254901960784314, 0,
+      164, 0.9098039215686274, 0.3333333333333333, 0,
+      165, 0.9254901960784314, 0.3411764705882353, 0,
+      166, 0.9411764705882353, 0.34509803921568627, 0,
+      167, 0.9568627450980393, 0.35294117647058826, 0,
+      168, 0.9686274509803922, 0.3607843137254902, 0,
+      169, 0.984313725490196, 0.3686274509803922, 0,
+      170, 1, 0.3764705882352941, 0,
+      171, 1, 0.3843137254901961, 0.011764705882352941,
+      172, 1, 0.39215686274509803, 0.023529411764705882,
+      173, 1, 0.4, 0.03529411764705882,
+      174, 1, 0.40784313725490196, 0.047058823529411764,
+      175, 1, 0.4117647058823529, 0.058823529411764705,
+      176, 1, 0.4196078431372549, 0.07058823529411765,
+      177, 1, 0.42745098039215684, 0.08235294117647059,
+      178, 1, 0.43529411764705883, 0.09411764705882353,
+      179, 1, 0.44313725490196076, 0.10196078431372549,
+      180, 1, 0.45098039215686275, 0.11372549019607843,
+      181, 1, 0.4588235294117647, 0.12549019607843137,
+      182, 1, 0.4666666666666667, 0.13725490196078433,
+      183, 1, 0.47058823529411764, 0.14901960784313725,
+      184, 1, 0.47843137254901963, 0.1607843137254902,
+      185, 1, 0.48627450980392156, 0.17254901960784313,
+      186, 1, 0.49411764705882355, 0.1843137254901961,
+      187, 1, 0.5019607843137255, 0.19607843137254902,
+      188, 1, 0.5098039215686274, 0.20784313725490197,
+      189, 1, 0.5176470588235295, 0.2196078431372549,
+      190, 1, 0.5254901960784314, 0.23137254901960785,
+      191, 1, 0.5333333333333333, 0.24313725490196078,
+      192, 1, 0.5372549019607843, 0.2549019607843137,
+      193, 1, 0.5450980392156862, 0.26666666666666666,
+      194, 1, 0.5529411764705883, 0.2784313725490196,
+      195, 1, 0.5607843137254902, 0.2901960784313726,
+      196, 1, 0.5686274509803921, 0.2980392156862745,
+      197, 1, 0.5764705882352941, 0.30980392156862746,
+      198, 1, 0.5843137254901961, 0.3215686274509804,
+      199, 1, 0.592156862745098, 0.3333333333333333,
+      200, 1, 0.596078431372549, 0.34509803921568627,
+      201, 1, 0.6039215686274509, 0.3568627450980392,
+      202, 1, 0.611764705882353, 0.3686274509803922,
+      203, 1, 0.6196078431372549, 0.3803921568627451,
+      204, 1, 0.6274509803921569, 0.39215686274509803,
+      205, 1, 0.6352941176470588, 0.403921568627451,
+      206, 1, 0.6431372549019608, 0.41568627450980394,
+      207, 1, 0.6509803921568628, 0.42745098039215684,
+      208, 1, 0.6588235294117647, 0.4392156862745098,
+      209, 1, 0.6627450980392157, 0.45098039215686275,
+      210, 1, 0.6705882352941176, 0.4627450980392157,
+      211, 1, 0.6784313725490196, 0.4745098039215686,
+      212, 1, 0.6862745098039216, 0.48627450980392156,
+      213, 1, 0.6941176470588235, 0.49411764705882355,
+      214, 1, 0.7019607843137254, 0.5058823529411764,
+      215, 1, 0.7098039215686275, 0.5176470588235295,
+      216, 1, 0.7176470588235294, 0.5294117647058824,
+      217, 1, 0.7215686274509804, 0.5411764705882353,
+      218, 1, 0.7294117647058823, 0.5529411764705883,
+      219, 1, 0.7372549019607844, 0.5647058823529412,
+      220, 1, 0.7450980392156863, 0.5764705882352941,
+      221, 1, 0.7529411764705882, 0.5882352941176471,
+      222, 1, 0.7607843137254902, 0.6,
+      223, 1, 0.7686274509803922, 0.611764705882353,
+      224, 1, 0.7764705882352941, 0.6235294117647059,
+      225, 1, 0.7843137254901961, 0.6352941176470588,
+      226, 1, 0.788235294117647, 0.6470588235294118,
+      227, 1, 0.796078431372549, 0.6588235294117647,
+      228, 1, 0.803921568627451, 0.6705882352941176,
+      229, 1, 0.8117647058823529, 0.6823529411764706,
+      230, 1, 0.8196078431372549, 0.6901960784313725,
+      231, 1, 0.8274509803921568, 0.7019607843137254,
+      232, 1, 0.8352941176470589, 0.7137254901960784,
+      233, 1, 0.8431372549019608, 0.7254901960784313,
+      234, 1, 0.8470588235294118, 0.7372549019607844,
+      235, 1, 0.8549019607843137, 0.7490196078431373,
+      236, 1, 0.8627450980392157, 0.7607843137254902,
+      237, 1, 0.8705882352941177, 0.7725490196078432,
+      238, 1, 0.8784313725490196, 0.7843137254901961,
+      239, 1, 0.8862745098039215, 0.796078431372549,
+      240, 1, 0.8941176470588236, 0.807843137254902,
+      241, 1, 0.8980392156862745, 0.8235294117647058,
+      242, 1, 0.9058823529411765, 0.8352941176470589,
+      243, 1, 0.9137254901960784, 0.8470588235294118,
+      244, 1, 0.9215686274509803, 0.8588235294117647,
+      245, 1, 0.9294117647058824, 0.8745098039215686,
+      246, 1, 0.9372549019607843, 0.8862745098039215,
+      247, 1, 0.9411764705882353, 0.8980392156862745,
+      248, 1, 0.9490196078431372, 0.9098039215686274,
+      249, 1, 0.9568627450980393, 0.9254901960784314,
+      250, 1, 0.9647058823529412, 0.9372549019607843,
+      251, 1, 0.9725490196078431, 0.9490196078431372,
+      252, 1, 0.9803921568627451, 0.9607843137254902,
+      253, 1, 0.984313725490196, 0.9764705882352941,
+      254, 1, 0.9921568627450981, 0.9882352941176471,
+      255, 1, 1, 1
+    ]
+  },
+  {
+    "Name": "DICOM Spring",
+    "ColorSpace": "RGB",
+    "RGBPoints": [
+      0, 1, 0, 1,
+      1, 1, 0.00392156862745098, 0.996078431372549,
+      2, 1, 0.00784313725490196, 0.9921568627450981,
+      3, 1, 0.011764705882352941, 0.9882352941176471,
+      4, 1, 0.01568627450980392, 0.984313725490196,
+      5, 1, 0.0196078431372549, 0.9803921568627451,
+      6, 1, 0.023529411764705882, 0.9764705882352941,
+      7, 1, 0.027450980392156862, 0.9725490196078431,
+      8, 1, 0.03137254901960784, 0.9686274509803922,
+      9, 1, 0.03529411764705882, 0.9647058823529412,
+      10, 1, 0.0392156862745098, 0.9607843137254902,
+      11, 1, 0.043137254901960784, 0.9568627450980393,
+      12, 1, 0.047058823529411764, 0.9529411764705882,
+      13, 1, 0.050980392156862744, 0.9490196078431372,
+      14, 1, 0.054901960784313725, 0.9450980392156862,
+      15, 1, 0.058823529411764705, 0.9411764705882353,
+      16, 1, 0.06274509803921569, 0.9372549019607843,
+      17, 1, 0.06666666666666667, 0.9333333333333333,
+      18, 1, 0.07058823529411765, 0.9294117647058824,
+      19, 1, 0.07450980392156863, 0.9254901960784314,
+      20, 1, 0.0784313725490196, 0.9215686274509803,
+      21, 1, 0.08235294117647059, 0.9176470588235294,
+      22, 1, 0.08627450980392157, 0.9137254901960784,
+      23, 1, 0.09019607843137255, 0.9098039215686274,
+      24, 1, 0.09411764705882353, 0.9058823529411765,
+      25, 1, 0.09803921568627451, 0.9019607843137255,
+      26, 1, 0.10196078431372549, 0.8980392156862745,
+      27, 1, 0.10588235294117647, 0.8941176470588236,
+      28, 1, 0.10980392156862745, 0.8901960784313725,
+      29, 1, 0.11372549019607843, 0.8862745098039215,
+      30, 1, 0.11764705882352941, 0.8823529411764706,
+      31, 1, 0.12156862745098039, 0.8784313725490196,
+      32, 1, 0.12549019607843137, 0.8745098039215686,
+      33, 1, 0.12941176470588237, 0.8705882352941177,
+      34, 1, 0.13333333333333333, 0.8666666666666667,
+      35, 1, 0.13725490196078433, 0.8627450980392157,
+      36, 1, 0.1411764705882353, 0.8588235294117647,
+      37, 1, 0.1450980392156863, 0.8549019607843137,
+      38, 1, 0.14901960784313725, 0.8509803921568627,
+      39, 1, 0.15294117647058825, 0.8470588235294118,
+      40, 1, 0.1568627450980392, 0.8431372549019608,
+      41, 1, 0.1607843137254902, 0.8392156862745098,
+      42, 1, 0.16470588235294117, 0.8352941176470589,
+      43, 1, 0.16862745098039217, 0.8313725490196079,
+      44, 1, 0.17254901960784313, 0.8274509803921568,
+      45, 1, 0.17647058823529413, 0.8235294117647058,
+      46, 1, 0.1803921568627451, 0.8196078431372549,
+      47, 1, 0.1843137254901961, 0.8156862745098039,
+      48, 1, 0.18823529411764706, 0.8117647058823529,
+      49, 1, 0.19215686274509805, 0.807843137254902,
+      50, 1, 0.19607843137254902, 0.803921568627451,
+      51, 1, 0.2, 0.8,
+      52, 1, 0.20392156862745098, 0.796078431372549,
+      53, 1, 0.20784313725490197, 0.792156862745098,
+      54, 1, 0.21176470588235294, 0.788235294117647,
+      55, 1, 0.21568627450980393, 0.7843137254901961,
+      56, 1, 0.2196078431372549, 0.7803921568627451,
+      57, 1, 0.2235294117647059, 0.7764705882352941,
+      58, 1, 0.22745098039215686, 0.7725490196078432,
+      59, 1, 0.23137254901960785, 0.7686274509803922,
+      60, 1, 0.23529411764705882, 0.7647058823529411,
+      61, 1, 0.23921568627450981, 0.7607843137254902,
+      62, 1, 0.24313725490196078, 0.7568627450980392,
+      63, 1, 0.24705882352941178, 0.7529411764705882,
+      64, 1, 0.25098039215686274, 0.7490196078431373,
+      65, 1, 0.2549019607843137, 0.7450980392156863,
+      66, 1, 0.25882352941176473, 0.7411764705882353,
+      67, 1, 0.2627450980392157, 0.7372549019607844,
+      68, 1, 0.26666666666666666, 0.7333333333333333,
+      69, 1, 0.27058823529411763, 0.7294117647058823,
+      70, 1, 0.27450980392156865, 0.7254901960784313,
+      71, 1, 0.2784313725490196, 0.7215686274509804,
+      72, 1, 0.2823529411764706, 0.7176470588235294,
+      73, 1, 0.28627450980392155, 0.7137254901960784,
+      74, 1, 0.2901960784313726, 0.7098039215686275,
+      75, 1, 0.29411764705882354, 0.7058823529411765,
+      76, 1, 0.2980392156862745, 0.7019607843137254,
+      77, 1, 0.30196078431372547, 0.6980392156862745,
+      78, 1, 0.3058823529411765, 0.6941176470588235,
+      79, 1, 0.30980392156862746, 0.6901960784313725,
+      80, 1, 0.3137254901960784, 0.6862745098039216,
+      81, 1, 0.3176470588235294, 0.6823529411764706,
+      82, 1, 0.3215686274509804, 0.6784313725490196,
+      83, 1, 0.3254901960784314, 0.6745098039215687,
+      84, 1, 0.32941176470588235, 0.6705882352941176,
+      85, 1, 0.3333333333333333, 0.6666666666666666,
+      86, 1, 0.33725490196078434, 0.6627450980392157,
+      87, 1, 0.3411764705882353, 0.6588235294117647,
+      88, 1, 0.34509803921568627, 0.6549019607843137,
+      89, 1, 0.34901960784313724, 0.6509803921568628,
+      90, 1, 0.35294117647058826, 0.6470588235294118,
+      91, 1, 0.3568627450980392, 0.6431372549019608,
+      92, 1, 0.3607843137254902, 0.6392156862745098,
+      93, 1, 0.36470588235294116, 0.6352941176470588,
+      94, 1, 0.3686274509803922, 0.6313725490196078,
+      95, 1, 0.37254901960784315, 0.6274509803921569,
+      96, 1, 0.3764705882352941, 0.6235294117647059,
+      97, 1, 0.3803921568627451, 0.6196078431372549,
+      98, 1, 0.3843137254901961, 0.615686274509804,
+      99, 1, 0.38823529411764707, 0.611764705882353,
+      100, 1, 0.39215686274509803, 0.6078431372549019,
+      101, 1, 0.396078431372549, 0.6039215686274509,
+      102, 1, 0.4, 0.6,
+      103, 1, 0.403921568627451, 0.596078431372549,
+      104, 1, 0.40784313725490196, 0.592156862745098,
+      105, 1, 0.4117647058823529, 0.5882352941176471,
+      106, 1, 0.41568627450980394, 0.5843137254901961,
+      107, 1, 0.4196078431372549, 0.5803921568627451,
+      108, 1, 0.4235294117647059, 0.5764705882352941,
+      109, 1, 0.42745098039215684, 0.5725490196078431,
+      110, 1, 0.43137254901960786, 0.5686274509803921,
+      111, 1, 0.43529411764705883, 0.5647058823529412,
+      112, 1, 0.4392156862745098, 0.5607843137254902,
+      113, 1, 0.44313725490196076, 0.5568627450980392,
+      114, 1, 0.4470588235294118, 0.5529411764705883,
+      115, 1, 0.45098039215686275, 0.5490196078431373,
+      116, 1, 0.4549019607843137, 0.5450980392156862,
+      117, 1, 0.4588235294117647, 0.5411764705882353,
+      118, 1, 0.4627450980392157, 0.5372549019607843,
+      119, 1, 0.4666666666666667, 0.5333333333333333,
+      120, 1, 0.47058823529411764, 0.5294117647058824,
+      121, 1, 0.4745098039215686, 0.5254901960784314,
+      122, 1, 0.47843137254901963, 0.5215686274509804,
+      123, 1, 0.4823529411764706, 0.5176470588235295,
+      124, 1, 0.48627450980392156, 0.5137254901960784,
+      125, 1, 0.49019607843137253, 0.5098039215686274,
+      126, 1, 0.49411764705882355, 0.5058823529411764,
+      127, 1, 0.4980392156862745, 0.5019607843137255,
+      128, 1, 0.5019607843137255, 0.4980392156862745,
+      129, 1, 0.5058823529411764, 0.49411764705882355,
+      130, 1, 0.5098039215686274, 0.49019607843137253,
+      131, 1, 0.5137254901960784, 0.48627450980392156,
+      132, 1, 0.5176470588235295, 0.4823529411764706,
+      133, 1, 0.5215686274509804, 0.47843137254901963,
+      134, 1, 0.5254901960784314, 0.4745098039215686,
+      135, 1, 0.5294117647058824, 0.47058823529411764,
+      136, 1, 0.5333333333333333, 0.4666666666666667,
+      137, 1, 0.5372549019607843, 0.4627450980392157,
+      138, 1, 0.5411764705882353, 0.4588235294117647,
+      139, 1, 0.5450980392156862, 0.4549019607843137,
+      140, 1, 0.5490196078431373, 0.45098039215686275,
+      141, 1, 0.5529411764705883, 0.4470588235294118,
+      142, 1, 0.5568627450980392, 0.44313725490196076,
+      143, 1, 0.5607843137254902, 0.4392156862745098,
+      144, 1, 0.5647058823529412, 0.43529411764705883,
+      145, 1, 0.5686274509803921, 0.43137254901960786,
+      146, 1, 0.5725490196078431, 0.42745098039215684,
+      147, 1, 0.5764705882352941, 0.4235294117647059,
+      148, 1, 0.5803921568627451, 0.4196078431372549,
+      149, 1, 0.5843137254901961, 0.41568627450980394,
+      150, 1, 0.5882352941176471, 0.4117647058823529,
+      151, 1, 0.592156862745098, 0.40784313725490196,
+      152, 1, 0.596078431372549, 0.403921568627451,
+      153, 1, 0.6, 0.4,
+      154, 1, 0.6039215686274509, 0.396078431372549,
+      155, 1, 0.6078431372549019, 0.39215686274509803,
+      156, 1, 0.611764705882353, 0.38823529411764707,
+      157, 1, 0.615686274509804, 0.3843137254901961,
+      158, 1, 0.6196078431372549, 0.3803921568627451,
+      159, 1, 0.6235294117647059, 0.3764705882352941,
+      160, 1, 0.6274509803921569, 0.37254901960784315,
+      161, 1, 0.6313725490196078, 0.3686274509803922,
+      162, 1, 0.6352941176470588, 0.36470588235294116,
+      163, 1, 0.6392156862745098, 0.3607843137254902,
+      164, 1, 0.6431372549019608, 0.3568627450980392,
+      165, 1, 0.6470588235294118, 0.35294117647058826,
+      166, 1, 0.6509803921568628, 0.34901960784313724,
+      167, 1, 0.6549019607843137, 0.34509803921568627,
+      168, 1, 0.6588235294117647, 0.3411764705882353,
+      169, 1, 0.6627450980392157, 0.33725490196078434,
+      170, 1, 0.6666666666666666, 0.3333333333333333,
+      171, 1, 0.6705882352941176, 0.32941176470588235,
+      172, 1, 0.6745098039215687, 0.3254901960784314,
+      173, 1, 0.6784313725490196, 0.3215686274509804,
+      174, 1, 0.6823529411764706, 0.3176470588235294,
+      175, 1, 0.6862745098039216, 0.3137254901960784,
+      176, 1, 0.6901960784313725, 0.30980392156862746,
+      177, 1, 0.6941176470588235, 0.3058823529411765,
+      178, 1, 0.6980392156862745, 0.30196078431372547,
+      179, 1, 0.7019607843137254, 0.2980392156862745,
+      180, 1, 0.7058823529411765, 0.29411764705882354,
+      181, 1, 0.7098039215686275, 0.2901960784313726,
+      182, 1, 0.7137254901960784, 0.28627450980392155,
+      183, 1, 0.7176470588235294, 0.2823529411764706,
+      184, 1, 0.7215686274509804, 0.2784313725490196,
+      185, 1, 0.7254901960784313, 0.27450980392156865,
+      186, 1, 0.7294117647058823, 0.27058823529411763,
+      187, 1, 0.7333333333333333, 0.26666666666666666,
+      188, 1, 0.7372549019607844, 0.2627450980392157,
+      189, 1, 0.7411764705882353, 0.25882352941176473,
+      190, 1, 0.7450980392156863, 0.2549019607843137,
+      191, 1, 0.7490196078431373, 0.25098039215686274,
+      192, 1, 0.7529411764705882, 0.24705882352941178,
+      193, 1, 0.7568627450980392, 0.24313725490196078,
+      194, 1, 0.7607843137254902, 0.23921568627450981,
+      195, 1, 0.7647058823529411, 0.23529411764705882,
+      196, 1, 0.7686274509803922, 0.23137254901960785,
+      197, 1, 0.7725490196078432, 0.22745098039215686,
+      198, 1, 0.7764705882352941, 0.2235294117647059,
+      199, 1, 0.7803921568627451, 0.2196078431372549,
+      200, 1, 0.7843137254901961, 0.21568627450980393,
+      201, 1, 0.788235294117647, 0.21176470588235294,
+      202, 1, 0.792156862745098, 0.20784313725490197,
+      203, 1, 0.796078431372549, 0.20392156862745098,
+      204, 1, 0.8, 0.2,
+      205, 1, 0.803921568627451, 0.19607843137254902,
+      206, 1, 0.807843137254902, 0.19215686274509805,
+      207, 1, 0.8117647058823529, 0.18823529411764706,
+      208, 1, 0.8156862745098039, 0.1843137254901961,
+      209, 1, 0.8196078431372549, 0.1803921568627451,
+      210, 1, 0.8235294117647058, 0.17647058823529413,
+      211, 1, 0.8274509803921568, 0.17254901960784313,
+      212, 1, 0.8313725490196079, 0.16862745098039217,
+      213, 1, 0.8352941176470589, 0.16470588235294117,
+      214, 1, 0.8392156862745098, 0.1607843137254902,
+      215, 1, 0.8431372549019608, 0.1568627450980392,
+      216, 1, 0.8470588235294118, 0.15294117647058825,
+      217, 1, 0.8509803921568627, 0.14901960784313725,
+      218, 1, 0.8549019607843137, 0.1450980392156863,
+      219, 1, 0.8588235294117647, 0.1411764705882353,
+      220, 1, 0.8627450980392157, 0.13725490196078433,
+      221, 1, 0.8666666666666667, 0.13333333333333333,
+      222, 1, 0.8705882352941177, 0.12941176470588237,
+      223, 1, 0.8745098039215686, 0.12549019607843137,
+      224, 1, 0.8784313725490196, 0.12156862745098039,
+      225, 1, 0.8823529411764706, 0.11764705882352941,
+      226, 1, 0.8862745098039215, 0.11372549019607843,
+      227, 1, 0.8901960784313725, 0.10980392156862745,
+      228, 1, 0.8941176470588236, 0.10588235294117647,
+      229, 1, 0.8980392156862745, 0.10196078431372549,
+      230, 1, 0.9019607843137255, 0.09803921568627451,
+      231, 1, 0.9058823529411765, 0.09411764705882353,
+      232, 1, 0.9098039215686274, 0.09019607843137255,
+      233, 1, 0.9137254901960784, 0.08627450980392157,
+      234, 1, 0.9176470588235294, 0.08235294117647059,
+      235, 1, 0.9215686274509803, 0.0784313725490196,
+      236, 1, 0.9254901960784314, 0.07450980392156863,
+      237, 1, 0.9294117647058824, 0.07058823529411765,
+      238, 1, 0.9333333333333333, 0.06666666666666667,
+      239, 1, 0.9372549019607843, 0.06274509803921569,
+      240, 1, 0.9411764705882353, 0.058823529411764705,
+      241, 1, 0.9450980392156862, 0.054901960784313725,
+      242, 1, 0.9490196078431372, 0.050980392156862744,
+      243, 1, 0.9529411764705882, 0.047058823529411764,
+      244, 1, 0.9568627450980393, 0.043137254901960784,
+      245, 1, 0.9607843137254902, 0.0392156862745098,
+      246, 1, 0.9647058823529412, 0.03529411764705882,
+      247, 1, 0.9686274509803922, 0.03137254901960784,
+      248, 1, 0.9725490196078431, 0.027450980392156862,
+      249, 1, 0.9764705882352941, 0.023529411764705882,
+      250, 1, 0.9803921568627451, 0.0196078431372549,
+      251, 1, 0.984313725490196, 0.01568627450980392,
+      252, 1, 0.9882352941176471, 0.011764705882352941,
+      253, 1, 0.9921568627450981, 0.00784313725490196,
+      254, 1, 0.996078431372549, 0.00392156862745098,
+      255, 1, 1, 0
+    ]
+  },
+  {
+    "Name": "DICOM Winter",
+    "ColorSpace": "RGB",
+    "RGBPoints": [
+      0, 0, 0, 1,
+      1, 0, 0.00392156862745098, 1,
+      2, 0, 0.00784313725490196, 0.996078431372549,
+      3, 0, 0.011764705882352941, 0.996078431372549,
+      4, 0, 0.01568627450980392, 0.9921568627450981,
+      5, 0, 0.0196078431372549, 0.9921568627450981,
+      6, 0, 0.023529411764705882, 0.9882352941176471,
+      7, 0, 0.027450980392156862, 0.9882352941176471,
+      8, 0, 0.03137254901960784, 0.984313725490196,
+      9, 0, 0.03529411764705882, 0.984313725490196,
+      10, 0, 0.0392156862745098, 0.9803921568627451,
+      11, 0, 0.043137254901960784, 0.9803921568627451,
+      12, 0, 0.047058823529411764, 0.9764705882352941,
+      13, 0, 0.050980392156862744, 0.9764705882352941,
+      14, 0, 0.054901960784313725, 0.9725490196078431,
+      15, 0, 0.058823529411764705, 0.9725490196078431,
+      16, 0, 0.06274509803921569, 0.9686274509803922,
+      17, 0, 0.06666666666666667, 0.9686274509803922,
+      18, 0, 0.07058823529411765, 0.9647058823529412,
+      19, 0, 0.07450980392156863, 0.9647058823529412,
+      20, 0, 0.0784313725490196, 0.9607843137254902,
+      21, 0, 0.08235294117647059, 0.9607843137254902,
+      22, 0, 0.08627450980392157, 0.9568627450980393,
+      23, 0, 0.09019607843137255, 0.9568627450980393,
+      24, 0, 0.09411764705882353, 0.9529411764705882,
+      25, 0, 0.09803921568627451, 0.9529411764705882,
+      26, 0, 0.10196078431372549, 0.9490196078431372,
+      27, 0, 0.10588235294117647, 0.9490196078431372,
+      28, 0, 0.10980392156862745, 0.9450980392156862,
+      29, 0, 0.11372549019607843, 0.9450980392156862,
+      30, 0, 0.11764705882352941, 0.9411764705882353,
+      31, 0, 0.12156862745098039, 0.9411764705882353,
+      32, 0, 0.12549019607843137, 0.9372549019607843,
+      33, 0, 0.12941176470588237, 0.9372549019607843,
+      34, 0, 0.13333333333333333, 0.9333333333333333,
+      35, 0, 0.13725490196078433, 0.9333333333333333,
+      36, 0, 0.1411764705882353, 0.9294117647058824,
+      37, 0, 0.1450980392156863, 0.9294117647058824,
+      38, 0, 0.14901960784313725, 0.9254901960784314,
+      39, 0, 0.15294117647058825, 0.9254901960784314,
+      40, 0, 0.1568627450980392, 0.9215686274509803,
+      41, 0, 0.1607843137254902, 0.9215686274509803,
+      42, 0, 0.16470588235294117, 0.9176470588235294,
+      43, 0, 0.16862745098039217, 0.9176470588235294,
+      44, 0, 0.17254901960784313, 0.9137254901960784,
+      45, 0, 0.17647058823529413, 0.9137254901960784,
+      46, 0, 0.1803921568627451, 0.9098039215686274,
+      47, 0, 0.1843137254901961, 0.9098039215686274,
+      48, 0, 0.18823529411764706, 0.9058823529411765,
+      49, 0, 0.19215686274509805, 0.9058823529411765,
+      50, 0, 0.19607843137254902, 0.9019607843137255,
+      51, 0, 0.2, 0.9019607843137255,
+      52, 0, 0.20392156862745098, 0.8980392156862745,
+      53, 0, 0.20784313725490197, 0.8980392156862745,
+      54, 0, 0.21176470588235294, 0.8941176470588236,
+      55, 0, 0.21568627450980393, 0.8941176470588236,
+      56, 0, 0.2196078431372549, 0.8901960784313725,
+      57, 0, 0.2235294117647059, 0.8901960784313725,
+      58, 0, 0.22745098039215686, 0.8862745098039215,
+      59, 0, 0.23137254901960785, 0.8862745098039215,
+      60, 0, 0.23529411764705882, 0.8823529411764706,
+      61, 0, 0.23921568627450981, 0.8823529411764706,
+      62, 0, 0.24313725490196078, 0.8784313725490196,
+      63, 0, 0.24705882352941178, 0.8784313725490196,
+      64, 0, 0.25098039215686274, 0.8745098039215686,
+      65, 0, 0.2549019607843137, 0.8745098039215686,
+      66, 0, 0.25882352941176473, 0.8705882352941177,
+      67, 0, 0.2627450980392157, 0.8705882352941177,
+      68, 0, 0.26666666666666666, 0.8666666666666667,
+      69, 0, 0.27058823529411763, 0.8666666666666667,
+      70, 0, 0.27450980392156865, 0.8627450980392157,
+      71, 0, 0.2784313725490196, 0.8627450980392157,
+      72, 0, 0.2823529411764706, 0.8588235294117647,
+      73, 0, 0.28627450980392155, 0.8588235294117647,
+      74, 0, 0.2901960784313726, 0.8549019607843137,
+      75, 0, 0.29411764705882354, 0.8549019607843137,
+      76, 0, 0.2980392156862745, 0.8509803921568627,
+      77, 0, 0.30196078431372547, 0.8509803921568627,
+      78, 0, 0.3058823529411765, 0.8470588235294118,
+      79, 0, 0.30980392156862746, 0.8470588235294118,
+      80, 0, 0.3137254901960784, 0.8431372549019608,
+      81, 0, 0.3176470588235294, 0.8431372549019608,
+      82, 0, 0.3215686274509804, 0.8392156862745098,
+      83, 0, 0.3254901960784314, 0.8392156862745098,
+      84, 0, 0.32941176470588235, 0.8352941176470589,
+      85, 0, 0.3333333333333333, 0.8352941176470589,
+      86, 0, 0.33725490196078434, 0.8313725490196079,
+      87, 0, 0.3411764705882353, 0.8313725490196079,
+      88, 0, 0.34509803921568627, 0.8274509803921568,
+      89, 0, 0.34901960784313724, 0.8274509803921568,
+      90, 0, 0.35294117647058826, 0.8235294117647058,
+      91, 0, 0.3568627450980392, 0.8235294117647058,
+      92, 0, 0.3607843137254902, 0.8196078431372549,
+      93, 0, 0.36470588235294116, 0.8196078431372549,
+      94, 0, 0.3686274509803922, 0.8156862745098039,
+      95, 0, 0.37254901960784315, 0.8156862745098039,
+      96, 0, 0.3764705882352941, 0.8117647058823529,
+      97, 0, 0.3803921568627451, 0.8117647058823529,
+      98, 0, 0.3843137254901961, 0.807843137254902,
+      99, 0, 0.38823529411764707, 0.807843137254902,
+      100, 0, 0.39215686274509803, 0.803921568627451,
+      101, 0, 0.396078431372549, 0.803921568627451,
+      102, 0, 0.4, 0.8,
+      103, 0, 0.403921568627451, 0.8,
+      104, 0, 0.40784313725490196, 0.796078431372549,
+      105, 0, 0.4117647058823529, 0.796078431372549,
+      106, 0, 0.41568627450980394, 0.792156862745098,
+      107, 0, 0.4196078431372549, 0.792156862745098,
+      108, 0, 0.4235294117647059, 0.788235294117647,
+      109, 0, 0.42745098039215684, 0.788235294117647,
+      110, 0, 0.43137254901960786, 0.7843137254901961,
+      111, 0, 0.43529411764705883, 0.7843137254901961,
+      112, 0, 0.4392156862745098, 0.7803921568627451,
+      113, 0, 0.44313725490196076, 0.7803921568627451,
+      114, 0, 0.4470588235294118, 0.7764705882352941,
+      115, 0, 0.45098039215686275, 0.7764705882352941,
+      116, 0, 0.4549019607843137, 0.7725490196078432,
+      117, 0, 0.4588235294117647, 0.7725490196078432,
+      118, 0, 0.4627450980392157, 0.7686274509803922,
+      119, 0, 0.4666666666666667, 0.7686274509803922,
+      120, 0, 0.47058823529411764, 0.7647058823529411,
+      121, 0, 0.4745098039215686, 0.7647058823529411,
+      122, 0, 0.47843137254901963, 0.7607843137254902,
+      123, 0, 0.4823529411764706, 0.7607843137254902,
+      124, 0, 0.48627450980392156, 0.7568627450980392,
+      125, 0, 0.49019607843137253, 0.7568627450980392,
+      126, 0, 0.49411764705882355, 0.7529411764705882,
+      127, 0, 0.4980392156862745, 0.7529411764705882,
+      128, 0.00392156862745098, 0.5019607843137255, 0.7490196078431373,
+      129, 0.00784313725490196, 0.5058823529411764, 0.7490196078431373,
+      130, 0.011764705882352941, 0.5098039215686274, 0.7450980392156863,
+      131, 0.01568627450980392, 0.5137254901960784, 0.7450980392156863,
+      132, 0.0196078431372549, 0.5176470588235295, 0.7411764705882353,
+      133, 0.023529411764705882, 0.5215686274509804, 0.7411764705882353,
+      134, 0.027450980392156862, 0.5254901960784314, 0.7372549019607844,
+      135, 0.03137254901960784, 0.5294117647058824, 0.7372549019607844,
+      136, 0.03529411764705882, 0.5333333333333333, 0.7333333333333333,
+      137, 0.0392156862745098, 0.5372549019607843, 0.7333333333333333,
+      138, 0.043137254901960784, 0.5411764705882353, 0.7294117647058823,
+      139, 0.047058823529411764, 0.5450980392156862, 0.7294117647058823,
+      140, 0.050980392156862744, 0.5490196078431373, 0.7254901960784313,
+      141, 0.054901960784313725, 0.5529411764705883, 0.7254901960784313,
+      142, 0.058823529411764705, 0.5568627450980392, 0.7215686274509804,
+      143, 0.06274509803921569, 0.5607843137254902, 0.7215686274509804,
+      144, 0.06666666666666667, 0.5647058823529412, 0.7176470588235294,
+      145, 0.07058823529411765, 0.5686274509803921, 0.7176470588235294,
+      146, 0.07450980392156863, 0.5725490196078431, 0.7137254901960784,
+      147, 0.0784313725490196, 0.5764705882352941, 0.7137254901960784,
+      148, 0.08235294117647059, 0.5803921568627451, 0.7098039215686275,
+      149, 0.08627450980392157, 0.5843137254901961, 0.7098039215686275,
+      150, 0.09019607843137255, 0.5882352941176471, 0.7058823529411765,
+      151, 0.09411764705882353, 0.592156862745098, 0.7058823529411765,
+      152, 0.09803921568627451, 0.596078431372549, 0.7019607843137254,
+      153, 0.10196078431372549, 0.6, 0.7019607843137254,
+      154, 0.10588235294117647, 0.6039215686274509, 0.6980392156862745,
+      155, 0.10980392156862745, 0.6078431372549019, 0.6980392156862745,
+      156, 0.11372549019607843, 0.611764705882353, 0.6941176470588235,
+      157, 0.11764705882352941, 0.615686274509804, 0.6941176470588235,
+      158, 0.12156862745098039, 0.6196078431372549, 0.6901960784313725,
+      159, 0.12549019607843137, 0.6235294117647059, 0.6901960784313725,
+      160, 0.12941176470588237, 0.6274509803921569, 0.6862745098039216,
+      161, 0.13333333333333333, 0.6313725490196078, 0.6862745098039216,
+      162, 0.13725490196078433, 0.6352941176470588, 0.6823529411764706,
+      163, 0.1411764705882353, 0.6392156862745098, 0.6823529411764706,
+      164, 0.1450980392156863, 0.6431372549019608, 0.6784313725490196,
+      165, 0.14901960784313725, 0.6470588235294118, 0.6784313725490196,
+      166, 0.15294117647058825, 0.6509803921568628, 0.6745098039215687,
+      167, 0.1568627450980392, 0.6549019607843137, 0.6745098039215687,
+      168, 0.1607843137254902, 0.6588235294117647, 0.6705882352941176,
+      169, 0.16470588235294117, 0.6627450980392157, 0.6705882352941176,
+      170, 0.16862745098039217, 0.6666666666666666, 0.6666666666666666,
+      171, 0.17254901960784313, 0.6705882352941176, 0.6666666666666666,
+      172, 0.17647058823529413, 0.6745098039215687, 0.6627450980392157,
+      173, 0.1803921568627451, 0.6784313725490196, 0.6627450980392157,
+      174, 0.1843137254901961, 0.6823529411764706, 0.6588235294117647,
+      175, 0.18823529411764706, 0.6862745098039216, 0.6588235294117647,
+      176, 0.19215686274509805, 0.6901960784313725, 0.6549019607843137,
+      177, 0.19607843137254902, 0.6941176470588235, 0.6549019607843137,
+      178, 0.2, 0.6980392156862745, 0.6509803921568628,
+      179, 0.20392156862745098, 0.7019607843137254, 0.6509803921568628,
+      180, 0.20784313725490197, 0.7058823529411765, 0.6470588235294118,
+      181, 0.21176470588235294, 0.7098039215686275, 0.6470588235294118,
+      182, 0.21568627450980393, 0.7137254901960784, 0.6431372549019608,
+      183, 0.2196078431372549, 0.7176470588235294, 0.6431372549019608,
+      184, 0.2235294117647059, 0.7215686274509804, 0.6392156862745098,
+      185, 0.22745098039215686, 0.7254901960784313, 0.6392156862745098,
+      186, 0.23137254901960785, 0.7294117647058823, 0.6352941176470588,
+      187, 0.23529411764705882, 0.7333333333333333, 0.6352941176470588,
+      188, 0.23921568627450981, 0.7372549019607844, 0.6313725490196078,
+      189, 0.24313725490196078, 0.7411764705882353, 0.6313725490196078,
+      190, 0.24705882352941178, 0.7450980392156863, 0.6274509803921569,
+      191, 0.25098039215686274, 0.7490196078431373, 0.6274509803921569,
+      192, 0.25098039215686274, 0.7529411764705882, 0.6235294117647059,
+      193, 0.2549019607843137, 0.7568627450980392, 0.6235294117647059,
+      194, 0.25882352941176473, 0.7607843137254902, 0.6196078431372549,
+      195, 0.2627450980392157, 0.7647058823529411, 0.6196078431372549,
+      196, 0.26666666666666666, 0.7686274509803922, 0.615686274509804,
+      197, 0.27058823529411763, 0.7725490196078432, 0.615686274509804,
+      198, 0.27450980392156865, 0.7764705882352941, 0.611764705882353,
+      199, 0.2784313725490196, 0.7803921568627451, 0.611764705882353,
+      200, 0.2823529411764706, 0.7843137254901961, 0.6078431372549019,
+      201, 0.28627450980392155, 0.788235294117647, 0.6078431372549019,
+      202, 0.2901960784313726, 0.792156862745098, 0.6039215686274509,
+      203, 0.29411764705882354, 0.796078431372549, 0.6039215686274509,
+      204, 0.2980392156862745, 0.8, 0.6,
+      205, 0.30196078431372547, 0.803921568627451, 0.6,
+      206, 0.3058823529411765, 0.807843137254902, 0.596078431372549,
+      207, 0.30980392156862746, 0.8117647058823529, 0.596078431372549,
+      208, 0.3137254901960784, 0.8156862745098039, 0.592156862745098,
+      209, 0.3176470588235294, 0.8196078431372549, 0.592156862745098,
+      210, 0.3215686274509804, 0.8235294117647058, 0.5882352941176471,
+      211, 0.3254901960784314, 0.8274509803921568, 0.5882352941176471,
+      212, 0.32941176470588235, 0.8313725490196079, 0.5843137254901961,
+      213, 0.3333333333333333, 0.8352941176470589, 0.5843137254901961,
+      214, 0.33725490196078434, 0.8392156862745098, 0.5803921568627451,
+      215, 0.3411764705882353, 0.8431372549019608, 0.5803921568627451,
+      216, 0.34509803921568627, 0.8470588235294118, 0.5764705882352941,
+      217, 0.34901960784313724, 0.8509803921568627, 0.5764705882352941,
+      218, 0.35294117647058826, 0.8549019607843137, 0.5725490196078431,
+      219, 0.3568627450980392, 0.8588235294117647, 0.5725490196078431,
+      220, 0.3607843137254902, 0.8627450980392157, 0.5686274509803921,
+      221, 0.36470588235294116, 0.8666666666666667, 0.5686274509803921,
+      222, 0.3686274509803922, 0.8705882352941177, 0.5647058823529412,
+      223, 0.37254901960784315, 0.8745098039215686, 0.5647058823529412,
+      224, 0.3764705882352941, 0.8784313725490196, 0.5607843137254902,
+      225, 0.3803921568627451, 0.8823529411764706, 0.5607843137254902,
+      226, 0.3843137254901961, 0.8862745098039215, 0.5568627450980392,
+      227, 0.38823529411764707, 0.8901960784313725, 0.5568627450980392,
+      228, 0.39215686274509803, 0.8941176470588236, 0.5529411764705883,
+      229, 0.396078431372549, 0.8980392156862745, 0.5529411764705883,
+      230, 0.4, 0.9019607843137255, 0.5490196078431373,
+      231, 0.403921568627451, 0.9058823529411765, 0.5490196078431373,
+      232, 0.40784313725490196, 0.9098039215686274, 0.5450980392156862,
+      233, 0.4117647058823529, 0.9137254901960784, 0.5450980392156862,
+      234, 0.41568627450980394, 0.9176470588235294, 0.5411764705882353,
+      235, 0.4196078431372549, 0.9215686274509803, 0.5411764705882353,
+      236, 0.4235294117647059, 0.9254901960784314, 0.5372549019607843,
+      237, 0.42745098039215684, 0.9294117647058824, 0.5372549019607843,
+      238, 0.43137254901960786, 0.9333333333333333, 0.5333333333333333,
+      239, 0.43529411764705883, 0.9372549019607843, 0.5333333333333333,
+      240, 0.4392156862745098, 0.9411764705882353, 0.5294117647058824,
+      241, 0.44313725490196076, 0.9450980392156862, 0.5294117647058824,
+      242, 0.4470588235294118, 0.9490196078431372, 0.5254901960784314,
+      243, 0.45098039215686275, 0.9529411764705882, 0.5254901960784314,
+      244, 0.4549019607843137, 0.9568627450980393, 0.5215686274509804,
+      245, 0.4588235294117647, 0.9607843137254902, 0.5215686274509804,
+      246, 0.4627450980392157, 0.9647058823529412, 0.5176470588235295,
+      247, 0.4666666666666667, 0.9686274509803922, 0.5176470588235295,
+      248, 0.47058823529411764, 0.9725490196078431, 0.5137254901960784,
+      249, 0.4745098039215686, 0.9764705882352941, 0.5137254901960784,
+      250, 0.47843137254901963, 0.9803921568627451, 0.5098039215686274,
+      251, 0.4823529411764706, 0.984313725490196, 0.5098039215686274,
+      252, 0.48627450980392156, 0.9882352941176471, 0.5058823529411764,
+      253, 0.49019607843137253, 0.9921568627450981, 0.5058823529411764,
+      254, 0.49411764705882355, 0.996078431372549, 0.5019607843137255,
+      255, 0.4980392156862745, 1, 0.5019607843137255
+    ]
+  }
+]
diff --git a/src/vtk/LayerColorPresets.ts b/src/vtk/LayerColorPresets.ts
new file mode 100644
index 000000000..44ddb74c8
--- /dev/null
+++ b/src/vtk/LayerColorPresets.ts
@@ -0,0 +1,21 @@
+export const DEFAULT_LAYER_PRESET = 'DICOM Hot Iron';
+
+export const LAYER_PRESET_OPTIONS = [
+  { title: 'Grayscale', value: 'Grayscale' },
+  { title: 'Inverted grayscale', value: 'Inverted-Grayscale' },
+  { title: 'DICOM Hot Iron', value: 'DICOM Hot Iron' },
+  { title: 'DICOM PET', value: 'DICOM PET' },
+  { title: 'DICOM Hot Metal Blue', value: 'DICOM Hot Metal Blue' },
+  { title: 'DICOM Spring', value: 'DICOM Spring' },
+  { title: 'DICOM Winter', value: 'DICOM Winter' },
+  { title: 'Viridis', value: 'Viridis (matplotlib)' },
+  { title: 'Cool to Warm', value: 'Cool to Warm' },
+];
+
+export const resolveBaseColorPreset = (preset?: string) =>
+  LAYER_PRESET_OPTIONS.find(({ value }) => value === preset)?.value ??
+  'Grayscale';
+
+export const resolveLayerColorPreset = (preset?: string) =>
+  LAYER_PRESET_OPTIONS.find(({ value }) => value === preset)?.value ??
+  DEFAULT_LAYER_PRESET;
diff --git a/tests/baseline/layers_max_opacity_2d_view-chrome-1.png b/tests/baseline/layers_max_opacity_2d_view-chrome-1.png
index d21362f57..0376b082a 100644
Binary files a/tests/baseline/layers_max_opacity_2d_view-chrome-1.png and b/tests/baseline/layers_max_opacity_2d_view-chrome-1.png differ
diff --git a/tests/datasets.ts b/tests/datasets.ts
index b480aa636..9bbb8bddf 100644
--- a/tests/datasets.ts
+++ b/tests/datasets.ts
@@ -2,9 +2,7 @@
 // into the dataset cache before any spec starts, and specs read them from the
 // local server at `/tmp/<name>`. CI keys its dataset cache on this file.
 //
-// The files are assets of one GitHub release. An asset can be replaced after
-// it is published, so each download is checked against its hash. To change or
-// add a file, publish a new release and point DATASET_RELEASE at it.
+// Release fixtures and original public DICOM instances are pinned by SHA-256.
 export const DATASET_RELEASE =
   'https://github.com/Kitware/VolView/releases/download/test-data-1';
 
@@ -12,42 +10,49 @@ export const DATASET_RELEASE =
 const DATASETS = {
   ONE_CT_SLICE_DICOM: {
     name: 'CT000085.dcm',
+    url: `${DATASET_RELEASE}/CT000085.dcm`,
     origin:
       'https://data.kitware.com/api/v1/file/6566aa81c5a2b36857ad1783/download',
     sha256: '8c9c3477a3bcf54477f7705c9f60ec2473699b8ac93a11f00332873c1dde6b9b',
   },
   MINIMAL_DICOM: {
     name: 'minimal.dcm',
+    url: `${DATASET_RELEASE}/minimal.dcm`,
     origin:
       'https://data.kitware.com/api/v1/file/68e9807dbf0f869935e36481/download',
     sha256: 'c0d05d47b16cbc2e1a913c5b1dc1b5c982eb8499f7674c2e5933a81d5ab878a1',
   },
   MINIMAL_501_SESSION: {
     name: 'minimal-501-session.volview.zip',
+    url: `${DATASET_RELEASE}/minimal-501-session.volview.zip`,
     origin:
       'https://data.kitware.com/api/v1/file/693077d880eaefe49a4abb88/download',
     sha256: 'e2dded0c7bcabae6611e4bcc7e0170e2902640624de60043aa6d363630844d7d',
   },
   PROSTATEX_DATASET: {
     name: 'prostate.zip',
+    url: `${DATASET_RELEASE}/prostate.zip`,
     origin:
       'https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download',
     sha256: '2db4738cc063f80eaaeffd52b83271dca1e3543518a54240c01e5ba2d5629dd1',
   },
   PROSTATE_SEGMENT_GROUP: {
     name: 'prostate-total.seg.nii.gz',
+    url: `${DATASET_RELEASE}/prostate-total.seg.nii.gz`,
     origin:
       'https://data.kitware.com/api/v1/file/692f13ed80eaefe49a4abb72/download',
     sha256: '30704eab70795d242f529c63c467867f7ac5256a8bf50af28a272bc6c866f394',
   },
   MRA_HEAD_NECK_DATASET: {
     name: 'MRA-Head_and_Neck.zip',
+    url: `${DATASET_RELEASE}/MRA-Head_and_Neck.zip`,
     origin:
       'https://data.kitware.com/api/v1/item/6352a2b311dab8142820a33b/download',
     sha256: 'd1d692f449e94294f1204040c43aa313b84fb4d6be9eb4c8558f78435126f875',
   },
   FETUS_DATASET: {
     name: 'fetus.zip',
+    url: `${DATASET_RELEASE}/fetus.zip`,
     origin:
       'https://data.kitware.com/api/v1/item/635679c311dab8142820a4f4/download',
     sha256: '3cf89e3d24dfaaea61b006e797df6976a8b2e94a63637e34e16c3608d6e19464',
@@ -57,6 +62,7 @@ const DATASETS = {
   // (unit code 3 = cm), so with US spacing fix the VTK spacing is ~0.5105 mm.
   US_MULTIFRAME_DICOM: {
     name: 'US_multiframe_30frames.dcm',
+    url: `${DATASET_RELEASE}/US_multiframe_30frames.dcm`,
     origin:
       'https://data.kitware.com/api/v1/file/69e1630646ef98a20f563020/download',
     sha256: '6fa3a087d3c631b43216a8abec8aac8d2d73751c5bf5885708d1150b09283f72',
@@ -65,6 +71,7 @@ const DATASETS = {
   // Explicit VR LE, MONOCHROME2, retired Ultrasound Multi-frame SOP UID.
   CINE_US_DATASET: {
     name: 'US-MONO2-8-8x-echo.dcm',
+    url: `${DATASET_RELEASE}/US-MONO2-8-8x-echo.dcm`,
     origin:
       'https://sourceforge.net/p/gdcm/gdcmdata/ci/master/tree/US-MONO2-8-8x-execho.dcm?format=raw',
     sha256: '7d3f54806d0315c6cfc8b7371649a242b5ef8f31e0d20221971dd8087f2ff1ea',
@@ -73,12 +80,14 @@ const DATASETS = {
   // browser JPEG decode path used by common compressed ultrasound clips.
   COLOR3D_JPEG_BASELINE_DICOM: {
     name: 'color3d_jpeg_baseline.dcm',
+    url: `${DATASET_RELEASE}/color3d_jpeg_baseline.dcm`,
     origin:
       'https://raw.githubusercontent.com/pydicom/pydicom-data/master/data_store/data/color3d_jpeg_baseline.dcm',
     sha256: 'c8798b8abf8ae0a18e8c9952e7c7f75f3cc8465234b1b63f9e3ba3bebb9d5625',
   },
   CT_ELECTRODES: {
     name: 'CT_Electrodes.nii.gz',
+    url: `${DATASET_RELEASE}/CT_Electrodes.nii.gz`,
     origin:
       'https://raw.githubusercontent.com/neurolabusc/niivue-images/main/CT_Electrodes.nii.gz',
     sha256: '0566942708ff451458d0fdb1f61c4611187bb5cc0efa516c8500f1ff3c142e57',
@@ -99,7 +108,113 @@ export const {
   CT_ELECTRODES,
 } = DATASETS;
 
+export const PET_CT_DICOM_DATASETS = [
+  {
+    name: 'PET-CT-PT-01.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.125971577518855152164687925479',
+    sha256: '082cc2a92409d26dcd465ca37dcb55182f526fa94f0d66299c93196f0dd2b130',
+  },
+  {
+    name: 'PET-CT-PT-02.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.164470072637482892742730606415',
+    sha256: '7fc5a40cc7645c64c91df14008e27c8f20f6b613af8f888125d72c6ae6f153d6',
+  },
+  {
+    name: 'PET-CT-PT-03.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.645656839545863315258382059304',
+    sha256: 'b4922f66ed2d02e1783c32d23e3bd8aa73cc30f648784de91316890c1a8faaf6',
+  },
+  {
+    name: 'PET-CT-PT-04.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.171033599854331402388163035916',
+    sha256: 'ae96aa74535276c86e9e6f06be540b446f349d58e376cd6812832bbb183fed0b',
+  },
+  {
+    name: 'PET-CT-PT-05.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.757229251338810950547930294076',
+    sha256: '71d7ea70e1527dcaac130ec4794748710961d0d18b11dc8a0dda3d96c7e1ddea',
+  },
+  {
+    name: 'PET-CT-PT-06.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.290313076131916328810257384513',
+    sha256: '4c9f3fac5d2710d72c46ed63f97aed8052245380967efa3f1f4ce72aeb488fa7',
+  },
+  {
+    name: 'PET-CT-PT-07.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.167034157012705076112347098246',
+    sha256: 'c5398c842bb35f7c7b7d77398d2246003b4565474961c622820545ab1a42d7dc',
+  },
+  {
+    name: 'PET-CT-PT-08.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.305525101475115108798705213666',
+    sha256: '65115e0a3335074976e2178e52e5036bfe4201d3b315a79f733cb470729c220d',
+  },
+  {
+    name: 'PET-CT-PT-09.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.180547818912813778100247492512',
+    sha256: '8e0316240d5e8cc3c7e0913b4abb892be1be5879b5cc3f0379a205fd286ca17b',
+  },
+  {
+    name: 'PET-CT-PT-10.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.316521143696464534574699049839&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.190211187176681563808826571096',
+    sha256: 'fb424c9c3670d0f0374361ecb16bf342e27cdfcf8be0aead1e4629ea7a2e7928',
+  },
+  {
+    name: 'PET-CT-CT-01.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.330442471593744252750634668562',
+    sha256: '262fc85a0a05c57ec96451baf8a1b64f3287d5d6efdf5e4d9e67983e20e59fe2',
+  },
+  {
+    name: 'PET-CT-CT-02.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.787146087385319992976365569088',
+    sha256: 'c348f6f8d899ce9e02a4b2fc3f93743491df1a04c99f65c1c77ab1c8baec8cb7',
+  },
+  {
+    name: 'PET-CT-CT-03.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.754367593034585495537680981967',
+    sha256: '4935a37d77059028d175a38c515e52beb2e90d0971c9b495ab956433c8e7fa18',
+  },
+  {
+    name: 'PET-CT-CT-04.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.268694914226381205284654198517',
+    sha256: '27cff9c1bd6d1fc6543bb8d2a009e232c4f39b6aa333b9d3ce39d7cdeddf0cc3',
+  },
+  {
+    name: 'PET-CT-CT-05.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.273002091516249828143197374115',
+    sha256: '038be9136459b5d9d5dbd44b7d35394012a0415f5ed09b2ba46ca34aef1c1f96',
+  },
+  {
+    name: 'PET-CT-CT-06.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.251520880093056497198942071424',
+    sha256: 'feceb609cda89e382459a1c6884e5737e5f00b378de19c33e3f9838474f418bd',
+  },
+  {
+    name: 'PET-CT-CT-07.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.254151550624375545322457061626',
+    sha256: 'a416fb025436c0d0bcdedb9e36b51a4ac744ac332b83ce8c94da7b459188e39b',
+  },
+  {
+    name: 'PET-CT-CT-08.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.477776731601464757864806040291',
+    sha256: '6b8db167b9ddbf9194d9935b94092668d2b7eb6c576dce5cc3f96046046fb6fc',
+  },
+  {
+    name: 'PET-CT-CT-09.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.831869199671510110705249657284',
+    sha256: '31df0464f111f0cccd1cba25f2e014f88375de44bc0ba7ead844a015508f5f43',
+  },
+  {
+    name: 'PET-CT-CT-10.dcm',
+    url: 'https://services.cancerimagingarchive.net/nbia-api/services/v1/getSingleImage?SeriesInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.114189455733462211540942355885&SOPInstanceUID=1.3.6.1.4.1.14519.5.2.1.6655.2359.243468898389109491372438016818',
+    sha256: 'c2470a67fd601d7e36130bebd51e8e71b9f6fad9832ea6b79f504309f2fee984',
+  },
+];
+
 // Everything declared above is downloaded.
-export const TEST_DATASETS = Object.values(DATASETS);
+export const TEST_DATASETS = [
+  ...Object.values(DATASETS),
+  ...PET_CT_DICOM_DATASETS,
+];
 
 export type TestDataset = (typeof TEST_DATASETS)[number];
diff --git a/tests/downloadDatasets.ts b/tests/downloadDatasets.ts
index eec42328e..f160ae6b0 100644
--- a/tests/downloadDatasets.ts
+++ b/tests/downloadDatasets.ts
@@ -2,11 +2,7 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { createHash } from 'node:crypto';
 import { fileURLToPath } from 'node:url';
-import {
-  DATASET_RELEASE,
-  TEST_DATASETS,
-  type TestDataset,
-} from './datasets.ts';
+import { TEST_DATASETS, type TestDataset } from './datasets.ts';
 import { projectRoot } from './e2eTestUtils.ts';
 
 // Node built-ins only, so CI can warm the dataset cache by running this file
@@ -19,7 +15,7 @@ const sha256 = (data: Buffer) =>
   createHash('sha256').update(data).digest('hex');
 
 async function fetchDataset(dataset: TestDataset) {
-  const url = `${DATASET_RELEASE}/${dataset.name}`;
+  const { url } = dataset;
   const fail = (reason: string) =>
     new Error(
       `Could not download test dataset ${dataset.name} from ${url}: ${reason}`
diff --git a/tests/specs/annotations-sidebar.e2e.ts b/tests/specs/annotations-sidebar.e2e.ts
index c37c39d4e..ab2c1493f 100644
--- a/tests/specs/annotations-sidebar.e2e.ts
+++ b/tests/specs/annotations-sidebar.e2e.ts
@@ -104,6 +104,7 @@ describe('Annotations sidebar', () => {
 
     await volViewPage.selectTool('mdi-ruler');
     await openAnnotationSegments();
+    await waitForNamedSegments();
     expect(await segmentNames()).toEqual(['Segment 1']);
     expect(await selectedSegmentName()).toEqual('Segment 1');
 
diff --git a/tests/specs/base-image-availability.e2e.ts b/tests/specs/base-image-availability.e2e.ts
new file mode 100644
index 000000000..f6c3754fe
--- /dev/null
+++ b/tests/specs/base-image-availability.e2e.ts
@@ -0,0 +1,94 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { volViewPage } from '../pageobjects/volview.page';
+import { CINE_VIEW_SELECTOR } from './cineTestUtils';
+import { buildSyntheticCineDicom, newUid } from './syntheticDicom';
+import {
+  captureViewPixels,
+  makeTempDir,
+  openVolViewPage,
+  waitForModuleTransitions,
+} from './utils';
+
+async function selectCineLayout(name: string, count: number) {
+  await volViewPage.layoutButton.click();
+  const option = $(`.v-list-item-title=${name}`);
+  await option.waitForClickable();
+  await option.click();
+  await expect($$(CINE_VIEW_SELECTOR)).toBeElementsArrayOfSize(count);
+}
+
+async function expectCineVisibility(visible: boolean, count: number) {
+  await $('header').moveTo();
+  await browser.waitUntil(
+    async () => {
+      const views = await captureViewPixels(
+        CINE_VIEW_SELECTOR,
+        80,
+        'cine-base-visibility.png'
+      );
+      return (
+        views.length === count &&
+        views.every(({ data }) => {
+          const bright = data.filter(
+            (value, index) => index % 4 !== 3 && value > 40
+          ).length;
+          return visible ? bright > 1000 : bright < 1000;
+        })
+      );
+    },
+    {
+      timeoutMsg: `Expected ${count} cine images to be ${visible ? 'visible' : 'hidden'}`,
+    }
+  );
+}
+
+describe('Base image availability', () => {
+  it('keeps cine visibility available in 3D Only and maximized 3D slots', async () => {
+    const directory = makeTempDir('cine-base-visibility');
+    writeFileSync(
+      join(directory, 'cine.dcm'),
+      buildSyntheticCineDicom({
+        studyUid: newUid(),
+        seriesUid: newUid(),
+        sopUid: newUid(),
+        rows: 16,
+        cols: 16,
+        numberOfFrames: 3,
+      })
+    );
+    await openVolViewPage('cine-base-visibility/cine.dcm');
+    await selectCineLayout('Four Up', 4);
+    await volViewPage.renderingModuleTab.click();
+    await waitForModuleTransitions();
+    const visibility = $('[data-testid="base-image-visibility"]');
+    await visibility.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await expect(visibility).toBeEnabled();
+    await expectCineVisibility(true, 4);
+    await visibility.click();
+    await expect(visibility).toHaveText(expect.stringContaining('SHOW'));
+    await expectCineVisibility(false, 4);
+
+    await selectCineLayout('3D Only', 1);
+    await expect(visibility).toHaveText(expect.stringContaining('SHOW'));
+    await expect(visibility).toBeEnabled();
+    await expect(
+      $('[data-testid="base-image-range-min"] input')
+    ).toBeDisabled();
+    await expect($('[data-testid="base-image-contrast"]')).toBeDisabled();
+    await expectCineVisibility(false, 1);
+    await visibility.click();
+    await expect(visibility).toHaveText(expect.stringContaining('HIDE'));
+    await expectCineVisibility(true, 1);
+
+    await selectCineLayout('Four Up', 4);
+    await visibility.click();
+    await expect(visibility).toHaveText(expect.stringContaining('SHOW'));
+    await $$(CINE_VIEW_SELECTOR)[3].doubleClick();
+    await expect($$(CINE_VIEW_SELECTOR)).toBeElementsArrayOfSize(1);
+    await expect(visibility).toBeEnabled();
+    await expectCineVisibility(false, 1);
+    await visibility.click();
+    await expectCineVisibility(true, 1);
+  });
+});
diff --git a/tests/specs/base-image-display.e2e.ts b/tests/specs/base-image-display.e2e.ts
new file mode 100644
index 000000000..334f8d815
--- /dev/null
+++ b/tests/specs/base-image-display.e2e.ts
@@ -0,0 +1,539 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import {
+  capture2DViewScreenshotMetrics,
+  captureViewPixels,
+  makeTempDir,
+  openVolViewPage,
+  selectLayout,
+  SESSION_SAVE_TIMEOUT,
+  waitForDownload,
+  waitForModuleTransitions,
+  writeManifestToFile,
+  writeMetaImage,
+} from './utils';
+
+const field = (endpoint: 'min' | 'max') =>
+  $(`[data-testid="base-image-range-${endpoint}"] input`);
+const handle = (endpoint: 'min' | 'max' | 'center') =>
+  $(`[data-testid="base-image-range-${endpoint}-handle"]`);
+
+async function openBase(withOverlay = false) {
+  const directory = makeTempDir('base-display');
+  const header = [
+    'NRRD0005',
+    'type: short',
+    'dimension: 3',
+    'sizes: 16 16 16',
+    'space: left-posterior-superior',
+    'space directions: (1,0,0) (0,1,0) (0,0,1)',
+    'space origin: (0,0,0)',
+    'encoding: ascii',
+  ].join('\n');
+  // Every orthogonal plane contains a ramp, including negative CT values.
+  const voxels = Array.from({ length: 4096 }, (_, index) => {
+    const x = index % 16;
+    const y = Math.floor(index / 16) % 16;
+    const z = Math.floor(index / 256);
+    return -1000 + ((x + y + z) % 16) * 100;
+  }).join(' ');
+  writeFileSync(join(directory, 'base.nrrd'), `${header}\n\n${voxels}`);
+  await writeManifestToFile(
+    {
+      windowing: { width: 1500, level: -250 },
+      io: { layerExtension: 'layer' },
+    },
+    'base-display-config.json'
+  );
+  const overlay = withOverlay ? writeMetaImage('base.layer.mha') : undefined;
+  await volViewPage.open(
+    `?urls=[tmp/base-display-config.json,tmp/base-display/base.nrrd${
+      overlay ? `,tmp/${overlay}` : ''
+    }]`
+  );
+  await volViewPage.waitForViews();
+  await selectLayout('Four Up', 3, true);
+  await volViewPage.renderingModuleTab.click();
+  for (const title of ['Color Presets', 'Cinematic Rendering']) {
+    const section = $(`.v-expansion-panel-title*=${title}`);
+    if ((await section.getAttribute('aria-expanded')) === 'true')
+      await section.click();
+  }
+  await waitForModuleTransitions();
+  await browser.waitUntil(
+    async () => (await $$('.Vue-Toastification__toast').length) === 0
+  );
+  await field('min').scrollIntoView({ block: 'center', behavior: 'instant' });
+  await expect(field('min')).toBeEnabled();
+}
+
+async function expectRange(minimum: number, maximum: number) {
+  await expect(field('min')).toHaveAttribute('title', String(minimum));
+  await expect(field('max')).toHaveAttribute('title', String(maximum));
+  const label = `W/L: ${(maximum - minimum).toFixed(2)} / ${(
+    (maximum + minimum) /
+    2
+  ).toFixed(2)}`;
+  for (const view of await volViewPage.getViews2D())
+    await expect(view).toHaveText(expect.stringContaining(label));
+}
+
+async function setRange(minimum: string, maximum: string) {
+  await setValueVueInput(field('min'), minimum);
+  await setValueVueInput(field('max'), maximum);
+  await browser.keys('Enter');
+}
+
+const capture = () =>
+  capture2DViewScreenshotMetrics('base-display-capture.png');
+
+async function expectViewsChanged(before: Awaited<ReturnType<typeof capture>>) {
+  await $('header').moveTo();
+  await browser.waitUntil(
+    async () => {
+      const after = await capture();
+      return (
+        after.length === 3 &&
+        after.every(
+          ({ checksum }, index) => checksum !== before[index].checksum
+        )
+      );
+    },
+    { timeoutMsg: 'Expected the base window to change all three slice images' }
+  );
+}
+
+async function openWindowing() {
+  await volViewPage.selectTool('mdi-circle-half-full');
+  await $('.v-menu.v-overlay--active .manual-inputs input').waitForDisplayed();
+  await $('.v-menu.v-overlay--active .manual-inputs').waitForStable();
+}
+
+async function expectRangeMatchesWindowing() {
+  const minimum = Number(await field('min').getAttribute('title'));
+  const maximum = Number(await field('max').getAttribute('title'));
+  await expectRange(minimum, maximum);
+  return [minimum, maximum] as const;
+}
+
+async function selectBasePalette(title: string) {
+  const palette = $('[data-testid="base-image-colormap"]');
+  await palette.scrollIntoView({ block: 'center', behavior: 'instant' });
+  await palette.click();
+  await $('.v-menu.v-overlay--active .v-overlay__content').waitForStable();
+  const option = $(`[role="option"]*=${title}`);
+  await option.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+  await option.waitForStable();
+  await option.click();
+  await expect(palette).toHaveText(expect.stringContaining(title));
+}
+
+async function coloredPixels(selector: string) {
+  const [{ data }] = await captureViewPixels(
+    selector,
+    0,
+    'base-oblique-capture.png'
+  );
+  let colored = 0;
+  for (let i = 0; i < data.length; i += 4)
+    if (
+      Math.max(data[i], data[i + 1], data[i + 2]) -
+        Math.min(data[i], data[i + 1], data[i + 2]) >
+      40
+    )
+      colored++;
+  return colored;
+}
+
+describe('Base image display range', () => {
+  it('edits a base without overlays and synchronizes presets, keyboard, drag and mouse windowing', async () => {
+    await openBase();
+    await expect($('[data-testid="base-image-properties"]')).toBeDisplayed();
+    await expect($('[data-testid="layer-colormap"]')).not.toExist();
+    await expectRange(-1000, 500);
+    await $('header').moveTo();
+    const original = await capture();
+    await setRange('-800', '200');
+    await expectRange(-800, 200);
+    await expectViewsChanged(original);
+    await setRange('50', '200');
+    await setValueVueInput(field('min'), '300.000');
+    await setValueVueInput(field('max'), '400.000');
+    await expectRange(300, 400);
+    await expect(field('max')).toBeFocused();
+    await expect(field('max')).toHaveValue('400.000');
+    await openWindowing();
+    const manual = $$('.v-overlay--active .manual-inputs input');
+    await expect(manual[0]).toHaveValue('100');
+    await expect(manual[1]).toHaveValue('350');
+    await setValueVueInput(manual[0], '600');
+    await setValueVueInput(manual[1], '-200');
+    await browser.keys('Enter');
+    await expectRange(-500, 100);
+    await expect(field('min')).toHaveValue('-500');
+    await expect(field('max')).toHaveValue('100');
+    await expect($('[data-testid="base-image-range-status"]')).not.toExist();
+    await browser.keys('Escape');
+    await setValueVueInput(field('min'), '-');
+    await openWindowing();
+    await $('.v-menu.v-overlay--active').$('label=Air').click();
+    await expectRange(-926, 74);
+    await expect(field('min')).toHaveValue('-');
+    await browser.keys('Escape');
+    await setValueVueInput(field('min'), '0.1');
+    await field('max').click();
+    expect(Number(await field('min').getAttribute('title'))).toBeCloseTo(
+      0.1,
+      12
+    );
+    await openWindowing();
+    await $('.v-menu.v-overlay--active').$('label=Air').click();
+    await expectRange(-926, 74);
+    await expect(field('min')).toHaveValue('-926');
+    await browser.keys('Escape');
+    await field('min').scrollIntoView({ block: 'center', behavior: 'instant' });
+    const gradient = await $(
+      '[data-testid="base-image-range-bar"] .color-map-swatch'
+    ).getAttribute('style');
+    if (!gradient) throw new Error('Expected a base grayscale gradient');
+    expect(gradient).toContain('linear-gradient(');
+    await setRange('-800', '200');
+    await handle('max').execute((element) => element.focus());
+    await browser.keys('PageDown');
+    await expectRange(-800, 50);
+    await handle('min').execute((element) => element.focus());
+    await expect(handle('min')).toBeFocused();
+    await browser.keys('End');
+    for (const endpoint of ['min', 'max', 'center'] as const)
+      await expect(handle(endpoint)).toBeEnabled();
+    const narrow = await expectRangeMatchesWindowing();
+    expect(narrow[0]).toBeGreaterThan(49);
+    expect(narrow[0]).toBeLessThan(narrow[1]);
+    expect(narrow[1]).toBe(50);
+    await browser.keys('Home');
+    await expectRange(-1000, 50);
+    await setRange('-800', '50');
+    await handle('max').execute((element) => element.focus());
+    await expect(handle('max')).toBeFocused();
+    await browser.keys('Home');
+    const narrowAtMin = await expectRangeMatchesWindowing();
+    expect(narrowAtMin[0]).toBe(-800);
+    expect(narrowAtMin[1]).toBeGreaterThan(-800);
+    expect(narrowAtMin[1]).toBeLessThan(-799);
+    await setRange('-800', '50');
+    const center = handle('center');
+    const location = await center.getLocation();
+    const size = await center.getSize();
+    const x = Math.round(location.x + size.width / 2);
+    const y = Math.round(location.y + size.height / 2);
+    await browser
+      .action('pointer')
+      .move({ x, y })
+      .down()
+      .move({ x: x + 15, y })
+      .up()
+      .perform();
+    const dragged = await expectRangeMatchesWindowing();
+    expect(dragged[0]).toBeGreaterThan(-800);
+    expect(dragged[1] - dragged[0]).toBeCloseTo(850, 8);
+    await expect(
+      $('[data-testid="base-image-range-bar"] .color-map-swatch')
+    ).not.toHaveAttribute('style', gradient);
+
+    await setRange('100', '200');
+    await setValueVueInput(field('max'), '99');
+    await browser.keys('Enter');
+    await expect($('[data-testid="base-image-range-status"]')).toHaveText(
+      'Min must be less than Max.'
+    );
+    await expectRange(100, 200);
+    await setValueVueInput(field('max'), '200');
+    await browser.keys('Enter');
+    await setRange('-800', '200');
+    const view = (await volViewPage.getViews2D())[0];
+    const canvas = await view.$('canvas');
+    const origin = await canvas.getLocation();
+    const bounds = await canvas.getSize();
+    const cx = Math.round(origin.x + bounds.width / 2);
+    const cy = Math.round(origin.y + bounds.height / 2);
+    await browser
+      .action('pointer')
+      .move({ x: cx, y: cy })
+      .down()
+      .move({ x: cx + 30, y: cy + 20 })
+      .up()
+      .perform();
+    await browser.waitUntil(
+      async () => Number(await field('min').getAttribute('title')) !== -800
+    );
+    const mouseRange = await expectRangeMatchesWindowing();
+    expect(mouseRange).not.toEqual([-800, 200]);
+  });
+
+  it('colors the base slices and oblique views independently of windowing and volume rendering', async () => {
+    await openBase();
+    await expect($('[data-testid="base-image-colormap"]')).toHaveText(
+      expect.stringContaining('Grayscale')
+    );
+    await expect($('[data-testid="layer-colormap"]')).not.toExist();
+    await $('header').moveTo();
+    const before = await capture();
+    const volumeSettings = await $$('.mapping-range-editor input').map(
+      (input) => input.getValue()
+    );
+    await selectBasePalette('DICOM Hot Iron');
+    await expectRange(-1000, 500);
+    await expectViewsChanged(before);
+    await browser.waitUntil(async () =>
+      (await capture()).every(({ colored }) => colored > 1000)
+    );
+    expect(
+      await $$('.mapping-range-editor input').map((input) => input.getValue())
+    ).toEqual(volumeSettings);
+    await $('[data-testid="base-image-contrast"]').click();
+    await $('.v-menu.v-overlay--active .v-card').waitForStable();
+    await $('.v-menu.v-overlay--active').$('label=Air').click();
+    await browser.keys('Escape');
+    await expectRange(-926, 74);
+    await expect($('[data-testid="base-image-colormap"]')).toHaveText(
+      expect.stringContaining('DICOM Hot Iron')
+    );
+
+    await volViewPage.layoutButton.click();
+    await $('.v-menu.v-overlay--active .v-overlay__content').waitForStable();
+    await $('.v-list-item-title=Oblique').click();
+    const oblique = $('.oblique-grid [data-testid="vtk-view"]');
+    await oblique.waitForDisplayed();
+    await expect(field('min')).toBeEnabled();
+    await expect($('[data-testid="base-image-colormap"]')).toHaveText(
+      expect.stringContaining('DICOM Hot Iron')
+    );
+    const obliqueSelector = '.oblique-grid [data-testid="vtk-view"]';
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () => (await coloredPixels(obliqueSelector)) > 1000
+    );
+    const colored = await coloredPixels(obliqueSelector);
+    await selectBasePalette('Grayscale');
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () => (await coloredPixels(obliqueSelector)) < colored / 3
+    );
+    await selectBasePalette('DICOM Hot Iron');
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () => (await coloredPixels(obliqueSelector)) > colored * 0.75
+    );
+    await expect(oblique).toHaveText(
+      expect.stringContaining('W/L: 1000.00 / -426.00')
+    );
+  });
+
+  it('uses local Contrast presets to recover an offscreen window without snapping a drag', async () => {
+    await openBase();
+    const volume = await volViewPage.getView3D();
+    await volume!.click();
+    const volumeBorder = () =>
+      volume!.execute(
+        (element) =>
+          getComputedStyle(element.closest('.grid-item')!).borderColor
+      );
+    expect(await volumeBorder()).toBe('rgb(60, 179, 113)');
+    const contrast = $('[data-testid="base-image-contrast"]');
+    await expect(contrast).toBeDisplayed();
+    await expect(contrast.$('.mdi-menu-down')).toExist();
+    const minimumRect = await field('min').getLocation();
+    const maximumRect = await field('max').getLocation();
+    const contrastRect = await contrast.getLocation();
+    expect(contrastRect.x).toBeGreaterThan(minimumRect.x);
+    expect(contrastRect.x).toBeLessThan(maximumRect.x);
+    await contrast.click();
+    await $('.v-menu.v-overlay--active .v-card').waitForStable();
+    await expectRange(-1000, 500);
+    const popup = $('.v-menu.v-overlay--active');
+    await popup.$('label=Lungs').click();
+    await expectRange(-1350, 150);
+    expect(await volumeBorder()).toBe('rgb(60, 179, 113)');
+    await browser.keys('Escape');
+    await expect(handle('min').$('.handle-grip')).toHaveAttribute(
+      'data-direction',
+      'left'
+    );
+    const thumb = handle('min');
+    const location = await thumb.getLocation();
+    const size = await thumb.getSize();
+    const x = Math.round(location.x + size.width / 2);
+    const y = Math.round(location.y + size.height / 2);
+    const trackWidth = (
+      await $('[data-testid="base-image-range-bar"]').getSize()
+    ).width;
+    await browser
+      .action('pointer')
+      .move({ x, y })
+      .down()
+      .move({ x: x + 2, y })
+      .up()
+      .perform();
+    const dragged = await expectRangeMatchesWindowing();
+    expect(dragged[0]).toBeCloseTo(-1350 + (2 / trackWidth) * 1500, 8);
+    expect(dragged[0]).toBeLessThan(-1000);
+    expect(dragged[1]).toBeCloseTo(150, 8);
+
+    await contrast.click();
+    await $('.v-menu.v-overlay--active .v-card').waitForStable();
+    expect(await expectRangeMatchesWindowing()).toEqual(dragged);
+    const manual = $$('.v-menu.v-overlay--active .manual-inputs input');
+    await $('.v-menu.v-overlay--active .manual-inputs').waitForStable();
+    await setValueVueInput(manual[0], '100');
+    await setValueVueInput(manual[1], '-2000');
+    await browser.keys('Enter');
+    await expectRange(-2050, -1950);
+    await browser.keys('Escape');
+    await expect(handle('center')).toBeEnabled();
+    await expect(handle('center').$('.handle-grip')).toHaveAttribute(
+      'data-direction',
+      'left'
+    );
+    await contrast.click();
+    await $('.v-menu.v-overlay--active .v-card').waitForStable();
+    await expectRange(-2050, -1950);
+    await $('.v-menu.v-overlay--active').$('label=Full Range').click();
+    await expectRange(-1000, 500);
+    await browser.keys('Escape');
+    await expect(field('min')).toHaveValue('-1000');
+    await expect(field('max')).toHaveValue('500');
+    for (const draft of ['-', '']) {
+      await setValueVueInput(field('min'), draft);
+      await browser.keys('Enter');
+      await expect(
+        $('[data-testid="base-image-range-status"]')
+      ).toBeDisplayed();
+      await contrast.click();
+      await $('.v-menu.v-overlay--active .v-card').waitForStable();
+      await $('.v-menu.v-overlay--active').$('label=Full Range').click();
+      await browser.keys('Escape');
+      await expect(field('min')).toHaveValue('-1000');
+      await expect(field('max')).toHaveValue('500');
+      await expect($('[data-testid="base-image-range-status"]')).not.toExist();
+    }
+  });
+
+  it('preserves the base window through layouts and a saved session without changing overlay settings', async () => {
+    await openBase(true);
+    const overlayMin = $('[data-testid="layer-range-min"] input');
+    const overlayMax = $('[data-testid="layer-range-max"] input');
+    await expect(overlayMin).toBeEnabled();
+    const overlaySettings = async () => ({
+      min: await overlayMin.getAttribute('title'),
+      max: await overlayMax.getAttribute('title'),
+      palette: await $('[data-testid="layer-colormap"]').getText(),
+      opacity: await $('[data-testid="layer-opacity-slider"] input').getValue(),
+      transparent: await $(
+        '[data-testid="layer-transparent-background"] input'
+      ).isSelected(),
+    });
+    const initialOverlay = await overlaySettings();
+    await selectBasePalette('Viridis');
+    await setRange('-800', '200');
+    await expectRange(-800, 200);
+    expect(await overlaySettings()).toEqual(initialOverlay);
+    const visibility = () => $('[data-testid="base-image-visibility"]');
+    await expect(visibility()).toHaveText(expect.stringContaining('HIDE'));
+    expect((await visibility().getLocation()).x).toBeLessThan(
+      (await $('[data-testid="base-image-colormap"]').getLocation()).x
+    );
+    expect((await visibility().getCSSProperty('border-radius')).value).toBe(
+      (
+        await $('[data-testid="base-image-contrast"]').getCSSProperty(
+          'border-radius'
+        )
+      ).value
+    );
+    await $('header').moveTo();
+    const shown = await capture();
+    await visibility().click();
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    await $('header').moveTo();
+    await browser.waitUntil(async () => {
+      const hidden = await capture();
+      return (
+        hidden.length === 3 &&
+        hidden.every(
+          (view, i) =>
+            view.colored > 1000 && view.checksum !== shown[i].checksum
+        )
+      );
+    });
+    await expectRange(-800, 200);
+    expect(await overlaySettings()).toEqual(initialOverlay);
+    await visibility().click();
+    await $('header').moveTo();
+    await browser.waitUntil(async () => {
+      const restored = await capture();
+      return (
+        restored.length === 3 &&
+        restored.every((view, i) => view.checksum === shown[i].checksum)
+      );
+    });
+    await visibility().click();
+    await volViewPage.layoutButton.click();
+    await $('.v-menu.v-overlay--active .v-overlay__content').waitForStable();
+    await $('.v-list-item-title=Oblique').click();
+    await $('.oblique-grid').waitForDisplayed();
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    await expect(visibility()).toBeEnabled();
+    await visibility().click();
+    await $('header').moveTo();
+    const obliqueSelector = '.oblique-grid [data-testid="vtk-view"]';
+    await browser.waitUntil(
+      async () => (await coloredPixels(obliqueSelector)) > 1000
+    );
+    const visibleColors = await coloredPixels(obliqueSelector);
+    await visibility().click();
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () => (await coloredPixels(obliqueSelector)) < visibleColors / 3
+    );
+    await selectLayout('3D Only', 0, true);
+    await expect(field('min')).toBeDisplayed();
+    await expect(visibility()).toBeDisabled();
+    await expect(field('min')).toBeDisabled();
+    await expect(field('max')).toBeDisabled();
+    await expect($('[data-testid="base-image-contrast"]')).toBeDisabled();
+    await expect($('[data-testid="base-image-colormap"] input')).toBeDisabled();
+    for (const endpoint of ['min', 'max', 'center'] as const)
+      await expect(handle(endpoint)).toHaveAttribute('tabindex', '-1');
+    await $('[data-testid="base-image-properties"] .ms-4').moveTo();
+    await expect(
+      $('.v-tooltip.v-overlay--active .v-overlay__content')
+    ).toHaveText(
+      'Open a 2D or oblique view showing this image to adjust window/level.'
+    );
+    await selectLayout('Axial Only', 1, false);
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    await expectRange(-800, 200);
+    await expect(field('min')).toBeEnabled();
+    const saved = await volViewPage.saveSession();
+    await waitForDownload(join(TEMP_DIR, saved), SESSION_SAVE_TIMEOUT);
+    await openVolViewPage(saved);
+    await volViewPage.renderingModuleTab.click();
+    await field('min').scrollIntoView({ block: 'center', behavior: 'instant' });
+    await expectRange(-800, 200);
+    await selectLayout('Four Up', 3, true);
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    await expectRange(-800, 200);
+    expect(await overlaySettings()).toEqual(initialOverlay);
+    await expect($('[data-testid="base-image-colormap"]')).toHaveText(
+      expect.stringContaining('Viridis')
+    );
+    await $('header').moveTo();
+    const hidden = await capture();
+    await visibility().click();
+    await expect(visibility()).toHaveText(expect.stringContaining('HIDE'));
+    await $('header').moveTo();
+    await expectViewsChanged(hidden);
+    expect(await overlaySettings()).toEqual(initialOverlay);
+  });
+});
diff --git a/tests/specs/image-histogram.e2e.ts b/tests/specs/image-histogram.e2e.ts
new file mode 100644
index 000000000..3eaa264c6
--- /dev/null
+++ b/tests/specs/image-histogram.e2e.ts
@@ -0,0 +1,168 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { setValueVueInput } from '../pageobjects/volview.page';
+import {
+  layeredImageManifest,
+  openLayerDisplayControls,
+} from './layerDisplayTestUtils';
+import { makeTempDir, openVolViewPage, writeManifestToFile } from './utils';
+
+function writeFractionalImage(
+  name: string,
+  peaks: [number, number],
+  maximum = 1
+) {
+  const directory = makeTempDir(name);
+  const header = [
+    'NRRD0005',
+    'type: float',
+    'dimension: 3',
+    'sizes: 16 16 16',
+    'space: left-posterior-superior',
+    'space directions: (1,0,0) (0,1,0) (0,0,1)',
+    'space origin: (0,0,0)',
+    'encoding: ascii',
+  ].join('\n');
+  const values = Array.from({ length: 4096 }, (_, index) => {
+    if (index === 0) return 0;
+    if (index === 4095) return maximum;
+    return peaks[index % 4 === 0 ? 1 : 0];
+  }).join(' ');
+  writeFileSync(join(directory, `${name}.nrrd`), `${header}\n\n${values}`);
+  return `${name}/${name}.nrrd`;
+}
+
+const control = (id: string) => $(`[data-testid="${id}"]`);
+
+async function histogramShape(prefix: string, peaks: number[]) {
+  return browser.execute(
+    (selector: string, positions: number[]) => {
+      const svg = document.querySelector<SVGSVGElement>(selector)!;
+      const path = svg.querySelector('path')!;
+      const inside = (fraction: number, height: number) =>
+        path.isPointInFill(
+          new DOMPoint(fraction * svg.viewBox.baseVal.width, height)
+        );
+      return {
+        major: inside(positions[0], 1),
+        nearMajor: inside(positions[0] + 0.001, 1),
+        minor: inside(positions[1], 13),
+        minorTall: inside(positions[1], 8),
+        empty: inside(0.37, 14.5),
+        middle: inside(0.5, 14.5),
+      };
+    },
+    `[data-testid="${prefix}-histogram"]`,
+    peaks
+  );
+}
+
+async function openHistogramControls(base: string, overlay: string) {
+  await writeManifestToFile(
+    layeredImageManifest(base, overlay),
+    'histogram.json'
+  );
+  await openVolViewPage('histogram.json');
+  await $(`.image-list-card*=${base.split('/').at(-1)}`)
+    .$('[data-testid="dataset-menu-button"]')
+    .click();
+  const show = $('.v-list-item*=Show in all views');
+  await show.waitForClickable();
+  await show.click();
+  await browser.keys('Escape');
+  await openLayerDisplayControls();
+}
+
+describe('Image histograms in display range bars', () => {
+  it('positions fractional base and overlay peaks on the fixed image axis without intercepting range edits', async () => {
+    const base = writeFractionalImage('histogram-base', [0.125, 0.625]);
+    const overlay = writeFractionalImage('histogram-overlay', [0.25, 0.75]);
+    await openHistogramControls(base, overlay);
+
+    for (const [prefix, peaks, bar] of [
+      ['base-image-range', [0.127, 0.627], 'base-image-range-bar'],
+      ['layer-range', [0.252, 0.752], 'palette-window-bar'],
+    ] as const) {
+      const histogram = control(`${prefix}-histogram`);
+      await histogram.waitForDisplayed();
+      await expect(histogram).toHaveAttribute('aria-hidden', 'true');
+      expect((await histogram.getCSSProperty('pointer-events')).value).toBe(
+        'none'
+      );
+      await browser.waitUntil(
+        async () => {
+          const shape = await histogramShape(prefix, [...peaks]);
+          return (
+            shape.major &&
+            shape.nearMajor &&
+            shape.minor &&
+            !shape.minorTall &&
+            !shape.empty &&
+            !shape.middle
+          );
+        },
+        {
+          timeoutMsg: `Expected fractional peaks with a 3:1 height ratio in ${prefix}`,
+        }
+      );
+      const originalPath = await histogram.$('path').getAttribute('d');
+      expect((await control(bar).getSize()).height).toBe(32);
+      await setValueVueInput(control(`${prefix}-min`).$('input'), '0.05');
+      await setValueVueInput(control(`${prefix}-max`).$('input'), '0.9');
+      const handle = control(`${prefix}-min-handle`);
+      await expect(handle).toBeEnabled();
+      const previous = await handle.getAttribute('aria-valuenow');
+      await handle.execute((element) => element.focus());
+      await browser.keys('ArrowRight');
+      await expect(handle).not.toHaveAttribute('aria-valuenow', previous!);
+      expect(await histogram.$('path').getAttribute('d')).toBe(originalPath);
+      expect((await control(bar).getSize()).height).toBe(32);
+    }
+  });
+
+  for (const { title, name, peaks, maximum, positions } of [
+    {
+      title:
+        'distinct occupied histogram bins in tiny fractional base and overlay ranges',
+      name: 'tiny',
+      peaks: [0.0005, 0.0025],
+      maximum: 0.003,
+      positions: [0.25, 0.8],
+    },
+    {
+      title:
+        'an upper-end histogram peak when the maximum lies on a bin boundary',
+      name: 'endpoint',
+      peaks: [255, 64],
+      maximum: 255,
+      positions: [0.998, 0.253],
+    },
+  ] as const) {
+    it(`preserves ${title}`, async () => {
+      const base = writeFractionalImage(
+        `histogram-${name}-base`,
+        [...peaks],
+        maximum
+      );
+      const overlay = writeFractionalImage(
+        `histogram-${name}-overlay`,
+        [...peaks],
+        maximum
+      );
+      await openHistogramControls(base, overlay);
+
+      for (const prefix of ['base-image-range', 'layer-range']) {
+        await control(`${prefix}-histogram`).waitForDisplayed();
+        await browser.waitUntil(
+          async () => {
+            const shape = await histogramShape(prefix, [...positions]);
+            return shape.major && shape.minor && !shape.minorTall;
+          },
+          {
+            timeoutMsg: `Expected distinct major and minor histogram heights in ${prefix} for values between 0 and ${maximum}`,
+          }
+        );
+      }
+    });
+  }
+});
diff --git a/tests/specs/layer-display-controls.e2e.ts b/tests/specs/layer-display-controls.e2e.ts
new file mode 100644
index 000000000..51ac75891
--- /dev/null
+++ b/tests/specs/layer-display-controls.e2e.ts
@@ -0,0 +1,678 @@
+import {
+  layeredImageManifest,
+  openLayerDisplayControls,
+} from './layerDisplayTestUtils';
+import * as path from 'path';
+import { TEMP_DIR } from '@/wdio.shared.conf';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import {
+  capture2DViewScreenshotMetrics,
+  selectLayout,
+  openVolViewPage,
+  SESSION_SAVE_TIMEOUT,
+  waitForDownload,
+  writeManifestToFile,
+  writeMetaImage,
+} from './utils';
+
+const paletteTitles = [
+  'Grayscale',
+  'Inverted grayscale',
+  'DICOM Hot Iron',
+  'DICOM PET',
+  'DICOM Hot Metal Blue',
+  'DICOM Spring',
+  'DICOM Winter',
+  'Viridis',
+  'Cool to Warm',
+];
+
+async function expectPaletteOptions() {
+  const options = $$('[role="option"]');
+  const expected = paletteTitles;
+  await expect(options).toBeElementsArrayOfSize(expected.length);
+  for (const [index, title] of expected.entries()) {
+    const option = options[index];
+    await option.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+    await expect(option).toHaveText(title);
+    await expect(
+      option.$('[data-testid="layer-palette-option-swatch"]')
+    ).toHaveAttribute('style', expect.stringContaining('linear-gradient('));
+  }
+}
+
+async function captureViewPixels() {
+  return capture2DViewScreenshotMetrics('overlay-capture.png');
+}
+
+async function windowingLabels() {
+  const views = await volViewPage.getViews2D();
+  return views.map(async (view) => {
+    const text = await view.getText();
+    return text.match(/W\/L: [\d.-]+ \/ [\d.-]+/)?.[0];
+  });
+}
+
+async function expectAppliedRange(
+  min: string,
+  max: string,
+  displayedMax = max
+) {
+  await $('h4*=display-overlay.mha').click();
+  await expect($('[data-testid="layer-range-min"] input')).toHaveValue(min);
+  await expect($('[data-testid="layer-range-max"] input')).toHaveValue(
+    displayedMax
+  );
+  await expect($('[data-testid="layer-range-min"] input')).toHaveAttribute(
+    'title',
+    min
+  );
+  await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+    'title',
+    max
+  );
+}
+
+async function expectDisplaySettings(
+  min: string,
+  max: string,
+  displayedMax = max
+) {
+  await expectAppliedRange(min, max, displayedMax);
+  await expect($('[data-testid="layer-colormap"]')).toHaveText(
+    expect.stringContaining('Cool to Warm')
+  );
+  await expect(
+    $('[data-testid="layer-opacity-slider"] [role="slider"]')
+  ).toHaveAttribute('aria-valuenow', '0.5');
+  await expect(
+    $('[data-testid="layer-transparent-background"] input')
+  ).not.toBeChecked();
+}
+
+async function expectRenderedPixels(
+  expected: Awaited<ReturnType<typeof captureViewPixels>>
+) {
+  await $('header').moveTo();
+  await browser.waitUntil(
+    async () => {
+      const pixels = await captureViewPixels();
+      return (
+        pixels.length === expected.length &&
+        pixels.every(
+          ({ colored, blue, checksum }, index) =>
+            colored === expected[index].colored &&
+            blue === expected[index].blue &&
+            checksum === expected[index].checksum
+        )
+      );
+    },
+    {
+      timeoutMsg:
+        'Expected matching overlay color counts and intensity sum after replacing views or reopening the session',
+    }
+  );
+}
+
+async function openDisplayFixture({
+  preset = 'Cool to Warm',
+  mappingRange = [-2.75, 100.25],
+  opacity = 0.5,
+  transparentBackground = false,
+} = {}) {
+  const display = { preset, mappingRange, opacity, transparentBackground };
+  const base = writeMetaImage('display-base.mha');
+  const overlay = writeMetaImage('display-overlay.mha', { step: 29 });
+  const manifest = 'display-controls.json';
+  await writeManifestToFile(
+    {
+      ...layeredImageManifest(base, overlay),
+      layerDisplay: {
+        'base::overlay': display,
+      },
+    },
+    manifest
+  );
+
+  await openVolViewPage(manifest);
+  const baseCard = $(`.image-list-card*=${base}`);
+  await baseCard.waitForClickable();
+  await baseCard.$('[data-testid="dataset-menu-button"]').click();
+  const showInAllViews = $('.v-list-item*=Show in all views');
+  await showInAllViews.waitForClickable();
+  await showInAllViews.click();
+  await browser.keys('Escape');
+  await openLayerDisplayControls();
+  await $('header').moveTo();
+  await browser.waitUntil(
+    async () => {
+      const pixels = await captureViewPixels();
+      return (
+        pixels.length === 3 && pixels.every(({ colored }) => colored > 1000)
+      );
+    },
+    { timeoutMsg: 'Expected the overlay to render in all three 2D views' }
+  );
+}
+
+async function openEditedDisplayFixture() {
+  await openDisplayFixture({
+    preset: 'DICOM Hot Iron',
+    mappingRange: [0, 255],
+    opacity: 0.6,
+  });
+  const select = $('[data-testid="layer-colormap"]');
+  await select.scrollIntoView({ block: 'center', behavior: 'instant' });
+  await select.click();
+  const option = $('[role="option"]*=Cool to Warm');
+  await option.scrollIntoView({ block: 'center', behavior: 'instant' });
+  await option.waitForClickable();
+  await option.click();
+  await setValueVueInput($('[data-testid="layer-range-min"] input'), '-2.75');
+  await setValueVueInput($('[data-testid="layer-range-max"] input'), '100.25');
+  await browser.execute(() => {
+    document
+      .querySelector<HTMLElement>(
+        '[data-testid="layer-opacity-slider"] [role="slider"]'
+      )!
+      .focus();
+  });
+  await browser.keys('PageDown');
+  await expectDisplaySettings('-2.75', '100.25', '100.3');
+  await $('header').moveTo();
+  await browser.waitUntil(
+    async () => {
+      const pixels = await captureViewPixels();
+      return (
+        pixels.length === 3 &&
+        pixels.every(({ colored, blue }) => colored > 1000 && blue > 0)
+      );
+    },
+    {
+      timeoutMsg: 'Expected the edited Cool to Warm palette in all three views',
+    }
+  );
+  const baseWindowing = await windowingLabels();
+  expect(baseWindowing.every(Boolean)).toBe(true);
+  const appliedPixels = await captureViewPixels();
+  return { baseWindowing, appliedPixels };
+}
+
+describe('Overlay display controls', () => {
+  for (const { title, preset } of [
+    { title: 'missing', preset: undefined },
+    { title: 'unknown', preset: 'Unknown palette' },
+  ]) {
+    it(`uses Hot Iron for a ${title} saved palette`, async () => {
+      const base = writeMetaImage(`fallback-${title}-base.mha`);
+      const overlay = writeMetaImage(`fallback-${title}-overlay.mha`, {
+        step: 29,
+      });
+      const manifest = `fallback-${title}.json`;
+      await writeManifestToFile(
+        {
+          ...layeredImageManifest(base, overlay),
+          layerDisplay: {
+            'base::overlay': {
+              ...(preset === undefined ? {} : { preset }),
+              mappingRange: [20, 200],
+              opacity: 0.4,
+              transparentBackground: false,
+            },
+          },
+        },
+        manifest
+      );
+      await openVolViewPage(manifest);
+      await openLayerDisplayControls();
+      const select = $('[data-testid="layer-colormap"]');
+      await expect(select).toHaveText(
+        expect.stringContaining('DICOM Hot Iron')
+      );
+      await expect($('[data-testid="layer-range-min"] input')).toHaveValue(
+        '20'
+      );
+      await expect($('[data-testid="layer-range-max"] input')).toHaveValue(
+        '200'
+      );
+      await expect(
+        $('[data-testid="layer-opacity-slider"] [role="slider"]')
+      ).toHaveAttribute('aria-valuenow', '0.4');
+      await expect(
+        $('[data-testid="layer-transparent-background"] input')
+      ).not.toBeChecked();
+      await select.scrollIntoView({ block: 'center', behavior: 'instant' });
+      await select.click();
+      await expect($('[role="option"]*=DICOM Hot Iron')).toHaveAttribute(
+        'aria-selected',
+        'true'
+      );
+      await browser.keys('Escape');
+    });
+  }
+
+  it('applies palette, opacity and range edits in every view and preserves pixels for invalid drafts', async () => {
+    await openDisplayFixture({
+      preset: '2hot',
+      mappingRange: [0, 255],
+      opacity: 1,
+      transparentBackground: true,
+    });
+    const transparent = $('[data-testid="layer-transparent-background"] input');
+    await expect(transparent).toBeChecked();
+    await browser.waitUntil(
+      async () => (await $$('.Vue-Toastification__toast').length) === 0
+    );
+    await transparent.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await transparent.click();
+    await expect(transparent).not.toBeChecked();
+    const select = $('[data-testid="layer-colormap"]');
+    await expect(select).toHaveText(expect.stringContaining('DICOM Hot Iron'));
+    const rangeHandles = await $$(
+      '[data-testid="layer-range-slider"] [role="slider"]'
+    );
+    expect(
+      await rangeHandles.map((handle) => handle.getComputedLabel())
+    ).toEqual(
+      expect.arrayContaining([
+        'Display range minimum',
+        'Display range maximum',
+        'Display range center',
+      ])
+    );
+    expect(rangeHandles).toHaveLength(3);
+    await expect(
+      await $(
+        '[data-testid="layer-opacity-slider"] [role="slider"]'
+      ).getComputedLabel()
+    ).toBe('Opacity');
+    await browser.waitUntil(
+      async () => (await $$('.Vue-Toastification__toast').length) === 0
+    );
+    await $('[data-testid="layer-range-min"] input').scrollIntoView({
+      block: 'center',
+      behavior: 'instant',
+    });
+    await select.waitForClickable();
+    await browser.execute(() => {
+      document
+        .querySelector<HTMLElement>(
+          '[data-testid="layer-opacity-slider"] [role="slider"]'
+        )!
+        .focus();
+    });
+    await browser.keys('Home');
+    for (let step = 0; step < 5; step++) await browser.keys('PageUp');
+    await expect(
+      $('[data-testid="layer-opacity-slider"] [role="slider"]')
+    ).toHaveAttribute('aria-valuenow', '0.5');
+
+    const views = await volViewPage.getViews2D();
+    expect(await views.length).toBe(3);
+    const baseWindowing = await windowingLabels();
+    expect(baseWindowing.every(Boolean)).toBe(true);
+    await select.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await browser.waitUntil(
+      async () => (await $$('.Vue-Toastification__toast').length) === 0
+    );
+    await select.click();
+    await expect($('[role="option"]*=DICOM Hot Iron')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+    const coolToWarm = $('[role="option"]*=Cool to Warm');
+    await coolToWarm.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await coolToWarm.waitForClickable();
+    await coolToWarm
+      .$('[data-testid="layer-palette-option-swatch"]')
+      .waitForDisplayed();
+    await browser.saveScreenshot(
+      path.join(TEMP_DIR, 'overlay-palette-menu.png')
+    );
+    await coolToWarm.click();
+    await expect(select).toHaveText(expect.stringContaining('Cool to Warm'));
+    await browser.waitUntil(
+      async () => {
+        const pixels = await captureViewPixels();
+        return pixels.length === 3 && pixels.every(({ blue }) => blue > 1000);
+      },
+      {
+        timeoutMsg: 'Expected palette to change pixels in all three 2D views',
+      }
+    );
+
+    const beforeRange = await captureViewPixels();
+    await $('[data-testid="layer-range-min"] input').scrollIntoView({
+      block: 'center',
+      behavior: 'instant',
+    });
+    await $('[data-testid="layer-range-min"] input').waitForClickable();
+    await setValueVueInput($('[data-testid="layer-range-min"] input'), '-2.75');
+    await setValueVueInput(
+      $('[data-testid="layer-range-max"] input'),
+      '100.25'
+    );
+    await expectAppliedRange('-2.75', '100.25', '100.3');
+    await $('[data-testid="layer-range-max"] input').click();
+    await expect($('[data-testid="layer-range-max"] input')).toHaveValue(
+      '100.3'
+    );
+    await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+      'title',
+      '100.25'
+    );
+    await expectAppliedRange('-2.75', '100.25', '100.3');
+    await browser.waitUntil(
+      async () => {
+        const after = await captureViewPixels();
+        return (
+          after.length === 3 &&
+          after.every(
+            ({ colored, blue, checksum }, index) =>
+              colored > 1000 &&
+              blue < beforeRange[index].blue &&
+              checksum !== beforeRange[index].checksum
+          )
+        );
+      },
+      {
+        timeoutMsg: 'Expected range to change pixels in all three 2D views',
+      }
+    );
+    await expect($('[data-testid="layer-opacity-slider"] input')).toHaveValue(
+      '0.5'
+    );
+    await expect(
+      $('[data-testid="layer-opacity-slider"] [role="slider"]')
+    ).toHaveAttribute('aria-valuenow', '0.5');
+    await expectAppliedRange('-2.75', '100.25', '100.3');
+    expect(await windowingLabels()).toEqual(baseWindowing);
+    await $('header').moveTo();
+    const appliedPixels = await captureViewPixels();
+    await setValueVueInput($('[data-testid="layer-range-max"] input'), '-3');
+    await $('[data-testid="layer-range-max"] input').click();
+    await browser.keys('Enter');
+    await expect($('[data-testid="layer-range-status"]')).toHaveText(
+      'Min must be less than Max.'
+    );
+    await expect($('[data-testid="layer-range-min"] input')).toHaveAttribute(
+      'title',
+      '-2.75'
+    );
+    await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+      'title',
+      '100.25'
+    );
+    expect(await captureViewPixels()).toEqual(appliedPixels);
+
+    await setValueVueInput(
+      $('[data-testid="layer-range-max"] input'),
+      '100.25'
+    );
+    await setValueVueInput($('[data-testid="layer-range-min"] input'), '0');
+    await setValueVueInput($('[data-testid="layer-range-max"] input'), '255');
+    await $('header').moveTo();
+    await expectAppliedRange('0', '255');
+    await expect($('[data-testid="layer-colormap"]')).toHaveText(
+      expect.stringContaining('Cool to Warm')
+    );
+    await expect(
+      $('[data-testid="layer-opacity-slider"] [role="slider"]')
+    ).toHaveAttribute('aria-valuenow', '0.5');
+    await browser.waitUntil(
+      async () => {
+        const fullRange = await captureViewPixels();
+        return (
+          fullRange.length === 3 &&
+          fullRange.every(({ blue }, index) => blue === beforeRange[index].blue)
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected entering the full image range to restore the colors in all three views',
+      }
+    );
+    await browser.execute(() => {
+      document
+        .querySelector<HTMLElement>('[data-testid="layer-range-max-handle"]')!
+        .focus();
+    });
+    await browser.keys('PageDown');
+    await expectAppliedRange('0', '229.5');
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () => {
+        const pixels = await captureViewPixels();
+        return (
+          pixels.length === 3 &&
+          pixels.every(({ blue }, index) => blue < beforeRange[index].blue)
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected the range slider to update the overlay immediately in all three views',
+      }
+    );
+    await browser.saveScreenshot(
+      path.join(TEMP_DIR, 'overlay-display-controls.png')
+    );
+  });
+
+  it('disables controls without a 2D view and preserves appearance when replacing layouts', async () => {
+    const { baseWindowing, appliedPixels } = await openEditedDisplayFixture();
+    await selectLayout('3D Only', 0, true);
+    await expect($('[data-testid="layer-colormap"]')).toBeDisplayed();
+    await expect($('[data-testid="layer-colormap"] input')).toBeDisabled();
+    for (const selector of [
+      '[data-testid="layer-range-min"] input',
+      '[data-testid="layer-range-max"] input',
+    ]) {
+      await expect($(selector)).toBeDisplayed();
+      await expect($(selector)).toBeDisabled();
+    }
+    await expect(
+      $('[data-testid="layer-transparent-background"]')
+    ).toBeDisplayed();
+    await expect(
+      $('[data-testid="layer-transparent-background"] input')
+    ).toBeDisabled();
+    await expect($('[data-testid="layer-range-slider"]')).toBeDisplayed();
+    for (const handle of await $$(
+      '[data-testid="layer-range-slider"] [role="slider"]'
+    ))
+      await expect(handle).toHaveAttribute('tabindex', '-1');
+    await expect($('[data-testid="layer-opacity-slider"]')).toBeDisplayed();
+    await expect(
+      $('[data-testid="layer-opacity-slider"] input')
+    ).toBeDisabled();
+    await expect(
+      $('[data-testid="layer-opacity-slider"] [role="slider"]')
+    ).toHaveAttribute('tabindex', '-1');
+    await $('[data-testid="layer-colormap"]').parentElement().moveTo();
+    await expect(
+      $('.v-tooltip.v-overlay--active .v-overlay__content')
+    ).toHaveText('Open a 2D view showing this overlay to adjust it.');
+    await browser.saveScreenshot(
+      path.join(TEMP_DIR, 'overlay-controls-disabled.png')
+    );
+    await selectLayout('Axial Only', 1, false);
+    await expect($('[data-testid="layer-range-min"] input')).toBeEnabled();
+    await expectDisplaySettings('-2.75', '100.25', '100.3');
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () => {
+        const pixels = await captureViewPixels();
+        return pixels.length === 1 && pixels[0].colored > 1000;
+      },
+      {
+        timeoutMsg:
+          'Expected the edited overlay to render in the replacement axial view',
+      }
+    );
+    await selectLayout('Four Up', 3, true);
+    await expectDisplaySettings('-2.75', '100.25', '100.3');
+    expect(await windowingLabels()).toEqual(baseWindowing);
+    await expectRenderedPixels(appliedPixels);
+  });
+
+  it('restores global appearance after converting every 2D view and saving a 3D-only session', async () => {
+    const { baseWindowing, appliedPixels } = await openEditedDisplayFixture();
+    await selectLayout('Axial Only', 1, false);
+    await expectDisplaySettings('-2.75', '100.25', '100.3');
+    await browser.waitUntil(
+      async () => {
+        const pixels = await captureViewPixels();
+        return pixels.length === 1 && pixels[0].colored > 1000;
+      },
+      { timeoutMsg: 'Expected the overlay to render in the axial view' }
+    );
+    const axialPixels = await captureViewPixels();
+    await selectLayout('Four Up', 3, true);
+    await expectRenderedPixels(appliedPixels);
+    for (let remaining = 2; remaining >= 0; remaining--) {
+      const view = (await volViewPage.getViews2D())[0];
+      await view.$('.view-type-select').click();
+      const volume = $('[role="option"]*=Volume');
+      await volume.waitForClickable();
+      await volume.click();
+      await volViewPage.waitForViewCounts(remaining, true);
+    }
+    await selectLayout('3D Only', 0, true);
+    const saved = await volViewPage.saveSession();
+    await waitForDownload(path.join(TEMP_DIR, saved), SESSION_SAVE_TIMEOUT);
+    await openVolViewPage(saved);
+    await volViewPage.waitForViewCounts(0, true);
+    await openLayerDisplayControls();
+    await expect($('[data-testid="layer-range-min"] input')).toBeDisabled();
+    await selectLayout('Axial Only', 1, false);
+    await expectDisplaySettings('-2.75', '100.25', '100.3');
+    await expectRenderedPixels(axialPixels);
+    await selectLayout('Four Up', 3, true);
+    await expectDisplaySettings('-2.75', '100.25', '100.3');
+    expect(await windowingLabels()).toEqual(baseWindowing);
+    await expectRenderedPixels(appliedPixels);
+
+    const select = $('[data-testid="layer-colormap"]');
+    await select.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await select.click();
+    await expect($('[role="option"]*=Cool to Warm')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+    await browser.keys('Escape');
+  });
+
+  it('preserves transparent background and rendered colors when reopening a session', async () => {
+    await openDisplayFixture({ mappingRange: [0, 229.5] });
+    await expectDisplaySettings('0', '229.5');
+    const beforeTransparent = await captureViewPixels();
+    const restoredTransparent = $(
+      '[data-testid="layer-transparent-background"] input'
+    );
+    await restoredTransparent.scrollIntoView({
+      block: 'center',
+      behavior: 'instant',
+    });
+    await restoredTransparent.click();
+    await expect(restoredTransparent).toBeChecked();
+    await $('header').moveTo();
+    let transparentPixels = await captureViewPixels();
+    await browser.waitUntil(
+      async () => {
+        transparentPixels = await captureViewPixels();
+        return (
+          transparentPixels.length === 3 &&
+          transparentPixels.every(
+            ({ checksum }, index) =>
+              checksum !== beforeTransparent[index].checksum
+          )
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected transparent background to update every view before saving',
+      }
+    );
+    const transparentSession = await volViewPage.saveSession();
+    await waitForDownload(
+      path.join(TEMP_DIR, transparentSession),
+      SESSION_SAVE_TIMEOUT
+    );
+    await openVolViewPage(transparentSession);
+    await openLayerDisplayControls();
+    await expect(
+      $('[data-testid="layer-transparent-background"] input')
+    ).toBeChecked();
+    await expectRenderedPixels(transparentPixels);
+
+    const select = $('[data-testid="layer-colormap"]');
+    await select.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await select.click();
+    await expect($('[role="option"]*=Cool to Warm')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+    await browser.keys('Escape');
+    await browser.saveScreenshot(
+      path.join(TEMP_DIR, 'overlay-transparent-restored.png')
+    );
+  });
+
+  it('offers the curated palette inventory and renders Spring and Winter in every view', async () => {
+    await openDisplayFixture({
+      mappingRange: [0, 229.5],
+      transparentBackground: true,
+    });
+    const select = $('[data-testid="layer-colormap"]');
+    await select.scrollIntoView({
+      block: 'center',
+      behavior: 'instant',
+    });
+    await select.click();
+    await expectPaletteOptions();
+    await expect($('[role="option"]*=Cool to Warm')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+    for (const title of ['DICOM Spring', 'DICOM Winter']) {
+      await browser.keys('Escape');
+      await $('header').moveTo();
+      const beforePalette = await captureViewPixels();
+      await select.click();
+      const option = $(`[role="option"]*=${title}`);
+      await option.scrollIntoView({ block: 'center', behavior: 'instant' });
+      await option.waitForClickable();
+      await expect(
+        option.$('[data-testid="layer-palette-option-swatch"]')
+      ).toBeDisplayed();
+      await option.click();
+      await expect(select).toHaveText(expect.stringContaining(title));
+      await $('header').moveTo();
+      await browser.waitUntil(
+        async () => {
+          const pixels = await captureViewPixels();
+          return (
+            pixels.length === 3 &&
+            pixels.every(
+              ({ checksum }, index) =>
+                checksum !== beforePalette[index].checksum
+            )
+          );
+        },
+        {
+          timeoutMsg: `Expected ${title} to change colors in all three 2D views`,
+        }
+      );
+      await select.click();
+      await expect($(`[role="option"]*=${title}`)).toHaveAttribute(
+        'aria-selected',
+        'true'
+      );
+    }
+    await browser.saveScreenshot(
+      path.join(TEMP_DIR, 'overlay-short-palette-menu.png')
+    );
+    await browser.keys('Escape');
+    expect(await volViewPage.getNotificationsCount()).toEqual(0);
+  });
+});
diff --git a/tests/specs/layerDisplayTestUtils.ts b/tests/specs/layerDisplayTestUtils.ts
new file mode 100644
index 000000000..2b3d8ff46
--- /dev/null
+++ b/tests/specs/layerDisplayTestUtils.ts
@@ -0,0 +1,33 @@
+import { volViewPage } from '../pageobjects/volview.page';
+import { waitForModuleTransitions } from './utils';
+
+export const layeredImageManifest = (base: string, overlay: string) => ({
+  version: '7.0.0',
+  dataSources: [base, overlay].map((name, index) => ({
+    id: index + 1,
+    type: 'uri',
+    uri: `/tmp/${name}`,
+    name: name.split('/').at(-1),
+  })),
+  datasets: [
+    { id: 'base', dataSourceId: 1 },
+    { id: 'overlay', dataSourceId: 2 },
+  ],
+  primarySelection: 'base',
+  parentToLayers: [{ selectionKey: 'base', sourceSelectionKeys: ['overlay'] }],
+});
+
+export async function openLayerDisplayControls() {
+  await volViewPage.renderingModuleTab.click();
+  const volume = $('[data-testid="volume-rendering-toggle"]');
+  if (
+    (await volume.isExisting()) &&
+    (await volume.getAttribute('aria-expanded')) === 'true'
+  )
+    await volume.click();
+  await waitForModuleTransitions();
+  await $('[data-testid="layer-colormap"]').waitForDisplayed();
+  await browser.waitUntil(
+    async () => (await $$('.Vue-Toastification__toast').length) === 0
+  );
+}
diff --git a/tests/specs/layers-and-rendering.e2e.ts b/tests/specs/layers-and-rendering.e2e.ts
index 50d53a4f8..7cb1dd734 100644
--- a/tests/specs/layers-and-rendering.e2e.ts
+++ b/tests/specs/layers-and-rendering.e2e.ts
@@ -2,8 +2,13 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { cleanuptotal } from 'wdio-cleanuptotal-service';
 import { DOWNLOAD_TIMEOUT, FIXTURES, TEMP_DIR } from '@/wdio.shared.conf';
-import { volViewPage } from '../pageobjects/volview.page';
-import { openUrls, openVolViewPage, writeManifestToFile } from './utils';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import {
+  openUrls,
+  openVolViewPage,
+  waitForModuleTransitions,
+  writeManifestToFile,
+} from './utils';
 import { PROSTATEX_DATASET } from '../datasets';
 
 const openLayeringFixtures = async () => {
@@ -55,6 +60,57 @@ describe('Layers and Rendering', () => {
 
     await expect(volumeRenderingSection).toBeDisplayed();
     await expect(pwfCanvas).toExist();
+
+    const volumePanel = $('[data-testid="volume-rendering-panel"]');
+    const toggle = $('[data-testid="volume-rendering-toggle"]');
+    const presets = volumePanel.$('.v-expansion-panel-title*=Color Presets');
+    const cinematic = volumePanel.$(
+      '.v-expansion-panel-title*=Cinematic Rendering'
+    );
+    const shift = volumePanel
+      .$('.mapping-range-editor .v-slider')
+      .$('[role="slider"]');
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    await expect(presets).toBeDisplayed();
+    await expect(cinematic).toBeDisplayed();
+    const initialShift = await shift.getAttribute('aria-valuenow');
+    await shift.execute((element) => element.focus());
+    await browser.keys('ArrowRight');
+    await expect(shift).not.toHaveAttribute(
+      'aria-valuenow',
+      initialShift ?? ''
+    );
+    const editedShift = await shift.getAttribute('aria-valuenow');
+    if (editedShift === null) throw new Error('Expected a displayed 3D shift');
+
+    await toggle.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await waitForModuleTransitions();
+    await expect(pwfCanvas).not.toBeDisplayed();
+    await expect(presets).not.toBeDisplayed();
+    await expect(cinematic).not.toBeDisplayed();
+    const minimum = $('[data-testid="base-image-range-min"] input');
+    const maximum = $('[data-testid="base-image-range-max"] input');
+    await expect(minimum).toBeDisplayed();
+    await expect(minimum).toBeEnabled();
+    await setValueVueInput(minimum, '0');
+    await setValueVueInput(maximum, '100');
+    await browser.keys('Enter');
+    for (const view of await volViewPage.getViews2D())
+      await expect(view).toHaveText(
+        expect.stringContaining('W/L: 100.00 / 50.00')
+      );
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    await waitForModuleTransitions();
+    await expect(pwfCanvas).toBeDisplayed();
+    await expect(presets).toBeDisplayed();
+    await expect(cinematic).toBeDisplayed();
+    await expect(shift).toHaveAttribute('aria-valuenow', editedShift);
+    await expect(minimum).toHaveAttribute('title', '0');
+    await expect(maximum).toHaveAttribute('title', '100');
   });
 
   it('should create overlay with 2 DICOM images', async () => {
@@ -115,27 +171,9 @@ describe('Layers and Rendering', () => {
     );
     await addLayerButton.click();
 
-    await browser.waitUntil(
-      () =>
-        browser.execute(() => {
-          const app = (document.querySelector('#app') as any)?.__vue_app__;
-          const pinia = app?.config?.globalProperties?.$pinia;
-          const imageCache = pinia?._s?.get('image-cache');
-          const layerId = imageCache?.imageIds?.find((id: string) =>
-            id.includes('::')
-          );
-          return layerId && imageCache.imageStatus[layerId] === 'complete';
-        }),
-      {
-        timeout: DOWNLOAD_TIMEOUT,
-        timeoutMsg: 'Expected the layer image to finish loading',
-      }
-    );
-
     const renderTab = await volViewPage.renderingModuleTab;
     await renderTab.click();
 
-    // need to wait a little for layer section to render
     await browser.waitUntil(
       async function slidersExist() {
         const layerOpacitySliders = await volViewPage.layerOpacitySliders;
@@ -146,6 +184,16 @@ describe('Layers and Rendering', () => {
       }
     );
 
+    const minimum = $('[data-testid="layer-range-min"] input');
+    const maximum = $('[data-testid="layer-range-max"] input');
+    await minimum.waitForEnabled();
+    await waitForModuleTransitions();
+    // The resampled fixture spans scalar values 0 through 763.
+    await setValueVueInput(minimum, '0');
+    await setValueVueInput(maximum, '763');
+    await expect(minimum).toHaveAttribute('title', '0');
+    await expect(maximum).toHaveAttribute('title', '763');
+
     const layerOpacitySliders = await volViewPage.layerOpacitySliders;
     const firstSlider = layerOpacitySliders[0];
     const sliderThumb = await firstSlider.$('[role="slider"]');
diff --git a/tests/specs/legacy-window-appearance.e2e.ts b/tests/specs/legacy-window-appearance.e2e.ts
new file mode 100644
index 000000000..81a0a875d
--- /dev/null
+++ b/tests/specs/legacy-window-appearance.e2e.ts
@@ -0,0 +1,134 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import JSZip from 'jszip';
+import type { z } from 'zod';
+import type { ManifestSchema } from '@/src/io/state-file/schema';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import { ONE_CT_SLICE_DICOM } from '../datasets';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import {
+  capture2DViewScreenshotMetrics,
+  openThroughDialog,
+  openUrls,
+  selectLayout,
+  SESSION_SAVE_TIMEOUT,
+  waitForDownload,
+  waitForModuleTransitions,
+} from './utils';
+
+const field = (endpoint: 'min' | 'max') =>
+  $(`[data-testid="base-image-range-${endpoint}"] input`);
+const visibility = () => $('[data-testid="base-image-visibility"]');
+const palette = () => $('[data-testid="base-image-colormap"]');
+const capture = () =>
+  capture2DViewScreenshotMetrics('legacy-window-appearance.png');
+
+const expectRange = async (min: number, max: number) => {
+  await expect(field('min')).toHaveAttribute('title', String(min));
+  await expect(field('max')).toHaveAttribute('title', String(max));
+  await expect((await volViewPage.getViews2D())[0]).toHaveText(
+    expect.stringContaining(
+      `W/L: ${(max - min).toFixed(2)} / ${((max + min) / 2).toFixed(2)}`
+    )
+  );
+};
+
+const setRange = async (min: number, max: number) => {
+  await setValueVueInput(field('min'), String(min));
+  await setValueVueInput(field('max'), String(max));
+  await browser.keys('Enter');
+  await expectRange(min, max);
+};
+
+const saveSession = async () => {
+  const filename = await volViewPage.saveSession();
+  const filePath = join(TEMP_DIR, filename);
+  await waitForDownload(filePath, SESSION_SAVE_TIMEOUT);
+  return filePath;
+};
+
+const omitSavedAppearance = async (filePath: string) => {
+  const zip = await JSZip.loadAsync(readFileSync(filePath));
+  const manifest = JSON.parse(
+    await zip.file('manifest.json')!.async('string')
+  ) as z.input<typeof ManifestSchema>;
+  const windows = Object.values(manifest.viewByID ?? {}).flatMap((view) =>
+    Object.values(view.config ?? {}).flatMap(({ window }) => window ?? [])
+  );
+  expect(windows.length).toBeGreaterThan(0);
+  windows.forEach((window) => {
+    delete window.visibility;
+    delete window.preset;
+  });
+  zip.file('manifest.json', JSON.stringify(manifest));
+  const legacyPath = join(TEMP_DIR, 'legacy-window.volview.zip');
+  writeFileSync(legacyPath, await zip.generateAsync({ type: 'nodebuffer' }));
+  return legacyPath;
+};
+
+const clearTransientUI = async () => {
+  await $('header').moveTo();
+  await browser.waitUntil(
+    async () => (await $$('.Vue-Toastification__toast').length) === 0
+  );
+};
+
+const restoreLegacySession = async (filePath: string) => {
+  await openThroughDialog(filePath);
+  await expectRange(-100, 200);
+  await expect(palette()).toHaveText(expect.stringContaining('Grayscale'));
+  await expect(visibility()).toHaveText(expect.stringContaining('HIDE'));
+  await clearTransientUI();
+};
+
+describe('Legacy saved base appearance', () => {
+  it('restores grayscale and visibility when reopening the same DICOM session', async () => {
+    await openUrls([ONE_CT_SLICE_DICOM]);
+    await selectLayout('Axial Only', 1, false);
+    await volViewPage.renderingModuleTab.click();
+    await waitForModuleTransitions();
+    await field('min').scrollIntoView({ block: 'center', behavior: 'instant' });
+    await setRange(-100, 200);
+    const legacyPath = await omitSavedAppearance(await saveSession());
+    await setRange(-120, 180);
+    await restoreLegacySession(legacyPath);
+    await browser.waitUntil(async () => {
+      const [pixels] = await capture();
+      return pixels.colored === 0 && pixels.checksum > 1_000_000;
+    });
+    const [original] = await capture();
+
+    await palette().scrollIntoView({ block: 'center', behavior: 'instant' });
+    await palette().click();
+    const option = $('[role="option"]*=Viridis');
+    await option.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+    await option.waitForStable();
+    await option.click();
+    await setRange(-50, 150);
+    await clearTransientUI();
+    await browser.waitUntil(async () => (await capture())[0].colored > 1000);
+    await visibility().click();
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    await browser.waitUntil(
+      async () => (await capture())[0].checksum < original.checksum / 4
+    );
+    const editedPath = await saveSession();
+
+    await restoreLegacySession(legacyPath);
+    await browser.waitUntil(
+      async () => (await capture())[0].checksum === original.checksum,
+      { timeoutMsg: 'Expected the original visible grayscale DICOM slice' }
+    );
+
+    await openThroughDialog(editedPath);
+    await expectRange(-50, 150);
+    await expect(palette()).toHaveText(expect.stringContaining('Viridis'));
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    await clearTransientUI();
+    await browser.waitUntil(
+      async () => (await capture())[0].checksum < original.checksum / 4
+    );
+    await visibility().click();
+    await browser.waitUntil(async () => (await capture())[0].colored > 1000);
+  });
+});
diff --git a/tests/specs/native-color-display.e2e.ts b/tests/specs/native-color-display.e2e.ts
new file mode 100644
index 000000000..dfb1e621f
--- /dev/null
+++ b/tests/specs/native-color-display.e2e.ts
@@ -0,0 +1,225 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { layeredImageManifest } from './layerDisplayTestUtils';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import {
+  capture2DViewScreenshotMetrics,
+  capture2DViewPixels,
+  makeTempDir,
+  openVolViewPage,
+  selectLayout,
+  waitForModuleTransitions,
+  writeManifestToFile,
+} from './utils';
+
+function writeColorImage(
+  name: string,
+  channels: number[],
+  type = 'unsigned char'
+) {
+  const directory = makeTempDir(name);
+  const header = [
+    'NRRD0005',
+    `type: ${type}`,
+    'dimension: 4',
+    `sizes: ${channels.length} 16 16 16`,
+    'kinds: vector domain domain domain',
+    'space: left-posterior-superior',
+    'space directions: none (1,0,0) (0,1,0) (0,0,1)',
+    'space origin: (0,0,0)',
+    'encoding: ascii',
+  ].join('\n');
+  const values = Array.from({ length: 4096 }, (_, index) =>
+    channels.length <= 2 && (index === 0 || index === 4095)
+      ? [index === 0 ? 0 : 255, ...channels.slice(1)].join(' ')
+      : channels.join(' ')
+  ).join(' ');
+  writeFileSync(join(directory, `${name}.nrrd`), `${header}\n\n${values}`);
+  return `${name}/${name}.nrrd`;
+}
+
+async function openControls() {
+  await volViewPage.renderingModuleTab.click();
+  const volume = $('[data-testid="volume-rendering-toggle"]');
+  if (await volume.isExisting()) await volume.click();
+  await waitForModuleTransitions();
+  await browser.waitUntil(
+    async () => (await $$('.Vue-Toastification__toast').length) === 0
+  );
+}
+
+async function openOverlayControls(name: string, channels: number[]) {
+  const base = writeColorImage('native-color-base', [128]);
+  const overlay = writeColorImage(name, channels);
+  await writeManifestToFile(
+    {
+      ...layeredImageManifest(base, overlay),
+      layerDisplay: {
+        'base::overlay': {
+          preset: 'DICOM Hot Iron',
+          mappingRange: [0, 255],
+          opacity: 1,
+          transparentBackground: false,
+        },
+      },
+    },
+    'native-color-overlay.json'
+  );
+  await openVolViewPage('native-color-overlay.json');
+  await $(`.image-list-card*=${base.split('/').at(-1)}`)
+    .$('[data-testid="dataset-menu-button"]')
+    .click();
+  await $('.v-menu.v-overlay--active .v-overlay__content').waitForStable();
+  await $('.v-list-item*=Show in all views').click();
+  await browser.keys('Escape');
+  await openControls();
+}
+
+const pixels = () => capture2DViewScreenshotMetrics('native-color-display.png');
+
+async function expectNativeColor(expected: number[], count: number) {
+  await $('header').moveTo();
+  await browser.waitUntil(
+    async () => {
+      const views = await capture2DViewPixels(40, 'native-color-channels.png');
+      return (
+        views.length === count &&
+        views.every(({ data }) => {
+          let matching = 0;
+          for (let i = 0; i < data.length; i += 4) {
+            if (
+              expected.every(
+                (value, channel) => Math.abs(data[i + channel] - value) <= 2
+              )
+            )
+              matching++;
+          }
+          return matching > 1000;
+        })
+      );
+    },
+    {
+      timeoutMsg: `Expected substantial native image pixels with RGB ${expected.join(', ')}`,
+    }
+  );
+}
+
+describe('Native color display controls', () => {
+  for (const [type, channels] of [
+    ['unsigned char', [180, 30, 60]],
+    ['unsigned short', [46260, 7710, 15420]],
+    ['float', [180 / 255, 30 / 255, 60 / 255]],
+  ] as const) {
+    it(`renders a ${type} RGB base in its native colors with scalar controls disabled`, async () => {
+      await openVolViewPage(
+        writeColorImage(
+          `native-rgb-${type.replace(' ', '-')}`,
+          [...channels],
+          type
+        )
+      );
+      await selectLayout('Axial Only', 1, false);
+      await openControls();
+      await expect(
+        $('[data-testid="base-image-colormap"] input')
+      ).toBeDisabled();
+      await expect(
+        $('[data-testid="base-image-range-min"] input')
+      ).toBeDisabled();
+      await expect(
+        $('[data-testid="base-image-range-max"] input')
+      ).toBeDisabled();
+      await expect($('[data-testid="base-image-contrast"]')).toBeDisabled();
+      const windowingTool = $(
+        'button[data-testid^="control-button-Window & Level"]'
+      );
+      await expect(windowingTool).toBeDisplayed();
+      await expect(windowingTool).toBeDisabled();
+      await $('[data-testid="windowing-tool"]').moveTo();
+      await expect(
+        $('.v-tooltip.v-overlay--active .v-overlay__content')
+      ).toHaveText('Window/level editing requires a single-component image.');
+      await $('header').moveTo();
+      await expectNativeColor([180, 30, 60], 1);
+      const visibility = $('[data-testid="base-image-visibility"]');
+      await expect(visibility).toBeEnabled();
+      await visibility.click();
+      await expect(visibility).toHaveText(expect.stringContaining('SHOW'));
+      await $('header').moveTo();
+      await browser.waitUntil(async () => (await pixels())[0].colored < 1000);
+      await visibility.click();
+      await expect(visibility).toHaveText(expect.stringContaining('HIDE'));
+      await $('header').moveTo();
+      await expectNativeColor([180, 30, 60], 1);
+    });
+  }
+
+  it('keeps unsupported two-component overlay controls visible and explains why they are disabled', async () => {
+    await openOverlayControls('native-two-component', [220, 255]);
+    const controls = $('[data-testid="layer-display-controls"]');
+    for (const name of [
+      'colormap',
+      'range-min',
+      'range-max',
+      'opacity-slider',
+      'transparent-background',
+    ]) {
+      await expect($(`[data-testid="layer-${name}"]`)).toBeDisplayed();
+      await expect($(`[data-testid="layer-${name}"] input`)).toBeDisabled();
+    }
+    for (const name of ['visibility', 'contrast']) {
+      const button = $(`[data-testid="layer-${name}"]`);
+      await expect(button).toBeDisplayed();
+      await expect(button).toBeDisabled();
+    }
+    await controls.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await $('header').moveTo();
+    await controls.moveTo();
+    const tooltipId = await controls.getAttribute('aria-describedby');
+    const tooltip = $(`#${tooltipId}.v-overlay--active .v-overlay__content`);
+    await expect(tooltip).toBeDisplayed();
+    await expect(tooltip).toHaveText(
+      '2-component overlays are not supported. Use a single-component, RGB, or RGBA image.'
+    );
+  });
+
+  it('keeps RGBA overlay opacity and visibility usable without applying a scalar palette', async () => {
+    await openOverlayControls('native-rgba', [0, 0, 220, 128]);
+    for (const name of ['colormap', 'range-min', 'range-max'])
+      await expect($(`[data-testid="layer-${name}"] input`)).toBeDisabled();
+    await expect($('[data-testid="layer-contrast"]')).toBeDisabled();
+    await expect($('[data-testid="layer-opacity-slider"] input')).toBeEnabled();
+    const visible = $('[data-testid="layer-visibility"]');
+    await expect(visible).toBeEnabled();
+    await setValueVueInput(
+      $('[data-testid="base-image-range-min"] input'),
+      '0'
+    );
+    await setValueVueInput(
+      $('[data-testid="base-image-range-max"] input'),
+      '255'
+    );
+    const blended = (opacity: number) => {
+      const alpha = (128 / 255) * opacity;
+      return [0, 0, 220].map((channel) =>
+        Math.round(channel * alpha + 128 * (1 - alpha))
+      );
+    };
+    await expectNativeColor(blended(1), 3);
+    const opacity = $('[data-testid="layer-opacity-slider"] [role="slider"]');
+    await opacity.execute((element) => element.focus());
+    await browser.keys('Home');
+    await expect(opacity).toHaveAttribute('aria-valuenow', '0');
+    await expectNativeColor([128, 128, 128], 3);
+    await opacity.execute((element) => element.focus());
+    await browser.keys(Array.from({ length: 50 }, () => 'ArrowRight'));
+    await expect(opacity).toHaveAttribute('aria-valuenow', '0.5');
+    await expectNativeColor(blended(0.5), 3);
+    await visible.click();
+    await expect(visible).toHaveText(expect.stringContaining('SHOW'));
+    await expectNativeColor([128, 128, 128], 3);
+    await visible.click();
+    await expect(visible).toHaveText(expect.stringContaining('HIDE'));
+    await expectNativeColor(blended(0.5), 3);
+  });
+});
diff --git a/tests/specs/overlay-auto-contrast.e2e.ts b/tests/specs/overlay-auto-contrast.e2e.ts
new file mode 100644
index 000000000..c5ae61ad0
--- /dev/null
+++ b/tests/specs/overlay-auto-contrast.e2e.ts
@@ -0,0 +1,277 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import {
+  capture2DViewScreenshotMetrics,
+  makeTempDir,
+  openVolViewPage,
+  selectLayout,
+  SESSION_SAVE_TIMEOUT,
+  waitForDownload,
+  waitForModuleTransitions,
+  writeManifestToFile,
+  writeMetaImage,
+} from './utils';
+
+const layer = () => $('section[aria-label="contrast-target.nrrd"]');
+const other = () => $('section[aria-label="contrast-other.mha"]');
+const targetInput = (endpoint: string) =>
+  layer().$(`[data-testid="layer-range-${endpoint}"] input`);
+const appliedRange = async () =>
+  Promise.all(
+    ['min', 'max'].map(async (endpoint) =>
+      Number(await targetInput(endpoint).getAttribute('title'))
+    )
+  );
+const pixels = () =>
+  capture2DViewScreenshotMetrics('overlay-auto-contrast.png');
+
+async function openContrast() {
+  const trigger = layer().$('[data-testid="layer-contrast"]');
+  await trigger.scrollIntoView({ block: 'center', behavior: 'instant' });
+  await trigger.click();
+  await $('[data-testid="layer-contrast-menu"]').waitForStable();
+}
+
+async function chooseContrast(option: string) {
+  await openContrast();
+  const item = $(`[data-testid="layer-contrast-${option}"]`);
+  await expect(item).not.toHaveAttribute('aria-disabled', 'true');
+  await item.click();
+  await expect($('[data-testid="layer-contrast-menu"]')).not.toBeDisplayed();
+}
+
+async function unrelatedSettings() {
+  return {
+    baseMin: await $('[data-testid="base-image-range-min"] input').getAttribute(
+      'title'
+    ),
+    baseMax: await $('[data-testid="base-image-range-max"] input').getAttribute(
+      'title'
+    ),
+    basePalette: await $('[data-testid="base-image-colormap"]').getText(),
+    palette: await layer().$('[data-testid="layer-colormap"]').getText(),
+    opacity: await layer()
+      .$('[data-testid="layer-opacity-slider"] input')
+      .getValue(),
+    transparent: await layer()
+      .$('[data-testid="layer-transparent-background"] input')
+      .isSelected(),
+    otherMin: await other()
+      .$('[data-testid="layer-range-min"] input')
+      .getAttribute('title'),
+    otherMax: await other()
+      .$('[data-testid="layer-range-max"] input')
+      .getAttribute('title'),
+    otherPalette: await other().$('[data-testid="layer-colormap"]').getText(),
+    otherOpacity: await other()
+      .$('[data-testid="layer-opacity-slider"] input')
+      .getValue(),
+  };
+}
+
+describe('Overlay automatic contrast', () => {
+  it('uses its resampled image histogram without changing base or other overlay display settings', async () => {
+    const dir = makeTempDir('overlay-contrast');
+    const header = [
+      'NRRD0005',
+      'type: short',
+      'dimension: 3',
+      'sizes: 16 16 16',
+      'space: left-posterior-superior',
+      'space directions: (2,0,0) (0,2,0) (0,0,2)',
+      'space origin: (0,0,0)',
+      'encoding: ascii',
+    ].join('\n');
+    const values = Array.from({ length: 4096 }, (_, i) =>
+      i === 0 ? 0 : i === 4095 ? 1000 : 200 + ((i * 17) % 600)
+    );
+    writeFileSync(
+      join(dir, 'contrast-target.nrrd'),
+      `${header}\n\n${values.join(' ')}`
+    );
+    const base = writeMetaImage('contrast-base.mha', { size: 32, step: 17 });
+    const second = writeMetaImage('contrast-other.mha', { size: 32, step: 29 });
+    await writeManifestToFile(
+      {
+        version: '7.0.0',
+        dataSources: [
+          base,
+          'overlay-contrast/contrast-target.nrrd',
+          second,
+        ].map((name, i) => ({
+          id: i + 1,
+          type: 'uri',
+          uri: `/tmp/${name}`,
+          name: name.split('/').at(-1),
+        })),
+        datasets: ['base', 'target', 'other'].map((id, i) => ({
+          id,
+          dataSourceId: i + 1,
+        })),
+        primarySelection: 'base',
+        parentToLayers: [
+          { selectionKey: 'base', sourceSelectionKeys: ['target', 'other'] },
+        ],
+        layerDisplay: {
+          'base::target': {
+            preset: 'DICOM Hot Iron',
+            mappingRange: [-2000, -1000],
+            opacity: 0.8,
+            transparentBackground: false,
+          },
+          'base::other': {
+            preset: 'Cool to Warm',
+            mappingRange: [20, 230],
+            opacity: 0.2,
+            transparentBackground: false,
+          },
+        },
+      },
+      'overlay-auto-contrast.json'
+    );
+    await openVolViewPage('overlay-auto-contrast.json');
+    await $(`.image-list-card*=${base}`)
+      .$('[data-testid="dataset-menu-button"]')
+      .click();
+    await $('.v-list-item*=Show in all views').waitForClickable();
+    await $('.v-menu.v-overlay--active .v-overlay__content').waitForStable();
+    await $('.v-list-item*=Show in all views').click();
+    await browser.keys('Escape');
+    await volViewPage.renderingModuleTab.click();
+    await $('[data-testid="volume-rendering-toggle"]').click();
+    await waitForModuleTransitions();
+    await browser.waitUntil(
+      async () => (await $$('.Vue-Toastification__toast').length) === 0
+    );
+    await expect(targetInput('min')).toHaveAttribute('title', '-2000');
+    const trigger = layer().$('[data-testid="layer-contrast"]');
+    await expect(trigger.$('.mdi-circle-half-full')).toExist();
+    await expect(trigger.$('.mdi-menu-down')).toExist();
+    const minX = (await targetInput('min').getLocation()).x;
+    const maxX = (await targetInput('max').getLocation()).x;
+    const triggerX = (await trigger.getLocation()).x;
+    expect(triggerX).toBeGreaterThan(minX);
+    expect(triggerX).toBeLessThan(maxX);
+    const unchanged = await unrelatedSettings();
+    await openContrast();
+    expect(await appliedRange()).toEqual([-2000, -1000]);
+    const menu = $('[data-testid="layer-contrast-menu"]');
+    await expect(menu).toHaveText(
+      'Full Range\nLow Contrast\nMedium Contrast\nHigh Contrast'
+    );
+    await browser.saveScreenshot(
+      join(TEMP_DIR, 'overlay-contrast-controls.png')
+    );
+    await expect(menu.$('input')).not.toExist();
+    await expect(menu.$('label=Bones')).not.toExist();
+    await $('[data-testid="layer-contrast-FullRange"]').click();
+    await expect(targetInput('min')).toHaveAttribute('title', '0');
+    await expect(targetInput('max')).toHaveAttribute('title', '1000');
+    expect(await unrelatedSettings()).toEqual(unchanged);
+    const widths: number[] = [];
+    for (const choice of ['LowContrast', 'MediumContrast', 'HighContrast']) {
+      await $('header').moveTo();
+      const before = await pixels();
+      await chooseContrast(choice);
+      const [min, max] = await appliedRange();
+      // Resampling adds over 5% zero padding; source percentiles start above 200.
+      expect(min).toBe(0);
+      expect(max).toBeLessThanOrEqual(1000);
+      expect(max).toBeGreaterThan(min);
+      widths.push(max - min);
+      await $('header').moveTo();
+      await browser.waitUntil(
+        async () => {
+          const after = await pixels();
+          return (
+            after.length === 3 &&
+            after.every((view, i) => view.checksum !== before[i].checksum)
+          );
+        },
+        {
+          timeoutMsg:
+            'Expected overlay contrast to change every slice rendering',
+        }
+      );
+      expect(await unrelatedSettings()).toEqual(unchanged);
+    }
+    expect(widths[0]).toBeGreaterThan(widths[1]);
+    expect(widths[1]).toBeGreaterThan(widths[2]);
+    await setValueVueInput(targetInput('min'), '-2000');
+    await setValueVueInput(targetInput('max'), '-1000');
+    await browser.keys('Enter');
+    await chooseContrast('FullRange');
+    expect(await appliedRange()).toEqual([0, 1000]);
+    await setValueVueInput(targetInput('min'), '-');
+    await browser.keys('Enter');
+    await expect(
+      layer().$('[data-testid="layer-range-status"]')
+    ).toBeDisplayed();
+    await chooseContrast('FullRange');
+    await expect(targetInput('min')).toHaveValue('0');
+    await expect(targetInput('max')).toHaveValue('1000');
+    await expect(layer().$('[data-testid="layer-range-status"]')).not.toExist();
+    expect(await unrelatedSettings()).toEqual(unchanged);
+    const visibility = () => layer().$('[data-testid="layer-visibility"]');
+    await expect(visibility()).toHaveText(expect.stringContaining('HIDE'));
+    expect((await visibility().getLocation()).x).toBeLessThan(
+      (await layer().$('[data-testid="layer-colormap"]').getLocation()).x
+    );
+    expect((await visibility().getCSSProperty('border-radius')).value).toBe(
+      (await trigger.getCSSProperty('border-radius')).value
+    );
+    await expect(visibility().$('.mdi-eye')).toExist();
+    await $('header').moveTo();
+    const shown = await pixels();
+    await visibility().scrollIntoView({ block: 'center', behavior: 'instant' });
+    await visibility().click();
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    await expect(visibility().$('.mdi-eye-off')).toExist();
+    await $('header').moveTo();
+    await browser.waitUntil(async () => {
+      const hidden = await pixels();
+      return (
+        hidden.length === 3 &&
+        hidden.every((view, i) => view.checksum !== shown[i].checksum)
+      );
+    });
+    expect(await unrelatedSettings()).toEqual(unchanged);
+    await visibility().click();
+    await $('header').moveTo();
+    await browser.waitUntil(async () => {
+      const restored = await pixels();
+      return (
+        restored.length === 3 &&
+        restored.every((view, i) => view.checksum === shown[i].checksum)
+      );
+    });
+    await visibility().click();
+    await selectLayout('Axial Only', 1, false);
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    expect(await unrelatedSettings()).toEqual(unchanged);
+    const saved = await volViewPage.saveSession();
+    await waitForDownload(join(TEMP_DIR, saved), SESSION_SAVE_TIMEOUT);
+    await openVolViewPage(saved);
+    await volViewPage.renderingModuleTab.click();
+    await visibility().scrollIntoView({ block: 'center', behavior: 'instant' });
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    await selectLayout('Four Up', 3, true);
+    await expect(visibility()).toHaveText(expect.stringContaining('SHOW'));
+    expect(await unrelatedSettings()).toEqual(unchanged);
+    await $('header').moveTo();
+    const hidden = await pixels();
+    await visibility().click();
+    await expect(visibility()).toHaveText(expect.stringContaining('HIDE'));
+    await $('header').moveTo();
+    await browser.waitUntil(async () => {
+      const restored = await pixels();
+      return (
+        restored.length === 3 &&
+        restored.every((view, i) => view.checksum !== hidden[i].checksum)
+      );
+    });
+    expect(await unrelatedSettings()).toEqual(unchanged);
+  });
+});
diff --git a/tests/specs/overlay-segmentation-opacity.e2e.ts b/tests/specs/overlay-segmentation-opacity.e2e.ts
new file mode 100644
index 000000000..7c4d70a98
--- /dev/null
+++ b/tests/specs/overlay-segmentation-opacity.e2e.ts
@@ -0,0 +1,148 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import { volViewPage } from '../pageobjects/volview.page';
+import {
+  openAnnotationSegments,
+  waitForSegmentContent,
+} from './segmentationTestUtils';
+import {
+  capture2DViewPixels,
+  selectLayout,
+  writeManifestToFile,
+} from './utils';
+
+const writeImages = () => {
+  const header = [
+    'NRRD0005',
+    'type: unsigned char',
+    'dimension: 3',
+    'sizes: 16 16 16',
+    'space: left-posterior-superior',
+    'space directions: (1,0,0) (0,1,0) (0,0,1)',
+    'space origin: (0,0,0)',
+    'encoding: ascii',
+  ];
+  // The viewed plane is white underneath a black overlay. The corner voxel
+  // preserves a nonzero scalar range without appearing on that plane.
+  for (const [name, value] of [
+    ['opacity-base.nrrd', 255],
+    ['opacity-base.layer.nrrd', 0],
+  ] as const) {
+    const pixels = Array.from({ length: 4096 }, (_, i) =>
+      i === 0 ? 255 - value : value
+    ).join(' ');
+    writeFileSync(join(TEMP_DIR, name), `${header.join('\n')}\n\n${pixels}`);
+  }
+  const mask = Array.from({ length: 4096 }, (_, index) => {
+    const i = index % 16;
+    const j = Math.floor(index / 16) % 16;
+    const k = Math.floor(index / 256);
+    return i >= 4 && i <= 11 && j >= 4 && j <= 11 && k >= 4 && k <= 11 ? 1 : 0;
+  }).join(' ');
+  writeFileSync(
+    join(TEMP_DIR, 'opacity-base.seg.nrrd'),
+    `${header.join('\n')}\nSegment0_LabelValue:=1\nSegment0_Name:=Blue mask\nSegment0_Color:=0 0 1\n\n${mask}`
+  );
+};
+
+const captureSlice = async (fileName: string) =>
+  (await capture2DViewPixels(80, fileName))[0].data;
+
+describe('Overlay opacity with segmentation', () => {
+  it('keeps segmentation colors continuous when opacity reaches 100%', async () => {
+    writeImages();
+    await writeManifestToFile(
+      {
+        io: { segmentationExtension: 'seg', layerExtension: 'layer' },
+        windowing: { width: 255, level: 127.5 },
+      },
+      'opacity-config.json'
+    );
+    await volViewPage.open(
+      '?urls=[tmp/opacity-config.json,tmp/opacity-base.nrrd,tmp/opacity-base.seg.nrrd,tmp/opacity-base.layer.nrrd]'
+    );
+    await volViewPage.waitForViews();
+    await selectLayout('Axial Only', 1, false);
+    await openAnnotationSegments();
+    await waitForSegmentContent('Blue mask');
+    await volViewPage.renderingModuleTab.click();
+    const transparent = $('[data-testid="layer-transparent-background"] input');
+    await expect(transparent).toBeChecked();
+    await transparent.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await transparent.click();
+    await expect(transparent).not.toBeChecked();
+    const opacity = $('[data-testid="layer-opacity-slider"] [role="slider"]');
+    await opacity.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await opacity.execute((element) => element.focus());
+    await browser.keys(['End']);
+    await browser.keys(['ArrowLeft']);
+    await expect(
+      $('[data-testid="layer-opacity-slider"] [role="slider"]')
+    ).toHaveAttribute('aria-valuenow', '0.99');
+    await $('header').moveTo();
+    await browser.execute(async () => {
+      const transitions = document
+        .getAnimations()
+        .filter((animation) =>
+          Number.isFinite(animation.effect?.getComputedTiming().endTime)
+        );
+      await Promise.allSettled(
+        transitions.map((animation) => animation.finished)
+      );
+    });
+    await $('[data-testid~="vtk-two-view"]').waitForStable();
+    let below: number[] = [];
+    let background: number[] = [];
+    await browser.waitUntil(
+      async () => {
+        below = await captureSlice('overlay-opacity-99.png');
+        background = [];
+        let blue = 0;
+        for (let i = 0; i < below.length; i += 4) {
+          if (
+            below[i + 1] >= 2 &&
+            below[i + 1] <= 3 &&
+            below[i + 1] === below[i + 2] &&
+            below[i] - below[i + 1] <= 16
+          )
+            background.push(i);
+          if (below[i + 2] > below[i] + 40) blue++;
+        }
+        return background.length > 1000 && blue > 100;
+      },
+      {
+        timeoutMsg:
+          'Expected a blue segmentation and 1% of the white base beneath the black overlay',
+      }
+    );
+    await opacity.execute((element) => element.focus());
+    await browser.keys('End');
+    await expect(
+      $('[data-testid="layer-opacity-slider"] [role="slider"]')
+    ).toHaveAttribute('aria-valuenow', '1');
+    await expect($('[data-testid="layer-opacity-slider"] input')).toHaveValue(
+      '1'
+    );
+    await $('header').moveTo();
+    // At full opacity the white base contributes nothing. Requiring the
+    // background's green and blue channels to reach zero excludes a stale
+    // 99% frame, even when the controls update before the next render.
+    await browser.waitUntil(
+      async () => {
+        const full = await captureSlice('overlay-opacity-100.png');
+        return (
+          full.length === below.length &&
+          background.every(
+            (index) => full[index + 1] === 0 && full[index + 2] === 0
+          ) &&
+          full.every((value, index) => Math.abs(value - below[index]) <= 4)
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected 99% to 100% opacity to preserve segmentation colors without a render-pass jump',
+      }
+    );
+  });
+});
diff --git a/tests/specs/palette-window.e2e.ts b/tests/specs/palette-window.e2e.ts
new file mode 100644
index 000000000..f8bb62edb
--- /dev/null
+++ b/tests/specs/palette-window.e2e.ts
@@ -0,0 +1,454 @@
+import {
+  layeredImageManifest,
+  openLayerDisplayControls,
+} from './layerDisplayTestUtils';
+import { setValueVueInput } from '../pageobjects/volview.page';
+import {
+  capture2DViewScreenshotMetrics,
+  openVolViewPage,
+  writeManifestToFile,
+  writeMetaImage,
+} from './utils';
+
+const control = (name: string) => $(`[data-testid="${name}"]`);
+const handle = (name: string) => control(`layer-range-${name}-handle`);
+const input = (name: string) => control(`layer-range-${name}`).$('input');
+const bar = () => control('palette-window-bar');
+const gradient = async () =>
+  (await bar().$('.color-map-swatch').getCSSProperty('background-image')).value;
+const range = async () =>
+  Promise.all(
+    ['min', 'max'].map(async (name) =>
+      Number(await handle(name).getAttribute('aria-valuenow'))
+    )
+  );
+
+async function openPaletteWindow() {
+  const base = writeMetaImage('palette-window-base.mha');
+  const overlay = writeMetaImage('palette-window-overlay.mha', { step: 29 });
+  const manifest = 'palette-window.json';
+  await writeManifestToFile(
+    {
+      ...layeredImageManifest(base, overlay),
+      layerDisplay: {
+        'base::overlay': {
+          preset: '2hot',
+          mappingRange: [50, 200],
+          opacity: 1,
+          transparentBackground: false,
+        },
+      },
+    },
+    manifest
+  );
+  await openVolViewPage(manifest);
+  const card = $(`.image-list-card*=${base}`);
+  await card.$('[data-testid="dataset-menu-button"]').click();
+  const showInAllViews = $('.v-list-item*=Show in all views');
+  await showInAllViews.waitForClickable();
+  await showInAllViews.click();
+  await browser.keys('Escape');
+  await openLayerDisplayControls();
+  await bar().waitForDisplayed();
+  await bar().scrollIntoView({ block: 'center', behavior: 'instant' });
+  await expect(input('min')).toHaveValue('50');
+  await expect(input('max')).toHaveValue('200');
+}
+
+async function drag(name: string, fraction: number) {
+  const geometry = await browser.execute(
+    (selector, targetFraction) => {
+      const track = document
+        .querySelector('[data-testid="palette-window-bar"]')!
+        .getBoundingClientRect();
+      const thumb = document.querySelector(selector)!.getBoundingClientRect();
+      return {
+        startX: Math.round(thumb.x + thumb.width / 2),
+        startY: Math.round(thumb.y + thumb.height / 2),
+        endX: Math.round(track.x + track.width * targetFraction),
+      };
+    },
+    `[data-testid="layer-range-${name}-handle"]`,
+    fraction
+  );
+  await browser.performActions([
+    {
+      type: 'pointer',
+      id: 'range-pointer',
+      parameters: { pointerType: 'mouse' },
+      actions: [
+        {
+          type: 'pointerMove',
+          duration: 0,
+          origin: 'viewport',
+          x: geometry.startX,
+          y: geometry.startY,
+        },
+        { type: 'pointerDown', button: 0 },
+        {
+          type: 'pointerMove',
+          duration: 0,
+          origin: 'viewport',
+          x: geometry.endX,
+          y: geometry.startY,
+        },
+      ],
+    },
+  ]);
+}
+
+async function dragBy(name: string, pixels: number) {
+  const thumb = handle(name);
+  const location = await thumb.getLocation();
+  const size = await thumb.getSize();
+  const x = Math.round(location.x + size.width / 2);
+  const y = Math.round(location.y + size.height / 2);
+  const width = (await bar().getSize()).width;
+  await browser
+    .action('pointer')
+    .move({ x, y })
+    .down()
+    .move({ x: x + pixels, y })
+    .up()
+    .perform();
+  return (pixels / width) * 255;
+}
+
+const controlRects = () =>
+  browser.execute(() =>
+    [
+      '[data-testid="palette-window-bar"]',
+      '[data-testid="layer-range-min"] input',
+      '[data-testid="layer-range-max"] input',
+    ].map((selector) => {
+      const { x, y, width, height } = document
+        .querySelector(selector)!
+        .getBoundingClientRect();
+      return { x, y, width, height };
+    })
+  );
+
+async function expectGripsAligned() {
+  const { barCenter, gripCenters } = await browser.execute(() => {
+    const barRect = document
+      .querySelector('[data-testid="palette-window-bar"]')!
+      .getBoundingClientRect();
+    return {
+      barCenter: barRect.y + barRect.height / 2,
+      gripCenters: Array.from(
+        document.querySelectorAll(
+          '[data-testid="palette-window-bar"] .handle-grip'
+        )
+      ).map((grip) => {
+        const rect = grip.getBoundingClientRect();
+        return rect.y + rect.height / 2;
+      }),
+    };
+  });
+  expect(gripCenters).toHaveLength(3);
+  for (const center of gripCenters) expect(center).toBeCloseTo(barCenter, 8);
+}
+
+async function expectInputsSynced() {
+  const [min, max] = await range();
+  await expect(input('min')).toHaveAttribute('title', String(min));
+  await expect(input('max')).toHaveAttribute('title', String(max));
+  expect(min).toBeLessThan(max);
+  expect(min).toBeGreaterThanOrEqual(0);
+  expect(max).toBeLessThanOrEqual(255);
+}
+
+async function press(name: string, key: string) {
+  await browser.execute((selector) => {
+    document.querySelector<HTMLElement>(selector)!.focus();
+  }, `[data-testid="layer-range-${name}-handle"]`);
+  await expect(handle(name)).toBeFocused();
+  await browser.keys(key);
+}
+
+async function expectRange(min: number, max: number) {
+  const actual = await range();
+  expect(actual[0]).toBeCloseTo(min, 8);
+  expect(actual[1]).toBeCloseTo(max, 8);
+  await expectInputsSynced();
+}
+
+describe('Palette window interaction', () => {
+  beforeEach(openPaletteWindow);
+  afterEach(async () => {
+    await browser.releaseActions();
+  });
+
+  it('updates the palette, numbers, and all views while dragging either endpoint', async () => {
+    const before = await capture2DViewScreenshotMetrics(
+      'palette-window-before.png'
+    );
+    expect(before).toHaveLength(3);
+    const initialGradient = await gradient();
+    await drag('min', 0.4);
+    await browser.waitUntil(async () => (await range())[0] > 90);
+    await expectInputsSynced();
+    expect((await range())[1]).toBe(200);
+    expect(await gradient()).not.toBe(initialGradient);
+    await browser.waitUntil(
+      async () => {
+        const after = await capture2DViewScreenshotMetrics(
+          'palette-window-drag.png'
+        );
+        return (
+          after.length === 3 &&
+          after.every((view, index) => view.checksum !== before[index].checksum)
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected the dragged range to update every 2D view before pointer release',
+      }
+    );
+    await browser.releaseActions();
+
+    const min = (await range())[0];
+    await drag('max', 0.6);
+    await browser.waitUntil(async () => (await range())[1] < 170);
+    await expectInputsSynced();
+    expect((await range())[0]).toBe(min);
+    await browser.releaseActions();
+
+    await drag('min', 1);
+    await expectInputsSynced();
+    const collapsedAtMax = await range();
+    expect(collapsedAtMax[0]).toBeCloseTo(collapsedAtMax[1], 8);
+    await browser.releaseActions();
+    await drag('min', 0.2);
+    await expectInputsSynced();
+    const reopenedMinimum = await range();
+    expect(reopenedMinimum[0]).toBeLessThan(collapsedAtMax[0]);
+    expect(reopenedMinimum[1]).toBe(collapsedAtMax[1]);
+    await browser.releaseActions();
+
+    const expandedRects = await controlRects();
+    await expectGripsAligned();
+    await drag('max', 0);
+    await expectInputsSynced();
+    expect(await controlRects()).toEqual(expandedRects);
+    await expectGripsAligned();
+    const collapsedAtMin = await range();
+    expect(collapsedAtMin[1]).toBeCloseTo(collapsedAtMin[0], 8);
+    await browser.releaseActions();
+    expect(await controlRects()).toEqual(expandedRects);
+    await expectGripsAligned();
+    await drag('max', 0.8);
+    await expectInputsSynced();
+    const reopenedMaximum = await range();
+    expect(reopenedMaximum[1]).toBeGreaterThan(collapsedAtMin[1]);
+    expect(reopenedMaximum[0]).toBe(collapsedAtMin[0]);
+    expect(await controlRects()).toEqual(expandedRects);
+    await expectGripsAligned();
+    await browser.releaseActions();
+  });
+
+  it('moves the whole window to either boundary without changing its width', async () => {
+    await drag('center', 0);
+    await expectRange(0, 150);
+    await browser.releaseActions();
+    await drag('center', 1);
+    await expectRange(105, 255);
+    await browser.releaseActions();
+    await press('center', 'Home');
+    await expectRange(0, 150);
+    await press('center', 'ArrowRight');
+    await expectRange(2.55, 152.55);
+    await press('center', 'End');
+    await expectRange(105, 255);
+  });
+
+  it('matches native hover feedback, shows keyboard halos and smaller directional circles for values outside the image', async () => {
+    const normalSize = await handle('min').$('.handle-grip').getSize();
+    const supportsHover = await browser.execute(
+      () => matchMedia('(hover: hover)').matches
+    );
+    const opacitySlider = control('layer-opacity-slider').$('[role="slider"]');
+    await opacitySlider.moveTo();
+    const nativeHalo = await opacitySlider
+      .$('.v-slider-thumb__surface')
+      .execute((element) => ({
+        opacity: Number(getComputedStyle(element, '::before').opacity),
+        hoverOpacity: Number(
+          getComputedStyle(element).getPropertyValue('--v-hover-opacity')
+        ),
+      }));
+    if (
+      !nativeHalo ||
+      typeof nativeHalo !== 'object' ||
+      !('opacity' in nativeHalo) ||
+      !('hoverOpacity' in nativeHalo)
+    )
+      throw new Error('Expected native slider halo styles');
+    const expectedHoverOpacity = supportsHover
+      ? Number(nativeHalo.hoverOpacity)
+      : 0;
+    for (const name of ['min', 'max', 'center']) {
+      await handle(name).moveTo();
+      await browser.waitUntil(async () =>
+        handle(name)
+          .$('.handle-grip')
+          .execute(
+            (element, opacity) =>
+              Math.abs(
+                Number(getComputedStyle(element, '::before').opacity) -
+                  Number(opacity)
+              ) < 0.001,
+            expectedHoverOpacity
+          )
+      );
+      expect(
+        await handle(name).execute((element) => element.matches(':hover'))
+      ).toBe(true);
+    }
+    if (!supportsHover) expect(Number(nativeHalo.opacity)).toBe(0);
+    for (const name of ['min', 'max', 'center']) {
+      await handle(name).execute((element) => element.focus());
+      await browser.keys('Tab');
+      await browser.keys(['Shift', 'Tab']);
+      await expect(handle(name)).toBeFocused();
+      await browser.waitUntil(async () =>
+        handle(name)
+          .$('.handle-grip')
+          .execute(
+            (element) =>
+              Number(getComputedStyle(element, '::before').opacity) > 0
+          )
+      );
+    }
+    await setValueVueInput(input('min'), '-100');
+    await setValueVueInput(input('max'), '355');
+    await browser.keys('Enter');
+    for (const [name, direction] of [
+      ['min', 'left'],
+      ['max', 'right'],
+    ]) {
+      const grip = handle(name).$('.handle-grip');
+      await expect(grip).toHaveAttribute('data-direction', direction);
+      const size = await grip.getSize();
+      expect(size.width).toBeLessThan(normalSize.width);
+      expect(size.width).toBe(size.height);
+    }
+    await expectGripsAligned();
+    await setValueVueInput(input('min'), '-400');
+    await setValueVueInput(input('max'), '-200');
+    await browser.keys('Enter');
+    await expect(handle('center').$('.handle-grip')).toHaveAttribute(
+      'data-direction',
+      'left'
+    );
+    const outsideCenter = await handle('center').$('.handle-grip').getSize();
+    expect(outsideCenter.width).toBeLessThan(normalSize.width);
+    expect(outsideCenter.width).toBe(outsideCenter.height);
+    await expectGripsAligned();
+  });
+
+  it('moves out-of-range endpoints continuously from their actual values', async () => {
+    await setValueVueInput(input('min'), '-100');
+    await setValueVueInput(input('max'), '100');
+    await browser.keys('Enter');
+    const fixedAxis = await controlRects();
+    const minDelta = await dragBy('min', 2);
+    const left = await range();
+    expect(left[0]).toBeCloseTo(-100 + minDelta, 8);
+    expect(left[0]).toBeLessThan(0);
+    expect(left[1]).toBe(100);
+    expect(await controlRects()).toEqual(fixedAxis);
+    await expectGripsAligned();
+
+    await setValueVueInput(input('max'), '355');
+    await setValueVueInput(input('min'), '155');
+    await browser.keys('Enter');
+    const maxDelta = await dragBy('max', -2);
+    const right = await range();
+    expect(right[0]).toBe(155);
+    expect(right[1]).toBeCloseTo(355 + maxDelta, 8);
+    expect(right[1]).toBeGreaterThan(255);
+    expect(await controlRects()).toEqual(fixedAxis);
+    await expectGripsAligned();
+  });
+
+  it('moves a wider-than-image window and an offscreen center without changing width', async () => {
+    await setValueVueInput(input('min'), '-100');
+    await setValueVueInput(input('max'), '355');
+    await browser.keys('Enter');
+    await expect(handle('center')).toBeEnabled();
+    const wideDelta = await dragBy('center', 2);
+    const wide = await range();
+    expect(wide[0]).toBeCloseTo(-100 + wideDelta, 8);
+    expect(wide[1]).toBeCloseTo(355 + wideDelta, 8);
+    expect(wide[1] - wide[0]).toBeCloseTo(455, 8);
+
+    await setValueVueInput(input('min'), '-400');
+    await setValueVueInput(input('max'), '-200');
+    await browser.keys('Enter');
+    await expect(handle('center')).toBeEnabled();
+    const outsideDelta = await dragBy('center', 2);
+    const outside = await range();
+    expect(outside[0]).toBeCloseTo(-400 + outsideDelta, 8);
+    expect(outside[1]).toBeCloseTo(-200 + outsideDelta, 8);
+    expect(outside[1] - outside[0]).toBeCloseTo(200, 8);
+    await expectGripsAligned();
+  });
+
+  it('recovers an offset full-width window and keeps its center interactive at the bounds', async () => {
+    await setValueVueInput(input('min'), '-10');
+    await browser.keys('Enter');
+    await setValueVueInput(input('max'), '245');
+    await browser.keys('Enter');
+    await expect(input('min')).toHaveAttribute('title', '-10');
+    await expect(input('max')).toHaveAttribute('title', '245');
+    await expect(handle('center')).toBeEnabled();
+    await press('center', 'Home');
+    await expectRange(0, 255);
+    await expect(handle('center')).toBeEnabled();
+    await drag('center', 0);
+    await expectRange(0, 255);
+    await browser.releaseActions();
+    await drag('center', 1);
+    await expectRange(0, 255);
+    await browser.releaseActions();
+    await expect(handle('center')).toBeEnabled();
+  });
+
+  it('supports endpoint keyboard steps and preserves precise manual input', async () => {
+    await press('min', 'Home');
+    await expectRange(0, 200);
+    await press('max', 'End');
+    await expectRange(0, 255);
+    await press('max', 'PageDown');
+    await expectRange(0, 229.5);
+    await press('min', 'ArrowRight');
+    await expectRange(2.55, 229.5);
+    await press('min', 'End');
+    await expectInputsSynced();
+    const minimumBound = await range();
+    expect(minimumBound[0]).toBeGreaterThan(229);
+    expect(minimumBound[1]).toBe(229.5);
+    await press('min', 'Home');
+    await press('max', 'Home');
+    await expectInputsSynced();
+    const maximumBound = await range();
+    expect(maximumBound[0]).toBe(0);
+    expect(maximumBound[1]).toBe(Number.MIN_VALUE);
+
+    await setValueVueInput(input('min'), '-2.123456789');
+    await browser.keys('Enter');
+    await setValueVueInput(input('max'), '100.123456789');
+    await browser.keys('Enter');
+    await $('h4*=palette-window-overlay.mha').click();
+    await expect(input('min')).toHaveAttribute('title', '-2.123456789');
+    await expect(input('max')).toHaveAttribute('title', '100.123456789');
+    await setValueVueInput(input('max'), '-3');
+    await browser.keys('Enter');
+    await expect(control('layer-range-status')).toHaveText(
+      'Min must be less than Max.'
+    );
+    await expect(input('min')).toHaveAttribute('title', '-2.123456789');
+    await expect(input('max')).toHaveAttribute('title', '100.123456789');
+  });
+});
diff --git a/tests/specs/pet-ct-sample.e2e.ts b/tests/specs/pet-ct-sample.e2e.ts
new file mode 100644
index 000000000..615b14f35
--- /dev/null
+++ b/tests/specs/pet-ct-sample.e2e.ts
@@ -0,0 +1,478 @@
+import * as path from 'path';
+import { readFileSync, writeFileSync } from 'node:fs';
+import dicomParser from 'dicom-parser';
+import { TEMP_DIR } from '@/wdio.shared.conf';
+import { PET_CT_DICOM_DATASETS } from '../datasets';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import {
+  capture2DViewScreenshotMetrics,
+  makeTempDir,
+  openVolViewPage,
+  SESSION_SAVE_TIMEOUT,
+  waitForDownload,
+  selectLayout,
+  waitForModuleTransitions,
+} from './utils';
+
+async function captureAxialPixels() {
+  return (await capture2DViewScreenshotMetrics('pet-ct-capture.png'))[0];
+}
+
+let samplePreload:
+  | Awaited<ReturnType<typeof browser.addInitScript>>
+  | undefined;
+
+async function useLocalSampleFiles(files: { url: string; name: string }[]) {
+  await samplePreload?.remove();
+  samplePreload = await browser.addInitScript((datasets) => {
+    const localUrls = new Map(
+      datasets.map(({ url, name }) => [url, `/tmp/${name}`])
+    );
+    const originalFetch = window.fetch.bind(window);
+    window.fetch = (input, init) => {
+      const url = input instanceof Request ? input.url : String(input);
+      const local = localUrls.get(url);
+      if (!local) return originalFetch(input, init);
+      const mapped =
+        input instanceof Request ? new Request(local, input) : local;
+      return originalFetch(mapped, init);
+    };
+  }, files);
+}
+
+async function openAxialSample() {
+  await volViewPage.open();
+  await selectLayout('Axial Only', 1, false);
+  const sample = volViewPage.samplesList.$('[title="PET/CT Chest"]');
+  await sample.scrollIntoView();
+  await sample.waitForClickable();
+  await sample.click();
+  await volViewPage.waitForViews();
+}
+
+async function displayedPetRange() {
+  return Promise.all(
+    ['min', 'max'].map(
+      async (endpoint) =>
+        (await $(`[data-testid="layer-range-${endpoint}"] input`).getAttribute(
+          'title'
+        ))!
+    )
+  );
+}
+
+async function expectFullRangeDefault() {
+  const initial = await displayedPetRange();
+  const contrast = $('[data-testid="layer-contrast"]');
+  await contrast.scrollIntoView({ block: 'center', behavior: 'instant' });
+  await contrast.click();
+  const full = $('[data-testid="layer-contrast-FullRange"]');
+  await full.waitForClickable();
+  await full.click();
+  await browser.waitUntil(
+    async () => !(await $('[data-testid="layer-contrast-menu"]').isDisplayed())
+  );
+  expect(await displayedPetRange()).toEqual(initial);
+  return initial;
+}
+
+async function reopenSample(
+  expected: Awaited<ReturnType<typeof captureAxialPixels>>,
+  range: string[],
+  preset = 'DICOM Hot Iron'
+) {
+  await $('[data-testid="module-tab-Data"]').click();
+  await waitForModuleTransitions();
+  const samplesSection = $('.v-expansion-panel-title*=Sample Data');
+  if ((await samplesSection.getAttribute('aria-expanded')) === 'true') {
+    await samplesSection.click();
+    await expect(samplesSection).toHaveAttribute('aria-expanded', 'false');
+    await waitForModuleTransitions();
+  }
+  await samplesSection.click();
+  await expect(samplesSection).toHaveAttribute('aria-expanded', 'true');
+  const sample = volViewPage.samplesList.$('[title="PET/CT Chest"]');
+  await sample.waitForExist();
+  await waitForModuleTransitions();
+  await sample.scrollIntoView({ block: 'center', behavior: 'instant' });
+  await browser.saveScreenshot(path.join(TEMP_DIR, 'pet-ct-sample-reload.png'));
+  await sample.waitForClickable();
+  await sample.click();
+  await sample.$('.mdi-check').waitForExist();
+  await volViewPage.waitForViewCounts(1, false);
+  await volViewPage.renderingModuleTab.click();
+  await expect($$('h4*=PET WB Corrected')).toBeElementsArrayOfSize(1);
+  for (const control of [
+    'layer-colormap',
+    'layer-transparent-background',
+    'layer-range-min',
+    'layer-range-max',
+    'layer-opacity-slider',
+  ])
+    await expect($$(`[data-testid="${control}"]`)).toBeElementsArrayOfSize(1);
+  await expect($('[data-testid="layer-range-min"] input')).toHaveAttribute(
+    'title',
+    range[0]
+  );
+  await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+    'title',
+    range[1]
+  );
+  await expect($('[data-testid="layer-colormap"]')).toHaveText(
+    expect.stringContaining(preset)
+  );
+  await expect(
+    $('[data-testid="layer-transparent-background"] input')
+  ).toBeChecked();
+  await expect(
+    $('[data-testid="layer-opacity-slider"] [role="slider"]')
+  ).toHaveAttribute('aria-valuenow', '0.5');
+  await $('header').moveTo();
+  await browser.waitUntil(
+    async () => {
+      const pixels = await captureAxialPixels();
+      return (
+        pixels.colored === expected.colored &&
+        pixels.blue === expected.blue &&
+        pixels.checksum === expected.checksum
+      );
+    },
+    {
+      timeoutMsg:
+        'Expected reopening the sample to restore exactly one PET overlay with its expected appearance',
+    }
+  );
+}
+
+async function openPetMetadataVariant(
+  variant: 'valid' | 'different' | 'missing' | 'invalid'
+) {
+  const directory = makeTempDir(`pet-window-${variant}`);
+  const petFiles = PET_CT_DICOM_DATASETS.filter(({ name }) =>
+    name.startsWith('PET-CT-PT-')
+  );
+  for (const [index, { name }] of petFiles.entries()) {
+    const bytes = Buffer.from(readFileSync(path.join(TEMP_DIR, name)));
+    const dataset = dicomParser.parseDicom(bytes);
+    for (const [tag, value] of [
+      ['x00281050', '3000'],
+      ['x00281051', '6000'],
+    ]) {
+      const element = dataset.elements[tag];
+      let replacement = value;
+      if (index === petFiles.length - 1 && tag === 'x00281051') {
+        if (variant === 'different') replacement = '7000';
+        if (variant === 'invalid') replacement = '0';
+        if (variant === 'missing')
+          bytes.writeUInt16LE(0x7777, element.dataOffset - 8);
+      }
+      expect(replacement.length).toBeLessThanOrEqual(element.length);
+      bytes.write(
+        replacement.padEnd(element.length, ' '),
+        element.dataOffset,
+        element.length,
+        'ascii'
+      );
+    }
+    writeFileSync(path.join(directory, name), bytes);
+  }
+  await useLocalSampleFiles(
+    PET_CT_DICOM_DATASETS.map((file) => ({
+      url: file.url,
+      name: file.name.startsWith('PET-CT-PT-')
+        ? `pet-window-${variant}/${file.name}`
+        : file.name,
+    }))
+  );
+  await openAxialSample();
+  await volViewPage.renderingModuleTab.click();
+  await $('[data-testid="layer-range-max"] input').waitForEnabled();
+  await waitForModuleTransitions();
+}
+
+describe('PET/CT sample', () => {
+  before(async () => {
+    await useLocalSampleFiles(PET_CT_DICOM_DATASETS);
+  });
+
+  after(async () => {
+    await samplePreload?.remove();
+  });
+
+  it('preserves Four Up when loading and reopening the sample', async () => {
+    const ctFile = PET_CT_DICOM_DATASETS.find(({ name }) =>
+      name.startsWith('PET-CT-CT-')
+    )!;
+    const tags = dicomParser.parseDicom(
+      new Uint8Array(readFileSync(path.join(TEMP_DIR, ctFile.name)))
+    );
+    const width = Number(tags.string('x00281051')!.split('\\')[0]);
+    const level = Number(tags.string('x00281050')!.split('\\')[0]);
+    expect(width).toBeGreaterThan(0);
+    expect(Number.isFinite(level)).toBe(true);
+    await volViewPage.open();
+    await selectLayout('Four Up', 3, true);
+    for (let loading = 0; loading < 2; loading++) {
+      await $('[data-testid="module-tab-Data"]').click();
+      await waitForModuleTransitions();
+      const samplesSection = $('.v-expansion-panel-title*=Sample Data');
+      if ((await samplesSection.getAttribute('aria-expanded')) !== 'true') {
+        await samplesSection.click();
+        await expect(samplesSection).toHaveAttribute('aria-expanded', 'true');
+        await waitForModuleTransitions();
+      }
+      const sample = volViewPage.samplesList.$('[title="PET/CT Chest"]');
+      await sample.scrollIntoView({ block: 'center', behavior: 'instant' });
+      await sample.waitForClickable();
+      await sample.click();
+      await expect($('[data-testid~="vtk-two-view"]')).toHaveText(
+        expect.stringContaining('CT WB')
+      );
+      await volViewPage.renderingModuleTab.click();
+      await expect($('h4*=PET WB Corrected')).toBeDisplayed();
+      if (loading === 0) await expectFullRangeDefault();
+      else
+        await expect(
+          $('[data-testid="layer-range-max"] input')
+        ).toHaveAttribute('title', '4000');
+      await volViewPage.waitForViewCounts(3, true);
+      const slices = $$('[data-testid~="vtk-two-view"]');
+      for (const view of await slices) {
+        await expect(view).toHaveText(expect.stringContaining('CT WB'));
+        await expect(view).toHaveText(
+          expect.stringContaining(
+            `W/L: ${width.toFixed(2)} / ${level.toFixed(2)}`
+          )
+        );
+      }
+      await volViewPage.layoutButton.click();
+      await expect($('.v-list-item--active .v-list-item-title')).toHaveText(
+        'Four Up'
+      );
+      await browser.keys('Escape');
+      await waitForModuleTransitions();
+      if (loading === 0) {
+        const maximum = $('[data-testid="layer-range-max"] input');
+        await maximum.scrollIntoView({ block: 'center', behavior: 'instant' });
+        await setValueVueInput(maximum, '4000');
+        await expect(maximum).toHaveAttribute('title', '4000');
+      }
+    }
+  });
+
+  it('keeps one PET overlay when reopening the sample and retains edited colors across layouts', async () => {
+    await openAxialSample();
+    await volViewPage.waitForViewCounts(1, false);
+    const view = $('[data-testid~="vtk-two-view"]');
+    await expect(view).toHaveText(expect.stringContaining('CT WB'));
+    await expect(view).toHaveText(expect.stringContaining('Slice: 6/10'));
+
+    await volViewPage.renderingModuleTab.click();
+    for (const title of ['Color Presets', 'Cinematic Rendering']) {
+      const section = $(`.v-expansion-panel-title*=${title}`);
+      if (
+        (await section.isExisting()) &&
+        (await section.getAttribute('aria-expanded')) === 'true'
+      )
+        await section.click();
+    }
+    const palette = $('[data-testid="layer-colormap"]');
+    await palette.waitForDisplayed();
+    await expect(palette).toHaveText(expect.stringContaining('DICOM Hot Iron'));
+    await expect(palette).not.toHaveText(
+      expect.stringContaining('2hot-opaque')
+    );
+    await expect($('h4*=PET')).toBeDisplayed();
+    await expect($('[data-testid="layer-range-min"] input')).toBeEnabled();
+    await expect($('[data-testid="layer-range-max"] input')).toBeEnabled();
+    const [minimum, maximum] = await expectFullRangeDefault();
+    const opacity = '0.5';
+    expect(minimum).toBe('0');
+    expect(Number(maximum)).toBeGreaterThan(Number(minimum));
+    await expect(
+      $('[data-testid="layer-opacity-slider"] [role="slider"]')
+    ).toHaveAttribute('aria-valuenow', opacity);
+    await expect($('[data-testid="layer-range-min"] input')).toHaveAttribute(
+      'title',
+      '0'
+    );
+    await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+      'title',
+      maximum
+    );
+    await expect(
+      $('[data-testid="layer-transparent-background"] input')
+    ).toBeChecked();
+    await browser.waitUntil(
+      async () => (await captureAxialPixels()).colored > 1000,
+      {
+        timeoutMsg:
+          'Expected the PET layer to be visible over the CT immediately after loading the sample',
+      }
+    );
+    const initial = await captureAxialPixels();
+    await browser.saveScreenshot(path.join(TEMP_DIR, 'pet-ct-sample.png'));
+    await view.$('canvas').click();
+    await browser.keys('ArrowDown');
+    await expect(view).toHaveText(expect.stringContaining('Slice: 5/10'));
+    await browser.waitUntil(
+      async () => (await captureAxialPixels()).checksum !== initial.checksum,
+      {
+        timeoutMsg:
+          'Expected moving to an adjacent slice to change the displayed image',
+      }
+    );
+    await browser.keys('ArrowUp');
+    await expect(view).toHaveText(expect.stringContaining('Slice: 6/10'));
+    await browser.waitUntil(
+      async () => (await captureAxialPixels()).checksum === initial.checksum,
+      {
+        timeoutMsg:
+          'Expected returning to the middle slice to restore its image',
+      }
+    );
+
+    await palette.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await palette.click();
+    await expect($('[role="option"]=DICOM Hot Iron')).toExist();
+    await expect($('[role="option"]=Heat')).not.toExist();
+    await expect($('[role="option"]=2hot-opaque')).not.toExist();
+    const coolToWarm = $('[role="option"]*=Cool to Warm');
+    await coolToWarm.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await coolToWarm.waitForClickable();
+    await coolToWarm.click();
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () => {
+        const pixels = await captureAxialPixels();
+        return pixels.colored > 1000 && pixels.checksum !== initial.checksum;
+      },
+      {
+        timeoutMsg:
+          'Expected the selected palette to change the visible PET colors',
+      }
+    );
+    const beforeRange = await captureAxialPixels();
+    const narrowedMaximum = String((Number(minimum) + Number(maximum)) / 2);
+    await setValueVueInput(
+      $('[data-testid="layer-range-max"] input'),
+      narrowedMaximum
+    );
+    await $('header').moveTo();
+    await expect($('[data-testid="layer-range-min"] input')).toHaveAttribute(
+      'title',
+      minimum
+    );
+    await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+      'title',
+      narrowedMaximum
+    );
+    await browser.waitUntil(
+      async () => {
+        const pixels = await captureAxialPixels();
+        return (
+          pixels.colored > 1000 && pixels.checksum !== beforeRange.checksum
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected narrowing the PET range to change the visible colored regions',
+      }
+    );
+    const edited = await captureAxialPixels();
+
+    await selectLayout('3D Only', 0, true);
+    await expect($('[data-testid="layer-range-max"] input')).toBeDisabled();
+    await selectLayout('Axial Only', 1, false);
+    await expect($('[data-testid="layer-range-min"] input')).toHaveAttribute(
+      'title',
+      minimum
+    );
+    await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+      'title',
+      narrowedMaximum
+    );
+    await expect(palette).toHaveText(expect.stringContaining('Cool to Warm'));
+    await expect(
+      $('[data-testid="layer-opacity-slider"] [role="slider"]')
+    ).toHaveAttribute('aria-valuenow', opacity);
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () => {
+        const pixels = await captureAxialPixels();
+        return (
+          pixels.blue === edited.blue &&
+          pixels.colored === edited.colored &&
+          pixels.checksum === edited.checksum
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected matching PET color counts and intensity sum after replacing the axial view',
+      }
+    );
+    await browser.saveScreenshot(
+      path.join(TEMP_DIR, 'pet-ct-sample-edited.png')
+    );
+    for (let reopening = 0; reopening < 2; reopening++) {
+      await reopenSample(edited, [minimum, narrowedMaximum], 'Cool to Warm');
+    }
+    await browser.saveScreenshot(
+      path.join(TEMP_DIR, 'pet-ct-sample-reopened.png')
+    );
+    await $('[data-testid="module-tab-Data"]').click();
+    const petCard = $('.volume-card[html-title="PET WB Corrected"]');
+    await petCard.waitForDisplayed();
+    await waitForModuleTransitions();
+    const petMenu = petCard.$('[data-testid="dataset-menu-button"]');
+    await petMenu.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await petMenu.waitForClickable();
+    await petMenu.click();
+    const deleteItem = $('.v-list-item=Delete');
+    await deleteItem.waitForClickable();
+    await deleteItem.click();
+    await expect(petCard).not.toExist();
+    await expect($('.volume-card[html-title="CT WB  1.0  B30f"]')).toExist();
+    await reopenSample(initial, [minimum, maximum]);
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
+  });
+
+  it('uses consistent PET DICOM windows and preserves an edited range when saving and reopening', async () => {
+    await openPetMetadataVariant('valid');
+    await expect($('[data-testid="layer-range-min"] input')).toHaveAttribute(
+      'title',
+      '0'
+    );
+    await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+      'title',
+      '5999'
+    );
+    await setValueVueInput($('[data-testid="layer-range-min"] input'), '100');
+    await setValueVueInput($('[data-testid="layer-range-max"] input'), '3000');
+    await expect($('[data-testid="layer-range-max"] input')).toHaveAttribute(
+      'title',
+      '3000'
+    );
+    const opacity = () =>
+      $('[data-testid="layer-opacity-slider"] [role="slider"]');
+    await expect(opacity()).toHaveAttribute('aria-valuenow', '0.5');
+    await opacity().execute((element) => element.focus());
+    await browser.keys('ArrowLeft');
+    await expect(opacity()).toHaveAttribute('aria-valuenow', '0.49');
+    const saved = await volViewPage.saveSession();
+    await waitForDownload(path.join(TEMP_DIR, saved), SESSION_SAVE_TIMEOUT);
+    await openVolViewPage(saved);
+    await volViewPage.renderingModuleTab.click();
+    await $('[data-testid="layer-range-max"] input').waitForEnabled();
+    expect(await displayedPetRange()).toEqual(['100', '3000']);
+    await expect(opacity()).toHaveAttribute('aria-valuenow', '0.49');
+  });
+
+  it('falls back to the full overlay range when any PET slice has differing, missing, or invalid window metadata', async () => {
+    for (const variant of ['different', 'missing', 'invalid'] as const) {
+      await openPetMetadataVariant(variant);
+      const initial = await expectFullRangeDefault();
+      expect(initial).not.toEqual(['0', '5999']);
+    }
+  });
+});
diff --git a/tests/specs/range-number-steppers.e2e.ts b/tests/specs/range-number-steppers.e2e.ts
new file mode 100644
index 000000000..a4bdd6c0f
--- /dev/null
+++ b/tests/specs/range-number-steppers.e2e.ts
@@ -0,0 +1,183 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { setValueVueInput } from '../pageobjects/volview.page';
+import {
+  layeredImageManifest,
+  openLayerDisplayControls,
+} from './layerDisplayTestUtils';
+import { makeTempDir, openVolViewPage, writeManifestToFile } from './utils';
+
+async function openRanges(overlayRange: [number, number]) {
+  const directory = makeTempDir('number-steppers');
+  const files = [[-1000, 500], overlayRange].map((range, image) => {
+    const name = `steppers-${image}.nrrd`;
+    const header = [
+      'NRRD0005',
+      'type: double',
+      'dimension: 3',
+      'sizes: 16 16 16',
+      'space: left-posterior-superior',
+      'space directions: (1,0,0) (0,1,0) (0,0,1)',
+      'space origin: (0,0,0)',
+      'encoding: ascii',
+    ].join('\n');
+    const values = Array.from({ length: 4096 }, (_, i) => range[i % 2]).join(
+      ' '
+    );
+    writeFileSync(join(directory, name), `${header}\n\n${values}`);
+    return `number-steppers/${name}`;
+  });
+  await writeManifestToFile(
+    {
+      ...layeredImageManifest(files[0], files[1]),
+      layerDisplay: {
+        'base::overlay': {
+          preset: 'DICOM Hot Iron',
+          mappingRange: overlayRange,
+          opacity: 0.5,
+          transparentBackground: false,
+        },
+      },
+    },
+    'number-steppers.json'
+  );
+  await openVolViewPage('number-steppers.json');
+  await $('.image-list-card*=steppers-0.nrrd')
+    .$('[data-testid="dataset-menu-button"]')
+    .click();
+  const show = $('.v-list-item*=Show in all views');
+  await show.waitForClickable();
+  await show.click();
+  await browser.keys('Escape');
+  await openLayerDisplayControls();
+}
+const control = (id: string) => $(`[data-testid="${id}"]`);
+const input = (prefix: string, endpoint: string) =>
+  control(`${prefix}-${endpoint}`).$('input');
+
+async function expectEndpoint(
+  prefix: string,
+  endpoint: string,
+  expected: number,
+  tolerance: number
+) {
+  await browser.waitUntil(
+    async () =>
+      Math.abs(
+        Number(await input(prefix, endpoint).getAttribute('title')) - expected
+      ) < tolerance
+  );
+}
+
+async function reversibleStep(prefix: string, endpoint: string, step: number) {
+  const field = input(prefix, endpoint);
+  const other = input(prefix, endpoint === 'min' ? 'max' : 'min');
+  const original = Number(await field.getAttribute('title'));
+  const unchanged = await other.getAttribute('title');
+  await field.scrollIntoView({ block: 'center', behavior: 'instant' });
+  await control(`${prefix}-${endpoint}`).moveTo();
+  const increase = control(`${prefix}-${endpoint}-increase`);
+  const decrease = control(`${prefix}-${endpoint}-decrease`);
+  expect(
+    Number((await increase.parentElement().getCSSProperty('opacity')).value)
+  ).toBe(1);
+  await increase.click();
+  await expectEndpoint(prefix, endpoint, original + step, step / 10000);
+  await decrease.click();
+  await expectEndpoint(prefix, endpoint, original, step / 10000);
+  await field.click();
+  await $('header').moveTo();
+  expect(
+    Number((await increase.parentElement().getCSSProperty('opacity')).value)
+  ).toBe(1);
+  await browser.keys('ArrowUp');
+  await expectEndpoint(prefix, endpoint, original + step, step / 10000);
+  await browser.keys('ArrowDown');
+  await expectEndpoint(prefix, endpoint, original, step / 10000);
+  expect(await other.getAttribute('title')).toBe(unchanged);
+}
+
+describe('Display range number steppers', () => {
+  it('uses underlined manual window fields and reversible negative and fractional endpoint steps', async () => {
+    await openRanges([0, 1]);
+    await control('base-image-contrast').click();
+    const manual = $('.v-menu.v-overlay--active .manual-inputs');
+    await manual.waitForDisplayed();
+    await manual.waitForStable();
+    const fields = await manual.$$('.v-field');
+    expect(fields).toHaveLength(2);
+    for (const field of fields) {
+      await expect(field).toHaveElementClass('v-field--variant-underlined');
+      expect((await field.getCSSProperty('background-color')).value).toBe(
+        'rgba(0,0,0,0)'
+      );
+    }
+    const values = await manual.$$('input');
+    await setValueVueInput(values[0], '600');
+    await setValueVueInput(values[1], '-200');
+    await browser.keys('Enter');
+    await browser.keys('Escape');
+    await expectEndpoint('base-image-range', 'min', -500, 1e-10);
+    await expectEndpoint('base-image-range', 'max', 100, 1e-10);
+    await reversibleStep('base-image-range', 'min', 1);
+    await reversibleStep('layer-range', 'max', 0.01);
+  });
+
+  it('steps tiny floating image ranges without rounding their values or applying incomplete drafts', async () => {
+    await openRanges([1e-9, 9e-9]);
+    await reversibleStep('layer-range', 'min', 1e-11);
+    await reversibleStep('layer-range', 'max', 1e-11);
+    const minimum = input('layer-range', 'min');
+    const applied = await minimum.getAttribute('title');
+    const maximum = await input('layer-range', 'max').getAttribute('title');
+    await setValueVueInput(minimum, '1e-');
+    await expect(control('layer-range-status')).toHaveText(
+      'Min and Max must be finite numbers.'
+    );
+    await expect(control('layer-range-min-increase')).toBeDisabled();
+    await expect(control('layer-range-min-decrease')).toBeDisabled();
+    await browser.keys(['ArrowUp', 'ArrowDown']);
+    await expect(minimum).toHaveValue('1e-');
+    expect(await minimum.getAttribute('title')).toBe(applied);
+    expect(await input('layer-range', 'max').getAttribute('title')).toBe(
+      maximum
+    );
+  });
+
+  it('steps large off-image endpoints with buttons and keyboard for base and overlay ranges', async () => {
+    await openRanges([0, 1]);
+    const minimum = 1e16;
+    const maximum = minimum + 100;
+    for (const prefix of ['base-image-range', 'layer-range']) {
+      for (const endpoint of ['min', 'max']) {
+        await setValueVueInput(input(prefix, 'max'), String(maximum));
+        await setValueVueInput(input(prefix, 'min'), String(minimum));
+        await $('header').click();
+        await reversibleStep(prefix, endpoint, 4);
+      }
+    }
+  });
+
+  it('shows tiny Contrast values and preserves full precision when editing the other manual field', async () => {
+    await openRanges([0, 1]);
+    await setValueVueInput(input('base-image-range', 'min'), '0');
+    await setValueVueInput(input('base-image-range', 'max'), '0.0001');
+    await control('base-image-contrast').click();
+    const manual = $('.v-menu.v-overlay--active .manual-inputs');
+    await manual.waitForDisplayed();
+    const fields = await manual.$$('input');
+    await expect(fields[0]).toHaveValue('0.0001');
+    await expect(fields[1]).toHaveValue('0.00005');
+    await setValueVueInput(fields[0], '1.23456789e-8');
+    await setValueVueInput(fields[1], '2.34567891e-8');
+    await browser.keys('Escape');
+    await expectEndpoint('base-image-range', 'min', 1.728394965e-8, 1e-22);
+    await expectEndpoint('base-image-range', 'max', 2.962962855e-8, 1e-22);
+    await control('base-image-contrast').click();
+    await expect(fields[0]).toHaveValue('1.235e-8');
+    await expect(fields[1]).toHaveValue('2.346e-8');
+    await browser.keys('Escape');
+    await expectEndpoint('base-image-range', 'min', 1.728394965e-8, 1e-22);
+    await expectEndpoint('base-image-range', 'max', 2.962962855e-8, 1e-22);
+  });
+});
diff --git a/tests/specs/transparent-background.e2e.ts b/tests/specs/transparent-background.e2e.ts
new file mode 100644
index 000000000..79282165c
--- /dev/null
+++ b/tests/specs/transparent-background.e2e.ts
@@ -0,0 +1,260 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import { setValueVueInput, volViewPage } from '../pageobjects/volview.page';
+import { capture2DViewPixels, writeManifestToFile } from './utils';
+
+function writeImages() {
+  const header = [
+    'NRRD0005',
+    'type: float',
+    'dimension: 3',
+    'sizes: 32 32 32',
+    'space: left-posterior-superior',
+    'space directions: (1,0,0) (0,1,0) (0,0,1)',
+    'space origin: (0,0,0)',
+    'encoding: ascii',
+  ].join('\n');
+  for (const overlay of [false, true]) {
+    const values = Array.from({ length: 32 ** 3 }, (_, index) => {
+      const coordinates = [
+        index % 32,
+        Math.floor(index / 32) % 32,
+        Math.floor(index / 1024),
+      ];
+      const sum = (size: number) =>
+        coordinates.reduce(
+          (total, coordinate) => total + Math.floor(coordinate / size),
+          0
+        );
+      return overlay
+        ? [-3.25, -2.75, -2.25, 2.25][sum(8) % 4]
+        : [80, 180][sum(4) % 2];
+    });
+    const name = overlay
+      ? 'transparent-base.layer.nrrd'
+      : 'transparent-base.nrrd';
+    writeFileSync(join(TEMP_DIR, name), `${header}\n\n${values.join(' ')}`);
+  }
+}
+
+const captureViews = () => capture2DViewPixels(50, 'transparent-capture.png');
+
+type ViewPixels = Awaited<ReturnType<typeof captureViews>>;
+
+function matchingPixels(base: ViewPixels, opaque: ViewPixels) {
+  return base.map((view, viewIndex) => {
+    const full = opaque[viewIndex];
+    const groups: number[][] = [[], [], []];
+    for (
+      let i = (view.width + 1) * 4;
+      i < view.data.length - (view.width + 1) * 4;
+      i += 4
+    ) {
+      const gray = view.data[i];
+      const color = full.data.slice(i, i + 3);
+      const [red, green, blue] = color;
+      const group = [
+        red <= 1 && green <= 1 && blue <= 1,
+        red >= 24 && red <= 28 && green <= 2 && blue <= 2,
+        red >= 253 && green <= 2 && blue <= 2,
+      ].findIndex(Boolean);
+      if (group < 0 || ![80, 180].some((value) => Math.abs(gray - value) <= 1))
+        continue;
+      const same = [
+        -view.width - 1,
+        -view.width,
+        -view.width + 1,
+        -1,
+        0,
+        1,
+        view.width - 1,
+        view.width,
+        view.width + 1,
+      ].every((offset) =>
+        [0, 1, 2].every(
+          (channel) =>
+            view.data[i + offset * 4 + channel] === gray &&
+            full.data[i + offset * 4 + channel] === color[channel]
+        )
+      );
+      if (same) groups[group].push(i);
+    }
+    return groups;
+  });
+}
+
+function matchesBlend(
+  base: ViewPixels,
+  opaque: ViewPixels,
+  actual: ViewPixels,
+  groups: number[][][],
+  alphas: number[]
+) {
+  return (
+    actual.length === 3 &&
+    actual.every((view, viewIndex) =>
+      groups[viewIndex].every(
+        (indices, group) =>
+          indices.length > 100 &&
+          indices.every((index) =>
+            [0, 1, 2].every((channel) => {
+              const expected =
+                base[viewIndex].data[index + channel] * (1 - alphas[group]) +
+                opaque[viewIndex].data[index + channel] * alphas[group];
+              return Math.abs(view.data[index + channel] - expected) <= 2;
+            })
+          )
+      )
+    )
+  );
+}
+
+async function setOpacity(percent: number) {
+  const slider = $('[data-testid="layer-opacity-slider"] [role="slider"]');
+  await slider.scrollIntoView({ block: 'center', behavior: 'instant' });
+  await slider.execute((element) => element.focus());
+  await browser.keys('Home');
+  for (let value = 0; value < percent; value += 10)
+    await browser.keys('PageUp');
+  await expect(
+    $('[data-testid="layer-opacity-slider"] [role="slider"]')
+  ).toHaveAttribute('aria-valuenow', String(percent / 100));
+  await $('header').moveTo();
+}
+
+describe('Transparent overlay background', () => {
+  it('preserves anatomy below Min and fades only the first 10% of a signed fractional range in every view', async () => {
+    writeImages();
+    await writeManifestToFile(
+      {
+        io: { layerExtension: 'layer' },
+        windowing: { width: 255, level: 127.5 },
+      },
+      'transparent-config.json'
+    );
+    await volViewPage.open(
+      '?urls=[tmp/transparent-config.json,tmp/transparent-base.nrrd,tmp/transparent-base.layer.nrrd]'
+    );
+    await volViewPage.waitForViews();
+    await volViewPage.waitForViewCounts(3, true);
+    await volViewPage.renderingModuleTab.click();
+    for (const title of ['Color Presets', 'Cinematic Rendering']) {
+      const section = $(`.v-expansion-panel-title*=${title}`);
+      if ((await section.getAttribute('aria-expanded')) === 'true')
+        await section.click();
+    }
+    const toggle = $('[data-testid="layer-transparent-background"] input');
+    await expect(toggle).toBeChecked();
+    await expect($('[data-testid="layer-colormap"]')).toHaveText(
+      expect.stringContaining('DICOM Hot Iron')
+    );
+    await browser.waitUntil(
+      async () => (await $$('.Vue-Toastification__toast').length) === 0
+    );
+    await $('[data-testid="layer-range-min"] input').scrollIntoView({
+      block: 'center',
+      behavior: 'instant',
+    });
+    await setValueVueInput($('[data-testid="layer-range-min"] input'), '-2.75');
+    await setValueVueInput($('[data-testid="layer-range-max"] input'), '7.25');
+    await setOpacity(0);
+    let base: ViewPixels = [];
+    await browser.waitUntil(
+      async () => {
+        base = await captureViews();
+        return (
+          base.length === 3 &&
+          base.every(({ data }) =>
+            [80, 180].every(
+              (gray) =>
+                data.filter(
+                  (value, index) =>
+                    index % 4 === 0 &&
+                    Math.abs(value - gray) <= 1 &&
+                    data[index + 1] === value &&
+                    data[index + 2] === value
+                ).length > 500
+            )
+          )
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected both gray anatomy regions in every view at zero overlay opacity',
+      }
+    );
+    await toggle.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await toggle.click();
+    await expect(toggle).not.toBeChecked();
+    await setOpacity(100);
+    let opaque: ViewPixels = [];
+    let groups: number[][][] = [];
+    await browser.waitUntil(
+      async () => {
+        opaque = await captureViews();
+        groups = matchingPixels(base, opaque);
+        return (
+          groups.length === 3 &&
+          groups.every((view) => view.every((indices) => indices.length > 100))
+        );
+      },
+      {
+        timeoutMsg:
+          'Expected the below-Min, halfway-fade and above-fade regions in every view',
+      }
+    );
+    await setOpacity(50);
+    await browser.waitUntil(
+      async () =>
+        matchesBlend(
+          base,
+          opaque,
+          await captureViews(),
+          groups,
+          [0.5, 0.5, 0.5]
+        ),
+      {
+        timeoutMsg:
+          'Expected 50% straight blending while transparent background is off',
+      }
+    );
+    await toggle.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await toggle.click();
+    await expect(toggle).toBeChecked();
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () =>
+        matchesBlend(
+          base,
+          opaque,
+          await captureViews(),
+          groups,
+          [0, 0.25, 0.5]
+        ),
+      {
+        timeoutMsg:
+          'Expected unchanged anatomy below Min, half the selected opacity halfway through the fade, and selected opacity above it in all views',
+      }
+    );
+    await toggle.scrollIntoView({ block: 'center', behavior: 'instant' });
+    await toggle.click();
+    await expect(toggle).not.toBeChecked();
+    await $('header').moveTo();
+    await browser.waitUntil(
+      async () =>
+        matchesBlend(
+          base,
+          opaque,
+          await captureViews(),
+          groups,
+          [0.5, 0.5, 0.5]
+        ),
+      {
+        timeoutMsg:
+          'Expected switching transparent background off to restore straight blending in all views',
+      }
+    );
+    expect(await volViewPage.getNotificationsCount()).toBe(0);
+  });
+});
diff --git a/tests/specs/utils.ts b/tests/specs/utils.ts
index 7270dc753..d4b040fed 100644
--- a/tests/specs/utils.ts
+++ b/tests/specs/utils.ts
@@ -2,10 +2,135 @@ import * as path from 'path';
 import * as fs from 'fs';
 import { cleanuptotal } from 'wdio-cleanuptotal-service';
 import JSZip from 'jszip';
+import { PNG } from 'pngjs';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
 import type { TestDataset } from '../datasets';
 
+export async function captureViewPixels(
+  selector: string,
+  inset: number,
+  fileName: string
+) {
+  const screenshot = PNG.sync.read(
+    await browser.saveScreenshot(path.join(TEMP_DIR, fileName))
+  );
+  const geometry = await browser.execute(
+    (viewSelector) => ({
+      width: window.innerWidth,
+      height: window.innerHeight,
+      views: Array.from(document.querySelectorAll(viewSelector)).map((view) => {
+        const rect = view.getBoundingClientRect();
+        return {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+        };
+      }),
+    }),
+    selector
+  );
+  const scaleX = screenshot.width / geometry.width;
+  const scaleY = screenshot.height / geometry.height;
+  return geometry.views.map((rect) => {
+    const x = Math.trunc((rect.x + inset) * scaleX);
+    const y = Math.trunc((rect.y + inset) * scaleY);
+    const width = Math.trunc((rect.width - 2 * inset) * scaleX);
+    const height = Math.trunc((rect.height - 2 * inset) * scaleY);
+    if (
+      width <= 0 ||
+      height <= 0 ||
+      x < 0 ||
+      y < 0 ||
+      x + width > screenshot.width ||
+      y + height > screenshot.height
+    )
+      throw new Error(
+        `Expected a nonempty view crop inside the screenshot: ${selector}`
+      );
+    const data = Buffer.alloc(width * height * 4);
+    for (let row = 0; row < height; row++) {
+      const source = ((y + row) * screenshot.width + x) * 4;
+      screenshot.data.copy(data, row * width * 4, source, source + width * 4);
+    }
+    return { width, data };
+  });
+}
+
+export async function capture2DViewPixels(inset: number, fileName: string) {
+  const views = await captureViewPixels(
+    '[data-testid~="vtk-two-view"]',
+    inset,
+    fileName
+  );
+  return views.map(({ width, data }) => ({
+    width,
+    data: Array.from(data),
+  }));
+}
+
+export async function capture2DViewScreenshotMetrics(fileName: string) {
+  const views = await captureViewPixels(
+    '[data-testid~="vtk-two-view"]',
+    40,
+    fileName
+  );
+  return views.map(({ data }) => {
+    let colored = 0;
+    let blue = 0;
+    let checksum = 0;
+    for (let i = 0; i < data.length; i += 4) {
+      const red = data[i];
+      const green = data[i + 1];
+      const blueChannel = data[i + 2];
+      if (
+        Math.max(red, green, blueChannel) - Math.min(red, green, blueChannel) >
+        40
+      )
+        colored++;
+      if (blueChannel > red + 40 && blueChannel > green + 40) blue++;
+      checksum += red + 3 * green + 7 * blueChannel;
+    }
+    return { colored, blue, checksum };
+  });
+}
+
+export async function waitForModuleTransitions() {
+  await browser.waitUntil(
+    () =>
+      browser.execute(() => {
+        const container = document.getElementById('module-container')!;
+        const transitioning = container.querySelector(
+          '[class*="-enter-active"], [class*="-leave-active"]'
+        );
+        const animating = container
+          .getAnimations({ subtree: true })
+          .some(
+            (animation) =>
+              animation.playState === 'running' &&
+              Number.isFinite(animation.effect?.getComputedTiming().endTime)
+          );
+        return !transitioning && !animating;
+      }),
+    {
+      timeoutMsg: 'Expected the module panels to finish moving',
+    }
+  );
+}
+
+export async function selectLayout(
+  name: string,
+  count2D: number,
+  has3D: boolean
+) {
+  await volViewPage.layoutButton.click();
+  const option = $(`.v-list-item-title=${name}`);
+  await option.waitForClickable();
+  await option.click();
+  await volViewPage.waitForViewCounts(count2D, has3D);
+}
+
 export function writeMetaImage(
   fileName: string,
   { spacing = '1 1 1', size = 16, step = 1 } = {}
diff --git a/vite.config.ts b/vite.config.ts
index 76470fe91..d17b0d6a1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,8 +11,10 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { sentryVitePlugin } from '@sentry/vite-plugin';
 import replace from '@rollup/plugin-replace';
+import VtkColorPresets from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps.json.js';
 
 import { BASE_URL } from './tests/e2ePorts';
+import { LAYER_PRESET_OPTIONS } from './src/vtk/LayerColorPresets';
 
 function resolveNodeModulePath(moduleName: string) {
   const require = createRequire(import.meta.url);
@@ -31,6 +33,9 @@ function resolvePath(...args: string[]) {
 }
 
 const PLACEHOLDER_VERSION = '0.0.0';
+const sliceColorPresets = VtkColorPresets.filter(({ Name }: { Name: string }) =>
+  LAYER_PRESET_OPTIONS.some(({ value }) => value === Name)
+);
 
 function getPackageInfo() {
   const mainPkgPath = path.resolve(__dirname, 'package.json');
@@ -177,8 +182,8 @@ export default defineConfig({
       load(id) {
         if (id.includes('@kitware/vtk.js')) {
           if (id.includes('ColorMaps.json.js')) {
-            // We don't use the built-in colormaps
-            return 'export default [];';
+            // Bundle only the built-in palettes used by 2D overlays.
+            return `export default ${JSON.stringify(sliceColorPresets)};`;
           }
 
           // We don't use these classes
diff --git a/wdio.chrome.conf.ts b/wdio.chrome.conf.ts
index 64d04dad4..fe13439b9 100644
--- a/wdio.chrome.conf.ts
+++ b/wdio.chrome.conf.ts
@@ -13,7 +13,7 @@ if (IS_CI) {
   );
 }
 
-if (!IS_CI && !process.env.HEADED) {
+if (!process.env.HEADED) {
   chromeArgs.push('--headless=new', '--enable-unsafe-swiftshader');
 }