cloudmr-ux 4.3.6 → 4.3.8

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Stack, IconButton, Typography, Box } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import { InvertibleDualSlider, CmrCheckbox } from "cloudmr-ux";
+var __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);
+};
+var MaskPlatte = function (_a) {
+    var expanded = _a.expanded, nv = _a.nv, setMaskColor = _a.setMaskColor, resampleImage = _a.resampleImage, unfocus = _a.unfocus;
+    var _b = useState(0), colorIndex = _b[0], storeColorIndex = _b[1];
+    var _c = useState("red"), maskColor = _c[0], storeMaskColor = _c[1];
+    var _d = useState(false), checked = _d[0], setChecked = _d[1];
+    var _e = useState(undefined), original = _e[0], setOriginal = _e[1];
+    var colors = ["red", "green", "blue", "yellow", "cyan", "#e81ce8"];
+    var filledOptions = colors.map(function (color, i) {
+        return _jsx(FiberManualRecordIcon, { sx: { color: color } }, i);
+    });
+    if (expanded) {
+        setMaskColor(maskColor);
+    }
+    else {
+        setMaskColor(undefined);
+    }
+    var _f = useState(nv.volumes[0] ? nv.volumes[0].vox_min : 0), min = _f[0], setMin = _f[1];
+    var _g = useState(nv.volumes[0] ? nv.volumes[0].vox_max : 1), max = _g[0], setMax = _g[1];
+    var cancelMask = function () {
+        if (original)
+            nv.drawBitmap = new Uint8Array(original);
+        else
+            return;
+        nv.refreshDrawing(true);
+        resampleImage();
+        setOriginal(undefined);
+    };
+    useEffect(function () {
+        if (!expanded) {
+            cancelMask();
+        }
+        else {
+            if (colorIndex !== -1)
+                nv.fillRange(min, max, colorIndex + 1, checked, original, setOriginal);
+            resampleImage();
+        }
+    }, [expanded]);
+    useEffect(function () {
+        if (colorIndex !== -1 && expanded)
+            nv.fillRange(min, max, colorIndex + 1, checked, original, setOriginal);
+    }, [min, max, checked]);
+    return _jsxs(Stack, __assign({
+        style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1500,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 450 : 0,
+            overflow: expanded ? "visible" : "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333"
+        },
+        direction: "column"
+    }, {
+        children: [
+            _jsx(Stack, __assign({ alignItems: "center" }, {
+                children: _jsx(Typography, __assign({
+                    color: "white",
+                    gutterBottom: true,
+                    width: "100%",
+                    marginLeft: "10pt",
+                    fontSize: "11pt",
+                    alignItems: "start"
+                }, { children: "Mask range:" }))
+            })),
+            _jsxs(Stack, __assign({ direction: "row", flexDirection: "row", justifyContent: "center" }, {
+                children: [
+                    filledOptions.map(function (value, index) {
+                        return _jsx(IconButton, __assign({
+                            onClick: function () {
+                                storeColorIndex(index);
+                                storeMaskColor(colors[index]);
+                                setMaskColor(colors[index]);
+                                nv.fillRange(min, max, index + 1, checked, original, setOriginal);
+                                resampleImage();
+                            }
+                        }, { children: value }), index);
+                    }),
+                    _jsx(CmrCheckbox, __assign({
+                        style: { color: "white" },
+                        onChange: function (e) {
+                            e.stopPropagation();
+                            setChecked(e.target.checked);
+                            resampleImage();
+                        }
+                    }, { children: "Inverted" })),
+                ]
+            })),
+            _jsx(Stack, __assign({ direction: "row", sx: { mb: 1 } }, {
+                children: _jsx(Box, __assign({ width: 400, style: { paddingLeft: "10px", paddingRight: "10px" } }, {
+                    children: _jsx(InvertibleDualSlider, {
+                        name: "",
+                        min: nv.volumes[0] ? nv.volumes[0].vox_min : 0,
+                        max: nv.volumes[0] ? nv.volumes[0].vox_max : 1,
+                        reverse: checked,
+                        setMin: setMin,
+                        setMax: setMax,
+                        onFinalize: function () {
+                            resampleImage();
+                        }
+                    })
+                }))
+            })),
+            _jsxs(Stack, __assign({ direction: "row", flexDirection: "row", justifyContent: "center" }, {
+                children: [
+                    _jsx(IconButton, __assign({
+                        onClick: function () {
+                            setOriginal(undefined);
+                            nv.drawAddUndoBitmapWithHiddenVoxels();
+                            unfocus();
+                        }
+                    }, { children: _jsx(CheckIcon, { style: { color: "green" } }) })),
+                    _jsx(IconButton, __assign({
+                        onClick: function () {
+                            cancelMask();
+                            unfocus();
+                        }
+                    }, { children: _jsx(CloseIcon, { style: { color: "red" } }) })),
+                ]
+            })),
+        ]
+    }));
+};
+export default MaskPlatte;

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

