@jax-data-science/sci-image-visualizer 0.2.18 → 0.3.0

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

@@ -1,6 +1,5 @@
 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';
@@ -21,11 +20,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 i16$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 i18$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';
@@ -47,6 +46,7 @@ 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';
@@ -222,6 +222,69 @@ const ALL_TOOLBAR_TOOLS = {
     help: true,
 };
 
+/**
+ * How a tool gets into the toolbar without this library knowing what it is.
+ *
+ * WHY THIS EXISTS
+ * The YOLO detector and the retinal-layer segmenter used to be built in: their
+ * buttons were hardcoded in the toolbar template, their model registries named
+ * JAX checkpoints, and the `INSTANCE_SEGMENTER` / `SEMANTIC_SEGMENTER` tokens
+ * defaulted to in-library services that imported `yolo-segdetect-js` and
+ * `jax-ai-js`. Those default factories were the only thing pulling either
+ * package into the bundle — the contracts themselves were already clean.
+ *
+ * That arrangement cannot ship in an open library while the models are closed.
+ * So the tools move out, into a package that depends on this one, and arrive
+ * back through {@link TOOLBAR_TOOLS}. This library keeps the contracts, the
+ * chrome and the region plumbing; it no longer knows that YOLO exists.
+ *
+ * A host registers tools with a multi-provider:
+ *
+ *     { provide: TOOLBAR_TOOLS, useExisting: YoloToolContribution, multi: true }
+ *
+ * Register nothing and the toolbar has no segmentation tools, the help dialog
+ * lists none, and neither model package is in the graph.
+ *
+ * WHY PARAMS ARE DECLARED, NOT RENDERED
+ * A contribution describes its parameters ({@link ToolParamSpec}) instead of
+ * supplying a component to draw them. The toolbar renders one generic dialog
+ * from that description. The alternative — each plugin shipping its own dialog
+ * component — would make every plugin depend on this library's exact PrimeNG
+ * version and styling internals to look like the rest of the toolbar, and the
+ * two dialogs that exist today are entirely numbers and one checkbox. A schema
+ * covers them, and it is the same shape jit-ui already uses for its pipeline
+ * step parameters, so the vocabulary is familiar.
+ *
+ * If a tool ever needs a control this cannot express, add a variant here rather
+ * than an escape hatch that returns a component — the moment one tool draws
+ * itself, the toolbar stops being able to lay tools out consistently.
+ *
+ * WHY AN EMPTY MODEL LIST HIDES THE TOOL
+ * {@link ToolbarToolContribution.models} returning `[]` removes the tool from
+ * the toolbar entirely. This preserves the behaviour the built-in tools already
+ * had (their buttons were `*ngIf`'d on a filtered registry), and it gives a host
+ * one switch for "the weights are not configured in this deployment" that does
+ * not require unregistering the provider.
+ */
+/**
+ * Multi-provider token for contributed tools.
+ *
+ * Deliberately has no `factory`: unregistered means no tools, which is what
+ * makes this library shippable without the closed model packages. Inject it
+ * `{ optional: true }` and treat null as empty.
+ */
+const TOOLBAR_TOOLS = new InjectionToken('TOOLBAR_TOOLS');
+/** Sort contributed tools into display order. */
+function sortToolContributions(tools) {
+    // Stable: equal `order` keeps registration order, so a host controls ties by
+    // provider order without having to invent numbers.
+    return tools.map((t, i) => ({ t, i })).sort((a, b) => (a.t.order ?? 100) - (b.t.order ?? 100) || a.i - b.i).map(({ t }) => t);
+}
+/** The tools a toolbar should actually show: those with at least one model. */
+function visibleToolContributions(tools) {
+    return sortToolContributions(tools ?? []).filter((t) => t.models().length > 0);
+}
+
 /**
  * Optional features a viewer backend may or may not support. Consumers query
  * `IImageViewer.capabilities` and degrade gracefully (hide a toolbar item,
@@ -396,385 +459,406 @@ const CELL_SEGMENTER = new InjectionToken('CELL_SEGMENTER', {
 });
 
 /**
- * Registry of YOLOv8-seg instance-segmentation models.
+ * DI token for the automatic instance segmenter.
  *
- * Mirrors {@link SAM_MODELS}: public HF-hosted ONNX by default so the tool works
- * out of the box in any host, repointable at private hosting via
- * {@link setYoloModelUrls}.
- *
- * Each entry carries the per-model *defaults* the server-side worker uses for
- * that checkpoint. These are properties of how the model was trained (object
- * scale, expected crowding), not UI preferences — the embryo models want heavy
- * 60% tile overlap and loose merge thresholds because their objects are large
- * and touch, while the eye models were trained on sparse, downsampled fields.
- * Keeping them here means a host that just picks a model gets sane behaviour
- * without having to know any of that.
- *
- * Weights point at the `model.fp16w.onnx` variant deliberately. The `.fp16`
- * variant accumulates in half precision on WebGPU and, at the x-scale these
- * models use, produces materially wrong boxes; `fp16w` stores weights in fp16
- * and computes in fp32, so it is half the download at identical accuracy.
- *
- * Export tooling: the sibling `browser-onnx-tools` project.
+ * **No default.** It used to fall back to an in-library YOLO service, and that
+ * factory was what pulled `yolo-segdetect-js` into every bundle of this package
+ * — which is not shippable while the checkpoints are closed. A host provides an
+ * implementation (see `@jax-data-science/sci-image-visualizer-jax-tools`), or
+ * nothing does and no tool needing it is registered.
  */
-const HF$1 = 'https://huggingface.co/Ballon999';
-const EYE_DEFAULTS = {
-    confidence: 0.6,
-    iouThreshold: 0.5,
-    mergeThreshold: 0.3,
-    overlapX: 0,
-    overlapY: 0,
-};
+const INSTANCE_SEGMENTER = new InjectionToken('INSTANCE_SEGMENTER');
+
 /**
- * The retina is an elongated band spanning the whole field, so it crosses tile
- * seams wherever they fall.
- *
- * With no overlap the tiles butt together at fixed boundaries: a structure
- * sitting across a seam is cut in half, each tile sees only a slice, and the
- * slice often fails to clear the confidence threshold — so the object vanishes
- * exactly where the seam lands. Observed as multi-thousand-pixel holes in the
- * middle of an otherwise continuous retina, which closed once overlap was
- * raised.
+ * DI token for the semantic segmenter.
  *
- * An object of size `s` is guaranteed to sit wholly inside some tile only when
- * the overlap is at least `s / tileSize`; at 60% that covers anything up to
- * ~307px of a 512px tile. The server's own table uses 0 here and has the same
- * blind spot — this deliberately diverges from it.
- */
-const RETINA_DEFAULTS = {
-    confidence: 0.6,
-    iouThreshold: 0.5,
-    // Cross-tile merging uses intersection-over-*smaller*, so at 0.3 a fragment is
-    // discarded once 30% of its own area is covered by a larger box — even when
-    // most of it lies outside. On a band detected as a chain of overlapping
-    // fragments that deletes the middle ones. Measured on one slide: 0.3 gave two
-    // boxes covering 75% of the band with a 3150px hole through it; 0.8 gave four
-    // boxes covering 100% with no hole, at the cost of two overlapping pairs.
-    // Matches the value jit-ui already sends the server for this checkpoint.
-    mergeThreshold: 0.8,
-    overlapX: 60,
-    overlapY: 60,
-};
-// Embryos are large, touch each other, and are imaged at native scale — hence
-// the heavy overlap and the far looser merge thresholds.
-const EMBRYO_DEFAULTS = {
-    confidence: 0.6,
-    iouThreshold: 0.8,
-    mergeThreshold: 0.8,
-    overlapX: 60,
-    overlapY: 60,
-};
-const YOLO_MODELS = [
-    {
-        id: 'yolov8x-seg-opticnerve',
-        label: 'Optic nerve',
-        modelUrl: `${HF$1}/yolov8x-seg-opticnerve-onnx/resolve/main/model.fp16w.onnx`,
-        defaults: { ...EYE_DEFAULTS },
-    },
-    {
-        id: 'yolov8x-seg-retina',
-        label: 'Retina',
-        modelUrl: `${HF$1}/yolov8x-seg-retina-onnx/resolve/main/model.fp16w.onnx`,
-        defaults: { ...RETINA_DEFAULTS },
-    },
-    {
-        id: 'yolov8x-seg-embryo-m2',
-        label: 'Embryo (M2)',
-        modelUrl: `${HF$1}/yolov8x-seg-embryo-m2-onnx/resolve/main/model.fp16w.onnx`,
-        defaults: { ...EMBRYO_DEFAULTS },
-    },
-    {
-        id: 'yolov8x-seg-embryo-m3',
-        label: 'Embryo (M3)',
-        modelUrl: `${HF$1}/yolov8x-seg-embryo-m3-onnx/resolve/main/model.fp16w.onnx`,
-        defaults: { ...EMBRYO_DEFAULTS },
-    },
-];
-const DEFAULT_YOLO_MODEL_ID = 'yolov8x-seg-opticnerve';
-let defaultModelId$1 = DEFAULT_YOLO_MODEL_ID;
-/** Look up a model definition by id. Returns undefined for an unknown id. */
-function getYoloModel(id) {
-    return YOLO_MODELS.find((m) => m.id === id);
-}
-/** Whether a model has a usable weights URL configured. */
-function isYoloModelReady(id) {
-    const m = getYoloModel(id);
-    return !!m && m.modelUrl.trim().length > 0;
-}
-/**
- * Repoint a model at different hosting (e.g. a GCS bucket or a same-origin
- * proxy). Call once at app init, before the first run. An empty `modelUrl`
- * disables the model.
+ * **No default.** It used to fall back to an in-library jax-ai-js service, and
+ * that factory was what pulled `jax-ai-js` into every bundle of this package —
+ * which is not shippable while the checkpoints are closed. A host provides an
+ * implementation (see `@jax-data-science/sci-image-visualizer-jax-tools`), or
+ * nothing does and no tool needing it is registered.
  */
-function setYoloModelUrls(id, urls) {
-    const m = getYoloModel(id);
-    if (!m)
-        return;
-    if (urls.modelUrl !== undefined)
-        m.modelUrl = urls.modelUrl;
-    if (urls.metaUrl !== undefined)
-        m.metaUrl = urls.metaUrl;
-}
-/** Change which model runs when a caller does not name one. */
-function setDefaultYoloModel(id) {
-    if (getYoloModel(id))
-        defaultModelId$1 = id;
-}
-function getDefaultYoloModelId() {
-    return defaultModelId$1;
-}
+const SEMANTIC_SEGMENTER = new InjectionToken('SEMANTIC_SEGMENTER');
 
 /**
- * Default in-library {@link IInstanceSegmenter}, backed by yolo-segdetect-js
- * (YOLOv8-seg on WebGPU, falling back to WASM).
- *
- * `yolo-segdetect-js` is a regular dependency but is **lazy-imported** on first
- * use, so apps that never run YOLO pay nothing for it — or for onnxruntime-web —
- * in their initial bundle. This mirrors {@link CellposeSegmenterService}.
- *
- * The one structural difference from the Cellpose service: there are four YOLO
- * checkpoints, not one, so instances are cached **per model id** rather than as
- * a single singleton. Each entry owns its own worker and ORT session, so a host
- * that switches models pays a second load but keeps the first one warm. Nothing
- * evicts automatically — these are ~144 MB each, so a host that cycles through
- * all four should call {@link dispose} for the ones it is done with.
+ * Unified image container used throughout the processing pipeline.
+ * Decouples pipeline logic from any specific library's image format.
  */
