@papyrus-sdk/ui-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,696 @@
+// components/Topbar.tsx
+import { useRef, useState, useEffect } from "react";
+import { useViewerStore } from "@papyrus-sdk/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Topbar = ({ engine }) => {
+  const {
+    currentPage,
+    pageCount,
+    zoom,
+    uiTheme,
+    pageTheme,
+    setDocumentState,
+    accentColor,
+    toggleSidebarLeft,
+    toggleSidebarRight,
+    triggerScrollToPage
+  } = useViewerStore();
+  const fileInputRef = useRef(null);
+  const [pageInput, setPageInput] = useState(currentPage.toString());
+  const [showPageThemes, setShowPageThemes] = useState(false);
+  const isDark = uiTheme === "dark";
+  useEffect(() => {
+    setPageInput(currentPage.toString());
+  }, [currentPage]);
+  const handleZoom = (delta) => {
+    const newZoom = Math.max(0.2, Math.min(5, zoom + delta));
+    engine.setZoom(newZoom);
+    setDocumentState({ zoom: newZoom });
+  };
+  const handlePageChange = (page) => {
+    const p = Math.max(1, Math.min(pageCount, isNaN(page) ? 1 : page));
+    engine.goToPage(p);
+    setDocumentState({ currentPage: p });
+    triggerScrollToPage(p - 1);
+  };
+  const themes = [
+    { id: "normal", name: "Original", color: "bg-white" },
+    { id: "sepia", name: "S\xE9pia", color: "bg-[#f4ecd8]" },
+    { id: "dark", name: "Invertido", color: "bg-gray-800" },
+    { id: "high-contrast", name: "Contraste", color: "bg-black" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: `h-14 border-b flex items-center justify-between px-4 z-50 transition-colors duration-200 ${isDark ? "bg-[#1a1a1a] border-[#333] text-white" : "bg-white border-gray-200 text-gray-800"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ jsx("button", { onClick: toggleSidebarLeft, className: `p-2 rounded-md ${isDark ? "hover:bg-white/10" : "hover:bg-gray-100"}`, children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) }),
+      /* @__PURE__ */ jsxs("span", { className: "font-bold text-lg tracking-tight", style: { color: accentColor }, children: [
+        "Papyrus",
+        /* @__PURE__ */ jsx("span", { className: isDark ? "text-white" : "text-gray-900", children: "Core" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: `flex items-center rounded-lg p-1 space-x-1 border ${isDark ? "bg-[#2a2a2a] border-[#444]" : "bg-gray-50 border-gray-200"}`, children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => handlePageChange(currentPage - 1), className: "p-1.5 rounded transition-all hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: "w-10 text-center bg-transparent focus:outline-none font-bold text-sm",
+            value: pageInput,
+            onChange: (e) => setPageInput(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && handlePageChange(parseInt(pageInput)),
+            onBlur: () => handlePageChange(parseInt(pageInput))
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "opacity-40 px-1", children: "/" }),
+        /* @__PURE__ */ jsx("span", { className: "opacity-80 text-sm", children: pageCount }),
+        /* @__PURE__ */ jsx("button", { onClick: () => handlePageChange(currentPage + 1), className: "p-1.5 rounded transition-all hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `flex items-center rounded-lg p-1 border ${isDark ? "bg-[#2a2a2a] border-[#444]" : "bg-gray-50 border-gray-200"}`, children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => handleZoom(-0.1), className: "p-1.5 rounded hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }) }),
+        /* @__PURE__ */ jsxs("span", { className: "px-3 text-xs font-bold min-w-[50px] text-center", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => handleZoom(0.1), className: "p-1.5 rounded hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setShowPageThemes(!showPageThemes),
+            className: `flex items-center space-x-2 px-3 py-1.5 rounded-md text-xs font-bold border transition-all ${isDark ? "bg-[#2a2a2a] border-[#444]" : "bg-gray-50 border-gray-200"}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full border ${themes.find((t) => t.id === pageTheme)?.color}` }),
+              /* @__PURE__ */ jsx("span", { children: "TEMA" })
+            ]
+          }
+        ),
+        showPageThemes && /* @__PURE__ */ jsx("div", { className: `absolute top-full right-0 mt-2 w-48 rounded-lg shadow-xl border p-2 z-[60] ${isDark ? "bg-[#2a2a2a] border-[#444]" : "bg-white border-gray-200"}`, children: themes.map((t) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setDocumentState({ pageTheme: t.id });
+              setShowPageThemes(false);
+            },
+            className: `w-full flex items-center space-x-3 px-3 py-2 rounded-md text-sm ${pageTheme === t.id ? "text-white" : isDark ? "hover:bg-white/10 text-gray-300" : "hover:bg-gray-50 text-gray-700"}`,
+            style: pageTheme === t.id ? { backgroundColor: accentColor } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full border ${t.color}` }),
+              /* @__PURE__ */ jsx("span", { children: t.name })
+            ]
+          },
+          t.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setDocumentState({ uiTheme: isDark ? "light" : "dark" }), className: `p-2 rounded-full ${isDark ? "bg-yellow-500/10 text-yellow-500" : "bg-gray-100 text-gray-500"}`, children: isDark ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { d: "M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414z" }) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { d: "M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" }) }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => fileInputRef.current?.click(),
+          className: "px-4 py-1.5 text-white rounded-md text-sm font-bold shadow-md active:scale-95",
+          style: { backgroundColor: accentColor },
+          children: "UPLOAD"
+        }
+      ),
+      /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, className: "hidden", accept: ".pdf", onChange: async (e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+          setDocumentState({ isLoaded: false });
+          await engine.load(file);
+          setDocumentState({ isLoaded: true, pageCount: engine.getPageCount(), currentPage: 1, outline: await engine.getOutline() });
+        }
+      } }),
+      /* @__PURE__ */ jsx("button", { onClick: () => toggleSidebarRight("search"), className: `p-2 rounded-md ${isDark ? "hover:bg-white/10" : "hover:bg-gray-100"}`, children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
+    ] })
+  ] });
+};
+var Topbar_default = Topbar;
+
+// components/SidebarLeft.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useViewerStore as useViewerStore2 } from "@papyrus-sdk/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var withAlpha = (hex, alpha) => {
+  const normalized = hex.replace("#", "").trim();
+  const value = normalized.length === 3 ? normalized.split("").map((c) => c + c).join("") : normalized;
+  if (value.length !== 6) return hex;
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+var Thumbnail = ({ engine, pageIndex, active, isDark, accentColor, onClick }) => {
+  const canvasRef = useRef2(null);
+  const accentSoft = withAlpha(accentColor, 0.12);
+  useEffect2(() => {
+    if (canvasRef.current) {
+      engine.renderPage(pageIndex, canvasRef.current, 0.15);
+    }
+  }, [engine, pageIndex]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      onClick,
+      className: `p-3 cursor-pointer transition-all rounded-lg border-2 ${active ? "shadow-sm" : "border-transparent"}`,
+      style: active ? { borderColor: accentColor, backgroundColor: accentSoft } : void 0,
+      children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx2("div", { className: `shadow-lg rounded overflow-hidden mb-2 border ${isDark ? "border-[#333]" : "border-gray-200"}`, children: /* @__PURE__ */ jsx2("canvas", { ref: canvasRef, className: "max-w-full h-auto bg-white" }) }),
+        /* @__PURE__ */ jsx2("span", { className: `text-[11px] font-bold ${active ? "" : isDark ? "text-gray-500" : "text-gray-400"}`, style: active ? { color: accentColor } : void 0, children: pageIndex + 1 })
+      ] })
+    }
+  );
+};
+var OutlineNode = ({ item, engine, isDark, accentColor, depth = 0 }) => {
+  const { triggerScrollToPage, outlineSearchQuery } = useViewerStore2();
+  const [expanded, setExpanded] = useState2(true);
+  const accentSoft = withAlpha(accentColor, 0.2);
+  const matchesSearch = outlineSearchQuery === "" || item.title.toLowerCase().includes(outlineSearchQuery.toLowerCase());
+  const hasMatchingChildren = item.children?.some((child) => child.title.toLowerCase().includes(outlineSearchQuery.toLowerCase()));
+  if (!matchesSearch && !hasMatchingChildren && outlineSearchQuery !== "") return null;
+  const handleClick = () => {
+    if (item.pageIndex >= 0) {
+      engine.goToPage(item.pageIndex + 1);
+      triggerScrollToPage(item.pageIndex);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: `flex items-center py-1.5 px-3 rounded-md transition-colors group ${item.pageIndex >= 0 ? "cursor-pointer" : "cursor-default"} ${isDark ? "hover:bg-white/10" : "hover:bg-gray-100"}`,
+        style: { paddingLeft: `${depth * 14 + 8}px` },
+        onClick: handleClick,
+        children: [
+          item.children && item.children.length > 0 ? /* @__PURE__ */ jsx2(
+            "button",
+            {
+              className: `mr-1 text-gray-400 transition-transform p-1`,
+              style: { color: accentColor, transform: expanded ? "rotate(90deg)" : "rotate(0deg)" },
+              onClick: (e) => {
+                e.stopPropagation();
+                setExpanded(!expanded);
+              },
+              children: /* @__PURE__ */ jsx2("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M9 5l7 7-7 7" }) })
+            }
+          ) : /* @__PURE__ */ jsx2("div", { className: "w-5" }),
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: `text-[13px] leading-tight font-medium truncate ${isDark ? "text-gray-200" : "text-gray-700"}`,
+              style: matchesSearch && outlineSearchQuery ? { backgroundColor: accentSoft, color: accentColor } : void 0,
+              children: item.title
+            }
+          )
+        ]
+      }
+    ),
+    expanded && item.children && item.children.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-col", children: item.children.map((child, i) => /* @__PURE__ */ jsx2(OutlineNode, { item: child, engine, isDark, accentColor, depth: depth + 1 }, i)) })
+  ] });
+};
+var SidebarLeft = ({ engine }) => {
+  const {
+    pageCount,
+    currentPage,
+    setDocumentState,
+    sidebarLeftOpen,
+    uiTheme,
+    triggerScrollToPage,
+    sidebarLeftTab,
+    setSidebarLeftTab,
+    outline,
+    outlineSearchQuery,
+    setOutlineSearch,
+    accentColor
+  } = useViewerStore2();
+  const isDark = uiTheme === "dark";
+  if (!sidebarLeftOpen) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: `w-72 border-r flex flex-col h-full shrink-0 overflow-hidden transition-colors duration-200 ${isDark ? "bg-[#2a2a2a] border-[#3a3a3a]" : "bg-[#fcfcfc] border-gray-200"}`, children: [
+    /* @__PURE__ */ jsxs2("div", { className: `p-4 border-b flex flex-col space-y-4 ${isDark ? "border-[#3a3a3a]" : "border-gray-100"}`, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx2("h3", { className: `text-sm font-bold uppercase tracking-widest ${isDark ? "text-gray-100" : "text-gray-800"}`, children: sidebarLeftTab === "thumbnails" ? "Thumbnails" : "Sum\xE1rio" }),
+        /* @__PURE__ */ jsx2("button", { onClick: () => setDocumentState({ sidebarLeftOpen: false }), className: "text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx2("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setSidebarLeftTab("thumbnails"),
+            className: `p-2 rounded-md ${sidebarLeftTab === "thumbnails" ? isDark ? "bg-white/10 text-white" : "bg-white shadow-sm border border-gray-200" : "text-gray-400"}`,
+            style: sidebarLeftTab === "thumbnails" && !isDark ? { color: accentColor } : void 0,
+            children: /* @__PURE__ */ jsx2("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2 2V6z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setSidebarLeftTab("summary"),
+            className: `p-2 rounded-md ${sidebarLeftTab === "summary" ? isDark ? "bg-white/10 text-white" : "bg-white shadow-sm border border-gray-200" : "text-gray-400"}`,
+            style: sidebarLeftTab === "summary" && !isDark ? { color: accentColor } : void 0,
+            children: /* @__PURE__ */ jsx2("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-3", children: sidebarLeftTab === "thumbnails" ? /* @__PURE__ */ jsx2("div", { className: "space-y-1", children: Array.from({ length: pageCount }).map((_, idx) => /* @__PURE__ */ jsx2(Thumbnail, { engine, pageIndex: idx, isDark, accentColor, active: currentPage === idx + 1, onClick: () => {
+      engine.goToPage(idx + 1);
+      setDocumentState({ currentPage: idx + 1 });
+      triggerScrollToPage(idx);
+    } }, idx)) }) : /* @__PURE__ */ jsx2("div", { className: "flex flex-col space-y-0.5", children: outline.map((item, i) => /* @__PURE__ */ jsx2(OutlineNode, { item, engine, isDark, accentColor }, i)) }) })
+  ] });
+};
+var SidebarLeft_default = SidebarLeft;
+
+// components/SidebarRight.tsx
+import { useState as useState3 } from "react";
+import { useViewerStore as useViewerStore3, SearchService } from "@papyrus-sdk/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var withAlpha2 = (hex, alpha) => {
+  const normalized = hex.replace("#", "").trim();
+  const value = normalized.length === 3 ? normalized.split("").map((c) => c + c).join("") : normalized;
+  if (value.length !== 6) return hex;
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+var SidebarRight = ({ engine }) => {
+  const {
+    sidebarRightOpen,
+    sidebarRightTab,
+    toggleSidebarRight,
+    searchResults,
+    activeSearchIndex,
+    uiTheme,
+    setSearch,
+    setDocumentState,
+    triggerScrollToPage,
+    annotations,
+    accentColor
+  } = useViewerStore3();
+  const [query, setQuery] = useState3("");
+  const [isSearching, setIsSearching] = useState3(false);
+  const searchService = new SearchService(engine);
+  const isDark = uiTheme === "dark";
+  const accentSoft = withAlpha2(accentColor, 0.12);
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    if (!query.trim()) {
+      setSearch("", []);
+      return;
+    }
+    setIsSearching(true);
+    const results = await searchService.search(query);
+    setSearch(query, results);
+    setIsSearching(false);
+  };
+  if (!sidebarRightOpen) return null;
+  return /* @__PURE__ */ jsxs3("div", { className: `w-80 border-l flex flex-col h-full shrink-0 transition-colors duration-200 shadow-2xl z-40 ${isDark ? "bg-[#1a1a1a] border-[#333]" : "bg-white border-gray-200"}`, children: [
+    /* @__PURE__ */ jsxs3("div", { className: `p-4 border-b flex items-center justify-between shrink-0 ${isDark ? "border-[#333]" : "border-gray-100"}`, children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex space-x-6", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => toggleSidebarRight("search"),
+            className: `text-[10px] font-black uppercase tracking-widest pb-1 transition-all ${sidebarRightTab === "search" ? "border-b-2" : "text-gray-400"}`,
+            style: sidebarRightTab === "search" ? { color: accentColor, borderColor: accentColor } : void 0,
+            children: "Busca"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => toggleSidebarRight("annotations"),
+            className: `text-[10px] font-black uppercase tracking-widest pb-1 transition-all ${sidebarRightTab === "annotations" ? "border-b-2" : "text-gray-400"}`,
+            style: sidebarRightTab === "annotations" ? { color: accentColor, borderColor: accentColor } : void 0,
+            children: "Notas"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx3("button", { onClick: () => toggleSidebarRight(), className: "text-gray-400 hover:text-red-500 transition-colors", children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "flex-1 overflow-y-auto p-4 custom-scrollbar bg-opacity-50", children: sidebarRightTab === "search" ? /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs3("form", { onSubmit: handleSearch, className: "relative mb-6", children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "text",
+            className: `w-full rounded-lg px-4 py-2.5 text-xs outline-none border transition-all shadow-inner font-medium ${isDark ? "bg-[#2a2a2a] text-white border-[#444] focus:border-blue-500" : "bg-gray-100 border-gray-200 focus:bg-white focus:border-blue-400"}`,
+            placeholder: "O que voc\xEA procura?",
+            value: query,
+            onChange: (e) => setQuery(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx3("button", { type: "submit", className: "absolute right-3 top-2.5 text-gray-400 transition-colors", style: { color: accentColor }, children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
+      ] }),
+      isSearching && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-12 space-y-3", children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-6 h-6 border-2 border-t-transparent rounded-full animate-spin", style: { borderColor: accentColor } }),
+        /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-bold text-gray-500 uppercase", children: "Varrendo documento..." })
+      ] }),
+      !isSearching && searchResults.map((res, idx) => /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          onClick: () => {
+            setDocumentState({ activeSearchIndex: idx });
+            triggerScrollToPage(res.pageIndex);
+          },
+          className: `p-4 rounded-xl border-2 cursor-pointer transition-all group hover:scale-[1.02] ${idx === activeSearchIndex ? "shadow-lg" : isDark ? "border-[#333] hover:border-[#555] bg-[#222]" : "border-gray-50 hover:border-gray-200 bg-gray-50/50 hover:bg-white"}`,
+          style: idx === activeSearchIndex ? { borderColor: accentColor, backgroundColor: accentSoft } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-2", children: [
+              /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  className: `text-[10px] font-black uppercase tracking-tighter ${idx === activeSearchIndex ? "" : "text-gray-400"}`,
+                  style: idx === activeSearchIndex ? { color: accentColor } : void 0,
+                  children: [
+                    "P\xC1GINA ",
+                    res.pageIndex + 1
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "svg",
+                {
+                  className: `w-3 h-3 transition-transform ${idx === activeSearchIndex ? "" : "text-gray-300"}`,
+                  style: idx === activeSearchIndex ? { color: accentColor } : void 0,
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M9 5l7 7-7 7" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("p", { className: `text-[11px] font-medium leading-relaxed italic ${isDark ? "text-gray-400" : "text-gray-600"}`, children: [
+              "...",
+              res.text,
+              "..."
+            ] })
+          ]
+        },
+        idx
+      ))
+    ] }) : /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-6 flex items-center", children: [
+        /* @__PURE__ */ jsx3("span", { children: "WORKSET" }),
+        /* @__PURE__ */ jsx3("div", { className: "flex-1 h-px bg-current ml-3 opacity-10" })
+      ] }),
+      annotations.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "text-center py-20", children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-12 h-12 bg-gray-500/10 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx3("svg", { className: "w-6 h-6 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }) }),
+        /* @__PURE__ */ jsx3("p", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest", children: "Sem anota\xE7\xF5es" })
+      ] }) : annotations.map((ann) => /* @__PURE__ */ jsxs3("div", { className: `p-4 rounded-xl border group transition-all cursor-pointer ${isDark ? "bg-[#222] border-[#333] hover:border-[#444]" : "bg-white border-gray-100 shadow-sm hover:shadow-md"}`, children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx3("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: ann.color } }),
+            /* @__PURE__ */ jsxs3("span", { className: "text-[10px] font-black", style: { color: accentColor }, children: [
+              "P",
+              ann.pageIndex + 1
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3("span", { className: "text-[9px] text-gray-400 font-bold", children: new Date(ann.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+        ] }),
+        /* @__PURE__ */ jsx3("p", { className: `text-[11px] font-bold uppercase tracking-tight ${isDark ? "text-gray-200" : "text-gray-700"}`, children: ann.type })
+      ] }, ann.id))
+    ] }) })
+  ] });
+};
+var SidebarRight_default = SidebarRight;
+
+// components/Viewer.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useViewerStore as useViewerStore5 } from "@papyrus-sdk/core";
+
+// components/PageRenderer.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useViewerStore as useViewerStore4, papyrusEvents } from "@papyrus-sdk/core";
+import { PapyrusEventType } from "@papyrus-sdk/types";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PageRenderer = ({ engine, pageIndex }) => {
+  const containerRef = useRef3(null);
+  const canvasRef = useRef3(null);
+  const textLayerRef = useRef3(null);
+  const [loading, setLoading] = useState4(true);
+  const [isDragging, setIsDragging] = useState4(false);
+  const [startPos, setStartPos] = useState4({ x: 0, y: 0 });
+  const [currentRect, setCurrentRect] = useState4({ x: 0, y: 0, w: 0, h: 0 });
+  const {
+    zoom,
+    rotation,
+    pageTheme,
+    scrollToPageSignal,
+    setDocumentState,
+    annotations,
+    addAnnotation,
+    activeTool,
+    removeAnnotation,
+    selectedAnnotationId,
+    setSelectedAnnotation,
+    accentColor
+  } = useViewerStore4();
+  useEffect3(() => {
+    if (scrollToPageSignal === pageIndex && containerRef.current) {
+      containerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+      setDocumentState({ scrollToPageSignal: null });
+    }
+  }, [scrollToPageSignal, pageIndex, setDocumentState]);
+  useEffect3(() => {
+    let active = true;
+    const render = async () => {
+      if (!canvasRef.current || !textLayerRef.current) return;
+      setLoading(true);
+      try {
+        const RENDER_SCALE = 2;
+        await engine.renderPage(pageIndex, canvasRef.current, RENDER_SCALE);
+        textLayerRef.current.innerHTML = "";
+        await engine.renderTextLayer(pageIndex, textLayerRef.current, RENDER_SCALE);
+      } catch (err) {
+        console.error("[Papyrus] Falha na renderiza\xE7\xE3o:", err);
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+    render();
+    return () => {
+      active = false;
+    };
+  }, [engine, pageIndex, zoom, rotation]);
+  const handleMouseDown = (e) => {
+    if (activeTool === "select") return;
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setIsDragging(true);
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setStartPos({ x, y });
+    setCurrentRect({ x, y, w: 0, h: 0 });
+  };
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const currentX = e.clientX - rect.left;
+    const currentY = e.clientY - rect.top;
+    setCurrentRect({
+      x: Math.min(startPos.x, currentX),
+      y: Math.min(startPos.y, currentY),
+      w: Math.abs(currentX - startPos.x),
+      h: Math.abs(currentY - startPos.y)
+    });
+  };
+  const handleMouseUp = (e) => {
+    if (isDragging) {
+      setIsDragging(false);
+      if (currentRect.w > 5 && currentRect.h > 5) {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (rect) {
+          addAnnotation({
+            id: Math.random().toString(36).substr(2, 9),
+            pageIndex,
+            type: activeTool,
+            rect: {
+              x: currentRect.x / rect.width,
+              y: currentRect.y / rect.height,
+              width: currentRect.w / rect.width,
+              height: currentRect.h / rect.height
+            },
+            color: activeTool === "highlight" ? "#fbbf24" : activeTool === "strikeout" ? "#ef4444" : accentColor,
+            content: activeTool === "text" || activeTool === "comment" ? "" : void 0,
+            createdAt: Date.now()
+          });
+        }
+      }
+      setCurrentRect({ x: 0, y: 0, w: 0, h: 0 });
+      return;
+    }
+    if (activeTool === "select") {
+      const selection = window.getSelection();
+      const selectedText = selection?.toString().trim();
+      if (selectedText) {
+        papyrusEvents.emit(PapyrusEventType.TEXT_SELECTED, {
+          text: selectedText,
+          pageIndex
+        });
+      }
+    }
+  };
+  const getPageFilter = () => {
+    switch (pageTheme) {
+      case "sepia":
+        return "sepia(0.6) contrast(1.1) brightness(0.95)";
+      case "dark":
+        return "invert(0.9) hue-rotate(180deg) brightness(1.1)";
+      case "high-contrast":
+        return "contrast(2) grayscale(1)";
+      default:
+        return "none";
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative inline-block shadow-2xl bg-white mb-10 transition-all ${activeTool !== "select" ? "no-select cursor-crosshair" : ""}`,
+      style: { scrollMarginTop: "20px", minHeight: "100px" },
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      children: [
+        loading && /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-gray-50 flex items-center justify-center z-10 animate-pulse", children: /* @__PURE__ */ jsx4("span", { className: "text-[10px] font-black text-gray-400 uppercase tracking-widest", children: "Sincronizando..." }) }),
+        /* @__PURE__ */ jsx4("canvas", { ref: canvasRef, style: { filter: getPageFilter() }, className: "block" }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            ref: textLayerRef,
+            className: "textLayer",
+            style: { pointerEvents: activeTool === "select" ? "auto" : "none" }
+          }
+        ),
+        isDragging && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "absolute border-2 z-[40] pointer-events-none",
+            style: {
+              borderColor: accentColor,
+              backgroundColor: `${accentColor}33`,
+              left: currentRect.x,
+              top: currentRect.y,
+              width: currentRect.w,
+              height: currentRect.h
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 pointer-events-none z-20", children: annotations.filter((a) => a.pageIndex === pageIndex).map((ann) => /* @__PURE__ */ jsx4(
+          AnnotationItem,
+          {
+            ann,
+            isSelected: selectedAnnotationId === ann.id,
+            accentColor,
+            onDelete: () => removeAnnotation(ann.id),
+            onSelect: () => setSelectedAnnotation(ann.id)
+          },
+          ann.id
+        )) })
+      ]
+    }
+  );
+};
+var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
+  const isText = ann.type === "text" || ann.type === "comment";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `absolute pointer-events-auto transition-all ${isSelected ? "shadow-xl z-30" : "z-10"}`,
+      style: {
+        left: `${ann.rect.x * 100}%`,
+        top: `${ann.rect.y * 100}%`,
+        width: `${ann.rect.width * 100}%`,
+        height: `${ann.rect.height * 100}%`,
+        backgroundColor: ann.type === "highlight" ? `${ann.color}77` : "transparent",
+        borderBottom: ann.type === "strikeout" ? `2px solid ${ann.color}` : "none",
+        outline: isSelected ? `2px solid ${accentColor}` : void 0
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect();
+      },
+      children: [
+        isText && isSelected && /* @__PURE__ */ jsx4("div", { className: "absolute top-full mt-2 w-64 bg-white shadow-2xl rounded-xl p-4 border border-gray-100 z-50", children: /* @__PURE__ */ jsx4(
+          "textarea",
+          {
+            className: "w-full bg-transparent border-none focus:ring-0 p-0 text-gray-800 text-xs font-medium",
+            placeholder: "Escreva sua nota...",
+            rows: 3,
+            defaultValue: ann.content || "",
+            autoFocus: true
+          }
+        ) }),
+        isSelected && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            className: "absolute -top-3 -right-3 bg-red-500 text-white rounded-full p-1 shadow-lg hover:bg-red-600",
+            children: /* @__PURE__ */ jsx4("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+};
+var PageRenderer_default = PageRenderer;
+
+// components/Viewer.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Viewer = ({ engine }) => {
+  const { viewMode, pageCount, currentPage, activeTool, uiTheme, setDocumentState, accentColor } = useViewerStore5();
+  const isDark = uiTheme === "dark";
+  const viewerRef = useRef4(null);
+  useEffect4(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const pageIndex = parseInt(entry.target.getAttribute("data-page-index") || "0");
+          if (pageIndex + 1 !== currentPage) setDocumentState({ currentPage: pageIndex + 1 });
+        }
+      });
+    }, { root: viewerRef.current, threshold: 0.5 });
+    const pageElements = viewerRef.current?.querySelectorAll(".page-container");
+    pageElements?.forEach((el) => observer.observe(el));
+    return () => {
+      pageElements?.forEach((el) => observer.unobserve(el));
+      observer.disconnect();
+    };
+  }, [pageCount, setDocumentState, currentPage]);
+  const pages = Array.from({ length: pageCount }).map((_, i) => i);
+  const tools = [
+    { id: "select", name: "Select", icon: "M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5" },
+    { id: "highlight", name: "Marker", icon: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" },
+    { id: "strikeout", name: "Strike", icon: "M13 10V3L4 14h7v7l9-11h-7z" },
+    { id: "comment", name: "Note", icon: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" }
+  ];
+  return /* @__PURE__ */ jsxs5("div", { ref: viewerRef, className: `flex-1 overflow-auto flex flex-col items-center py-16 relative custom-scrollbar scroll-smooth ${isDark ? "bg-[#121212]" : "bg-[#e9ecef]"}`, children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex flex-col items-center gap-6 w-full", children: pages.map((idx) => /* @__PURE__ */ jsx5("div", { "data-page-index": idx, className: "page-container", children: /* @__PURE__ */ jsx5(PageRenderer_default, { engine, pageIndex: idx }) }, idx)) }),
+    /* @__PURE__ */ jsx5("div", { className: `fixed bottom-10 left-1/2 -translate-x-1/2 shadow-2xl rounded-2xl p-2 flex border z-50 ${isDark ? "bg-[#2a2a2a]/90 border-[#3a3a3a] backdrop-blur-xl" : "bg-white/95 border-gray-100 backdrop-blur-md"}`, children: tools.map((tool) => /* @__PURE__ */ jsx5(
+      "button",
+      {
+        onClick: () => setDocumentState({ activeTool: tool.id }),
+        className: `w-10 h-10 rounded-xl flex items-center justify-center transition-all ${activeTool === tool.id ? "text-white shadow-lg" : "text-gray-400"}`,
+        style: activeTool === tool.id ? { backgroundColor: accentColor } : void 0,
+        children: /* @__PURE__ */ jsx5("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: tool.icon }) })
+      },
+      tool.id
+    )) })
+  ] });
+};
+var Viewer_default = Viewer;
+export {
+  PageRenderer_default as PageRenderer,
+  SidebarLeft_default as SidebarLeft,
+  SidebarRight_default as SidebarRight,
+  Topbar_default as Topbar,
+  Viewer_default as Viewer
+};
+//# sourceMappingURL=index.mjs.map