@@ -0,0 +1 @@
+export function MroDrawToolkit(props: any): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,177 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MROptimum fork of cloudmr-ux DrawToolkit.
+ * Click-away exits drawing mode when you focus elsewhere (slice controls, histogram, etc.),
+ * but clicks on `#niiCanvas` are ignored so you can keep drawing on the viewer.
+ *
+ * Layout matches {@link NiivueSlicePosition}: outer wrapper → `.title` → `Card` + `CardContent` (no custom fill).
+ */
+import React, { useState } from "react";
+import { Box, Card, CardContent, IconButton, Slider, Stack, Tooltip, Typography, } from "@mui/material";
+import DrawIcon from "@mui/icons-material/Draw";
+import CropSquareOutlinedIcon from "@mui/icons-material/CropSquareOutlined";
+import CircleOutlinedIcon from "@mui/icons-material/CircleOutlined";
+import AutoFixNormalOutlinedIcon from "@mui/icons-material/AutoFixNormalOutlined";
+import ReplyIcon from "@mui/icons-material/Reply";
+import CameraAltIcon from "@mui/icons-material/CameraAlt";
+import SvgIcon from "@mui/material/SvgIcon";
+import FormatColorFillIcon from "@mui/icons-material/FormatColorFill";
+import DeleteIcon from "@mui/icons-material/Delete";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import OpacityIcon from "@mui/icons-material/Opacity";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import DrawColorPlatte from "./DrawColorPlatte";
+import EraserPlatte from "./EraserPlatte";
+import MaskPlatte from "./MaskPlatte";
+/** 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))
+        return false;
+    return !!target.closest("#niiCanvas");
+}
+/** Same icon tone as typical MUI on-paper controls (matches slice panel body). */
+var ICON_COLOR = "#212121";
+function EraserIcon(props) {
+    return (_jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 25 25", sx: { color: "inherit" } }, { children: [_jsx("rect", { x: "6", y: "3", width: "12", height: "22", rx: "2", ry: "2", transform: "rotate(230 12 12)", fill: "currentColor" }), _jsx("rect", { x: "7", y: "4", width: "10", height: "8", rx: "2", ry: "2", transform: "rotate(230 12 12)", fill: "#FFFFFF" })] })));
+}
+function OpacityPlatte(_a) {
+    var drawingOpacity = _a.drawingOpacity, setDrawingOpacity = _a.setDrawingOpacity, expanded = _a.expanded;
+    return (_jsx(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1500,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 300 : 0,
+            overflow: expanded ? "visible" : "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            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); } })] })) })));
+}
+export function MroDrawToolkit(props) {
+    var _a;
+    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];
+    var _d = useState(undefined), setMaskColor = _d[1];
+    var filled = props.drawPen > 7;
+    var shapeSelectedSx = function (shape) {
+        return drawShapeTool === shape
+            ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
+            : {};
+    };
+    function clickPen() {
+        onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("pen");
+        if (expandedOption === "d") {
+            setExpandedOption("n");
+            props.setDrawingEnabled(false);
+        }
+        else {
+            setExpandedOption("d");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(true);
+        }
+    }
+    function clickRectangle() {
+        onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("rectangle");
+        if (expandedOption === "r") {
+            setExpandedOption("n");
+            props.setDrawingEnabled(false);
+        }
+        else {
+            setExpandedOption("r");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(true);
+        }
+    }
+    function clickEllipse() {
+        onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("ellipse");
+        if (expandedOption === "l") {
+            setExpandedOption("n");
+            props.setDrawingEnabled(false);
+        }
+        else {
+            setExpandedOption("l");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(true);
+        }
+    }
+    function clickEraser() {
+        if (expandedOption === "e") {
+            setExpandedOption("n");
+        }
+        else {
+            props.updateDrawPen({ target: { value: 8 } });
+            setExpandedOption("e");
+        }
+        props.setDrawingEnabled(expandedOption !== "e");
+    }
+    function clickMask() {
+        if (expandedOption === "m") {
+            setExpandedOption("n");
+        }
+        else {
+            setExpandedOption("m");
+        }
+        props.setDrawingEnabled(false);
+    }
+    var vol = (_a = props.volumes) === null || _a === void 0 ? void 0 : _a[props.selectedVolume];
+    var toolBtnSx = {
+        color: ICON_COLOR,
+        p: 0.5,
+        "&:hover": { backgroundColor: "rgba(0,0,0,0.04)" },
+        "&.Mui-disabled": { color: "rgba(0,0,0,0.26)" }
+    };
+    return (_jsx(ClickAwayListener, __assign({ onClickAway: function (event) {
+            var _a;
+            if (clickTargetIsNiivueCanvas(event.target))
+                return;
+            setExpandedOption("n");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(false);
+            (_a = props.onExitDrawMode) === null || _a === void 0 ? void 0 : _a.call(props);
+        } }, { children: _jsxs("div", __assign({ style: __assign({ width: "100%", position: "relative", zIndex: 1080 }, props.style) }, { children: [_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: "ROI Tools" })), _jsx(Card, __assign({ variant: "outlined", sx: {
+                        mb: 2,
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: 0,
+                        overflow: "visible"
+                    } }, { children: _jsx(CardContent, __assign({ sx: {
+                            overflow: "visible",
+                            "&:last-child": { paddingBottom: 2 }
+                        } }, { children: _jsx("div", __assign({ style: { display: "flex", flexDirection: "column", overflow: "visible" } }, { children: _jsxs("div", __assign({ style: {
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    flexWrap: "wrap",
+                                    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 })] })), _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 })] })), _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 })] })), _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: toolBtnSx }, { children: filled || expandedOption !== "e" ? (_jsx(EraserIcon, {})) : (_jsx(AutoFixNormalOutlinedIcon, { sx: { color: ICON_COLOR } })) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _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 () {
+                                                props.nv.clearDrawing();
+                                                props.resampleImage();
+                                                props.setDrawingChanged(false);
+                                            }, sx: toolBtnSx }, { children: _jsx(DeleteIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "ROI visibility" }, { children: _jsx(IconButton, __assign({ "aria-label": "visible", size: "small", onClick: function () { return props.toggleROIVisible(); }, sx: toolBtnSx }, { children: props.roiVisible ? (_jsx(VisibilityIcon, { sx: { color: ICON_COLOR } })) : (_jsx(VisibilityOffIcon, { sx: { color: ICON_COLOR, opacity: 0.45 } })) })) })), _jsxs(Box, __assign({ sx: {
+                                            position: "relative",
+                                            zIndex: expandOpacityOptions ? 1600 : "auto",
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            color: ICON_COLOR
+                                        } }, { children: [_jsx(Tooltip, __assign({ title: "Drawing opacity" }, { children: _jsx(IconButton, __assign({ "aria-label": "opaque", size: "small", onClick: function () { return setExpandOpacityOptions(!expandOpacityOptions); }, sx: toolBtnSx }, { children: _jsx(OpacityIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Typography, __assign({ component: "span", sx: { fontSize: "0.7rem", mr: 0.25, userSelect: "none", color: ICON_COLOR } }, { children: props.drawingOpacity.toFixed(2) })), _jsx(OpacityPlatte, { drawingOpacity: props.drawingOpacity, setDrawingOpacity: props.setDrawingOpacity, expanded: expandOpacityOptions })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "m" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Mask by intensity range" }, { children: _jsx(IconButton, __assign({ "aria-label": "fill", size: "small", onClick: clickMask, sx: toolBtnSx }, { children: _jsx(FormatColorFillIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(MaskPlatte, { resampleImage: function () {
+                                                    props.resampleImage();
+                                                    props.setDrawingChanged(true);
+                                                }, expanded: expandedOption === "m", nv: props.nv, setMaskColor: setMaskColor, unfocus: function () { return setExpandedOption("n"); } })] }))] })) })) })) }))] })) })));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Values match @niivue/niivue PEN_TYPE. Import them locally because Vite's
+ * optimizeDeps pre-bundle for @niivue/niivue currently omits the PEN_TYPE export
+ * (see node_modules/.vite/deps/@niivue_niivue.js export list).
+ */
+export declare const NI_PEN_TYPE: {
+    readonly PEN: 0;
+    readonly RECTANGLE: 1;
+    readonly ELLIPSE: 2;
+};

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

