@monolith-forensics/monolith-ui 1.9.1-dev.9 → 1.9.3-dev.1

package/dist/Table/TableComponents.js

@@ -175,6 +175,36 @@ export const TableListElement = styled.div `
   flex-direction: column;
   min-width: 100%;
 `;
+export const TableEmptyState = styled.div `
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  background-color: ${({ theme }) => theme.palette.background.default};
+  text-align: center;
+  font-size: 12px;
+
+  svg {
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+`;
+export const TableEmptyStateTitle = styled.div `
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-size: 16px;
+  font-weight: 600;
+`;
+export const TableEmptyStateDescription = styled.div `
+  max-width: 320px;
+  line-height: 1.45;
+`;
 export const TableWrapper = styled.div `
   position: relative;
   flex: 1 1 auto;
@@ -189,6 +219,17 @@ export const StyledTable = styled.div `
   display: flex;
   flex-direction: column;
 
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    box-shadow:
+      inset 1px 0 ${({ theme }) => theme.palette.divider},
+      inset -1px 0 ${({ theme }) => theme.palette.divider};
+  }
+
   &[data-compact="true"] .mfui-tr,
   &[data-compact="true"] .mfui-thr,
   &[data-compact="true"] .mfui-td {
@@ -213,4 +254,10 @@ export const StyledTable = styled.div `
     pointer-events: auto;
     visibility: visible;
   }
+
+  &[data-all-columns-hidden="true"] .mfui-thead,
+  &[data-all-columns-hidden="true"] .mfui-tbody-viewport {
+    visibility: hidden;
+    pointer-events: none;
+  }
 `;

package/dist/Table/TableHeader.js

@@ -58,7 +58,7 @@ const TableHeader = ({ headerRowElm }) => {
                         flexShrink: 0,
                         justifyContent: "center",
                         alignItems: "center",
-                    }, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: disableSelectAll !== true && (_jsx(CheckBox, { value: selectionState.selectionStatus === "all", partialCheck: (_a = selectionState.selectionStatus) === null || _a === void 0 ? void 0 : _a.includes("some"), onChange: handleChangeSelection })) }) })), enableActionButton && (_jsx(TH, { className: `mfui-th column-action`, style: {
+                    }, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: disableSelectAll !== true && (_jsx(CheckBox, { size: "xs", value: selectionState.selectionStatus === "all", partialCheck: (_a = selectionState.selectionStatus) === null || _a === void 0 ? void 0 : _a.includes("some"), onChange: handleChangeSelection })) }) })), enableActionButton && (_jsx(TH, { className: `mfui-th column-action`, style: {
                         width: TableDefaults.actionCell.width,
                         minWidth: TableDefaults.actionCell.minWidth,
                         maxWidth: TableDefaults.actionCell.maxWidth,

package/dist/Table/TableMenu/TableMenu.js

@@ -30,7 +30,7 @@ const FlexedRow = styled.div `
 `;
 const TableMenu = () => {
     var _a, _b, _c, _d, _e;
-    const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, handleTableExport, filterState, handleFilterChange, clearSearch, } = useTable();
+    const { data, columnState, searchState, setVisibleColumns, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, handleTableExport, filterState, handleFilterChange, } = useTable();
     const inputRef = useRef(null);
     if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
         return null;
@@ -116,13 +116,14 @@ const TableMenu = () => {
                                 }, children: _jsx(DownloadIcon, { size: 14 }) })), (compactOptions === null || compactOptions === void 0 ? void 0 : compactOptions.enabled) === true && (_jsx(Button, { variant: "outlined", title: "Toggle Compact", size: "xxs", style: { padding: "0px 4px" }, onClick: () => toggleCompact(), children: compactState ? _jsx(Rows4Icon, { size: 14 }) : _jsx(Rows3Icon, { size: 14 }) })), (columnSelectorOptions === null || columnSelectorOptions === void 0 ? void 0 : columnSelectorOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: columnState.map((col) => ({
                                     label: (col === null || col === void 0 ? void 0 : col.caption) || col.dataField,
                                     value: col.dataField,
-                                    onClick: () => toggleColumnVisibility(col.dataField),
                                 })), defaultValue: columnState
                                     .filter((col) => col.visible !== false)
                                     .map((col) => ({
                                     label: (col === null || col === void 0 ? void 0 : col.caption) || col.dataField,
                                     value: col.dataField,
-                                })), multiselect: true, searchable: true, buttonProps: {
+                                })), multiselect: true, enableSelectAll: true, searchable: true, onChange: (e) => {
+                                    setVisibleColumns(e.map((item) => item.value));
+                                }, buttonProps: {
                                     title: "Show/Hide Columns",
                                     size: "xs",
                                     style: { padding: "0px 4px", height: 24 },

package/dist/Table/TableProvider.js

@@ -595,6 +595,39 @@ const TableProvider = (_a) => {
         });
         updateColumnState(newColumnState);
     };
