@tfw.in/structura-lib 0.2.0 → 0.2.2

package/dist/cjs/SemanticTagParser.js

@@ -0,0 +1,189 @@
+'use strict';
+
+// 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]...]}
+const STANDARD_TAG_PATTERN = /\[\[([^\]]+)\](\[([^\]]+)\])*\]/g;
+const HIDDEN_TAG_PATTERN = /\{\[([^\]]+)\](\[([^\]]+)\])*\]\}/g;
+// Parse a single tag's attribute string like "[type:MEASUREMENT][uom:mL/min][id:abc-123]"
+function parseTagAttributes(attributeStr) {
+  const attributes = {};
+  let type = 'VALUE'; // Default type
+  // Match all [key:value] pairs
+  const attrPattern = /\[([^:\]]+):([^\]]+)\]/g;
+  let match;
+  while ((match = attrPattern.exec(attributeStr)) !== null) {
+    const key = match[1].toLowerCase();
+    const 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,
+    attributes
+  };
+}
+// Parse a single tag match
+function parseTag(match, isHidden) {
+  const rawMatch = match[0];
+  const startIndex = match.index;
+  const endIndex = startIndex + rawMatch.length;
+  // Extract the value (first bracket content) and attributes (remaining brackets)
+  let 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
+  const parts = innerContent.split('][');
+  const value = parts[0];
+  const attributeStr = parts.length > 1 ? '[' + parts.slice(1).join('][') + ']' : '';
+  const {
+    type,
+    attributes
+  } = parseTagAttributes(attributeStr);
+  // Adjust type for hidden tags
+  const finalType = isHidden ? 'HIDDEN_MEASUREMENT' : type;
+  return {
+    type: finalType,
+    value,
+    rawMatch,
+    startIndex,
+    endIndex,
+    attributes,
+    isHidden
+  };
+}
+// Main parsing function
+function parseSemanticTags(text) {
+  const tags = [];
+  // Find all standard tags
+  let match;
+  const standardPattern = new RegExp(STANDARD_TAG_PATTERN.source, 'g');
+  while ((match = standardPattern.exec(text)) !== null) {
+    tags.push(parseTag(match, false));
+  }
+  // Find all hidden tags
+  const 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((a, b) => a.startIndex - b.startIndex);
+  // Build segments
+  const segments = [];
+  let currentIndex = 0;
+  for (const tag of tags) {
+    // 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
+      });
+    }
+    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,
+    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'
+      };
+  }
+}
+
+exports.getTagTypeInfo = getTagTypeInfo;
+exports.hasSemanticTags = hasSemanticTags;
+exports.parseSemanticTags = parseSemanticTags;

