@jax-data-science/sci-image-visualizer 0.10.0 → 0.12.0

package/fesm2022/{jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-BKQhpbHv.mjs → jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-a68Hw5rw.mjs}

@@ -6,7 +6,9 @@ import { LruCache, Colormap, buildLut, parseColor as parseColor$1, worldViewport
 import { BehaviorSubject, firstValueFrom, Subject, Subscription, of, Observable, combineLatest, defer, from, EMPTY, merge } from 'rxjs';
 import { timeout, debounceTime, takeUntil, switchMap, catchError, startWith, map } from 'rxjs/operators';
 import * as ort from 'onnxruntime-web';
-import { smoothMesh, surfaceNets, pointInRing as pointInRing$2, ringArea as ringArea$1, rasterizePolygon as rasterizePolygon$1, traceContours, floodFill } from 'napari-js/geometry';
+import { smoothMesh, surfaceNets, pointInRing as pointInRing$2, ringArea as ringArea$1, traceContours, rasterizePolygon as rasterizePolygon$1, floodFill } from 'napari-js/geometry';
+import { encode } from 'fast-png';
+import { decompress } from 'fzstd';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -5814,6 +5816,1305 @@ function fromWire(f) {
     };
 }
 
+/**
+ * A label volume (a NIfTI-1 `.nii` / `.nii.gz` or a NRRD `.nrrd` of integer structure ids, an
+ * atlas annotation say) read in the browser, sliced as the server opens the matching image:
+ *
+ * - **NRRD**: a 3D volume is cut along its FIRST axis, each section its third axis wide and its
+ *   second axis high, as jit-service opens a NRRD volume (`AtlasNrrdReader`: the Allen CCF's 528
+ *   coronal sections of 456 × 320, anterior first). A 2D NRRD is one slice.
+ * - **NIfTI**: along its third axis, each slice its first axis wide and its second axis high, as
+ *   Bio-Formats reads one (no row flip).
+ *
+ * Only what label volumes use: a single file (NRRD with attached data, NIfTI-1 `n+1`), integer
+ * or integer-valued float samples, either byte order, raw or gzip. Anything else throws rather
+ * than be read approximately. Pure: usable from workers.
+ */
+/** Whether a file name is a label volume this reads. */
+function isLabelVolumeName(name) {
+    return /\.(nrrd|nii|nii\.gz)$/i.test(name);
+}
+/** Read the label volume in `bytes`, named `name` (`.nrrd`, `.nii`, `.nii.gz`). */
+async function readLabelVolume(name, bytes, gunzip = platformGunzip) {
+    if (/\.nrrd$/i.test(name))
+        return readNrrd(bytes, gunzip);
+    if (/\.nii(\.gz)?$/i.test(name))
+        return readNifti(isGzip(bytes) ? await gunzip(bytes) : bytes);
+    throw new Error(`${name}: not a NIfTI (.nii, .nii.gz) or NRRD (.nrrd) label volume`);
+}
+const SAMPLES = {
+    u8: { bytes: 1, read: (v, at) => v.getUint8(at) },
+    i8: { bytes: 1, read: (v, at) => v.getInt8(at) },
+    u16: { bytes: 2, read: (v, at, le) => v.getUint16(at, le) },
+    i16: { bytes: 2, read: (v, at, le) => v.getInt16(at, le) },
+    u32: { bytes: 4, read: (v, at, le) => v.getUint32(at, le) },
+    i32: { bytes: 4, read: (v, at, le) => v.getInt32(at, le) },
+    f32: { bytes: 4, read: (v, at, le) => Math.round(v.getFloat32(at, le)) },
+    f64: { bytes: 8, read: (v, at, le) => Math.round(v.getFloat64(at, le)) },
+};
+/** NRRD type names (every spelling the format allows) → sample type. */
+const NRRD_TYPES = {
+    'signed char': 'i8',
+    int8: 'i8',
+    int8_t: 'i8',
+    uchar: 'u8',
+    'unsigned char': 'u8',
+    uint8: 'u8',
+    uint8_t: 'u8',
+    short: 'i16',
+    'short int': 'i16',
+    'signed short': 'i16',
+    'signed short int': 'i16',
+    int16: 'i16',
+    int16_t: 'i16',
+    ushort: 'u16',
+    'unsigned short': 'u16',
+    'unsigned short int': 'u16',
+    uint16: 'u16',
+    uint16_t: 'u16',
+    int: 'i32',
+    'signed int': 'i32',
+    int32: 'i32',
+    int32_t: 'i32',
+    uint: 'u32',
+    'unsigned int': 'u32',
+    uint32: 'u32',
+    uint32_t: 'u32',
+    float: 'f32',
+    double: 'f64',
+};
+/** NIfTI datatype codes → sample type. */
+const NIFTI_TYPES = {
+    2: 'u8',
+    4: 'i16',
+    8: 'i32',
+    16: 'f32',
+    64: 'f64',
+    256: 'i8',
+    512: 'u16',
+    768: 'u32',
+};
+async function readNrrd(bytes, gunzip) {
+    const end = headerEnd(bytes);
+    if (end < 0)
+        throw new Error('NRRD: no blank line ends the header');
+    const lines = new TextDecoder('latin1').decode(bytes.subarray(0, end)).split(/\r?\n/);
+    if (!/^NRRD\d{4}/.test(lines[0] ?? ''))
+        throw new Error('NRRD: not a NRRD file');
+    const field = {};
+    for (const line of lines.slice(1)) {
+        if (line.startsWith('#'))
+            continue;
+        const at = line.indexOf(': ');
+        if (at > 0)
+            field[line.slice(0, at).trim().toLowerCase()] = line.slice(at + 2).trim();
+    }
+    if (field['data file'] || field['datafile'])
+        throw new Error('NRRD: detached data (a .nhdr) is not supported');
+    const type = NRRD_TYPES[(field['type'] ?? '').toLowerCase()];
+    if (!type)
+        throw new Error(`NRRD: unsupported type "${field['type']}"`);
+    const sizes = (field['sizes'] ?? '').split(/\s+/).filter(Boolean).map(Number);
+    if (sizes.length !== 2 && sizes.length !== 3)
+        throw new Error(`NRRD: need 2 or 3 dimensions, got ${sizes.length}`);
+    const encoding = (field['encoding'] ?? 'raw').toLowerCase();
+    let data = bytes.subarray(end);
+    if (encoding === 'gzip' || encoding === 'gz')
+        data = await gunzip(data);
+    else if (encoding !== 'raw')
+        throw new Error(`NRRD: unsupported encoding "${encoding}"`);
+    const little = (field['endian'] ?? 'little').toLowerCase() !== 'big';
+    // A 3D volume: sections along axis 0, each axis 2 wide and axis 1 high (jit-service's cut).
+    const [n0, n1, n2] = sizes.length === 3 ? sizes : [sizes[0], sizes[1], 1];
+    const axes = sizes.length === 3 ? { z: 0, x: 2, y: 1 } : { z: 2, x: 0, y: 1 };
+    return volume('nrrd', [n0, n1, n2], axes, data, SAMPLES[type], little, nrrdSpacing(field, sizes.length));
+}
+/** Per file axis, the voxel size in micrometres (see {@link LabelVolume.spacing}), or undefined. */
+function nrrdSpacing(field, dims) {
+    let sizes;
+    const directions = field['space directions'];
+    if (directions) {
+        const vectors = directions.match(/\(([^)]*)\)|none/g) ?? [];
+        sizes = vectors.filter((v) => v !== 'none').map((v) => Math.hypot(...v.slice(1, -1).split(',').map(Number)));
+    }
+    else if (field['spacings']) {
+        sizes = field['spacings'].split(/\s+/).map(Number);
+    }
+    if (!sizes || sizes.length !== dims || sizes.some((n) => !(n > 0)))
+        return undefined;
+    // One unit per axis (`space units: "mm" "um" "um"`), each axis scaled by its own.
+    const units = (field['space units'] ?? '').match(/"[^"]*"|\S+/g)?.map((u) => u.replace(/"/g, '').toLowerCase()) ?? [];
+    const factor = (unit) => unit === 'mm' || unit === 'millimeter' || unit === 'millimeters'
+        ? 1e3
+        : unit === 'm' || unit === 'meter' || unit === 'meters'
+            ? 1e6
+            : unit === 'nm' || unit === 'nanometer' || unit === 'nanometers'
+                ? 1e-3
+                : 1; // micrometres, or none said
+    return [...sizes.map((n, i) => n * factor(units[i])), ...(dims === 2 ? [1] : [])];
+}
+function readNifti(bytes) {
+    if (bytes.length < 352)
+        throw new Error('NIfTI: shorter than a header');
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    let little = true;
+    if (view.getInt32(0, true) !== 348) {
+        if (view.getInt32(0, false) !== 348)
+            throw new Error('NIfTI: not a NIfTI-1 file');
+        little = false;
+    }
+    const magic = new TextDecoder('latin1').decode(bytes.subarray(344, 347));
+    if (magic !== 'n+1')
+        throw new Error('NIfTI: a separate .hdr/.img pair is not supported');
+    const ndim = view.getInt16(40, little);
+    const dims = [1, 2, 3, 4].map((i) => view.getInt16(40 + 2 * i, little));
+    if (ndim < 2)
+        throw new Error(`NIfTI: need at least 2 dimensions, got ${ndim}`);
+    if (ndim >= 4 && dims[3] > 1)
+        throw new Error('NIfTI: a 4D file is not a label volume');
+    const type = NIFTI_TYPES[view.getInt16(70, little)];
+    if (!type)
+        throw new Error(`NIfTI: unsupported datatype ${view.getInt16(70, little)}`);
+    const offset = Math.max(352, Math.round(view.getFloat32(108, little)));
+    const [n0, n1, n2] = [dims[0], dims[1], ndim >= 3 ? dims[2] : 1];
+    // Slices along axis 2, each axis 0 wide and axis 1 high (Bio-Formats' planes).
+    const pixdim = [1, 2, 3].map((i) => Math.abs(view.getFloat32(76 + 4 * i, little)));
+    const units = bytes[123] & 7;
+    const factor = units === 1 ? 1e6 : units === 3 ? 1 : 1e3; // metres, micrometres, else millimetres
+    const spacing = pixdim.every((n) => n > 0) ? pixdim.map((n) => n * factor) : undefined;
+    return volume('nifti', [n0, n1, n2], { z: 2, x: 0, y: 1 }, bytes.subarray(offset), SAMPLES[type], little, spacing);
+}
+function volume(format, n, axes, data, sample, little, spacing) {
+    const count = n[0] * n[1] * n[2];
+    if (!(count > 0))
+        throw new Error(`${format}: empty volume`);
+    if (data.length < count * sample.bytes) {
+        throw new Error(`${format}: ${data.length} bytes of data, ${count * sample.bytes} needed`);
+    }
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    const stride = [1, n[0], n[0] * n[1]];
+    const width = n[axes.x];
+    const height = n[axes.y];
+    return {
+        format,
+        width,
+        height,
+        slices: n[axes.z],
+        ...(spacing
+            ? { spacing: [spacing[axes.x], spacing[axes.y], spacing[axes.z]] }
+            : {}),
+        sliceLabels(z) {
+            const out = new Uint32Array(width * height);
+            const base = z * stride[axes.z];
+            const sx = stride[axes.x];
+            const sy = stride[axes.y];
+            for (let y = 0; y < height; y++) {
+                for (let x = 0; x < width; x++) {
+                    const v = sample.read(view, (base + x * sx + y * sy) * sample.bytes, little);
+                    out[y * width + x] = v > 0 ? v : 0;
+                }
+            }
+            return out;
+        },
+    };
+}
+/** The offset just past the header's blank line (`\n\n` or `\r\n\r\n`); -1 without one. */
+function headerEnd(bytes) {
+    const limit = Math.min(bytes.length - 1, 1 << 20);
+    for (let i = 0; i < limit; i++) {
+        if (bytes[i] !== 10)
+            continue;
+        if (bytes[i + 1] === 10)
+            return i + 2;
+        if (bytes[i + 1] === 13 && bytes[i + 2] === 10)
+            return i + 3;
+    }
+    return -1;
+}
+function isGzip(bytes) {
+    return bytes.length > 2 && bytes[0] === 0x1f && bytes[1] === 0x8b;
+}
+async function platformGunzip(bytes) {
+    if (typeof DecompressionStream === 'undefined')
+        throw new Error('gzip data needs DecompressionStream');
+    const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream('gzip'));
+    return new Uint8Array(await new Response(stream).arrayBuffer());
+}
+
+/** The look the Allen atlas region sets carry (see the brain-atlas example's GeoJSON). */
+const ATLAS_STYLE = {
+    fillOpacity: 0.6,
+    stroke: '#3c3c3c',
+    strokeWidth: 1,
+    labels: true,
+    highlight: '#a020f0',
+};
+/**
+ * The classes of a label volume from `ontology`, a parsed JSON document:
+ *
+ * - an **Allen structure graph** (`structure_graph_1.json`: `{ msg: [root] }`, or a node or a
+ *   list of nodes with `id`, `acronym`, `name`, `color_hex_triplet`, `graph_order` and
+ *   `children`): label = structure id, class = acronym, its tree the ontology's, drawn as the
+ *   atlas region sets are;
+ * - a **region set description** (a `regionset.json`: `classHierarchy`, optional `style`), whose
+ *   classes name their label as `value` (or `id`), or with a `labels` map of value → class name.
+ *
+ * Without one (or with another document), each label is its own class `label <value>`.
+ */
+function labelClasses(ontology) {
+    const allen = allenRoots(ontology);
+    if (allen)
+        return allenClasses(allen);
+    if (ontology &&
+        typeof ontology === 'object' &&
+        Array.isArray(ontology.classHierarchy)) {
+        return regionSetClasses(ontology);
+    }
+    return { classOf: unnamed };
+}
+function unnamed(value) {
+    return { name: `label ${value}`, color: paletteColor(value) };
+}
+function allenRoots(doc) {
+    const isNode = (n) => !!n &&
+        typeof n === 'object' &&
+        typeof n.id === 'number' &&
+        typeof n.acronym === 'string';
+    const msg = doc?.msg;
+    const roots = Array.isArray(msg) ? msg : Array.isArray(doc) ? doc : doc ? [doc] : [];
+    return roots.length && roots.every(isNode) ? roots : null;
+}
+function allenClasses(roots) {
+    const byId = new Map();
+    const hierarchy = [];
+    const walk = (n, parent) => {
+        const color = `#${(n.color_hex_triplet || '808080').toUpperCase()}`;
+        byId.set(n.id, { name: n.acronym, color, title: n.name });
+        hierarchy.push({
+            name: n.acronym,
+            ...(n.name ? { title: n.name } : {}),
+            ...(parent ? { parent } : {}),
+            color,
+            ...(n.graph_order != null ? { order: n.graph_order } : {}),
+        });
+        for (const c of n.children ?? [])
+            walk(c, n.acronym);
+    };
+    for (const r of roots)
+        walk(r, null);
+    hierarchy.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    return { classOf: (v) => byId.get(v) ?? unnamed(v), hierarchy, style: ATLAS_STYLE };
+}
+function regionSetClasses(doc) {
+    const nodes = new Map(doc.classHierarchy.map((n) => [n.name, n]));
+    const byValue = new Map();
+    for (const n of doc.classHierarchy) {
+        const v = typeof n.value === 'number' ? n.value : typeof n.id === 'number' ? n.id : undefined;
+        if (v != null)
+            byValue.set(v, n.name);
+    }
+    for (const [v, name] of Object.entries(doc.labels ?? {}))
+        byValue.set(Number(v), name);
+    const hierarchy = doc.classHierarchy.map(({ name, title, parent, color, order }) => ({
+        name,
+        ...(title ? { title } : {}),
+        ...(parent ? { parent } : {}),
+        ...(color ? { color } : {}),
+        ...(order != null ? { order } : {}),
+    }));
+    return {
+        classOf: (v) => {
+            const name = byValue.get(v);
+            const node = name ? nodes.get(name) : undefined;
+            return node ? { name: node.name, color: node.color ?? paletteColor(v), title: node.title } : unnamed(v);
+        },
+        hierarchy,
+        ...(doc.style ? { style: doc.style } : {}),
+    };
+}
+/** A colour per label value, spread around the hue circle. */
+function paletteColor(value) {
+    const hue = (value * 137.508) % 360;
+    const [r, g, b] = hsl(hue, 0.65, 0.55);
+    return `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`.toUpperCase();
+}
+function hsl(h, s, l) {
+    const k = (n) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+    return [f(0), f(8), f(4)].map((c) => Math.round(c * 255));
+}
+const rgb$1 = (hex) => [1, 3, 5].map((o) => parseInt(hex.slice(o, o + 2), 16));
+/**
+ * Slice `z` of `volume` as a GeoJSON FeatureCollection string: one feature per label on the
+ * slice, its every piece (with holes) traced along pixel edges, in image pixels with y down;
+ * classified by `classes`, which also give the collection its class tree and style.
+ */
+function labelSliceGeoJson(volume, z, classes) {
+    const labels = volume.sliceLabels(z);
+    const byLabel = new Map();
+    for (const c of traceContours({ data: labels, width: volume.width, height: volume.height })) {
+        const polygons = byLabel.get(c.value) ?? [];
+        polygons.push([ring(c.outer), ...c.holes.map(ring)]);
+        byLabel.set(c.value, polygons);
+    }
+    const features = [...byLabel].map(([value, polygons]) => {
+        const cls = classes.classOf(value);
+        return {
+            type: 'Feature',
+            id: String(value),
+            geometry: { type: 'MultiPolygon', coordinates: polygons },
+            properties: {
+                objectType: 'annotation',
+                name: cls.title ?? cls.name,
+                classification: { name: cls.name, color: rgb$1(cls.color) },
+                labelValue: value,
+            },
+        };
+    });
+    return JSON.stringify({
+        type: 'FeatureCollection',
+        ...(classes.hierarchy ? { classHierarchy: classes.hierarchy } : {}),
+        ...(classes.style ? { style: classes.style } : {}),
+        features,
+    });
+}
+/** A closed GeoJSON ring from a flat `[x0, y0, …]` one. */
+function ring(flat) {
+    const pts = [];
+    for (let i = 0; i < flat.length; i += 2)
+        pts.push([flat[i], flat[i + 1]]);
+    if (pts.length)
+        pts.push([...pts[0]]);
+    return pts;
+}
+
+/** `data`, named `name`, as an import file. A `File`'s own name is used when `name` is omitted. */
+function importFile(data, name = data.name ?? '') {
+    const encoder = new TextEncoder();
+    return {
+        name,
+        text: async () => typeof data === 'string'
+            ? data
+            : data instanceof Blob
+                ? data.text()
+                : new TextDecoder().decode(data instanceof Uint8Array ? data : new Uint8Array(data)),
+        bytes: async () => typeof data === 'string'
+            ? encoder.encode(data)
+            : data instanceof Blob
+                ? new Uint8Array(await data.arrayBuffer())
+                : data instanceof Uint8Array
+                    ? data
+                    : new Uint8Array(data),
+    };
+}
+const leaf = (name) => name.split(/[\\/]/).pop() ?? name;
+const isRegionSet = (f) => leaf(f.name).toLowerCase() === 'regionset.json';
+const isGeoJson = (f) => /\.geojson$/i.test(f.name);
+const isJson = (f) => /\.json$/i.test(f.name);
+/**
+ * What `files` import as: a label volume (`.nii`, `.nii.gz`, `.nrrd`) with the ontology JSON chosen
+ * with it (a `regionset.json`, else an Allen `structure_graph*.json`, else any `.json`); several
+ * region files (a folder of per-slice `.geojson`, in natural name order, its `regionset.json`
+ * apart); or one region file (`.geojson` or `.json`). Null when none of them is one.
+ */
+function planRegionImport(files) {
+    const volume = files.find((f) => isLabelVolumeName(f.name));
+    if (volume) {
+        const jsons = files.filter((f) => f !== volume && isJson(f));
+        const ontology = jsons.find(isRegionSet) ??
+            jsons.find((f) => /structure_graph.*\.json$/i.test(leaf(f.name))) ??
+            jsons[0] ??
+            null;
+        return { kind: 'volume', volume, ontology };
+    }
+    const regionSet = files.find(isRegionSet) ?? null;
+    const geojsons = files.filter((f) => isGeoJson(f));
+    const regionFiles = geojsons.length ? geojsons : files.filter((f) => isJson(f) && !isRegionSet(f));
+    if (regionFiles.length > 1 || (regionFiles.length === 1 && regionSet)) {
+        const slices = [...regionFiles].sort((a, b) => naturalCompare(leaf(a.name), leaf(b.name)));
+        return { kind: 'folder', slices, regionSet };
+    }
+    return regionFiles.length === 1 ? { kind: 'single', file: regionFiles[0] } : null;
+}
+/** "slice_2" before "slice_10": runs of digits compared as numbers. */
+function naturalCompare(a, b) {
+    return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+}
+/**
+ * A folder slice's GeoJSON with the set's class tree and style (its `regionset.json`) as the
+ * collection's own members, unless the file has its own: what a served folder's slice carries.
+ */
+async function folderSliceGeoJson(file, regionSet) {
+    const text = await file.text();
+    if (!regionSet || (!regionSet.classHierarchy && !regionSet.style))
+        return text;
+    const doc = JSON.parse(text);
+    if (doc['type'] !== 'FeatureCollection')
+        return text;
+    if (regionSet.classHierarchy && !doc['classHierarchy'])
+        doc['classHierarchy'] = regionSet.classHierarchy;
+    if (regionSet.style && !doc['style'])
+        doc['style'] = regionSet.style;
+    return JSON.stringify(doc);
+}
+
+/**
+ * The chunk codecs of the zarr stores label images come in (OME-Zarr `labels/`): Blosc framing
+ * with its lz4, zstd or zlib inner codecs (zarr v2's default, as ome-zarr-py writes), zstd (zarr
+ * v3's default), gzip and zlib. Anything else throws rather than be decoded wrongly. Pure: usable
+ * from workers.
+ *
+ * The Blosc framing follows jit-bioformats' `Blosc` (the decoder JIT validated on SpatialData
+ * stores): `u8 version, u8 versionlz, u8 flags, u8 typesize, u32 nbytes, u32 blocksize,
+ * u32 cbytes`, then `u32 bstarts[nblocks]`, then blocks of `nstreams` sub-streams, each
+ * `i32 csize` + bytes (a stream whose csize equals its decoded size stored raw, a negative one a
+ * run of one byte). Flags: 0x1 byte-shuffle, 0x2 memcpyed, 0x4 bit-shuffle, 0x10 no-split, bits
+ * 5-7 the inner codec.
+ */
+const BLOSC_CODECS = ['blosclz', 'lz4', 'snappy', 'zlib', 'zstd'];
+/** Decode a Blosc frame. */
+async function bloscDecompress(frame, inflate = platformInflate) {
+    const view = new DataView(frame.buffer, frame.byteOffset, frame.byteLength);
+    if (frame.length < 16)
+        throw new Error('blosc: frame too short');
+    const flags = frame[2];
+    const typesize = frame[3];
+    const nbytes = view.getUint32(4, true);
+    const blocksize = view.getUint32(8, true);
+    const out = new Uint8Array(nbytes);
+    if (nbytes === 0)
+        return out;
+    if (flags & 0x2) {
+        out.set(frame.subarray(16, 16 + nbytes));
+        return out;
+    }
+    if (flags & 0x4)
+        throw new Error('blosc: bit-shuffle is not supported');
+    const code = flags >>> 5;
+    const codec = BLOSC_CODECS[code] ?? `code ${code}`;
+    if (codec !== 'lz4' && codec !== 'zstd' && codec !== 'zlib') {
+        throw new Error(`blosc: inner codec ${codec} is not supported (lz4, zstd or zlib)`);
+    }
+    const shuffle = (flags & 0x1) !== 0 && typesize > 1;
+    const noSplit = (flags & 0x10) !== 0;
+    const nblocks = Math.ceil(nbytes / blocksize);
+    const scratch = shuffle ? new Uint8Array(blocksize) : null;
+    for (let blk = 0; blk < nblocks; blk++) {
+        const bsize = Math.min(blocksize, nbytes - blk * blocksize);
+        const leftover = bsize !== blocksize;
+        const nstreams = !noSplit && !leftover ? typesize : 1;
+        const ssize = Math.floor(bsize / nstreams);
+        let p = view.getUint32(16 + blk * 4, true);
+        const block = scratch ?? out;
+        const base = scratch ? 0 : blk * blocksize;
+        for (let s = 0; s < nstreams; s++) {
+            const csize = view.getInt32(p, true);
+            p += 4;
+            const dst = base + s * ssize;
+            if (csize < 0) {
+                block.fill(-csize & 0xff, dst, dst + ssize);
+                continue;
+            }
+            const src = frame.subarray(p, p + csize);
+            if (csize === ssize) {
+                block.set(src, dst);
+            }
+            else {
+                const dec = codec === 'lz4'
+                    ? lz4BlockDecompress(src, ssize)
+                    : codec === 'zstd'
+                        ? decompress(src)
+                        : await inflate(src, 'deflate');
+                if (dec.length !== ssize)
+                    throw new Error(`blosc: ${codec} produced ${dec.length} of ${ssize} bytes`);
+                block.set(dec, dst);
+            }
+            p += csize;
+        }
+        if (scratch)
+            unshuffle(scratch, bsize, typesize, out, blk * blocksize);
+    }
+    return out;
+}
+/** Decode one LZ4 block (no frame) of `size` bytes. */
+function lz4BlockDecompress(src, size) {
+    const out = new Uint8Array(size);
+    let i = 0;
+    let o = 0;
+    while (i < src.length) {
+        const token = src[i++];
+        let literals = token >>> 4;
+        if (literals === 15) {
+            let b;
+            do {
+                b = src[i++];
+                literals += b;
+            } while (b === 255);
+        }
+        if (o + literals > size || i + literals > src.length)
+            throw new Error('lz4: literals overrun');
+        out.set(src.subarray(i, i + literals), o);
+        i += literals;
+        o += literals;
+        if (i >= src.length)
+            break; // the last sequence has no match
+        const offset = src[i] | (src[i + 1] << 8);
+        i += 2;
+        if (offset === 0 || offset > o)
+            throw new Error('lz4: bad match offset');
+        let length = (token & 15) + 4;
+        if ((token & 15) === 15) {
+            let b;
+            do {
+                b = src[i++];
+                length += b;
+            } while (b === 255);
+        }
+        if (o + length > size)
+            throw new Error('lz4: match overrun');
+        // Byte by byte: a match may overlap what it copies (a run).
+        for (let k = 0; k < length; k++, o++)
+            out[o] = out[o - offset];
+    }
+    if (o !== size)
+        throw new Error(`lz4: produced ${o} of ${size} bytes`);
+    return out;
+}
+/**
+ * Decode a zarr chunk through `codecs`, outermost last as zarr lists them (v2: the one
+ * `compressor`; v3: the bytes-to-bytes codecs after `bytes`).
+ */
+async function decodeChunk(bytes, codecs, inflate = platformInflate) {
+    let data = bytes;
+    for (const codec of [...codecs].reverse()) {
+        switch (codec.id) {
+            case 'blosc':
+                data = await bloscDecompress(data, inflate);
+                break;
+            case 'zstd':
+                data = decompress(data);
+                break;
+            case 'gzip':
+                data = await inflate(data, 'gzip');
+                break;
+            case 'zlib':
+                data = await inflate(data, 'deflate');
+                break;
+            default:
+                throw new Error(`zarr: codec ${codec.id} is not supported (blosc, zstd, gzip, zlib)`);
+        }
+    }
+    return data;
+}
+function unshuffle(src, len, typesize, dst, off) {
+    const n = Math.floor(len / typesize);
+    for (let j = 0; j < typesize; j++) {
+        const base = j * n;
+        for (let i = 0; i < n; i++)
+            dst[off + i * typesize + j] = src[base + i];
+    }
+    // Bytes past the last whole element are not shuffled.
+    for (let k = n * typesize; k < len; k++)
+        dst[off + k] = src[k];
+}
+async function platformInflate(bytes, format) {
+    if (typeof DecompressionStream === 'undefined')
+        throw new Error(`zarr: ${format} chunks need DecompressionStream`);
+    const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream(format));
+    return new Uint8Array(await new Response(stream).arrayBuffer());
+}
+
+/**
+ * A label image of an OME-Zarr store (`labels/<name>/`, NGFF 0.4 on zarr v2 or 0.5 on zarr v3),
+ * read in the browser from the store's files (a folder chosen, or a zip's members): its full
+ * resolution level, sliced along z, with the classes its `image-label` metadata names and colours.
+ *
+ * Chunks are decoded when a slice that needs them is read, so a store is never decoded whole.
+ * Only what label images use: C-order chunks of integer (or integer-valued float) samples, through
+ * the codecs {@link decodeChunk} reads, a missing chunk being the fill value. Sharded or transposed
+ * arrays, F-order and filters throw rather than be read wrongly. Pure: usable from workers.
+ */
+/** Whether `files` hold a zarr store (any zarr metadata among them). */
+function hasZarrMetadata(files) {
+    return files.some((f) => /(^|\/)(\.zattrs|\.zarray|\.zgroup|zarr\.json)$/.test(norm(f.name)));
+}
+/**
+ * The first label image of the zarr store among `files` (the order `labels/`'s listing gives,
+ * else the first found), or null when the store has none.
+ */
+async function readOmeZarrLabels(files, inflate) {
+    const byPath = new Map(files.map((f) => [norm(f.name), f]));
+    const groups = new Map();
+    for (const [path, file] of byPath) {
+        const m = /^(.*?)\/?(\.zattrs|zarr\.json)$/.exec(path);
+        if (!m)
+            continue;
+        const doc = JSON.parse(await file.text());
+        const attrs = (m[2] === 'zarr.json' ? doc['attributes'] : doc) ?? {};
+        groups.set(m[1], (attrs['ome'] ?? attrs));
+    }
+    const listed = [];
+    for (const [dir, ome] of groups) {
+        for (const name of ome['labels'] ?? [])
+            listed.push(join(dir, name));
+    }
+    const isLabel = (dir) => {
+        const ome = groups.get(dir);
+        return !!ome?.['multiscales'] && (!!ome['image-label'] || /(^|\/)labels\/[^/]+$/.test(dir));
+    };
+    const dir = [...listed, ...groups.keys()].find(isLabel);
+    if (dir === undefined)
+        return null;
+    const ome = groups.get(dir);
+    const ms = ome['multiscales'][0];
+    const dataset = ms.datasets[0];
+    const array = await readArrayMeta(byPath, join(dir, dataset.path));
+    const axes = (ms.axes ?? ['z', 'y', 'x'].slice(3 - array.shape.length)).map((a) => typeof a === 'string' ? { name: a } : a);
+    if (axes.length !== array.shape.length)
+        throw new Error(`OME-Zarr ${dir}: ${axes.length} axes for a ${array.shape.length}-D array`);
+    const at = (n) => axes.findIndex((a) => a.name.toLowerCase() === n);
+    const ix = at('x');
+    const iy = at('y');
+    const iz = at('z');
+    if (ix < 0 || iy < 0)
+        throw new Error(`OME-Zarr ${dir}: no x and y axes`);
+    const scale = dataset.coordinateTransformations?.find((t) => t.type === 'scale')?.scale;
+    const um = (i) => (i < 0 ? 1 : (scale?.[i] ?? 1) * unitToMicrons(axes[i].unit));
+    const stack = labelStack(byPath, join(dir, dataset.path), array, { ix, iy, iz }, inflate);
+    stack.spacing = [um(ix), um(iy), iz < 0 ? 1 : um(iz)];
+    const name = ms.name ?? dir.split('/').pop() ?? 'labels';
+    return { name, stack, classes: imageLabelClasses(ome['image-label']) };
+}
+async function readArrayMeta(byPath, path) {
+    const v2 = byPath.get(join(path, '.zarray'));
+    if (v2) {
+        const m = JSON.parse(await v2.text());
+        if (m.order && m.order !== 'C')
+            throw new Error(`zarr ${path}: ${m.order}-order chunks are not supported`);
+        if (m.filters?.length)
+            throw new Error(`zarr ${path}: filters are not supported`);
+        const sep = m.dimension_separator ?? '.';
+        return {
+            shape: m.shape,
+            chunks: m.chunks,
+            dtype: v2Dtype(m.dtype, path),
+            codecs: m.compressor ? [m.compressor] : [],
+            fill: Number(m.fill_value ?? 0) || 0,
+            key: (index) => index.join(sep),
+        };
+    }
+    const v3 = byPath.get(join(path, 'zarr.json'));
+    if (!v3)
+        throw new Error(`zarr ${path}: no array metadata`);
+    const m = JSON.parse(await v3.text());
+    if (m.chunk_grid?.name !== 'regular')
+        throw new Error(`zarr ${path}: chunk grid ${m.chunk_grid?.name} is not supported`);
+    const codecs = (m.codecs ?? []);
+    const bytes = codecs[0];
+    if (bytes?.name !== 'bytes') {
+        throw new Error(`zarr ${path}: codec ${bytes?.name ?? 'none'} before bytes is not supported (sharding, transpose)`);
+    }
+    const little = (bytes.configuration?.['endian'] ?? 'little') === 'little';
+    const enc = m.chunk_key_encoding ?? { name: 'default' };
+    const sep = enc.configuration?.separator ?? (enc.name === 'v2' ? '.' : '/');
+    return {
+        shape: m.shape,
+        chunks: m.chunk_grid.configuration.chunk_shape,
+        dtype: v3Dtype(m.data_type, little, path),
+        codecs: codecs.slice(1).map((c) => ({ id: c.name, ...(c.configuration ?? {}) })),
+        fill: Number(m.fill_value ?? 0) || 0,
+        key: (index) => (enc.name === 'v2' ? index.join(sep) : ['c', ...index].join(sep)),
+    };
+}
+/** The slices of the array at `path`, decoding (and keeping) the chunk layers a slice spans. */
+function labelStack(byPath, path, a, axes, inflate) {
+    const { ix, iy, iz } = axes;
+    const width = a.shape[ix];
+    const height = a.shape[iy];
+    const slices = iz < 0 ? 1 : a.shape[iz];
+    const cx = a.chunks[ix];
+    const cy = a.chunks[iy];
+    // The chunks (their decodes, pending or done) of the last chunk layer along z read: a slice's
+    // neighbours share it. A read keeps the layer it started with, so a read of another layer
+    // replacing this cache while it awaits a chunk cannot change what it reads.
+    let layer = null;
+    const chunk = async (index) => {
+        const file = byPath.get(join(path, a.key(index)));
+        if (!file)
+            return null;
+        return decodeChunk(await file.bytes(), a.codecs, inflate);
+    };
+    return {
+        width,
+        height,
+        slices,
+        async labels(z) {
+            if (z < 0 || z >= slices)
+                throw new Error(`slice ${z} of ${slices}`);
+            const kz = iz < 0 ? 0 : Math.floor(z / a.chunks[iz]);
+            if (layer?.kz !== kz)
+                layer = { kz, chunks: new Map() };
+            const mine = layer;
+            const out = new Uint32Array(width * height);
+            const strides = a.chunks.map((_, d) => a.chunks.slice(d + 1).reduce((p, n) => p * n, 1));
+            for (let gy = 0; gy * cy < height; gy++) {
+                for (let gx = 0; gx * cx < width; gx++) {
+                    // Every other axis (time, channel) at its first index.
+                    const index = a.shape.map((_, d) => (d === ix ? gx : d === iy ? gy : d === iz ? kz : 0));
+                    const key = index.join(',');
+                    let pending = mine.chunks.get(key);
+                    if (!pending) {
+                        pending = chunk(index);
+                        mine.chunks.set(key, pending);
+                        // A chunk that failed to decode is not kept: the next read tries it again.
+                        pending.catch(() => mine.chunks.delete(key));
+                    }
+                    const data = await pending;
+                    const view = data ? new DataView(data.buffer, data.byteOffset, data.byteLength) : null;
+                    const inZ = iz < 0 ? 0 : z - kz * a.chunks[iz];
+                    for (let y = gy * cy; y < Math.min(height, (gy + 1) * cy); y++) {
+                        for (let x = gx * cx; x < Math.min(width, (gx + 1) * cx); x++) {
+                            let v = a.fill;
+                            if (view) {
+                                const local = a.shape.map((_, d) => d === ix ? x - gx * cx : d === iy ? y - gy * cy : d === iz ? inZ : 0);
+                                const i = local.reduce((p, n, d) => p + n * strides[d], 0);
+                                v = a.dtype.read(view, i * a.dtype.bytes);
+                            }
+                            if (v > 0xffffffff) {
+                                // A label id past 32 bits would be another label once narrowed: refuse it.
+                                throw new Error(`zarr ${path}: label ${v} does not fit 32 bits`);
+                            }
+                            out[y * width + x] = v > 0 ? v : 0;
+                        }
+                    }
+                }
+            }
+            return out;
+        },
+    };
+}
+const SAMPLE = {
+    u1: { bytes: 1, read: (v, at) => v.getUint8(at) },
+    i1: { bytes: 1, read: (v, at) => v.getInt8(at) },
+    u2: { bytes: 2, read: (v, at, le) => v.getUint16(at, le) },
+    i2: { bytes: 2, read: (v, at, le) => v.getInt16(at, le) },
+    u4: { bytes: 4, read: (v, at, le) => v.getUint32(at, le) },
+    i4: { bytes: 4, read: (v, at, le) => v.getInt32(at, le) },
+    u8: { bytes: 8, read: (v, at, le) => Number(v.getBigUint64(at, le)) },
+    i8: { bytes: 8, read: (v, at, le) => Number(v.getBigInt64(at, le)) },
+    f4: { bytes: 4, read: (v, at, le) => Math.round(v.getFloat32(at, le)) },
+    f8: { bytes: 8, read: (v, at, le) => Math.round(v.getFloat64(at, le)) },
+};
+function v2Dtype(dtype, path) {
+    const m = /^([<>|])([uif])(\d)$/.exec(dtype);
+    const s = m ? SAMPLE[m[2] + m[3]] : undefined;
+    if (!m || !s)
+        throw new Error(`zarr ${path}: dtype ${dtype} is not a label type`);
+    const le = m[1] !== '>';
+    return { bytes: s.bytes, read: (v, at) => s.read(v, at, le) };
+}
+function v3Dtype(type, little, path) {
+    const m = /^(u?int|float)(8|16|32|64)$/.exec(type);
+    const code = m ? (m[1] === 'uint' ? 'u' : m[1] === 'int' ? 'i' : 'f') + Number(m[2]) / 8 : '';
+    const s = SAMPLE[code];
+    if (!s)
+        throw new Error(`zarr ${path}: data type ${type} is not a label type`);
+    return { bytes: s.bytes, read: (v, at) => s.read(v, at, little) };
+}
+/** The classes `image-label` names (a property naming each value) and colours; others unnamed. */
+function imageLabelClasses(meta) {
+    const named = new Map();
+    for (const p of meta?.properties ?? []) {
+        const name = ['name', 'class', 'label', 'acronym', 'structure', 'type']
+            .map((k) => p[k])
+            .find((v) => typeof v === 'string');
+        named.set(p['label-value'], { ...named.get(p['label-value']), name: name });
+    }
+    for (const c of meta?.colors ?? []) {
+        if (!c.rgba)
+            continue;
+        const hex = `#${c.rgba
+            .slice(0, 3)
+            .map((n) => Math.round(n).toString(16).padStart(2, '0'))
+            .join('')}`.toUpperCase();
+        named.set(c['label-value'], { ...named.get(c['label-value']), color: hex });
+    }
+    if (!named.size)
+        return labelClasses(undefined);
+    const classHierarchy = [];
+    const seen = new Set();
+    for (const [value, { name, color }] of named) {
+        const cls = name ?? `label ${value}`;
+        // One class per name: an instance segmentation names many values alike.
+        if (!seen.has(cls))
+            classHierarchy.push({ name: cls, ...(color ? { color } : {}), value });
+        seen.add(cls);
+    }
+    const labels = Object.fromEntries([...named].map(([v, { name }]) => [v, name ?? `label ${v}`]));
+    return labelClasses({ classHierarchy, labels });
+}
+function unitToMicrons(unit) {
+    switch (unit?.toLowerCase()) {
+        case 'nanometer':
+            return 1e-3;
+        case 'millimeter':
+            return 1e3;
+        case 'centimeter':
+            return 1e4;
+        case 'meter':
+            return 1e6;
+        default:
+            return 1; // micrometer, or none said
+    }
+}
+/** A path relative to the store, '/'-separated, without a leading './'. */
+function norm(name) {
+    return name.replace(/\\/g, '/').replace(/^\.\//, '');
+}
+function join(dir, name) {
+    return dir ? `${dir}/${name}` : name;
+}
+
+const EOCD = 0x06054b50;
+const ZIP64_LOCATOR = 0x07064b50;
+const ZIP64_EOCD = 0x06064b50;
+const CENTRAL = 0x02014b50;
+const LOCAL = 0x04034b50;
+const U32 = 0xffffffff;
+/** Whether a file name is a zip archive. */
+function isZipName(name) {
+    return /\.zip$/i.test(name);
+}
+/** The members of the archive in `bytes` (directories and macOS metadata left out). */
+function readZip(bytes, inflateRaw = platformInflateRaw) {
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    const eocd = findEocd(view);
+    let count = view.getUint16(eocd + 10, true);
+    let dirOffset = view.getUint32(eocd + 16, true);
+    if (count === 0xffff || dirOffset === U32) {
+        const locator = eocd - 20;
+        if (locator < 0 || view.getUint32(locator, true) !== ZIP64_LOCATOR)
+            throw new Error('zip: ZIP64 locator missing');
+        const z64 = num(view, locator + 8);
+        if (view.getUint32(z64, true) !== ZIP64_EOCD)
+            throw new Error('zip: ZIP64 directory end missing');
+        count = num(view, z64 + 32);
+        dirOffset = num(view, z64 + 48);
+    }
+    const entries = [];
+    let at = dirOffset;
+    for (let i = 0; i < count; i++) {
+        if (view.getUint32(at, true) !== CENTRAL)
+            throw new Error('zip: bad central directory');
+        const flags = view.getUint16(at + 8, true);
+        const method = view.getUint16(at + 10, true);
+        const crc = view.getUint32(at + 16, true);
+        let compressed = view.getUint32(at + 20, true);
+        let size = view.getUint32(at + 24, true);
+        const nameLen = view.getUint16(at + 28, true);
+        const extraLen = view.getUint16(at + 30, true);
+        const commentLen = view.getUint16(at + 32, true);
+        let local = view.getUint32(at + 42, true);
+        const nameBytes = bytes.subarray(at + 46, at + 46 + nameLen);
+        const name = (flags & 0x800 ? new TextDecoder() : new TextDecoder('latin1'))
+            .decode(nameBytes)
+            .replace(/\\/g, '/');
+        // ZIP64: the 32-bit fields that overflowed are in the extra field, in this order.
+        let x = at + 46 + nameLen;
+        const extraEnd = x + extraLen;
+        while (x + 4 <= extraEnd) {
+            const id = view.getUint16(x, true);
+            const len = view.getUint16(x + 2, true);
+            if (id === 0x0001) {
+                let p = x + 4;
+                if (size === U32)
+                    ((size = num(view, p)), (p += 8));
+                if (compressed === U32)
+                    ((compressed = num(view, p)), (p += 8));
+                if (local === U32)
+                    local = num(view, p);
+            }
+            x += 4 + len;
+        }
+        at = extraEnd + commentLen;
+        if (name.endsWith('/') || /(^|\/)__MACOSX\//.test(name) || /(^|\/)\.DS_Store$/.test(name))
+            continue;
+        const entry = { flags, method, crc, compressed, size, local };
+        entries.push({ name, size, bytes: () => readMember(bytes, view, name, entry, inflateRaw) });
+    }
+    return entries;
+}
+/**
+ * `files` with every `.zip` among them replaced by its members, named by their paths in it (a
+ * single top folder the archive wraps everything in is kept, as a folder pick would keep it).
+ */
+async function expandZips(files, inflateRaw) {
+    const out = [];
+    for (const file of files) {
+        if (!isZipName(file.name)) {
+            out.push(file);
+            continue;
+        }
+        for (const entry of readZip(await file.bytes(), inflateRaw)) {
+            out.push({
+                name: entry.name,
+                bytes: () => entry.bytes(),
+                text: async () => new TextDecoder().decode(await entry.bytes()),
+            });
+        }
+    }
+    return out;
+}
+async function readMember(bytes, view, name, m, inflateRaw) {
+    if (m.flags & 0x1)
+        throw new Error(`zip: ${name} is encrypted`);
+    if (view.getUint32(m.local, true) !== LOCAL)
+        throw new Error(`zip: ${name}: bad local header`);
+    const start = m.local + 30 + view.getUint16(m.local + 26, true) + view.getUint16(m.local + 28, true);
+    const raw = bytes.subarray(start, start + m.compressed);
+    if (raw.length !== m.compressed)
+        throw new Error(`zip: ${name} is truncated`);
+    let out;
+    if (m.method === 0)
+        out = raw;
+    else if (m.method === 8)
+        out = await inflateRaw(raw);
+    else
+        throw new Error(`zip: ${name} uses compression method ${m.method}, not stored or deflate`);
+    if (out.length !== m.size)
+        throw new Error(`zip: ${name} is ${out.length} bytes, expected ${m.size}`);
+    if (crc32(out) !== m.crc)
+        throw new Error(`zip: ${name} fails its CRC check`);
+    return out;
+}
+/** The end-of-central-directory record: the last one, within the 64 KiB a comment may take. */
+function findEocd(view) {
+    const stop = Math.max(0, view.byteLength - 22 - 0xffff);
+    for (let at = view.byteLength - 22; at >= stop; at--) {
+        if (view.getUint32(at, true) === EOCD)
+            return at;
+    }
+    throw new Error('zip: not a zip archive (no central directory)');
+}
+/** A little-endian u64 that fits a double (archives under 8 PB). */
+function num(view, at) {
+    return view.getUint32(at, true) + view.getUint32(at + 4, true) * 0x100000000;
+}
+let crcTable = null;
+/** CRC-32 (IEEE), as zip records it. */
+function crc32(data) {
+    if (!crcTable) {
+        crcTable = new Uint32Array(256);
+        for (let n = 0; n < 256; n++) {
+            let c = n;
+            for (let k = 0; k < 8; k++)
+                c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+            crcTable[n] = c >>> 0;
+        }
+    }
+    let c = 0xffffffff;
+    for (let i = 0; i < data.length; i++)
+        c = crcTable[(c ^ data[i]) & 0xff] ^ (c >>> 8);
+    return (c ^ 0xffffffff) >>> 0;
+}
+async function platformInflateRaw(bytes) {
+    if (typeof DecompressionStream === 'undefined')
+        throw new Error('zip: deflated members need DecompressionStream');
+    let inflater;
+    try {
+        // Compression Streams' raw DEFLATE (Chrome 103, Firefox 113, Safari 16.4 on).
+        inflater = new DecompressionStream('deflate-raw');
+    }
+    catch {
+        throw new Error('zip: this browser cannot inflate zip members (no DecompressionStream "deflate-raw")');
+    }
+    const stream = new Blob([bytes]).stream().pipeThrough(inflater);
+    return new Uint8Array(await new Response(stream).arrayBuffer());
+}
+
+/**
+ * Annotations opened by themselves, with no image under them: a label volume (`.nii`, `.nii.gz`,
+ * `.nrrd`, with the ontology JSON chosen with it), an OME-Zarr store's label image, a folder of
+ * per-slice GeoJSON (with its `regionset.json`), one GeoJSON (z-indexed by `geometry.plane.z` or
+ * not), or a `.zip` of any of these.
+ *
+ * {@link openAnnotations} builds the image they are shown on, which every view takes as it takes
+ * any other (OpenSeadragon, napari, Plotly; a stack when there are several slices; the Volume and
+ * Isosurface views and their 3D region surfaces): a label volume's slices in gray levels, its
+ * regions filled over them in their classes' colours, else a blank stack the size of the regions.
+ * The image carries the annotations as its own region sources, one per slice
+ * ({@link IImageInfo.regionSlices}), traced or parsed the first time a slice is shown.
+ * The host publishes it as it publishes any image, and disposes it when another replaces it.
+ *
+ * {@link readAnnotationSlices} is the part the Region Editor's import shares: the sources, by slice.
+ */
+/** The longest side an image built for annotations may have: OpenSeadragon's non-tiled limit. */
+const ANNOTATION_IMAGE_MAX_DIM = 8192;
+/**
+ * The annotations among `files` (zips expanded), as one region source per slice; null when there
+ * are none to read. A label image's slices are traced, and a GeoJSON parsed, when the slice is
+ * first shown.
+ */
+async function readAnnotationSlices(chosen, decoders = {}) {
+    const files = await expandZips(chosen, decoders.inflateRaw);
+    const openGeoJson = decoders.openGeoJson ?? ((text) => openGeoJsonRegionSource(text));
+    if (hasZarrMetadata(files)) {
+        const zarr = await readOmeZarrLabels(files, decoders.inflate);
+        if (!zarr)
+            throw new Error('The zarr store has no label image (an OME-Zarr labels/ group).');
+        return labelSlices('labels', zarr.name, zarr.stack, styled(zarr.classes, decoders), openGeoJson);
+    }
+    const plan = planRegionImport(files);
+    if (!plan)
+        return null;
+    if (plan.kind === 'volume') {
+        const volume = await readLabelVolume(plan.volume.name, await plan.volume.bytes(), decoders.gunzip);
+        const classes = labelClasses(plan.ontology ? JSON.parse(await plan.ontology.text()) : undefined);
+        return labelSlices('labels', stem(plan.volume.name), stackOf(volume), styled(classes, decoders), openGeoJson);
+    }
+    if (plan.kind === 'folder') {
+        const regionSet = plan.regionSet ? JSON.parse(await plan.regionSet.text()) : null;
+        const openers = new Map();
+        plan.slices.forEach((file, z) => openers.set(z, async () => openGeoJson(await folderSliceGeoJson(file, regionSet))));
+        const folder = plan.slices[0].name.split('/').slice(-2, -1)[0] || 'regions';
+        return {
+            kind: 'folder',
+            name: folder,
+            slices: plan.slices.length,
+            openers,
+            summary: `${plan.slices.length} slice files`,
+        };
+    }
+    const slices = splitByPlane(await plan.file.text());
+    const openers = new Map();
+    slices.forEach((text, z) => openers.set(z, () => openGeoJson(text)));
+    return {
+        kind: 'single',
+        name: stem(plan.file.name),
+        slices: slices.length,
+        openers,
+        summary: slices.length > 1 ? `${slices.length} slices` : 'one plane',
+    };
+}
+let opened = 0;
+/**
+ * The image `files`' annotations are shown on by themselves (see the module comment). Throws when
+ * there are none, or when their regions span more than {@link ANNOTATION_IMAGE_MAX_DIM} pixels
+ * (they are then imported onto the image they were drawn on).
+ */
+async function openAnnotations(files, decoders = {}) {
+    const set = await readAnnotationSlices(files, { outlineLabels: true, ...decoders });
+    if (!set) {
+        throw new Error('Choose a label volume (.nii, .nii.gz, .nrrd, with its ontology JSON), an OME-Zarr store, ' +
+            'GeoJSON files or a folder of them, or a .zip of any of these.');
+    }
+    let urls = [];
+    let width;
+    let height;
+    let openers = set.openers;
+    // Releases the sources measuring opened that the store has not taken (none for a label image).
+    let release = () => undefined;
+    try {
+        if (set.labels && set.size) {
+            [width, height] = set.size;
+            checkSize(width, height);
+            urls = await labelSliceUrls(set.labels.stack, set.labels.classes);
+        }
+        else {
+            // Regions alone: a blank stack as large as they reach, measured on the sources (kept open
+            // for their slices, so each is parsed once).
+            const measured = await measure(set.openers);
+            openers = measured.openers;
+            release = measured.release;
+            [width, height] = measured.size;
+            checkSize(width, height);
+            const png = encode({ width, height, data: new Uint8Array(width * height), channels: 1, depth: 8 });
+            const blank = new Blob([png], { type: 'image/png' });
+            urls = Array.from({ length: set.slices }, () => URL.createObjectURL(blank));
+        }
+    }
+    catch (err) {
+        urls.forEach((u) => URL.revokeObjectURL(u));
+        release();
+        throw err;
+    }
+    const [mx, my, mz] = set.spacing ?? [];
+    const isStack = set.slices > 1;
+    const info = {
+        isGrayscale: true,
+        trueImageSize: [width, height],
+        urls,
+        isStack,
+        showStack: false,
+        scaleRatio: true,
+        // Unique: the slice cache keys on the name, and two opened sets must not share slices.
+        fileName: `${set.name} · annotations [${++opened}]`,
+        imageMeta: [
+            {
+                channelCount: 1,
+                rgbChannels: 1,
+                x: width,
+                y: height,
+                z: set.slices,
+                mppX: mx ?? null,
+                mppY: my ?? null,
+                ...(mz != null ? { mppZ: mz } : {}),
+            },
+        ],
+        tiled: false,
+        // Open mid-stack: an atlas's first and last sections are mostly empty.
+        initialZIndex: isStack ? set.slices >> 1 : undefined,
+        regionSlices: openers,
+    };
+    return {
+        info,
+        summary: `${set.summary}, ${width} × ${height}`,
+        dispose: () => {
+            urls.forEach((u) => URL.revokeObjectURL(u));
+            release();
+        },
+    };
+}
+function labelSlices(kind, name, stack, classes, openGeoJson) {
+    const openers = new Map();
+    for (let z = 0; z < stack.slices; z++) {
+        openers.set(z, async () => openGeoJson(labelSliceGeoJson(oneSlice(stack, await stack.labels(z)), 0, classes)));
+    }
+    return {
+        kind,
+        name,
+        slices: stack.slices,
+        openers,
+        labels: { stack, classes },
+        size: [stack.width, stack.height],
+        ...(stack.spacing ? { spacing: stack.spacing } : {}),
+        summary: `${stack.slices} slice${stack.slices === 1 ? '' : 's'} of ${stack.width} × ${stack.height}`,
+    };
+}
+/** `classes`, with the atlas look when asked for and they name no style of their own. */
+function styled(classes, decoders) {
+    return decoders.outlineLabels && !classes.style ? { ...classes, style: ATLAS_STYLE } : classes;
+}
+/** A label volume as a stack read on demand. */
+function stackOf(volume) {
+    return {
+        width: volume.width,
+        height: volume.height,
+        slices: volume.slices,
+        ...(volume.spacing ? { spacing: volume.spacing } : {}),
+        labels: async (z) => volume.sliceLabels(z),
+    };
+}
+/** One slice's labels as the one-slice volume the tracer reads. */
+function oneSlice(stack, labels) {
+    return { format: 'nrrd', width: stack.width, height: stack.height, slices: 1, sliceLabels: () => labels };
+}
+/**
+ * Every slice as a grayscale PNG blob URL, each label at its class colour's luminance (never 0),
+ * background black. Grayscale, not colour: the Volume and Isosurface views take a grayscale stack,
+ * and the colour is the regions' own, filled over it in their classes' colours (the atlas look).
+ */
+async function labelSliceUrls(stack, classes) {
+    const levels = new Map();
+    const levelOf = (v) => {
+        let l = levels.get(v);
+        if (l === undefined) {
+            const hex = classes.classOf(v).color;
+            const [r, g, b] = [1, 3, 5].map((o) => parseInt(hex.slice(o, o + 2), 16));
+            l = Math.max(1, Math.round(0.299 * r + 0.587 * g + 0.114 * b));
+            levels.set(v, l);
+        }
+        return l;
+    };
+    const urls = [];
+    const gray = new Uint8Array(stack.width * stack.height);
+    for (let z = 0; z < stack.slices; z++) {
+        const labels = await stack.labels(z);
+        for (let i = 0; i < labels.length; i++)
+            gray[i] = labels[i] ? levelOf(labels[i]) : 0;
+        const png = encode({ width: stack.width, height: stack.height, data: gray, channels: 1, depth: 8 });
+        urls.push(URL.createObjectURL(new Blob([png], { type: 'image/png' })));
+    }
+    return urls;
+}
+/**
+ * Open every slice's source to learn how far the regions reach (the image is as large, from the
+ * origin, as region coordinates are image pixels). Each opener then hands its already-open source
+ * over the first time (the region store owns it from then on) and opens anew after. `release`
+ * disposes the sources not handed over yet; they are released here when measuring fails.
+ */
+async function measure(openers) {
+    // Sources opened here and not yet handed to the store: theirs to release until then.
+    const held = new Map();
+    const release = () => {
+        for (const source of held.values())
+            source.dispose();
+        held.clear();
+    };
+    let x1 = 0;
+    let y1 = 0;
+    try {
+        for (const [z, open] of openers) {
+            const source = await open();
+            held.set(z, source);
+            const bounds = source.info.bounds;
+            if (bounds) {
+                x1 = Math.max(x1, bounds[2]);
+                y1 = Math.max(y1, bounds[3]);
+            }
+        }
+        if (!(x1 > 0 && y1 > 0))
+            throw new Error('The regions have no extent to show.');
+    }
+    catch (err) {
+        release();
+        throw err;
+    }
+    const reused = new Map();
+    for (const [z, open] of openers) {
+        reused.set(z, () => {
+            const first = held.get(z);
+            if (!first)
+                return open();
+            held.delete(z);
+            return Promise.resolve(first);
+        });
+    }
+    return { openers: reused, size: [Math.ceil(x1), Math.ceil(y1)], release };
+}
+function checkSize(width, height) {
+    if (Math.max(width, height) > ANNOTATION_IMAGE_MAX_DIM) {
+        throw new Error(`The annotations span ${width} × ${height} pixels, more than ${ANNOTATION_IMAGE_MAX_DIM} on a side: ` +
+            'open the image they were drawn on, and import them onto it from the Region Editor.');
+    }
+}
+/**
+ * One GeoJSON's slices: a collection whose features name planes (`geometry.plane.z`) split into
+ * one collection per plane, each keeping the set's class tree and style, its features moved to
+ * plane 0 (a slice's source shows plane 0); any other GeoJSON is one slice as it is.
+ */
+function splitByPlane(text) {
+    const doc = JSON.parse(text);
+    const features = doc.type === 'FeatureCollection' ? (doc.features ?? []) : [];
+    const zOf = (f) => Math.max(0, Math.floor(f.geometry?.plane?.z ?? 0));
+    const last = features.reduce((m, f) => Math.max(m, zOf(f)), 0);
+    if (last === 0)
+        return [text];
+    const slices = Array.from({ length: last + 1 }, () => []);
+    for (const f of features) {
+        const z = zOf(f);
+        const geometry = f.geometry ? { ...f.geometry } : f.geometry;
+        if (geometry)
+            delete geometry.plane;
+        slices[z].push({ ...f, geometry });
+    }
+    return slices.map((list) => JSON.stringify({ ...doc, features: list }));
+}
+function stem(name) {
+    return (name.split('/').pop() ?? name).replace(/\.(nii\.gz|nii|nrrd|geojson|json|zip)$/i, '');
+}
+
 /**
  * The largest bbox (in pixels) {@link rasterizePolygon} allocates before it
  * falls back to clipping at the window. Also the cap the wand/brush use to
@@ -9098,7 +10399,7 @@ function frameToRgba(cached, frameIndex) {
 /** Lazy-import so onnxruntime-web is never pulled into unit tests or the
  *  initial bundle — only when segmentation actually runs. */
 const onnxSessionFactory = async () => {
-    const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-z1IN-F7w.mjs');
+    const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-CvadfzjS.mjs');
     return new OnnxSamSession();
 };
 /** Thrown inside a load that a model switch superseded. */
@@ -10037,6 +11338,21 @@ function applyImageRois(info, target, z, minSourceChars = REGION_SOURCE_MIN_CHAR
     const load = (loads.get(target) ?? 0) + 1;
     loads.set(target, load);
     const asSource = (json) => !!attach && !!json && json.length >= minSourceChars;
+    if (info.regionSlices && attach) {
+        // An image built from annotations: its regions are its own sources, one per slice.
+        if (info.isStack) {
+            target.enterStackMode(new Map(), z, 'per-slice-file');
+            for (const [s, open] of info.regionSlices)
+                attach(open, { slice: s });
+            return;
+        }
+        target.setRegions([]);
+        target.resetUndoHistory();
+        const first = info.regionSlices.get(0) ?? info.regionSlices.values().next().value;
+        if (first)
+            attach(first, { slice: 0 });
+        return;
+    }
     if (info.isStack && info.tiled === false) {
         const perSlice = info.roiJsonStrs;
         const sliceCount = info.urls?.length ?? perSlice?.length ?? 0;
@@ -12838,6 +14154,14 @@ class RegionPersistenceService {
         }
         return out;
     }
+    /** Whether the host can pick regions on its server (see RegionIoPort.pickServerRegions). */
+    canPickServerRegions() {
+        return typeof this.io.pickServerRegions === 'function';
+    }
+    /** Let the user pick regions on the host's server; null when cancelled or unsupported. */
+    pickServerRegions() {
+        return this.io.pickServerRegions?.() ?? of(null);
+    }
     /** Write per-slice geojsons through the host port. */
     saveSlices(slices) {
         return this.io.saveSliceGeoJsons(slices);
@@ -14392,6 +15716,8 @@ class RegionEditorComponent {
         this.persistence = persistence;
         this.maskExport = maskExport;
         this.isActive = true;
+        /** The host's HttpClient: a served region set's requests go through it (its auth). */
+        this.http = inject(HttpClient, { optional: true });
         this.regions = [];
         this.selectedRegions = [];
         this.displayHelpDialog = false;
@@ -14517,6 +15843,8 @@ class RegionEditorComponent {
         this.volumeRequest = 0;
         this._pageKey = {};
         this._page = [];
+        /** An import from the server is in flight. */
+        this.importing = false;
     }
     ngOnInit() {
         this.showShapeLabel = this.regionApi.getShowShapeLabel();
@@ -15451,8 +16779,135 @@ class RegionEditorComponent {
         }
         this.changed();
     }
+    /** The files chosen in the import inputs: one GeoJSON, a label volume with its ontology, or a
+     *  folder of per-slice GeoJSON files. */
     importRois(event) {
-        this.persistence.readChosenFile(event, (text) => void this.applyImportedRois(text));
+        const files = Array.from(event.target.files ?? []);
+        if (files.length)
+            void this.importRegionFiles(files.map((f) => importFile(f, f.webkitRelativePath || f.name)));
+    }
+    /** Whether the host can pick regions on its server ("Import regions from server"). */
+    get canImportFromServer() {
+        return this.persistence.canPickServerRegions();
+    }
+    /** "Import regions from server": the host picks files or a served region set; they import as chosen files do. */
+    importFromServer() {
+        this.importing = true;
+        this.changed();
+        this.persistence.pickServerRegions().subscribe({
+            next: (pick) => {
+                if (!pick)
+                    return;
+                if (pick.kind === 'files') {
+                    void this.importRegionFiles(pick.files.map((f) => importFile(f.data, f.name)));
+                    return;
+                }
+                void this.importServedRegionSet(pick.url, pick.name);
+            },
+            error: (err) => this.importFailed(err),
+            complete: () => {
+                this.importing = false;
+                this.changed();
+            },
+        });
+    }
+    /**
+     * Import `files`: one GeoJSON file as before (its regions, editable); anything else (see
+     * readAnnotationSlices) as one region source per slice, replacing the regions and sources of
+     * every slice: a label volume or an OME-Zarr label image traced the first time a slice is shown,
+     * its classes named (and treed) by its ontology; a folder as one source per slice file; a
+     * z-indexed GeoJSON one per plane; a zip of any of these.
+     */
+    async importRegionFiles(files) {
+        // Every step, reading the files included, reports its failure here rather than rejecting:
+        // the inputs call this without waiting on it.
+        try {
+            const plan = files.some((f) => isZipName(f.name)) ? null : planRegionImport(files);
+            if (plan?.kind === 'single') {
+                const text = await plan.file.text();
+                if (onePlane(text)) {
+                    await this.applyImportedRois(text);
+                    return;
+                }
+            }
+            const attach = this.regionApi.importSliceRegionSources?.bind(this.regionApi);
+            if (!attach) {
+                this.importFailed(new Error('This viewer cannot hold region sources.'));
+                return;
+            }
+            // Taken before the files are read: decoding a volume takes a while, and the import must land
+            // on the image it was started for, not on one shown meanwhile.
+            const ticket = this.regionApi.regionImportTicket?.();
+            const set = await readAnnotationSlices(files);
+            if (!set) {
+                this.importFailed(new Error('Choose a GeoJSON file, a folder of GeoJSON files, a .nii, .nii.gz or .nrrd label volume, ' +
+                    'an OME-Zarr store, or a .zip of any of these.'));
+                return;
+            }
+            if (set.size)
+                this.warnIfSizeDiffers(set.size[0], set.size[1]);
+            const attached = attach(set.openers, ticket);
+            if (attached === null) {
+                this.importStale();
+                return;
+            }
+            this.afterSourceImport();
+            this.toast('success', 'Regions imported', `${set.summary}; ${attached} slice${attached === 1 ? '' : 's'} annotated.`);
+        }
+        catch (err) {
+            this.importFailed(err);
+        }
+    }
+    /** A region set the host's server serves (jit-service's /regions/{id}/), read through its HttpClient. */
+    async importServedRegionSet(url, name) {
+        const importSource = this.regionApi.importRegionSourceOpener?.bind(this.regionApi);
+        if (!importSource) {
+            this.importFailed(new Error('This viewer cannot hold region sources.'));
+            return;
+        }
+        const ticket = this.regionApi.regionImportTicket?.();
+        try {
+            const applied = await importSource(() => openHttpRegionSource(url, { http: this.http ?? undefined }), ticket);
+            if (applied === false) {
+                this.importStale();
+                return;
+            }
+            this.afterSourceImport();
+            this.toast('success', 'Regions imported', name ?? url);
+        }
+        catch (err) {
+            this.importFailed(err);
+        }
+    }
+    /** An import that finished after another image was shown (or another import began): dropped. */
+    importStale() {
+        this.toast('info', 'Import discarded', 'The image changed while the regions were being read.');
+        this.changed();
+    }
+    /** The table and selection after the regions were replaced by imported sources. */
+    afterSourceImport() {
+        this.selectedRegions = [];
+        this.paginatorFirst = 0;
+        this.commit([]);
+        this.onSelectionChanged();
+    }
+    /** Warn when an imported volume's slices are not the image's size: its outlines would not fit. */
+    warnIfSizeDiffers(width, height) {
+        const meta = this.regionApi.getMaskImageSize();
+        if (meta && (meta.width !== width || meta.height !== height)) {
+            this.toast('info', 'Different size', `The volume's slices are ${width} × ${height}; the image is ${meta.width} × ${meta.height}.`);
+        }
+    }
+    importFailed(err) {
+        this.importing = false;
+        this.messageService.add({
+            key: VIZ_TOAST_KEY,
+            severity: 'error',
+            summary: 'Error importing regions',
+            detail: `${err?.message ?? err}`,
+        });
+        console.error('Error importing regions:', err);
+        this.changed();
     }
     /**
      * Replace the regions with an imported GeoJSON file's, and the slice's region source with them.
@@ -15699,7 +17154,7 @@ class RegionEditorComponent {
         this.messageService.add({ key: VIZ_TOAST_KEY, severity, summary, detail });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RegionEditorComponent, deps: [{ token: REGION_EDITOR_API }, { token: i1$2.MessageService }, { token: i1$2.ConfirmationService }, { token: RegionPersistenceService }, { token: MaskExportService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: RegionEditorComponent, isStandalone: true, selector: "region-editor", inputs: { active: "active" }, providers: [RegionPersistenceService], viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["op"], descendants: true }], ngImport: i0, template: "<p-toolbar styleClass=\"region-toolbar\">\n  <div class=\"p-toolbar-group-start align-items-center flex-wrap gap-1\">\n    <p-button\n      icon=\"pi pi-tag\"\n      size=\"small\"\n      [text]=\"!showShapeLabel\"\n      pTooltip=\"Show region labels.\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"showShapeLabel = !showShapeLabel; changeShowShapeLabel(showShapeLabel)\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-stop-circle\"\n      size=\"small\"\n      [text]=\"!regionsFilled\"\n      pTooltip=\"Fill regions in their colour (an atlas's look); labels sit inside.\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Fill regions\"\n      (onClick)=\"toggleFill()\"\n    >\n    </p-button>\n    <p-button\n      *ngIf=\"volumeView\"\n      icon=\"pi pi-eye\"\n      size=\"small\"\n      [text]=\"!regionsThroughVolume\"\n      [attr.aria-pressed]=\"regionsThroughVolume\"\n      pTooltip=\"See the regions through the volume. Off, the volume hides the parts of them behind what it shows; on, none (layers traced inside bright structures, such as an OCT's).\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Regions through volume\"\n      (onClick)=\"toggleThroughVolume()\"\n    >\n    </p-button>\n    <span class=\"toolbar-separator\"></span>\n    <!-- New regions are now created from the diagram toolbar\n         (rectangle, polyline, freeform, wand). -->\n    <p-button\n      icon=\"pi pi-upload\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Upload and display regions from geojson file.\"\n      tooltipPosition=\"bottom\"\n      (click)=\"roiFileInput.click()\"\n    >\n    </p-button>\n    <input\n      #roiFileInput\n      type=\"file\"\n      accept=\".geojson,.json\"\n      hidden\n      (change)=\"importRois($event); roiFileInput.value = ''\"\n    />\n    <p-button\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Download regions as geojson file.\"\n      tooltipPosition=\"bottom\"\n      icon=\"pi pi-download\"\n      (click)=\"exportRois()\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-save\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Save regions to server.\"\n      tooltipPosition=\"bottom\"\n      (click)=\"persistRegions()\"\n      [disabled]=\"(!regions || !regions.length) && !hasRegionSource\"\n    >\n    </p-button>\n    <p-button\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Download mask of the regions as PNG\"\n      tooltipPosition=\"bottom\"\n      (click)=\"openSaveMaskDialog()\"\n      [disabled]=\"!regions || !regions.length\"\n    >\n      <!-- References the file so Inkscape edits to mask.svg show up directly\n           (the lib's assets/** are served at assets/plotting/). The\n           toolbar-icon-dark filter recolours the black SVG to the theme blue,\n           same as region-editor.svg and the other SVG toolbar icons. -->\n      <img\n        src=\"assets/plotting/mask.svg\"\n        class=\"toolbar-icon-dark\"\n        style=\"width: 1rem; height: 1rem; vertical-align: middle\"\n        alt=\"Download mask\"\n      />\n    </p-button>\n    <p-button\n      label=\"x512\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Round all rectangle regions\n                    to width and height that are multiple of 512\"\n      tooltipPosition=\"bottom\"\n      (click)=\"roundRectangleLengths()\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-check-square\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Select all regions\"\n      tooltipPosition=\"bottom\"\n      (click)=\"selectAllRegions()\"\n      [disabled]=\"!regions || !regions.length\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-tags\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Edit class on selected rows\"\n      tooltipPosition=\"bottom\"\n      (click)=\"!selectedRegions || !selectedRegions.length ? op.hide() : op.toggle($event)\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-palette\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Edit colour of selected regions\"\n      tooltipPosition=\"bottom\"\n      (click)=\"openColorDialog()\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    >\n    </p-button>\n    <p-overlayPanel #op (onHide)=\"bulkClass = ''; newBulkClass = ''\">\n      <div class=\"flex flex-column gap-2\" style=\"width: 18rem\">\n        <span class=\"font-medium text-900\"\n          >Set class on {{ selectedRegions?.length || 0 }} selected region(s)</span\n        >\n        <!-- Selecting a class applies it immediately (choosing an option closes the\n             overlay, so there's no separate Apply button). -->\n        <p-dropdown\n          styleClass=\"w-full\"\n          appendTo=\"body\"\n          [options]=\"presetSet.classes\"\n          optionLabel=\"name\"\n          optionValue=\"name\"\n          [(ngModel)]=\"bulkClass\"\n          placeholder=\"Choose a class\u2026\"\n          [filter]=\"presetSet.classes.length > 8\"\n          filterBy=\"name\"\n          (onChange)=\"applyBulkClass()\"\n        >\n          <ng-template let-c pTemplate=\"item\">\n            <span class=\"dd-value\"\n              ><span class=\"chip-swatch\" [style.background]=\"c.color\"></span>{{ c.name }}</span\n            >\n          </ng-template>\n        </p-dropdown>\n        <div class=\"p-inputgroup\">\n          <input\n            type=\"text\"\n            pInputText\n            placeholder=\"\u2026or a new class\"\n            [(ngModel)]=\"newBulkClass\"\n            (keydown.enter)=\"addAndApplyBulkClass()\"\n          />\n          <button\n            pButton\n            type=\"button\"\n            icon=\"pi pi-plus\"\n            pTooltip=\"Add class &amp; set it\"\n            tooltipPosition=\"bottom\"\n            [disabled]=\"!newBulkClass.trim()\"\n            (click)=\"addAndApplyBulkClass()\"\n          ></button>\n        </div>\n      </div>\n    </p-overlayPanel>\n    <p-button\n      icon=\"pi pi-trash\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      (click)=\"deleteSelectedRegions()\"\n      pTooltip=\"Delete selected regions\"\n      tooltipPosition=\"bottom\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    ></p-button>\n    <p-button\n      icon=\"pi pi-times-circle\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      (click)=\"clearAllRegions()\"\n      pTooltip=\"Delete all regions\"\n      tooltipPosition=\"bottom\"\n      [disabled]=\"(!regions || !regions.length) && !hasRegionSource\"\n    ></p-button>\n    <p-button\n      icon=\"pi pi-question\"\n      size=\"small\"\n      [text]=\"true\"\n      (click)=\"showHelp()\"\n      pTooltip=\"Help\"\n      tooltipPosition=\"bottom\"\n    ></p-button>\n  </div>\n</p-toolbar>\n\n<region-classes-panel\n  [classes]=\"displayClasses\"\n  [counts]=\"classCounts\"\n  [matchMode]=\"presetSet.matchMode\"\n  [activeClass]=\"activeClass\"\n  [picked]=\"pickedClass\"\n  [marked]=\"markedClasses\"\n  [selectedCount]=\"selectedRegions?.length || 0\"\n  [defaultClassName]=\"defaultClassName\"\n  (pick)=\"selectActiveClass($event)\"\n  (recolor)=\"setClassColor($event.name, $event.color)\"\n  (remove)=\"deleteClass($event)\"\n  (manage)=\"openManageDialog()\"\n  [volume]=\"volumeView\"\n  [shown3d]=\"shown3dNames\"\n  (toggle3d)=\"toggleClass3d($event)\"\n  [hidden]=\"hiddenClasses\"\n  (toggleHidden)=\"setClassesHidden([$event], !hiddenClasses.has($event))\"\n  [treeView]=\"classHierarchy ? classTreeView : null\"\n  (treeViewChange)=\"classTreeView = $event\"\n>\n  <!-- A region set with a class hierarchy (an atlas ontology) can show its classes as a tree. -->\n  <region-class-tree\n    *ngIf=\"classHierarchy as hierarchy\"\n    [nodes]=\"hierarchy\"\n    [counts]=\"treeCounts\"\n    [colorOf]=\"treeColor\"\n    [picked]=\"pickedClass\"\n    [marked]=\"markedClasses\"\n    [volume]=\"volumeView\"\n    [shown3d]=\"shown3dNames\"\n    (pick)=\"pickClasses($event)\"\n    (recolor)=\"setClassColor($event.name, $event.color)\"\n    (toggle3d)=\"toggleClass3d($event.name, $event.classes)\"\n    [hidden]=\"hiddenClasses\"\n    (toggleHidden)=\"setClassesHidden($event.classes, $event.hidden)\"\n  >\n  </region-class-tree>\n</region-classes-panel>\n\n<region-table\n  [page]=\"pagedRegions\"\n  [total]=\"tableTotal\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions\"\n  [metaKey]=\"metaKey\"\n  [selection]=\"selectedRegions\"\n  (selectionChange)=\"selectedRegions = $event\"\n  (rowSelect)=\"onSelectionChanged()\"\n  [presetSet]=\"tablePresetSet\"\n  [defaultColor]=\"shapeColor\"\n  [mpp]=\"mpp\"\n  [volumes]=\"tableVolumes\"\n  [labelDrafts]=\"editingLabelRegions\"\n  (labelEditStart)=\"startEditLabel($event)\"\n  (labelDraftChange)=\"setLabelDraft($event.region, $event.value)\"\n  (labelEditStop)=\"stopEditLabel($event.region, $event.commit)\"\n  (classPick)=\"applyPresetToRegion($event.region, $event.name)\"\n  (deleteRow)=\"deleteRegion($event)\"\n  (pageChange)=\"onPageChange($event)\"\n>\n</region-table>\n\n<!-- Live-edit mode: no Save/Cancel \u2014 every edit commits immediately to the\n     active image's region cache. -->\n\n<p-confirmDialog\n  #cd\n  [style]=\"{ width: '24rem', height: '14rem' }\"\n  key=\"positionDialog\"\n  [baseZIndex]=\"10000\"\n  rejectButtonStyleClass=\"p-button-outlined\"\n>\n  <ng-template pTemplate=\"footer\">\n    <button type=\"button\" pButton icon=\"pi pi-check\" label=\"Yes\" (click)=\"cd.accept()\"></button>\n    <button\n      type=\"button\"\n      class=\"p-button-outlined\"\n      pButton\n      icon=\"pi pi-times\"\n      label=\"No\"\n      (click)=\"cd.reject()\"\n    ></button>\n  </ng-template>\n</p-confirmDialog>\n\n<region-save-regions-dialog\n  [(visible)]=\"showSaveAsDialog\"\n  [filename]=\"saveAsFilename\"\n  (filenameChange)=\"saveAsFilename = $event; checkSaveAsFileExists()\"\n  [fileExists]=\"saveAsFileExists\"\n  [busy]=\"saveAsBusy\"\n  (confirm)=\"confirmSaveAs()\"\n  (cancelSave)=\"cancelSaveAs()\"\n>\n</region-save-regions-dialog>\n\n<region-save-regions-dialog\n  header=\"Export Regions\"\n  confirmLabel=\"Export\"\n  confirmIcon=\"pi pi-download\"\n  inputId=\"export-filename\"\n  [(visible)]=\"showExportDialog\"\n  [(filename)]=\"exportFilename\"\n  (confirm)=\"confirmExport()\"\n>\n</region-save-regions-dialog>\n\n<region-save-mask-dialog\n  [(visible)]=\"showSaveMaskDialog\"\n  [(filename)]=\"saveMaskFilename\"\n  [(mode)]=\"maskMode\"\n  [busy]=\"maskBusy\"\n  [progress]=\"maskProgress\"\n  [encoding]=\"maskEncoding\"\n  (confirm)=\"confirmSaveMask()\"\n  (cancelExport)=\"cancelSaveMask()\"\n>\n</region-save-mask-dialog>\n\n<region-color-dialog\n  [(visible)]=\"showColorDialog\"\n  [edits]=\"classColorEdits\"\n  [selectedCount]=\"selectedRegions?.length || 0\"\n  (apply)=\"applyColorToSelected($event)\"\n>\n</region-color-dialog>\n\n<!-- Manage annotation classes (jit-ui#70): edits a working copy, committed on Apply. -->\n<region-manage-classes-dialog\n  [(visible)]=\"showManageDialog\"\n  [(draft)]=\"presetDraft\"\n  (apply)=\"applyManageDialog(true)\"\n  (resetDefaults)=\"resetPresetsToDefaults()\"\n  (importFile)=\"importPresets($event)\"\n  (export)=\"exportPresets()\"\n>\n</region-manage-classes-dialog>\n\n<region-editor-help [(visible)]=\"displayHelpDialog\"></region-editor-help>\n", styles: ["@charset \"UTF-8\";.chip-swatch{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:0 0 auto}.dd-value{display:inline-flex;align-items:center;gap:.4rem;min-width:0}.dd-value .class-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}::ng-deep region-editor .p-toolbar.region-toolbar{padding:.25rem .5rem;border-radius:0;border-left:none;border-right:none;border-top:none}::ng-deep region-editor .p-toolbar.region-toolbar .p-button.p-button-icon-only{width:auto;padding:.25rem .5rem}::ng-deep region-editor .p-toolbar.region-toolbar .p-button{padding:.25rem .5rem}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i7$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ClassesPanelComponent, selector: "region-classes-panel", inputs: ["classes", "counts", "matchMode", "activeClass", "picked", "marked", "selectedCount", "defaultClassName", "volume", "shown3d", "hidden", "treeView"], outputs: ["toggleHidden", "toggle3d", "treeViewChange", "pick", "recolor", "remove", "manage"] }, { kind: "component", type: RegionTableComponent, selector: "region-table", inputs: ["page", "total", "first", "rows", "rowsPerPageOptions", "metaKey", "selection", "presetSet", "defaultColor", "mpp", "volumes", "labelDrafts"], outputs: ["selectionChange", "rowSelect", "labelEditStart", "labelDraftChange", "labelEditStop", "classPick", "deleteRow", "pageChange"] }, { kind: "component", type: ClassTreeComponent, selector: "region-class-tree", inputs: ["nodes", "counts", "colorOf", "picked", "marked", "volume", "shown3d", "hidden"], outputs: ["pick", "recolor", "toggle3d", "toggleHidden"] }, { kind: "component", type: SaveRegionsDialogComponent, selector: "region-save-regions-dialog", inputs: ["header", "confirmLabel", "confirmIcon", "inputId", "visible", "filename", "fileExists", "busy"], outputs: ["visibleChange", "filenameChange", "confirm", "cancelSave"] }, { kind: "component", type: SaveMaskDialogComponent, selector: "region-save-mask-dialog", inputs: ["visible", "filename", "mode", "busy", "progress", "encoding"], outputs: ["visibleChange", "filenameChange", "modeChange", "confirm", "cancelExport"] }, { kind: "component", type: RegionColorDialogComponent, selector: "region-color-dialog", inputs: ["visible", "selectedCount", "edits"], outputs: ["visibleChange", "apply"] }, { kind: "component", type: ManageClassesDialogComponent, selector: "region-manage-classes-dialog", inputs: ["visible", "draft"], outputs: ["visibleChange", "draftChange", "apply", "resetDefaults", "importFile", "export"] }, { kind: "component", type: RegionEditorHelpComponent, selector: "region-editor-help", inputs: ["visible"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: RegionEditorComponent, isStandalone: true, selector: "region-editor", inputs: { active: "active" }, providers: [RegionPersistenceService], viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["op"], descendants: true }], ngImport: i0, template: "<p-toolbar styleClass=\"region-toolbar\">\n  <div class=\"p-toolbar-group-start align-items-center flex-wrap gap-1\">\n    <p-button\n      icon=\"pi pi-tag\"\n      size=\"small\"\n      [text]=\"!showShapeLabel\"\n      pTooltip=\"Show region labels.\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"showShapeLabel = !showShapeLabel; changeShowShapeLabel(showShapeLabel)\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-stop-circle\"\n      size=\"small\"\n      [text]=\"!regionsFilled\"\n      pTooltip=\"Fill regions in their colour (an atlas's look); labels sit inside.\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Fill regions\"\n      (onClick)=\"toggleFill()\"\n    >\n    </p-button>\n    <p-button\n      *ngIf=\"volumeView\"\n      icon=\"pi pi-eye\"\n      size=\"small\"\n      [text]=\"!regionsThroughVolume\"\n      [attr.aria-pressed]=\"regionsThroughVolume\"\n      pTooltip=\"See the regions through the volume. Off, the volume hides the parts of them behind what it shows; on, none (layers traced inside bright structures, such as an OCT's).\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Regions through volume\"\n      (onClick)=\"toggleThroughVolume()\"\n    >\n    </p-button>\n    <span class=\"toolbar-separator\"></span>\n    <!-- New regions are now created from the diagram toolbar\n         (rectangle, polyline, freeform, wand). -->\n    <p-button\n      icon=\"pi pi-upload\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Import regions: a GeoJSON file, or a label volume (.nii, .nii.gz, .nrrd) chosen with its ontology JSON for the class tree.\"\n      tooltipPosition=\"bottom\"\n      (click)=\"roiFileInput.click()\"\n    >\n    </p-button>\n    <input\n      #roiFileInput\n      type=\"file\"\n      accept=\".geojson,.json,.nii,.gz,.nrrd\"\n      multiple\n      hidden\n      (change)=\"importRois($event); roiFileInput.value = ''\"\n    />\n    <p-button\n      icon=\"pi pi-folder-open\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Import a folder of per-slice GeoJSON files (one per slice, in name order, with its regionset.json class tree).\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Import a folder of regions\"\n      (click)=\"roiFolderInput.click()\"\n    >\n    </p-button>\n    <input\n      #roiFolderInput\n      type=\"file\"\n      webkitdirectory\n      multiple\n      hidden\n      (change)=\"importRois($event); roiFolderInput.value = ''\"\n    />\n    <p-button\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Download regions as geojson file.\"\n      tooltipPosition=\"bottom\"\n      icon=\"pi pi-download\"\n      (click)=\"exportRois()\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-save\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Save regions to server.\"\n      tooltipPosition=\"bottom\"\n      (click)=\"persistRegions()\"\n      [disabled]=\"(!regions || !regions.length) && !hasRegionSource\"\n    >\n    </p-button>\n    <p-button\n      *ngIf=\"canImportFromServer\"\n      icon=\"pi pi-cloud-download\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Import regions from server: a GeoJSON file, a folder of per-slice GeoJSON files or a label volume (.nii, .nii.gz, .nrrd).\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Import regions from server\"\n      [loading]=\"importing\"\n      (click)=\"importFromServer()\"\n    >\n    </p-button>\n    <p-button\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Download mask of the regions as PNG\"\n      tooltipPosition=\"bottom\"\n      (click)=\"openSaveMaskDialog()\"\n      [disabled]=\"!regions || !regions.length\"\n    >\n      <!-- References the file so Inkscape edits to mask.svg show up directly\n           (the lib's assets/** are served at assets/plotting/). The\n           toolbar-icon-dark filter recolours the black SVG to the theme blue,\n           same as region-editor.svg and the other SVG toolbar icons. -->\n      <img\n        src=\"assets/plotting/mask.svg\"\n        class=\"toolbar-icon-dark\"\n        style=\"width: 1rem; height: 1rem; vertical-align: middle\"\n        alt=\"Download mask\"\n      />\n    </p-button>\n    <p-button\n      label=\"x512\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Round all rectangle regions\n                    to width and height that are multiple of 512\"\n      tooltipPosition=\"bottom\"\n      (click)=\"roundRectangleLengths()\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-check-square\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Select all regions\"\n      tooltipPosition=\"bottom\"\n      (click)=\"selectAllRegions()\"\n      [disabled]=\"!regions || !regions.length\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-tags\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Edit class on selected rows\"\n      tooltipPosition=\"bottom\"\n      (click)=\"!selectedRegions || !selectedRegions.length ? op.hide() : op.toggle($event)\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-palette\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Edit colour of selected regions\"\n      tooltipPosition=\"bottom\"\n      (click)=\"openColorDialog()\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    >\n    </p-button>\n    <p-overlayPanel #op (onHide)=\"bulkClass = ''; newBulkClass = ''\">\n      <div class=\"flex flex-column gap-2\" style=\"width: 18rem\">\n        <span class=\"font-medium text-900\"\n          >Set class on {{ selectedRegions?.length || 0 }} selected region(s)</span\n        >\n        <!-- Selecting a class applies it immediately (choosing an option closes the\n             overlay, so there's no separate Apply button). -->\n        <p-dropdown\n          styleClass=\"w-full\"\n          appendTo=\"body\"\n          [options]=\"presetSet.classes\"\n          optionLabel=\"name\"\n          optionValue=\"name\"\n          [(ngModel)]=\"bulkClass\"\n          placeholder=\"Choose a class\u2026\"\n          [filter]=\"presetSet.classes.length > 8\"\n          filterBy=\"name\"\n          (onChange)=\"applyBulkClass()\"\n        >\n          <ng-template let-c pTemplate=\"item\">\n            <span class=\"dd-value\"\n              ><span class=\"chip-swatch\" [style.background]=\"c.color\"></span>{{ c.name }}</span\n            >\n          </ng-template>\n        </p-dropdown>\n        <div class=\"p-inputgroup\">\n          <input\n            type=\"text\"\n            pInputText\n            placeholder=\"\u2026or a new class\"\n            [(ngModel)]=\"newBulkClass\"\n            (keydown.enter)=\"addAndApplyBulkClass()\"\n          />\n          <button\n            pButton\n            type=\"button\"\n            icon=\"pi pi-plus\"\n            pTooltip=\"Add class &amp; set it\"\n            tooltipPosition=\"bottom\"\n            [disabled]=\"!newBulkClass.trim()\"\n            (click)=\"addAndApplyBulkClass()\"\n          ></button>\n        </div>\n      </div>\n    </p-overlayPanel>\n    <p-button\n      icon=\"pi pi-trash\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      (click)=\"deleteSelectedRegions()\"\n      pTooltip=\"Delete selected regions\"\n      tooltipPosition=\"bottom\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    ></p-button>\n    <p-button\n      icon=\"pi pi-times-circle\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      (click)=\"clearAllRegions()\"\n      pTooltip=\"Delete all regions\"\n      tooltipPosition=\"bottom\"\n      [disabled]=\"(!regions || !regions.length) && !hasRegionSource\"\n    ></p-button>\n    <p-button\n      icon=\"pi pi-question\"\n      size=\"small\"\n      [text]=\"true\"\n      (click)=\"showHelp()\"\n      pTooltip=\"Help\"\n      tooltipPosition=\"bottom\"\n    ></p-button>\n  </div>\n</p-toolbar>\n\n<region-classes-panel\n  [classes]=\"displayClasses\"\n  [counts]=\"classCounts\"\n  [matchMode]=\"presetSet.matchMode\"\n  [activeClass]=\"activeClass\"\n  [picked]=\"pickedClass\"\n  [marked]=\"markedClasses\"\n  [selectedCount]=\"selectedRegions?.length || 0\"\n  [defaultClassName]=\"defaultClassName\"\n  (pick)=\"selectActiveClass($event)\"\n  (recolor)=\"setClassColor($event.name, $event.color)\"\n  (remove)=\"deleteClass($event)\"\n  (manage)=\"openManageDialog()\"\n  [volume]=\"volumeView\"\n  [shown3d]=\"shown3dNames\"\n  (toggle3d)=\"toggleClass3d($event)\"\n  [hidden]=\"hiddenClasses\"\n  (toggleHidden)=\"setClassesHidden([$event], !hiddenClasses.has($event))\"\n  [treeView]=\"classHierarchy ? classTreeView : null\"\n  (treeViewChange)=\"classTreeView = $event\"\n>\n  <!-- A region set with a class hierarchy (an atlas ontology) can show its classes as a tree. -->\n  <region-class-tree\n    *ngIf=\"classHierarchy as hierarchy\"\n    [nodes]=\"hierarchy\"\n    [counts]=\"treeCounts\"\n    [colorOf]=\"treeColor\"\n    [picked]=\"pickedClass\"\n    [marked]=\"markedClasses\"\n    [volume]=\"volumeView\"\n    [shown3d]=\"shown3dNames\"\n    (pick)=\"pickClasses($event)\"\n    (recolor)=\"setClassColor($event.name, $event.color)\"\n    (toggle3d)=\"toggleClass3d($event.name, $event.classes)\"\n    [hidden]=\"hiddenClasses\"\n    (toggleHidden)=\"setClassesHidden($event.classes, $event.hidden)\"\n  >\n  </region-class-tree>\n</region-classes-panel>\n\n<region-table\n  [page]=\"pagedRegions\"\n  [total]=\"tableTotal\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions\"\n  [metaKey]=\"metaKey\"\n  [selection]=\"selectedRegions\"\n  (selectionChange)=\"selectedRegions = $event\"\n  (rowSelect)=\"onSelectionChanged()\"\n  [presetSet]=\"tablePresetSet\"\n  [defaultColor]=\"shapeColor\"\n  [mpp]=\"mpp\"\n  [volumes]=\"tableVolumes\"\n  [labelDrafts]=\"editingLabelRegions\"\n  (labelEditStart)=\"startEditLabel($event)\"\n  (labelDraftChange)=\"setLabelDraft($event.region, $event.value)\"\n  (labelEditStop)=\"stopEditLabel($event.region, $event.commit)\"\n  (classPick)=\"applyPresetToRegion($event.region, $event.name)\"\n  (deleteRow)=\"deleteRegion($event)\"\n  (pageChange)=\"onPageChange($event)\"\n>\n</region-table>\n\n<!-- Live-edit mode: no Save/Cancel \u2014 every edit commits immediately to the\n     active image's region cache. -->\n\n<p-confirmDialog\n  #cd\n  [style]=\"{ width: '24rem', height: '14rem' }\"\n  key=\"positionDialog\"\n  [baseZIndex]=\"10000\"\n  rejectButtonStyleClass=\"p-button-outlined\"\n>\n  <ng-template pTemplate=\"footer\">\n    <button type=\"button\" pButton icon=\"pi pi-check\" label=\"Yes\" (click)=\"cd.accept()\"></button>\n    <button\n      type=\"button\"\n      class=\"p-button-outlined\"\n      pButton\n      icon=\"pi pi-times\"\n      label=\"No\"\n      (click)=\"cd.reject()\"\n    ></button>\n  </ng-template>\n</p-confirmDialog>\n\n<region-save-regions-dialog\n  [(visible)]=\"showSaveAsDialog\"\n  [filename]=\"saveAsFilename\"\n  (filenameChange)=\"saveAsFilename = $event; checkSaveAsFileExists()\"\n  [fileExists]=\"saveAsFileExists\"\n  [busy]=\"saveAsBusy\"\n  (confirm)=\"confirmSaveAs()\"\n  (cancelSave)=\"cancelSaveAs()\"\n>\n</region-save-regions-dialog>\n\n<region-save-regions-dialog\n  header=\"Export Regions\"\n  confirmLabel=\"Export\"\n  confirmIcon=\"pi pi-download\"\n  inputId=\"export-filename\"\n  [(visible)]=\"showExportDialog\"\n  [(filename)]=\"exportFilename\"\n  (confirm)=\"confirmExport()\"\n>\n</region-save-regions-dialog>\n\n<region-save-mask-dialog\n  [(visible)]=\"showSaveMaskDialog\"\n  [(filename)]=\"saveMaskFilename\"\n  [(mode)]=\"maskMode\"\n  [busy]=\"maskBusy\"\n  [progress]=\"maskProgress\"\n  [encoding]=\"maskEncoding\"\n  (confirm)=\"confirmSaveMask()\"\n  (cancelExport)=\"cancelSaveMask()\"\n>\n</region-save-mask-dialog>\n\n<region-color-dialog\n  [(visible)]=\"showColorDialog\"\n  [edits]=\"classColorEdits\"\n  [selectedCount]=\"selectedRegions?.length || 0\"\n  (apply)=\"applyColorToSelected($event)\"\n>\n</region-color-dialog>\n\n<!-- Manage annotation classes (jit-ui#70): edits a working copy, committed on Apply. -->\n<region-manage-classes-dialog\n  [(visible)]=\"showManageDialog\"\n  [(draft)]=\"presetDraft\"\n  (apply)=\"applyManageDialog(true)\"\n  (resetDefaults)=\"resetPresetsToDefaults()\"\n  (importFile)=\"importPresets($event)\"\n  (export)=\"exportPresets()\"\n>\n</region-manage-classes-dialog>\n\n<region-editor-help [(visible)]=\"displayHelpDialog\"></region-editor-help>\n", styles: ["@charset \"UTF-8\";.chip-swatch{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:0 0 auto}.dd-value{display:inline-flex;align-items:center;gap:.4rem;min-width:0}.dd-value .class-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}::ng-deep region-editor .p-toolbar.region-toolbar{padding:.25rem .5rem;border-radius:0;border-left:none;border-right:none;border-top:none}::ng-deep region-editor .p-toolbar.region-toolbar .p-button.p-button-icon-only{width:auto;padding:.25rem .5rem}::ng-deep region-editor .p-toolbar.region-toolbar .p-button{padding:.25rem .5rem}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i7$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ClassesPanelComponent, selector: "region-classes-panel", inputs: ["classes", "counts", "matchMode", "activeClass", "picked", "marked", "selectedCount", "defaultClassName", "volume", "shown3d", "hidden", "treeView"], outputs: ["toggleHidden", "toggle3d", "treeViewChange", "pick", "recolor", "remove", "manage"] }, { kind: "component", type: RegionTableComponent, selector: "region-table", inputs: ["page", "total", "first", "rows", "rowsPerPageOptions", "metaKey", "selection", "presetSet", "defaultColor", "mpp", "volumes", "labelDrafts"], outputs: ["selectionChange", "rowSelect", "labelEditStart", "labelDraftChange", "labelEditStop", "classPick", "deleteRow", "pageChange"] }, { kind: "component", type: ClassTreeComponent, selector: "region-class-tree", inputs: ["nodes", "counts", "colorOf", "picked", "marked", "volume", "shown3d", "hidden"], outputs: ["pick", "recolor", "toggle3d", "toggleHidden"] }, { kind: "component", type: SaveRegionsDialogComponent, selector: "region-save-regions-dialog", inputs: ["header", "confirmLabel", "confirmIcon", "inputId", "visible", "filename", "fileExists", "busy"], outputs: ["visibleChange", "filenameChange", "confirm", "cancelSave"] }, { kind: "component", type: SaveMaskDialogComponent, selector: "region-save-mask-dialog", inputs: ["visible", "filename", "mode", "busy", "progress", "encoding"], outputs: ["visibleChange", "filenameChange", "modeChange", "confirm", "cancelExport"] }, { kind: "component", type: RegionColorDialogComponent, selector: "region-color-dialog", inputs: ["visible", "selectedCount", "edits"], outputs: ["visibleChange", "apply"] }, { kind: "component", type: ManageClassesDialogComponent, selector: "region-manage-classes-dialog", inputs: ["visible", "draft"], outputs: ["visibleChange", "draftChange", "apply", "resetDefaults", "importFile", "export"] }, { kind: "component", type: RegionEditorHelpComponent, selector: "region-editor-help", inputs: ["visible"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RegionEditorComponent, decorators: [{
             type: Component,
@@ -15722,7 +17177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         RegionColorDialogComponent,
                         ManageClassesDialogComponent,
                         RegionEditorHelpComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [RegionPersistenceService], template: "<p-toolbar styleClass=\"region-toolbar\">\n  <div class=\"p-toolbar-group-start align-items-center flex-wrap gap-1\">\n    <p-button\n      icon=\"pi pi-tag\"\n      size=\"small\"\n      [text]=\"!showShapeLabel\"\n      pTooltip=\"Show region labels.\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"showShapeLabel = !showShapeLabel; changeShowShapeLabel(showShapeLabel)\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-stop-circle\"\n      size=\"small\"\n      [text]=\"!regionsFilled\"\n      pTooltip=\"Fill regions in their colour (an atlas's look); labels sit inside.\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Fill regions\"\n      (onClick)=\"toggleFill()\"\n    >\n    </p-button>\n    <p-button\n      *ngIf=\"volumeView\"\n      icon=\"pi pi-eye\"\n      size=\"small\"\n      [text]=\"!regionsThroughVolume\"\n      [attr.aria-pressed]=\"regionsThroughVolume\"\n      pTooltip=\"See the regions through the volume. Off, the volume hides the parts of them behind what it shows; on, none (layers traced inside bright structures, such as an OCT's).\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Regions through volume\"\n      (onClick)=\"toggleThroughVolume()\"\n    >\n    </p-button>\n    <span class=\"toolbar-separator\"></span>\n    <!-- New regions are now created from the diagram toolbar\n         (rectangle, polyline, freeform, wand). -->\n    <p-button\n      icon=\"pi pi-upload\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Upload and display regions from geojson file.\"\n      tooltipPosition=\"bottom\"\n      (click)=\"roiFileInput.click()\"\n    >\n    </p-button>\n    <input\n      #roiFileInput\n      type=\"file\"\n      accept=\".geojson,.json\"\n      hidden\n      (change)=\"importRois($event); roiFileInput.value = ''\"\n    />\n    <p-button\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Download regions as geojson file.\"\n      tooltipPosition=\"bottom\"\n      icon=\"pi pi-download\"\n      (click)=\"exportRois()\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-save\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Save regions to server.\"\n      tooltipPosition=\"bottom\"\n      (click)=\"persistRegions()\"\n      [disabled]=\"(!regions || !regions.length) && !hasRegionSource\"\n    >\n    </p-button>\n    <p-button\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Download mask of the regions as PNG\"\n      tooltipPosition=\"bottom\"\n      (click)=\"openSaveMaskDialog()\"\n      [disabled]=\"!regions || !regions.length\"\n    >\n      <!-- References the file so Inkscape edits to mask.svg show up directly\n           (the lib's assets/** are served at assets/plotting/). The\n           toolbar-icon-dark filter recolours the black SVG to the theme blue,\n           same as region-editor.svg and the other SVG toolbar icons. -->\n      <img\n        src=\"assets/plotting/mask.svg\"\n        class=\"toolbar-icon-dark\"\n        style=\"width: 1rem; height: 1rem; vertical-align: middle\"\n        alt=\"Download mask\"\n      />\n    </p-button>\n    <p-button\n      label=\"x512\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Round all rectangle regions\n                    to width and height that are multiple of 512\"\n      tooltipPosition=\"bottom\"\n      (click)=\"roundRectangleLengths()\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-check-square\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Select all regions\"\n      tooltipPosition=\"bottom\"\n      (click)=\"selectAllRegions()\"\n      [disabled]=\"!regions || !regions.length\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-tags\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Edit class on selected rows\"\n      tooltipPosition=\"bottom\"\n      (click)=\"!selectedRegions || !selectedRegions.length ? op.hide() : op.toggle($event)\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-palette\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Edit colour of selected regions\"\n      tooltipPosition=\"bottom\"\n      (click)=\"openColorDialog()\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    >\n    </p-button>\n    <p-overlayPanel #op (onHide)=\"bulkClass = ''; newBulkClass = ''\">\n      <div class=\"flex flex-column gap-2\" style=\"width: 18rem\">\n        <span class=\"font-medium text-900\"\n          >Set class on {{ selectedRegions?.length || 0 }} selected region(s)</span\n        >\n        <!-- Selecting a class applies it immediately (choosing an option closes the\n             overlay, so there's no separate Apply button). -->\n        <p-dropdown\n          styleClass=\"w-full\"\n          appendTo=\"body\"\n          [options]=\"presetSet.classes\"\n          optionLabel=\"name\"\n          optionValue=\"name\"\n          [(ngModel)]=\"bulkClass\"\n          placeholder=\"Choose a class\u2026\"\n          [filter]=\"presetSet.classes.length > 8\"\n          filterBy=\"name\"\n          (onChange)=\"applyBulkClass()\"\n        >\n          <ng-template let-c pTemplate=\"item\">\n            <span class=\"dd-value\"\n              ><span class=\"chip-swatch\" [style.background]=\"c.color\"></span>{{ c.name }}</span\n            >\n          </ng-template>\n        </p-dropdown>\n        <div class=\"p-inputgroup\">\n          <input\n            type=\"text\"\n            pInputText\n            placeholder=\"\u2026or a new class\"\n            [(ngModel)]=\"newBulkClass\"\n            (keydown.enter)=\"addAndApplyBulkClass()\"\n          />\n          <button\n            pButton\n            type=\"button\"\n            icon=\"pi pi-plus\"\n            pTooltip=\"Add class &amp; set it\"\n            tooltipPosition=\"bottom\"\n            [disabled]=\"!newBulkClass.trim()\"\n            (click)=\"addAndApplyBulkClass()\"\n          ></button>\n        </div>\n      </div>\n    </p-overlayPanel>\n    <p-button\n      icon=\"pi pi-trash\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      (click)=\"deleteSelectedRegions()\"\n      pTooltip=\"Delete selected regions\"\n      tooltipPosition=\"bottom\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    ></p-button>\n    <p-button\n      icon=\"pi pi-times-circle\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      (click)=\"clearAllRegions()\"\n      pTooltip=\"Delete all regions\"\n      tooltipPosition=\"bottom\"\n      [disabled]=\"(!regions || !regions.length) && !hasRegionSource\"\n    ></p-button>\n    <p-button\n      icon=\"pi pi-question\"\n      size=\"small\"\n      [text]=\"true\"\n      (click)=\"showHelp()\"\n      pTooltip=\"Help\"\n      tooltipPosition=\"bottom\"\n    ></p-button>\n  </div>\n</p-toolbar>\n\n<region-classes-panel\n  [classes]=\"displayClasses\"\n  [counts]=\"classCounts\"\n  [matchMode]=\"presetSet.matchMode\"\n  [activeClass]=\"activeClass\"\n  [picked]=\"pickedClass\"\n  [marked]=\"markedClasses\"\n  [selectedCount]=\"selectedRegions?.length || 0\"\n  [defaultClassName]=\"defaultClassName\"\n  (pick)=\"selectActiveClass($event)\"\n  (recolor)=\"setClassColor($event.name, $event.color)\"\n  (remove)=\"deleteClass($event)\"\n  (manage)=\"openManageDialog()\"\n  [volume]=\"volumeView\"\n  [shown3d]=\"shown3dNames\"\n  (toggle3d)=\"toggleClass3d($event)\"\n  [hidden]=\"hiddenClasses\"\n  (toggleHidden)=\"setClassesHidden([$event], !hiddenClasses.has($event))\"\n  [treeView]=\"classHierarchy ? classTreeView : null\"\n  (treeViewChange)=\"classTreeView = $event\"\n>\n  <!-- A region set with a class hierarchy (an atlas ontology) can show its classes as a tree. -->\n  <region-class-tree\n    *ngIf=\"classHierarchy as hierarchy\"\n    [nodes]=\"hierarchy\"\n    [counts]=\"treeCounts\"\n    [colorOf]=\"treeColor\"\n    [picked]=\"pickedClass\"\n    [marked]=\"markedClasses\"\n    [volume]=\"volumeView\"\n    [shown3d]=\"shown3dNames\"\n    (pick)=\"pickClasses($event)\"\n    (recolor)=\"setClassColor($event.name, $event.color)\"\n    (toggle3d)=\"toggleClass3d($event.name, $event.classes)\"\n    [hidden]=\"hiddenClasses\"\n    (toggleHidden)=\"setClassesHidden($event.classes, $event.hidden)\"\n  >\n  </region-class-tree>\n</region-classes-panel>\n\n<region-table\n  [page]=\"pagedRegions\"\n  [total]=\"tableTotal\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions\"\n  [metaKey]=\"metaKey\"\n  [selection]=\"selectedRegions\"\n  (selectionChange)=\"selectedRegions = $event\"\n  (rowSelect)=\"onSelectionChanged()\"\n  [presetSet]=\"tablePresetSet\"\n  [defaultColor]=\"shapeColor\"\n  [mpp]=\"mpp\"\n  [volumes]=\"tableVolumes\"\n  [labelDrafts]=\"editingLabelRegions\"\n  (labelEditStart)=\"startEditLabel($event)\"\n  (labelDraftChange)=\"setLabelDraft($event.region, $event.value)\"\n  (labelEditStop)=\"stopEditLabel($event.region, $event.commit)\"\n  (classPick)=\"applyPresetToRegion($event.region, $event.name)\"\n  (deleteRow)=\"deleteRegion($event)\"\n  (pageChange)=\"onPageChange($event)\"\n>\n</region-table>\n\n<!-- Live-edit mode: no Save/Cancel \u2014 every edit commits immediately to the\n     active image's region cache. -->\n\n<p-confirmDialog\n  #cd\n  [style]=\"{ width: '24rem', height: '14rem' }\"\n  key=\"positionDialog\"\n  [baseZIndex]=\"10000\"\n  rejectButtonStyleClass=\"p-button-outlined\"\n>\n  <ng-template pTemplate=\"footer\">\n    <button type=\"button\" pButton icon=\"pi pi-check\" label=\"Yes\" (click)=\"cd.accept()\"></button>\n    <button\n      type=\"button\"\n      class=\"p-button-outlined\"\n      pButton\n      icon=\"pi pi-times\"\n      label=\"No\"\n      (click)=\"cd.reject()\"\n    ></button>\n  </ng-template>\n</p-confirmDialog>\n\n<region-save-regions-dialog\n  [(visible)]=\"showSaveAsDialog\"\n  [filename]=\"saveAsFilename\"\n  (filenameChange)=\"saveAsFilename = $event; checkSaveAsFileExists()\"\n  [fileExists]=\"saveAsFileExists\"\n  [busy]=\"saveAsBusy\"\n  (confirm)=\"confirmSaveAs()\"\n  (cancelSave)=\"cancelSaveAs()\"\n>\n</region-save-regions-dialog>\n\n<region-save-regions-dialog\n  header=\"Export Regions\"\n  confirmLabel=\"Export\"\n  confirmIcon=\"pi pi-download\"\n  inputId=\"export-filename\"\n  [(visible)]=\"showExportDialog\"\n  [(filename)]=\"exportFilename\"\n  (confirm)=\"confirmExport()\"\n>\n</region-save-regions-dialog>\n\n<region-save-mask-dialog\n  [(visible)]=\"showSaveMaskDialog\"\n  [(filename)]=\"saveMaskFilename\"\n  [(mode)]=\"maskMode\"\n  [busy]=\"maskBusy\"\n  [progress]=\"maskProgress\"\n  [encoding]=\"maskEncoding\"\n  (confirm)=\"confirmSaveMask()\"\n  (cancelExport)=\"cancelSaveMask()\"\n>\n</region-save-mask-dialog>\n\n<region-color-dialog\n  [(visible)]=\"showColorDialog\"\n  [edits]=\"classColorEdits\"\n  [selectedCount]=\"selectedRegions?.length || 0\"\n  (apply)=\"applyColorToSelected($event)\"\n>\n</region-color-dialog>\n\n<!-- Manage annotation classes (jit-ui#70): edits a working copy, committed on Apply. -->\n<region-manage-classes-dialog\n  [(visible)]=\"showManageDialog\"\n  [(draft)]=\"presetDraft\"\n  (apply)=\"applyManageDialog(true)\"\n  (resetDefaults)=\"resetPresetsToDefaults()\"\n  (importFile)=\"importPresets($event)\"\n  (export)=\"exportPresets()\"\n>\n</region-manage-classes-dialog>\n\n<region-editor-help [(visible)]=\"displayHelpDialog\"></region-editor-help>\n", styles: ["@charset \"UTF-8\";.chip-swatch{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:0 0 auto}.dd-value{display:inline-flex;align-items:center;gap:.4rem;min-width:0}.dd-value .class-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}::ng-deep region-editor .p-toolbar.region-toolbar{padding:.25rem .5rem;border-radius:0;border-left:none;border-right:none;border-top:none}::ng-deep region-editor .p-toolbar.region-toolbar .p-button.p-button-icon-only{width:auto;padding:.25rem .5rem}::ng-deep region-editor .p-toolbar.region-toolbar .p-button{padding:.25rem .5rem}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [RegionPersistenceService], template: "<p-toolbar styleClass=\"region-toolbar\">\n  <div class=\"p-toolbar-group-start align-items-center flex-wrap gap-1\">\n    <p-button\n      icon=\"pi pi-tag\"\n      size=\"small\"\n      [text]=\"!showShapeLabel\"\n      pTooltip=\"Show region labels.\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"showShapeLabel = !showShapeLabel; changeShowShapeLabel(showShapeLabel)\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-stop-circle\"\n      size=\"small\"\n      [text]=\"!regionsFilled\"\n      pTooltip=\"Fill regions in their colour (an atlas's look); labels sit inside.\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Fill regions\"\n      (onClick)=\"toggleFill()\"\n    >\n    </p-button>\n    <p-button\n      *ngIf=\"volumeView\"\n      icon=\"pi pi-eye\"\n      size=\"small\"\n      [text]=\"!regionsThroughVolume\"\n      [attr.aria-pressed]=\"regionsThroughVolume\"\n      pTooltip=\"See the regions through the volume. Off, the volume hides the parts of them behind what it shows; on, none (layers traced inside bright structures, such as an OCT's).\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Regions through volume\"\n      (onClick)=\"toggleThroughVolume()\"\n    >\n    </p-button>\n    <span class=\"toolbar-separator\"></span>\n    <!-- New regions are now created from the diagram toolbar\n         (rectangle, polyline, freeform, wand). -->\n    <p-button\n      icon=\"pi pi-upload\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Import regions: a GeoJSON file, or a label volume (.nii, .nii.gz, .nrrd) chosen with its ontology JSON for the class tree.\"\n      tooltipPosition=\"bottom\"\n      (click)=\"roiFileInput.click()\"\n    >\n    </p-button>\n    <input\n      #roiFileInput\n      type=\"file\"\n      accept=\".geojson,.json,.nii,.gz,.nrrd\"\n      multiple\n      hidden\n      (change)=\"importRois($event); roiFileInput.value = ''\"\n    />\n    <p-button\n      icon=\"pi pi-folder-open\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Import a folder of per-slice GeoJSON files (one per slice, in name order, with its regionset.json class tree).\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Import a folder of regions\"\n      (click)=\"roiFolderInput.click()\"\n    >\n    </p-button>\n    <input\n      #roiFolderInput\n      type=\"file\"\n      webkitdirectory\n      multiple\n      hidden\n      (change)=\"importRois($event); roiFolderInput.value = ''\"\n    />\n    <p-button\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Download regions as geojson file.\"\n      tooltipPosition=\"bottom\"\n      icon=\"pi pi-download\"\n      (click)=\"exportRois()\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-save\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Save regions to server.\"\n      tooltipPosition=\"bottom\"\n      (click)=\"persistRegions()\"\n      [disabled]=\"(!regions || !regions.length) && !hasRegionSource\"\n    >\n    </p-button>\n    <p-button\n      *ngIf=\"canImportFromServer\"\n      icon=\"pi pi-cloud-download\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Import regions from server: a GeoJSON file, a folder of per-slice GeoJSON files or a label volume (.nii, .nii.gz, .nrrd).\"\n      tooltipPosition=\"bottom\"\n      ariaLabel=\"Import regions from server\"\n      [loading]=\"importing\"\n      (click)=\"importFromServer()\"\n    >\n    </p-button>\n    <p-button\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Download mask of the regions as PNG\"\n      tooltipPosition=\"bottom\"\n      (click)=\"openSaveMaskDialog()\"\n      [disabled]=\"!regions || !regions.length\"\n    >\n      <!-- References the file so Inkscape edits to mask.svg show up directly\n           (the lib's assets/** are served at assets/plotting/). The\n           toolbar-icon-dark filter recolours the black SVG to the theme blue,\n           same as region-editor.svg and the other SVG toolbar icons. -->\n      <img\n        src=\"assets/plotting/mask.svg\"\n        class=\"toolbar-icon-dark\"\n        style=\"width: 1rem; height: 1rem; vertical-align: middle\"\n        alt=\"Download mask\"\n      />\n    </p-button>\n    <p-button\n      label=\"x512\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Round all rectangle regions\n                    to width and height that are multiple of 512\"\n      tooltipPosition=\"bottom\"\n      (click)=\"roundRectangleLengths()\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-check-square\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Select all regions\"\n      tooltipPosition=\"bottom\"\n      (click)=\"selectAllRegions()\"\n      [disabled]=\"!regions || !regions.length\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-tags\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Edit class on selected rows\"\n      tooltipPosition=\"bottom\"\n      (click)=\"!selectedRegions || !selectedRegions.length ? op.hide() : op.toggle($event)\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    >\n    </p-button>\n    <p-button\n      icon=\"pi pi-palette\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      pTooltip=\"Edit colour of selected regions\"\n      tooltipPosition=\"bottom\"\n      (click)=\"openColorDialog()\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    >\n    </p-button>\n    <p-overlayPanel #op (onHide)=\"bulkClass = ''; newBulkClass = ''\">\n      <div class=\"flex flex-column gap-2\" style=\"width: 18rem\">\n        <span class=\"font-medium text-900\"\n          >Set class on {{ selectedRegions?.length || 0 }} selected region(s)</span\n        >\n        <!-- Selecting a class applies it immediately (choosing an option closes the\n             overlay, so there's no separate Apply button). -->\n        <p-dropdown\n          styleClass=\"w-full\"\n          appendTo=\"body\"\n          [options]=\"presetSet.classes\"\n          optionLabel=\"name\"\n          optionValue=\"name\"\n          [(ngModel)]=\"bulkClass\"\n          placeholder=\"Choose a class\u2026\"\n          [filter]=\"presetSet.classes.length > 8\"\n          filterBy=\"name\"\n          (onChange)=\"applyBulkClass()\"\n        >\n          <ng-template let-c pTemplate=\"item\">\n            <span class=\"dd-value\"\n              ><span class=\"chip-swatch\" [style.background]=\"c.color\"></span>{{ c.name }}</span\n            >\n          </ng-template>\n        </p-dropdown>\n        <div class=\"p-inputgroup\">\n          <input\n            type=\"text\"\n            pInputText\n            placeholder=\"\u2026or a new class\"\n            [(ngModel)]=\"newBulkClass\"\n            (keydown.enter)=\"addAndApplyBulkClass()\"\n          />\n          <button\n            pButton\n            type=\"button\"\n            icon=\"pi pi-plus\"\n            pTooltip=\"Add class &amp; set it\"\n            tooltipPosition=\"bottom\"\n            [disabled]=\"!newBulkClass.trim()\"\n            (click)=\"addAndApplyBulkClass()\"\n          ></button>\n        </div>\n      </div>\n    </p-overlayPanel>\n    <p-button\n      icon=\"pi pi-trash\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      (click)=\"deleteSelectedRegions()\"\n      pTooltip=\"Delete selected regions\"\n      tooltipPosition=\"bottom\"\n      [disabled]=\"!selectedRegions || !selectedRegions.length\"\n    ></p-button>\n    <p-button\n      icon=\"pi pi-times-circle\"\n      size=\"small\"\n      [text]=\"true\"\n      styleClass=\"mr-2\"\n      (click)=\"clearAllRegions()\"\n      pTooltip=\"Delete all regions\"\n      tooltipPosition=\"bottom\"\n      [disabled]=\"(!regions || !regions.length) && !hasRegionSource\"\n    ></p-button>\n    <p-button\n      icon=\"pi pi-question\"\n      size=\"small\"\n      [text]=\"true\"\n      (click)=\"showHelp()\"\n      pTooltip=\"Help\"\n      tooltipPosition=\"bottom\"\n    ></p-button>\n  </div>\n</p-toolbar>\n\n<region-classes-panel\n  [classes]=\"displayClasses\"\n  [counts]=\"classCounts\"\n  [matchMode]=\"presetSet.matchMode\"\n  [activeClass]=\"activeClass\"\n  [picked]=\"pickedClass\"\n  [marked]=\"markedClasses\"\n  [selectedCount]=\"selectedRegions?.length || 0\"\n  [defaultClassName]=\"defaultClassName\"\n  (pick)=\"selectActiveClass($event)\"\n  (recolor)=\"setClassColor($event.name, $event.color)\"\n  (remove)=\"deleteClass($event)\"\n  (manage)=\"openManageDialog()\"\n  [volume]=\"volumeView\"\n  [shown3d]=\"shown3dNames\"\n  (toggle3d)=\"toggleClass3d($event)\"\n  [hidden]=\"hiddenClasses\"\n  (toggleHidden)=\"setClassesHidden([$event], !hiddenClasses.has($event))\"\n  [treeView]=\"classHierarchy ? classTreeView : null\"\n  (treeViewChange)=\"classTreeView = $event\"\n>\n  <!-- A region set with a class hierarchy (an atlas ontology) can show its classes as a tree. -->\n  <region-class-tree\n    *ngIf=\"classHierarchy as hierarchy\"\n    [nodes]=\"hierarchy\"\n    [counts]=\"treeCounts\"\n    [colorOf]=\"treeColor\"\n    [picked]=\"pickedClass\"\n    [marked]=\"markedClasses\"\n    [volume]=\"volumeView\"\n    [shown3d]=\"shown3dNames\"\n    (pick)=\"pickClasses($event)\"\n    (recolor)=\"setClassColor($event.name, $event.color)\"\n    (toggle3d)=\"toggleClass3d($event.name, $event.classes)\"\n    [hidden]=\"hiddenClasses\"\n    (toggleHidden)=\"setClassesHidden($event.classes, $event.hidden)\"\n  >\n  </region-class-tree>\n</region-classes-panel>\n\n<region-table\n  [page]=\"pagedRegions\"\n  [total]=\"tableTotal\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions\"\n  [metaKey]=\"metaKey\"\n  [selection]=\"selectedRegions\"\n  (selectionChange)=\"selectedRegions = $event\"\n  (rowSelect)=\"onSelectionChanged()\"\n  [presetSet]=\"tablePresetSet\"\n  [defaultColor]=\"shapeColor\"\n  [mpp]=\"mpp\"\n  [volumes]=\"tableVolumes\"\n  [labelDrafts]=\"editingLabelRegions\"\n  (labelEditStart)=\"startEditLabel($event)\"\n  (labelDraftChange)=\"setLabelDraft($event.region, $event.value)\"\n  (labelEditStop)=\"stopEditLabel($event.region, $event.commit)\"\n  (classPick)=\"applyPresetToRegion($event.region, $event.name)\"\n  (deleteRow)=\"deleteRegion($event)\"\n  (pageChange)=\"onPageChange($event)\"\n>\n</region-table>\n\n<!-- Live-edit mode: no Save/Cancel \u2014 every edit commits immediately to the\n     active image's region cache. -->\n\n<p-confirmDialog\n  #cd\n  [style]=\"{ width: '24rem', height: '14rem' }\"\n  key=\"positionDialog\"\n  [baseZIndex]=\"10000\"\n  rejectButtonStyleClass=\"p-button-outlined\"\n>\n  <ng-template pTemplate=\"footer\">\n    <button type=\"button\" pButton icon=\"pi pi-check\" label=\"Yes\" (click)=\"cd.accept()\"></button>\n    <button\n      type=\"button\"\n      class=\"p-button-outlined\"\n      pButton\n      icon=\"pi pi-times\"\n      label=\"No\"\n      (click)=\"cd.reject()\"\n    ></button>\n  </ng-template>\n</p-confirmDialog>\n\n<region-save-regions-dialog\n  [(visible)]=\"showSaveAsDialog\"\n  [filename]=\"saveAsFilename\"\n  (filenameChange)=\"saveAsFilename = $event; checkSaveAsFileExists()\"\n  [fileExists]=\"saveAsFileExists\"\n  [busy]=\"saveAsBusy\"\n  (confirm)=\"confirmSaveAs()\"\n  (cancelSave)=\"cancelSaveAs()\"\n>\n</region-save-regions-dialog>\n\n<region-save-regions-dialog\n  header=\"Export Regions\"\n  confirmLabel=\"Export\"\n  confirmIcon=\"pi pi-download\"\n  inputId=\"export-filename\"\n  [(visible)]=\"showExportDialog\"\n  [(filename)]=\"exportFilename\"\n  (confirm)=\"confirmExport()\"\n>\n</region-save-regions-dialog>\n\n<region-save-mask-dialog\n  [(visible)]=\"showSaveMaskDialog\"\n  [(filename)]=\"saveMaskFilename\"\n  [(mode)]=\"maskMode\"\n  [busy]=\"maskBusy\"\n  [progress]=\"maskProgress\"\n  [encoding]=\"maskEncoding\"\n  (confirm)=\"confirmSaveMask()\"\n  (cancelExport)=\"cancelSaveMask()\"\n>\n</region-save-mask-dialog>\n\n<region-color-dialog\n  [(visible)]=\"showColorDialog\"\n  [edits]=\"classColorEdits\"\n  [selectedCount]=\"selectedRegions?.length || 0\"\n  (apply)=\"applyColorToSelected($event)\"\n>\n</region-color-dialog>\n\n<!-- Manage annotation classes (jit-ui#70): edits a working copy, committed on Apply. -->\n<region-manage-classes-dialog\n  [(visible)]=\"showManageDialog\"\n  [(draft)]=\"presetDraft\"\n  (apply)=\"applyManageDialog(true)\"\n  (resetDefaults)=\"resetPresetsToDefaults()\"\n  (importFile)=\"importPresets($event)\"\n  (export)=\"exportPresets()\"\n>\n</region-manage-classes-dialog>\n\n<region-editor-help [(visible)]=\"displayHelpDialog\"></region-editor-help>\n", styles: ["@charset \"UTF-8\";.chip-swatch{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:0 0 auto}.dd-value{display:inline-flex;align-items:center;gap:.4rem;min-width:0}.dd-value .class-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}::ng-deep region-editor .p-toolbar.region-toolbar{padding:.25rem .5rem;border-radius:0;border-left:none;border-right:none;border-top:none}::ng-deep region-editor .p-toolbar.region-toolbar .p-button.p-button-icon-only{width:auto;padding:.25rem .5rem}::ng-deep region-editor .p-toolbar.region-toolbar .p-button{padding:.25rem .5rem}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [REGION_EDITOR_API]
@@ -15732,6 +17187,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             }], active: [{
                 type: Input
             }] } });
+/**
+ * Whether one GeoJSON file holds a single plane (its regions imported as they always were). One
+ * that does not parse is taken as one too, so the regions import reports it as it always has.
+ */
+function onePlane(text) {
+    try {
+        return splitByPlane(text).length === 1;
+    }
+    catch {
+        return true;
+    }
+}
 
 /**
  * Shared intensity helpers (refactoring plan, Step 5). The two backends use
@@ -22971,6 +24438,8 @@ class VisualizerComponent {
         /** Isosurface band as a 0–255 slider position, mapped onto the volume's real
          *  intensity range by the renderer. Defaults to the full range. */
         this.isoRange = [0, 255];
+        /** Waits for a viewer created outside the document to be attached (see {@link whenInDocument}). */
+        this.attachObserver = null;
         /** Debounced z-slice scrubbing (see SliceScrubber — refactoring plan Step 7). */
         this.scrubber = new SliceScrubber((z) => {
             this.plotService.setZIndex(z);
@@ -23250,12 +24719,35 @@ class VisualizerComponent {
         // re-enters the zone (ngZone.run) only when it actually changes view state.
         this.shortcuts = new ViewerShortcuts(this.shortcutHost(), this.ngZone);
         this.shortcuts.attach();
-        this.onViewReady();
+        this.whenInDocument(() => this.onViewReady());
     }
     /** The plot div exists now: run an image-less draw that arrived before it did. */
     onViewReady() {
         this.render.viewIsReady(this.spatial.dataset, !!this.imageInfo);
     }
+    /**
+     * Run `ready` once this viewer is in the document. A host may create it detached — a closed
+     * dialog's projected content, such as jit-ui's pipeline preview — and the backends find the
+     * plot div by id, so a draw then found no target and alerted "the renderer could not start"
+     * over another viewer. Until then its view is not ready, and an image-less draw waits.
+     */
+    whenInDocument(ready) {
+        const el = this.hostRef?.nativeElement;
+        if (!el || el.isConnected || typeof ResizeObserver === 'undefined') {
+            ready();
+            return;
+        }
+        // Attached and laid out, its size changes from nothing: that is when it can be drawn into.
+        const observer = new ResizeObserver(() => {
+            if (!el.isConnected)
+                return;
+            observer.disconnect();
+            this.attachObserver = null;
+            this.ngZone.run(ready);
+        });
+        this.attachObserver = observer;
+        observer.observe(el);
+    }
     /** What the keyboard, wheel and context-menu shortcuts act on. Their listeners live
      *  outside this view, so every action that changes what it shows marks it for check. */
     shortcutHost() {
@@ -23304,6 +24796,7 @@ class VisualizerComponent {
             this.toggleDragMode('select');
     }
     ngOnDestroy() {
+        this.attachObserver?.disconnect();
         // A contributed mode's session ends first, while the viewer it drew over
         // still exists. The panel goes with this view, so no change detection.
         this.contributions.destroy();
@@ -27699,8 +29192,12 @@ class RegionSourceScope {
         /** The entry of the slice on screen: kept open. */
         this.shown = null;
     }
-    /** Attach `open` to `image` for `slices`, replacing (and closing) what was there. */
-    attach(image, open, slices) {
+    /**
+     * Attach `open` to `image` for `slices`, replacing (and closing) what was there. `imported` names
+     * the slices it brings that a save must write (see {@link importedSlices}): for a source of one
+     * slice, that slice when non-empty; for a `'planes'` source, the slices its planes cover.
+     */
+    attach(image, open, slices, imported = []) {
         const sources = this.imageSources(image);
         const entry = { open, source: null, ready: null };
         if (slices === 'planes') {
@@ -27710,6 +29207,7 @@ class RegionSourceScope {
             sources.perSlice.forEach((e) => this.close(e));
             sources.perSlice.clear();
             sources.taken.clear();
+            sources.imported = new Set(imported);
         }
         else {
             const old = sources.perSlice.get(slices.slice);
@@ -27718,6 +29216,10 @@ class RegionSourceScope {
             entry.plane = slices.plane ?? 0;
             sources.perSlice.set(slices.slice, entry);
             sources.taken.delete(slices.slice);
+            if (imported.length)
+                sources.imported.add(slices.slice);
+            else
+                sources.imported.delete(slices.slice);
         }
     }
     /** Drop every source of `image` (closing the open ones) and what was taken from them. */
@@ -27739,6 +29241,7 @@ class RegionSourceScope {
         this.close(entry);
         sources.perSlice.delete(slice);
         sources.taken.delete(slice);
+        sources.imported.delete(slice);
     }
     /** The slice on screen (null: none): its source stays open while others are read. */
     show(image, slice) {
@@ -27782,6 +29285,11 @@ class RegionSourceScope {
         const taken = image ? this.images.get(image)?.taken : undefined;
         return taken ? Array.from(taken.values()).flatMap((ids) => Array.from(ids)) : [];
     }
+    /** The slices of `image` whose source was imported (see {@link attach}), in order. */
+    importedSlices(image) {
+        const imported = image ? this.images.get(image)?.imported : undefined;
+        return imported ? Array.from(imported).sort((a, b) => a - b) : [];
+    }
     /** The slices of `image` with anything taken from their source. */
     slicesWithTaken(image) {
         const taken = image ? this.images.get(image)?.taken : undefined;
@@ -27806,7 +29314,7 @@ class RegionSourceScope {
     imageSources(image) {
         let sources = this.images.get(image);
         if (!sources) {
-            sources = { planes: null, perSlice: new Map(), taken: new Map() };
+            sources = { planes: null, perSlice: new Map(), taken: new Map(), imported: new Set() };
             this.images.set(image, sources);
         }
         return sources;
@@ -28824,8 +30332,12 @@ class RegionStore {
      */
     getStackSaveSlices() {
         const slices = this.scope.stackSaveSlices(this.regions);
-        // A slice whose region source lost features (taken, deleted) is re-written too.
-        const changed = this.sources.slicesWithTaken(this.scope.activeImage).filter((z) => !slices.has(z));
+        // A slice whose region source lost features (taken, deleted) is re-written too, and so is one
+        // whose source was imported: it is on no file yet.
+        const image = this.scope.activeImage;
+        const changed = [
+            ...new Set([...this.sources.slicesWithTaken(image), ...this.sources.importedSlices(image)]),
+        ].filter((z) => !slices.has(z));
         if (!changed.length)
             return slices;
         for (const z of changed)
@@ -29218,13 +30730,19 @@ class RegionStore {
      * source was closed to save memory). `slices` says which slice of the current image it
      * serves: one (default: the slice shown; plane 0 of the source), or `'planes'`, every slice z
      * from plane z of a z-indexed source. Replaces the source those slices had.
+     *
+     * `imported` marks a source brought in over the image (an imported volume, folder or served set)
+     * rather than the image's own regions: it is on no file yet, so a save writes its slices though
+     * nothing was taken from it — `true` for a source of one slice, the slices its planes cover for a
+     * `'planes'` source. The image's own sources are not marked: loading them changes nothing to save.
      */
-    attachRegionSource(source, slices = { slice: this.sourceSlice }) {
+    attachRegionSource(source, slices = { slice: this.sourceSlice }, imported = false) {
         const image = this.scope.activeImage;
         if (!image)
             return;
         const open = typeof source === 'function' ? source : () => Promise.resolve(source);
-        this.sources.attach(image, open, slices);
+        const importedSlices = imported === false ? [] : imported === true ? (slices === 'planes' ? [] : [slices.slice]) : imported;
+        this.sources.attach(image, open, slices, importedSlices);
         this.sourcesVersion++;
         this.refreshSourceView();
     }
@@ -29602,22 +31120,50 @@ class RegionStore {
         return view.source.getIndex(view.plane, { ...query, exclude: Array.from(view.taken) });
     }
     /**
-     * `regions` as a GeoJSON FeatureCollection string merged with the region source behind them:
-     * the source's features that were not taken (or deleted), then `regions`. Without a source,
-     * {@link getGeoJsonString}. `slice` names a folder stack's slice (default the one shown);
-     * on a z-indexed stack's source (`'planes'`) the export spans every slice.
+     * `regions` as a GeoJSON FeatureCollection string merged with the region sources behind them:
+     * the sources' features that were not taken (or deleted), then `regions`. Without a source,
+     * {@link getGeoJsonString}.
+     *
+     * `slice` names one slice-file of a folder stack (a per-slice-file save): its source's features,
+     * on the file's own plane — of a z-indexed source over every slice, only that slice's plane.
+     * Without it, the export is the image's: on a stack saved as one file, every slice's source
+     * (each feature on its slice's plane, `geometry.plane.z`) and a z-indexed source's every plane;
+     * otherwise the source of the slice shown.
      */
-    async getGeoJsonWithSource(regions, slice = this.sourceSlice) {
+    async getGeoJsonWithSource(regions, slice) {
         const image = this.scope.activeImage;
         const planes = this.scope.stackMode && this.sources.hasPlanesSource(image);
-        const binding = await this.sources.binding(image, slice);
-        if (!binding)
-            return regionsToGeoJson(regions);
         const features = regions
             .filter((r) => !r.isProfile?.())
             .map((r) => featureFromRegion(r))
             .filter((f) => !!f);
-        const exclude = planes ? this.sources.allTaken(image) : Array.from(this.sources.taken(image, slice));
+        if (slice === undefined && this.scope.stackMode && this.scope.saveLayout === 'combined' && !planes) {
+            const sliced = this.sources.slicesWithSource(image);
+            if (sliced.length) {
+                const sourceFeatures = [];
+                for (const z of sliced) {
+                    const binding = await this.sources.binding(image, z);
+                    if (!binding)
+                        continue;
+                    const exported = await binding.source.exportGeoJson(Array.from(this.sources.taken(image, z)), []);
+                    sourceFeatures.push(...onPlane(planeFeatures(exported, binding.plane), z));
+                }
+                return JSON.stringify({ type: 'FeatureCollection', features: [...sourceFeatures, ...features] });
+            }
+        }
+        const at = slice ?? this.sourceSlice;
+        const binding = await this.sources.binding(image, at);
+        if (!binding)
+            return regionsToGeoJson(regions);
+        if (planes && slice !== undefined) {
+            // One slice-file of a z-indexed source: that slice's plane, written on the file's plane 0.
+            const exported = await binding.source.exportGeoJson(this.sources.allTaken(image), []);
+            return JSON.stringify({
+                type: 'FeatureCollection',
+                features: [...onPlane(planeFeatures(exported, binding.plane), 0), ...features],
+            });
+        }
+        const exclude = planes ? this.sources.allTaken(image) : Array.from(this.sources.taken(image, at));
         return binding.source.exportGeoJson(exclude, features);
     }
     // ── Region look ────────────────────────────────────────────────────────
@@ -29858,6 +31404,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: VisualizerStore }] });
+/** The features of an exported FeatureCollection on `plane` (a missing plane is plane 0). */
+function planeFeatures(geoJson, plane) {
+    const features = (JSON.parse(geoJson)?.features ?? []);
+    return features.filter((f) => (f?.geometry?.plane?.z ?? 0) === plane);
+}
+/** `features` moved onto plane `z`, as QuPath writes it: `geometry.plane`, left out for plane 0. */
+function onPlane(features, z) {
+    return features.map((f) => {
+        const { plane: _plane, ...geometry } = f.geometry ?? {};
+        return { ...f, geometry: z === 0 ? geometry : { ...geometry, plane: { c: -1, z, t: 0 } } };
+    });
+}
 
 /**
  * Pure intensity-profile math: sampling a line through a pixel frame, placing a
@@ -31396,6 +32954,12 @@ function silenceOsdMultiImageAdvisory() {
     });
     osd.__multiImageFilterInstalled = true;
 }
+/** Tile cache entries a single image keeps per tiled image (one per channel when drawn per channel). */
+const TILES_PER_IMAGE = 150;
+/** The most tiles a single per-channel image keeps (each a decoded 512² tile, ~1 MB). */
+const MAX_CHANNEL_TILES = 1200;
+/** Tile requests in flight at once for an image drawn per channel. */
+const CHANNEL_REQUEST_LIMIT = 12;
 /**
  * The options object handed to the OpenSeadragon factory. Pure: every value
  * that depends on the service comes in through `input`.
@@ -31481,7 +33045,17 @@ function buildViewerOptions(input) {
         // so they get a much larger tile budget — otherwise switching slices evicts
         // each other's tiles and scrubbing back re-fetches. Scaled to the resident
         // slice count; single images keep the lean default.
-        maxImageCacheCount: input.sliceCount > 1 ? Math.min(2400, Math.max(600, input.maxSlices * 40)) : 150,
+        // A single image drawn per channel needs room for every visible channel's tiles in view: at
+        // 150 a 22-channel plate evicted tiles while they were still being converted.
+        maxImageCacheCount: input.sliceCount > 1
+            ? Math.min(2400, Math.max(600, input.maxSlices * 40))
+            : Math.min(MAX_CHANNEL_TILES, TILES_PER_IMAGE * Math.max(1, Math.ceil((input.channelImages ?? 1) / 2))),
+        // OSD sends every tile request at once by default (imageLoaderLimit 0) and times each out
+        // after 30 s from when it is sent. A view of a 22-channel image asks for hundreds of tiles;
+        // the browser holds all but a few connections' worth back, so those timed out while still
+        // waiting their turn. Limited, they wait in OSD's queue (not timed), where a channel being
+        // hidden drops its own (SliceCache.revealChannelSlice). Single images keep OSD's default.
+        ...((input.channelImages ?? 1) > 1 ? { imageLoaderLimit: CHANNEL_REQUEST_LIMIT } : {}),
     };
 }
 
@@ -32935,6 +34509,234 @@ class OsdRegionOverlay {
     }
 }
 
+/**
+ * "Transcripts reloading…" at the bottom of the canvas while a layer's data is in flight: one
+ * line naming every layer still loading, on a semi-opaque backing so it reads over any tissue.
+ * Longer work names itself ("Building HPF in 3D…") and joins the line.
+ *
+ * Shown only once something has been loading for {@link SHOW_AFTER_MS}, so a redraw served from
+ * cache does not flash it.
+ */
+const SHOW_AFTER_MS = 150;
+class NapariLoadingBadge {
+    constructor(host) {
+        this.names = [];
+        this.tasks = [];
+        this.timer = null;
+        if (getComputedStyle(host).position === 'static')
+            host.style.position = 'relative';
+        this.el = document.createElement('div');
+        this.el.className = 'napari-loading-badge';
+        this.el.setAttribute('role', 'status');
+        this.el.setAttribute('aria-live', 'polite');
+        Object.assign(this.el.style, {
+            position: 'absolute',
+            left: '50%',
+            bottom: '12px',
+            transform: 'translateX(-50%)',
+            padding: '4px 12px',
+            borderRadius: '12px',
+            background: 'rgba(0, 0, 0, 0.6)',
+            color: '#fff',
+            font: '12px/1.4 system-ui, sans-serif',
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+            zIndex: '5',
+            display: 'none',
+        });
+        host.appendChild(this.el);
+    }
+    /** The layers loading now, and the tasks running (their messages); both empty hides the badge. */
+    set(names, tasks = []) {
+        this.names = [...new Set(names)];
+        this.tasks = [...new Set(tasks)];
+        if (!this.names.length && !this.tasks.length) {
+            if (this.timer)
+                clearTimeout(this.timer);
+            this.timer = null;
+            this.el.style.display = 'none';
+            return;
+        }
+        const parts = this.names.length ? [`${listOf(this.names)} reloading…`, ...this.tasks] : this.tasks;
+        this.el.textContent = parts.join(' · ');
+        if (this.el.style.display === 'block' || this.timer)
+            return;
+        this.timer = setTimeout(() => {
+            this.timer = null;
+            if (this.names.length || this.tasks.length)
+                this.el.style.display = 'block';
+        }, SHOW_AFTER_MS);
+    }
+    /** The text currently set (shown or about to be). */
+    get text() {
+        return this.names.length || this.tasks.length ? (this.el.textContent ?? '') : '';
+    }
+    destroy() {
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.el.remove();
+    }
+}
+/** "A", "A and b", "A, b and c": the first as given, the rest with a lower-cased initial. */
+function listOf(names) {
+    const [first, ...rest] = names;
+    const lower = rest.map((n) => n.charAt(0).toLowerCase() + n.slice(1));
+    const all = [first, ...lower];
+    return all.length === 1 ? all[0] : `${all.slice(0, -1).join(', ')} and ${all[all.length - 1]}`;
+}
+
+/**
+ * "x reloading…" at the bottom of the canvas, aggregated over everything that loads into one
+ * scene: image tiles (the tile client), observation colourings (the spatial scenes) and the
+ * spatial tile layers' own loads (which report a list of layer names).
+ *
+ * Each load is a {@link begin} that hands back its own `end`. {@link reset} starts a new scene:
+ * the counts are dropped, and an `end` from a load that began before it is a no-op, so a load
+ * that settles after a re-plot can neither un-count the new scene's work nor drive a count below
+ * zero (which hid the next scene's "Observations reloading…" until a second load overlapped it).
+ *
+ * A {@link beginTask} is work that outlives a scene (a region's 3D reconstruction, built for
+ * whichever volume is on screen when it is done): its message stays across a reset.
+ */
+class LoadingBadgeState {
+    constructor() {
+        this.host = null;
+        this.badge = null;
+        this.counts = new Map();
+        this.tileLayers = [];
+        this.generation = 0;
+        this.tasks = new Map();
+    }
+    /** The element the badge is drawn into (the plot host); set per plot. */
+    attach(host) {
+        this.host = host;
+        if (this.tasks.size)
+            this.show();
+    }
+    /** One load of `source` started; call the returned function once it settles. */
+    begin(source) {
+        const generation = this.generation;
+        this.counts.set(source, (this.counts.get(source) ?? 0) + 1);
+        this.show();
+        let ended = false;
+        return () => {
+            if (ended || generation !== this.generation)
+                return;
+            ended = true;
+            this.counts.set(source, (this.counts.get(source) ?? 0) - 1);
+            this.show();
+        };
+    }
+    /** A task started, shown by its `message` ("Building HPF in 3D…"); call the returned function
+     *  once it settles. */
+    beginTask(message) {
+        const id = Symbol(message);
+        this.tasks.set(id, message);
+        this.show();
+        return () => {
+            if (this.tasks.delete(id))
+                this.show();
+        };
+    }
+    /** The spatial tile layers still loading (their own names, in their order). */
+    setTileLayers(layers) {
+        this.tileLayers = layers;
+        this.show();
+    }
+    /** The text the badge has set (shown, or about to be once the show delay passes). */
+    get text() {
+        return this.badge?.text ?? '';
+    }
+    /** A new scene: forget every count and remove the badge (tasks show again on the next attach). */
+    reset() {
+        this.generation++;
+        this.counts.clear();
+        this.tileLayers = [];
+        this.badge?.destroy();
+        this.badge = null;
+    }
+    show() {
+        if (!this.host)
+            return;
+        this.badge ??= new NapariLoadingBadge(this.host);
+        this.badge.set([
+            ...((this.counts.get('Image') ?? 0) > 0 ? ['Image'] : []),
+            ...((this.counts.get('Observations') ?? 0) > 0 ? ['Observations'] : []),
+            ...this.tileLayers,
+        ], [...this.tasks.values()]);
+    }
+}
+
+/**
+ * "Image reloading…" over the OpenSeadragon view while it fetches the tiles of what it shows, as
+ * napari's views show it for their image, cells and transcripts (the same badge). Driven by each
+ * world item's own `fully-loaded-change` (an image, a stack slice, a channel), so it covers every
+ * tile source alike, and shown only after a short delay, so tiles served from cache never flash it.
+ *
+ * Only items on screen count (opacity above 0): a hidden channel loads nothing by design (it is
+ * not preloaded), so it never becomes fully loaded, and a slice cached or loading in the
+ * background is not what the view shows. An item is weighed again when its opacity changes.
+ */
+class OsdTileLoading {
+    constructor(viewer) {
+        this.viewer = viewer;
+        this.state = new LoadingBadgeState();
+        /** Each item still loading, with the function that un-counts it. */
+        this.loading = new Map();
+        this.watched = new Map();
+        this.onAdd = (e) => this.watch(e.item);
+        this.onRemove = (e) => this.unwatch(e.item);
+        this.state.attach(viewer.element);
+        viewer.world.addHandler('add-item', this.onAdd);
+        viewer.world.addHandler('remove-item', this.onRemove);
+        for (let i = 0; i < viewer.world.getItemCount(); i++)
+            this.watch(viewer.world.getItemAt(i));
+    }
+    /** The badge's text (shown, or about to be). */
+    get text() {
+        return this.state.text;
+    }
+    destroy() {
+        this.viewer.world.removeHandler('add-item', this.onAdd);
+        this.viewer.world.removeHandler('remove-item', this.onRemove);
+        for (const item of [...this.watched.keys()])
+            this.unwatch(item);
+        this.state.reset();
+    }
+    watch(item) {
+        if (!item || this.watched.has(item))
+            return;
+        const handler = () => this.set(item, this.isLoading(item));
+        this.watched.set(item, handler);
+        item.addHandler('fully-loaded-change', handler);
+        item.addHandler('opacity-change', handler);
+        handler();
+    }
+    unwatch(item) {
+        const handler = this.watched.get(item);
+        if (handler) {
+            item.removeHandler('fully-loaded-change', handler);
+            item.removeHandler('opacity-change', handler);
+        }
+        this.watched.delete(item);
+        this.set(item, false);
+    }
+    /** Whether the item is on screen and still fetching its tiles. */
+    isLoading(item) {
+        const opacity = typeof item.getOpacity === 'function' ? item.getOpacity() : 1;
+        return opacity > 0 && !item.getFullyLoaded();
+    }
+    set(item, loading) {
+        const end = this.loading.get(item);
+        if (loading && !end)
+            this.loading.set(item, this.state.begin('Image'));
+        else if (!loading && end) {
+            end();
+            this.loading.delete(item);
+        }
+    }
+}
+
 /**
  * A physical scale bar drawn over an OpenSeadragon viewer. The length maths (the nice 1/2/5 × 10ⁿ
  * length nearest the target, and its unit) are napari-js's `scaleBarFor` / `formatLength`, which
@@ -33790,7 +35592,10 @@ class SliceCache {
     /**
      * Add slice z's channel group: one additively-composited ('lighter' = Fiji
      * "Composite") TiledImage per channel, hidden (opacity 0) until revealed.
-     * Each is preloaded so the background loader can pre-fill every slice.
+     * The visible channels' are preloaded, so the background loader can pre-fill
+     * every slice; a hidden channel's loads nothing until it is shown (a 22-channel
+     * plate fetched and decoded every channel's tiles, overflowing the tile cache:
+     * tiles evicted mid-conversion failed to decode).
      * Cached so a revisit is an instant opacity toggle — no re-fetch, no
      * white-flicker. Mirrors addSlice for the composite path.
      */
@@ -33831,7 +35636,7 @@ class SliceCache {
                     width: 1,
                     opacity: 0, // revealed by revealChannelSlice once the group is in
                     compositeOperation: 'lighter',
-                    preload: true,
+                    preload: this.host.channelVisible(c),
                     success: (e) => {
                         const item = e?.item;
                         if (token !== this.sliceLoadToken) {
@@ -33854,17 +35659,37 @@ class SliceCache {
         }
     }
     /** Reveal slice z's channel group (each visible channel → opacity 1) and
-     *  hide every other cached slice's group. Instant; no fetch/decode. */
+     *  hide every other cached slice's group. Instant; no fetch/decode. Only the
+     *  visible channels keep loading (preload): a hidden channel's tiles are not
+     *  fetched or decoded until it is shown. */
     revealChannelSlice(z) {
+        const hidden = new Set();
         for (const [zz, group] of this.channelSliceItems) {
             const active = zz === z;
             group.forEach((it, c) => {
                 if (!it)
                     return;
                 const visible = this.host.channelVisible(c);
+                if (!visible)
+                    hidden.add(it);
+                quiet(() => it.setPreload?.(visible));
                 quiet(() => it.setOpacity(active && visible ? 1 : 0));
             });
         }
+        this.dropQueuedTiles(hidden);
+    }
+    /** Drop the tile requests still waiting in OSD's queue for `items` (channels just hidden), so
+     *  the visible channels' tiles are not stuck behind them. A request already sent completes. */
+    dropQueuedTiles(items) {
+        const loader = this.host.viewer()?.imageLoader;
+        if (!items.size || !Array.isArray(loader?.jobQueue))
+            return;
+        loader.jobQueue = loader.jobQueue.filter((job) => {
+            if (!items.has(job?.tile?.tiledImage))
+                return true;
+            quiet(() => job.abort?.());
+            return false;
+        });
     }
     /** Show the given composite slice (opacity 1) and hide all other cached slices. */
     showOnlySlice(z) {
@@ -34028,12 +35853,18 @@ class SliceCache {
         const it = this.sliceItems.get(z);
         return it ? [it] : [];
     }
-    /** Whether slice z's tiles are still streaming (any cached image not fully loaded). */
+    /** Whether slice z's tiles are still streaming (any cached image not fully loaded). A hidden
+     *  channel loads nothing, so it never becomes fully loaded: only the visible channels count, or
+     *  the background loader would wait on it forever. */
     sliceTilesLoading(z) {
         const g = this.sliceGroup(z);
         if (!g.length)
             return false;
-        return g.some((it) => it && typeof it.getFullyLoaded === 'function' && !it.getFullyLoaded());
+        const multi = this.host.isMultiChannel();
+        return g.some((it, c) => it &&
+            (!multi || this.host.channelVisible(c)) &&
+            typeof it.getFullyLoaded === 'function' &&
+            !it.getFullyLoaded());
     }
     /** Remove slice z's cached image(s) from the world and the active cache. */
     removeCachedSlice(z) {
@@ -35526,6 +37357,8 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         this.viewer = null;
         this.overlay = null;
         this.scaleBar = null;
+        /** "Image reloading…" while the view fetches its tiles. */
+        this.tileLoading = null;
         this.descriptor = null;
         /** Base64 RawFileInfo + current z-slice, kept so setZIndex can rebuild the
          *  tile source and swap slices live (stack navigation). */
@@ -35812,6 +37645,7 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
             authHeaders: this.authHeaders,
             sliceCount: d.z ?? 1,
             maxSlices: this.cache.maxSlices(),
+            channelImages: this.isMultiChannel ? (d.channels ?? 1) : 1,
         });
         this.viewer = createViewer(options);
         return openViewer(this.viewer, tileSource, (v) => this.onViewerOpened(v, d, simple, plotDiv));
@@ -35827,6 +37661,8 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         this.overlay = new OsdRegionOverlay(viewer, this.regionStore);
         this.coordTransform = new OsdCoordinateTransform(viewer);
         this.scaleBar = new OsdScaleBar(viewer, d.mppX ?? 0);
+        this.tileLoading?.destroy();
+        this.tileLoading = new OsdTileLoading(viewer);
         if (simple) {
             // A single, self-contained image — no slice cache to seed. Its z-scrub and
             // recomposite re-open the viewer; one persistent handler reports a failed
@@ -35886,6 +37722,8 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
             this.scaleBar.destroy();
             this.scaleBar = null;
         }
+        this.tileLoading?.destroy();
+        this.tileLoading = null;
         if (this.viewer) {
             this.viewer.destroy();
             this.viewer = null;
@@ -37387,164 +39225,6 @@ class NapariDisplayState {
     }
 }
 
-/**
- * "Transcripts reloading…" at the bottom of the canvas while a layer's data is in flight: one
- * line naming every layer still loading, on a semi-opaque backing so it reads over any tissue.
- * Longer work names itself ("Building HPF in 3D…") and joins the line.
- *
- * Shown only once something has been loading for {@link SHOW_AFTER_MS}, so a redraw served from
- * cache does not flash it.
- */
-const SHOW_AFTER_MS = 150;
-class NapariLoadingBadge {
-    constructor(host) {
-        this.names = [];
-        this.tasks = [];
-        this.timer = null;
-        if (getComputedStyle(host).position === 'static')
-            host.style.position = 'relative';
-        this.el = document.createElement('div');
-        this.el.className = 'napari-loading-badge';
-        this.el.setAttribute('role', 'status');
-        this.el.setAttribute('aria-live', 'polite');
-        Object.assign(this.el.style, {
-            position: 'absolute',
-            left: '50%',
-            bottom: '12px',
-            transform: 'translateX(-50%)',
-            padding: '4px 12px',
-            borderRadius: '12px',
-            background: 'rgba(0, 0, 0, 0.6)',
-            color: '#fff',
-            font: '12px/1.4 system-ui, sans-serif',
-            whiteSpace: 'nowrap',
-            pointerEvents: 'none',
-            zIndex: '5',
-            display: 'none',
-        });
-        host.appendChild(this.el);
-    }
-    /** The layers loading now, and the tasks running (their messages); both empty hides the badge. */
-    set(names, tasks = []) {
-        this.names = [...new Set(names)];
-        this.tasks = [...new Set(tasks)];
-        if (!this.names.length && !this.tasks.length) {
-            if (this.timer)
-                clearTimeout(this.timer);
-            this.timer = null;
-            this.el.style.display = 'none';
-            return;
-        }
-        const parts = this.names.length ? [`${listOf(this.names)} reloading…`, ...this.tasks] : this.tasks;
-        this.el.textContent = parts.join(' · ');
-        if (this.el.style.display === 'block' || this.timer)
-            return;
-        this.timer = setTimeout(() => {
-            this.timer = null;
-            if (this.names.length || this.tasks.length)
-                this.el.style.display = 'block';
-        }, SHOW_AFTER_MS);
-    }
-    /** The text currently set (shown or about to be). */
-    get text() {
-        return this.names.length || this.tasks.length ? (this.el.textContent ?? '') : '';
-    }
-    destroy() {
-        if (this.timer)
-            clearTimeout(this.timer);
-        this.el.remove();
-    }
-}
-/** "A", "A and b", "A, b and c": the first as given, the rest with a lower-cased initial. */
-function listOf(names) {
-    const [first, ...rest] = names;
-    const lower = rest.map((n) => n.charAt(0).toLowerCase() + n.slice(1));
-    const all = [first, ...lower];
-    return all.length === 1 ? all[0] : `${all.slice(0, -1).join(', ')} and ${all[all.length - 1]}`;
-}
-
-/**
- * "x reloading…" at the bottom of the canvas, aggregated over everything that loads into one
- * scene: image tiles (the tile client), observation colourings (the spatial scenes) and the
- * spatial tile layers' own loads (which report a list of layer names).
- *
- * Each load is a {@link begin} that hands back its own `end`. {@link reset} starts a new scene:
- * the counts are dropped, and an `end` from a load that began before it is a no-op, so a load
- * that settles after a re-plot can neither un-count the new scene's work nor drive a count below
- * zero (which hid the next scene's "Observations reloading…" until a second load overlapped it).
- *
- * A {@link beginTask} is work that outlives a scene (a region's 3D reconstruction, built for
- * whichever volume is on screen when it is done): its message stays across a reset.
- */
-class LoadingBadgeState {
-    constructor() {
-        this.host = null;
-        this.badge = null;
-        this.counts = new Map();
-        this.tileLayers = [];
-        this.generation = 0;
-        this.tasks = new Map();
-    }
-    /** The element the badge is drawn into (the plot host); set per plot. */
-    attach(host) {
-        this.host = host;
-        if (this.tasks.size)
-            this.show();
-    }
-    /** One load of `source` started; call the returned function once it settles. */
-    begin(source) {
-        const generation = this.generation;
-        this.counts.set(source, (this.counts.get(source) ?? 0) + 1);
-        this.show();
-        let ended = false;
-        return () => {
-            if (ended || generation !== this.generation)
-                return;
-            ended = true;
-            this.counts.set(source, (this.counts.get(source) ?? 0) - 1);
-            this.show();
-        };
-    }
-    /** A task started, shown by its `message` ("Building HPF in 3D…"); call the returned function
-     *  once it settles. */
-    beginTask(message) {
-        const id = Symbol(message);
-        this.tasks.set(id, message);
-        this.show();
-        return () => {
-            if (this.tasks.delete(id))
-                this.show();
-        };
-    }
-    /** The spatial tile layers still loading (their own names, in their order). */
-    setTileLayers(layers) {
-        this.tileLayers = layers;
-        this.show();
-    }
-    /** The text the badge has set (shown, or about to be once the show delay passes). */
-    get text() {
-        return this.badge?.text ?? '';
-    }
-    /** A new scene: forget every count and remove the badge (tasks show again on the next attach). */
-    reset() {
-        this.generation++;
-        this.counts.clear();
-        this.tileLayers = [];
-        this.badge?.destroy();
-        this.badge = null;
-    }
-    show() {
-        if (!this.host)
-            return;
-        this.badge ??= new NapariLoadingBadge(this.host);
-        this.badge.set([
-            ...((this.counts.get('Image') ?? 0) > 0 ? ['Image'] : []),
-            ...((this.counts.get('Observations') ?? 0) > 0 ? ['Observations'] : []),
-            ...this.tileLayers,
-        ], [...this.tasks.values()]);
-    }
-}
-
 const SVG_NS$1 = 'http://www.w3.org/2000/svg';
 /** Rendered handle size (screen px). */
 const HANDLE_SIZE = 7;
@@ -39637,6 +41317,16 @@ class VolumeRegionMeshes {
             this.remove(key, e.layer);
         this.wanted = [];
     }
+    /**
+     * The volume the surfaces sat in is gone (or no longer theirs): take every surface down, keeping
+     * the meshes wanted, so they come back when a frame is set again.
+     */
+    clearFrame() {
+        this.frame = null;
+        for (const [key, e] of [...this.layers])
+            this.remove(key, e.layer);
+        this.viewer.requestRender();
+    }
     sync() {
         const keep = new Map(this.wanted.map((m) => [m.key, m]));
         for (const [key, e] of [...this.layers]) {
@@ -43955,8 +45645,13 @@ function slabAt(dataset, slice) {
  * shape while keeping the selection. The first 3D layer added frames the camera (`fit3d: 'once'`).
  */
 class Spatial3dScene extends SpatialSceneBase {
-    constructor(ctx, session) {
+    /**
+     * @param info the image plotted with the cloud: the reference volume's stack (the 2D view's
+     *        image, see showVolumeAsImage) when the dataset has a volume, which the regions are on
+     */
+    constructor(ctx, session, info) {
         super(ctx, session, true);
+        this.info = info;
         /** The 3D point cloud. One layer: selection is a per-point alpha on it, not a second. */
         this.points = null;
         this.layerKey = null;
@@ -43998,9 +45693,64 @@ class Spatial3dScene extends SpatialSceneBase {
          *  one; a rebuild that leaves the key alone lets it finish. */
         this.densityLoads = new Supersede();
         this.geneMapLoads = new Supersede();
+        /** Whether the reference volume lets every region surface through (see setRegionsThroughVolume). */
+        this.regionsThrough = false;
         /** The store's invert setting, which the density volumes follow (no other subscription of
          *  this scene carries it). */
         this.invertSub = null;
+        this.regionMeshes = new VolumeRegionMeshes(ctx.viewer);
+    }
+    /** Show these region reconstructions with the cloud (replacing the ones shown). */
+    setRegionMeshes(meshes) {
+        this.regionMeshes.set(meshes);
+    }
+    setRegionHighlight(keys) {
+        this.regionMeshes.setHighlight(keys);
+    }
+    setRegionHidden(keys) {
+        this.regionMeshes.setHidden(keys);
+    }
+    /** As the Volume view: the reference volume hides the surfaces behind what it shows, or none. */
+    setRegionsThroughVolume(through) {
+        this.regionsThrough = through;
+        if (this.volume)
+            this.volume.blending = through ? 'translucent_no_depth' : 'translucent';
+        this.ctx.viewer.requestRender();
+    }
+    /**
+     * Place the region surfaces in the reference volume's box, as the Volume view places them in its
+     * own: image pixel (x, y) is voxel (x, y), slice k is voxel plane k, and the box is the volume's
+     * voxels times its voxel size, centred on the origin as napari centres the volume (and the cloud
+     * is offset to sit in it). Only when the plotted image IS that volume's stack: regions drawn on
+     * another image (a tissue image) have no place in it, and are not shown - nor are surfaces
+     * placed in a volume this one replaced.
+     */
+    placeRegionMeshes(dataset) {
+        const meta = dataset.volume;
+        if (!meta || !this.isVolumeStack(meta)) {
+            this.regionMeshes.clearFrame();
+            return;
+        }
+        const [vx, vy, vz] = meta.voxelSize;
+        this.regionMeshes.setFrame({
+            size: [meta.width, meta.height, meta.depth],
+            world: [meta.width * vx, meta.height * vy, meta.depth * vz],
+        });
+    }
+    /**
+     * Image px per voxel of the volume the surfaces sit in: 1, the reference volume being the stack's
+     * own voxels, as the Volume view's is at full resolution, so both reconstruct a class alike (and
+     * share its cached surface). Null while there is no volume stack to place them in.
+     */
+    voxelStep() {
+        const meta = this.session.latest?.[0]?.volume;
+        return this.volume && meta && this.isVolumeStack(meta) ? 1 : null;
+    }
+    /** Whether the plotted image is the reference volume's stack: its size and slice count. */
+    isVolumeStack(meta) {
+        const info = this.info;
+        const [w, h] = info?.trueImageSize ?? [0, 0];
+        return !!info?.isStack && w === meta.width && h === meta.height && (info.urls?.length ?? 0) === meta.depth;
     }
     async mount() {
         // Before the spatial subscription, so the first build already reads the current value.
@@ -44051,6 +45801,7 @@ class Spatial3dScene extends SpatialSceneBase {
         return out;
     }
     dispose() {
+        this.regionMeshes.clear();
         this.disposeSpatial();
         this.invertSub?.unsubscribe();
         this.invertSub = null;
@@ -44586,6 +46337,8 @@ class Spatial3dScene extends SpatialSceneBase {
             this.volume = null;
             this.volumeKey = null;
         }
+        // The surfaces sat in the volume just removed (or there was none): down until one is placed.
+        this.regionMeshes.clearFrame();
         this.origin = [0, 0, 0];
         if (!meta || !port?.getVolume)
             return;
@@ -44612,14 +46365,18 @@ class Spatial3dScene extends SpatialSceneBase {
             opacity: view.volumeOpacity,
             voxelSize: [vx, vy, vz],
         });
+        if (this.regionsThrough)
+            this.volume.blending = 'translucent_no_depth';
         // Half the box, negated: the observations' origin is the box's near corner,
         // and the box is centred on the world origin.
         this.origin = [-(meta.width * vx) / 2, -(meta.height * vy) / 2, -(meta.depth * vz) / 2];
+        this.placeRegionMeshes(dataset);
         // Force a geometry rebuild: the offset changed, so cached positions are stale.
         this.layerKey = null;
     }
     /** Drop every layer of the cloud (the dataset went away, or has no z). */
     removeLayers(viewer) {
+        this.regionMeshes.clearFrame();
         for (const layer of [this.points, this.volume, this.geneMapLayer, ...this.densityLayers]) {
             if (layer)
                 viewer.layers.remove(layer);
@@ -44963,7 +46720,7 @@ class NapariVisualizerService extends BaseStoreVisualizer {
     /** The scene a plot type mounts. */
     createScene(plotType, ctx, info, noImage) {
         if (isSpatialOmics3d(plotType))
-            return new Spatial3dScene(ctx, this.spatial);
+            return new Spatial3dScene(ctx, this.spatial, info);
         if (isSpatialOmics(plotType))
             return new Spatial2dScene(ctx, this.spatial, noImage);
         if (isNapariScatter(plotType))
@@ -45884,8 +47641,14 @@ class RoutingVisualizerService {
         this.napariFellBack = false;
         /** The div the backends render into (every backend shares it); '' before the first plot. */
         this.plotDiv = '';
-        /** Whether a napari volume view is the current plot type. */
+        /**
+         * Whether regions can be shown in 3D on screen: a napari volume (or isosurface) view, or the 3D
+         * spatial cloud over a stack image (its reference volume's, see showVolumeAsImage). Both draw the
+         * region reconstructions the same way (VolumeRegionMeshes), in the volume's box.
+         */
         this.volumeView$ = new BehaviorSubject(false);
+        /** Whether a napari volume (or isosurface) view is the current plot type: the slice pane's. */
+        this.imageVolumeView = false;
         /** Whether the volume view's slice pane is wanted (see {@link setSliceEditor}). */
         this.sliceEditor$ = new BehaviorSubject(false);
         /** Whether the volume view draws the region reconstructions through the volume. */
@@ -45918,6 +47681,8 @@ class RoutingVisualizerService {
         this.sectionSubs = new Subscription();
         /** The image info and screen height of the last plot (what the slice pane mounts). */
         this.plottedInfo = null;
+        /** The current region import (see regionImportTicket): its id and the image it was taken for. */
+        this.importTicket = { id: 0, image: undefined };
         this.plottedHeight = 0;
         this.viewOptions = {
             setNavigatorVisible: (visible) => {
@@ -46109,13 +47874,13 @@ class RoutingVisualizerService {
     }
     plot(plotDiv, imageLoaded, imageInfo, screenHeight, plotType, inPlace) {
         this.currentPlotType = plotType;
-        this.volumeView$.next(isNapariVolume(plotType) || isNapariIsosurface(plotType));
         this.plottedFileName = imageInfo?.fileName;
         this.plottedInfo = imageInfo ?? null;
         this.plottedHeight = screenHeight;
+        this.updateVolumeView(plotType);
         // The slice pane belongs to the volume view: another plot type takes it down (OSD may be
         // about to draw the main view, which must not find the pane's viewer still mounted).
-        if (!this.volumeView$.value)
+        if (!this.imageVolumeView)
             this.unmountSlice();
         // Region surfaces belong to the image they were built from: another image drops them.
         if (this.classes3d$.value.length && this.plottedFileName !== this.classes3dImage)
@@ -46138,7 +47903,7 @@ class RoutingVisualizerService {
         }
         this.lastRendered = next;
         const plotted = next.plot(plotDiv, imageLoaded, imageInfo, screenHeight, plotType, inPlace);
-        if (!this.sliceDiv || !this.volumeView$.value)
+        if (!this.sliceDiv || !this.imageVolumeView)
             return plotted;
         // The split volume view: the slice pane follows the image (a new one, or its sharper pass).
         return plotted.then((ok) => {
@@ -46170,7 +47935,7 @@ class RoutingVisualizerService {
     async mountSlice(inPlace) {
         const div = this.sliceDiv;
         const info = this.plottedInfo;
-        if (!div || !info?.urls?.length || !this.volumeView$.value)
+        if (!div || !info?.urls?.length || !this.imageVolumeView)
             return false;
         const request = ++this.sliceRequest;
         try {
@@ -46292,7 +48057,7 @@ class RoutingVisualizerService {
     }
     setPlotType(plotType) {
         this.currentPlotType = plotType;
-        this.volumeView$.next(isNapariVolume(plotType) || isNapariIsosurface(plotType));
+        this.updateVolumeView(plotType);
         this.plotly.setPlotType(plotType);
     }
     /** @deprecated Use `getSurface3dControls()`. */
@@ -46488,6 +48253,94 @@ class RoutingVisualizerService {
     dropRegionSource() {
         return this.regionStore.dropSliceRegionSource();
     }
+    /**
+     * A ticket for a region import that is about to read or decode its files: the import methods
+     * given it change nothing once it is stale — another import took a ticket since, another image
+     * was plotted, or the service was destroyed — so an import that finishes late never lands on an
+     * image it was not started for.
+     */
+    regionImportTicket() {
+        this.importTicket = { id: this.importTicket.id + 1, image: this.importImageKey() };
+        return this.importTicket.id;
+    }
+    /** Whether `ticket` is still the current import's, on the image it was taken for. */
+    importTicketValid(ticket) {
+        return ticket === this.importTicket.id && this.importTicket.image === this.importImageKey();
+    }
+    importImageKey() {
+        return RegionScopeCache.imageKey(this.plottedInfo ?? undefined);
+    }
+    /**
+     * Replace the image's regions and region sources with one source per slice, as an imported label
+     * volume or folder of per-slice region files gives them: `openers` by slice index, each opened
+     * the first time its slice is shown. A single image takes slice 0's. Returns how many slices
+     * have a source, or null (changing nothing) when `ticket` is stale (see
+     * {@link regionImportTicket}). The sources are marked imported, so a save writes every slice.
+     */
+    importSliceRegionSources(openers, ticket) {
+        if (ticket !== undefined && !this.importTicketValid(ticket))
+            return null;
+        this.regionImportTicket(); // supersedes any import still in flight
+        const info = this.plottedInfo;
+        this.regionStore.detachRegionSources();
+        if (!info?.isStack) {
+            const first = openers.get(0) ?? openers.values().next().value;
+            this.regionStore.setRegions([]);
+            this.regionStore.resetUndoHistory();
+            if (!first)
+                return 0;
+            this.regionStore.attachRegionSource(first, { slice: 0 }, true);
+            return 1;
+        }
+        this.enterImportedStack(info);
+        for (const [z, open] of openers)
+            this.regionStore.attachRegionSource(open, { slice: z }, true);
+        return openers.size;
+    }
+    /**
+     * Replace the image's regions and region sources with one imported source (a region set the
+     * host's server serves): over every slice of a stack when it is z-indexed, else on the slice
+     * shown, as {@link applyImageRois} lays out an image's own. Resolves false, changing nothing
+     * (and disposing the source), when the import went stale while it opened: another import, or
+     * another image (see {@link regionImportTicket}; one is taken here when `ticket` is not given).
+     */
+    async importRegionSourceOpener(open, ticket) {
+        const mine = ticket ?? this.regionImportTicket();
+        if (!this.importTicketValid(mine))
+            return false;
+        let first = await open();
+        if (!this.importTicketValid(mine)) {
+            first.dispose();
+            return false;
+        }
+        const reuse = () => {
+            const source = first;
+            first = null;
+            return source ? Promise.resolve(source) : open();
+        };
+        const info = this.plottedInfo;
+        const planes = first.info.planes;
+        const zIndexed = !!info?.isStack && planes.some((p) => p !== 0);
+        this.regionStore.detachRegionSources();
+        if (zIndexed) {
+            this.enterImportedStack(info);
+            this.regionStore.attachRegionSource(reuse, 'planes', [...planes]);
+            return true;
+        }
+        this.regionStore.setRegions([]);
+        this.regionStore.resetUndoHistory();
+        this.regionStore.attachRegionSource(reuse, { slice: this.regionStore.getDisplaySlice() }, true);
+        return true;
+    }
+    /** Empty every slice of a stack (its regions and undo history) for regions imported over it. */
+    enterImportedStack(info) {
+        const layout = this.regionStore.isStackMode()
+            ? this.regionStore.getStackSaveLayout()
+            : info.tiled === false
+                ? 'per-slice-file'
+                : 'combined';
+        this.regionStore.enterStackMode(new Map(), this.regionStore.getDisplaySlice(), layout);
+    }
     getRegionSourceView$() {
         return this.regionStore.getRegionSourceView$();
     }
@@ -46507,6 +48360,13 @@ class RoutingVisualizerService {
         this.regionStore.setRegionStyle(patch);
     }
     // ── Regions in 3D: their reconstructions shown in the volume view ─────
+    /** Recompute which 3D view is on screen for `plotType` (see {@link volumeView$}). */
+    updateVolumeView(plotType) {
+        this.imageVolumeView = isNapariVolume(plotType) || isNapariIsosurface(plotType);
+        const regions3d = this.imageVolumeView || (isSpatialOmics3d(plotType) && !!this.plottedInfo?.isStack);
+        // Every plot, as before: the Region Editor drops its per-class volumes on each (a new image).
+        this.volumeView$.next(regions3d);
+    }
     /** Whether a napari volume (or isosurface) view is on screen: regions can be shown in 3D. */
     getVolumeView$() {
         return this.volumeView$.asObservable();
@@ -46938,6 +48798,7 @@ class RoutingVisualizerService {
      *  component for a `provideVisualization()` chain. The dataset subscription would
      *  otherwise keep the whole isolated chain reachable from the root data port. */
     ngOnDestroy() {
+        this.importTicket = { id: this.importTicket.id + 1, image: undefined }; // a late import changes nothing
         this.spatialFacade?.dispose();
         this.spatialFacade = null;
         this.regionUpdates.unsubscribe();
@@ -47165,5 +49026,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TOOLBAR_TOOLS as $, ALL_GENES as A, REGION_IO_PORT as B, CANVAS_TOOL_IDS as C, DEFAULT_CATEGORICAL_PALETTE as D, REGION_SOURCE_MIN_CHARS as E, Rectangle as F, Region as G, HexColorPickerComponent as H, IMAGE_STATE_PORT as I, RegionEditorComponent as J, RoutingVisualizerService as K, LUT_COLORS as L, MISSING_COLOR as M, NAPARI_DECIMATE_OPTIONS as N, SEMANTIC_SEGMENTER as O, PLOT_MODE_CONTEXT as P, SPATIAL_DATA_PORT as Q, REGION_EDITOR_API as R, SAM_MODELS as S, SPATIAL_WIRE_VERSION as T, ShapeSelection as U, SpatialChartsComponent as V, SpatialControlsComponent as W, SpatialDataHttpService as X, SpatialSelectionStore as Y, SupersededError as Z, TILE_ACCESS_PORT as _, runDecoder as a, setDefaultSamModel as a$, VISUALIZER as a0, VIZ_ALERT_TOAST_KEY as a1, VIZ_CONFIG as a2, VIZ_TOAST_KEY as a3, ViewerFeature as a4, VisualizationModule as a5, VisualizerComponent as a6, assertManifestVersion as a7, benefitsFromGrouping as a8, buildOmicsTraces as a9, isDialogToolContribution as aA, isEmptyPresetSet as aB, isLittleEndian as aC, isNapari3d as aD, isNapariIsosurface as aE, isNapariScatter as aF, isNapariScatter3d as aG, isNapariSurface as aH, isNapariVolume as aI, isSamModelReady as aJ, isSpatialOmics as aK, isSpatialOmics3d as aL, isThreeDimensional as aM, lutFor as aN, markerDiameters as aO, maskToIndices as aP, mutedFromSelection as aQ, omicsLayout as aR, openGeoJsonRegionSource as aS, openHttpRegionSource as aT, parsePresetSet as aU, pointInRing as aV, provideVisualization as aW, rendererOwnsWheel as aX, resolveCategoryColors as aY, selectByCategory as aZ, selectInRegions as a_, capabilitiesOf as aa, clearSamModelCache as ab, contrastWindow as ac, contributedPlotTypeOption as ad, countMask as ae, cropImage as af, datasetFromManifest as ag, decodeColumn as ah, decodeCoords as ai, decodeFeatureVector as aj, decodePolygons as ak, decodeRadius as al, defaultPresetSet as am, dialogToolContributions as an, emptySelection as ao, encodeCategorical as ap, encodeContinuous as aq, findColumnMeta as ar, getDefaultSamModelId as as, getPlotTypeDescriptor as at, getSamModel as au, hydrateBounds as av, isBuiltinPlotType as aw, isCanvasToolId as ax, isCategoricalColumn as ay, isContinuousColumn as az, ALL_TOOLBAR_TOOLS as b, setOrtWasmBase as b0, setSamModelUrls as b1, sortToolContributions as b2, visibleToolContributions as b3, CELL_SEGMENTER as c, CHANNEL_HISTOGRAM_API as d, CellposeSegmenterService as e, fetchModel as f, getOrtWasmBase as g, ChannelHistogramComponent as h, DEFAULT_FALLBACK_PALETTE as i, DEFAULT_MUTED_OPACITY as j, DEFAULT_SAM_MODEL_ID as k, DEFAULT_SPATIAL_VIEW as l, INSTANCE_SEGMENTER as m, ImageConverterService as n, MultiPolygon as o, NAPARI_DEFAULT_DECIMATE as p, NO_CATEGORY as q, runEncoder as r, NO_OBSERVATION as s, PLOT_MODE_SESSION as t, PLOT_TYPE_CONTRIBUTIONS as u, PLOT_TYPE_DESCRIPTORS as v, PREFERENCES_PORT as w, PlotType as x, Polygon as y, ProcessingImage as z };
-//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-BKQhpbHv.mjs.map
+export { TILE_ACCESS_PORT as $, ALL_GENES as A, ProcessingImage as B, CANVAS_TOOL_IDS as C, DEFAULT_CATEGORICAL_PALETTE as D, REGION_IO_PORT as E, REGION_SOURCE_MIN_CHARS as F, Rectangle as G, HexColorPickerComponent as H, IMAGE_STATE_PORT as I, Region as J, RegionEditorComponent as K, LUT_COLORS as L, MISSING_COLOR as M, NAPARI_DECIMATE_OPTIONS as N, RoutingVisualizerService as O, PLOT_MODE_CONTEXT as P, SEMANTIC_SEGMENTER as Q, REGION_EDITOR_API as R, SAM_MODELS as S, SPATIAL_DATA_PORT as T, SPATIAL_WIRE_VERSION as U, ShapeSelection as V, SpatialChartsComponent as W, SpatialControlsComponent as X, SpatialDataHttpService as Y, SpatialSelectionStore as Z, SupersededError as _, runDecoder as a, openGeoJsonRegionSource as a$, TOOLBAR_TOOLS as a0, VISUALIZER as a1, VIZ_ALERT_TOAST_KEY as a2, VIZ_CONFIG as a3, VIZ_TOAST_KEY as a4, ViewerFeature as a5, VisualizationModule as a6, VisualizerComponent as a7, assertManifestVersion as a8, benefitsFromGrouping as a9, isBuiltinPlotType as aA, isCanvasToolId as aB, isCategoricalColumn as aC, isContinuousColumn as aD, isDialogToolContribution as aE, isEmptyPresetSet as aF, isLabelVolumeName as aG, isLittleEndian as aH, isNapari3d as aI, isNapariIsosurface as aJ, isNapariScatter as aK, isNapariScatter3d as aL, isNapariSurface as aM, isNapariVolume as aN, isSamModelReady as aO, isSpatialOmics as aP, isSpatialOmics3d as aQ, isThreeDimensional as aR, isZipName as aS, labelClasses as aT, labelSliceGeoJson as aU, lutFor as aV, markerDiameters as aW, maskToIndices as aX, mutedFromSelection as aY, omicsLayout as aZ, openAnnotations as a_, buildOmicsTraces as aa, capabilitiesOf as ab, clearSamModelCache as ac, contrastWindow as ad, contributedPlotTypeOption as ae, countMask as af, cropImage as ag, datasetFromManifest as ah, decodeColumn as ai, decodeCoords as aj, decodeFeatureVector as ak, decodePolygons as al, decodeRadius as am, defaultPresetSet as an, dialogToolContributions as ao, emptySelection as ap, encodeCategorical as aq, encodeContinuous as ar, expandZips as as, findColumnMeta as at, getDefaultSamModelId as au, getPlotTypeDescriptor as av, getSamModel as aw, hasZarrMetadata as ax, hydrateBounds as ay, importFile as az, ALL_TOOLBAR_TOOLS as b, openHttpRegionSource as b0, parsePresetSet as b1, planRegionImport as b2, pointInRing as b3, provideVisualization as b4, readAnnotationSlices as b5, readLabelVolume as b6, readOmeZarrLabels as b7, readZip as b8, rendererOwnsWheel as b9, resolveCategoryColors as ba, selectByCategory as bb, selectInRegions as bc, setDefaultSamModel as bd, setOrtWasmBase as be, setSamModelUrls as bf, sortToolContributions as bg, visibleToolContributions as bh, ANNOTATION_IMAGE_MAX_DIM as c, CELL_SEGMENTER as d, CHANNEL_HISTOGRAM_API as e, fetchModel as f, getOrtWasmBase as g, CellposeSegmenterService as h, ChannelHistogramComponent as i, DEFAULT_FALLBACK_PALETTE as j, DEFAULT_MUTED_OPACITY as k, DEFAULT_SAM_MODEL_ID as l, DEFAULT_SPATIAL_VIEW as m, INSTANCE_SEGMENTER as n, ImageConverterService as o, MultiPolygon as p, NAPARI_DEFAULT_DECIMATE as q, runEncoder as r, NO_CATEGORY as s, NO_OBSERVATION as t, PLOT_MODE_SESSION as u, PLOT_TYPE_CONTRIBUTIONS as v, PLOT_TYPE_DESCRIPTORS as w, PREFERENCES_PORT as x, PlotType as y, Polygon as z };
+//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-a68Hw5rw.mjs.map