@@ -0,0 +1,10 @@
+/**
+ * Values match @niivue/niivue PEN_TYPE. Import them locally because Vite's
+ * optimizeDeps pre-bundle for @niivue/niivue currently omits the PEN_TYPE export
+ * (see node_modules/.vite/deps/@niivue_niivue.js export list).
+ */
+export var NI_PEN_TYPE = {
+    PEN: 0,
+    RECTANGLE: 1,
+    ELLIPSE: 2
+};

package/dist/CmrTable/CmrTable.css

@@ -6,18 +6,42 @@
   margin-bottom: 0;
 } */
 
-.MuiDataGrid-columnHeaders{
-  background: #F3E5F5;
-  color: #333;
+/**
+ * CmrTable root — colors are driven by CSS variables set on `.cmr-table` from props.
+ * Defaults preserve the package purple accent (#580f8b). Host apps can override per instance
+ * via `headerIconColor` / `checkboxCheckedColor` / `checkboxUncheckedColor`, or by setting
+ * variables on a parent: `--cmr-table-header-icon`, etc.
+ */
+.cmr-table {
+  /* Fallbacks = package defaults */
+  --cmr-table-header-bg: #f3e5f5;
+  --cmr-table-header-text: #333;
+  --cmr-table-header-icon: #580f8b;
+  --cmr-table-checkbox-unchecked: rgba(88, 15, 139, 0.54);
+  --cmr-table-checkbox-checked: #580f8b;
+}
+
+.cmr-table .MuiDataGrid-columnHeaders {
+  background: var(--cmr-table-header-bg);
+  color: var(--cmr-table-header-text);
   font-weight: bold;
 }
 
-.MuiDataGrid-columnHeaders .MuiSvgIcon-root {
-  color: #580f8b !important;
+.cmr-table .MuiDataGrid-columnHeaders .MuiSvgIcon-root {
+  color: var(--cmr-table-header-icon) !important;
+}
+
+.cmr-table .MuiCheckbox-root {
+  color: var(--cmr-table-checkbox-unchecked);
+}
+
+.cmr-table .MuiCheckbox-root.Mui-checked,
+.cmr-table .MuiCheckbox-root.MuiCheckbox-indeterminate {
+  color: var(--cmr-table-checkbox-checked) !important;
 }
 
-/* // Religning MUI checkbox in the header */
-.MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainerContent {
+/* Religning MUI checkbox in the header */
+.cmr-table .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainerContent {
   padding: 0 !important;
   margin: 0 !important;
   display: flex;

package/dist/CmrTable/CmrTable.d.ts

@@ -2,15 +2,34 @@ import React from 'react';
 import './CmrTable.css';
 import { DataGridProps } from '@mui/x-data-grid';
 import { CSSProperties } from 'react';
+/** Default header icon / selection accent (purple). Exposed for host apps that want the package default explicitly. */
+export declare const CMR_TABLE_DEFAULT_HEADER_ICON = "#580f8b";
 export interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
     name?: string;
     style?: CSSProperties;
     showCheckbox?: boolean;
+    /** Column header background. @default `#F3E5F5` */
     headerBgColor?: string;
+    /** Column header text color. @default `#333` */
     headerTextColor?: string;
+    /**
+     * Sort icons, menu icons, and header “select all” checkbox accent.
+     * Also the default for {@link checkboxCheckedColor} when that prop is omitted.
+     * @default `#580f8b`
+     */
     headerIconColor?: string;
+    /**
+     * Row / header checkbox color when checked or indeterminate.
+     * @default same as `headerIconColor` (`#580f8b` when defaults apply)
+     */
+    checkboxCheckedColor?: string;
+    /**
+     * Row / header checkbox color when unchecked (non-checked outline state).
+     * @default `rgba(88, 15, 139, 0.54)` (pairs with default purple accent)
+     */
+    checkboxUncheckedColor?: string;
     /**
      * Optional function to customize how rows are filtered/sorted before display.
      * Receives the mapped rows; return a new array in the desired order.

package/dist/CmrTable/CmrTable.js

@@ -32,6 +32,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import './CmrTable.css';
 import { DataGrid } from '@mui/x-data-grid';
+/** Default header icon / selection accent (purple). Exposed for host apps that want the package default explicitly. */
+export var CMR_TABLE_DEFAULT_HEADER_ICON = '#580f8b';
+var DEFAULT_HEADER_BG = '#F3E5F5';
+var DEFAULT_HEADER_TEXT = '#333';
+/** Unchecked row/header checkbox tint that pairs with {@link CMR_TABLE_DEFAULT_HEADER_ICON}. */
+var DEFAULT_CHECKBOX_UNCHECKED = 'rgba(88, 15, 139, 0.54)';
 /** Extracts a comparable timestamp from a row for sorting. Supports createdAt, created_at, or similar date fields. */
 function getSubmittedTimestamp(row) {
     var _a, _b, _c;
@@ -46,38 +52,45 @@ function defaultSortByRecent(rows) {
     return __spreadArray([], rows, true).sort(function (a, b) { return getSubmittedTimestamp(b) - getSubmittedTimestamp(a); });
 }
 var CmrTable = function (props) {
-    var dataSource = props.dataSource, columns = props.columns, idAlias = props.idAlias, className = props.className, onRowSelectionModelChange = props.onRowSelectionModelChange, style = props.style, _a = props.showCheckbox, showCheckbox = _a === void 0 ? true : _a, _b = props.headerBgColor, headerBgColor = _b === void 0 ? '#F3E5F5' : _b, _c = props.headerTextColor, headerTextColor = _c === void 0 ? '#333' : _c, _d = props.headerIconColor, headerIconColor = _d === void 0 ? '#580f8b' : _d, processRows = props.processRows, rest = __rest(props, ["dataSource", "columns", "idAlias", "className", "onRowSelectionModelChange", "style", "showCheckbox", "headerBgColor", "headerTextColor", "headerIconColor", "processRows"]);
+    var _a;
+    var dataSource = props.dataSource, columns = props.columns, idAlias = props.idAlias, className = props.className, onRowSelectionModelChange = props.onRowSelectionModelChange, style = props.style, _b = props.showCheckbox, showCheckbox = _b === void 0 ? true : _b, _c = props.headerBgColor, headerBgColor = _c === void 0 ? DEFAULT_HEADER_BG : _c, _d = props.headerTextColor, headerTextColor = _d === void 0 ? DEFAULT_HEADER_TEXT : _d, _e = props.headerIconColor, headerIconColor = _e === void 0 ? CMR_TABLE_DEFAULT_HEADER_ICON : _e, checkboxCheckedColor = props.checkboxCheckedColor, checkboxUncheckedColor = props.checkboxUncheckedColor, processRows = props.processRows, userSx = props.sx, rest = __rest(props, ["dataSource", "columns", "idAlias", "className", "onRowSelectionModelChange", "style", "showCheckbox", "headerBgColor", "headerTextColor", "headerIconColor", "checkboxCheckedColor", "checkboxUncheckedColor", "processRows", "sx"]);
+    var resolvedCheckboxChecked = checkboxCheckedColor !== null && checkboxCheckedColor !== void 0 ? checkboxCheckedColor : headerIconColor;
+    var resolvedCheckboxUnchecked = checkboxUncheckedColor !== null && checkboxUncheckedColor !== void 0 ? checkboxUncheckedColor : DEFAULT_CHECKBOX_UNCHECKED;
+    var wrapperStyle = __assign(__assign({ height: '400px', width: '100%' }, (style !== null && style !== void 0 ? style : {})), (_a = {}, _a['--cmr-table-header-bg'] = headerBgColor, _a['--cmr-table-header-text'] = headerTextColor, _a['--cmr-table-header-icon'] = headerIconColor, _a['--cmr-table-checkbox-checked'] = resolvedCheckboxChecked, _a['--cmr-table-checkbox-unchecked'] = resolvedCheckboxUnchecked, _a));
+    var tableClassName = ['cmr-table', className].filter(Boolean).join(' ');
     var mappedRows = dataSource
         ? dataSource.map(function (row) { return (__assign({ id: idAlias ? row[idAlias] : row['id'] }, row)); })
         : [];
     var displayRows = processRows ? processRows(mappedRows) : defaultSortByRecent(mappedRows);
-    return (_jsx("div", __assign({ style: style !== null && style !== void 0 ? style : { height: '400px', width: '100%' }, className: className !== null && className !== void 0 ? className : '' }, { children: _jsx(DataGrid, __assign({ rows: displayRows, columns: columns, checkboxSelection: showCheckbox, onRowSelectionModelChange: onRowSelectionModelChange, initialState: {
+    var baseSx = {
+        '& .MuiDataGrid-columnHeaders': {
+            backgroundColor: headerBgColor,
+            color: headerTextColor
+        },
+        '&& .MuiDataGrid-columnHeader .MuiSvgIcon-root': {
+            color: "".concat(headerIconColor, " !important")
+        },
+        '&& .MuiDataGrid-columnHeader .MuiDataGrid-sortIcon': {
+            color: "".concat(headerIconColor, " !important")
+        },
+        '&& .MuiDataGrid-columnHeader .MuiDataGrid-menuIconButton .MuiSvgIcon-root': {
+            color: "".concat(headerIconColor, " !important")
+        },
+        '&& .MuiDataGrid-columnHeader .MuiDataGrid-iconButtonContainer .MuiSvgIcon-root': {
+            color: "".concat(headerIconColor, " !important")
+        },
+        '& .MuiDataGrid-columnHeaderTitle': {
+            fontWeight: 'bold'
+        }
+    };
+    var mergedSx = userSx == null
+        ? baseSx
+        : Array.isArray(userSx)
+            ? __spreadArray([baseSx], userSx, true) : [baseSx, userSx];
+    return (_jsx("div", __assign({ style: wrapperStyle, className: tableClassName }, { children: _jsx(DataGrid, __assign({ rows: displayRows, columns: columns, checkboxSelection: showCheckbox, onRowSelectionModelChange: onRowSelectionModelChange, initialState: {
                 pagination: {
                     paginationModel: { pageSize: 50, page: 0 }
                 }
-            }, sx: {
-                '& .MuiDataGrid-columnHeaders': {
-                    backgroundColor: headerBgColor,
-                    color: headerTextColor
-                },
-                // '& .MuiDataGrid-columnHeaders .MuiSvgIcon-root': {
-                //   color: headerIconColor,
-                // },
-                '&& .MuiDataGrid-columnHeader .MuiSvgIcon-root': {
-                    color: "".concat(headerIconColor, " !important")
-                },
-                '&& .MuiDataGrid-columnHeader .MuiDataGrid-sortIcon': {
-                    color: "".concat(headerIconColor, " !important")
-                },
-                '&& .MuiDataGrid-columnHeader .MuiDataGrid-menuIconButton .MuiSvgIcon-root': {
-                    color: "".concat(headerIconColor, " !important")
-                },
-                '&& .MuiDataGrid-columnHeader .MuiDataGrid-iconButtonContainer .MuiSvgIcon-root': {
-                    color: "".concat(headerIconColor, " !important")
-                },
-                '& .MuiDataGrid-columnHeaderTitle': {
-                    fontWeight: 'bold'
-                }
-            }, localeText: { noRowsLabel: 'No Rows' } }, rest)) })));
+            }, sx: mergedSx, localeText: { noRowsLabel: 'No Rows' } }, rest)) })));
 };
 export default CmrTable;

package/dist/core/common/components/NiivueTools/NiivuePatcher.d.ts

@@ -0,0 +1,2 @@
+export { Niivue };
+import { Niivue } from "@niivue/niivue";

package/dist/core/common/components/NiivueTools/components/ControlThemes.d.ts

@@ -0,0 +1 @@
+export {};