@tfw.in/structura-lib 0.2.0 → 0.2.2

package/dist/esm/MathRenderer.js

@@ -0,0 +1,85 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import katex from 'katex';
+
+/**
+ * Renders LaTeX math expressions in HTML content using KaTeX.
+ * Supports both inline ($...$) and display ($$...$$) math.
+ */
+// Regex patterns for math delimiters
+var DISPLAY_MATH_REGEX = /\$\$([\s\S]*?)\$\$/g;
+var INLINE_MATH_REGEX = /\$([^\$\n]+?)\$/g;
+/**
+ * Render a single LaTeX expression to HTML using KaTeX
+ */
+function renderLatex(latex, displayMode) {
+  try {
+    return katex.renderToString(latex, {
+      displayMode: 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;\">".concat(latex, "</span>");
+  }
+}
+/**
+ * Process HTML content and render all math expressions
+ */
+function renderMathInHtml(html) {
+  if (!html) return "";
+  // First, handle display math ($$...$$)
+  var result = html.replace(DISPLAY_MATH_REGEX, function (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, function (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(_ref) {
+  var html = _ref.html,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? "span" : _ref$as;
+  var renderedHtml = useMemo(function () {
+    return renderMathInHtml(html);
+  }, [html]);
+  return jsx(Component, {
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: renderedHtml
+    }
+  });
+}
+/**
+ * Hook to get rendered math HTML
+ */
+function useMathHtml(html) {
+  return useMemo(function () {
+    return renderMathInHtml(html);
+  }, [html]);
+}
+
+export { MathContent, containsMath, MathContent as default, renderMathInHtml, useMathHtml };

package/dist/esm/PdfDocumentViewer.js

@@ -177,7 +177,7 @@ function PdfDocumentViewer(_ref2) {
                 var currentPath = "".concat(path, "/").concat(block.block_type, "[").concat(index, "](").concat(block.id, ")");
                 // Assuming block.polygon is number[][] (array of points)
                 var 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
                   var x_coords = points.map(function (p) {
                     return p[0];

package/dist/esm/SemanticTagParser.js

@@ -0,0 +1,187 @@
+// Semantic Tag Parser for SOP/Batch Record domain tags
+// Supports: MeasurementTag, HiddenMeasurementTag, ValueTag, DateTimeTag, FileTag, ImageTag
+// Regular expression patterns for tag detection
+// Standard tag: [[value][type:TYPE][attr:value]...]
+// Hidden tag: {[value][type:TYPE][attr:value]...]}
+var STANDARD_TAG_PATTERN = /\[\[([^\]]+)\](\[([^\]]+)\])*\]/g;
+var HIDDEN_TAG_PATTERN = /\{\[([^\]]+)\](\[([^\]]+)\])*\]\}/g;
+// Parse a single tag's attribute string like "[type:MEASUREMENT][uom:mL/min][id:abc-123]"
+function parseTagAttributes(attributeStr) {
+  var attributes = {};
+  var type = 'VALUE'; // Default type
+  // Match all [key:value] pairs
+  var attrPattern = /\[([^:\]]+):([^\]]+)\]/g;
+  var match;
+  while ((match = attrPattern.exec(attributeStr)) !== null) {
+    var key = match[1].toLowerCase();
+    var value = match[2];
+    switch (key) {
+      case 'type':
+        type = value.toUpperCase();
+        break;
+      case 'uom':
+        attributes.uom = value;
+        break;
+      case 'id':
+        attributes.id = value;
+        break;
+      case 'format':
+        attributes.format = value;
+        break;
+      case 'filter':
+        attributes.filter = value;
+        break;
+    }
+  }
+  return {
+    type: type,
+    attributes: attributes
+  };
+}
+// Parse a single tag match
+function parseTag(match, isHidden) {
+  var rawMatch = match[0];
+  var startIndex = match.index;
+  var endIndex = startIndex + rawMatch.length;
+  // Extract the value (first bracket content) and attributes (remaining brackets)
+  var innerContent;
+  if (isHidden) {
+    // Remove {[ and ]} wrapper
+    innerContent = rawMatch.slice(2, -2);
+  } else {
+    // Remove [[ and ]] wrapper (but there might be more brackets for attributes)
+    innerContent = rawMatch.slice(2, -1);
+  }
+  // Split by ][ to get value and attributes
+  var parts = innerContent.split('][');
+  var value = parts[0];
+  var attributeStr = parts.length > 1 ? '[' + parts.slice(1).join('][') + ']' : '';
+  var _parseTagAttributes = parseTagAttributes(attributeStr),
+    type = _parseTagAttributes.type,
+    attributes = _parseTagAttributes.attributes;
+  // Adjust type for hidden tags
+  var finalType = isHidden ? 'HIDDEN_MEASUREMENT' : type;
+  return {
+    type: finalType,
+    value: value,
+    rawMatch: rawMatch,
+    startIndex: startIndex,
+    endIndex: endIndex,
+    attributes: attributes,
+    isHidden: isHidden
+  };
+}
+// Main parsing function
+function parseSemanticTags(text) {
+  var tags = [];
+  // Find all standard tags
+  var match;
+  var standardPattern = new RegExp(STANDARD_TAG_PATTERN.source, 'g');
+  while ((match = standardPattern.exec(text)) !== null) {
+    tags.push(parseTag(match, false));
+  }
+  // Find all hidden tags
+  var hiddenPattern = new RegExp(HIDDEN_TAG_PATTERN.source, 'g');
+  while ((match = hiddenPattern.exec(text)) !== null) {
+    tags.push(parseTag(match, true));
+  }
+  // Sort tags by start index
+  tags.sort(function (a, b) {
+    return a.startIndex - b.startIndex;
+  });
+  // Build segments
+  var segments = [];
+  var currentIndex = 0;
+  for (var _i = 0, _tags = tags; _i < _tags.length; _i++) {
+    var tag = _tags[_i];
+    // Add text before this tag
+    if (tag.startIndex > currentIndex) {
+      segments.push({
+        type: 'text',
+        content: text.slice(currentIndex, tag.startIndex)
+      });
+    }
+    // Add the tag segment (skip hidden tags in output)
+    if (!tag.isHidden) {
+      segments.push({
+        type: 'tag',
+        content: tag.value,
+        tag: tag
+      });
+    }
+    currentIndex = tag.endIndex;
+  }
+  // Add remaining text after last tag
+  if (currentIndex < text.length) {
+    segments.push({
+      type: 'text',
+      content: text.slice(currentIndex)
+    });
+  }
+  return {
+    originalText: text,
+    tags: tags,
+    segments: segments
+  };
+}
+// Check if text contains any semantic tags
+function hasSemanticTags(text) {
+  if (!text) return false;
+  return STANDARD_TAG_PATTERN.test(text) || HIDDEN_TAG_PATTERN.test(text);
+}
+// Get tag type display info (for styling)
+function getTagTypeInfo(type) {
+  switch (type) {
+    case 'MEASUREMENT':
+      return {
+        color: 'text-blue-700',
+        bgColor: 'bg-blue-100 border-blue-300',
+        icon: '📏',
+        label: 'Measurement'
+      };
+    case 'VALUE':
+      return {
+        color: 'text-emerald-700',
+        bgColor: 'bg-emerald-100 border-emerald-300',
+        icon: '📝',
+        label: 'Value'
+      };
+    case 'FILE':
+      return {
+        color: 'text-purple-700',
+        bgColor: 'bg-purple-100 border-purple-300',
+        icon: '📄',
+        label: 'File'
+      };
+    case 'IMAGE':
+      return {
+        color: 'text-pink-700',
+        bgColor: 'bg-pink-100 border-pink-300',
+        icon: '🖼️',
+        label: 'Image'
+      };
+    case 'DATETIME':
+      return {
+        color: 'text-orange-700',
+        bgColor: 'bg-orange-100 border-orange-300',
+        icon: '📅',
+        label: 'DateTime'
+      };
+    case 'HIDDEN_MEASUREMENT':
+      return {
+        color: 'text-gray-500',
+        bgColor: 'bg-gray-100 border-gray-300',
+        icon: '👁️‍🗨️',
+        label: 'Hidden'
+      };
+    default:
+      return {
+        color: 'text-gray-700',
+        bgColor: 'bg-gray-100 border-gray-300',
+        icon: '🏷️',
+        label: 'Tag'
+      };
+  }
+}
+
+export { getTagTypeInfo, hasSemanticTags, parseSemanticTags };

package/dist/esm/SemanticTagRenderer.js

@@ -0,0 +1,140 @@
+import { slicedToArray as _slicedToArray } from './_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { hasSemanticTags, parseSemanticTags, getTagTypeInfo } from './SemanticTagParser.js';
+
+// Individual tag badge component
+function TagBadge(_ref) {
+  var tag = _ref.tag,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
+    onClick = _ref.onClick;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var typeInfo = getTagTypeInfo(tag.type);
+  return jsxs("span", {
+    className: "relative inline-flex items-center gap-1 px-1.5 py-0.5 mx-0.5 rounded border text-xs font-medium cursor-default transition-all\n        ".concat(typeInfo.bgColor, " ").concat(typeInfo.color, "\n        ").concat(onClick ? 'cursor-pointer hover:shadow-md' : '', "\n        ").concat(isHovered ? 'ring-2 ring-offset-1 ring-blue-400' : ''),
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
+    onClick: onClick,
+    children: [jsx("span", {
+      className: "text-[10px]",
+      children: typeInfo.icon
+    }), jsx("span", {
+      children: tag.value
+    }), tag.attributes.uom && jsx("span", {
+      className: "text-[10px] opacity-75 ml-0.5",
+      children: tag.attributes.uom
+    }), showTooltip && isHovered && jsx("div", {
+      className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 pointer-events-none",
+      children: jsxs("div", {
+        className: "bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-lg whitespace-nowrap",
+        children: [jsxs("div", {
+          className: "font-semibold mb-1",
+          children: [typeInfo.label, " Tag"]
+        }), jsxs("div", {
+          className: "space-y-0.5 text-gray-300",
+          children: [jsxs("div", {
+            children: ["Value: ", jsx("span", {
+              className: "text-white",
+              children: tag.value
+            })]
+          }), tag.attributes.uom && jsxs("div", {
+            children: ["Unit: ", jsx("span", {
+              className: "text-white",
+              children: tag.attributes.uom
+            })]
+          }), tag.attributes.id && jsxs("div", {
+            className: "text-[10px] text-gray-400 truncate max-w-[200px]",
+            children: ["ID: ", tag.attributes.id]
+          }), tag.attributes.format && jsxs("div", {
+            children: ["Format: ", jsx("span", {
+              className: "text-white",
+              children: tag.attributes.format
+            })]
+          })]
+        }), jsx("div", {
+          className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px",
+          children: jsx("div", {
+            className: "border-4 border-transparent border-t-gray-900"
+          })
+        })]
+      })
+    })]
+  });
+}
+// Main renderer component
+function SemanticTagRenderer(_ref2) {
+  var content = _ref2.content,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    _ref2$showTooltips = _ref2.showTooltips,
+    showTooltips = _ref2$showTooltips === void 0 ? true : _ref2$showTooltips,
+    onTagClick = _ref2.onTagClick;
+  // If no semantic tags, just return the content as-is
+  if (!hasSemanticTags(content)) {
+    return jsx("span", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    });
+  }
+  var parsed = parseSemanticTags(content);
+  return jsx("span", {
+    className: className,
+    children: parsed.segments.map(function (segment, index) {
+      if (segment.type === 'text') {
+        // Render plain text (may contain HTML)
+        return jsx("span", {
+          dangerouslySetInnerHTML: {
+            __html: segment.content
+          }
+        }, index);
+      } else if (segment.type === 'tag' && segment.tag) {
+        // Render semantic tag badge
+        return jsx(TagBadge, {
+          tag: segment.tag,
+          showTooltip: showTooltips,
+          onClick: onTagClick ? function () {
+            return onTagClick(segment.tag);
+          } : undefined
+        }, index);
+      }
+      return null;
+    })
+  });
+}
+function SmartContent(_ref3) {
+  var content = _ref3.content,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? '' : _ref3$className,
+    _ref3$enableSemanticT = _ref3.enableSemanticTags,
+    enableSemanticTags = _ref3$enableSemanticT === void 0 ? true : _ref3$enableSemanticT,
+    _ref3$showTooltips = _ref3.showTooltips,
+    showTooltips = _ref3$showTooltips === void 0 ? true : _ref3$showTooltips,
+    onTagClick = _ref3.onTagClick;
+  if (enableSemanticTags && hasSemanticTags(content)) {
+    return jsx(SemanticTagRenderer, {
+      content: content,
+      className: className,
+      showTooltips: showTooltips,
+      onTagClick: onTagClick
+    });
+  }
+  // Regular content without semantic tags
+  return jsx("span", {
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  });
+}
+
+export { SmartContent, SemanticTagRenderer as default };

