@tfw.in/structura-lib 0.2.0

package/dist/esm/HtmlViewer.js

@@ -0,0 +1,640 @@
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray, createForOfIteratorHelper as _createForOfIteratorHelper } from './_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { VscJson } from 'react-icons/vsc';
+import { FaFileDownload, FaChartBar } from './node_modules/react-icons/fa/index.esm.js';
+import Table from './Table.js';
+import EditableContent from './EditableContent.js';
+import { calculateDifferences } from './accuracyMetrics.js';
+
+// Utility function to clean HTML content
+var cleanHtml = function cleanHtml(html) {
+  if (!html) return "";
+  // Remove newline characters
+  return html.replace(/\n/g, " ").replace(/<br\s*\/?>/g, " ")
+  // Remove consecutive spaces
+  .replace(/\s+/g, " ")
+  // Trim leading and trailing spaces
+  .trim();
+};
+function JsonModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    data = _ref.data;
+  if (!isOpen) return null;
+  return jsx("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",
+    children: jsxs("div", {
+      className: "bg-white rounded-lg p-6 max-w-2xl w-full max-h-[80vh] overflow-auto",
+      children: [jsxs("div", {
+        className: "flex justify-between items-center mb-4",
+        children: [jsx("h3", {
+          className: "text-lg font-semibold",
+          children: "JSON Data"
+        }), jsx("button", {
+          onClick: onClose,
+          className: "text-gray-500 hover:text-gray-700",
+          children: "\u2715"
+        })]
+      }), jsx("pre", {
+        className: "bg-gray-100 p-4 rounded-lg overflow-auto",
+        children: JSON.stringify(data, null, 2)
+      })]
+    })
+  });
+}
+function AnalyticsModal(_ref2) {
+  var isOpen = _ref2.isOpen,
+    onClose = _ref2.onClose,
+    metrics = _ref2.metrics;
+  if (!isOpen) return null;
+  return jsx("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",
+    children: jsxs("div", {
+      className: "bg-white rounded-lg p-6 max-w-2xl w-full max-h-[80vh] overflow-auto",
+      children: [jsxs("div", {
+        className: "flex justify-between items-center mb-4",
+        children: [jsx("h3", {
+          className: "text-lg font-semibold",
+          children: "Analytics & Metrics"
+        }), jsx("button", {
+          onClick: onClose,
+          className: "text-gray-500 hover:text-gray-700",
+          children: "\u2715"
+        })]
+      }), jsxs("div", {
+        className: "space-y-4",
+        children: [jsxs("div", {
+          className: "bg-gray-50 p-4 rounded-lg",
+          children: [jsx("h4", {
+            className: "font-medium mb-2",
+            children: "Overall Accuracy"
+          }), jsx("div", {
+            className: "text-3xl font-bold mb-2",
+            children: jsxs("span", {
+              className: "".concat(metrics.accuracyScore > 90 ? "text-green-600" : metrics.accuracyScore > 70 ? "text-yellow-600" : "text-red-600"),
+              children: [metrics.accuracyScore.toFixed(2), "%"]
+            })
+          })]
+        }), jsxs("div", {
+          className: "grid grid-cols-3 gap-4",
+          children: [jsxs("div", {
+            className: "bg-blue-50 p-4 rounded-lg",
+            children: [jsx("h4", {
+              className: "text-sm text-blue-700",
+              children: "Total Changes"
+            }), jsx("p", {
+              className: "text-2xl font-bold",
+              children: metrics.totalChanges
+            })]
+          }), jsxs("div", {
+            className: "bg-green-50 p-4 rounded-lg",
+            children: [jsx("h4", {
+              className: "text-sm text-green-700",
+              children: "Characters Edited"
+            }), jsx("p", {
+              className: "text-2xl font-bold",
+              children: metrics.totalCharactersEdited
+            })]
+          }), jsxs("div", {
+            className: "bg-purple-50 p-4 rounded-lg",
+            children: [jsx("h4", {
+              className: "text-sm text-purple-700",
+              children: "Words Edited"
+            }), jsx("p", {
+              className: "text-2xl font-bold",
+              children: metrics.totalWordsEdited
+            })]
+          })]
+        }), Object.entries(metrics.blockTypeStats).length > 0 && jsxs("div", {
+          className: "mt-6",
+          children: [jsx("h4", {
+            className: "font-medium mb-3",
+            children: "Changes by Block Type"
+          }), jsx("div", {
+            className: "space-y-2",
+            children: Object.entries(metrics.blockTypeStats).map(function (_ref3) {
+              var _ref4 = _slicedToArray(_ref3, 2),
+                type = _ref4[0],
+                stats = _ref4[1];
+              return jsxs("div", {
+                className: "bg-gray-50 p-3 rounded-lg",
+                children: [jsxs("div", {
+                  className: "flex justify-between items-center",
+                  children: [jsx("span", {
+                    className: "font-medium",
+                    children: type
+                  }), jsxs("span", {
+                    className: "text-gray-600",
+                    children: [stats.changes, " changes"]
+                  })]
+                }), jsxs("div", {
+                  className: "text-sm text-gray-500",
+                  children: [stats.charactersEdited, " characters edited"]
+                })]
+              }, type);
+            })
+          })]
+        })]
+      })]
+    })
+  });
+}
+// Update icon usage in the JSX
+var VscJsonIcon = VscJson;
+var FaFileDownloadIcon = FaFileDownload;
+var FaChartBarIcon = FaChartBar;
+function HtmlViewer(_ref5) {
+  var jsonData = _ref5.jsonData,
+    selectedBboxId = _ref5.selectedBboxId,
+    isLoading = _ref5.isLoading,
+    onNodeClick = _ref5.onNodeClick,
+    onSave = _ref5.onSave;
+  var _useState = useState(jsonData),
+    _useState2 = _slicedToArray(_useState, 2),
+    editedData = _useState2[0],
+    setEditedData = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasChanges = _useState4[0],
+    setHasChanges = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isModalOpen = _useState6[0],
+    setIsModalOpen = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    modalData = _useState8[0],
+    setModalData = _useState8[1];
+  var _useState9 = useState(true),
+    _useState0 = _slicedToArray(_useState9, 2),
+    showJsonIcons = _useState0[0],
+    setShowJsonIcons = _useState0[1];
+  var _useState1 = useState("Show JSON"),
+    _useState10 = _slicedToArray(_useState1, 2),
+    activeFormat = _useState10[0],
+    setActiveFormat = _useState10[1];
+  var _useState11 = useState({
+      totalChanges: 0,
+      totalCharactersEdited: 0,
+      totalWordsEdited: 0,
+      accuracyScore: 100,
+      changeHistory: [],
+      blockTypeStats: {}
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    accuracyMetrics = _useState12[0],
+    setAccuracyMetrics = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isAnalyticsOpen = _useState14[0],
+    setIsAnalyticsOpen = _useState14[1];
+  useEffect(function () {
+    // Reset state when jsonData changes
+    // console.log("HtmlViewer received new jsonData");
+    setEditedData(jsonData);
+    setHasChanges(false); // Reset changes flag
+    setAccuracyMetrics({
+      totalChanges: 0,
+      totalCharactersEdited: 0,
+      totalWordsEdited: 0,
+      accuracyScore: 100,
+      changeHistory: [],
+      blockTypeStats: {}
+    });
+  }, [jsonData]);
+  var handleJsonClick = function handleJsonClick(node) {
+    setModalData(node);
+    setIsModalOpen(true);
+  };
+  var updateAccuracyMetrics = useCallback(function (nodeId, blockType, originalContent, newContent) {
+    var differences = calculateDifferences(originalContent, newContent);
+    var change = {
+      id: nodeId,
+      blockType: blockType,
+      originalContent: originalContent,
+      newContent: newContent,
+      timestamp: Date.now(),
+      charactersDifferent: differences.charactersDifferent,
+      wordsDifferent: differences.wordsDifferent
+    };
+    setAccuracyMetrics(function (prev) {
+      // Update block type stats
+      var blockStats = prev.blockTypeStats[blockType] || {
+        changes: 0,
+        charactersEdited: 0,
+        wordsEdited: 0
+      };
+      var newBlockStats = {
+        changes: blockStats.changes + 1,
+        charactersEdited: blockStats.charactersEdited + differences.charactersDifferent,
+        wordsEdited: blockStats.wordsEdited + differences.wordsDifferent
+      };
+      // Calculate total original characters
+      var totalOriginalCharacters = calculateTotalCharacters(jsonData);
+      // Calculate new accuracy score
+      var newTotalCharactersEdited = prev.totalCharactersEdited + differences.charactersDifferent;
+      var accuracyScore = Math.max(0, 100 - newTotalCharactersEdited / totalOriginalCharacters * 100);
+      return {
+        totalChanges: prev.totalChanges + 1,
+        totalCharactersEdited: newTotalCharactersEdited,
+        totalWordsEdited: prev.totalWordsEdited + differences.wordsDifferent,
+        accuracyScore: accuracyScore,
+        changeHistory: [].concat(_toConsumableArray(prev.changeHistory), [change]),
+        blockTypeStats: _objectSpread2(_objectSpread2({}, prev.blockTypeStats), {}, _defineProperty({}, blockType, newBlockStats))
+      };
+    });
+  }, [jsonData]);
+  var handleContentChange = useCallback(function (nodeId, newContent) {
+    setHasChanges(true);
+    setEditedData(function (prevData) {
+      var newData = JSON.parse(JSON.stringify(prevData));
+      var _updateNode = function updateNode(node) {
+        if (!node) return false;
+        if (node.id === nodeId) {
+          var originalContent = node.html || "";
+          var blockType = node.block_type || "unknown";
+          // Update accuracy metrics before changing content
+          updateAccuracyMetrics(nodeId, blockType, originalContent, newContent);
+          node.html = newContent;
+          return true;
+        }
+        if (node.children && Array.isArray(node.children)) {
+          var _iterator = _createForOfIteratorHelper(node.children),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var child = _step.value;
+              if (_updateNode(child)) return true;
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        }
+        return false;
+      };
+      _updateNode(newData);
+      return newData;
+    });
+  }, [updateAccuracyMetrics]);
+  var handleDownload = function handleDownload() {
+    if (!editedData) return;
+    var jsonString = JSON.stringify(editedData, null, 2);
+    var blob = new Blob([jsonString], {
+      type: "application/json"
+    });
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement("a");
+    a.href = url;
+    a.download = "updated_bio.json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+  // Function to get the appropriate HTML content based on settings
+  var getHtmlContent = function getHtmlContent(node) {
+    // For individual nodes in the tree view, just return their HTML directly
+    // This preserves the node structure and click interactivity
+    // getBlockHtml/jsonToHtml should only be used for full page rendering/export
+    return cleanHtml(node.html || '');
+  };
+  var mergedTablesMap = useMemo(function () {
+    var map = new Map();
+    var _findTables = function findTables(node) {
+      if (!node) return;
+      if (node.block_type === "Table" && node.merged_table_id) {
+        console.log("Found table with merged_table_id:", node.merged_table_id, "ID:", node.id);
+        var tables = map.get(node.merged_table_id) || [];
+        tables.push(node);
+        map.set(node.merged_table_id, tables);
+      }
+      if (node.children) {
+        node.children.forEach(_findTables);
+      }
+    };
+    if (jsonData) {
+      _findTables(jsonData);
+    }
+    return map;
+  }, [jsonData]);
+  useEffect(function () {
+    // console.log(`[HtmlViewer] Scroll effect triggered. selectedBboxId: ${selectedBboxId}`);
+    if (selectedBboxId) {
+      var elementToScroll = document.getElementById(selectedBboxId);
+      // console.log(`[HtmlViewer] Attempt 1: document.getElementById('${selectedBboxId}') result:`, elementToScroll);
+      if (!elementToScroll && editedData) {
+        // console.log(`[HtmlViewer] Element ${selectedBboxId} not found directly. Proceeding to check if it's part of a merged table.`);
+        var _findNodeByIdRecursive = function findNodeByIdRecursive(nodes, id) {
+          var _iterator2 = _createForOfIteratorHelper(nodes),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var node = _step2.value;
+              if (node.id === id) return node;
+              if (node.children) {
+                var foundInChildren = _findNodeByIdRecursive(node.children, id);
+                if (foundInChildren) return foundInChildren;
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+          return null;
+        };
+        var findNodeInDocument = function findNodeInDocument(documentData, id) {
+          if (!documentData) {
+            // console.log("[HtmlViewer] findNodeInDocument: documentData is null/undefined.");
+            return null;
+          }
+          if (documentData.id === id) return documentData; // Check root node
+          if (documentData.children) {
+            return _findNodeByIdRecursive(documentData.children, id);
+          }
+          // console.log("[HtmlViewer] findNodeInDocument: documentData has no children to search.");
+          return null;
+        };
+        // console.log("[HtmlViewer] Searching for selectedNodeDetails in editedData:", editedData ? 'editedData exists' : 'editedData is null');
+        var selectedNodeDetails = findNodeInDocument(editedData, selectedBboxId);
+        // console.log(`[HtmlViewer] selectedNodeDetails for ID ${selectedBboxId}:`, selectedNodeDetails);
+        if (selectedNodeDetails && selectedNodeDetails.block_type === "Table" && selectedNodeDetails.merged_table_id) {
+          // console.log(`[HtmlViewer] Confirmed: Selected node ${selectedBboxId} (type: ${selectedNodeDetails.block_type}) is part of merged table group ${selectedNodeDetails.merged_table_id}.`);
+          var tablesInGroup = mergedTablesMap.get(selectedNodeDetails.merged_table_id);
+          // console.log(`[HtmlViewer] Tables in merged group ${selectedNodeDetails.merged_table_id} from mergedTablesMap:`, tablesInGroup);
+          if (tablesInGroup && tablesInGroup.length > 0) {
+            var primaryTableId = tablesInGroup[0].id; // The first table in the map is the one rendered
+            // console.log(`[HtmlViewer] Primary table ID for this group is ${primaryTableId}. Attempting to get this element.`);
+            elementToScroll = document.getElementById(primaryTableId);
+            // console.log(`[HtmlViewer] Attempt 2 (merged table): document.getElementById('${primaryTableId}') result:`, elementToScroll);
+            if (!elementToScroll) {
+              console.warn("[HtmlViewer] Primary table element ".concat(primaryTableId, " (for merged group) also not found in DOM."));
+            }
+          } else {
+            console.warn("[HtmlViewer] No tables found in mergedTablesMap for group ".concat(selectedNodeDetails.merged_table_id, ". Cannot find primary table to scroll."));
+          }
+        } else if (selectedNodeDetails) {
+          console.log("[HtmlViewer] Selected node ".concat(selectedBboxId, " is type ").concat(selectedNodeDetails.block_type, ". It's not a merged table or 'merged_table_id' is missing."));
+        } else {
+          console.log("[HtmlViewer] Details for selected node ".concat(selectedBboxId, " not found within the 'editedData' structure. Cannot determine if it's part of a merged table."));
+        }
+      }
+      if (elementToScroll) {
+        // console.log(`[HtmlViewer] SUCCESS: Scheduling scroll to element with ID: ${elementToScroll.id} using block: 'nearest'`);
+        setTimeout(function () {
+          var el = document.getElementById(elementToScroll.id); // Re-fetch element in timeout
+          if (el) {
+            // console.log(`[HtmlViewer] Timeout: Scrolling to element ${el.id} (align to top)`);
+            el.scrollIntoView(true); // Align to top, auto behavior
+          } else {
+            console.warn("[HtmlViewer] Timeout: Element ".concat(elementToScroll.id, " not found at time of scroll."));
+          }
+        }, 0); // Small delay to allow DOM to update
+      } else {
+        console.warn("[HtmlViewer] FINAL: Element with ID ".concat(selectedBboxId, " (or its primary merged table, if applicable) was NOT found in the DOM. No scrolling will occur."));
+      }
+    } else {
+      console.log("[HtmlViewer] Scroll effect: No selectedBboxId, so no scrolling action taken.");
+    }
+  }, [selectedBboxId, editedData, mergedTablesMap]); // Added editedData and mergedTablesMap
+  useMemo(function () {
+    var map = new Map();
+    var _findHeaders = function findHeaders(node) {
+      if (!node) return;
+      if (node.block_type === "Table" && node.merged_table_id) {
+        var currentNode = node;
+        while (currentNode.next) {
+          currentNode = currentNode.next;
+          if (currentNode.block_type === "Text" && currentNode.html.includes("BioprocessAl")) {
+            map.set(node.merged_table_id, currentNode);
+            break;
+          }
+        }
+      }
+      if (node.children) {
+        node.children.forEach(_findHeaders);
+      }
+    };
+    if (jsonData) {
+      _findHeaders(jsonData);
+    }
+    return map;
+  }, [jsonData]);
+  if (isLoading) {
+    return jsx("div", {
+      className: "flex items-center justify-center h-full",
+      children: jsxs("div", {
+        className: "animate-pulse flex flex-col items-center gap-4",
+        children: [jsx("div", {
+          className: "h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"
+        }), jsx("p", {
+          className: "text-gray-600",
+          children: "Processing PDF..."
+        })]
+      })
+    });
+  }
+  if (!editedData) {
+    return jsx("p", {
+      className: "text-center p-4",
+      children: "Upload a PDF and generate JSON to view content"
+    });
+  }
+  var _renderHtmlContent = function renderHtmlContent(node) {
+    var _a;
+    if (!node) return null;
+    var isSelected = node.id === selectedBboxId;
+    var hasChildren = node.children && node.children.length > 0;
+    var isTable = ((_a = node.block_type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "table";
+    var isTableOfContents = node.block_type === "TableOfContents";
+    var isText = node.block_type === "Text";
+    var isHandwritten = node.block_type === "Handwriting";
+    var isSectionHeader = node.block_type === "SectionHeader";
+    var isPage = node.block_type === "Page";
+    // Get the appropriate HTML content
+    var htmlContent = getHtmlContent(node);
+    var isHeading = htmlContent && (htmlContent.startsWith("<h1") || htmlContent.startsWith("<h2") || htmlContent.startsWith("<h3") || htmlContent.startsWith("<h4"));
+    // Skip tables that are part of a merged group but aren't the first table
+    if (isTable && node.merged_table_id) {
+      var tables = mergedTablesMap.get(node.merged_table_id) || [];
+      if (tables.length > 0 && tables[0].id !== node.id) {
+        // Return null to completely skip rendering this table
+        return null;
+      }
+    }
+    // Handle click on content
+    var handleContentClick = function handleContentClick(e) {
+      // Check if the node has a valid ID that could correspond to a bbox in the PDF
+      // Only process direct clicks, not bubbled events from child elements
+      if (e.target === e.currentTarget && node.id && onNodeClick && !isPage) {
+        console.log("HTML content clicked:", node.id);
+        onNodeClick(node.id);
+      }
+    };
+    return jsxs("div", {
+      id: node.id,
+      className: "p-2 my-1 rounded transition-colors relative group max-w-full overflow-hidden ".concat(isSelected ? "bg-blue-100 border-2 border-blue-500" : "", " ").concat(onNodeClick && !isPage ? "cursor-pointer hover:bg-gray-50" : ""),
+      onClick: isPage ? undefined : handleContentClick,
+      children: [!isPage && showJsonIcons && jsx("button", {
+        onClick: function onClick(e) {
+          e.stopPropagation(); // Prevent triggering parent onClick
+          handleJsonClick(node);
+        },
+        className: "absolute right-2 top-2 z-10 ".concat(showJsonIcons ? "opacity-0 group-hover:opacity-100 transition-opacity" : "hidden", " text-gray-500 hover:text-gray-700"),
+        title: "View JSON",
+        children: jsx(VscJsonIcon, {
+          size: 18
+        })
+      }), isTable || isTableOfContents ? jsx(Table, {
+        node: node,
+        selectedBboxId: selectedBboxId,
+        onJsonClick: handleJsonClick,
+        onContentChange: handleContentChange,
+        mergedTables: node.merged_table_id ? (mergedTablesMap.get(node.merged_table_id) || []).slice(1) : [],
+        hasLlmHtml: !!node.llm_table_html,
+        showJsonIcons: showJsonIcons,
+        onNodeClick: onNodeClick
+      }) : isText || isHandwritten || isSectionHeader ? jsx(EditableContent, {
+        id: node.id,
+        content: htmlContent,
+        onContentChange: handleContentChange,
+        isHeading: !!isHeading,
+        onNodeClick: onNodeClick && !isPage ? function () {
+          return onNodeClick(node.id);
+        } : undefined
+      }) : jsxs(Fragment, {
+        children: [jsx("div", {
+          className: "prose max-w-none w-full overflow-hidden break-words",
+          dangerouslySetInnerHTML: {
+            __html: htmlContent
+          }
+        }), hasChildren && jsx("div", {
+          className: "ml-4 mt-2 border-l-2 border-gray-200 pl-4 max-w-full overflow-hidden",
+          children: node.children.map(function (child) {
+            return _renderHtmlContent(child);
+          })
+        })]
+      })]
+    }, node.id);
+  };
+  var getAllNodes = function getAllNodes(data) {
+    if (!data) return [];
+    // Get all children
+    var children = data.children || [];
+    // Filter out tables that should be hidden (part of a merge but not the first one)
+    return children.filter(function (node) {
+      if (node.block_type === "Table" && node.merged_table_id) {
+        var tables = mergedTablesMap.get(node.merged_table_id) || [];
+        // Keep only if this is the first table in the merge group
+        return tables.length === 0 || tables[0].id === node.id;
+      }
+      return true; // Keep all other nodes
+    });
+  };
+  var allNodes = getAllNodes(editedData);
+  // Update the header section to include both buttons
+  var renderHeader = function renderHeader() {
+    return jsxs("div", {
+      className: "sticky top-0 z-20 bg-white border-b border-gray-200 p-4 flex justify-between items-center flex-shrink-0",
+      children: [jsx("div", {
+        className: "flex gap-2",
+        children: hasChanges && jsxs(Fragment, {
+          children: [onSave && jsxs("button", {
+            onClick: function onClick() {
+              return onSave(editedData);
+            },
+            className: "inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2",
+            title: "Save Changes",
+            children: [jsx(FaFileDownloadIcon, {
+              size: 18
+            }), "Save"]
+          }), jsxs("button", {
+            onClick: handleDownload,
+            className: "inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+            title: "Download Updated JSON",
+            children: [jsx(FaFileDownloadIcon, {
+              size: 18
+            }), "Download"]
+          })]
+        })
+      }), jsxs("div", {
+        className: "flex gap-2 items-center",
+        children: [jsx("button", {
+          onClick: function onClick() {
+            return setIsAnalyticsOpen(true);
+          },
+          className: "inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2",
+          title: "View Analytics",
+          children: jsx(FaChartBarIcon, {
+            size: 18
+          })
+        }), jsxs("div", {
+          className: "flex bg-gray-100 rounded-lg p-1",
+          children: [jsx("button", {
+            onClick: function onClick() {
+              setShowJsonIcons(true);
+              setActiveFormat("Show JSON");
+            },
+            className: "py-1.5 px-3 text-sm font-medium rounded-md transition-colors whitespace-nowrap ".concat(activeFormat === "Show JSON" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"),
+            children: "Show JSON"
+          }), jsx("button", {
+            onClick: function onClick() {
+              setShowJsonIcons(false);
+              setActiveFormat("Hide JSON");
+            },
+            className: "py-1.5 px-3 text-sm font-medium rounded-md transition-colors whitespace-nowrap ".concat(activeFormat === "Hide JSON" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"),
+            children: "Hide JSON"
+          })]
+        })]
+      })]
+    });
+  };
+  return jsxs("div", {
+    className: "w-full h-full max-w-full flex flex-col overflow-hidden",
+    children: [renderHeader(), jsx("div", {
+      className: "flex-1 overflow-auto min-h-0 max-w-full",
+      children: jsx("div", {
+        className: "p-4 max-w-full",
+        children: allNodes.map(function (node) {
+          return jsx("div", {
+            className: "w-full max-w-full overflow-hidden break-words",
+            children: _renderHtmlContent(node)
+          }, node.id);
+        })
+      })
+    }), jsx(AnalyticsModal, {
+      isOpen: isAnalyticsOpen,
+      onClose: function onClose() {
+        return setIsAnalyticsOpen(false);
+      },
+      metrics: accuracyMetrics
+    }), jsx(JsonModal, {
+      isOpen: isModalOpen,
+      onClose: function onClose() {
+        return setIsModalOpen(false);
+      },
+      data: modalData
+    })]
+  });
+}
+// Utility function to calculate total characters in the document
+function calculateTotalCharacters(data) {
+  if (!data) return 0;
+  var total = 0;
+  var _countCharacters = function countCharacters(node) {
+    if (node.html) {
+      var cleanText = node.html.replace(/<[^>]*>/g, "").trim();
+      total += cleanText.length;
+    }
+    if (node.children && Array.isArray(node.children)) {
+      node.children.forEach(_countCharacters);
+    }
+  };
+  _countCharacters(data);
+  return total;
+}
+
+export { HtmlViewer as default };

package/dist/esm/PdfComponents.js

@@ -0,0 +1,21 @@
+import 'react/jsx-runtime';
+import { lazy } from 'react';
+import './lib/polyfills.js';
+
+// Lazy load the PDF components
+var Document = /*#__PURE__*/lazy(function () {
+  return import('react-pdf').then(function (mod) {
+    return {
+      default: mod.Document
+    };
+  });
+});
+var Page = /*#__PURE__*/lazy(function () {
+  return import('react-pdf').then(function (mod) {
+    return {
+      default: mod.Page
+    };
+  });
+});
+
+export { Document, Page };