@monolith-forensics/monolith-ui 1.9.3-dev.0 → 1.9.3-dev.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.9.3-dev.0",
+  "version": "1.9.3-dev.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",

package/dist/RichTextEditor/Components/TableCornerMenu.d.ts

@@ -1,16 +0,0 @@
-import { Editor } from "@tiptap/react";
-import type { MouseEvent as ReactMouseEvent } from "react";
-import type { TableRailTarget } from "./TableTools";
-type TableCornerMenuProps = {
-    editor: Editor | null;
-    target: TableRailTarget;
-    opened: boolean;
-    onOpen: () => void;
-    onClose: () => void;
-    onAction: () => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    onMouseDown: (event: ReactMouseEvent<HTMLButtonElement>) => void;
-};
-export declare const TableCornerMenu: ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }: TableCornerMenuProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/RichTextEditor/Components/TableCornerMenu.js

@@ -1,202 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextSelection } from "@tiptap/pm/state";
-import { CopyIcon, EraserIcon, TablePropertiesIcon, Trash2Icon, } from "lucide-react";
-import styled from "styled-components";
-import { Button } from "../../Button";
-import { getControlSizeTokens } from "../../core";
-import { Popover } from "../../Popover";
-const CORNER_BUTTON_SIZE = 18;
-const VIEWPORT_PADDING = 8;
-const clearTableContents = (editor, target) => {
-    if (!editor)
-        return false;
-    const paragraph = editor.state.schema.nodes.paragraph.createAndFill();
-    if (!paragraph)
-        return false;
-    const tr = editor.state.tr;
-    const { tableContext } = target;
-    const cells = tableContext.map
-        .cellsInRect({
-        left: 0,
-        right: tableContext.map.width,
-        top: 0,
-        bottom: tableContext.map.height,
-    })
-        .map((pos) => ({
-        pos,
-        node: tableContext.node.nodeAt(pos),
-    }))
-        .filter((cell) => Boolean(cell.node))
-        .sort((a, b) => b.pos - a.pos);
-    cells.forEach((cell) => {
-        const from = tableContext.start + cell.pos + 1;
-        const to = tableContext.start + cell.pos + cell.node.nodeSize - 1;
-        tr.replaceWith(from, to, paragraph);
-    });
-    editor.view.dispatch(tr);
-    return true;
-};
-const duplicateTable = (editor, target) => {
-    if (!editor)
-        return false;
-    const { tableContext } = target;
-    const paragraph = editor.state.schema.nodes.paragraph.createAndFill();
-    if (!paragraph)
-        return false;
-    const insertPosition = tableContext.pos + tableContext.node.nodeSize;
-    const duplicatedTable = tableContext.node.copy(tableContext.node.content);
-    const tr = editor.state.tr.insert(insertPosition, [
-        paragraph,
-        duplicatedTable,
-    ]);
-    const firstCellPosition = tableContext.map.positionAt(0, 0, duplicatedTable);
-    if (firstCellPosition !== null) {
-        const duplicatePosition = insertPosition + paragraph.nodeSize;
-        const firstCellContentPosition = duplicatePosition + 1 + firstCellPosition + 1;
-        tr.setSelection(TextSelection.near(tr.doc.resolve(firstCellContentPosition)));
-    }
-    editor.view.dispatch(tr.scrollIntoView());
-    return true;
-};
-const deleteTable = (editor, target) => {
-    if (!editor)
-        return false;
-    const { tableContext } = target;
-    editor.view.dispatch(editor.state.tr
-        .delete(tableContext.pos, tableContext.pos + tableContext.node.nodeSize)
-        .scrollIntoView());
-    return true;
-};
-const getTableActionGroups = (editor, target) => [
-    {
-        label: "Content",
-        actions: [
-            {
-                label: "Clear table contents",
-                leftSection: _jsx(EraserIcon, { size: 14 }),
-                onClick: () => clearTableContents(editor, target),
-            },
-            {
-                label: "Duplicate table",
-                leftSection: _jsx(CopyIcon, { size: 14 }),
-                onClick: () => duplicateTable(editor, target),
-            },
-        ],
-    },
-    {
-        label: "Delete",
-        actions: [
-            {
-                label: "Delete table",
-                leftSection: _jsx(Trash2Icon, { size: 14 }),
-                danger: true,
-                onClick: () => deleteTable(editor, target),
-            },
-        ],
-    },
-];
-const getCornerRect = (target) => ({
-    top: Math.max(VIEWPORT_PADDING, target.tableRect.top - CORNER_BUTTON_SIZE),
-    left: Math.max(VIEWPORT_PADDING, target.tableRect.left - CORNER_BUTTON_SIZE),
-});
-const CornerRoot = styled.div `
-  display: flex;
-  position: fixed;
-  top: ${({ $top }) => `${$top}px`};
-  left: ${({ $left }) => `${$left}px`};
-  z-index: 1500;
-  width: ${CORNER_BUTTON_SIZE}px;
-  height: ${CORNER_BUTTON_SIZE}px;
-
-  button {
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    padding: 0;
-    border-radius: 6px;
-    background-color: ${({ theme }) => theme.palette.background.paper};
-    color: ${({ theme }) => theme.palette.text.secondary};
-
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.primary.main};
-      color: white;
-    }
-  }
-`;
-const TableMenuPanel = styled.div `
-  display: flex;
-  flex-direction: column;
-  min-width: 220px;
-  color: ${({ theme }) => theme.palette.text.primary};
-`;
-const TableMenuDropdown = styled(Popover.Dropdown) `
-  min-width: 180px;
-  border-radius: 5px;
-  border: 1px solid ${({ theme }) => theme.palette.divider};
-  background-color: ${({ theme }) => theme.palette.input.background};
-  box-shadow: none;
-  padding: 5px;
-`;
-const TableMenuGroup = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  padding-top: ${({ $withDivider }) => ($withDivider ? "5px" : 0)};
-  margin-top: ${({ $withDivider }) => ($withDivider ? "5px" : 0)};
-  border-top: ${({ $withDivider, theme }) => $withDivider ? `1px solid ${theme.palette.divider}` : 0};
-`;
-const TableMenuButton = styled(Button) `
-  min-width: 100%;
-  height: ${getControlSizeTokens("sm").menuRowHeight}px;
-  min-height: ${getControlSizeTokens("sm").menuRowHeight}px;
-  padding: 0 ${getControlSizeTokens("sm").menuItemPaddingX}px;
-  border: none;
-  border-radius: 3px;
-  color: ${({ $danger, theme }) => $danger ? theme.palette.error.main : theme.palette.text.primary};
-  font-weight: normal;
-  justify-content: flex-start;
-  width: 100%;
-
-  .button-label {
-    display: inline-block;
-    min-width: 0;
-    width: 100%;
-    overflow: hidden;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  [data-position="left"] {
-    color: currentColor;
-    opacity: 0.8;
-  }
-
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.action.hover};
-    color: ${({ $danger, theme }) => $danger ? theme.palette.error.main : theme.palette.text.primary};
-  }
-
-  &:active {
-    translate: none;
-  }
-
-  &:focus {
-    text-decoration: none;
-  }
-`;
-const TableMenu = ({ groups, onAction, }) => (_jsx(TableMenuPanel, { children: groups.map((group, index) => (_jsx(TableMenuGroup, { "$withDivider": index > 0, children: group.actions.map((action) => (_jsx(TableMenuButton, { "$danger": action.danger, size: "sm", variant: "subtle", leftSection: action.leftSection, justify: "start", onClick: () => {
-                action.onClick();
-                onAction();
-            }, children: action.label }, action.label))) }, group.label))) }));
-export const TableCornerMenu = ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }) => {
-    const rect = getCornerRect(target);
-    const groups = getTableActionGroups(editor, target);
-    return (_jsx(CornerRoot, { "data-monolith-table-rail": true, "$top": rect.top, "$left": rect.left, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsxs(Popover, { opened: opened, onChange: (nextOpened) => {
-                if (nextOpened) {
-                    onOpen();
-                    return;
-                }
-                onClose();
-            }, position: "bottom-start", width: 245, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { type: "button", size: "xs", variant: "outlined", title: "Table options", "aria-label": "Table options", selected: opened, onMouseDown: onMouseDown, children: _jsx(TablePropertiesIcon, { size: 12 }) }) }), _jsx(TableMenuDropdown, { children: _jsx(TableMenu, { groups: groups, onAction: onAction }) })] }) }));
-};

package/dist/RichTextEditor/Components/TableTools.d.ts

@@ -1,44 +0,0 @@
-import { Editor } from "@tiptap/react";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { TableMap } from "@tiptap/pm/tables";
-type TableToolsContentProps = {
-    editor: Editor | null;
-    showInsert?: boolean;
-    onInsert?: () => void;
-    onAction?: () => void;
-};
-type TableToolsPopoverProps = {
-    editor: Editor | null;
-};
-type TableRailsProps = {
-    editor: Editor | null;
-};
-type RailKind = "row" | "column";
-type RailRect = {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-};
-type TableContext = {
-    node: ProseMirrorNode;
-    pos: number;
-    start: number;
-    map: TableMap;
-};
-export type TableRailTarget = {
-    kind: RailKind;
-    rowIndex: number;
-    colIndex: number;
-    tableElement: HTMLTableElement;
-    tableRect: RailRect;
-    tableContext: TableContext;
-    rowRect: RailRect;
-    columnRect: RailRect;
-};
-export declare const hasTableExtension: (editor: Editor | null) => boolean;
-export declare const isTableActive: (editor: Editor | null) => boolean;
-export declare const TableToolsContent: ({ editor, showInsert, onInsert, onAction, }: TableToolsContentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TableToolsPopover: ({ editor }: TableToolsPopoverProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TableRails: ({ editor }: TableRailsProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};