@vitessce/all 4.0.3 → 4.0.4

package/dist/{GeometryAndMeshXR-DngaDWBF.js → GeometryAndMeshXR-CvjW5GGO.js}

@@ -3,7 +3,7 @@ import { useRef, useEffect, useState } from "react";
 import { useThree, useFrame } from "@react-three/fiber";
 import { Bvh } from "@react-three/drei";
 import { Matrix4, Vector3, Box3, FrontSide } from "three";
-import { g as getXRModule, i as isValidGeometrySize, M as MeasureLine, s as stringifyLineData } from "./index-CwGBUQIk.js";
+import { g as getXRModule, i as isValidGeometrySize, M as MeasureLine, s as stringifyLineData } from "./index-JE2SuNrQ.js";
 const { useXR, useXRInputSourceState } = getXRModule();
 function getHandJoint(hand, jointName) {
   return hand.get(jointName);

package/dist/{ReactNeuroglancer-DSiLDSuM.js → ReactNeuroglancer-D4iTpbeC.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
-import { a as getDefaultExportFromCjs, d as requireAssign, f as require_export, h as require_core, j as require_fails, k as require_toObject, m as require_objectKeys, n as require_cof, o as require_wks, p as require_iterators, q as requireWeb_dom_iterable, s as requireEs6_string_iterator, t as require_anObject, v as require_hide, w as require_ctx, x as require_toLength, y as require_global, z as require_objectDp, A as require_descriptors, D as require_isObject, E as require_objectCreate, F as require_iterDefine, G as require_iterStep, H as require_meta, I as require_isArray, J as require_iobject, K as require_setToStringTag, M as require_aFunction, N as requireIterator, O as require_propertyDesc, c as commonjsGlobal, P as requireEs6_symbol, Q as requireDefineProperty, R as require_toIobject, S as require_objectGopd, T as require_html, U as require_domCreate, V as require_library, W as requireSymbol, X as require_objectPie, Y as require_has, Z as require_redefine, _ as require_objectAssign, $ as GREY_HEX, a0 as diffCameraState } from "./index-B8FH88N6.js";
+import { a as getDefaultExportFromCjs, d as requireAssign, f as require_export, h as require_core, j as require_fails, k as require_toObject, m as require_objectKeys, n as require_cof, o as require_wks, p as require_iterators, q as requireWeb_dom_iterable, s as requireEs6_string_iterator, t as require_anObject, v as require_hide, w as require_ctx, x as require_toLength, y as require_global, z as require_objectDp, A as require_descriptors, D as require_isObject, E as require_objectCreate, F as require_iterDefine, G as require_iterStep, H as require_meta, I as require_isArray, J as require_iobject, K as require_setToStringTag, M as require_aFunction, N as requireIterator, O as require_propertyDesc, c as commonjsGlobal, P as requireEs6_symbol, Q as requireDefineProperty, R as require_toIobject, S as require_objectGopd, T as require_html, U as require_domCreate, V as require_library, W as requireSymbol, X as require_objectPie, Y as require_has, Z as require_redefine, _ as require_objectAssign, $ as GREY_HEX, a0 as diffCameraState } from "./index-BnKmchw3.js";
 var assignExports = requireAssign();
 const _Object$assign = /* @__PURE__ */ getDefaultExportFromCjs(assignExports);
 var es6_object_keys = {};

package/dist/{XREnterButton-Beha7PBD.js → XREnterButton-pTH1jk6g.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { x as xrStore } from "./xrStore-Dhi1LSJi.js";
+import { x as xrStore } from "./xrStore-D2rxhSUn.js";
 function XREnterButton() {
   const [supported, setSupported] = useState(false);
   const [entered, setEntered] = useState(false);

package/dist/{XRSceneComponents-CNuqVsYi.js → XRSceneComponents-DEj-tQkm.js}

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useThree, useFrame } from "@react-three/fiber";
-import { g as getXRModule } from "./index-CwGBUQIk.js";
+import { g as getXRModule } from "./index-JE2SuNrQ.js";
 const { useXRInputSourceState } = getXRModule();
 function getHandJoint(hand, jointName) {
   return hand.get(jointName);

package/dist/{XRWrapper-BsV3wgJG.js → XRWrapper-DIEbbPAq.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { g as getXRModule } from "./index-CwGBUQIk.js";
-import { x as xrStore } from "./xrStore-Dhi1LSJi.js";
+import { g as getXRModule } from "./index-JE2SuNrQ.js";
+import { x as xrStore } from "./xrStore-D2rxhSUn.js";
 const { XR } = getXRModule();
 function XRWrapper({ children }) {
   return jsx(XR, { store: xrStore, children });

package/dist/{deflate-BnG3V84V.js → deflate-BtdFXYzo.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-SxljTded.js";
-import { B as BaseDecoder } from "./index-B8FH88N6.js";
+import { B as BaseDecoder } from "./index-BnKmchw3.js";
 class DeflateDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     return inflate_1(new Uint8Array(buffer)).buffer;

package/dist/{higlass-4OKx7mdy.js → higlass-BnXDiYjj.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { createContext, isValidElement, PureComponent, Component, useMemo, useState, useRef, useEffect, useCallback, memo, useContext, useReducer, useLayoutEffect } from "react";
-import { r as requireObjectAssign, a as getDefaultExportFromCjs$1, c as commonjsGlobal, e as earcut } from "./index-B8FH88N6.js";
+import { r as requireObjectAssign, a as getDefaultExportFromCjs$1, c as commonjsGlobal, e as earcut } from "./index-BnKmchw3.js";
 import ReactDOM__default, { unstable_batchedUpdates, createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 function finallyConstructor(callback) {

package/dist/{index-B8FH88N6.js → index-BnKmchw3.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useContext, forwardRef as forwardRef$1, useRef, useMemo as useMemo$1, createContext, createElement, isValidElement, cloneElement, Children, PureComponent, useEffect, useState, version as version$6, useLayoutEffect as useLayoutEffect$1, useImperativeHandle, Component as Component$1, useCallback, Suspense, useReducer } from "react";
-import { useLoaders, useCoordinationScopes, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useExpandedFeatureLabelsMap, useSampleSetsData, useSampleEdgesData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useMergeCoordination, useCoordinationScopesBy, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationScopesNonNull, useComplexCoordination, useComplexCoordinationSecondary, useGridItemSize, useMultiObsPoints, usePointMultiObsLabels, usePointMultiObsFeatureMatrixIndices, useMultiObsSpots, useSpotMultiObsSets, useSpotMultiFeatureLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useMultiObsSegmentations, useSegmentationMultiObsSets, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useMultiImages, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, useViewConfigStoreApi, useViewConfig, useSetViewConfig, createLoaders, useWarning, useGenomicProfilesData, useMatchingLoader, useColumnNameMapping, useFeatureStatsData, useObsSetStatsData, useAsyncFunction, useFeatureSetStatsData, useComparisonMetadata, logConfig, VitSContainer } from "@vitessce/vit-s";
+import { useLoaders, useCoordinationScopes, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useExpandedFeatureLabelsMap, useSampleSetsData, useSampleEdgesData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useMergeCoordination, useCoordinationScopesBy, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationScopesNonNull, useComplexCoordination, useComplexCoordinationSecondary, useGridItemSize, useMultiObsPoints, usePointMultiObsLabels, usePointMultiObsFeatureMatrixIndices, useMultiObsSpots, useSpotMultiObsSets, useSpotMultiFeatureLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useMultiObsSegmentations, useSegmentationMultiObsSets, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useMultiImages, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, useViewConfigStoreApi, useViewConfig, useSetViewConfig, createLoaders, useWarning, useGenomicProfilesData, shallowDiff, shallowDiffByChannelWithKeys, shallowDiffByChannelCoordinationWithKeys, shallowDiffByChannel, shallowDiffByLayer, shallowDiffByLayerCoordinationWithKeys, useMemoCustomComparison, useMatchingLoader, useColumnNameMapping, useFeatureStatsData, useObsSetStatsData, useAsyncFunction, useFeatureSetStatsData, useComparisonMetadata, logConfig, VitSContainer } from "@vitessce/vit-s";
 import { jsx as jsx$1, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
@@ -18376,7 +18376,7 @@ const { tss } = createTss({
   },
   "usePlugin": useMuiThemeStyleOverridesPlugin
 });
-const useStyles$y = tss.create({});
+const useStyles$z = tss.create({});
 function createChainedFunction$1(...funcs) {
   return funcs.reduce((acc, func) => {
     if (func == null) {
@@ -72664,7 +72664,7 @@ const Popper = React.forwardRef((props, ref2) => {
   }, [handlePopperRef]);
   React.useImperativeHandle(popperRefProp, () => popperRef.current, []);
   const [exited, setExited] = React.useState(true);
-  const { theme } = useStyles$y();
+  const { theme } = useStyles$z();
   const rtlPlacement = flipPlacement(initialPlacement, theme);
   const [placement, setPlacement] = React.useState(rtlPlacement);
   React.useEffect(() => {
@@ -73398,7 +73398,7 @@ var VariableSizeList$1 = /* @__PURE__ */ createListComponent({
 });
 const VariableSizeList = VariableSizeList$1;
 const LIST_ROW_HEIGHT$1 = 48;
-const useStyles$x = makeStyles()(() => ({
+const useStyles$y = makeStyles()(() => ({
   searchInput: {
     lineHeight: "initial",
     height: "auto !important"
@@ -73438,7 +73438,7 @@ const ListboxComponent$1 = React__default.forwardRef((props, ref2) => {
 });
 function SimpleAutocomplete(props) {
   const { getMatches, onChange, textInputLabel = "Enter a gene", getItemLabel = (option) => option.label } = props;
-  const { classes: classes2 } = useStyles$x();
+  const { classes: classes2 } = useStyles$y();
   const [potentialItems, setPotentialItems] = useState([]);
   const handleInputChange = async (_event, value2) => {
     if (!value2) {
@@ -82988,7 +82988,7 @@ function defaultUrlTransform(value2) {
   }
   return "";
 }
-const useStyles$w = makeStyles()((theme) => ({
+const useStyles$x = makeStyles()((theme) => ({
   description: {
     "& p, details, table": {
       fontSize: "80%",
@@ -83025,7 +83025,7 @@ const useStyles$w = makeStyles()((theme) => ({
 }));
 function Description(props) {
   const { description: description2, metadata: metadata2, descriptionType } = props;
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   return jsxs("div", { className: classes2.description, children: [descriptionType && descriptionType === DescriptionType.MARKDOWN ? jsx$1(Markdown, { children: description2 }) : jsx$1("p", { children: description2 }), metadata2 && Array.from(metadata2.entries()).map(([layerIndex, { name: layerName, metadata: metadataRecord }]) => metadataRecord && Object.entries(metadataRecord).length > 0 ? jsxs("details", { children: [jsx$1("summary", { children: layerName }), jsx$1("div", { className: classes2.metadataContainer, children: jsx$1("table", { children: jsx$1("tbody", { children: Object.entries(metadataRecord).map(([key2, value2]) => jsxs("tr", { children: [jsx$1("th", { title: key2, children: key2 }), jsx$1("td", { title: value2, children: value2 })] }, key2)) }) }) })] }, layerIndex) : null)] });
 }
 function DescriptionSubscriber(props) {
@@ -98135,7 +98135,7 @@ const Tooltip$2 = /* @__PURE__ */ React.forwardRef((props, ref2) => {
   }, extraProps), getChildren());
 });
 const nodeHeight = 32;
-const useStyles$v = makeStyles()((theme) => ({
+const useStyles$w = makeStyles()((theme) => ({
   setsManager: {
     position: "relative",
     width: "100%",
@@ -98302,7 +98302,7 @@ const useStyles$v = makeStyles()((theme) => ({
 }));
 function SetsManagerTreeGlobalStyles(props) {
   const { classes: classes2 } = props;
-  const { theme } = useStyles$y();
+  const { theme } = useStyles$z();
   return jsx$1(ScopedGlobalStyles, { parentClassName: classes2.setsManagerTree, styles: {
     ".rc-tree": {
       paddingLeft: "0",
@@ -98643,7 +98643,7 @@ function HelpTooltipGlobalStyles(props) {
 }
 function PopoverGlobalStyles(props) {
   const { classes: classes2 } = props;
-  const { theme } = useStyles$y();
+  const { theme } = useStyles$z();
   return jsx$1(ScopedGlobalStyles, { parentClassName: classes2.popover, styles: {
     ".rc-tooltip-inner": {
       boxSizing: "border-box",
@@ -103327,7 +103327,7 @@ function NamedSetNodeStatic(props) {
   const onClick = level === 0 && !expanded ? () => onCheckLevel(nodeKey, nextLevelToCheck) : () => onNodeView(path2);
   const tooltipProps = disableTooltip ? { visible: false } : {};
   const popoverMenuConfig = makeNodeViewMenuConfig(props);
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsxs("span", { children: [jsx$1(HelpTooltip, { title: tooltipText, ...tooltipProps, children: jsx$1("button", { type: "button", onClick, onKeyPress: (e3) => callbackOnKeyPress(e3, "v", () => onNodeView(path2)), className: classes2.titleButton, children: title2 }) }), popoverMenuConfig.length > 0 ? jsx$1(PopoverMenu, { menuConfig: makeNodeViewMenuConfig(props), color: level > 0 && editable ? color2 || getDefaultColor(theme) : null, setColor: (c2) => onNodeSetColor(path2, c2), children: jsx$1("span", { children: jsx$1(SvgMenu, { className: classes2.nodeMenuIcon, "aria-label": "Open Node View Menu" }) }) }) : null, level > 0 && isChecking ? checkbox2 : null, level > 0 && jsx$1("span", { className: classes2.nodeSizeLabel, children: niceSize })] });
 }
 function NamedSetNodeEditing(props) {
@@ -103339,7 +103339,7 @@ function NamedSetNodeEditing(props) {
       onNodeSetName(path2, currentTitle, true);
     }
   }
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsxs("span", { className: classes2.titleButtonWithInput, children: [jsx$1("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: true,
@@ -103365,7 +103365,7 @@ function LevelsButtons(props) {
       onCheckLevel(nodeKey, newLevel);
     }
   }
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsx$1("div", { className: classes2.levelButtonsContainer, children: range$e(1, height2 + 1).map((i2) => {
     const isChecked = isEqual$3(path2, checkedLevelPath) && i2 === checkedLevelIndex;
     return jsx$1("div", { children: jsx$1(HelpTooltip, { title: getLevelTooltipText(i2), children: jsx$1("input", { className: clsx(classes2.levelRadioButton, { [classes2.levelRadioButtonChecked]: isChecked && !hasColorEncoding }), type: "checkbox", value: i2, checked: isChecked && hasColorEncoding, onChange: onCheck }) }) }, i2);
@@ -103449,7 +103449,7 @@ let TreeNode$1 = class TreeNode extends TreeNode$2 {
 };
 function PlusButton(props) {
   const { datatype, onError, onImportTree, onCreateLevelZeroNode, importable, editable } = props;
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   const onImport = useCallback((importHandler, mimeType) => () => {
     const uploadInputNode = document.createElement("input");
     uploadInputNode.setAttribute("type", "file");
@@ -103566,7 +103566,7 @@ function SetsManager(props) {
       }, onNodeCheckNewName, onNodeSetIsEditing: setIsEditingNodeName, onNodeRemove, onExportLevelZeroNodeJSON, onExportLevelZeroNodeTabular, onExportSetJSON, disableTooltip: isDragging, onDragStart: () => setIsDragging(true), onDragEnd: () => setIsDragging(false), children: renderTreeNodes(node2.children, readOnly, newPath) }, pathToKey(newPath));
     });
   }
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsxs("div", { className: classes2.setsManager, children: [jsx$1(SetsManagerTreeGlobalStyles, { classes: classes2 }), jsxs("div", { className: classes2.setsManagerTree, children: [jsx$1(Tree$1, { draggable: false, checkable, checkedKeys: setSelectionKeys, expandedKeys: setExpansionKeys, autoExpandParent, onCheck: (checkedKeys, info2) => onCheckNode(info2.node.props.nodeKey, info2.checked), onExpand: (expandedKeys, info2) => onExpandNode(expandedKeys, info2.node.props.nodeKey, info2.expanded), children: renderTreeNodes(processedSets.tree, true, []) }), jsx$1(Tree$1, { draggable: true, checkable, checkedKeys: additionalSetSelectionKeys, expandedKeys: additionalSetExpansionKeys, autoExpandParent, onCheck: (checkedKeys, info2) => onCheckNode(info2.node.props.nodeKey, info2.checked), onExpand: (expandedKeys, info2) => onExpandNode(expandedKeys, info2.node.props.nodeKey, info2.expanded), onDrop: (info2) => {
     const { eventKey: dropKey } = info2.node.props;
     const { eventKey: dragKey } = info2.dragNode.props;
@@ -209531,22 +209531,22 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-UWcztCkw.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-xVcb3-tK.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-Y5j8FDrQ.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-B1XPe-af.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-9VJS3-Bw.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-BnG3V84V.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-Dm4fdK8S.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-DOW9md97.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-BtdFXYzo.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-DI5XXjyK.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-D1J26SPX.js").then(async (m2) => {
+  () => import("./lerc-udUVD1VM.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-C-QWVV-f.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-C8U2Oy62.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -226320,7 +226320,7 @@ class ContourLayerWithText extends ContourLayer {
 }
 ContourLayerWithText.layerName = "ContourLayerWithText";
 ContourLayerWithText.defaultProps = defaultProps;
-const useStyles$u = makeStyles()(() => ({
+const useStyles$v = makeStyles()(() => ({
   toolButton: {
     display: "inline-flex",
     "&:active": {
@@ -226382,12 +226382,12 @@ const useStyles$u = makeStyles()(() => ({
 }));
 function IconTool(props) {
   const { alt, onClick, isActive: isActive2, children: children3 } = props;
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   return jsx$1("button", { className: clsx(classes2.toolIcon, { [classes2.toolActive]: isActive2 }), onClick, type: "button", title: alt, children: children3 });
 }
 function IconButton(props) {
   const { alt, onClick, children: children3 } = props;
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   return jsx$1("button", { className: clsx(classes2.toolIcon, classes2.toolButton), onClick, type: "button", title: alt, children: children3 });
 }
 function ToolMenu(props) {
@@ -226395,7 +226395,7 @@ function ToolMenu(props) {
   const lassoIconAltText = "Select lasso";
   const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true, recenter: true }, recenterOnClick = () => {
   } } = props;
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   const onRecenterButtonCLick = () => {
     recenterOnClick();
   };
@@ -227552,7 +227552,7 @@ function ScatterplotOptions(props) {
     id: `feature-aggregation-strategy-${scatterplotOptionsId}`
   }, children: FEATURE_AGGREGATION_STRATEGIES$2.map((opt) => jsx$1("option", { value: opt, children: capitalize$3(opt) }, opt)) }) })] }) : null] });
 }
-const useStyles$t = makeStyles()((theme) => ({
+const useStyles$u = makeStyles()((theme) => ({
   tooltipAnchor: {
     position: "relative",
     width: "0px",
@@ -227583,7 +227583,7 @@ const useStyles$t = makeStyles()((theme) => ({
 function Tooltip3(props) {
   const { x: x2, y: y2, parentWidth, parentHeight, children: children3 } = props;
   const ref2 = useRef();
-  const { classes: classes2 } = useStyles$t();
+  const { classes: classes2 } = useStyles$u();
   const [placementX, setPlacementX] = useState("start");
   const [placementY, setPlacementY] = useState("bottom");
   const getTooltipContainer = useVitessceContainer(ref2);
@@ -227599,7 +227599,7 @@ function Tooltip3(props) {
   }, [x2, y2, parentWidth, parentHeight]);
   return jsx$1("div", { ref: ref2, className: classes2.tooltipAnchor, children: ref2 && ref2.current ? jsx$1(Popper, { open: true, anchorEl: ref2.current, container: getTooltipContainer, transition: true, placement: `${placementY}-${placementX}`, children: jsx$1(Paper, { elevation: 8, className: classes2.tooltipContent, children: children3 }) }) : null });
 }
-const useStyles$s = makeStyles()((theme) => ({
+const useStyles$t = makeStyles()((theme) => ({
   cellEmphasisCrosshair: {
     zIndex: 50,
     position: "absolute",
@@ -227610,7 +227610,7 @@ const useStyles$s = makeStyles()((theme) => ({
 }));
 function Tooltip2D(props) {
   const { parentUuid, sourceUuid, x: x2, y: y2, parentWidth, parentHeight, children: children3 } = props;
-  const { classes: classes2 } = useStyles$s();
+  const { classes: classes2 } = useStyles$t();
   if (x2 < 0 || x2 > parentWidth || y2 < 0 || y2 > parentHeight) {
     return null;
   }
@@ -231522,7 +231522,7 @@ function getXlinkHref(cmap) {
   const xlinkHref = ramp(color2.copy().domain(quantize$3(interpolate$1$1(0, 1), n3))).toDataURL();
   return xlinkHref;
 }
-const useStyles$r = makeStyles()(() => ({
+const useStyles$s = makeStyles()(() => ({
   legend: {
     position: "relative",
     // Needed for absolute positioning of slider overlay
@@ -231719,7 +231719,7 @@ function Legend(props) {
     contourThresholds
   } = props;
   const svgRef = useRef(null);
-  const { classes: classes2 } = useStyles$r();
+  const { classes: classes2 } = useStyles$s();
   const [localRange, setLocalRange] = useState(featureValueColormapRange);
   useEffect(() => {
     setLocalRange(featureValueColormapRange);
@@ -232053,7 +232053,7 @@ function Legend(props) {
     }
   } })] })] });
 }
-const useStyles$q = makeStyles()(() => ({
+const useStyles$r = makeStyles()(() => ({
   multiLegend: {
     position: "absolute",
     top: "0px",
@@ -232080,7 +232080,7 @@ function MultiLegend(props) {
     pointLayerCoordination,
     pointMultiIndicesData
   } = props;
-  const { classes: classes2 } = useStyles$q();
+  const { classes: classes2 } = useStyles$r();
   const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
   const reversedSpotLayerScopes = useMemo$1(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
   const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].reverse(), [pointLayerScopes]);
@@ -232173,7 +232173,7 @@ function MultiLegend(props) {
     }) : null;
   }) : null] });
 }
-const useStyles$p = makeStyles()(() => ({
+const useStyles$q = makeStyles()(() => ({
   channelNamesLegendContainer: {
     position: "absolute",
     bottom: "0px",
@@ -232196,7 +232196,7 @@ const useStyles$p = makeStyles()(() => ({
 }));
 function ChannelNamesLegend(props) {
   const { images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination } = props;
-  const { classes: classes2 } = useStyles$p();
+  const { classes: classes2 } = useStyles$q();
   const reversedImageLayerScopes = useMemo$1(() => [...imageLayerScopes || []].reverse(), [imageLayerScopes]);
   return jsx$1("div", { className: classes2.channelNamesLegendContainer, children: imageLayerScopes ? reversedImageLayerScopes.map((layerScope) => {
     const layerCoordination = imageLayerCoordination[0][layerScope];
@@ -252002,7 +252002,7 @@ const ToggleFixedAxisButton = ({ setSpatialAxisFixed, spatialAxisFixed, use3d })
     id: `spatial-camera-axis-${toggleAxisId}`
   } } }) })] });
 };
-function SpatialOptions(props) {
+function SpatialOptions$1(props) {
   const { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions, canShowColorEncodingOption, canShow3DOptions, featureAggregationStrategy, setFeatureAggregationStrategy } = props;
   const spatialOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   function handleGeneExpressionColormapChange(event2) {
@@ -252316,7 +252316,7 @@ function SpatialSubscriber$1(props) {
   const canShow3DOptions = canLoad3DLayers && !(disable3d?.length === imageLayerLoaders.length) && !globalDisable3d;
   const options = useMemo$1(() => {
     if (canShow3DOptions || hasExpressionData) {
-      return jsx$1(SpatialOptions, { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions: hasExpressionData, canShowColorEncodingOption: (hasLocationsData || hasSegmentationsData) && hasExpressionData, canShow3DOptions, featureSelection: geneSelection, featureAggregationStrategy, setFeatureAggregationStrategy });
+      return jsx$1(SpatialOptions$1, { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions: hasExpressionData, canShowColorEncodingOption: (hasLocationsData || hasSegmentationsData) && hasExpressionData, canShow3DOptions, featureSelection: geneSelection, featureAggregationStrategy, setFeatureAggregationStrategy });
     }
     return null;
   }, [
@@ -252405,6 +252405,12 @@ function SpatialSubscriber$1(props) {
     featureAggregationStrategy: featureAggregationStrategyToUse
   })] });
 }
+function getVolumeModelMatrix(data2, modelMatrix2) {
+  const source2 = Array.isArray(data2) ? data2[0] : data2;
+  const vivPhysicalSizeScalingMatrix = getPhysicalSizeScalingMatrix(source2);
+  const base2 = Array.isArray(modelMatrix2) && modelMatrix2.length === 16 ? new Matrix4(modelMatrix2) : new Matrix4().identity();
+  return base2.multiplyRight(vivPhysicalSizeScalingMatrix.invert());
+}
 function getInitialSpatialTargets({ width: width2, height: height2, obsPoints, obsSpots, obsSegmentations, obsSegmentationsLocations, segmentationChannelScopesByLayer, images, is3dMode: use3d, isReady }) {
   let globalXMin = null;
   let globalXMax = null;
@@ -252418,7 +252424,8 @@ function getInitialSpatialTargets({ width: width2, height: height2, obsPoints, o
     const modelMatrix2 = layerData?.image?.instance.getModelMatrix();
     if (imageLayerLoader) {
       const viewSize = { height: height2, width: width2 };
-      const { target: target2, zoom: newViewStateZoom } = getDefaultInitialViewState(imageLayerLoader, viewSize, zoomBackoff, use3d, new Matrix4(modelMatrix2));
+      const viewStateModelMatrix = use3d ? getVolumeModelMatrix(imageLayerLoader, modelMatrix2) : new Matrix4(modelMatrix2);
+      const { target: target2, zoom: newViewStateZoom } = getDefaultInitialViewState(imageLayerLoader, viewSize, zoomBackoff, use3d, viewStateModelMatrix);
       const maxExtent = Math.max(width2 / 2 ** newViewStateZoom, height2 / 2 ** newViewStateZoom);
       const xMin = target2[0] - maxExtent / 2;
       const xMax = target2[0] + maxExtent / 2;
@@ -252523,6 +252530,9 @@ function getInitialSpatialTargets({ width: width2, height: height2, obsPoints, o
     initialTargetZ
   };
 }
+function isLayerVisible(spatialLayerVisible) {
+  return spatialLayerVisible !== false;
+}
 function getLayerLoaderTuple(data2, use3d) {
   const loader2 = Array.isArray(data2) && data2.length > 1 || !Array.isArray(data2) ? data2 : data2[0];
   if (use3d) {
@@ -253265,6 +253275,9 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     const visible = layerCoordination[CoordinationType$1.SPATIAL_LAYER_VISIBLE];
     const transparentColor = layerCoordination[CoordinationType$1.SPATIAL_LAYER_TRANSPARENT_COLOR];
     const useTransparentColor = Array.isArray(transparentColor) && transparentColor.length === 3;
+    if (is3dMode && !isLayerVisible(visible)) {
+      return null;
+    }
     const extensions = getVivLayerExtensions(is3dMode, colormap, renderingMode);
     const rgbInterleavedProps = {};
     if (imageWrapperInstance.isInterleaved()) {
@@ -254054,15 +254067,32 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-CwGBUQIk.js").then((n3) => n3.a);
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-JE2SuNrQ.js").then((n3) => n3.a);
   return { default: SpatialWrapper2 };
 });
 const SpatialThreeAdapter = React__default.forwardRef((props, ref2) => jsx$1("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsx$1(ErrorBoundary, { fallback: jsx$1("div", { children: "3D spatial view is not available in this environment." }), children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazySpatialThree, { ...props }) }) }) }));
 const LazySpatialAccelerated = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-B9h9IQaz.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-CMYlENbA.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialAcceleratedAdapter = React__default.forwardRef((props, ref2) => jsx$1("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsx$1(ErrorBoundary, { fallback: jsx$1("div", { children: "3D spatial view is not available in this environment." }), children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazySpatialAccelerated, { ...props }) }) }) }));
+const useStyles$p = makeStyles()(() => ({
+  spatialBetaCameraLabel: {
+    padding: "0px 0px 0px 16px"
+  },
+  spatialBetaToggleBox: {
+    padding: "0px"
+  }
+}));
+function SpatialOptions(props) {
+  const { spatialAxisFixed, setSpatialAxisFixed, use3d } = props;
+  const toggleAxisId = $bdb11010cef70236$export$f680877a34711e37();
+  const { classes: classes2 } = useStyles$p();
+  return jsx$1(OptionsContainer, { children: jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.spatialBetaCameraLabel, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `spatial-camera-axis-${toggleAxisId}`, children: "Fix Camera Axis" }) }), jsx$1(TableCell, { className: classes2.spatialBetaToggleBox, variant: "body", children: jsx$1(Checkbox$1, { onClick: () => setSpatialAxisFixed(!spatialAxisFixed), disabled: !use3d, checked: Boolean(spatialAxisFixed), slotProps: { input: {
+    "aria-label": "Fix or not fix spatial camera axis",
+    id: `spatial-camera-axis-${toggleAxisId}`
+  } } }) })] }) });
+}
 const DEFAULT_FEATURE_AGGREGATION_STRATEGY$1 = "first";
 function useAggregatedNormalizedExpressionDataForLayers({ multiExpressionData: spotMultiExpressionData, layerScopes: spotLayerScopes, layerCoordination: spotLayerCoordination }) {
   const [spotMultiExpressionNormDataAggregated, spotMultiExpressionExtentsAggregated] = useMemo$1(() => {
@@ -254276,6 +254306,8 @@ function SpatialSubscriber(props) {
     setSpatialRotationY: setRotationY,
     setSpatialRotationZ: setRotationZ,
     setSpatialRotationOrbit: setRotationOrbit,
+    setSpatialOrbitAxis: setOrbitAxis,
+    setSpatialAxisFixed,
     // TODO: get obsSets per-layer or per-channel
     setAdditionalObsSets,
     setObsSetColor,
@@ -254531,7 +254563,23 @@ function SpatialSubscriber(props) {
     initialTargetZ,
     initialZoom
   ]);
-  const setViewState = ({ zoom: newZoom, target: target2, rotationX: newRotationX, rotationOrbit: newRotationOrbit }) => {
+  const prevIs3dMode = useRef(is3dMode);
+  useEffect(() => {
+    if (prevIs3dMode.current === is3dMode) {
+      return;
+    }
+    if (typeof defaultTargetX !== "number" || typeof defaultTargetY !== "number") {
+      return;
+    }
+    prevIs3dMode.current = is3dMode;
+    setTargetX(defaultTargetX);
+    setTargetY(defaultTargetY);
+    setTargetZ(defaultTargetZ);
+    setZoom(defaultZoom);
+    setRotationX(is3dMode ? 0 : null);
+    setRotationOrbit(is3dMode ? 0 : null);
+  }, [is3dMode, defaultTargetX, defaultTargetY, defaultTargetZ, defaultZoom]);
+  const setViewState = ({ zoom: newZoom, target: target2, rotationX: newRotationX, rotationOrbit: newRotationOrbit, orbitAxis: newOrbitAxis }) => {
     setZoom(newZoom);
     setTargetX(target2[0]);
     setTargetY(target2[1]);
@@ -254541,6 +254589,9 @@ function SpatialSubscriber(props) {
       }
       setRotationX(newRotationX);
       setRotationOrbit(newRotationOrbit);
+      if (newOrbitAxis !== void 0) {
+        setOrbitAxis(newOrbitAxis);
+      }
     }
   };
   const subtitle = useMemo$1(() => {
@@ -254681,7 +254732,7 @@ function SpatialSubscriber(props) {
       }
     }
   };
-  return jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, helpText, children: [shouldUseThree ? acceleratedFor3d ? jsx$1(SpatialAcceleratedAdapter, { ref: threeRef, uuid: uuid2, width: width2, height: height2, theme, hideTools: !isSelectable, rotation: [rotationX, rotationY, rotationZ], setRotationX, setRotationY, setRotationZ, targetT, targetZ, viewState: isValidViewState ? {
+  return jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, helpText, options: jsx$1(SpatialOptions, { spatialAxisFixed, setSpatialAxisFixed, use3d: is3dMode }), children: [shouldUseThree ? acceleratedFor3d ? jsx$1(SpatialAcceleratedAdapter, { ref: threeRef, uuid: uuid2, width: width2, height: height2, theme, hideTools: !isSelectable, rotation: [rotationX, rotationY, rotationZ], setRotationX, setRotationY, setRotationZ, targetT, targetZ, viewState: isValidViewState ? {
     zoom: zoom2,
     target: [targetX2, targetY2, targetZ],
     rotationX,
@@ -263533,7 +263584,12 @@ const useEllipsisMenuStyles = makeStyles()(() => ({
     padding: 0,
     marginBottom: "0 !important",
     marginLeft: "4px",
-    marginTop: "12px !important"
+    marginTop: "12px !important",
+    // Truncate rather than widening the row's label cell, which would push the
+    // options menu and layer type icon onto a second line in narrow containers.
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
   },
   imageLayerOpacitySlider: {
     marginTop: "7px"
@@ -263546,6 +263602,31 @@ const useEllipsisMenuStyles = makeStyles()(() => ({
     padding: "4px"
   }
 }));
+const CHANNEL_ROW_WRAP_WIDTH = 450;
+const wrapQuery = `@container (max-width: ${CHANNEL_ROW_WRAP_WIDTH}px)`;
+const channelRowContainerSx = { containerType: "inline-size" };
+const channelSliderCellSx = {
+  [wrapQuery]: {
+    width: "100%",
+    order: 1,
+    paddingLeft: "12px",
+    paddingRight: "12px"
+  }
+};
+const channelSelectorCellSx = {
+  [wrapQuery]: {
+    flexBasis: 0,
+    flexGrow: 1
+  }
+};
+const channelControlCellSx = {
+  [wrapQuery]: {
+    width: "auto",
+    flexGrow: 0,
+    flexShrink: 0
+  }
+};
+const channelSpacerCellSx = { flexShrink: 0, minWidth: "44px" };
 const useStyles$i = makeStyles()(() => ({
   colorPickerPaper: {
     overflow: "hidden",
@@ -263781,7 +263862,7 @@ const useStyles$f = makeStyles()(() => ({
     fill: "currentColor",
     fontSize: "14px",
     width: "50%",
-    maxWidth: "16px"
+    maxWidth: "20px"
   }
 }));
 function PointLayerEllipsisMenu(props) {
@@ -263900,15 +263981,21 @@ function PointLayerController(props) {
       setFeatureColor(nextFeatureColor);
     }
   }, [featureSelection, obsColorEncoding, featureIndex, featureColor]);
-  return jsxs(Grid$1, { className: lcClasses.layerControllerGrid, children: [jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode, featureValueColormap, setFeatureValueColormap }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }), layerPerFeatureForPoints && hasSelectedFeatures ? jsxs(Fragment, { children: [featureSelection.map((featureName) => jsx$1(LayerPerFeatureController, { theme, featureName, featureColor, setFeatureColor, spatialLayerColor, featureIndex, featureValueColormap, featureSelection, setFeatureSelection, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange }, featureName)), jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: () => setFeatureFilterMode(featureFilterMode === "featureSelection" ? null : "featureSelection"), className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle visibility of unselected points", children: featureFilterMode === "featureSelection" ? jsx$1(VisibilityOffIcon, {}) : jsx$1(VisibilityIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: getDefaultColor("dark"), setColor: null, isStaticColor: true, isColormap: false, visible: true }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: "Unselected" }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": "Adjust opacity for unselected layer" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) })] }) : null] });
+  return jsxs(Grid$1, { className: lcClasses.layerControllerGrid, children: [jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", sx: channelRowContainerSx, children: [jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, sx: channelSelectorCellSx, children: jsx$1(Typography, { className: menuClasses.imageLayerName, title: label2, children: label2 }) }), jsx$1(Grid$1, { size: 2, sx: channelSliderCellSx, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode, featureValueColormap, setFeatureValueColormap }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", sx: channelControlCellSx, children: [jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }), layerPerFeatureForPoints && hasSelectedFeatures ? jsxs(Fragment, { children: [featureSelection.map((featureName) => jsx$1(LayerPerFeatureController, { theme, featureName, featureColor, setFeatureColor, spatialLayerColor, featureIndex, featureValueColormap, featureSelection, setFeatureSelection, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange }, featureName)), jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: () => setFeatureFilterMode(featureFilterMode === "featureSelection" ? null : "featureSelection"), className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle visibility of unselected points", children: featureFilterMode === "featureSelection" ? jsx$1(VisibilityOffIcon, {}) : jsx$1(VisibilityIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: getDefaultColor("dark"), setColor: null, isStaticColor: true, isColormap: false, visible: true }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: "Unselected" }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": "Adjust opacity for unselected layer" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) })] }) : null] });
 }
 const useStyles$e = makeStyles()(() => ({
+  // Cap the channel name's width; imageLayerName ellipsizes the overflow.
+  channelName: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
   layerTypeSegmentationIcon: {
     height: "100%",
     marginLeft: "1px",
     fill: "currentColor",
     fontSize: "24px",
-    width: "50%",
+    width: "24px",
     maxWidth: "24px"
   }
 }));
@@ -263942,7 +264029,7 @@ function SegmentationChannelController(props) {
     setVisible(nextVisible);
   }, [visible, setVisible]);
   const handleOpacityChange = useCallback((e3, v) => setOpacity2(v), [setOpacity2]);
-  return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle channel visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: capitalize$3(label2) }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SegmentationChannelEllipsisMenu, { obsType, featureType, featureValueType, strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgVector, { className: classes2.layerTypeSegmentationIcon }) })] }) }) });
+  return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", sx: channelRowContainerSx, children: [jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle channel visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, sx: channelSelectorCellSx, children: jsx$1(Typography, { className: clsx(menuClasses.imageLayerName, classes2.channelName), title: capitalize$3(label2), children: capitalize$3(label2) }) }), jsx$1(Grid$1, { size: 2, sx: channelSliderCellSx, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(SegmentationChannelEllipsisMenu, { obsType, featureType, featureValueType, strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(SvgVector, { className: classes2.layerTypeSegmentationIcon }) })] }) }) });
 }
 function SegmentationLayerController(props) {
   const { theme, layerScope, layerCoordination, setLayerCoordination, channelScopes, channelCoordination, setChannelCoordination } = props;
@@ -265334,7 +265421,7 @@ function ImageChannelController(props) {
       setWindow2(minMaxDomain);
     }
   }
-  return jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading, channelsSortOrder }) }), jsx$1(Grid$1, { size: 3, children: jsx$1(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR, numResolutions, spatialMaxResolution, setSpatialMaxResolution }) })] });
+  return jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", sx: channelRowContainerSx, children: [jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsx$1(Grid$1, { size: 6, sx: channelSelectorCellSx, children: jsx$1(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading, channelsSortOrder }) }), jsx$1(Grid$1, { size: 3, sx: channelSliderCellSx, children: jsx$1(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR, numResolutions, spatialMaxResolution, setSpatialMaxResolution }) })] });
 }
 function DimensionSlider(props) {
   const { boundingSlice, sliceValue, setSliceValue, label: label2 } = props;
@@ -265535,7 +265622,7 @@ function ImageLayerController(props) {
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const { classes: controllerSectionClasses } = useControllerSectionStyles();
   const isMultiChannel = photometricInterpretation !== "RGB";
-  return jsx$1(Grid$1, { className: controllerSectionClasses.layerControllerGrid, children: jsxs(Paper, { elevation: 4, className: controllerSectionClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { className: menuClasses.imageLayerVisibleButton, onClick: handleVisibleChange, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1 }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ImageLayerEllipsisMenu, { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize, channelsSortOrder, setChannelsSortOrder }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(ImageIcon, { className: classes2.layerTypeImageIcon }), isMultiChannel ? jsx$1(Button, { onClick: handleOpenChange, className: classes2.channelExpansionButton, "aria-label": "Expand or collapse channel controls", children: open2 ? jsx$1(ExpandLess, {}) : jsx$1(ExpandMoreIcon, {}) }) : null] })] }), isMultiChannel && open2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [channelScopes.map((cScope) => {
+  return jsx$1(Grid$1, { className: controllerSectionClasses.layerControllerGrid, children: jsxs(Paper, { elevation: 4, className: controllerSectionClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", sx: channelRowContainerSx, children: [jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(Button, { className: menuClasses.imageLayerVisibleButton, onClick: handleVisibleChange, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, sx: channelSpacerCellSx }), jsx$1(Grid$1, { size: 6, sx: channelSelectorCellSx, children: jsx$1(Typography, { className: menuClasses.imageLayerName, title: label2, children: label2 }) }), jsx$1(Grid$1, { size: 2, sx: channelSliderCellSx, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ImageLayerEllipsisMenu, { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize, channelsSortOrder, setChannelsSortOrder }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", sx: channelControlCellSx, children: [jsx$1(ImageIcon, { className: classes2.layerTypeImageIcon }), isMultiChannel ? jsx$1(Button, { onClick: handleOpenChange, className: classes2.channelExpansionButton, "aria-label": "Expand or collapse channel controls", children: open2 ? jsx$1(ExpandLess, {}) : jsx$1(ExpandMoreIcon, {}) }) : null] })] }), isMultiChannel && open2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [channelScopes.map((cScope) => {
     const { spatialTargetC, spatialChannelVisible, spatialChannelOpacity, spatialChannelColor, spatialChannelWindow, spatialMaxResolution } = channelCoordination[cScope];
     const { setSpatialTargetC, setSpatialChannelVisible, setSpatialChannelOpacity, setSpatialChannelColor, setSpatialChannelWindow, setSpatialMaxResolution } = setChannelCoordination[cScope];
     const channelIndex = image2?.getChannelIndex(spatialTargetC);
@@ -265565,7 +265652,7 @@ const useStyles$8 = makeStyles()((theme) => ({
   }
 }));
 function GlobalDimensionSlider(props) {
-  const { label: label2, targetValue, setTargetValue, min: min2 = 0, max: max2 = 0, spatialRenderingMode = null, setSpatialRenderingMode = null } = props;
+  const { label: label2, targetValue, setTargetValue, min: min2 = 0, max: max2 = 0, spatialRenderingMode = null, setSpatialRenderingMode = null, enable3d = true } = props;
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: classes2 } = useStyles$8();
   const isForZ = spatialRenderingMode !== null;
@@ -265576,7 +265663,7 @@ function GlobalDimensionSlider(props) {
       setTargetValue(Math.floor(targetValue));
     }
   }
-  return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(SvgDimensions, { className: classes2.dimensionsIcon }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(Typography, { className: classes2.dimensionLabel, children: label2 }) }), jsx$1(Grid$1, { size: 8, children: !is3dMode ? jsx$1(Slider, { value: targetValue, min: min2, max: max2, step: 1, onChange: (e3, v) => setTargetValue(v), className: classes2.dimensionSlider, valueLabelDisplay: "auto", orientation: "horizontal", disabled: spatialRenderingMode === "3D", "aria-label": `${label2}-slice slider` }) : null }), jsx$1(Grid$1, { size: 2, children: isForZ ? jsx$1(FormGroup, { row: true, className: classes2.switchFormGroup, children: jsx$1(FormControlLabel$1, { control: jsx$1(Switch, { color: "primary", checked: spatialRenderingMode === "3D", onChange: handleRenderingModeChange, name: "is3dMode" }), label: "3D" }) }) : null })] }) }) });
+  return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", sx: channelRowContainerSx, children: [jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(SvgDimensions, { className: classes2.dimensionsIcon }) }), jsx$1(Grid$1, { size: 1, sx: channelSelectorCellSx, children: jsx$1(Typography, { className: classes2.dimensionLabel, children: label2 }) }), jsx$1(Grid$1, { size: 8, sx: channelSliderCellSx, children: !is3dMode ? jsx$1(Slider, { value: targetValue, min: min2, max: max2, step: 1, onChange: (e3, v) => setTargetValue(v), className: classes2.dimensionSlider, valueLabelDisplay: "auto", orientation: "horizontal", disabled: spatialRenderingMode === "3D", "aria-label": `${label2}-slice slider` }) : null }), jsx$1(Grid$1, { size: 2, sx: channelControlCellSx, children: isForZ && enable3d ? jsx$1(FormGroup, { row: true, className: classes2.switchFormGroup, children: jsx$1(FormControlLabel$1, { control: jsx$1(Switch, { color: "primary", checked: spatialRenderingMode === "3D", onChange: handleRenderingModeChange, name: "is3dMode" }), label: "3D" }) }) : null })] }) }) });
 }
 const useStyles$7 = makeStyles()(() => ({
   layerTypeCentroidSegmentationIcon: {
@@ -265674,7 +265761,7 @@ function SegmentationCentroidsController(props) {
   return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", alignItems: "center", children: [jsxs(Grid$1, { size: "grow", style: { display: "flex", alignItems: "center", minWidth: 0 }, children: [jsx$1(Button, { onClick: handleSegVisibleChange, className: menuClasses.imageLayerVisibleButton, getAriaLabel: () => "Toggle mesh visibility", children: jsx$1(SegVisibility, {}) }), jsx$1(ChannelColorPickerMenu, { theme, color: segColor, setColor: setSegColor, isStaticColor, isColormap, featureValueColormap, visible: segVisibleSetting }), jsx$1(Typography, { className: `${menuClasses.imageLayerName} ${classes2.inlineLabel}`, children: "Cell" }), jsx$1("div", { className: classes2.divider }), jsx$1(Button, { onClick: handlePointVisibleChange, className: menuClasses.imageLayerVisibleButton, getAriaLabel: () => "Toggle centroid visibility", children: jsx$1(PointVisibility, {}) }), jsx$1(ChannelColorPickerMenu, { theme, color: pointColor, setColor: setPointColor, isStaticColor: pointIsStaticColor, isColormap: pointIsColormap, featureValueColormap: pointFeatureValueColormap, visible: pointVisibleSetting }), jsx$1(Typography, { className: `${menuClasses.imageLayerName} ${classes2.inlineLabel}`, children: "Point" })] }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: sharedOpacity, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", getAriaLabel: () => "Adjust shared opacity" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(CombinedEllipsisMenu, { obsType, featureType, featureValueType, filled, setFilled, strokeWidth, setStrokeWidth, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, setPointObsColorEncoding, setPointFeatureValueColormap, setPointFeatureValueColormapRange, onColorEncodingChange: handleColorEncodingChange }) }), jsx$1(Grid$1, { size: 1, className: classes2.iconCell, children: jsx$1(SvgVector, { className: classes2.layerTypeCentroidSegmentationIcon }) })] }) }) });
 }
 function LayerController(props) {
-  const { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress, layerPerFeatureForPoints, centroidSegmentationPairs = [], pairedSegScopes = /* @__PURE__ */ new Set(), pairedPointScopes = /* @__PURE__ */ new Set() } = props;
+  const { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress, layerPerFeatureForPoints, globalDisable3d, centroidSegmentationPairs = [], pairedSegScopes = /* @__PURE__ */ new Set(), pairedPointScopes = /* @__PURE__ */ new Set() } = props;
   const anyLayerHasT = Object.values(images || {}).some((image2) => image2?.image?.instance.hasTStack());
   const anyLayerHasZ = Object.values(images || {}).some((image2) => image2?.image?.instance.hasZStack());
   const maxT = Object.values(images || {}).reduce((a2, h2) => Math.max(a2, h2?.image?.instance.getNumT()), 1) - 1;
@@ -265683,10 +265770,10 @@ function LayerController(props) {
   const reversedSpotLayerScopes = useMemo$1(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
   const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].filter((scope) => !pairedPointScopes.has(scope)).reverse(), [pointLayerScopes, pairedPointScopes]);
   const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].filter((scope) => !pairedSegScopes.has(scope)).reverse(), [segmentationLayerScopes, pairedSegScopes]);
-  return jsxs("div", { children: [anyLayerHasZ ? jsx$1(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode }) : null, anyLayerHasT ? jsx$1(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, centroidSegmentationPairs.map(({ pointScope, segScope }) => jsx$1(SegmentationCentroidsController, { theme, segScope, segLayerCoordination: segmentationLayerCoordination, segChannelScopesByLayer: segmentationChannelScopesByLayer, segChannelCoordination: segmentationChannelCoordination, pointScope, pointLayerCoordination }, `combined-${segScope}-${pointScope}`)), pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsx$1(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope], pointMatrixIndicesData: pointMultiIndicesData?.[layerScope], tiledPointsLoadingProgress, layerPerFeatureForPoints }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsx$1(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsx$1(SegmentationLayerController, { theme, layerScope, layerCoordination: segmentationLayerCoordination[0][layerScope], setLayerCoordination: segmentationLayerCoordination[1][layerScope], channelScopes: segmentationChannelScopesByLayer[layerScope], channelCoordination: segmentationChannelCoordination[0][layerScope], setChannelCoordination: segmentationChannelCoordination[1][layerScope] }, layerScope)), imageLayerScopes && reversedImageLayerScopes.map((layerScope) => jsx$1(ImageLayerController, { theme, coordinationScopesRaw, layerScope, layerCoordination: imageLayerCoordination[0][layerScope], setLayerCoordination: imageLayerCoordination[1][layerScope], channelScopes: imageChannelScopesByLayer[layerScope], channelCoordination: imageChannelCoordination[0][layerScope], setChannelCoordination: imageChannelCoordination[1][layerScope], image: images[layerScope]?.image?.instance, featureIndex: images[layerScope]?.featureIndex, targetT, targetZ, spatialRenderingMode, volumeLoadingProgress: volumeLoadingStatus?.loadingProgress, onStopVolumeLoading: volumeLoadingStatus?.onStopLoading, onRestartVolumeLoading: volumeLoadingStatus?.onRestartLoading, volumeStillRef: volumeLoadingStatus?.stillRef }, layerScope))] });
+  return jsxs("div", { children: [anyLayerHasZ ? jsx$1(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode, enable3d: !globalDisable3d }) : null, anyLayerHasT ? jsx$1(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, centroidSegmentationPairs.map(({ pointScope, segScope }) => jsx$1(SegmentationCentroidsController, { theme, segScope, segLayerCoordination: segmentationLayerCoordination, segChannelScopesByLayer: segmentationChannelScopesByLayer, segChannelCoordination: segmentationChannelCoordination, pointScope, pointLayerCoordination }, `combined-${segScope}-${pointScope}`)), pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsx$1(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope], pointMatrixIndicesData: pointMultiIndicesData?.[layerScope], tiledPointsLoadingProgress, layerPerFeatureForPoints }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsx$1(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsx$1(SegmentationLayerController, { theme, layerScope, layerCoordination: segmentationLayerCoordination[0][layerScope], setLayerCoordination: segmentationLayerCoordination[1][layerScope], channelScopes: segmentationChannelScopesByLayer[layerScope], channelCoordination: segmentationChannelCoordination[0][layerScope], setChannelCoordination: segmentationChannelCoordination[1][layerScope] }, layerScope)), imageLayerScopes && reversedImageLayerScopes.map((layerScope) => jsx$1(ImageLayerController, { theme, coordinationScopesRaw, layerScope, layerCoordination: imageLayerCoordination[0][layerScope], setLayerCoordination: imageLayerCoordination[1][layerScope], channelScopes: imageChannelScopesByLayer[layerScope], channelCoordination: imageChannelCoordination[0][layerScope], setChannelCoordination: imageChannelCoordination[1][layerScope], image: images[layerScope]?.image?.instance, featureIndex: images[layerScope]?.featureIndex, targetT, targetZ, spatialRenderingMode, volumeLoadingProgress: volumeLoadingStatus?.loadingProgress, onStopVolumeLoading: volumeLoadingStatus?.onStopLoading, onRestartVolumeLoading: volumeLoadingStatus?.onRestartLoading, volumeStillRef: volumeLoadingStatus?.stillRef }, layerScope))] });
 }
 function LayerControllerSubscriber(props) {
-  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid: uuid2, layerPerFeatureForPoints = false, cameraPresets, helpText = ViewHelpMapping.LAYER_CONTROLLER_BETA } = props;
+  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid: uuid2, layerPerFeatureForPoints = false, globalDisable3d = false, cameraPresets, helpText = ViewHelpMapping.LAYER_CONTROLLER_BETA } = props;
   const loaders = useLoaders();
   const mergeCoordination = useMergeCoordination();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
@@ -265877,7 +265964,7 @@ function LayerControllerSubscriber(props) {
     imageDataStatus,
     pointMultiIndicesDataStatus
   ]);
-  return jsx$1(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, helpText, children: jsx$1(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, layerPerFeatureForPoints, volumeLoadingStatus, tiledPointsLoadingProgress, centroidSegmentationPairs: centroidSegmentationPairs.pairs, pairedSegScopes: centroidSegmentationPairs.pairedSegScopes, pairedPointScopes: centroidSegmentationPairs.pairedPointScopes }) });
+  return jsx$1(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, helpText, children: jsx$1(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, layerPerFeatureForPoints, globalDisable3d, volumeLoadingStatus, tiledPointsLoadingProgress, centroidSegmentationPairs: centroidSegmentationPairs.pairs, pairedSegScopes: centroidSegmentationPairs.pairedSegScopes, pairedPointScopes: centroidSegmentationPairs.pairedPointScopes }) });
 }
 const isIterable$2 = (obj) => Symbol.iterator in obj;
 const hasIterableEntries = (value2) => (
@@ -267792,7 +267879,7 @@ function HiglassGlobalStyles(props) {
 }
 register({ dataFetcher: ZarrMultivecDataFetcher_default, config: ZarrMultivecDataFetcher_default.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./higlass-4OKx7mdy.js");
+  const { HiGlassComponent } = await import("./higlass-BnXDiYjj.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -270749,7 +270836,7 @@ function NeuroglancerGlobalStyles(props) {
   const { classes: classes2 } = props;
   return jsxs(Fragment, { children: [jsx$1(GlobalStyles$3, { styles: globalNeuroglancerCss }), jsx$1(ScopedGlobalStyles, { styles: globalNeuroglancerStyles, parentClassName: classes2.neuroglancerWrapper })] });
 }
-const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-DSiLDSuM.js"));
+const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-D4iTpbeC.js"));
 function createWorker() {
   const worker = new WorkerFactory$1();
   worker.AsyncComputationWorker = WorkerFactory;
@@ -270843,22 +270930,6 @@ class NeuroglancerComp extends PureComponent {
     return jsxs(Fragment, { children: [jsx$1(NeuroglancerGlobalStyles, { classes: classes2 }), jsx$1("div", { className: classes2.neuroglancerWrapper, children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState, onViewerStateChanged: this.onViewerStateChanged, onLayerLoadingChange, bundleRoot: this.bundleRoot, cellColorMapping, ref: this.onRef, onAnnotationSourceReady, onViewerReady, meshOpacity }) }) })] });
   }
 }
-function useMemoCustomComparison(factory2, dependencies2, customIsEqual) {
-  const ref2 = useRef(
-    /** @type {{ deps: any; value: T } | undefined} */
-    void 0
-  );
-  if (ref2.current === void 0 || !customIsEqual(ref2.current.deps, dependencies2)) {
-    ref2.current = { deps: dependencies2, value: factory2() };
-  }
-  return ref2.current.value;
-}
-const shallowDiff = (prevDeps, nextDeps, depName) => prevDeps[depName] !== nextDeps[depName];
-const shallowDiffByLayer = (prevDeps, nextDeps, depName, scopeName) => prevDeps?.[depName]?.[scopeName] !== nextDeps?.[depName]?.[scopeName];
-const shallowDiffByChannel = (prevDeps, nextDeps, depName, firstName, secondName) => prevDeps?.[depName]?.[firstName]?.[secondName] !== nextDeps?.[depName]?.[firstName]?.[secondName];
-const shallowDiffByChannelWithKeys = (prevDeps, nextDeps, depName, firstName, secondName, keys2) => keys2.some((k) => prevDeps?.[depName]?.[firstName]?.[secondName]?.[k] !== nextDeps?.[depName]?.[firstName]?.[secondName]?.[k]);
-const shallowDiffByLayerCoordinationWithKeys = (prevDeps, nextDeps, depName, layerScope, keys2) => keys2.some((k) => prevDeps?.[depName]?.[0]?.[layerScope]?.[k] !== nextDeps?.[depName]?.[0]?.[layerScope]?.[k]);
-const shallowDiffByChannelCoordinationWithKeys = (prevDeps, nextDeps, depName, layerScope, channelScope, keys2) => keys2.some((k) => prevDeps?.[depName]?.[0]?.[layerScope]?.[channelScope]?.[k] !== nextDeps?.[depName]?.[0]?.[layerScope]?.[channelScope]?.[k]);
 function customIsEqualForCellColors(prevDeps, nextDeps) {
   let forceUpdate = false;
   const curriedShallowDiff = (depName) => shallowDiff(prevDeps, nextDeps, depName);
@@ -325005,7 +325076,7 @@ const VEGA_THEMES = {
 };
 const DATASET_NAME = "table";
 function VegaGlobalStyles() {
-  const { theme } = useStyles$y();
+  const { theme } = useStyles$z();
   return jsx$1(GlobalStyles$3, { styles: {
     "#vg-tooltip-element.vg-tooltip.custom-theme": {
       boxShadow: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
@@ -325039,7 +325110,7 @@ function renderTooltipContents(tooltipText) {
 }
 function VegaPlot(props) {
   const { spec: partialSpec, data: data2, getTooltipText, signalListeners, renderer = "svg", onNewView } = props;
-  const { classes: tooltipClasses2 } = useStyles$t();
+  const { classes: tooltipClasses2 } = useStyles$u();
   const tooltipHandler = useMemo$1(() => {
     if (typeof getTooltipText === "function") {
       const tooltipConfig = {
@@ -329777,7 +329848,26 @@ class ImageWrapper {
     }
     return true;
   }
-  getData() {
+  // TODO: make stripPhysicalSizes the default behavior,
+  // and remove it as a parameter, once it is no longer
+  // used by spatial-accelerated and spatial-three.
+  getData(stripPhysicalSizes = true) {
+    if (stripPhysicalSizes) {
+      const { data: data2 } = this.vivLoader;
+      const newData = data2.map((d) => {
+        if ("meta" in d) {
+          const { meta } = d;
+          if (meta && "physicalSizes" in meta) {
+            const newMeta = { ...meta, physicalSizes: void 0 };
+            const clone2 = Object.create(Object.getPrototypeOf(d));
+            Object.assign(clone2, d, { meta: newMeta });
+            return clone2;
+          }
+        }
+        return d;
+      });
+      return newData;
+    }
     return this.vivLoader.data;
   }
   getModelMatrix() {

package/dist/{index-B9h9IQaz.js → index-CMYlENbA.js}

@@ -4,7 +4,7 @@ import { useThree, useFrame, Canvas } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
 import * as THREE from "three";
 import { Data3DTexture, RedFormat, UnsignedByteType, LinearFilter, RedIntegerFormat, UnsignedIntType, NearestFilter, Vector3, Vector2, Vector4, UniformsUtils } from "three";
-import { l as log, i as isEqual, C as CoordinationType, u as useEventCallback } from "./index-B8FH88N6.js";
+import { l as log, i as isEqual, C as CoordinationType, u as useEventCallback } from "./index-BnKmchw3.js";
 const LogLevel = {
   INFO: "info",
   WARN: "warn",
@@ -537,7 +537,8 @@ class VolumeDataManager {
       const shapes = _resolutionStatsToShapes(multiResolutionStats);
       const resolutions = multiResolutionStats.length;
       this.zarrStore.resolutions = resolutions;
-      const vivData = imageWrapper.getData();
+      const stripPhysicalSizes = false;
+      const vivData = imageWrapper.getData(stripPhysicalSizes);
       if (!Array.isArray(vivData) || vivData.length < 1) {
         throw new Error("Not a multiresolution loader");
       }

package/dist/{index-CwGBUQIk.js → index-JE2SuNrQ.js}

@@ -3,7 +3,7 @@ import React__default, { useRef, useState, useEffect, Suspense, forwardRef } fro
 import { Canvas } from "@react-three/fiber";
 import { Center, Text, Line, Bvh, OrbitControls } from "@react-three/drei";
 import { Matrix3, Matrix4, Vector3, Vector2, UniformsUtils, Data3DTexture, RedFormat, FloatType, LinearFilter, FrontSide, Scene, Group, MeshPhysicalMaterial, MeshBasicMaterial, MeshStandardMaterial, BackSide } from "three";
-import { C as CoordinationType, g as getImageSize } from "./index-B8FH88N6.js";
+import { C as CoordinationType, g as getImageSize } from "./index-BnKmchw3.js";
 function MeasureLine({ currentLine, scale }) {
   const textRef = useRef(null);
   return jsxs("group", { children: [jsx(Center, { bottom: true, right: true, position: [currentLine.midPoint.x, currentLine.midPoint.y, currentLine.midPoint.z], rotation: [0, 0, 0], children: jsx(Text, { color: "gray", scale: 0.05, ref: textRef, children: `${(currentLine.startPoint.distanceTo(currentLine.endPoint) * scale).toFixed(2)} µm` }) }), jsx(Line, {
@@ -581,7 +581,8 @@ const renderingModeMap = {
 };
 function extractInformationFromProps(layerScope, layerCoordination, channelScopes, channelCoordination, image, props) {
   const { spatialRenderingMode } = props;
-  const data = image?.image?.instance?.getData();
+  const stripPhysicalSizes = false;
+  const data = image?.image?.instance?.getData(stripPhysicalSizes);
   if (!data) {
     return {
       channelsVisible: null,
@@ -944,8 +945,8 @@ function GeometryAndMesh(props) {
     setObsHighlight(e.object.name);
   }, onPointerOut: () => setObsHighlight(null) }) })] }) : null, renderingSettings.uniforms && renderingSettings.shader && renderingSettings.meshScale && renderingSettings.geometrySize ? jsx("group", { children: jsxs("mesh", { scale: renderingSettings.meshScale, ref: materialRef, children: [jsx("boxGeometry", { args: renderingSettings.geometrySize }), jsx("shaderMaterial", { customProgramCacheKey: () => "1", side: FrontSide, uniforms: renderingSettings.uniforms, needsUpdate: true, transparent: true, vertexShader: renderingSettings.shader.vertexShader, fragmentShader: renderingSettings.shader.fragmentShader })] }) }) : null] }), jsx("group", { name: "lines", children: lines.map((object) => jsx(MeasureLine, { currentLine: object, scale: 1 }, stringifyLineData(object))) })] });
 }
-const LazyGeometryAndMeshXR = React__default.lazy(() => import("./GeometryAndMeshXR-DngaDWBF.js").catch(() => ({ default: GeometryAndMesh })));
-const LazyXRSceneComponents = React__default.lazy(() => import("./XRSceneComponents-CNuqVsYi.js").catch(() => ({ default: () => null })));
+const LazyGeometryAndMeshXR = React__default.lazy(() => import("./GeometryAndMeshXR-CvjW5GGO.js").catch(() => ({ default: GeometryAndMesh })));
+const LazyXRSceneComponents = React__default.lazy(() => import("./XRSceneComponents-DEj-tQkm.js").catch(() => ({ default: () => null })));
 function SpatialThree(props) {
   const materialRef = useRef(null);
   const orbitRef = useRef(null);
@@ -1302,13 +1303,13 @@ function getXRModule() {
 }
 const LazyXRWrapper = React__default.lazy(
   // eslint-disable-next-line implicit-arrow-linebreak, function-paren-newline
-  () => import("./XRWrapper-BsV3wgJG.js").catch(() => ({
+  () => import("./XRWrapper-DIEbbPAq.js").catch(() => ({
     default: ({ children }) => children
   }))
 );
 const LazyXREnterButton = React__default.lazy(
   // eslint-disable-next-line implicit-arrow-linebreak, function-paren-newline
-  () => import("./XREnterButton-Beha7PBD.js").catch(() => ({
+  () => import("./XREnterButton-pTH1jk6g.js").catch(() => ({
     default: () => null
   }))
 );

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a6, a4, a2, a5, a3, a1, a7 } from "./index-B8FH88N6.js";
+import { a6, a4, a2, a5, a3, a1, a7 } from "./index-BnKmchw3.js";
 import { useComplexCoordination, useComplexCoordinationSecondary, useCoordination, useCoordinationScopes, useCoordinationScopesBy, useGridItemSize, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondaryNonNull, usePageModeView } from "@vitessce/vit-s";
 export {
   a6 as PluginAsyncFunction,

package/dist/{jpeg-9VJS3-Bw.js → jpeg-DOW9md97.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B8FH88N6.js";
+import { B as BaseDecoder } from "./index-BnKmchw3.js";
 const dctZigZag = new Int32Array([
   0,
   1,

package/dist/{lerc-D1J26SPX.js → lerc-udUVD1VM.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-SxljTded.js";
-import { a as getDefaultExportFromCjs, B as BaseDecoder, L as LercParameters, b as LercAddCompression } from "./index-B8FH88N6.js";
+import { a as getDefaultExportFromCjs, B as BaseDecoder, L as LercParameters, b as LercAddCompression } from "./index-BnKmchw3.js";
 var LercDecode = { exports: {} };
 var hasRequiredLercDecode;
 function requireLercDecode() {

package/dist/{lzw-xVcb3-tK.js → lzw-B1XPe-af.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B8FH88N6.js";
+import { B as BaseDecoder } from "./index-BnKmchw3.js";
 const MIN_BITS = 9;
 const CLEAR_CODE = 256;
 const EOI_CODE = 257;

package/dist/{packbits-Dm4fdK8S.js → packbits-DI5XXjyK.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B8FH88N6.js";
+import { B as BaseDecoder } from "./index-BnKmchw3.js";
 class PackbitsDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     const dataView = new DataView(buffer);

package/dist/{raw-UWcztCkw.js → raw-Y5j8FDrQ.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B8FH88N6.js";
+import { B as BaseDecoder } from "./index-BnKmchw3.js";
 class RawDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     return buffer;

package/dist/{webimage-C-QWVV-f.js → webimage-C8U2Oy62.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B8FH88N6.js";
+import { B as BaseDecoder } from "./index-BnKmchw3.js";
 class WebImageDecoder extends BaseDecoder {
   constructor() {
     super();

package/dist/{xrStore-Dhi1LSJi.js → xrStore-D2rxhSUn.js}

@@ -1,4 +1,4 @@
-import { g as getXRModule } from "./index-CwGBUQIk.js";
+import { g as getXRModule } from "./index-JE2SuNrQ.js";
 const xrStore = getXRModule().createXRStore({
   handTracking: true,
   emulate: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/all",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -17,38 +17,38 @@
   ],
   "dependencies": {
     "zod": "^3.21.4",
-    "@vitessce/styles": "4.0.3",
-    "@vitessce/error": "4.0.3",
-    "@vitessce/constants-internal": "4.0.3",
-    "@vitessce/description": "4.0.3",
-    "@vitessce/abstract": "4.0.3",
-    "@vitessce/feature-list": "4.0.3",
-    "@vitessce/csv": "4.0.3",
-    "@vitessce/genomic-profiles": "4.0.3",
-    "@vitessce/glb": "4.0.3",
-    "@vitessce/heatmap": "4.0.3",
-    "@vitessce/json": "4.0.3",
-    "@vitessce/layer-controller": "4.0.3",
-    "@vitessce/link-controller": "4.0.3",
-    "@vitessce/layer-controller-beta": "4.0.3",
-    "@vitessce/obs-sets-manager": "4.0.3",
-    "@vitessce/ome-tiff": "4.0.3",
-    "@vitessce/plugins": "4.0.3",
-    "@vitessce/scatterplot-gating": "4.0.3",
-    "@vitessce/scatterplot-embedding": "4.0.3",
-    "@vitessce/spatial": "4.0.3",
-    "@vitessce/schemas": "4.0.3",
-    "@vitessce/spatial-beta": "4.0.3",
-    "@vitessce/statistical-plots": "4.0.3",
-    "@vitessce/vit-s": "4.0.3",
-    "@vitessce/globals": "4.0.3",
-    "@vitessce/zarr": "4.0.3",
-    "@vitessce/status": "4.0.3",
-    "@vitessce/spatial-zarr": "4.0.3",
-    "@vitessce/spatial-three": "4.0.3",
-    "@vitessce/biomarker-select": "4.0.3",
-    "@vitessce/neuroglancer": "4.0.3",
-    "@vitessce/spatial-accelerated": "4.0.3"
+    "@vitessce/styles": "4.0.4",
+    "@vitessce/constants-internal": "4.0.4",
+    "@vitessce/abstract": "4.0.4",
+    "@vitessce/description": "4.0.4",
+    "@vitessce/csv": "4.0.4",
+    "@vitessce/feature-list": "4.0.4",
+    "@vitessce/heatmap": "4.0.4",
+    "@vitessce/glb": "4.0.4",
+    "@vitessce/genomic-profiles": "4.0.4",
+    "@vitessce/error": "4.0.4",
+    "@vitessce/json": "4.0.4",
+    "@vitessce/layer-controller": "4.0.4",
+    "@vitessce/layer-controller-beta": "4.0.4",
+    "@vitessce/ome-tiff": "4.0.4",
+    "@vitessce/link-controller": "4.0.4",
+    "@vitessce/scatterplot-embedding": "4.0.4",
+    "@vitessce/obs-sets-manager": "4.0.4",
+    "@vitessce/scatterplot-gating": "4.0.4",
+    "@vitessce/spatial": "4.0.4",
+    "@vitessce/spatial-beta": "4.0.4",
+    "@vitessce/plugins": "4.0.4",
+    "@vitessce/schemas": "4.0.4",
+    "@vitessce/statistical-plots": "4.0.4",
+    "@vitessce/status": "4.0.4",
+    "@vitessce/globals": "4.0.4",
+    "@vitessce/spatial-zarr": "4.0.4",
+    "@vitessce/zarr": "4.0.4",
+    "@vitessce/vit-s": "4.0.4",
+    "@vitessce/spatial-accelerated": "4.0.4",
+    "@vitessce/spatial-three": "4.0.4",
+    "@vitessce/biomarker-select": "4.0.4",
+    "@vitessce/neuroglancer": "4.0.4"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",