+    const setVisibleColumns = (dataFields) => {
+        const newColumnState = columnState.map((col) => {
+            if (dataFields.includes(col.dataField)) {
+                return Object.assign(Object.assign({}, col), { visible: true });
+            }
+            return Object.assign(Object.assign({}, col), { visible: false });
+        });
+        updateColumnState(newColumnState);
+    };
+    const showColumn = (dataField) => {
+        const column = columnState.find((col) => col.dataField === dataField);
+        if (column && column.visible === false) {
+            const newColumnState = columnState.map((col) => {
+                if (col.dataField === dataField) {
+                    return Object.assign(Object.assign({}, col), { visible: true });
+                }
+                return col;
+            });
+            updateColumnState(newColumnState);
+        }
+    };
+    const hideColumn = (dataField) => {
+        const column = columnState.find((col) => col.dataField === dataField);
+        if (column && column.visible === true) {
+            const newColumnState = columnState.map((col) => {
+                if (col.dataField === dataField) {
+                    return Object.assign(Object.assign({}, col), { visible: false });
+                }
+                return col;
+            });
+            updateColumnState(newColumnState);
+        }
+    };
     const toggleCompact = () => {
         setCompactState((prev) => !prev);
     };
@@ -852,6 +885,9 @@ const TableProvider = (_a) => {
             setColumnState: updateColumnState,
             getColumnState,
             toggleColumnVisibility,
+            showColumn,
+            hideColumn,
+            setVisibleColumns,
             getColumnVisibility,
             getSelectedRows,
             getSelectedRowKeys,
@@ -900,6 +936,9 @@ const TableProvider = (_a) => {
             selectAllRows,
             clearSelections,
             toggleColumnVisibility,
+            setVisibleColumns,
+            showColumn,
+            hideColumn,
             runSearch,
             clearSearch,
             handleTableExport,

package/dist/Table/TableRow.js

@@ -13,7 +13,7 @@ const TableRow = ({ rowData, loading, rowStyle }) => {
     const handleSelectionChange = (e) => {
         e === true ? selectRow(rowData) : deselectRow(rowData);
     };
-    return (_jsxs(TR, { className: "mfui-tr", "data-key": rowData.__key, "data-selected": selected, "data-focused": focused, style: Object.assign(Object.assign({}, rowStyle), { width: tableLayout.contentWidth }), children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action row-selection-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
+    return (_jsxs(TR, { className: "mfui-tr", "data-key": rowData.__key, "data-selected": selected, "data-focused": focused, style: Object.assign(Object.assign({}, rowStyle), { width: tableLayout.contentWidth }), children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action row-selection-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, size: "xs", value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
                 var _a;
                 if (column.visible === false)
                     return null;

package/dist/Table/types.d.ts

@@ -168,6 +168,9 @@ export type TableContextType = {
     focusedRowId?: string | number;
     toggleCompact: () => void;
     toggleColumnVisibility: (dataField: string) => void;
+    setVisibleColumns: (dataFields: string[]) => void;
+    showColumn: (dataField: string) => void;
+    hideColumn: (dataField: string) => void;
     runSearch: (query: string) => void;
     clearSearch: () => void;
     handleTableExport: (e: TableExportOptions) => Promise<void> | void;
@@ -388,6 +391,9 @@ export type TableInstance = {
     onColumnReorder?: (e: OnColumnChangeProps) => void;
     onColumnStateChange?: (e: ColumnState[]) => void;
     toggleColumnVisibility: (dataField: string) => void;
+    setVisibleColumns: (dataFields: string[]) => void;
+    showColumn: (dataField: string) => void;
+    hideColumn: (dataField: string) => void;
     getColumnVisibility: (dataField: string) => boolean;
     getSelectedRows: () => any[];
     getSelectedRowKeys: () => string[];

package/dist/Utilities/getImageTextContent.d.ts

@@ -0,0 +1,78 @@
+export type ImageOcrProgress = {
+    status: string;
+    progress: number;
+};
+export type ImageOcrLine = {
+    text: string;
+    confidence?: number;
+    bbox?: {
+        x0: number;
+        y0: number;
+        x1: number;
+        y1: number;
+    };
+};
+export type ImageTextContent = {
+    text: string;
+    confidence?: number;
+    language: string;
+    lines: ImageOcrLine[];
+};
+export declare const ImageOcrPageSegModes: {
+    readonly OSD_ONLY: "0";
+    readonly AUTO_OSD: "1";
+    readonly AUTO_ONLY: "2";
+    readonly AUTO: "3";
+    readonly SINGLE_COLUMN: "4";
+    readonly SINGLE_BLOCK_VERT_TEXT: "5";
+    readonly SINGLE_BLOCK: "6";
+    readonly SINGLE_LINE: "7";
+    readonly SINGLE_WORD: "8";
+    readonly CIRCLE_WORD: "9";
+    readonly SINGLE_CHAR: "10";
+    readonly SPARSE_TEXT: "11";
+    readonly SPARSE_TEXT_OSD: "12";
+    readonly RAW_LINE: "13";
+};
+export type ImageOcrPageSegMode = (typeof ImageOcrPageSegModes)[keyof typeof ImageOcrPageSegModes];
+export type ImageOcrPreprocessOptions = {
+    grayscale?: boolean;
+    contrast?: number;
+    scale?: number;
+    threshold?: number;
+    maxDimension?: number;
+};
+export type ImageOcrRectangle = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export type ImageOcrRecognizeOptions = {
+    rectangle?: ImageOcrRectangle;
+    rotateAuto?: boolean;
+    rotateRadians?: number;
+};
+export type ImageOcrParameters = {
+    tessedit_pageseg_mode?: ImageOcrPageSegMode;
+    tessedit_char_whitelist?: string;
+    tessedit_char_blacklist?: string;
+    preserve_interword_spaces?: "0" | "1";
+    user_defined_dpi?: string;
+    [key: string]: string | undefined;
+};
+export type ImageOcrPreset = "default" | "document" | "driver-license";
+export type GetImageTextContentOptions = {
+    language?: string;
+    preset?: ImageOcrPreset;
+    onProgress?: (progress: ImageOcrProgress) => void;
+    preprocess?: ImageOcrPreprocessOptions;
+    recognizeOptions?: ImageOcrRecognizeOptions;
+    parameters?: ImageOcrParameters;
+    workerOptions?: {
+        workerPath?: string;
+        corePath?: string;
+        langPath?: string;
+    };
+};
+export declare const getImageTextContent: (image: File, options?: GetImageTextContentOptions) => Promise<ImageTextContent>;

package/dist/Utilities/getImageTextContent.js

@@ -0,0 +1,222 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export const ImageOcrPageSegModes = {
+    OSD_ONLY: "0",
+    AUTO_OSD: "1",
+    AUTO_ONLY: "2",
+    AUTO: "3",
+    SINGLE_COLUMN: "4",
+    SINGLE_BLOCK_VERT_TEXT: "5",
+    SINGLE_BLOCK: "6",
+    SINGLE_LINE: "7",
+    SINGLE_WORD: "8",
+    CIRCLE_WORD: "9",
+    SINGLE_CHAR: "10",
+    SPARSE_TEXT: "11",
+    SPARSE_TEXT_OSD: "12",
+    RAW_LINE: "13",
+};
+const defaultDocumentOptions = {
+    preprocess: {
+        grayscale: true,
+        contrast: 1.25,
+        scale: 2,
+        maxDimension: 2800,
+    },
+    recognizeOptions: {
+        rotateAuto: true,
+    },
+    parameters: {
+        tessedit_pageseg_mode: ImageOcrPageSegModes.AUTO,
+        preserve_interword_spaces: "1",
+        user_defined_dpi: "300",
+    },
+};
+const defaultDriverLicenseOptions = {
+    preprocess: {
+        grayscale: true,
+        contrast: 1.45,
+        scale: 2.5,
+        maxDimension: 3200,
+    },
+    recognizeOptions: {
+        rotateAuto: true,
+    },
+    parameters: {
+        tessedit_pageseg_mode: ImageOcrPageSegModes.SPARSE_TEXT,
+        preserve_interword_spaces: "1",
+        user_defined_dpi: "300",
+    },
+};
+const mergeOptions = (defaults, options) => {
+    var _a, _b;
+    return Object.assign(Object.assign(Object.assign({}, defaults), options), { language: (_b = (_a = options.language) !== null && _a !== void 0 ? _a : defaults.language) !== null && _b !== void 0 ? _b : "eng", preprocess: Object.assign(Object.assign({}, defaults.preprocess), options.preprocess), recognizeOptions: Object.assign(Object.assign({}, defaults.recognizeOptions), options.recognizeOptions), parameters: Object.assign(Object.assign({}, defaults.parameters), options.parameters), workerOptions: Object.assign(Object.assign({}, defaults.workerOptions), options.workerOptions) });
+};
+const getResolvedOptions = (options) => {
+    switch (options.preset) {
+        case "document":
+            return mergeOptions(defaultDocumentOptions, options);
+        case "driver-license":
+            return mergeOptions(defaultDriverLicenseOptions, options);
+        default:
+            return mergeOptions({}, options);
+    }
+};
+const getFallbackLines = (text) => {
+    return text
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .map((line) => ({ text: line }));
+};
+const getLinesFromPage = (page) => {
+    var _a, _b;
+    const lines = (_b = (_a = page.blocks) === null || _a === void 0 ? void 0 : _a.flatMap((block) => block.paragraphs.flatMap((paragraph) => paragraph.lines))) !== null && _b !== void 0 ? _b : [];
+    if (!lines.length) {
+        return getFallbackLines(page.text);
+    }
+    return lines
+        .filter((line) => line.text.trim().length > 0)
+        .map((line) => ({
+        text: line.text,
+        confidence: line.confidence,
+        bbox: line.bbox
+            ? {
+                x0: line.bbox.x0,
+                y0: line.bbox.y0,
+                x1: line.bbox.x1,
+                y1: line.bbox.y1,
+            }
+            : undefined,
+    }));
+};
+const loadImageBitmap = (image) => __awaiter(void 0, void 0, void 0, function* () {
+    if (typeof createImageBitmap === "function") {
+        return createImageBitmap(image);
+    }
+    const objectUrl = URL.createObjectURL(image);
+    try {
+        const img = new Image();
+        img.decoding = "async";
+        img.src = objectUrl;
+        yield img.decode();
+        const canvas = document.createElement("canvas");
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        const context = canvas.getContext("2d");
+        if (!context) {
+            throw new Error("Canvas rendering is not available.");
+        }
+        context.drawImage(img, 0, 0);
+        return createImageBitmap(canvas);
+    }
+    finally {
+        URL.revokeObjectURL(objectUrl);
+    }
+});
+const hasPreprocessOptions = (preprocess) => {
+    return Boolean((preprocess === null || preprocess === void 0 ? void 0 : preprocess.grayscale) ||
+        (preprocess === null || preprocess === void 0 ? void 0 : preprocess.contrast) ||
+        (preprocess === null || preprocess === void 0 ? void 0 : preprocess.threshold) !== undefined ||
+        (preprocess === null || preprocess === void 0 ? void 0 : preprocess.scale));
+};
+const clampByte = (value) => Math.max(0, Math.min(255, value));
+const preprocessImage = (image, preprocess) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c;
+    if (!hasPreprocessOptions(preprocess)) {
+        return image;
+    }
+    const bitmap = yield loadImageBitmap(image);
+    const requestedScale = (_a = preprocess === null || preprocess === void 0 ? void 0 : preprocess.scale) !== null && _a !== void 0 ? _a : 1;
+    const maxDimension = (_b = preprocess === null || preprocess === void 0 ? void 0 : preprocess.maxDimension) !== null && _b !== void 0 ? _b : 3000;
+    const largestSourceDimension = Math.max(bitmap.width, bitmap.height);
+    const scale = Math.min(Math.max(requestedScale, 1), maxDimension / largestSourceDimension);
+    const width = Math.max(1, Math.round(bitmap.width * scale));
+    const height = Math.max(1, Math.round(bitmap.height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (!context) {
+        throw new Error("Canvas rendering is not available.");
+    }
+    context.imageSmoothingEnabled = true;
+    context.imageSmoothingQuality = "high";
+    context.drawImage(bitmap, 0, 0, width, height);
+    bitmap.close();
+    const imageData = context.getImageData(0, 0, width, height);
+    const { data } = imageData;
+    const contrast = (_c = preprocess === null || preprocess === void 0 ? void 0 : preprocess.contrast) !== null && _c !== void 0 ? _c : 1;
+    const contrastFactor = contrast === 1 ? 1 : (259 * (255 * contrast - 255 + 255)) / (255 * (259 - (255 * contrast - 255)));
+    for (let index = 0; index < data.length; index += 4) {
+        let red = data[index];
+        let green = data[index + 1];
+        let blue = data[index + 2];
+        if ((preprocess === null || preprocess === void 0 ? void 0 : preprocess.grayscale) || (preprocess === null || preprocess === void 0 ? void 0 : preprocess.threshold) !== undefined) {
+            const luminance = 0.299 * red + 0.587 * green + 0.114 * blue;
+            red = luminance;
+            green = luminance;
+            blue = luminance;
+        }
+        if (contrast !== 1) {
+            red = clampByte(contrastFactor * (red - 128) + 128);
+            green = clampByte(contrastFactor * (green - 128) + 128);
+            blue = clampByte(contrastFactor * (blue - 128) + 128);
+        }
+        if ((preprocess === null || preprocess === void 0 ? void 0 : preprocess.threshold) !== undefined) {
+            const threshold = clampByte(preprocess.threshold);
+            const value = red >= threshold ? 255 : 0;
+            red = value;
+            green = value;
+            blue = value;
+        }
+        data[index] = red;
+        data[index + 1] = green;
+        data[index + 2] = blue;
+    }
+    context.putImageData(imageData, 0, 0);
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (!blob) {
+                reject(new Error("Unable to prepare image for OCR."));
+                return;
+            }
+            resolve(blob);
+        }, "image/png");
+    });
+});
+export const getImageTextContent = (image_1, ...args_1) => __awaiter(void 0, [image_1, ...args_1], void 0, function* (image, options = {}) {
+    if (!image.type.startsWith("image/")) {
+        throw new Error("getImageTextContent requires an image File.");
+    }
+    const { language, onProgress, parameters, preprocess, recognizeOptions, workerOptions, } = getResolvedOptions(options);
+    const { createWorker } = yield import("tesseract.js");
+    let worker;
+    try {
+        worker = yield createWorker(language, undefined, Object.assign(Object.assign({}, workerOptions), { logger: ({ progress, status }) => {
+                onProgress === null || onProgress === void 0 ? void 0 : onProgress({ progress, status });
+            } }));
+        if (parameters && Object.keys(parameters).length > 0) {
+            yield worker.setParameters(parameters);
+        }
+        const ocrImage = yield preprocessImage(image, preprocess);
+        const result = yield worker.recognize(ocrImage, recognizeOptions, { text: true, blocks: true });
+        const { data } = result;
+        return {
+            text: data.text,
+            confidence: data.confidence,
+            language,
+            lines: getLinesFromPage(data),
+        };
+    }
+    finally {
+        yield (worker === null || worker === void 0 ? void 0 : worker.terminate());
+    }
+});

package/dist/core/controlSizes.js

@@ -26,7 +26,7 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 6,
         pillIconSize: 10,
         pillGap: 4,
-        segmentedHeight: 22,
+        segmentedHeight: 24,
         segmentedFontSize: 11,
         sectionTitleFontSize: 12,
         sectionIconSize: 12,
@@ -57,7 +57,7 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 8,
         pillIconSize: 12,
         pillGap: 5,
-        segmentedHeight: 26,
+        segmentedHeight: 28,
         segmentedFontSize: 12,
         sectionTitleFontSize: 13,
         sectionIconSize: 12,
@@ -89,7 +89,7 @@ const CONTROL_SIZE_TOKENS = {
         pillIconSize: 14,
         pillGap: 5,
         segmentedHeight: 32,
-        segmentedFontSize: 14,
+        segmentedFontSize: 13,
         sectionTitleFontSize: 14,
         sectionIconSize: 14,
     },
@@ -119,8 +119,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 12,
         pillIconSize: 16,
         pillGap: 5,
-        segmentedHeight: 38,
-        segmentedFontSize: 16,
+        segmentedHeight: 36,
+        segmentedFontSize: 14,
         sectionTitleFontSize: 16,
         sectionIconSize: 18,
     },
@@ -150,8 +150,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 14,
         pillIconSize: 18,
         pillGap: 5,
-        segmentedHeight: 46,
-        segmentedFontSize: 18,
+        segmentedHeight: 44,
+        segmentedFontSize: 15,
         sectionTitleFontSize: 18,
         sectionIconSize: 24,
     },
@@ -181,8 +181,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 16,
         pillIconSize: 20,
         pillGap: 5,
-        segmentedHeight: 56,
-        segmentedFontSize: 20,
+        segmentedHeight: 52,
+        segmentedFontSize: 16,
         sectionTitleFontSize: 20,
         sectionIconSize: 28,
     },

package/dist/theme/variants.js

@@ -122,6 +122,29 @@ const lightVariant = {
         action: {
             hover: "rgba(0, 0, 0, 0.1)",
         },
+        codeBlock: {
+            background: "#f6f8fa",
+            text: "#24292f",
+            border: "#d0d7de",
+            selection: "#0969da2e",
+            syntax: {
+                comment: "#6e7781",
+                punctuation: "#24292f",
+                property: "#0550ae",
+                selector: "#116329",
+                operator: "#cf222e",
+                keyword: "#cf222e",
+                string: "#0a3069",
+                number: "#0550ae",
+                function: "#8250df",
+                variable: "#953800",
+                tag: "#116329",
+                attribute: "#0550ae",
+                literal: "#0550ae",
+                deleted: "#82071e",
+                inserted: "#116329",
+            },
+        },
         divider: "rgba(0, 0, 0, 0.3)",
     },
     header: {
@@ -282,6 +305,29 @@ const darkVariant = merge(lightVariant, {
         dataGrid: {
             hover: "#2f2f2f",
         },
+        codeBlock: {
+            background: "#191919",
+            text: "#c9d1d9",
+            border: "rgba(255, 255, 255, 0.15)",
+            selection: "#1f6feb40",
+            syntax: {
+                comment: "#8b949e",
+                punctuation: "#c9d1d9",
+                property: "#79c0ff",
+                selector: "#7ee787",
+                operator: "#ff7b72",
+                keyword: "#ff7b72",
+                string: "#a5d6ff",
+                number: "#79c0ff",
+                function: "#d2a8ff",
+                variable: "#ffa657",
+                tag: "#7ee787",
+                attribute: "#79c0ff",
+                literal: "#79c0ff",
+                deleted: "#ffa198",
+                inserted: "#aff5b4",
+            },
+        },
     },
     header: {
         color: grey[300],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.9.1-dev.9",
+  "version": "1.9.3-dev.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -41,9 +41,13 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.11.0",
     "@tiptap/core": "3.22.4",
+    "@tiptap/extension-code-block": "3.22.4",
+    "@tiptap/extension-code-block-lowlight": "3.22.4",
     "@tiptap/extension-color": "3.22.4",
+    "@tiptap/extension-highlight": "3.22.4",
     "@tiptap/extension-horizontal-rule": "3.22.4",
     "@tiptap/extension-image": "3.22.4",
+    "@tiptap/extension-link": "3.22.4",
     "@tiptap/extension-table": "3.22.4",
     "@tiptap/extension-text-align": "3.22.4",
     "@tiptap/extension-text-style": "3.22.4",
@@ -58,10 +62,13 @@
     "d3-shape": "^3.2.0",
     "deepmerge": "^4.3.1",
     "exceljs": "^4.4.0",
+    "highlight.js": "^11.11.1",
+    "lowlight": "^3.3.0",
     "lucide-react": "^0.469.0",
     "moment": "^2.29.1",
     "overlayscrollbars": "^2.6.0",
     "overlayscrollbars-react": "^0.5.6",
+    "prettier": "^3.8.3",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-pdf": "^9.1.1",