@tfw.in/structura-lib 0.2.0 → 0.2.2

package/dist/esm/EditableContent.js

@@ -1,6 +1,9 @@
 import { slicedToArray as _slicedToArray } from './_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import SemanticTagRenderer from './SemanticTagRenderer.js';
+import { hasSemanticTags } from './SemanticTagParser.js';
+import { renderMathInHtml } from './MathRenderer.js';
 
 // Helper function to extract text content while preserving structure
 var extractTextPreservingStructure = function extractTextPreservingStructure(html) {
@@ -23,7 +26,17 @@ function EditableContent(_ref) {
     onContentChange = _ref.onContentChange,
     _ref$isHeading = _ref.isHeading,
     isHeading = _ref$isHeading === void 0 ? false : _ref$isHeading,
-    onNodeClick = _ref.onNodeClick;
+    _ref$isEditMode = _ref.isEditMode,
+    isEditMode = _ref$isEditMode === void 0 ? false : _ref$isEditMode,
+    _ref$isJsonMode = _ref.isJsonMode,
+    isJsonMode = _ref$isJsonMode === void 0 ? false : _ref$isJsonMode,
+    onNodeClick = _ref.onNodeClick,
+    onJsonClick = _ref.onJsonClick,
+    _ref$enableSemanticTa = _ref.enableSemanticTags,
+    enableSemanticTags = _ref$enableSemanticTa === void 0 ? true : _ref$enableSemanticTa,
+    onSemanticTagClick = _ref.onSemanticTagClick,
+    _ref$enableMathRender = _ref.enableMathRendering,
+    enableMathRendering = _ref$enableMathRender === void 0 ? true : _ref$enableMathRender;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isEditing = _useState2[0],
@@ -64,24 +77,22 @@ function EditableContent(_ref) {
   var getHeadingStyles = function getHeadingStyles(level) {
     switch (level) {
       case 1:
-        return "text-2xl font-bold";
-      case 2:
         return "text-xl font-bold";
-      case 3:
+      case 2:
         return "text-lg font-bold";
-      case 4:
+      case 3:
         return "text-base font-bold";
-      case 5:
+      case 4:
         return "text-sm font-bold";
-      case 6:
+      case 5:
         return "text-xs font-bold";
+      case 6:
+        return "text-xs font-semibold";
       default:
-        return "text-base";
+        return "text-sm";
     }
   };
-  var handleDoubleClick = function handleDoubleClick(e) {
-    // Stop propagation to prevent parent click handlers from firing
-    e.stopPropagation();
+  var startEditing = function startEditing() {
     if (onContentChange) {
       // Extract text content for textarea while preserving structure
       setTextAreaContent(extractTextPreservingStructure(editedContent));
@@ -120,6 +131,18 @@ function EditableContent(_ref) {
       e.stopPropagation();
       return;
     }
+    // In JSON mode, show JSON on click
+    if (isJsonMode && onJsonClick) {
+      e.stopPropagation();
+      onJsonClick();
+      return;
+    }
+    // In edit mode, single click activates editing
+    if (isEditMode && onContentChange) {
+      e.stopPropagation();
+      startEditing();
+      return;
+    }
     // If there's an onNodeClick handler, call it
     if (onNodeClick) {
       e.stopPropagation(); // Prevent click from reaching parent containers
@@ -133,27 +156,36 @@ function EditableContent(_ref) {
       handleBlur();
     }
   };
+  // Render math expressions in content (conditionally)
+  var renderedContent = useMemo(function () {
+    return enableMathRendering ? renderMathInHtml(editedContent) : editedContent;
+  }, [editedContent, enableMathRendering]);
   return jsx("div", {
-    className: "w-full ".concat(isEdited ? "bg-yellow-100" : "", " ").concat(onNodeClick && !isEditing ? "cursor-pointer" : ""),
+    className: "w-full ".concat(isEdited ? "bg-yellow-100" : "", " ").concat(isJsonMode ? "cursor-pointer hover:bg-purple-50 border border-transparent hover:border-purple-300 rounded" : "", " ").concat(isEditMode && !isEditing ? "cursor-pointer hover:bg-blue-50 border border-transparent hover:border-blue-300 rounded" : "", " ").concat(onNodeClick && !isEditing && !isEditMode && !isJsonMode ? "cursor-pointer" : ""),
     onClick: handleClick,
-    onDoubleClick: handleDoubleClick,
     children: isEditing ? jsx("textarea", {
       value: textAreaContent,
       onChange: handleChange,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       autoFocus: true,
-      className: "w-full p-1 border border-blue-400 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900",
+      className: "w-full p-1 border border-blue-400 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
       onClick: function onClick(e) {
         return e.stopPropagation();
       },
       rows: 3
     }) : jsx("div", {
       ref: contentRef,
-      className: "prose max-w-none ".concat(isHeading ? getHeadingStyles(headingLevel) : ""),
-      dangerouslySetInnerHTML: {
-        __html: editedContent
-      }
+      className: "prose prose-sm max-w-none ".concat(isHeading ? getHeadingStyles(headingLevel) : "text-sm"),
+      children: enableSemanticTags && hasSemanticTags(editedContent) ? jsx(SemanticTagRenderer, {
+        content: editedContent,
+        showTooltips: true,
+        onTagClick: onSemanticTagClick
+      }) : jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: renderedContent
+        }
+      })
     })
   });
 }

package/dist/esm/HtmlViewer.js

@@ -2,10 +2,11 @@ import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defin
 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 { FaEdit, FaTags, 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';
+import { getTagTypeInfo } from './SemanticTagParser.js';
 
 // Utility function to clean HTML content
 var cleanHtml = function cleanHtml(html) {
@@ -140,16 +141,127 @@ function AnalyticsModal(_ref2) {
     })
   });
 }