package/dist/esm/Structura.js

@@ -2,14 +2,13 @@ import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator,
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { Button } from './ui/button.js';
-import { Card, CardHeader, CardTitle, CardContent } from './ui/card.js';
+import { Card, CardContent } from './ui/card.js';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs.js';
 import * as LucideIcons from 'lucide-react';
 import PdfDocumentViewer from './PdfDocumentViewer.js';
 import HtmlViewer from './HtmlViewer.js';
 import { preprocessData } from './helpers/preprocessData.js';
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
-import { Badge } from './ui/badge.js';
 import { Progress } from './ui/progress.js';
 import { ScrollArea } from './ui/scroll-area.js';
 import { GET, POST } from './route.js';
@@ -17,15 +16,24 @@ import { GET, POST } from './route.js';
 // Remove component aliases and use direct imports
 // This will preserve the propser types
 function Structura(_ref) {
-  var initialPdfPath = _ref.initialPdfPath,
+  var apiKey = _ref.apiKey,
+    baseUrl = _ref.baseUrl,
+    initialPdfPath = _ref.initialPdfPath,
     initialJsonData = _ref.initialJsonData,
-    props = _ref.props;
-  // Log the API key (for development only - remove in production)
-  // useEffect(() => {
-  //     if (props?.APIKey) {
-  //         console.log("API Key provided:", props.APIKey);
-  //     }
-  // }, [props]);
+    _ref$editMode = _ref.editMode,
+    editMode = _ref$editMode === void 0 ? true : _ref$editMode,
+    _ref$jsonMode = _ref.jsonMode,
+    jsonMode = _ref$jsonMode === void 0 ? true : _ref$jsonMode,
+    _ref$mathRendering = _ref.mathRendering,
+    mathRendering = _ref$mathRendering === void 0 ? true : _ref$mathRendering,
+    _ref$semanticTags = _ref.semanticTags,
+    semanticTags = _ref$semanticTags === void 0 ? true : _ref$semanticTags,
+    _ref$headerFooterBadg = _ref.headerFooterBadges,
+    headerFooterBadges = _ref$headerFooterBadg === void 0 ? true : _ref$headerFooterBadg,
+    _ref$defaultViewMode = _ref.defaultViewMode,
+    defaultViewMode = _ref$defaultViewMode === void 0 ? 'read' : _ref$defaultViewMode,
+    onContentChange = _ref.onContentChange,
+    onExport = _ref.onExport;
   // Log the imported SDK items to demonstrate usage
   // console.log("Imported BlockSchema from SDK:", BlockSchema);
   var _useState = useState(null),
@@ -48,7 +56,7 @@ function Structura(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     fileUrl = _useState0[0],
     setFileUrl = _useState0[1];
-  var _useState1 = useState(null),
+  var _useState1 = useState(initialJsonData || null),
     _useState10 = _slicedToArray(_useState1, 2),
     jsonData = _useState10[0],
     setJsonData = _useState10[1];
@@ -93,20 +101,18 @@ function Structura(_ref) {
     _useState30 = _slicedToArray(_useState29, 2),
     isDraggingOver = _useState30[0],
     setIsDraggingOver = _useState30[1]; //NOSONAR
-  // Load initial JSON data if provided (for faster iteration without API calls)
+  // Sync initialJsonData prop with state when it changes
   useEffect(function () {
-    var _a;
     if (initialJsonData) {
-      console.log('[Structura] Loading initial JSON data from props');
       setJsonData(initialJsonData);
-      var pageCount = ((_a = initialJsonData.children) === null || _a === void 0 ? void 0 : _a.length) || 0;
-      setAllowedPages(Array.from({
-        length: pageCount
-      }, function (_, i) {
-        return i + 1;
-      }));
     }
   }, [initialJsonData]);
+  // Sync initialPdfPath prop with state when it changes
+  useEffect(function () {
+    if (initialPdfPath) {
+      setFileUrl(initialPdfPath);
+    }
+  }, [initialPdfPath]);
   useEffect(function () {
     var handleDragOver = function handleDragOver(e) {
       e.preventDefault();
@@ -350,12 +356,10 @@ function Structura(_ref) {
   // Add logging to the useEffect that watches isFileLoaded
   useEffect(function () {
     // console.log("!!! [Structura] isFileLoaded changed:", isFileLoaded);
-    // Skip API call if we already have initialJsonData (cached mode)
+    // Skip auto-generation if we already have JSON data from props
     if (isFileLoaded && !initialJsonData) {
       // console.log("!!! [Structura] Calling handleGenerateJSON due to isFileLoaded");
       handleGenerateJSON();
-    } else if (isFileLoaded && initialJsonData) {
-      console.log('[Structura] Skipping API call - using cached JSON data');
     }
   }, [isFileLoaded, initialJsonData]);
   // Handle removing the PDF and resetting state
@@ -391,7 +395,7 @@ function Structura(_ref) {
             formData = new FormData();
             formData.append("file", file);
             // console.log("!!! [Structura] FormData:", formData);
-            if (props === null || props === void 0 ? void 0 : props.APIKey) {
+            if (apiKey) {
               _context2.n = 3;
               break;
             }
@@ -399,8 +403,8 @@ function Structura(_ref) {
           case 3:
             _context2.n = 4;
             return POST(formData, {
-              apiKey: props.APIKey,
-              baseUrl: props.baseUrl
+              apiKey: apiKey,
+              baseUrl: baseUrl
             });
           case 4:
             submitResponse = _context2.v;
@@ -431,8 +435,8 @@ function Structura(_ref) {
           case 8:
             _context2.n = 9;
             return GET(requestId, {
-              apiKey: props.APIKey,
-              baseUrl: props.baseUrl
+              apiKey: apiKey,
+              baseUrl: baseUrl
             });
           case 9:
             resultResponse = _context2.v;
@@ -600,28 +604,7 @@ function Structura(_ref) {
   }
   return jsxs("div", {
     className: "h-screen max-h-screen flex flex-col bg-background text-foreground",
-    children: [jsx("header", {
-      className: "border-b border-border bg-card p-4",
-      children: jsxs("div", {
-        className: "container mx-auto flex justify-between items-center",
-        children: [jsxs("div", {
-          className: "flex items-center space-x-2",
-          children: [jsx(LucideIcons.FileText, {
-            className: "h-6 w-6 text-primary"
-          }), jsx("h1", {
-            className: "text-2xl mt-2.5 font-bold",
-            children: "PLAYGROUND"
-          })]
-        }), jsx("div", {
-          className: "flex items-center gap-2",
-          children: jsx(Badge, {
-            variant: "outline",
-            className: "px-3 py-1 text-xs",
-            children: isFileLoaded ? "Document Loaded" : "No Document"
-          })
-        })]
-      })
-    }), jsx("div", {
+    children: [jsx("div", {
       className: "md:hidden",
       children: jsxs(Tabs, {
         value: activeTab,
@@ -753,7 +736,14 @@ function Structura(_ref) {
               selectedBboxId: selectedBboxId,
               isLoading: isLoading,
               onNodeClick: handleHtmlNodeClick,
-              onSave: props.onSave
+              editMode: editMode,
+              jsonMode: jsonMode,
+              mathRendering: mathRendering,
+              semanticTags: semanticTags,
+              headerFooterBadges: headerFooterBadges,
+              defaultViewMode: defaultViewMode,
+              onContentChange: onContentChange,
+              onExport: onExport
             })
           })
         })]
@@ -766,22 +756,10 @@ function Structura(_ref) {
         children: [jsx(Panel, {
           minSize: 20,
           defaultSize: 50,
-          children: jsxs(Card, {
+          children: jsx(Card, {
             className: "h-full border-0 rounded-none",
-            children: [jsx(CardHeader, {
-              className: "py-3 px-4 border-b bg-muted/30",
-              children: jsxs(CardTitle, {
-                className: "text-base flex items-center gap-2",
-                children: [jsx(LucideIcons.FileText, {
-                  className: "h-4 w-4"
-                }), "PDF Document", file && jsx(Badge, {
-                  variant: "secondary",
-                  className: "ml-2",
-                  children: file.name
-                })]
-              })
-            }), jsx(CardContent, {
-              className: "p-0 flex-1 flex flex-col overflow-hidden",
+            children: jsx(CardContent, {
+              className: "p-0 flex-1 flex flex-col overflow-hidden h-full",
               children: jsx(ScrollArea, {
                 className: "w-full h-[calc(100vh-220px)]",
                 children: fileUrl ? jsx(PdfDocumentViewer, {
@@ -876,25 +854,17 @@ function Structura(_ref) {
                   })
                 })
               })
-            })]
+            })
           })
         }), jsx(PanelResizeHandle, {
           className: "w-1.5 bg-black hover:bg-primary/20 transition-colors cursor-col-resize"
         }), jsx(Panel, {
           minSize: 20,
           defaultSize: 50,
-          children: jsxs(Card, {
+          children: jsx(Card, {
             className: "h-full border-0 rounded-none",
-            children: [jsx(CardHeader, {
-              className: "py-3 px-4 border-b bg-muted/30",
-              children: jsxs(CardTitle, {
-                className: "text-base flex items-center gap-2",
-                children: [jsx(LucideIcons.FileText, {
-                  className: "h-4 w-4"
-                }), "HTML Structure"]
-              })
-            }), jsx(CardContent, {
-              className: "p-0 h-[calc(100%-56px)] relative overflow-hidden",
+            children: jsx(CardContent, {
+              className: "p-0 h-full relative overflow-hidden",
               children: jsx("div", {
                 className: "absolute inset-0",
                 children: jsonData ? jsx(HtmlViewer, {
@@ -902,7 +872,14 @@ function Structura(_ref) {
                   selectedBboxId: selectedBboxId,
                   isLoading: isLoading,
                   onNodeClick: handleHtmlNodeClick,
-                  onSave: props.onSave
+                  editMode: editMode,
+                  jsonMode: jsonMode,
+                  mathRendering: mathRendering,
+                  semanticTags: semanticTags,
+                  headerFooterBadges: headerFooterBadges,
+                  defaultViewMode: defaultViewMode,
+                  onContentChange: onContentChange,
+                  onExport: onExport
                 }) : jsx("div", {
                   className: "flex flex-col items-center justify-center h-full p-8 text-center",
                   children: jsxs("div", {
@@ -919,7 +896,7 @@ function Structura(_ref) {
                   })
                 })
               })
-            })]
+            })
           })
         })]
       })