@niivue/nvreact 0.1.3 → 1.0.0-rc.4

package/README.md

@@ -5,7 +5,7 @@ Lightweight React bindings for [Niivue](https://github.com/niivue/niivue) with m
 ## Install
 
 ```bash
-npm install @niivue/nvreact @niivue/niivue react react-dom
+bun add @niivue/nvreact @niivue/niivue react react-dom
 ```
 
 ## Quick start

package/dist/lib.js

@@ -1,52 +1,28 @@
-// src/nvscene.tsx
-import { useEffect, useRef } from "react";
+// src/context.tsx
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-var NvScene = ({
+var NvSceneContext = createContext(null);
+function NvSceneProvider({
   scene,
-  className,
-  style,
-  initialLayout = "1x1"
-}) => {
-  const containerRef = useRef(null);
-  useEffect(() => {
-    if (containerRef.current) {
-      scene.setContainerElement(containerRef.current);
-      if (scene.viewers.length === 0) {
-        scene.setLayout(initialLayout);
-      }
-    }
-    return () => {
-      scene.setContainerElement(null);
-    };
-  }, [scene, initialLayout]);
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el)
-      return;
-    const ro = new ResizeObserver(() => scene.updateLayout());
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [scene]);
-  return /* @__PURE__ */ jsx("div", {
-    ref: containerRef,
-    className,
-    style
+  children
+}) {
+  return /* @__PURE__ */ jsx(NvSceneContext.Provider, {
+    value: scene,
+    children
   });
-};
-// src/nvviewer.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import {
-  Niivue as Niivue2,
-  SLICE_TYPE as SLICE_TYPE2
-} from "@niivue/niivue";
+}
+function useSceneContext() {
+  const scene = useContext(NvSceneContext);
+  if (!scene) {
+    throw new Error("useSceneContext must be used within an NvSceneProvider");
+  }
+  return scene;
+}
+// src/hooks.ts
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 
 // src/nvscene-controller.ts