+function TagModal(_ref5) {
+  var isOpen = _ref5.isOpen,
+    onClose = _ref5.onClose,
+    tag = _ref5.tag;
+  if (!isOpen || !tag) return null;
+  var typeInfo = getTagTypeInfo(tag.type);
+  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-md w-full shadow-xl",
+      children: [jsxs("div", {
+        className: "flex justify-between items-center mb-4",
+        children: [jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [jsx("span", {
+            className: "text-2xl",
+            children: typeInfo.icon
+          }), jsxs("h3", {
+            className: "text-lg font-semibold",
+            children: [typeInfo.label, " Tag"]
+          })]
+        }), jsx("button", {
+          onClick: onClose,
+          className: "text-gray-500 hover:text-gray-700",
+          children: "\u2715"
+        })]
+      }), jsx("div", {
+        className: "p-4 rounded-lg border ".concat(typeInfo.bgColor, " mb-4"),
+        children: jsxs("div", {
+          className: "text-2xl font-bold ".concat(typeInfo.color),
+          children: [tag.value, tag.attributes.uom && jsx("span", {
+            className: "text-lg ml-2 opacity-75",
+            children: tag.attributes.uom
+          })]
+        })
+      }), jsxs("div", {
+        className: "space-y-3",
+        children: [jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600",
+            children: "Type"
+          }), jsx("span", {
+            className: "font-medium ".concat(typeInfo.color),
+            children: tag.type
+          })]
+        }), tag.attributes.uom && jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600",
+            children: "Unit of Measure"
+          }), jsx("span", {
+            className: "font-medium",
+            children: tag.attributes.uom
+          })]
+        }), tag.attributes.id && jsxs("div", {
+          className: "py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600 block mb-1",
+            children: "Tag ID"
+          }), jsx("code", {
+            className: "text-xs bg-gray-100 p-2 rounded block break-all",
+            children: tag.attributes.id
+          })]
+        }), tag.attributes.format && jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600",
+            children: "Format"
+          }), jsx("span", {
+            className: "font-mono text-sm",
+            children: tag.attributes.format
+          })]
+        }), tag.attributes.filter && jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600",
+            children: "File Filter"
+          }), jsx("span", {
+            className: "font-mono text-sm",
+            children: tag.attributes.filter
+          })]
+        }), jsxs("div", {
+          className: "py-2",
+          children: [jsx("span", {
+            className: "text-gray-600 block mb-1",
+            children: "Raw Tag"
+          }), 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
 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 FaEditIcon = FaEdit;
+var FaTagsIcon = FaTags;
+function HtmlViewer(_ref6) {
+  var jsonData = _ref6.jsonData,
+    selectedBboxId = _ref6.selectedBboxId,
+    isLoading = _ref6.isLoading,
+    onNodeClick = _ref6.onNodeClick,
+    _ref6$editMode = _ref6.editMode,
+    enableEditMode = _ref6$editMode === void 0 ? true : _ref6$editMode,
+    _ref6$jsonMode = _ref6.jsonMode,
+    enableJsonMode = _ref6$jsonMode === void 0 ? true : _ref6$jsonMode,
+    _ref6$mathRendering = _ref6.mathRendering,
+    enableMathRendering = _ref6$mathRendering === void 0 ? true : _ref6$mathRendering,
+    _ref6$semanticTags = _ref6.semanticTags,
+    enableSemanticTags = _ref6$semanticTags === void 0 ? true : _ref6$semanticTags,
+    _ref6$headerFooterBad = _ref6.headerFooterBadges,
+    enableHeaderFooterBadges = _ref6$headerFooterBad === void 0 ? true : _ref6$headerFooterBad,
+    _ref6$defaultViewMode = _ref6.defaultViewMode,
+    defaultViewMode = _ref6$defaultViewMode === void 0 ? 'read' : _ref6$defaultViewMode,
+    onContentChangeCallback = _ref6.onContentChange,
+    onExportCallback = _ref6.onExport;
   var _useState = useState(jsonData),
     _useState2 = _slicedToArray(_useState, 2),
     editedData = _useState2[0],
@@ -166,15 +278,11 @@ function HtmlViewer(_ref5) {
     _useState8 = _slicedToArray(_useState7, 2),
     modalData = _useState8[0],
     setModalData = _useState8[1];
-  var _useState9 = useState(true),
+  var _useState9 = useState(defaultViewMode),
     _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({
+    viewMode = _useState0[0],
+    setViewMode = _useState0[1];
+  var _useState1 = useState({
       totalChanges: 0,
       totalCharactersEdited: 0,
       totalWordsEdited: 0,
@@ -182,13 +290,25 @@ function HtmlViewer(_ref5) {
       changeHistory: [],
       blockTypeStats: {}
     }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    accuracyMetrics = _useState10[0],
+    setAccuracyMetrics = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    accuracyMetrics = _useState12[0],
-    setAccuracyMetrics = _useState12[1];
+    isAnalyticsOpen = _useState12[0],
+    setIsAnalyticsOpen = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    isAnalyticsOpen = _useState14[0],
-    setIsAnalyticsOpen = _useState14[1];
+    isTagModalOpen = _useState14[0],
+    setIsTagModalOpen = _useState14[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    selectedTag = _useState16[0],
+    setSelectedTag = _useState16[1];
+  var _useState17 = useState(enableSemanticTags),
+    _useState18 = _slicedToArray(_useState17, 2),
+    showSemanticTags = _useState18[0],
+    setShowSemanticTags = _useState18[1];
   useEffect(function () {
     // Reset state when jsonData changes
     // console.log("HtmlViewer received new jsonData");
@@ -207,6 +327,10 @@ function HtmlViewer(_ref5) {
     setModalData(node);
     setIsModalOpen(true);
   };
+  var handleSemanticTagClick = function handleSemanticTagClick(tag) {
+    setSelectedTag(tag);
+    setIsTagModalOpen(true);
+  };
   var updateAccuracyMetrics = useCallback(function (nodeId, blockType, originalContent, newContent) {
     var differences = calculateDifferences(originalContent, newContent);
     var change = {
@@ -247,12 +371,13 @@ function HtmlViewer(_ref5) {
   }, [jsonData]);
   var handleContentChange = useCallback(function (nodeId, newContent) {
     setHasChanges(true);
+    var originalContent = "";
     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 || "";
+          originalContent = node.html || "";
           var blockType = node.block_type || "unknown";
           // Update accuracy metrics before changing content
           updateAccuracyMetrics(nodeId, blockType, originalContent, newContent);
@@ -278,9 +403,17 @@ function HtmlViewer(_ref5) {
       _updateNode(newData);
       return newData;
     });
-  }, [updateAccuracyMetrics]);
+    // Call external callback if provided
+    if (onContentChangeCallback) {
+      onContentChangeCallback(nodeId, originalContent, newContent);
+    }
+  }, [updateAccuracyMetrics, onContentChangeCallback]);
   var handleDownload = function handleDownload() {
     if (!editedData) return;
+    // Call external callback if provided
+    if (onExportCallback) {
+      onExportCallback(editedData);
+    }
     var jsonString = JSON.stringify(editedData, null, 2);
     var blob = new Blob([jsonString], {
       type: "application/json"
@@ -296,10 +429,7 @@ function HtmlViewer(_ref5) {
   };
   // 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 || '');
+    return cleanHtml(node.html || "");
   };
   var mergedTablesMap = useMemo(function () {
     var map = new Map();
@@ -450,10 +580,13 @@ function HtmlViewer(_ref5) {
     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";
+    node.block_type === "Text";
+    node.block_type === "Handwriting";
+    node.block_type === "SectionHeader";
     var isPage = node.block_type === "Page";
+    var isFigure = node.block_type === "Figure" || node.block_type === "Picture";
+    var isPageHeader = node.block_type === "PageHeader";
+    var isPageFooter = node.block_type === "PageFooter";
     // Get the appropriate HTML content
     var htmlContent = getHtmlContent(node);
     var isHeading = htmlContent && (htmlContent.startsWith("<h1") || htmlContent.startsWith("<h2") || htmlContent.startsWith("<h3") || htmlContent.startsWith("<h4"));
@@ -474,50 +607,84 @@ function HtmlViewer(_ref5) {
         onNodeClick(node.id);
       }
     };
-    return jsxs("div", {
+    return jsx("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" : ""),
+      className: "px-1 py-0.5 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, {
+      children: 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",
+        showJsonIcons: false,
+        onNodeClick: onNodeClick,
+        isEditMode: viewMode === 'edit',
+        isJsonMode: viewMode === 'json',
+        enableMathRendering: enableMathRendering
+      }) : isFigure && node.images ? jsx("div", {
+        className: "my-2 ".concat(viewMode === 'json' ? 'cursor-pointer hover:opacity-80' : ''),
+        onClick: viewMode === 'json' ? function () {
+          return handleJsonClick(node);
+        } : undefined,
+        children: Object.entries(node.images).map(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+            key = _ref8[0],
+            imageData = _ref8[1];
+          return jsx("img", {
+            src: typeof imageData === 'string' && imageData.startsWith('data:') ? imageData : "data:image/png;base64,".concat(imageData),
+            alt: "Figure ".concat(node.id),
+            className: "max-w-full h-auto rounded border border-gray-200"
+          }, key);
+        })
+      }) : (isPageHeader || isPageFooter) && enableHeaderFooterBadges ? jsxs("div", {
+        className: "my-1 px-3 py-1.5 rounded-md border text-xs flex items-center gap-2\n\t\t\t\t\t\t\t".concat(isPageHeader ? 'bg-amber-50 border-amber-200 text-amber-800' : 'bg-slate-50 border-slate-200 text-slate-600', "\n\t\t\t\t\t\t\t").concat(viewMode === 'json' ? 'cursor-pointer hover:opacity-80' : ''),
+        onClick: viewMode === 'json' ? function () {
+          return handleJsonClick(node);
+        } : undefined,
+        children: [jsx("span", {
+          className: "font-semibold uppercase tracking-wide ".concat(isPageHeader ? 'text-amber-600' : 'text-slate-500'),
+          children: isPageHeader ? '⬆ Header' : '⬇ Footer'
+        }), htmlContent && jsx("span", {
+          className: "text-gray-600",
           dangerouslySetInnerHTML: {
             __html: htmlContent
           }
+        }), node.images && Object.entries(node.images).map(function (_ref9) {
+          var _ref0 = _slicedToArray(_ref9, 2),
+            key = _ref0[0],
+            imageData = _ref0[1];
+          return jsx("img", {
+            src: typeof imageData === 'string' && imageData.startsWith('data:') ? imageData : "data:image/png;base64,".concat(imageData),
+            alt: "".concat(isPageHeader ? 'Header' : 'Footer', " image"),
+            className: "h-6 w-auto"
+          }, key);
+        })]
+      }) : jsxs(Fragment, {
+        children: [jsx(EditableContent, {
+          id: node.id,
+          content: htmlContent,
+          onContentChange: handleContentChange,
+          isHeading: !!isHeading,
+          isEditMode: viewMode === 'edit',
+          isJsonMode: viewMode === 'json',
+          onJsonClick: function onJsonClick() {
+            return handleJsonClick(node);
+          },
+          onNodeClick: onNodeClick && !isPage ? function () {
+            return onNodeClick(node.id);
+          } : undefined,
+          enableSemanticTags: showSemanticTags,
+          onSemanticTagClick: handleSemanticTagClick,
+          enableMathRendering: enableMathRendering
         }), hasChildren && 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(function (child) {
             return _renderHtmlContent(child);
           })
         })]
-      })]
+      })
     }, node.id);
   };
   var getAllNodes = function getAllNodes(data) {
@@ -535,69 +702,80 @@ function HtmlViewer(_ref5) {
     });
   };
   var allNodes = getAllNodes(editedData);
-  // Update the header section to include both buttons
+  // Update the header section with toggle 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: "sticky top-0 z-20 bg-white border-b border-gray-200 p-3 flex justify-between items-center flex-shrink-0",
+      children: [jsxs("div", {
+        className: "flex gap-1",
+        children: [(enableJsonMode || enableEditMode) && jsxs("div", {
           className: "flex bg-gray-100 rounded-lg p-1",
-          children: [jsx("button", {
+          children: [enableJsonMode && jsxs("button", {
             onClick: function onClick() {
-              setShowJsonIcons(true);
-              setActiveFormat("Show JSON");
+              return setViewMode(viewMode === 'json' ? 'read' : '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", {
+            className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ".concat(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: [jsx(VscJsonIcon, {
+              size: 16
+            }), jsx("span", {
+              className: "text-sm font-medium",
+              children: "JSON"
+            })]
+          }), enableEditMode && jsxs("button", {
             onClick: function onClick() {
-              setShowJsonIcons(false);
-              setActiveFormat("Hide JSON");
+              return setViewMode(viewMode === 'edit' ? 'read' : 'edit');
             },
-            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"
+            className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ".concat(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: [jsx(FaEditIcon, {
+              size: 16
+            }), jsx("span", {
+              className: "text-sm font-medium",
+              children: "Edit"
+            })]
+          })]
+        }), enableSemanticTags && jsxs("button", {
+          onClick: function onClick() {
+            return setShowSemanticTags(!showSemanticTags);
+          },
+          className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ml-2 ".concat(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: [jsx(FaTagsIcon, {
+            size: 16
+          }), jsx("span", {
+            className: "text-sm font-medium",
+            children: "Tags"
+          })]
+        }), hasChanges && 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: [jsx(FaFileDownloadIcon, {
+            size: 16
+          }), jsx("span", {
+            className: "text-sm font-medium",
+            children: "Save"
           })]
         })]
+      }), jsx("button", {
+        onClick: function onClick() {
+          return 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: jsx(FaChartBarIcon, {
+          size: 16
+        })
       })]
     });
   };
   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",
+      className: "flex-1 overflow-auto min-h-0 max-w-full ".concat(viewMode === 'edit' ? 'bg-green-50/50' : viewMode === 'json' ? 'bg-blue-50/50' : ''),
       children: jsx("div", {
-        className: "p-4 max-w-full",
+        className: "p-2 max-w-full",
         children: allNodes.map(function (node) {
           return jsx("div", {
             className: "w-full max-w-full overflow-hidden break-words",
@@ -617,6 +795,12 @@ function HtmlViewer(_ref5) {
         return setIsModalOpen(false);
       },
       data: modalData
+    }), jsx(TagModal, {
+      isOpen: isTagModalOpen,
+      onClose: function onClose() {
+        return setIsTagModalOpen(false);
+      },
+      tag: selectedTag
     })]
   });
 }