@jax-data-science/sci-image-visualizer 0.2.12 → 0.2.14

package/fesm2022/jax-data-science-sci-image-visualizer.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, inject, Optional, Inject, EventEmitter, Output, Input, Component, HostListener, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { BehaviorSubject, firstValueFrom, Subject, Subscription, combineLatest, EMPTY, of, from } from 'rxjs';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -20,11 +21,11 @@ import * as i10 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i11 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i13$1 from 'primeng/contextmenu';
+import * as i15$1 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
 import * as i9$1 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
-import * as i15$1 from 'primeng/toast';
+import * as i17$1 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i7 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
@@ -46,7 +47,6 @@ import * as i17 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i18 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import { BehaviorSubject, Subject, Subscription, combineLatest, EMPTY, firstValueFrom, of, from } from 'rxjs';
 import { debounceTime, switchMap, takeUntil, timeout, map } from 'rxjs/operators';
 import * as i1$2 from 'primeng/api';
 import { saveAs } from 'file-saver';
@@ -672,6 +672,403 @@ const INSTANCE_SEGMENTER = new InjectionToken('INSTANCE_SEGMENTER', {
     factory: () => inject(YoloSegmenterService),
 });
 
+class ShapeSelection {
+    constructor() {
+        this.editable = true;
+    }
+    /**
+     * Returns a Region object based on the shape type.
+     */
+    getRegion() {
+        const region = new Region();
+        region.id = this.id;
+        region.name = this.name;
+        // The region's colour lives on line.color (see Region.getShape); fillcolor
+        // is only set for the active-shape highlight. Restore the class label from
+        // legend too. Without these, getRegions() — which the OSD region overlay
+        // renders from — returned undefined colour AND label, so OSD drew every
+        // region in the default colour with no label (unlike Plotly, which renders
+        // its shape array directly).
+        region.color = this.line?.color ?? this.fillcolor;
+        region.label = this.legend;
+        if (this.kind === 'profile')
+            region.kind = 'profile';
+        if (this.type === 'rect') {
+            region.bounds = new Rectangle();
+            region.bounds.x = this.x0;
+            region.bounds.y = this.y0;
+            region.bounds.width = this.x1 - this.x0;
+            region.bounds.height = this.y1 - this.y0;
+        }
+        else if (this.type === 'path') {
+            region.bounds = new Polygon();
+            const isClosed = this.path.endsWith('Z');
+            const spath = isClosed ? this.path.slice(1, -1) : this.path.slice(1); // remove M and optionally Z
+            const spoints = spath.split('L');
+            region.bounds.npoints = spoints.length;
+            region.bounds.xpoints = [];
+            region.bounds.ypoints = [];
+            region.bounds.coordinates = [];
+            region.bounds.closed = isClosed;
+            for (const point of spoints) {
+                const coords = point.split(',');
+                region.bounds.xpoints.push(parseFloat(coords[0]));
+                region.bounds.ypoints.push(parseFloat(coords[1]));
+                region.bounds.coordinates.push([parseFloat(coords[0]), parseFloat(coords[1])]);
+            }
+        }
+        else {
+            throw new Error(`Unsupported shape type: ${this.type}`);
+        }
+        return region;
+    }
+}
+
+class Region {
+    constructor() {
+        this.bounds = null;
+        /** Zero-based z-slice this region belongs to within a stack — mirrors
+         *  QuPath's `geometry.plane.z` (a missing plane / default plane reads back as
+         *  0). Used to place/filter ROIs per slice; 0 for a plain single-plane image
+         *  or a region drawn without a slice context (jit-ui#93). */
+        this.z = 0;
+        this.shapeColor = '#00FFFF';
+        this.bytesPerPixel = 8;
+        /**
+         * resolution is the resolution at which the region
+         * was found. In order to get it in the full image
+         * coordinates it will normally be 0. However if
+         * there is a mistake with the resolution it may not
+         * be. We return the resolution here in order to be
+         * sure what it is. The server may need to be changed
+         * to ensure that results regions are always returned
+         * at resolution = 0
+         */
+        this.resolution = 0;
+        this.cropped = false;
+        this.tileNumber = 0;
+        this.tileCoordinates = null;
+    }
+    /** True for intensity-profile line ROIs (the intensity tool's lines). These are
+     *  NOT annotation regions: they never appear in the Region Editor and editor
+     *  operations (select/save/delete) must never touch them. */
+    isProfile() {
+        return this.kind === 'profile';
+    }
+    toString() {
+        // if shape is rectangle
+        if (this.bounds instanceof Rectangle) {
+            return `x: ${this.bounds.x}, y: ${this.bounds.y},
+              width: ${this.bounds.width}, height: ${this.bounds.height}`;
+        }
+        else if (this.bounds instanceof Polygon) {
+            let path = 'M';
+            // display as path
+            for (let i = 0; i < this.bounds.npoints; i++) {
+                if (i < this.bounds.npoints - 1) {
+                    path = `${path}${this.bounds.xpoints[i]},${this.bounds.ypoints[i]}L`;
+                }
+                else {
+                    path = `${path}${this.bounds.xpoints[i]},${this.bounds.ypoints[i]}`;
+                }
+            }
+            if (this.bounds.closed !== false) {
+                path += 'Z';
+            }
+            return path;
+        }
+        return '';
+    }
+    /**
+     * Returns a ShapeSelection object that can be used to
+     * create a shape in Plotly.
+     * @param showRegionLabel
+     * @return ShapeSelection
+     */
+    getShape(showRegionLabel = true) {
+        const shape = new ShapeSelection();
+        shape.id = this.id;
+        shape.name = this.name;
+        shape.editable = true;
+        shape.line = {
+            color: this.color ? this.color : this.shapeColor,
+            width: 3
+        };
+        shape.fileName = this.filename;
+        if (this.kind === 'profile')
+            shape.kind = 'profile';
+        if (showRegionLabel) {
+            shape.label = {
+                text: `${this.label}`,
+                texttemplate: `${this.label}`,
+                font: { color: this.color ? this.color : this.shapeColor },
+                textposition: 'top left'
+            };
+        }
+        else {
+            shape.label = {};
+        }
+        shape.legend = this.label;
+        const bnds = this.bounds;
+        if (bnds != undefined) {
+            if (this.isRectangle(bnds)) {
+                shape.type = 'rect';
+                shape.x0 = bnds.x;
+                shape.y0 = bnds.y;
+                shape.x1 = bnds.x + bnds.width;
+                shape.y1 = bnds.y + bnds.height;
+            }
+            if (this.isPolygon(bnds)) {
+                shape.type = 'path';
+                let path = 'M';
+                for (let i = 0; i < bnds.npoints; i++) {
+                    if (i < bnds.npoints - 1) {
+                        path = `${path}${bnds.xpoints[i]},${bnds.ypoints[i]}L`;
+                    }
+                    else {
+                        path = `${path}${bnds.xpoints[i]},${bnds.ypoints[i]}`;
+                    }
+                }
+                if (bnds.closed !== false) {
+                    path += 'Z';
+                }
+                shape.path = path;
+            }
+        }
+        return shape;
+    }
+    isRectangle(bnds) {
+        return 'x' in bnds && 'y' in bnds && 'width' in bnds && 'height' in bnds;
+    }
+    isPolygon(bnds) {
+        return 'npoints' in bnds && 'xpoints' in bnds && 'ypoints' in bnds;
+    }
+}
+class Rectangle {
+    constructor() {
+        this.x = 0;
+        this.y = 0;
+        this.width = 0;
+        this.height = 0;
+    }
+}
+class Polygon {
+    constructor() {
+        this.npoints = 0;
+        this.xpoints = [];
+        this.ypoints = [];
+        this.coordinates = [];
+        /** false for open polylines; true (default) for closed polygons */
+        this.closed = true;
+        /**
+         * When true the vertices are treated as bezier-spline **anchors** and the
+         * region is rendered/exported as a smooth curve through them. The vertices
+         * stay the editable anchors — toggling this flag is the toBezier
+         * (`true`) / toPolygon (`false`), which only add/remove the curve, never move
+         * the anchors. GeoJSON keeps the flattened curve as the geometry (so QuPath
+         * renders it) plus the anchors + handles + flag in properties (so JIT
+         * round-trips the editable bezier).
+         */
+        this.bezier = false;
+    }
+}
+/**
+ * A region whose geometry is several disjoint parts — e.g. the result of merging
+ * two non-touching regions, or the inverse of a blob (jit-ui#85). Each part is a
+ * closed {@link Polygon} that may carry its own holes, so a MultiPolygon
+ * represents "sparse bits, some with donut holes" as a single region. Maps 1:1
+ * onto a GeoJSON `MultiPolygon` (and QuPath's geometry).
+ *
+ * A single-part MultiPolygon is equivalent to that Polygon; callers should
+ * prefer a plain {@link Polygon} for one connected part.
+ */
+class MultiPolygon {
+    constructor() {
+        /** One or more disjoint closed polygons (each may have holes). */
+        this.polygons = [];
+    }
+}
+
+/**
+ * YOLO object detection over the current view.
+ *
+ * The complement to {@link CellSegmentToolService}: cellpose auto-segments cells
+ * inside a box you draw, whereas a detector is meant to find objects across a
+ * field. So this takes no prompt — it runs on whatever is on screen and turns
+ * every detection into a region.
+ *
+ * Detections come back in the displayed image's pixels; they are mapped onto
+ * the full-resolution image through the viewer's own source rect, so the regions
+ * land where the objects actually are rather than at view-local coordinates.
+ *
+ * Exposes the same `status$` / `busy$` / `progress$` surface as the cellpose
+ * tool so the host's shared segmentation toast drives it unchanged.
+ */
+class YoloDetectToolService {
+    constructor(
+    /** Server-side crop, so detection can run at the model's scale rather than
+     *  the viewer's. Optional: without it the tool falls back to the displayed
+     *  pixels, which is correct but scale-dependent. */
+    tileAccess = null) {
+        this.tileAccess = tileAccess;
+        this.status$ = new BehaviorSubject('');
+        this.busy$ = new BehaviorSubject(false);
+        this.progress$ = new BehaviorSubject(-1);
+    }
+    /**
+     * Detect in the current view and append the results as regions.
+     *
+     * @returns the number of regions added.
+     */
+    async detectInView(viz, segmenter, opts = {}) {
+        const pixels = viz.getDisplayedPixelData?.();
+        if (!pixels || pixels.width === 0 || pixels.height === 0) {
+            this.status$.next('No image on screen to detect in.');
+            return 0;
+        }
+        this.busy$.next(true);
+        this.progress$.next(-1);
+        try {
+            const rect = viz.getDisplayedSourceRect?.() ?? null;
+            const target = Number(opts.downsamplingFactor ?? 0) || 0;
+            const viewFactor = rect && pixels.width > 0 ? rect.width / pixels.width : 1;
+            // Re-crop at the model's scale when the view is coarser than it wants.
+            // The image is tile-backed, so that detail exists server-side even though
+            // the displayed pixels have discarded it.
+            let source = { data: pixels.data, width: pixels.width, height: pixels.height };
+            if (rect && target > 0 && target < viewFactor * 0.98) {
+                this.status$.next('Fetching image at model resolution…');
+                const hi = await this.fetchCropAtScale(rect, target);
+                if (hi)
+                    source = hi;
+            }
+            const result = await segmenter.segmentInstances(source, opts, {
+                onProgress: (f) => this.progress$.next(f),
+                onStatus: (s) => this.status$.next(s),
+            });
+            // View pixels -> full-resolution image pixels. Without this every region
+            // would sit at view-local coordinates, i.e. the wrong place on the slide
+            // for any zoomed or panned view.
+            const offsetX = rect ? rect.x : 0;
+            const offsetY = rect ? rect.y : 0;
+            // Against the pixels actually inferred on, which may be the re-crop.
+            const ratioX = rect && source.width > 0 ? rect.width / source.width : 1;
+            const ratioY = rect && source.height > 0 ? rect.height / source.height : 1;
+            const added = [];
+            for (const det of result.detections) {
+                if (det.polygons.length > 0) {
+                    for (const poly of det.polygons) {
+                        if (poly.exterior.length < 3)
+                            continue;
+                        added.push(this.makeRegion(poly.exterior.map(([x]) => Math.round(offsetX + x * ratioX)), poly.exterior.map(([, y]) => Math.round(offsetY + y * ratioY)), det.className));
+                    }
+                    continue;
+                }
+                // Detection mode yields no outline; the box is still the result, and
+                // matches what the server writes as a "detection" feature.
+                const [x1, y1, x2, y2] = det.box;
+                if (x2 - x1 <= 0 || y2 - y1 <= 0)
+                    continue;
+                added.push(this.makeRegion([x1, x2, x2, x1].map((x) => Math.round(offsetX + x * ratioX)), [y1, y1, y2, y2].map((y) => Math.round(offsetY + y * ratioY)), det.className));
+            }
+            if (added.length === 0) {
+                this.status$.next('No objects detected.');
+                return 0;
+            }
+            // Append. A detection run must not discard annotations drawn by hand or
+            // produced by another tool.
+            viz.setRegions([...(viz.getRegions() ?? []), ...added]);
+            this.status$.next(`Added ${added.length} region(s).`);
+            return added.length;
+        }
+        catch (err) {
+            this.status$.next(err instanceof Error ? err.message : 'YOLO detection failed.');
+            return 0;
+        }
+        finally {
+            this.busy$.next(false);
+            this.progress$.next(-1);
+        }
+    }
+    /**
+     * Re-crop `rect` at `1/target` of full resolution. Returns null on any
+     * failure, so the caller falls back to the displayed pixels — a coarser crop
+     * beats a failed run.
+     */
+    async fetchCropAtScale(rect, target) {
+        if (!this.tileAccess)
+            return null;
+        let w = Math.round(rect.width / target);
+        let h = Math.round(rect.height / target);
+        // A factor of 1 over a whole-slide ROI would ask for hundreds of megapixels.
+        const MAX_PIXELS = 16_777_216; // 4096²
+        const pixels = w * h;
+        if (pixels > MAX_PIXELS) {
+            const k = Math.sqrt(MAX_PIXELS / pixels);
+            w = Math.round(w * k);
+            h = Math.round(h * k);
+        }
+        if (w < 64 || h < 64)
+            return null;
+        try {
+            const roi = {
+                x: Math.round(rect.x),
+                y: Math.round(rect.y),
+                width: Math.round(rect.width),
+                height: Math.round(rect.height),
+            };
+            const screen = { x: 0, y: 0, width: w, height: h };
+            const bytes = await firstValueFrom(this.tileAccess.zoomOnRegion(roi, screen, 0));
+            if (!bytes || bytes.byteLength === 0)
+                return null;
+            const bitmap = await createImageBitmap(new Blob([bytes]));
+            const canvas = document.createElement('canvas');
+            canvas.width = bitmap.width;
+            canvas.height = bitmap.height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return null;
+            ctx.drawImage(bitmap, 0, 0);
+            // Read the dimensions BEFORE close(): closing an ImageBitmap zeroes its
+            // width/height, so returning them afterwards yields a 0x0 image with a
+            // full pixel buffer — inference then runs on nothing and finds nothing.
+            const width = bitmap.width;
+            const height = bitmap.height;
+            const out = ctx.getImageData(0, 0, width, height);
+            bitmap.close?.();
+            return { data: out.data, width, height };
+        }
+        catch {
+            return null;
+        }
+    }
+    makeRegion(xs, ys, className) {
+        const poly = new Polygon();
+        poly.npoints = xs.length;
+        poly.xpoints = xs;
+        poly.ypoints = ys;
+        poly.coordinates = xs.map((x, i) => [x, ys[i]]);
+        poly.closed = true;
+        const region = new Region();
+        region.bounds = poly;
+        // The class name drives preset colour resolution; leaving `color` unset lets
+        // an existing preset for this class win.
+        region.label = className;
+        return region;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: YoloDetectToolService, deps: [{ token: TILE_ACCESS_PORT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: YoloDetectToolService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: YoloDetectToolService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TILE_ACCESS_PORT]
+                }] }] });
+
 /**
  * Unified image container used throughout the processing pipeline.
  * Decouples pipeline logic from any specific library's image format.
@@ -978,223 +1375,6 @@ function setSamModelUrls(id, encoderUrl, decoderUrl) {
     }
 }
 
-class ShapeSelection {
-    constructor() {
-        this.editable = true;
-    }
-    /**
-     * Returns a Region object based on the shape type.
-     */
-    getRegion() {
-        const region = new Region();
-        region.id = this.id;
-        region.name = this.name;
-        // The region's colour lives on line.color (see Region.getShape); fillcolor
-        // is only set for the active-shape highlight. Restore the class label from
-        // legend too. Without these, getRegions() — which the OSD region overlay
-        // renders from — returned undefined colour AND label, so OSD drew every
-        // region in the default colour with no label (unlike Plotly, which renders
-        // its shape array directly).
-        region.color = this.line?.color ?? this.fillcolor;
-        region.label = this.legend;
-        if (this.kind === 'profile')
-            region.kind = 'profile';
-        if (this.type === 'rect') {
-            region.bounds = new Rectangle();
-            region.bounds.x = this.x0;
-            region.bounds.y = this.y0;
-            region.bounds.width = this.x1 - this.x0;
-            region.bounds.height = this.y1 - this.y0;
-        }
-        else if (this.type === 'path') {
-            region.bounds = new Polygon();
-            const isClosed = this.path.endsWith('Z');
-            const spath = isClosed ? this.path.slice(1, -1) : this.path.slice(1); // remove M and optionally Z
-            const spoints = spath.split('L');
-            region.bounds.npoints = spoints.length;
-            region.bounds.xpoints = [];
-            region.bounds.ypoints = [];
-            region.bounds.coordinates = [];
-            region.bounds.closed = isClosed;
-            for (const point of spoints) {
-                const coords = point.split(',');
-                region.bounds.xpoints.push(parseFloat(coords[0]));
-                region.bounds.ypoints.push(parseFloat(coords[1]));
-                region.bounds.coordinates.push([parseFloat(coords[0]), parseFloat(coords[1])]);
-            }
-        }
-        else {
-            throw new Error(`Unsupported shape type: ${this.type}`);
-        }
-        return region;
-    }
-}
-
-class Region {
-    constructor() {
-        this.bounds = null;
-        /** Zero-based z-slice this region belongs to within a stack — mirrors
-         *  QuPath's `geometry.plane.z` (a missing plane / default plane reads back as
-         *  0). Used to place/filter ROIs per slice; 0 for a plain single-plane image
-         *  or a region drawn without a slice context (jit-ui#93). */
-        this.z = 0;
-        this.shapeColor = '#00FFFF';
-        this.bytesPerPixel = 8;
-        /**
-         * resolution is the resolution at which the region
-         * was found. In order to get it in the full image
-         * coordinates it will normally be 0. However if
-         * there is a mistake with the resolution it may not
-         * be. We return the resolution here in order to be
-         * sure what it is. The server may need to be changed
-         * to ensure that results regions are always returned
-         * at resolution = 0
-         */
-        this.resolution = 0;
-        this.cropped = false;
-        this.tileNumber = 0;
-        this.tileCoordinates = null;
-    }
-    /** True for intensity-profile line ROIs (the intensity tool's lines). These are
-     *  NOT annotation regions: they never appear in the Region Editor and editor
-     *  operations (select/save/delete) must never touch them. */
-    isProfile() {
-        return this.kind === 'profile';
-    }
-    toString() {
-        // if shape is rectangle
-        if (this.bounds instanceof Rectangle) {
-            return `x: ${this.bounds.x}, y: ${this.bounds.y},
-              width: ${this.bounds.width}, height: ${this.bounds.height}`;
-        }
-        else if (this.bounds instanceof Polygon) {
-            let path = 'M';
-            // display as path
-            for (let i = 0; i < this.bounds.npoints; i++) {
-                if (i < this.bounds.npoints - 1) {
-                    path = `${path}${this.bounds.xpoints[i]},${this.bounds.ypoints[i]}L`;
-                }
-                else {
-                    path = `${path}${this.bounds.xpoints[i]},${this.bounds.ypoints[i]}`;
-                }
-            }
-            if (this.bounds.closed !== false) {
-                path += 'Z';
-            }
-            return path;
-        }
-        return '';
-    }
-    /**
-     * Returns a ShapeSelection object that can be used to
-     * create a shape in Plotly.
-     * @param showRegionLabel
-     * @return ShapeSelection
-     */
-    getShape(showRegionLabel = true) {
-        const shape = new ShapeSelection();
-        shape.id = this.id;
-        shape.name = this.name;
-        shape.editable = true;
-        shape.line = {
-            color: this.color ? this.color : this.shapeColor,
-            width: 3
-        };
-        shape.fileName = this.filename;
-        if (this.kind === 'profile')
-            shape.kind = 'profile';
-        if (showRegionLabel) {
-            shape.label = {
-                text: `${this.label}`,
-                texttemplate: `${this.label}`,
-                font: { color: this.color ? this.color : this.shapeColor },
-                textposition: 'top left'
-            };
-        }
-        else {
-            shape.label = {};
-        }
-        shape.legend = this.label;
-        const bnds = this.bounds;
-        if (bnds != undefined) {
-            if (this.isRectangle(bnds)) {
-                shape.type = 'rect';
-                shape.x0 = bnds.x;
-                shape.y0 = bnds.y;
-                shape.x1 = bnds.x + bnds.width;
-                shape.y1 = bnds.y + bnds.height;
-            }
-            if (this.isPolygon(bnds)) {
-                shape.type = 'path';
-                let path = 'M';
-                for (let i = 0; i < bnds.npoints; i++) {
-                    if (i < bnds.npoints - 1) {
-                        path = `${path}${bnds.xpoints[i]},${bnds.ypoints[i]}L`;
-                    }
-                    else {
-                        path = `${path}${bnds.xpoints[i]},${bnds.ypoints[i]}`;
-                    }
-                }
-                if (bnds.closed !== false) {
-                    path += 'Z';
-                }
-                shape.path = path;
-            }
-        }
-        return shape;
-    }
-    isRectangle(bnds) {
-        return 'x' in bnds && 'y' in bnds && 'width' in bnds && 'height' in bnds;
-    }
-    isPolygon(bnds) {
-        return 'npoints' in bnds && 'xpoints' in bnds && 'ypoints' in bnds;
-    }
-}
-class Rectangle {
-    constructor() {
-        this.x = 0;
-        this.y = 0;
-        this.width = 0;
-        this.height = 0;
-    }
-}
-class Polygon {
-    constructor() {
-        this.npoints = 0;
-        this.xpoints = [];
-        this.ypoints = [];
-        this.coordinates = [];
-        /** false for open polylines; true (default) for closed polygons */
-        this.closed = true;
-        /**
-         * When true the vertices are treated as bezier-spline **anchors** and the
-         * region is rendered/exported as a smooth curve through them. The vertices
-         * stay the editable anchors — toggling this flag is the toBezier
-         * (`true`) / toPolygon (`false`), which only add/remove the curve, never move
-         * the anchors. GeoJSON keeps the flattened curve as the geometry (so QuPath
-         * renders it) plus the anchors + handles + flag in properties (so JIT
-         * round-trips the editable bezier).
-         */
-        this.bezier = false;
-    }
-}
-/**
- * A region whose geometry is several disjoint parts — e.g. the result of merging
- * two non-touching regions, or the inverse of a blob (jit-ui#85). Each part is a
- * closed {@link Polygon} that may carry its own holes, so a MultiPolygon
- * represents "sparse bits, some with donut holes" as a single region. Maps 1:1
- * onto a GeoJSON `MultiPolygon` (and QuPath's geometry).
- *
- * A single-part MultiPolygon is equivalent to that Polygon; callers should
- * prefer a plain {@link Polygon} for one connected part.
- */
-class MultiPolygon {
-    constructor() {
-        /** One or more disjoint closed polygons (each may have holes). */
-        this.polygons = [];
-    }
-}
-
 /**
  * Preset annotation classes (jit-ui#70).
  *
@@ -4187,7 +4367,7 @@ class SamToolService {
         }
         // Lazy-import so onnxruntime-web is never pulled into unit tests / the
         // initial bundle — only when segmentation actually runs.
-        const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-ci1q0xnJ.mjs');
+        const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-iPNL2JyC.mjs');
         const session = new OnnxSamSession();
         this.progress$.next(0);
         await session.loadModel(this.model, (f) => this.progress$.next(f));
@@ -4428,7 +4608,7 @@ class SamPointToolService {
         }
         this.sessionLoad = (async () => {
             try {
-                const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-ci1q0xnJ.mjs');
+                const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-iPNL2JyC.mjs');
                 const session = new OnnxSamSession();
                 this.progress$.next(0);
                 await session.loadModel(this.model, (f) => this.progress$.next(f));
@@ -4666,6 +4846,9 @@ class ToolbarComponent {
         /** SAM model picker options + current selection (jit-ui#90 P1). */
         this.samModels = [];
         this.samModelId = '';
+        /** YOLO checkpoints offered by the host's registry, and the active one. */
+        this.yoloModels = [];
+        this.yoloModelId = '';
         this.selectPlotType = new EventEmitter();
         /** Intensity (LINE) mode: add another colored line ROI + inset trace. */
         this.addProfileLine = new EventEmitter();
@@ -4704,6 +4887,12 @@ class ToolbarComponent {
         this.segmentRegions = new EventEmitter();
         /** Run cellpose-SAM (auto) inside each drawn rectangle's crop (jit-ui#90). */
         this.segmentCellpose = new EventEmitter();
+        /** Run YOLO detection over the current view. */
+        this.detectYolo = new EventEmitter();
+        /** Pick the YOLO checkpoint. */
+        this.yoloModelChange = new EventEmitter();
+        /** Open the YOLO parameter dialog. */
+        this.openYoloParams = new EventEmitter();
         /** SAM model picker (jit-ui#90 P1). */
         this.samModelChange = new EventEmitter();
         this.wandSensitivityChange = new EventEmitter();
@@ -4732,6 +4921,8 @@ class ToolbarComponent {
          *  every change-detection tick, which makes the bound `p-menu` overlay rebuild
          *  its DOM mid-interaction and swallow the click on a menu item. */
         this.samMenuItems = [];
+        /** Same stable-array reasoning as {@link samMenuItems}. */
+        this.yoloMenuItems = [];
     }
     /** Rebuild the SAM model menu when the model list or active selection
      *  changes (keeps the array reference stable across other CD ticks). */
@@ -4743,6 +4934,13 @@ class ToolbarComponent {
                 command: () => this.samModelChange.emit(m.id),
             }));
         }
+        if (changes['yoloModels'] || changes['yoloModelId']) {
+            this.yoloMenuItems = this.yoloModels.map((m) => ({
+                label: m.label,
+                icon: m.id === this.yoloModelId ? 'pi pi-check' : 'pi pi-fw',
+                command: () => this.yoloModelChange.emit(m.id),
+            }));
+        }
     }
     /** The Image plot type renders as a natively pan/zoom-able raster, so the
      *  generic zoom/pan tools are hidden. */