-import {
-  DRAG_MODE,
-  Niivue,
-  SLICE_TYPE,
-  SHOW_RENDER
-} from "@niivue/niivue";
+import NiiVueGPU, { DRAG_MODE, SHOW_RENDER, SLICE_TYPE } from "@niivue/niivue";
 
 // src/layouts.ts
 var layout1x1 = () => ({
@@ -197,14 +173,9 @@ var defaultSliceLayouts = {
   }
 };
 var defaultViewerOptions = {
-  crosshairGap: 5
-};
-var defaultMouseConfig = {
-  leftButton: {
-    primary: DRAG_MODE.crosshair
-  },
-  rightButton: DRAG_MODE.pan,
-  centerButton: DRAG_MODE.slicer3D
+  crosshairGap: 5,
+  primaryDragMode: DRAG_MODE.crosshair,
+  secondaryDragMode: DRAG_MODE.pan
 };
 
 class NvSceneController {
@@ -234,7 +205,7 @@ class NvSceneController {
     if (!this.eventListeners.has(event)) {
       this.eventListeners.set(event, new Set);
     }
-    this.eventListeners.get(event).add(cb);
+    this.eventListeners.get(event)?.add(cb);
     return () => this.off(event, cb);
   }
   off(event, cb) {
@@ -272,7 +243,9 @@ class NvSceneController {
   };
   notify() {
     this.snapshotCache = null;
-    this.listeners.forEach((listener) => listener());
+    this.listeners.forEach((listener) => {
+      listener();
+    });
   }
   setContainerElement(element) {
     this.containerElement = element;
@@ -289,8 +262,10 @@ class NvSceneController {
     while (this.viewers.length > this.slots) {
       this.removeViewer(this.viewers.length - 1, false);
     }
-    if (this.viewers.length === 0 && this.containerElement) {
-      this.addViewer();
+    if (this.containerElement) {
+      while (this.viewers.length < this.slots) {
+        this.addViewer();
+      }
     }
     this.updateLayout();
     this.notify();
@@ -322,7 +297,9 @@ class NvSceneController {
     return this.viewers.map((viewer) => viewer.niivue);
   }
   forEachNiivue(callback) {
-    this.viewers.forEach((viewer, i) => callback(viewer.niivue, i));
+    this.viewers.forEach((viewer, i) => {
+      callback(viewer.niivue, i);
+    });
   }
   hasSyncableContent(nv) {
     return nv.volumes.length > 0 || nv.meshes.length > 0;
@@ -381,12 +358,12 @@ class NvSceneController {
     return this.viewerSliceLayouts.get(viewer.id) ?? null;
   }
   applySliceLayout(nv, layout) {
-    if (layout) {
-      nv.setCustomLayout(layout);
+    if (layout && layout.length > 0) {
+      nv.customLayout = layout;
     } else {
-      nv.clearCustomLayout();
-      nv.setSliceType(SLICE_TYPE.AXIAL);
-      nv.opts.multiplanarShowRender = SHOW_RENDER.NEVER;
+      nv.customLayout = null;
+      nv.sliceType = SLICE_TYPE.AXIAL;
+      nv.showRender = SHOW_RENDER.NEVER;
     }
   }
   getNiivueById(id) {
@@ -401,7 +378,11 @@ class NvSceneController {
       throw new Error(`No viewer at index ${index}`);
     this.incrementLoading(viewer.id);
     try {
-      const image = await viewer.niivue.addVolumeFromUrl(opts);
+      await viewer.niivue.addVolume(opts);
+      const vols = viewer.niivue.volumes;
+      const image = vols[vols.length - 1];
+      if (!image)
+        throw new Error("Volume was not added");
       this.emit("volumeAdded", index, opts, image);
       if (this.broadcasting) {
         this.rewireBroadcasting();
@@ -422,14 +403,15 @@ class NvSceneController {
     }
     return results;
   }
-  removeVolume(index, url) {
+  async removeVolume(index, url) {
     const viewer = this.viewers[index];
     if (!viewer)
       return;
     const nv = viewer.niivue;
-    const vol = nv.volumes.find((v) => v.url === url || v.name === url);
-    if (vol) {
-      nv.removeVolume(vol);
+    const volIdx = nv.volumes.findIndex((v) => v.url === url || v.name === url);
+    if (volIdx >= 0) {
+      nv.model.removeVolume(volIdx);
+      await nv.updateGLVolume();
       this.emit("volumeRemoved", index, url);
       if (this.broadcasting) {
         this.rewireBroadcasting();
@@ -447,30 +429,27 @@ class NvSceneController {
       return;
     return { nv, vol, volumeIndex };
   }
-  setColormap(viewerIndex, volumeIndex, colormap) {
+  async setColormap(viewerIndex, volumeIndex, colormap) {
     const found = this.findVolume(viewerIndex, volumeIndex);
     if (!found)
       return;
-    found.vol.colormap = colormap;
-    found.nv.updateGLVolume();
+    await found.nv.setVolume(found.volumeIndex, { colormap });
     this.emit("colormapChanged", viewerIndex, volumeIndex, colormap);
     this.notify();
   }
-  setCalMinMax(viewerIndex, volumeIndex, cal_min, cal_max) {
+  async setCalMinMax(viewerIndex, volumeIndex, calMin, calMax) {
     const found = this.findVolume(viewerIndex, volumeIndex);
     if (!found)
       return;
-    found.vol.cal_min = cal_min;
-    found.vol.cal_max = cal_max;
-    found.nv.updateGLVolume();
-    this.emit("intensityChanged", viewerIndex, volumeIndex, cal_min, cal_max);
+    await found.nv.setVolume(found.volumeIndex, { calMin, calMax });
+    this.emit("intensityChanged", viewerIndex, volumeIndex, calMin, calMax);
     this.notify();
   }
-  setOpacity(viewerIndex, volumeIndex, opacity) {
+  async setOpacity(viewerIndex, volumeIndex, opacity) {
     const found = this.findVolume(viewerIndex, volumeIndex);
     if (!found)
       return;
-    found.nv.setOpacity(volumeIndex, opacity);
+    await found.nv.setVolume(found.volumeIndex, { opacity });
     this.emit("opacityChanged", viewerIndex, volumeIndex, opacity);
     this.notify();
   }
@@ -497,8 +476,15 @@ class NvSceneController {
     }
     const containerDiv = document.createElement("div");
     containerDiv.className = "niivue-canvas-container";
+    containerDiv.style.position = "relative";
+    containerDiv.style.overflow = "hidden";
     const canvas = document.createElement("canvas");
     canvas.className = "niivue-canvas";
+    canvas.style.position = "absolute";
+    canvas.style.top = "0";
+    canvas.style.left = "0";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
     containerDiv.appendChild(canvas);
     this.containerElement.appendChild(containerDiv);
     const mergedOptions = {
@@ -506,9 +492,7 @@ class NvSceneController {
       ...this.viewerDefaults,
       ...options
     };
-    const niivue = new Niivue(mergedOptions);
-    niivue.setMouseEventConfig(defaultMouseConfig);
-    niivue.attachToCanvas(canvas);
+    const niivue = new NiiVueGPU(mergedOptions);
     const id = `nv-${this.nextId++}`;
     this.viewerSliceLayouts.set(id, null);
     this.loadingCounts.set(id, 0);
@@ -522,29 +506,33 @@ class NvSceneController {
     this.viewers.push(viewer);
     this.viewersById.set(id, viewer);
     this.updateLayout();
-    this.applySliceLayout(niivue, null);
     const index = this.viewers.length - 1;
-    niivue.onLocationChange = (data) => {
-      this.emit("locationChange", index, data);
-    };
-    niivue.onImageLoaded = (vol) => {
-      this.emit("imageLoaded", index, vol);
+    niivue.addEventListener("locationChange", (evt) => {
+      this.emit("locationChange", index, evt.detail);
+    });
+    niivue.addEventListener("volumeLoaded", (evt) => {
+      this.emit("imageLoaded", index, evt.detail.volume);
       if (this.broadcasting) {
         this.rewireBroadcasting();
       }
-    };
-    niivue.onMeshLoaded = (_mesh) => {
+    });
+    niivue.addEventListener("meshLoaded", () => {
       if (this.broadcasting) {
         this.rewireBroadcasting();
       }
-    };
-    if (this.broadcasting) {
-      this.setBroadcasting(true);
-    }
+    });
     this.onViewerCreated?.(niivue, index);
     this.emit("viewerCreated", niivue, index);
     this.notify();
-    return viewer;
+    const ready = niivue.attachToCanvas(canvas).then(() => {
+      this.applySliceLayout(niivue, null);
+      if (this.broadcasting) {
+        this.setBroadcasting(true);
+      }
+      this.notify();
+      return viewer;
+    });
+    return ready;
   }
   removeViewer(index, shouldNotify = true) {
     if (index < 0 || index >= this.viewers.length)
@@ -569,15 +557,7 @@ class NvSceneController {
     }
   }
   disposeViewer(viewer) {
-    const nv = viewer.niivue;
-    let gl = nv._gl;
-    if (gl) {
-      const ext = gl.getExtension("WEBGL_lose_context");
-      if (ext) {
-        ext.loseContext();
-      }
-      gl = null;
-    }
+    viewer.niivue.destroy();
     viewer.canvasElement.width = 0;
     viewer.canvasElement.height = 0;
   }
@@ -601,13 +581,70 @@ class NvSceneController {
   }
 }
 
-// src/nvviewer.tsx
+// src/hooks.ts
+function useScene(controller, layouts, viewerDefaults) {
+  const scene = useMemo(() => controller ?? new NvSceneController(layouts, viewerDefaults), [controller, viewerDefaults, layouts]);
+  const snapshot = useSyncExternalStore(scene.subscribe, scene.getSnapshot, scene.getSnapshot);
+  return { scene, snapshot };
+}
+function useNiivue(scene, index) {
+  const snapshot = useSyncExternalStore(scene.subscribe, scene.getSnapshot, scene.getSnapshot);
+  return index < snapshot.viewerCount ? scene.getNiivue(index) : undefined;
+}
+function useSceneEvent(scene, event, callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const handler = (...args) => {
+      callbackRef.current(...args);
+    };
+    return scene.on(event, handler);
+  }, [scene, event]);
+}
+// src/nvscene.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
+var NvScene = ({
+  scene,
+  className,
+  style,
+  initialLayout = "1x1"
+}) => {
+  const containerRef = useRef2(null);
+  useEffect2(() => {
+    if (containerRef.current) {
+      scene.setContainerElement(containerRef.current);
+      if (scene.viewers.length === 0) {
+        scene.setLayout(initialLayout);
+      }
+    }
+    return () => {
+      scene.setContainerElement(null);
+    };
+  }, [scene, initialLayout]);
+  useEffect2(() => {
+    const el = containerRef.current;
+    if (!el)
+      return;
+    const ro = new ResizeObserver(() => scene.updateLayout());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [scene]);
+  return /* @__PURE__ */ jsx2("div", {
+    ref: containerRef,
+    className,
+    style
+  });
+};
+// src/nvviewer.tsx
+import NiiVueGPU2, { SLICE_TYPE as SLICE_TYPE2 } from "@niivue/niivue";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function extractVisualProps(opts) {
   return {
-    colormap: opts.colormap ?? opts.colorMap,
-    cal_min: opts.cal_min,
-    cal_max: opts.cal_max,
+    colormap: opts.colormap,
+    calMin: opts.calMin,
+    calMax: opts.calMax,
     opacity: opts.opacity
   };
 }
@@ -621,16 +658,16 @@ var NvViewer = ({
   onImageLoaded,
   onError
 }) => {
-  const containerRef = useRef2(null);
-  const nvRef = useRef2(null);
-  const loadedVolumesRef = useRef2(new Map);
-  const onLocationChangeRef = useRef2(onLocationChange);
+  const containerRef = useRef3(null);
+  const nvRef = useRef3(null);
+  const loadedVolumesRef = useRef3(new Map);
+  const onLocationChangeRef = useRef3(onLocationChange);
   onLocationChangeRef.current = onLocationChange;
-  const onImageLoadedRef = useRef2(onImageLoaded);
+  const onImageLoadedRef = useRef3(onImageLoaded);
   onImageLoadedRef.current = onImageLoaded;
-  const onErrorRef = useRef2(onError);
+  const onErrorRef = useRef3(onError);
   onErrorRef.current = onError;
-  useEffect2(() => {
+  useEffect3(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -646,138 +683,94 @@ var NvViewer = ({
       ...defaultViewerOptions,
       ...options
     };
-    const nv = new Niivue2(mergedOptions);
-    nv.setMouseEventConfig(defaultMouseConfig);
-    nv.onLocationChange = (data) => {
-      onLocationChangeRef.current?.(data);
-    };
-    nv.onImageLoaded = (vol) => {
-      onImageLoadedRef.current?.(vol);
-    };
-    nv.attachToCanvas(canvas);
-    nv.setSliceType(sliceType);
+    const nv = new NiiVueGPU2(mergedOptions);
+    nv.addEventListener("locationChange", (evt) => {
+      onLocationChangeRef.current?.(evt.detail);
+    });
+    nv.addEventListener("volumeLoaded", (evt) => {
+      onImageLoadedRef.current?.(evt.detail.volume);
+    });
+    nv.attachToCanvas(canvas).then(() => {
+      nv.sliceType = sliceType;
+    });
     nvRef.current = nv;
     const ro = new ResizeObserver(() => {
-      nv.resizeListener();
+      nv.resize();
     });
     ro.observe(container);
     return () => {
       ro.disconnect();
-      const gl = nv._gl;
-      if (gl) {
-        const ext = gl.getExtension("WEBGL_lose_context");
-        if (ext)
-          ext.loseContext();
-      }
+      nv.destroy();
       canvas.width = 0;
       canvas.height = 0;
       canvas.remove();
       nvRef.current = null;
       loadedVolumesRef.current.clear();
     };
-  }, []);
-  useEffect2(() => {
-    nvRef.current?.setSliceType(sliceType);
+  }, [sliceType, options]);
+  useEffect3(() => {
+    const nv = nvRef.current;
+    if (nv) {
+      nv.sliceType = sliceType;
+    }
   }, [sliceType]);
-  useEffect2(() => {
+  useEffect3(() => {
     const nv = nvRef.current;
     if (!nv)
       return;
-    const desiredUrls = new Set((volumes ?? []).map((v) => v.url));
+    const desiredUrls = new Set((volumes ?? []).map((v) => typeof v.url === "string" ? v.url : v.url.name));
     const currentVolumes = loadedVolumesRef.current;
     for (const url of currentVolumes.keys()) {
       if (!desiredUrls.has(url)) {
-        const vol = nv.volumes.find((v) => v.url === url || v.name === url);
-        if (vol)
-          nv.removeVolume(vol);
+        const volIdx = nv.volumes.findIndex((v) => v.url === url || v.name === url);
+        if (volIdx >= 0) {
+          nv.model.removeVolume(volIdx);
+          nv.updateGLVolume();
+        }
         currentVolumes.delete(url);
       }
     }
-    let needsGLUpdate = false;
     for (const opts of volumes ?? []) {
-      if (!currentVolumes.has(opts.url)) {
+      const urlKey = typeof opts.url === "string" ? opts.url : opts.url.name;
+      if (!currentVolumes.has(urlKey)) {
         const props = extractVisualProps(opts);
-        currentVolumes.set(opts.url, props);
-        nv.addVolumeFromUrl(opts).catch((err) => {
-          currentVolumes.delete(opts.url);
+        currentVolumes.set(urlKey, props);
+        nv.addVolume(opts).catch((err) => {
+          currentVolumes.delete(urlKey);
           onErrorRef.current?.(err);
         });
       } else {
-        const prev = currentVolumes.get(opts.url);
+        const prev = currentVolumes.get(urlKey);
         const next = extractVisualProps(opts);
-        const vol = nv.volumes.find((v) => v.url === opts.url || v.name === opts.url);
-        if (!vol)
+        const volIdx = nv.volumes.findIndex((v) => v.url === urlKey || v.name === urlKey);
+        if (volIdx < 0)
           continue;
+        const updates = {};
         if (next.colormap !== undefined && next.colormap !== prev.colormap) {
-          vol.colormap = next.colormap;
-          needsGLUpdate = true;
+          updates.colormap = next.colormap;
         }
-        if (next.cal_min !== undefined && next.cal_min !== prev.cal_min) {
-          vol.cal_min = next.cal_min;
-          needsGLUpdate = true;
+        if (next.calMin !== undefined && next.calMin !== prev.calMin) {
+          updates.calMin = next.calMin;
         }
-        if (next.cal_max !== undefined && next.cal_max !== prev.cal_max) {
-          vol.cal_max = next.cal_max;
-          needsGLUpdate = true;
+        if (next.calMax !== undefined && next.calMax !== prev.calMax) {
+          updates.calMax = next.calMax;
         }
         if (next.opacity !== undefined && next.opacity !== prev.opacity) {
-          const volIdx = nv.volumes.indexOf(vol);
-          nv.setOpacity(volIdx, next.opacity);
+          updates.opacity = next.opacity;
         }
-        currentVolumes.set(opts.url, next);
+        if (Object.keys(updates).length > 0) {
+          nv.setVolume(volIdx, updates);
+        }
+        currentVolumes.set(urlKey, next);
       }
     }
-    if (needsGLUpdate) {
-      nv.updateGLVolume();
-    }
   }, [volumes]);
-  return /* @__PURE__ */ jsx2("div", {
+  return /* @__PURE__ */ jsx3("div", {
     ref: containerRef,
     className,
     style: { position: "relative", ...style }
   });
 };
-// src/hooks.ts
-import { useEffect as useEffect3, useMemo, useSyncExternalStore, useRef as useRef3 } from "react";
-function useScene(controller, layouts, viewerDefaults) {
-  const scene = useMemo(() => controller ?? new NvSceneController(layouts, viewerDefaults), [controller]);
-  const snapshot = useSyncExternalStore(scene.subscribe, scene.getSnapshot, scene.getSnapshot);
-  return { scene, snapshot };
-}
-function useNiivue(scene, index) {
-  const snapshot = useSyncExternalStore(scene.subscribe, scene.getSnapshot, scene.getSnapshot);
-  return index < snapshot.viewerCount ? scene.getNiivue(index) : undefined;
-}
-function useSceneEvent(scene, event, callback) {
-  const callbackRef = useRef3(callback);
-  callbackRef.current = callback;
-  useEffect3(() => {
-    const handler = (...args) => {
-      callbackRef.current(...args);
-    };
-    return scene.on(event, handler);
-  }, [scene, event]);
-}
-// src/context.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var NvSceneContext = createContext(null);
-function NvSceneProvider({
-  scene,
-  children
-}) {
-  return /* @__PURE__ */ jsx3(NvSceneContext.Provider, {
-    value: scene,
-    children
-  });
-}
-function useSceneContext() {
-  const scene = useContext(NvSceneContext);
-  if (!scene) {
-    throw new Error("useSceneContext must be used within an NvSceneProvider");
-  }
-  return scene;
-}
 export {
   useSceneEvent,
   useSceneContext,
@@ -791,7 +784,6 @@ export {
   defaultViewerOptions,
   defaultSliceLayouts,
   defaultSliceLayout,
-  defaultMouseConfig,
   defaultLayouts,
   SLICE_TYPE,
   NvViewer,

package/dist/types/context.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from "react";
-import { NvSceneController } from "./nvscene-controller";
+import { type ReactNode } from 'react';
+import type { NvSceneController } from './nvscene-controller';
 export declare function NvSceneProvider({ scene, children, }: {
     scene: NvSceneController;
     children: ReactNode;

package/dist/types/hooks.d.ts

@@ -1,10 +1,10 @@
-import type { NVConfigOptions } from "@niivue/niivue";
-import type { LayoutConfig } from "./layouts";
-import { NvSceneController } from "./nvscene-controller";
-import type { NvSceneEventMap } from "./types";
-export declare function useScene(controller?: NvSceneController, layouts?: Record<string, LayoutConfig>, viewerDefaults?: Partial<NVConfigOptions>): {
+import type { NiiVueOptions } from '@niivue/niivue';
+import type { LayoutConfig } from './layouts';
+import { NvSceneController } from './nvscene-controller';
+import type { NvSceneEventMap } from './types';
+export declare function useScene(controller?: NvSceneController, layouts?: Record<string, LayoutConfig>, viewerDefaults?: Partial<NiiVueOptions>): {
     scene: NvSceneController;
     snapshot: import("./nvscene-controller").NvSceneControllerSnapshot;
 };
-export declare function useNiivue(scene: NvSceneController, index: number): import("@niivue/niivue").Niivue | undefined;
+export declare function useNiivue(scene: NvSceneController, index: number): import("@niivue/niivue").default | undefined;
 export declare function useSceneEvent<E extends keyof NvSceneEventMap>(scene: NvSceneController, event: E, callback: NvSceneEventMap[E]): void;

package/dist/types/lib.d.ts

@@ -1,9 +1,9 @@
-export { NvScene } from "./nvscene";
-export { NvViewer } from "./nvviewer";
-export type { NvViewerProps } from "./nvviewer";
-export { NvSceneController, SLICE_TYPE, defaultSliceLayout, splitSliceLayout, triSliceLayout, stackedSliceLayout, quadSliceLayout, heroRenderSliceLayout, defaultSliceLayouts, defaultViewerOptions, defaultMouseConfig, } from "./nvscene-controller";
-export type { NvSceneControllerSnapshot, ViewerSlot, SliceLayoutTile, SliceLayoutConfig, BroadcastOptions, NiivueCallback, } from "./nvscene-controller";
-export { defaultLayouts } from "./layouts";
-export { useScene, useNiivue, useSceneEvent } from "./hooks";
-export { NvSceneProvider, useSceneContext } from "./context";
-export type { NvSceneEventMap, ViewerState, NVImage, ImageFromUrlOptions, NVConfigOptions, } from "./types";
+export { NvSceneProvider, useSceneContext } from './context';
+export { useNiivue, useScene, useSceneEvent } from './hooks';
+export { defaultLayouts } from './layouts';
+export { NvScene } from './nvscene';
+export type { BroadcastOptions, NiivueCallback, NvSceneControllerSnapshot, SliceLayoutConfig, SliceLayoutTile, ViewerSlot, } from './nvscene-controller';
+export { defaultSliceLayout, defaultSliceLayouts, defaultViewerOptions, heroRenderSliceLayout, NvSceneController, quadSliceLayout, SLICE_TYPE, splitSliceLayout, stackedSliceLayout, triSliceLayout, } from './nvscene-controller';
+export type { NvViewerProps } from './nvviewer';
+export { NvViewer } from './nvviewer';
+export type { ImageFromUrlOptions, NiiVueOptions, NVImage, NvSceneEventMap, ViewerState, } from './types';

package/dist/types/nvscene-controller.d.ts

@@ -1,11 +1,12 @@
-import { DRAG_MODE, Niivue, SLICE_TYPE, type NVConfigOptions, type NVImage } from "@niivue/niivue";
-import type { LayoutConfig } from "./layouts";
-import type { NvSceneEventMap, ViewerState, ImageFromUrlOptions } from "./types";
+import type { NiiVueOptions, NVImage } from '@niivue/niivue';
+import NiiVueGPU, { SLICE_TYPE } from '@niivue/niivue';
+import type { LayoutConfig } from './layouts';
+import type { ImageFromUrlOptions, NvSceneEventMap, ViewerState } from './types';
 export { SLICE_TYPE };
-export type NiivueCallback = (nv: Niivue, index: number) => void;
+export type NiivueCallback = (nv: NiiVueGPU, index: number) => void;
 export interface ViewerSlot {
     id: string;
-    niivue: Niivue;
+    niivue: NiiVueGPU;
     canvasElement: HTMLCanvasElement;
     containerDiv: HTMLDivElement;
 }
@@ -18,12 +19,13 @@ export interface NvSceneControllerSnapshot {
     viewerStates: ViewerState[];
 }
 export interface BroadcastOptions {
-    "2d": boolean;
-    "3d": boolean;
+    '2d': boolean;
+    '3d': boolean;
 }
 export interface SliceLayoutTile {
     sliceType: number;
     position: [number, number, number, number];
+    sliceMM?: number;
 }
 export interface SliceLayoutConfig {
     label: string;
@@ -55,14 +57,7 @@ export declare const quadSliceLayout: SliceLayoutTile[];
 export declare const heroRenderSliceLayout: SliceLayoutTile[];
 export declare const defaultSliceLayouts: Record<string, SliceLayoutConfig>;
 type Listener = () => void;
-export declare const defaultViewerOptions: Partial<NVConfigOptions>;
-export declare const defaultMouseConfig: {
-    leftButton: {
-        primary: DRAG_MODE;
-    };
-    rightButton: DRAG_MODE;
-    centerButton: DRAG_MODE;
-};
+export declare const defaultViewerOptions: Partial<NiiVueOptions>;
 /**
  * An NvSceneController is a declarative representation of what we want to render with Niivue.
  *
@@ -94,7 +89,7 @@ export declare class NvSceneController {
     private eventListeners;
     private loadingCounts;
     private viewerErrors;
-    constructor(layouts?: Record<string, LayoutConfig>, viewerDefaults?: Partial<NVConfigOptions>);
+    constructor(layouts?: Record<string, LayoutConfig>, viewerDefaults?: Partial<NiiVueOptions>);
     on<E extends keyof NvSceneEventMap>(event: E, cb: NvSceneEventMap[E]): () => void;
     off<E extends keyof NvSceneEventMap>(event: E, cb: NvSceneEventMap[E]): void;
     private emit;
@@ -105,8 +100,8 @@ export declare class NvSceneController {
     setLayout(layoutName: string): void;
     updateLayout(): void;
     canAddViewer(): boolean;
-    getNiivue(index: number): Niivue | undefined;
-    getAllNiivue(): Niivue[];
+    getNiivue(index: number): NiiVueGPU | undefined;
+    getAllNiivue(): NiiVueGPU[];
     forEachNiivue(callback: NiivueCallback): void;
     private hasSyncableContent;
     private safeBroadcastTo;
@@ -116,26 +111,26 @@ export declare class NvSceneController {
     setViewerSliceLayout(index: number, layout: SliceLayoutTile[] | null): void;
     getViewerSliceLayout(index: number): SliceLayoutTile[] | null;
     private applySliceLayout;
-    getNiivueById(id: string): Niivue | undefined;
+    getNiivueById(id: string): NiiVueGPU | undefined;
     getViewerById(id: string): ViewerSlot | undefined;
     loadVolume(index: number, opts: ImageFromUrlOptions): Promise<NVImage>;
     loadVolumes(index: number, opts: ImageFromUrlOptions[]): Promise<NVImage[]>;
-    removeVolume(index: number, url: string): void;
+    removeVolume(index: number, url: string): Promise<void>;
     /**
      * Look up the Niivue instance and NVImage at the given viewer and volume indices.
      * Returns undefined if either index is out of bounds.
      */
     private findVolume;
     /** Set the colormap for a volume at the given viewer and volume index. */
-    setColormap(viewerIndex: number, volumeIndex: number, colormap: string): void;
-    /** Set the intensity range (cal_min / cal_max) for a volume at the given viewer and volume index. */
-    setCalMinMax(viewerIndex: number, volumeIndex: number, cal_min: number, cal_max: number): void;
+    setColormap(viewerIndex: number, volumeIndex: number, colormap: string): Promise<void>;
+    /** Set the intensity range (calMin / calMax) for a volume at the given viewer and volume index. */
+    setCalMinMax(viewerIndex: number, volumeIndex: number, calMin: number, calMax: number): Promise<void>;
     /** Set the opacity for a volume at the given viewer and volume index. */
-    setOpacity(viewerIndex: number, volumeIndex: number, opacity: number): void;
+    setOpacity(viewerIndex: number, volumeIndex: number, opacity: number): Promise<void>;
     private incrementLoading;
     private decrementLoading;
     private addError;
-    addViewer(options?: Partial<NVConfigOptions>): ViewerSlot;
+    addViewer(options?: Partial<NiiVueOptions>): Promise<ViewerSlot>;
     removeViewer(index: number, shouldNotify?: boolean): void;
     private disposeViewer;
     clearViewers(): void;

package/dist/types/nvscene.d.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties } from "react";
-import { NvSceneController } from "./nvscene-controller";
+import type { CSSProperties } from 'react';
+import type { NvSceneController } from './nvscene-controller';
 interface NiivueControllerProps {
     scene: NvSceneController;
     className?: string;

package/dist/types/nvviewer.d.ts

@@ -1,9 +1,9 @@
-import type { CSSProperties } from "react";
-import { type NVConfigOptions, type NVImage } from "@niivue/niivue";
-import type { ImageFromUrlOptions } from "./types";
+import type { NiiVueOptions, NVImage } from '@niivue/niivue';
+import type { CSSProperties } from 'react';
+import type { ImageFromUrlOptions } from './types';
 export interface NvViewerProps {
     volumes?: ImageFromUrlOptions[];
-    options?: Partial<NVConfigOptions>;
+    options?: Partial<NiiVueOptions>;
     sliceType?: number;
     className?: string;
     style?: CSSProperties;

package/dist/types/types.d.ts

@@ -1,9 +1,8 @@
-import type { Niivue, NVImage, NVConfigOptions } from "@niivue/niivue";
-export type { NVImage, NVConfigOptions };
-/** Extract the ImageFromUrlOptions type from Niivue's addVolumeFromUrl method */
-export type ImageFromUrlOptions = Parameters<Niivue["addVolumeFromUrl"]>[0];
+import type NiiVueGPU from '@niivue/niivue';
+import type { ImageFromUrlOptions, NiiVueOptions, NVImage } from '@niivue/niivue';
+export type { ImageFromUrlOptions, NiiVueOptions, NVImage };
 export interface NvSceneEventMap {
-    viewerCreated: (nv: Niivue, index: number) => void;
+    viewerCreated: (nv: NiiVueGPU, index: number) => void;
     viewerRemoved: (index: number) => void;
     locationChange: (viewerIndex: number, data: unknown) => void;
     imageLoaded: (viewerIndex: number, volume: NVImage) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niivue/nvreact",
-  "version": "0.1.3",
+  "version": "1.0.0-rc.4",
   "private": false,
   "type": "module",
   "main": "./dist/lib.js",
@@ -19,9 +19,8 @@
     "dist"
   ],
   "scripts": {
-    "dev": "bun --hot src/index.ts",
+    "dev": "vite",
     "build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='BUN_PUBLIC_*'",
-    "start": "NODE_ENV=production bun src/index.ts",
     "build:lib": "NODE_ENV=production bun build ./src/lib.ts --outdir=dist --target=browser --format=esm --external react --external react-dom --external @niivue/niivue",
     "build:types": "tsc -p tsconfig.build.json",
     "build:package": "bun run build:lib && bun run build:types",
@@ -31,21 +30,23 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@niivue/niivue": "^0.68.1",
+    "@niivue/niivue": "workspace:*",
     "react": "^19",
     "react-dom": "^19"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.6.1",
-    "@niivue/niivue": "^0.68.1",
+    "@niivue/niivue": "workspace:*",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/bun": "latest",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.1",
     "react": "^19",
     "react-dom": "^19",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^8.0.9"
   }
-}
+}

package/dist/types/nvcontainer.d.ts

@@ -1,10 +0,0 @@
-import type { CSSProperties } from "react";
-import { NvSceneController } from "./nvscene-controller";
-interface NiivueControllerProps {
-    scene: NvSceneController;
-    className?: string;
-    style?: CSSProperties;
-    initialLayout?: string;
-}
-export declare const NvScene: ({ scene, className, style, initialLayout, }: NiivueControllerProps) => import("react/jsx-runtime").JSX.Element;
-export {};