@papyrus-sdk/ui-react 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -0
- package/base.css +69 -39
- package/dist/index.js +280 -247
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +277 -244
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -52,95 +52,102 @@ var Topbar = ({
|
|
|
52
52
|
{ id: "dark", name: "Invertido", color: "bg-gray-800" },
|
|
53
53
|
{ id: "high-contrast", name: "Contraste", color: "bg-black" }
|
|
54
54
|
];
|
|
55
|
-
return /* @__PURE__ */ jsxs(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
"input",
|
|
69
|
-
{
|
|
70
|
-
type: "text",
|
|
71
|
-
className: "w-10 text-center bg-transparent focus:outline-none font-bold text-sm",
|
|
72
|
-
value: pageInput,
|
|
73
|
-
onChange: (e) => setPageInput(e.target.value),
|
|
74
|
-
onKeyDown: (e) => e.key === "Enter" && handlePageChange(parseInt(pageInput)),
|
|
75
|
-
onBlur: () => handlePageChange(parseInt(pageInput))
|
|
76
|
-
}
|
|
77
|
-
),
|
|
78
|
-
/* @__PURE__ */ jsx("span", { className: "opacity-40 px-1", children: "/" }),
|
|
79
|
-
/* @__PURE__ */ jsx("span", { className: "opacity-80 text-sm", children: pageCount > 0 ? pageCount : "\u2014" }),
|
|
80
|
-
/* @__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" }) }) })
|
|
81
|
-
] }),
|
|
82
|
-
showZoomControls && /* @__PURE__ */ jsxs("div", { className: `flex items-center rounded-lg p-1 border ${isDark ? "bg-[#2a2a2a] border-[#444]" : "bg-gray-50 border-gray-200"}`, children: [
|
|
83
|
-
/* @__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" }) }) }),
|
|
84
|
-
/* @__PURE__ */ jsxs("span", { className: "px-3 text-xs font-bold min-w-[50px] text-center", children: [
|
|
85
|
-
Math.round(zoom * 100),
|
|
86
|
-
"%"
|
|
55
|
+
return /* @__PURE__ */ jsxs(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
"data-papyrus-theme": uiTheme,
|
|
59
|
+
className: `papyrus-topbar papyrus-theme 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"}`,
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
|
|
62
|
+
showSidebarLeftToggle && /* @__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" }) }) }),
|
|
63
|
+
showBrand && (brand ?? /* @__PURE__ */ jsxs("span", { className: "font-bold text-lg tracking-tight", style: { color: accentColor }, children: [
|
|
64
|
+
"Papyrus",
|
|
65
|
+
/* @__PURE__ */ jsx("span", { className: isDark ? "text-white" : "text-gray-900", children: "Core" })
|
|
66
|
+
] })),
|
|
67
|
+
title && /* @__PURE__ */ jsx("span", { className: `text-sm font-semibold truncate max-w-[220px] ${isDark ? "text-gray-200" : "text-gray-700"}`, title: typeof title === "string" ? title : void 0, children: title })
|
|
87
68
|
] }),
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
{
|
|
107
|
-
onClick: () => {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
69
|
+
(showPageControls || showZoomControls) && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
|
|
70
|
+
showPageControls && /* @__PURE__ */ jsxs("div", { className: `papyrus-control flex items-center rounded-lg p-1 space-x-1 border ${isDark ? "bg-[#2a2a2a] border-[#444]" : "bg-gray-50 border-gray-200"}`, children: [
|
|
71
|
+
/* @__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" }) }) }),
|
|
72
|
+
/* @__PURE__ */ jsx(
|
|
73
|
+
"input",
|
|
74
|
+
{
|
|
75
|
+
type: "text",
|
|
76
|
+
className: "papyrus-input w-10 text-center bg-transparent focus:outline-none font-bold text-sm",
|
|
77
|
+
value: pageInput,
|
|
78
|
+
onChange: (e) => setPageInput(e.target.value),
|
|
79
|
+
onKeyDown: (e) => e.key === "Enter" && handlePageChange(parseInt(pageInput)),
|
|
80
|
+
onBlur: () => handlePageChange(parseInt(pageInput))
|
|
81
|
+
}
|
|
82
|
+
),
|
|
83
|
+
/* @__PURE__ */ jsx("span", { className: "opacity-40 px-1", children: "/" }),
|
|
84
|
+
/* @__PURE__ */ jsx("span", { className: "opacity-80 text-sm", children: pageCount > 0 ? pageCount : "\u2014" }),
|
|
85
|
+
/* @__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" }) }) })
|
|
86
|
+
] }),
|
|
87
|
+
showZoomControls && /* @__PURE__ */ jsxs("div", { className: `papyrus-control flex items-center rounded-lg p-1 border ${isDark ? "bg-[#2a2a2a] border-[#444]" : "bg-gray-50 border-gray-200"}`, children: [
|
|
88
|
+
/* @__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" }) }) }),
|
|
89
|
+
/* @__PURE__ */ jsxs("span", { className: "px-3 text-xs font-bold min-w-[50px] text-center", children: [
|
|
90
|
+
Math.round(zoom * 100),
|
|
91
|
+
"%"
|
|
92
|
+
] }),
|
|
93
|
+
/* @__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" }) }) })
|
|
94
|
+
] })
|
|
95
|
+
] }),
|
|
96
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
|
|
97
|
+
showPageThemeSelector && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
98
|
+
/* @__PURE__ */ jsxs(
|
|
99
|
+
"button",
|
|
100
|
+
{
|
|
101
|
+
onClick: () => setShowPageThemes(!showPageThemes),
|
|
102
|
+
className: `papyrus-control 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"}`,
|
|
103
|
+
children: [
|
|
104
|
+
/* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full border ${themes.find((t) => t.id === pageTheme)?.color}` }),
|
|
105
|
+
/* @__PURE__ */ jsx("span", { children: "TEMA" })
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
),
|
|
109
|
+
showPageThemes && /* @__PURE__ */ jsx("div", { className: `papyrus-popover 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(
|
|
110
|
+
"button",
|
|
111
|
+
{
|
|
112
|
+
onClick: () => {
|
|
113
|
+
setDocumentState({ pageTheme: t.id });
|
|
114
|
+
setShowPageThemes(false);
|
|
115
|
+
},
|
|
116
|
+
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"}`,
|
|
117
|
+
style: pageTheme === t.id ? { backgroundColor: accentColor } : void 0,
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full border ${t.color}` }),
|
|
120
|
+
/* @__PURE__ */ jsx("span", { children: t.name })
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
t.id
|
|
124
|
+
)) })
|
|
125
|
+
] }),
|
|
126
|
+
showUIToggle && /* @__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" }) }) }),
|
|
127
|
+
showUpload && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
128
|
+
/* @__PURE__ */ jsx(
|
|
129
|
+
"button",
|
|
130
|
+
{
|
|
131
|
+
onClick: () => fileInputRef.current?.click(),
|
|
132
|
+
className: "px-4 py-1.5 text-white rounded-md text-sm font-bold shadow-md active:scale-95",
|
|
133
|
+
style: { backgroundColor: accentColor },
|
|
134
|
+
children: "UPLOAD"
|
|
135
|
+
}
|
|
136
|
+
),
|
|
137
|
+
/* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, className: "hidden", accept: ".pdf,.epub,.txt", onChange: async (e) => {
|
|
138
|
+
const file = e.target.files?.[0];
|
|
139
|
+
if (file) {
|
|
140
|
+
setDocumentState({ isLoaded: false });
|
|
141
|
+
await engine.load(file);
|
|
142
|
+
setDocumentState({ isLoaded: true, pageCount: engine.getPageCount(), currentPage: 1, outline: await engine.getOutline() });
|
|
143
|
+
}
|
|
144
|
+
} })
|
|
145
|
+
] }),
|
|
146
|
+
showSearch && /* @__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" }) }) })
|
|
147
|
+
] })
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
);
|
|
144
151
|
};
|
|
145
152
|
var Topbar_default = Topbar;
|
|
146
153
|
|
|
@@ -271,39 +278,46 @@ var SidebarLeft = ({ engine }) => {
|
|
|
271
278
|
} = useViewerStore2();
|
|
272
279
|
const isDark = uiTheme === "dark";
|
|
273
280
|
if (!sidebarLeftOpen) return null;
|
|
274
|
-
return /* @__PURE__ */ jsxs2(
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
281
|
+
return /* @__PURE__ */ jsxs2(
|
|
282
|
+
"div",
|
|
283
|
+
{
|
|
284
|
+
"data-papyrus-theme": uiTheme,
|
|
285
|
+
className: `papyrus-sidebar-left papyrus-theme 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"}`,
|
|
286
|
+
children: [
|
|
287
|
+
/* @__PURE__ */ jsxs2("div", { className: `p-4 border-b flex flex-col space-y-4 ${isDark ? "border-[#3a3a3a]" : "border-gray-100"}`, children: [
|
|
288
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
|
|
289
|
+
/* @__PURE__ */ jsx2("h3", { className: `text-sm font-bold uppercase tracking-widest ${isDark ? "text-gray-100" : "text-gray-800"}`, children: sidebarLeftTab === "thumbnails" ? "Thumbnails" : "Sum\xE1rio" }),
|
|
290
|
+
/* @__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" }) }) })
|
|
291
|
+
] }),
|
|
292
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex gap-1", children: [
|
|
293
|
+
/* @__PURE__ */ jsx2(
|
|
294
|
+
"button",
|
|
295
|
+
{
|
|
296
|
+
onClick: () => setSidebarLeftTab("thumbnails"),
|
|
297
|
+
className: `p-2 rounded-md ${sidebarLeftTab === "thumbnails" ? isDark ? "bg-white/10 text-white" : "bg-white shadow-sm border border-gray-200" : "text-gray-400"}`,
|
|
298
|
+
style: sidebarLeftTab === "thumbnails" && !isDark ? { color: accentColor } : void 0,
|
|
299
|
+
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" }) })
|
|
300
|
+
}
|
|
301
|
+
),
|
|
302
|
+
/* @__PURE__ */ jsx2(
|
|
303
|
+
"button",
|
|
304
|
+
{
|
|
305
|
+
onClick: () => setSidebarLeftTab("summary"),
|
|
306
|
+
className: `p-2 rounded-md ${sidebarLeftTab === "summary" ? isDark ? "bg-white/10 text-white" : "bg-white shadow-sm border border-gray-200" : "text-gray-400"}`,
|
|
307
|
+
style: sidebarLeftTab === "summary" && !isDark ? { color: accentColor } : void 0,
|
|
308
|
+
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" }) })
|
|
309
|
+
}
|
|
310
|
+
)
|
|
311
|
+
] })
|
|
312
|
+
] }),
|
|
313
|
+
/* @__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: () => {
|
|
314
|
+
engine.goToPage(idx + 1);
|
|
315
|
+
setDocumentState({ currentPage: idx + 1 });
|
|
316
|
+
triggerScrollToPage(idx);
|
|
317
|
+
} }, 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)) }) })
|
|
318
|
+
]
|
|
319
|
+
}
|
|
320
|
+
);
|
|
307
321
|
};
|
|
308
322
|
var SidebarLeft_default = SidebarLeft;
|
|
309
323
|
|
|
@@ -351,114 +365,121 @@ var SidebarRight = ({ engine }) => {
|
|
|
351
365
|
setIsSearching(false);
|
|
352
366
|
};
|
|
353
367
|
if (!sidebarRightOpen) return null;
|
|
354
|
-
return /* @__PURE__ */ jsxs3(
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
/* @__PURE__ */ jsx3(
|
|
381
|
-
"input",
|
|
382
|
-
{
|
|
383
|
-
type: "text",
|
|
384
|
-
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"}`,
|
|
385
|
-
placeholder: "O que voc\xEA procura?",
|
|
386
|
-
value: query,
|
|
387
|
-
onChange: (e) => setQuery(e.target.value)
|
|
388
|
-
}
|
|
389
|
-
),
|
|
390
|
-
/* @__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" }) }) })
|
|
391
|
-
] }),
|
|
392
|
-
isSearching && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-12 space-y-3", children: [
|
|
393
|
-
/* @__PURE__ */ jsx3("div", { className: "w-6 h-6 border-2 border-t-transparent rounded-full animate-spin", style: { borderColor: accentColor } }),
|
|
394
|
-
/* @__PURE__ */ jsx3("span", { className: "text-[10px] font-bold text-gray-500 uppercase", children: "Varrendo documento..." })
|
|
395
|
-
] }),
|
|
396
|
-
!isSearching && searchResults.map((res, idx) => /* @__PURE__ */ jsxs3(
|
|
397
|
-
"div",
|
|
398
|
-
{
|
|
399
|
-
onClick: () => {
|
|
400
|
-
setDocumentState({ activeSearchIndex: idx });
|
|
401
|
-
triggerScrollToPage(res.pageIndex);
|
|
402
|
-
},
|
|
403
|
-
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"}`,
|
|
404
|
-
style: idx === activeSearchIndex ? { borderColor: accentColor, backgroundColor: accentSoft } : void 0,
|
|
405
|
-
children: [
|
|
406
|
-
/* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-2", children: [
|
|
407
|
-
/* @__PURE__ */ jsxs3(
|
|
408
|
-
"span",
|
|
409
|
-
{
|
|
410
|
-
className: `text-[10px] font-black uppercase tracking-tighter ${idx === activeSearchIndex ? "" : "text-gray-400"}`,
|
|
411
|
-
style: idx === activeSearchIndex ? { color: accentColor } : void 0,
|
|
412
|
-
children: [
|
|
413
|
-
"P\xC1GINA ",
|
|
414
|
-
res.pageIndex + 1
|
|
415
|
-
]
|
|
416
|
-
}
|
|
417
|
-
),
|
|
418
|
-
/* @__PURE__ */ jsx3(
|
|
419
|
-
"svg",
|
|
420
|
-
{
|
|
421
|
-
className: `w-3 h-3 transition-transform ${idx === activeSearchIndex ? "" : "text-gray-300"}`,
|
|
422
|
-
style: idx === activeSearchIndex ? { color: accentColor } : void 0,
|
|
423
|
-
fill: "none",
|
|
424
|
-
stroke: "currentColor",
|
|
425
|
-
viewBox: "0 0 24 24",
|
|
426
|
-
children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M9 5l7 7-7 7" })
|
|
427
|
-
}
|
|
428
|
-
)
|
|
429
|
-
] }),
|
|
430
|
-
/* @__PURE__ */ jsxs3("p", { className: `text-[11px] font-medium leading-relaxed italic ${isDark ? "text-gray-400" : "text-gray-600"}`, children: [
|
|
431
|
-
"...",
|
|
432
|
-
res.text,
|
|
433
|
-
"..."
|
|
434
|
-
] })
|
|
435
|
-
]
|
|
436
|
-
},
|
|
437
|
-
idx
|
|
438
|
-
))
|
|
439
|
-
] }) : /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
|
|
440
|
-
/* @__PURE__ */ jsxs3("div", { className: "text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-6 flex items-center", children: [
|
|
441
|
-
/* @__PURE__ */ jsx3("span", { children: "WORKSET" }),
|
|
442
|
-
/* @__PURE__ */ jsx3("div", { className: "flex-1 h-px bg-current ml-3 opacity-10" })
|
|
443
|
-
] }),
|
|
444
|
-
annotations.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "text-center py-20", children: [
|
|
445
|
-
/* @__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" }) }) }),
|
|
446
|
-
/* @__PURE__ */ jsx3("p", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest", children: "Sem anota\xE7\xF5es" })
|
|
447
|
-
] }) : 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: [
|
|
448
|
-
/* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-3", children: [
|
|
449
|
-
/* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
|
|
450
|
-
/* @__PURE__ */ jsx3("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: ann.color } }),
|
|
451
|
-
/* @__PURE__ */ jsxs3("span", { className: "text-[10px] font-black", style: { color: accentColor }, children: [
|
|
452
|
-
"P",
|
|
453
|
-
ann.pageIndex + 1
|
|
454
|
-
] })
|
|
368
|
+
return /* @__PURE__ */ jsxs3(
|
|
369
|
+
"div",
|
|
370
|
+
{
|
|
371
|
+
"data-papyrus-theme": uiTheme,
|
|
372
|
+
className: `papyrus-sidebar-right papyrus-theme 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"}`,
|
|
373
|
+
children: [
|
|
374
|
+
/* @__PURE__ */ jsxs3("div", { className: `p-4 border-b flex items-center justify-between shrink-0 ${isDark ? "border-[#333]" : "border-gray-100"}`, children: [
|
|
375
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex space-x-6", children: [
|
|
376
|
+
/* @__PURE__ */ jsx3(
|
|
377
|
+
"button",
|
|
378
|
+
{
|
|
379
|
+
onClick: () => toggleSidebarRight("search"),
|
|
380
|
+
className: `text-[10px] font-black uppercase tracking-widest pb-1 transition-all ${sidebarRightTab === "search" ? "border-b-2" : "text-gray-400"}`,
|
|
381
|
+
style: sidebarRightTab === "search" ? { color: accentColor, borderColor: accentColor } : void 0,
|
|
382
|
+
children: "Busca"
|
|
383
|
+
}
|
|
384
|
+
),
|
|
385
|
+
/* @__PURE__ */ jsx3(
|
|
386
|
+
"button",
|
|
387
|
+
{
|
|
388
|
+
onClick: () => toggleSidebarRight("annotations"),
|
|
389
|
+
className: `text-[10px] font-black uppercase tracking-widest pb-1 transition-all ${sidebarRightTab === "annotations" ? "border-b-2" : "text-gray-400"}`,
|
|
390
|
+
style: sidebarRightTab === "annotations" ? { color: accentColor, borderColor: accentColor } : void 0,
|
|
391
|
+
children: "Notas"
|
|
392
|
+
}
|
|
393
|
+
)
|
|
455
394
|
] }),
|
|
456
|
-
/* @__PURE__ */ jsx3("
|
|
395
|
+
/* @__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" }) }) })
|
|
457
396
|
] }),
|
|
458
|
-
/* @__PURE__ */ jsx3("
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
397
|
+
/* @__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: [
|
|
398
|
+
/* @__PURE__ */ jsxs3("form", { onSubmit: handleSearch, className: "relative mb-6", children: [
|
|
399
|
+
/* @__PURE__ */ jsx3(
|
|
400
|
+
"input",
|
|
401
|
+
{
|
|
402
|
+
type: "text",
|
|
403
|
+
className: `papyrus-input 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"}`,
|
|
404
|
+
placeholder: "O que voc\xEA procura?",
|
|
405
|
+
value: query,
|
|
406
|
+
onChange: (e) => setQuery(e.target.value)
|
|
407
|
+
}
|
|
408
|
+
),
|
|
409
|
+
/* @__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" }) }) })
|
|
410
|
+
] }),
|
|
411
|
+
isSearching && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-12 space-y-3", children: [
|
|
412
|
+
/* @__PURE__ */ jsx3("div", { className: "w-6 h-6 border-2 border-t-transparent rounded-full animate-spin", style: { borderColor: accentColor } }),
|
|
413
|
+
/* @__PURE__ */ jsx3("span", { className: "text-[10px] font-bold text-gray-500 uppercase", children: "Varrendo documento..." })
|
|
414
|
+
] }),
|
|
415
|
+
!isSearching && searchResults.map((res, idx) => /* @__PURE__ */ jsxs3(
|
|
416
|
+
"div",
|
|
417
|
+
{
|
|
418
|
+
onClick: () => {
|
|
419
|
+
setDocumentState({ activeSearchIndex: idx });
|
|
420
|
+
triggerScrollToPage(res.pageIndex);
|
|
421
|
+
},
|
|
422
|
+
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"}`,
|
|
423
|
+
style: idx === activeSearchIndex ? { borderColor: accentColor, backgroundColor: accentSoft } : void 0,
|
|
424
|
+
children: [
|
|
425
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-2", children: [
|
|
426
|
+
/* @__PURE__ */ jsxs3(
|
|
427
|
+
"span",
|
|
428
|
+
{
|
|
429
|
+
className: `text-[10px] font-black uppercase tracking-tighter ${idx === activeSearchIndex ? "" : "text-gray-400"}`,
|
|
430
|
+
style: idx === activeSearchIndex ? { color: accentColor } : void 0,
|
|
431
|
+
children: [
|
|
432
|
+
"P\xC1GINA ",
|
|
433
|
+
res.pageIndex + 1
|
|
434
|
+
]
|
|
435
|
+
}
|
|
436
|
+
),
|
|
437
|
+
/* @__PURE__ */ jsx3(
|
|
438
|
+
"svg",
|
|
439
|
+
{
|
|
440
|
+
className: `w-3 h-3 transition-transform ${idx === activeSearchIndex ? "" : "text-gray-300"}`,
|
|
441
|
+
style: idx === activeSearchIndex ? { color: accentColor } : void 0,
|
|
442
|
+
fill: "none",
|
|
443
|
+
stroke: "currentColor",
|
|
444
|
+
viewBox: "0 0 24 24",
|
|
445
|
+
children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M9 5l7 7-7 7" })
|
|
446
|
+
}
|
|
447
|
+
)
|
|
448
|
+
] }),
|
|
449
|
+
/* @__PURE__ */ jsxs3("p", { className: `text-[11px] font-medium leading-relaxed italic ${isDark ? "text-gray-400" : "text-gray-600"}`, children: [
|
|
450
|
+
"...",
|
|
451
|
+
res.text,
|
|
452
|
+
"..."
|
|
453
|
+
] })
|
|
454
|
+
]
|
|
455
|
+
},
|
|
456
|
+
idx
|
|
457
|
+
))
|
|
458
|
+
] }) : /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
|
|
459
|
+
/* @__PURE__ */ jsxs3("div", { className: "text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-6 flex items-center", children: [
|
|
460
|
+
/* @__PURE__ */ jsx3("span", { children: "WORKSET" }),
|
|
461
|
+
/* @__PURE__ */ jsx3("div", { className: "flex-1 h-px bg-current ml-3 opacity-10" })
|
|
462
|
+
] }),
|
|
463
|
+
annotations.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "text-center py-20", children: [
|
|
464
|
+
/* @__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" }) }) }),
|
|
465
|
+
/* @__PURE__ */ jsx3("p", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest", children: "Sem anota\xE7\xF5es" })
|
|
466
|
+
] }) : 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: [
|
|
467
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-3", children: [
|
|
468
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
|
|
469
|
+
/* @__PURE__ */ jsx3("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: ann.color } }),
|
|
470
|
+
/* @__PURE__ */ jsxs3("span", { className: "text-[10px] font-black", style: { color: accentColor }, children: [
|
|
471
|
+
"P",
|
|
472
|
+
ann.pageIndex + 1
|
|
473
|
+
] })
|
|
474
|
+
] }),
|
|
475
|
+
/* @__PURE__ */ jsx3("span", { className: "text-[9px] text-gray-400 font-bold", children: new Date(ann.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
|
|
476
|
+
] }),
|
|
477
|
+
/* @__PURE__ */ jsx3("p", { className: `text-[11px] font-bold uppercase tracking-tight ${isDark ? "text-gray-200" : "text-gray-700"}`, children: ann.type })
|
|
478
|
+
] }, ann.id))
|
|
479
|
+
] }) })
|
|
480
|
+
]
|
|
481
|
+
}
|
|
482
|
+
);
|
|
462
483
|
};
|
|
463
484
|
var SidebarRight_default = SidebarRight;
|
|
464
485
|
|
|
@@ -558,6 +579,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
|
|
|
558
579
|
textLayerRef.current.innerHTML = "";
|
|
559
580
|
await engine.renderTextLayer(pageIndex, textLayerRef.current, renderScale);
|
|
560
581
|
}
|
|
582
|
+
if (!active || !textLayerRef.current) return;
|
|
561
583
|
if (!isElementRender && displaySize) {
|
|
562
584
|
if (canvasRef.current) {
|
|
563
585
|
canvasRef.current.style.width = `${displaySize.width}px`;
|
|
@@ -567,6 +589,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
|
|
|
567
589
|
textLayerRef.current.style.height = `${displaySize.height}px`;
|
|
568
590
|
}
|
|
569
591
|
} catch (err) {
|
|
592
|
+
if (!active) return;
|
|
570
593
|
console.error("[Papyrus] Falha na renderiza\xE7\xE3o:", err);
|
|
571
594
|
} finally {
|
|
572
595
|
if (active) setLoading(false);
|
|
@@ -789,6 +812,8 @@ var Viewer = ({ engine }) => {
|
|
|
789
812
|
return () => observer.disconnect();
|
|
790
813
|
}, []);
|
|
791
814
|
useEffect4(() => {
|
|
815
|
+
const root = viewerRef.current;
|
|
816
|
+
if (!root) return;
|
|
792
817
|
const observer = new IntersectionObserver((entries) => {
|
|
793
818
|
entries.forEach((entry) => {
|
|
794
819
|
if (entry.isIntersecting) {
|
|
@@ -796,11 +821,11 @@ var Viewer = ({ engine }) => {
|
|
|
796
821
|
if (pageIndex + 1 !== currentPage) setDocumentState({ currentPage: pageIndex + 1 });
|
|
797
822
|
}
|
|
798
823
|
});
|
|
799
|
-
}, { root
|
|
800
|
-
const pageElements =
|
|
801
|
-
pageElements
|
|
824
|
+
}, { root, threshold: 0.5 });
|
|
825
|
+
const pageElements = root.querySelectorAll(".page-container");
|
|
826
|
+
pageElements.forEach((el) => observer.observe(el));
|
|
802
827
|
return () => {
|
|
803
|
-
pageElements
|
|
828
|
+
pageElements.forEach((el) => observer.unobserve(el));
|
|
804
829
|
observer.disconnect();
|
|
805
830
|
};
|
|
806
831
|
}, [pageCount, setDocumentState, currentPage]);
|
|
@@ -811,19 +836,27 @@ var Viewer = ({ engine }) => {
|
|
|
811
836
|
{ id: "strikeout", name: "Strike", icon: "M13 10V3L4 14h7v7l9-11h-7z" },
|
|
812
837
|
{ 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" }
|
|
813
838
|
];
|
|
814
|
-
return /* @__PURE__ */ jsxs5(
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
839
|
+
return /* @__PURE__ */ jsxs5(
|
|
840
|
+
"div",
|
|
841
|
+
{
|
|
842
|
+
ref: viewerRef,
|
|
843
|
+
"data-papyrus-theme": uiTheme,
|
|
844
|
+
className: `papyrus-viewer papyrus-theme flex-1 overflow-auto flex flex-col items-center ${paddingY} relative custom-scrollbar scroll-smooth ${isDark ? "bg-[#121212]" : "bg-[#e9ecef]"}`,
|
|
845
|
+
children: [
|
|
846
|
+
/* @__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, availableWidth: availableWidth ?? void 0 }) }, idx)) }),
|
|
847
|
+
/* @__PURE__ */ jsx5("div", { className: `fixed ${toolDockPosition} 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(
|
|
848
|
+
"button",
|
|
849
|
+
{
|
|
850
|
+
onClick: () => setDocumentState({ activeTool: tool.id }),
|
|
851
|
+
className: `w-10 h-10 rounded-xl flex items-center justify-center transition-all ${activeTool === tool.id ? "text-white shadow-lg" : "text-gray-400"}`,
|
|
852
|
+
style: activeTool === tool.id ? { backgroundColor: accentColor } : void 0,
|
|
853
|
+
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 }) })
|
|
854
|
+
},
|
|
855
|
+
tool.id
|
|
856
|
+
)) })
|
|
857
|
+
]
|
|
858
|
+
}
|
|
859
|
+
);
|
|
827
860
|
};
|
|
828
861
|
var Viewer_default = Viewer;
|
|
829
862
|
export {
|