@niivue/nvreact 1.0.0-rc.1 → 1.0.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niivue/nvreact",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.5",
   "private": false,
   "type": "module",
   "main": "./dist/lib.js",
@@ -30,13 +30,13 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@niivue/niivue": "1.0.0-rc.1",
+    "@niivue/niivue": "1.0.0-rc.4",
     "react": "^19",
     "react-dom": "^19"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.6.1",
-    "@niivue/niivue": "1.0.0-rc.1",
+    "@niivue/niivue": "1.0.0-rc.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",

package/dist/lib.js

@@ -1,793 +0,0 @@
-// src/context.tsx
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var NvSceneContext = createContext(null);
-function NvSceneProvider({
-  scene,
-  children
-}) {
-  return /* @__PURE__ */ jsx(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;
-}
-// src/hooks.ts
-import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
-
-// src/nvscene-controller.ts
-import NiiVueGPU, { DRAG_MODE, SHOW_RENDER, SLICE_TYPE } from "@niivue/niivue";
-
-// src/layouts.ts
-var layout1x1 = () => ({
-  top: "0",
-  left: "0",
-  width: "100%",
-  height: "100%"
-});
-var layout2x2 = (_containerElement, index) => {
-  const row = Math.floor(index / 2);
-  const col = index % 2;
-  return {
-    top: `${row * 50}%`,
-    left: `${col * 50}%`,
-    width: "50%",
-    height: "50%"
-  };
-};
-var layout1x2 = (_containerElement, index) => ({
-  top: "0",
-  left: `${index * 50}%`,
-  width: "50%",
-  height: "100%"
-});
-var layout2x1 = (_containerElement, index) => ({
-  top: `${index * 50}%`,
-  left: "0",
-  width: "100%",
-  height: "50%"
-});
-var layout1x3 = (_containerElement, index) => ({
-  top: "0",
-  left: `${index * 33.333}%`,
-  width: "33.333%",
-  height: "100%"
-});
-var layout3x1 = (_containerElement, index) => ({
-  top: `${index * 33.333}%`,
-  left: "0",
-  width: "100%",
-  height: "33.333%"
-});
-var layout3x3 = (_containerElement, index) => {
-  const row = Math.floor(index / 3);
-  const col = index % 3;
-  return {
-    top: `${row * 33.333}%`,
-    left: `${col * 33.333}%`,
-    width: "33.333%",
-    height: "33.333%"
-  };
-};
-var defaultLayouts = {
-  "1x1": {
-    slots: 1,
-    label: "1x1",
-    layoutFunction: layout1x1
-  },
-  "1x2": {
-    slots: 2,
-    label: "1x2",
-    layoutFunction: layout1x2
-  },
-  "2x1": {
-    slots: 2,
-    label: "2x1",
-    layoutFunction: layout2x1
-  },
-  "1x3": {
-    slots: 3,
-    label: "1x3",
-    layoutFunction: layout1x3
-  },
-  "3x1": {
-    slots: 3,
-    label: "3x1",
-    layoutFunction: layout3x1
-  },
-  "2x2": {
-    slots: 4,
-    label: "2x2",
-    layoutFunction: layout2x2
-  },
-  "3x3": {
-    slots: 9,
-    label: "3x3",
-    layoutFunction: layout3x3
-  }
-};
-
-// src/nvscene-controller.ts
-var defaultSliceLayout = [
-  { sliceType: SLICE_TYPE.AXIAL, position: [0, 0, 1, 0.8] },
-  { sliceType: SLICE_TYPE.CORONAL, position: [0, 0.8, 0.5, 0.2] },
-  { sliceType: SLICE_TYPE.SAGITTAL, position: [0.5, 0.8, 0.5, 0.2] }
-];
-var splitSliceLayout = [
-  { sliceType: SLICE_TYPE.SAGITTAL, position: [0, 0, 0.5, 1] },
-  { sliceType: SLICE_TYPE.CORONAL, position: [0.5, 0, 0.5, 0.5] },
-  { sliceType: SLICE_TYPE.AXIAL, position: [0.5, 0.5, 0.5, 0.5] }
-];
-var triSliceLayout = [
-  { sliceType: SLICE_TYPE.AXIAL, position: [0, 0, 0.333, 1] },
-  { sliceType: SLICE_TYPE.CORONAL, position: [0.333, 0, 0.333, 1] },
-  { sliceType: SLICE_TYPE.SAGITTAL, position: [0.666, 0, 0.334, 1] }
-];
-var stackedSliceLayout = [
-  { sliceType: SLICE_TYPE.AXIAL, position: [0, 0, 1, 0.333] },
-  { sliceType: SLICE_TYPE.CORONAL, position: [0, 0.333, 1, 0.333] },
-  { sliceType: SLICE_TYPE.SAGITTAL, position: [0, 0.666, 1, 0.334] }
-];
-var quadSliceLayout = [
-  { sliceType: SLICE_TYPE.AXIAL, position: [0, 0, 0.5, 0.5] },
-  { sliceType: SLICE_TYPE.CORONAL, position: [0.5, 0, 0.5, 0.5] },
-  { sliceType: SLICE_TYPE.SAGITTAL, position: [0, 0.5, 0.5, 0.5] },
-  { sliceType: SLICE_TYPE.RENDER, position: [0.5, 0.5, 0.5, 0.5] }
-];
-var heroRenderSliceLayout = [
-  { sliceType: SLICE_TYPE.RENDER, position: [0, 0, 1, 0.7] },
-  { sliceType: SLICE_TYPE.AXIAL, position: [0, 0.7, 0.333, 0.3] },
-  { sliceType: SLICE_TYPE.CORONAL, position: [0.333, 0.7, 0.333, 0.3] },
-  { sliceType: SLICE_TYPE.SAGITTAL, position: [0.666, 0.7, 0.334, 0.3] }
-];
-var defaultSliceLayouts = {
-  "axial-hero": {
-    label: "Axial Hero",
-    layout: defaultSliceLayout
-  },
-  "sag-left": {
-    label: "Sag Left Split",
-    layout: splitSliceLayout
-  },
-  "tri-h": {
-    label: "Tri Horizontal",
-    layout: triSliceLayout
-  },
-  "tri-v": {
-    label: "Tri Stacked",
-    layout: stackedSliceLayout
-  },
-  "quad-render": {
-    label: "Quad Render",
-    layout: quadSliceLayout
-  },
-  "render-hero": {
-    label: "Render Hero",
-    layout: heroRenderSliceLayout
-  }
-};
-var defaultViewerOptions = {
-  crosshairGap: 5,
-  primaryDragMode: DRAG_MODE.crosshair,
-  secondaryDragMode: DRAG_MODE.pan
-};
-
-class NvSceneController {
-  containerElement = null;
-  viewers = [];
-  currentLayout = "1x1";
-  slots;
-  layouts;
-  onViewerCreated;
-  listeners = new Set;
-  snapshotCache = null;
-  nextId = 0;
-  viewersById = new Map;
-  broadcasting = false;
-  broadcastOptions = { "2d": true, "3d": true };
-  viewerSliceLayouts = new Map;
-  viewerDefaults;
-  eventListeners = new Map;
-  loadingCounts = new Map;
-  viewerErrors = new Map;
-  constructor(layouts = defaultLayouts, viewerDefaults = {}) {
-    this.layouts = layouts;
-    this.slots = this.layouts[this.currentLayout]?.slots ?? 1;
-    this.viewerDefaults = viewerDefaults;
-  }
-  on(event, cb) {
-    if (!this.eventListeners.has(event)) {
-      this.eventListeners.set(event, new Set);
-    }
-    this.eventListeners.get(event)?.add(cb);
-    return () => this.off(event, cb);
-  }
-  off(event, cb) {
-    this.eventListeners.get(event)?.delete(cb);
-  }
-  emit(event, ...args) {
-    const listeners = this.eventListeners.get(event);
-    if (!listeners)
-      return;
-    for (const cb of listeners) {
-      cb(...args);
-    }
-  }
-  subscribe = (listener) => {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  };
-  getSnapshot = () => {
-    if (!this.snapshotCache) {
-      const viewerStates = this.viewers.map((v) => ({
-        id: v.id,
-        loading: this.loadingCounts.get(v.id) ?? 0,
-        errors: this.viewerErrors.get(v.id) ?? []
-      }));
-      this.snapshotCache = {
-        currentLayout: this.currentLayout,
-        viewerCount: this.viewers.length,
-        slots: this.slots,
-        isBroadcasting: this.broadcasting,
-        isLoading: viewerStates.some((s) => s.loading > 0),
-        viewerStates
-      };
-    }
-    return this.snapshotCache;
-  };
-  notify() {
-    this.snapshotCache = null;
-    this.listeners.forEach((listener) => {
-      listener();
-    });
-  }
-  setContainerElement(element) {
-    this.containerElement = element;
-    if (element) {
-      this.updateLayout();
-    }
-  }
-  setLayout(layoutName) {
-    const layoutConfig = this.layouts[layoutName];
-    if (!layoutConfig)
-      return;
-    this.currentLayout = layoutName;
-    this.slots = layoutConfig.slots;
-    while (this.viewers.length > this.slots) {
-      this.removeViewer(this.viewers.length - 1, false);
-    }
-    if (this.containerElement) {
-      while (this.viewers.length < this.slots) {
-        this.addViewer();
-      }
-    }
-    this.updateLayout();
-    this.notify();
-  }
-  updateLayout() {
-    if (!this.containerElement)
-      return;
-    const layoutConfig = this.layouts[this.currentLayout];
-    if (!layoutConfig)
-      return;
-    this.viewers.forEach((viewer, index) => {
-      const position = layoutConfig.layoutFunction(this.containerElement, index, this.viewers.length);
-      Object.assign(viewer.containerDiv.style, {
-        position: "absolute",
-        top: position.top,
-        left: position.left,
-        width: position.width,
-        height: position.height
-      });
-    });
-  }
-  canAddViewer() {
-    return this.viewers.length < this.slots;
-  }
-  getNiivue(index) {
-    return this.viewers[index]?.niivue;
-  }
-  getAllNiivue() {
-    return this.viewers.map((viewer) => viewer.niivue);
-  }
-  forEachNiivue(callback) {
-    this.viewers.forEach((viewer, i) => {
-      callback(viewer.niivue, i);
-    });
-  }
-  hasSyncableContent(nv) {
-    return nv.volumes.length > 0 || nv.meshes.length > 0;
-  }
-  safeBroadcastTo(index, targets) {
-    const viewer = this.viewers[index];
-    if (!viewer)
-      return;
-    try {
-      viewer.niivue.broadcastTo(targets, this.broadcastOptions);
-    } catch (err) {
-      this.addError(viewer.id, err);
-      this.emit("error", index, err);
-    }
-  }
-  rewireBroadcasting() {
-    if (!this.broadcasting) {
-      this.viewers.forEach((_viewer, index) => {
-        this.safeBroadcastTo(index, []);
-      });
-      return;
-    }
-    const syncableViewers = this.viewers.filter((viewer) => this.hasSyncableContent(viewer.niivue));
-    this.viewers.forEach((viewer, index) => {
-      if (!this.hasSyncableContent(viewer.niivue)) {
-        this.safeBroadcastTo(index, []);
-        return;
-      }
-      const others = syncableViewers.filter((v) => v.id !== viewer.id).map((v) => v.niivue);
-      this.safeBroadcastTo(index, others);
-    });
-  }
-  setBroadcasting(enabled, options) {
-    this.broadcasting = enabled;
-    if (options) {
-      this.broadcastOptions = { ...this.broadcastOptions, ...options };
-    }
-    this.rewireBroadcasting();
-    this.notify();
-  }
-  isBroadcasting() {
-    return this.broadcasting;
-  }
-  setViewerSliceLayout(index, layout) {
-    const viewer = this.viewers[index];
-    if (!viewer)
-      return;
-    this.viewerSliceLayouts.set(viewer.id, layout);
-    this.applySliceLayout(viewer.niivue, layout);
-    this.notify();
-  }
-  getViewerSliceLayout(index) {
-    const viewer = this.viewers[index];
-    if (!viewer)
-      return null;
-    return this.viewerSliceLayouts.get(viewer.id) ?? null;
-  }
-  applySliceLayout(nv, layout) {
-    if (layout && layout.length > 0) {
-      nv.customLayout = layout;
-    } else {
-      nv.customLayout = null;
-      nv.sliceType = SLICE_TYPE.AXIAL;
-      nv.showRender = SHOW_RENDER.NEVER;
-    }
-  }
-  getNiivueById(id) {
-    return this.viewersById.get(id)?.niivue;
-  }
-  getViewerById(id) {
-    return this.viewersById.get(id);
-  }
-  async loadVolume(index, opts) {
-    const viewer = this.viewers[index];
-    if (!viewer)
-      throw new Error(`No viewer at index ${index}`);
-    this.incrementLoading(viewer.id);
-    try {
-      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();
-      }
-      return image;
-    } catch (err) {
-      this.addError(viewer.id, err);
-      this.emit("error", index, err);
-      throw err;
-    } finally {
-      this.decrementLoading(viewer.id);
-    }
-  }
-  async loadVolumes(index, opts) {
-    const results = [];
-    for (const o of opts) {
-      results.push(await this.loadVolume(index, o));
-    }
-    return results;
-  }
-  async removeVolume(index, url) {
-    const viewer = this.viewers[index];
-    if (!viewer)
-      return;
-    const nv = viewer.niivue;
-    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();
-      }
-      this.notify();
-    }
-  }
-  findVolume(viewerIndex, volumeIndex) {
-    const viewer = this.viewers[viewerIndex];
-    if (!viewer)
-      return;
-    const nv = viewer.niivue;
-    const vol = nv.volumes[volumeIndex];
-    if (!vol)
-      return;
-    return { nv, vol, volumeIndex };
-  }
-  async setColormap(viewerIndex, volumeIndex, colormap) {
-    const found = this.findVolume(viewerIndex, volumeIndex);
-    if (!found)
-      return;
-    await found.nv.setVolume(found.volumeIndex, { colormap });
-    this.emit("colormapChanged", viewerIndex, volumeIndex, colormap);
-    this.notify();
-  }
-  async setCalMinMax(viewerIndex, volumeIndex, calMin, calMax) {
-    const found = this.findVolume(viewerIndex, volumeIndex);
-    if (!found)
-      return;
-    await found.nv.setVolume(found.volumeIndex, { calMin, calMax });
-    this.emit("intensityChanged", viewerIndex, volumeIndex, calMin, calMax);
-    this.notify();
-  }
-  async setOpacity(viewerIndex, volumeIndex, opacity) {
-    const found = this.findVolume(viewerIndex, volumeIndex);
-    if (!found)
-      return;
-    await found.nv.setVolume(found.volumeIndex, { opacity });
-    this.emit("opacityChanged", viewerIndex, volumeIndex, opacity);
-    this.notify();
-  }
-  incrementLoading(id) {
-    this.loadingCounts.set(id, (this.loadingCounts.get(id) ?? 0) + 1);
-    this.notify();
-  }
-  decrementLoading(id) {
-    const count = (this.loadingCounts.get(id) ?? 1) - 1;
-    this.loadingCounts.set(id, Math.max(0, count));
-    this.notify();
-  }
-  addError(id, error) {
-    const errors = this.viewerErrors.get(id) ?? [];
-    errors.push(error);
-    this.viewerErrors.set(id, errors);
-  }
-  addViewer(options) {
-    if (!this.containerElement) {
-      throw new Error("Container element not set");
-    }
-    if (!this.canAddViewer()) {
-      throw new Error(`Cannot add viewer: slot limit of ${this.slots} reached`);
-    }
-    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 = {
-      ...defaultViewerOptions,
-      ...this.viewerDefaults,
-      ...options
-    };
-    const niivue = new NiiVueGPU(mergedOptions);
-    const id = `nv-${this.nextId++}`;
-    this.viewerSliceLayouts.set(id, null);
-    this.loadingCounts.set(id, 0);
-    this.viewerErrors.set(id, []);
-    const viewer = {
-      id,
-      niivue,
-      canvasElement: canvas,
-      containerDiv
-    };
-    this.viewers.push(viewer);
-    this.viewersById.set(id, viewer);
-    this.updateLayout();
-    const index = this.viewers.length - 1;
-    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.addEventListener("meshLoaded", () => {
-      if (this.broadcasting) {
-        this.rewireBroadcasting();
-      }
-    });
-    this.onViewerCreated?.(niivue, index);
-    this.emit("viewerCreated", niivue, index);
-    this.notify();
-    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)
-      return;
-    const viewer = this.viewers[index];
-    if (!viewer)
-      return;
-    this.viewersById.delete(viewer.id);
-    this.viewerSliceLayouts.delete(viewer.id);
-    this.loadingCounts.delete(viewer.id);
-    this.viewerErrors.delete(viewer.id);
-    this.disposeViewer(viewer);
-    viewer.containerDiv.remove();
-    this.viewers.splice(index, 1);
-    this.updateLayout();
-    if (this.broadcasting && this.viewers.length > 0) {
-      this.setBroadcasting(true);
-    }
-    this.emit("viewerRemoved", index);
-    if (shouldNotify) {
-      this.notify();
-    }
-  }
-  disposeViewer(viewer) {
-    viewer.niivue.destroy();
-    viewer.canvasElement.width = 0;
-    viewer.canvasElement.height = 0;
-  }
-  clearViewers() {
-    this.broadcasting = false;
-    this.viewers.forEach((viewer) => {
-      this.disposeViewer(viewer);
-      viewer.containerDiv.remove();
-    });
-    this.viewers = [];
-    this.viewersById.clear();
-    this.loadingCounts.clear();
-    this.viewerErrors.clear();
-    this.notify();
-  }
-  reset() {
-    this.clearViewers();
-    this.currentLayout = "1x1";
-    this.slots = this.layouts[this.currentLayout]?.slots ?? 1;
-    this.notify();
-  }
-}
-
-// 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,
-    calMin: opts.calMin,
-    calMax: opts.calMax,
-    opacity: opts.opacity
-  };
-}
-var NvViewer = ({
-  volumes,
-  options,
-  sliceType = SLICE_TYPE2.AXIAL,
-  className,
-  style,
-  onLocationChange,
-  onImageLoaded,
-  onError
-}) => {
-  const containerRef = useRef3(null);
-  const nvRef = useRef3(null);
-  const loadedVolumesRef = useRef3(new Map);
-  const onLocationChangeRef = useRef3(onLocationChange);
-  onLocationChangeRef.current = onLocationChange;
-  const onImageLoadedRef = useRef3(onImageLoaded);
-  onImageLoadedRef.current = onImageLoaded;
-  const onErrorRef = useRef3(onError);
-  onErrorRef.current = onError;
-  useEffect3(() => {
-    const container = containerRef.current;
-    if (!container)
-      return;
-    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%";
-    container.appendChild(canvas);
-    const mergedOptions = {
-      ...defaultViewerOptions,
-      ...options
-    };
-    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.resize();
-    });
-    ro.observe(container);
-    return () => {
-      ro.disconnect();
-      nv.destroy();
-      canvas.width = 0;
-      canvas.height = 0;
-      canvas.remove();
-      nvRef.current = null;
-      loadedVolumesRef.current.clear();
-    };
-  }, [sliceType, options]);
-  useEffect3(() => {
-    const nv = nvRef.current;
-    if (nv) {
-      nv.sliceType = sliceType;
-    }
-  }, [sliceType]);
-  useEffect3(() => {
-    const nv = nvRef.current;
-    if (!nv)
-      return;
-    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 volIdx = nv.volumes.findIndex((v) => v.url === url || v.name === url);
-        if (volIdx >= 0) {
-          nv.model.removeVolume(volIdx);
-          nv.updateGLVolume();
-        }
-        currentVolumes.delete(url);
-      }
-    }
-    for (const opts of volumes ?? []) {
-      const urlKey = typeof opts.url === "string" ? opts.url : opts.url.name;
-      if (!currentVolumes.has(urlKey)) {
-        const props = extractVisualProps(opts);
-        currentVolumes.set(urlKey, props);
-        nv.addVolume(opts).catch((err) => {
-          currentVolumes.delete(urlKey);
-          onErrorRef.current?.(err);
-        });
-      } else {
-        const prev = currentVolumes.get(urlKey);
-        const next = extractVisualProps(opts);
-        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) {
-          updates.colormap = next.colormap;
-        }
-        if (next.calMin !== undefined && next.calMin !== prev.calMin) {
-          updates.calMin = next.calMin;
-        }
-        if (next.calMax !== undefined && next.calMax !== prev.calMax) {
-          updates.calMax = next.calMax;
-        }
-        if (next.opacity !== undefined && next.opacity !== prev.opacity) {
-          updates.opacity = next.opacity;
-        }
-        if (Object.keys(updates).length > 0) {
-          nv.setVolume(volIdx, updates);
-        }
-        currentVolumes.set(urlKey, next);
-      }
-    }
-  }, [volumes]);
-  return /* @__PURE__ */ jsx3("div", {
-    ref: containerRef,
-    className,
-    style: { position: "relative", ...style }
-  });
-};
-export {
-  useSceneEvent,
-  useSceneContext,
-  useScene,
-  useNiivue,
-  triSliceLayout,
-  stackedSliceLayout,
-  splitSliceLayout,
-  quadSliceLayout,
-  heroRenderSliceLayout,
-  defaultViewerOptions,
-  defaultSliceLayouts,
-  defaultSliceLayout,
-  defaultLayouts,
-  SLICE_TYPE,
-  NvViewer,
-  NvSceneProvider,
-  NvSceneController,
-  NvScene
-};

