genus-pdf-viewer 0.2.3 → 0.2.10

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.
Files changed (21) hide show
  1. package/README.md +34 -7
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/index.js.map +1 -1
  6. package/dist/pdf.worker.bootstrap.mjs +43 -0
  7. package/dist/pdf.worker.min.mjs +4 -4
  8. package/dist/styles.css +211 -34
  9. package/dist/styles.d.ts +1 -1
  10. package/dist/styles.d.ts.map +1 -1
  11. package/dist/styles.js +211 -34
  12. package/dist/styles.js.map +1 -1
  13. package/dist/types.d.ts +3 -0
  14. package/dist/types.d.ts.map +1 -1
  15. package/dist/types.js +0 -0
  16. package/dist/types.js.map +0 -0
  17. package/dist/viewer.d.ts +6 -0
  18. package/dist/viewer.d.ts.map +1 -1
  19. package/dist/viewer.js +640 -85
  20. package/dist/viewer.js.map +1 -1
  21. package/package.json +3 -5
package/dist/styles.css CHANGED
@@ -1,5 +1,9 @@
1
1
  :host {
2
2
  display: block;
3
+ width: 100%;
4
+ height: 100%;
5
+ min-width: 0;
6
+ min-height: 0;
3
7
  color: #0f172a;
4
8
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
5
9
  }
@@ -11,8 +15,8 @@
11
15
  .shell {
12
16
  display: flex;
13
17
  flex-direction: column;
14
- gap: 12px;
15
18
  width: 100%;
19
+ height: 100%;
16
20
  min-height: 320px;
17
21
  background: #f8fafc;
18
22
  border: 1px solid #dbe4ee;
@@ -24,14 +28,16 @@
24
28
  display: flex;
25
29
  align-items: center;
26
30
  flex-wrap: nowrap;
27
- gap: 8px;
28
- padding: 10px 12px;
29
- background: rgba(255, 255, 255, 0.92);
30
- border-bottom: 1px solid #dbe4ee;
31
+ gap: 10px;
32
+ min-height: 56px;
33
+ padding: 10px 16px;
34
+ background: rgba(248, 250, 252, 0.98);
35
+ border-bottom: 1px solid #e2e8f0;
31
36
  position: sticky;
32
37
  top: 0;
33
38
  z-index: 2;
34
- backdrop-filter: blur(14px);
39
+ backdrop-filter: blur(10px);
40
+ overflow: hidden;
35
41
  }
36
42
 
