@tfw.in/structura-lib 0.2.0 → 0.2.1

package/dist/cjs/HtmlViewer.js

@@ -9,6 +9,7 @@ var index_esm = require('./node_modules/react-icons/fa/index.esm.js');
 var Table = require('./Table.js');
 var EditableContent = require('./EditableContent.js');
 var accuracyMetrics = require('./accuracyMetrics.js');
+var SemanticTagParser = require('./SemanticTagParser.js');
 
 // Utility function to clean HTML content
 const cleanHtml = html => {
@@ -140,24 +141,121 @@ function AnalyticsModal({
     })
   });
 }
+function TagModal({
+  isOpen,
+  onClose,
+  tag
+}) {
+  if (!isOpen || !tag) return null;
+  const typeInfo = SemanticTagParser.getTagTypeInfo(tag.type);
+  return jsxRuntime.jsx("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",
+    children: jsxRuntime.jsxs("div", {
+      className: "bg-white rounded-lg p-6 max-w-md w-full shadow-xl",
+      children: [jsxRuntime.jsxs("div", {
+        className: "flex justify-between items-center mb-4",
+        children: [jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-2xl",
+            children: typeInfo.icon
+          }), jsxRuntime.jsxs("h3", {
+            className: "text-lg font-semibold",
+            children: [typeInfo.label, " Tag"]
+          })]
+        }), jsxRuntime.jsx("button", {
+          onClick: onClose,
+          className: "text-gray-500 hover:text-gray-700",
+          children: "\u2715"
+        })]
+      }), jsxRuntime.jsx("div", {
+        className: `p-4 rounded-lg border ${typeInfo.bgColor} mb-4`,
+        children: jsxRuntime.jsxs("div", {
+          className: `text-2xl font-bold ${typeInfo.color}`,
+          children: [tag.value, tag.attributes.uom && jsxRuntime.jsx("span", {
+            className: "text-lg ml-2 opacity-75",
+            children: tag.attributes.uom
+          })]
+        })
+      }), jsxRuntime.jsxs("div", {
+        className: "space-y-3",
+        children: [jsxRuntime.jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-gray-600",
+            children: "Type"
+          }), jsxRuntime.jsx("span", {
+            className: `font-medium ${typeInfo.color}`,
+            children: tag.type
+          })]
+        }), tag.attributes.uom && jsxRuntime.jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-gray-600",
+            children: "Unit of Measure"
+          }), jsxRuntime.jsx("span", {
+            className: "font-medium",
+            children: tag.attributes.uom
+          })]
+        }), tag.attributes.id && jsxRuntime.jsxs("div", {
+          className: "py-2 border-b",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-gray-600 block mb-1",
+            children: "Tag ID"
+          }), jsxRuntime.jsx("code", {
+            className: "text-xs bg-gray-100 p-2 rounded block break-all",
+            children: tag.attributes.id
+          })]
+        }), tag.attributes.format && jsxRuntime.jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-gray-600",
+            children: "Format"
+          }), jsxRuntime.jsx("span", {
+            className: "font-mono text-sm",
+            children: tag.attributes.format
+          })]
+        }), tag.attributes.filter && jsxRuntime.jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-gray-600",
+            children: "File Filter"
+          }), jsxRuntime.jsx("span", {
+            className: "font-mono text-sm",
+            children: tag.attributes.filter
+          })]
+        }), jsxRuntime.jsxs("div", {
+          className: "py-2",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-gray-600 block mb-1",
+            children: "Raw Tag"
+          }), jsxRuntime.jsx("code", {
+            className: "text-xs bg-gray-100 p-2 rounded block break-all text-gray-700",
+            children: tag.rawMatch
+          })]
+        })]
+      })]
+    })
+  });
+}
 // Update icon usage in the JSX
 const VscJsonIcon = vsc.VscJson;
 const FaFileDownloadIcon = index_esm.FaFileDownload;
 const FaChartBarIcon = index_esm.FaChartBar;
