@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.js
CHANGED
|
@@ -17,15 +17,15 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
18
|
|
|
19
19
|
// index.ts
|
|
20
|
-
var
|
|
21
|
-
__export(
|
|
20
|
+
var ui_react_exports = {};
|
|
21
|
+
__export(ui_react_exports, {
|
|
22
22
|
PageRenderer: () => PageRenderer_default,
|
|
23
23
|
SidebarLeft: () => SidebarLeft_default,
|
|
24
24
|
SidebarRight: () => SidebarRight_default,
|
|
25
25
|
Topbar: () => Topbar_default,
|
|
26
26
|
Viewer: () => Viewer_default
|
|
27
27
|
});
|
|
28
|
-
module.exports = __toCommonJS(
|
|
28
|
+
module.exports = __toCommonJS(ui_react_exports);
|
|
29
29
|
|
|
30
30
|
// components/Topbar.tsx
|
|
31
31
|
var import_react = require("react");
|
|
@@ -81,95 +81,102 @@ var Topbar = ({
|
|
|
81
81
|
{ id: "dark", name: "Invertido", color: "bg-gray-800" },
|
|
82
82
|
{ id: "high-contrast", name: "Contraste", color: "bg-black" }
|
|
83
83
|
];
|
|
84
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
"input",
|
|
98
|
-
{
|
|
99
|
-
type: "text",
|
|
100
|
-
className: "w-10 text-center bg-transparent focus:outline-none font-bold text-sm",
|
|
101
|
-
value: pageInput,
|
|
102
|
-
onChange: (e) => setPageInput(e.target.value),
|
|
103
|
-
onKeyDown: (e) => e.key === "Enter" && handlePageChange(parseInt(pageInput)),
|
|
104
|
-
onBlur: () => handlePageChange(parseInt(pageInput))
|
|
105
|
-
}
|
|
106
|
-
),
|
|
107
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "opacity-40 px-1", children: "/" }),
|
|
108
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "opacity-80 text-sm", children: pageCount > 0 ? pageCount : "\u2014" }),
|
|
109
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => handlePageChange(currentPage + 1), className: "p-1.5 rounded transition-all hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
|
|
110
|
-
] }),
|
|
111
|
-
showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex items-center rounded-lg p-1 border ${isDark ? "bg-[#2a2a2a] border-[#444]" : "bg-gray-50 border-gray-200"}`, children: [
|
|
112
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => handleZoom(-0.1), className: "p-1.5 rounded hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }) }),
|
|
113
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "px-3 text-xs font-bold min-w-[50px] text-center", children: [
|
|
114
|
-
Math.round(zoom * 100),
|
|
115
|
-
"%"
|
|
84
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
"data-papyrus-theme": uiTheme,
|
|
88
|
+
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"}`,
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center space-x-3", children: [
|
|
91
|
+
showSidebarLeftToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: toggleSidebarLeft, className: `p-2 rounded-md ${isDark ? "hover:bg-white/10" : "hover:bg-gray-100"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) }),
|
|
92
|
+
showBrand && (brand ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-bold text-lg tracking-tight", style: { color: accentColor }, children: [
|
|
93
|
+
"Papyrus",
|
|
94
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: isDark ? "text-white" : "text-gray-900", children: "Core" })
|
|
95
|
+
] })),
|
|
96
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime.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 })
|
|
116
97
|
] }),
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
{
|
|
136
|
-
onClick: () => {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
98
|
+
(showPageControls || showZoomControls) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center space-x-4", children: [
|
|
99
|
+
showPageControls && /* @__PURE__ */ (0, import_jsx_runtime.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: [
|
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => handlePageChange(currentPage - 1), className: "p-1.5 rounded transition-all hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
|
|
101
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
102
|
+
"input",
|
|
103
|
+
{
|
|
104
|
+
type: "text",
|
|
105
|
+
className: "papyrus-input w-10 text-center bg-transparent focus:outline-none font-bold text-sm",
|
|
106
|
+
value: pageInput,
|
|
107
|
+
onChange: (e) => setPageInput(e.target.value),
|
|
108
|
+
onKeyDown: (e) => e.key === "Enter" && handlePageChange(parseInt(pageInput)),
|
|
109
|
+
onBlur: () => handlePageChange(parseInt(pageInput))
|
|
110
|
+
}
|
|
111
|
+
),
|
|
112
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "opacity-40 px-1", children: "/" }),
|
|
113
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "opacity-80 text-sm", children: pageCount > 0 ? pageCount : "\u2014" }),
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => handlePageChange(currentPage + 1), className: "p-1.5 rounded transition-all hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
|
|
115
|
+
] }),
|
|
116
|
+
showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime.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: [
|
|
117
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => handleZoom(-0.1), className: "p-1.5 rounded hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }) }),
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "px-3 text-xs font-bold min-w-[50px] text-center", children: [
|
|
119
|
+
Math.round(zoom * 100),
|
|
120
|
+
"%"
|
|
121
|
+
] }),
|
|
122
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => handleZoom(0.1), className: "p-1.5 rounded hover:brightness-110", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) })
|
|
123
|
+
] })
|
|
124
|
+
] }),
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center space-x-3", children: [
|
|
126
|
+
showPageThemeSelector && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
128
|
+
"button",
|
|
129
|
+
{
|
|
130
|
+
onClick: () => setShowPageThemes(!showPageThemes),
|
|
131
|
+
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"}`,
|
|
132
|
+
children: [
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `w-3 h-3 rounded-full border ${themes.find((t) => t.id === pageTheme)?.color}` }),
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "TEMA" })
|
|
135
|
+
]
|
|
136
|
+
}
|
|
137
|
+
),
|
|
138
|
+
showPageThemes && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
|
|
139
|
+
"button",
|
|
140
|
+
{
|
|
141
|
+
onClick: () => {
|
|
142
|
+
setDocumentState({ pageTheme: t.id });
|
|
143
|
+
setShowPageThemes(false);
|
|
144
|
+
},
|
|
145
|
+
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"}`,
|
|
146
|
+
style: pageTheme === t.id ? { backgroundColor: accentColor } : void 0,
|
|
147
|
+
children: [
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `w-3 h-3 rounded-full border ${t.color}` }),
|
|
149
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t.name })
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
t.id
|
|
153
|
+
)) })
|
|
154
|
+
] }),
|
|
155
|
+
showUIToggle && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" }) }) }),
|
|
156
|
+
showUpload && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
157
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
|
+
"button",
|
|
159
|
+
{
|
|
160
|
+
onClick: () => fileInputRef.current?.click(),
|
|
161
|
+
className: "px-4 py-1.5 text-white rounded-md text-sm font-bold shadow-md active:scale-95",
|
|
162
|
+
style: { backgroundColor: accentColor },
|
|
163
|
+
children: "UPLOAD"
|
|
164
|
+
}
|
|
165
|
+
),
|
|
166
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "file", ref: fileInputRef, className: "hidden", accept: ".pdf,.epub,.txt", onChange: async (e) => {
|
|
167
|
+
const file = e.target.files?.[0];
|
|
168
|
+
if (file) {
|
|
169
|
+
setDocumentState({ isLoaded: false });
|
|
170
|
+
await engine.load(file);
|
|
171
|
+
setDocumentState({ isLoaded: true, pageCount: engine.getPageCount(), currentPage: 1, outline: await engine.getOutline() });
|
|
172
|
+
}
|
|
173
|
+
} })
|
|
174
|
+
] }),
|
|
175
|
+
showSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => toggleSidebarRight("search"), className: `p-2 rounded-md ${isDark ? "hover:bg-white/10" : "hover:bg-gray-100"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
|
|
176
|
+
] })
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
);
|
|
173
180
|
};
|
|
174
181
|
var Topbar_default = Topbar;
|
|
175
182
|
|
|
@@ -300,39 +307,46 @@ var SidebarLeft = ({ engine }) => {
|
|
|
300
307
|
} = (0, import_core2.useViewerStore)();
|
|
301
308
|
const isDark = uiTheme === "dark";
|
|
302
309
|
if (!sidebarLeftOpen) return null;
|
|
303
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
310
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
311
|
+
"div",
|
|
312
|
+
{
|
|
313
|
+
"data-papyrus-theme": uiTheme,
|
|
314
|
+
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"}`,
|
|
315
|
+
children: [
|
|
316
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `p-4 border-b flex flex-col space-y-4 ${isDark ? "border-[#3a3a3a]" : "border-gray-100"}`, children: [
|
|
317
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
318
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: `text-sm font-bold uppercase tracking-widest ${isDark ? "text-gray-100" : "text-gray-800"}`, children: sidebarLeftTab === "thumbnails" ? "Thumbnails" : "Sum\xE1rio" }),
|
|
319
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => setDocumentState({ sidebarLeftOpen: false }), className: "text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
320
|
+
] }),
|
|
321
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-1", children: [
|
|
322
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
323
|
+
"button",
|
|
324
|
+
{
|
|
325
|
+
onClick: () => setSidebarLeftTab("thumbnails"),
|
|
326
|
+
className: `p-2 rounded-md ${sidebarLeftTab === "thumbnails" ? isDark ? "bg-white/10 text-white" : "bg-white shadow-sm border border-gray-200" : "text-gray-400"}`,
|
|
327
|
+
style: sidebarLeftTab === "thumbnails" && !isDark ? { color: accentColor } : void 0,
|
|
328
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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" }) })
|
|
329
|
+
}
|
|
330
|
+
),
|
|
331
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
332
|
+
"button",
|
|
333
|
+
{
|
|
334
|
+
onClick: () => setSidebarLeftTab("summary"),
|
|
335
|
+
className: `p-2 rounded-md ${sidebarLeftTab === "summary" ? isDark ? "bg-white/10 text-white" : "bg-white shadow-sm border border-gray-200" : "text-gray-400"}`,
|
|
336
|
+
style: sidebarLeftTab === "summary" && !isDark ? { color: accentColor } : void 0,
|
|
337
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) })
|
|
338
|
+
}
|
|
339
|
+
)
|
|
340
|
+
] })
|
|
341
|
+
] }),
|
|
342
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-3", children: sidebarLeftTab === "thumbnails" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-1", children: Array.from({ length: pageCount }).map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Thumbnail, { engine, pageIndex: idx, isDark, accentColor, active: currentPage === idx + 1, onClick: () => {
|
|
343
|
+
engine.goToPage(idx + 1);
|
|
344
|
+
setDocumentState({ currentPage: idx + 1 });
|
|
345
|
+
triggerScrollToPage(idx);
|
|
346
|
+
} }, idx)) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col space-y-0.5", children: outline.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineNode, { item, engine, isDark, accentColor }, i)) }) })
|
|
347
|
+
]
|
|
348
|
+
}
|
|
349
|
+
);
|
|
336
350
|
};
|
|
337
351
|
var SidebarLeft_default = SidebarLeft;
|
|
338
352
|
|
|
@@ -380,114 +394,121 @@ var SidebarRight = ({ engine }) => {
|
|
|
380
394
|
setIsSearching(false);
|
|
381
395
|
};
|
|
382
396
|
if (!sidebarRightOpen) return null;
|
|
383
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
410
|
-
"input",
|
|
411
|
-
{
|
|
412
|
-
type: "text",
|
|
413
|
-
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"}`,
|
|
414
|
-
placeholder: "O que voc\xEA procura?",
|
|
415
|
-
value: query,
|
|
416
|
-
onChange: (e) => setQuery(e.target.value)
|
|
417
|
-
}
|
|
418
|
-
),
|
|
419
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "absolute right-3 top-2.5 text-gray-400 transition-colors", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
|
|
420
|
-
] }),
|
|
421
|
-
isSearching && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 space-y-3", children: [
|
|
422
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-6 h-6 border-2 border-t-transparent rounded-full animate-spin", style: { borderColor: accentColor } }),
|
|
423
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] font-bold text-gray-500 uppercase", children: "Varrendo documento..." })
|
|
424
|
-
] }),
|
|
425
|
-
!isSearching && searchResults.map((res, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
426
|
-
"div",
|
|
427
|
-
{
|
|
428
|
-
onClick: () => {
|
|
429
|
-
setDocumentState({ activeSearchIndex: idx });
|
|
430
|
-
triggerScrollToPage(res.pageIndex);
|
|
431
|
-
},
|
|
432
|
-
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"}`,
|
|
433
|
-
style: idx === activeSearchIndex ? { borderColor: accentColor, backgroundColor: accentSoft } : void 0,
|
|
434
|
-
children: [
|
|
435
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
|
|
436
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
437
|
-
"span",
|
|
438
|
-
{
|
|
439
|
-
className: `text-[10px] font-black uppercase tracking-tighter ${idx === activeSearchIndex ? "" : "text-gray-400"}`,
|
|
440
|
-
style: idx === activeSearchIndex ? { color: accentColor } : void 0,
|
|
441
|
-
children: [
|
|
442
|
-
"P\xC1GINA ",
|
|
443
|
-
res.pageIndex + 1
|
|
444
|
-
]
|
|
445
|
-
}
|
|
446
|
-
),
|
|
447
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
448
|
-
"svg",
|
|
449
|
-
{
|
|
450
|
-
className: `w-3 h-3 transition-transform ${idx === activeSearchIndex ? "" : "text-gray-300"}`,
|
|
451
|
-
style: idx === activeSearchIndex ? { color: accentColor } : void 0,
|
|
452
|
-
fill: "none",
|
|
453
|
-
stroke: "currentColor",
|
|
454
|
-
viewBox: "0 0 24 24",
|
|
455
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M9 5l7 7-7 7" })
|
|
456
|
-
}
|
|
457
|
-
)
|
|
458
|
-
] }),
|
|
459
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: `text-[11px] font-medium leading-relaxed italic ${isDark ? "text-gray-400" : "text-gray-600"}`, children: [
|
|
460
|
-
"...",
|
|
461
|
-
res.text,
|
|
462
|
-
"..."
|
|
463
|
-
] })
|
|
464
|
-
]
|
|
465
|
-
},
|
|
466
|
-
idx
|
|
467
|
-
))
|
|
468
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
|
|
469
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-6 flex items-center", children: [
|
|
470
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "WORKSET" }),
|
|
471
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 h-px bg-current ml-3 opacity-10" })
|
|
472
|
-
] }),
|
|
473
|
-
annotations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-center py-20", children: [
|
|
474
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-12 h-12 bg-gray-500/10 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-6 h-6 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }) }),
|
|
475
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest", children: "Sem anota\xE7\xF5es" })
|
|
476
|
-
] }) : annotations.map((ann) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("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: [
|
|
477
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
|
|
478
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-2", children: [
|
|
479
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: ann.color } }),
|
|
480
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-[10px] font-black", style: { color: accentColor }, children: [
|
|
481
|
-
"P",
|
|
482
|
-
ann.pageIndex + 1
|
|
483
|
-
] })
|
|
397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
398
|
+
"div",
|
|
399
|
+
{
|
|
400
|
+
"data-papyrus-theme": uiTheme,
|
|
401
|
+
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"}`,
|
|
402
|
+
children: [
|
|
403
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `p-4 border-b flex items-center justify-between shrink-0 ${isDark ? "border-[#333]" : "border-gray-100"}`, children: [
|
|
404
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex space-x-6", children: [
|
|
405
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
406
|
+
"button",
|
|
407
|
+
{
|
|
408
|
+
onClick: () => toggleSidebarRight("search"),
|
|
409
|
+
className: `text-[10px] font-black uppercase tracking-widest pb-1 transition-all ${sidebarRightTab === "search" ? "border-b-2" : "text-gray-400"}`,
|
|
410
|
+
style: sidebarRightTab === "search" ? { color: accentColor, borderColor: accentColor } : void 0,
|
|
411
|
+
children: "Busca"
|
|
412
|
+
}
|
|
413
|
+
),
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
415
|
+
"button",
|
|
416
|
+
{
|
|
417
|
+
onClick: () => toggleSidebarRight("annotations"),
|
|
418
|
+
className: `text-[10px] font-black uppercase tracking-widest pb-1 transition-all ${sidebarRightTab === "annotations" ? "border-b-2" : "text-gray-400"}`,
|
|
419
|
+
style: sidebarRightTab === "annotations" ? { color: accentColor, borderColor: accentColor } : void 0,
|
|
420
|
+
children: "Notas"
|
|
421
|
+
}
|
|
422
|
+
)
|
|
484
423
|
] }),
|
|
485
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("
|
|
424
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => toggleSidebarRight(), className: "text-gray-400 hover:text-red-500 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
486
425
|
] }),
|
|
487
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
426
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 overflow-y-auto p-4 custom-scrollbar bg-opacity-50", children: sidebarRightTab === "search" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-4", children: [
|
|
427
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleSearch, className: "relative mb-6", children: [
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
429
|
+
"input",
|
|
430
|
+
{
|
|
431
|
+
type: "text",
|
|
432
|
+
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"}`,
|
|
433
|
+
placeholder: "O que voc\xEA procura?",
|
|
434
|
+
value: query,
|
|
435
|
+
onChange: (e) => setQuery(e.target.value)
|
|
436
|
+
}
|
|
437
|
+
),
|
|
438
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "absolute right-3 top-2.5 text-gray-400 transition-colors", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
|
|
439
|
+
] }),
|
|
440
|
+
isSearching && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 space-y-3", children: [
|
|
441
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-6 h-6 border-2 border-t-transparent rounded-full animate-spin", style: { borderColor: accentColor } }),
|
|
442
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] font-bold text-gray-500 uppercase", children: "Varrendo documento..." })
|
|
443
|
+
] }),
|
|
444
|
+
!isSearching && searchResults.map((res, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
445
|
+
"div",
|
|
446
|
+
{
|
|
447
|
+
onClick: () => {
|
|
448
|
+
setDocumentState({ activeSearchIndex: idx });
|
|
449
|
+
triggerScrollToPage(res.pageIndex);
|
|
450
|
+
},
|
|
451
|
+
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"}`,
|
|
452
|
+
style: idx === activeSearchIndex ? { borderColor: accentColor, backgroundColor: accentSoft } : void 0,
|
|
453
|
+
children: [
|
|
454
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
|
|
455
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
456
|
+
"span",
|
|
457
|
+
{
|
|
458
|
+
className: `text-[10px] font-black uppercase tracking-tighter ${idx === activeSearchIndex ? "" : "text-gray-400"}`,
|
|
459
|
+
style: idx === activeSearchIndex ? { color: accentColor } : void 0,
|
|
460
|
+
children: [
|
|
461
|
+
"P\xC1GINA ",
|
|
462
|
+
res.pageIndex + 1
|
|
463
|
+
]
|
|
464
|
+
}
|
|
465
|
+
),
|
|
466
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
467
|
+
"svg",
|
|
468
|
+
{
|
|
469
|
+
className: `w-3 h-3 transition-transform ${idx === activeSearchIndex ? "" : "text-gray-300"}`,
|
|
470
|
+
style: idx === activeSearchIndex ? { color: accentColor } : void 0,
|
|
471
|
+
fill: "none",
|
|
472
|
+
stroke: "currentColor",
|
|
473
|
+
viewBox: "0 0 24 24",
|
|
474
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M9 5l7 7-7 7" })
|
|
475
|
+
}
|
|
476
|
+
)
|
|
477
|
+
] }),
|
|
478
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: `text-[11px] font-medium leading-relaxed italic ${isDark ? "text-gray-400" : "text-gray-600"}`, children: [
|
|
479
|
+
"...",
|
|
480
|
+
res.text,
|
|
481
|
+
"..."
|
|
482
|
+
] })
|
|
483
|
+
]
|
|
484
|
+
},
|
|
485
|
+
idx
|
|
486
|
+
))
|
|
487
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
|
|
488
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-6 flex items-center", children: [
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "WORKSET" }),
|
|
490
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 h-px bg-current ml-3 opacity-10" })
|
|
491
|
+
] }),
|
|
492
|
+
annotations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-center py-20", children: [
|
|
493
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-12 h-12 bg-gray-500/10 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-6 h-6 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }) }),
|
|
494
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest", children: "Sem anota\xE7\xF5es" })
|
|
495
|
+
] }) : annotations.map((ann) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("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: [
|
|
496
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
|
|
497
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-2", children: [
|
|
498
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: ann.color } }),
|
|
499
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-[10px] font-black", style: { color: accentColor }, children: [
|
|
500
|
+
"P",
|
|
501
|
+
ann.pageIndex + 1
|
|
502
|
+
] })
|
|
503
|
+
] }),
|
|
504
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[9px] text-gray-400 font-bold", children: new Date(ann.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
|
|
505
|
+
] }),
|
|
506
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: `text-[11px] font-bold uppercase tracking-tight ${isDark ? "text-gray-200" : "text-gray-700"}`, children: ann.type })
|
|
507
|
+
] }, ann.id))
|
|
508
|
+
] }) })
|
|
509
|
+
]
|
|
510
|
+
}
|
|
511
|
+
);
|
|
491
512
|
};
|
|
492
513
|
var SidebarRight_default = SidebarRight;
|
|
493
514
|
|
|
@@ -587,6 +608,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
|
|
|
587
608
|
textLayerRef.current.innerHTML = "";
|
|
588
609
|
await engine.renderTextLayer(pageIndex, textLayerRef.current, renderScale);
|
|
589
610
|
}
|
|
611
|
+
if (!active || !textLayerRef.current) return;
|
|
590
612
|
if (!isElementRender && displaySize) {
|
|
591
613
|
if (canvasRef.current) {
|
|
592
614
|
canvasRef.current.style.width = `${displaySize.width}px`;
|
|
@@ -596,6 +618,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
|
|
|
596
618
|
textLayerRef.current.style.height = `${displaySize.height}px`;
|
|
597
619
|
}
|
|
598
620
|
} catch (err) {
|
|
621
|
+
if (!active) return;
|
|
599
622
|
console.error("[Papyrus] Falha na renderiza\xE7\xE3o:", err);
|
|
600
623
|
} finally {
|
|
601
624
|
if (active) setLoading(false);
|
|
@@ -818,6 +841,8 @@ var Viewer = ({ engine }) => {
|
|
|
818
841
|
return () => observer.disconnect();
|
|
819
842
|
}, []);
|
|
820
843
|
(0, import_react5.useEffect)(() => {
|
|
844
|
+
const root = viewerRef.current;
|
|
845
|
+
if (!root) return;
|
|
821
846
|
const observer = new IntersectionObserver((entries) => {
|
|
822
847
|
entries.forEach((entry) => {
|
|
823
848
|
if (entry.isIntersecting) {
|
|
@@ -825,11 +850,11 @@ var Viewer = ({ engine }) => {
|
|
|
825
850
|
if (pageIndex + 1 !== currentPage) setDocumentState({ currentPage: pageIndex + 1 });
|
|
826
851
|
}
|
|
827
852
|
});
|
|
828
|
-
}, { root
|
|
829
|
-
const pageElements =
|
|
830
|
-
pageElements
|
|
853
|
+
}, { root, threshold: 0.5 });
|
|
854
|
+
const pageElements = root.querySelectorAll(".page-container");
|
|
855
|
+
pageElements.forEach((el) => observer.observe(el));
|
|
831
856
|
return () => {
|
|
832
|
-
pageElements
|
|
857
|
+
pageElements.forEach((el) => observer.unobserve(el));
|
|
833
858
|
observer.disconnect();
|
|
834
859
|
};
|
|
835
860
|
}, [pageCount, setDocumentState, currentPage]);
|
|
@@ -840,19 +865,27 @@ var Viewer = ({ engine }) => {
|
|
|
840
865
|
{ id: "strikeout", name: "Strike", icon: "M13 10V3L4 14h7v7l9-11h-7z" },
|
|
841
866
|
{ 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" }
|
|
842
867
|
];
|
|
843
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
869
|
+
"div",
|
|
870
|
+
{
|
|
871
|
+
ref: viewerRef,
|
|
872
|
+
"data-papyrus-theme": uiTheme,
|
|
873
|
+
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]"}`,
|
|
874
|
+
children: [
|
|
875
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col items-center gap-6 w-full", children: pages.map((idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-page-index": idx, className: "page-container", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PageRenderer_default, { engine, pageIndex: idx, availableWidth: availableWidth ?? void 0 }) }, idx)) }),
|
|
876
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(
|
|
877
|
+
"button",
|
|
878
|
+
{
|
|
879
|
+
onClick: () => setDocumentState({ activeTool: tool.id }),
|
|
880
|
+
className: `w-10 h-10 rounded-xl flex items-center justify-center transition-all ${activeTool === tool.id ? "text-white shadow-lg" : "text-gray-400"}`,
|
|
881
|
+
style: activeTool === tool.id ? { backgroundColor: accentColor } : void 0,
|
|
882
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: tool.icon }) })
|
|
883
|
+
},
|
|
884
|
+
tool.id
|
|
885
|
+
)) })
|
|
886
|
+
]
|
|
887
|
+
}
|
|
888
|
+
);
|
|
856
889
|
};
|
|
857
890
|
var Viewer_default = Viewer;
|
|
858
891
|
// Annotate the CommonJS export names for ESM import in node:
|