package/dist/cjs/SemanticTagRenderer.js

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var SemanticTagParser = require('./SemanticTagParser.js');
+
+// Individual tag badge component
+function TagBadge({
+  tag,
+  showTooltip = true,
+  onClick
+}) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const typeInfo = SemanticTagParser.getTagTypeInfo(tag.type);
+  return jsxRuntime.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
+        ${typeInfo.bgColor} ${typeInfo.color}
+        ${onClick ? 'cursor-pointer hover:shadow-md' : ''}
+        ${isHovered ? 'ring-2 ring-offset-1 ring-blue-400' : ''}`,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onClick: onClick,
+    children: [jsxRuntime.jsx("span", {
+      className: "text-[10px]",
+      children: typeInfo.icon
+    }), jsxRuntime.jsx("span", {
+      children: tag.value
+    }), tag.attributes.uom && jsxRuntime.jsx("span", {
+      className: "text-[10px] opacity-75 ml-0.5",
+      children: tag.attributes.uom
+    }), showTooltip && isHovered && jsxRuntime.jsx("div", {
+      className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 pointer-events-none",
+      children: jsxRuntime.jsxs("div", {
+        className: "bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-lg whitespace-nowrap",
+        children: [jsxRuntime.jsxs("div", {
+          className: "font-semibold mb-1",
+          children: [typeInfo.label, " Tag"]
+        }), jsxRuntime.jsxs("div", {
+          className: "space-y-0.5 text-gray-300",
+          children: [jsxRuntime.jsxs("div", {
+            children: ["Value: ", jsxRuntime.jsx("span", {
+              className: "text-white",
+              children: tag.value
+            })]
+          }), tag.attributes.uom && jsxRuntime.jsxs("div", {
+            children: ["Unit: ", jsxRuntime.jsx("span", {
+              className: "text-white",
+              children: tag.attributes.uom
+            })]
+          }), tag.attributes.id && jsxRuntime.jsxs("div", {
+            className: "text-[10px] text-gray-400 truncate max-w-[200px]",
+            children: ["ID: ", tag.attributes.id]
+          }), tag.attributes.format && jsxRuntime.jsxs("div", {
+            children: ["Format: ", jsxRuntime.jsx("span", {
+              className: "text-white",
+              children: tag.attributes.format
+            })]
+          })]
+        }), jsxRuntime.jsx("div", {
+          className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px",
+          children: jsxRuntime.jsx("div", {
+            className: "border-4 border-transparent border-t-gray-900"
+          })
+        })]
+      })
+    })]
+  });
+}
+// Main renderer component
+function SemanticTagRenderer({
+  content,
+  className = '',
+  showTooltips = true,
+  onTagClick
+}) {
+  // If no semantic tags, just return the content as-is
+  if (!SemanticTagParser.hasSemanticTags(content)) {
+    return jsxRuntime.jsx("span", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    });
+  }
+  const parsed = SemanticTagParser.parseSemanticTags(content);
+  return jsxRuntime.jsx("span", {
+    className: className,
+    children: parsed.segments.map((segment, index) => {
+      if (segment.type === 'text') {
+        // Render plain text (may contain HTML)
+        return jsxRuntime.jsx("span", {
+          dangerouslySetInnerHTML: {
+            __html: segment.content
+          }
+        }, index);
+      } else if (segment.type === 'tag' && segment.tag) {
+        // Render semantic tag badge
+        return jsxRuntime.jsx(TagBadge, {
+          tag: segment.tag,
+          showTooltip: showTooltips,
+          onClick: onTagClick ? () => onTagClick(segment.tag) : undefined
+        }, index);
+      }
+      return null;
+    })
+  });
+}
+function SmartContent({
+  content,
+  className = '',
+  enableSemanticTags = true,
+  showTooltips = true,
+  onTagClick
+}) {
+  if (enableSemanticTags && SemanticTagParser.hasSemanticTags(content)) {
+    return jsxRuntime.jsx(SemanticTagRenderer, {
+      content: content,
+      className: className,
+      showTooltips: showTooltips,
+      onTagClick: onTagClick
+    });
+  }
+  // Regular content without semantic tags
+  return jsxRuntime.jsx("span", {
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  });
+}
+
+exports.SmartContent = SmartContent;
+exports.default = SemanticTagRenderer;

package/dist/cjs/Structura.js

@@ -12,7 +12,6 @@ var PdfDocumentViewer = require('./PdfDocumentViewer.js');
 var HtmlViewer = require('./HtmlViewer.js');
 var preprocessData = require('./helpers/preprocessData.js');
 var reactResizablePanels = require('react-resizable-panels');
-var badge = require('./ui/badge.js');
 var progress = require('./ui/progress.js');
 var scrollArea = require('./ui/scroll-area.js');
 var route = require('./route.js');
@@ -39,16 +38,19 @@ var LucideIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(LucideIcons);
 // Remove component aliases and use direct imports
 // This will preserve the propser types
 function Structura({
+  apiKey,
+  baseUrl,
   initialPdfPath,
   initialJsonData,
-  props
+  editMode = true,
+  jsonMode = true,
+  mathRendering = true,
+  semanticTags = true,
+  headerFooterBadges = true,
+  defaultViewMode = 'read',
+  onContentChange,
+  onExport
 }) {
-  // Log the API key (for development only - remove in production)
-  // useEffect(() => {
-  //     if (props?.APIKey) {
-  //         console.log("API Key provided:", props.APIKey);
-  //     }
-  // }, [props]);
   // Log the imported SDK items to demonstrate usage
   // console.log("Imported BlockSchema from SDK:", BlockSchema);
   const [numPages, setNumPages] = React.useState(null);
@@ -56,7 +58,7 @@ function Structura({
   const [selectedField, setSelectedField] = React.useState(null);
   const [file, setFile] = React.useState(null);
   const [fileUrl, setFileUrl] = React.useState(initialPdfPath || null);
-  const [jsonData, setJsonData] = React.useState(null);
+  const [jsonData, setJsonData] = React.useState(initialJsonData || null);
   const [allowedPages, setAllowedPages] = React.useState(null);
   const pdfWrapperRef = React.useRef(null);
   const [flattenedFields, setFlattenedFields] = React.useState([]);
@@ -68,18 +70,18 @@ function Structura({
   const [activeTab, setActiveTab] = React.useState("pdf");
   const [backendStatus, setBackendStatus] = React.useState('checking');
   const [isDraggingOver, setIsDraggingOver] = React.useState(false); //NOSONAR
-  // Load initial JSON data if provided (for faster iteration without API calls)
+  // Sync initialJsonData prop with state when it changes
   React.useEffect(() => {
-    var _a;
     if (initialJsonData) {
-      console.log('[Structura] Loading initial JSON data from props');
       setJsonData(initialJsonData);
-      const pageCount = ((_a = initialJsonData.children) === null || _a === void 0 ? void 0 : _a.length) || 0;
-      setAllowedPages(Array.from({
-        length: pageCount
-      }, (_, i) => i + 1));
     }
   }, [initialJsonData]);
+  // Sync initialPdfPath prop with state when it changes
+  React.useEffect(() => {
+    if (initialPdfPath) {
+      setFileUrl(initialPdfPath);
+    }
+  }, [initialPdfPath]);
   React.useEffect(() => {
     const handleDragOver = e => {
       e.preventDefault();
@@ -273,12 +275,10 @@ function Structura({
   // Add logging to the useEffect that watches isFileLoaded
   React.useEffect(() => {
     // 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
@@ -304,12 +304,12 @@ function Structura({
       const formData = new FormData();
       formData.append("file", file);
       // console.log("!!! [Structura] FormData:", formData);
-      if (!(props === null || props === void 0 ? void 0 : props.APIKey)) {
+      if (!apiKey) {
         throw new Error("API key is required but not provided");
       }
       const submitResponse = await route.POST(formData, {
-        apiKey: props.APIKey,
-        baseUrl: props.baseUrl
+        apiKey: apiKey,
+        baseUrl: baseUrl
       });
       console.log("API response status:", submitResponse.status);
       if (submitResponse.status !== 200) {
@@ -330,8 +330,8 @@ function Structura({
       let resultData = null;
       while (true) {
         const resultResponse = await route.GET(requestId, {
-          apiKey: props.APIKey,
-          baseUrl: props.baseUrl
+          apiKey: apiKey,
+          baseUrl: baseUrl
         });
         if (resultResponse.data.status === "completed") {
           // Store the response data
@@ -455,28 +455,7 @@ function Structura({
   }
   return jsxRuntime.jsxs("div", {
     className: "h-screen max-h-screen flex flex-col bg-background text-foreground",
-    children: [jsxRuntime.jsx("header", {
-      className: "border-b border-border bg-card p-4",
-      children: jsxRuntime.jsxs("div", {
-        className: "container mx-auto flex justify-between items-center",
-        children: [jsxRuntime.jsxs("div", {
-          className: "flex items-center space-x-2",
-          children: [jsxRuntime.jsx(LucideIcons__namespace.FileText, {
-            className: "h-6 w-6 text-primary"
-          }), jsxRuntime.jsx("h1", {
-            className: "text-2xl mt-2.5 font-bold",
-            children: "PLAYGROUND"
-          })]
-        }), jsxRuntime.jsx("div", {
-          className: "flex items-center gap-2",
-          children: jsxRuntime.jsx(badge.Badge, {
-            variant: "outline",
-            className: "px-3 py-1 text-xs",
-            children: isFileLoaded ? "Document Loaded" : "No Document"
-          })
-        })]
-      })
-    }), jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: "md:hidden",
       children: jsxRuntime.jsxs(tabs.Tabs, {
         value: activeTab,
@@ -608,7 +587,14 @@ function Structura({
               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
             })
           })
         })]
@@ -621,22 +607,10 @@ function Structura({
         children: [jsxRuntime.jsx(reactResizablePanels.Panel, {
           minSize: 20,
           defaultSize: 50,
-          children: jsxRuntime.jsxs(card.Card, {
+          children: jsxRuntime.jsx(card.Card, {
             className: "h-full border-0 rounded-none",
-            children: [jsxRuntime.jsx(card.CardHeader, {
-              className: "py-3 px-4 border-b bg-muted/30",
-              children: jsxRuntime.jsxs(card.CardTitle, {
-                className: "text-base flex items-center gap-2",
-                children: [jsxRuntime.jsx(LucideIcons__namespace.FileText, {
-                  className: "h-4 w-4"
-                }), "PDF Document", file && jsxRuntime.jsx(badge.Badge, {
-                  variant: "secondary",
-                  className: "ml-2",
-                  children: file.name
-                })]
-              })
-            }), jsxRuntime.jsx(card.CardContent, {
-              className: "p-0 flex-1 flex flex-col overflow-hidden",
+            children: jsxRuntime.jsx(card.CardContent, {
+              className: "p-0 flex-1 flex flex-col overflow-hidden h-full",
               children: jsxRuntime.jsx(scrollArea.ScrollArea, {
                 className: "w-full h-[calc(100vh-220px)]",
                 children: fileUrl ? jsxRuntime.jsx(PdfDocumentViewer.default, {
@@ -731,25 +705,17 @@ function Structura({
                   })
                 })
               })
-            })]
+            })
           })
         }), jsxRuntime.jsx(reactResizablePanels.PanelResizeHandle, {
           className: "w-1.5 bg-black hover:bg-primary/20 transition-colors cursor-col-resize"
         }), jsxRuntime.jsx(reactResizablePanels.Panel, {
           minSize: 20,
           defaultSize: 50,
-          children: jsxRuntime.jsxs(card.Card, {
+          children: jsxRuntime.jsx(card.Card, {
             className: "h-full border-0 rounded-none",
-            children: [jsxRuntime.jsx(card.CardHeader, {
-              className: "py-3 px-4 border-b bg-muted/30",
-              children: jsxRuntime.jsxs(card.CardTitle, {
-                className: "text-base flex items-center gap-2",
-                children: [jsxRuntime.jsx(LucideIcons__namespace.FileText, {
-                  className: "h-4 w-4"
-                }), "HTML Structure"]
-              })
-            }), jsxRuntime.jsx(card.CardContent, {
-              className: "p-0 h-[calc(100%-56px)] relative overflow-hidden",
+            children: jsxRuntime.jsx(card.CardContent, {
+              className: "p-0 h-full relative overflow-hidden",
               children: jsxRuntime.jsx("div", {
                 className: "absolute inset-0",
                 children: jsonData ? jsxRuntime.jsx(HtmlViewer.default, {
@@ -757,7 +723,14 @@ function Structura({
                   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
                 }) : jsxRuntime.jsx("div", {
                   className: "flex flex-col items-center justify-center h-full p-8 text-center",
                   children: jsxRuntime.jsxs("div", {
@@ -774,7 +747,7 @@ function Structura({
                   })
                 })
               })
-            })]
+            })
           })
         })]
       })