napari-js 0.1.0

package/dist/viewer.d.ts

@@ -0,0 +1,76 @@
+import { ViewerModel } from './scene/viewer-model';
+import { Camera } from './camera/camera';
+import { LayerList } from './scene/layer-list';
+import { ImageLayer, ImageLayerOptions } from './layers/image-layer';
+import { PointsLayer, PointsLayerOptions } from './layers/points-layer';
+import { LabelsLayer, LabelsLayerOptions } from './layers/labels-layer';
+import { VolumeLayer, VolumeLayerOptions } from './layers/volume-layer';
+import { ImageInput } from './io/texture-source';
+import { Dims } from './scene/dims';
+import { Camera3D } from './camera/camera3d';
+import { PixelData } from './engine/readback';
+import { Histogram } from './color/histogram';
+export interface ViewerOptions {
+    canvas: HTMLCanvasElement;
+    /** Background clear color (RGBA 0..1). */
+    background?: GPUColor;
+    /** Attach pointer/wheel pan-zoom controls (default true). */
+    controls?: boolean;
+}
+/**
+ * The napari-js viewer: a headless {@link ViewerModel} (layers + camera) plus a WebGPU
+ * renderer. Construction kicks off async device acquisition — await {@link ready} before
+ * the first render. Adding layers / mutating display props schedules a coalesced redraw.
+ */
+export declare class Viewer {
+    readonly ready: Promise<void>;
+    readonly model: ViewerModel;
+    private readonly canvas;
+    private readonly background;
+    private readonly useControls;
+    private ctx?;
+    private target?;
+    private renderer?;
+    private detachControls?;
+    private lastControlsNdisplay?;
+    private frameScheduled;
+    private firstImageFitted;
+    constructor(options: ViewerOptions);
+    get camera(): Camera;
+    get layers(): LayerList;
+    get dims(): Dims;
+    get camera3d(): Camera3D;
+    get device(): GPUDevice | undefined;
+    private init;
+    /** Attach the 2D pan/zoom or 3D orbit controls to match `dims.ndisplay`. */
+    private installControls;
+    private renderInputs;
+    /** Add an image layer. Accepts typed pixels or a decoded image (see {@link ImageInput}). */
+    addImage(input: ImageInput, opts?: ImageLayerOptions): ImageLayer;
+    /** Add a points (scatter) layer. Positions are `[x, y]` pairs in data coordinates. */
+    addPoints(positions: Float32Array | number[][], opts?: PointsLayerOptions): PointsLayer;
+    /** Add a labels (segmentation) layer from an 8-bit id image. */
+    addLabels(data: Uint8Array, width: number, height: number, opts?: LabelsLayerOptions): LabelsLayer;
+    /**
+     * 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(data: Uint8Array, width: number, height: number, depth: number, opts?: VolumeLayerOptions): VolumeLayer;
+    /** Convert canvas client coordinates to data/world coordinates (for picking). */
+    canvasToWorld(clientX: number, clientY: number): [number, number];
+    private maybeFitFirst;
+    /** Request a coalesced redraw on the next animation frame. No-op until {@link ready}. */
+    requestRender(): void;
+    private renderFrame;
+    private allLayers;
+    /**
+     * 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.
+     */
+    readDisplayedPixels(): Promise<PixelData>;
+    /** Composite the displayed image to a PNG `Blob`. */
+    screenshot(): Promise<Blob>;
+    /** Luminance histogram (over `bins` bins) of the currently displayed composite. */
+    histogram(bins?: number): Promise<Histogram>;
+    dispose(): void;
+}

package/dist/visuals/blend.d.ts

@@ -0,0 +1,6 @@
+import { BlendMode } from '../layers/layer';
+/**
+ * Map a {@link BlendMode} to a WebGPU blend state for premultiplied-alpha output.
+ * `opaque` returns `undefined` (blending disabled).
+ */
+export declare function blendStateFor(mode: BlendMode): GPUBlendState | undefined;

package/dist/visuals/format-plan.d.ts

