cloudmr-ux 4.7.8 → 4.7.9

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, color: "primary" })] })));
+                } }, { 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, color: "primary" })] })), _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, color: "primary" })] })), _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, color: "primary" })] })), _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, color: "primary" })] })), _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/niivueViewerTheme.d.ts

@@ -1,12 +1,16 @@
 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 MUI `palette.primary.main` when it differs from stock MUI primary
- *    (e.g. CAMRIE `#1578A1`, MROptimum `#580f8b`)
- * 3. Package default purple {@link CLOUDMR_NIIVUE_DEFAULT_ACCENT}
+ * 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 {

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

@@ -1,4 +1,6 @@
 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. */
@@ -12,17 +14,31 @@ function getMuiDefaultPrimaryMain() {
 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 MUI `palette.primary.main` when it differs from stock MUI primary
- *    (e.g. CAMRIE `#1578A1`, MROptimum `#580f8b`)
- * 3. Package default purple {@link CLOUDMR_NIIVUE_DEFAULT_ACCENT}
+ * 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())) {

package/dist/index.d.ts

@@ -36,7 +36,7 @@ export type { NiivueRoiTableProps } from "./CmrComponents/niivue-roi-table/Niivu
 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, buildNiivueViewerTheme, resolveViewerAccentColor, } from "./CmrComponents/niivue-viewer/niivueViewerTheme";
+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";

package/dist/index.js

@@ -32,7 +32,7 @@ export { NiivueRoiTable, DEFAULT_ROI_GROUP_TARGET_LABEL, } from "./CmrComponents
 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, buildNiivueViewerTheme, resolveViewerAccentColor, } from "./CmrComponents/niivue-viewer/niivueViewerTheme";
+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.8",
+  "version": "4.7.9",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",