napari-js 0.1.0

package/dist/napari-js.js

@@ -0,0 +1,1986 @@
+class $ extends Error {
+  constructor(e) {
+    super(e), this.name = "WebGPUUnsupportedError";
+  }
+}
+async function pe(r = {}) {
+  if (typeof navigator > "u" || !("gpu" in navigator) || !navigator.gpu)
+    throw new $(
+      "WebGPU is not available in this environment (navigator.gpu is missing)."
+    );
+  const e = await navigator.gpu.requestAdapter({
+    powerPreference: r.powerPreference ?? "high-performance"
+  });
+  if (!e)
+    throw new $("No suitable GPUAdapter was found.");
+  const t = e.features.has("float32-filterable"), i = t ? ["float32-filterable"] : [];
+  try {
+    const s = await e.requestDevice({ requiredFeatures: i });
+    return { adapter: e, device: s, features: { float32Filterable: t } };
+  } catch (s) {
+    throw new $(
+      `Failed to create a GPUDevice: ${s instanceof Error ? s.message : String(s)}`
+    );
+  }
+}
+function ge(r, e, t, i) {
+  const s = t > 0 ? t : 1;
+  return {
+    width: Z(Math.round(r * s), i),
+    height: Z(Math.round(e * s), i)
+  };
+}
+function Z(r, e) {
+  return !Number.isFinite(r) || r < 1 ? 1 : Math.min(r, Math.max(1, e));
+}
+class be {
+  constructor(e, t, i) {
+    this.canvas = e, this.device = t;
+    const s = e.getContext("webgpu");
+    if (!s)
+      throw new Error('Failed to acquire a "webgpu" canvas context.');
+    this.context = s, this.format = i ?? navigator.gpu.getPreferredCanvasFormat(), this.configure();
+  }
+  context;
+  format;
+  /** (Re)configure the swapchain for the current device/format. */
+  configure() {
+    this.context.configure({
+      device: this.device,
+      format: this.format,
+      alphaMode: "premultiplied"
+    });
+  }
+  /**
+   * Resize the backing buffer to match the canvas's CSS size × DPR, clamped to the device's
+   * max texture dimension. Returns `true` when the size actually changed.
+   */
+  syncSize(e = typeof devicePixelRatio < "u" ? devicePixelRatio : 1) {
+    const t = this.device.limits.maxTextureDimension2D, { width: i, height: s } = ge(
+      this.canvas.clientWidth,
+      this.canvas.clientHeight,
+      e,
+      t
+    );
+    return this.canvas.width === i && this.canvas.height === s ? !1 : (this.canvas.width = i, this.canvas.height = s, !0);
+  }
+  /** The current swapchain texture view for this frame. */
+  get view() {
+    return this.context.getCurrentTexture().createView();
+  }
+}
+class S {
+  listeners = /* @__PURE__ */ new Set();
+  /** Subscribe; returns an unsubscribe function. */
+  connect(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  emit(e) {
+    for (const t of this.listeners)
+      t(e);
+  }
+  clear() {
+    this.listeners.clear();
+  }
+}
+let ve = 0;
+class D {
+  id = `layer-${ve++}`;
+  changed = new S();
+  name;
+  /** Data→world scale (e.g. physical pixel size). */
+  scale;
+  /** Data→world translation. */
+  translate;
+  _opacity = 1;
+  _visible = !0;
+  _blending = "translucent";
+  constructor(e = {}) {
+    this.name = e.name ?? this.id, this.scale = e.scale ?? [1, 1], this.translate = e.translate ?? [0, 0];
+  }
+  get opacity() {
+    return this._opacity;
+  }
+  set opacity(e) {
+    this._opacity = ye(e), this.changed.emit(this);
+  }
+  get visible() {
+    return this._visible;
+  }
+  set visible(e) {
+    this._visible = e, this.changed.emit(this);
+  }
+  get blending() {
+    return this._blending;
+  }
+  set blending(e) {
+    this._blending = e, this.changed.emit(this);
+  }
+}
+function ye(r) {
+  return r < 0 ? 0 : r > 1 ? 1 : r;
+}
+class N {
+  constructor(e, t) {
+    if (this.name = e, t.length < 2)
+      throw new Error(`Colormap "${e}" needs at least two stops.`);
+    this.stops = [...t].sort((i, s) => i.t - s.t);
+  }
+  stops;
+  /** Sample the colormap at `t` (clamped to 0..1), returning linear RGB. */
+  sample(e) {
+    const t = e <= 0 ? 0 : e >= 1 ? 1 : e, { stops: i } = this;
+    if (t <= i[0].t) return [...i[0].color];
+    const s = i[i.length - 1];
+    if (t >= s.t) return [...s.color];
+    for (let n = 1; n < i.length; n++) {
+      const a = i[n];
+      if (t <= a.t) {
+        const o = i[n - 1], c = a.t - o.t || 1, l = (t - o.t) / c;
+        return [
+          o.color[0] + (a.color[0] - o.color[0]) * l,
+          o.color[1] + (a.color[1] - o.color[1]) * l,
+          o.color[2] + (a.color[2] - o.color[2]) * l
+        ];
+      }
+    }
+    return [...s.color];
+  }
+}
+function Y(r, e) {
+  return new N(r, [
+    { t: 0, color: [0, 0, 0] },
+    { t: 1, color: e }
+  ]);
+}
+const O = Y("gray", [1, 1, 1]), we = Y("red", [1, 0, 0]), xe = Y("green", [0, 1, 0]), _e = Y("blue", [0, 0, 1]), Te = new N("viridis", [
+  { t: 0, color: [0.267, 5e-3, 0.329] },
+  { t: 0.25, color: [0.275, 0.227, 0.494] },
+  { t: 0.5, color: [0.149, 0.443, 0.541] },
+  { t: 0.75, color: [0.122, 0.633, 0.531] },
+  { t: 0.9, color: [0.478, 0.821, 0.318] },
+  { t: 1, color: [0.993, 0.906, 0.144] }
+]), Se = new N("magma", [
+  { t: 0, color: [1e-3, 0, 0.014] },
+  { t: 0.25, color: [0.232, 0.059, 0.437] },
+  { t: 0.5, color: [0.55, 0.161, 0.506] },
+  { t: 0.75, color: [0.868, 0.288, 0.41] },
+  { t: 0.9, color: [0.987, 0.6, 0.392] },
+  { t: 1, color: [0.987, 0.991, 0.749] }
+]), K = {
+  gray: O,
+  grey: O,
+  red: we,
+  green: xe,
+  blue: _e,
+  viridis: Te,
+  magma: Se
+};
+function A(r) {
+  if (r instanceof N) return r;
+  const e = K[r.toLowerCase()];
+  if (!e)
+    throw new Error(
+      `Unknown colormap "${r}". Known: ${Object.keys(K).join(", ")}.`
+    );
+  return e;
+}
+function Pe(r) {
+  return r.kind === "typed" || r.kind === "tiled" ? r.channels : 4;
+}
+function Le(r) {
+  return r.kind === "tiled" ? r.depth : 1;
+}
+function Ue(r) {
+  return Pe(r) === 1;
+}
+function Be(r) {
+  if (r.kind === "typed" || r.kind === "tiled") {
+    if (r.dtype === "float32") return [0, 1];
+    if (r.dtype === "uint16") return [0, 65535];
+  }
+  return [0, 255];
+}
+function Me(r) {
+  if (typeof r == "object" && "kind" in r && (r.kind === "typed" || r.kind === "tiled"))
+    return r;
+  const e = r, t = "width" in e ? Number(e.width) : 0, i = "height" in e ? Number(e.height) : 0;
+  return { kind: "external", width: t, height: i, image: e };
+}
+class ie extends D {
+  kind = "image";
+  source;
+  grayscale;
+  /** Bumped whenever the colormap changes so the visual knows to rebuild its LUT. */
+  colormapVersion = 0;
+  _colormap;
+  _contrastLimits;
+  _gamma;
+  _invert;
+  _interpolation;
+  constructor(e, t = {}) {
+    super({ name: t.name, scale: t.scale, translate: t.translate }), this.source = e, this.grayscale = Ue(e), this._colormap = this.grayscale ? A(t.colormap ?? "gray") : null, this._contrastLimits = t.contrastLimits ?? Be(e), this._gamma = t.gamma ?? 1, this._invert = t.invert ?? !1, this._interpolation = t.interpolation ?? "linear", t.opacity !== void 0 && (this._opacity = t.opacity), t.blending !== void 0 && (this._blending = t.blending), t.visible !== void 0 && (this._visible = t.visible);
+  }
+  get colormap() {
+    return this._colormap;
+  }
+  set colormap(e) {
+    this._colormap = e === null ? null : this.grayscale ? A(e) : null, this.colormapVersion++, this.changed.emit(this);
+  }
+  get contrastLimits() {
+    return [this._contrastLimits[0], this._contrastLimits[1]];
+  }
+  set contrastLimits(e) {
+    this._contrastLimits = [e[0], e[1]], this.changed.emit(this);
+  }
+  get gamma() {
+    return this._gamma;
+  }
+  set gamma(e) {
+    this._gamma = e > 0 ? e : this._gamma, this.changed.emit(this);
+  }
+  get invert() {
+    return this._invert;
+  }
+  set invert(e) {
+    this._invert = e, this.changed.emit(this);
+  }
+  get interpolation() {
+    return this._interpolation;
+  }
+  set interpolation(e) {
+    this._interpolation = e, this.changed.emit(this);
+  }
+}
+const X = 12;
+function Ge(r) {
+  if (r instanceof Float32Array) return r;
+  const e = new Float32Array(r.length * 2);
+  return r.forEach((t, i) => {
+    e[i * 2] = t[0], e[i * 2 + 1] = t[1];
+  }), e;
+}
+class re extends D {
+  kind = "points";
+  count;
+  positions;
+  dataVersion = 0;
+  _size;
+  _faceColor;
+  _borderColor;
+  _borderWidth;
+  _symbol;
+  constructor(e, t = {}) {
+    super({ name: t.name, scale: t.scale, translate: t.translate }), this.positions = Ge(e), this.count = this.positions.length / 2, this._size = t.size ?? 10, this._faceColor = t.faceColor ?? [1, 1, 1, 1], this._borderColor = t.borderColor ?? [0, 0, 0, 1], this._borderWidth = t.borderWidth ?? 0, this._symbol = t.symbol ?? "disc", t.opacity !== void 0 && (this._opacity = t.opacity), t.blending !== void 0 && (this._blending = t.blending), t.visible !== void 0 && (this._visible = t.visible);
+  }
+  get size() {
+    return this._size;
+  }
+  set size(e) {
+    this._size = e, this.dataVersion++, this.changed.emit(this);
+  }
+  get faceColor() {
+    return this._faceColor;
+  }
+  set faceColor(e) {
+    this._faceColor = e, this.dataVersion++, this.changed.emit(this);
+  }
+  get borderColor() {
+    return this._borderColor;
+  }
+  set borderColor(e) {
+    this._borderColor = e, this.dataVersion++, this.changed.emit(this);
+  }
+  get borderWidth() {
+    return this._borderWidth;
+  }
+  set borderWidth(e) {
+    this._borderWidth = e, this.dataVersion++, this.changed.emit(this);
+  }
+  get symbol() {
+    return this._symbol;
+  }
+  set symbol(e) {
+    this._symbol = e, this.changed.emit(this);
+  }
+  symbolCode() {
+    return this._symbol === "disc" ? 0 : this._symbol === "ring" ? 1 : 2;
+  }
+  /** Per-point size at index `i`. */
+  sizeAt(e) {
+    const t = this._size;
+    return typeof t == "number" ? t : t[e];
+  }
+  /** Build the interleaved instance buffer (count × 12 floats) for the GPU. */
+  buildInstanceData() {
+    const e = new Float32Array(this.count * X);
+    for (let t = 0; t < this.count; t++) {
+      const i = t * X;
+      e[i] = this.positions[t * 2], e[i + 1] = this.positions[t * 2 + 1], e[i + 2] = this.sizeAt(t), J(e, i + 3, this._faceColor, t), J(e, i + 7, this._borderColor, t), e[i + 11] = this._borderWidth;
+    }
+    return e;
+  }
+}
+function J(r, e, t, i) {
+  const s = Array.isArray(t[0]) ? t[i] : t;
+  r[e] = s[0], r[e + 1] = s[1], r[e + 2] = s[2], r[e + 3] = s[3];
+}
+const Ee = X;
+class se extends D {
+  kind = "labels";
+  width;
+  height;
+  data;
+  _selectedLabel;
+  _showSelectedOnly;
+  constructor(e, t, i, s = {}) {
+    if (super({ name: s.name, scale: s.scale, translate: s.translate }), e.length < t * i)
+      throw new Error(`Labels data (${e.length}) smaller than ${t}×${i}.`);
+    this.data = e, this.width = t, this.height = i, this._selectedLabel = s.selectedLabel ?? 0, this._showSelectedOnly = s.showSelectedOnly ?? !1, this._blending = s.blending ?? "translucent", s.opacity !== void 0 && (this._opacity = s.opacity), s.visible !== void 0 && (this._visible = s.visible);
+  }
+  get selectedLabel() {
+    return this._selectedLabel;
+  }
+  set selectedLabel(e) {
+    this._selectedLabel = Math.max(0, Math.round(e)), this.changed.emit(this);
+  }
+  get showSelectedOnly() {
+    return this._showSelectedOnly;
+  }
+  set showSelectedOnly(e) {
+    this._showSelectedOnly = e, this.changed.emit(this);
+  }
+  /** Label id at data pixel `(x, y)`, or 0 (background) if out of bounds. */
+  labelAt(e, t) {
+    const i = Math.floor(e), s = Math.floor(t);
+    return i < 0 || s < 0 || i >= this.width || s >= this.height ? 0 : this.data[s * this.width + i];
+  }
+}
+class ne extends D {
+  kind = "volume";
+  width;
+  height;
+  depth;
+  data;
+  colormapVersion = 0;
+  _colormap;
+  _contrastLimits;
+  _gamma;
+  _rendering;
+  _isoThreshold;
+  constructor(e, t, i, s, n = {}) {
+    if (super({ name: n.name }), e.length < t * i * s)
+      throw new Error(`Volume data (${e.length}) smaller than ${t}×${i}×${s}.`);
+    this.data = e, this.width = t, this.height = i, this.depth = s, this._colormap = A(n.colormap ?? "viridis"), this._contrastLimits = n.contrastLimits ?? [0, 255], this._gamma = n.gamma ?? 1, this._rendering = n.rendering ?? "mip", this._isoThreshold = n.isoThreshold ?? 0.5, this._blending = n.blending ?? "translucent", n.opacity !== void 0 && (this._opacity = n.opacity), n.visible !== void 0 && (this._visible = n.visible);
+  }
+  get colormap() {
+    return this._colormap;
+  }
+  set colormap(e) {
+    this._colormap = A(e), this.colormapVersion++, this.changed.emit(this);
+  }
+  get contrastLimits() {
+    return [this._contrastLimits[0], this._contrastLimits[1]];
+  }
+  set contrastLimits(e) {
+    this._contrastLimits = [e[0], e[1]], this.changed.emit(this);
+  }
+  get gamma() {
+    return this._gamma;
+  }
+  set gamma(e) {
+    this._gamma = e > 0 ? e : this._gamma, this.changed.emit(this);
+  }
+  get rendering() {
+    return this._rendering;
+  }
+  set rendering(e) {
+    this._rendering = e, this.changed.emit(this);
+  }
+  renderingCode() {
+    return this._rendering === "mip" ? 0 : this._rendering === "translucent" ? 1 : 2;
+  }
+  get isoThreshold() {
+    return this._isoThreshold;
+  }
+  set isoThreshold(e) {
+    this._isoThreshold = e, this.changed.emit(this);
+  }
+}
+function q() {
+  const r = new Float32Array(16);
+  return r[0] = r[5] = r[10] = r[15] = 1, r;
+}
+function P(r, e) {
+  const t = new Float32Array(16);
+  for (let i = 0; i < 4; i++)
+    for (let s = 0; s < 4; s++) {
+      let n = 0;
+      for (let a = 0; a < 4; a++)
+        n += r[a * 4 + s] * e[i * 4 + a];
+      t[i * 4 + s] = n;
+    }
+  return t;
+}
+function W(r, e, t, i) {
+  const s = q();
+  return s[0] = r, s[5] = e, s[12] = t, s[13] = i, s;
+}
+function Fe(r, e, t) {
+  const i = q();
+  return i[0] = r, i[5] = e, i[10] = t, i;
+}
+function Ie(r, e, t) {
+  const i = q();
+  return i[12] = r, i[13] = e, i[14] = t, i;
+}
+function Re(r, e, t, i) {
+  const s = 1 / Math.tan(r / 2), n = new Float32Array(16);
+  return n[0] = s / e, n[5] = s, n[10] = i / (t - i), n[11] = -1, n[14] = i * t / (t - i), n;
+}
+function Ce(r, e, t) {
+  const i = e[0] - r[0], s = e[1] - r[1], n = e[2] - r[2];
+  let a = 1 / Math.hypot(i, s, n);
+  const o = [i * a, s * a, n * a];
+  let c = o[1] * t[2] - o[2] * t[1], l = o[2] * t[0] - o[0] * t[2], h = o[0] * t[1] - o[1] * t[0];
+  a = 1 / Math.hypot(c, l, h), c *= a, l *= a, h *= a;
+  const u = l * o[2] - h * o[1], f = h * o[0] - c * o[2], m = c * o[1] - l * o[0], d = new Float32Array(16);
+  return d[0] = c, d[1] = u, d[2] = -o[0], d[3] = 0, d[4] = l, d[5] = f, d[6] = -o[1], d[7] = 0, d[8] = h, d[9] = m, d[10] = -o[2], d[11] = 0, d[12] = -(c * r[0] + l * r[1] + h * r[2]), d[13] = -(u * r[0] + f * r[1] + m * r[2]), d[14] = o[0] * r[0] + o[1] * r[1] + o[2] * r[2], d[15] = 1, d;
+}
+function Ve(r) {
+  const e = r[0], t = r[1], i = r[2], s = r[3], n = r[4], a = r[5], o = r[6], c = r[7], l = r[8], h = r[9], u = r[10], f = r[11], m = r[12], d = r[13], _ = r[14], x = r[15], v = e * a - t * n, y = e * o - i * n, w = e * c - s * n, T = t * o - i * a, L = t * c - s * a, U = i * c - s * o, B = l * d - h * m, M = l * _ - u * m, G = l * x - f * m, E = h * _ - u * d, F = h * x - f * d, I = u * x - f * _, j = v * I - y * F + w * E + T * G - L * M + U * B;
+  if (!j) return q();
+  const g = 1 / j, p = new Float32Array(16);
+  return p[0] = (a * I - o * F + c * E) * g, p[1] = (i * F - t * I - s * E) * g, p[2] = (d * U - _ * L + x * T) * g, p[3] = (u * L - h * U - f * T) * g, p[4] = (o * G - n * I - c * M) * g, p[5] = (e * I - i * G + s * M) * g, p[6] = (_ * w - m * U - x * y) * g, p[7] = (l * U - u * w + f * y) * g, p[8] = (n * F - a * G + c * B) * g, p[9] = (t * G - e * F - s * B) * g, p[10] = (m * L - d * w + x * v) * g, p[11] = (h * w - l * L - f * v) * g, p[12] = (a * M - n * E - o * B) * g, p[13] = (e * E - t * M + i * B) * g, p[14] = (d * y - m * T - _ * v) * g, p[15] = (l * T - h * y + u * v) * g, p;
+}
+function ze(r, e, t, i) {
+  const s = 2 * e / Math.max(t, 1), n = 2 * e / Math.max(i, 1), a = new Float32Array(16);
+  return a[0] = s, a[5] = -n, a[10] = 1, a[15] = 1, a[12] = -s * r[0], a[13] = n * r[1], a;
+}
+const b = 256;
+function H(r, e = b) {
+  const t = new Uint8Array(e * 4), i = e - 1;
+  for (let s = 0; s < e; s++) {
+    const [n, a, o] = r.sample(i === 0 ? 0 : s / i), c = s * 4;
+    t[c] = k(n), t[c + 1] = k(a), t[c + 2] = k(o), t[c + 3] = 255;
+  }
+  return t;
+}
+function k(r) {
+  const e = r <= 0 ? 0 : r >= 1 ? 1 : r;
+  return Math.round(e * 255);
+}
+function ae(r, e, t) {
+  return r === 4 ? {
+    format: "rgba8unorm",
+    bytesPerPixel: 4,
+    filterable: !0,
+    sampleScale: 1 / 255,
+    isRgba: !0
+  } : e === "uint8" ? {
+    format: "r8unorm",
+    bytesPerPixel: 1,
+    filterable: !0,
+    sampleScale: 1 / 255,
+    isRgba: !1
+  } : {
+    format: "r32float",
+    bytesPerPixel: 4,
+    filterable: t,
+    sampleScale: 1,
+    isRgba: !1
+  };
+}
+function oe(r, e) {
+  return e === "r32float" && !(r instanceof Float32Array) ? Float32Array.from(r) : r;
+}
+const le = (
+  /* wgsl */
+  `
+struct U {
+  mvp : mat4x4<f32>,
+  imageSize : vec2<f32>,
+  origin : vec2<f32>,   // data-space origin of this quad (0 for a full image; tile origin for tiles)
+  params : vec4<f32>,   // climLo, climHi, gamma, opacity   (clim already normalized to sample space)
+  flags : vec4<f32>,    // isRgba, invert, 0, 0
+};
+
+@group(0) @binding(0) var<uniform> u : U;
+@group(0) @binding(1) var srcSamp : sampler;
+@group(0) @binding(2) var srcTex : texture_2d<f32>;
+@group(0) @binding(3) var lutSamp : sampler;
+@group(0) @binding(4) var lutTex : texture_2d<f32>;
+
+struct VSOut {
+  @builtin(position) position : vec4<f32>,
+  @location(0) uv : vec2<f32>,
+};
+
+@vertex
+fn vs(@builtin(vertex_index) vi : u32) -> VSOut {
+  var corners = array<vec2<f32>, 6>(
+    vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0),
+    vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0),
+  );
+  let c = corners[vi];
+  var out : VSOut;
+  out.position = u.mvp * vec4<f32>(u.origin + c * u.imageSize, 0.0, 1.0);
+  out.uv = c;
+  return out;
+}
+
+@fragment
+fn fs(in : VSOut) -> @location(0) vec4<f32> {
+  let raw = textureSample(srcTex, srcSamp, in.uv);
+  let climLo = u.params.x;
+  let climHi = u.params.y;
+  let gamma = u.params.z;
+  let opacity = u.params.w;
+  let denom = max(climHi - climLo, 1e-8);
+
+  // Scalar path: window → invert → gamma → LUT.
+  var t = clamp((raw.r - climLo) / denom, 0.0, 1.0);
+  if (u.flags.y > 0.5) { t = 1.0 - t; }
+  t = pow(t, gamma);
+  let mapped = textureSample(lutTex, lutSamp, vec2<f32>(t, 0.5)).rgb;
+
+  // RGB path: per-channel window → gamma.
+  var direct = clamp((raw.rgb - vec3<f32>(climLo)) / vec3<f32>(denom), vec3<f32>(0.0), vec3<f32>(1.0));
+  direct = pow(direct, vec3<f32>(gamma));
+
+  let isRgba = u.flags.x > 0.5;
+  let rgb = select(mapped, direct, isRgba);
+  let a = select(opacity, raw.a * opacity, isRgba);
+  return vec4<f32>(rgb * a, a);
+}
+`
+);
+function C(r) {
+  switch (r) {
+    case "opaque":
+      return;
+    case "translucent":
+      return {
+        color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+        alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
+      };
+    case "additive":
+      return {
+        color: { srcFactor: "one", dstFactor: "one", operation: "add" },
+        alpha: { srcFactor: "one", dstFactor: "one", operation: "add" }
+      };
+    case "minimum":
+      return {
+        color: { srcFactor: "one", dstFactor: "one", operation: "min" },
+        alpha: { srcFactor: "one", dstFactor: "one", operation: "min" }
+      };
+  }
+}
+const ce = 28, Oe = ce * 4;
+function Ae(r, e) {
+  if (r.kind === "external")
+    return {
+      format: "rgba8unorm",
+      bytesPerPixel: 4,
+      filterable: !0,
+      sampleScale: 1 / 255,
+      isRgba: !0,
+      data: null
+    };
+  if (r.kind === "tiled")
+    throw new Error("ImageVisual does not render tiled sources; use TiledImageVisual.");
+  const t = ae(r.channels, r.dtype, e);
+  return { ...t, data: oe(r.data, t.format) };
+}
+class De {
+  constructor(e, t, i, s = { float32Filterable: !1 }) {
+    this.device = e, this.format = t, this.layer = i, this.plan = Ae(i.source, s.float32Filterable), this.module = e.createShaderModule({ code: le }), this.uniformBuffer = e.createBuffer({
+      size: Oe,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }), this.bindGroupLayout = this.buildBindGroupLayout(), this.pipelineLayout = e.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout] }), this.uploadTexture(), this.lutTexture = this.createLutTexture(), this.currentInterp = i.interpolation, this.srcSampler = this.createSrcSampler(i.interpolation), this.lutSampler = e.createSampler({
+      magFilter: "linear",
+      minFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge"
+    }), this.currentBlend = i.blending, this.pipeline = this.buildPipeline(i.blending), this.bindGroup = this.buildBindGroup(), this.lutVersion = i.colormapVersion;
+  }
+  ndisplay = 2;
+  module;
+  uniformBuffer;
+  scratch = new Float32Array(ce);
+  bindGroupLayout;
+  pipelineLayout;
+  plan;
+  texture;
+  lutTexture;
+  srcSampler;
+  lutSampler;
+  pipeline;
+  bindGroup;
+  currentBlend;
+  currentInterp;
+  lutVersion;
+  buildBindGroupLayout() {
+    const e = this.plan.filterable;
+    return this.device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          buffer: { type: "uniform" }
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          sampler: { type: e ? "filtering" : "non-filtering" }
+        },
+        {
+          binding: 2,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: { sampleType: e ? "float" : "unfilterable-float" }
+        },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+        { binding: 4, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } }
+      ]
+    });
+  }
+  uploadTexture() {
+    const e = this.layer.source;
+    if (e.kind === "external") {
+      this.texture = this.device.createTexture({
+        size: [e.width, e.height],
+        format: this.plan.format,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+      }), this.device.queue.copyExternalImageToTexture(
+        { source: e.image },
+        { texture: this.texture },
+        [e.width, e.height]
+      );
+      return;
+    }
+    this.texture = this.device.createTexture({
+      size: [e.width, e.height],
+      format: this.plan.format,
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    }), this.device.queue.writeTexture(
+      { texture: this.texture },
+      this.plan.data,
+      { bytesPerRow: e.width * this.plan.bytesPerPixel, rowsPerImage: e.height },
+      { width: e.width, height: e.height }
+    );
+  }
+  createLutTexture() {
+    const e = this.device.createTexture({
+      size: [b, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    });
+    return this.writeLut(e), e;
+  }
+  writeLut(e) {
+    const t = this.layer.colormap ?? O;
+    this.device.queue.writeTexture(
+      { texture: e },
+      H(t, b),
+      { bytesPerRow: b * 4, rowsPerImage: 1 },
+      { width: b, height: 1 }
+    );
+  }
+  createSrcSampler(e) {
+    const t = !this.plan.filterable || e === "nearest" ? "nearest" : "linear";
+    return this.device.createSampler({
+      magFilter: t,
+      minFilter: t,
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge"
+    });
+  }
+  buildPipeline(e) {
+    return this.device.createRenderPipeline({
+      layout: this.pipelineLayout,
+      vertex: { module: this.module, entryPoint: "vs" },
+      fragment: {
+        module: this.module,
+        entryPoint: "fs",
+        targets: [{ format: this.format, blend: C(e) }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+  }
+  buildBindGroup() {
+    return this.device.createBindGroup({
+      layout: this.bindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer } },
+        { binding: 1, resource: this.srcSampler },
+        { binding: 2, resource: this.texture.createView() },
+        { binding: 3, resource: this.lutSampler },
+        { binding: 4, resource: this.lutTexture.createView() }
+      ]
+    });
+  }
+  /** Reconcile GPU state with the layer's current properties (cheap; called before draw). */
+  sync() {
+    this.layer.blending !== this.currentBlend && (this.currentBlend = this.layer.blending, this.pipeline = this.buildPipeline(this.currentBlend)), this.layer.interpolation !== this.currentInterp && (this.currentInterp = this.layer.interpolation, this.srcSampler = this.createSrcSampler(this.currentInterp), this.bindGroup = this.buildBindGroup()), this.layer.colormapVersion !== this.lutVersion && (this.lutVersion = this.layer.colormapVersion, this.writeLut(this.lutTexture));
+  }
+  /** Encode a draw of this layer for the current view. */
+  draw(e, t) {
+    const i = this.layer.source, s = W(
+      this.layer.scale[0],
+      this.layer.scale[1],
+      this.layer.translate[0],
+      this.layer.translate[1]
+    ), n = P(t.camera2d.viewProjection(t.vw, t.vh), s), a = this.scratch;
+    a.set(n, 0), a[16] = i.width, a[17] = i.height, a[18] = 0, a[19] = 0;
+    const [o, c] = this.layer.contrastLimits;
+    a[20] = o * this.plan.sampleScale, a[21] = c * this.plan.sampleScale, a[22] = this.layer.gamma, a[23] = this.layer.opacity, a[24] = this.plan.isRgba ? 1 : 0, a[25] = this.layer.invert ? 1 : 0, a[26] = 0, a[27] = 0, this.device.queue.writeBuffer(this.uniformBuffer, 0, a), e.setPipeline(this.pipeline), e.setBindGroup(0, this.bindGroup), e.draw(6);
+  }
+  dispose() {
+    this.texture.destroy(), this.lutTexture.destroy(), this.uniformBuffer.destroy();
+  }
+}
+function he(r) {
+  return 2 ** r;
+}
+function Ne(r, e, t) {
+  const i = he(t);
+  return { width: Math.max(1, Math.ceil(r / i)), height: Math.max(1, Math.ceil(e / i)) };
+}
+function Ye(r, e, t, i) {
+  const s = Ne(r, e, t);
+  return { cols: Math.ceil(s.width / i), rows: Math.ceil(s.height / i) };
+}
+function qe(r, e) {
+  const t = Math.floor(Math.log2(1 / Math.max(r, 1e-9)));
+  return Math.min(e - 1, Math.max(0, t));
+}
+function We(r, e, t, i, s) {
+  const n = i / 2 / Math.max(t, 1e-9), a = s / 2 / Math.max(t, 1e-9);
+  return { x: r - n, y: e - a, width: 2 * n, height: 2 * a };
+}
+function Q(r, e, t, i, s) {
+  const n = s * he(i), { cols: a, rows: o } = Ye(e, t, i, s), c = Math.max(0, r.x), l = Math.max(0, r.y), h = Math.min(e, r.x + r.width), u = Math.min(t, r.y + r.height);
+  if (h <= c || u <= l) return [];
+  const f = Math.max(0, Math.floor(c / n)), m = Math.min(a - 1, Math.floor((h - 1e-6) / n)), d = Math.max(0, Math.floor(l / n)), _ = Math.min(o - 1, Math.floor((u - 1e-6) / n)), x = [];
+  for (let v = d; v <= _; v++)
+    for (let y = f; y <= m; y++) {
+      const w = y * n, T = v * n;
+      x.push({ col: y, row: v, x: w, y: T, w: Math.min(n, e - w), h: Math.min(n, t - T) });
+    }
+  return x;
+}
+class $e {
+  constructor(e, t) {
+    if (this.capacity = e, this.onEvict = t, e < 1) throw new Error("LruCache capacity must be >= 1.");
+  }
+  map = /* @__PURE__ */ new Map();
+  get size() {
+    return this.map.size;
+  }
+  has(e) {
+    return this.map.has(e);
+  }
+  /** Get a value and mark it most-recently-used. */
+  get(e) {
+    const t = this.map.get(e);
+    if (t !== void 0)
+      return this.map.delete(e), this.map.set(e, t), t;
+  }
+  /** Insert/update a value (most-recently-used), evicting the oldest beyond capacity. */
+  set(e, t) {
+    for (this.map.has(e) && this.map.delete(e), this.map.set(e, t); this.map.size > this.capacity; ) {
+      const i = this.map.keys().next().value;
+      if (i === void 0) break;
+      const s = this.map.get(i);
+      this.map.delete(i), this.onEvict?.(s, i);
+    }
+  }
+  delete(e) {
+    const t = this.map.get(e);
+    return t === void 0 ? !1 : (this.map.delete(e), this.onEvict?.(t, e), !0);
+  }
+  clear() {
+    for (const [e, t] of this.map) this.onEvict?.(t, e);
+    this.map.clear();
+  }
+}
+const de = 28, ke = de * 4, Xe = 192;
+class He {
+  constructor(e, t, i, s) {
+    if (this.device = e, this.format = t, this.layer = i, this.opts = s, i.source.kind !== "tiled")
+      throw new Error("TiledImageVisual requires a tiled source.");
+    this.source = i.source, this.plan = ae(this.source.channels, this.source.dtype, s.float32Filterable), this.module = e.createShaderModule({ code: le }), this.bindGroupLayout = this.buildBindGroupLayout(), this.pipelineLayout = e.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout] }), this.lutSampler = e.createSampler({
+      magFilter: "linear",
+      minFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge"
+    }), this.lutTexture = e.createTexture({
+      size: [b, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    }), this.writeLut(), this.lutVersion = i.colormapVersion, this.currentInterp = i.interpolation, this.srcSampler = this.createSrcSampler(i.interpolation), this.currentBlend = i.blending, this.pipeline = this.buildPipeline(i.blending), this.cache = new $e(Xe, (n) => {
+      n.texture.destroy(), n.uniformBuffer.destroy();
+    });
+  }
+  ndisplay = 2;
+  source;
+  plan;
+  module;
+  bindGroupLayout;
+  pipelineLayout;
+  lutTexture;
+  lutSampler;
+  scratch = new Float32Array(de);
+  cache;
+  pending = /* @__PURE__ */ new Set();
+  srcSampler;
+  pipeline;
+  currentBlend;
+  currentInterp;
+  lutVersion;
+  disposed = !1;
+  buildBindGroupLayout() {
+    const e = this.plan.filterable;
+    return this.device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          buffer: { type: "uniform" }
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          sampler: { type: e ? "filtering" : "non-filtering" }
+        },
+        {
+          binding: 2,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: { sampleType: e ? "float" : "unfilterable-float" }
+        },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+        { binding: 4, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } }
+      ]
+    });
+  }
+  buildPipeline(e) {
+    return this.device.createRenderPipeline({
+      layout: this.pipelineLayout,
+      vertex: { module: this.module, entryPoint: "vs" },
+      fragment: {
+        module: this.module,
+        entryPoint: "fs",
+        targets: [{ format: this.format, blend: C(e) }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+  }
+  createSrcSampler(e) {
+    const t = !this.plan.filterable || e === "nearest" ? "nearest" : "linear";
+    return this.device.createSampler({
+      magFilter: t,
+      minFilter: t,
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge"
+    });
+  }
+  writeLut() {
+    const e = this.layer.colormap ?? O;
+    this.device.queue.writeTexture(
+      { texture: this.lutTexture },
+      H(e, b),
+      { bytesPerRow: b * 4, rowsPerImage: 1 },
+      { width: b, height: 1 }
+    );
+  }
+  keyOf(e, t, i, s) {
+    return `${s}:${e}:${t}:${i}`;
+  }
+  /** Return a ready tile, or kick an async fetch and return undefined. */
+  ensureTile(e, t, i, s) {
+    const n = this.keyOf(e, t, i, s), a = this.cache.get(n);
+    if (a) return a;
+    this.pending.has(n) || (this.pending.add(n), this.source.fetchTile({ level: e, col: t, row: i, z: s }).then((o) => {
+      if (this.pending.delete(n), this.disposed) return;
+      const c = this.device.createTexture({
+        size: [o.width, o.height],
+        format: this.plan.format,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+      });
+      this.device.queue.writeTexture(
+        { texture: c },
+        oe(o.data, this.plan.format),
+        { bytesPerRow: o.width * this.plan.bytesPerPixel, rowsPerImage: o.height },
+        { width: o.width, height: o.height }
+      );
+      const l = this.device.createBuffer({
+        size: ke,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      }), h = this.device.createBindGroup({
+        layout: this.bindGroupLayout,
+        entries: [
+          { binding: 0, resource: { buffer: l } },
+          { binding: 1, resource: this.srcSampler },
+          { binding: 2, resource: c.createView() },
+          { binding: 3, resource: this.lutSampler },
+          { binding: 4, resource: this.lutTexture.createView() }
+        ]
+      });
+      this.cache.set(n, { texture: c, uniformBuffer: l, bindGroup: h }), this.opts.onNeedsRedraw();
+    }).catch(() => this.pending.delete(n)));
+  }
+  drawTile(e, t, i, s) {
+    const n = this.scratch;
+    n.set(i, 0), n[16] = s.w, n[17] = s.h, n[18] = s.x, n[19] = s.y;
+    const [a, o] = this.layer.contrastLimits;
+    n[20] = a * this.plan.sampleScale, n[21] = o * this.plan.sampleScale, n[22] = this.layer.gamma, n[23] = this.layer.opacity, n[24] = this.plan.isRgba ? 1 : 0, n[25] = this.layer.invert ? 1 : 0, n[26] = 0, n[27] = 0, this.device.queue.writeBuffer(t.uniformBuffer, 0, n), e.setBindGroup(0, t.bindGroup), e.draw(6);
+  }
+  sync() {
+    this.layer.blending !== this.currentBlend && (this.currentBlend = this.layer.blending, this.pipeline = this.buildPipeline(this.currentBlend)), this.layer.interpolation !== this.currentInterp && (this.currentInterp = this.layer.interpolation, this.srcSampler = this.createSrcSampler(this.currentInterp), this.cache.clear()), this.layer.colormapVersion !== this.lutVersion && (this.lutVersion = this.layer.colormapVersion, this.writeLut());
+  }
+  draw(e, t) {
+    const { width: i, height: s, tileSize: n, levels: a } = this.source, o = t.camera2d, c = t.z, l = We(o.center[0], o.center[1], o.zoom, t.vw, t.vh), h = qe(o.zoom, a), u = P(
+      o.viewProjection(t.vw, t.vh),
+      W(
+        this.layer.scale[0],
+        this.layer.scale[1],
+        this.layer.translate[0],
+        this.layer.translate[1]
+      )
+    );
+    e.setPipeline(this.pipeline);
+    const f = a - 1;
+    if (this.layer.blending !== "additive" && h !== f)
+      for (const m of Q(l, i, s, f, n)) {
+        const d = this.ensureTile(f, m.col, m.row, c);
+        d && this.drawTile(e, d, u, m);
+      }
+    for (const m of Q(l, i, s, h, n)) {
+      const d = this.ensureTile(h, m.col, m.row, c);
+      d && this.drawTile(e, d, u, m);
+    }
+  }
+  dispose() {
+    this.disposed = !0, this.cache.clear(), this.lutTexture.destroy();
+  }
+}
+const je = (
+  /* wgsl */
+  `
+struct U {
+  mvp : mat4x4<f32>,
+  params : vec4<f32>,   // symbolCode (0=disc,1=ring,2=square), opacity, 0, 0
+};
+@group(0) @binding(0) var<uniform> u : U;
+
+struct VSOut {
+  @builtin(position) position : vec4<f32>,
+  @location(0) local : vec2<f32>,
+  @location(1) face : vec4<f32>,
+  @location(2) border : vec4<f32>,
+  @location(3) borderFrac : f32,
+};
+
+@vertex
+fn vs(
+  @builtin(vertex_index) vi : u32,
+  @location(0) pos : vec2<f32>,
+  @location(1) size : f32,
+  @location(2) face : vec4<f32>,
+  @location(3) border : vec4<f32>,
+  @location(4) borderWidth : f32,
+) -> VSOut {
+  var corners = array<vec2<f32>, 6>(
+    vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),
+    vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),
+  );
+  let c = corners[vi];
+  let world = pos + c * (size * 0.5);
+  var out : VSOut;
+  out.position = u.mvp * vec4<f32>(world, 0.0, 1.0);
+  out.local = c;
+  out.face = face;
+  out.border = border;
+  out.borderFrac = clamp(borderWidth / max(size, 1e-6), 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fs(in : VSOut) -> @location(0) vec4<f32> {
+  let symbol = u.params.x;
+  let opacity = u.params.y;
+  var d : f32;
+  if (symbol > 1.5) { d = max(abs(in.local.x), abs(in.local.y)); } // square
+  else { d = length(in.local); }                                   // disc / ring
+
+  let aa = max(fwidth(d), 1e-5);
+  let inside = 1.0 - smoothstep(1.0 - aa, 1.0, d);
+  if (inside <= 0.0) { discard; }
+
+  let borderEdge = 1.0 - in.borderFrac;
+  let borderMix = smoothstep(borderEdge - aa, borderEdge, d);
+  let rgb = mix(in.face.rgb, in.border.rgb, borderMix);
+  var a = mix(in.face.a, in.border.a, borderMix);
+  if (symbol > 0.5 && symbol < 1.5) { a = a * borderMix; } // ring: only the border ring shows
+  a = a * inside * opacity;
+  return vec4<f32>(rgb * a, a);
+}
+`
+), Ze = Ee * 4, ue = 20, Ke = ue * 4;
+class Je {
+  constructor(e, t, i) {
+    this.device = e, this.format = t, this.layer = i, this.module = e.createShaderModule({ code: je }), this.uniformBuffer = e.createBuffer({
+      size: Ke,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }), this.currentBlend = i.blending, this.pipeline = this.buildPipeline(i.blending);
+  }
+  ndisplay = 2;
+  module;
+  uniformBuffer;
+  scratch = new Float32Array(ue);
+  instanceBuffer = null;
+  pipeline;
+  currentBlend;
+  dataVersion = -1;
+  buildPipeline(e) {
+    return this.device.createRenderPipeline({
+      layout: "auto",
+      vertex: {
+        module: this.module,
+        entryPoint: "vs",
+        buffers: [
+          {
+            arrayStride: Ze,
+            stepMode: "instance",
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: "float32x2" },
+              // pos
+              { shaderLocation: 1, offset: 8, format: "float32" },
+              // size
+              { shaderLocation: 2, offset: 12, format: "float32x4" },
+              // face
+              { shaderLocation: 3, offset: 28, format: "float32x4" },
+              // border
+              { shaderLocation: 4, offset: 44, format: "float32" }
+              // borderWidth
+            ]
+          }
+        ]
+      },
+      fragment: {
+        module: this.module,
+        entryPoint: "fs",
+        targets: [{ format: this.format, blend: C(e) }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+  }
+  sync() {
+    this.layer.blending !== this.currentBlend && (this.currentBlend = this.layer.blending, this.pipeline = this.buildPipeline(this.currentBlend)), (this.layer.dataVersion !== this.dataVersion || !this.instanceBuffer) && (this.dataVersion = this.layer.dataVersion, this.rebuildInstances());
+  }
+  rebuildInstances() {
+    if (this.instanceBuffer?.destroy(), this.layer.count === 0) {
+      this.instanceBuffer = null;
+      return;
+    }
+    const e = this.layer.buildInstanceData();
+    this.instanceBuffer = this.device.createBuffer({
+      size: e.byteLength,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    }), this.device.queue.writeBuffer(this.instanceBuffer, 0, e);
+  }
+  draw(e, t) {
+    if (!this.instanceBuffer || this.layer.count === 0) return;
+    const i = P(
+      t.camera2d.viewProjection(t.vw, t.vh),
+      W(
+        this.layer.scale[0],
+        this.layer.scale[1],
+        this.layer.translate[0],
+        this.layer.translate[1]
+      )
+    ), s = this.scratch;
+    s.set(i, 0), s[16] = this.layer.symbolCode(), s[17] = this.layer.opacity, s[18] = 0, s[19] = 0, this.device.queue.writeBuffer(this.uniformBuffer, 0, s);
+    const n = this.device.createBindGroup({
+      layout: this.pipeline.getBindGroupLayout(0),
+      entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }]
+    });
+    e.setPipeline(this.pipeline), e.setBindGroup(0, n), e.setVertexBuffer(0, this.instanceBuffer), e.draw(6, this.layer.count);
+  }
+  dispose() {
+    this.instanceBuffer?.destroy(), this.uniformBuffer.destroy();
+  }
+}
+function Qe(r, e, t) {
+  const i = Math.floor(r * 6), s = r * 6 - i, n = t * (1 - e), a = t * (1 - s * e), o = t * (1 - (1 - s) * e);
+  switch (i % 6) {
+    case 0:
+      return [t, o, n];
+    case 1:
+      return [a, t, n];
+    case 2:
+      return [n, t, o];
+    case 3:
+      return [n, a, t];
+    case 4:
+      return [o, n, t];
+    default:
+      return [t, n, a];
+  }
+}
+function et(r = 256) {
+  const e = new Uint8Array(r * 4), t = 0.618033988749895;
+  for (let i = 1; i < r; i++) {
+    const s = i * t % 1, [n, a, o] = Qe(s, 0.6, 0.95), c = i * 4;
+    e[c] = Math.round(n * 255), e[c + 1] = Math.round(a * 255), e[c + 2] = Math.round(o * 255), e[c + 3] = 255;
+  }
+  return e;
+}
+const tt = (
+  /* wgsl */
+  `
+struct U {
+  mvp : mat4x4<f32>,
+  imageSize : vec2<f32>,
+  origin : vec2<f32>,
+  params : vec4<f32>,   // selectedLabel, showSelectedOnly, opacity, lutSize
+};
+@group(0) @binding(0) var<uniform> u : U;
+@group(0) @binding(1) var samp : sampler;
+@group(0) @binding(2) var labelTex : texture_2d<f32>;
+@group(0) @binding(3) var lutSamp : sampler;
+@group(0) @binding(4) var lut : texture_2d<f32>;
+
+struct VSOut {
+  @builtin(position) position : vec4<f32>,
+  @location(0) uv : vec2<f32>,
+};
+
+@vertex
+fn vs(@builtin(vertex_index) vi : u32) -> VSOut {
+  var corners = array<vec2<f32>, 6>(
+    vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0),
+    vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0),
+  );
+  let c = corners[vi];
+  var out : VSOut;
+  out.position = u.mvp * vec4<f32>(u.origin + c * u.imageSize, 0.0, 1.0);
+  out.uv = c;
+  return out;
+}
+
+@fragment
+fn fs(in : VSOut) -> @location(0) vec4<f32> {
+  let raw = textureSample(labelTex, samp, in.uv).r;
+  let id = round(raw * 255.0);
+  let lutSize = u.params.w;
+  var rgba = textureSample(lut, lutSamp, vec2<f32>((id + 0.5) / lutSize, 0.5));
+  if (u.params.y > 0.5 && abs(id - u.params.x) > 0.5) { rgba.a = 0.0; } // show-selected-only
+  let a = rgba.a * u.params.z;
+  return vec4<f32>(rgba.rgb * a, a);
+}
+`
+), R = 256, me = 24, it = me * 4;
+class rt {
+  constructor(e, t, i) {
+    this.device = e, this.format = t, this.layer = i, this.module = e.createShaderModule({ code: tt }), this.uniformBuffer = e.createBuffer({
+      size: it,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }), this.texture = e.createTexture({
+      size: [i.width, i.height],
+      format: "r8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    }), e.queue.writeTexture(
+      { texture: this.texture },
+      i.data,
+      { bytesPerRow: i.width, rowsPerImage: i.height },
+      { width: i.width, height: i.height }
+    ), this.lutTexture = e.createTexture({
+      size: [R, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    }), e.queue.writeTexture(
+      { texture: this.lutTexture },
+      et(R),
+      { bytesPerRow: R * 4, rowsPerImage: 1 },
+      { width: R, height: 1 }
+    ), this.sampler = e.createSampler({
+      magFilter: "nearest",
+      minFilter: "nearest",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge"
+    }), this.currentBlend = i.blending, this.pipeline = this.buildPipeline(i.blending), this.bindGroup = e.createBindGroup({
+      layout: this.pipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer } },
+        { binding: 1, resource: this.sampler },
+        { binding: 2, resource: this.texture.createView() },
+        { binding: 3, resource: this.sampler },
+        { binding: 4, resource: this.lutTexture.createView() }
+      ]
+    });
+  }
+  ndisplay = 2;
+  module;
+  uniformBuffer;
+  scratch = new Float32Array(me);
+  texture;
+  lutTexture;
+  sampler;
+  bindGroup;
+  pipeline;
+  currentBlend;
+  buildPipeline(e) {
+    return this.device.createRenderPipeline({
+      layout: "auto",
+      vertex: { module: this.module, entryPoint: "vs" },
+      fragment: {
+        module: this.module,
+        entryPoint: "fs",
+        targets: [{ format: this.format, blend: C(e) }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+  }
+  sync() {
+    this.layer.blending !== this.currentBlend && (this.currentBlend = this.layer.blending, this.pipeline = this.buildPipeline(this.currentBlend));
+  }
+  draw(e, t) {
+    const i = P(
+      t.camera2d.viewProjection(t.vw, t.vh),
+      W(
+        this.layer.scale[0],
+        this.layer.scale[1],
+        this.layer.translate[0],
+        this.layer.translate[1]
+      )
+    ), s = this.scratch;
+    s.set(i, 0), s[16] = this.layer.width, s[17] = this.layer.height, s[18] = 0, s[19] = 0, s[20] = this.layer.selectedLabel, s[21] = this.layer.showSelectedOnly ? 1 : 0, s[22] = this.layer.opacity, s[23] = R, this.device.queue.writeBuffer(this.uniformBuffer, 0, s), e.setPipeline(this.pipeline), e.setBindGroup(0, this.bindGroup), e.draw(6);
+  }
+  dispose() {
+    this.texture.destroy(), this.lutTexture.destroy(), this.uniformBuffer.destroy();
+  }
+}
+const st = (
+  /* wgsl */
+  `
+struct U {
+  invMvp : mat4x4<f32>,
+  params : vec4<f32>,   // climLo, climHi (normalized 0..1), gamma, opacity
+  params2 : vec4<f32>,  // renderingCode (0=mip,1=translucent,2=iso), isoThreshold, steps, 0
+};
+@group(0) @binding(0) var<uniform> u : U;
+@group(0) @binding(1) var volSamp : sampler;
+@group(0) @binding(2) var volTex : texture_3d<f32>;
+@group(0) @binding(3) var lutSamp : sampler;
+@group(0) @binding(4) var lut : texture_2d<f32>;
+
+struct VSOut {
+  @builtin(position) position : vec4<f32>,
+  @location(0) ndc : vec2<f32>,
+};
+
+@vertex
+fn vs(@builtin(vertex_index) vi : u32) -> VSOut {
+  var corners = array<vec2<f32>, 6>(
+    vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),
+    vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),
+  );
+  let c = corners[vi];
+  var out : VSOut;
+  out.position = vec4<f32>(c, 0.0, 1.0);
+  out.ndc = c;
+  return out;
+}
+
+fn unproject(ndc : vec2<f32>, z : f32) -> vec3<f32> {
+  let p = u.invMvp * vec4<f32>(ndc, z, 1.0);
+  return p.xyz / p.w;
+}
+
+fn sampleWindowed(pos : vec3<f32>) -> f32 {
+  let s = textureSampleLevel(volTex, volSamp, pos, 0.0).r;
+  let lo = u.params.x;
+  let hi = u.params.y;
+  let t = clamp((s - lo) / max(hi - lo, 1e-6), 0.0, 1.0);
+  return pow(t, u.params.z);
+}
+
+fn lutColor(t : f32) -> vec3<f32> {
+  return textureSampleLevel(lut, lutSamp, vec2<f32>(clamp(t, 0.0, 1.0), 0.5), 0.0).rgb;
+}
+
+@fragment
+fn fs(in : VSOut) -> @location(0) vec4<f32> {
+  let ro = unproject(in.ndc, 0.0);          // near point, volume space
+  let rf = unproject(in.ndc, 1.0);          // far point
+  let rd = rf - ro;
+
+  // Intersect ray with the unit box [0,1]^3 (parameter t along rd).
+  let inv = 1.0 / rd;
+  let t0 = (vec3<f32>(0.0) - ro) * inv;
+  let t1 = (vec3<f32>(1.0) - ro) * inv;
+  let tmin = min(t0, t1);
+  let tmax = max(t0, t1);
+  let tNear = max(max(max(tmin.x, tmin.y), tmin.z), 0.0);
+  let tFar = min(min(tmax.x, tmax.y), 1.0 * min(tmax.z, 1.0e9));
+  if (tFar <= tNear) { discard; }
+
+  let steps = i32(u.params2.z);
+  let dt = (tFar - tNear) / f32(steps);
+  let mode = u.params2.x;
+  let opacity = u.params.w;
+
+  var maxT = 0.0;
+  var col = vec3<f32>(0.0);
+  var acc = 0.0;
+
+  for (var i = 0; i < steps; i = i + 1) {
+    let t = tNear + (f32(i) + 0.5) * dt;
+    let pos = ro + rd * t;
+    let w = sampleWindowed(pos);
+
+    if (mode < 0.5) {
+      // MIP
+      maxT = max(maxT, w);
+    } else if (mode < 1.5) {
+      // Front-to-back translucent DVR
+      let a = w * opacity;
+      let c = lutColor(w);
+      col = col + (1.0 - acc) * c * a;
+      acc = acc + (1.0 - acc) * a;
+      if (acc >= 0.99) { break; }
+    } else {
+      // Iso-surface: first crossing → gradient + lambert
+      if (w >= u.params2.y) {
+        let e = 1.0 / 128.0;
+        let gx = sampleWindowed(pos + vec3<f32>(e, 0.0, 0.0)) - sampleWindowed(pos - vec3<f32>(e, 0.0, 0.0));
+        let gy = sampleWindowed(pos + vec3<f32>(0.0, e, 0.0)) - sampleWindowed(pos - vec3<f32>(0.0, e, 0.0));
+        let gz = sampleWindowed(pos + vec3<f32>(0.0, 0.0, e)) - sampleWindowed(pos - vec3<f32>(0.0, 0.0, e));
+        let n = normalize(vec3<f32>(gx, gy, gz) + vec3<f32>(1e-5));
+        let lightDir = normalize(vec3<f32>(0.5, 0.7, 1.0));
+        let lambert = max(dot(n, lightDir), 0.0) * 0.8 + 0.2;
+        col = lutColor(w) * lambert;
+        acc = opacity;
+        break;
+      }
+    }
+  }
+
+  if (mode < 0.5) {
+    if (maxT <= 0.0) { discard; }
+    col = lutColor(maxT);
+    acc = opacity;
+  }
+  if (acc <= 0.0) { discard; }
+  return vec4<f32>(col * acc, acc);
+}
+`
+), fe = 24, nt = fe * 4, at = 192;
+class ot {
+  constructor(e, t, i) {
+    this.device = e, this.format = t, this.layer = i, this.module = e.createShaderModule({ code: st }), this.uniformBuffer = e.createBuffer({
+      size: nt,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }), this.texture = e.createTexture({
+      size: [i.width, i.height, i.depth],
+      dimension: "3d",
+      format: "r8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    }), e.queue.writeTexture(
+      { texture: this.texture },
+      i.data,
+      { bytesPerRow: i.width, rowsPerImage: i.height },
+      { width: i.width, height: i.height, depthOrArrayLayers: i.depth }
+    ), this.lutTexture = e.createTexture({
+      size: [b, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    }), this.writeLut(), this.lutVersion = i.colormapVersion, this.volSampler = e.createSampler({
+      magFilter: "linear",
+      minFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge",
+      addressModeW: "clamp-to-edge"
+    }), this.lutSampler = e.createSampler({ magFilter: "linear", minFilter: "linear" }), this.model = P(
+      Fe(i.width, i.height, i.depth),
+      Ie(-0.5, -0.5, -0.5)
+    ), this.currentBlend = i.blending, this.pipeline = this.buildPipeline(i.blending), this.bindGroup = this.buildBindGroup();
+  }
+  ndisplay = 3;
+  module;
+  uniformBuffer;
+  scratch = new Float32Array(fe);
+  texture;
+  lutTexture;
+  volSampler;
+  lutSampler;
+  model;
+  bindGroup;
+  pipeline;
+  currentBlend;
+  lutVersion;
+  buildPipeline(e) {
+    return this.device.createRenderPipeline({
+      layout: "auto",
+      vertex: { module: this.module, entryPoint: "vs" },
+      fragment: {
+        module: this.module,
+        entryPoint: "fs",
+        targets: [{ format: this.format, blend: C(e) }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+  }
+  buildBindGroup() {
+    return this.device.createBindGroup({
+      layout: this.pipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer } },
+        { binding: 1, resource: this.volSampler },
+        { binding: 2, resource: this.texture.createView() },
+        { binding: 3, resource: this.lutSampler },
+        { binding: 4, resource: this.lutTexture.createView() }
+      ]
+    });
+  }
+  writeLut() {
+    this.device.queue.writeTexture(
+      { texture: this.lutTexture },
+      H(this.layer.colormap, b),
+      { bytesPerRow: b * 4, rowsPerImage: 1 },
+      { width: b, height: 1 }
+    );
+  }
+  sync() {
+    this.layer.blending !== this.currentBlend && (this.currentBlend = this.layer.blending, this.pipeline = this.buildPipeline(this.currentBlend), this.bindGroup = this.buildBindGroup()), this.layer.colormapVersion !== this.lutVersion && (this.lutVersion = this.layer.colormapVersion, this.writeLut());
+  }
+  draw(e, t) {
+    const i = P(t.camera3d.viewProjection(t.vw, t.vh), this.model), s = Ve(i), n = this.scratch;
+    n.set(s, 0);
+    const [a, o] = this.layer.contrastLimits;
+    n[16] = a / 255, n[17] = o / 255, n[18] = this.layer.gamma, n[19] = this.layer.opacity, n[20] = this.layer.renderingCode(), n[21] = this.layer.isoThreshold, n[22] = at, n[23] = 0, this.device.queue.writeBuffer(this.uniformBuffer, 0, n), e.setPipeline(this.pipeline), e.setBindGroup(0, this.bindGroup), e.draw(6);
+  }
+  dispose() {
+    this.texture.destroy(), this.lutTexture.destroy(), this.uniformBuffer.destroy();
+  }
+}
+class lt {
+  constructor(e, t, i = {
+    float32Filterable: !1,
+    onNeedsRedraw: () => {
+    }
+  }) {
+    this.device = e, this.target = t, this.options = i;
+  }
+  visuals = /* @__PURE__ */ new Map();
+  addLayer(e) {
+    if (this.visuals.has(e.id)) return;
+    const t = this.createVisual(e);
+    t && this.visuals.set(e.id, t);
+  }
+  createVisual(e) {
+    const t = this.target.format;
+    return e instanceof ie ? e.source.kind === "tiled" ? new He(this.device, t, e, {
+      float32Filterable: this.options.float32Filterable,
+      onNeedsRedraw: this.options.onNeedsRedraw
+    }) : new De(this.device, t, e, {
+      float32Filterable: this.options.float32Filterable
+    }) : e instanceof re ? new Je(this.device, t, e) : e instanceof se ? new rt(this.device, t, e) : e instanceof ne ? new ot(this.device, t, e) : null;
+  }
+  removeLayer(e) {
+    this.visuals.get(e)?.dispose(), this.visuals.delete(e);
+  }
+  has(e) {
+    return this.visuals.has(e);
+  }
+  /** Draw the given layers (in order) into the swapchain for the current cameras/dims. */
+  render(e, t, i = { r: 0.07, g: 0.07, b: 0.09, a: 1 }) {
+    const s = this.target.canvas.clientWidth || this.target.canvas.width, n = this.target.canvas.clientHeight || this.target.canvas.height;
+    this.renderInto(this.target.view, e, t, s, n, i);
+  }
+  /**
+   * Draw into an arbitrary color-attachment view. `vw`/`vh` are the CSS-pixel projection size
+   * (resolution-independent); the attachment may be a different device-pixel size. Only
+   * visuals whose `ndisplay` matches `inputs.ndisplay` are drawn. Used for both the swapchain
+   * and offscreen readback.
+   */
+  renderInto(e, t, i, s, n, a = { r: 0.07, g: 0.07, b: 0.09, a: 1 }) {
+    const o = {
+      camera2d: t.camera2d,
+      camera3d: t.camera3d,
+      vw: s,
+      vh: n,
+      z: t.z,
+      ndisplay: t.ndisplay
+    }, c = this.device.createCommandEncoder(), l = c.beginRenderPass({
+      colorAttachments: [{ view: e, clearValue: a, loadOp: "clear", storeOp: "store" }]
+    });
+    for (const h of i) {
+      if (!h.visible) continue;
+      const u = this.visuals.get(h.id);
+      !u || u.ndisplay !== o.ndisplay || (u.sync(), u.draw(l, o));
+    }
+    l.end(), this.device.queue.submit([c.finish()]);
+  }
+  dispose() {
+    for (const e of this.visuals.values()) e.dispose();
+    this.visuals.clear();
+  }
+}
+class ct {
+  _items = [];
+  added = new S();
+  removed = new S();
+  /** Fires on any structural change (add/remove/move/clear). */
+  changed = new S();
+  get items() {
+    return this._items;
+  }
+  get length() {
+    return this._items.length;
+  }
+  add(e) {
+    return this._items.push(e), this.added.emit(e), this.changed.emit(this), e;
+  }
+  remove(e) {
+    const t = this._items.indexOf(e);
+    return t < 0 ? !1 : (this._items.splice(t, 1), this.removed.emit(e), this.changed.emit(this), !0);
+  }
+  clear() {
+    const e = this._items.splice(0, this._items.length);
+    for (const t of e) this.removed.emit(t);
+    this.changed.emit(this);
+  }
+  [Symbol.iterator]() {
+    return this._items[Symbol.iterator]();
+  }
+}
+class ht {
+  changed = new S();
+  _ndisplay = 2;
+  _depth = 1;
+  _z = 0;
+  get ndisplay() {
+    return this._ndisplay;
+  }
+  set ndisplay(e) {
+    this._ndisplay = e, this.changed.emit(this);
+  }
+  /** Number of z-slices. Setting it re-clamps `z`. */
+  get depth() {
+    return this._depth;
+  }
+  set depth(e) {
+    this._depth = Math.max(1, Math.floor(e)), this._z = ee(this._z, 0, this._depth - 1), this.changed.emit(this);
+  }
+  /** Current z-slice index, clamped to `[0, depth-1]`. */
+  get z() {
+    return this._z;
+  }
+  set z(e) {
+    const t = ee(Math.round(e), 0, this._depth - 1);
+    t !== this._z && (this._z = t, this.changed.emit(this));
+  }
+}
+function ee(r, e, t) {
+  return r < e ? e : r > t ? t : r;
+}
+class dt {
+  changed = new S();
+  _center = [0, 0];
+  _zoom = 1;
+  get center() {
+    return [this._center[0], this._center[1]];
+  }
+  set center(e) {
+    this._center = [e[0], e[1]], this.changed.emit(this);
+  }
+  get zoom() {
+    return this._zoom;
+  }
+  set zoom(e) {
+    this._zoom = e > 0 ? e : this._zoom, this.changed.emit(this);
+  }
+  /** Set center + zoom in one mutation (single change event). */
+  set(e, t) {
+    this._center = [e[0], e[1]], t > 0 && (this._zoom = t), this.changed.emit(this);
+  }
+  /** World→clip view-projection matrix for a `vw`×`vh` viewport. */
+  viewProjection(e, t) {
+    return ze(this._center, this._zoom, e, t);
+  }
+  /**
+   * Frame a `width`×`height` region centered in a `vw`×`vh` viewport (with a little margin),
+   * e.g. to fit a freshly loaded image. No-op for degenerate inputs.
+   */
+  fit(e, t, i, s, n = 0.95) {
+    if (e <= 0 || t <= 0 || i <= 0 || s <= 0) return;
+    const a = Math.min(i / e, s / t) * n;
+    this.set([e / 2, t / 2], a);
+  }
+}
+const te = Math.PI / 2, V = 1e-3;
+class ut {
+  changed = new S();
+  azimuth = 0.7;
+  elevation = 0.5;
+  fov = 45 * Math.PI / 180;
+  _distance = 3;
+  _target = [0, 0, 0];
+  get distance() {
+    return this._distance;
+  }
+  set distance(e) {
+    this._distance = Math.max(V, e), this.changed.emit(this);
+  }
+  get target() {
+    return [...this._target];
+  }
+  set target(e) {
+    this._target = [e[0], e[1], e[2]], this.changed.emit(this);
+  }
+  /** Rotate the orbit by deltas (radians); elevation is clamped to avoid gimbal flip. */
+  orbit(e, t) {
+    this.azimuth += e, this.elevation = mt(this.elevation + t, -te + V, te - V), this.changed.emit(this);
+  }
+  zoomBy(e) {
+    this.distance = this._distance * e;
+  }
+  /** Eye position in world space. */
+  eye() {
+    const e = Math.cos(this.elevation);
+    return [
+      this._target[0] + this._distance * e * Math.sin(this.azimuth),
+      this._target[1] + this._distance * Math.sin(this.elevation),
+      this._target[2] + this._distance * e * Math.cos(this.azimuth)
+    ];
+  }
+  /** Perspective view-projection for a `vw`×`vh` viewport. */
+  viewProjection(e, t) {
+    const i = t > 0 ? e / t : 1, s = Math.max(V, this._distance * 0.05), n = this._distance * 4 + 1, a = Re(this.fov, i, s, n), o = Ce(this.eye(), this._target, [0, 1, 0]);
+    return P(a, o);
+  }
+  /** Frame a `[w,h,d]` volume centered at the origin. */
+  frame(e, t, i) {
+    this._target = [0, 0, 0], this.distance = Math.max(e, t, i) * 1.8;
+  }
+}
+function mt(r, e, t) {
+  return r < e ? e : r > t ? t : r;
+}
+class ft {
+  layers = new ct();
+  camera = new dt();
+  camera3d = new ut();
+  dims = new ht();
+  changed = new S();
+  layerDisposers = /* @__PURE__ */ new Map();
+  constructor() {
+    this.layers.changed.connect(() => this.changed.emit(this)), this.camera.changed.connect(() => this.changed.emit(this)), this.camera3d.changed.connect(() => this.changed.emit(this)), this.dims.changed.connect(() => this.changed.emit(this)), this.layers.added.connect((e) => {
+      this.layerDisposers.set(
+        e,
+        e.changed.connect(() => this.changed.emit(this))
+      );
+    }), this.layers.removed.connect((e) => {
+      this.layerDisposers.get(e)?.(), this.layerDisposers.delete(e);
+    });
+  }
+}
+function pt(r, e) {
+  let t = !1, i = 0, s = 0;
+  const n = (l) => {
+    t = !0, i = l.clientX, s = l.clientY, r.setPointerCapture(l.pointerId);
+  }, a = (l) => {
+    if (!t) return;
+    const h = l.clientX - i, u = l.clientY - s;
+    i = l.clientX, s = l.clientY;
+    const { zoom: f } = e, [m, d] = e.center;
+    e.center = [m - h / f, d - u / f];
+  }, o = (l) => {
+    t = !1, r.hasPointerCapture(l.pointerId) && r.releasePointerCapture(l.pointerId);
+  }, c = (l) => {
+    l.preventDefault();
+    const h = r.getBoundingClientRect(), u = l.clientX - h.left - h.width / 2, f = l.clientY - h.top - h.height / 2, { zoom: m } = e, [d, _] = e.center, x = d + u / m, v = _ + f / m, y = Math.exp(-l.deltaY * 15e-4), w = m * y;
+    e.set([x - u / w, v - f / w], w);
+  };
+  return r.addEventListener("pointerdown", n), r.addEventListener("pointermove", a), r.addEventListener("pointerup", o), r.addEventListener("pointercancel", o), r.addEventListener("wheel", c, { passive: !1 }), () => {
+    r.removeEventListener("pointerdown", n), r.removeEventListener("pointermove", a), r.removeEventListener("pointerup", o), r.removeEventListener("pointercancel", o), r.removeEventListener("wheel", c);
+  };
+}
+function gt(r, e) {
+  let t = !1, i = 0, s = 0;
+  const n = (l) => {
+    t = !0, i = l.clientX, s = l.clientY, r.setPointerCapture(l.pointerId);
+  }, a = (l) => {
+    if (!t) return;
+    const h = l.clientX - i, u = l.clientY - s;
+    i = l.clientX, s = l.clientY, e.orbit(-h * 0.01, -u * 0.01);
+  }, o = (l) => {
+    t = !1, r.hasPointerCapture(l.pointerId) && r.releasePointerCapture(l.pointerId);
+  }, c = (l) => {
+    l.preventDefault(), e.zoomBy(Math.exp(l.deltaY * 15e-4));
+  };
+  return r.addEventListener("pointerdown", n), r.addEventListener("pointermove", a), r.addEventListener("pointerup", o), r.addEventListener("pointercancel", o), r.addEventListener("wheel", c, { passive: !1 }), () => {
+    r.removeEventListener("pointerdown", n), r.removeEventListener("pointermove", a), r.removeEventListener("pointerup", o), r.removeEventListener("pointercancel", o), r.removeEventListener("wheel", c);
+  };
+}
+function bt(r) {
+  return Math.ceil(r / 256) * 256;
+}
+async function vt(r, e, t, i) {
+  const s = t * 4, n = bt(s), a = r.createBuffer({
+    size: n * i,
+    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+  }), o = r.createCommandEncoder();
+  o.copyTextureToBuffer(
+    { texture: e },
+    { buffer: a, bytesPerRow: n, rowsPerImage: i },
+    { width: t, height: i }
+  ), r.queue.submit([o.finish()]), await a.mapAsync(GPUMapMode.READ);
+  const c = new Uint8Array(a.getMappedRange()), l = new Uint8ClampedArray(s * i);
+  for (let h = 0; h < i; h++) {
+    const u = h * n;
+    l.set(c.subarray(u, u + s), h * s);
+  }
+  return a.unmap(), a.destroy(), l;
+}
+function yt(r, e, t) {
+  return 0.299 * r + 0.587 * e + 0.114 * t;
+}
+function wt(r, e) {
+  if (e < 1) throw new Error("histogram bins must be >= 1.");
+  const t = new Uint32Array(e), i = e / 256;
+  for (let s = 0; s + 3 < r.length; s += 4) {
+    const n = yt(r[s], r[s + 1], r[s + 2]);
+    let a = Math.floor(n * i);
+    a >= e ? a = e - 1 : a < 0 && (a = 0), t[a]++;
+  }
+  return { counts: t, bins: e, min: 0, max: 255 };
+}
+class _t {
+  ready;
+  model = new ft();
+  canvas;
+  background;
+  useControls;
+  ctx;
+  target;
+  renderer;
+  detachControls;
+  lastControlsNdisplay;
+  frameScheduled = !1;
+  firstImageFitted = !1;
+  constructor(e) {
+    this.canvas = e.canvas, this.background = e.background ?? { r: 0.07, g: 0.07, b: 0.09, a: 1 }, this.useControls = e.controls ?? !0, this.ready = this.init();
+  }
+  get camera() {
+    return this.model.camera;
+  }
+  get layers() {
+    return this.model.layers;
+  }
+  get dims() {
+    return this.model.dims;
+  }
+  get camera3d() {
+    return this.model.camera3d;
+  }
+  get device() {
+    return this.ctx?.device;
+  }
+  async init() {
+    this.ctx = await pe(), this.target = new be(this.canvas, this.ctx.device), this.target.syncSize(), this.renderer = new lt(this.ctx.device, this.target, {
+      float32Filterable: this.ctx.features.float32Filterable,
+      onNeedsRedraw: () => this.requestRender()
+    });
+    for (const e of this.model.layers)
+      this.renderer.addLayer(e);
+    this.model.layers.added.connect((e) => {
+      this.renderer?.addLayer(e), this.requestRender();
+    }), this.model.layers.removed.connect((e) => {
+      this.renderer?.removeLayer(e.id), this.requestRender();
+    }), this.model.changed.connect(() => this.requestRender()), this.useControls && (this.installControls(), this.model.dims.changed.connect(() => this.installControls())), this.requestRender();
+  }
+  /** Attach the 2D pan/zoom or 3D orbit controls to match `dims.ndisplay`. */
+  installControls() {
+    const e = this.model.dims.ndisplay;
+    e !== this.lastControlsNdisplay && (this.lastControlsNdisplay = e, this.detachControls?.(), this.detachControls = e === 3 ? gt(this.canvas, this.model.camera3d) : pt(this.canvas, this.model.camera));
+  }
+  renderInputs() {
+    return {
+      camera2d: this.model.camera,
+      camera3d: this.model.camera3d,
+      ndisplay: this.model.dims.ndisplay,
+      z: this.model.dims.z
+    };
+  }
+  /** Add an image layer. Accepts typed pixels or a decoded image (see {@link ImageInput}). */
+  addImage(e, t = {}) {
+    const i = Me(e), s = new ie(i, t);
+    return this.model.layers.add(s), this.model.dims.depth = Math.max(this.model.dims.depth, Le(i)), this.maybeFitFirst(i.width, i.height), s;
+  }
+  /** Add a points (scatter) layer. Positions are `[x, y]` pairs in data coordinates. */
+  addPoints(e, t = {}) {
+    const i = new re(e, t);
+    return this.model.layers.add(i), i;
+  }
+  /** Add a labels (segmentation) layer from an 8-bit id image. */
+  addLabels(e, t, i, s = {}) {
+    const n = new se(e, t, i, s);
+    return this.model.layers.add(n), this.maybeFitFirst(t, i), n;
+  }
+  /**
+   * Add a 3D volume layer (uint8 scalar field, x-fastest). Switches the viewer to 3D
+   * (`dims.ndisplay = 3`) and frames the orbit camera on the volume.
+   */
+  addVolume(e, t, i, s, n = {}) {
+    const a = new ne(e, t, i, s, n);
+    return this.model.layers.add(a), this.model.camera3d.frame(t, i, s), this.model.dims.ndisplay = 3, a;
+  }
+  /** Convert canvas client coordinates to data/world coordinates (for picking). */
+  canvasToWorld(e, t) {
+    const i = this.canvas.getBoundingClientRect(), s = e - i.left - i.width / 2, n = t - i.top - i.height / 2, { zoom: a } = this.model.camera, [o, c] = this.model.camera.center;
+    return [o + s / a, c + n / a];
+  }
+  maybeFitFirst(e, t) {
+    if (this.firstImageFitted) return;
+    const i = this.canvas.clientWidth, s = this.canvas.clientHeight;
+    i > 0 && s > 0 && (this.model.camera.fit(e, t, i, s), this.firstImageFitted = !0);
+  }
+  /** Request a coalesced redraw on the next animation frame. No-op until {@link ready}. */
+  requestRender() {
+    this.frameScheduled || !this.renderer || !this.target || (this.frameScheduled = !0, requestAnimationFrame(() => {
+      this.frameScheduled = !1, this.renderFrame();
+    }));
+  }
+  renderFrame() {
+    !this.renderer || !this.target || (this.target.syncSize(), this.renderer.render(this.renderInputs(), this.allLayers(), this.background));
+  }
+  allLayers() {
+    return this.model.layers.items;
+  }
+  /**
+   * Read back the composited displayed pixels as RGBA8 (top row first), by rendering the
+   * current scene into an offscreen texture at the canvas's device-pixel size.
+   */
+  async readDisplayedPixels() {
+    if (!this.renderer || !this.target || !this.ctx)
+      throw new Error("Viewer is not ready — await `viewer.ready` first.");
+    const e = Math.max(1, this.canvas.width), t = Math.max(1, this.canvas.height), i = this.canvas.clientWidth || e, s = this.canvas.clientHeight || t, n = this.ctx.device.createTexture({
+      size: [e, t],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
+    });
+    this.renderer.renderInto(
+      n.createView(),
+      this.renderInputs(),
+      this.allLayers(),
+      i,
+      s,
+      this.background
+    );
+    const a = await vt(this.ctx.device, n, e, t);
+    return n.destroy(), { width: e, height: t, channels: 4, data: a };
+  }
+  /** Composite the displayed image to a PNG `Blob`. */
+  async screenshot() {
+    const e = await this.readDisplayedPixels();
+    if (typeof OffscreenCanvas < "u") {
+      const n = new OffscreenCanvas(e.width, e.height), a = n.getContext("2d"), o = a.createImageData(e.width, e.height);
+      return o.data.set(e.data), a.putImageData(o, 0, 0), n.convertToBlob({ type: "image/png" });
+    }
+    const t = document.createElement("canvas");
+    t.width = e.width, t.height = e.height;
+    const i = t.getContext("2d"), s = i.createImageData(e.width, e.height);
+    return s.data.set(e.data), i.putImageData(s, 0, 0), new Promise((n, a) => {
+      t.toBlob((o) => o ? n(o) : a(new Error("toBlob returned null")), "image/png");
+    });
+  }
+  /** Luminance histogram (over `bins` bins) of the currently displayed composite. */
+  async histogram(e = 256) {
+    const t = await this.readDisplayedPixels();
+    return wt(t.data, e);
+  }
+  dispose() {
+    this.detachControls?.(), this.renderer?.dispose(), this.ctx?.device.destroy(), this.ctx = void 0, this.target = void 0, this.renderer = void 0;
+  }
+}
+function Tt(r, e, t, i) {
+  let s = -1, n = 1 / 0;
+  const a = r.length >> 1;
+  for (let o = 0; o < a; o++) {
+    const c = r[o * 2] - t, l = r[o * 2 + 1] - i, h = c * c + l * l, u = e(o) / 2;
+    h <= u * u && h < n && (n = h, s = o);
+  }
+  return s;
+}
+function xt(r, e, t, i, s) {
+  const n = Math.max(t - e, 1e-8);
+  let a = z((r - e) / n);
+  return s && (a = 1 - a), Math.pow(a, i);
+}
+function St(r, e) {
+  return e.colormap.sample(
+    xt(r, e.climLo, e.climHi, e.gamma, e.invert)
+  );
+}
+function Pt(r) {
+  const e = [0, 0, 0];
+  for (const t of r)
+    e[0] += t[0], e[1] += t[1], e[2] += t[2];
+  return [z(e[0]), z(e[1]), z(e[2])];
+}
+function z(r) {
+  return r < 0 ? 0 : r > 1 ? 1 : r;
+}
+const Lt = "0.0.0";
+export {
+  _e as BLUE,
+  dt as Camera,
+  ut as Camera3D,
+  N as Colormap,
+  ht as Dims,
+  O as GRAY,
+  xe as GREEN,
+  ie as ImageLayer,
+  b as LUT_SIZE,
+  se as LabelsLayer,
+  D as Layer,
+  ct as LayerList,
+  $e as LruCache,
+  Se as MAGMA,
+  K as NAMED_COLORMAPS,
+  re as PointsLayer,
+  we as RED,
+  Lt as VERSION,
+  Te as VIRIDIS,
+  _t as Viewer,
+  ft as ViewerModel,
+  ne as VolumeLayer,
+  $ as WebGPUUnsupportedError,
+  pe as acquireDevice,
+  Pt as additiveComposite,
+  et as buildLabelLut,
+  H as buildLut,
+  Pe as channelsOf,
+  Be as defaultContrastLimits,
+  Le as depthOf,
+  wt as histogramRGBA,
+  Ue as isGrayscale,
+  Ne as levelDims,
+  he as levelScale,
+  yt as luminance8,
+  St as mapScalar,
+  Tt as nearestPointIndex,
+  A as resolveColormap,
+  qe as selectLevel,
+  Ye as tileGrid,
+  Me as toTextureSource,
+  Q as visibleTiles,
+  xt as windowGamma,
+  We as worldViewport
+};
+//# sourceMappingURL=napari-js.js.map