@@ -0,0 +1,19 @@
+import { PixelDtype } from '../io/texture-source';
+/** How a scalar/RGBA source maps onto a GPU texture (shared by single-image and tiled paths). */
+export interface FormatPlan {
+    format: GPUTextureFormat;
+    bytesPerPixel: number;
+    /** Whether the texture can be linearly filtered (drives sampler + bind-group layout). */
+    filterable: boolean;
+    /** Factor applied to contrast limits so they match the shader's sample space. */
+    sampleScale: number;
+    isRgba: boolean;
+}
+/**
+ * Pick the texture plan for given channels/dtype. uint8 scalar → `r8unorm`; RGBA(uint8) →
+ * `rgba8unorm` (both normalized, so clim scales by 1/255); uint16/float32 scalar → `r32float`
+ * with native-unit windowing (clim scale 1), filterable only when `float32Filterable`.
+ */
+export declare function formatPlanFor(channels: 1 | 4, dtype: PixelDtype, float32Filterable: boolean): FormatPlan;
+/** Convert tile/image pixels to the upload representation for `format` (uint16 → float32). */
+export declare function toUploadData(data: Uint8Array | Uint16Array | Float32Array, format: GPUTextureFormat): Uint8Array | Float32Array;

package/dist/visuals/image-colormap-shader.d.ts

@@ -0,0 +1 @@
+export declare const IMAGE_COLORMAP_SHADER = "\nstruct U {\n  mvp : mat4x4<f32>,\n  imageSize : vec2<f32>,\n  origin : vec2<f32>,   // data-space origin of this quad (0 for a full image; tile origin for tiles)\n  params : vec4<f32>,   // climLo, climHi, gamma, opacity   (clim already normalized to sample space)\n  flags : vec4<f32>,    // isRgba, invert, 0, 0\n};\n\n@group(0) @binding(0) var<uniform> u : U;\n@group(0) @binding(1) var srcSamp : sampler;\n@group(0) @binding(2) var srcTex : texture_2d<f32>;\n@group(0) @binding(3) var lutSamp : sampler;\n@group(0) @binding(4) var lutTex : texture_2d<f32>;\n\nstruct VSOut {\n  @builtin(position) position : vec4<f32>,\n  @location(0) uv : vec2<f32>,\n};\n\n@vertex\nfn vs(@builtin(vertex_index) vi : u32) -> VSOut {\n  var corners = array<vec2<f32>, 6>(\n    vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0),\n    vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0),\n  );\n  let c = corners[vi];\n  var out : VSOut;\n  out.position = u.mvp * vec4<f32>(u.origin + c * u.imageSize, 0.0, 1.0);\n  out.uv = c;\n  return out;\n}\n\n@fragment\nfn fs(in : VSOut) -> @location(0) vec4<f32> {\n  let raw = textureSample(srcTex, srcSamp, in.uv);\n  let climLo = u.params.x;\n  let climHi = u.params.y;\n  let gamma = u.params.z;\n  let opacity = u.params.w;\n  let denom = max(climHi - climLo, 1e-8);\n\n  // Scalar path: window \u2192 invert \u2192 gamma \u2192 LUT.\n  var t = clamp((raw.r - climLo) / denom, 0.0, 1.0);\n  if (u.flags.y > 0.5) { t = 1.0 - t; }\n  t = pow(t, gamma);\n  let mapped = textureSample(lutTex, lutSamp, vec2<f32>(t, 0.5)).rgb;\n\n  // RGB path: per-channel window \u2192 gamma.\n  var direct = clamp((raw.rgb - vec3<f32>(climLo)) / vec3<f32>(denom), vec3<f32>(0.0), vec3<f32>(1.0));\n  direct = pow(direct, vec3<f32>(gamma));\n\n  let isRgba = u.flags.x > 0.5;\n  let rgb = select(mapped, direct, isRgba);\n  let a = select(opacity, raw.a * opacity, isRgba);\n  return vec4<f32>(rgb * a, a);\n}\n";

package/dist/visuals/image-visual.d.ts

@@ -0,0 +1,45 @@
+import { ImageLayer } from '../layers/image-layer';
+import { LayerVisual, RenderView } from './layer-visual';
+/**
+ * Binds one {@link ImageLayer} to a WebGPU pipeline: uploads the source texture and colormap
+ * LUT, and draws the layer each frame with its current display uniforms (the napari
+ * `Vispy*Layer` wrapper analog). Supports uint8 (r8unorm/rgba8unorm) and uint16/float32
+ * (r32float, native-precision windowing). Uses an explicit bind-group layout so unfilterable
+ * float textures render correctly when `float32-filterable` is unavailable.
+ */
+export declare class ImageVisual implements LayerVisual {
+    private readonly device;
+    private readonly format;
+    private readonly layer;
+    readonly ndisplay: 2 | 3;
+    private readonly module;
+    private readonly uniformBuffer;
+    private readonly scratch;
+    private readonly bindGroupLayout;
+    private readonly pipelineLayout;
+    private readonly plan;
+    private texture;
+    private lutTexture;
+    private srcSampler;
+    private lutSampler;
+    private pipeline;
+    private bindGroup;
+    private currentBlend;
+    private currentInterp;
+    private lutVersion;
+    constructor(device: GPUDevice, format: GPUTextureFormat, layer: ImageLayer, opts?: {
+        float32Filterable: boolean;
+    });
+    private buildBindGroupLayout;
+    private uploadTexture;
+    private createLutTexture;
+    private writeLut;
+    private createSrcSampler;
+    private buildPipeline;
+    private buildBindGroup;
+    /** Reconcile GPU state with the layer's current properties (cheap; called before draw). */
+    sync(): void;
+    /** Encode a draw of this layer for the current view. */
+    draw(pass: GPURenderPassEncoder, view: RenderView): void;
+    dispose(): void;
+}

