genus-pdf-viewer 0.2.2 → 0.2.3

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 (6) hide show
  1. package/dist/styles.css +20 -10
  2. package/dist/styles.d.ts +1 -1
  3. package/dist/styles.d.ts.map +1 -1
  4. package/dist/styles.js +21 -11
  5. package/dist/styles.js.map +1 -1
  6. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -24,7 +24,7 @@
24
24
  display: flex;
25
25
  align-items: center;
26
26
  flex-wrap: nowrap;
27
- gap: 10px;
27
+ gap: 8px;
28
28
  padding: 10px 12px;
29
29
  background: rgba(255, 255, 255, 0.92);
30
30
  border-bottom: 1px solid #dbe4ee;
@@ -32,9 +32,6 @@
32
32
  top: 0;
33
33
  z-index: 2;
34
34
  backdrop-filter: blur(14px);
35
- overflow-x: auto;
36
- overflow-y: hidden;
37
- scrollbar-width: thin;
38
35
  }
39
36
 
40
37
  .toolbar[hidden] {
@@ -44,9 +41,10 @@
44
41
  .toolbar-group {
45
42
  display: flex;
46
43
  align-items: center;
47
- gap: 8px;
44
+ gap: 6px;
48
45
  flex-wrap: nowrap;
49
46
  flex: 0 0 auto;
47
+ min-width: 0;
50
48
  }
51
49
 
52
50
  .toolbar-group-actions {
@@ -59,12 +57,13 @@
59
57
  background: #ffffff;
60
58
  color: #0f172a;
61
59
  border-radius: 999px;
62
- min-width: 36px;
63
- height: 36px;
64
- padding: 0 12px;
60
+ min-width: 32px;
61
+ height: 34px;
62
+ padding: 0 10px;
65
63
  font: inherit;
66
64
  font-weight: 700;
67
65
  cursor: pointer;
66
+ flex: 0 0 auto;
68
67
  transition:
69
68
  transform 140ms ease,
70
69
  background-color 180ms ease,
@@ -97,6 +96,7 @@
97
96
  text-align: center;
98
97
  font-size: 13px;
99
98
  color: #475569;
99
+ flex: 0 0 auto;
100
100
  }
101
101
 
102
102
  .stage {
@@ -170,11 +170,21 @@ canvas {
170
170
 
171
171
  @media (max-width: 720px) {
172
172
  .toolbar {
173
- gap: 8px;
173
+ gap: 6px;
174
+ padding: 8px 10px;
174
175
  }
175
176
 
176
177
  .toolbar button {
177
- min-height: 40px;
178
+ min-width: 30px;
179
+ min-height: 32px;
180
+ height: 32px;
181
+ padding: 0 8px;
182
+ font-size: 12px;
183
+ }
184
+
185
+ .toolbar .value {
186
+ min-width: 48px;
187
+ font-size: 12px;
178
188
  }
179
189
 
180
190
  .stage {
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 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";
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,shHAgNzB,CAAC"}
package/dist/styles.js CHANGED
@@ -25,7 +25,7 @@ export const VIEWER_STYLES = `
25
25
  display: flex;
26
26
  align-items: center;
27
27
  flex-wrap: nowrap;
28
- gap: 10px;
28
+ gap: 8px;
29
29
  padding: 10px 12px;
30
30
  background: rgba(255, 255, 255, 0.92);
31
31
  border-bottom: 1px solid #dbe4ee;
@@ -33,9 +33,6 @@ export const VIEWER_STYLES = `
33
33
  top: 0;
34
34
  z-index: 2;
35
35
  backdrop-filter: blur(14px);
36
- overflow-x: auto;
37
- overflow-y: hidden;
38
- scrollbar-width: thin;
39
36
  }
40
37
 
41
38
  .toolbar[hidden] {
@@ -45,9 +42,10 @@ export const VIEWER_STYLES = `
45
42
  .toolbar-group {
46
43
  display: flex;
47
44
  align-items: center;
48
- gap: 8px;
45
+ gap: 6px;
49
46
  flex-wrap: nowrap;
50
47
  flex: 0 0 auto;
48
+ min-width: 0;
51
49
  }
52
50
 
53
51
  .toolbar-group-actions {
@@ -60,12 +58,13 @@ export const VIEWER_STYLES = `
60
58
  background: #ffffff;
61
59
  color: #0f172a;
62
60
  border-radius: 999px;
63
- min-width: 36px;
64
- height: 36px;
65
- padding: 0 12px;
61
+ min-width: 32px;
62
+ height: 34px;
63
+ padding: 0 10px;
66
64
  font: inherit;
67
65
  font-weight: 700;
68
66
  cursor: pointer;
67
+ flex: 0 0 auto;
69
68
  transition:
70
69
  transform 140ms ease,
71
70
  background-color 180ms ease,
@@ -94,10 +93,11 @@ export const VIEWER_STYLES = `
94
93
  }
95
94
 
96
95
  .toolbar .value {
97
- min-width: 68px;
96
+ min-width: 56px;
98
97
  text-align: center;
99
98
  font-size: 13px;
100
99
  color: #475569;
100
+ flex: 0 0 auto;
101
101
  }
102
102
 
103
103
  .stage {
@@ -171,11 +171,21 @@ canvas {
171
171
 
172
172
  @media (max-width: 720px) {
173
173
  .toolbar {
174
- gap: 8px;
174
+ gap: 6px;
175
+ padding: 8px 10px;
175
176
  }
176
177
 
177
178
  .toolbar button {
178
- min-height: 40px;
179
+ min-width: 30px;
180
+ min-height: 32px;
181
+ height: 32px;
182
+ padding: 0 8px;
183
+ font-size: 12px;
184
+ }
185
+
186
+ .toolbar .value {
187
+ min-width: 48px;
188
+ font-size: 12px;
179
189
  }
180
190
 
181
191
  .stage {
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgN5B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "genus-pdf-viewer",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "description": "Framework-agnostic PDF viewer built on pdf.js with a custom element and TypeScript API.",
5
5
  "type": "module",
6
6
  "sideEffects": [