package/dist/types/context.d.ts

@@ -1,7 +0,0 @@
-import { type ReactNode } from 'react';
-import type { NvSceneController } from './nvscene-controller';
-export declare function NvSceneProvider({ scene, children, }: {
-    scene: NvSceneController;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function useSceneContext(): NvSceneController;

package/dist/types/hooks.d.ts

@@ -1,10 +0,0 @@
-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").default | undefined;
-export declare function useSceneEvent<E extends keyof NvSceneEventMap>(scene: NvSceneController, event: E, callback: NvSceneEventMap[E]): void;

package/dist/types/layouts.d.ts

@@ -1,20 +0,0 @@
-export interface CanvasPosition {
-    top: string;
-    left: string;
-    width: string;
-    height: string;
-}
-export type LayoutFunction = (containerElement: HTMLElement, index: number, total: number) => CanvasPosition;
-export interface LayoutConfig {
-    slots: number;
-    label: string;
-    layoutFunction: LayoutFunction;
-}
-export declare const layout1x1: LayoutFunction;
-export declare const layout2x2: LayoutFunction;
-export declare const layout1x2: LayoutFunction;
-export declare const layout2x1: LayoutFunction;
-export declare const layout1x3: LayoutFunction;
-export declare const layout3x1: LayoutFunction;
-export declare const layout3x3: LayoutFunction;
-export declare const defaultLayouts: Record<string, LayoutConfig>;

package/dist/types/lib.d.ts

@@ -1,9 +0,0 @@
-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,138 +0,0 @@
-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: NiiVueGPU, index: number) => void;
-export interface ViewerSlot {
-    id: string;
-    niivue: NiiVueGPU;
-    canvasElement: HTMLCanvasElement;
-    containerDiv: HTMLDivElement;
-}
-export interface NvSceneControllerSnapshot {
-    currentLayout: string;
-    viewerCount: number;
-    slots: number;
-    isBroadcasting: boolean;
-    isLoading: boolean;
-    viewerStates: ViewerState[];
-}
-export interface BroadcastOptions {
-    '2d': boolean;
-    '3d': boolean;
-}
-export interface SliceLayoutTile {
-    sliceType: number;
-    position: [number, number, number, number];
-    sliceMM?: number;
-}
-export interface SliceLayoutConfig {
-    label: string;
-    layout: SliceLayoutTile[];
-}
-/**
- * Default slice layout: Axial as hero (80% height), coronal and sagittal below (20% height each, side by side)
- */
-export declare const defaultSliceLayout: SliceLayoutTile[];
-/**
- * Split view: sagittal left, coronal/axial stacked on the right.
- */
-export declare const splitSliceLayout: SliceLayoutTile[];
-/**
- * Tri-fan: three equal horizontal panels.
- */
-export declare const triSliceLayout: SliceLayoutTile[];
-/**
- * Stacked: three equal vertical stacks.
- */
-export declare const stackedSliceLayout: SliceLayoutTile[];
-/**
- * Quad: axial/coronal/sagittal with a render tile.
- */
-export declare const quadSliceLayout: SliceLayoutTile[];
-/**
- * Hero render with three small orthogonal slices below.
- */
-export declare const heroRenderSliceLayout: SliceLayoutTile[];
-export declare const defaultSliceLayouts: Record<string, SliceLayoutConfig>;
-type Listener = () => void;
-export declare const defaultViewerOptions: Partial<NiiVueOptions>;
-/**
- * An NvSceneController is a declarative representation of what we want to render with Niivue.
- *
- * A scene can contain multiple Niivue instances. Each Niivue instance has its own
- * canvas element for the WebGL2 context. All canvas elements are wrapped in container
- * divs that are children of the main scene container element.
- *
- * Canvas elements are added/removed on-demand based on the scene definition.
- *
- * The scene layout controls the position of each canvas via layout functions that
- * return absolute positioning styles. The scene container is responsive and maintains
- * the requested layout proportionally.
- */
-export declare class NvSceneController {
-    containerElement: HTMLElement | null;
-    viewers: ViewerSlot[];
-    currentLayout: string;
-    slots: number;
-    layouts: Record<string, LayoutConfig>;
-    onViewerCreated?: NiivueCallback;
-    private listeners;
-    private snapshotCache;
-    private nextId;
-    private viewersById;
-    private broadcasting;
-    private broadcastOptions;
-    private viewerSliceLayouts;
-    private viewerDefaults;
-    private eventListeners;
-    private loadingCounts;
-    private viewerErrors;
-    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;
-    subscribe: (listener: Listener) => (() => void);
-    getSnapshot: () => NvSceneControllerSnapshot;
-    private notify;
-    setContainerElement(element: HTMLElement | null): void;
-    setLayout(layoutName: string): void;
-    updateLayout(): void;
-    canAddViewer(): boolean;
-    getNiivue(index: number): NiiVueGPU | undefined;
-    getAllNiivue(): NiiVueGPU[];
-    forEachNiivue(callback: NiivueCallback): void;
-    private hasSyncableContent;
-    private safeBroadcastTo;
-    private rewireBroadcasting;
-    setBroadcasting(enabled: boolean, options?: Partial<BroadcastOptions>): void;
-    isBroadcasting(): boolean;
-    setViewerSliceLayout(index: number, layout: SliceLayoutTile[] | null): void;
-    getViewerSliceLayout(index: number): SliceLayoutTile[] | null;
-    private applySliceLayout;
-    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): 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): 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): Promise<void>;
-    private incrementLoading;
-    private decrementLoading;
-    private addError;
-    addViewer(options?: Partial<NiiVueOptions>): Promise<ViewerSlot>;
-    removeViewer(index: number, shouldNotify?: boolean): void;
-    private disposeViewer;
-    clearViewers(): void;
-    reset(): void;
-}