package/dist/visuals/labels-shader.d.ts

@@ -0,0 +1 @@
+export declare const LABELS_SHADER = "\nstruct U {\n  mvp : mat4x4<f32>,\n  imageSize : vec2<f32>,\n  origin : vec2<f32>,\n  params : vec4<f32>,   // selectedLabel, showSelectedOnly, opacity, lutSize\n};\n@group(0) @binding(0) var<uniform> u : U;\n@group(0) @binding(1) var samp : sampler;\n@group(0) @binding(2) var labelTex : texture_2d<f32>;\n@group(0) @binding(3) var lutSamp : sampler;\n@group(0) @binding(4) var lut : texture_2d<f32>;\n\nstruct VSOut {\n  @builtin(position) position : vec4<f32>,\n  @location(0) uv : vec2<f32>,\n};\n\n@vertex\nfn vs(@builtin(vertex_index) vi : u32) -> VSOut {\n  var corners = array<vec2<f32>, 6>(\n    vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0),\n    vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0),\n  );\n  let c = corners[vi];\n  var out : VSOut;\n  out.position = u.mvp * vec4<f32>(u.origin + c * u.imageSize, 0.0, 1.0);\n  out.uv = c;\n  return out;\n}\n\n@fragment\nfn fs(in : VSOut) -> @location(0) vec4<f32> {\n  let raw = textureSample(labelTex, samp, in.uv).r;\n  let id = round(raw * 255.0);\n  let lutSize = u.params.w;\n  var rgba = textureSample(lut, lutSamp, vec2<f32>((id + 0.5) / lutSize, 0.5));\n  if (u.params.y > 0.5 && abs(id - u.params.x) > 0.5) { rgba.a = 0.0; } // show-selected-only\n  let a = rgba.a * u.params.z;\n  return vec4<f32>(rgba.rgb * a, a);\n}\n";

package/dist/visuals/labels-visual.d.ts

@@ -0,0 +1,23 @@
+import { LabelsLayer } from '../layers/labels-layer';
+import { LayerVisual, RenderView } from './layer-visual';
+/** Renders a {@link LabelsLayer}: nearest-sampled id texture + cyclic palette LUT. */
+export declare class LabelsVisual implements LayerVisual {
+    private readonly device;
+    private readonly format;
+    private readonly layer;
+    readonly ndisplay: 2 | 3;
+    private readonly module;
+    private readonly uniformBuffer;
+    private readonly scratch;
+    private readonly texture;
+    private readonly lutTexture;
+    private readonly sampler;
+    private readonly bindGroup;
+    private pipeline;
+    private currentBlend;
+    constructor(device: GPUDevice, format: GPUTextureFormat, layer: LabelsLayer);
+    private buildPipeline;
+    sync(): void;
+    draw(pass: GPURenderPassEncoder, view: RenderView): void;
+    dispose(): void;
+}

package/dist/visuals/layer-visual.d.ts

@@ -0,0 +1,23 @@
+import { Camera } from '../camera/camera';
+import { Camera3D } from '../camera/camera3d';
+/** Per-frame view state handed to every visual. 2D visuals use `camera2d`; volume uses `camera3d`. */
+export interface RenderView {
+    camera2d: Camera;
+    camera3d: Camera3D;
+    /** CSS-pixel projection size. */
+    vw: number;
+    vh: number;
+    /** Current z-slice (2D stacks). */
+    z: number;
+    ndisplay: 2 | 3;
+}
+/** A GPU renderer for one layer. The renderer draws only visuals whose `ndisplay` matches. */
+export interface LayerVisual {
+    /** Display dimensionality this visual renders in (2 for image/points/labels, 3 for volume). */
+    readonly ndisplay: 2 | 3;
+    /** Reconcile GPU state with the layer's current display properties (cheap; pre-draw). */
+    sync(): void;
+    /** Encode draws for the given view. */
+    draw(pass: GPURenderPassEncoder, view: RenderView): void;
+    dispose(): void;
+}

