@tfw.in/structura-lib 0.2.0

package/dist/esm/Structura.js

@@ -0,0 +1,951 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, createForOfIteratorHelper as _createForOfIteratorHelper } from './_virtual/_rollupPluginBabelHelpers.js';
+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 { 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';
+
+// Remove component aliases and use direct imports
+// This will preserve the propser types
+function Structura(_ref) {
+  var 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]);
+  // Log the imported SDK items to demonstrate usage
+  // console.log("Imported BlockSchema from SDK:", BlockSchema);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    numPages = _useState2[0],
+    setNumPages = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2);
+    _useState4[0];
+    var setPageNumber = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setSelectedField = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    file = _useState8[0],
+    setFile = _useState8[1];
+  var _useState9 = useState(initialPdfPath || null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    fileUrl = _useState0[0],
+    setFileUrl = _useState0[1];
+  var _useState1 = useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    jsonData = _useState10[0],
+    setJsonData = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    allowedPages = _useState12[0],
+    setAllowedPages = _useState12[1];
+  var pdfWrapperRef = useRef(null);
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2);
+    _useState14[0];
+    var setFlattenedFields = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isLoading = _useState16[0],
+    setIsLoading = _useState16[1];
+  var _useState17 = useState(0),
+    _useState18 = _slicedToArray(_useState17, 2),
+    loadingProgress = _useState18[0],
+    setLoadingProgress = _useState18[1];
+  var _useState19 = useState(null),
+    _useState20 = _slicedToArray(_useState19, 2),
+    selectedBboxId = _useState20[0],
+    setSelectedBboxId = _useState20[1];
+  var _useState21 = useState(null),
+    _useState22 = _slicedToArray(_useState21, 2);
+    _useState22[0];
+    var setError = _useState22[1];
+  var _useState23 = useState(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    isFileLoaded = _useState24[0],
+    setIsFileLoaded = _useState24[1];
+  var _useState25 = useState("pdf"),
+    _useState26 = _slicedToArray(_useState25, 2),
+    activeTab = _useState26[0],
+    setActiveTab = _useState26[1];
+  var _useState27 = useState('checking'),
+    _useState28 = _slicedToArray(_useState27, 2);
+    _useState28[0];
+    var setBackendStatus = _useState28[1];
+  var _useState29 = useState(false),
+    _useState30 = _slicedToArray(_useState29, 2),
+    isDraggingOver = _useState30[0],
+    setIsDraggingOver = _useState30[1]; //NOSONAR
+  // Load initial JSON data if provided (for faster iteration without API calls)
+  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]);
+  useEffect(function () {
+    var handleDragOver = function handleDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      // If PDF viewer is visible and no file is loaded, activate drag indicator
+      if (!fileUrl && !isDraggingOver && activeTab === "pdf") {
+        setIsDraggingOver(true);
+      }
+    };
+    var handleDragEnter = function handleDragEnter(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      // If PDF viewer is visible and no file is loaded, activate drag indicator
+      if (!fileUrl && !isDraggingOver && activeTab === "pdf") {
+        setIsDraggingOver(true);
+      }
+    };
+    var handleDragLeave = function handleDragLeave(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      // Only deactivate if we're leaving the document
+      if (e.relatedTarget === null) {
+        setIsDraggingOver(false);
+      }
+    };
+    var handleDrop = function handleDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDraggingOver(false);
+    };
+    // Prevent the browser from automatically opening dropped files
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('drop', handleDrop);
+    return function () {
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('dragenter', handleDragEnter);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('drop', handleDrop);
+    };
+  }, [fileUrl, isDraggingOver, activeTab]);
+  // Add useEffect to handle selected PDF from localStorage
+  useEffect(function () {
+    var handleSelectedPdf = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var selectedPdfStr, selectedPdf, fileDataStr, fileData, byteCharacters, byteNumbers, i, byteArray, blob, pdfFile, newFileUrl, response, _blob, _pdfFile, _fileDataStr, _fileData, _byteCharacters, _byteNumbers, _i, _byteArray, _blob2, _pdfFile2, _newFileUrl, _response, _blob3, _pdfFile3, _t, _t2, _t3;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              selectedPdfStr = localStorage.getItem('selectedPdf');
+              if (!selectedPdfStr) {
+                _context.n = 9;
+                break;
+              }
+              _context.p = 1;
+              selectedPdf = JSON.parse(selectedPdfStr);
+              if (!(selectedPdf.path === 'user-uploaded')) {
+                _context.n = 2;
+                break;
+              }
+              // For user-uploaded files, retrieve from sessionStorage
+              fileDataStr = sessionStorage.getItem('pdfFileData');
+              if (fileDataStr) {
+                try {
+                  // Restore the file from sessionStorage
+                  fileData = JSON.parse(fileDataStr);
+                  byteCharacters = atob(fileData.data);
+                  byteNumbers = new Array(byteCharacters.length);
+                  for (i = 0; i < byteCharacters.length; i++) {
+                    byteNumbers[i] = byteCharacters.charCodeAt(i);
+                  }
+                  byteArray = new Uint8Array(byteNumbers);
+                  blob = new Blob([byteArray], {
+                    type: 'application/pdf'
+                  });
+                  pdfFile = new File([blob], fileData.name, {
+                    type: 'application/pdf'
+                  });
+                  newFileUrl = URL.createObjectURL(blob);
+                  setFile(pdfFile);
+                  setFileUrl(newFileUrl);
+                  setIsFileLoaded(true);
+                } catch (error) {
+                  console.error('Error parsing PDF data from sessionStorage:', error);
+                  setError('Failed to load the PDF file. Please try uploading again.');
+                }
+              } else {
+                setError('PDF data not found. Please upload the file again.');
+              }
+              _context.n = 6;
+              break;
+            case 2:
+              _context.p = 2;
+              _context.n = 3;
+              return fetch(selectedPdf.path);
+            case 3:
+              response = _context.v;
+              _context.n = 4;
+              return response.blob();
+            case 4:
+              _blob = _context.v;
+              _pdfFile = new File([_blob], selectedPdf.name, {
+                type: 'application/pdf'
+              }); // Set the file and URL
+              setFile(_pdfFile);
+              setFileUrl(URL.createObjectURL(_blob));
+              setIsFileLoaded(true);
+              _context.n = 6;
+              break;
+            case 5:
+              _context.p = 5;
+              _t = _context.v;
+              console.error('Error fetching PDF:', _t);
+              setError('Failed to load the PDF file. Please try again.');
+            case 6:
+              // Clear the localStorage
+              localStorage.removeItem('selectedPdf');
+              _context.n = 8;
+              break;
+            case 7:
+              _context.p = 7;
+              _t2 = _context.v;
+              console.error('Error loading selected PDF:', _t2);
+              setError('Failed to load selected PDF');
+              localStorage.removeItem('selectedPdf');
+            case 8:
+              _context.n = 14;
+              break;
+            case 9:
+              if (!initialPdfPath) {
+                _context.n = 14;
+                break;
+              }
+              if (!(initialPdfPath === 'user-uploaded')) {
+                _context.n = 10;
+                break;
+              }
+              // Same logic as above for retrieving from sessionStorage
+              _fileDataStr = sessionStorage.getItem('pdfFileData');
+              if (_fileDataStr) {
+                try {
+                  _fileData = JSON.parse(_fileDataStr);
+                  _byteCharacters = atob(_fileData.data);
+                  _byteNumbers = new Array(_byteCharacters.length);
+                  for (_i = 0; _i < _byteCharacters.length; _i++) {
+                    _byteNumbers[_i] = _byteCharacters.charCodeAt(_i);
+                  }
+                  _byteArray = new Uint8Array(_byteNumbers);
+                  _blob2 = new Blob([_byteArray], {
+                    type: 'application/pdf'
+                  });
+                  _pdfFile2 = new File([_blob2], _fileData.name, {
+                    type: 'application/pdf'
+                  });
+                  _newFileUrl = URL.createObjectURL(_blob2);
+                  setFile(_pdfFile2);
+                  setFileUrl(_newFileUrl);
+                  setIsFileLoaded(true);
+                } catch (error) {
+                  console.error('Error parsing PDF data from sessionStorage:', error);
+                  setError('Failed to load the PDF file. Please try uploading again.');
+                }
+              } else {
+                setError('PDF data not found. Please upload the file again.');
+              }
+              _context.n = 14;
+              break;
+            case 10:
+              _context.p = 10;
+              _context.n = 11;
+              return fetch(initialPdfPath);
+            case 11:
+              _response = _context.v;
+              _context.n = 12;
+              return _response.blob();
+            case 12:
+              _blob3 = _context.v;
+              _pdfFile3 = new File([_blob3], 'document.pdf', {
+                type: 'application/pdf'
+              });
+              setFile(_pdfFile3);
+              setFileUrl(URL.createObjectURL(_blob3));
+              setIsFileLoaded(true);
+              _context.n = 14;
+              break;
+            case 13:
+              _context.p = 13;
+              _t3 = _context.v;
+              console.error('Error fetching PDF:', _t3);
+              setError("Failed to load the PDF file from ".concat(initialPdfPath, ". Please try again."));
+            case 14:
+              return _context.a(2);
+          }
+        }, _callee, null, [[10, 13], [2, 5], [1, 7]]);
+      }));
+      return function handleSelectedPdf() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    handleSelectedPdf();
+  }, [initialPdfPath]);
+  // Simulate loading progress
+  useEffect(function () {
+    if (isLoading) {
+      var interval = setInterval(function () {
+        setLoadingProgress(function (prev) {
+          var newProgress = prev + 10;
+          if (newProgress >= 100) {
+            clearInterval(interval);
+            return 100;
+          }
+          return newProgress;
+        });
+      }, 300);
+      return function () {
+        return clearInterval(interval);
+      };
+    } else {
+      setLoadingProgress(0);
+    }
+  }, [isLoading]);
+  // Add logging to handleFileUpload
+  var handleFileUpload = function handleFileUpload(uploadedFile) {
+    // console.log("!!! [Structura] handleFileUpload called with file:", uploadedFile.name);
+    // console.log("!!! [Structura] File details:", {
+    //     name: uploadedFile.name,
+    //     type: uploadedFile.type,
+    //     size: uploadedFile.size
+    // });
+    setFile(uploadedFile);
+    setFileUrl(URL.createObjectURL(uploadedFile));
+    setJsonData(null);
+    setAllowedPages(null);
+    setSelectedBboxId(null);
+    setIsFileLoaded(false);
+    setError(null);
+    setActiveTab("pdf");
+    // console.log("!!! [Structura] File upload state updated");
+  };
+  // 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)
+    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
+  var handleRemovePDF = function handleRemovePDF() {
+    setFile(null);
+    setFileUrl(null);
+    setJsonData(null);
+    setAllowedPages(null);
+    setSelectedBboxId(null);
+    setIsFileLoaded(false);
+    setNumPages(null);
+    setPageNumber(1);
+    setSelectedField(null);
+    setFlattenedFields([]);
+    setError(null);
+  };
+  var handleGenerateJSON = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+      var formData, submitResponse, errorData, requestId, resultData, resultResponse, processedData, errorMessage, _t4;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.n) {
+          case 0:
+            if (!(!isFileLoaded || !file)) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2);
+          case 1:
+            setIsLoading(true);
+            setLoadingProgress(0);
+            _context2.p = 2;
+            // Send the PDF file as FormData to the API route
+            formData = new FormData();
+            formData.append("file", file);
+            // console.log("!!! [Structura] FormData:", formData);
+            if (props === null || props === void 0 ? void 0 : props.APIKey) {
+              _context2.n = 3;
+              break;
+            }
+            throw new Error("API key is required but not provided");
+          case 3:
+            _context2.n = 4;
+            return POST(formData, {
+              apiKey: props.APIKey,
+              baseUrl: props.baseUrl
+            });
+          case 4:
+            submitResponse = _context2.v;
+            console.log("API response status:", submitResponse.status);
+            if (!(submitResponse.status !== 200)) {
+              _context2.n = 7;
+              break;
+            }
+            errorData = submitResponse;
+            console.error("Submission error details:", errorData);
+            if (!(submitResponse.status === 503)) {
+              _context2.n = 5;
+              break;
+            }
+            throw new Error("Backend connection error: ".concat(errorData.details || "Could not connect to backend service"));
+          case 5:
+            if (!(submitResponse.status === 401)) {
+              _context2.n = 6;
+              break;
+            }
+            throw new Error("Authentication error: Invalid API key. Please check your API key.");
+          case 6:
+            throw new Error("Failed to submit PDF: ".concat(errorData.error || "Unknown error"));
+          case 7:
+            setLoadingProgress(50);
+            requestId = submitResponse.data.request_id; // Poll for result every 2 seconds
+            resultData = null;
+          case 8:
+            _context2.n = 9;
+            return GET(requestId, {
+              apiKey: props.APIKey,
+              baseUrl: props.baseUrl
+            });
+          case 9:
+            resultResponse = _context2.v;
+            if (!(resultResponse.data.status === "completed")) {
+              _context2.n = 10;
+              break;
+            }
+            // Store the response data
+            resultData = resultResponse.data;
+            // console.log("!!! [Structura] ResultData:", resultData.result);
+            return _context2.a(3, 12);
+          case 10:
+            // if (pollCount > 60) { // Timeout after 2 minutes
+            //     throw new Error("Polling timed out. Please try again later.");
+            // }
+            _context2.n = 11;
+            return new Promise(function (res) {
+              return setTimeout(res, 2000);
+            });
+          case 11:
+            _context2.n = 8;
+            break;
+          case 12:
+            // Now validate the data format after polling is complete
+            // if (resultData) {
+            //     // Zod validation
+            //     const parseResult = DocumentOutputSchema.safeParse(resultData);
+            //     if (!parseResult.success) {
+            //         // Handle validation errors
+            //         console.error("Invalid data format from server:", parseResult.error);
+            //         setError("Invalid data format from server. Please check console for details.");
+            //         setIsLoading(false);
+            //         return;
+            //     }
+            //     resultData = parseResult.data;
+            // }
+            setLoadingProgress(90);
+            processedData = preprocessData(resultData); // console.log("!!! [Structura] ProcessedData:", processedData);
+            setJsonData(processedData.result);
+            setActiveTab("html");
+            _context2.n = 14;
+            break;
+          case 13:
+            _context2.p = 13;
+            _t4 = _context2.v;
+            console.error("Error processing PDF:", _t4);
+            errorMessage = _t4 instanceof Error ? _t4.message : "Failed to process PDF";
+            setError("".concat(errorMessage, ". ").concat(_t4.toString().includes("Backend connection") ? "Backend is unavailable." : "Please try again."));
+            setBackendStatus('offline');
+            setJsonData(null);
+          case 14:
+            _context2.p = 14;
+            setLoadingProgress(100);
+            setTimeout(function () {
+              setIsLoading(false);
+            }, 300);
+            return _context2.f(14);
+          case 15:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[2, 13, 14, 15]]);
+    }));
+    return function handleGenerateJSON() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  // Handle click on HTML element in the right panel
+  var handleHtmlNodeClick = function handleHtmlNodeClick(nodeId) {
+    // console.log(`[PdfHighlighter] HTML Node clicked: ${nodeId}`);
+    setSelectedBboxId(nodeId);
+    // PDF scrolling will be handled by the useEffect below
+  };
+  // Handler for when a bbox is clicked in the PDF viewer
+  var handlePdfBboxClicked = function handlePdfBboxClicked(blockId) {
+    // console.log(`[PdfHighlighter] PDF Bbox clicked: ${blockId}`);
+    setSelectedBboxId(blockId);
+    // HTML scrolling is handled by HtmlViewer's own useEffect
+  };
+  // Effect to scroll PDF page into view when selectedBboxId changes
+  useEffect(function () {
+    if (!selectedBboxId || !jsonData || !jsonData.children || !pdfWrapperRef.current) {
+      return;
+    }
+    var findPageOfBlock = function findPageOfBlock(blockIdToFind, documentData) {
+      if (!documentData || !documentData.children) return null;
+      var _loop = function _loop() {
+          var pageBlock = documentData.children[i];
+          if (pageBlock.block_type === "Page") {
+            // Check if the pageBlock itself is the target
+            if (pageBlock.id === blockIdToFind) {
+              return {
+                v: i + 1
+              }; // Page numbers are 1-indexed
+            }
+            // Recursively search within this page's children
+            var _blockExistsInPage = function blockExistsInPage(currentBlock) {
+              if (currentBlock.id === blockIdToFind) return true;
+              if (currentBlock.children) {
+                var _iterator = _createForOfIteratorHelper(currentBlock.children),
+                  _step;
+                try {
+                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                    var child = _step.value;
+                    if (_blockExistsInPage(child)) return true;
+                  }
+                } catch (err) {
+                  _iterator.e(err);
+                } finally {
+                  _iterator.f();
+                }
+              }
+              return false;
+            };
+            if (_blockExistsInPage(pageBlock)) {
+              return {
+                v: i + 1
+              }; // Page numbers are 1-indexed
+            }
+          }
+        },
+        _ret;
+      for (var i = 0; i < documentData.children.length; i++) {
+        _ret = _loop();
+        if (_ret) return _ret.v;
+      }
+      return null;
+    };
+    var pageNumWithSelectedBlock = findPageOfBlock(selectedBboxId, jsonData);
+    if (pageNumWithSelectedBlock !== null) {
+      // console.log(`[PdfHighlighter] Selected bbox ${selectedBboxId} found on page ${pageNumWithSelectedBlock}. Scrolling PDF page.`);
+      var pageElementId = "pdf-page-container-".concat(pageNumWithSelectedBlock);
+      var pageElement = document.getElementById(pageElementId); // Check if element exists before timeout
+      if (pageElement) {
+        // console.log(`[PdfHighlighter] Scheduling scroll for PDF Page element ${pageElementId}`);
+        setTimeout(function () {
+          var el = document.getElementById(pageElementId); // Re-fetch element in timeout
+          if (el) {
+            // console.log(`[PdfHighlighter] Timeout: Scrolling to PDF Page element ${el.id} (align to top)`);
+            el.scrollIntoView(true); // Align to top, auto behavior
+          } else {
+            console.warn("[PdfHighlighter] Timeout: PDF Page element ".concat(pageElementId, " not found at time of scroll."));
+          }
+        }, 0); // Small delay
+      } else {
+        console.warn("[PdfHighlighter] PDF Page element ".concat(pageElementId, " not found for scheduling scroll."));
+      }
+    } else {
+      console.log("[PdfHighlighter] Selected bbox ".concat(selectedBboxId, " not found in any page or jsonData not structured as expected."));
+    }
+  }, [selectedBboxId, jsonData, pdfWrapperRef]);
+  // Determine which pages to render
+  var pagesToRender = [];
+  if (numPages) {
+    if (allowedPages && allowedPages.length > 0) {
+      pagesToRender = allowedPages.filter(function (p) {
+        return p >= 1 && p <= numPages;
+      });
+    } else {
+      pagesToRender = Array.from({
+        length: numPages
+      }, function (_, i) {
+        return i + 1;
+      });
+    }
+  }
+  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", {
+      className: "md:hidden",
+      children: jsxs(Tabs, {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        className: "w-full",
+        children: [jsxs(TabsList, {
+          className: "grid w-full grid-cols-2",
+          children: [jsxs(TabsTrigger, {
+            value: "pdf",
+            className: "flex items-center gap-2",
+            children: [jsx(LucideIcons.FileText, {
+              className: "h-4 w-4"
+            }), "PDF View"]
+          }), jsxs(TabsTrigger, {
+            value: "html",
+            className: "flex items-center gap-2",
+            children: [jsx(LucideIcons.FileText, {
+              className: "h-4 w-4"
+            }), "HTML View"]
+          })]
+        }), jsx(TabsContent, {
+          value: "pdf",
+          className: "p-0 border-0",
+          children: jsx("div", {
+            ref: pdfWrapperRef,
+            className: "h-[calc(100vh-220px)] overflow-auto",
+            children: jsx(ScrollArea, {
+              className: "w-full h-[calc(100vh-220px)]",
+              children: fileUrl ? jsx(PdfDocumentViewer, {
+                fileUrl: fileUrl,
+                allowedPages: pagesToRender,
+                onLoadSuccess: function onLoadSuccess(num) {
+                  // console.log("!!! PDF loaded successfully, numPages:", num);
+                  setNumPages(num);
+                  // console.log("!!! Setting isFileLoaded to true");
+                  setIsFileLoaded(true);
+                },
+                onFileUpload: handleFileUpload,
+                onRemovePDF: handleRemovePDF,
+                jsonData: jsonData,
+                selectedBboxId: selectedBboxId,
+                onPdfBboxClick: handlePdfBboxClicked
+              }) : jsx("div", {
+                className: "min-h-full w-full flex flex-col items-center justify-center p-8 text-center transition-all duration-200 ".concat(isDraggingOver ? 'bg-primary/10 border-2 border-dashed border-primary' : 'bg-muted/50'),
+                onDragOver: function onDragOver(e) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsDraggingOver(true);
+                },
+                onDragLeave: function onDragLeave(e) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsDraggingOver(false);
+                },
+                onDrop: function onDrop(e) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsDraggingOver(false);
+                  // console.log("!!! File drop event triggered");
+                  if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+                    // If multiple files were dropped, show an error
+                    if (e.dataTransfer.files.length > 1) {
+                      // console.log("!!! Multiple files dropped - showing error");
+                      setError('Please upload only one PDF file at a time');
+                      return;
+                    }
+                    var _file = e.dataTransfer.files[0];
+                    // console.log("!!! Dropped file type:", file.type);
+                    if (_file.type === 'application/pdf') {
+                      // console.log("!!! Valid PDF file dropped:", file.name);
+                      handleFileUpload(_file);
+                    } else {
+                      // console.log("!!! Invalid file type dropped");
+                      setError("Invalid file type: ".concat(_file.name, ". Please upload a PDF file only."));
+                    }
+                  }
+                },
+                children: jsxs("div", {
+                  className: "max-w-md mx-auto flex flex-col items-center",
+                  children: [jsx("div", {
+                    className: "w-24 h-24 border-2 border-dashed rounded-full flex items-center justify-center mb-6 transition-all duration-200 ".concat(isDraggingOver ? 'border-primary bg-primary/5 scale-110' : 'border-muted-foreground/50'),
+                    children: jsx(LucideIcons.Upload, {
+                      className: "h-12 w-12 transition-colors duration-200 ".concat(isDraggingOver ? 'text-primary' : 'text-muted-foreground')
+                    })
+                  }), jsx("h3", {
+                    className: "text-xl font-medium mb-4",
+                    children: isDraggingOver ? 'Release to Upload PDF' : 'Drop PDF Here or Click to Upload'
+                  }), jsx("p", {
+                    className: "text-muted-foreground mb-6",
+                    children: isDraggingOver ? 'Let go to start processing your document' : 'Drag and drop your PDF document here, or click the button below to browse files'
+                  }), jsxs(Button, {
+                    onClick: function onClick() {
+                      var _a;
+                      return (_a = document.getElementById('pdf-upload')) === null || _a === void 0 ? void 0 : _a.click();
+                    },
+                    className: "flex items-center gap-2",
+                    size: "lg",
+                    children: ["Upload Document ", jsx(LucideIcons.Upload, {
+                      className: "h-4 w-4 ml-1"
+                    })]
+                  }), jsx("input", {
+                    type: "file",
+                    id: "pdf-upload",
+                    accept: ".pdf",
+                    className: "hidden",
+                    onChange: function onChange(e) {
+                      var _a;
+                      // console.log("!!! File input onChange triggered");
+                      if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
+                        // console.log("!!! File selected from input:", e.target.files[0].name);
+                        handleFileUpload(e.target.files[0]);
+                      }
+                    }
+                  }), jsx("p", {
+                    className: "text-xs text-muted-foreground mt-4",
+                    children: "Supported format: PDF only"
+                  })]
+                })
+              })
+            })
+          })
+        }), jsx(TabsContent, {
+          value: "html",
+          className: "p-0 border-0",
+          children: jsx("div", {
+            className: "h-[calc(100vh-220px)]",
+            children: jsx(HtmlViewer, {
+              jsonData: jsonData,
+              selectedBboxId: selectedBboxId,
+              isLoading: isLoading,
+              onNodeClick: handleHtmlNodeClick,
+              onSave: props.onSave
+            })
+          })
+        })]
+      })
+    }), jsx("div", {
+      className: "hidden md:block flex-1 overflow-hidden",
+      children: jsxs(PanelGroup, {
+        direction: "horizontal",
+        className: "h-full",
+        children: [jsx(Panel, {
+          minSize: 20,
+          defaultSize: 50,
+          children: jsxs(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(ScrollArea, {
+                className: "w-full h-[calc(100vh-220px)]",
+                children: fileUrl ? jsx(PdfDocumentViewer, {
+                  fileUrl: fileUrl,
+                  allowedPages: pagesToRender,
+                  onLoadSuccess: function onLoadSuccess(num) {
+                    // console.log("!!! PDF loaded successfully, numPages:", num);
+                    setNumPages(num);
+                    // console.log("!!! Setting isFileLoaded to true");
+                    setIsFileLoaded(true);
+                  },
+                  onFileUpload: handleFileUpload,
+                  onRemovePDF: handleRemovePDF,
+                  jsonData: jsonData,
+                  selectedBboxId: selectedBboxId,
+                  onPdfBboxClick: handlePdfBboxClicked
+                }) : jsx("div", {
+                  className: "min-h-full w-full flex flex-col items-center justify-center p-8 text-center transition-all duration-200 ".concat(isDraggingOver ? 'bg-primary/10 border-2 border-dashed border-primary' : 'bg-muted/50'),
+                  onDragOver: function onDragOver(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIsDraggingOver(true);
+                  },
+                  onDragLeave: function onDragLeave(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIsDraggingOver(false);
+                  },
+                  onDrop: function onDrop(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIsDraggingOver(false);
+                    // console.log("!!! File drop event triggered");
+                    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+                      // If multiple files were dropped, show an error
+                      if (e.dataTransfer.files.length > 1) {
+                        // console.log("!!! Multiple files dropped - showing error");
+                        setError('Please upload only one PDF file at a time');
+                        return;
+                      }
+                      var _file2 = e.dataTransfer.files[0];
+                      // console.log("!!! Dropped file type:", file.type);
+                      if (_file2.type === 'application/pdf') {
+                        // console.log("!!! Valid PDF file dropped:", file.name);
+                        handleFileUpload(_file2);
+                      } else {
+                        // console.log("!!! Invalid file type dropped");
+                        setError("Invalid file type: ".concat(_file2.name, ". Please upload a PDF file only."));
+                      }
+                    }
+                  },
+                  children: jsxs("div", {
+                    className: "max-w-md mx-auto flex flex-col items-center",
+                    children: [jsx("div", {
+                      className: "w-24 h-24 border-2 border-dashed rounded-full flex items-center justify-center mb-6 transition-all duration-200 ".concat(isDraggingOver ? 'border-primary bg-primary/5 scale-110' : 'border-muted-foreground/50'),
+                      children: jsx(LucideIcons.Upload, {
+                        className: "h-12 w-12 transition-colors duration-200 ".concat(isDraggingOver ? 'text-primary' : 'text-muted-foreground')
+                      })
+                    }), jsx("h3", {
+                      className: "text-xl font-medium mb-4",
+                      children: isDraggingOver ? 'Release to Upload PDF' : 'Drop PDF Here or Click to Upload'
+                    }), jsx("p", {
+                      className: "text-muted-foreground mb-6",
+                      children: isDraggingOver ? 'Let go to start processing your document' : 'Drag and drop your PDF document here, or click the button below to browse files'
+                    }), jsxs(Button, {
+                      onClick: function onClick() {
+                        var _a;
+                        return (_a = document.getElementById('pdf-upload')) === null || _a === void 0 ? void 0 : _a.click();
+                      },
+                      className: "flex items-center gap-2",
+                      size: "lg",
+                      children: ["Upload Document ", jsx(LucideIcons.Upload, {
+                        className: "h-4 w-4 ml-1"
+                      })]
+                    }), jsx("input", {
+                      type: "file",
+                      id: "pdf-upload",
+                      accept: ".pdf",
+                      className: "hidden",
+                      onChange: function onChange(e) {
+                        var _a;
+                        // console.log("!!! File input onChange triggered");
+                        if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
+                          // console.log("!!! File selected from input:", e.target.files[0].name);
+                          handleFileUpload(e.target.files[0]);
+                        }
+                      }
+                    }), jsx("p", {
+                      className: "text-xs text-muted-foreground mt-4",
+                      children: "Supported format: PDF only"
+                    })]
+                  })
+                })
+              })
+            })]
+          })
+        }), 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, {
+            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("div", {
+                className: "absolute inset-0",
+                children: jsonData ? jsx(HtmlViewer, {
+                  jsonData: jsonData,
+                  selectedBboxId: selectedBboxId,
+                  isLoading: isLoading,
+                  onNodeClick: handleHtmlNodeClick,
+                  onSave: props.onSave
+                }) : jsx("div", {
+                  className: "flex flex-col items-center justify-center h-full p-8 text-center",
+                  children: jsxs("div", {
+                    className: "bg-muted/50 p-8 rounded-lg flex flex-col items-center",
+                    children: [jsx(LucideIcons.Upload, {
+                      className: "h-12 w-12 text-muted-foreground mb-4"
+                    }), jsx("h3", {
+                      className: "text-lg font-medium mb-2",
+                      children: "No Data Available"
+                    }), jsx("p", {
+                      className: "text-muted-foreground mb-4",
+                      children: "First upload a PDF document, then generate the HTML structure"
+                    })]
+                  })
+                })
+              })
+            })]
+          })
+        })]
+      })
+    }), isLoading && jsx("div", {
+      className: "fixed bottom-0 left-0 right-0 bg-background border-t border-border p-4 z-50",
+      children: jsx("div", {
+        className: "container mx-auto",
+        children: jsxs("div", {
+          className: "flex flex-col gap-2",
+          children: [jsxs("div", {
+            className: "flex items-center justify-between",
+            children: [jsx("span", {
+              className: "text-sm font-medium",
+              children: "Processing document..."
+            }), jsxs("span", {
+              className: "text-sm text-muted-foreground",
+              children: [loadingProgress, "%"]
+            })]
+          }), jsx(Progress, {
+            value: loadingProgress,
+            className: "h-2"
+          })]
+        })
+      })
+    })]
+  });
+}
+
+export { Structura as default };