@@ -4797,11 +4995,11 @@ class ToolbarComponent {
         this.displayHelpDialog = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale", wandSensitivity: "wandSensitivity", brushSize: "brushSize", vertexEraserRadius: "vertexEraserRadius", canUndo: "canUndo", canRedo: "canRedo", stackOptions: "stackOptions", tools: "tools", imageSmoothingEnabled: "imageSmoothingEnabled", samModels: "samModels", samModelId: "samModelId" }, outputs: { selectPlotType: "selectPlotType", addProfileLine: "addProfileLine", toggleImageSmoothing: "toggleImageSmoothing", isoRangeChange: "isoRangeChange", openChannelHistogram: "openChannelHistogram", openRegionEditor: "openRegionEditor", selectStackOption: "selectStackOption", zScrub: "zScrub", zSlide: "zSlide", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot", downloadImage: "downloadImage", autoscaleImage: "autoscaleImage", toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution", deleteRegion: "deleteRegion", undoRegion: "undoRegion", redoRegion: "redoRegion", segmentRegions: "segmentRegions", segmentCellpose: "segmentCellpose", samModelChange: "samModelChange", wandSensitivityChange: "wandSensitivityChange", brushSizeChange: "brushSizeChange", vertexEraserRadiusChange: "vertexEraserRadiusChange" }, usesOnChanges: true, ngImport: i0, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Plot type: available for any image (grayscale or RGB). -->\n    <ng-container *ngIf=\"imageInfo && tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-dropdown [options]=\"plotTypeOptions\" optionLabel=\"label\" optionValue=\"type\"\n                  [(ngModel)]=\"selectedPlotType\" appendTo=\"body\"\n                  pTooltip=\"Select plot type\" tooltipPosition=\"bottom\"\n                  [style]=\"{'min-width': '11rem'}\"\n                  styleClass=\"plotmode-dropdown\" panelStyleClass=\"plotmode-panel\"\n                  (onChange)=\"selectPlotType.emit($event.value)\">\n        <ng-template let-opt pTemplate=\"selectedItem\">\n          <span class=\"plotmode-item\" *ngIf=\"opt\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n        <ng-template let-opt pTemplate=\"item\">\n          <span class=\"plotmode-item\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n      </p-dropdown>\n      <ng-container *ngIf=\"isIsosurfaceMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Iso</span>\n        <p-slider [(ngModel)]=\"isoRange\" [range]=\"true\"\n                  [min]=\"isoValueMin\" [max]=\"isoValueMax\" [step]=\"isoValueStep\"\n                  (onChange)=\"isoRangeChange.emit($event.values)\"\n                  pTooltip=\"Isosurface band (0\u2013255), mapped onto the volume's\n                  actual intensity range. Surfaces are drawn for voxels whose\n                  intensity falls in the selected band \u2014 narrow it to isolate\n                  features, widen it to see the whole structure.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ isoRange[0] }}\u2013{{ isoRange[1] }}</span>\n      </ng-container>\n      <!-- Intensity tools (Heatmap / Image mode): add another colored line ROI.\n           Each added line gets the next bright palette colour and its own inset\n           trace; select a line on the image and use the trash tool to remove it\n           (and its trace). The lines are Region-based but excluded from the\n           Region Editor and exports. -->\n      <ng-container *ngIf=\"isIntensityCapable\">\n        <span class=\"toolbar-separator\"></span>\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Add an intensity line (new colour). Click a line to select it,\n                  then use the trash tool to remove it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"addProfileLine.emit()\">\n          <img src=\"assets/plotting/spline-chart.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n    </ng-container>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button *ngIf=\"tools.specialTools\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openChannelHistogram.emit()\">\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button *ngIf=\"tools.specialTools && isImageView\" size=\"small\"\n              [text]=\"!imageSmoothingEnabled\"\n              pTooltip=\"Smoothen (turn on image smoothing)\" tooltipPosition=\"bottom\"\n              (onClick)=\"toggleImageSmoothing.emit()\">\n      <img src=\"assets/plotting/smooth.svg\" style=\"width: 1rem\"\n           [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"/>\n    </p-button>\n\n    <!-- Stack controls -->\n    <ng-container *ngIf=\"imageInfo?.isStack\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Image view: scrub z-slices live (the renderer swaps slices in place). -->\n      <ng-container *ngIf=\"showsLiveSliceScrubber\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <p-slider [(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n                  (onChange)=\"zScrub.emit($event.value)\" (onSlideEnd)=\"zSlide.emit($event.value)\"\n                  pTooltip=\"Slice through the stack (\u2190 / \u2192 keys)\" tooltipPosition=\"bottom\"\n                  [style]=\"{'width':'16rem'}\" styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">{{zIndex}} of {{maxIndex}}</span>\n      </ng-container>\n      <!-- Heatmap view: single-image (high-def zoom) vs stack (frame slider). Plotly-only \u2014\n           hidden for napari, which has no single/stack toggle or per-frame fetch. -->\n      <ng-container *ngIf=\"!showsLiveSliceScrubber && !isNapariMode\">\n      <p-button icon=\"pi pi-image\" size=\"small\"\n                [text]=\"imageInfo?.showStack\"\n                pTooltip=\"Single image mode: enables high-def zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[0])\">\n      </p-button>\n      <p-button icon=\"pi pi-images\" size=\"small\"\n                [text]=\"!imageInfo?.showStack\"\n                pTooltip=\"Stack mode, enables slicing through image frames\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[1])\">\n      </p-button>\n      <ng-container *ngIf=\"!imageInfo?.showStack\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <div class=\"p-inputgroup\" style=\"width: auto\">\n          <p-inputNumber styleClass=\"w-3rem toolbar-input\"\n\t\t\t\t\tpTooltip=\"View image in stack (&#x23CE;)\"\n\t\t\t\t\t[(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n           (onInput)=\"zIndexInput.emit(zIndex)\" (keydown.enter)=\"reloadAndPlot.emit()\"/>\n          <p-button icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\" (onClick)=\"reloadAndPlot.emit()\"\n                    pTooltip=\"Plot this slice\" tooltipPosition=\"bottom\">\n          </p-button>\n        </div>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">of {{maxIndex}}</span>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-download\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Download image as PNG\" tooltipPosition=\"bottom\"\n                (onClick)=\"downloadImage.emit()\">\n      </p-button>\n      <p-button *ngIf=\"isHeatmap\" icon=\"pi pi-window-maximize\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Fit to view\" tooltipPosition=\"bottom\"\n                (onClick)=\"autoscaleImage.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n         covers this and a bare drag pans natively, so it's hidden in image view. -->\n    <ng-container *ngIf=\"isHeatmap && tools.zoomTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button *ngIf=\"!isImageView\" icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeDragMode !== 'zoom'\"\n                pTooltip=\"Zoom drag\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoom')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'zoomToBox'\"\n                pTooltip=\"Zoom box (<kbd>b</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoomToBox')\">\n        <img src=\"assets/plotting/zoom-box.svg\"\n             [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeDragMode !== 'pan'\"\n                pTooltip=\"Pan the image (<kbd>p</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-search-plus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom in (<kbd>+</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomIn.emit()\">\n      </p-button>\n      <p-button icon=\"pi pi-search-minus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom out (<kbd>-</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomOut.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Surface 3D controls -->\n    <ng-container *ngIf=\"!isHeatmap\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'zoom'\"\n                pTooltip=\"Zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('zoom')\">\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'pan'\"\n                pTooltip=\"Pan\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-globe\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'orbit'\"\n                pTooltip=\"Orbital rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('orbit')\">\n      </p-button>\n      <p-button icon=\"pi pi-sync\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'turntable'\"\n                pTooltip=\"Turntable rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('turntable')\">\n      </p-button>\n      <p-button icon=\"pi pi-home\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Reset camera to default\" tooltipPosition=\"bottom\"\n                (onClick)=\"resetSurfaceCamera.emit()\">\n      </p-button>\n      <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n           `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n           (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n      <p-button size=\"small\" *ngIf=\"isNapariMode\" styleClass=\"p-button-icon-only\"\n                [text]=\"!axesVisible\"\n                pTooltip=\"Toggle 3D axes / scale\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleAxes.emit()\">\n        <img src=\"assets/plotting/3d-coordinates.svg\"\n             [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n      <p-button icon=\"pi pi-share-alt\" size=\"small\" *ngIf=\"isNapariSurfaceMode\"\n                [text]=\"!wireframeActive\"\n                pTooltip=\"Toggle wireframe\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleWireframe.emit()\">\n      </p-button>\n      <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n      <ng-container *ngIf=\"isNapari3dMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n        <p-dropdown [options]=\"decimateOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"resolutionScale\" appendTo=\"body\"\n                    pTooltip=\"Resolution (decimate factor)\" tooltipPosition=\"bottom\"\n                    [style]=\"{'min-width': '6rem'}\"\n                    (onChange)=\"selectResolution.emit($event.value)\">\n        </p-dropdown>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"isHeatmap && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Region Editor: opens the editor as a floating dialog (formerly the\n           right-panel Regions tab). Sits with the region drawing tools. -->\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Open the Region Editor\" tooltipPosition=\"bottom\"\n                (onClick)=\"openRegionEditor.emit()\">\n        <img src=\"assets/plotting/region-editor.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Region drawing tools -->\n      <p-button icon=\"pi pi-arrow-up-right\" size=\"small\"\n                [text]=\"activeDragMode !== 'select'\"\n                pTooltip=\"Selection mode (<kbd>s</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('select')\">\n      </p-button>\n      <p-button icon=\"pi pi-stop\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawrect'\"\n                pTooltip=\"Draw a rectangular region (<kbd>r</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawrect')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'drawopenpath'\"\n                pTooltip=\"Draw a polyline (<kbd>l</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawopenpath')\">\n        <img src=\"assets/plotting/polyline.svg\"\n             [class]=\"activeDragMode === 'drawopenpath' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-pencil\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawclosedpath'\"\n                pTooltip=\"Draw a freeform region (<kbd>f</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawclosedpath')\">\n      </p-button>\n      <!-- Brush: paint a region by dragging a disc of the given size; the Size\n           slider appears while it's active. Hold Shift to erase (subtract). -->\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'brush'\"\n                pTooltip=\"Brush: click and drag to paint a region.\n                <br>Hold <kbd>Shift</kbd> while painting to erase from a region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('brush')\">\n        <img src=\"assets/plotting/paintbrush.svg\"\n             [class]=\"activeDragMode === 'brush' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'brush'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Size</span>\n        <p-slider [(ngModel)]=\"brushSize\"\n                  [min]=\"brushSizeMin\" [max]=\"brushSizeMax\" [step]=\"brushSizeStep\"\n                  (onChange)=\"brushSizeChange.emit($event.value)\"\n                  pTooltip=\"Brush diameter in image pixels.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ brushSize }}</span>\n      </ng-container>\n\n      <!-- Vertex editing \u2014 backends with a vertex-editing overlay (OSD + napari-js image). -->\n      <ng-container *ngIf=\"supportsRegionVertexTools\">\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'drawpolygon'\"\n                  pTooltip=\"Polygon: click to place each vertex; click the first point to close\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('drawpolygon')\">\n          <img src=\"assets/plotting/polygon-vertices.svg\"\n               [class]=\"activeDragMode === 'drawpolygon' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'addpoint'\"\n                  pTooltip=\"Add a vertex: click an edge of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('addpoint')\">\n          <img src=\"assets/plotting/vertex-add.svg\"\n               [class]=\"activeDragMode === 'addpoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'deletepoint'\"\n                  pTooltip=\"Delete a vertex: click a vertex of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('deletepoint')\">\n          <img src=\"assets/plotting/vertex-delete.svg\"\n               [class]=\"activeDragMode === 'deletepoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'wand'\"\n                pTooltip=\"Wand: click and drag to grow a region by similar pixel values (<kbd>w</kbd>).\n                <br>Hold <kbd>Shift</kbd> while clicking or dragging on a region to erase pixels from it.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('wand')\">\n        <img src=\"assets/plotting/wand.svg\"\n             [class]=\"activeDragMode === 'wand' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'wand'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Sens.</span>\n        <p-slider [(ngModel)]=\"wandSensitivity\"\n                  [min]=\"wandSensitivityMin\" [max]=\"wandSensitivityMax\" [step]=\"wandSensitivityStep\"\n                  (onChange)=\"wandSensitivityChange.emit($event.value)\"\n                  pTooltip=\"Higher = stricter (smaller selection); lower = looser.\n                  Takes effect from the next click/drag tick.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ wandSensitivity.toFixed(1) }}</span>\n      </ng-container>\n      <p-button icon=\"pi pi-eraser\" size=\"small\"\n                [text]=\"activeDragMode !== 'eraseVertex'\"\n                pTooltip=\"Vertex eraser (<kbd>e</kbd>): click or drag to remove polygon vertices inside\n                the cursor circle from any region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('eraseVertex')\">\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'eraseVertex'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Radius</span>\n        <p-slider [(ngModel)]=\"vertexEraserRadius\"\n                  [min]=\"vertexEraserRadiusMin\" [max]=\"vertexEraserRadiusMax\" [step]=\"vertexEraserRadiusStep\"\n                  (onChange)=\"vertexEraserRadiusChange.emit($event.value)\"\n                  pTooltip=\"Eraser radius in image pixels.\n                  Vertices within this distance of the cursor are removed.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ vertexEraserRadius }}</span>\n      </ng-container>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canUndo\"\n                pTooltip=\"Undo the last region action (<kbd>Ctrl</kbd>+<kbd>Z</kbd>).\n                Up to 10 actions can be undone.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"undoRegion.emit()\">\n        <img src=\"assets/plotting/undo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canRedo\"\n                pTooltip=\"Redo the last undone region action\n                (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>).\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"redoRegion.emit()\">\n        <img src=\"assets/plotting/redo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-trash\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Delete selected region (<kbd>Del</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"deleteRegion.emit()\">\n      </p-button>\n      <!-- SAM (jit-ui#90): box-prompt segment, interactive point prompts, and a\n           model picker. -->\n      <span class=\"toolbar-separator\"></span>\n      <!-- SAM controls grouped: box-prompt Segment, then the point-prompt tool,\n           then the model-picker dropdown (the chevron) which governs BOTH tools.\n           Falls back to Segment + point with no model picker when none are set. -->\n      <span *ngIf=\"samModels.length; else segmentPlain\" class=\"p-buttonset segment-split\">\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRegions.emit()\">\n          <img src=\"assets/plotting/picture-segmentation.svg\"\n               class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n        <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the SAM model (used by both segment tools)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"samModelMenu.toggle($event)\">\n        </p-button>\n      </span>\n      <ng-template #segmentPlain>\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"segmentRegions.emit()\">\n            <img src=\"assets/plotting/picture-segmentation.svg\"\n                 class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n          </p-button>\n          <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        </span>\n      </ng-template>\n      <!-- Point-prompt tool \u2014 shared between the models / no-models layouts so it\n           always sits just left of the model dropdown. -->\n      <ng-template #samPointBtn>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'samPoint'\"\n                  pTooltip=\"SAM point prompts: click a fiber to segment it as a new region;\n                  Shift/Alt-click to refine (exclude) the current one.<br>Esc undoes it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('samPoint')\">\n          <img src=\"assets/plotting/click.svg\"\n               [class]=\"activeDragMode === 'samPoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-template>\n      <p-menu #samModelMenu [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <!-- Help: explains the ViT-T vs ViT-B trade-off behind the model picker. -->\n      <p-button *ngIf=\"samModels.length\" icon=\"pi pi-info-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"About the SAM models\" tooltipPosition=\"bottom\"\n                (onClick)=\"samModelInfo.toggle($event)\">\n      </p-button>\n      <p-overlayPanel #samModelInfo appendTo=\"body\" styleClass=\"sam-model-info\">\n        <div style=\"max-width: 24rem; line-height: 1.4\">\n          <div class=\"font-bold mb-1\">SAM models</div>\n          <p class=\"mt-0 mb-2\">\n            All are promptable Segment Anything models finetuned for biomedical images. They differ\n            in the <i>image encoder</i> (the heavy once-per-image step) and the training domain \u2014\n            box and point prompting behave the same.\n          </p>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">micro-sam ViT-T <span class=\"font-normal\">(default)</span></div>\n            <div>Light-microscopy finetuned. TinyViT encoder, ~14&nbsp;MB, very fast, runs on WASM.\n              Good mask quality \u2014 best for quick interactive work and many/large objects.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">micro-sam ViT-B</div>\n            <div>Light-microscopy finetuned. ViT-Base encoder, ~172&nbsp;MB, slower, GPU-accelerated\n              (WebGPU). Highest accuracy \u2014 when ViT-T misses subtle or overlapping boundaries.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">patho-sam ViT-B</div>\n            <div>Histopathology finetuned (H&amp;E / stained tissue). ViT-Base encoder, GPU-accelerated.\n              Use it for pathology slides \u2014 it segments tissue/nuclei better than the microscopy models.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">patho-sam ViT-B (int8)</div>\n            <div>Same model, int8-quantized \u2014 ~100&nbsp;MB vs ~180&nbsp;MB (smaller download). Runs on\n              WASM (slower encode than the fp16 version); masks are near-identical. Pick it on slow\n              connections.</div>\n          </div>\n          <div class=\"text-sm\" style=\"opacity: 0.75\">\n            The choice applies to both the box and point tools. Each tool loads its own encoder,\n            so the first click after switching re-encodes once.\n          </div>\n        </div>\n      </p-overlayPanel>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM, client-side)\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"segmentCellpose.emit()\">\n        <img src=\"assets/plotting/cells.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button icon=\"pi pi-question-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Help\" tooltipPosition=\"bottom\"\n                (onClick)=\"showHelp()\">\n      </p-button>\n    </ng-container>\n\n  </div>\n</p-toolbar>\n<p-dialog header=\"Plotting help\" [(visible)]=\"displayHelpDialog\" [modal]=\"true\" [style]=\"{width: '50vw'}\"\n          [maximizable]=\"true\" [draggable]=\"false\" [resizable]=\"false\">\n  <p>Click a file in the left-hand tree to display it. By default it opens in the\n    <b>Image</b> view \u2014 a natively tiled, deeply zoomable raster (OpenSeadragon) with a\n    navigator minimap and a physical-units scale bar. <b>Click the image to zoom</b> toward\n    the clicked point; scroll to zoom and drag to pan. When a stack is open, a slice slider\n    (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\"/>\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach\n    this toolbar into a floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized:\n    <b>Image</b>, <b>Contour</b>, <b>Scatter (regions)</b>, <b>Surface (3D)</b>,\n    <b>Scatter 3D</b>, and <b>Isosurface (3D)</b>. Scalar and 3D types require a grayscale\n    image (the 3D volume types also require a z-stack). The non-image views render with\n    Plotly and support \"real zooming\" (a downscaled overview that re-fetches higher\n    resolution as you zoom in).\n  </p>\n  <ul>\n    <li>\"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are\n      drawn for, mapped onto the volume's real intensity range.</li>\n    <li>\"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>,\n      pan <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>,\n      turntable <i class=\"pi pi-sync\"></i>, and reset camera <i class=\"pi pi-home\"></i>;\n      scroll to zoom the 3D scene.</li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\">:\n      opens the Region Editor as a floating, draggable dialog \u2014 a per-image table of every region\n      (class, colour, area) with bulk select/label/colour/delete and GeoJSON import/export. It stays\n      in sync with the image, so you can keep it open while drawing.</li>\n    <li>\"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\">\n      (<i>work in progress \u2014 not yet stable</i>): adds a coloured line ROI; a floating inset\n      chart plots intensity along each line, updates live as you drag it, and re-samples at the\n      current zoom resolution. Each added line gets its own colour; select a line and use the\n      trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).</li>\n    <li>\"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\">:\n      opens a floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap\n      dropdown (default: inverted greys).</li>\n    <li>\"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\">\n      (Image view only): the image opens showing <b>raw pixels</b> (nearest-neighbour), so\n      zooming in renders crisp blocks for pixel inspection. Toggle this on for bilinear\n      smoothing; the icon turns white while smoothing is active.</li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image\n      to its original dimensions. In stack mode it also resets to single-image mode.</li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\">\n      (<kbd>b</kbd>): drag a box to select an area to zoom into.</li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step,\n      stopping at the original image dimensions.</li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>By default no tool is selected (all greyed-out); selecting a tool highlights it. The\n    vertex-editing tools (polygon, add/delete vertex, move, B\u00E9zier conversions) are available\n    in the <b>Image</b> view only. On a <b>donut</b> (a region with a hole), the inner-ring\n    vertices are editable too \u2014 drag, add, and delete them just like the outer ring.</p>\n  <ul>\n    <li>\"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode\n      that turns off whatever drawing tool was active (wand, vertex eraser, rectangle, etc.).\n      Use it to step out of editing without picking another tool.</li>\n    <li>\"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to\n      create a rectangular region.</li>\n    <li>\"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\">\n      (<kbd>l</kbd>): draw an open (non-closed) polyline by clicking and dragging. Polylines can\n      be edited and exported to GeoJSON as a <code>LineString</code> feature.</li>\n    <li>\"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to\n      draw a closed freeform polygon.</li>\n    <li>\"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\">: click\n      and drag to paint a region with a circular brush \u2014 the painted stroke is the region.\n      A <b>Size</b> slider (brush diameter, in image pixels) appears in the toolbar while the\n      brush is active. Hold <kbd>Shift</kbd> while painting to <b>erase</b> (subtract) from a\n      region instead. Painting over an existing region extends it; brushing across two regions\n      merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the\n      enclosed area empty \u2014 a <b>donut</b> (Image view).</li>\n    <li>\"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\">:\n      click to place each vertex; click the first point to close the polygon.</li>\n    <li>\"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\">:\n      click an edge of the selected polygon to insert a new vertex.</li>\n    <li>\"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\">:\n      click a vertex of the selected polygon to remove it.</li>\n    <li>\"<b>Move region</b>\" <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\">:\n      drag to move the selected region.</li>\n    <li>\"<b>To B\u00E9zier</b>\" <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\"> /\n      \"<b>To polygon</b>\" <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\">:\n      convert the selected region to a smooth B\u00E9zier curve, or back to a straight-edged polygon.</li>\n    <li>\"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\"> (<kbd>w</kbd>):\n      click to grow a region from pixels with similar values around the click point. Hold\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an exact-match flood fill; drag to keep extending the\n      selection while moving; hold <kbd>Shift</kbd> while clicking or dragging on an existing\n      region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that appears to make the\n      wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending the\n      same region; clicking inside an existing region adopts it, and growing into another region\n      merges them.</li>\n    <li>\"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag\n      to remove polygon vertices that fall inside the cursor circle from any region, including a\n      region's inner rings (donut holes). Use the <b>Radius</b> slider to set the eraser size in\n      image pixels. Polygons reduced below 3 vertices (or polylines below 2) are deleted entirely;\n      a hole reduced below 3 vertices is removed.</li>\n    <li>\"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the\n      last region action (draw, delete, edit, wand/brush stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.</li>\n    <li>\"<b>Redo</b>\" <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>):\n      re-applies the most recently undone action. Performing a new region action clears what can be redone.</li>\n    <li>\"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected\n      region. This can also be done from the Region Editor.</li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>Right-click a region \u2014 or the current multi-selection \u2014 to open the\n    \"<b>Selected region(s)</b>\" group at the top of the context menu. These act immediately on\n    the selection (they're not drawing modes) and are fully undo/redo-able:</p>\n  <ul>\n    <li>\"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on\n      the image (also in the Region Editor toolbar).</li>\n    <li>\"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch,\n      the result is a single multi-part region (sparse \"bits\").</li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image\n      rectangle with the selected regions punched out as holes. Works at any image size.</li>\n    <li>\"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude\n      threshold in pixels \u2014 pick <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px),\n      <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a slider. Applies to the exterior and any\n      holes (and every part of a multi-part region).</li>\n    <li>The B\u00E9zier conversions and Delete also live in this group (the right-click equivalents of\n      the toolbar / vertex tools above).</li>\n  </ul>\n\n  <h3>Segmentation tools (SAM &amp; cellpose)</h3>\n  <p>AI-assisted segmentation that runs entirely in the browser. The box and point\n    tools use a promptable <b>micro-sam</b> model; the cellpose tool auto-detects cells.\n    Generated regions inherit the color of the rectangle they came from. The first run\n    downloads the model (a progress toast is shown); it's then cached.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/picture-segmentation.svg\" width=\"15\" height=\"15\">\n      (box prompt): draw one or more <b>Rectangular regions</b> around the objects of interest,\n      then click Segment. Each rectangle is replaced by the SAM mask of the object inside it.</li>\n    <li>\"<b>Point prompts</b>\" <img src=\"assets/plotting/click.svg\" width=\"15\" height=\"15\">: click directly on an object to\n      segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking another\n      object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it,\n      <kbd>Enter</kbd> commits it.</li>\n    <li>\"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the\n      Segment button chooses the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or\n      <b>micro-sam ViT-B</b> (larger, highest accuracy) for light microscopy, or\n      <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). The choice applies to\n      <i>both</i> the box and point tools. The <i class=\"pi pi-info-circle\"></i> info button next\n      to it explains the trade-off.</li>\n    <li>\"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\">: draw rectangles, then click Cellpose to\n      automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one\n      region per detected cell. No clicking on individual cells needed.</li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr><td><kbd>+</kbd> / <kbd>=</kbd></td><td>Zoom in</td></tr>\n    <tr><td><kbd>-</kbd></td><td>Zoom out</td></tr>\n    <tr><td><kbd>b</kbd></td><td>Toggle zoom box mode</td></tr>\n    <tr><td><kbd>p</kbd></td><td>Toggle pan mode</td></tr>\n    <tr><td><kbd>f</kbd></td><td>Toggle freeform region drawing</td></tr>\n    <tr><td><kbd>l</kbd></td><td>Toggle polyline drawing</td></tr>\n    <tr><td><kbd>r</kbd></td><td>Toggle rectangular region drawing</td></tr>\n    <tr><td><kbd>w</kbd></td><td>Toggle wand tool</td></tr>\n    <tr><td>Wand + <kbd>Shift</kbd></td><td>Erase pixels from the active region</td></tr>\n    <tr><td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td><td>Exact-match flood fill (no smoothing)</td></tr>\n    <tr><td><kbd>e</kbd></td><td>Toggle vertex eraser</td></tr>\n    <tr><td><kbd>s</kbd></td><td>Selection mode (deactivates drawing tools)</td></tr>\n    <tr><td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td><td>Add an exclude point (refine the current object)</td></tr>\n    <tr><td><kbd>Enter</kbd></td><td>Commit the current SAM point object</td></tr>\n    <tr><td><kbd>Esc</kbd></td><td>Undo the current SAM point object</td></tr>\n    <tr><td><kbd>Del</kbd> / <kbd>\u232B</kbd></td><td>Delete selected region</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td><td>Undo the last region action (up to 10)</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td><td>Redo the last undone region action</td></tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"displayHelpDialog=false\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}.toolbar-text{color:var(--primary-color);font-size:.875rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}::ng-deep .plotmode-item{display:inline-flex;align-items:center;gap:.5rem;color:#000}::ng-deep .plotmode-item i{font-size:1rem;color:var(--primary-color)}::ng-deep .plotmode-item .plotmode-icon-img{width:1.1rem;height:1.1rem;object-fit:contain;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}.wand-sensitivity-value{min-width:2rem;text-align:right}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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: "component", type: i6.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i7.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: i8.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: "component", type: i9.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i11.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }, { kind: "component", type: i13.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale", wandSensitivity: "wandSensitivity", brushSize: "brushSize", vertexEraserRadius: "vertexEraserRadius", canUndo: "canUndo", canRedo: "canRedo", stackOptions: "stackOptions", tools: "tools", imageSmoothingEnabled: "imageSmoothingEnabled", samModels: "samModels", samModelId: "samModelId", yoloModels: "yoloModels", yoloModelId: "yoloModelId" }, outputs: { selectPlotType: "selectPlotType", addProfileLine: "addProfileLine", toggleImageSmoothing: "toggleImageSmoothing", isoRangeChange: "isoRangeChange", openChannelHistogram: "openChannelHistogram", openRegionEditor: "openRegionEditor", selectStackOption: "selectStackOption", zScrub: "zScrub", zSlide: "zSlide", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot", downloadImage: "downloadImage", autoscaleImage: "autoscaleImage", toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution", deleteRegion: "deleteRegion", undoRegion: "undoRegion", redoRegion: "redoRegion", segmentRegions: "segmentRegions", segmentCellpose: "segmentCellpose", detectYolo: "detectYolo", yoloModelChange: "yoloModelChange", openYoloParams: "openYoloParams", samModelChange: "samModelChange", wandSensitivityChange: "wandSensitivityChange", brushSizeChange: "brushSizeChange", vertexEraserRadiusChange: "vertexEraserRadiusChange" }, usesOnChanges: true, ngImport: i0, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Plot type: available for any image (grayscale or RGB). -->\n    <ng-container *ngIf=\"imageInfo && tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-dropdown [options]=\"plotTypeOptions\" optionLabel=\"label\" optionValue=\"type\"\n                  [(ngModel)]=\"selectedPlotType\" appendTo=\"body\"\n                  pTooltip=\"Select plot type\" tooltipPosition=\"bottom\"\n                  [style]=\"{'min-width': '11rem'}\"\n                  styleClass=\"plotmode-dropdown\" panelStyleClass=\"plotmode-panel\"\n                  (onChange)=\"selectPlotType.emit($event.value)\">\n        <ng-template let-opt pTemplate=\"selectedItem\">\n          <span class=\"plotmode-item\" *ngIf=\"opt\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n        <ng-template let-opt pTemplate=\"item\">\n          <span class=\"plotmode-item\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n      </p-dropdown>\n      <ng-container *ngIf=\"isIsosurfaceMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Iso</span>\n        <p-slider [(ngModel)]=\"isoRange\" [range]=\"true\"\n                  [min]=\"isoValueMin\" [max]=\"isoValueMax\" [step]=\"isoValueStep\"\n                  (onChange)=\"isoRangeChange.emit($event.values)\"\n                  pTooltip=\"Isosurface band (0\u2013255), mapped onto the volume's\n                  actual intensity range. Surfaces are drawn for voxels whose\n                  intensity falls in the selected band \u2014 narrow it to isolate\n                  features, widen it to see the whole structure.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ isoRange[0] }}\u2013{{ isoRange[1] }}</span>\n      </ng-container>\n      <!-- Intensity tools (Heatmap / Image mode): add another colored line ROI.\n           Each added line gets the next bright palette colour and its own inset\n           trace; select a line on the image and use the trash tool to remove it\n           (and its trace). The lines are Region-based but excluded from the\n           Region Editor and exports. -->\n      <ng-container *ngIf=\"isIntensityCapable\">\n        <span class=\"toolbar-separator\"></span>\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Add an intensity line (new colour). Click a line to select it,\n                  then use the trash tool to remove it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"addProfileLine.emit()\">\n          <img src=\"assets/plotting/spline-chart.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n    </ng-container>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button *ngIf=\"tools.specialTools\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openChannelHistogram.emit()\">\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button *ngIf=\"tools.specialTools && isImageView\" size=\"small\"\n              [text]=\"!imageSmoothingEnabled\"\n              pTooltip=\"Smoothen (turn on image smoothing)\" tooltipPosition=\"bottom\"\n              (onClick)=\"toggleImageSmoothing.emit()\">\n      <img src=\"assets/plotting/smooth.svg\" style=\"width: 1rem\"\n           [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"/>\n    </p-button>\n\n    <!-- Stack controls -->\n    <ng-container *ngIf=\"imageInfo?.isStack\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Image view: scrub z-slices live (the renderer swaps slices in place). -->\n      <ng-container *ngIf=\"showsLiveSliceScrubber\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <p-slider [(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n                  (onChange)=\"zScrub.emit($event.value)\" (onSlideEnd)=\"zSlide.emit($event.value)\"\n                  pTooltip=\"Slice through the stack (\u2190 / \u2192 keys)\" tooltipPosition=\"bottom\"\n                  [style]=\"{'width':'16rem'}\" styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">{{zIndex}} of {{maxIndex}}</span>\n      </ng-container>\n      <!-- Heatmap view: single-image (high-def zoom) vs stack (frame slider). Plotly-only \u2014\n           hidden for napari, which has no single/stack toggle or per-frame fetch. -->\n      <ng-container *ngIf=\"!showsLiveSliceScrubber && !isNapariMode\">\n      <p-button icon=\"pi pi-image\" size=\"small\"\n                [text]=\"imageInfo?.showStack\"\n                pTooltip=\"Single image mode: enables high-def zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[0])\">\n      </p-button>\n      <p-button icon=\"pi pi-images\" size=\"small\"\n                [text]=\"!imageInfo?.showStack\"\n                pTooltip=\"Stack mode, enables slicing through image frames\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[1])\">\n      </p-button>\n      <ng-container *ngIf=\"!imageInfo?.showStack\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <div class=\"p-inputgroup\" style=\"width: auto\">\n          <p-inputNumber styleClass=\"w-3rem toolbar-input\"\n\t\t\t\t\tpTooltip=\"View image in stack (&#x23CE;)\"\n\t\t\t\t\t[(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n           (onInput)=\"zIndexInput.emit(zIndex)\" (keydown.enter)=\"reloadAndPlot.emit()\"/>\n          <p-button icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\" (onClick)=\"reloadAndPlot.emit()\"\n                    pTooltip=\"Plot this slice\" tooltipPosition=\"bottom\">\n          </p-button>\n        </div>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">of {{maxIndex}}</span>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-download\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Download image as PNG\" tooltipPosition=\"bottom\"\n                (onClick)=\"downloadImage.emit()\">\n      </p-button>\n      <p-button *ngIf=\"isHeatmap\" icon=\"pi pi-window-maximize\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Fit to view\" tooltipPosition=\"bottom\"\n                (onClick)=\"autoscaleImage.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n         covers this and a bare drag pans natively, so it's hidden in image view. -->\n    <ng-container *ngIf=\"isHeatmap && tools.zoomTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button *ngIf=\"!isImageView\" icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeDragMode !== 'zoom'\"\n                pTooltip=\"Zoom drag\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoom')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'zoomToBox'\"\n                pTooltip=\"Zoom box (<kbd>b</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoomToBox')\">\n        <img src=\"assets/plotting/zoom-box.svg\"\n             [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeDragMode !== 'pan'\"\n                pTooltip=\"Pan the image (<kbd>p</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-search-plus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom in (<kbd>+</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomIn.emit()\">\n      </p-button>\n      <p-button icon=\"pi pi-search-minus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom out (<kbd>-</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomOut.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Surface 3D controls -->\n    <ng-container *ngIf=\"!isHeatmap\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'zoom'\"\n                pTooltip=\"Zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('zoom')\">\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'pan'\"\n                pTooltip=\"Pan\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-globe\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'orbit'\"\n                pTooltip=\"Orbital rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('orbit')\">\n      </p-button>\n      <p-button icon=\"pi pi-sync\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'turntable'\"\n                pTooltip=\"Turntable rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('turntable')\">\n      </p-button>\n      <p-button icon=\"pi pi-home\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Reset camera to default\" tooltipPosition=\"bottom\"\n                (onClick)=\"resetSurfaceCamera.emit()\">\n      </p-button>\n      <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n           `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n           (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n      <p-button size=\"small\" *ngIf=\"isNapariMode\" styleClass=\"p-button-icon-only\"\n                [text]=\"!axesVisible\"\n                pTooltip=\"Toggle 3D axes / scale\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleAxes.emit()\">\n        <img src=\"assets/plotting/3d-coordinates.svg\"\n             [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n      <p-button icon=\"pi pi-share-alt\" size=\"small\" *ngIf=\"isNapariSurfaceMode\"\n                [text]=\"!wireframeActive\"\n                pTooltip=\"Toggle wireframe\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleWireframe.emit()\">\n      </p-button>\n      <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n      <ng-container *ngIf=\"isNapari3dMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n        <p-dropdown [options]=\"decimateOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"resolutionScale\" appendTo=\"body\"\n                    pTooltip=\"Resolution (decimate factor)\" tooltipPosition=\"bottom\"\n                    [style]=\"{'min-width': '6rem'}\"\n                    (onChange)=\"selectResolution.emit($event.value)\">\n        </p-dropdown>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"isHeatmap && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Region Editor: opens the editor as a floating dialog (formerly the\n           right-panel Regions tab). Sits with the region drawing tools. -->\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Open the Region Editor\" tooltipPosition=\"bottom\"\n                (onClick)=\"openRegionEditor.emit()\">\n        <img src=\"assets/plotting/region-editor.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Region drawing tools -->\n      <p-button icon=\"pi pi-arrow-up-right\" size=\"small\"\n                [text]=\"activeDragMode !== 'select'\"\n                pTooltip=\"Selection mode (<kbd>s</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('select')\">\n      </p-button>\n      <p-button icon=\"pi pi-stop\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawrect'\"\n                pTooltip=\"Draw a rectangular region (<kbd>r</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawrect')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'drawopenpath'\"\n                pTooltip=\"Draw a polyline (<kbd>l</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawopenpath')\">\n        <img src=\"assets/plotting/polyline.svg\"\n             [class]=\"activeDragMode === 'drawopenpath' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-pencil\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawclosedpath'\"\n                pTooltip=\"Draw a freeform region (<kbd>f</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawclosedpath')\">\n      </p-button>\n      <!-- Brush: paint a region by dragging a disc of the given size; the Size\n           slider appears while it's active. Hold Shift to erase (subtract). -->\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'brush'\"\n                pTooltip=\"Brush: click and drag to paint a region.\n                <br>Hold <kbd>Shift</kbd> while painting to erase from a region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('brush')\">\n        <img src=\"assets/plotting/paintbrush.svg\"\n             [class]=\"activeDragMode === 'brush' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'brush'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Size</span>\n        <p-slider [(ngModel)]=\"brushSize\"\n                  [min]=\"brushSizeMin\" [max]=\"brushSizeMax\" [step]=\"brushSizeStep\"\n                  (onChange)=\"brushSizeChange.emit($event.value)\"\n                  pTooltip=\"Brush diameter in image pixels.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ brushSize }}</span>\n      </ng-container>\n\n      <!-- Vertex editing \u2014 backends with a vertex-editing overlay (OSD + napari-js image). -->\n      <ng-container *ngIf=\"supportsRegionVertexTools\">\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'drawpolygon'\"\n                  pTooltip=\"Polygon: click to place each vertex; click the first point to close\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('drawpolygon')\">\n          <img src=\"assets/plotting/polygon-vertices.svg\"\n               [class]=\"activeDragMode === 'drawpolygon' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'addpoint'\"\n                  pTooltip=\"Add a vertex: click an edge of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('addpoint')\">\n          <img src=\"assets/plotting/vertex-add.svg\"\n               [class]=\"activeDragMode === 'addpoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'deletepoint'\"\n                  pTooltip=\"Delete a vertex: click a vertex of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('deletepoint')\">\n          <img src=\"assets/plotting/vertex-delete.svg\"\n               [class]=\"activeDragMode === 'deletepoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'wand'\"\n                pTooltip=\"Wand: click and drag to grow a region by similar pixel values (<kbd>w</kbd>).\n                <br>Hold <kbd>Shift</kbd> while clicking or dragging on a region to erase pixels from it.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('wand')\">\n        <img src=\"assets/plotting/wand.svg\"\n             [class]=\"activeDragMode === 'wand' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'wand'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Sens.</span>\n        <p-slider [(ngModel)]=\"wandSensitivity\"\n                  [min]=\"wandSensitivityMin\" [max]=\"wandSensitivityMax\" [step]=\"wandSensitivityStep\"\n                  (onChange)=\"wandSensitivityChange.emit($event.value)\"\n                  pTooltip=\"Higher = stricter (smaller selection); lower = looser.\n                  Takes effect from the next click/drag tick.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ wandSensitivity.toFixed(1) }}</span>\n      </ng-container>\n      <p-button icon=\"pi pi-eraser\" size=\"small\"\n                [text]=\"activeDragMode !== 'eraseVertex'\"\n                pTooltip=\"Vertex eraser (<kbd>e</kbd>): click or drag to remove polygon vertices inside\n                the cursor circle from any region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('eraseVertex')\">\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'eraseVertex'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Radius</span>\n        <p-slider [(ngModel)]=\"vertexEraserRadius\"\n                  [min]=\"vertexEraserRadiusMin\" [max]=\"vertexEraserRadiusMax\" [step]=\"vertexEraserRadiusStep\"\n                  (onChange)=\"vertexEraserRadiusChange.emit($event.value)\"\n                  pTooltip=\"Eraser radius in image pixels.\n                  Vertices within this distance of the cursor are removed.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ vertexEraserRadius }}</span>\n      </ng-container>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canUndo\"\n                pTooltip=\"Undo the last region action (<kbd>Ctrl</kbd>+<kbd>Z</kbd>).\n                Up to 10 actions can be undone.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"undoRegion.emit()\">\n        <img src=\"assets/plotting/undo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canRedo\"\n                pTooltip=\"Redo the last undone region action\n                (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>).\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"redoRegion.emit()\">\n        <img src=\"assets/plotting/redo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-trash\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Delete selected region (<kbd>Del</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"deleteRegion.emit()\">\n      </p-button>\n      <!-- SAM (jit-ui#90): box-prompt segment, interactive point prompts, and a\n           model picker. -->\n      <span class=\"toolbar-separator\"></span>\n      <!-- SAM controls grouped: box-prompt Segment, then the point-prompt tool,\n           then the model-picker dropdown (the chevron) which governs BOTH tools.\n           Falls back to Segment + point with no model picker when none are set. -->\n      <span *ngIf=\"samModels.length; else segmentPlain\" class=\"p-buttonset segment-split\">\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRegions.emit()\">\n          <img src=\"assets/plotting/picture-segmentation.svg\"\n               class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n        <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the SAM model (used by both segment tools)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"samModelMenu.toggle($event)\">\n        </p-button>\n      </span>\n      <ng-template #segmentPlain>\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"segmentRegions.emit()\">\n            <img src=\"assets/plotting/picture-segmentation.svg\"\n                 class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n          </p-button>\n          <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        </span>\n      </ng-template>\n      <!-- Point-prompt tool \u2014 shared between the models / no-models layouts so it\n           always sits just left of the model dropdown. -->\n      <ng-template #samPointBtn>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'samPoint'\"\n                  pTooltip=\"SAM point prompts: click a fiber to segment it as a new region;\n                  Shift/Alt-click to refine (exclude) the current one.<br>Esc undoes it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('samPoint')\">\n          <img src=\"assets/plotting/click.svg\"\n               [class]=\"activeDragMode === 'samPoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-template>\n      <p-menu #samModelMenu [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <!-- Help: explains the ViT-T vs ViT-B trade-off behind the model picker. -->\n      <p-button *ngIf=\"samModels.length\" icon=\"pi pi-info-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"About the SAM models\" tooltipPosition=\"bottom\"\n                (onClick)=\"samModelInfo.toggle($event)\">\n      </p-button>\n      <p-overlayPanel #samModelInfo appendTo=\"body\" styleClass=\"sam-model-info\">\n        <div style=\"max-width: 24rem; line-height: 1.4\">\n          <div class=\"font-bold mb-1\">SAM models</div>\n          <p class=\"mt-0 mb-2\">\n            All are promptable Segment Anything models finetuned for biomedical images. They differ\n            in the <i>image encoder</i> (the heavy once-per-image step) and the training domain \u2014\n            box and point prompting behave the same.\n          </p>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">micro-sam ViT-T <span class=\"font-normal\">(default)</span></div>\n            <div>Light-microscopy finetuned. TinyViT encoder, ~14&nbsp;MB, very fast, runs on WASM.\n              Good mask quality \u2014 best for quick interactive work and many/large objects.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">micro-sam ViT-B</div>\n            <div>Light-microscopy finetuned. ViT-Base encoder, ~172&nbsp;MB, slower, GPU-accelerated\n              (WebGPU). Highest accuracy \u2014 when ViT-T misses subtle or overlapping boundaries.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">patho-sam ViT-B</div>\n            <div>Histopathology finetuned (H&amp;E / stained tissue). ViT-Base encoder, GPU-accelerated.\n              Use it for pathology slides \u2014 it segments tissue/nuclei better than the microscopy models.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">patho-sam ViT-B (int8)</div>\n            <div>Same model, int8-quantized \u2014 ~100&nbsp;MB vs ~180&nbsp;MB (smaller download). Runs on\n              WASM (slower encode than the fp16 version); masks are near-identical. Pick it on slow\n              connections.</div>\n          </div>\n          <div class=\"text-sm\" style=\"opacity: 0.75\">\n            The choice applies to both the box and point tools. Each tool loads its own encoder,\n            so the first click after switching re-encodes once.\n          </div>\n        </div>\n      </p-overlayPanel>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM, client-side)\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"segmentCellpose.emit()\">\n        <img src=\"assets/plotting/cells.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n\n      <!-- YOLO: detect objects across the current view. Unlike the SAM and\n           cellpose tools it takes no prompt \u2014 a detector finds objects in a\n           field rather than being pointed at one \u2014 so there is nothing to draw\n           first. Split button: run, pick checkpoint, open parameters. -->\n      <span *ngIf=\"yoloModels.length\" class=\"p-buttonset segment-split\">\n        <p-button icon=\"pi pi-microchip-ai\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Detect objects in the current view with YOLO (client-side)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"detectYolo.emit()\">\n        </p-button>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the YOLO model\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"yoloModelMenu.toggle($event)\">\n        </p-button>\n        <p-button icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"YOLO parameters\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"openYoloParams.emit()\">\n        </p-button>\n      </span>\n      <p-menu #yoloModelMenu [model]=\"yoloMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button icon=\"pi pi-question-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Help\" tooltipPosition=\"bottom\"\n                (onClick)=\"showHelp()\">\n      </p-button>\n    </ng-container>\n\n  </div>\n</p-toolbar>\n<p-dialog header=\"Plotting help\" [(visible)]=\"displayHelpDialog\" [modal]=\"true\" [style]=\"{width: '50vw'}\"\n          [maximizable]=\"true\" [draggable]=\"false\" [resizable]=\"false\">\n  <p>Click a file in the left-hand tree to display it. By default it opens in the\n    <b>Image</b> view \u2014 a natively tiled, deeply zoomable raster (OpenSeadragon) with a\n    navigator minimap and a physical-units scale bar. <b>Click the image to zoom</b> toward\n    the clicked point; scroll to zoom and drag to pan. When a stack is open, a slice slider\n    (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\"/>\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach\n    this toolbar into a floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized:\n    <b>Image</b>, <b>Contour</b>, <b>Scatter (regions)</b>, <b>Surface (3D)</b>,\n    <b>Scatter 3D</b>, and <b>Isosurface (3D)</b>. Scalar and 3D types require a grayscale\n    image (the 3D volume types also require a z-stack). The non-image views render with\n    Plotly and support \"real zooming\" (a downscaled overview that re-fetches higher\n    resolution as you zoom in).\n  </p>\n  <ul>\n    <li>\"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are\n      drawn for, mapped onto the volume's real intensity range.</li>\n    <li>\"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>,\n      pan <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>,\n      turntable <i class=\"pi pi-sync\"></i>, and reset camera <i class=\"pi pi-home\"></i>;\n      scroll to zoom the 3D scene.</li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\">:\n      opens the Region Editor as a floating, draggable dialog \u2014 a per-image table of every region\n      (class, colour, area) with bulk select/label/colour/delete and GeoJSON import/export. It stays\n      in sync with the image, so you can keep it open while drawing.</li>\n    <li>\"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\">\n      (<i>work in progress \u2014 not yet stable</i>): adds a coloured line ROI; a floating inset\n      chart plots intensity along each line, updates live as you drag it, and re-samples at the\n      current zoom resolution. Each added line gets its own colour; select a line and use the\n      trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).</li>\n    <li>\"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\">:\n      opens a floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap\n      dropdown (default: inverted greys).</li>\n    <li>\"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\">\n      (Image view only): the image opens showing <b>raw pixels</b> (nearest-neighbour), so\n      zooming in renders crisp blocks for pixel inspection. Toggle this on for bilinear\n      smoothing; the icon turns white while smoothing is active.</li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image\n      to its original dimensions. In stack mode it also resets to single-image mode.</li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\">\n      (<kbd>b</kbd>): drag a box to select an area to zoom into.</li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step,\n      stopping at the original image dimensions.</li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>By default no tool is selected (all greyed-out); selecting a tool highlights it. The\n    vertex-editing tools (polygon, add/delete vertex, move, B\u00E9zier conversions) are available\n    in the <b>Image</b> view only. On a <b>donut</b> (a region with a hole), the inner-ring\n    vertices are editable too \u2014 drag, add, and delete them just like the outer ring.</p>\n  <ul>\n    <li>\"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode\n      that turns off whatever drawing tool was active (wand, vertex eraser, rectangle, etc.).\n      Use it to step out of editing without picking another tool.</li>\n    <li>\"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to\n      create a rectangular region.</li>\n    <li>\"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\">\n      (<kbd>l</kbd>): draw an open (non-closed) polyline by clicking and dragging. Polylines can\n      be edited and exported to GeoJSON as a <code>LineString</code> feature.</li>\n    <li>\"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to\n      draw a closed freeform polygon.</li>\n    <li>\"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\">: click\n      and drag to paint a region with a circular brush \u2014 the painted stroke is the region.\n      A <b>Size</b> slider (brush diameter, in image pixels) appears in the toolbar while the\n      brush is active. Hold <kbd>Shift</kbd> while painting to <b>erase</b> (subtract) from a\n      region instead. Painting over an existing region extends it; brushing across two regions\n      merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the\n      enclosed area empty \u2014 a <b>donut</b> (Image view).</li>\n    <li>\"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\">:\n      click to place each vertex; click the first point to close the polygon.</li>\n    <li>\"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\">:\n      click an edge of the selected polygon to insert a new vertex.</li>\n    <li>\"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\">:\n      click a vertex of the selected polygon to remove it.</li>\n    <li>\"<b>Move region</b>\" <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\">:\n      drag to move the selected region.</li>\n    <li>\"<b>To B\u00E9zier</b>\" <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\"> /\n      \"<b>To polygon</b>\" <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\">:\n      convert the selected region to a smooth B\u00E9zier curve, or back to a straight-edged polygon.</li>\n    <li>\"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\"> (<kbd>w</kbd>):\n      click to grow a region from pixels with similar values around the click point. Hold\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an exact-match flood fill; drag to keep extending the\n      selection while moving; hold <kbd>Shift</kbd> while clicking or dragging on an existing\n      region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that appears to make the\n      wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending the\n      same region; clicking inside an existing region adopts it, and growing into another region\n      merges them.</li>\n    <li>\"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag\n      to remove polygon vertices that fall inside the cursor circle from any region, including a\n      region's inner rings (donut holes). Use the <b>Radius</b> slider to set the eraser size in\n      image pixels. Polygons reduced below 3 vertices (or polylines below 2) are deleted entirely;\n      a hole reduced below 3 vertices is removed.</li>\n    <li>\"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the\n      last region action (draw, delete, edit, wand/brush stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.</li>\n    <li>\"<b>Redo</b>\" <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>):\n      re-applies the most recently undone action. Performing a new region action clears what can be redone.</li>\n    <li>\"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected\n      region. This can also be done from the Region Editor.</li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>Right-click a region \u2014 or the current multi-selection \u2014 to open the\n    \"<b>Selected region(s)</b>\" group at the top of the context menu. These act immediately on\n    the selection (they're not drawing modes) and are fully undo/redo-able:</p>\n  <ul>\n    <li>\"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on\n      the image (also in the Region Editor toolbar).</li>\n    <li>\"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch,\n      the result is a single multi-part region (sparse \"bits\").</li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image\n      rectangle with the selected regions punched out as holes. Works at any image size.</li>\n    <li>\"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude\n      threshold in pixels \u2014 pick <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px),\n      <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a slider. Applies to the exterior and any\n      holes (and every part of a multi-part region).</li>\n    <li>The B\u00E9zier conversions and Delete also live in this group (the right-click equivalents of\n      the toolbar / vertex tools above).</li>\n  </ul>\n\n  <h3>Segmentation tools (SAM &amp; cellpose)</h3>\n  <p>AI-assisted segmentation that runs entirely in the browser. The box and point\n    tools use a promptable <b>micro-sam</b> model; the cellpose tool auto-detects cells.\n    Generated regions inherit the color of the rectangle they came from. The first run\n    downloads the model (a progress toast is shown); it's then cached.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/picture-segmentation.svg\" width=\"15\" height=\"15\">\n      (box prompt): draw one or more <b>Rectangular regions</b> around the objects of interest,\n      then click Segment. Each rectangle is replaced by the SAM mask of the object inside it.</li>\n    <li>\"<b>Point prompts</b>\" <img src=\"assets/plotting/click.svg\" width=\"15\" height=\"15\">: click directly on an object to\n      segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking another\n      object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it,\n      <kbd>Enter</kbd> commits it.</li>\n    <li>\"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the\n      Segment button chooses the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or\n      <b>micro-sam ViT-B</b> (larger, highest accuracy) for light microscopy, or\n      <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). The choice applies to\n      <i>both</i> the box and point tools. The <i class=\"pi pi-info-circle\"></i> info button next\n      to it explains the trade-off.</li>\n    <li>\"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\">: draw rectangles, then click Cellpose to\n      automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one\n      region per detected cell. No clicking on individual cells needed.</li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr><td><kbd>+</kbd> / <kbd>=</kbd></td><td>Zoom in</td></tr>\n    <tr><td><kbd>-</kbd></td><td>Zoom out</td></tr>\n    <tr><td><kbd>b</kbd></td><td>Toggle zoom box mode</td></tr>\n    <tr><td><kbd>p</kbd></td><td>Toggle pan mode</td></tr>\n    <tr><td><kbd>f</kbd></td><td>Toggle freeform region drawing</td></tr>\n    <tr><td><kbd>l</kbd></td><td>Toggle polyline drawing</td></tr>\n    <tr><td><kbd>r</kbd></td><td>Toggle rectangular region drawing</td></tr>\n    <tr><td><kbd>w</kbd></td><td>Toggle wand tool</td></tr>\n    <tr><td>Wand + <kbd>Shift</kbd></td><td>Erase pixels from the active region</td></tr>\n    <tr><td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td><td>Exact-match flood fill (no smoothing)</td></tr>\n    <tr><td><kbd>e</kbd></td><td>Toggle vertex eraser</td></tr>\n    <tr><td><kbd>s</kbd></td><td>Selection mode (deactivates drawing tools)</td></tr>\n    <tr><td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td><td>Add an exclude point (refine the current object)</td></tr>\n    <tr><td><kbd>Enter</kbd></td><td>Commit the current SAM point object</td></tr>\n    <tr><td><kbd>Esc</kbd></td><td>Undo the current SAM point object</td></tr>\n    <tr><td><kbd>Del</kbd> / <kbd>\u232B</kbd></td><td>Delete selected region</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td><td>Undo the last region action (up to 10)</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td><td>Redo the last undone region action</td></tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"displayHelpDialog=false\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}.toolbar-text{color:var(--primary-color);font-size:.875rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}::ng-deep .plotmode-item{display:inline-flex;align-items:center;gap:.5rem;color:#000}::ng-deep .plotmode-item i{font-size:1rem;color:var(--primary-color)}::ng-deep .plotmode-item .plotmode-icon-img{width:1.1rem;height:1.1rem;object-fit:contain;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}.wand-sensitivity-value{min-width:2rem;text-align:right}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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: "component", type: i6.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i7.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: i8.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: "component", type: i9.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i11.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }, { kind: "component", type: i13.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'plotting-toolbar', template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Plot type: available for any image (grayscale or RGB). -->\n    <ng-container *ngIf=\"imageInfo && tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-dropdown [options]=\"plotTypeOptions\" optionLabel=\"label\" optionValue=\"type\"\n                  [(ngModel)]=\"selectedPlotType\" appendTo=\"body\"\n                  pTooltip=\"Select plot type\" tooltipPosition=\"bottom\"\n                  [style]=\"{'min-width': '11rem'}\"\n                  styleClass=\"plotmode-dropdown\" panelStyleClass=\"plotmode-panel\"\n                  (onChange)=\"selectPlotType.emit($event.value)\">\n        <ng-template let-opt pTemplate=\"selectedItem\">\n          <span class=\"plotmode-item\" *ngIf=\"opt\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n        <ng-template let-opt pTemplate=\"item\">\n          <span class=\"plotmode-item\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n      </p-dropdown>\n      <ng-container *ngIf=\"isIsosurfaceMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Iso</span>\n        <p-slider [(ngModel)]=\"isoRange\" [range]=\"true\"\n                  [min]=\"isoValueMin\" [max]=\"isoValueMax\" [step]=\"isoValueStep\"\n                  (onChange)=\"isoRangeChange.emit($event.values)\"\n                  pTooltip=\"Isosurface band (0\u2013255), mapped onto the volume's\n                  actual intensity range. Surfaces are drawn for voxels whose\n                  intensity falls in the selected band \u2014 narrow it to isolate\n                  features, widen it to see the whole structure.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ isoRange[0] }}\u2013{{ isoRange[1] }}</span>\n      </ng-container>\n      <!-- Intensity tools (Heatmap / Image mode): add another colored line ROI.\n           Each added line gets the next bright palette colour and its own inset\n           trace; select a line on the image and use the trash tool to remove it\n           (and its trace). The lines are Region-based but excluded from the\n           Region Editor and exports. -->\n      <ng-container *ngIf=\"isIntensityCapable\">\n        <span class=\"toolbar-separator\"></span>\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Add an intensity line (new colour). Click a line to select it,\n                  then use the trash tool to remove it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"addProfileLine.emit()\">\n          <img src=\"assets/plotting/spline-chart.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n    </ng-container>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button *ngIf=\"tools.specialTools\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openChannelHistogram.emit()\">\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button *ngIf=\"tools.specialTools && isImageView\" size=\"small\"\n              [text]=\"!imageSmoothingEnabled\"\n              pTooltip=\"Smoothen (turn on image smoothing)\" tooltipPosition=\"bottom\"\n              (onClick)=\"toggleImageSmoothing.emit()\">\n      <img src=\"assets/plotting/smooth.svg\" style=\"width: 1rem\"\n           [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"/>\n    </p-button>\n\n    <!-- Stack controls -->\n    <ng-container *ngIf=\"imageInfo?.isStack\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Image view: scrub z-slices live (the renderer swaps slices in place). -->\n      <ng-container *ngIf=\"showsLiveSliceScrubber\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <p-slider [(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n                  (onChange)=\"zScrub.emit($event.value)\" (onSlideEnd)=\"zSlide.emit($event.value)\"\n                  pTooltip=\"Slice through the stack (\u2190 / \u2192 keys)\" tooltipPosition=\"bottom\"\n                  [style]=\"{'width':'16rem'}\" styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">{{zIndex}} of {{maxIndex}}</span>\n      </ng-container>\n      <!-- Heatmap view: single-image (high-def zoom) vs stack (frame slider). Plotly-only \u2014\n           hidden for napari, which has no single/stack toggle or per-frame fetch. -->\n      <ng-container *ngIf=\"!showsLiveSliceScrubber && !isNapariMode\">\n      <p-button icon=\"pi pi-image\" size=\"small\"\n                [text]=\"imageInfo?.showStack\"\n                pTooltip=\"Single image mode: enables high-def zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[0])\">\n      </p-button>\n      <p-button icon=\"pi pi-images\" size=\"small\"\n                [text]=\"!imageInfo?.showStack\"\n                pTooltip=\"Stack mode, enables slicing through image frames\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[1])\">\n      </p-button>\n      <ng-container *ngIf=\"!imageInfo?.showStack\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <div class=\"p-inputgroup\" style=\"width: auto\">\n          <p-inputNumber styleClass=\"w-3rem toolbar-input\"\n\t\t\t\t\tpTooltip=\"View image in stack (&#x23CE;)\"\n\t\t\t\t\t[(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n           (onInput)=\"zIndexInput.emit(zIndex)\" (keydown.enter)=\"reloadAndPlot.emit()\"/>\n          <p-button icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\" (onClick)=\"reloadAndPlot.emit()\"\n                    pTooltip=\"Plot this slice\" tooltipPosition=\"bottom\">\n          </p-button>\n        </div>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">of {{maxIndex}}</span>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-download\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Download image as PNG\" tooltipPosition=\"bottom\"\n                (onClick)=\"downloadImage.emit()\">\n      </p-button>\n      <p-button *ngIf=\"isHeatmap\" icon=\"pi pi-window-maximize\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Fit to view\" tooltipPosition=\"bottom\"\n                (onClick)=\"autoscaleImage.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n         covers this and a bare drag pans natively, so it's hidden in image view. -->\n    <ng-container *ngIf=\"isHeatmap && tools.zoomTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button *ngIf=\"!isImageView\" icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeDragMode !== 'zoom'\"\n                pTooltip=\"Zoom drag\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoom')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'zoomToBox'\"\n                pTooltip=\"Zoom box (<kbd>b</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoomToBox')\">\n        <img src=\"assets/plotting/zoom-box.svg\"\n             [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeDragMode !== 'pan'\"\n                pTooltip=\"Pan the image (<kbd>p</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-search-plus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom in (<kbd>+</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomIn.emit()\">\n      </p-button>\n      <p-button icon=\"pi pi-search-minus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom out (<kbd>-</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomOut.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Surface 3D controls -->\n    <ng-container *ngIf=\"!isHeatmap\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'zoom'\"\n                pTooltip=\"Zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('zoom')\">\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'pan'\"\n                pTooltip=\"Pan\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-globe\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'orbit'\"\n                pTooltip=\"Orbital rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('orbit')\">\n      </p-button>\n      <p-button icon=\"pi pi-sync\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'turntable'\"\n                pTooltip=\"Turntable rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('turntable')\">\n      </p-button>\n      <p-button icon=\"pi pi-home\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Reset camera to default\" tooltipPosition=\"bottom\"\n                (onClick)=\"resetSurfaceCamera.emit()\">\n      </p-button>\n      <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n           `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n           (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n      <p-button size=\"small\" *ngIf=\"isNapariMode\" styleClass=\"p-button-icon-only\"\n                [text]=\"!axesVisible\"\n                pTooltip=\"Toggle 3D axes / scale\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleAxes.emit()\">\n        <img src=\"assets/plotting/3d-coordinates.svg\"\n             [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n      <p-button icon=\"pi pi-share-alt\" size=\"small\" *ngIf=\"isNapariSurfaceMode\"\n                [text]=\"!wireframeActive\"\n                pTooltip=\"Toggle wireframe\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleWireframe.emit()\">\n      </p-button>\n      <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n      <ng-container *ngIf=\"isNapari3dMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n        <p-dropdown [options]=\"decimateOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"resolutionScale\" appendTo=\"body\"\n                    pTooltip=\"Resolution (decimate factor)\" tooltipPosition=\"bottom\"\n                    [style]=\"{'min-width': '6rem'}\"\n                    (onChange)=\"selectResolution.emit($event.value)\">\n        </p-dropdown>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"isHeatmap && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Region Editor: opens the editor as a floating dialog (formerly the\n           right-panel Regions tab). Sits with the region drawing tools. -->\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Open the Region Editor\" tooltipPosition=\"bottom\"\n                (onClick)=\"openRegionEditor.emit()\">\n        <img src=\"assets/plotting/region-editor.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Region drawing tools -->\n      <p-button icon=\"pi pi-arrow-up-right\" size=\"small\"\n                [text]=\"activeDragMode !== 'select'\"\n                pTooltip=\"Selection mode (<kbd>s</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('select')\">\n      </p-button>\n      <p-button icon=\"pi pi-stop\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawrect'\"\n                pTooltip=\"Draw a rectangular region (<kbd>r</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawrect')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'drawopenpath'\"\n                pTooltip=\"Draw a polyline (<kbd>l</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawopenpath')\">\n        <img src=\"assets/plotting/polyline.svg\"\n             [class]=\"activeDragMode === 'drawopenpath' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-pencil\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawclosedpath'\"\n                pTooltip=\"Draw a freeform region (<kbd>f</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawclosedpath')\">\n      </p-button>\n      <!-- Brush: paint a region by dragging a disc of the given size; the Size\n           slider appears while it's active. Hold Shift to erase (subtract). -->\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'brush'\"\n                pTooltip=\"Brush: click and drag to paint a region.\n                <br>Hold <kbd>Shift</kbd> while painting to erase from a region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('brush')\">\n        <img src=\"assets/plotting/paintbrush.svg\"\n             [class]=\"activeDragMode === 'brush' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'brush'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Size</span>\n        <p-slider [(ngModel)]=\"brushSize\"\n                  [min]=\"brushSizeMin\" [max]=\"brushSizeMax\" [step]=\"brushSizeStep\"\n                  (onChange)=\"brushSizeChange.emit($event.value)\"\n                  pTooltip=\"Brush diameter in image pixels.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ brushSize }}</span>\n      </ng-container>\n\n      <!-- Vertex editing \u2014 backends with a vertex-editing overlay (OSD + napari-js image). -->\n      <ng-container *ngIf=\"supportsRegionVertexTools\">\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'drawpolygon'\"\n                  pTooltip=\"Polygon: click to place each vertex; click the first point to close\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('drawpolygon')\">\n          <img src=\"assets/plotting/polygon-vertices.svg\"\n               [class]=\"activeDragMode === 'drawpolygon' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'addpoint'\"\n                  pTooltip=\"Add a vertex: click an edge of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('addpoint')\">\n          <img src=\"assets/plotting/vertex-add.svg\"\n               [class]=\"activeDragMode === 'addpoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'deletepoint'\"\n                  pTooltip=\"Delete a vertex: click a vertex of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('deletepoint')\">\n          <img src=\"assets/plotting/vertex-delete.svg\"\n               [class]=\"activeDragMode === 'deletepoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'wand'\"\n                pTooltip=\"Wand: click and drag to grow a region by similar pixel values (<kbd>w</kbd>).\n                <br>Hold <kbd>Shift</kbd> while clicking or dragging on a region to erase pixels from it.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('wand')\">\n        <img src=\"assets/plotting/wand.svg\"\n             [class]=\"activeDragMode === 'wand' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'wand'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Sens.</span>\n        <p-slider [(ngModel)]=\"wandSensitivity\"\n                  [min]=\"wandSensitivityMin\" [max]=\"wandSensitivityMax\" [step]=\"wandSensitivityStep\"\n                  (onChange)=\"wandSensitivityChange.emit($event.value)\"\n                  pTooltip=\"Higher = stricter (smaller selection); lower = looser.\n                  Takes effect from the next click/drag tick.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ wandSensitivity.toFixed(1) }}</span>\n      </ng-container>\n      <p-button icon=\"pi pi-eraser\" size=\"small\"\n                [text]=\"activeDragMode !== 'eraseVertex'\"\n                pTooltip=\"Vertex eraser (<kbd>e</kbd>): click or drag to remove polygon vertices inside\n                the cursor circle from any region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('eraseVertex')\">\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'eraseVertex'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Radius</span>\n        <p-slider [(ngModel)]=\"vertexEraserRadius\"\n                  [min]=\"vertexEraserRadiusMin\" [max]=\"vertexEraserRadiusMax\" [step]=\"vertexEraserRadiusStep\"\n                  (onChange)=\"vertexEraserRadiusChange.emit($event.value)\"\n                  pTooltip=\"Eraser radius in image pixels.\n                  Vertices within this distance of the cursor are removed.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ vertexEraserRadius }}</span>\n      </ng-container>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canUndo\"\n                pTooltip=\"Undo the last region action (<kbd>Ctrl</kbd>+<kbd>Z</kbd>).\n                Up to 10 actions can be undone.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"undoRegion.emit()\">\n        <img src=\"assets/plotting/undo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canRedo\"\n                pTooltip=\"Redo the last undone region action\n                (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>).\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"redoRegion.emit()\">\n        <img src=\"assets/plotting/redo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-trash\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Delete selected region (<kbd>Del</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"deleteRegion.emit()\">\n      </p-button>\n      <!-- SAM (jit-ui#90): box-prompt segment, interactive point prompts, and a\n           model picker. -->\n      <span class=\"toolbar-separator\"></span>\n      <!-- SAM controls grouped: box-prompt Segment, then the point-prompt tool,\n           then the model-picker dropdown (the chevron) which governs BOTH tools.\n           Falls back to Segment + point with no model picker when none are set. -->\n      <span *ngIf=\"samModels.length; else segmentPlain\" class=\"p-buttonset segment-split\">\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRegions.emit()\">\n          <img src=\"assets/plotting/picture-segmentation.svg\"\n               class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n        <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the SAM model (used by both segment tools)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"samModelMenu.toggle($event)\">\n        </p-button>\n      </span>\n      <ng-template #segmentPlain>\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"segmentRegions.emit()\">\n            <img src=\"assets/plotting/picture-segmentation.svg\"\n                 class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n          </p-button>\n          <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        </span>\n      </ng-template>\n      <!-- Point-prompt tool \u2014 shared between the models / no-models layouts so it\n           always sits just left of the model dropdown. -->\n      <ng-template #samPointBtn>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'samPoint'\"\n                  pTooltip=\"SAM point prompts: click a fiber to segment it as a new region;\n                  Shift/Alt-click to refine (exclude) the current one.<br>Esc undoes it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('samPoint')\">\n          <img src=\"assets/plotting/click.svg\"\n               [class]=\"activeDragMode === 'samPoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-template>\n      <p-menu #samModelMenu [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <!-- Help: explains the ViT-T vs ViT-B trade-off behind the model picker. -->\n      <p-button *ngIf=\"samModels.length\" icon=\"pi pi-info-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"About the SAM models\" tooltipPosition=\"bottom\"\n                (onClick)=\"samModelInfo.toggle($event)\">\n      </p-button>\n      <p-overlayPanel #samModelInfo appendTo=\"body\" styleClass=\"sam-model-info\">\n        <div style=\"max-width: 24rem; line-height: 1.4\">\n          <div class=\"font-bold mb-1\">SAM models</div>\n          <p class=\"mt-0 mb-2\">\n            All are promptable Segment Anything models finetuned for biomedical images. They differ\n            in the <i>image encoder</i> (the heavy once-per-image step) and the training domain \u2014\n            box and point prompting behave the same.\n          </p>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">micro-sam ViT-T <span class=\"font-normal\">(default)</span></div>\n            <div>Light-microscopy finetuned. TinyViT encoder, ~14&nbsp;MB, very fast, runs on WASM.\n              Good mask quality \u2014 best for quick interactive work and many/large objects.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">micro-sam ViT-B</div>\n            <div>Light-microscopy finetuned. ViT-Base encoder, ~172&nbsp;MB, slower, GPU-accelerated\n              (WebGPU). Highest accuracy \u2014 when ViT-T misses subtle or overlapping boundaries.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">patho-sam ViT-B</div>\n            <div>Histopathology finetuned (H&amp;E / stained tissue). ViT-Base encoder, GPU-accelerated.\n              Use it for pathology slides \u2014 it segments tissue/nuclei better than the microscopy models.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">patho-sam ViT-B (int8)</div>\n            <div>Same model, int8-quantized \u2014 ~100&nbsp;MB vs ~180&nbsp;MB (smaller download). Runs on\n              WASM (slower encode than the fp16 version); masks are near-identical. Pick it on slow\n              connections.</div>\n          </div>\n          <div class=\"text-sm\" style=\"opacity: 0.75\">\n            The choice applies to both the box and point tools. Each tool loads its own encoder,\n            so the first click after switching re-encodes once.\n          </div>\n        </div>\n      </p-overlayPanel>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM, client-side)\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"segmentCellpose.emit()\">\n        <img src=\"assets/plotting/cells.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button icon=\"pi pi-question-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Help\" tooltipPosition=\"bottom\"\n                (onClick)=\"showHelp()\">\n      </p-button>\n    </ng-container>\n\n  </div>\n</p-toolbar>\n<p-dialog header=\"Plotting help\" [(visible)]=\"displayHelpDialog\" [modal]=\"true\" [style]=\"{width: '50vw'}\"\n          [maximizable]=\"true\" [draggable]=\"false\" [resizable]=\"false\">\n  <p>Click a file in the left-hand tree to display it. By default it opens in the\n    <b>Image</b> view \u2014 a natively tiled, deeply zoomable raster (OpenSeadragon) with a\n    navigator minimap and a physical-units scale bar. <b>Click the image to zoom</b> toward\n    the clicked point; scroll to zoom and drag to pan. When a stack is open, a slice slider\n    (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\"/>\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach\n    this toolbar into a floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized:\n    <b>Image</b>, <b>Contour</b>, <b>Scatter (regions)</b>, <b>Surface (3D)</b>,\n    <b>Scatter 3D</b>, and <b>Isosurface (3D)</b>. Scalar and 3D types require a grayscale\n    image (the 3D volume types also require a z-stack). The non-image views render with\n    Plotly and support \"real zooming\" (a downscaled overview that re-fetches higher\n    resolution as you zoom in).\n  </p>\n  <ul>\n    <li>\"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are\n      drawn for, mapped onto the volume's real intensity range.</li>\n    <li>\"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>,\n      pan <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>,\n      turntable <i class=\"pi pi-sync\"></i>, and reset camera <i class=\"pi pi-home\"></i>;\n      scroll to zoom the 3D scene.</li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\">:\n      opens the Region Editor as a floating, draggable dialog \u2014 a per-image table of every region\n      (class, colour, area) with bulk select/label/colour/delete and GeoJSON import/export. It stays\n      in sync with the image, so you can keep it open while drawing.</li>\n    <li>\"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\">\n      (<i>work in progress \u2014 not yet stable</i>): adds a coloured line ROI; a floating inset\n      chart plots intensity along each line, updates live as you drag it, and re-samples at the\n      current zoom resolution. Each added line gets its own colour; select a line and use the\n      trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).</li>\n    <li>\"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\">:\n      opens a floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap\n      dropdown (default: inverted greys).</li>\n    <li>\"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\">\n      (Image view only): the image opens showing <b>raw pixels</b> (nearest-neighbour), so\n      zooming in renders crisp blocks for pixel inspection. Toggle this on for bilinear\n      smoothing; the icon turns white while smoothing is active.</li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image\n      to its original dimensions. In stack mode it also resets to single-image mode.</li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\">\n      (<kbd>b</kbd>): drag a box to select an area to zoom into.</li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step,\n      stopping at the original image dimensions.</li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>By default no tool is selected (all greyed-out); selecting a tool highlights it. The\n    vertex-editing tools (polygon, add/delete vertex, move, B\u00E9zier conversions) are available\n    in the <b>Image</b> view only. On a <b>donut</b> (a region with a hole), the inner-ring\n    vertices are editable too \u2014 drag, add, and delete them just like the outer ring.</p>\n  <ul>\n    <li>\"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode\n      that turns off whatever drawing tool was active (wand, vertex eraser, rectangle, etc.).\n      Use it to step out of editing without picking another tool.</li>\n    <li>\"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to\n      create a rectangular region.</li>\n    <li>\"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\">\n      (<kbd>l</kbd>): draw an open (non-closed) polyline by clicking and dragging. Polylines can\n      be edited and exported to GeoJSON as a <code>LineString</code> feature.</li>\n    <li>\"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to\n      draw a closed freeform polygon.</li>\n    <li>\"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\">: click\n      and drag to paint a region with a circular brush \u2014 the painted stroke is the region.\n      A <b>Size</b> slider (brush diameter, in image pixels) appears in the toolbar while the\n      brush is active. Hold <kbd>Shift</kbd> while painting to <b>erase</b> (subtract) from a\n      region instead. Painting over an existing region extends it; brushing across two regions\n      merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the\n      enclosed area empty \u2014 a <b>donut</b> (Image view).</li>\n    <li>\"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\">:\n      click to place each vertex; click the first point to close the polygon.</li>\n    <li>\"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\">:\n      click an edge of the selected polygon to insert a new vertex.</li>\n    <li>\"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\">:\n      click a vertex of the selected polygon to remove it.</li>\n    <li>\"<b>Move region</b>\" <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\">:\n      drag to move the selected region.</li>\n    <li>\"<b>To B\u00E9zier</b>\" <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\"> /\n      \"<b>To polygon</b>\" <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\">:\n      convert the selected region to a smooth B\u00E9zier curve, or back to a straight-edged polygon.</li>\n    <li>\"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\"> (<kbd>w</kbd>):\n      click to grow a region from pixels with similar values around the click point. Hold\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an exact-match flood fill; drag to keep extending the\n      selection while moving; hold <kbd>Shift</kbd> while clicking or dragging on an existing\n      region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that appears to make the\n      wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending the\n      same region; clicking inside an existing region adopts it, and growing into another region\n      merges them.</li>\n    <li>\"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag\n      to remove polygon vertices that fall inside the cursor circle from any region, including a\n      region's inner rings (donut holes). Use the <b>Radius</b> slider to set the eraser size in\n      image pixels. Polygons reduced below 3 vertices (or polylines below 2) are deleted entirely;\n      a hole reduced below 3 vertices is removed.</li>\n    <li>\"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the\n      last region action (draw, delete, edit, wand/brush stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.</li>\n    <li>\"<b>Redo</b>\" <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>):\n      re-applies the most recently undone action. Performing a new region action clears what can be redone.</li>\n    <li>\"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected\n      region. This can also be done from the Region Editor.</li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>Right-click a region \u2014 or the current multi-selection \u2014 to open the\n    \"<b>Selected region(s)</b>\" group at the top of the context menu. These act immediately on\n    the selection (they're not drawing modes) and are fully undo/redo-able:</p>\n  <ul>\n    <li>\"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on\n      the image (also in the Region Editor toolbar).</li>\n    <li>\"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch,\n      the result is a single multi-part region (sparse \"bits\").</li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image\n      rectangle with the selected regions punched out as holes. Works at any image size.</li>\n    <li>\"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude\n      threshold in pixels \u2014 pick <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px),\n      <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a slider. Applies to the exterior and any\n      holes (and every part of a multi-part region).</li>\n    <li>The B\u00E9zier conversions and Delete also live in this group (the right-click equivalents of\n      the toolbar / vertex tools above).</li>\n  </ul>\n\n  <h3>Segmentation tools (SAM &amp; cellpose)</h3>\n  <p>AI-assisted segmentation that runs entirely in the browser. The box and point\n    tools use a promptable <b>micro-sam</b> model; the cellpose tool auto-detects cells.\n    Generated regions inherit the color of the rectangle they came from. The first run\n    downloads the model (a progress toast is shown); it's then cached.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/picture-segmentation.svg\" width=\"15\" height=\"15\">\n      (box prompt): draw one or more <b>Rectangular regions</b> around the objects of interest,\n      then click Segment. Each rectangle is replaced by the SAM mask of the object inside it.</li>\n    <li>\"<b>Point prompts</b>\" <img src=\"assets/plotting/click.svg\" width=\"15\" height=\"15\">: click directly on an object to\n      segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking another\n      object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it,\n      <kbd>Enter</kbd> commits it.</li>\n    <li>\"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the\n      Segment button chooses the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or\n      <b>micro-sam ViT-B</b> (larger, highest accuracy) for light microscopy, or\n      <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). The choice applies to\n      <i>both</i> the box and point tools. The <i class=\"pi pi-info-circle\"></i> info button next\n      to it explains the trade-off.</li>\n    <li>\"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\">: draw rectangles, then click Cellpose to\n      automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one\n      region per detected cell. No clicking on individual cells needed.</li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr><td><kbd>+</kbd> / <kbd>=</kbd></td><td>Zoom in</td></tr>\n    <tr><td><kbd>-</kbd></td><td>Zoom out</td></tr>\n    <tr><td><kbd>b</kbd></td><td>Toggle zoom box mode</td></tr>\n    <tr><td><kbd>p</kbd></td><td>Toggle pan mode</td></tr>\n    <tr><td><kbd>f</kbd></td><td>Toggle freeform region drawing</td></tr>\n    <tr><td><kbd>l</kbd></td><td>Toggle polyline drawing</td></tr>\n    <tr><td><kbd>r</kbd></td><td>Toggle rectangular region drawing</td></tr>\n    <tr><td><kbd>w</kbd></td><td>Toggle wand tool</td></tr>\n    <tr><td>Wand + <kbd>Shift</kbd></td><td>Erase pixels from the active region</td></tr>\n    <tr><td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td><td>Exact-match flood fill (no smoothing)</td></tr>\n    <tr><td><kbd>e</kbd></td><td>Toggle vertex eraser</td></tr>\n    <tr><td><kbd>s</kbd></td><td>Selection mode (deactivates drawing tools)</td></tr>\n    <tr><td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td><td>Add an exclude point (refine the current object)</td></tr>\n    <tr><td><kbd>Enter</kbd></td><td>Commit the current SAM point object</td></tr>\n    <tr><td><kbd>Esc</kbd></td><td>Undo the current SAM point object</td></tr>\n    <tr><td><kbd>Del</kbd> / <kbd>\u232B</kbd></td><td>Delete selected region</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td><td>Undo the last region action (up to 10)</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td><td>Redo the last undone region action</td></tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"displayHelpDialog=false\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}.toolbar-text{color:var(--primary-color);font-size:.875rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}::ng-deep .plotmode-item{display:inline-flex;align-items:center;gap:.5rem;color:#000}::ng-deep .plotmode-item i{font-size:1rem;color:var(--primary-color)}::ng-deep .plotmode-item .plotmode-icon-img{width:1.1rem;height:1.1rem;object-fit:contain;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}.wand-sensitivity-value{min-width:2rem;text-align:right}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"] }]
+            args: [{ selector: 'plotting-toolbar', template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Plot type: available for any image (grayscale or RGB). -->\n    <ng-container *ngIf=\"imageInfo && tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-dropdown [options]=\"plotTypeOptions\" optionLabel=\"label\" optionValue=\"type\"\n                  [(ngModel)]=\"selectedPlotType\" appendTo=\"body\"\n                  pTooltip=\"Select plot type\" tooltipPosition=\"bottom\"\n                  [style]=\"{'min-width': '11rem'}\"\n                  styleClass=\"plotmode-dropdown\" panelStyleClass=\"plotmode-panel\"\n                  (onChange)=\"selectPlotType.emit($event.value)\">\n        <ng-template let-opt pTemplate=\"selectedItem\">\n          <span class=\"plotmode-item\" *ngIf=\"opt\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n        <ng-template let-opt pTemplate=\"item\">\n          <span class=\"plotmode-item\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n      </p-dropdown>\n      <ng-container *ngIf=\"isIsosurfaceMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Iso</span>\n        <p-slider [(ngModel)]=\"isoRange\" [range]=\"true\"\n                  [min]=\"isoValueMin\" [max]=\"isoValueMax\" [step]=\"isoValueStep\"\n                  (onChange)=\"isoRangeChange.emit($event.values)\"\n                  pTooltip=\"Isosurface band (0\u2013255), mapped onto the volume's\n                  actual intensity range. Surfaces are drawn for voxels whose\n                  intensity falls in the selected band \u2014 narrow it to isolate\n                  features, widen it to see the whole structure.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ isoRange[0] }}\u2013{{ isoRange[1] }}</span>\n      </ng-container>\n      <!-- Intensity tools (Heatmap / Image mode): add another colored line ROI.\n           Each added line gets the next bright palette colour and its own inset\n           trace; select a line on the image and use the trash tool to remove it\n           (and its trace). The lines are Region-based but excluded from the\n           Region Editor and exports. -->\n      <ng-container *ngIf=\"isIntensityCapable\">\n        <span class=\"toolbar-separator\"></span>\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Add an intensity line (new colour). Click a line to select it,\n                  then use the trash tool to remove it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"addProfileLine.emit()\">\n          <img src=\"assets/plotting/spline-chart.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n    </ng-container>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button *ngIf=\"tools.specialTools\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openChannelHistogram.emit()\">\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button *ngIf=\"tools.specialTools && isImageView\" size=\"small\"\n              [text]=\"!imageSmoothingEnabled\"\n              pTooltip=\"Smoothen (turn on image smoothing)\" tooltipPosition=\"bottom\"\n              (onClick)=\"toggleImageSmoothing.emit()\">\n      <img src=\"assets/plotting/smooth.svg\" style=\"width: 1rem\"\n           [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"/>\n    </p-button>\n\n    <!-- Stack controls -->\n    <ng-container *ngIf=\"imageInfo?.isStack\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Image view: scrub z-slices live (the renderer swaps slices in place). -->\n      <ng-container *ngIf=\"showsLiveSliceScrubber\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <p-slider [(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n                  (onChange)=\"zScrub.emit($event.value)\" (onSlideEnd)=\"zSlide.emit($event.value)\"\n                  pTooltip=\"Slice through the stack (\u2190 / \u2192 keys)\" tooltipPosition=\"bottom\"\n                  [style]=\"{'width':'16rem'}\" styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">{{zIndex}} of {{maxIndex}}</span>\n      </ng-container>\n      <!-- Heatmap view: single-image (high-def zoom) vs stack (frame slider). Plotly-only \u2014\n           hidden for napari, which has no single/stack toggle or per-frame fetch. -->\n      <ng-container *ngIf=\"!showsLiveSliceScrubber && !isNapariMode\">\n      <p-button icon=\"pi pi-image\" size=\"small\"\n                [text]=\"imageInfo?.showStack\"\n                pTooltip=\"Single image mode: enables high-def zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[0])\">\n      </p-button>\n      <p-button icon=\"pi pi-images\" size=\"small\"\n                [text]=\"!imageInfo?.showStack\"\n                pTooltip=\"Stack mode, enables slicing through image frames\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[1])\">\n      </p-button>\n      <ng-container *ngIf=\"!imageInfo?.showStack\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <div class=\"p-inputgroup\" style=\"width: auto\">\n          <p-inputNumber styleClass=\"w-3rem toolbar-input\"\n\t\t\t\t\tpTooltip=\"View image in stack (&#x23CE;)\"\n\t\t\t\t\t[(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n           (onInput)=\"zIndexInput.emit(zIndex)\" (keydown.enter)=\"reloadAndPlot.emit()\"/>\n          <p-button icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\" (onClick)=\"reloadAndPlot.emit()\"\n                    pTooltip=\"Plot this slice\" tooltipPosition=\"bottom\">\n          </p-button>\n        </div>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">of {{maxIndex}}</span>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-download\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Download image as PNG\" tooltipPosition=\"bottom\"\n                (onClick)=\"downloadImage.emit()\">\n      </p-button>\n      <p-button *ngIf=\"isHeatmap\" icon=\"pi pi-window-maximize\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Fit to view\" tooltipPosition=\"bottom\"\n                (onClick)=\"autoscaleImage.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n         covers this and a bare drag pans natively, so it's hidden in image view. -->\n    <ng-container *ngIf=\"isHeatmap && tools.zoomTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button *ngIf=\"!isImageView\" icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeDragMode !== 'zoom'\"\n                pTooltip=\"Zoom drag\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoom')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'zoomToBox'\"\n                pTooltip=\"Zoom box (<kbd>b</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoomToBox')\">\n        <img src=\"assets/plotting/zoom-box.svg\"\n             [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeDragMode !== 'pan'\"\n                pTooltip=\"Pan the image (<kbd>p</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-search-plus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom in (<kbd>+</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomIn.emit()\">\n      </p-button>\n      <p-button icon=\"pi pi-search-minus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom out (<kbd>-</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomOut.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Surface 3D controls -->\n    <ng-container *ngIf=\"!isHeatmap\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'zoom'\"\n                pTooltip=\"Zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('zoom')\">\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'pan'\"\n                pTooltip=\"Pan\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-globe\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'orbit'\"\n                pTooltip=\"Orbital rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('orbit')\">\n      </p-button>\n      <p-button icon=\"pi pi-sync\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'turntable'\"\n                pTooltip=\"Turntable rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('turntable')\">\n      </p-button>\n      <p-button icon=\"pi pi-home\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Reset camera to default\" tooltipPosition=\"bottom\"\n                (onClick)=\"resetSurfaceCamera.emit()\">\n      </p-button>\n      <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n           `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n           (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n      <p-button size=\"small\" *ngIf=\"isNapariMode\" styleClass=\"p-button-icon-only\"\n                [text]=\"!axesVisible\"\n                pTooltip=\"Toggle 3D axes / scale\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleAxes.emit()\">\n        <img src=\"assets/plotting/3d-coordinates.svg\"\n             [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n      <p-button icon=\"pi pi-share-alt\" size=\"small\" *ngIf=\"isNapariSurfaceMode\"\n                [text]=\"!wireframeActive\"\n                pTooltip=\"Toggle wireframe\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleWireframe.emit()\">\n      </p-button>\n      <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n      <ng-container *ngIf=\"isNapari3dMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n        <p-dropdown [options]=\"decimateOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"resolutionScale\" appendTo=\"body\"\n                    pTooltip=\"Resolution (decimate factor)\" tooltipPosition=\"bottom\"\n                    [style]=\"{'min-width': '6rem'}\"\n                    (onChange)=\"selectResolution.emit($event.value)\">\n        </p-dropdown>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"isHeatmap && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Region Editor: opens the editor as a floating dialog (formerly the\n           right-panel Regions tab). Sits with the region drawing tools. -->\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Open the Region Editor\" tooltipPosition=\"bottom\"\n                (onClick)=\"openRegionEditor.emit()\">\n        <img src=\"assets/plotting/region-editor.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Region drawing tools -->\n      <p-button icon=\"pi pi-arrow-up-right\" size=\"small\"\n                [text]=\"activeDragMode !== 'select'\"\n                pTooltip=\"Selection mode (<kbd>s</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('select')\">\n      </p-button>\n      <p-button icon=\"pi pi-stop\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawrect'\"\n                pTooltip=\"Draw a rectangular region (<kbd>r</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawrect')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'drawopenpath'\"\n                pTooltip=\"Draw a polyline (<kbd>l</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawopenpath')\">\n        <img src=\"assets/plotting/polyline.svg\"\n             [class]=\"activeDragMode === 'drawopenpath' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-pencil\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawclosedpath'\"\n                pTooltip=\"Draw a freeform region (<kbd>f</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawclosedpath')\">\n      </p-button>\n      <!-- Brush: paint a region by dragging a disc of the given size; the Size\n           slider appears while it's active. Hold Shift to erase (subtract). -->\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'brush'\"\n                pTooltip=\"Brush: click and drag to paint a region.\n                <br>Hold <kbd>Shift</kbd> while painting to erase from a region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('brush')\">\n        <img src=\"assets/plotting/paintbrush.svg\"\n             [class]=\"activeDragMode === 'brush' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'brush'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Size</span>\n        <p-slider [(ngModel)]=\"brushSize\"\n                  [min]=\"brushSizeMin\" [max]=\"brushSizeMax\" [step]=\"brushSizeStep\"\n                  (onChange)=\"brushSizeChange.emit($event.value)\"\n                  pTooltip=\"Brush diameter in image pixels.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ brushSize }}</span>\n      </ng-container>\n\n      <!-- Vertex editing \u2014 backends with a vertex-editing overlay (OSD + napari-js image). -->\n      <ng-container *ngIf=\"supportsRegionVertexTools\">\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'drawpolygon'\"\n                  pTooltip=\"Polygon: click to place each vertex; click the first point to close\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('drawpolygon')\">\n          <img src=\"assets/plotting/polygon-vertices.svg\"\n               [class]=\"activeDragMode === 'drawpolygon' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'addpoint'\"\n                  pTooltip=\"Add a vertex: click an edge of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('addpoint')\">\n          <img src=\"assets/plotting/vertex-add.svg\"\n               [class]=\"activeDragMode === 'addpoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'deletepoint'\"\n                  pTooltip=\"Delete a vertex: click a vertex of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('deletepoint')\">\n          <img src=\"assets/plotting/vertex-delete.svg\"\n               [class]=\"activeDragMode === 'deletepoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'wand'\"\n                pTooltip=\"Wand: click and drag to grow a region by similar pixel values (<kbd>w</kbd>).\n                <br>Hold <kbd>Shift</kbd> while clicking or dragging on a region to erase pixels from it.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('wand')\">\n        <img src=\"assets/plotting/wand.svg\"\n             [class]=\"activeDragMode === 'wand' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'wand'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Sens.</span>\n        <p-slider [(ngModel)]=\"wandSensitivity\"\n                  [min]=\"wandSensitivityMin\" [max]=\"wandSensitivityMax\" [step]=\"wandSensitivityStep\"\n                  (onChange)=\"wandSensitivityChange.emit($event.value)\"\n                  pTooltip=\"Higher = stricter (smaller selection); lower = looser.\n                  Takes effect from the next click/drag tick.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ wandSensitivity.toFixed(1) }}</span>\n      </ng-container>\n      <p-button icon=\"pi pi-eraser\" size=\"small\"\n                [text]=\"activeDragMode !== 'eraseVertex'\"\n                pTooltip=\"Vertex eraser (<kbd>e</kbd>): click or drag to remove polygon vertices inside\n                the cursor circle from any region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('eraseVertex')\">\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'eraseVertex'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Radius</span>\n        <p-slider [(ngModel)]=\"vertexEraserRadius\"\n                  [min]=\"vertexEraserRadiusMin\" [max]=\"vertexEraserRadiusMax\" [step]=\"vertexEraserRadiusStep\"\n                  (onChange)=\"vertexEraserRadiusChange.emit($event.value)\"\n                  pTooltip=\"Eraser radius in image pixels.\n                  Vertices within this distance of the cursor are removed.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ vertexEraserRadius }}</span>\n      </ng-container>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canUndo\"\n                pTooltip=\"Undo the last region action (<kbd>Ctrl</kbd>+<kbd>Z</kbd>).\n                Up to 10 actions can be undone.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"undoRegion.emit()\">\n        <img src=\"assets/plotting/undo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canRedo\"\n                pTooltip=\"Redo the last undone region action\n                (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>).\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"redoRegion.emit()\">\n        <img src=\"assets/plotting/redo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-trash\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Delete selected region (<kbd>Del</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"deleteRegion.emit()\">\n      </p-button>\n      <!-- SAM (jit-ui#90): box-prompt segment, interactive point prompts, and a\n           model picker. -->\n      <span class=\"toolbar-separator\"></span>\n      <!-- SAM controls grouped: box-prompt Segment, then the point-prompt tool,\n           then the model-picker dropdown (the chevron) which governs BOTH tools.\n           Falls back to Segment + point with no model picker when none are set. -->\n      <span *ngIf=\"samModels.length; else segmentPlain\" class=\"p-buttonset segment-split\">\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRegions.emit()\">\n          <img src=\"assets/plotting/picture-segmentation.svg\"\n               class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n        <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the SAM model (used by both segment tools)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"samModelMenu.toggle($event)\">\n        </p-button>\n      </span>\n      <ng-template #segmentPlain>\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"segmentRegions.emit()\">\n            <img src=\"assets/plotting/picture-segmentation.svg\"\n                 class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n          </p-button>\n          <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        </span>\n      </ng-template>\n      <!-- Point-prompt tool \u2014 shared between the models / no-models layouts so it\n           always sits just left of the model dropdown. -->\n      <ng-template #samPointBtn>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'samPoint'\"\n                  pTooltip=\"SAM point prompts: click a fiber to segment it as a new region;\n                  Shift/Alt-click to refine (exclude) the current one.<br>Esc undoes it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('samPoint')\">\n          <img src=\"assets/plotting/click.svg\"\n               [class]=\"activeDragMode === 'samPoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-template>\n      <p-menu #samModelMenu [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <!-- Help: explains the ViT-T vs ViT-B trade-off behind the model picker. -->\n      <p-button *ngIf=\"samModels.length\" icon=\"pi pi-info-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"About the SAM models\" tooltipPosition=\"bottom\"\n                (onClick)=\"samModelInfo.toggle($event)\">\n      </p-button>\n      <p-overlayPanel #samModelInfo appendTo=\"body\" styleClass=\"sam-model-info\">\n        <div style=\"max-width: 24rem; line-height: 1.4\">\n          <div class=\"font-bold mb-1\">SAM models</div>\n          <p class=\"mt-0 mb-2\">\n            All are promptable Segment Anything models finetuned for biomedical images. They differ\n            in the <i>image encoder</i> (the heavy once-per-image step) and the training domain \u2014\n            box and point prompting behave the same.\n          </p>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">micro-sam ViT-T <span class=\"font-normal\">(default)</span></div>\n            <div>Light-microscopy finetuned. TinyViT encoder, ~14&nbsp;MB, very fast, runs on WASM.\n              Good mask quality \u2014 best for quick interactive work and many/large objects.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">micro-sam ViT-B</div>\n            <div>Light-microscopy finetuned. ViT-Base encoder, ~172&nbsp;MB, slower, GPU-accelerated\n              (WebGPU). Highest accuracy \u2014 when ViT-T misses subtle or overlapping boundaries.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">patho-sam ViT-B</div>\n            <div>Histopathology finetuned (H&amp;E / stained tissue). ViT-Base encoder, GPU-accelerated.\n              Use it for pathology slides \u2014 it segments tissue/nuclei better than the microscopy models.</div>\n          </div>\n          <div class=\"mb-2\">\n            <div class=\"font-bold\">patho-sam ViT-B (int8)</div>\n            <div>Same model, int8-quantized \u2014 ~100&nbsp;MB vs ~180&nbsp;MB (smaller download). Runs on\n              WASM (slower encode than the fp16 version); masks are near-identical. Pick it on slow\n              connections.</div>\n          </div>\n          <div class=\"text-sm\" style=\"opacity: 0.75\">\n            The choice applies to both the box and point tools. Each tool loads its own encoder,\n            so the first click after switching re-encodes once.\n          </div>\n        </div>\n      </p-overlayPanel>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM, client-side)\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"segmentCellpose.emit()\">\n        <img src=\"assets/plotting/cells.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n\n      <!-- YOLO: detect objects across the current view. Unlike the SAM and\n           cellpose tools it takes no prompt \u2014 a detector finds objects in a\n           field rather than being pointed at one \u2014 so there is nothing to draw\n           first. Split button: run, pick checkpoint, open parameters. -->\n      <span *ngIf=\"yoloModels.length\" class=\"p-buttonset segment-split\">\n        <p-button icon=\"pi pi-microchip-ai\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Detect objects in the current view with YOLO (client-side)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"detectYolo.emit()\">\n        </p-button>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the YOLO model\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"yoloModelMenu.toggle($event)\">\n        </p-button>\n        <p-button icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"YOLO parameters\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"openYoloParams.emit()\">\n        </p-button>\n      </span>\n      <p-menu #yoloModelMenu [model]=\"yoloMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button icon=\"pi pi-question-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Help\" tooltipPosition=\"bottom\"\n                (onClick)=\"showHelp()\">\n      </p-button>\n    </ng-container>\n\n  </div>\n</p-toolbar>\n<p-dialog header=\"Plotting help\" [(visible)]=\"displayHelpDialog\" [modal]=\"true\" [style]=\"{width: '50vw'}\"\n          [maximizable]=\"true\" [draggable]=\"false\" [resizable]=\"false\">\n  <p>Click a file in the left-hand tree to display it. By default it opens in the\n    <b>Image</b> view \u2014 a natively tiled, deeply zoomable raster (OpenSeadragon) with a\n    navigator minimap and a physical-units scale bar. <b>Click the image to zoom</b> toward\n    the clicked point; scroll to zoom and drag to pan. When a stack is open, a slice slider\n    (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\"/>\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach\n    this toolbar into a floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized:\n    <b>Image</b>, <b>Contour</b>, <b>Scatter (regions)</b>, <b>Surface (3D)</b>,\n    <b>Scatter 3D</b>, and <b>Isosurface (3D)</b>. Scalar and 3D types require a grayscale\n    image (the 3D volume types also require a z-stack). The non-image views render with\n    Plotly and support \"real zooming\" (a downscaled overview that re-fetches higher\n    resolution as you zoom in).\n  </p>\n  <ul>\n    <li>\"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are\n      drawn for, mapped onto the volume's real intensity range.</li>\n    <li>\"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>,\n      pan <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>,\n      turntable <i class=\"pi pi-sync\"></i>, and reset camera <i class=\"pi pi-home\"></i>;\n      scroll to zoom the 3D scene.</li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\">:\n      opens the Region Editor as a floating, draggable dialog \u2014 a per-image table of every region\n      (class, colour, area) with bulk select/label/colour/delete and GeoJSON import/export. It stays\n      in sync with the image, so you can keep it open while drawing.</li>\n    <li>\"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\">\n      (<i>work in progress \u2014 not yet stable</i>): adds a coloured line ROI; a floating inset\n      chart plots intensity along each line, updates live as you drag it, and re-samples at the\n      current zoom resolution. Each added line gets its own colour; select a line and use the\n      trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).</li>\n    <li>\"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\">:\n      opens a floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap\n      dropdown (default: inverted greys).</li>\n    <li>\"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\">\n      (Image view only): the image opens showing <b>raw pixels</b> (nearest-neighbour), so\n      zooming in renders crisp blocks for pixel inspection. Toggle this on for bilinear\n      smoothing; the icon turns white while smoothing is active.</li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image\n      to its original dimensions. In stack mode it also resets to single-image mode.</li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\">\n      (<kbd>b</kbd>): drag a box to select an area to zoom into.</li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step,\n      stopping at the original image dimensions.</li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>By default no tool is selected (all greyed-out); selecting a tool highlights it. The\n    vertex-editing tools (polygon, add/delete vertex, move, B\u00E9zier conversions) are available\n    in the <b>Image</b> view only. On a <b>donut</b> (a region with a hole), the inner-ring\n    vertices are editable too \u2014 drag, add, and delete them just like the outer ring.</p>\n  <ul>\n    <li>\"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode\n      that turns off whatever drawing tool was active (wand, vertex eraser, rectangle, etc.).\n      Use it to step out of editing without picking another tool.</li>\n    <li>\"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to\n      create a rectangular region.</li>\n    <li>\"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\">\n      (<kbd>l</kbd>): draw an open (non-closed) polyline by clicking and dragging. Polylines can\n      be edited and exported to GeoJSON as a <code>LineString</code> feature.</li>\n    <li>\"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to\n      draw a closed freeform polygon.</li>\n    <li>\"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\">: click\n      and drag to paint a region with a circular brush \u2014 the painted stroke is the region.\n      A <b>Size</b> slider (brush diameter, in image pixels) appears in the toolbar while the\n      brush is active. Hold <kbd>Shift</kbd> while painting to <b>erase</b> (subtract) from a\n      region instead. Painting over an existing region extends it; brushing across two regions\n      merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the\n      enclosed area empty \u2014 a <b>donut</b> (Image view).</li>\n    <li>\"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\">:\n      click to place each vertex; click the first point to close the polygon.</li>\n    <li>\"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\">:\n      click an edge of the selected polygon to insert a new vertex.</li>\n    <li>\"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\">:\n      click a vertex of the selected polygon to remove it.</li>\n    <li>\"<b>Move region</b>\" <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\">:\n      drag to move the selected region.</li>\n    <li>\"<b>To B\u00E9zier</b>\" <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\"> /\n      \"<b>To polygon</b>\" <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\">:\n      convert the selected region to a smooth B\u00E9zier curve, or back to a straight-edged polygon.</li>\n    <li>\"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\"> (<kbd>w</kbd>):\n      click to grow a region from pixels with similar values around the click point. Hold\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an exact-match flood fill; drag to keep extending the\n      selection while moving; hold <kbd>Shift</kbd> while clicking or dragging on an existing\n      region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that appears to make the\n      wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending the\n      same region; clicking inside an existing region adopts it, and growing into another region\n      merges them.</li>\n    <li>\"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag\n      to remove polygon vertices that fall inside the cursor circle from any region, including a\n      region's inner rings (donut holes). Use the <b>Radius</b> slider to set the eraser size in\n      image pixels. Polygons reduced below 3 vertices (or polylines below 2) are deleted entirely;\n      a hole reduced below 3 vertices is removed.</li>\n    <li>\"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the\n      last region action (draw, delete, edit, wand/brush stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.</li>\n    <li>\"<b>Redo</b>\" <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>):\n      re-applies the most recently undone action. Performing a new region action clears what can be redone.</li>\n    <li>\"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected\n      region. This can also be done from the Region Editor.</li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>Right-click a region \u2014 or the current multi-selection \u2014 to open the\n    \"<b>Selected region(s)</b>\" group at the top of the context menu. These act immediately on\n    the selection (they're not drawing modes) and are fully undo/redo-able:</p>\n  <ul>\n    <li>\"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on\n      the image (also in the Region Editor toolbar).</li>\n    <li>\"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch,\n      the result is a single multi-part region (sparse \"bits\").</li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image\n      rectangle with the selected regions punched out as holes. Works at any image size.</li>\n    <li>\"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude\n      threshold in pixels \u2014 pick <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px),\n      <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a slider. Applies to the exterior and any\n      holes (and every part of a multi-part region).</li>\n    <li>The B\u00E9zier conversions and Delete also live in this group (the right-click equivalents of\n      the toolbar / vertex tools above).</li>\n  </ul>\n\n  <h3>Segmentation tools (SAM &amp; cellpose)</h3>\n  <p>AI-assisted segmentation that runs entirely in the browser. The box and point\n    tools use a promptable <b>micro-sam</b> model; the cellpose tool auto-detects cells.\n    Generated regions inherit the color of the rectangle they came from. The first run\n    downloads the model (a progress toast is shown); it's then cached.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/picture-segmentation.svg\" width=\"15\" height=\"15\">\n      (box prompt): draw one or more <b>Rectangular regions</b> around the objects of interest,\n      then click Segment. Each rectangle is replaced by the SAM mask of the object inside it.</li>\n    <li>\"<b>Point prompts</b>\" <img src=\"assets/plotting/click.svg\" width=\"15\" height=\"15\">: click directly on an object to\n      segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking another\n      object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it,\n      <kbd>Enter</kbd> commits it.</li>\n    <li>\"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the\n      Segment button chooses the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or\n      <b>micro-sam ViT-B</b> (larger, highest accuracy) for light microscopy, or\n      <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). The choice applies to\n      <i>both</i> the box and point tools. The <i class=\"pi pi-info-circle\"></i> info button next\n      to it explains the trade-off.</li>\n    <li>\"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\">: draw rectangles, then click Cellpose to\n      automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one\n      region per detected cell. No clicking on individual cells needed.</li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr><td><kbd>+</kbd> / <kbd>=</kbd></td><td>Zoom in</td></tr>\n    <tr><td><kbd>-</kbd></td><td>Zoom out</td></tr>\n    <tr><td><kbd>b</kbd></td><td>Toggle zoom box mode</td></tr>\n    <tr><td><kbd>p</kbd></td><td>Toggle pan mode</td></tr>\n    <tr><td><kbd>f</kbd></td><td>Toggle freeform region drawing</td></tr>\n    <tr><td><kbd>l</kbd></td><td>Toggle polyline drawing</td></tr>\n    <tr><td><kbd>r</kbd></td><td>Toggle rectangular region drawing</td></tr>\n    <tr><td><kbd>w</kbd></td><td>Toggle wand tool</td></tr>\n    <tr><td>Wand + <kbd>Shift</kbd></td><td>Erase pixels from the active region</td></tr>\n    <tr><td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td><td>Exact-match flood fill (no smoothing)</td></tr>\n    <tr><td><kbd>e</kbd></td><td>Toggle vertex eraser</td></tr>\n    <tr><td><kbd>s</kbd></td><td>Selection mode (deactivates drawing tools)</td></tr>\n    <tr><td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td><td>Add an exclude point (refine the current object)</td></tr>\n    <tr><td><kbd>Enter</kbd></td><td>Commit the current SAM point object</td></tr>\n    <tr><td><kbd>Esc</kbd></td><td>Undo the current SAM point object</td></tr>\n    <tr><td><kbd>Del</kbd> / <kbd>\u232B</kbd></td><td>Delete selected region</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td><td>Undo the last region action (up to 10)</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td><td>Redo the last undone region action</td></tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"displayHelpDialog=false\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}.toolbar-text{color:var(--primary-color);font-size:.875rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}::ng-deep .plotmode-item{display:inline-flex;align-items:center;gap:.5rem;color:#000}::ng-deep .plotmode-item i{font-size:1rem;color:var(--primary-color)}::ng-deep .plotmode-item .plotmode-icon-img{width:1.1rem;height:1.1rem;object-fit:contain;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}.wand-sensitivity-value{min-width:2rem;text-align:right}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"] }]
         }], propDecorators: { imageInfo: [{
                 type: Input
             }], plotTypeOptions: [{
@@ -4846,6 +5044,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 type: Input
             }], samModelId: [{
                 type: Input
+            }], yoloModels: [{
+                type: Input
+            }], yoloModelId: [{
+                type: Input
             }], selectPlotType: [{
                 type: Output
             }], addProfileLine: [{
@@ -4898,6 +5100,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 type: Output
             }], segmentCellpose: [{
                 type: Output
+            }], detectYolo: [{
+                type: Output
+            }], yoloModelChange: [{
+                type: Output
+            }], openYoloParams: [{
+                type: Output
             }], samModelChange: [{
                 type: Output
             }], wandSensitivityChange: [{
@@ -6911,7 +7119,7 @@ class VisualizerComponent {
     get isImageView() {
         return this.selectedPlotType === PlotType.IMAGE;
     }
-    constructor(state, plotService, messageService, ngZone, cdr, session, samTool, cellSegmentTool, samPointTool, regionOps, vizConfig) {
+    constructor(state, plotService, messageService, ngZone, cdr, session, samTool, cellSegmentTool, yoloDetectTool, instanceSegmenter, samPointTool, regionOps, vizConfig) {
         this.state = state;
         this.plotService = plotService;
         this.messageService = messageService;
@@ -6920,6 +7128,8 @@ class VisualizerComponent {
         this.session = session;
         this.samTool = samTool;
         this.cellSegmentTool = cellSegmentTool;
+        this.yoloDetectTool = yoloDetectTool;
+        this.instanceSegmenter = instanceSegmenter;
         this.samPointTool = samPointTool;
         this.regionOps = regionOps;
         this.vizConfig = vizConfig;
@@ -6983,6 +7193,16 @@ class VisualizerComponent {
          *  offered, so the picker can't select a model that can't run. */
         this.samModels = SAM_MODELS.filter(isSamModelReady).map((m) => ({ id: m.id, label: m.label }));
         this.samModelId = getDefaultSamModelId();
+        /** YOLO checkpoints with a configured URL, and the active one. */
+        this.yoloModels = YOLO_MODELS.filter((m) => isYoloModelReady(m.id)).map((m) => ({
+            id: m.id,
+            label: m.label,
+        }));
+        this.yoloModelId = getDefaultYoloModelId();
+        /** Parameter dialog state. Seeded from the active model's own defaults, which
+         *  encode the scale and crowding each checkpoint was trained for. */
+        this.showYoloParams = false;
+        this.yoloParams = this.defaultYoloParams();
         /** SAM download/segment toast state (bound by the `sam` p-toast template). */
         this.samStatus = '';
         this.samProgress = 0; // 0..100, encoder download
@@ -8144,6 +8364,46 @@ class VisualizerComponent {
     async segmentCellpose() {
         await this.runSegmentWithToast('Cellpose', this.cellSegmentTool, () => this.plotService.segmentRectanglesCellpose());
     }
+    /** Per-model defaults from the registry — what the checkpoint was trained for. */
+    defaultYoloParams() {
+        const def = YOLO_MODELS.find((m) => m.id === getDefaultYoloModelId()) ?? YOLO_MODELS[0];
+        return {
+            modelId: def?.id,
+            confidence: def?.defaults.confidence ?? 0.6,
+            iouThreshold: def?.defaults.iouThreshold ?? 0.5,
+            mergeThreshold: def?.defaults.mergeThreshold ?? 0.3,
+            overlapX: def?.defaults.overlapX ?? 0,
+            overlapY: def?.defaults.overlapY ?? 0,
+            // Exposed in the dialog, so it must be seeded — otherwise the scale
+            // control reads as 0 and the re-crop never runs.
+            downsamplingFactor: 5,
+            withMasks: true,
+            simplifyTolerance: 1,
+            minArea: 0,
+        };
+    }
+    /** Switching checkpoint re-seeds the parameters, since the defaults belong to
+     *  the model rather than to the tool. */
+    onYoloModelChange(id) {
+        this.yoloModelId = id;
+        setDefaultYoloModel(id);
+        this.yoloParams = { ...this.defaultYoloParams(), modelId: id };
+    }
+    openYoloParams() {
+        this.showYoloParams = true;
+    }
+    resetYoloParams() {
+        this.yoloParams = { ...this.defaultYoloParams(), modelId: this.yoloModelId };
+    }
+    /** Detect objects across the current view. No prompt: a detector finds objects
+     *  in a field rather than being pointed at one. Reuses the shared segmentation
+     *  toast so progress and status read the same as the SAM/cellpose tools. */
+    async detectYolo() {
+        await this.runSegmentWithToast('YOLO', this.yoloDetectTool, () => this.yoloDetectTool.detectInView(this.plotService, this.instanceSegmenter, {
+            ...this.yoloParams,
+            modelId: this.yoloModelId,
+        }));
+    }
     /** Shared driver for the box-prompt segment tools: wires the tool's status +
      *  download progress into the sticky `sam` toast, runs `op`, and reports the
      *  region count. Keeps the toast open until the run settles (bar hits 100%). */
@@ -8479,19 +8739,22 @@ class VisualizerComponent {
         this.plotService.setSamPointMode(false);
         this.plotService.setVertexEraserMode(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: VisualizerComponent, deps: [{ token: IMAGE_STATE_PORT }, { token: VISUALIZER }, { token: i1$2.MessageService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: VisualizerStore }, { token: SamToolService }, { token: CellSegmentToolService }, { token: SamPointToolService }, { token: RegionOpsService }, { token: VIZ_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: VisualizerComponent, selector: "visualizer", inputs: { toolbarTools: "toolbarTools", testMode: "testMode" }, outputs: { isStackEvent: "isStackEvent", isGrayscaleEvent: "isGrayscaleEvent" }, host: { listeners: { "window:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["cm"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SAM toast: live status + encoder-download progress bar (jit-ui#90). Sticky\n     while a segment runs; stays open until the bar reaches 100% and the run ends. -->\n<p-toast [key]=\"samToastKey\" position=\"bottom-right\">\n  <ng-template let-message pTemplate=\"message\">\n    <div style=\"flex: 1; min-width: 16rem\">\n      <div class=\"font-bold mb-1\">{{ message.summary }}</div>\n      <div>{{ samStatus || message.detail }}</div>\n      <p-progressBar *ngIf=\"samDownloading\" [value]=\"samProgress\" styleClass=\"mt-2 sam-progress\"></p-progressBar>\n      <p-progressBar *ngIf=\"samBusy && !samDownloading\" mode=\"indeterminate\" styleClass=\"mt-2\"\n                     [style]=\"{ height: '4px' }\"></p-progressBar>\n    </div>\n  </ng-template>\n</p-toast>\n\n<!-- Result/error notices from the library itself (segmentation outcome, region\n     validation). Rendered here so they do not depend on the host mounting a\n     keyless <p-toast> \u2014 without this the messages went nowhere in any host but\n     jit-ui, and a failed run looked like a button that did nothing. -->\n<p-toast [key]=\"resultToastKey\" position=\"bottom-right\"></p-toast>\n\n<!-- Shared outlets for notices raised where there is no per-instance key to use:\n     the root-provided PlotlyService and the region-editor dialog. Rendered by a\n     single visualizer (ownsSharedToasts) so a message from the root service is\n     not shown once per live viewer. -->\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizToastKey\"></p-toast>\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizAlertToastKey\" position=\"center\"></p-toast>\n\n<!-- Toolbar dock: docked across the top by default; drag the handle to detach\n     it into a floating, movable window (frees the top row for the image). -->\n<div class=\"toolbar-dock\" [class.floating]=\"toolbarFloating\"\n     [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n     [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\">\n  <div class=\"toolbar-drag-handle\" (mousedown)=\"onToolbarDragStart($event)\"\n       pTooltip=\"Drag to float the toolbar\" tooltipPosition=\"bottom\">\n    <i class=\"pi pi-bars\"></i>\n  </div>\n<plotting-toolbar\n  [imageInfo]=\"imageInfo\"\n  [plotTypeOptions]=\"plotTypeOptions\"\n  [selectedPlotType]=\"selectedPlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [activeDragMode]=\"activeDragMode\"\n  [activeSurface3dMode]=\"activeSurface3dMode\"\n  [axesVisible]=\"axesVisible\"\n  [wireframeActive]=\"wireframeActive\"\n  [resolutionScale]=\"resolutionScale\"\n  [wandSensitivity]=\"wandSensitivity\"\n  [brushSize]=\"brushSize\"\n  [samModels]=\"samModels\"\n  [samModelId]=\"samModelId\"\n  [vertexEraserRadius]=\"vertexEraserRadius\"\n  [canUndo]=\"canUndoRegion\"\n  [canRedo]=\"canRedoRegion\"\n  [stackOptions]=\"stackOptions\"\n  [tools]=\"toolbarTools\"\n  [imageSmoothingEnabled]=\"imageSmoothingEnabled\"\n  (selectPlotType)=\"onSelectPlotType($event)\"\n  (toggleImageSmoothing)=\"onToggleImageSmoothing()\"\n  (addProfileLine)=\"addProfileLine()\"\n  (isoRangeChange)=\"onIsoRangeChange($event)\"\n  (openChannelHistogram)=\"openChannelHistogram()\"\n  (openRegionEditor)=\"openRegionEditor()\"\n  (selectStackOption)=\"selectStackOption($event)\"\n  (zScrub)=\"onZScrub($event)\"\n  (zSlide)=\"onZSlide($event)\"\n  (zIndexInput)=\"zIndex = $event; updateZIndex()\"\n  (reloadAndPlot)=\"reloadAndPlot()\"\n  (downloadImage)=\"downloadImage()\"\n  (autoscaleImage)=\"autoscaleImage()\"\n  (toggleDragMode)=\"toggleDragMode($event)\"\n  (zoomIn)=\"zoomIn()\"\n  (zoomOut)=\"zoomOut()\"\n  (toggleSurface3dMode)=\"toggleSurface3dMode($event)\"\n  (resetSurfaceCamera)=\"resetSurfaceCamera()\"\n  (toggleAxes)=\"toggleAxes()\"\n  (toggleWireframe)=\"toggleWireframe()\"\n  (selectResolution)=\"selectResolution($event)\"\n  (deleteRegion)=\"deleteRegion()\"\n  (undoRegion)=\"undoRegion()\"\n  (redoRegion)=\"redoRegion()\"\n  (segmentRegions)=\"segmentRegions()\"\n  (segmentCellpose)=\"segmentCellpose()\"\n  (samModelChange)=\"onSamModelChange($event)\"\n  (wandSensitivityChange)=\"onWandSensitivityChange($event)\"\n  (brushSizeChange)=\"onBrushSizeChange($event)\"\n  (vertexEraserRadiusChange)=\"onVertexEraserRadiusChange($event)\">\n  <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n  <ng-content></ng-content>\n</plotting-toolbar>\n  <p-button *ngIf=\"toolbarFloating\" class=\"toolbar-dock-btn\" icon=\"pi pi-thumbtack\" size=\"small\" [text]=\"true\"\n            pTooltip=\"Dock to top\" tooltipPosition=\"bottom\" (onClick)=\"dockToolbar()\">\n  </p-button>\n</div>\n\n<p-contextMenu #cm [model]=\"contextMenuItems\" appendTo=\"body\"></p-contextMenu>\n<!-- No `h-full` here: PrimeFlex's height:100% !important made #plot as tall as\n     the whole host, so under the docked toolbar its bottom toolbar-height strip\n     (incl. the OSD scale bar at bottom-left) was clipped by the host's\n     overflow:hidden. The component stylesheet sizes it (.viz-plot { flex: 1 }). -->\n<div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n  <div *ngIf=\"imgLoading || stackLoading || isCaching\" id=\"overlay\">\n    <!-- Determinate stack/volume progress takes precedence: while it's active show ONLY the\n         progress bar + \"Loading frames...\", not the generic spinner/\"Loading image...\" on top of\n         it (both were rendering at once for napari volume/isosurface loads). -->\n    <ng-container *ngIf=\"stackLoading; else imgLoadingTpl\">\n      <p-progressBar class=\"progress\" [value]=\"loadingPercentage\"></p-progressBar>\n      <span class=\"text-loading\">Loading frames...</span>\n    </ng-container>\n    <ng-template #imgLoadingTpl>\n      <!-- Cache-copy progress is shown whenever a cache download is active (isCaching), independent\n           of `imgLoading`, so it's never dropped/masked mid-download. -->\n      <ng-container *ngIf=\"isCaching; else spinnerLoading\">\n        <!-- Stage-aware message comes from CacheProgressService updating\n             imageLoadingMessage$ (\"Caching image...\" during the GCS download,\n             then \"Generating preview...\" during per-slice thumbnail gen). Once the\n             download hits 100% the remaining work (server preview/tile generation)\n             has no determinate progress, so fall through to the spinner template\n             rather than parking a full bar under \"Loading image...\". -->\n        <p-progressBar class=\"progress\" [value]=\"cacheProgress\"></p-progressBar>\n        <span class=\"text-loading\">{{loadingMessage}}</span>\n      </ng-container>\n      <ng-template #spinnerLoading>\n        <div *ngIf=\"imgLoading\" class=\"spinner\"></div>\n        <span *ngIf=\"imgLoading && !zoom\" class=\"text-loading\">{{loadingMessage}}</span>\n        <span *ngIf=\"imgLoading && zoom\" class=\"zoom-text-loading\">{{loadingMessage}}</span>\n      </ng-template>\n    </ng-template>\n    <p-button *ngIf=\"stackLoading || imgLoading\" class=\"cancel-loading \" label=\"Cancel\"\n              (onClick)=\"cancelLoading()\">\n    </p-button>\n  </div>\n  <!-- Translucent \"sharpening\" overlay shown after the small-tier preview is\n       on screen while the large-tier render is still loading in the\n       background. Lets the user see the blurry image underneath but makes\n       it clear something is still loading so they don't mistake the\n       low-res render for the final image. -->\n  <div *ngIf=\"sharpening && !imgLoading && !stackLoading && !isCaching\" id=\"sharpening-overlay\">\n    <div class=\"spinner\"></div>\n    <span class=\"text-loading\">Sharpening preview...</span>\n  </div>\n\n</div>\n\n<!-- Floating, draggable intensity-profile inset. Shown in LINE mode; the chart\n     updates live as the line ROI on the image is moved. Kept OUTSIDE #plot and\n     positioned fixed so it floats over the whole page (not clipped to the\n     diagram/canvas area). -->\n<div *ngIf=\"hasProfiles\" class=\"intensity-panel\"\n     [style.left.px]=\"profilePanelPos.x\" [style.top.px]=\"profilePanelPos.y\">\n  <div class=\"intensity-panel-header\" (mousedown)=\"onProfilePanelDragStart($event)\">\n    <span>Intensity profile</span>\n    <i class=\"pi pi-arrows-alt\"></i>\n  </div>\n  <div [id]=\"intensityInsetDiv\" class=\"intensity-panel-plot\"></div>\n</div>\n\n<!-- Channels & Histogram: non-modal floating dialog opened from the toolbar. -->\n<channel-histogram [(visible)]=\"showChannelHistogram\"></channel-histogram>\n\n<!-- Region Editor: non-modal, draggable, resizable floating dialog opened from\n     the toolbar (formerly the right-panel Regions tab). Modeless so regions can\n     still be drawn/selected on the plot while it's open; stays linked to this\n     plotting instance via the root RegionStore singleton. Opens over the right\n     side of the view. -->\n<p-dialog header=\"Region Editor\" [(visible)]=\"showRegionEditor\"\n          [modal]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          [maximizable]=\"true\" appendTo=\"body\" position=\"right\"\n          [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <region-editor></region-editor>\n</p-dialog>\n\n<!-- Simplify (Douglas\u2013Peucker): custom px-threshold picker for the selected\n     region(s), opened from the right-click \"Simplify \u25B8 Custom\u2026\" action. -->\n<p-dialog header=\"Simplify region(s)\" [(visible)]=\"displaySimplifyDialog\" [modal]=\"true\"\n          [style]=\"{width: '22rem'}\" [draggable]=\"false\" [resizable]=\"false\">\n  <div class=\"flex flex-column gap-2\">\n    <span>Altitude threshold: <b>{{ simplifyThreshold }} px</b></span>\n    <p-slider [(ngModel)]=\"simplifyThreshold\" [min]=\"1\" [max]=\"20\" [step]=\"1\"></p-slider>\n    <small>Vertices within this distance of the line between their neighbours are removed.</small>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Cancel\" [text]=\"true\" (onClick)=\"displaySimplifyDialog = false\"></p-button>\n    <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"simplifyRegions(simplifyThreshold)\"></p-button>\n  </ng-template>\n</p-dialog>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-plot{flex:1;min-height:0;height:auto!important}.toolbar-dock{display:flex;align-items:stretch;width:100%}.toolbar-dock plotting-toolbar{flex:1;min-width:0}.toolbar-dock.floating{position:fixed;z-index:1000;width:auto;max-width:calc(100% - 16px);background:var(--surface-card, #ffffff);border:1px solid var(--surface-border, #cccccc);border-radius:6px;box-shadow:0 4px 16px #0000004d}.toolbar-dock.floating plotting-toolbar{flex:0 1 auto}.toolbar-dock.floating .toolbar-drag-handle{border-radius:6px 0 0 6px}.toolbar-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 .4rem;cursor:move;color:var(--primary-color);background:var(--surface-100, rgba(0, 0, 0, .04));border-right:1px solid var(--surface-border, #cccccc);-webkit-user-select:none;user-select:none}.toolbar-dock-btn{align-self:center}:host ::ng-deep .navigator{margin-bottom:80px!important;margin-right:12px!important}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}::ng-deep .context-menu-active>.p-menuitem-content{background-color:var(--primary-color)!important}::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-icon,::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-text{color:#fff!important}::ng-deep .context-menu-active>.p-menuitem-content .zoom-box-off-icon,::ng-deep .context-menu-active>.p-menuitem-content .wand-icon,::ng-deep .context-menu-active>.p-menuitem-content .polyline-icon,::ng-deep .context-menu-active>.p-menuitem-content .polygon-vertices-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-add-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-delete-icon,::ng-deep .context-menu-active>.p-menuitem-content .region-move-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-bezier-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-polygon-icon{filter:brightness(0) invert(1)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.progress{position:absolute;width:50%;left:25%;top:55%}.text-loading{position:absolute;margin:0 auto;left:45%;top:60%;font-weight:700}.zoom-text-loading{position:absolute;margin:0 auto;left:35%;top:60%;font-weight:700;display:inline-block;width:350px}.cancel-loading{position:absolute;margin:0 auto;left:46%;top:70%}.spinner{position:absolute;left:45%;top:45%;height:100px;width:100px;margin:0 auto;-webkit-animation:rotation .6s infinite linear;-moz-animation:rotation .6s infinite linear;-o-animation:rotation .6s infinite linear;animation:rotation .6s infinite linear;border-left:6px solid rgba(0,174,239,.15);border-right:6px solid rgba(0,174,239,.15);border-bottom:6px solid rgba(0,174,239,.15);border-top:6px solid rgb(82,107,178);border-radius:100%}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;z-index:1000}#sharpening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff2e;pointer-events:none;z-index:1000}#sharpening-overlay .spinner{height:60px;width:60px;border-width:4px;left:calc(50% - 30px);top:calc(50% - 60px)}#sharpening-overlay .text-loading{position:absolute;left:0;right:0;width:auto;text-align:center;top:calc(50% + 35px);font-size:.9rem;color:#526bb2}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes rotation{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes rotation{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}::ng-deep .zoom-box-off-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" fill=\"black\" fill-rule=\"evenodd\">%0A  <!-- Rectangle outline -->%0A  <rect x=\"2\" y=\"2\" width=\"56\" height=\"56\"/>%0A  <rect x=\"9\" y=\"9\" width=\"42\" height=\"42\"/>%0A  <!-- Magnifying glass ring -->%0A  <circle cx=\"70\" cy=\"70\" r=\"23\"/>%0A  <circle cx=\"70\" cy=\"70\" r=\"14\"/>%0A  <!-- Handle -->%0A  <polygon points=\"81,81 97,97 92,100 77,85\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<svg%0A   viewBox=\"0 0 100 100\"%0A   fill=\"black\"%0A   fill-rule=\"evenodd\"%0A   version=\"1.1\"%0A   id=\"svg4\"%0A   sodipodi:docname=\"wand.svg\"%0A   inkscape:version=\"1.4.3 (0d15f75, 2025-12-25)\"%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0A   xmlns=\"http://www.w3.org/2000/svg\"%0A   xmlns:svg=\"http://www.w3.org/2000/svg\">%0A  <defs%0A     id=\"defs4\" />%0A  <sodipodi:namedview%0A     id=\"namedview4\"%0A     pagecolor=\"%23ffffff\"%0A     bordercolor=\"%23000000\"%0A     borderopacity=\"0.25\"%0A     inkscape:showpageshadow=\"2\"%0A     inkscape:pageopacity=\"0.0\"%0A     inkscape:pagecheckerboard=\"0\"%0A     inkscape:deskcolor=\"%23d1d1d1\"%0A     inkscape:zoom=\"8.74\"%0A     inkscape:cx=\"50\"%0A     inkscape:cy=\"49.942792\"%0A     inkscape:window-width=\"1024\"%0A     inkscape:window-height=\"1186\"%0A     inkscape:window-x=\"3560\"%0A     inkscape:window-y=\"131\"%0A     inkscape:window-maximized=\"0\"%0A     inkscape:current-layer=\"svg4\" />%0A  <!-- Wand handle: thin diagonal stick from lower-left to upper-right -->%0A  <polygon%0A     points=\"12,92 78,26 74,22 8,88 \"%0A     id=\"polygon1\"%0A     transform=\"matrix(1.0375192,0.05799445,0.25179496,0.91871864,-17.85351,5.6289793)\" />%0A  <!-- 4-pointed star at the wand tip -->%0A  <polygon%0A     points=\"62,34 76,30 80,6 84,30 98,34 84,38 80,62 76,38 \"%0A     id=\"polygon2\"%0A     transform=\"matrix(1.3082889,0,0,1.0245178,-38.907958,-1.4056881)\" />%0A  <!-- Small sparkle to the upper-left -->%0A  <polygon%0A     points=\"46,30 36,32 34,42 32,32 22,30 32,28 34,18 36,28 \"%0A     id=\"polygon3\"%0A     transform=\"translate(-9.610984,-6.7505721)\" />%0A  <!-- Small sparkle to the lower-right -->%0A  <polygon%0A     points=\"62,80 70,82 62,84 60,92 58,84 50,82 58,80 60,72 \"%0A     id=\"polygon4\"%0A     transform=\"translate(0,-1.6018307)\" />%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .brush-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M512.5 74.3L291.1 222C262 241.4 243.5 272.9 240.5 307.3C302.8 320.1 351.9 369.2 364.8 431.6C399.3 428.6 430.7 410.1 450.1 381L597.7 159.5C604.4 149.4 608 137.6 608 125.4C608 91.5 580.5 64 546.6 64C534.5 64 522.6 67.6 512.5 74.3zM320 464C320 402.1 269.9 352 208 352C146.1 352 96 402.1 96 464C96 467.9 96.2 471.8 96.6 475.6C98.4 493.1 86.4 512 68.8 512L64 512C46.3 512 32 526.3 32 544C32 561.7 46.3 576 64 576L208 576C269.9 576 320 525.9 320 464z\"/></svg>') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polyline-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">%0A  <polyline points=\"1,14 5,3 10,11 15,2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polygon-vertices-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Polygon (click-to-place) tool icon: a traced polyline with vertex dots. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.4740709,0,0,1.4740709,-6.0268793,-6.8086826)\">%0A    <polyline points=\"23.877,16.627 14.657,10.767 5.25,21.551 12.757,29.397\"%0A              fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\"%0A              stroke-linejoin=\"round\" stroke-linecap=\"round\"/>%0A    <circle cx=\"23.877\" cy=\"16.627\" r=\"1.9\"/>%0A    <circle cx=\"14.657\" cy=\"10.767\" r=\"1.9\"/>%0A    <circle cx=\"5.25\" cy=\"21.551\" r=\"1.9\"/>%0A    <circle cx=\"12.757\" cy=\"29.397\" r=\"1.9\"/>%0A  </g>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-add-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Add-vertex tool icon: a region blob with three corner vertices and a plus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 9.65,29.0 H 5.85 v 5.3 H 0.55 v 3.4 H 5.85 v 5.3 H 9.65 V 37.7 H 14.95 V 34.3 H 9.65 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-delete-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Delete-vertex tool icon: a region blob with three corner vertices and a minus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 0.55,34.3 v 3.4 H 14.95 V 34.3 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .region-move-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Region-move tool icon: a region blob with a drag arrow. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <path d=\"m 17.115582,8.9648664 c 1.707597,-3.3276806 4.729468,-4.6824281 7.540287,-5.2348498 3.827703,-0.947008 7.991169,0.1052238 11.051414,3.5118228 2.523022,2.604273 4.518416,6.7079726 4.345738,11.1668036 -0.278204,2.985704 -2.398311,5.011251 -4.470451,5.274308 -2.638142,0.565574 -5.314655,0.09206 -7.943203,-0.341976 C 23.811664,22.446579 19.916808,20.499952 17.153955,16.606696 15.89724,14.462775 15.820494,11.12194 17.115585,8.9648664 Z\"%0A        fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.1\" stroke-miterlimit=\"10\"/>%0A  <path d=\"m 26.741429,13.966963 6.746922,16.786269 3.229398,-4.060758 3.583857,3.583857 2.761195,-2.761196 -3.583856,-3.571852 4.060758,-3.2354 z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-bezier-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-bezier tool icon: a smooth curve through two anchor points with control handles. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- smooth cubic curve between the two anchors -->%0A  <path d=\"M 7,34 C 7,16 37,28 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A        stroke-linecap=\"round\"/>%0A  <!-- control handles -->%0A  <line x1=\"7\" y1=\"34\" x2=\"7\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <line x1=\"37\" y1=\"10\" x2=\"37\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <circle cx=\"7\" cy=\"22\" r=\"2.2\"/>%0A  <circle cx=\"37\" cy=\"22\" r=\"2.2\"/>%0A  <!-- anchor points -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-polygon-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-polygon tool icon: endpoints joined by straight segments through a vertex. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- straight-segment path through the vertices -->%0A  <polyline points=\"7,34 22,12 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A            stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A  <!-- vertices -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"19\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.intensity-panel{position:fixed;z-index:1100;width:280px;height:180px;background:#191919e6;border:1px solid var(--primary-color, #3399ff);border-radius:6px;box-shadow:0 4px 14px #00000073;display:flex;flex-direction:column;overflow:hidden}.intensity-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;cursor:move;-webkit-user-select:none;user-select:none;background:#ffffff14;color:#eee;font-size:.75rem;font-weight:600}.intensity-panel-header i{opacity:.6;font-size:.7rem}.intensity-panel-plot{flex:1 1 auto;width:100%}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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: "directive", type: i7.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: i9.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i11.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i13$1.ContextMenu, selector: "p-contextMenu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i9$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i15$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: ToolbarComponent, selector: "plotting-toolbar", inputs: ["imageInfo", "plotTypeOptions", "selectedPlotType", "isoRange", "maxIndex", "zIndex", "isHeatmap", "activeDragMode", "activeSurface3dMode", "axesVisible", "wireframeActive", "resolutionScale", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo", "stackOptions", "tools", "imageSmoothingEnabled", "samModels", "samModelId"], outputs: ["selectPlotType", "addProfileLine", "toggleImageSmoothing", "isoRangeChange", "openChannelHistogram", "openRegionEditor", "selectStackOption", "zScrub", "zSlide", "zIndexInput", "reloadAndPlot", "downloadImage", "autoscaleImage", "toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution", "deleteRegion", "undoRegion", "redoRegion", "segmentRegions", "segmentCellpose", "samModelChange", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: RegionEditorComponent, selector: "region-editor" }, { kind: "component", type: ChannelHistogramComponent, selector: "channel-histogram", inputs: ["visible"], outputs: ["visibleChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: VisualizerComponent, deps: [{ token: IMAGE_STATE_PORT }, { token: VISUALIZER }, { token: i1$2.MessageService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: VisualizerStore }, { token: SamToolService }, { token: CellSegmentToolService }, { token: YoloDetectToolService }, { token: INSTANCE_SEGMENTER }, { token: SamPointToolService }, { token: RegionOpsService }, { token: VIZ_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: VisualizerComponent, selector: "visualizer", inputs: { toolbarTools: "toolbarTools", testMode: "testMode" }, outputs: { isStackEvent: "isStackEvent", isGrayscaleEvent: "isGrayscaleEvent" }, host: { listeners: { "window:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["cm"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SAM toast: live status + encoder-download progress bar (jit-ui#90). Sticky\n     while a segment runs; stays open until the bar reaches 100% and the run ends. -->\n<p-toast [key]=\"samToastKey\" position=\"bottom-right\">\n  <ng-template let-message pTemplate=\"message\">\n    <div style=\"flex: 1; min-width: 16rem\">\n      <div class=\"font-bold mb-1\">{{ message.summary }}</div>\n      <div>{{ samStatus || message.detail }}</div>\n      <p-progressBar *ngIf=\"samDownloading\" [value]=\"samProgress\" styleClass=\"mt-2 sam-progress\"></p-progressBar>\n      <p-progressBar *ngIf=\"samBusy && !samDownloading\" mode=\"indeterminate\" styleClass=\"mt-2\"\n                     [style]=\"{ height: '4px' }\"></p-progressBar>\n    </div>\n  </ng-template>\n</p-toast>\n\n<!-- Result/error notices from the library itself (segmentation outcome, region\n     validation). Rendered here so they do not depend on the host mounting a\n     keyless <p-toast> \u2014 without this the messages went nowhere in any host but\n     jit-ui, and a failed run looked like a button that did nothing. -->\n<p-toast [key]=\"resultToastKey\" position=\"bottom-right\"></p-toast>\n\n<!-- Shared outlets for notices raised where there is no per-instance key to use:\n     the root-provided PlotlyService and the region-editor dialog. Rendered by a\n     single visualizer (ownsSharedToasts) so a message from the root service is\n     not shown once per live viewer. -->\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizToastKey\"></p-toast>\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizAlertToastKey\" position=\"center\"></p-toast>\n\n<!-- Toolbar dock: docked across the top by default; drag the handle to detach\n     it into a floating, movable window (frees the top row for the image). -->\n<div class=\"toolbar-dock\" [class.floating]=\"toolbarFloating\"\n     [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n     [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\">\n  <div class=\"toolbar-drag-handle\" (mousedown)=\"onToolbarDragStart($event)\"\n       pTooltip=\"Drag to float the toolbar\" tooltipPosition=\"bottom\">\n    <i class=\"pi pi-bars\"></i>\n  </div>\n<plotting-toolbar\n  [imageInfo]=\"imageInfo\"\n  [plotTypeOptions]=\"plotTypeOptions\"\n  [selectedPlotType]=\"selectedPlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [activeDragMode]=\"activeDragMode\"\n  [activeSurface3dMode]=\"activeSurface3dMode\"\n  [axesVisible]=\"axesVisible\"\n  [wireframeActive]=\"wireframeActive\"\n  [resolutionScale]=\"resolutionScale\"\n  [wandSensitivity]=\"wandSensitivity\"\n  [brushSize]=\"brushSize\"\n  [samModels]=\"samModels\"\n  [samModelId]=\"samModelId\"\n  [yoloModels]=\"yoloModels\"\n  [yoloModelId]=\"yoloModelId\"\n  [vertexEraserRadius]=\"vertexEraserRadius\"\n  [canUndo]=\"canUndoRegion\"\n  [canRedo]=\"canRedoRegion\"\n  [stackOptions]=\"stackOptions\"\n  [tools]=\"toolbarTools\"\n  [imageSmoothingEnabled]=\"imageSmoothingEnabled\"\n  (selectPlotType)=\"onSelectPlotType($event)\"\n  (toggleImageSmoothing)=\"onToggleImageSmoothing()\"\n  (addProfileLine)=\"addProfileLine()\"\n  (isoRangeChange)=\"onIsoRangeChange($event)\"\n  (openChannelHistogram)=\"openChannelHistogram()\"\n  (openRegionEditor)=\"openRegionEditor()\"\n  (selectStackOption)=\"selectStackOption($event)\"\n  (zScrub)=\"onZScrub($event)\"\n  (zSlide)=\"onZSlide($event)\"\n  (zIndexInput)=\"zIndex = $event; updateZIndex()\"\n  (reloadAndPlot)=\"reloadAndPlot()\"\n  (downloadImage)=\"downloadImage()\"\n  (autoscaleImage)=\"autoscaleImage()\"\n  (toggleDragMode)=\"toggleDragMode($event)\"\n  (zoomIn)=\"zoomIn()\"\n  (zoomOut)=\"zoomOut()\"\n  (toggleSurface3dMode)=\"toggleSurface3dMode($event)\"\n  (resetSurfaceCamera)=\"resetSurfaceCamera()\"\n  (toggleAxes)=\"toggleAxes()\"\n  (toggleWireframe)=\"toggleWireframe()\"\n  (selectResolution)=\"selectResolution($event)\"\n  (deleteRegion)=\"deleteRegion()\"\n  (undoRegion)=\"undoRegion()\"\n  (redoRegion)=\"redoRegion()\"\n  (segmentRegions)=\"segmentRegions()\"\n  (segmentCellpose)=\"segmentCellpose()\"\n  (samModelChange)=\"onSamModelChange($event)\"\n  (detectYolo)=\"detectYolo()\"\n  (yoloModelChange)=\"onYoloModelChange($event)\"\n  (openYoloParams)=\"openYoloParams()\"\n  (wandSensitivityChange)=\"onWandSensitivityChange($event)\"\n  (brushSizeChange)=\"onBrushSizeChange($event)\"\n  (vertexEraserRadiusChange)=\"onVertexEraserRadiusChange($event)\">\n  <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n  <ng-content></ng-content>\n</plotting-toolbar>\n  <p-button *ngIf=\"toolbarFloating\" class=\"toolbar-dock-btn\" icon=\"pi pi-thumbtack\" size=\"small\" [text]=\"true\"\n            pTooltip=\"Dock to top\" tooltipPosition=\"bottom\" (onClick)=\"dockToolbar()\">\n  </p-button>\n</div>\n\n<p-contextMenu #cm [model]=\"contextMenuItems\" appendTo=\"body\"></p-contextMenu>\n<!-- No `h-full` here: PrimeFlex's height:100% !important made #plot as tall as\n     the whole host, so under the docked toolbar its bottom toolbar-height strip\n     (incl. the OSD scale bar at bottom-left) was clipped by the host's\n     overflow:hidden. The component stylesheet sizes it (.viz-plot { flex: 1 }). -->\n<div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n  <div *ngIf=\"imgLoading || stackLoading || isCaching\" id=\"overlay\">\n    <!-- Determinate stack/volume progress takes precedence: while it's active show ONLY the\n         progress bar + \"Loading frames...\", not the generic spinner/\"Loading image...\" on top of\n         it (both were rendering at once for napari volume/isosurface loads). -->\n    <ng-container *ngIf=\"stackLoading; else imgLoadingTpl\">\n      <p-progressBar class=\"progress\" [value]=\"loadingPercentage\"></p-progressBar>\n      <span class=\"text-loading\">Loading frames...</span>\n    </ng-container>\n    <ng-template #imgLoadingTpl>\n      <!-- Cache-copy progress is shown whenever a cache download is active (isCaching), independent\n           of `imgLoading`, so it's never dropped/masked mid-download. -->\n      <ng-container *ngIf=\"isCaching; else spinnerLoading\">\n        <!-- Stage-aware message comes from CacheProgressService updating\n             imageLoadingMessage$ (\"Caching image...\" during the GCS download,\n             then \"Generating preview...\" during per-slice thumbnail gen). Once the\n             download hits 100% the remaining work (server preview/tile generation)\n             has no determinate progress, so fall through to the spinner template\n             rather than parking a full bar under \"Loading image...\". -->\n        <p-progressBar class=\"progress\" [value]=\"cacheProgress\"></p-progressBar>\n        <span class=\"text-loading\">{{loadingMessage}}</span>\n      </ng-container>\n      <ng-template #spinnerLoading>\n        <div *ngIf=\"imgLoading\" class=\"spinner\"></div>\n        <span *ngIf=\"imgLoading && !zoom\" class=\"text-loading\">{{loadingMessage}}</span>\n        <span *ngIf=\"imgLoading && zoom\" class=\"zoom-text-loading\">{{loadingMessage}}</span>\n      </ng-template>\n    </ng-template>\n    <p-button *ngIf=\"stackLoading || imgLoading\" class=\"cancel-loading \" label=\"Cancel\"\n              (onClick)=\"cancelLoading()\">\n    </p-button>\n  </div>\n  <!-- Translucent \"sharpening\" overlay shown after the small-tier preview is\n       on screen while the large-tier render is still loading in the\n       background. Lets the user see the blurry image underneath but makes\n       it clear something is still loading so they don't mistake the\n       low-res render for the final image. -->\n  <div *ngIf=\"sharpening && !imgLoading && !stackLoading && !isCaching\" id=\"sharpening-overlay\">\n    <div class=\"spinner\"></div>\n    <span class=\"text-loading\">Sharpening preview...</span>\n  </div>\n\n</div>\n\n<!-- Floating, draggable intensity-profile inset. Shown in LINE mode; the chart\n     updates live as the line ROI on the image is moved. Kept OUTSIDE #plot and\n     positioned fixed so it floats over the whole page (not clipped to the\n     diagram/canvas area). -->\n<div *ngIf=\"hasProfiles\" class=\"intensity-panel\"\n     [style.left.px]=\"profilePanelPos.x\" [style.top.px]=\"profilePanelPos.y\">\n  <div class=\"intensity-panel-header\" (mousedown)=\"onProfilePanelDragStart($event)\">\n    <span>Intensity profile</span>\n    <i class=\"pi pi-arrows-alt\"></i>\n  </div>\n  <div [id]=\"intensityInsetDiv\" class=\"intensity-panel-plot\"></div>\n</div>\n\n<!-- Channels & Histogram: non-modal floating dialog opened from the toolbar. -->\n<channel-histogram [(visible)]=\"showChannelHistogram\"></channel-histogram>\n\n<!-- Region Editor: non-modal, draggable, resizable floating dialog opened from\n     the toolbar (formerly the right-panel Regions tab). Modeless so regions can\n     still be drawn/selected on the plot while it's open; stays linked to this\n     plotting instance via the root RegionStore singleton. Opens over the right\n     side of the view. -->\n<p-dialog header=\"Region Editor\" [(visible)]=\"showRegionEditor\"\n          [modal]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          [maximizable]=\"true\" appendTo=\"body\" position=\"right\"\n          [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <region-editor></region-editor>\n</p-dialog>\n\n<!-- Simplify (Douglas\u2013Peucker): custom px-threshold picker for the selected\n     region(s), opened from the right-click \"Simplify \u25B8 Custom\u2026\" action. -->\n<p-dialog header=\"Simplify region(s)\" [(visible)]=\"displaySimplifyDialog\" [modal]=\"true\"\n          [style]=\"{width: '22rem'}\" [draggable]=\"false\" [resizable]=\"false\">\n  <div class=\"flex flex-column gap-2\">\n    <span>Altitude threshold: <b>{{ simplifyThreshold }} px</b></span>\n    <p-slider [(ngModel)]=\"simplifyThreshold\" [min]=\"1\" [max]=\"20\" [step]=\"1\"></p-slider>\n    <small>Vertices within this distance of the line between their neighbours are removed.</small>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Cancel\" [text]=\"true\" (onClick)=\"displaySimplifyDialog = false\"></p-button>\n    <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"simplifyRegions(simplifyThreshold)\"></p-button>\n  </ng-template>\n</p-dialog>\n\n<!-- YOLO parameters. Same vocabulary as the pipeline step and the server tool,\n     so a result obtained here is reproducible there. Defaults come from the\n     active checkpoint's own registry entry. -->\n<p-dialog header=\"YOLO parameters\" [(visible)]=\"showYoloParams\" [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Confidence</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.confidence\" [min]=\"0\" [max]=\"1\" [step]=\"0.05\"\n                     [minFractionDigits]=\"2\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">IoU (per tile)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.iouThreshold\" [min]=\"0.1\" [max]=\"0.95\" [step]=\"0.05\"\n                     [minFractionDigits]=\"2\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Merge (cross-tile)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.mergeThreshold\" [min]=\"0.1\" [max]=\"0.95\" [step]=\"0.05\"\n                     [minFractionDigits]=\"2\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Downsampling factor</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.downsamplingFactor\" [min]=\"1\" [max]=\"10\" [step]=\"1\"\n                     [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Tile overlap X (%)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.overlapX\" [min]=\"0\" [max]=\"90\" [step]=\"5\"\n                     [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Tile overlap Y (%)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.overlapY\" [min]=\"0\" [max]=\"90\" [step]=\"5\"\n                     [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Min object area (px\u00B2)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.minArea\" [min]=\"0\" [max]=\"100000\" [step]=\"10\"\n                     [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Outline simplification (px)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.simplifyTolerance\" [min]=\"0\" [max]=\"10\" [step]=\"0.5\"\n                     [minFractionDigits]=\"1\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-12 flex align-items-center gap-2\">\n      <p-checkbox [(ngModel)]=\"yoloParams.withMasks\" [binary]=\"true\" inputId=\"yoloMasks\"></p-checkbox>\n      <label for=\"yoloMasks\" class=\"text-sm mb-0\">\n        Segmentation mode \u2014 trace object outlines. Off detects bounding boxes only, which is\n        considerably faster.\n      </label>\n    </div>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetYoloParams()\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"showYoloParams = false\"></p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-plot{flex:1;min-height:0;height:auto!important}.toolbar-dock{display:flex;align-items:stretch;width:100%}.toolbar-dock plotting-toolbar{flex:1;min-width:0}.toolbar-dock.floating{position:fixed;z-index:1000;width:auto;max-width:calc(100% - 16px);background:var(--surface-card, #ffffff);border:1px solid var(--surface-border, #cccccc);border-radius:6px;box-shadow:0 4px 16px #0000004d}.toolbar-dock.floating plotting-toolbar{flex:0 1 auto}.toolbar-dock.floating .toolbar-drag-handle{border-radius:6px 0 0 6px}.toolbar-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 .4rem;cursor:move;color:var(--primary-color);background:var(--surface-100, rgba(0, 0, 0, .04));border-right:1px solid var(--surface-border, #cccccc);-webkit-user-select:none;user-select:none}.toolbar-dock-btn{align-self:center}:host ::ng-deep .navigator{margin-bottom:80px!important;margin-right:12px!important}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}::ng-deep .context-menu-active>.p-menuitem-content{background-color:var(--primary-color)!important}::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-icon,::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-text{color:#fff!important}::ng-deep .context-menu-active>.p-menuitem-content .zoom-box-off-icon,::ng-deep .context-menu-active>.p-menuitem-content .wand-icon,::ng-deep .context-menu-active>.p-menuitem-content .polyline-icon,::ng-deep .context-menu-active>.p-menuitem-content .polygon-vertices-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-add-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-delete-icon,::ng-deep .context-menu-active>.p-menuitem-content .region-move-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-bezier-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-polygon-icon{filter:brightness(0) invert(1)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.progress{position:absolute;width:50%;left:25%;top:55%}.text-loading{position:absolute;margin:0 auto;left:45%;top:60%;font-weight:700}.zoom-text-loading{position:absolute;margin:0 auto;left:35%;top:60%;font-weight:700;display:inline-block;width:350px}.cancel-loading{position:absolute;margin:0 auto;left:46%;top:70%}.spinner{position:absolute;left:45%;top:45%;height:100px;width:100px;margin:0 auto;-webkit-animation:rotation .6s infinite linear;-moz-animation:rotation .6s infinite linear;-o-animation:rotation .6s infinite linear;animation:rotation .6s infinite linear;border-left:6px solid rgba(0,174,239,.15);border-right:6px solid rgba(0,174,239,.15);border-bottom:6px solid rgba(0,174,239,.15);border-top:6px solid rgb(82,107,178);border-radius:100%}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;z-index:1000}#sharpening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff2e;pointer-events:none;z-index:1000}#sharpening-overlay .spinner{height:60px;width:60px;border-width:4px;left:calc(50% - 30px);top:calc(50% - 60px)}#sharpening-overlay .text-loading{position:absolute;left:0;right:0;width:auto;text-align:center;top:calc(50% + 35px);font-size:.9rem;color:#526bb2}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes rotation{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes rotation{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}::ng-deep .zoom-box-off-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" fill=\"black\" fill-rule=\"evenodd\">%0A  <!-- Rectangle outline -->%0A  <rect x=\"2\" y=\"2\" width=\"56\" height=\"56\"/>%0A  <rect x=\"9\" y=\"9\" width=\"42\" height=\"42\"/>%0A  <!-- Magnifying glass ring -->%0A  <circle cx=\"70\" cy=\"70\" r=\"23\"/>%0A  <circle cx=\"70\" cy=\"70\" r=\"14\"/>%0A  <!-- Handle -->%0A  <polygon points=\"81,81 97,97 92,100 77,85\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<svg%0A   viewBox=\"0 0 100 100\"%0A   fill=\"black\"%0A   fill-rule=\"evenodd\"%0A   version=\"1.1\"%0A   id=\"svg4\"%0A   sodipodi:docname=\"wand.svg\"%0A   inkscape:version=\"1.4.3 (0d15f75, 2025-12-25)\"%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0A   xmlns=\"http://www.w3.org/2000/svg\"%0A   xmlns:svg=\"http://www.w3.org/2000/svg\">%0A  <defs%0A     id=\"defs4\" />%0A  <sodipodi:namedview%0A     id=\"namedview4\"%0A     pagecolor=\"%23ffffff\"%0A     bordercolor=\"%23000000\"%0A     borderopacity=\"0.25\"%0A     inkscape:showpageshadow=\"2\"%0A     inkscape:pageopacity=\"0.0\"%0A     inkscape:pagecheckerboard=\"0\"%0A     inkscape:deskcolor=\"%23d1d1d1\"%0A     inkscape:zoom=\"8.74\"%0A     inkscape:cx=\"50\"%0A     inkscape:cy=\"49.942792\"%0A     inkscape:window-width=\"1024\"%0A     inkscape:window-height=\"1186\"%0A     inkscape:window-x=\"3560\"%0A     inkscape:window-y=\"131\"%0A     inkscape:window-maximized=\"0\"%0A     inkscape:current-layer=\"svg4\" />%0A  <!-- Wand handle: thin diagonal stick from lower-left to upper-right -->%0A  <polygon%0A     points=\"12,92 78,26 74,22 8,88 \"%0A     id=\"polygon1\"%0A     transform=\"matrix(1.0375192,0.05799445,0.25179496,0.91871864,-17.85351,5.6289793)\" />%0A  <!-- 4-pointed star at the wand tip -->%0A  <polygon%0A     points=\"62,34 76,30 80,6 84,30 98,34 84,38 80,62 76,38 \"%0A     id=\"polygon2\"%0A     transform=\"matrix(1.3082889,0,0,1.0245178,-38.907958,-1.4056881)\" />%0A  <!-- Small sparkle to the upper-left -->%0A  <polygon%0A     points=\"46,30 36,32 34,42 32,32 22,30 32,28 34,18 36,28 \"%0A     id=\"polygon3\"%0A     transform=\"translate(-9.610984,-6.7505721)\" />%0A  <!-- Small sparkle to the lower-right -->%0A  <polygon%0A     points=\"62,80 70,82 62,84 60,92 58,84 50,82 58,80 60,72 \"%0A     id=\"polygon4\"%0A     transform=\"translate(0,-1.6018307)\" />%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .brush-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M512.5 74.3L291.1 222C262 241.4 243.5 272.9 240.5 307.3C302.8 320.1 351.9 369.2 364.8 431.6C399.3 428.6 430.7 410.1 450.1 381L597.7 159.5C604.4 149.4 608 137.6 608 125.4C608 91.5 580.5 64 546.6 64C534.5 64 522.6 67.6 512.5 74.3zM320 464C320 402.1 269.9 352 208 352C146.1 352 96 402.1 96 464C96 467.9 96.2 471.8 96.6 475.6C98.4 493.1 86.4 512 68.8 512L64 512C46.3 512 32 526.3 32 544C32 561.7 46.3 576 64 576L208 576C269.9 576 320 525.9 320 464z\"/></svg>') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polyline-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">%0A  <polyline points=\"1,14 5,3 10,11 15,2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polygon-vertices-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Polygon (click-to-place) tool icon: a traced polyline with vertex dots. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.4740709,0,0,1.4740709,-6.0268793,-6.8086826)\">%0A    <polyline points=\"23.877,16.627 14.657,10.767 5.25,21.551 12.757,29.397\"%0A              fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\"%0A              stroke-linejoin=\"round\" stroke-linecap=\"round\"/>%0A    <circle cx=\"23.877\" cy=\"16.627\" r=\"1.9\"/>%0A    <circle cx=\"14.657\" cy=\"10.767\" r=\"1.9\"/>%0A    <circle cx=\"5.25\" cy=\"21.551\" r=\"1.9\"/>%0A    <circle cx=\"12.757\" cy=\"29.397\" r=\"1.9\"/>%0A  </g>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-add-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Add-vertex tool icon: a region blob with three corner vertices and a plus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 9.65,29.0 H 5.85 v 5.3 H 0.55 v 3.4 H 5.85 v 5.3 H 9.65 V 37.7 H 14.95 V 34.3 H 9.65 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-delete-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Delete-vertex tool icon: a region blob with three corner vertices and a minus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 0.55,34.3 v 3.4 H 14.95 V 34.3 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .region-move-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Region-move tool icon: a region blob with a drag arrow. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <path d=\"m 17.115582,8.9648664 c 1.707597,-3.3276806 4.729468,-4.6824281 7.540287,-5.2348498 3.827703,-0.947008 7.991169,0.1052238 11.051414,3.5118228 2.523022,2.604273 4.518416,6.7079726 4.345738,11.1668036 -0.278204,2.985704 -2.398311,5.011251 -4.470451,5.274308 -2.638142,0.565574 -5.314655,0.09206 -7.943203,-0.341976 C 23.811664,22.446579 19.916808,20.499952 17.153955,16.606696 15.89724,14.462775 15.820494,11.12194 17.115585,8.9648664 Z\"%0A        fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.1\" stroke-miterlimit=\"10\"/>%0A  <path d=\"m 26.741429,13.966963 6.746922,16.786269 3.229398,-4.060758 3.583857,3.583857 2.761195,-2.761196 -3.583856,-3.571852 4.060758,-3.2354 z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-bezier-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-bezier tool icon: a smooth curve through two anchor points with control handles. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- smooth cubic curve between the two anchors -->%0A  <path d=\"M 7,34 C 7,16 37,28 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A        stroke-linecap=\"round\"/>%0A  <!-- control handles -->%0A  <line x1=\"7\" y1=\"34\" x2=\"7\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <line x1=\"37\" y1=\"10\" x2=\"37\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <circle cx=\"7\" cy=\"22\" r=\"2.2\"/>%0A  <circle cx=\"37\" cy=\"22\" r=\"2.2\"/>%0A  <!-- anchor points -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-polygon-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-polygon tool icon: endpoints joined by straight segments through a vertex. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- straight-segment path through the vertices -->%0A  <polyline points=\"7,34 22,12 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A            stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A  <!-- vertices -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"19\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.intensity-panel{position:fixed;z-index:1100;width:280px;height:180px;background:#191919e6;border:1px solid var(--primary-color, #3399ff);border-radius:6px;box-shadow:0 4px 14px #00000073;display:flex;flex-direction:column;overflow:hidden}.intensity-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;cursor:move;-webkit-user-select:none;user-select:none;background:#ffffff14;color:#eee;font-size:.75rem;font-weight:600}.intensity-panel-header i{opacity:.6;font-size:.7rem}.intensity-panel-plot{flex:1 1 auto;width:100%}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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: "directive", type: i7.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: i9.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i11.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i15$1.ContextMenu, selector: "p-contextMenu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i9$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i17$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i16.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: ToolbarComponent, selector: "plotting-toolbar", inputs: ["imageInfo", "plotTypeOptions", "selectedPlotType", "isoRange", "maxIndex", "zIndex", "isHeatmap", "activeDragMode", "activeSurface3dMode", "axesVisible", "wireframeActive", "resolutionScale", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo", "stackOptions", "tools", "imageSmoothingEnabled", "samModels", "samModelId", "yoloModels", "yoloModelId"], outputs: ["selectPlotType", "addProfileLine", "toggleImageSmoothing", "isoRangeChange", "openChannelHistogram", "openRegionEditor", "selectStackOption", "zScrub", "zSlide", "zIndexInput", "reloadAndPlot", "downloadImage", "autoscaleImage", "toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution", "deleteRegion", "undoRegion", "redoRegion", "segmentRegions", "segmentCellpose", "detectYolo", "yoloModelChange", "openYoloParams", "samModelChange", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: RegionEditorComponent, selector: "region-editor" }, { kind: "component", type: ChannelHistogramComponent, selector: "channel-histogram", inputs: ["visible"], outputs: ["visibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: VisualizerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'visualizer', template: "<!-- SAM toast: live status + encoder-download progress bar (jit-ui#90). Sticky\n     while a segment runs; stays open until the bar reaches 100% and the run ends. -->\n<p-toast [key]=\"samToastKey\" position=\"bottom-right\">\n  <ng-template let-message pTemplate=\"message\">\n    <div style=\"flex: 1; min-width: 16rem\">\n      <div class=\"font-bold mb-1\">{{ message.summary }}</div>\n      <div>{{ samStatus || message.detail }}</div>\n      <p-progressBar *ngIf=\"samDownloading\" [value]=\"samProgress\" styleClass=\"mt-2 sam-progress\"></p-progressBar>\n      <p-progressBar *ngIf=\"samBusy && !samDownloading\" mode=\"indeterminate\" styleClass=\"mt-2\"\n                     [style]=\"{ height: '4px' }\"></p-progressBar>\n    </div>\n  </ng-template>\n</p-toast>\n\n<!-- Result/error notices from the library itself (segmentation outcome, region\n     validation). Rendered here so they do not depend on the host mounting a\n     keyless <p-toast> \u2014 without this the messages went nowhere in any host but\n     jit-ui, and a failed run looked like a button that did nothing. -->\n<p-toast [key]=\"resultToastKey\" position=\"bottom-right\"></p-toast>\n\n<!-- Shared outlets for notices raised where there is no per-instance key to use:\n     the root-provided PlotlyService and the region-editor dialog. Rendered by a\n     single visualizer (ownsSharedToasts) so a message from the root service is\n     not shown once per live viewer. -->\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizToastKey\"></p-toast>\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizAlertToastKey\" position=\"center\"></p-toast>\n\n<!-- Toolbar dock: docked across the top by default; drag the handle to detach\n     it into a floating, movable window (frees the top row for the image). -->\n<div class=\"toolbar-dock\" [class.floating]=\"toolbarFloating\"\n     [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n     [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\">\n  <div class=\"toolbar-drag-handle\" (mousedown)=\"onToolbarDragStart($event)\"\n       pTooltip=\"Drag to float the toolbar\" tooltipPosition=\"bottom\">\n    <i class=\"pi pi-bars\"></i>\n  </div>\n<plotting-toolbar\n  [imageInfo]=\"imageInfo\"\n  [plotTypeOptions]=\"plotTypeOptions\"\n  [selectedPlotType]=\"selectedPlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [activeDragMode]=\"activeDragMode\"\n  [activeSurface3dMode]=\"activeSurface3dMode\"\n  [axesVisible]=\"axesVisible\"\n  [wireframeActive]=\"wireframeActive\"\n  [resolutionScale]=\"resolutionScale\"\n  [wandSensitivity]=\"wandSensitivity\"\n  [brushSize]=\"brushSize\"\n  [samModels]=\"samModels\"\n  [samModelId]=\"samModelId\"\n  [vertexEraserRadius]=\"vertexEraserRadius\"\n  [canUndo]=\"canUndoRegion\"\n  [canRedo]=\"canRedoRegion\"\n  [stackOptions]=\"stackOptions\"\n  [tools]=\"toolbarTools\"\n  [imageSmoothingEnabled]=\"imageSmoothingEnabled\"\n  (selectPlotType)=\"onSelectPlotType($event)\"\n  (toggleImageSmoothing)=\"onToggleImageSmoothing()\"\n  (addProfileLine)=\"addProfileLine()\"\n  (isoRangeChange)=\"onIsoRangeChange($event)\"\n  (openChannelHistogram)=\"openChannelHistogram()\"\n  (openRegionEditor)=\"openRegionEditor()\"\n  (selectStackOption)=\"selectStackOption($event)\"\n  (zScrub)=\"onZScrub($event)\"\n  (zSlide)=\"onZSlide($event)\"\n  (zIndexInput)=\"zIndex = $event; updateZIndex()\"\n  (reloadAndPlot)=\"reloadAndPlot()\"\n  (downloadImage)=\"downloadImage()\"\n  (autoscaleImage)=\"autoscaleImage()\"\n  (toggleDragMode)=\"toggleDragMode($event)\"\n  (zoomIn)=\"zoomIn()\"\n  (zoomOut)=\"zoomOut()\"\n  (toggleSurface3dMode)=\"toggleSurface3dMode($event)\"\n  (resetSurfaceCamera)=\"resetSurfaceCamera()\"\n  (toggleAxes)=\"toggleAxes()\"\n  (toggleWireframe)=\"toggleWireframe()\"\n  (selectResolution)=\"selectResolution($event)\"\n  (deleteRegion)=\"deleteRegion()\"\n  (undoRegion)=\"undoRegion()\"\n  (redoRegion)=\"redoRegion()\"\n  (segmentRegions)=\"segmentRegions()\"\n  (segmentCellpose)=\"segmentCellpose()\"\n  (samModelChange)=\"onSamModelChange($event)\"\n  (wandSensitivityChange)=\"onWandSensitivityChange($event)\"\n  (brushSizeChange)=\"onBrushSizeChange($event)\"\n  (vertexEraserRadiusChange)=\"onVertexEraserRadiusChange($event)\">\n  <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n  <ng-content></ng-content>\n</plotting-toolbar>\n  <p-button *ngIf=\"toolbarFloating\" class=\"toolbar-dock-btn\" icon=\"pi pi-thumbtack\" size=\"small\" [text]=\"true\"\n            pTooltip=\"Dock to top\" tooltipPosition=\"bottom\" (onClick)=\"dockToolbar()\">\n  </p-button>\n</div>\n\n<p-contextMenu #cm [model]=\"contextMenuItems\" appendTo=\"body\"></p-contextMenu>\n<!-- No `h-full` here: PrimeFlex's height:100% !important made #plot as tall as\n     the whole host, so under the docked toolbar its bottom toolbar-height strip\n     (incl. the OSD scale bar at bottom-left) was clipped by the host's\n     overflow:hidden. The component stylesheet sizes it (.viz-plot { flex: 1 }). -->\n<div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n  <div *ngIf=\"imgLoading || stackLoading || isCaching\" id=\"overlay\">\n    <!-- Determinate stack/volume progress takes precedence: while it's active show ONLY the\n         progress bar + \"Loading frames...\", not the generic spinner/\"Loading image...\" on top of\n         it (both were rendering at once for napari volume/isosurface loads). -->\n    <ng-container *ngIf=\"stackLoading; else imgLoadingTpl\">\n      <p-progressBar class=\"progress\" [value]=\"loadingPercentage\"></p-progressBar>\n      <span class=\"text-loading\">Loading frames...</span>\n    </ng-container>\n    <ng-template #imgLoadingTpl>\n      <!-- Cache-copy progress is shown whenever a cache download is active (isCaching), independent\n           of `imgLoading`, so it's never dropped/masked mid-download. -->\n      <ng-container *ngIf=\"isCaching; else spinnerLoading\">\n        <!-- Stage-aware message comes from CacheProgressService updating\n             imageLoadingMessage$ (\"Caching image...\" during the GCS download,\n             then \"Generating preview...\" during per-slice thumbnail gen). Once the\n             download hits 100% the remaining work (server preview/tile generation)\n             has no determinate progress, so fall through to the spinner template\n             rather than parking a full bar under \"Loading image...\". -->\n        <p-progressBar class=\"progress\" [value]=\"cacheProgress\"></p-progressBar>\n        <span class=\"text-loading\">{{loadingMessage}}</span>\n      </ng-container>\n      <ng-template #spinnerLoading>\n        <div *ngIf=\"imgLoading\" class=\"spinner\"></div>\n        <span *ngIf=\"imgLoading && !zoom\" class=\"text-loading\">{{loadingMessage}}</span>\n        <span *ngIf=\"imgLoading && zoom\" class=\"zoom-text-loading\">{{loadingMessage}}</span>\n      </ng-template>\n    </ng-template>\n    <p-button *ngIf=\"stackLoading || imgLoading\" class=\"cancel-loading \" label=\"Cancel\"\n              (onClick)=\"cancelLoading()\">\n    </p-button>\n  </div>\n  <!-- Translucent \"sharpening\" overlay shown after the small-tier preview is\n       on screen while the large-tier render is still loading in the\n       background. Lets the user see the blurry image underneath but makes\n       it clear something is still loading so they don't mistake the\n       low-res render for the final image. -->\n  <div *ngIf=\"sharpening && !imgLoading && !stackLoading && !isCaching\" id=\"sharpening-overlay\">\n    <div class=\"spinner\"></div>\n    <span class=\"text-loading\">Sharpening preview...</span>\n  </div>\n\n</div>\n\n<!-- Floating, draggable intensity-profile inset. Shown in LINE mode; the chart\n     updates live as the line ROI on the image is moved. Kept OUTSIDE #plot and\n     positioned fixed so it floats over the whole page (not clipped to the\n     diagram/canvas area). -->\n<div *ngIf=\"hasProfiles\" class=\"intensity-panel\"\n     [style.left.px]=\"profilePanelPos.x\" [style.top.px]=\"profilePanelPos.y\">\n  <div class=\"intensity-panel-header\" (mousedown)=\"onProfilePanelDragStart($event)\">\n    <span>Intensity profile</span>\n    <i class=\"pi pi-arrows-alt\"></i>\n  </div>\n  <div [id]=\"intensityInsetDiv\" class=\"intensity-panel-plot\"></div>\n</div>\n\n<!-- Channels & Histogram: non-modal floating dialog opened from the toolbar. -->\n<channel-histogram [(visible)]=\"showChannelHistogram\"></channel-histogram>\n\n<!-- Region Editor: non-modal, draggable, resizable floating dialog opened from\n     the toolbar (formerly the right-panel Regions tab). Modeless so regions can\n     still be drawn/selected on the plot while it's open; stays linked to this\n     plotting instance via the root RegionStore singleton. Opens over the right\n     side of the view. -->\n<p-dialog header=\"Region Editor\" [(visible)]=\"showRegionEditor\"\n          [modal]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          [maximizable]=\"true\" appendTo=\"body\" position=\"right\"\n          [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <region-editor></region-editor>\n</p-dialog>\n\n<!-- Simplify (Douglas\u2013Peucker): custom px-threshold picker for the selected\n     region(s), opened from the right-click \"Simplify \u25B8 Custom\u2026\" action. -->\n<p-dialog header=\"Simplify region(s)\" [(visible)]=\"displaySimplifyDialog\" [modal]=\"true\"\n          [style]=\"{width: '22rem'}\" [draggable]=\"false\" [resizable]=\"false\">\n  <div class=\"flex flex-column gap-2\">\n    <span>Altitude threshold: <b>{{ simplifyThreshold }} px</b></span>\n    <p-slider [(ngModel)]=\"simplifyThreshold\" [min]=\"1\" [max]=\"20\" [step]=\"1\"></p-slider>\n    <small>Vertices within this distance of the line between their neighbours are removed.</small>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Cancel\" [text]=\"true\" (onClick)=\"displaySimplifyDialog = false\"></p-button>\n    <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"simplifyRegions(simplifyThreshold)\"></p-button>\n  </ng-template>\n</p-dialog>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-plot{flex:1;min-height:0;height:auto!important}.toolbar-dock{display:flex;align-items:stretch;width:100%}.toolbar-dock plotting-toolbar{flex:1;min-width:0}.toolbar-dock.floating{position:fixed;z-index:1000;width:auto;max-width:calc(100% - 16px);background:var(--surface-card, #ffffff);border:1px solid var(--surface-border, #cccccc);border-radius:6px;box-shadow:0 4px 16px #0000004d}.toolbar-dock.floating plotting-toolbar{flex:0 1 auto}.toolbar-dock.floating .toolbar-drag-handle{border-radius:6px 0 0 6px}.toolbar-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 .4rem;cursor:move;color:var(--primary-color);background:var(--surface-100, rgba(0, 0, 0, .04));border-right:1px solid var(--surface-border, #cccccc);-webkit-user-select:none;user-select:none}.toolbar-dock-btn{align-self:center}:host ::ng-deep .navigator{margin-bottom:80px!important;margin-right:12px!important}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}::ng-deep .context-menu-active>.p-menuitem-content{background-color:var(--primary-color)!important}::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-icon,::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-text{color:#fff!important}::ng-deep .context-menu-active>.p-menuitem-content .zoom-box-off-icon,::ng-deep .context-menu-active>.p-menuitem-content .wand-icon,::ng-deep .context-menu-active>.p-menuitem-content .polyline-icon,::ng-deep .context-menu-active>.p-menuitem-content .polygon-vertices-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-add-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-delete-icon,::ng-deep .context-menu-active>.p-menuitem-content .region-move-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-bezier-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-polygon-icon{filter:brightness(0) invert(1)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.progress{position:absolute;width:50%;left:25%;top:55%}.text-loading{position:absolute;margin:0 auto;left:45%;top:60%;font-weight:700}.zoom-text-loading{position:absolute;margin:0 auto;left:35%;top:60%;font-weight:700;display:inline-block;width:350px}.cancel-loading{position:absolute;margin:0 auto;left:46%;top:70%}.spinner{position:absolute;left:45%;top:45%;height:100px;width:100px;margin:0 auto;-webkit-animation:rotation .6s infinite linear;-moz-animation:rotation .6s infinite linear;-o-animation:rotation .6s infinite linear;animation:rotation .6s infinite linear;border-left:6px solid rgba(0,174,239,.15);border-right:6px solid rgba(0,174,239,.15);border-bottom:6px solid rgba(0,174,239,.15);border-top:6px solid rgb(82,107,178);border-radius:100%}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;z-index:1000}#sharpening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff2e;pointer-events:none;z-index:1000}#sharpening-overlay .spinner{height:60px;width:60px;border-width:4px;left:calc(50% - 30px);top:calc(50% - 60px)}#sharpening-overlay .text-loading{position:absolute;left:0;right:0;width:auto;text-align:center;top:calc(50% + 35px);font-size:.9rem;color:#526bb2}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes rotation{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes rotation{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}::ng-deep .zoom-box-off-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" fill=\"black\" fill-rule=\"evenodd\">%0A  <!-- Rectangle outline -->%0A  <rect x=\"2\" y=\"2\" width=\"56\" height=\"56\"/>%0A  <rect x=\"9\" y=\"9\" width=\"42\" height=\"42\"/>%0A  <!-- Magnifying glass ring -->%0A  <circle cx=\"70\" cy=\"70\" r=\"23\"/>%0A  <circle cx=\"70\" cy=\"70\" r=\"14\"/>%0A  <!-- Handle -->%0A  <polygon points=\"81,81 97,97 92,100 77,85\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<svg%0A   viewBox=\"0 0 100 100\"%0A   fill=\"black\"%0A   fill-rule=\"evenodd\"%0A   version=\"1.1\"%0A   id=\"svg4\"%0A   sodipodi:docname=\"wand.svg\"%0A   inkscape:version=\"1.4.3 (0d15f75, 2025-12-25)\"%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0A   xmlns=\"http://www.w3.org/2000/svg\"%0A   xmlns:svg=\"http://www.w3.org/2000/svg\">%0A  <defs%0A     id=\"defs4\" />%0A  <sodipodi:namedview%0A     id=\"namedview4\"%0A     pagecolor=\"%23ffffff\"%0A     bordercolor=\"%23000000\"%0A     borderopacity=\"0.25\"%0A     inkscape:showpageshadow=\"2\"%0A     inkscape:pageopacity=\"0.0\"%0A     inkscape:pagecheckerboard=\"0\"%0A     inkscape:deskcolor=\"%23d1d1d1\"%0A     inkscape:zoom=\"8.74\"%0A     inkscape:cx=\"50\"%0A     inkscape:cy=\"49.942792\"%0A     inkscape:window-width=\"1024\"%0A     inkscape:window-height=\"1186\"%0A     inkscape:window-x=\"3560\"%0A     inkscape:window-y=\"131\"%0A     inkscape:window-maximized=\"0\"%0A     inkscape:current-layer=\"svg4\" />%0A  <!-- Wand handle: thin diagonal stick from lower-left to upper-right -->%0A  <polygon%0A     points=\"12,92 78,26 74,22 8,88 \"%0A     id=\"polygon1\"%0A     transform=\"matrix(1.0375192,0.05799445,0.25179496,0.91871864,-17.85351,5.6289793)\" />%0A  <!-- 4-pointed star at the wand tip -->%0A  <polygon%0A     points=\"62,34 76,30 80,6 84,30 98,34 84,38 80,62 76,38 \"%0A     id=\"polygon2\"%0A     transform=\"matrix(1.3082889,0,0,1.0245178,-38.907958,-1.4056881)\" />%0A  <!-- Small sparkle to the upper-left -->%0A  <polygon%0A     points=\"46,30 36,32 34,42 32,32 22,30 32,28 34,18 36,28 \"%0A     id=\"polygon3\"%0A     transform=\"translate(-9.610984,-6.7505721)\" />%0A  <!-- Small sparkle to the lower-right -->%0A  <polygon%0A     points=\"62,80 70,82 62,84 60,92 58,84 50,82 58,80 60,72 \"%0A     id=\"polygon4\"%0A     transform=\"translate(0,-1.6018307)\" />%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .brush-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M512.5 74.3L291.1 222C262 241.4 243.5 272.9 240.5 307.3C302.8 320.1 351.9 369.2 364.8 431.6C399.3 428.6 430.7 410.1 450.1 381L597.7 159.5C604.4 149.4 608 137.6 608 125.4C608 91.5 580.5 64 546.6 64C534.5 64 522.6 67.6 512.5 74.3zM320 464C320 402.1 269.9 352 208 352C146.1 352 96 402.1 96 464C96 467.9 96.2 471.8 96.6 475.6C98.4 493.1 86.4 512 68.8 512L64 512C46.3 512 32 526.3 32 544C32 561.7 46.3 576 64 576L208 576C269.9 576 320 525.9 320 464z\"/></svg>') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polyline-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">%0A  <polyline points=\"1,14 5,3 10,11 15,2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polygon-vertices-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Polygon (click-to-place) tool icon: a traced polyline with vertex dots. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.4740709,0,0,1.4740709,-6.0268793,-6.8086826)\">%0A    <polyline points=\"23.877,16.627 14.657,10.767 5.25,21.551 12.757,29.397\"%0A              fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\"%0A              stroke-linejoin=\"round\" stroke-linecap=\"round\"/>%0A    <circle cx=\"23.877\" cy=\"16.627\" r=\"1.9\"/>%0A    <circle cx=\"14.657\" cy=\"10.767\" r=\"1.9\"/>%0A    <circle cx=\"5.25\" cy=\"21.551\" r=\"1.9\"/>%0A    <circle cx=\"12.757\" cy=\"29.397\" r=\"1.9\"/>%0A  </g>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-add-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Add-vertex tool icon: a region blob with three corner vertices and a plus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 9.65,29.0 H 5.85 v 5.3 H 0.55 v 3.4 H 5.85 v 5.3 H 9.65 V 37.7 H 14.95 V 34.3 H 9.65 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-delete-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Delete-vertex tool icon: a region blob with three corner vertices and a minus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 0.55,34.3 v 3.4 H 14.95 V 34.3 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .region-move-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Region-move tool icon: a region blob with a drag arrow. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <path d=\"m 17.115582,8.9648664 c 1.707597,-3.3276806 4.729468,-4.6824281 7.540287,-5.2348498 3.827703,-0.947008 7.991169,0.1052238 11.051414,3.5118228 2.523022,2.604273 4.518416,6.7079726 4.345738,11.1668036 -0.278204,2.985704 -2.398311,5.011251 -4.470451,5.274308 -2.638142,0.565574 -5.314655,0.09206 -7.943203,-0.341976 C 23.811664,22.446579 19.916808,20.499952 17.153955,16.606696 15.89724,14.462775 15.820494,11.12194 17.115585,8.9648664 Z\"%0A        fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.1\" stroke-miterlimit=\"10\"/>%0A  <path d=\"m 26.741429,13.966963 6.746922,16.786269 3.229398,-4.060758 3.583857,3.583857 2.761195,-2.761196 -3.583856,-3.571852 4.060758,-3.2354 z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-bezier-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-bezier tool icon: a smooth curve through two anchor points with control handles. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- smooth cubic curve between the two anchors -->%0A  <path d=\"M 7,34 C 7,16 37,28 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A        stroke-linecap=\"round\"/>%0A  <!-- control handles -->%0A  <line x1=\"7\" y1=\"34\" x2=\"7\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <line x1=\"37\" y1=\"10\" x2=\"37\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <circle cx=\"7\" cy=\"22\" r=\"2.2\"/>%0A  <circle cx=\"37\" cy=\"22\" r=\"2.2\"/>%0A  <!-- anchor points -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-polygon-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-polygon tool icon: endpoints joined by straight segments through a vertex. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- straight-segment path through the vertices -->%0A  <polyline points=\"7,34 22,12 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A            stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A  <!-- vertices -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"19\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.intensity-panel{position:fixed;z-index:1100;width:280px;height:180px;background:#191919e6;border:1px solid var(--primary-color, #3399ff);border-radius:6px;box-shadow:0 4px 14px #00000073;display:flex;flex-direction:column;overflow:hidden}.intensity-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;cursor:move;-webkit-user-select:none;user-select:none;background:#ffffff14;color:#eee;font-size:.75rem;font-weight:600}.intensity-panel-header i{opacity:.6;font-size:.7rem}.intensity-panel-plot{flex:1 1 auto;width:100%}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"] }]
+            args: [{ selector: 'visualizer', template: "<!-- SAM toast: live status + encoder-download progress bar (jit-ui#90). Sticky\n     while a segment runs; stays open until the bar reaches 100% and the run ends. -->\n<p-toast [key]=\"samToastKey\" position=\"bottom-right\">\n  <ng-template let-message pTemplate=\"message\">\n    <div style=\"flex: 1; min-width: 16rem\">\n      <div class=\"font-bold mb-1\">{{ message.summary }}</div>\n      <div>{{ samStatus || message.detail }}</div>\n      <p-progressBar *ngIf=\"samDownloading\" [value]=\"samProgress\" styleClass=\"mt-2 sam-progress\"></p-progressBar>\n      <p-progressBar *ngIf=\"samBusy && !samDownloading\" mode=\"indeterminate\" styleClass=\"mt-2\"\n                     [style]=\"{ height: '4px' }\"></p-progressBar>\n    </div>\n  </ng-template>\n</p-toast>\n\n<!-- Result/error notices from the library itself (segmentation outcome, region\n     validation). Rendered here so they do not depend on the host mounting a\n     keyless <p-toast> \u2014 without this the messages went nowhere in any host but\n     jit-ui, and a failed run looked like a button that did nothing. -->\n<p-toast [key]=\"resultToastKey\" position=\"bottom-right\"></p-toast>\n\n<!-- Shared outlets for notices raised where there is no per-instance key to use:\n     the root-provided PlotlyService and the region-editor dialog. Rendered by a\n     single visualizer (ownsSharedToasts) so a message from the root service is\n     not shown once per live viewer. -->\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizToastKey\"></p-toast>\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizAlertToastKey\" position=\"center\"></p-toast>\n\n<!-- Toolbar dock: docked across the top by default; drag the handle to detach\n     it into a floating, movable window (frees the top row for the image). -->\n<div class=\"toolbar-dock\" [class.floating]=\"toolbarFloating\"\n     [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n     [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\">\n  <div class=\"toolbar-drag-handle\" (mousedown)=\"onToolbarDragStart($event)\"\n       pTooltip=\"Drag to float the toolbar\" tooltipPosition=\"bottom\">\n    <i class=\"pi pi-bars\"></i>\n  </div>\n<plotting-toolbar\n  [imageInfo]=\"imageInfo\"\n  [plotTypeOptions]=\"plotTypeOptions\"\n  [selectedPlotType]=\"selectedPlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [activeDragMode]=\"activeDragMode\"\n  [activeSurface3dMode]=\"activeSurface3dMode\"\n  [axesVisible]=\"axesVisible\"\n  [wireframeActive]=\"wireframeActive\"\n  [resolutionScale]=\"resolutionScale\"\n  [wandSensitivity]=\"wandSensitivity\"\n  [brushSize]=\"brushSize\"\n  [samModels]=\"samModels\"\n  [samModelId]=\"samModelId\"\n  [yoloModels]=\"yoloModels\"\n  [yoloModelId]=\"yoloModelId\"\n  [vertexEraserRadius]=\"vertexEraserRadius\"\n  [canUndo]=\"canUndoRegion\"\n  [canRedo]=\"canRedoRegion\"\n  [stackOptions]=\"stackOptions\"\n  [tools]=\"toolbarTools\"\n  [imageSmoothingEnabled]=\"imageSmoothingEnabled\"\n  (selectPlotType)=\"onSelectPlotType($event)\"\n  (toggleImageSmoothing)=\"onToggleImageSmoothing()\"\n  (addProfileLine)=\"addProfileLine()\"\n  (isoRangeChange)=\"onIsoRangeChange($event)\"\n  (openChannelHistogram)=\"openChannelHistogram()\"\n  (openRegionEditor)=\"openRegionEditor()\"\n  (selectStackOption)=\"selectStackOption($event)\"\n  (zScrub)=\"onZScrub($event)\"\n  (zSlide)=\"onZSlide($event)\"\n  (zIndexInput)=\"zIndex = $event; updateZIndex()\"\n  (reloadAndPlot)=\"reloadAndPlot()\"\n  (downloadImage)=\"downloadImage()\"\n  (autoscaleImage)=\"autoscaleImage()\"\n  (toggleDragMode)=\"toggleDragMode($event)\"\n  (zoomIn)=\"zoomIn()\"\n  (zoomOut)=\"zoomOut()\"\n  (toggleSurface3dMode)=\"toggleSurface3dMode($event)\"\n  (resetSurfaceCamera)=\"resetSurfaceCamera()\"\n  (toggleAxes)=\"toggleAxes()\"\n  (toggleWireframe)=\"toggleWireframe()\"\n  (selectResolution)=\"selectResolution($event)\"\n  (deleteRegion)=\"deleteRegion()\"\n  (undoRegion)=\"undoRegion()\"\n  (redoRegion)=\"redoRegion()\"\n  (segmentRegions)=\"segmentRegions()\"\n  (segmentCellpose)=\"segmentCellpose()\"\n  (samModelChange)=\"onSamModelChange($event)\"\n  (detectYolo)=\"detectYolo()\"\n  (yoloModelChange)=\"onYoloModelChange($event)\"\n  (openYoloParams)=\"openYoloParams()\"\n  (wandSensitivityChange)=\"onWandSensitivityChange($event)\"\n  (brushSizeChange)=\"onBrushSizeChange($event)\"\n  (vertexEraserRadiusChange)=\"onVertexEraserRadiusChange($event)\">\n  <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n  <ng-content></ng-content>\n</plotting-toolbar>\n  <p-button *ngIf=\"toolbarFloating\" class=\"toolbar-dock-btn\" icon=\"pi pi-thumbtack\" size=\"small\" [text]=\"true\"\n            pTooltip=\"Dock to top\" tooltipPosition=\"bottom\" (onClick)=\"dockToolbar()\">\n  </p-button>\n</div>\n\n<p-contextMenu #cm [model]=\"contextMenuItems\" appendTo=\"body\"></p-contextMenu>\n<!-- No `h-full` here: PrimeFlex's height:100% !important made #plot as tall as\n     the whole host, so under the docked toolbar its bottom toolbar-height strip\n     (incl. the OSD scale bar at bottom-left) was clipped by the host's\n     overflow:hidden. The component stylesheet sizes it (.viz-plot { flex: 1 }). -->\n<div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n  <div *ngIf=\"imgLoading || stackLoading || isCaching\" id=\"overlay\">\n    <!-- Determinate stack/volume progress takes precedence: while it's active show ONLY the\n         progress bar + \"Loading frames...\", not the generic spinner/\"Loading image...\" on top of\n         it (both were rendering at once for napari volume/isosurface loads). -->\n    <ng-container *ngIf=\"stackLoading; else imgLoadingTpl\">\n      <p-progressBar class=\"progress\" [value]=\"loadingPercentage\"></p-progressBar>\n      <span class=\"text-loading\">Loading frames...</span>\n    </ng-container>\n    <ng-template #imgLoadingTpl>\n      <!-- Cache-copy progress is shown whenever a cache download is active (isCaching), independent\n           of `imgLoading`, so it's never dropped/masked mid-download. -->\n      <ng-container *ngIf=\"isCaching; else spinnerLoading\">\n        <!-- Stage-aware message comes from CacheProgressService updating\n             imageLoadingMessage$ (\"Caching image...\" during the GCS download,\n             then \"Generating preview...\" during per-slice thumbnail gen). Once the\n             download hits 100% the remaining work (server preview/tile generation)\n             has no determinate progress, so fall through to the spinner template\n             rather than parking a full bar under \"Loading image...\". -->\n        <p-progressBar class=\"progress\" [value]=\"cacheProgress\"></p-progressBar>\n        <span class=\"text-loading\">{{loadingMessage}}</span>\n      </ng-container>\n      <ng-template #spinnerLoading>\n        <div *ngIf=\"imgLoading\" class=\"spinner\"></div>\n        <span *ngIf=\"imgLoading && !zoom\" class=\"text-loading\">{{loadingMessage}}</span>\n        <span *ngIf=\"imgLoading && zoom\" class=\"zoom-text-loading\">{{loadingMessage}}</span>\n      </ng-template>\n    </ng-template>\n    <p-button *ngIf=\"stackLoading || imgLoading\" class=\"cancel-loading \" label=\"Cancel\"\n              (onClick)=\"cancelLoading()\">\n    </p-button>\n  </div>\n  <!-- Translucent \"sharpening\" overlay shown after the small-tier preview is\n       on screen while the large-tier render is still loading in the\n       background. Lets the user see the blurry image underneath but makes\n       it clear something is still loading so they don't mistake the\n       low-res render for the final image. -->\n  <div *ngIf=\"sharpening && !imgLoading && !stackLoading && !isCaching\" id=\"sharpening-overlay\">\n    <div class=\"spinner\"></div>\n    <span class=\"text-loading\">Sharpening preview...</span>\n  </div>\n\n</div>\n\n<!-- Floating, draggable intensity-profile inset. Shown in LINE mode; the chart\n     updates live as the line ROI on the image is moved. Kept OUTSIDE #plot and\n     positioned fixed so it floats over the whole page (not clipped to the\n     diagram/canvas area). -->\n<div *ngIf=\"hasProfiles\" class=\"intensity-panel\"\n     [style.left.px]=\"profilePanelPos.x\" [style.top.px]=\"profilePanelPos.y\">\n  <div class=\"intensity-panel-header\" (mousedown)=\"onProfilePanelDragStart($event)\">\n    <span>Intensity profile</span>\n    <i class=\"pi pi-arrows-alt\"></i>\n  </div>\n  <div [id]=\"intensityInsetDiv\" class=\"intensity-panel-plot\"></div>\n</div>\n\n<!-- Channels & Histogram: non-modal floating dialog opened from the toolbar. -->\n<channel-histogram [(visible)]=\"showChannelHistogram\"></channel-histogram>\n\n<!-- Region Editor: non-modal, draggable, resizable floating dialog opened from\n     the toolbar (formerly the right-panel Regions tab). Modeless so regions can\n     still be drawn/selected on the plot while it's open; stays linked to this\n     plotting instance via the root RegionStore singleton. Opens over the right\n     side of the view. -->\n<p-dialog header=\"Region Editor\" [(visible)]=\"showRegionEditor\"\n          [modal]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          [maximizable]=\"true\" appendTo=\"body\" position=\"right\"\n          [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <region-editor></region-editor>\n</p-dialog>\n\n<!-- Simplify (Douglas\u2013Peucker): custom px-threshold picker for the selected\n     region(s), opened from the right-click \"Simplify \u25B8 Custom\u2026\" action. -->\n<p-dialog header=\"Simplify region(s)\" [(visible)]=\"displaySimplifyDialog\" [modal]=\"true\"\n          [style]=\"{width: '22rem'}\" [draggable]=\"false\" [resizable]=\"false\">\n  <div class=\"flex flex-column gap-2\">\n    <span>Altitude threshold: <b>{{ simplifyThreshold }} px</b></span>\n    <p-slider [(ngModel)]=\"simplifyThreshold\" [min]=\"1\" [max]=\"20\" [step]=\"1\"></p-slider>\n    <small>Vertices within this distance of the line between their neighbours are removed.</small>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Cancel\" [text]=\"true\" (onClick)=\"displaySimplifyDialog = false\"></p-button>\n    <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"simplifyRegions(simplifyThreshold)\"></p-button>\n  </ng-template>\n</p-dialog>\n\n<!-- YOLO parameters. Same vocabulary as the pipeline step and the server tool,\n     so a result obtained here is reproducible there. Defaults come from the\n     active checkpoint's own registry entry. -->\n<p-dialog header=\"YOLO parameters\" [(visible)]=\"showYoloParams\" [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Confidence</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.confidence\" [min]=\"0\" [max]=\"1\" [step]=\"0.05\"\n                     [minFractionDigits]=\"2\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">IoU (per tile)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.iouThreshold\" [min]=\"0.1\" [max]=\"0.95\" [step]=\"0.05\"\n                     [minFractionDigits]=\"2\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Merge (cross-tile)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.mergeThreshold\" [min]=\"0.1\" [max]=\"0.95\" [step]=\"0.05\"\n                     [minFractionDigits]=\"2\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Downsampling factor</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.downsamplingFactor\" [min]=\"1\" [max]=\"10\" [step]=\"1\"\n                     [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Tile overlap X (%)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.overlapX\" [min]=\"0\" [max]=\"90\" [step]=\"5\"\n                     [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Tile overlap Y (%)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.overlapY\" [min]=\"0\" [max]=\"90\" [step]=\"5\"\n                     [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Min object area (px\u00B2)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.minArea\" [min]=\"0\" [max]=\"100000\" [step]=\"10\"\n                     [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Outline simplification (px)</label>\n      <p-inputNumber [(ngModel)]=\"yoloParams.simplifyTolerance\" [min]=\"0\" [max]=\"10\" [step]=\"0.5\"\n                     [minFractionDigits]=\"1\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n    <div class=\"field col-12 flex align-items-center gap-2\">\n      <p-checkbox [(ngModel)]=\"yoloParams.withMasks\" [binary]=\"true\" inputId=\"yoloMasks\"></p-checkbox>\n      <label for=\"yoloMasks\" class=\"text-sm mb-0\">\n        Segmentation mode \u2014 trace object outlines. Off detects bounding boxes only, which is\n        considerably faster.\n      </label>\n    </div>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetYoloParams()\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"showYoloParams = false\"></p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-plot{flex:1;min-height:0;height:auto!important}.toolbar-dock{display:flex;align-items:stretch;width:100%}.toolbar-dock plotting-toolbar{flex:1;min-width:0}.toolbar-dock.floating{position:fixed;z-index:1000;width:auto;max-width:calc(100% - 16px);background:var(--surface-card, #ffffff);border:1px solid var(--surface-border, #cccccc);border-radius:6px;box-shadow:0 4px 16px #0000004d}.toolbar-dock.floating plotting-toolbar{flex:0 1 auto}.toolbar-dock.floating .toolbar-drag-handle{border-radius:6px 0 0 6px}.toolbar-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 .4rem;cursor:move;color:var(--primary-color);background:var(--surface-100, rgba(0, 0, 0, .04));border-right:1px solid var(--surface-border, #cccccc);-webkit-user-select:none;user-select:none}.toolbar-dock-btn{align-self:center}:host ::ng-deep .navigator{margin-bottom:80px!important;margin-right:12px!important}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}::ng-deep .context-menu-active>.p-menuitem-content{background-color:var(--primary-color)!important}::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-icon,::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-text{color:#fff!important}::ng-deep .context-menu-active>.p-menuitem-content .zoom-box-off-icon,::ng-deep .context-menu-active>.p-menuitem-content .wand-icon,::ng-deep .context-menu-active>.p-menuitem-content .polyline-icon,::ng-deep .context-menu-active>.p-menuitem-content .polygon-vertices-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-add-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-delete-icon,::ng-deep .context-menu-active>.p-menuitem-content .region-move-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-bezier-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-polygon-icon{filter:brightness(0) invert(1)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.progress{position:absolute;width:50%;left:25%;top:55%}.text-loading{position:absolute;margin:0 auto;left:45%;top:60%;font-weight:700}.zoom-text-loading{position:absolute;margin:0 auto;left:35%;top:60%;font-weight:700;display:inline-block;width:350px}.cancel-loading{position:absolute;margin:0 auto;left:46%;top:70%}.spinner{position:absolute;left:45%;top:45%;height:100px;width:100px;margin:0 auto;-webkit-animation:rotation .6s infinite linear;-moz-animation:rotation .6s infinite linear;-o-animation:rotation .6s infinite linear;animation:rotation .6s infinite linear;border-left:6px solid rgba(0,174,239,.15);border-right:6px solid rgba(0,174,239,.15);border-bottom:6px solid rgba(0,174,239,.15);border-top:6px solid rgb(82,107,178);border-radius:100%}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;z-index:1000}#sharpening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff2e;pointer-events:none;z-index:1000}#sharpening-overlay .spinner{height:60px;width:60px;border-width:4px;left:calc(50% - 30px);top:calc(50% - 60px)}#sharpening-overlay .text-loading{position:absolute;left:0;right:0;width:auto;text-align:center;top:calc(50% + 35px);font-size:.9rem;color:#526bb2}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes rotation{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes rotation{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}::ng-deep .zoom-box-off-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" fill=\"black\" fill-rule=\"evenodd\">%0A  <!-- Rectangle outline -->%0A  <rect x=\"2\" y=\"2\" width=\"56\" height=\"56\"/>%0A  <rect x=\"9\" y=\"9\" width=\"42\" height=\"42\"/>%0A  <!-- Magnifying glass ring -->%0A  <circle cx=\"70\" cy=\"70\" r=\"23\"/>%0A  <circle cx=\"70\" cy=\"70\" r=\"14\"/>%0A  <!-- Handle -->%0A  <polygon points=\"81,81 97,97 92,100 77,85\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<svg%0A   viewBox=\"0 0 100 100\"%0A   fill=\"black\"%0A   fill-rule=\"evenodd\"%0A   version=\"1.1\"%0A   id=\"svg4\"%0A   sodipodi:docname=\"wand.svg\"%0A   inkscape:version=\"1.4.3 (0d15f75, 2025-12-25)\"%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0A   xmlns=\"http://www.w3.org/2000/svg\"%0A   xmlns:svg=\"http://www.w3.org/2000/svg\">%0A  <defs%0A     id=\"defs4\" />%0A  <sodipodi:namedview%0A     id=\"namedview4\"%0A     pagecolor=\"%23ffffff\"%0A     bordercolor=\"%23000000\"%0A     borderopacity=\"0.25\"%0A     inkscape:showpageshadow=\"2\"%0A     inkscape:pageopacity=\"0.0\"%0A     inkscape:pagecheckerboard=\"0\"%0A     inkscape:deskcolor=\"%23d1d1d1\"%0A     inkscape:zoom=\"8.74\"%0A     inkscape:cx=\"50\"%0A     inkscape:cy=\"49.942792\"%0A     inkscape:window-width=\"1024\"%0A     inkscape:window-height=\"1186\"%0A     inkscape:window-x=\"3560\"%0A     inkscape:window-y=\"131\"%0A     inkscape:window-maximized=\"0\"%0A     inkscape:current-layer=\"svg4\" />%0A  <!-- Wand handle: thin diagonal stick from lower-left to upper-right -->%0A  <polygon%0A     points=\"12,92 78,26 74,22 8,88 \"%0A     id=\"polygon1\"%0A     transform=\"matrix(1.0375192,0.05799445,0.25179496,0.91871864,-17.85351,5.6289793)\" />%0A  <!-- 4-pointed star at the wand tip -->%0A  <polygon%0A     points=\"62,34 76,30 80,6 84,30 98,34 84,38 80,62 76,38 \"%0A     id=\"polygon2\"%0A     transform=\"matrix(1.3082889,0,0,1.0245178,-38.907958,-1.4056881)\" />%0A  <!-- Small sparkle to the upper-left -->%0A  <polygon%0A     points=\"46,30 36,32 34,42 32,32 22,30 32,28 34,18 36,28 \"%0A     id=\"polygon3\"%0A     transform=\"translate(-9.610984,-6.7505721)\" />%0A  <!-- Small sparkle to the lower-right -->%0A  <polygon%0A     points=\"62,80 70,82 62,84 60,92 58,84 50,82 58,80 60,72 \"%0A     id=\"polygon4\"%0A     transform=\"translate(0,-1.6018307)\" />%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .brush-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M512.5 74.3L291.1 222C262 241.4 243.5 272.9 240.5 307.3C302.8 320.1 351.9 369.2 364.8 431.6C399.3 428.6 430.7 410.1 450.1 381L597.7 159.5C604.4 149.4 608 137.6 608 125.4C608 91.5 580.5 64 546.6 64C534.5 64 522.6 67.6 512.5 74.3zM320 464C320 402.1 269.9 352 208 352C146.1 352 96 402.1 96 464C96 467.9 96.2 471.8 96.6 475.6C98.4 493.1 86.4 512 68.8 512L64 512C46.3 512 32 526.3 32 544C32 561.7 46.3 576 64 576L208 576C269.9 576 320 525.9 320 464z\"/></svg>') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polyline-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">%0A  <polyline points=\"1,14 5,3 10,11 15,2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polygon-vertices-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Polygon (click-to-place) tool icon: a traced polyline with vertex dots. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.4740709,0,0,1.4740709,-6.0268793,-6.8086826)\">%0A    <polyline points=\"23.877,16.627 14.657,10.767 5.25,21.551 12.757,29.397\"%0A              fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\"%0A              stroke-linejoin=\"round\" stroke-linecap=\"round\"/>%0A    <circle cx=\"23.877\" cy=\"16.627\" r=\"1.9\"/>%0A    <circle cx=\"14.657\" cy=\"10.767\" r=\"1.9\"/>%0A    <circle cx=\"5.25\" cy=\"21.551\" r=\"1.9\"/>%0A    <circle cx=\"12.757\" cy=\"29.397\" r=\"1.9\"/>%0A  </g>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-add-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Add-vertex tool icon: a region blob with three corner vertices and a plus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 9.65,29.0 H 5.85 v 5.3 H 0.55 v 3.4 H 5.85 v 5.3 H 9.65 V 37.7 H 14.95 V 34.3 H 9.65 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-delete-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Delete-vertex tool icon: a region blob with three corner vertices and a minus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 0.55,34.3 v 3.4 H 14.95 V 34.3 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .region-move-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Region-move tool icon: a region blob with a drag arrow. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <path d=\"m 17.115582,8.9648664 c 1.707597,-3.3276806 4.729468,-4.6824281 7.540287,-5.2348498 3.827703,-0.947008 7.991169,0.1052238 11.051414,3.5118228 2.523022,2.604273 4.518416,6.7079726 4.345738,11.1668036 -0.278204,2.985704 -2.398311,5.011251 -4.470451,5.274308 -2.638142,0.565574 -5.314655,0.09206 -7.943203,-0.341976 C 23.811664,22.446579 19.916808,20.499952 17.153955,16.606696 15.89724,14.462775 15.820494,11.12194 17.115585,8.9648664 Z\"%0A        fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.1\" stroke-miterlimit=\"10\"/>%0A  <path d=\"m 26.741429,13.966963 6.746922,16.786269 3.229398,-4.060758 3.583857,3.583857 2.761195,-2.761196 -3.583856,-3.571852 4.060758,-3.2354 z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-bezier-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-bezier tool icon: a smooth curve through two anchor points with control handles. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- smooth cubic curve between the two anchors -->%0A  <path d=\"M 7,34 C 7,16 37,28 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A        stroke-linecap=\"round\"/>%0A  <!-- control handles -->%0A  <line x1=\"7\" y1=\"34\" x2=\"7\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <line x1=\"37\" y1=\"10\" x2=\"37\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <circle cx=\"7\" cy=\"22\" r=\"2.2\"/>%0A  <circle cx=\"37\" cy=\"22\" r=\"2.2\"/>%0A  <!-- anchor points -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-polygon-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-polygon tool icon: endpoints joined by straight segments through a vertex. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- straight-segment path through the vertices -->%0A  <polyline points=\"7,34 22,12 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A            stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A  <!-- vertices -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"19\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.intensity-panel{position:fixed;z-index:1100;width:280px;height:180px;background:#191919e6;border:1px solid var(--primary-color, #3399ff);border-radius:6px;box-shadow:0 4px 14px #00000073;display:flex;flex-direction:column;overflow:hidden}.intensity-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;cursor:move;-webkit-user-select:none;user-select:none;background:#ffffff14;color:#eee;font-size:.75rem;font-weight:600}.intensity-panel-header i{opacity:.6;font-size:.7rem}.intensity-panel-plot{flex:1 1 auto;width:100%}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IMAGE_STATE_PORT]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [VISUALIZER]
-                }] }, { type: i1$2.MessageService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: VisualizerStore }, { type: SamToolService }, { type: CellSegmentToolService }, { type: SamPointToolService }, { type: RegionOpsService }, { type: undefined, decorators: [{
+                }] }, { type: i1$2.MessageService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: VisualizerStore }, { type: SamToolService }, { type: CellSegmentToolService }, { type: YoloDetectToolService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [INSTANCE_SEGMENTER]
+                }] }, { type: SamPointToolService }, { type: RegionOpsService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -22061,5 +22324,5 @@ function provideVisualization() {
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_TOOLBAR_TOOLS, CELL_SEGMENTER, CHANNEL_HISTOGRAM_API, CellposeSegmenterService, ChannelHistogramComponent, DEFAULT_FALLBACK_PALETTE, DEFAULT_SAM_MODEL_ID, DEFAULT_YOLO_MODEL_ID, HexColorPickerComponent, IMAGE_STATE_PORT, INSTANCE_SEGMENTER, ImageConverterService, LUT_COLORS, MultiPolygon, NAPARI_DECIMATE_OPTIONS, NAPARI_DEFAULT_DECIMATE, PLOT_TYPE_DESCRIPTORS, PREFERENCES_PORT, PlotType, Polygon, ProcessingImage, REGION_EDITOR_API, REGION_IO_PORT, Rectangle, Region, RegionEditorComponent, RoutingVisualizerService, SAM_MODELS, ShapeSelection, TILE_ACCESS_PORT, VISUALIZER, VIZ_CONFIG, ViewerFeature, VisualizationModule, VisualizerComponent, YOLO_MODELS, YoloSegmenterService, capabilitiesOf, cropImage, defaultPresetSet, getDefaultSamModelId, getDefaultYoloModelId, getOrtWasmBase, getPlotTypeDescriptor, getSamModel, getYoloModel, isEmptyPresetSet, isNapari3d, isNapariIsosurface, isNapariScatter, isNapariScatter3d, isNapariSurface, isNapariVolume, isSamModelReady, isThreeDimensional, isYoloModelReady, provideVisualization, setDefaultSamModel, setDefaultYoloModel, setOrtWasmBase, setSamModelUrls, setYoloModelUrls };
+export { ALL_TOOLBAR_TOOLS, CELL_SEGMENTER, CHANNEL_HISTOGRAM_API, CellposeSegmenterService, ChannelHistogramComponent, DEFAULT_FALLBACK_PALETTE, DEFAULT_SAM_MODEL_ID, DEFAULT_YOLO_MODEL_ID, HexColorPickerComponent, IMAGE_STATE_PORT, INSTANCE_SEGMENTER, ImageConverterService, LUT_COLORS, MultiPolygon, NAPARI_DECIMATE_OPTIONS, NAPARI_DEFAULT_DECIMATE, PLOT_TYPE_DESCRIPTORS, PREFERENCES_PORT, PlotType, Polygon, ProcessingImage, REGION_EDITOR_API, REGION_IO_PORT, Rectangle, Region, RegionEditorComponent, RoutingVisualizerService, SAM_MODELS, ShapeSelection, TILE_ACCESS_PORT, VISUALIZER, VIZ_CONFIG, ViewerFeature, VisualizationModule, VisualizerComponent, YOLO_MODELS, YoloDetectToolService, YoloSegmenterService, capabilitiesOf, cropImage, defaultPresetSet, getDefaultSamModelId, getDefaultYoloModelId, getOrtWasmBase, getPlotTypeDescriptor, getSamModel, getYoloModel, isEmptyPresetSet, isNapari3d, isNapariIsosurface, isNapariScatter, isNapariScatter3d, isNapariSurface, isNapariVolume, isSamModelReady, isThreeDimensional, isYoloModelReady, provideVisualization, setDefaultSamModel, setDefaultYoloModel, setOrtWasmBase, setSamModelUrls, setYoloModelUrls };
 //# sourceMappingURL=jax-data-science-sci-image-visualizer.mjs.map