package/dist/visuals/points-shader.d.ts

@@ -0,0 +1 @@
+export declare const POINTS_SHADER = "\nstruct U {\n  mvp : mat4x4<f32>,\n  params : vec4<f32>,   // symbolCode (0=disc,1=ring,2=square), opacity, 0, 0\n};\n@group(0) @binding(0) var<uniform> u : U;\n\nstruct VSOut {\n  @builtin(position) position : vec4<f32>,\n  @location(0) local : vec2<f32>,\n  @location(1) face : vec4<f32>,\n  @location(2) border : vec4<f32>,\n  @location(3) borderFrac : f32,\n};\n\n@vertex\nfn vs(\n  @builtin(vertex_index) vi : u32,\n  @location(0) pos : vec2<f32>,\n  @location(1) size : f32,\n  @location(2) face : vec4<f32>,\n  @location(3) border : vec4<f32>,\n  @location(4) borderWidth : f32,\n) -> VSOut {\n  var corners = array<vec2<f32>, 6>(\n    vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),\n    vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),\n  );\n  let c = corners[vi];\n  let world = pos + c * (size * 0.5);\n  var out : VSOut;\n  out.position = u.mvp * vec4<f32>(world, 0.0, 1.0);\n  out.local = c;\n  out.face = face;\n  out.border = border;\n  out.borderFrac = clamp(borderWidth / max(size, 1e-6), 0.0, 1.0);\n  return out;\n}\n\n@fragment\nfn fs(in : VSOut) -> @location(0) vec4<f32> {\n  let symbol = u.params.x;\n  let opacity = u.params.y;\n  var d : f32;\n  if (symbol > 1.5) { d = max(abs(in.local.x), abs(in.local.y)); } // square\n  else { d = length(in.local); }                                   // disc / ring\n\n  let aa = max(fwidth(d), 1e-5);\n  let inside = 1.0 - smoothstep(1.0 - aa, 1.0, d);\n  if (inside <= 0.0) { discard; }\n\n  let borderEdge = 1.0 - in.borderFrac;\n  let borderMix = smoothstep(borderEdge - aa, borderEdge, d);\n  let rgb = mix(in.face.rgb, in.border.rgb, borderMix);\n  var a = mix(in.face.a, in.border.a, borderMix);\n  if (symbol > 0.5 && symbol < 1.5) { a = a * borderMix; } // ring: only the border ring shows\n  a = a * inside * opacity;\n  return vec4<f32>(rgb * a, a);\n}\n";

package/dist/visuals/points-visual.d.ts

@@ -0,0 +1,22 @@
+import { PointsLayer } from '../layers/points-layer';
+import { LayerVisual, RenderView } from './layer-visual';
+/** Renders a {@link PointsLayer} as instanced SDF markers. */
+export declare class PointsVisual implements LayerVisual {
+    private readonly device;
+    private readonly format;
+    private readonly layer;
+    readonly ndisplay: 2 | 3;
+    private readonly module;
+    private readonly uniformBuffer;
+    private readonly scratch;
+    private instanceBuffer;
+    private pipeline;
+    private currentBlend;
+    private dataVersion;
+    constructor(device: GPUDevice, format: GPUTextureFormat, layer: PointsLayer);
+    private buildPipeline;
+    sync(): void;
+    private rebuildInstances;
+    draw(pass: GPURenderPassEncoder, view: RenderView): void;
+    dispose(): void;
+}

package/dist/visuals/tiled-image-visual.d.ts

