cloudmr-ux 4.7.7 → 4.7.9

package/dist/CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments.d.ts

@@ -88,5 +88,5 @@ export interface NiivueContrastAdjustmentsProps {
  * Pass `title=""` to suppress the heading strip, or `title="Window / Level"` to
  * rename it for a different application.
  */
-export declare function NiivueContrastAdjustments({ nv, min, max, setMin, setMax, transformFactors, gamma, gammaKey, setGamma, layerList, title, accentColor, style, className, }: NiivueContrastAdjustmentsProps): import("react/jsx-runtime").JSX.Element;
+export declare function NiivueContrastAdjustments({ nv, min, max, setMin, setMax, transformFactors, gamma, gammaKey, setGamma, layerList, title, accentColor: accentColorProp, style, className, }: NiivueContrastAdjustmentsProps): import("react/jsx-runtime").JSX.Element;
 export default NiivueContrastAdjustments;

package/dist/CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent, Box } from "@mui/material";
 import TKDualRange from "../tk-dualrange/TKDualRange";
 import CmrLabel from "../label/Label";
+import { resolveNiivueAccentColor, useNiivueViewerTheme, } from "../niivue-viewer/NiivueViewerThemeContext";
 // ─── Component ────────────────────────────────────────────────────────────────
 /**
  * **NiivueContrastAdjustments**
@@ -47,7 +48,9 @@ import CmrLabel from "../label/Label";
  */
 export function NiivueContrastAdjustments(_a) {
     var _b, _c, _d, _e;
-    var nv = _a.nv, min = _a.min, max = _a.max, setMin = _a.setMin, setMax = _a.setMax, transformFactors = _a.transformFactors, gamma = _a.gamma, gammaKey = _a.gammaKey, setGamma = _a.setGamma, _f = _a.layerList, layerList = _f === void 0 ? [] : _f, _g = _a.title, title = _g === void 0 ? "Contrast Adjustments" : _g, _h = _a.accentColor, accentColor = _h === void 0 ? "#580f8b" : _h, style = _a.style, className = _a.className;
+    var nv = _a.nv, min = _a.min, max = _a.max, setMin = _a.setMin, setMax = _a.setMax, transformFactors = _a.transformFactors, gamma = _a.gamma, gammaKey = _a.gammaKey, setGamma = _a.setGamma, _f = _a.layerList, layerList = _f === void 0 ? [] : _f, _g = _a.title, title = _g === void 0 ? "Contrast Adjustments" : _g, accentColorProp = _a.accentColor, style = _a.style, className = _a.className;
+    var theme = useNiivueViewerTheme();
+    var accentColor = resolveNiivueAccentColor(accentColorProp, theme);
     var a = transformFactors.a, b = transformFactors.b;
     return (_jsxs("div", __assign({ style: style, className: className }, { children: [title !== "" && (_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: title }))), _jsx(Card, __assign({ variant: "outlined", sx: { mb: 2, borderTopLeftRadius: 0, borderTopRightRadius: 0 } }, { children: _jsx(CardContent, __assign({ sx: { "&:last-child": { paddingBottom: 2 } } }, { children: _jsxs(Box, __assign({ style: { display: "flex", flex: 1, minWidth: "245px", flexDirection: "column" } }, { children: [_jsx(TKDualRange, { name: "Values:", minDomain: (_c = (_b = nv.volumes[0]) === null || _b === void 0 ? void 0 : _b.robust_min) !== null && _c !== void 0 ? _c : 0, maxDomain: (_e = (_d = nv.volumes[0]) === null || _d === void 0 ? void 0 : _d.robust_max) !== null && _e !== void 0 ? _e : 1, valueLow: min, valueHigh: max, onChangeLow: function (newMin) {
                                     var v = nv.volumes[0];

package/dist/CmrComponents/niivue-roi-table/NiivueRoiTable.js

@@ -58,6 +58,7 @@ import CmrTable from "../../CmrTable/CmrTable";
 import CMRUpload from "../upload/Upload";
 import { getEndpoints } from "../../core/config/AppConfig";
 import { AuthenticatedHttpClient } from "../../core/common/utilities/AuthenticatedRequests";
+import { useNiivueViewerTheme } from "../niivue-viewer/NiivueViewerThemeContext";
 /** Default merged ROI label in Niivue patcher `groupLabelsInto` / `groupLabelsFromSelection`. */
 export var DEFAULT_ROI_GROUP_TARGET_LABEL = 7;
 var ROI_TOOLBAR_ICON_SIZE_PX = 24;
@@ -79,6 +80,7 @@ export function NiivueRoiTable(props) {
     var _this = this;
     var _a = props.groupTargetLabel, groupTargetLabel = _a === void 0 ? DEFAULT_ROI_GROUP_TARGET_LABEL : _a, onAfterRoiUpload = props.onAfterRoiUpload;
     var _b = useState(1), uploadKey = _b[0], setUploadKey = _b[1];
+    var theme = useNiivueViewerTheme();
     var endpoints = getEndpoints();
     var _c = useState([]), selectedData = _c[0], setSelectedData = _c[1];
     var roiColumns = [
@@ -151,7 +153,7 @@ export function NiivueRoiTable(props) {
         : uniqueSelected.size < 2 || selectedNums.length < 2
             ? "Select at least two different ROIs to group"
             : "Group selected ROIs";
-    return (_jsxs(Box, __assign({ style: props.style }, { children: [_jsx(CmrTable, { hideFooter: true, getRowId: function (row) { return row.label; }, style: { height: "70%" }, dataSource: props.rois, columns: roiColumns, columnHeaderHeight: 40, rowSelectionModel: selectedData, onRowSelectionModelChange: function (rowSelectionModel) {
+    return (_jsxs(Box, __assign({ style: props.style }, { children: [_jsx(CmrTable, { hideFooter: true, getRowId: function (row) { return row.label; }, style: { height: "70%" }, dataSource: props.rois, columns: roiColumns, columnHeaderHeight: 40, headerBgColor: theme.headerBgColor, headerIconColor: theme.headerIconColor, checkboxCheckedColor: theme.checkboxCheckedColor, checkboxUncheckedColor: theme.checkboxUncheckedColor, rowSelectionModel: selectedData, onRowSelectionModelChange: function (rowSelectionModel) {
                     setSelectedData(rowSelectionModel);
                 } }), _jsxs(Box, __assign({ sx: {
                     display: "flex",

package/dist/CmrComponents/niivue-slice-position/NiivueSlicePosition.d.ts

@@ -68,5 +68,5 @@ export interface NiivueSlicePositionProps {
  * <NiivueSlicePosition nv={nv} mins={mins} maxs={maxs} mms={mms} />
  * ```
  */
-export declare function NiivueSlicePosition({ nv, mins, maxs, mms, title, accentColor, style, className, }: NiivueSlicePositionProps): import("react/jsx-runtime").JSX.Element;
+export declare function NiivueSlicePosition({ nv, mins, maxs, mms, title, accentColor: accentColorProp, style, className, }: NiivueSlicePositionProps): import("react/jsx-runtime").JSX.Element;
 export default NiivueSlicePosition;

package/dist/CmrComponents/niivue-slice-position/NiivueSlicePosition.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Card, CardContent } from "@mui/material";
 import CmrLabel from "../label/Label";
+import { resolveNiivueAccentColor, useNiivueViewerTheme, } from "../niivue-viewer/NiivueViewerThemeContext";
 // ─── Helpers (pure, no React) ─────────────────────────────────────────────────
 var safeSpan = function (min, max) { return Math.max(1e-9, max - min); };
 var clamp = function (v, lo, hi) { return Math.max(lo, Math.min(hi, v)); };
@@ -47,7 +48,9 @@ var round3 = function (v) { return Math.round(v * 1000) / 1000; };
  */
 export function NiivueSlicePosition(_a) {
     var _b, _c, _d, _e, _f;
-    var nv = _a.nv, mins = _a.mins, maxs = _a.maxs, mms = _a.mms, _g = _a.title, title = _g === void 0 ? "Slice Position" : _g, _h = _a.accentColor, accentColor = _h === void 0 ? "#580f8b" : _h, style = _a.style, className = _a.className;
+    var nv = _a.nv, mins = _a.mins, maxs = _a.maxs, mms = _a.mms, _g = _a.title, title = _g === void 0 ? "Slice Position" : _g, accentColorProp = _a.accentColor, style = _a.style, className = _a.className;
+    var theme = useNiivueViewerTheme();
+    var accentColor = resolveNiivueAccentColor(accentColorProp, theme);
     // ── Derive voxel grid from the loaded volume ─────────────────────────────
     var vol = (_b = nv === null || nv === void 0 ? void 0 : nv.volumes) === null || _b === void 0 ? void 0 : _b[0];
     var meta = (_c = vol === null || vol === void 0 ? void 0 : vol.getImageMetadata) === null || _c === void 0 ? void 0 : _c.call(vol);
@@ -77,7 +80,7 @@ export function NiivueSlicePosition(_a) {
             zAtStart = nv.frac2mm([cx, cy, 0.5 / nz])[2];
             zAtEnd = nv.frac2mm([cx, cy, (nz - 0.5) / nz])[2];
         }
-        catch (_j) {
+        catch (_h) {
             var s = safeSpan(mins[2], maxs[2]) / nz;
             zAtStart = mins[2] + 0.5 * s;
             zAtEnd = maxs[2] - 0.5 * s;
@@ -128,9 +131,9 @@ export function NiivueSlicePosition(_a) {
         }
     };
     // ── Local slider state (mirrors mms; synced by useEffect) ────────────────
-    var _k = React.useState(round3(mms[0])), xVal = _k[0], setXVal = _k[1];
-    var _l = React.useState(round3(mms[1])), yVal = _l[0], setYVal = _l[1];
-    var _m = React.useState(round3(mms[2])), zVal = _m[0], setZVal = _m[1];
+    var _j = React.useState(round3(mms[0])), xVal = _j[0], setXVal = _j[1];
+    var _k = React.useState(round3(mms[1])), yVal = _k[0], setYVal = _k[1];
+    var _l = React.useState(round3(mms[2])), zVal = _l[0], setZVal = _l[1];
     // Keep a ref so snapToVoxel can read the *latest* values without stale closure
     var mmsRef = React.useRef([xVal, yVal, zVal]);
     React.useEffect(function () {
@@ -208,7 +211,7 @@ export function NiivueSlicePosition(_a) {
         try {
             fracZ = nv.mm2frac([xVal, yVal, zVal])[2];
         }
-        catch (_o) {
+        catch (_m) {
             fracZ = ratioAxis(zVal, 2);
         }
         zSliceIndex = clamp(Math.round(fracZ * nz - 0.5), 0, nz - 1);

package/dist/CmrComponents/niivue-viewer/CloudMrNiivuePanel.js

@@ -57,8 +57,10 @@ import { NiivueRoiTable } from "../niivue-roi-table/NiivueRoiTable";
 import { MroDrawToolkit } from "./mro-draw-toolkit/MroDrawToolkit";
 import { ShapeDraftOverlay } from "./ShapeDraftOverlay";
 import { PenDraftOverlay } from "./PenDraftOverlay";
+import { useNiivueViewerTheme } from "./NiivueViewerThemeContext";
 export function CloudMrNiivuePanel(props) {
     var _this = this;
+    var theme = useNiivueViewerTheme();
     var canvas = React.useRef(null);
     var histogram = React.useRef(null);
     var mins = props.mins, maxs = props.maxs, mms = props.mms;
@@ -150,7 +152,7 @@ export function CloudMrNiivuePanel(props) {
                 md: "row"
             },
             flexWrap: "nowrap"
-        } }, { children: [_jsxs(Box, __assign({ sx: {
+        }, style: theme.cssVars }, { children: [_jsxs(Box, __assign({ sx: {
                     width: {
                         xs: "100%",
                         md: "63%"

package/dist/CmrComponents/niivue-viewer/CloudMrNiivueViewer.d.ts

@@ -13,6 +13,7 @@ export default function CloudMrNiivueViewer(props: any): import("react/jsx-runti
  * @property {string} roiDeleteUrl — full URL for `ROI_DELETE` (app resolves from env)
  * @property {() => Promise<void>} refreshPipelineRois — e.g. dispatch getPipelineROI
  * @property {() => any[]} getPipelineRois — returns current ROI list for pipeline (e.g. from Redux)
+ * @property {string} [accentColor] — override viewer accent; else host MUI primary if set, else `#580f8b`
  */
 export const nv: Niivue;
 export type CloudMrNiivueViewerProps = {
@@ -37,5 +38,9 @@ export type CloudMrNiivueViewerProps = {
      * — returns current ROI list for pipeline (e.g. from Redux)
      */
     getPipelineRois: () => any[];
+    /**
+     * — override viewer accent; else host MUI primary if set, else `#580f8b`
+     */
+    accentColor?: string | undefined;
 };
 import { Niivue } from "./NiivuePatcher";

package/dist/CmrComponents/niivue-viewer/CloudMrNiivueViewer.js

@@ -77,6 +77,7 @@ import axios from "axios";
 import JSZip from "jszip";
 import { getMax, getMin } from "../../core/common/utilities";
 import { AuthenticatedHttpClient, getEndpoints } from "../../core";
+import { NiivueViewerThemeProvider } from './NiivueViewerThemeContext';
 /**
  * @typedef {Object} CloudMrNiivueViewerProps
  * @property {any[]} niis
@@ -91,6 +92,7 @@ import { AuthenticatedHttpClient, getEndpoints } from "../../core";
  * @property {string} roiDeleteUrl — full URL for `ROI_DELETE` (app resolves from env)
  * @property {() => Promise<void>} refreshPipelineRois — e.g. dispatch getPipelineROI
  * @property {() => any[]} getPipelineRois — returns current ROI list for pipeline (e.g. from Redux)
+ * @property {string} [accentColor] — override viewer accent; else host MUI primary if set, else `#580f8b`
  */
 export var nv = new Niivue({
     loadingText: '',
@@ -1765,21 +1767,21 @@ export default function CloudMrNiivueViewer(props) {
         onDeactivateDrawTools: deactivateDrawTools,
         onClearDrawing: clearDrawingHandler
     };
-    return (_jsxs(Box, __assign({ sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            width: '100%',
-            alignItems: 'center',
-            justifyContent: 'center'
-        } }, { children: [_jsxs(SettingsPanel, __assign({ open: openSettings, width: 300, toggleMenu: toggleSettings }, { children: [_jsx(ColorPicker, { colorRGB01: backColor, onSetColor: nvUpdateBackColor, title: 'Background color' }), _jsx(ColorPicker, { colorRGB01: clipPlaneColor, onSetColor: nvUpdateClipPlaneColor, title: 'Clip plane color' }), _jsx(NumberPicker, { value: clipPlaneOpacity, onChange: nvUpdateClipPlaneOpacity, title: 'Clip plane opacity', min: 0, max: 1, step: 0.1 }), _jsx(ColorPicker, { colorRGB01: crosshairColor, onSetColor: nvUpdateCrosshairColor, title: 'Crosshair color' }), _jsx(NumberPicker, { value: crosshairOpacity, onChange: nvUpdateCrosshairOpacity, title: 'Crosshair opacity', min: 0, max: 1, step: 0.1 }), _jsx(ColorPicker, { colorRGB01: selectionBoxColor, onSetColor: nvUpdateSelectionBoxColor, title: 'Selection box color' }), _jsx(NumberPicker, { value: nv.opts.crosshairWidth, onChange: nvUpdateCrosshairSize, title: 'Crosshair size', min: 0, max: 10, step: 1 }), _jsx(NumberPicker, { value: textSize, onChange: nvUpdateTextSize, title: 'Text size', min: 0, max: 0.2, step: 0.01 }), _jsx(ColorPicker, { colorRGB01: rulerColor, onSetColor: nvUpdateRulerColor, title: 'Ruler color' }), _jsx(NumberPicker, { value: rulerWidth, onChange: nvUpdateRulerWidth, title: 'Ruler thickness', min: 0, max: 10, step: 1 }), _jsx(NumberPicker, { value: rulerOpacity, onChange: nvUpdateRulerOpacity, title: 'Ruler opacity', min: 0, max: 1, step: 0.1 }), _jsx(NumberPicker, { value: opacity, onChange: nvUpdateOpacity, title: 'Opacity', min: 0, max: 1, step: 0.01 }), _jsx(NumberPicker, { value: drawOpacity, onChange: nvUpdateDrawOpacity, title: 'Draw Opacity', min: 0, max: 1, step: 0.01 }), _jsx("label", __assign({ htmlFor: "drawPen" }, { children: "Draw color:" })), _jsxs("select", __assign({ name: "drawPen", id: "drawPen", onChange: nvUpdateDrawPen, value: drawPen }, { children: [_jsx("option", __assign({ value: "0" }, { children: "Erase" })), _jsx("option", __assign({ value: "1" }, { children: "Red" })), _jsx("option", __assign({ value: "2" }, { children: "Green" })), _jsx("option", __assign({ value: "3" }, { children: "Blue" })), _jsx("option", __assign({ value: "8" }, { children: "Filled Erase" })), _jsx("option", __assign({ value: "9" }, { children: "Filled Red" })), _jsx("option", __assign({ value: "10" }, { children: "Filled Green" })), _jsx("option", __assign({ value: "11" }, { children: "Filled Blue" })), _jsx("option", __assign({ value: "12" }, { children: "Erase Selected Cluster" }))] })), _jsx(Button, __assign({ title: 'Save image', onClick: nvSaveImage }, { children: "Save image" })), _jsx(NVSwitch, { checked: locationTableVisible, title: 'Location table', onChange: toggleLocationTable }), _jsx(NVSwitch, { checked: drawingEnabled, title: 'Enable drawing', onChange: nvUpdateDrawingEnabled }), _jsx(NVSwitch, { checked: orientCube, title: 'Orientation cube', onChange: nvUpdateOrientCube }), _jsx(NVSwitch, { checked: ruler, title: 'Ruler', onChange: nvUpdateRuler }), _jsx(NVSwitch, { checked: clipPlane, title: 'Clip plane', onChange: nvUpdateClipPlane }), _jsx(NVSwitch, { checked: cornerText, title: 'Corner text', onChange: nvUpdateCornerText }), _jsx(NVSwitch, { checked: radiological, title: 'radiological', onChange: nvUpdateRadiological }), _jsx(NVSwitch, { checked: crosshair3D, title: '3D crosshair', onChange: nvUpdateCrosshair3D }), _jsx(NVSwitch, { checked: colorBar, title: 'Show color bar', onChange: nvUpdateColorBar }), _jsx(NVSwitch, { checked: worldSpace, title: 'World space', onChange: nvUpdateWorldSpace }), _jsx(NVSwitch, { checked: sagittalNoseLeft, title: 'Nose left', onChange: nvUpdateSagittalNoseLeft }), _jsx(NVSwitch, { checked: dragToMeasure, title: 'Drag to measure', onChange: nvUpdateDragToMeasure }), _jsx(NVSwitch, { checked: highDPI, title: 'High DPI', onChange: nvUpdateHighDPI }), _jsx(NumberPicker, { value: decimalPrecision, onChange: updateDecimalPrecision, title: 'Decimal precision', min: 0, max: 8, step: 1 }), _jsx(NumberPicker, { value: multiplanarPadPixels, onChange: nvUpdateMultiplanarPadPixels, title: 'Multiplanar padding', min: 0, max: 20, step: 2 }), _jsx(NumberPicker, { value: maxDrawUndoBitmaps, onChange: nvUpdateMaxDrawUndoBitmaps, title: 'Max Draw Undos', min: 8, max: 28, step: 1 }), _jsx(NumberPicker, { value: longTouchTimeout, onChange: nvUpdateLongTouchTimeout, title: 'Long touch timeout msec', min: 1000, max: 5000, step: 100 }), _jsx(NumberPicker, { value: doubleTouchTimeout, onChange: nvUpdateDoubleTouchTimeout, title: 'Double touch timeout msec', min: 500, max: 999, step: 25 })] })), _jsx(LayersPanel, __assign({ open: openLayers, width: 320, onToggleMenu: toggleLayers, onAddLayer: addLayer }, { children: layerList })), _jsx(Toolbar, { nv: nv, nvUpdateSliceType: nvUpdateSliceType, sliceType: sliceType, toggleSettings: toggleSettings, toggleLayers: toggleLayers, volumes: props.niis.map(niiToVolume), selectedVolume: selectedVolume, setSelectedVolume: selectVolume, showColorBar: colorBar, toggleColorBar: nvUpdateColorBar, rois: props.rois, selectedROI: selectedROI, refreshROI: refreshROI, setSelectedROI: selectDrawingLayer, toggleShowCrosshair: nvUpdateCrosshair, showCrosshair: showCrosshair, dragMode: dragMode, setDragMode: nvSetDragMode, toggleRadiological: nvUpdateRadiological, radiological: radiological, saveROI: saveDrawingLayer, complexMode: complexMode, setComplexMode: nvSetDisplayedVoxels, complexOptions: complexOptions, labelsVisible: textsVisible, toggleLabelsVisible: nvToggleLabelVisible, saving: saving, setSaving: setSaving, drawingChanged: drawingChanged, resampleImage: resampleImage, accessToken: props.accessToken, pipelineId: props.pipelineID, roiDeleteUrl: props.roiDeleteUrl, refreshPipelineRois: props.refreshPipelineRois }), _jsx(CmrConfirmation, { name: 'New Changes Made', message: "Consider saving your drawing before switching.", open: confirmationOpen, setOpen: setConfirmationOpen, cancellable: true, confirmCallback: warningConfirmationCallback, cancelCallback: warningCancelCallback, cancelText: "Don't save" }), _jsx(CmrEditConfirmation, { name: 'Save drawings', message: 'Please enter the name of the saved drawing', open: saveDialogOpen, setOpen: setSaveDialogOpen, confirmCallback: saveConfirmCallback, cancellable: true, cancelCallback: function () {
-                }, 
-                // suffix={'.zip'}
-                defaultText: (props.rois[selectedROI] !== undefined ?
-                    props.rois[selectedROI].filename : undefined) }), props.niis[selectedVolume] != undefined && _jsx(CloudMrNiivuePanel, { nv: nv, transformFactors: transformFactors, decimalPrecision: decimalPrecision, locationData: locationData, locationTableVisible: locationTableVisible, pipelineID: props.pipelineID, resampleImage: resampleImage, rois: rois, drawToolkitProps: drawToolkitProps, drawShapeTool: drawShapeTool, setDrawShapeTool: setDrawShapeTool, mins: boundMins, maxs: boundMaxs, mms: mms, min: min, max: max, setMin: setMin, setMax: setMax, unzipAndRenderROI: unpackROI, zipAndSendROI: zipAndSendDrawingLayer, setLabelAlias: setLabelAlias, onAfterRoiUpload: function () {
-                    var _a;
-                    void ((_a = props.refreshPipelineRois) === null || _a === void 0 ? void 0 : _a.call(props));
-                }, gamma: gamma, gammaKey: gammaKey, setGamma: setGamma, shapeDraft: shapeDraft, onShapeDraftChange: onShapeDraftChange, onApplyShapeDraft: function () { return applyShapeDraft(); }, onApplyShapeDraftKeepTool: function () { return applyShapeDraft({ keepTool: true }); }, onCancelShapeDraft: cancelShapeDraft, penDraft: penDraft, onPenDraftChange: onPenDraftChange, onApplyPenDraft: function () { return applyPenDraftHandler(); }, onApplyPenDraftKeepTool: function () { return applyPenDraftHandler({ keepTool: true }); }, onCancelPenDraft: cancelPenDraftHandler }, "".concat(selectedVolume))] })));
+    return (_jsx(NiivueViewerThemeProvider, __assign({ accentColor: props.accentColor }, { children: _jsxs(Box, __assign({ sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                width: '100%',
+                alignItems: 'center',
+                justifyContent: 'center'
+            } }, { children: [_jsxs(SettingsPanel, __assign({ open: openSettings, width: 300, toggleMenu: toggleSettings }, { children: [_jsx(ColorPicker, { colorRGB01: backColor, onSetColor: nvUpdateBackColor, title: 'Background color' }), _jsx(ColorPicker, { colorRGB01: clipPlaneColor, onSetColor: nvUpdateClipPlaneColor, title: 'Clip plane color' }), _jsx(NumberPicker, { value: clipPlaneOpacity, onChange: nvUpdateClipPlaneOpacity, title: 'Clip plane opacity', min: 0, max: 1, step: 0.1 }), _jsx(ColorPicker, { colorRGB01: crosshairColor, onSetColor: nvUpdateCrosshairColor, title: 'Crosshair color' }), _jsx(NumberPicker, { value: crosshairOpacity, onChange: nvUpdateCrosshairOpacity, title: 'Crosshair opacity', min: 0, max: 1, step: 0.1 }), _jsx(ColorPicker, { colorRGB01: selectionBoxColor, onSetColor: nvUpdateSelectionBoxColor, title: 'Selection box color' }), _jsx(NumberPicker, { value: nv.opts.crosshairWidth, onChange: nvUpdateCrosshairSize, title: 'Crosshair size', min: 0, max: 10, step: 1 }), _jsx(NumberPicker, { value: textSize, onChange: nvUpdateTextSize, title: 'Text size', min: 0, max: 0.2, step: 0.01 }), _jsx(ColorPicker, { colorRGB01: rulerColor, onSetColor: nvUpdateRulerColor, title: 'Ruler color' }), _jsx(NumberPicker, { value: rulerWidth, onChange: nvUpdateRulerWidth, title: 'Ruler thickness', min: 0, max: 10, step: 1 }), _jsx(NumberPicker, { value: rulerOpacity, onChange: nvUpdateRulerOpacity, title: 'Ruler opacity', min: 0, max: 1, step: 0.1 }), _jsx(NumberPicker, { value: opacity, onChange: nvUpdateOpacity, title: 'Opacity', min: 0, max: 1, step: 0.01 }), _jsx(NumberPicker, { value: drawOpacity, onChange: nvUpdateDrawOpacity, title: 'Draw Opacity', min: 0, max: 1, step: 0.01 }), _jsx("label", __assign({ htmlFor: "drawPen" }, { children: "Draw color:" })), _jsxs("select", __assign({ name: "drawPen", id: "drawPen", onChange: nvUpdateDrawPen, value: drawPen }, { children: [_jsx("option", __assign({ value: "0" }, { children: "Erase" })), _jsx("option", __assign({ value: "1" }, { children: "Red" })), _jsx("option", __assign({ value: "2" }, { children: "Green" })), _jsx("option", __assign({ value: "3" }, { children: "Blue" })), _jsx("option", __assign({ value: "8" }, { children: "Filled Erase" })), _jsx("option", __assign({ value: "9" }, { children: "Filled Red" })), _jsx("option", __assign({ value: "10" }, { children: "Filled Green" })), _jsx("option", __assign({ value: "11" }, { children: "Filled Blue" })), _jsx("option", __assign({ value: "12" }, { children: "Erase Selected Cluster" }))] })), _jsx(Button, __assign({ title: 'Save image', onClick: nvSaveImage }, { children: "Save image" })), _jsx(NVSwitch, { checked: locationTableVisible, title: 'Location table', onChange: toggleLocationTable }), _jsx(NVSwitch, { checked: drawingEnabled, title: 'Enable drawing', onChange: nvUpdateDrawingEnabled }), _jsx(NVSwitch, { checked: orientCube, title: 'Orientation cube', onChange: nvUpdateOrientCube }), _jsx(NVSwitch, { checked: ruler, title: 'Ruler', onChange: nvUpdateRuler }), _jsx(NVSwitch, { checked: clipPlane, title: 'Clip plane', onChange: nvUpdateClipPlane }), _jsx(NVSwitch, { checked: cornerText, title: 'Corner text', onChange: nvUpdateCornerText }), _jsx(NVSwitch, { checked: radiological, title: 'radiological', onChange: nvUpdateRadiological }), _jsx(NVSwitch, { checked: crosshair3D, title: '3D crosshair', onChange: nvUpdateCrosshair3D }), _jsx(NVSwitch, { checked: colorBar, title: 'Show color bar', onChange: nvUpdateColorBar }), _jsx(NVSwitch, { checked: worldSpace, title: 'World space', onChange: nvUpdateWorldSpace }), _jsx(NVSwitch, { checked: sagittalNoseLeft, title: 'Nose left', onChange: nvUpdateSagittalNoseLeft }), _jsx(NVSwitch, { checked: dragToMeasure, title: 'Drag to measure', onChange: nvUpdateDragToMeasure }), _jsx(NVSwitch, { checked: highDPI, title: 'High DPI', onChange: nvUpdateHighDPI }), _jsx(NumberPicker, { value: decimalPrecision, onChange: updateDecimalPrecision, title: 'Decimal precision', min: 0, max: 8, step: 1 }), _jsx(NumberPicker, { value: multiplanarPadPixels, onChange: nvUpdateMultiplanarPadPixels, title: 'Multiplanar padding', min: 0, max: 20, step: 2 }), _jsx(NumberPicker, { value: maxDrawUndoBitmaps, onChange: nvUpdateMaxDrawUndoBitmaps, title: 'Max Draw Undos', min: 8, max: 28, step: 1 }), _jsx(NumberPicker, { value: longTouchTimeout, onChange: nvUpdateLongTouchTimeout, title: 'Long touch timeout msec', min: 1000, max: 5000, step: 100 }), _jsx(NumberPicker, { value: doubleTouchTimeout, onChange: nvUpdateDoubleTouchTimeout, title: 'Double touch timeout msec', min: 500, max: 999, step: 25 })] })), _jsx(LayersPanel, __assign({ open: openLayers, width: 320, onToggleMenu: toggleLayers, onAddLayer: addLayer }, { children: layerList })), _jsx(Toolbar, { nv: nv, nvUpdateSliceType: nvUpdateSliceType, sliceType: sliceType, toggleSettings: toggleSettings, toggleLayers: toggleLayers, volumes: props.niis.map(niiToVolume), selectedVolume: selectedVolume, setSelectedVolume: selectVolume, showColorBar: colorBar, toggleColorBar: nvUpdateColorBar, rois: props.rois, selectedROI: selectedROI, refreshROI: refreshROI, setSelectedROI: selectDrawingLayer, toggleShowCrosshair: nvUpdateCrosshair, showCrosshair: showCrosshair, dragMode: dragMode, setDragMode: nvSetDragMode, toggleRadiological: nvUpdateRadiological, radiological: radiological, saveROI: saveDrawingLayer, complexMode: complexMode, setComplexMode: nvSetDisplayedVoxels, complexOptions: complexOptions, labelsVisible: textsVisible, toggleLabelsVisible: nvToggleLabelVisible, saving: saving, setSaving: setSaving, drawingChanged: drawingChanged, resampleImage: resampleImage, accessToken: props.accessToken, pipelineId: props.pipelineID, roiDeleteUrl: props.roiDeleteUrl, refreshPipelineRois: props.refreshPipelineRois }), _jsx(CmrConfirmation, { name: 'New Changes Made', message: "Consider saving your drawing before switching.", open: confirmationOpen, setOpen: setConfirmationOpen, cancellable: true, confirmCallback: warningConfirmationCallback, cancelCallback: warningCancelCallback, cancelText: "Don't save" }), _jsx(CmrEditConfirmation, { name: 'Save drawings', message: 'Please enter the name of the saved drawing', open: saveDialogOpen, setOpen: setSaveDialogOpen, confirmCallback: saveConfirmCallback, cancellable: true, cancelCallback: function () {
+                    }, 
+                    // suffix={'.zip'}
+                    defaultText: (props.rois[selectedROI] !== undefined ?
+                        props.rois[selectedROI].filename : undefined) }), props.niis[selectedVolume] != undefined && _jsx(CloudMrNiivuePanel, { nv: nv, transformFactors: transformFactors, decimalPrecision: decimalPrecision, locationData: locationData, locationTableVisible: locationTableVisible, pipelineID: props.pipelineID, resampleImage: resampleImage, rois: rois, drawToolkitProps: drawToolkitProps, drawShapeTool: drawShapeTool, setDrawShapeTool: setDrawShapeTool, mins: boundMins, maxs: boundMaxs, mms: mms, min: min, max: max, setMin: setMin, setMax: setMax, unzipAndRenderROI: unpackROI, zipAndSendROI: zipAndSendDrawingLayer, setLabelAlias: setLabelAlias, onAfterRoiUpload: function () {
+                        var _a;
+                        void ((_a = props.refreshPipelineRois) === null || _a === void 0 ? void 0 : _a.call(props));
+                    }, gamma: gamma, gammaKey: gammaKey, setGamma: setGamma, shapeDraft: shapeDraft, onShapeDraftChange: onShapeDraftChange, onApplyShapeDraft: function () { return applyShapeDraft(); }, onApplyShapeDraftKeepTool: function () { return applyShapeDraft({ keepTool: true }); }, onCancelShapeDraft: cancelShapeDraft, penDraft: penDraft, onPenDraftChange: onPenDraftChange, onApplyPenDraft: function () { return applyPenDraftHandler(); }, onApplyPenDraftKeepTool: function () { return applyPenDraftHandler({ keepTool: true }); }, onCancelPenDraft: cancelPenDraftHandler }, "".concat(selectedVolume))] })) })));
 }
 function niiToVolume(nii) {
     return {

package/dist/CmrComponents/niivue-viewer/Layer.js

@@ -26,6 +26,7 @@ import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp
 import { NumberPicker } from './NumberPicker';
 import React from 'react';
 import { display } from "@mui/system";
+import { useNiivueViewerTheme } from "./NiivueViewerThemeContext";
 function makeColorGradients(colorMapValues) {
     var gradients = '';
     var c = colorMapValues;
@@ -41,6 +42,7 @@ function makeColorGradients(colorMapValues) {
 }
 export default function Layer(props) {
     var _a;
+    var theme = useNiivueViewerTheme();
     var allowedColorMaps = [
         "bone",
         "gray",
@@ -112,7 +114,7 @@ export default function Layer(props) {
                                 width: '100%',
                                 alignSelf: 'center',
                                 margin: '8px 0 16px 0',
-                                accentColor: '#580f8b'
+                                accentColor: theme.accentColor
                             } })] })), _jsx(Box, __assign({ sx: {
                         display: 'flex',
                         flexDirection: 'row',

package/dist/CmrComponents/niivue-viewer/NiivueViewerThemeContext.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { type NiivueViewerThemeTokens } from "./niivueViewerTheme";
+export interface NiivueViewerThemeProviderProps {
+    /**
+     * Optional override for viewer accent (sliders, ROI table tints, draw-toolkit, etc.).
+     * When omitted: uses host MUI `palette.primary.main` if customized, else package purple.
+     */
+    accentColor?: string;
+    children: React.ReactNode;
+}
+export declare function NiivueViewerThemeProvider({ accentColor, children, }: NiivueViewerThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Returns the viewer theme from context, or package defaults when outside a provider. */
+export declare function useNiivueViewerTheme(): NiivueViewerThemeTokens;
+export declare function resolveNiivueAccentColor(propAccent: string | undefined, theme: NiivueViewerThemeTokens): string;

package/dist/CmrComponents/niivue-viewer/NiivueViewerThemeContext.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { useTheme } from "@mui/material/styles";
+import { buildNiivueViewerTheme, CLOUDMR_NIIVUE_DEFAULT_ACCENT, resolveViewerAccentColor, } from "./niivueViewerTheme";
+var NiivueViewerThemeContext = createContext(null);
+export function NiivueViewerThemeProvider(_a) {
+    var accentColor = _a.accentColor, children = _a.children;
+    var muiTheme = useTheme();
+    var resolvedAccent = resolveViewerAccentColor(accentColor, muiTheme.palette.primary.main);
+    var theme = useMemo(function () { return buildNiivueViewerTheme(resolvedAccent); }, [resolvedAccent]);
+    return (_jsx(NiivueViewerThemeContext.Provider, __assign({ value: theme }, { children: children })));
+}
+/** Returns the viewer theme from context, or package defaults when outside a provider. */
+export function useNiivueViewerTheme() {
+    var ctx = useContext(NiivueViewerThemeContext);
+    return ctx !== null && ctx !== void 0 ? ctx : buildNiivueViewerTheme(CLOUDMR_NIIVUE_DEFAULT_ACCENT);
+}
+export function resolveNiivueAccentColor(propAccent, theme) {
+    return propAccent !== null && propAccent !== void 0 ? propAccent : theme.accentColor;
+}

package/dist/CmrComponents/niivue-viewer/PenDraftOverlay.js

@@ -22,8 +22,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { boundsToFreehandCorners, redrawFreehandDraft, redrawPolylineDraft, syncPolylineDraftToNv, translateFreehandDraft, translatePolylineVertices, updatePolylineVertex, } from "./penDraftUtils";
 import { canvasDeltaToVoxDelta, clientToCanvasPos, voxToOverlayPos, voxUnderClient, } from "./shapeDraftUtils";
+import { useNiivueViewerTheme } from "./NiivueViewerThemeContext";
 var HANDLE_SIZE = 10;
-var ACCENT = "#580f8b";
 function cloneFreehandDraft(draft) {
     return __assign(__assign({}, draft), { strokeVoxels: draft.strokeVoxels.map(function (v) { return __spreadArray([], v, true); }), bounds: draft.bounds ? __assign({}, draft.bounds) : draft.bounds });
 }
@@ -33,6 +33,7 @@ function cloneFreehandDraft(draft) {
  */
 export function PenDraftOverlay(_a) {
     var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, onApplyDraft = _a.onApplyDraft, overlayKey = _a.overlayKey;
+    var theme = useNiivueViewerTheme();
     var dragRef = useRef(null);
     var draftRef = useRef(draft);
     draftRef.current = draft;
@@ -187,7 +188,7 @@ export function PenDraftOverlay(_a) {
         marginTop: -HANDLE_SIZE / 2,
         borderRadius: "50%",
         background: "#fff",
-        border: "2px solid ".concat(ACCENT),
+        border: "2px solid ".concat(theme.accentColor),
         boxSizing: "border-box",
         cursor: "pointer",
         zIndex: 3,
@@ -206,8 +207,8 @@ export function PenDraftOverlay(_a) {
                     top: boxStyle.top,
                     width: boxStyle.width,
                     height: boxStyle.height,
-                    border: "2px dashed ".concat(ACCENT),
-                    background: "rgba(88, 15, 139, 0.08)",
+                    border: "2px dashed ".concat(theme.accentColor),
+                    background: theme.accentMutedBgLight,
                     boxSizing: "border-box",
                     pointerEvents: "none"
                 } }), centerCss && (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "move"); }, style: __assign(__assign({}, handleStyle), { left: centerCss.x, top: centerCss.y, cursor: "move", borderRadius: 2, width: 12, height: 12, marginLeft: -6, marginTop: -6 }), title: "Move shape" })), isPolyline &&

package/dist/CmrComponents/niivue-viewer/ShapeDraftOverlay.js

@@ -21,8 +21,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { boundsToCorners, canvasDeltaToVoxDelta, clientToCanvasPos, normalizeBounds, redrawDraftShape, resizeDraftCorner, translatePt, voxToOverlayPos, voxUnderClient, } from "./shapeDraftUtils";
+import { useNiivueViewerTheme } from "./NiivueViewerThemeContext";
 var HANDLE_SIZE = 10;
-var ACCENT = "#580f8b";
 /**
  * Overlay handles for adjusting a rectangle/ellipse draft before commit.
  * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
@@ -30,6 +30,7 @@ var ACCENT = "#580f8b";
 export function ShapeDraftOverlay(_a) {
     var _b;
     var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, onApplyDraft = _a.onApplyDraft, overlayKey = _a.overlayKey;
+    var theme = useNiivueViewerTheme();
     var dragRef = useRef(null);
     var draftRef = useRef(draft);
     draftRef.current = draft;
@@ -157,7 +158,7 @@ export function ShapeDraftOverlay(_a) {
         marginTop: -HANDLE_SIZE / 2,
         borderRadius: "50%",
         background: "#fff",
-        border: "2px solid ".concat(ACCENT),
+        border: "2px solid ".concat(theme.accentColor),
         boxSizing: "border-box",
         cursor: "pointer",
         zIndex: 3,
@@ -176,8 +177,8 @@ export function ShapeDraftOverlay(_a) {
                     top: boxStyle.top,
                     width: boxStyle.width,
                     height: boxStyle.height,
-                    border: "2px dashed ".concat(ACCENT),
-                    background: "rgba(88, 15, 139, 0.08)",
+                    border: "2px dashed ".concat(theme.accentColor),
+                    background: theme.accentMutedBgLight,
                     boxSizing: "border-box",
                     pointerEvents: "none"
                 } }), centerCss && (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "move"); }, style: __assign(__assign({}, handleStyle), { left: centerCss.x, top: centerCss.y, cursor: "move", borderRadius: 2, width: 12, height: 12, marginLeft: -6, marginTop: -6 }), title: "Move shape" })), cornerCss.map(function (pos, i) { return (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "corner", i); }, style: __assign(__assign({}, handleStyle), { left: pos.x, top: pos.y, cursor: "nwse-resize" }), title: "Resize shape" }, "corner-".concat(i))); })] })));

package/dist/CmrComponents/niivue-viewer/Switch.js

@@ -14,7 +14,9 @@ import { Box } from "@mui/material";
 import { Typography } from "@mui/material";
 import { Switch } from "@mui/material";
 import React from "react";
+import { useNiivueViewerTheme } from "./NiivueViewerThemeContext";
 export default function NVSwitch(props) {
+    var viewerTheme = useNiivueViewerTheme();
     function handleChange() {
         props.onChange();
     }
@@ -23,5 +25,5 @@ export default function NVSwitch(props) {
             alignItems: 'center'
         }, m: 1 }, { children: [_jsx(Typography, __assign({ onClick: handleChange, style: {
                     marginRight: 'auto'
-                } }, { children: props.title })), _jsx(Switch, { checked: props.checked, onChange: handleChange })] })));
+                } }, { children: props.title })), _jsx(Switch, { checked: props.checked, onChange: handleChange, sx: viewerTheme.muiSwitchSx })] })));
 }

package/dist/CmrComponents/niivue-viewer/Toolbar.js

@@ -59,9 +59,11 @@ import Brightness6Icon from '@mui/icons-material/Brightness6';
 import DeleteIcon from "@mui/icons-material/Delete";
 import CmrConfirmation from "../dialogue/Confirmation";
 import axios from "axios";
+import { useNiivueViewerTheme } from "./NiivueViewerThemeContext";
 export default function Toolbar(props) {
     var _this = this;
     var saving = props.saving, setSaving = props.setSaving;
+    var viewerTheme = useNiivueViewerTheme();
     function handleSliceTypeChange(e) {
         var newSliceType = e.target.value;
         var nvUpdateSliceType = props.nvUpdateSliceType;
@@ -222,22 +224,22 @@ export default function Toolbar(props) {
                                 alignItems: 'center'
                             }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
                                         marginRight: 'auto'
-                                    } }, { children: "Neurological" })), _jsx(Switch, { defaultChecked: false, checked: !props.radiological, onChange: props.toggleRadiological })] })), _jsxs(Box, __assign({ sx: {
+                                    } }, { children: "Neurological" })), _jsx(Switch, { defaultChecked: false, checked: !props.radiological, onChange: props.toggleRadiological, sx: viewerTheme.muiSwitchSx })] })), _jsxs(Box, __assign({ sx: {
                                 display: 'flex',
                                 alignItems: 'center'
                             }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
                                         marginRight: 'auto'
-                                    } }, { children: "Show Crosshair" })), _jsx(Switch, { defaultChecked: true, checked: props.showCrosshair, onChange: props.toggleShowCrosshair })] })), _jsxs(Box, __assign({ sx: {
+                                    } }, { children: "Show Crosshair" })), _jsx(Switch, { defaultChecked: true, checked: props.showCrosshair, onChange: props.toggleShowCrosshair, sx: viewerTheme.muiSwitchSx })] })), _jsxs(Box, __assign({ sx: {
                                 display: 'flex',
                                 alignItems: 'center'
                             }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
                                         marginRight: 'auto'
-                                    } }, { children: "Show Color Bar" })), _jsx(Switch, { checked: props.showColorBar, onChange: props.toggleColorBar })] })), _jsxs(Box, __assign({ sx: {
+                                    } }, { children: "Show Color Bar" })), _jsx(Switch, { checked: props.showColorBar, onChange: props.toggleColorBar, sx: viewerTheme.muiSwitchSx })] })), _jsxs(Box, __assign({ sx: {
                                 display: 'flex',
                                 alignItems: 'center'
                             }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
                                         marginRight: 'auto'
-                                    } }, { children: "Labels Visible" })), _jsx(Switch, { defaultChecked: false, checked: props.labelsVisible, onChange: props.toggleLabelsVisible })] })), _jsx(Box, { sx: { flex: 1 } }), _jsxs(Stack, __assign({ flexDirection: 'row', alignItems: 'center', sx: { m: 2, gap: 0.5 } }, { children: [_jsx(Tooltip, __assign({ title: 'Reset Views', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetScene(); } }, { children: _jsx(HomeIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Recenter Views', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.recenter(); } }, { children: _jsx(CenterFocusStrongIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Reset Zooms', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetZoom(); } }, { children: _jsx(ZoomInMapIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Reset Contrast', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                                    } }, { children: "Labels Visible" })), _jsx(Switch, { defaultChecked: false, checked: props.labelsVisible, onChange: props.toggleLabelsVisible, sx: viewerTheme.muiSwitchSx })] })), _jsx(Box, { sx: { flex: 1 } }), _jsxs(Stack, __assign({ flexDirection: 'row', alignItems: 'center', sx: { m: 2, gap: 0.5 } }, { children: [_jsx(Tooltip, __assign({ title: 'Reset Views', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetScene(); } }, { children: _jsx(HomeIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Recenter Views', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.recenter(); } }, { children: _jsx(CenterFocusStrongIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Reset Zooms', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetZoom(); } }, { children: _jsx(ZoomInMapIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Reset Contrast', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () {
                                             var _a, _b;
                                             props.nv.resetContrast();
                                             props.nv.setGamma(1.0); // engine reset

package/dist/CmrComponents/niivue-viewer/mro-draw-toolkit/MroDrawToolkit.js

@@ -35,6 +35,7 @@ import ClickAwayListener from "@mui/material/ClickAwayListener";
 import DrawColorPlatte from "./DrawColorPlatte";
 import EraserPlatte from "./EraserPlatte";
 import MaskPlatte from "./MaskPlatte";
+import { useNiivueViewerTheme } from "../NiivueViewerThemeContext";
 /** True if the event target is the main NiiVue canvas (drawing surface). Clicks there must not exit draw mode. */
 function clickTargetIsNiivueCanvas(target) {
     if (typeof document === "undefined" || !(target instanceof Element))
@@ -61,10 +62,11 @@ function OpacityPlatte(_a) {
             borderTopRightRadius: "6pt",
             background: "#333",
             width: 150
-        }, direction: "column" }, { children: _jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsxs(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: ["Opacity: ", drawingOpacity] })), _jsx(Slider, { sx: { width: "80%" }, value: drawingOpacity, step: 0.01, min: 0, max: 1, onChange: function (_e, value) { return setDrawingOpacity(value); } })] })) })));
+        }, direction: "column" }, { children: _jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsxs(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: ["Opacity: ", drawingOpacity] })), _jsx(Slider, { color: "primary", sx: { width: "80%" }, value: drawingOpacity, step: 0.01, min: 0, max: 1, onChange: function (_e, value) { return setDrawingOpacity(value); } })] })) })));
 }
 export function MroDrawToolkit(props) {
     var _a;
+    var theme = useNiivueViewerTheme();
     var drawShapeTool = props.drawShapeTool, onDrawShapeToolChange = props.onDrawShapeToolChange;
     var _b = useState("n"), expandedOption = _b[0], setExpandedOption = _b[1];
     var _c = useState(false), expandOpacityOptions = _c[0], setExpandOpacityOptions = _c[1];
@@ -86,9 +88,7 @@ export function MroDrawToolkit(props) {
             setExpandedOption("d");
     }, [props.shapeDraftActive, props.penDraftActive, drawShapeTool]);
     var shapeSelectedSx = function (shape) {
-        return drawShapeTool === shape
-            ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
-            : {};
+        return drawShapeTool === shape ? theme.selectedToolSx : {};
     };
     var eraserActive = expandedOption === "e";
     function leaveEraserIfActive() {
@@ -189,9 +189,7 @@ export function MroDrawToolkit(props) {
                                     alignItems: "center",
                                     gap: 4,
                                     overflow: "visible"
-                                } }, { children: [_jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "d" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Pen" }, { children: _jsx(IconButton, __assign({ "aria-label": "pen", size: "small", onClick: clickPen, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("pen")) }, { children: _jsx(DrawIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, showPenModes: true, penDrawMode: props.penDrawMode, onPenDrawModeChange: props.onPenDrawModeChange, polylineVertexCount: props.polylineVertexCount, onCancelPolyline: props.onCancelPolyline, penDraftActive: props.penDraftActive, penDraftKind: props.penDraftKind, penDraftFilled: props.penDraftFilled, onApplyPenDraft: props.onApplyPenDraft, onDeletePenDraft: props.onDeletePenDraft, onFillPenDraft: props.onFillPenDraft, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "r" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Rectangle" }, { children: _jsx(IconButton, __assign({ "aria-label": "rectangle", size: "small", onClick: clickRectangle, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("rectangle")) }, { children: _jsx(CropSquareOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "r", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, shapeDraftActive: props.shapeDraftActive && drawShapeTool === "rectangle", onApplyShapeDraft: props.onApplyShapeDraft, onDeleteShapeDraft: props.onDeleteShapeDraft })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "l" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Ellipse" }, { children: _jsx(IconButton, __assign({ "aria-label": "ellipse", size: "small", onClick: clickEllipse, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("ellipse")) }, { children: _jsx(CircleOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "l", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, shapeDraftActive: props.shapeDraftActive && drawShapeTool === "ellipse", onApplyShapeDraft: props.onApplyShapeDraft, onDeleteShapeDraft: props.onDeleteShapeDraft })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "e" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Eraser" }, { children: _jsx(IconButton, __assign({ "aria-label": "erase", size: "small", onClick: clickEraser, sx: __assign(__assign({}, toolBtnSx), (eraserActive
-                                                        ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
-                                                        : {})) }, { children: filled || !eraserActive ? (_jsx(EraserIcon, {})) : (_jsx(AutoFixNormalOutlinedIcon, { sx: { color: ICON_COLOR } })) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })), _jsx(Tooltip, __assign({ title: "Undo" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", size: "small", onClick: function () { return props.drawUndo(); }, sx: toolBtnSx }, { children: _jsx(ReplyIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "Save screenshot" }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ "aria-label": "capture", size: "small", disabled: !vol, onClick: function () { return vol && props.nv.saveScene("".concat(vol.name, "_drawing.png")); }, sx: toolBtnSx }, { children: _jsx(CameraAltIcon, { sx: { color: ICON_COLOR } }) })) }) })), _jsx(Tooltip, __assign({ title: "Clear drawing" }, { children: _jsx(IconButton, __assign({ "aria-label": "delete", size: "small", onClick: function () {
+                                } }, { children: [_jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "d" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Pen" }, { children: _jsx(IconButton, __assign({ "aria-label": "pen", size: "small", onClick: clickPen, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("pen")) }, { children: _jsx(DrawIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, showPenModes: true, penDrawMode: props.penDrawMode, onPenDrawModeChange: props.onPenDrawModeChange, polylineVertexCount: props.polylineVertexCount, onCancelPolyline: props.onCancelPolyline, penDraftActive: props.penDraftActive, penDraftKind: props.penDraftKind, penDraftFilled: props.penDraftFilled, onApplyPenDraft: props.onApplyPenDraft, onDeletePenDraft: props.onDeletePenDraft, onFillPenDraft: props.onFillPenDraft, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "r" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Rectangle" }, { children: _jsx(IconButton, __assign({ "aria-label": "rectangle", size: "small", onClick: clickRectangle, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("rectangle")) }, { children: _jsx(CropSquareOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "r", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, shapeDraftActive: props.shapeDraftActive && drawShapeTool === "rectangle", onApplyShapeDraft: props.onApplyShapeDraft, onDeleteShapeDraft: props.onDeleteShapeDraft })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "l" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Ellipse" }, { children: _jsx(IconButton, __assign({ "aria-label": "ellipse", size: "small", onClick: clickEllipse, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("ellipse")) }, { children: _jsx(CircleOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "l", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, shapeDraftActive: props.shapeDraftActive && drawShapeTool === "ellipse", onApplyShapeDraft: props.onApplyShapeDraft, onDeleteShapeDraft: props.onDeleteShapeDraft })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "e" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Eraser" }, { children: _jsx(IconButton, __assign({ "aria-label": "erase", size: "small", onClick: clickEraser, sx: __assign(__assign({}, toolBtnSx), (eraserActive ? theme.selectedToolSx : {})) }, { children: filled || !eraserActive ? (_jsx(EraserIcon, {})) : (_jsx(AutoFixNormalOutlinedIcon, { sx: { color: ICON_COLOR } })) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })), _jsx(Tooltip, __assign({ title: "Undo" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", size: "small", onClick: function () { return props.drawUndo(); }, sx: toolBtnSx }, { children: _jsx(ReplyIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "Save screenshot" }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ "aria-label": "capture", size: "small", disabled: !vol, onClick: function () { return vol && props.nv.saveScene("".concat(vol.name, "_drawing.png")); }, sx: toolBtnSx }, { children: _jsx(CameraAltIcon, { sx: { color: ICON_COLOR } }) })) }) })), _jsx(Tooltip, __assign({ title: "Clear drawing" }, { children: _jsx(IconButton, __assign({ "aria-label": "delete", size: "small", onClick: function () {
                                                 var _a;
                                                 (_a = props.onClearDrawing) === null || _a === void 0 ? void 0 : _a.call(props);
                                                 setExpandedOption("n");

package/dist/CmrComponents/niivue-viewer/niivueViewerTheme.d.ts

@@ -0,0 +1,37 @@
+import type { CSSProperties } from "react";
+/** Host apps may set this on a root wrapper so linked cloudmr-ux reads the brand color without a shared MUI context. */
+export declare const CMR_APP_PRIMARY_CSS_VAR = "--cmr-app-primary";
+/** Default MROptimum / package purple accent for the Niivue viewer. */
+export declare const CLOUDMR_NIIVUE_DEFAULT_ACCENT = "#580f8b";
+/** Read brand primary exposed by the host shell (see {@link CMR_APP_PRIMARY_CSS_VAR}). */
+export declare function readHostPrimaryFromCss(): string | undefined;
+/**
+ * Resolve Niivue viewer accent color:
+ * 1. Explicit `accentColor` prop on {@link CloudMrNiivueViewer}
+ * 2. Host CSS var {@link CMR_APP_PRIMARY_CSS_VAR} (works with npm link / duplicate MUI)
+ * 3. Host MUI `palette.primary.main` when it differs from stock MUI primary
+ * 4. Package default purple {@link CLOUDMR_NIIVUE_DEFAULT_ACCENT}
+ */
+export declare function resolveViewerAccentColor(accentColorProp?: string, muiPrimaryMain?: string): string;
+export interface NiivueViewerThemeTokens {
+    accentColor: string;
+    accentMutedBg: string;
+    accentMutedBgLight: string;
+    headerBgColor: string;
+    headerIconColor: string;
+    checkboxCheckedColor: string;
+    checkboxUncheckedColor: string;
+    selectedToolSx: {
+        backgroundColor: string;
+        color: string;
+    };
+    muiSwitchSx: Record<string, unknown>;
+    muiSliderSx: Record<string, unknown>;
+    cssVars: CSSProperties;
+}
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function buildNiivueViewerTheme(accentColor: string): NiivueViewerThemeTokens;

package/dist/CmrComponents/niivue-viewer/niivueViewerTheme.js

@@ -0,0 +1,106 @@
+import { createTheme } from "@mui/material/styles";
+/** Host apps may set this on a root wrapper so linked cloudmr-ux reads the brand color without a shared MUI context. */
+export var CMR_APP_PRIMARY_CSS_VAR = "--cmr-app-primary";
+/** Default MROptimum / package purple accent for the Niivue viewer. */
+export var CLOUDMR_NIIVUE_DEFAULT_ACCENT = "#580f8b";
+/** MUI stock `palette.primary.main` when the host does not customize primary. */
+var muiDefaultPrimaryMain;
+function getMuiDefaultPrimaryMain() {
+    if (!muiDefaultPrimaryMain) {
+        muiDefaultPrimaryMain = createTheme().palette.primary.main;
+    }
+    return muiDefaultPrimaryMain;
+}
+function normalizeHex(color) {
+    return color.trim().toLowerCase();
+}
+/** Read brand primary exposed by the host shell (see {@link CMR_APP_PRIMARY_CSS_VAR}). */
+export function readHostPrimaryFromCss() {
+    if (typeof document === "undefined") {
+        return undefined;
+    }
+    var val = getComputedStyle(document.documentElement)
+        .getPropertyValue(CMR_APP_PRIMARY_CSS_VAR)
+        .trim();
+    return val || undefined;
+}
+/**
+ * Resolve Niivue viewer accent color:
+ * 1. Explicit `accentColor` prop on {@link CloudMrNiivueViewer}
+ * 2. Host CSS var {@link CMR_APP_PRIMARY_CSS_VAR} (works with npm link / duplicate MUI)
+ * 3. Host MUI `palette.primary.main` when it differs from stock MUI primary
+ * 4. Package default purple {@link CLOUDMR_NIIVUE_DEFAULT_ACCENT}
+ */
+export function resolveViewerAccentColor(accentColorProp, muiPrimaryMain) {
+    if (accentColorProp) {
+        return accentColorProp;
+    }
+    var cssPrimary = readHostPrimaryFromCss();
+    if (cssPrimary) {
+        return cssPrimary;
+    }
+    var primary = muiPrimaryMain === null || muiPrimaryMain === void 0 ? void 0 : muiPrimaryMain.trim();
+    if (primary &&
+        normalizeHex(primary) !== normalizeHex(getMuiDefaultPrimaryMain())) {
+        return primary;
+    }
+    return CLOUDMR_NIIVUE_DEFAULT_ACCENT;
+}
+export function hexToRgb(hex) {
+    var h = hex.replace("#", "");
+    var full = h.length === 3 ? h.split("").map(function (c) { return c + c; }).join("") : h.slice(0, 6);
+    var n = parseInt(full, 16);
+    if (Number.isNaN(n)) {
+        return hexToRgb(CLOUDMR_NIIVUE_DEFAULT_ACCENT);
+    }
+    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+/** Light header background tinted from accent (~8% accent, 92% white). */
+function accentToHeaderBg(r, g, b) {
+    var mix = function (c) {
+        return Math.round(c * 0.08 + 255 * 0.92)
+            .toString(16)
+            .padStart(2, "0");
+    };
+    return "#".concat(mix(r)).concat(mix(g)).concat(mix(b));
+}
+export function buildNiivueViewerTheme(accentColor) {
+    var _a;
+    var _b = hexToRgb(accentColor), r = _b.r, g = _b.g, b = _b.b;
+    var accentMutedBg = "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0.12)");
+    var accentMutedBgLight = "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0.08)");
+    var checkboxUncheckedColor = "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0.54)");
+    return {
+        accentColor: accentColor,
+        accentMutedBg: accentMutedBg,
+        accentMutedBgLight: accentMutedBgLight,
+        headerBgColor: accentToHeaderBg(r, g, b),
+        headerIconColor: accentColor,
+        checkboxCheckedColor: accentColor,
+        checkboxUncheckedColor: checkboxUncheckedColor,
+        selectedToolSx: { backgroundColor: accentMutedBg, color: accentColor },
+        muiSwitchSx: {
+            "& .MuiSwitch-switchBase.Mui-checked": {
+                color: accentColor,
+                "&:hover": { backgroundColor: accentMutedBgLight },
+                "& + .MuiSwitch-track": { backgroundColor: accentColor, opacity: 1 }
+            },
+            "& .MuiSwitch-switchBase.Mui-checked.Mui-disabled": {
+                color: checkboxUncheckedColor,
+                "& + .MuiSwitch-track": {
+                    backgroundColor: checkboxUncheckedColor,
+                    opacity: 0.5
+                }
+            }
+        },
+        muiSliderSx: {
+            color: accentColor,
+            "& .MuiSlider-thumb": { backgroundColor: accentColor },
+            "& .MuiSlider-track": { backgroundColor: accentColor }
+        },
+        cssVars: (_a = {},
+            _a["--tkdr-accent"] = accentColor,
+            _a["--cmr-niivue-accent"] = accentColor,
+            _a)
+    };
+}

package/dist/index.d.ts

@@ -35,6 +35,9 @@ export { NiivueRoiTable, DEFAULT_ROI_GROUP_TARGET_LABEL, } from "./CmrComponents
 export type { NiivueRoiTableProps } from "./CmrComponents/niivue-roi-table/NiivueRoiTable";
 export { default as CloudMrNiivueViewer, nv } from "./CmrComponents/niivue-viewer/CloudMrNiivueViewer.js";
 export { CloudMrNiivuePanel } from "./CmrComponents/niivue-viewer/CloudMrNiivuePanel";
+export { NiivueViewerThemeProvider, useNiivueViewerTheme, } from "./CmrComponents/niivue-viewer/NiivueViewerThemeContext";
+export { CLOUDMR_NIIVUE_DEFAULT_ACCENT, CMR_APP_PRIMARY_CSS_VAR, buildNiivueViewerTheme, resolveViewerAccentColor, readHostPrimaryFromCss, } from "./CmrComponents/niivue-viewer/niivueViewerTheme";
+export type { NiivueViewerThemeTokens } from "./CmrComponents/niivue-viewer/niivueViewerTheme";
 export type { CloudMrNiivuePanelProps, CloudMrDrawToolkitProps, } from "./CmrComponents/niivue-viewer/CloudMrNiivuePanel";
 import type { FC } from "react";
 import type { CmrTableProps } from "./CmrTable/CmrTable";

package/dist/index.js

@@ -31,6 +31,8 @@ export { useNiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/useN
 export { NiivueRoiTable, DEFAULT_ROI_GROUP_TARGET_LABEL, } from "./CmrComponents/niivue-roi-table/NiivueRoiTable";
 export { default as CloudMrNiivueViewer, nv } from "./CmrComponents/niivue-viewer/CloudMrNiivueViewer.js";
 export { CloudMrNiivuePanel } from "./CmrComponents/niivue-viewer/CloudMrNiivuePanel";
+export { NiivueViewerThemeProvider, useNiivueViewerTheme, } from "./CmrComponents/niivue-viewer/NiivueViewerThemeContext";
+export { CLOUDMR_NIIVUE_DEFAULT_ACCENT, CMR_APP_PRIMARY_CSS_VAR, buildNiivueViewerTheme, resolveViewerAccentColor, readHostPrimaryFromCss, } from "./CmrComponents/niivue-viewer/niivueViewerTheme";
 import CmrTableComponent, { CMR_TABLE_DEFAULT_HEADER_ICON } from "./CmrTable/CmrTable";
 export var CmrTable = CmrTableComponent;
 export { CMR_TABLE_DEFAULT_HEADER_ICON };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "4.7.7",
+  "version": "4.7.9",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",