package/dist/types/nvscene.d.ts

@@ -1,10 +0,0 @@
-import type { CSSProperties } from 'react';
-import type { 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 {};

package/dist/types/nvviewer.d.ts

@@ -1,14 +0,0 @@
-import type { NiiVueOptions, NVImage } from '@niivue/niivue';
-import type { CSSProperties } from 'react';
-import type { ImageFromUrlOptions } from './types';
-export interface NvViewerProps {
-    volumes?: ImageFromUrlOptions[];
-    options?: Partial<NiiVueOptions>;
-    sliceType?: number;
-    className?: string;
-    style?: CSSProperties;
-    onLocationChange?: (data: unknown) => void;
-    onImageLoaded?: (volume: NVImage) => void;
-    onError?: (error: unknown) => void;
-}
-export declare const NvViewer: ({ volumes, options, sliceType, className, style, onLocationChange, onImageLoaded, onError, }: NvViewerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types.d.ts

@@ -1,20 +0,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: NiiVueGPU, index: number) => void;
-    viewerRemoved: (index: number) => void;
-    locationChange: (viewerIndex: number, data: unknown) => void;
-    imageLoaded: (viewerIndex: number, volume: NVImage) => void;
-    error: (viewerIndex: number, error: unknown) => void;
-    volumeAdded: (viewerIndex: number, imageOptions: ImageFromUrlOptions, image: NVImage) => void;
-    volumeRemoved: (viewerIndex: number, url: string) => void;
-    colormapChanged: (viewerIndex: number, volumeIndex: number, colormap: string) => void;
-    intensityChanged: (viewerIndex: number, volumeIndex: number, cal_min: number, cal_max: number) => void;
-    opacityChanged: (viewerIndex: number, volumeIndex: number, opacity: number) => void;
-}
-export interface ViewerState {
-    id: string;
-    loading: number;
-    errors: unknown[];
-}