@@ -0,0 +1,46 @@
+import { ImageLayer } from '../layers/image-layer';
+import { LayerVisual, RenderView } from './layer-visual';
+/**
+ * Renders a pyramidal {@link TiledSource}: selects a pyramid level from zoom, draws the
+ * visible tiles (fetched lazily and cached on the GPU with LRU eviction), and underlays the
+ * coarsest level so pans/zooms never flash blank. Z-scrubbing fetches the new slice's tiles
+ * (cache keyed by z, so revisited slices are instant). Mirrors napari's tiled-image path.
+ */
+export declare class TiledImageVisual implements LayerVisual {
+    private readonly device;
+    private readonly format;
+    private readonly layer;
+    private readonly opts;
+    readonly ndisplay: 2 | 3;
+    private readonly source;
+    private readonly plan;
+    private readonly module;
+    private readonly bindGroupLayout;
+    private readonly pipelineLayout;
+    private readonly lutTexture;
+    private readonly lutSampler;
+    private readonly scratch;
+    private readonly cache;
+    private readonly pending;
+    private srcSampler;
+    private pipeline;
+    private currentBlend;
+    private currentInterp;
+    private lutVersion;
+    private disposed;
+    constructor(device: GPUDevice, format: GPUTextureFormat, layer: ImageLayer, opts: {
+        float32Filterable: boolean;
+        onNeedsRedraw: () => void;
+    });
+    private buildBindGroupLayout;
+    private buildPipeline;
+    private createSrcSampler;
+    private writeLut;
+    private keyOf;
+    /** Return a ready tile, or kick an async fetch and return undefined. */
+    private ensureTile;
+    private drawTile;
+    sync(): void;
+    draw(pass: GPURenderPassEncoder, rv: RenderView): void;
+    dispose(): void;
+}

package/dist/visuals/volume-shader.d.ts

@@ -0,0 +1 @@
+export declare const VOLUME_SHADER = "\nstruct U {\n  invMvp : mat4x4<f32>,\n  params : vec4<f32>,   // climLo, climHi (normalized 0..1), gamma, opacity\n  params2 : vec4<f32>,  // renderingCode (0=mip,1=translucent,2=iso), isoThreshold, steps, 0\n};\n@group(0) @binding(0) var<uniform> u : U;\n@group(0) @binding(1) var volSamp : sampler;\n@group(0) @binding(2) var volTex : texture_3d<f32>;\n@group(0) @binding(3) var lutSamp : sampler;\n@group(0) @binding(4) var lut : texture_2d<f32>;\n\nstruct VSOut {\n  @builtin(position) position : vec4<f32>,\n  @location(0) ndc : vec2<f32>,\n};\n\n@vertex\nfn vs(@builtin(vertex_index) vi : u32) -> VSOut {\n  var corners = array<vec2<f32>, 6>(\n    vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),\n    vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),\n  );\n  let c = corners[vi];\n  var out : VSOut;\n  out.position = vec4<f32>(c, 0.0, 1.0);\n  out.ndc = c;\n  return out;\n}\n\nfn unproject(ndc : vec2<f32>, z : f32) -> vec3<f32> {\n  let p = u.invMvp * vec4<f32>(ndc, z, 1.0);\n  return p.xyz / p.w;\n}\n\nfn sampleWindowed(pos : vec3<f32>) -> f32 {\n  let s = textureSampleLevel(volTex, volSamp, pos, 0.0).r;\n  let lo = u.params.x;\n  let hi = u.params.y;\n  let t = clamp((s - lo) / max(hi - lo, 1e-6), 0.0, 1.0);\n  return pow(t, u.params.z);\n}\n\nfn lutColor(t : f32) -> vec3<f32> {\n  return textureSampleLevel(lut, lutSamp, vec2<f32>(clamp(t, 0.0, 1.0), 0.5), 0.0).rgb;\n}\n\n@fragment\nfn fs(in : VSOut) -> @location(0) vec4<f32> {\n  let ro = unproject(in.ndc, 0.0);          // near point, volume space\n  let rf = unproject(in.ndc, 1.0);          // far point\n  let rd = rf - ro;\n\n  // Intersect ray with the unit box [0,1]^3 (parameter t along rd).\n  let inv = 1.0 / rd;\n  let t0 = (vec3<f32>(0.0) - ro) * inv;\n  let t1 = (vec3<f32>(1.0) - ro) * inv;\n  let tmin = min(t0, t1);\n  let tmax = max(t0, t1);\n  let tNear = max(max(max(tmin.x, tmin.y), tmin.z), 0.0);\n  let tFar = min(min(tmax.x, tmax.y), 1.0 * min(tmax.z, 1.0e9));\n  if (tFar <= tNear) { discard; }\n\n  let steps = i32(u.params2.z);\n  let dt = (tFar - tNear) / f32(steps);\n  let mode = u.params2.x;\n  let opacity = u.params.w;\n\n  var maxT = 0.0;\n  var col = vec3<f32>(0.0);\n  var acc = 0.0;\n\n  for (var i = 0; i < steps; i = i + 1) {\n    let t = tNear + (f32(i) + 0.5) * dt;\n    let pos = ro + rd * t;\n    let w = sampleWindowed(pos);\n\n    if (mode < 0.5) {\n      // MIP\n      maxT = max(maxT, w);\n    } else if (mode < 1.5) {\n      // Front-to-back translucent DVR\n      let a = w * opacity;\n      let c = lutColor(w);\n      col = col + (1.0 - acc) * c * a;\n      acc = acc + (1.0 - acc) * a;\n      if (acc >= 0.99) { break; }\n    } else {\n      // Iso-surface: first crossing \u2192 gradient + lambert\n      if (w >= u.params2.y) {\n        let e = 1.0 / 128.0;\n        let gx = sampleWindowed(pos + vec3<f32>(e, 0.0, 0.0)) - sampleWindowed(pos - vec3<f32>(e, 0.0, 0.0));\n        let gy = sampleWindowed(pos + vec3<f32>(0.0, e, 0.0)) - sampleWindowed(pos - vec3<f32>(0.0, e, 0.0));\n        let gz = sampleWindowed(pos + vec3<f32>(0.0, 0.0, e)) - sampleWindowed(pos - vec3<f32>(0.0, 0.0, e));\n        let n = normalize(vec3<f32>(gx, gy, gz) + vec3<f32>(1e-5));\n        let lightDir = normalize(vec3<f32>(0.5, 0.7, 1.0));\n        let lambert = max(dot(n, lightDir), 0.0) * 0.8 + 0.2;\n        col = lutColor(w) * lambert;\n        acc = opacity;\n        break;\n      }\n    }\n  }\n\n  if (mode < 0.5) {\n    if (maxT <= 0.0) { discard; }\n    col = lutColor(maxT);\n    acc = opacity;\n  }\n  if (acc <= 0.0) { discard; }\n  return vec4<f32>(col * acc, acc);\n}\n";

