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