@tfw.in/structura-lib 0.2.0

package/dist/cjs/Structura.js

@@ -0,0 +1,806 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var button = require('./ui/button.js');
+var card = require('./ui/card.js');
+var tabs = require('./ui/tabs.js');
+var LucideIcons = require('lucide-react');
+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');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var LucideIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(LucideIcons);
+
+// Remove component aliases and use direct imports
+// This will preserve the propser types
+function Structura({
+  initialPdfPath,
+  initialJsonData,
+  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);
+  const [numPages, setNumPages] = React.useState(null);
+  const [pageNumber, setPageNumber] = React.useState(1);
+  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 [allowedPages, setAllowedPages] = React.useState(null);
+  const pdfWrapperRef = React.useRef(null);
+  const [flattenedFields, setFlattenedFields] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [loadingProgress, setLoadingProgress] = React.useState(0);
+  const [selectedBboxId, setSelectedBboxId] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [isFileLoaded, setIsFileLoaded] = React.useState(false);
+  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)
+  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]);
+  React.useEffect(() => {
+    const 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);
+      }
+    };
+    const 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);
+      }
+    };
+    const handleDragLeave = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      // Only deactivate if we're leaving the document
+      if (e.relatedTarget === null) {
+        setIsDraggingOver(false);
+      }
+    };
+    const 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 () => {
+      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
+  React.useEffect(() => {
+    const handleSelectedPdf = async () => {
+      const selectedPdfStr = localStorage.getItem('selectedPdf');
+      if (selectedPdfStr) {
+        try {
+          const selectedPdf = JSON.parse(selectedPdfStr);
+          if (selectedPdf.path === 'user-uploaded') {
+            // For user-uploaded files, retrieve from sessionStorage
+            const fileDataStr = sessionStorage.getItem('pdfFileData');
+            if (fileDataStr) {
+              try {
+                // Restore the file from sessionStorage
+                const fileData = JSON.parse(fileDataStr);
+                const byteCharacters = atob(fileData.data);
+                const byteNumbers = new Array(byteCharacters.length);
+                for (let i = 0; i < byteCharacters.length; i++) {
+                  byteNumbers[i] = byteCharacters.charCodeAt(i);
+                }
+                const byteArray = new Uint8Array(byteNumbers);
+                const blob = new Blob([byteArray], {
+                  type: 'application/pdf'
+                });
+                const pdfFile = new File([blob], fileData.name, {
+                  type: 'application/pdf'
+                });
+                const 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.');
+            }
+          } else {
+            // For pre-existing PDFs, fetch from the path
+            try {
+              const response = await fetch(selectedPdf.path);
+              const blob = await response.blob();
+              const pdfFile = new File([blob], selectedPdf.name, {
+                type: 'application/pdf'
+              });
+              // Set the file and URL
+              setFile(pdfFile);
+              setFileUrl(URL.createObjectURL(blob));
+              setIsFileLoaded(true);
+            } catch (error) {
+              console.error('Error fetching PDF:', error);
+              setError('Failed to load the PDF file. Please try again.');
+            }
+          }
+          // Clear the localStorage
+          localStorage.removeItem('selectedPdf');
+        } catch (error) {
+          console.error('Error loading selected PDF:', error);
+          setError('Failed to load selected PDF');
+          localStorage.removeItem('selectedPdf');
+        }
+      } else if (initialPdfPath) {
+        // Handle the initialPdfPath if provided
+        if (initialPdfPath === 'user-uploaded') {
+          // Same logic as above for retrieving from sessionStorage
+          const fileDataStr = sessionStorage.getItem('pdfFileData');
+          if (fileDataStr) {
+            try {
+              const fileData = JSON.parse(fileDataStr);
+              const byteCharacters = atob(fileData.data);
+              const byteNumbers = new Array(byteCharacters.length);
+              for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+              }
+              const byteArray = new Uint8Array(byteNumbers);
+              const blob = new Blob([byteArray], {
+                type: 'application/pdf'
+              });
+              const pdfFile = new File([blob], fileData.name, {
+                type: 'application/pdf'
+              });
+              const 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.');
+          }
+        } else {
+          // It's a normal path
+          try {
+            const response = await fetch(initialPdfPath);
+            const blob = await response.blob();
+            const pdfFile = new File([blob], 'document.pdf', {
+              type: 'application/pdf'
+            });
+            setFile(pdfFile);
+            setFileUrl(URL.createObjectURL(blob));
+            setIsFileLoaded(true);
+          } catch (error) {
+            console.error('Error fetching PDF:', error);
+            setError(`Failed to load the PDF file from ${initialPdfPath}. Please try again.`);
+          }
+        }
+      }
+    };
+    handleSelectedPdf();
+  }, [initialPdfPath]);
+  // Simulate loading progress
+  React.useEffect(() => {
+    if (isLoading) {
+      const interval = setInterval(() => {
+        setLoadingProgress(prev => {
+          const newProgress = prev + 10;
+          if (newProgress >= 100) {
+            clearInterval(interval);
+            return 100;
+          }
+          return newProgress;
+        });
+      }, 300);
+      return () => clearInterval(interval);
+    } else {
+      setLoadingProgress(0);
+    }
+  }, [isLoading]);
+  // Add logging to handleFileUpload
+  const 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
+  React.useEffect(() => {
+    // 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
+  const handleRemovePDF = () => {
+    setFile(null);
+    setFileUrl(null);
+    setJsonData(null);
+    setAllowedPages(null);
+    setSelectedBboxId(null);
+    setIsFileLoaded(false);
+    setNumPages(null);
+    setPageNumber(1);
+    setSelectedField(null);
+    setFlattenedFields([]);
+    setError(null);
+  };
+  const handleGenerateJSON = async () => {
+    if (!isFileLoaded || !file) return;
+    setIsLoading(true);
+    setLoadingProgress(0);
+    try {
+      // Send the PDF file as FormData to the API route
+      const formData = new FormData();
+      formData.append("file", file);
+      // console.log("!!! [Structura] FormData:", formData);
+      if (!(props === null || props === void 0 ? void 0 : props.APIKey)) {
+        throw new Error("API key is required but not provided");
+      }
+      const submitResponse = await route.POST(formData, {
+        apiKey: props.APIKey,
+        baseUrl: props.baseUrl
+      });
+      console.log("API response status:", submitResponse.status);
+      if (submitResponse.status !== 200) {
+        const errorData = submitResponse;
+        console.error("Submission error details:", errorData);
+        if (submitResponse.status === 503) {
+          throw new Error(`Backend connection error: ${errorData.details || "Could not connect to backend service"}`);
+        } else if (submitResponse.status === 401) {
+          throw new Error(`Authentication error: Invalid API key. Please check your API key.`);
+        } else {
+          throw new Error(`Failed to submit PDF: ${errorData.error || "Unknown error"}`);
+        }
+      }
+      setLoadingProgress(50);
+      const requestId = submitResponse.data.request_id;
+      // Poll for result every 2 seconds
+      let pollCount = 0;
+      let resultData = null;
+      while (true) {
+        const resultResponse = await route.GET(requestId, {
+          apiKey: props.APIKey,
+          baseUrl: props.baseUrl
+        });
+        if (resultResponse.data.status === "completed") {
+          // Store the response data
+          resultData = resultResponse.data;
+          // console.log("!!! [Structura] ResultData:", resultData.result);
+          break;
+        }
+        pollCount++;
+        // if (pollCount > 60) { // Timeout after 2 minutes
+        //     throw new Error("Polling timed out. Please try again later.");
+        // }
+        await new Promise(res => setTimeout(res, 2000));
+      }
+      // 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);
+      const processedData = preprocessData.preprocessData(resultData);
+      // console.log("!!! [Structura] ProcessedData:", processedData);
+      setJsonData(processedData.result);
+      setActiveTab("html");
+    } catch (error) {
+      console.error("Error processing PDF:", error);
+      const errorMessage = error instanceof Error ? error.message : "Failed to process PDF";
+      setError(`${errorMessage}. ${error.toString().includes("Backend connection") ? "Backend is unavailable." : "Please try again."}`);
+      setBackendStatus('offline');
+      setJsonData(null);
+    } finally {
+      setLoadingProgress(100);
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 300);
+    }
+  };
+  // Handle click on HTML element in the right panel
+  const 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
+  const 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
+  React.useEffect(() => {
+    if (!selectedBboxId || !jsonData || !jsonData.children || !pdfWrapperRef.current) {
+      return;
+    }
+    const findPageOfBlock = (blockIdToFind, documentData) => {
+      if (!documentData || !documentData.children) return null;
+      for (let i = 0; i < documentData.children.length; i++) {
+        const pageBlock = documentData.children[i];
+        if (pageBlock.block_type === "Page") {
+          // Check if the pageBlock itself is the target
+          if (pageBlock.id === blockIdToFind) {
+            return i + 1; // Page numbers are 1-indexed
+          }
+          // Recursively search within this page's children
+          const blockExistsInPage = currentBlock => {
+            if (currentBlock.id === blockIdToFind) return true;
+            if (currentBlock.children) {
+              for (const child of currentBlock.children) {
+                if (blockExistsInPage(child)) return true;
+              }
+            }
+            return false;
+          };
+          if (blockExistsInPage(pageBlock)) {
+            return i + 1; // Page numbers are 1-indexed
+          }
+        }
+      }
+      return null;
+    };
+    const pageNumWithSelectedBlock = findPageOfBlock(selectedBboxId, jsonData);
+    if (pageNumWithSelectedBlock !== null) {
+      // console.log(`[PdfHighlighter] Selected bbox ${selectedBboxId} found on page ${pageNumWithSelectedBlock}. Scrolling PDF page.`);
+      const pageElementId = `pdf-page-container-${pageNumWithSelectedBlock}`;
+      const pageElement = document.getElementById(pageElementId); // Check if element exists before timeout
+      if (pageElement) {
+        // console.log(`[PdfHighlighter] Scheduling scroll for PDF Page element ${pageElementId}`);
+        setTimeout(() => {
+          const 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 ${pageElementId} not found at time of scroll.`);
+          }
+        }, 0); // Small delay
+      } else {
+        console.warn(`[PdfHighlighter] PDF Page element ${pageElementId} not found for scheduling scroll.`);
+      }
+    } else {
+      console.log(`[PdfHighlighter] Selected bbox ${selectedBboxId} not found in any page or jsonData not structured as expected.`);
+    }
+  }, [selectedBboxId, jsonData, pdfWrapperRef]);
+  // Determine which pages to render
+  let pagesToRender = [];
+  if (numPages) {
+    if (allowedPages && allowedPages.length > 0) {
+      pagesToRender = allowedPages.filter(p => p >= 1 && p <= numPages);
+    } else {
+      pagesToRender = Array.from({
+        length: numPages
+      }, (_, i) => i + 1);
+    }
+  }
+  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", {
+      className: "md:hidden",
+      children: jsxRuntime.jsxs(tabs.Tabs, {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        className: "w-full",
+        children: [jsxRuntime.jsxs(tabs.TabsList, {
+          className: "grid w-full grid-cols-2",
+          children: [jsxRuntime.jsxs(tabs.TabsTrigger, {
+            value: "pdf",
+            className: "flex items-center gap-2",
+            children: [jsxRuntime.jsx(LucideIcons__namespace.FileText, {
+              className: "h-4 w-4"
+            }), "PDF View"]
+          }), jsxRuntime.jsxs(tabs.TabsTrigger, {
+            value: "html",
+            className: "flex items-center gap-2",
+            children: [jsxRuntime.jsx(LucideIcons__namespace.FileText, {
+              className: "h-4 w-4"
+            }), "HTML View"]
+          })]
+        }), jsxRuntime.jsx(tabs.TabsContent, {
+          value: "pdf",
+          className: "p-0 border-0",
+          children: jsxRuntime.jsx("div", {
+            ref: pdfWrapperRef,
+            className: "h-[calc(100vh-220px)] overflow-auto",
+            children: jsxRuntime.jsx(scrollArea.ScrollArea, {
+              className: "w-full h-[calc(100vh-220px)]",
+              children: fileUrl ? jsxRuntime.jsx(PdfDocumentViewer.default, {
+                fileUrl: fileUrl,
+                allowedPages: pagesToRender,
+                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
+              }) : jsxRuntime.jsx("div", {
+                className: `min-h-full w-full flex flex-col items-center justify-center p-8 text-center transition-all duration-200 ${isDraggingOver ? 'bg-primary/10 border-2 border-dashed border-primary' : 'bg-muted/50'}`,
+                onDragOver: e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsDraggingOver(true);
+                },
+                onDragLeave: e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsDraggingOver(false);
+                },
+                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;
+                    }
+                    const 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: ${file.name}. Please upload a PDF file only.`);
+                    }
+                  }
+                },
+                children: jsxRuntime.jsxs("div", {
+                  className: "max-w-md mx-auto flex flex-col items-center",
+                  children: [jsxRuntime.jsx("div", {
+                    className: `w-24 h-24 border-2 border-dashed rounded-full flex items-center justify-center mb-6 transition-all duration-200 ${isDraggingOver ? 'border-primary bg-primary/5 scale-110' : 'border-muted-foreground/50'}`,
+                    children: jsxRuntime.jsx(LucideIcons__namespace.Upload, {
+                      className: `h-12 w-12 transition-colors duration-200 ${isDraggingOver ? 'text-primary' : 'text-muted-foreground'}`
+                    })
+                  }), jsxRuntime.jsx("h3", {
+                    className: "text-xl font-medium mb-4",
+                    children: isDraggingOver ? 'Release to Upload PDF' : 'Drop PDF Here or Click to Upload'
+                  }), jsxRuntime.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'
+                  }), jsxRuntime.jsxs(button.Button, {
+                    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 ", jsxRuntime.jsx(LucideIcons__namespace.Upload, {
+                      className: "h-4 w-4 ml-1"
+                    })]
+                  }), jsxRuntime.jsx("input", {
+                    type: "file",
+                    id: "pdf-upload",
+                    accept: ".pdf",
+                    className: "hidden",
+                    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]);
+                      }
+                    }
+                  }), jsxRuntime.jsx("p", {
+                    className: "text-xs text-muted-foreground mt-4",
+                    children: "Supported format: PDF only"
+                  })]
+                })
+              })
+            })
+          })
+        }), jsxRuntime.jsx(tabs.TabsContent, {
+          value: "html",
+          className: "p-0 border-0",
+          children: jsxRuntime.jsx("div", {
+            className: "h-[calc(100vh-220px)]",
+            children: jsxRuntime.jsx(HtmlViewer.default, {
+              jsonData: jsonData,
+              selectedBboxId: selectedBboxId,
+              isLoading: isLoading,
+              onNodeClick: handleHtmlNodeClick,
+              onSave: props.onSave
+            })
+          })
+        })]
+      })
+    }), jsxRuntime.jsx("div", {
+      className: "hidden md:block flex-1 overflow-hidden",
+      children: jsxRuntime.jsxs(reactResizablePanels.PanelGroup, {
+        direction: "horizontal",
+        className: "h-full",
+        children: [jsxRuntime.jsx(reactResizablePanels.Panel, {
+          minSize: 20,
+          defaultSize: 50,
+          children: jsxRuntime.jsxs(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(scrollArea.ScrollArea, {
+                className: "w-full h-[calc(100vh-220px)]",
+                children: fileUrl ? jsxRuntime.jsx(PdfDocumentViewer.default, {
+                  fileUrl: fileUrl,
+                  allowedPages: pagesToRender,
+                  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
+                }) : jsxRuntime.jsx("div", {
+                  className: `min-h-full w-full flex flex-col items-center justify-center p-8 text-center transition-all duration-200 ${isDraggingOver ? 'bg-primary/10 border-2 border-dashed border-primary' : 'bg-muted/50'}`,
+                  onDragOver: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIsDraggingOver(true);
+                  },
+                  onDragLeave: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIsDraggingOver(false);
+                  },
+                  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;
+                      }
+                      const 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: ${file.name}. Please upload a PDF file only.`);
+                      }
+                    }
+                  },
+                  children: jsxRuntime.jsxs("div", {
+                    className: "max-w-md mx-auto flex flex-col items-center",
+                    children: [jsxRuntime.jsx("div", {
+                      className: `w-24 h-24 border-2 border-dashed rounded-full flex items-center justify-center mb-6 transition-all duration-200 ${isDraggingOver ? 'border-primary bg-primary/5 scale-110' : 'border-muted-foreground/50'}`,
+                      children: jsxRuntime.jsx(LucideIcons__namespace.Upload, {
+                        className: `h-12 w-12 transition-colors duration-200 ${isDraggingOver ? 'text-primary' : 'text-muted-foreground'}`
+                      })
+                    }), jsxRuntime.jsx("h3", {
+                      className: "text-xl font-medium mb-4",
+                      children: isDraggingOver ? 'Release to Upload PDF' : 'Drop PDF Here or Click to Upload'
+                    }), jsxRuntime.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'
+                    }), jsxRuntime.jsxs(button.Button, {
+                      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 ", jsxRuntime.jsx(LucideIcons__namespace.Upload, {
+                        className: "h-4 w-4 ml-1"
+                      })]
+                    }), jsxRuntime.jsx("input", {
+                      type: "file",
+                      id: "pdf-upload",
+                      accept: ".pdf",
+                      className: "hidden",
+                      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]);
+                        }
+                      }
+                    }), jsxRuntime.jsx("p", {
+                      className: "text-xs text-muted-foreground mt-4",
+                      children: "Supported format: PDF only"
+                    })]
+                  })
+                })
+              })
+            })]
+          })
+        }), 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, {
+            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("div", {
+                className: "absolute inset-0",
+                children: jsonData ? jsxRuntime.jsx(HtmlViewer.default, {
+                  jsonData: jsonData,
+                  selectedBboxId: selectedBboxId,
+                  isLoading: isLoading,
+                  onNodeClick: handleHtmlNodeClick,
+                  onSave: props.onSave
+                }) : jsxRuntime.jsx("div", {
+                  className: "flex flex-col items-center justify-center h-full p-8 text-center",
+                  children: jsxRuntime.jsxs("div", {
+                    className: "bg-muted/50 p-8 rounded-lg flex flex-col items-center",
+                    children: [jsxRuntime.jsx(LucideIcons__namespace.Upload, {
+                      className: "h-12 w-12 text-muted-foreground mb-4"
+                    }), jsxRuntime.jsx("h3", {
+                      className: "text-lg font-medium mb-2",
+                      children: "No Data Available"
+                    }), jsxRuntime.jsx("p", {
+                      className: "text-muted-foreground mb-4",
+                      children: "First upload a PDF document, then generate the HTML structure"
+                    })]
+                  })
+                })
+              })
+            })]
+          })
+        })]
+      })
+    }), isLoading && jsxRuntime.jsx("div", {
+      className: "fixed bottom-0 left-0 right-0 bg-background border-t border-border p-4 z-50",
+      children: jsxRuntime.jsx("div", {
+        className: "container mx-auto",
+        children: jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-2",
+          children: [jsxRuntime.jsxs("div", {
+            className: "flex items-center justify-between",
+            children: [jsxRuntime.jsx("span", {
+              className: "text-sm font-medium",
+              children: "Processing document..."
+            }), jsxRuntime.jsxs("span", {
+              className: "text-sm text-muted-foreground",
+              children: [loadingProgress, "%"]
+            })]
+          }), jsxRuntime.jsx(progress.Progress, {
+            value: loadingProgress,
+            className: "h-2"
+          })]
+        })
+      })
+    })]
+  });
+}
+
+exports.default = Structura;