package/dist/visuals/volume-visual.d.ts

@@ -0,0 +1,32 @@
+import { VolumeLayer } from '../layers/volume-layer';
+import { LayerVisual, RenderView } from './layer-visual';
+/**
+ * Renders a {@link VolumeLayer} by fragment raymarching a 3D texture (see volume-shader.ts).
+ * Builds `invMVP` (clip → volume [0,1]^3 space) each frame from the 3D camera and a model that
+ * centers the `[w,h,d]` box at the origin. NJ-5+ uploads uint8 volumes (r8unorm 3D).
+ */
+export declare class VolumeVisual implements LayerVisual {
+    private readonly device;
+    private readonly format;
+    private readonly layer;
+    readonly ndisplay: 2 | 3;
+    private readonly module;
+    private readonly uniformBuffer;
+    private readonly scratch;
+    private readonly texture;
+    private readonly lutTexture;
+    private readonly volSampler;
+    private readonly lutSampler;
+    private readonly model;
+    private bindGroup;
+    private pipeline;
+    private currentBlend;
+    private lutVersion;
+    constructor(device: GPUDevice, format: GPUTextureFormat, layer: VolumeLayer);
+    private buildPipeline;
+    private buildBindGroup;
+    private writeLut;
+    sync(): void;
+    draw(pass: GPURenderPassEncoder, view: RenderView): void;
+    dispose(): void;
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "napari-js",
+  "version": "0.1.0",
+  "description": "WebGPU rendering engine porting napari's visualization model to the browser.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Baha Elkassaby",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/belkassaby/napari-js.git"
+  },
+  "homepage": "https://github.com/belkassaby/napari-js#readme",
+  "bugs": {
+    "url": "https://github.com/belkassaby/napari-js/issues"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "webgpu",
+    "napari",
+    "image",
+    "visualization",
+    "microscopy",
+    "rendering"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/napari-js.js",
+  "module": "./dist/napari-js.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/napari-js.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\" \"playground/**/*.ts\" \"*.{ts,json,md}\" \"docs/**/*.md\" \"index.html\"",
+    "format:check": "prettier --check \"src/**/*.ts\" \"test/**/*.ts\" \"playground/**/*.ts\" \"*.{ts,json,md}\" \"docs/**/*.md\" \"index.html\"",
+    "prepublishOnly": "npm run typecheck && npm run test && npm run build"
+  },
+  "devDependencies": {
+    "@webgpu/types": "^0.1.44",
+    "eslint": "^9.9.0",
+    "prettier": "^3.8.3",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.2.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.2.1",
+    "vitest": "^2.0.5"
+  }
+}