+const FaEditIcon = index_esm.FaEdit;
+const FaTagsIcon = index_esm.FaTags;
 function HtmlViewer({
   //NOSONAR
   jsonData,
   selectedBboxId,
   isLoading,
-  onNodeClick,
-  onSave
+  onNodeClick
 }) {
   const [editedData, setEditedData] = React.useState(jsonData);
   const [hasChanges, setHasChanges] = React.useState(false);
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [modalData, setModalData] = React.useState(null);
-  const [showJsonIcons, setShowJsonIcons] = React.useState(true);
-  const [activeFormat, setActiveFormat] = React.useState("Show JSON");
+  const [viewMode, setViewMode] = React.useState('read');
   const [accuracyMetrics$1, setAccuracyMetrics] = React.useState({
     totalChanges: 0,
     totalCharactersEdited: 0,
@@ -167,6 +265,9 @@ function HtmlViewer({
     blockTypeStats: {}
   });
   const [isAnalyticsOpen, setIsAnalyticsOpen] = React.useState(false);
+  const [isTagModalOpen, setIsTagModalOpen] = React.useState(false);
+  const [selectedTag, setSelectedTag] = React.useState(null);
+  const [showSemanticTags, setShowSemanticTags] = React.useState(true);
   React.useEffect(() => {
     // Reset state when jsonData changes
     // console.log("HtmlViewer received new jsonData");
@@ -185,6 +286,10 @@ function HtmlViewer({
     setModalData(node);
     setIsModalOpen(true);
   };
+  const handleSemanticTagClick = tag => {
+    setSelectedTag(tag);
+    setIsTagModalOpen(true);
+  };
   const updateAccuracyMetrics = React.useCallback((nodeId, blockType, originalContent, newContent) => {
     const differences = accuracyMetrics.calculateDifferences(originalContent, newContent);
     const change = {
@@ -268,10 +373,7 @@ function HtmlViewer({
   };
   // Function to get the appropriate HTML content based on settings
   const 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 || '');
+    return cleanHtml(node.html || "");
   };
   const mergedTablesMap = React.useMemo(() => {
     const map = new Map();
@@ -413,10 +515,13 @@ function HtmlViewer({
     const hasChildren = node.children && node.children.length > 0;
     const isTable = ((_a = node.block_type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "table";
     const isTableOfContents = node.block_type === "TableOfContents";
-    const isText = node.block_type === "Text";
-    const isHandwritten = node.block_type === "Handwriting";
-    const isSectionHeader = node.block_type === "SectionHeader";
+    node.block_type === "Text";
+    node.block_type === "Handwriting";
+    node.block_type === "SectionHeader";
     const isPage = node.block_type === "Page";
+    const isFigure = node.block_type === "Figure" || node.block_type === "Picture";
+    const isPageHeader = node.block_type === "PageHeader";
+    const isPageFooter = node.block_type === "PageFooter";
     // Get the appropriate HTML content
     const htmlContent = getHtmlContent(node);
     const isHeading = htmlContent && (htmlContent.startsWith("<h1") || htmlContent.startsWith("<h2") || htmlContent.startsWith("<h3") || htmlContent.startsWith("<h4"));
@@ -437,46 +542,64 @@ function HtmlViewer({
         onNodeClick(node.id);
       }
     };
-    return jsxRuntime.jsxs("div", {
+    return jsxRuntime.jsx("div", {
       id: node.id,
-      className: `p-2 my-1 rounded transition-colors relative group max-w-full overflow-hidden ${isSelected ? "bg-blue-100 border-2 border-blue-500" : ""} ${onNodeClick && !isPage ? "cursor-pointer hover:bg-gray-50" : ""}`,
+      className: `px-1 py-0.5 rounded transition-colors relative group max-w-full overflow-hidden ${isSelected ? "bg-blue-100 border-2 border-blue-500" : ""} ${onNodeClick && !isPage ? "cursor-pointer hover:bg-gray-50" : ""}`,
       onClick: isPage ? undefined : handleContentClick,
-      children: [!isPage && showJsonIcons && jsxRuntime.jsx("button", {
-        onClick: e => {
-          e.stopPropagation(); // Prevent triggering parent onClick
-          handleJsonClick(node);
-        },
-        className: `absolute right-2 top-2 z-10 ${showJsonIcons ? "opacity-0 group-hover:opacity-100 transition-opacity" : "hidden"} text-gray-500 hover:text-gray-700`,
-        title: "View JSON",
-        children: jsxRuntime.jsx(VscJsonIcon, {
-          size: 18
-        })
-      }), isTable || isTableOfContents ? jsxRuntime.jsx(Table.default, {
+      children: isTable || isTableOfContents ? jsxRuntime.jsx(Table.default, {
         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 ? jsxRuntime.jsx(EditableContent.default, {
-        id: node.id,
-        content: htmlContent,
-        onContentChange: handleContentChange,
-        isHeading: !!isHeading,
-        onNodeClick: onNodeClick && !isPage ? () => onNodeClick(node.id) : undefined
-      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx("div", {
-          className: "prose max-w-none w-full overflow-hidden break-words",
+        showJsonIcons: false,
+        onNodeClick: onNodeClick,
+        isEditMode: viewMode === 'edit',
+        isJsonMode: viewMode === 'json'
+      }) : isFigure && node.images ? jsxRuntime.jsx("div", {
+        className: `my-2 ${viewMode === 'json' ? 'cursor-pointer hover:opacity-80' : ''}`,
+        onClick: viewMode === 'json' ? () => handleJsonClick(node) : undefined,
+        children: Object.entries(node.images).map(([key, imageData]) => jsxRuntime.jsx("img", {
+          src: typeof imageData === 'string' && imageData.startsWith('data:') ? imageData : `data:image/png;base64,${imageData}`,
+          alt: `Figure ${node.id}`,
+          className: "max-w-full h-auto rounded border border-gray-200"
+        }, key))
+      }) : isPageHeader || isPageFooter ? jsxRuntime.jsxs("div", {
+        className: `my-1 px-3 py-1.5 rounded-md border text-xs flex items-center gap-2
+							${isPageHeader ? 'bg-amber-50 border-amber-200 text-amber-800' : 'bg-slate-50 border-slate-200 text-slate-600'}
+							${viewMode === 'json' ? 'cursor-pointer hover:opacity-80' : ''}`,
+        onClick: viewMode === 'json' ? () => handleJsonClick(node) : undefined,
+        children: [jsxRuntime.jsx("span", {
+          className: `font-semibold uppercase tracking-wide ${isPageHeader ? 'text-amber-600' : 'text-slate-500'}`,
+          children: isPageHeader ? '⬆ Header' : '⬇ Footer'
+        }), htmlContent && jsxRuntime.jsx("span", {
+          className: "text-gray-600",
           dangerouslySetInnerHTML: {
             __html: htmlContent
           }
+        }), node.images && Object.entries(node.images).map(([key, imageData]) => jsxRuntime.jsx("img", {
+          src: typeof imageData === 'string' && imageData.startsWith('data:') ? imageData : `data:image/png;base64,${imageData}`,
+          alt: `${isPageHeader ? 'Header' : 'Footer'} image`,
+          className: "h-6 w-auto"
+        }, key))]
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(EditableContent.default, {
+          id: node.id,
+          content: htmlContent,
+          onContentChange: handleContentChange,
+          isHeading: !!isHeading,
+          isEditMode: viewMode === 'edit',
+          isJsonMode: viewMode === 'json',
+          onJsonClick: () => handleJsonClick(node),
+          onNodeClick: onNodeClick && !isPage ? () => onNodeClick(node.id) : undefined,
+          enableSemanticTags: showSemanticTags,
+          onSemanticTagClick: handleSemanticTagClick
         }), hasChildren && jsxRuntime.jsx("div", {
-          className: "ml-4 mt-2 border-l-2 border-gray-200 pl-4 max-w-full overflow-hidden",
+          className: "ml-2 mt-1 border-l border-gray-200 pl-2 max-w-full overflow-hidden",
           children: node.children.map(child => renderHtmlContent(child))
         })]
-      })]
+      })
     }, node.id);
   };
   const getAllNodes = data => {
@@ -494,63 +617,70 @@ function HtmlViewer({
     });
   };
   const allNodes = getAllNodes(editedData);
-  // Update the header section to include both buttons
+  // Update the header section with toggle buttons
   const renderHeader = () => jsxRuntime.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: [jsxRuntime.jsx("div", {
-      className: "flex gap-2",
-      children: hasChanges && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [onSave && jsxRuntime.jsxs("button", {
-          onClick: () => 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: [jsxRuntime.jsx(FaFileDownloadIcon, {
-            size: 18
-          }), "Save"]
+    className: "sticky top-0 z-20 bg-white border-b border-gray-200 p-3 flex justify-between items-center flex-shrink-0",
+    children: [jsxRuntime.jsxs("div", {
+      className: "flex gap-1",
+      children: [jsxRuntime.jsxs("div", {
+        className: "flex bg-gray-100 rounded-lg p-1",
+        children: [jsxRuntime.jsxs("button", {
+          onClick: () => setViewMode(viewMode === 'json' ? 'read' : 'json'),
+          className: `inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${viewMode === 'json' ? "bg-blue-600 text-white shadow-sm" : "text-gray-600 hover:text-gray-900 hover:bg-gray-200"}`,
+          title: "JSON Mode - Click any element to view its JSON",
+          children: [jsxRuntime.jsx(VscJsonIcon, {
+            size: 16
+          }), jsxRuntime.jsx("span", {
+            className: "text-sm font-medium",
+            children: "JSON"
+          })]
         }), jsxRuntime.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: [jsxRuntime.jsx(FaFileDownloadIcon, {
-            size: 18
-          }), "Download"]
+          onClick: () => setViewMode(viewMode === 'edit' ? 'read' : 'edit'),
+          className: `inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${viewMode === 'edit' ? "bg-green-600 text-white shadow-sm" : "text-gray-600 hover:text-gray-900 hover:bg-gray-200"}`,
+          title: "Edit Mode - Click any element to edit it",
+          children: [jsxRuntime.jsx(FaEditIcon, {
+            size: 16
+          }), jsxRuntime.jsx("span", {
+            className: "text-sm font-medium",
+            children: "Edit"
+          })]
         })]
-      })
-    }), jsxRuntime.jsxs("div", {
-      className: "flex gap-2 items-center",
-      children: [jsxRuntime.jsx("button", {
-        onClick: () => 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: jsxRuntime.jsx(FaChartBarIcon, {
-          size: 18
-        })
-      }), jsxRuntime.jsxs("div", {
-        className: "flex bg-gray-100 rounded-lg p-1",
-        children: [jsxRuntime.jsx("button", {
-          onClick: () => {
-            setShowJsonIcons(true);
-            setActiveFormat("Show JSON");
-          },
-          className: `py-1.5 px-3 text-sm font-medium rounded-md transition-colors whitespace-nowrap ${activeFormat === "Show JSON" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
-          children: "Show JSON"
-        }), jsxRuntime.jsx("button", {
-          onClick: () => {
-            setShowJsonIcons(false);
-            setActiveFormat("Hide JSON");
-          },
-          className: `py-1.5 px-3 text-sm font-medium rounded-md transition-colors whitespace-nowrap ${activeFormat === "Hide JSON" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
-          children: "Hide JSON"
+      }), jsxRuntime.jsxs("button", {
+        onClick: () => setShowSemanticTags(!showSemanticTags),
+        className: `inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ml-2 ${showSemanticTags ? "bg-amber-100 text-amber-700 border border-amber-300" : "bg-gray-100 text-gray-500 border border-gray-200"}`,
+        title: showSemanticTags ? "Hide Semantic Tags" : "Show Semantic Tags",
+        children: [jsxRuntime.jsx(FaTagsIcon, {
+          size: 16
+        }), jsxRuntime.jsx("span", {
+          className: "text-sm font-medium",
+          children: "Tags"
+        })]
+      }), hasChanges && jsxRuntime.jsxs("button", {
+        onClick: handleDownload,
+        className: "inline-flex items-center gap-2 px-3 py-1.5 bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ml-2",
+        title: "Download Updated JSON",
+        children: [jsxRuntime.jsx(FaFileDownloadIcon, {
+          size: 16
+        }), jsxRuntime.jsx("span", {
+          className: "text-sm font-medium",
+          children: "Save"
         })]
       })]
+    }), jsxRuntime.jsx("button", {
+      onClick: () => setIsAnalyticsOpen(true),
+      className: "inline-flex items-center gap-1 px-3 py-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md",
+      title: "View Analytics",
+      children: jsxRuntime.jsx(FaChartBarIcon, {
+        size: 16
+      })
     })]
   });
   return jsxRuntime.jsxs("div", {
     className: "w-full h-full max-w-full flex flex-col overflow-hidden",
     children: [renderHeader(), jsxRuntime.jsx("div", {
-      className: "flex-1 overflow-auto min-h-0 max-w-full",
+      className: `flex-1 overflow-auto min-h-0 max-w-full ${viewMode === 'edit' ? 'bg-green-50/50' : viewMode === 'json' ? 'bg-blue-50/50' : ''}`,
       children: jsxRuntime.jsx("div", {
-        className: "p-4 max-w-full",
+        className: "p-2 max-w-full",
         children: allNodes.map(node => jsxRuntime.jsx("div", {
           className: "w-full max-w-full overflow-hidden break-words",
           children: renderHtmlContent(node)
@@ -564,6 +694,10 @@ function HtmlViewer({
       isOpen: isModalOpen,
       onClose: () => setIsModalOpen(false),
       data: modalData
+    }), jsxRuntime.jsx(TagModal, {
+      isOpen: isTagModalOpen,
+      onClose: () => setIsTagModalOpen(false),
+      tag: selectedTag
     })]
   });
 }

package/dist/cjs/MathRenderer.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var katex = require('katex');
+
+/**
+ * Renders LaTeX math expressions in HTML content using KaTeX.
+ * Supports both inline ($...$) and display ($$...$$) math.
+ */
+// Regex patterns for math delimiters
+const DISPLAY_MATH_REGEX = /\$\$([\s\S]*?)\$\$/g;
+const INLINE_MATH_REGEX = /\$([^\$\n]+?)\$/g;
+/**
+ * Render a single LaTeX expression to HTML using KaTeX
+ */
+function renderLatex(latex, displayMode) {
+  try {
+    return katex.renderToString(latex, {
+      displayMode,
+      throwOnError: false,
+      errorColor: "#cc0000",
+      strict: false,
+      trust: true,
+      macros: {
+        "\\leq": "\\le",
+        "\\geq": "\\ge"
+      }
+    });
+  } catch (error) {
+    console.warn("KaTeX render error:", error);
+    // Return the original with error styling
+    return `<span class="katex-error" style="color: #cc0000;">${latex}</span>`;
+  }
+}
+/**
+ * Process HTML content and render all math expressions
+ */
+function renderMathInHtml(html) {
+  if (!html) return "";
+  // First, handle display math ($$...$$)
+  let result = html.replace(DISPLAY_MATH_REGEX, (match, latex) => {
+    return renderLatex(latex.trim(), true);
+  });
+  // Then, handle inline math ($...$)
+  // The $...$ pattern with closing $ is always math, not currency
+  result = result.replace(INLINE_MATH_REGEX, (match, latex) => {
+    return renderLatex(latex.trim(), false);
+  });
+  return result;
+}
+/**
+ * Check if content contains any math expressions
+ */
+function containsMath(html) {
+  if (!html) return false;
+  return DISPLAY_MATH_REGEX.test(html) || INLINE_MATH_REGEX.test(html);
+}
+/**
+ * React component that renders HTML with math expressions
+ */
+function MathContent({
+  html,
+  className = "",
+  as: Component = "span"
+}) {
+  const renderedHtml = React.useMemo(() => renderMathInHtml(html), [html]);
+  return jsxRuntime.jsx(Component, {
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: renderedHtml
+    }
+  });
+}
+/**
+ * Hook to get rendered math HTML
+ */
+function useMathHtml(html) {
+  return React.useMemo(() => renderMathInHtml(html), [html]);
+}
+
+exports.MathContent = MathContent;
+exports.containsMath = containsMath;
+exports.default = MathContent;
+exports.renderMathInHtml = renderMathInHtml;
+exports.useMathHtml = useMathHtml;

package/dist/cjs/PdfDocumentViewer.js

@@ -169,7 +169,7 @@ function PdfDocumentViewer({
                 const currentPath = `${path}/${block.block_type}[${index}](${block.id})`;
                 // Assuming block.polygon is number[][] (array of points)
                 const points = block.polygon;
-                if (points && Array.isArray(points) && points.length >= 2 && block.block_type !== "Page") {
+                if (points && Array.isArray(points) && points.length >= 2 && block.block_type !== "Page" && block.block_type !== "TableCell") {
                   // Calculate bbox from points
                   const x_coords = points.map(p => p[0]);
                   const y_coords = points.map(p => p[1]);