-class YoloSegmenterService {
-    constructor() {
-        this.instances = new Map();
-        this.loading = new Map();
+class ProcessingImage {
+    /** Create from browser ImageData. */
+    static fromImageData(imageData) {
+        return new ProcessingImage(imageData.width, imageData.height, 4, new Uint8ClampedArray(imageData.data));
     }
-    async segmentInstances(image, opts = {}, progress) {
-        const modelId = opts.modelId ?? getDefaultYoloModelId();
-        const def = this.requireModel(modelId);
-        let announcedDownload = false;
-        const seg = await this.getModel(modelId, (loaded, total) => {
-            if (total)
-                progress?.onProgress?.(loaded / total);
-            progress?.onBytes?.(loaded, total);
-            if (loaded > 0 && !announcedDownload) {
-                announcedDownload = true;
-                progress?.onStatus?.(`Downloading ${def.label} model…`);
+    constructor(width, height, channels, data) {
+        this.width = width;
+        this.height = height;
+        this.channels = channels;
+        this.data = data;
+    }
+    /** Convert to browser-native ImageData (RGBA). */
+    toImageData() {
+        if (this.channels === 4) {
+            return new ImageData(this.data, this.width, this.height);
+        }
+        // Expand grayscale or RGB to RGBA
+        const rgba = new Uint8ClampedArray(this.width * this.height * 4);
+        for (let i = 0; i < this.width * this.height; i++) {
+            if (this.channels === 1) {
+                rgba[i * 4] = this.data[i];
+                rgba[i * 4 + 1] = this.data[i];
+                rgba[i * 4 + 2] = this.data[i];
             }
-        }, (status) => progress?.onStatus?.(status));
-        progress?.onStatus?.('Running inference…');
-        const result = await seg.segment({ data: image.data, width: image.width, height: image.height }, {
-            confThreshold: opts.confidence ?? def.defaults.confidence,
-            iouThreshold: opts.iouThreshold ?? def.defaults.iouThreshold,
-            threshold: opts.mergeThreshold ?? def.defaults.mergeThreshold,
-            overlapX: opts.overlapX ?? def.defaults.overlapX,
-            overlapY: opts.overlapY ?? def.defaults.overlapY,
-            ...(opts.maskThreshold !== undefined ? { maskThreshold: opts.maskThreshold } : {}),
-            ...(opts.maxDetections !== undefined ? { maxDetections: opts.maxDetections } : {}),
-            ...(opts.classFilter ? { classFilter: opts.classFilter } : {}),
-            ...(opts.withMasks !== undefined ? { withMasks: opts.withMasks } : {}),
-            ...(opts.signal ? { signal: opts.signal } : {}),
-            // Only worth tracing when there are masks to trace.
-            tracePolygons: opts.withMasks !== false,
-            traceOptions: {
-                ...(opts.simplifyTolerance !== undefined ? { simplifyTolerance: opts.simplifyTolerance } : {}),
-                ...(opts.minArea !== undefined ? { minArea: opts.minArea } : {}),
-            },
-            // The worker narrates its own phases — shader warm-up, per tile, merge,
-            // tracing — because only it knows which one it is in. Deriving a second
-            // status from tile counts here would just fight it.
-            onStatus: (s) => progress?.onStatus?.(s),
+            else if (this.channels === 3) {
+                rgba[i * 4] = this.data[i * 3];
+                rgba[i * 4 + 1] = this.data[i * 3 + 1];
+                rgba[i * 4 + 2] = this.data[i * 3 + 2];
+            }
+            rgba[i * 4 + 3] = 255;
+        }
+        return new ImageData(rgba, this.width, this.height);
+    }
+    /** Convert to Blob for saving/downloading. */
+    async toBlob(mime = 'image/png') {
+        const canvas = document.createElement('canvas');
+        canvas.width = this.width;
+        canvas.height = this.height;
+        const ctx = canvas.getContext('2d');
+        ctx.putImageData(this.toImageData(), 0, 0);
+        return new Promise((resolve) => {
+            canvas.toBlob((blob) => resolve(blob), mime);
         });
-        // A detection without an outline is still a detection.
-        //
-        // These used to be dropped, which quietly emptied the entire result in
-        // detection mode: no masks means no polygons, so every object was
-        // discarded and the caller saw nothing at all. The server does not work
-        // that way either — it always writes a box feature and only *adds*
-        // segmentation outlines when asked. Callers get the box and decide what to
-        // do with it.
-        const detections = result.detections.map((d) => ({
-            polygons: (d.polygons ?? []).map((p) => ({
-                exterior: p.exterior.map(([x, y]) => [x, y]),
-                holes: p.holes.map((h) => h.map(([x, y]) => [x, y])),
-            })),
-            box: [d.box[0], d.box[1], d.box[2], d.box[3]],
-            score: d.score,
-            classId: d.classId,
-            className: d.className ?? `class${d.classId}`,
-        }));
-        return {
-            detections,
-            width: result.width,
-            height: result.height,
-            classNames: result.classNames,
-        };
     }
-    /**
-     * The shared segmenter for a model id, created on first use and reused
-     * thereafter (deduped across concurrent callers). Exposed so a host's
-     * processing pipeline can drive richer `segment()` options on the same loaded
-     * session instead of loading the model twice.
-     */
-    getModel(modelId = getDefaultYoloModelId(), onProgress, onStatus) {
-        const existing = this.instances.get(modelId);
-        if (existing)
-            return Promise.resolve(existing);
-        const inFlight = this.loading.get(modelId);
-        if (inFlight)
-            return inFlight;
-        const def = this.requireModel(modelId);
-        const load = (async () => {
-            // Lazy: keep yolo-segdetect-js + its ORT runtime out of the initial bundle.
-            const { YoloSegmenter, configureOrt } = await import('yolo-segdetect-js');
-            configureOrt({ wasmPaths: getOrtWasmBase() });
-            const seg = await YoloSegmenter.fromPretrained(def.modelUrl, {
-                preload: true,
-                ...(def.metaUrl ? { metaUrl: def.metaUrl } : {}),
-                onProgress: ({ loaded, total }) => onProgress?.(loaded, total),
-                onStatus: (s) => onStatus?.(s),
-            });
-            this.instances.set(modelId, seg);
-            return seg;
-        })();
-        this.loading.set(modelId, load);
-        // A failed load must not poison the cache — the next caller should retry
-        // rather than inherit the rejected promise forever.
-        load.catch(() => this.loading.delete(modelId));
-        return load;
+}
+
+/** Copy a clamped rectangle of an RGBA source into a fresh, tightly-packed buffer. */
+function cropRgba(src, srcWidth, srcHeight, x, y, w, h) {
+    // Clamp the rectangle to the image so bad params snap to the valid region
+    // instead of reading out of bounds.
+    const x0 = Math.max(0, Math.min(srcWidth - 1, Math.floor(x)));
+    const y0 = Math.max(0, Math.min(srcHeight - 1, Math.floor(y)));
+    const width = Math.max(1, Math.min(srcWidth - x0, Math.floor(w)));
+    const height = Math.max(1, Math.min(srcHeight - y0, Math.floor(h)));
+    const out = new Uint8ClampedArray(width * height * 4);
+    for (let row = 0; row < height; row++) {
+        const srcRow = (y0 + row) * srcWidth + x0;
+        const dstRow = row * width;
+        for (let col = 0; col < width; col++) {
+            const si = (srcRow + col) * 4;
+            const di = (dstRow + col) * 4;
+            out[di] = src[si];
+            out[di + 1] = src[si + 1];
+            out[di + 2] = src[si + 2];
+            out[di + 3] = src[si + 3];
+        }
     }
-    /** Whether a model is already loaded (warm). */
-    isLoaded(modelId = getDefaultYoloModelId()) {
-        return this.instances.has(modelId);
+    return { data: out, width, height };
+}
+/** Nearest-neighbour downsample by an integer factor (≥1). factor=1 is a no-op. */
+function downsampleRgba(src, srcWidth, srcHeight, factor) {
+    if (factor <= 1)
+        return { data: src, width: srcWidth, height: srcHeight };
+    const width = Math.max(1, Math.floor(srcWidth / factor));
+    const height = Math.max(1, Math.floor(srcHeight / factor));
+    const out = new Uint8ClampedArray(width * height * 4);
+    for (let row = 0; row < height; row++) {
+        const sy = Math.min(srcHeight - 1, row * factor);
+        for (let col = 0; col < width; col++) {
+            const sx = Math.min(srcWidth - 1, col * factor);
+            const si = (sy * srcWidth + sx) * 4;
+            const di = (row * width + col) * 4;
+            out[di] = src[si];
+            out[di + 1] = src[si + 1];
+            out[di + 2] = src[si + 2];
+            out[di + 3] = src[si + 3];
+        }
     }
-    /**
-     * Release one model, or all of them. Safe to call on a model never loaded.
-     *
-     * In-flight loads are torn down too, not just warm ones. Simply dropping the
-     * pending promise and returning would let the load finish afterwards,
-     * re-populate {@link instances}, and strand a live worker and ORT session that
-     * nothing owns — disposal would have reported success while leaking. So a load
-     * that is still running is awaited and then released.
-     */
-    async dispose(modelId) {
-        const ids = modelId ? [modelId] : [...new Set([...this.instances.keys(), ...this.loading.keys()])];
-        await Promise.all(ids.map((id) => this.disposeOne(id)));
-    }
-    async disposeOne(id) {
-        const pending = this.loading.get(id);
-        const loaded = this.instances.get(id);
-        this.instances.delete(id);
-        this.loading.delete(id);
-        if (loaded)
-            await loaded.dispose();
-        if (!pending)
-            return;
-        // A pending load assigns instances[id] before its promise resolves, so by
-        // the time this await returns the entry is back. Clear it only if it still
-        // points at what *this* load produced — a newer load started in the
-        // meantime owns its own entry and must not be evicted.
-        const seg = await pending.catch(() => null);
-        if (!seg || seg === loaded)
-            return;
-        if (this.instances.get(id) === seg)
-            this.instances.delete(id);
-        await seg.dispose();
-    }
-    requireModel(modelId) {
-        const def = getYoloModel(modelId);
-        if (!def)
-            throw new Error(`Unknown YOLO model id "${modelId}".`);
-        if (!def.modelUrl.trim()) {
-            throw new Error(`YOLO model "${modelId}" is not configured — its modelUrl is empty.`);
-        }
-        return def;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: YoloSegmenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: YoloSegmenterService, providedIn: 'root' }); }
+    return { data: out, width, height };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: YoloSegmenterService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 /**
- * DI token for the automatic instance segmenter. Defaults to the in-library
- * {@link YoloSegmenterService} (yolo-segdetect-js, lazy-loaded); override it in
- * the host to swap implementations — for example to delegate to the server.
+ * Crop a rectangular region out of a {@link ProcessingImage} (browser-side, the
+ * counterpart of the JIT server's Slide Crop), optionally downsampling the crop
+ * by `2^level`. The rectangle is in source pixels and clamped to the image, so
+ * out-of-range values snap to the valid region rather than throwing. Always
+ * returns a 4-channel (RGBA) image.
  */
-const INSTANCE_SEGMENTER = new InjectionToken('INSTANCE_SEGMENTER', {
-    providedIn: 'root',
-    factory: () => inject(YoloSegmenterService),
-});
+function cropImage(image, opts = {}) {
+    // Work on RGBA so the crop is channel-count agnostic.
+    const src = image.channels === 4 ? image.data : image.toImageData().data;
+    const cropped = cropRgba(src, image.width, image.height, Number(opts.x ?? 0), Number(opts.y ?? 0), Number(opts.width ?? image.width), Number(opts.height ?? image.height));
+    const level = Math.max(0, Math.floor(Number(opts.level ?? 0)));
+    const factor = level > 0 ? 2 ** level : 1;
+    const final = downsampleRgba(cropped.data, cropped.width, cropped.height, factor);
+    return new ProcessingImage(final.width, final.height, 4, final.data);
+}
 
-class ShapeSelection {
-    constructor() {
-        this.editable = true;
-    }
+/**
+ * Converts between various image representations. Bridges image-js, browser
+ * canvas/image elements, and the neutral {@link ProcessingImage}. Generic image
+ * plumbing — no app/pipeline coupling.
+ */
+class ImageConverterService {
     /**
-     * Returns a Region object based on the shape type.
+     * Convert an image-js Image instance to ProcessingImage.
+     * image-js stores pixel data in a typed array with shape (width*height*channels).
      */
-    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])]);
+    fromImageJs(image) {
+        const width = image.width;
+        const height = image.height;
+        const channels = image.channels;
+        // image-js data is Uint8Array or Uint16Array; normalize to Uint8ClampedArray
+        let data;
+        if (image.bitDepth > 8) {
+            // Normalize 16-bit to 8-bit
+            const src = image.data;
+            const max = (1 << image.bitDepth) - 1;
+            data = new Uint8ClampedArray(src.length);
+            for (let i = 0; i < src.length; i++) {
+                data[i] = Math.round((src[i] / max) * 255);
             }
         }
         else {
-            throw new Error(`Unsupported shape type: ${this.type}`);
+            data = new Uint8ClampedArray(image.data);
         }
-        return region;
+        return new ProcessingImage(width, height, channels, data);
     }
-}
-
-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;
+    /** Convert from an HTMLCanvasElement. */
+    fromCanvas(canvas) {
+        const ctx = canvas.getContext('2d');
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        return ProcessingImage.fromImageData(imageData);
+    }
+    /** Convert from an HTMLImageElement. */
+    fromHtmlImage(img) {
+        const canvas = document.createElement('canvas');
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0);
+        return this.fromCanvas(canvas);
+    }
+    /** Convert ProcessingImage to a 2D array suitable for Plotly heatmap (grayscale). */
+    toPlotlyHeatmapZ(image) {
+        const z = [];
+        for (let y = 0; y < image.height; y++) {
+            const row = [];
+            for (let x = 0; x < image.width; x++) {
+                const idx = (y * image.width + x) * image.channels;
+                row.push(image.data[idx]);
+            }
+            z.push(row);
+        }
+        return z;
+    }
+    /** Convert ProcessingImage to Plotly RGB arrays [r[][], g[][], b[][]]. */
+    toPlotlyRgbArrays(image) {
+        const r = [];
+        const g = [];
+        const b = [];
+        for (let y = 0; y < image.height; y++) {
+            const rRow = [];
+            const gRow = [];
+            const bRow = [];
+            for (let x = 0; x < image.width; x++) {
+                const idx = (y * image.width + x) * image.channels;
+                rRow.push(image.data[idx]);
+                gRow.push(image.data[idx + 1]);
+                bRow.push(image.data[idx + 2]);
+            }
+            r.push(rRow);
+            g.push(gRow);
+            b.push(bRow);
+        }
+        return { r, g, b };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ImageConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ImageConverterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ImageConverterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Registry of promptable SAM models for the browser segment tool.
+ *
+ * micro-sam (microscopy-finetuned, promptable) and patho-sam (histopathology-
+ * finetuned) are entries; SAM3 slots in here once its quantized ONNX export and
+ * a `variant: 'sam3'` decoder path are published. The
+ * automatic cellpose-SAM model is intentionally NOT here — it's not promptable
+ * and lives in the processing-pipeline's cellpose engine as the automatic tool.
+ *
+ * `encoderUrl` / `decoderUrl` point at the public HF-hosted ONNX pairs by
+ * default, so the segment tools work out of the box in any host (mirroring the
+ * cellpose default). A host can repoint them at its own hosting (e.g. a GCS
+ * bucket) at runtime via {@link setSamModelUrls}; an empty URL disables a model
+ * (the session throws a clear "not configured" error). Export/quantization
+ * tooling: the sibling `browser-onnx-tools` project; see docs/sam-segmentation-design.md.
+ */
+const SAM_MODELS = [
+    {
+        id: 'microsam-vit-t-lm',
+        label: 'micro-sam ViT-T',
+        encoderUrl: 'https://huggingface.co/Ballon999/microsam-vit-t-lm-onnx/resolve/main/encoder.fp16.onnx',
+        decoderUrl: 'https://huggingface.co/Ballon999/microsam-vit-t-lm-onnx/resolve/main/decoder.onnx',
+        variant: 'sam1',
+        inputSize: 1024,
+        microscopy: true,
+        // TinyViT's fp16 attention overflows on the onnxruntime-web WebGPU EP and
+        // returns an empty mask ("No masks found"); it's numerically correct on
+        // WASM, and the encoder is tiny (~14 MB) so WASM is plenty fast.
+        encoderProviders: ['wasm'],
+        // Small enough to run in-process on the main thread — avoids the Web
+        // Worker's spawn / second-ORT-runtime / round-trip overhead, which made it
+        // noticeably slower to load and segment.
+        inProcess: true,
+    },
+    {
+        id: 'microsam-vit-b-lm',
+        label: 'micro-sam ViT-B',
+        encoderUrl: 'https://huggingface.co/Ballon999/microsam-vit-b-lm-onnx/resolve/main/encoder.fp16.onnx',
+        decoderUrl: 'https://huggingface.co/Ballon999/microsam-vit-b-lm-onnx/resolve/main/decoder.onnx',
+        variant: 'sam1',
+        inputSize: 1024,
+        microscopy: true,
+    },
+    {
+        id: 'patho-sam-vit-b',
+        label: 'patho-sam ViT-B',
+        encoderUrl: 'https://huggingface.co/Ballon999/patho-sam-vit-b-onnx/resolve/main/encoder.fp16.onnx',
+        decoderUrl: 'https://huggingface.co/Ballon999/patho-sam-vit-b-onnx/resolve/main/decoder.onnx',
+        variant: 'sam1',
+        inputSize: 1024,
+        microscopy: true,
+    },
+    {
+        id: 'patho-sam-vit-b-int8',
+        label: 'patho-sam ViT-B (int8)',
+        encoderUrl: 'https://huggingface.co/Ballon999/patho-sam-vit-b-onnx/resolve/main/encoder.int8.onnx',
+        decoderUrl: 'https://huggingface.co/Ballon999/patho-sam-vit-b-onnx/resolve/main/decoder.onnx',
+        variant: 'sam1',
+        inputSize: 1024,
+        microscopy: true,
+        // int8 dynamic-quantized encoder (~100 MB vs ~180 MB fp16, IoU ~0.99 on the
+        // sanity test). onnxruntime-web's WebGPU EP doesn't support int8 matmul, so
+        // it runs on WASM — smaller download, slower encode than the fp16 entry.
+        encoderProviders: ['wasm'],
+    },
+];
+/** Initial default model id (overridden at runtime once the host configures a
+ *  hosted model via {@link setSamModelUrls}). */
+const DEFAULT_SAM_MODEL_ID = SAM_MODELS[0].id;
+/** The active default — updated when the host configures a model's ONNX URLs,
+ *  so the tool uses the model that's actually hosted (not just the first entry). */
+let activeDefaultId = DEFAULT_SAM_MODEL_ID;
+/** Look up a model by id; falls back to the active default when id is
+ *  unknown/absent. */
+function getSamModel(id) {
+    const wanted = id ?? activeDefaultId;
+    return SAM_MODELS.find((m) => m.id === wanted) ?? SAM_MODELS[0];
+}
+/** The active default model id (what the tools/picker use when unset). */
+function getDefaultSamModelId() {
+    return activeDefaultId;
+}
+/** Set the active default model id (must be a registered model). */
+function setDefaultSamModel(id) {
+    if (SAM_MODELS.some((m) => m.id === id))
+        activeDefaultId = id;
+}
+/** True when a model has both ONNX URLs configured (i.e. it can actually run). */
+function isSamModelReady(model) {
+    return !!model.encoderUrl && !!model.decoderUrl;
+}
+/**
+ * Point a registered model at its hosted ONNX pair (HF / GCS). Called by the
+ * host's composition root once hosting is decided, keeping deployment URLs out
+ * of the library.
+ */
+function setSamModelUrls(id, encoderUrl, decoderUrl) {
+    const m = SAM_MODELS.find((x) => x.id === id);
+    if (m) {
+        m.encoderUrl = encoderUrl;
+        m.decoderUrl = decoderUrl;
+        // The configured (hosted) model becomes the active default, so the tools
+        // use it rather than the first registry entry (which may be unhosted).
+        if (encoderUrl && decoderUrl)
+            activeDefaultId = id;
+    }
+}
+
+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;
@@ -863,1056 +947,59 @@ class Region {
                     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.
- */
-/** Marks regions this tool produced, so a re-run can replace only its own. */
-const YOLO_REGION_SOURCE = 'yolo';
-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;
-            // View pixels -> full-resolution image pixels, for any ring.
-            const mapRing = (ring) => ring.map(([x, y]) => [Math.round(offsetX + x * ratioX), Math.round(offsetY + y * ratioY)]);
-            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;
-                        const exterior = mapRing(poly.exterior);
-                        added.push(this.makeRegion(exterior.map(([x]) => x), exterior.map(([, y]) => y), det.className, 
-                        // A mask with a void through it is a donut, and committing only
-                        // the exterior fills it in silently — which reads as a detection
-                        // that over-covers rather than as lost geometry. Each polygon
-                        // already owns its own holes, so there is no ambiguity about
-                        // which exterior a ring belongs to even when one mask splits
-                        // into several polygons. Rings too small to bound anything after
-                        // simplification are dropped rather than emitted.
-                        poly.holes.filter((h) => h.length >= 3).map(mapRing)));
-                    }
-                    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;
-            }
-            // Replace this tool's own previous output, keep everything else. Appending
-            // unconditionally made every tuning run stack onto the last, so the
-            // viewer accumulated overlapping results from parameters no longer in
-            // effect. Hand-drawn regions and other tools' output carry no `source`
-            // and are untouched.
-            const kept = (viz.getRegions() ?? []).filter((r) => r.source !== YOLO_REGION_SOURCE);
-            viz.setRegions([...kept, ...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, holes = []) {
-        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;
-        // Same closed-ring convention as the exterior: no repeated closing point.
-        // Left unset when empty so a solid region does not carry an empty array
-        // through export and round-tripping.
-        if (holes.length)
-            poly.holes = holes;
-        const region = new Region();
-        region.bounds = poly;
-        region.source = YOLO_REGION_SOURCE;
-        // 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]
-                }] }] });
-
-/**
- * Registry of retinal-layer semantic-segmentation models.
- *
- * Mirrors {@link YOLO_MODELS}: public HF-hosted ONNX by default, repointable at
- * private hosting via {@link setRetinalModelUrls}.
- *
- * ONLY ONE CHECKPOINT IS ENABLED, AND THAT IS DELIBERATE
- * The server offers four. Measured against the ground-truth masks shipped
- * alongside them, only VNet reproduces them:
- *
- * | checkpoint | mIoU |
- * |---|---|
- * | **VNet 2D** | **0.9061** |
- * | ResUNet-a 2D (base) | 0.3065 |
- * | ResUNet-a 2D 20x | 0.2869 |
- * | ResUNet-a 2D 40x | 0.2718 |
- *
- * The ResUNet-a numbers are not quantization damage — their ONNX exports match
- * their own Keras originals exactly. They disagree with the *masks*, folding
- * ground-truth class 1 into their class 2 and class 3 into background, and no
- * relabelling rescues them (the best of all 24 class permutations reaches only
- * 0.36). Either those masks belong to a different model generation or the class
- * definitions moved — an open question for whoever trained them.
- *
- * So their weights stay unpublished (their Hub repos are private) and their
- * entries here carry an empty `modelUrl`, which {@link isRetinalModelReady}
- * reports as not-ready. They are listed rather than deleted so a host shows
- * them as unavailable-in-browser instead of pretending the server's choice does
- * not exist — and so enabling one later is a URL, not a code change.
- *
- * Export tooling: the sibling `browser-onnx-tools` project.
- */
-const HF = 'https://huggingface.co/Ballon999';
-const RESUNET_UNAVAILABLE = 'Not available in the browser: this checkpoint scores mIoU ~0.3 against its own ' +
-    'ground-truth masks, pending a review of its class definitions. Run this step on the server.';
-const RETINAL_MODELS = [
-    {
-        id: 'vnet-2d-retinal',
-        label: 'VNet 2D (40x)',
-        modelUrl: `${HF}/vnet-2d-retinal-layer-onnx/resolve/main/model.fp16w.onnx`,
-        patchSize: 512,
-        // Nearly 6x the YOLO checkpoints. Worth surfacing before a user on a
-        // metered connection triggers it by clicking a toolbar button.
-        sizeMb: 590,
-        miou: 0.9061,
-    },
-    {
-        id: 'resunet-a-2d-retinal',
-        label: 'ResUNet-a 2D (40x)',
-        modelUrl: '',
-        patchSize: 512,
-        sizeMb: 102,
-        miou: 0.3065,
-        unavailableReason: RESUNET_UNAVAILABLE,
-    },
-    {
-        id: 'resunet-a-2d-retinal-20x',
-        label: 'ResUNet-a 2D (20x)',
-        modelUrl: '',
-        patchSize: 256,
-        sizeMb: 102,
-        miou: 0.2869,
-        unavailableReason: RESUNET_UNAVAILABLE,
-    },
-    {
-        id: 'resunet-a-2d-retinal-40x',
-        label: 'ResUNet-a 2D (40x, alt)',
-        modelUrl: '',
-        patchSize: 512,
-        sizeMb: 102,
-        miou: 0.2718,
-        unavailableReason: RESUNET_UNAVAILABLE,
-    },
-];
-const DEFAULT_RETINAL_MODEL_ID = 'vnet-2d-retinal';
-let defaultModelId = DEFAULT_RETINAL_MODEL_ID;
-/** Look up a model definition by id. Returns undefined for an unknown id. */
-function getRetinalModel(id) {
-    return RETINAL_MODELS.find((m) => m.id === id);
-}
-/** Whether a model has usable weights configured. */
-function isRetinalModelReady(id) {
-    const m = getRetinalModel(id);
-    return !!m && m.modelUrl.trim().length > 0;
-}
-/** Only the models a browser can actually run. */
-function readyRetinalModels() {
-    return RETINAL_MODELS.filter((m) => m.modelUrl.trim().length > 0);
-}
-/**
- * Repoint a model at different hosting (a GCS bucket, a same-origin proxy), or
- * enable one of the disabled entries. Call once at app init, before first use.
- * An empty `modelUrl` disables the model.
- */
-function setRetinalModelUrls(id, urls) {
-    const m = getRetinalModel(id);
-    if (!m)
-        return;
-    if (urls.modelUrl !== undefined)
-        m.modelUrl = urls.modelUrl;
-    if (urls.metaUrl !== undefined)
-        m.metaUrl = urls.metaUrl;
-    // A host that supplies weights has answered the question the reason
-    // describes. Decided from the model's post-update state rather than from the
-    // argument: a whitespace-only url, or a call that sets only `metaUrl`, leaves
-    // the model just as disabled — and clearing the reason there would strip the
-    // one explanation the user gets while `isRetinalModelReady` still says no.
-    if (isRetinalModelReady(id))
-        delete m.unavailableReason;
-}
-/** Change which model runs when a caller does not name one. */
-function setDefaultRetinalModel(id) {
-    if (getRetinalModel(id))
-        defaultModelId = id;
-}
-function getDefaultRetinalModelId() {
-    return defaultModelId;
-}
-
-/**
- * Default in-library {@link ISemanticSegmenter}, backed by jax-ai-js.
- *
- * `jax-ai-js` is a regular dependency but is **lazy-imported** on first use, so
- * apps that never segment retinal layers pay nothing for it — or for
- * onnxruntime-web — in their initial bundle. Mirrors
- * {@link YoloSegmenterService}, including its per-model-id cache.
- *
- * WEBGPU ONLY, AND A HOST MUST BE READY FOR THAT
- * Unlike the YOLO and Cellpose services, there is no WASM fallback to degrade
- * to: ORT-Web's WASM EP dies with `std::bad_alloc` on these graphs at 512², at
- * every precision. jax-ai-js throws `WebGpuRequiredError` rather than trying,
- * and it is re-thrown here unchanged so a host can show a real
- * unsupported-browser message instead of a generic failure.
- */
-class RetinalSegmenterService {
-    constructor() {
-        this.instances = new Map();
-        this.loading = new Map();
-    }
-    async segmentSemantic(image, opts = {}, progress) {
-        const modelId = opts.modelId ?? getDefaultRetinalModelId();
-        const def = this.requireModel(modelId);
-        let announcedDownload = false;
-        const seg = await this.getModel(modelId, (loaded, total) => {
-            if (total)
-                progress?.onProgress?.(loaded / total);
-            progress?.onBytes?.(loaded, total);
-            if (loaded > 0 && !announcedDownload) {
-                announcedDownload = true;
-                // The size is in the message because it is ~590 MB — a user who
-                // clicked a button deserves to know that before it finishes.
-                progress?.onStatus?.(`Downloading ${def.label} model (~${def.sizeMb} MB)…`);
-            }
-        }, (status) => progress?.onStatus?.(status), 
-        // A run cancelled mid-download should stop the download, not just the
-        // inference queued behind it.
-        opts.signal);
-        progress?.onStatus?.('Running inference…');
-        const result = await seg.segment({ data: image.data, width: image.width, height: image.height }, {
-            ...(opts.classThreshold !== undefined ? { classThreshold: opts.classThreshold } : {}),
-            ...(opts.classFilter ? { classFilter: opts.classFilter } : {}),
-            ...(opts.simplifyTolerance !== undefined ? { simplifyTolerance: opts.simplifyTolerance } : {}),
-            ...(opts.minArea !== undefined ? { minArea: opts.minArea } : {}),
-            ...(opts.signal ? { signal: opts.signal } : {}),
-            // The library narrates its own phases (per patch, then tracing) because
-            // only it knows which one it is in.
-            onStatus: (s) => progress?.onStatus?.(s),
-        });
-        const regions = result.regions.map((r) => ({
-            exterior: r.exterior.map(([x, y]) => [x, y]),
-            holes: r.holes.map((h) => h.map(([x, y]) => [x, y])),
-            classId: r.classId,
-            className: r.className,
-            area: r.area,
-        }));
-        return {
-            regions,
-            classAreas: result.classAreas,
-            classNames: [...result.classNames],
-            width: result.width,
-            height: result.height,
-            unassignedFraction: result.unassignedFraction,
-        };
-    }
-    /**
-     * The shared segmenter for a model id, created on first use and reused
-     * thereafter (deduped across concurrent callers). Exposed so a host's
-     * processing pipeline can run on the same loaded session rather than paying
-     * the ~590 MB load twice.
-     */
-    getModel(modelId = getDefaultRetinalModelId(), onProgress, onStatus, 
-    /**
-     * Abort the load. This model is ~590 MB, so a cancel has to reach the
-     * *download* — aborting only the inference that follows leaves the transfer
-     * running and the UI stuck in "Cancelling" until it completes.
-     *
-     * Deliberately not applied to a load already in flight: that promise may be
-     * shared with another caller (the toolbar tool and the pipeline both use
-     * this service), and one caller's cancel must not tear the model out from
-     * under the other. A second caller joining an in-flight load simply waits.
-     */
-    signal) {
-        const existing = this.instances.get(modelId);
-        if (existing)
-            return Promise.resolve(existing);
-        const inFlight = this.loading.get(modelId);
-        if (inFlight)
-            return inFlight;
-        const def = this.requireModel(modelId);
-        const load = (async () => {
-            // Lazy: keep jax-ai-js + its ORT runtime out of the initial bundle.
-            const { RetinalSegmenter, configureOrt } = await import('jax-ai-js');
-            configureOrt({ wasmPaths: getOrtWasmBase() });
-            const seg = await RetinalSegmenter.fromPretrained({
-                modelUrl: def.modelUrl,
-                ...(def.metaUrl ? { metaUrl: def.metaUrl } : {}),
-                ...(signal ? { signal } : {}),
-                onProgress: (loaded, total) => onProgress?.(loaded, total),
-                onStatus: (s) => onStatus?.(s),
-            });
-            this.instances.set(modelId, seg);
-            return seg;
-        })();
-        this.loading.set(modelId, load);
-        // A failed load must not poison the cache — the next caller should retry
-        // rather than inherit the rejected promise forever.
-        load.catch(() => this.loading.delete(modelId));
-        return load;
-    }
-    /** Whether a model is already loaded (warm). */
-    isLoaded(modelId = getDefaultRetinalModelId()) {
-        return this.instances.has(modelId);
-    }
-    /**
-     * Release one model, or all of them. Safe to call on a model never loaded.
-     *
-     * In-flight loads are torn down too: dropping a pending promise and returning
-     * would let the load finish afterwards, re-populate {@link instances}, and
-     * strand a live ORT session that nothing owns — disposal would report success
-     * while leaking. At 590 MB that leak is not survivable.
-     */
-    async dispose(modelId) {
-        const ids = modelId
-            ? [modelId]
-            : [...new Set([...this.instances.keys(), ...this.loading.keys()])];
-        await Promise.all(ids.map((id) => this.disposeOne(id)));
-    }
-    async disposeOne(id) {
-        const pending = this.loading.get(id);
-        const loaded = this.instances.get(id);
-        this.instances.delete(id);
-        this.loading.delete(id);
-        if (loaded)
-            await loaded.dispose();
-        if (!pending)
-            return;
-        // A pending load assigns instances[id] before its promise resolves, so by
-        // the time this await returns the entry is back. Clear it only if it still
-        // points at what *this* load produced — a newer load started meanwhile owns
-        // its own entry and must not be evicted.
-        const seg = await pending.catch(() => null);
-        if (!seg || seg === loaded)
-            return;
-        if (this.instances.get(id) === seg)
-            this.instances.delete(id);
-        await seg.dispose();
-    }
-    requireModel(modelId) {
-        const def = getRetinalModel(modelId);
-        if (!def)
-            throw new Error(`Unknown retinal model id "${modelId}".`);
-        if (!def.modelUrl.trim()) {
-            // Prefer the registry's specific explanation over "not configured" — the
-            // ResUNet-a entries are disabled for a documented accuracy reason, and a
-            // user who picked one deserves to be told which.
-            throw new Error(def.unavailableReason ?? `Retinal model "${modelId}" has no modelUrl configured.`);
-        }
-        return def;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RetinalSegmenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RetinalSegmenterService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RetinalSegmenterService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * DI token for the semantic segmenter, defaulting to the in-library
- * jax-ai-js-backed implementation. Hosts override it to supply their own.
- */
-const SEMANTIC_SEGMENTER = new InjectionToken('SEMANTIC_SEGMENTER', {
-    providedIn: 'root',
-    factory: () => inject(RetinalSegmenterService),
-});
-
-/** Marks regions this tool produced, so a re-run can replace only its own. */
-const RETINAL_REGION_SOURCE = 'retinal-layer';
-/**
- * Retinal-layer segmentation over the current view.
- *
- * Sibling of {@link YoloDetectToolService}, and structured the same way: run on
- * whatever is on screen, map the results onto full-image coordinates through
- * the viewer's source rect, and commit them as regions. The difference is what
- * comes back — layers that tile the field rather than discrete objects, so
- * every region is one connected component of one layer and there is no
- * per-object confidence to filter on.
- *
- * Exposes the same `status$` / `busy$` / `progress$` surface as the cellpose and
- * YOLO tools so the host's shared segmentation toast drives it unchanged.
- */
-class RetinalLayerToolService {
-    constructor(
-    /** Server-side crop, so segmentation 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);
-    }
-    /**
-     * Segment the current view and commit the layers as regions.
-     *
-     * @returns the number of regions added.
-     */
-    async segmentInView(viz, segmenter, opts = {}) {
-        const pixels = viz.getDisplayedPixelData?.();
-        if (!pixels || pixels.width === 0 || pixels.height === 0) {
-            this.status$.next('No image on screen to segment.');
-            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.segmentSemantic(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;
-            // View pixels -> image pixels, for any ring.
-            const mapRing = (ring) => ring.map(([x, y]) => [Math.round(offsetX + x * ratioX), Math.round(offsetY + y * ratioY)]);
-            const added = [];
-            for (const r of result.regions) {
-                if (r.exterior.length < 3)
-                    continue;
-                const exterior = mapRing(r.exterior);
-                added.push(this.makeRegion(exterior.map(([x]) => x), exterior.map(([, y]) => y), r.className, 
-                // Holes are real findings here, not noise: a layer with a void
-                // through it is a donut, and dropping the interior rings fills it
-                // in silently. Rings that survive simplification to fewer than 3
-                // points cannot bound anything, so they are skipped rather than
-                // emitted as degenerate geometry.
-                r.holes.filter((h) => h.length >= 3).map(mapRing)));
-            }
-            if (added.length === 0) {
-                // Distinguish "found nothing" from "was unsure everywhere". The second
-                // is the signature of wrong preprocessing or the wrong magnification,
-                // and reads as a silent no-op unless it is said out loud.
-                this.status$.next(result.unassignedFraction > 0.9
-                    ? 'No layers found — the model was unsure across the whole view. ' +
-                        'Check the magnification matches the model.'
-                    : 'No layers found.');
-                return 0;
-            }
-            // Replace this tool's own previous output, keep everything else.
-            // Hand-drawn regions and other tools' output carry a different `source`
-            // (or none) and are untouched.
-            const kept = (viz.getRegions() ?? []).filter((x) => x.source !== RETINAL_REGION_SOURCE);
-            viz.setRegions([...kept, ...added]);
-            this.status$.next(`Added ${added.length} region(s).`);
-            return added.length;
-        }
-        catch (err) {
-            this.status$.next(err instanceof Error ? err.message : 'Retinal layer segmentation 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, holes = []) {
-        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;
-        // Same closed-ring convention as the exterior: no repeated closing point.
-        // Left unset when empty so a solid region does not carry an empty array
-        // through export and round-tripping.
-        if (holes.length)
-            poly.holes = holes;
-        const region = new Region();
-        region.bounds = poly;
-        region.source = RETINAL_REGION_SOURCE;
-        // The class name drives preset colour resolution; leaving `color` unset lets
-        // an existing preset for this layer win.
-        region.label = className;
-        return region;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RetinalLayerToolService, 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: RetinalLayerToolService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RetinalLayerToolService, 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.
- */
-class ProcessingImage {
-    /** Create from browser ImageData. */
-    static fromImageData(imageData) {
-        return new ProcessingImage(imageData.width, imageData.height, 4, new Uint8ClampedArray(imageData.data));
-    }
-    constructor(width, height, channels, data) {
-        this.width = width;
-        this.height = height;
-        this.channels = channels;
-        this.data = data;
-    }
-    /** Convert to browser-native ImageData (RGBA). */
-    toImageData() {
-        if (this.channels === 4) {
-            return new ImageData(this.data, this.width, this.height);
-        }
-        // Expand grayscale or RGB to RGBA
-        const rgba = new Uint8ClampedArray(this.width * this.height * 4);
-        for (let i = 0; i < this.width * this.height; i++) {
-            if (this.channels === 1) {
-                rgba[i * 4] = this.data[i];
-                rgba[i * 4 + 1] = this.data[i];
-                rgba[i * 4 + 2] = this.data[i];
-            }
-            else if (this.channels === 3) {
-                rgba[i * 4] = this.data[i * 3];
-                rgba[i * 4 + 1] = this.data[i * 3 + 1];
-                rgba[i * 4 + 2] = this.data[i * 3 + 2];
-            }
-            rgba[i * 4 + 3] = 255;
-        }
-        return new ImageData(rgba, this.width, this.height);
-    }
-    /** Convert to Blob for saving/downloading. */
-    async toBlob(mime = 'image/png') {
-        const canvas = document.createElement('canvas');
-        canvas.width = this.width;
-        canvas.height = this.height;
-        const ctx = canvas.getContext('2d');
-        ctx.putImageData(this.toImageData(), 0, 0);
-        return new Promise((resolve) => {
-            canvas.toBlob((blob) => resolve(blob), mime);
-        });
-    }
-}
-
-/** Copy a clamped rectangle of an RGBA source into a fresh, tightly-packed buffer. */
-function cropRgba(src, srcWidth, srcHeight, x, y, w, h) {
-    // Clamp the rectangle to the image so bad params snap to the valid region
-    // instead of reading out of bounds.
-    const x0 = Math.max(0, Math.min(srcWidth - 1, Math.floor(x)));
-    const y0 = Math.max(0, Math.min(srcHeight - 1, Math.floor(y)));
-    const width = Math.max(1, Math.min(srcWidth - x0, Math.floor(w)));
-    const height = Math.max(1, Math.min(srcHeight - y0, Math.floor(h)));
-    const out = new Uint8ClampedArray(width * height * 4);
-    for (let row = 0; row < height; row++) {
-        const srcRow = (y0 + row) * srcWidth + x0;
-        const dstRow = row * width;
-        for (let col = 0; col < width; col++) {
-            const si = (srcRow + col) * 4;
-            const di = (dstRow + col) * 4;
-            out[di] = src[si];
-            out[di + 1] = src[si + 1];
-            out[di + 2] = src[si + 2];
-            out[di + 3] = src[si + 3];
-        }
-    }
-    return { data: out, width, height };
-}
-/** Nearest-neighbour downsample by an integer factor (≥1). factor=1 is a no-op. */
-function downsampleRgba(src, srcWidth, srcHeight, factor) {
-    if (factor <= 1)
-        return { data: src, width: srcWidth, height: srcHeight };
-    const width = Math.max(1, Math.floor(srcWidth / factor));
-    const height = Math.max(1, Math.floor(srcHeight / factor));
-    const out = new Uint8ClampedArray(width * height * 4);
-    for (let row = 0; row < height; row++) {
-        const sy = Math.min(srcHeight - 1, row * factor);
-        for (let col = 0; col < width; col++) {
-            const sx = Math.min(srcWidth - 1, col * factor);
-            const si = (sy * srcWidth + sx) * 4;
-            const di = (row * width + col) * 4;
-            out[di] = src[si];
-            out[di + 1] = src[si + 1];
-            out[di + 2] = src[si + 2];
-            out[di + 3] = src[si + 3];
-        }
-    }
-    return { data: out, width, height };
-}
-/**
- * Crop a rectangular region out of a {@link ProcessingImage} (browser-side, the
- * counterpart of the JIT server's Slide Crop), optionally downsampling the crop
- * by `2^level`. The rectangle is in source pixels and clamped to the image, so
- * out-of-range values snap to the valid region rather than throwing. Always
- * returns a 4-channel (RGBA) image.
- */
-function cropImage(image, opts = {}) {
-    // Work on RGBA so the crop is channel-count agnostic.
-    const src = image.channels === 4 ? image.data : image.toImageData().data;
-    const cropped = cropRgba(src, image.width, image.height, Number(opts.x ?? 0), Number(opts.y ?? 0), Number(opts.width ?? image.width), Number(opts.height ?? image.height));
-    const level = Math.max(0, Math.floor(Number(opts.level ?? 0)));
-    const factor = level > 0 ? 2 ** level : 1;
-    const final = downsampleRgba(cropped.data, cropped.width, cropped.height, factor);
-    return new ProcessingImage(final.width, final.height, 4, final.data);
-}
-
-/**
- * Converts between various image representations. Bridges image-js, browser
- * canvas/image elements, and the neutral {@link ProcessingImage}. Generic image
- * plumbing — no app/pipeline coupling.
- */
-class ImageConverterService {
-    /**
-     * Convert an image-js Image instance to ProcessingImage.
-     * image-js stores pixel data in a typed array with shape (width*height*channels).
-     */
-    fromImageJs(image) {
-        const width = image.width;
-        const height = image.height;
-        const channels = image.channels;
-        // image-js data is Uint8Array or Uint16Array; normalize to Uint8ClampedArray
-        let data;
-        if (image.bitDepth > 8) {
-            // Normalize 16-bit to 8-bit
-            const src = image.data;
-            const max = (1 << image.bitDepth) - 1;
-            data = new Uint8ClampedArray(src.length);
-            for (let i = 0; i < src.length; i++) {
-                data[i] = Math.round((src[i] / max) * 255);
-            }
-        }
-        else {
-            data = new Uint8ClampedArray(image.data);
+            }
         }
-        return new ProcessingImage(width, height, channels, data);
+        return shape;
     }
-    /** Convert from an HTMLCanvasElement. */
-    fromCanvas(canvas) {
-        const ctx = canvas.getContext('2d');
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        return ProcessingImage.fromImageData(imageData);
+    isRectangle(bnds) {
+        return 'x' in bnds && 'y' in bnds && 'width' in bnds && 'height' in bnds;
     }
-    /** Convert from an HTMLImageElement. */
-    fromHtmlImage(img) {
-        const canvas = document.createElement('canvas');
-        canvas.width = img.naturalWidth;
-        canvas.height = img.naturalHeight;
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(img, 0, 0);
-        return this.fromCanvas(canvas);
+    isPolygon(bnds) {
+        return 'npoints' in bnds && 'xpoints' in bnds && 'ypoints' in bnds;
     }
-    /** Convert ProcessingImage to a 2D array suitable for Plotly heatmap (grayscale). */
-    toPlotlyHeatmapZ(image) {
-        const z = [];
-        for (let y = 0; y < image.height; y++) {
-            const row = [];
-            for (let x = 0; x < image.width; x++) {
-                const idx = (y * image.width + x) * image.channels;
-                row.push(image.data[idx]);
-            }
-            z.push(row);
-        }
-        return z;
+}
+class Rectangle {
+    constructor() {
+        this.x = 0;
+        this.y = 0;
+        this.width = 0;
+        this.height = 0;
     }
-    /** Convert ProcessingImage to Plotly RGB arrays [r[][], g[][], b[][]]. */
-    toPlotlyRgbArrays(image) {
-        const r = [];
-        const g = [];
-        const b = [];
-        for (let y = 0; y < image.height; y++) {
-            const rRow = [];
-            const gRow = [];
-            const bRow = [];
-            for (let x = 0; x < image.width; x++) {
-                const idx = (y * image.width + x) * image.channels;
-                rRow.push(image.data[idx]);
-                gRow.push(image.data[idx + 1]);
-                bRow.push(image.data[idx + 2]);
-            }
-            r.push(rRow);
-            g.push(gRow);
-            b.push(bRow);
-        }
-        return { r, g, b };
+}
+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;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ImageConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ImageConverterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ImageConverterService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 /**
- * Registry of promptable SAM models for the browser segment tool.
- *
- * micro-sam (microscopy-finetuned, promptable) and patho-sam (histopathology-
- * finetuned) are entries; SAM3 slots in here once its quantized ONNX export and
- * a `variant: 'sam3'` decoder path are published. The
- * automatic cellpose-SAM model is intentionally NOT here — it's not promptable
- * and lives in the processing-pipeline's cellpose engine as the automatic tool.
+ * 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).
  *
- * `encoderUrl` / `decoderUrl` point at the public HF-hosted ONNX pairs by
- * default, so the segment tools work out of the box in any host (mirroring the
- * cellpose default). A host can repoint them at its own hosting (e.g. a GCS
- * bucket) at runtime via {@link setSamModelUrls}; an empty URL disables a model
- * (the session throws a clear "not configured" error). Export/quantization
- * tooling: the sibling `browser-onnx-tools` project; see docs/sam-segmentation-design.md.
- */
-const SAM_MODELS = [
-    {
-        id: 'microsam-vit-t-lm',
-        label: 'micro-sam ViT-T',
-        encoderUrl: 'https://huggingface.co/Ballon999/microsam-vit-t-lm-onnx/resolve/main/encoder.fp16.onnx',
-        decoderUrl: 'https://huggingface.co/Ballon999/microsam-vit-t-lm-onnx/resolve/main/decoder.onnx',
-        variant: 'sam1',
-        inputSize: 1024,
-        microscopy: true,
-        // TinyViT's fp16 attention overflows on the onnxruntime-web WebGPU EP and
-        // returns an empty mask ("No masks found"); it's numerically correct on
-        // WASM, and the encoder is tiny (~14 MB) so WASM is plenty fast.
-        encoderProviders: ['wasm'],
-        // Small enough to run in-process on the main thread — avoids the Web
-        // Worker's spawn / second-ORT-runtime / round-trip overhead, which made it
-        // noticeably slower to load and segment.
-        inProcess: true,
-    },
-    {
-        id: 'microsam-vit-b-lm',
-        label: 'micro-sam ViT-B',
-        encoderUrl: 'https://huggingface.co/Ballon999/microsam-vit-b-lm-onnx/resolve/main/encoder.fp16.onnx',
-        decoderUrl: 'https://huggingface.co/Ballon999/microsam-vit-b-lm-onnx/resolve/main/decoder.onnx',
-        variant: 'sam1',
-        inputSize: 1024,
-        microscopy: true,
-    },
-    {
-        id: 'patho-sam-vit-b',
-        label: 'patho-sam ViT-B',
-        encoderUrl: 'https://huggingface.co/Ballon999/patho-sam-vit-b-onnx/resolve/main/encoder.fp16.onnx',
-        decoderUrl: 'https://huggingface.co/Ballon999/patho-sam-vit-b-onnx/resolve/main/decoder.onnx',
-        variant: 'sam1',
-        inputSize: 1024,
-        microscopy: true,
-    },
-    {
-        id: 'patho-sam-vit-b-int8',
-        label: 'patho-sam ViT-B (int8)',
-        encoderUrl: 'https://huggingface.co/Ballon999/patho-sam-vit-b-onnx/resolve/main/encoder.int8.onnx',
-        decoderUrl: 'https://huggingface.co/Ballon999/patho-sam-vit-b-onnx/resolve/main/decoder.onnx',
-        variant: 'sam1',
-        inputSize: 1024,
-        microscopy: true,
-        // int8 dynamic-quantized encoder (~100 MB vs ~180 MB fp16, IoU ~0.99 on the
-        // sanity test). onnxruntime-web's WebGPU EP doesn't support int8 matmul, so
-        // it runs on WASM — smaller download, slower encode than the fp16 entry.
-        encoderProviders: ['wasm'],
-    },
-];
-/** Initial default model id (overridden at runtime once the host configures a
- *  hosted model via {@link setSamModelUrls}). */
-const DEFAULT_SAM_MODEL_ID = SAM_MODELS[0].id;
-/** The active default — updated when the host configures a model's ONNX URLs,
- *  so the tool uses the model that's actually hosted (not just the first entry). */
-let activeDefaultId = DEFAULT_SAM_MODEL_ID;
-/** Look up a model by id; falls back to the active default when id is
- *  unknown/absent. */
-function getSamModel(id) {
-    const wanted = id ?? activeDefaultId;
-    return SAM_MODELS.find((m) => m.id === wanted) ?? SAM_MODELS[0];
-}
-/** The active default model id (what the tools/picker use when unset). */
-function getDefaultSamModelId() {
-    return activeDefaultId;
-}
-/** Set the active default model id (must be a registered model). */
-function setDefaultSamModel(id) {
-    if (SAM_MODELS.some((m) => m.id === id))
-        activeDefaultId = id;
-}
-/** True when a model has both ONNX URLs configured (i.e. it can actually run). */
-function isSamModelReady(model) {
-    return !!model.encoderUrl && !!model.decoderUrl;
-}
-/**
- * Point a registered model at its hosted ONNX pair (HF / GCS). Called by the
- * host's composition root once hosting is decided, keeping deployment URLs out
- * of the library.
+ * A single-part MultiPolygon is equivalent to that Polygon; callers should
+ * prefer a plain {@link Polygon} for one connected part.
  */
-function setSamModelUrls(id, encoderUrl, decoderUrl) {
-    const m = SAM_MODELS.find((x) => x.id === id);
-    if (m) {
-        m.encoderUrl = encoderUrl;
-        m.decoderUrl = decoderUrl;
-        // The configured (hosted) model becomes the active default, so the tools
-        // use it rather than the first registry entry (which may be unhosted).
-        if (encoderUrl && decoderUrl)
-            activeDefaultId = id;
+class MultiPolygon {
+    constructor() {
+        /** One or more disjoint closed polygons (each may have holes). */
+        this.polygons = [];
     }
 }
 
@@ -4908,7 +3995,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-iPNL2JyC.mjs');
+        const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-ci1q0xnJ.mjs');
         const session = new OnnxSamSession();
         this.progress$.next(0);
         await session.loadModel(this.model, (f) => this.progress$.next(f));
@@ -5149,7 +4236,7 @@ class SamPointToolService {
         }
         this.sessionLoad = (async () => {
             try {
-                const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-iPNL2JyC.mjs');
+                const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-ci1q0xnJ.mjs');
                 const session = new OnnxSamSession();
                 this.progress$.next(0);
                 await session.loadModel(this.model, (f) => this.progress$.next(f));
@@ -5335,6 +4422,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: WandService }] });
 
+/**
+ * Per-model descriptions for the info icon beside each item of the SAM / YOLO /
+ * retinal model dropdowns, keyed by registry model id.
+ *
+ * Lives in the toolbar layer rather than in the model registries for two
+ * reasons: the toolbar receives only `{ id, label }` from its host, so registry
+ * copy would have to be threaded through every host; and this text was already
+ * owned here — the SAM entries are the prose from the "About the SAM models"
+ * overlay panel this replaced, moved next to the model it describes.
+ *
+ * The quoted numbers come from the registries (`sizeMb`, `miou`, `patchSize`,
+ * per-model tiling `defaults`) — keep them in step when those change.
+ *
+ * Rendered with `[escape]="false"`, so `<b>` / `<br>` / entities are honoured.
+ * A model with no entry here simply gets no info icon.
+ */
+const MODEL_INFO = {
+    // ── SAM (promptable; box + point tools) ────────────────────────────────────
+    'microsam-vit-t-lm': '<b>micro-sam ViT-T</b> (default)<br>Light-microscopy finetuned. TinyViT encoder, ' +
+        '~14&nbsp;MB, very fast, runs on WASM. Good mask quality — best for quick interactive ' +
+        'work and many/large objects.',
+    'microsam-vit-b-lm': '<b>micro-sam ViT-B</b><br>Light-microscopy finetuned. ViT-Base encoder, ~172&nbsp;MB, ' +
+        'slower, GPU-accelerated (WebGPU). Highest accuracy — when ViT-T misses subtle or ' +
+        'overlapping boundaries.',
+    'patho-sam-vit-b': '<b>patho-sam ViT-B</b><br>Histopathology finetuned (H&amp;E / stained tissue). ViT-Base ' +
+        'encoder, GPU-accelerated. Use it for pathology slides — it segments tissue/nuclei better ' +
+        'than the microscopy models.',
+    'patho-sam-vit-b-int8': '<b>patho-sam ViT-B (int8)</b><br>Same model, int8-quantized — ~100&nbsp;MB vs ' +
+        '~180&nbsp;MB (smaller download). Runs on WASM (slower encode than the fp16 version); ' +
+        'masks are near-identical. Pick it on slow connections.',
+};
+
 /**
  * Presentational toolbar for the plotting viewport.
  *
@@ -5387,12 +4506,14 @@ 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 = '';
-        /** Retinal-layer checkpoints offered by the host's registry, and the active one. */
-        this.retinalModels = [];
-        this.retinalModelId = '';
+        /**
+         * Tools contributed through {@link TOOLBAR_TOOLS}, already filtered to the
+         * ones with models and sorted. The host resolves them so it can own the
+         * per-tool parameter state; this component only draws them.
+         */
+        this.contributedTools = [];
+        /** Active checkpoint per contributed tool, keyed by tool id. */
+        this.toolModelIds = {};
         this.selectPlotType = new EventEmitter();
         /** Intensity (LINE) mode: add another colored line ROI + inset trace. */
         this.addProfileLine = new EventEmitter();
@@ -5431,18 +4552,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();
-        /** Run retinal-layer segmentation over the current view. */
-        this.segmentRetinal = new EventEmitter();
-        /** Pick the retinal-layer checkpoint. */
-        this.retinalModelChange = new EventEmitter();
-        /** Open the retinal-layer parameter dialog. */
-        this.openRetinalParams = new EventEmitter();
+        /** Run a contributed tool over the current view, by tool id. */
+        this.runTool = new EventEmitter();
+        /** Pick a contributed tool's checkpoint. */
+        this.toolModelChange = new EventEmitter();
+        /** Open a contributed tool's parameter dialog, by tool id. */
+        this.openToolParams = new EventEmitter();
         /** SAM model picker (jit-ui#90 P1). */
         this.samModelChange = new EventEmitter();
         this.wandSensitivityChange = new EventEmitter();
@@ -5469,12 +4584,23 @@ class ToolbarComponent {
          *  Held as a stable array (rebuilt only when `samModels`/`samModelId` change),
          *  NOT a getter: a getter returns a fresh array with new `command` closures on
          *  every change-detection tick, which makes the bound `p-menu` overlay rebuild
-         *  its DOM mid-interaction and swallow the click on a menu item. */
+         *  its DOM mid-interaction and swallow the click on a menu item.
+         *
+         *  `tooltip` carries the model's description from {@link MODEL_INFO}; the
+         *  menus' shared item template turns it into the hover info icon. p-menu's own
+         *  rendering ignores the field (it reads `item.title`), so it is free to use. */
         this.samMenuItems = [];
-        /** Same stable-array reasoning as {@link samMenuItems}. */
-        this.yoloMenuItems = [];
-        /** Same stable-array reasoning as {@link samMenuItems}. */
-        this.retinalMenuItems = [];
+        /**
+         * Model menus for the contributed tools, keyed by tool id. Same stable-array
+         * reasoning as {@link samMenuItems} — and it is why this is a map rebuilt in
+         * `ngOnChanges` rather than a method called from the template, which would
+         * hand `p-menu` a new array every tick.
+         *
+         * A contributed tool supplies its own per-model description, so unlike the
+         * SAM menu these do not consult {@link MODEL_INFO}: this library has no
+         * copy for checkpoints it does not know about.
+         */
+        this.toolMenuItems = {};
     }
     /** Rebuild the SAM model menu when the model list or active selection
      *  changes (keeps the array reference stable across other CD ticks). */
@@ -5483,24 +4609,54 @@ class ToolbarComponent {
             this.samMenuItems = this.samModels.map((m) => ({
                 label: m.label,
                 icon: m.id === this.samModelId ? 'pi pi-check' : 'pi pi-fw',
+                tooltip: MODEL_INFO[m.id],
                 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),
-            }));
-        }
-        if (changes['retinalModels'] || changes['retinalModelId']) {
-            this.retinalMenuItems = this.retinalModels.map((m) => ({
-                label: m.label,
-                icon: m.id === this.retinalModelId ? 'pi pi-check' : 'pi pi-fw',
-                command: () => this.retinalModelChange.emit(m.id),
-            }));
+        if (changes['contributedTools'] || changes['toolModelIds']) {
+            this.toolMenuItems = {};
+            for (const tool of this.contributedTools) {
+                const active = this.toolModelIds[tool.id] ?? tool.defaultModelId();
+                this.toolMenuItems[tool.id] = tool.models().map((m) => ({
+                    label: m.label,
+                    icon: m.id === active ? 'pi pi-check' : 'pi pi-fw',
+                    tooltip: m.info,
+                    command: () => this.toolModelChange.emit({ toolId: tool.id, modelId: m.id }),
+                }));
+            }
         }
     }
+    /**
+     * Strip markup from a model description so it can be read aloud.
+     *
+     * The copy in MODEL_INFO and in a contribution's `ToolModelOption.info` is
+     * written for a visual tooltip rendered with `[escape]="false"`, so it carries
+     * `<b>` and `<br>`. Passed to `aria-label` verbatim a screen reader announces
+     * the tags, so they are removed and `<br>` becomes a sentence break. Entities
+     * used in that copy (`&nbsp;`, `&times;`, `&amp;`) are decoded for the same
+     * reason.
+     */
+    plainText(html) {
+        return (html ?? '')
+            .replace(/<br\s*\/?>/gi, '. ')
+            .replace(/<[^>]+>/g, '')
+            .replace(/&nbsp;/g, ' ')
+            .replace(/&times;/g, 'x')
+            .replace(/&amp;/g, '&')
+            .replace(/\s+/g, ' ')
+            .trim();
+    }
+    /** Contributed tool names for the help dialog's prompted/no-prompt contrast,
+     *  e.g. "YOLO, Retinal layers". Empty when nothing is registered, which is
+     *  why the sentence that uses it is itself conditional. */
+    get contributedToolNames() {
+        return this.contributedTools.map((t) => t.label).join(', ');
+    }
+    /** Keeps each contributed tool's `p-menu` overlay alive across CD ticks —
+     *  re-creating it mid-interaction swallows the click on a menu item. */
+    trackToolById(_index, tool) {
+        return tool.id;
+    }
     /** The Image plot type renders as a natively pan/zoom-able raster, so the
      *  generic zoom/pan tools are hidden. */
     get isImageView() {
@@ -5554,11 +4710,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", yoloModels: "yoloModels", yoloModelId: "yoloModelId", retinalModels: "retinalModels", retinalModelId: "retinalModelId" }, 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", segmentRetinal: "segmentRetinal", retinalModelChange: "retinalModelChange", openRetinalParams: "openRetinalParams", 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\n      <!-- Retinal layers: semantic segmentation of the current view. Same\n           no-prompt shape as YOLO \u2014 it labels every pixel rather than being\n           pointed at an object \u2014 so the same split button: run, pick\n           checkpoint, open parameters. -->\n      <span *ngIf=\"retinalModels.length\" class=\"p-buttonset segment-split\">\n        <p-button icon=\"pi pi-align-left\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment retinal layers in the current view (client-side)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRetinal.emit()\">\n        </p-button>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the retinal layer model\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"retinalModelMenu.toggle($event)\">\n        </p-button>\n        <p-button icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Retinal layer parameters\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"openRetinalParams.emit()\">\n        </p-button>\n      </span>\n      <p-menu #retinalModelMenu [model]=\"retinalMenuItems\" [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"] }] }); }
+    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", contributedTools: "contributedTools", toolModelIds: "toolModelIds" }, 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", runTool: "runTool", toolModelChange: "toolModelChange", openToolParams: "openToolParams", 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/sam-box-prompt.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/sam-box-prompt.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/sam-point-prompt.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 styleClass=\"model-menu\" [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\">\n        <ng-template pTemplate=\"item\" let-item>\n          <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n      </p-menu>\n\n      <!-- Shared item body for all three model pickers (SAM / YOLO / retinal):\n           the standard check-or-blank icon and label, plus an info icon carrying\n           the model's description as a hover tooltip. This replaced a single\n           \"About the SAM models\" overlay panel \u2014 per-model text sits next to the\n           model it describes, and YOLO/retinal get the same affordance.\n\n           p-menu puts its click handler on the wrapping `.p-menuitem-content`,\n           outside this template, so `command` still fires and the whole row stays\n           clickable \u2014 which is also why the info icon has to stop propagation, or\n           reading about a model would switch to it. -->\n      <ng-template #modelMenuItem let-item>\n        <a class=\"p-menuitem-link model-menu-item\">\n          <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\"></span>\n          <span class=\"p-menuitem-text\">{{ item.label }}</span>\n          <!-- `bottom` like every other tooltip in this toolbar, and for room:\n               these menus open under buttons that can sit near the right edge,\n               where a `right` tooltip has a few hundred px and squeezes its text\n               into a narrow column instead of using its max-width. -->\n          <!-- A focusable <button>, not a bare <i>. As an <i> the description\n               was reachable only by hovering a mouse: not tabbable, no\n               accessible name, nothing for a screen reader to announce \u2014 so\n               keyboard and AT users could pick a checkpoint but never read what\n               it was. PrimeNG's tooltip shows on focus as well as hover, so\n               making it a button restores it for free.\n\n               `aria-describedby` is deliberately not used: the tooltip is\n               rendered into `body` on demand and has no stable id to point at.\n               The description is carried on `aria-label` instead, which is\n               announced whether or not the tooltip is showing. It is stripped of\n               markup first, since the copy contains `<b>`/`<br>` for the visual\n               tooltip and those would otherwise be read out literally. -->\n          <button *ngIf=\"item.tooltip\" type=\"button\"\n                  class=\"pi pi-info-circle model-info-icon\"\n                  [attr.aria-label]=\"'About ' + item.label + ': ' + plainText(item.tooltip)\"\n                  [pTooltip]=\"item.tooltip\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                  appendTo=\"body\" tooltipStyleClass=\"model-info-tooltip\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"$event.stopPropagation()\"\n                  (keydown.space)=\"$event.stopPropagation()\"></button>\n        </a>\n      </ng-template>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM)\"\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      <!-- Contributed no-prompt tools (TOOLBAR_TOOLS). Unlike the SAM and\n           cellpose tools these take no prompt \u2014 they sweep the whole current\n           view rather than being pointed at something \u2014 so there is nothing to\n           draw first. Each renders the same split button: run, pick checkpoint,\n           open parameters.\n\n           Nothing here names a specific tool. The library ships none; a host\n           registers them, which is what lets this package be published without\n           the closed model dependencies. -->\n      <ng-container *ngFor=\"let tool of contributedTools; trackBy: trackToolById\">\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.runTooltip\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"runTool.emit(tool.id)\">\n            <!-- `toolbar-icon-dark` is hardcoded rather than bound, unlike the\n                 toggle tools: these fire a run and have no active state. -->\n            <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" class=\"toolbar-icon-dark\"\n                 style=\"width: 1rem\" [alt]=\"tool.label\" />\n            <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n          </p-button>\n          <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.modelTooltip || 'Pick the model'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"toolMenu.toggle($event)\">\n          </p-button>\n          <p-button *ngIf=\"tool.params.length\"\n                    icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.paramsTooltip || 'Parameters'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"openToolParams.emit(tool.id)\">\n          </p-button>\n        </span>\n        <p-menu #toolMenu styleClass=\"model-menu\" [model]=\"toolMenuItems[tool.id] || []\"\n                [popup]=\"true\" appendTo=\"body\">\n          <ng-template pTemplate=\"item\" let-item>\n            <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n          </ng-template>\n        </p-menu>\n      </ng-container>\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 &amp; detection tools</h3>\n  <p>AI-assisted segmentation and detection that run entirely in the browser. The first run\n    of any model downloads it (a progress toast is shown); it's then cached.</p>\n  <p>Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on\n    rectangles you draw, and generated regions inherit the color of the rectangle they came\n    from<span *ngIf=\"contributedTools.length\">; the <b>no-prompt</b> ones ({{ contributedToolNames }})\n    sweep the whole current view, so there is nothing to draw first</span>.</p>\n  <p>Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with\n    a <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed,\n    training domain and accuracy, so you can pick without leaving the toolbar.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.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/sam-point-prompt.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). All are promptable\n      Segment Anything models finetuned for biomedical images; they differ in the <i>image\n      encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point\n      prompting behave the same. The choice applies to <i>both</i> the box and point tools, and\n      each tool loads its own encoder, so the first click after switching re-encodes once.</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    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\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 .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }] }); }
 }
 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\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\n      <!-- Retinal layers: semantic segmentation of the current view. Same\n           no-prompt shape as YOLO \u2014 it labels every pixel rather than being\n           pointed at an object \u2014 so the same split button: run, pick\n           checkpoint, open parameters. -->\n      <span *ngIf=\"retinalModels.length\" class=\"p-buttonset segment-split\">\n        <p-button icon=\"pi pi-align-left\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment retinal layers in the current view (client-side)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRetinal.emit()\">\n        </p-button>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the retinal layer model\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"retinalModelMenu.toggle($event)\">\n        </p-button>\n        <p-button icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Retinal layer parameters\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"openRetinalParams.emit()\">\n        </p-button>\n      </span>\n      <p-menu #retinalModelMenu [model]=\"retinalMenuItems\" [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"] }]
+            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/sam-box-prompt.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/sam-box-prompt.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/sam-point-prompt.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 styleClass=\"model-menu\" [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\">\n        <ng-template pTemplate=\"item\" let-item>\n          <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n      </p-menu>\n\n      <!-- Shared item body for all three model pickers (SAM / YOLO / retinal):\n           the standard check-or-blank icon and label, plus an info icon carrying\n           the model's description as a hover tooltip. This replaced a single\n           \"About the SAM models\" overlay panel \u2014 per-model text sits next to the\n           model it describes, and YOLO/retinal get the same affordance.\n\n           p-menu puts its click handler on the wrapping `.p-menuitem-content`,\n           outside this template, so `command` still fires and the whole row stays\n           clickable \u2014 which is also why the info icon has to stop propagation, or\n           reading about a model would switch to it. -->\n      <ng-template #modelMenuItem let-item>\n        <a class=\"p-menuitem-link model-menu-item\">\n          <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\"></span>\n          <span class=\"p-menuitem-text\">{{ item.label }}</span>\n          <!-- `bottom` like every other tooltip in this toolbar, and for room:\n               these menus open under buttons that can sit near the right edge,\n               where a `right` tooltip has a few hundred px and squeezes its text\n               into a narrow column instead of using its max-width. -->\n          <!-- A focusable <button>, not a bare <i>. As an <i> the description\n               was reachable only by hovering a mouse: not tabbable, no\n               accessible name, nothing for a screen reader to announce \u2014 so\n               keyboard and AT users could pick a checkpoint but never read what\n               it was. PrimeNG's tooltip shows on focus as well as hover, so\n               making it a button restores it for free.\n\n               `aria-describedby` is deliberately not used: the tooltip is\n               rendered into `body` on demand and has no stable id to point at.\n               The description is carried on `aria-label` instead, which is\n               announced whether or not the tooltip is showing. It is stripped of\n               markup first, since the copy contains `<b>`/`<br>` for the visual\n               tooltip and those would otherwise be read out literally. -->\n          <button *ngIf=\"item.tooltip\" type=\"button\"\n                  class=\"pi pi-info-circle model-info-icon\"\n                  [attr.aria-label]=\"'About ' + item.label + ': ' + plainText(item.tooltip)\"\n                  [pTooltip]=\"item.tooltip\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                  appendTo=\"body\" tooltipStyleClass=\"model-info-tooltip\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"$event.stopPropagation()\"\n                  (keydown.space)=\"$event.stopPropagation()\"></button>\n        </a>\n      </ng-template>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM)\"\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      <!-- Contributed no-prompt tools (TOOLBAR_TOOLS). Unlike the SAM and\n           cellpose tools these take no prompt \u2014 they sweep the whole current\n           view rather than being pointed at something \u2014 so there is nothing to\n           draw first. Each renders the same split button: run, pick checkpoint,\n           open parameters.\n\n           Nothing here names a specific tool. The library ships none; a host\n           registers them, which is what lets this package be published without\n           the closed model dependencies. -->\n      <ng-container *ngFor=\"let tool of contributedTools; trackBy: trackToolById\">\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.runTooltip\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"runTool.emit(tool.id)\">\n            <!-- `toolbar-icon-dark` is hardcoded rather than bound, unlike the\n                 toggle tools: these fire a run and have no active state. -->\n            <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" class=\"toolbar-icon-dark\"\n                 style=\"width: 1rem\" [alt]=\"tool.label\" />\n            <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n          </p-button>\n          <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.modelTooltip || 'Pick the model'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"toolMenu.toggle($event)\">\n          </p-button>\n          <p-button *ngIf=\"tool.params.length\"\n                    icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.paramsTooltip || 'Parameters'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"openToolParams.emit(tool.id)\">\n          </p-button>\n        </span>\n        <p-menu #toolMenu styleClass=\"model-menu\" [model]=\"toolMenuItems[tool.id] || []\"\n                [popup]=\"true\" appendTo=\"body\">\n          <ng-template pTemplate=\"item\" let-item>\n            <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n          </ng-template>\n        </p-menu>\n      </ng-container>\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 &amp; detection tools</h3>\n  <p>AI-assisted segmentation and detection that run entirely in the browser. The first run\n    of any model downloads it (a progress toast is shown); it's then cached.</p>\n  <p>Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on\n    rectangles you draw, and generated regions inherit the color of the rectangle they came\n    from<span *ngIf=\"contributedTools.length\">; the <b>no-prompt</b> ones ({{ contributedToolNames }})\n    sweep the whole current view, so there is nothing to draw first</span>.</p>\n  <p>Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with\n    a <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed,\n    training domain and accuracy, so you can pick without leaving the toolbar.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.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/sam-point-prompt.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). All are promptable\n      Segment Anything models finetuned for biomedical images; they differ in the <i>image\n      encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point\n      prompting behave the same. The choice applies to <i>both</i> the box and point tools, and\n      each tool loads its own encoder, so the first click after switching re-encodes once.</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    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\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 .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::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: [{
@@ -5603,13 +4759,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 type: Input
             }], samModelId: [{
                 type: Input
-            }], yoloModels: [{
-                type: Input
-            }], yoloModelId: [{
+            }], contributedTools: [{
                 type: Input
-            }], retinalModels: [{
-                type: Input
-            }], retinalModelId: [{
+            }], toolModelIds: [{
                 type: Input
             }], selectPlotType: [{
                 type: Output
@@ -5663,17 +4815,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 type: Output
             }], segmentCellpose: [{
                 type: Output
-            }], detectYolo: [{
-                type: Output
-            }], yoloModelChange: [{
+            }], runTool: [{
                 type: Output
-            }], openYoloParams: [{
+            }], toolModelChange: [{
                 type: Output
-            }], segmentRetinal: [{
-                type: Output
-            }], retinalModelChange: [{
-                type: Output
-            }], openRetinalParams: [{
+            }], openToolParams: [{
                 type: Output
             }], samModelChange: [{
                 type: Output
@@ -7678,11 +6824,6 @@ class VisualizerComponent {
     get isCaching() {
         return this.cacheProgress !== null && this.cacheProgress < 100;
     }
-    /** Download size of the active retinal model, surfaced in the dialog because
-     *  ~590 MB is worth knowing before clicking Run rather than after. */
-    get retinalModelSizeMb() {
-        return getRetinalModel(this.retinalModelId)?.sizeMb ?? 0;
-    }
     /** LINE plot type shows the image + draggable line ROI + intensity inset. */
     get isProfileMode() {
         return this.selectedPlotType === PlotType.LINE;
@@ -7693,7 +6834,11 @@ class VisualizerComponent {
     get isImageView() {
         return this.selectedPlotType === PlotType.IMAGE;
     }
-    constructor(state, plotService, messageService, ngZone, cdr, session, samTool, cellSegmentTool, yoloDetectTool, instanceSegmenter, semanticSegmenter, retinalLayerTool, samPointTool, regionOps, vizConfig) {
+    constructor(state, plotService, messageService, ngZone, cdr, session, samTool, cellSegmentTool, samPointTool, regionOps, vizConfig, 
+    // A constructor parameter rather than a field `inject()`: this component is
+    // also constructed directly with `new` in its own specs, which is outside
+    // an injection context and would throw NG0203 on a field initializer.
+    toolContributions) {
         this.state = state;
         this.plotService = plotService;
         this.messageService = messageService;
@@ -7702,10 +6847,6 @@ class VisualizerComponent {
         this.session = session;
         this.samTool = samTool;
         this.cellSegmentTool = cellSegmentTool;
-        this.yoloDetectTool = yoloDetectTool;
-        this.instanceSegmenter = instanceSegmenter;
-        this.semanticSegmenter = semanticSegmenter;
-        this.retinalLayerTool = retinalLayerTool;
         this.samPointTool = samPointTool;
         this.regionOps = regionOps;
         this.vizConfig = vizConfig;
@@ -7769,25 +6910,22 @@ 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();
-        /** Retinal-layer checkpoints with a configured URL, and the active one.
-         *  Only VNet ships — see the registry for why the ResUNet-a entries are off. */
-        this.retinalModels = RETINAL_MODELS.filter((m) => isRetinalModelReady(m.id)).map((m) => ({
-            id: m.id,
-            label: m.label,
-        }));
-        this.retinalModelId = getDefaultRetinalModelId();
-        this.showRetinalParams = false;
-        this.retinalParams = this.defaultRetinalParams();
+        /**
+         * No-prompt tools registered through {@link TOOLBAR_TOOLS}, filtered to those
+         * with configured models and sorted. This library registers none — a host
+         * supplies them — so an open build has an empty array here and the toolbar
+         * and help dialog simply omit that group.
+         */
+        this.contributedTools = [];
+        /** Active checkpoint per contributed tool. */
+        this.toolModelIds = {};
+        /**
+         * Parameter values per contributed tool, seeded from each tool's own defaults
+         * — which encode the scale and crowding its checkpoint was trained for.
+         */
+        this.toolParams = {};
+        /** Which tool's parameter dialog is open, or null. */
+        this.openParamsToolId = null;
         /** SAM download/segment toast state (bound by the `sam` p-toast template). */
         this.samStatus = '';
         this.samProgress = 0; // 0..100, encoder download
@@ -7873,6 +7011,7 @@ class VisualizerComponent {
             // just records the slice, leaving single-plane regions untouched (jit-ui#93).
             this.plotService.setDisplaySlice(z);
         });
+        this.contributedTools = visibleToolContributions(toolContributions);
         this.colormapsOptions = plotService.getColormapOptions();
         this.computePlotTypeOptions();
     }
@@ -8949,91 +8088,93 @@ 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,
-        };
+    /**
+     * Parameters currently bound by the generic parameter dialog, for whichever
+     * tool is open. Seeded lazily: a tool's defaults are only asked for when the
+     * user first touches it, so registering a tool costs nothing until used.
+     */
+    paramsFor(toolId) {
+        const tool = this.contributedTools.find((t) => t.id === toolId);
+        if (!tool)
+            return {};
+        if (!this.toolParams[toolId]) {
+            // Through `seedParams`, not `defaultParams` directly: the active
+            // checkpoint's own `ToolModelOption.defaults` have to be merged on top.
+            // Calling `defaultParams` here bypassed them, so the very first run of a
+            // tool used the tool's baseline thresholds and tiling rather than the
+            // model's — and it only corrected itself once the user switched
+            // checkpoints or hit Reset. Every entry point now goes through one path.
+            this.toolParams[toolId] = this.seedParams(tool, this.modelIdFor(tool));
+        }
+        return this.toolParams[toolId];
+    }
+    /** Active checkpoint for a tool, falling back to the tool's own default. */
+    modelIdFor(tool) {
+        return this.toolModelIds[tool.id] ?? tool.defaultModelId();
     }
     /** 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,
-        }));
+    onToolModelChange(e) {
+        const tool = this.contributedTools.find((t) => t.id === e.toolId);
+        if (!tool)
+            return;
+        // Reassigned rather than mutated so the toolbar's ngOnChanges sees a new
+        // reference and rebuilds that tool's model menu with the check mark moved.
+        this.toolModelIds = { ...this.toolModelIds, [e.toolId]: e.modelId };
+        tool.onModelChange?.(e.modelId);
+        this.toolParams[e.toolId] = this.seedParams(tool, e.modelId);
+    }
+    /** A tool's defaults for a checkpoint, with that checkpoint's own overrides
+     *  applied on top — per-model defaults beat per-tool ones. */
+    seedParams(tool, modelId) {
+        const model = tool.models().find((m) => m.id === modelId);
+        return { ...tool.defaultParams(modelId), ...(model?.defaults ?? {}) };
     }
     /**
-     * Defaults for the retinal tool.
+     * Narrow a param spec for the template.
      *
-     * `classThreshold` is 0.5 to match the reference worker, which thresholds each
-     * class channel independently rather than taking an argmax — with a softmax
-     * output that makes it argmax plus a confidence floor.
-     *
-     * `downsamplingFactor` is 1 rather than YOLO's 5: these checkpoints were
-     * trained on native 40x patches, so the model wants full resolution and
-     * downsampling actively hurts.
+     * `*ngSwitchCase` does not narrow a discriminated union in Angular's template
+     * type checker the way a `switch` does in TypeScript, so the template asks for
+     * the variant it has already matched on.
      */
-    defaultRetinalParams() {
-        return {
-            modelId: getDefaultRetinalModelId(),
-            classThreshold: 0.5,
-            downsamplingFactor: 1,
-            simplifyTolerance: 1,
-            minArea: 0,
-        };
+    numberParam(p) {
+        return p;
     }
-    /** Switching checkpoint re-seeds the parameters, since the defaults belong to
-     *  the model rather than to the tool. */
-    onRetinalModelChange(id) {
-        this.retinalModelId = id;
-        setDefaultRetinalModel(id);
-        this.retinalParams = { ...this.defaultRetinalParams(), modelId: id };
-    }
-    openRetinalParams() {
-        this.showRetinalParams = true;
-    }
-    resetRetinalParams() {
-        this.retinalParams = { ...this.defaultRetinalParams(), modelId: this.retinalModelId };
-    }
-    /** Segment retinal layers across the current view. Like YOLO this takes no
-     *  prompt — it labels every pixel — and reuses the shared segmentation toast. */
-    async segmentRetinal() {
-        await this.runSegmentWithToast('Retinal layers', this.retinalLayerTool, () => this.retinalLayerTool.segmentInView(this.plotService, this.semanticSegmenter, {
-            ...this.retinalParams,
-            modelId: this.retinalModelId,
-        }));
+    selectParam(p) {
+        return p;
+    }
+    openToolParams(toolId) {
+        this.paramsFor(toolId); // seed before the dialog binds to it
+        this.openParamsToolId = toolId;
+    }
+    /** The tool whose parameter dialog is open, for the generic dialog's header
+     *  and field list. */
+    get openParamsTool() {
+        return this.contributedTools.find((t) => t.id === this.openParamsToolId);
+    }
+    resetToolParams(toolId) {
+        const tool = this.contributedTools.find((t) => t.id === toolId);
+        if (tool)
+            this.toolParams[toolId] = this.seedParams(tool, this.modelIdFor(tool));
+    }
+    /** Run a contributed tool over the current view. No prompt: these sweep the
+     *  whole view rather than being pointed at something. Reuses the shared
+     *  segmentation toast so progress reads the same as the SAM/cellpose tools. */
+    async runTool(toolId) {
+        const tool = this.contributedTools.find((t) => t.id === toolId);
+        if (!tool)
+            return;
+        const params = { ...this.paramsFor(toolId), modelId: this.modelIdFor(tool) };
+        await this.runSegmentWithToast(tool.label, tool.progress, () => tool.run(this.plotService, params));
     }
     /** 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%). */
-    async runSegmentWithToast(label, tool, op) {
+    async runSegmentWithToast(label, 
+    // Observables rather than BehaviorSubjects: a contributed tool implements
+    // ToolProgress, and requiring a concrete subject would force every plugin
+    // to expose its internals just to drive this toast.
+    tool, op) {
         this.samStatus = 'Starting…';
         this.samProgress = 0;
         this.samDownloading = false;
@@ -9044,8 +8185,13 @@ class VisualizerComponent {
                 this.samProgress = Math.min(100, Math.round(f * 100));
             this.cdr.detectChanges();
         });
+        // Tracked here rather than read off the subject at the end: `tool` is only
+        // an Observable pair now, so there is no `.value` to sample once the run
+        // settles. The last non-empty status is what the result toast reports.
+        let lastStatus = '';
         const ssub = tool.status$.subscribe((m) => {
             if (m) {
+                lastStatus = m;
                 this.samStatus = m;
                 this.cdr.detectChanges();
             }
@@ -9057,7 +8203,7 @@ class VisualizerComponent {
                 key: this.resultToastKey,
                 severity: n > 0 ? 'success' : 'warn',
                 summary: label,
-                detail: tool.status$.value || (n > 0 ? `Added ${n} region(s).` : 'No regions added.'),
+                detail: lastStatus || (n > 0 ? `Added ${n} region(s).` : 'No regions added.'),
             });
         }
         catch (e) {
@@ -9365,29 +8511,28 @@ 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: YoloDetectToolService }, { token: INSTANCE_SEGMENTER }, { token: SEMANTIC_SEGMENTER }, { token: RetinalLayerToolService }, { 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  [retinalModels]=\"retinalModels\"\n  [retinalModelId]=\"retinalModelId\"\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  (segmentRetinal)=\"segmentRetinal()\"\n  (retinalModelChange)=\"onRetinalModelChange($event)\"\n  (openRetinalParams)=\"openRetinalParams()\"\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\n<!-- Retinal layer parameters. Same vocabulary as the pipeline step and the\n     server tool, so a result obtained here is reproducible there. Fewer knobs\n     than YOLO because there are no objects: no confidence per object, no NMS,\n     no cross-tile merge \u2014 patches tile the image and each pixel gets one class. -->\n<p-dialog header=\"Retinal layer parameters\" [(visible)]=\"showRetinalParams\" [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <div class=\"field col-12\">\n      <p class=\"text-sm mt-0 mb-2 text-color-secondary\">\n        Runs in your browser and needs WebGPU. The model is ~{{ retinalModelSizeMb }} MB and is\n        downloaded once, then cached.\n      </p>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Class threshold</label>\n      <p-inputNumber [(ngModel)]=\"retinalParams.classThreshold\" [min]=\"0.05\" [max]=\"0.95\" [step]=\"0.05\"\n                     [minFractionDigits]=\"2\" [showButtons]=\"true\"></p-inputNumber>\n      <small class=\"text-color-secondary\">\n        Below this a pixel is left unlabelled rather than forced into the best class.\n      </small>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Downsampling factor</label>\n      <p-inputNumber [(ngModel)]=\"retinalParams.downsamplingFactor\" [min]=\"1\" [max]=\"10\" [step]=\"1\"\n                     [showButtons]=\"true\"></p-inputNumber>\n      <small class=\"text-color-secondary\">\n        1 = full resolution, which is what these checkpoints were trained on.\n      </small>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Min region area (px\u00B2)</label>\n      <p-inputNumber [(ngModel)]=\"retinalParams.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)]=\"retinalParams.simplifyTolerance\" [min]=\"0\" [max]=\"10\" [step]=\"0.5\"\n                     [minFractionDigits]=\"1\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetRetinalParams()\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"showRetinalParams = 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: i16$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: i18$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", "retinalModels", "retinalModelId"], 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", "segmentRetinal", "retinalModelChange", "openRetinalParams", "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: SamPointToolService }, { token: RegionOpsService }, { token: VIZ_CONFIG, optional: true }, { token: TOOLBAR_TOOLS, 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  [contributedTools]=\"contributedTools\"\n  [toolModelIds]=\"toolModelIds\"\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  (runTool)=\"runTool($event)\"\n  (toolModelChange)=\"onToolModelChange($event)\"\n  (openToolParams)=\"openToolParams($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<!-- Parameters for whichever contributed tool is open. One dialog for all of\n     them: a tool declares its fields (ToolParamSpec) and this renders them, so\n     the toolbar can lay every tool out the same way and a plugin needs no\n     PrimeNG of its own. Defaults come from the active checkpoint, since they\n     encode what it was trained for. -->\n<p-dialog *ngIf=\"openParamsTool as tool\"\n          [header]=\"tool.label + ' parameters'\"\n          [visible]=\"true\" (visibleChange)=\"openParamsToolId = null\"\n          [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <ng-container *ngFor=\"let p of tool.params\">\n      <div class=\"field\" [ngClass]=\"p.type === 'boolean' ? 'col-12' : 'col-6'\">\n        <ng-container [ngSwitch]=\"p.type\">\n\n          <ng-container *ngSwitchCase=\"'number'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-inputNumber [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                           (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                           [min]=\"numberParam(p).min\" [max]=\"numberParam(p).max\"\n                           [step]=\"numberParam(p).step\"\n                           [minFractionDigits]=\"numberParam(p).fractionDigits\"\n                           [showButtons]=\"true\"></p-inputNumber>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"'select'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-dropdown [options]=\"selectParam(p).options\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        appendTo=\"body\"></p-dropdown>\n          </ng-container>\n\n          <!-- Checkbox label sits beside the box and may run to a sentence, so\n               it does not get the stacked label the other types use. -->\n          <div *ngSwitchCase=\"'boolean'\" class=\"flex align-items-center gap-2\">\n            <p-checkbox [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        [binary]=\"true\" [inputId]=\"tool.id + '-' + p.id\"></p-checkbox>\n            <label [for]=\"tool.id + '-' + p.id\" class=\"text-sm mb-0\"\n                   [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n          </div>\n\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetToolParams(tool.id)\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"openParamsToolId = null\"></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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: 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: "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", "contributedTools", "toolModelIds"], 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", "runTool", "toolModelChange", "openToolParams", "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  [yoloModels]=\"yoloModels\"\n  [yoloModelId]=\"yoloModelId\"\n  [retinalModels]=\"retinalModels\"\n  [retinalModelId]=\"retinalModelId\"\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  (segmentRetinal)=\"segmentRetinal()\"\n  (retinalModelChange)=\"onRetinalModelChange($event)\"\n  (openRetinalParams)=\"openRetinalParams()\"\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\n<!-- Retinal layer parameters. Same vocabulary as the pipeline step and the\n     server tool, so a result obtained here is reproducible there. Fewer knobs\n     than YOLO because there are no objects: no confidence per object, no NMS,\n     no cross-tile merge \u2014 patches tile the image and each pixel gets one class. -->\n<p-dialog header=\"Retinal layer parameters\" [(visible)]=\"showRetinalParams\" [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <div class=\"field col-12\">\n      <p class=\"text-sm mt-0 mb-2 text-color-secondary\">\n        Runs in your browser and needs WebGPU. The model is ~{{ retinalModelSizeMb }} MB and is\n        downloaded once, then cached.\n      </p>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Class threshold</label>\n      <p-inputNumber [(ngModel)]=\"retinalParams.classThreshold\" [min]=\"0.05\" [max]=\"0.95\" [step]=\"0.05\"\n                     [minFractionDigits]=\"2\" [showButtons]=\"true\"></p-inputNumber>\n      <small class=\"text-color-secondary\">\n        Below this a pixel is left unlabelled rather than forced into the best class.\n      </small>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Downsampling factor</label>\n      <p-inputNumber [(ngModel)]=\"retinalParams.downsamplingFactor\" [min]=\"1\" [max]=\"10\" [step]=\"1\"\n                     [showButtons]=\"true\"></p-inputNumber>\n      <small class=\"text-color-secondary\">\n        1 = full resolution, which is what these checkpoints were trained on.\n      </small>\n    </div>\n    <div class=\"field col-6\">\n      <label class=\"text-sm\">Min region area (px\u00B2)</label>\n      <p-inputNumber [(ngModel)]=\"retinalParams.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)]=\"retinalParams.simplifyTolerance\" [min]=\"0\" [max]=\"10\" [step]=\"0.5\"\n                     [minFractionDigits]=\"1\" [showButtons]=\"true\"></p-inputNumber>\n    </div>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetRetinalParams()\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"showRetinalParams = 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"] }]
+            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  [contributedTools]=\"contributedTools\"\n  [toolModelIds]=\"toolModelIds\"\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  (runTool)=\"runTool($event)\"\n  (toolModelChange)=\"onToolModelChange($event)\"\n  (openToolParams)=\"openToolParams($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<!-- Parameters for whichever contributed tool is open. One dialog for all of\n     them: a tool declares its fields (ToolParamSpec) and this renders them, so\n     the toolbar can lay every tool out the same way and a plugin needs no\n     PrimeNG of its own. Defaults come from the active checkpoint, since they\n     encode what it was trained for. -->\n<p-dialog *ngIf=\"openParamsTool as tool\"\n          [header]=\"tool.label + ' parameters'\"\n          [visible]=\"true\" (visibleChange)=\"openParamsToolId = null\"\n          [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <ng-container *ngFor=\"let p of tool.params\">\n      <div class=\"field\" [ngClass]=\"p.type === 'boolean' ? 'col-12' : 'col-6'\">\n        <ng-container [ngSwitch]=\"p.type\">\n\n          <ng-container *ngSwitchCase=\"'number'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-inputNumber [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                           (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                           [min]=\"numberParam(p).min\" [max]=\"numberParam(p).max\"\n                           [step]=\"numberParam(p).step\"\n                           [minFractionDigits]=\"numberParam(p).fractionDigits\"\n                           [showButtons]=\"true\"></p-inputNumber>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"'select'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-dropdown [options]=\"selectParam(p).options\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        appendTo=\"body\"></p-dropdown>\n          </ng-container>\n\n          <!-- Checkbox label sits beside the box and may run to a sentence, so\n               it does not get the stacked label the other types use. -->\n          <div *ngSwitchCase=\"'boolean'\" class=\"flex align-items-center gap-2\">\n            <p-checkbox [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        [binary]=\"true\" [inputId]=\"tool.id + '-' + p.id\"></p-checkbox>\n            <label [for]=\"tool.id + '-' + p.id\" class=\"text-sm mb-0\"\n                   [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n          </div>\n\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetToolParams(tool.id)\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"openParamsToolId = null\"></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: YoloDetectToolService }, { type: undefined, decorators: [{
+                }] }, { type: i1$2.MessageService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: VisualizerStore }, { type: SamToolService }, { type: CellSegmentToolService }, { type: SamPointToolService }, { type: RegionOpsService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
-                    args: [INSTANCE_SEGMENTER]
+                    args: [VIZ_CONFIG]
                 }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SEMANTIC_SEGMENTER]
-                }] }, { type: RetinalLayerToolService }, { type: SamPointToolService }, { type: RegionOpsService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
-                    args: [VIZ_CONFIG]
+                    args: [TOOLBAR_TOOLS]
                 }] }], propDecorators: { isStackEvent: [{
                 type: Output
             }], isGrayscaleEvent: [{
@@ -22953,5 +22098,5 @@ function provideVisualization() {
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_TOOLBAR_TOOLS, CELL_SEGMENTER, CHANNEL_HISTOGRAM_API, CellposeSegmenterService, ChannelHistogramComponent, DEFAULT_FALLBACK_PALETTE, DEFAULT_RETINAL_MODEL_ID, 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, RETINAL_MODELS, RETINAL_REGION_SOURCE, Rectangle, Region, RegionEditorComponent, RetinalLayerToolService, RetinalSegmenterService, RoutingVisualizerService, SAM_MODELS, SEMANTIC_SEGMENTER, ShapeSelection, TILE_ACCESS_PORT, VISUALIZER, VIZ_CONFIG, ViewerFeature, VisualizationModule, VisualizerComponent, YOLO_MODELS, YOLO_REGION_SOURCE, YoloDetectToolService, YoloSegmenterService, capabilitiesOf, cropImage, defaultPresetSet, getDefaultRetinalModelId, getDefaultSamModelId, getDefaultYoloModelId, getOrtWasmBase, getPlotTypeDescriptor, getRetinalModel, getSamModel, getYoloModel, isEmptyPresetSet, isNapari3d, isNapariIsosurface, isNapariScatter, isNapariScatter3d, isNapariSurface, isNapariVolume, isRetinalModelReady, isSamModelReady, isThreeDimensional, isYoloModelReady, provideVisualization, readyRetinalModels, setDefaultRetinalModel, setDefaultSamModel, setDefaultYoloModel, setOrtWasmBase, setRetinalModelUrls, setSamModelUrls, setYoloModelUrls };
+export { ALL_TOOLBAR_TOOLS, CELL_SEGMENTER, CHANNEL_HISTOGRAM_API, CellposeSegmenterService, ChannelHistogramComponent, DEFAULT_FALLBACK_PALETTE, DEFAULT_SAM_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, SEMANTIC_SEGMENTER, ShapeSelection, TILE_ACCESS_PORT, TOOLBAR_TOOLS, VISUALIZER, VIZ_CONFIG, ViewerFeature, VisualizationModule, VisualizerComponent, capabilitiesOf, cropImage, defaultPresetSet, getDefaultSamModelId, getOrtWasmBase, getPlotTypeDescriptor, getSamModel, isEmptyPresetSet, isNapari3d, isNapariIsosurface, isNapariScatter, isNapariScatter3d, isNapariSurface, isNapariVolume, isSamModelReady, isThreeDimensional, provideVisualization, setDefaultSamModel, setOrtWasmBase, setSamModelUrls, sortToolContributions, visibleToolContributions };
 //# sourceMappingURL=jax-data-science-sci-image-visualizer.mjs.map