37
43
  .toolbar[hidden] {
@@ -41,7 +47,7 @@
41
47
  .toolbar-group {
42
48
  display: flex;
43
49
  align-items: center;
44
- gap: 6px;
50
+ gap: 8px;
45
51
  flex-wrap: nowrap;
46
52
  flex: 0 0 auto;
47
53
  min-width: 0;
@@ -49,35 +55,38 @@
49
55
 
50
56
  .toolbar-group-actions {
51
57
  margin-left: auto;
58
+ padding-left: 4px;
52
59
  }
53
60
 
54
61
  .toolbar button {
55
62
  appearance: none;
56
- border: 1px solid #cbd5e1;
63
+ border: 1px solid #d7dee8;
57
64
  background: #ffffff;
58
- color: #0f172a;
59
- border-radius: 999px;
60
- min-width: 32px;
61
- height: 34px;
62
- padding: 0 10px;
65
+ color: #334155;
66
+ border-radius: 10px;
67
+ min-width: 36px;
68
+ height: 36px;
69
+ padding: 0 12px;
63
70
  font: inherit;
64
- font-weight: 700;
71
+ font-size: 12px;
72
+ font-weight: 600;
65
73
  cursor: pointer;
66
74
  flex: 0 0 auto;
67
75
  transition:
68
- transform 140ms ease,
69
76
  background-color 180ms ease,
70
77
  border-color 180ms ease,
71
- box-shadow 180ms ease;
78
+ color 180ms ease;
79
+ white-space: nowrap;
72
80
  }
73
81
 
74
82
  .toolbar button:hover:not(:disabled) {
75
- transform: translateY(-1px);
76
- box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
83
+ background: #f8fafc;
84
+ border-color: #cbd5e1;
85
+ color: #0f172a;
77
86
  }
78
87
 
79
88
  .toolbar button:active:not(:disabled) {
80
- transform: translateY(0);
89
+ background: #f1f5f9;
81
90
  }
82
91
 
83
92
  .toolbar button:disabled {
@@ -86,23 +95,67 @@
86
95
  }
87
96
 
88
97
  .toolbar button.primary {
89
- background: #0f766e;
90
- border-color: #0f766e;
91
- color: #f8fafc;
98
+ background: #ffffff;
99
+ border-color: #d7dee8;
100
+ color: #0f766e;
101
+ }
102
+
103
+ .toolbar button.icon-button {
104
+ width: 36px;
105
+ min-width: 36px;
106
+ height: 36px;
107
+ padding: 0;
108
+ display: inline-flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ border-radius: 10px;
112
+ }
113
+
114
+ .toolbar button.icon-button svg {
115
+ width: 18px;
116
+ height: 18px;
117
+ display: block;
118
+ }
119
+
120
+ .toolbar button.compact {
121
+ display: inline-flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ gap: 6px;
125
+ }
126
+
127
+ .toolbar button.compact .button-icon {
128
+ width: 14px;
129
+ height: 14px;
130
+ display: inline-flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ flex: 0 0 auto;
134
+ }
135
+
136
+ .toolbar button.compact .button-icon svg {
137
+ width: 14px;
138
+ height: 14px;
139
+ display: block;
140
+ }
141
+
142
+ .toolbar button.compact .button-label {
143
+ flex: 0 0 auto;
92
144
  }
93
145
 
94
146
  .toolbar .value {
95
147
  min-width: 56px;
96
148
  text-align: center;
97
- font-size: 13px;
98
- color: #475569;
149
+ font-size: 12px;
150
+ color: #64748b;
99
151
  flex: 0 0 auto;
152
+ font-variant-numeric: tabular-nums;
100
153
  }
101
154
 
102
155
  .stage {
156
+ flex: 1 1 auto;
103
157
  position: relative;
104
- min-height: 320px;
105
- max-height: 80vh;
158
+ min-height: 0;
106
159
  overflow: auto;
107
160
  scroll-behavior: smooth;
108
161
  overscroll-behavior: contain;
@@ -117,6 +170,10 @@
117
170
  place-items: center;
118
171
  }
119
172
 
173
+ .stage.native-stage {
174
+ display: block;
175
+ }
176
+
120
177
  .page-stack {
121
178
  display: flex;
122
179
  flex-direction: column;
@@ -149,6 +206,53 @@ canvas {
149
206
  transition: filter 180ms ease;
150
207
  }
151
208
 
209
+ .native-page {
210
+ width: 100%;
211
+ min-height: calc(100% - 32px);
212
+ display: flex;
213
+ flex-direction: column;
214
+ gap: 12px;
215
+ padding: 12px;
216
+ }
217
+
218
+ .native-frame {
219
+ width: 100%;
220
+ min-height: 70vh;
221
+ flex: 1 1 auto;
222
+ border: 0;
223
+ border-radius: 12px;
224
+ background: #ffffff;
225
+ }
226
+
227
+ .native-actions {
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: space-between;
231
+ gap: 12px;
232
+ flex-wrap: wrap;
233
+ }
234
+
235
+ .native-note {
236
+ margin: 0;
237
+ color: #475569;
238
+ font-size: 13px;
239
+ line-height: 1.5;
240
+ }
241
+
242
+ .native-link {
243
+ display: inline-flex;
244
+ align-items: center;
245
+ min-height: 36px;
246
+ padding: 0 14px;
247
+ border-radius: 999px;
248
+ background: #0f766e;
249
+ color: #f8fafc;
250
+ font-size: 12px;
251
+ font-weight: 700;
252
+ text-decoration: none;
253
+ white-space: nowrap;
254
+ }
255
+
152
256
  .status {
153
257
  position: absolute;
154
258
  inset: 16px;
@@ -168,28 +272,101 @@ canvas {
168
272
  display: flex;
169
273
  }
170
274
 
275
+ :host([compact-ui]) .toolbar {
276
+ gap: 6px;
277
+ min-height: 52px;
278
+ padding: 10px 8px;
279
+ }
280
+
281
+ :host([compact-ui]) .toolbar-group {
282
+ gap: 6px;
283
+ }
284
+
285
+ :host([compact-ui]) .toolbar-group-actions {
286
+ margin-left: 0;
287
+ padding-left: 0;
288
+ }
289
+
290
+ :host([compact-ui]) .toolbar button {
291
+ min-width: 34px;
292
+ min-height: 36px;
293
+ height: 36px;
294
+ padding: 0 8px;
295
+ font-size: 11px;
296
+ border-radius: 9px;
297
+ }
298
+
299
+ :host([compact-ui]) .toolbar button.icon-button {
300
+ width: 36px;
301
+ min-width: 36px;
302
+ height: 36px;
303
+ padding: 0;
304
+ }
305
+
306
+ :host([compact-ui]) .toolbar button.compact {
307
+ width: 36px;
308
+ min-width: 36px;
309
+ padding: 0;
310
+ gap: 0;
311
+ }
312
+
313
+ :host([compact-ui]) .toolbar button.compact .button-label {
314
+ display: none;
315
+ }
316
+
317
+ :host([compact-ui]) .toolbar .value {
318
+ min-width: 42px;
319
+ font-size: 11px;
320
+ }
321
+
322
+ :host([compact-ui]) .stage {
323
+ padding: 12px;
324
+ }
325
+
171
326
  @media (max-width: 720px) {
172
327
  .toolbar {
173
- gap: 6px;
174
- padding: 8px 10px;
328
+ gap: 4px;
329
+ min-height: 44px;
330
+ padding: 8px;
331
+ }
332
+
333
+ .toolbar-group {
334
+ gap: 4px;
175
335
  }
176
336
 
177
337
  .toolbar button {
178
338
  min-width: 30px;
179
339
  min-height: 32px;
180
340
  height: 32px;
181
- padding: 0 8px;
182
- font-size: 12px;
341
+ padding: 0 7px;
342
+ font-size: 11px;
343
+ border-radius: 8px;
344
+ }
345
+
346
+ .toolbar button.icon-button {
347
+ width: 32px;
348
+ min-width: 32px;
349
+ height: 32px;
350
+ padding: 0;
351
+ }
352
+
353
+ .toolbar button.compact {
354
+ width: 32px;
355
+ min-width: 32px;
356
+ padding: 0;
357
+ gap: 0;
358
+ }
359
+
360
+ .toolbar button.compact .button-label {
361
+ display: none;
183
362
  }
184
363
 
185
364
  .toolbar .value {
186
- min-width: 48px;
187
- font-size: 12px;
365
+ min-width: 40px;
366
+ font-size: 11px;
188
367
  }
189
368
 
190
369
  .stage {
191
- max-height: none;
192
- min-height: 60vh;
193
370
  padding: 12px;
194
371
  }
195
372
  }
package/dist/styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const VIEWER_STYLES = "\n:host {\n display: block;\n color: #0f172a;\n font-family: \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.shell {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 100%;\n min-height: 320px;\n background: #f8fafc;\n border: 1px solid #dbe4ee;\n border-radius: 18px;\n overflow: hidden;\n}\n\n.toolbar {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 8px;\n padding: 10px 12px;\n background: rgba(255, 255, 255, 0.92);\n border-bottom: 1px solid #dbe4ee;\n position: sticky;\n top: 0;\n z-index: 2;\n backdrop-filter: blur(14px);\n}\n\n.toolbar[hidden] {\n display: none;\n}\n\n.toolbar-group {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: nowrap;\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.toolbar-group-actions {\n margin-left: auto;\n}\n\n.toolbar button {\n appearance: none;\n border: 1px solid #cbd5e1;\n background: #ffffff;\n color: #0f172a;\n border-radius: 999px;\n min-width: 32px;\n height: 34px;\n padding: 0 10px;\n font: inherit;\n font-weight: 700;\n cursor: pointer;\n flex: 0 0 auto;\n transition:\n transform 140ms ease,\n background-color 180ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease;\n}\n\n.toolbar button:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);\n}\n\n.toolbar button:active:not(:disabled) {\n transform: translateY(0);\n}\n\n.toolbar button:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n\n.toolbar button.primary {\n background: #0f766e;\n border-color: #0f766e;\n color: #f8fafc;\n}\n\n.toolbar .value {\n min-width: 56px;\n text-align: center;\n font-size: 13px;\n color: #475569;\n flex: 0 0 auto;\n}\n\n.stage {\n position: relative;\n min-height: 320px;\n max-height: 80vh;\n overflow: auto;\n scroll-behavior: smooth;\n overscroll-behavior: contain;\n background:\n radial-gradient(circle at top, rgba(15, 118, 110, 0.08), transparent 22%),\n #eef2f7;\n padding: 16px;\n}\n\n.stage.single {\n display: grid;\n place-items: center;\n}\n\n.page-stack {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: center;\n}\n\n.page {\n background: #ffffff;\n border-radius: 8px;\n box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);\n opacity: 1;\n transform: translateY(0) scale(1);\n transition:\n opacity 220ms ease,\n transform 220ms ease,\n box-shadow 220ms ease;\n}\n\n.page.entering {\n opacity: 0;\n transform: translateY(16px) scale(0.985);\n}\n\ncanvas {\n display: block;\n max-width: 100%;\n height: auto;\n border-radius: 8px;\n transition: filter 180ms ease;\n}\n\n.status {\n position: absolute;\n inset: 16px;\n display: none;\n align-items: center;\n justify-content: center;\n padding: 24px;\n border-radius: 12px;\n background: rgba(248, 250, 252, 0.92);\n color: #475569;\n text-align: center;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.status.visible {\n display: flex;\n}\n\n@media (max-width: 720px) {\n .toolbar {\n gap: 6px;\n padding: 8px 10px;\n }\n\n .toolbar button {\n min-width: 30px;\n min-height: 32px;\n height: 32px;\n padding: 0 8px;\n font-size: 12px;\n }\n\n .toolbar .value {\n min-width: 48px;\n font-size: 12px;\n }\n\n .stage {\n max-height: none;\n min-height: 60vh;\n padding: 12px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toolbar button,\n .page,\n canvas {\n transition: none;\n }\n\n .stage {\n scroll-behavior: auto;\n }\n}\n";
1
+ export declare const VIEWER_STYLES = "\n:host {\n display: block;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n color: #0f172a;\n font-family: \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.shell {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 320px;\n background: #f8fafc;\n border: 1px solid #dbe4ee;\n border-radius: 18px;\n overflow: hidden;\n}\n\n.toolbar {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 10px;\n min-height: 56px;\n padding: 10px 16px;\n background: rgba(248, 250, 252, 0.98);\n border-bottom: 1px solid #e2e8f0;\n position: sticky;\n top: 0;\n z-index: 2;\n backdrop-filter: blur(10px);\n overflow: hidden;\n}\n\n.toolbar[hidden] {\n display: none;\n}\n\n.toolbar-group {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.toolbar-group-actions {\n margin-left: auto;\n padding-left: 4px;\n}\n\n.toolbar button {\n appearance: none;\n border: 1px solid #d7dee8;\n background: #ffffff;\n color: #334155;\n border-radius: 10px;\n min-width: 36px;\n height: 36px;\n padding: 0 12px;\n font: inherit;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n flex: 0 0 auto;\n transition:\n background-color 180ms ease,\n border-color 180ms ease,\n color 180ms ease;\n white-space: nowrap;\n}\n\n.toolbar button:hover:not(:disabled) {\n background: #f8fafc;\n border-color: #cbd5e1;\n color: #0f172a;\n}\n\n.toolbar button:active:not(:disabled) {\n background: #f1f5f9;\n}\n\n.toolbar button:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n\n.toolbar button.primary {\n background: #ffffff;\n border-color: #d7dee8;\n color: #0f766e;\n}\n\n.toolbar button.icon-button {\n width: 36px;\n min-width: 36px;\n height: 36px;\n padding: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n}\n\n.toolbar button.icon-button svg {\n width: 18px;\n height: 18px;\n display: block;\n}\n\n.toolbar button.compact {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n}\n\n.toolbar button.compact .button-icon {\n width: 14px;\n height: 14px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n}\n\n.toolbar button.compact .button-icon svg {\n width: 14px;\n height: 14px;\n display: block;\n}\n\n.toolbar button.compact .button-label {\n flex: 0 0 auto;\n}\n\n.toolbar .value {\n min-width: 56px;\n text-align: center;\n font-size: 12px;\n color: #64748b;\n flex: 0 0 auto;\n font-variant-numeric: tabular-nums;\n}\n\n.stage {\n flex: 1 1 auto;\n position: relative;\n min-height: 0;\n overflow: auto;\n scroll-behavior: smooth;\n overscroll-behavior: contain;\n background:\n radial-gradient(circle at top, rgba(15, 118, 110, 0.08), transparent 22%),\n #eef2f7;\n padding: 16px;\n}\n\n.stage.single {\n display: grid;\n place-items: center;\n}\n\n.stage.native-stage {\n display: block;\n}\n\n.page-stack {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: center;\n}\n\n.page {\n background: #ffffff;\n border-radius: 8px;\n box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);\n opacity: 1;\n transform: translateY(0) scale(1);\n transition:\n opacity 220ms ease,\n transform 220ms ease,\n box-shadow 220ms ease;\n}\n\n.page.entering {\n opacity: 0;\n transform: translateY(16px) scale(0.985);\n}\n\ncanvas {\n display: block;\n max-width: 100%;\n height: auto;\n border-radius: 8px;\n transition: filter 180ms ease;\n}\n\n.native-page {\n width: 100%;\n min-height: calc(100% - 32px);\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px;\n}\n\n.native-frame {\n width: 100%;\n min-height: 70vh;\n flex: 1 1 auto;\n border: 0;\n border-radius: 12px;\n background: #ffffff;\n}\n\n.native-actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.native-note {\n margin: 0;\n color: #475569;\n font-size: 13px;\n line-height: 1.5;\n}\n\n.native-link {\n display: inline-flex;\n align-items: center;\n min-height: 36px;\n padding: 0 14px;\n border-radius: 999px;\n background: #0f766e;\n color: #f8fafc;\n font-size: 12px;\n font-weight: 700;\n text-decoration: none;\n white-space: nowrap;\n}\n\n.status {\n position: absolute;\n inset: 16px;\n display: none;\n align-items: center;\n justify-content: center;\n padding: 24px;\n border-radius: 12px;\n background: rgba(248, 250, 252, 0.92);\n color: #475569;\n text-align: center;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.status.visible {\n display: flex;\n}\n\n:host([compact-ui]) .toolbar {\n gap: 6px;\n min-height: 52px;\n padding: 10px 8px;\n}\n\n:host([compact-ui]) .toolbar-group {\n gap: 6px;\n}\n\n:host([compact-ui]) .toolbar-group-actions {\n margin-left: 0;\n padding-left: 0;\n}\n\n:host([compact-ui]) .toolbar button {\n min-width: 34px;\n min-height: 36px;\n height: 36px;\n padding: 0 8px;\n font-size: 11px;\n border-radius: 9px;\n}\n\n:host([compact-ui]) .toolbar button.icon-button {\n width: 36px;\n min-width: 36px;\n height: 36px;\n padding: 0;\n}\n\n:host([compact-ui]) .toolbar button.compact {\n width: 36px;\n min-width: 36px;\n padding: 0;\n gap: 0;\n}\n\n:host([compact-ui]) .toolbar button.compact .button-label {\n display: none;\n}\n\n:host([compact-ui]) .toolbar .value {\n min-width: 42px;\n font-size: 11px;\n}\n\n:host([compact-ui]) .stage {\n padding: 12px;\n}\n\n@media (max-width: 720px) {\n .toolbar {\n gap: 4px;\n min-height: 44px;\n padding: 8px;\n }\n\n .toolbar-group {\n gap: 4px;\n }\n\n .toolbar button {\n min-width: 30px;\n min-height: 32px;\n height: 32px;\n padding: 0 7px;\n font-size: 11px;\n border-radius: 8px;\n }\n\n .toolbar button.icon-button {\n width: 32px;\n min-width: 32px;\n height: 32px;\n padding: 0;\n }\n\n .toolbar button.compact {\n width: 32px;\n min-width: 32px;\n padding: 0;\n gap: 0;\n }\n\n .toolbar button.compact .button-label {\n display: none;\n }\n\n .toolbar .value {\n min-width: 40px;\n font-size: 11px;\n }\n\n .stage {\n padding: 12px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toolbar button,\n .page,\n canvas {\n transition: none;\n }\n\n .stage {\n scroll-behavior: auto;\n }\n}\n";
2
2
  //# sourceMappingURL=styles.d.ts.map
package/dist/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,shHAgNzB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,05MAiYzB,CAAC"}