@docmentis/udoc-viewer 0.6.21 → 0.6.22

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 (88) hide show
  1. package/dist/package.json +1 -1
  2. package/dist/src/UDocClient.d.ts +22 -0
  3. package/dist/src/UDocClient.d.ts.map +1 -1
  4. package/dist/src/UDocClient.js +25 -1
  5. package/dist/src/UDocClient.js.map +1 -1
  6. package/dist/src/UDocViewer.d.ts.map +1 -1
  7. package/dist/src/UDocViewer.js +14 -1
  8. package/dist/src/UDocViewer.js.map +1 -1
  9. package/dist/src/ui/viewer/actions.d.ts +12 -1
  10. package/dist/src/ui/viewer/actions.d.ts.map +1 -1
  11. package/dist/src/ui/viewer/components/FloatingToolbar.js +12 -12
  12. package/dist/src/ui/viewer/components/FloatingToolbar.js.map +1 -1
  13. package/dist/src/ui/viewer/components/SubToolbar.d.ts +10 -0
  14. package/dist/src/ui/viewer/components/SubToolbar.d.ts.map +1 -0
  15. package/dist/src/ui/viewer/components/SubToolbar.js +203 -0
  16. package/dist/src/ui/viewer/components/SubToolbar.js.map +1 -0
  17. package/dist/src/ui/viewer/components/Toolbar.d.ts.map +1 -1
  18. package/dist/src/ui/viewer/components/Toolbar.js +144 -4
  19. package/dist/src/ui/viewer/components/Toolbar.js.map +1 -1
  20. package/dist/src/ui/viewer/components/ViewModeMenu.js +3 -3
  21. package/dist/src/ui/viewer/components/ViewModeMenu.js.map +1 -1
  22. package/dist/src/ui/viewer/components/Viewport.d.ts.map +1 -1
  23. package/dist/src/ui/viewer/components/Viewport.js +20 -2
  24. package/dist/src/ui/viewer/components/Viewport.js.map +1 -1
  25. package/dist/src/ui/viewer/i18n/ar.d.ts.map +1 -1
  26. package/dist/src/ui/viewer/i18n/ar.js +25 -0
  27. package/dist/src/ui/viewer/i18n/ar.js.map +1 -1
  28. package/dist/src/ui/viewer/i18n/de.d.ts.map +1 -1
  29. package/dist/src/ui/viewer/i18n/de.js +25 -0
  30. package/dist/src/ui/viewer/i18n/de.js.map +1 -1
  31. package/dist/src/ui/viewer/i18n/en.d.ts.map +1 -1
  32. package/dist/src/ui/viewer/i18n/en.js +25 -0
  33. package/dist/src/ui/viewer/i18n/en.js.map +1 -1
  34. package/dist/src/ui/viewer/i18n/es.d.ts.map +1 -1
  35. package/dist/src/ui/viewer/i18n/es.js +25 -0
  36. package/dist/src/ui/viewer/i18n/es.js.map +1 -1
  37. package/dist/src/ui/viewer/i18n/fr.d.ts.map +1 -1
  38. package/dist/src/ui/viewer/i18n/fr.js +25 -0
  39. package/dist/src/ui/viewer/i18n/fr.js.map +1 -1
  40. package/dist/src/ui/viewer/i18n/ja.d.ts.map +1 -1
  41. package/dist/src/ui/viewer/i18n/ja.js +25 -0
  42. package/dist/src/ui/viewer/i18n/ja.js.map +1 -1
  43. package/dist/src/ui/viewer/i18n/ko.d.ts.map +1 -1
  44. package/dist/src/ui/viewer/i18n/ko.js +25 -0
  45. package/dist/src/ui/viewer/i18n/ko.js.map +1 -1
  46. package/dist/src/ui/viewer/i18n/pt-BR.d.ts.map +1 -1
  47. package/dist/src/ui/viewer/i18n/pt-BR.js +25 -0
  48. package/dist/src/ui/viewer/i18n/pt-BR.js.map +1 -1
  49. package/dist/src/ui/viewer/i18n/ru.d.ts.map +1 -1
  50. package/dist/src/ui/viewer/i18n/ru.js +25 -0
  51. package/dist/src/ui/viewer/i18n/ru.js.map +1 -1
  52. package/dist/src/ui/viewer/i18n/types.d.ts +21 -0
  53. package/dist/src/ui/viewer/i18n/types.d.ts.map +1 -1
  54. package/dist/src/ui/viewer/i18n/zh-CN.d.ts.map +1 -1
  55. package/dist/src/ui/viewer/i18n/zh-CN.js +25 -0
  56. package/dist/src/ui/viewer/i18n/zh-CN.js.map +1 -1
  57. package/dist/src/ui/viewer/i18n/zh-TW.d.ts.map +1 -1
  58. package/dist/src/ui/viewer/i18n/zh-TW.js +25 -0
  59. package/dist/src/ui/viewer/i18n/zh-TW.js.map +1 -1
  60. package/dist/src/ui/viewer/icons.d.ts +16 -0
  61. package/dist/src/ui/viewer/icons.d.ts.map +1 -1
  62. package/dist/src/ui/viewer/icons.js +20 -0
  63. package/dist/src/ui/viewer/icons.js.map +1 -1
  64. package/dist/src/ui/viewer/reducer.d.ts.map +1 -1
  65. package/dist/src/ui/viewer/reducer.js +42 -1
  66. package/dist/src/ui/viewer/reducer.js.map +1 -1
  67. package/dist/src/ui/viewer/shell.d.ts.map +1 -1
  68. package/dist/src/ui/viewer/shell.js +13 -2
  69. package/dist/src/ui/viewer/shell.js.map +1 -1
  70. package/dist/src/ui/viewer/state.d.ts +36 -0
  71. package/dist/src/ui/viewer/state.d.ts.map +1 -1
  72. package/dist/src/ui/viewer/state.js +21 -0
  73. package/dist/src/ui/viewer/state.js.map +1 -1
  74. package/dist/src/ui/viewer/styles-inline.d.ts +1 -1
  75. package/dist/src/ui/viewer/styles-inline.d.ts.map +1 -1
  76. package/dist/src/ui/viewer/styles-inline.js +343 -148
  77. package/dist/src/ui/viewer/styles-inline.js.map +1 -1
  78. package/dist/src/ui/viewer/tools/ViewToolController.d.ts +20 -0
  79. package/dist/src/ui/viewer/tools/ViewToolController.d.ts.map +1 -0
  80. package/dist/src/ui/viewer/tools/ViewToolController.js +194 -0
  81. package/dist/src/ui/viewer/tools/ViewToolController.js.map +1 -0
  82. package/dist/src/wasm/udoc.d.ts +3 -3
  83. package/dist/src/wasm/udoc.js +6 -6
  84. package/dist/src/wasm/udoc_bg.wasm +0 -0
  85. package/dist/src/wasm/udoc_bg.wasm.d.ts +3 -3
  86. package/dist/src/worker/worker-inline.js +1 -1
  87. package/dist/src/worker/worker.js +6 -6
  88. package/package.json +1 -1
@@ -24,13 +24,13 @@ export const inlineStyles = `.udoc-viewer-root {
24
24
  --udoc-text-placeholder: #999;
25
25
  --udoc-text-on-primary: #fff;
26
26
 
27
- --udoc-primary: #0066cc;
28
- --udoc-primary-hover: #0052a3;
29
- --udoc-primary-active-bg: rgba(0, 102, 204, 0.15);
30
- --udoc-primary-active-bg-hover: rgba(0, 102, 204, 0.2);
31
- --udoc-primary-subtle-bg: rgba(0, 102, 204, 0.1);
32
- --udoc-primary-focus-ring: rgba(0, 102, 204, 0.2);
33
- --udoc-primary-muted: rgba(0, 102, 204, 0.3);
27
+ --udoc-primary: #333;
28
+ --udoc-primary-hover: #1a1a1a;
29
+ --udoc-primary-active-bg: rgba(0, 0, 0, 0.1);
30
+ --udoc-primary-active-bg-hover: rgba(0, 0, 0, 0.14);
31
+ --udoc-primary-subtle-bg: rgba(0, 0, 0, 0.06);
32
+ --udoc-primary-focus-ring: rgba(0, 0, 0, 0.15);
33
+ --udoc-primary-muted: rgba(0, 0, 0, 0.25);
34
34
  --udoc-primary-disabled: #94a3b8;
35
35
 
36
36
  --udoc-border: #ddd;
@@ -56,7 +56,7 @@ export const inlineStyles = `.udoc-viewer-root {
56
56
  --udoc-search-highlight-active-outline: rgba(255, 140, 0, 0.8);
57
57
  --udoc-search-match-bg: rgba(255, 200, 0, 0.4);
58
58
  --udoc-search-match-text: #000;
59
- --udoc-search-result-active-bg: rgba(0, 102, 204, 0.08);
59
+ --udoc-search-result-active-bg: rgba(0, 0, 0, 0.06);
60
60
 
61
61
  --udoc-text-selection: rgba(0, 120, 215, 0.5);
62
62
 
@@ -80,7 +80,7 @@ export const inlineStyles = `.udoc-viewer-root {
80
80
  --udoc-error-text: #dc2626;
81
81
 
82
82
  --udoc-progress-track: #e5e7eb;
83
- --udoc-progress-fill: #0066cc;
83
+ --udoc-progress-fill: #333;
84
84
 
85
85
  --udoc-scrollbar-thumb: rgba(0, 0, 0, 0.3);
86
86
  --udoc-scrollbar-thumb-hover: rgba(0, 0, 0, 0.5);
@@ -91,6 +91,7 @@ export const inlineStyles = `.udoc-viewer-root {
91
91
  height: 100%;
92
92
  container-type: inline-size;
93
93
  container-name: udoc-viewer;
94
+ isolation: isolate;
94
95
  }
95
96
 
96
97
  .udoc-viewer-root.udoc-viewer-dark {
@@ -117,13 +118,13 @@ export const inlineStyles = `.udoc-viewer-root {
117
118
  --udoc-text-placeholder: #777;
118
119
  --udoc-text-on-primary: #fff;
119
120
 
120
- --udoc-primary: #4da6ff;
121
- --udoc-primary-hover: #80bfff;
122
- --udoc-primary-active-bg: rgba(77, 166, 255, 0.2);
123
- --udoc-primary-active-bg-hover: rgba(77, 166, 255, 0.25);
124
- --udoc-primary-subtle-bg: rgba(77, 166, 255, 0.12);
125
- --udoc-primary-focus-ring: rgba(77, 166, 255, 0.25);
126
- --udoc-primary-muted: rgba(77, 166, 255, 0.35);
121
+ --udoc-primary: #e0e0e0;
122
+ --udoc-primary-hover: #f0f0f0;
123
+ --udoc-primary-active-bg: rgba(255, 255, 255, 0.12);
124
+ --udoc-primary-active-bg-hover: rgba(255, 255, 255, 0.16);
125
+ --udoc-primary-subtle-bg: rgba(255, 255, 255, 0.07);
126
+ --udoc-primary-focus-ring: rgba(255, 255, 255, 0.2);
127
+ --udoc-primary-muted: rgba(255, 255, 255, 0.3);
127
128
  --udoc-primary-disabled: #4a5568;
128
129
 
129
130
  --udoc-border: #444;
@@ -149,7 +150,7 @@ export const inlineStyles = `.udoc-viewer-root {
149
150
  --udoc-search-highlight-active-outline: rgba(255, 140, 0, 0.85);
150
151
  --udoc-search-match-bg: rgba(255, 200, 0, 0.3);
151
152
  --udoc-search-match-text: #fff;
152
- --udoc-search-result-active-bg: rgba(77, 166, 255, 0.12);
153
+ --udoc-search-result-active-bg: rgba(255, 255, 255, 0.08);
153
154
 
154
155
  --udoc-text-selection: rgba(77, 166, 255, 0.5);
155
156
 
@@ -173,7 +174,7 @@ export const inlineStyles = `.udoc-viewer-root {
173
174
  --udoc-error-text: #f87171;
174
175
 
175
176
  --udoc-progress-track: #404040;
176
- --udoc-progress-fill: #4da6ff;
177
+ --udoc-progress-fill: #e0e0e0;
177
178
 
178
179
  --udoc-scrollbar-thumb: rgba(255, 255, 255, 0.3);
179
180
  --udoc-scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
@@ -182,7 +183,7 @@ export const inlineStyles = `.udoc-viewer-root {
182
183
  .udoc-viewer-root .udoc-toolbar-slot {
183
184
  flex: 0 0 auto;
184
185
  position: relative;
185
- z-index: 10;
186
+ z-index: 11;
186
187
  }
187
188
 
188
189
  .udoc-viewer-root .udoc-body-slot {
@@ -290,99 +291,11 @@ export const inlineStyles = `.udoc-viewer-root {
290
291
  align-items: center;
291
292
  gap: 4px;
292
293
  height: 40px;
293
- padding: 0 10px;
294
+ padding: 0 6px;
294
295
  background: var(--udoc-bg-surface);
295
296
  border-radius: 8px;
296
297
  box-shadow: var(--udoc-shadow-toolbar);
297
- z-index: 100;
298
- }
299
-
300
- .udoc-viewer-root .udoc-floating-toolbar__section {
301
- display: flex;
302
- align-items: center;
303
- gap: 4px;
304
- }
305
-
306
- .udoc-viewer-root .udoc-floating-toolbar__divider {
307
- width: 1px;
308
- height: 20px;
309
- background: var(--udoc-pressed-overlay);
310
- margin: 0 4px;
311
- }
312
-
313
- .udoc-viewer-root .udoc-floating-toolbar__btn {
314
- display: flex;
315
- align-items: center;
316
- justify-content: center;
317
- width: 28px;
318
- height: 28px;
319
- padding: 0;
320
- border: none;
321
- border-radius: 4px;
322
- background: transparent;
323
- color: var(--udoc-text-secondary);
324
- cursor: pointer;
325
- }
326
-
327
- .udoc-viewer-root .udoc-floating-toolbar__btn:hover {
328
- background: var(--udoc-hover-overlay);
329
- }
330
-
331
- .udoc-viewer-root .udoc-floating-toolbar__btn:active {
332
- background: var(--udoc-pressed-overlay);
333
- }
334
-
335
- .udoc-viewer-root .udoc-floating-toolbar__btn:disabled {
336
- color: var(--udoc-text-disabled);
337
- cursor: default;
338
- }
339
-
340
- .udoc-viewer-root .udoc-floating-toolbar__btn:disabled:hover {
341
- background: transparent;
342
- }
343
-
344
- .udoc-viewer-root .udoc-floating-toolbar__btn svg {
345
- width: 18px;
346
- height: 18px;
347
- }
348
-
349
- .udoc-viewer-root .udoc-floating-toolbar__page-info {
350
- display: flex;
351
- align-items: center;
352
- color: var(--udoc-text-primary);
353
- font-size: 13px;
354
- }
355
-
356
- .udoc-viewer-root .udoc-floating-toolbar__page-input {
357
- width: 36px;
358
- padding: 2px 4px;
359
- border: 1px solid var(--udoc-pressed-overlay);
360
- border-radius: 4px;
361
- background: transparent;
362
- color: var(--udoc-text-primary);
363
- font-size: 13px;
364
- text-align: center;
365
- }
366
-
367
- .udoc-viewer-root .udoc-floating-toolbar__page-input:focus {
368
- outline: none;
369
- border-color: var(--udoc-scrollbar-thumb);
370
- background: var(--udoc-bg-input);
371
- }
372
-
373
- .udoc-viewer-root .udoc-floating-toolbar__page-total {
374
- white-space: nowrap;
375
- }
376
-
377
- .udoc-viewer-root .udoc-floating-toolbar__zoom-level {
378
- min-width: 44px;
379
- color: var(--udoc-text-primary);
380
- font-size: 13px;
381
- text-align: center;
382
- }
383
-
384
- .udoc-viewer-root .udoc-floating-toolbar__btn--active {
385
- background: var(--udoc-active-overlay);
298
+ z-index: 30;
386
299
  }
387
300
 
388
301
  /* Zoom Dropdown */
@@ -510,7 +423,7 @@ export const inlineStyles = `.udoc-viewer-root {
510
423
  /* View Mode Menu */
511
424
  .udoc-viewer-root .udoc-view-mode-menu {
512
425
  position: relative;
513
- height: 28px;
426
+ height: 32px;
514
427
  display: flex;
515
428
  align-items: center;
516
429
  }
@@ -998,8 +911,9 @@ export const inlineStyles = `.udoc-viewer-root {
998
911
  .udoc-viewer-root .udoc-toolbar {
999
912
  display: flex;
1000
913
  align-items: center;
914
+ gap: 4px;
1001
915
  height: 40px;
1002
- padding: 0 8px;
916
+ padding: 0 4px;
1003
917
  background: var(--udoc-bg-panel);
1004
918
  border-bottom: 1px solid var(--udoc-border);
1005
919
  }
@@ -1072,7 +986,7 @@ export const inlineStyles = `.udoc-viewer-root {
1072
986
  border-radius: 8px;
1073
987
  box-shadow: var(--udoc-shadow-dialog);
1074
988
  padding: 4px 0;
1075
- z-index: 200;
989
+ z-index: 80;
1076
990
  }
1077
991
 
1078
992
  .udoc-viewer-root .udoc-overflow-menu__item {
@@ -1110,19 +1024,19 @@ export const inlineStyles = `.udoc-viewer-root {
1110
1024
  .udoc-viewer-root .udoc-toolbar__group {
1111
1025
  display: flex;
1112
1026
  align-items: center;
1113
- gap: 2px;
1027
+ gap: 0;
1114
1028
  }
1115
1029
 
1116
1030
  .udoc-viewer-root .udoc-toolbar__divider {
1117
1031
  width: 1px;
1118
1032
  height: 20px;
1119
1033
  background: var(--udoc-border);
1120
- margin: 0 4px;
1034
+ margin: 0 2px;
1121
1035
  }
1122
1036
 
1123
1037
  .udoc-viewer-root .udoc-toolbar__btn--nav {
1124
- width: 28px;
1125
- height: 28px;
1038
+ width: 32px;
1039
+ height: 32px;
1126
1040
  }
1127
1041
 
1128
1042
  .udoc-viewer-root .udoc-toolbar__btn--nav svg {
@@ -1172,6 +1086,253 @@ export const inlineStyles = `.udoc-viewer-root {
1172
1086
  top: calc(100% + 8px);
1173
1087
  }
1174
1088
 
1089
+ /* ===== Tool buttons (pointer split button & tool set buttons) ===== */
1090
+
1091
+ /* Split button container */
1092
+ .udoc-viewer-root .udoc-toolbar__split-btn {
1093
+ position: relative;
1094
+ display: flex;
1095
+ align-items: center;
1096
+ border-radius: 4px;
1097
+ }
1098
+
1099
+ .udoc-viewer-root .udoc-toolbar__split-btn--active {
1100
+ background: var(--udoc-primary-active-bg);
1101
+ }
1102
+
1103
+ .udoc-viewer-root .udoc-toolbar__split-btn--active:hover {
1104
+ background: var(--udoc-primary-active-bg-hover);
1105
+ }
1106
+
1107
+ .udoc-viewer-root .udoc-toolbar__split-btn-main {
1108
+ width: 26px;
1109
+ border-top-right-radius: 0;
1110
+ border-bottom-right-radius: 0;
1111
+ }
1112
+
1113
+ .udoc-viewer-root .udoc-toolbar__split-btn-drop {
1114
+ width: 16px;
1115
+ padding: 0;
1116
+ border-top-left-radius: 0;
1117
+ border-bottom-left-radius: 0;
1118
+ }
1119
+
1120
+ .udoc-viewer-root .udoc-toolbar__split-btn-drop svg {
1121
+ width: 12px;
1122
+ height: 12px;
1123
+ }
1124
+
1125
+ /* Split button dropdown */
1126
+ .udoc-viewer-root .udoc-toolbar__split-dropdown {
1127
+ position: absolute;
1128
+ top: calc(100% + 4px);
1129
+ left: 0;
1130
+ min-width: 140px;
1131
+ background: var(--udoc-bg-surface);
1132
+ border: 1px solid var(--udoc-border);
1133
+ border-radius: 8px;
1134
+ box-shadow: var(--udoc-shadow-dialog);
1135
+ padding: 4px 0;
1136
+ z-index: 80;
1137
+ }
1138
+
1139
+ .udoc-viewer-root .udoc-toolbar__split-dropdown-item {
1140
+ display: flex;
1141
+ align-items: center;
1142
+ gap: 8px;
1143
+ width: 100%;
1144
+ padding: 6px 12px;
1145
+ border: none;
1146
+ background: transparent;
1147
+ color: var(--udoc-text-body);
1148
+ font-size: 13px;
1149
+ cursor: pointer;
1150
+ text-align: left;
1151
+ }
1152
+
1153
+ .udoc-viewer-root .udoc-toolbar__split-dropdown-item:hover {
1154
+ background: var(--udoc-hover-overlay);
1155
+ }
1156
+
1157
+ .udoc-viewer-root .udoc-toolbar__split-dropdown-item--active {
1158
+ background: var(--udoc-primary-active-bg);
1159
+ }
1160
+
1161
+ .udoc-viewer-root .udoc-toolbar__split-dropdown-item--active:hover {
1162
+ background: var(--udoc-primary-active-bg-hover);
1163
+ }
1164
+
1165
+ .udoc-viewer-root .udoc-toolbar__split-dropdown-icon {
1166
+ display: flex;
1167
+ align-items: center;
1168
+ justify-content: center;
1169
+ width: 20px;
1170
+ height: 20px;
1171
+ flex-shrink: 0;
1172
+ }
1173
+
1174
+ .udoc-viewer-root .udoc-toolbar__split-dropdown-icon svg {
1175
+ width: 18px;
1176
+ height: 18px;
1177
+ }
1178
+
1179
+ /* Tool set buttons active state */
1180
+ .udoc-viewer-root .udoc-toolbar__btn--tool-active {
1181
+ background: var(--udoc-primary-active-bg);
1182
+ }
1183
+
1184
+ .udoc-viewer-root .udoc-toolbar__btn--tool-active:hover {
1185
+ background: var(--udoc-primary-active-bg-hover);
1186
+ }
1187
+
1188
+ /* ===== Sub-toolbar (tool options bar) ===== */
1189
+
1190
+ .udoc-viewer-root .udoc-subtoolbar-slot {
1191
+ flex: 0 0 auto;
1192
+ position: relative;
1193
+ z-index: 10;
1194
+ }
1195
+
1196
+ .udoc-viewer-root .udoc-subtoolbar {
1197
+ display: flex;
1198
+ align-items: center;
1199
+ gap: 4px;
1200
+ height: 40px;
1201
+ padding: 0 8px;
1202
+ background: var(--udoc-bg-panel);
1203
+ border-bottom: 1px solid var(--udoc-border);
1204
+ }
1205
+
1206
+ .udoc-viewer-root .udoc-subtoolbar__tools {
1207
+ display: flex;
1208
+ align-items: center;
1209
+ gap: 2px;
1210
+ }
1211
+
1212
+ .udoc-viewer-root .udoc-subtoolbar__divider {
1213
+ width: 1px;
1214
+ height: 20px;
1215
+ background: var(--udoc-border);
1216
+ margin: 0 4px;
1217
+ }
1218
+
1219
+ .udoc-viewer-root .udoc-subtoolbar__options {
1220
+ display: flex;
1221
+ align-items: center;
1222
+ gap: 8px;
1223
+ flex: 1;
1224
+ overflow-x: auto;
1225
+ }
1226
+
1227
+ .udoc-viewer-root .udoc-subtoolbar__btn {
1228
+ display: flex;
1229
+ align-items: center;
1230
+ justify-content: center;
1231
+ width: 32px;
1232
+ height: 32px;
1233
+ padding: 0;
1234
+ border: none;
1235
+ border-radius: 4px;
1236
+ background: transparent;
1237
+ color: var(--udoc-text-body);
1238
+ cursor: pointer;
1239
+ }
1240
+
1241
+ .udoc-viewer-root .udoc-subtoolbar__btn:hover {
1242
+ background: var(--udoc-hover-overlay);
1243
+ }
1244
+
1245
+ .udoc-viewer-root .udoc-subtoolbar__btn--active {
1246
+ background: var(--udoc-primary-active-bg);
1247
+ }
1248
+
1249
+ .udoc-viewer-root .udoc-subtoolbar__btn--active:hover {
1250
+ background: var(--udoc-primary-active-bg-hover);
1251
+ }
1252
+
1253
+ .udoc-viewer-root .udoc-subtoolbar__btn svg {
1254
+ width: 20px;
1255
+ height: 20px;
1256
+ }
1257
+
1258
+ /* Tool option groups */
1259
+ .udoc-viewer-root .udoc-subtoolbar__option-group {
1260
+ display: flex;
1261
+ align-items: center;
1262
+ gap: 4px;
1263
+ }
1264
+
1265
+ .udoc-viewer-root .udoc-subtoolbar__option-label {
1266
+ font-size: 10px;
1267
+ font-weight: 600;
1268
+ text-transform: uppercase;
1269
+ color: var(--udoc-text-muted);
1270
+ letter-spacing: 0.05em;
1271
+ white-space: nowrap;
1272
+ margin-right: 2px;
1273
+ }
1274
+
1275
+ /* Color swatches */
1276
+ .udoc-viewer-root .udoc-subtoolbar__color-swatch {
1277
+ width: 20px;
1278
+ height: 20px;
1279
+ border-radius: 50%;
1280
+ border: 2px solid transparent;
1281
+ background: var(--swatch-color);
1282
+ cursor: pointer;
1283
+ padding: 0;
1284
+ box-sizing: border-box;
1285
+ }
1286
+
1287
+ .udoc-viewer-root .udoc-subtoolbar__color-swatch:hover {
1288
+ border-color: var(--udoc-text-muted);
1289
+ }
1290
+
1291
+ .udoc-viewer-root .udoc-subtoolbar__color-swatch--active {
1292
+ border-color: var(--udoc-primary);
1293
+ }
1294
+
1295
+ /* Stroke width buttons */
1296
+ .udoc-viewer-root .udoc-subtoolbar__width-btn {
1297
+ display: flex;
1298
+ align-items: center;
1299
+ justify-content: center;
1300
+ width: 28px;
1301
+ height: 28px;
1302
+ padding: 0;
1303
+ border: none;
1304
+ border-radius: 4px;
1305
+ background: transparent;
1306
+ cursor: pointer;
1307
+ }
1308
+
1309
+ .udoc-viewer-root .udoc-subtoolbar__width-btn:hover {
1310
+ background: var(--udoc-hover-overlay);
1311
+ }
1312
+
1313
+ .udoc-viewer-root .udoc-subtoolbar__width-btn--active {
1314
+ background: var(--udoc-primary-active-bg);
1315
+ }
1316
+
1317
+ .udoc-viewer-root .udoc-subtoolbar__width-btn--active:hover {
1318
+ background: var(--udoc-primary-active-bg-hover);
1319
+ }
1320
+
1321
+ .udoc-viewer-root .udoc-subtoolbar__width-line {
1322
+ display: block;
1323
+ width: 16px;
1324
+ border-radius: 1px;
1325
+ background: var(--udoc-text-body);
1326
+ }
1327
+
1328
+ /* Opacity slider */
1329
+ .udoc-viewer-root .udoc-subtoolbar__opacity-slider {
1330
+ width: 80px;
1331
+ height: 4px;
1332
+ cursor: pointer;
1333
+ accent-color: var(--udoc-primary);
1334
+ }
1335
+
1175
1336
  /* Right Panel */
1176
1337
  .udoc-viewer-root .udoc-right-panel {
1177
1338
  position: relative;
@@ -1265,6 +1426,41 @@ export const inlineStyles = `.udoc-viewer-root {
1265
1426
  user-select: none;
1266
1427
  }
1267
1428
 
1429
+ /* View tool cursors */
1430
+ .udoc-viewer--tool-hand .udoc-viewport__scroll {
1431
+ cursor: grab;
1432
+ }
1433
+
1434
+ .udoc-viewer--tool-hand-grabbing .udoc-viewport__scroll {
1435
+ cursor: grabbing;
1436
+ }
1437
+
1438
+ .udoc-viewer--tool-hand .udoc-spread__text-layer,
1439
+ .udoc-viewer--tool-hand-grabbing .udoc-spread__text-layer {
1440
+ pointer-events: none;
1441
+ }
1442
+
1443
+ .udoc-viewer--tool-hand .udoc-text-run,
1444
+ .udoc-viewer--tool-hand-grabbing .udoc-text-run {
1445
+ user-select: none;
1446
+ }
1447
+
1448
+ .udoc-viewer--tool-zoom .udoc-viewport__scroll {
1449
+ cursor: zoom-in;
1450
+ }
1451
+
1452
+ .udoc-viewer--tool-zoom-out .udoc-viewport__scroll {
1453
+ cursor: zoom-out;
1454
+ }
1455
+
1456
+ .udoc-viewer--tool-zoom .udoc-spread__text-layer {
1457
+ pointer-events: none;
1458
+ }
1459
+
1460
+ .udoc-viewer--tool-zoom .udoc-text-run {
1461
+ user-select: none;
1462
+ }
1463
+
1268
1464
  /* Annotation Layer */
1269
1465
  .udoc-viewer-root .udoc-spread__annotation-layer {
1270
1466
  position: absolute;
@@ -1335,7 +1531,7 @@ export const inlineStyles = `.udoc-viewer-root {
1335
1531
  /* Annotation popup */
1336
1532
  .udoc-viewer-root .udoc-annotation-popup {
1337
1533
  position: absolute;
1338
- z-index: 100;
1534
+ z-index: 30;
1339
1535
  min-width: 200px;
1340
1536
  max-width: 300px;
1341
1537
  background: var(--udoc-annotation-bg);
@@ -1700,7 +1896,7 @@ export const inlineStyles = `.udoc-viewer-root {
1700
1896
  outline: 2px solid var(--udoc-primary);
1701
1897
  outline-offset: 2px;
1702
1898
  border-radius: 2px;
1703
- z-index: 10;
1899
+ z-index: 20;
1704
1900
  }
1705
1901
 
1706
1902
  /* Highlight indicator for full-layer markup annotations */
@@ -1712,7 +1908,7 @@ export const inlineStyles = `.udoc-viewer-root {
1712
1908
  outline: 2px solid var(--udoc-primary);
1713
1909
  outline-offset: 2px;
1714
1910
  border-radius: 2px;
1715
- z-index: 10;
1911
+ z-index: 20;
1716
1912
  }
1717
1913
 
1718
1914
  /* Mobile Panel Overlay */
@@ -1724,7 +1920,7 @@ export const inlineStyles = `.udoc-viewer-root {
1724
1920
  right: 0;
1725
1921
  bottom: 0;
1726
1922
  background: var(--udoc-bg-overlay);
1727
- z-index: 140;
1923
+ z-index: 40;
1728
1924
  }
1729
1925
 
1730
1926
  /* ===== Responsive: Small Mobile (≤480px) ===== */
@@ -1741,7 +1937,7 @@ export const inlineStyles = `.udoc-viewer-root {
1741
1937
  left: 0;
1742
1938
  bottom: 0;
1743
1939
  width: 280px !important;
1744
- z-index: 150;
1940
+ z-index: 50;
1745
1941
  transform: translateX(-100%);
1746
1942
  transition: transform 0.2s ease;
1747
1943
  }
@@ -1762,7 +1958,7 @@ export const inlineStyles = `.udoc-viewer-root {
1762
1958
  right: 0;
1763
1959
  bottom: 0;
1764
1960
  width: 280px !important;
1765
- z-index: 150;
1961
+ z-index: 50;
1766
1962
  transform: translateX(100%);
1767
1963
  transition: transform 0.2s ease;
1768
1964
  }
@@ -1804,16 +2000,17 @@ export const inlineStyles = `.udoc-viewer-root {
1804
2000
  box-sizing: border-box;
1805
2001
  background: var(--udoc-bg-panel);
1806
2002
  border-top: 1px solid var(--udoc-border);
2003
+ box-shadow: none;
1807
2004
  height: 40px;
1808
- padding: 0 12px;
1809
- gap: 8px;
2005
+ padding: 0 4px;
2006
+ gap: 4px;
1810
2007
  max-width: none;
1811
2008
  justify-content: center;
1812
2009
  }
1813
2010
 
1814
2011
  /* Raise toolbar above slide-out panels so overflow dropdown is not hidden */
1815
2012
  .udoc-viewer-root .udoc-toolbar-slot {
1816
- z-index: 160;
2013
+ z-index: 60;
1817
2014
  }
1818
2015
 
1819
2016
  /* Hide individual right-section buttons on mobile; show overflow menu */
@@ -1830,26 +2027,25 @@ export const inlineStyles = `.udoc-viewer-root {
1830
2027
  display: block;
1831
2028
  }
1832
2029
 
1833
- /* Larger panel tab buttons for touch */
2030
+ /* Panel tab buttons for touch */
1834
2031
  .udoc-viewer-root .udoc-left-panel__tabs {
1835
- width: 44px;
2032
+ width: 32px;
1836
2033
  padding: 8px 0;
1837
2034
  }
1838
2035
 
1839
2036
  .udoc-viewer-root .udoc-left-panel__tab {
1840
- width: 44px;
1841
- height: 44px;
2037
+ width: 32px;
2038
+ height: 32px;
1842
2039
  }
1843
2040
 
1844
2041
  .udoc-viewer-root .udoc-left-panel__tab svg {
1845
- width: 22px;
1846
- height: 22px;
2042
+ width: 18px;
2043
+ height: 18px;
1847
2044
  }
1848
2045
 
1849
2046
  /* Toolbar adjustments */
1850
2047
  .udoc-viewer-root .udoc-toolbar {
1851
2048
  padding: 0 4px;
1852
- gap: 4px;
1853
2049
  }
1854
2050
 
1855
2051
  .udoc-viewer-root .udoc-toolbar__btn {
@@ -1884,7 +2080,7 @@ export const inlineStyles = `.udoc-viewer-root {
1884
2080
  display: flex;
1885
2081
  align-items: center;
1886
2082
  justify-content: center;
1887
- z-index: 200;
2083
+ z-index: 80;
1888
2084
  }
1889
2085
 
1890
2086
  .udoc-viewer-root .udoc-password-dialog {
@@ -1970,8 +2166,8 @@ export const inlineStyles = `.udoc-viewer-root {
1970
2166
  display: flex;
1971
2167
  align-items: center;
1972
2168
  justify-content: center;
1973
- width: 44px;
1974
- height: 44px;
2169
+ width: 32px;
2170
+ height: 32px;
1975
2171
  border: none;
1976
2172
  background: transparent;
1977
2173
  color: var(--udoc-text-subtle);
@@ -2039,7 +2235,7 @@ export const inlineStyles = `.udoc-viewer-root {
2039
2235
  display: flex;
2040
2236
  align-items: center;
2041
2237
  justify-content: center;
2042
- z-index: 210;
2238
+ z-index: 90;
2043
2239
  }
2044
2240
 
2045
2241
  .udoc-viewer-root .udoc-print-dialog {
@@ -2203,7 +2399,7 @@ export const inlineStyles = `.udoc-viewer-root {
2203
2399
  display: flex;
2204
2400
  align-items: center;
2205
2401
  justify-content: center;
2206
- z-index: 180;
2402
+ z-index: 70;
2207
2403
  backdrop-filter: blur(2px);
2208
2404
  }
2209
2405
 
@@ -2379,8 +2575,8 @@ export const inlineStyles = `.udoc-viewer-root {
2379
2575
  display: flex;
2380
2576
  align-items: center;
2381
2577
  justify-content: center;
2382
- width: 28px;
2383
- height: 28px;
2578
+ width: 32px;
2579
+ height: 32px;
2384
2580
  border: 1px solid var(--udoc-border-input);
2385
2581
  border-radius: 4px;
2386
2582
  background: var(--udoc-bg-input);
@@ -2558,7 +2754,7 @@ export const inlineStyles = `.udoc-viewer-root {
2558
2754
  position: absolute;
2559
2755
  top: -100px;
2560
2756
  left: 0;
2561
- z-index: 10000;
2757
+ z-index: 100;
2562
2758
  padding: 8px 16px;
2563
2759
  background: var(--udoc-bg-surface);
2564
2760
  color: var(--udoc-text-heading);
@@ -2600,7 +2796,7 @@ export const inlineStyles = `.udoc-viewer-root {
2600
2796
  --udoc-border-input: #000;
2601
2797
  --udoc-text-muted: rgba(0, 0, 0, 0.7);
2602
2798
  --udoc-text-faint: rgba(0, 0, 0, 0.6);
2603
- --udoc-primary-focus-ring: rgba(0, 102, 204, 0.5);
2799
+ --udoc-primary-focus-ring: rgba(0, 0, 0, 0.4);
2604
2800
  }
2605
2801
 
2606
2802
  .udoc-viewer-root.udoc-viewer-dark {
@@ -2608,7 +2804,7 @@ export const inlineStyles = `.udoc-viewer-root {
2608
2804
  --udoc-border-input: #aaa;
2609
2805
  --udoc-text-muted: rgba(255, 255, 255, 0.7);
2610
2806
  --udoc-text-faint: rgba(255, 255, 255, 0.6);
2611
- --udoc-primary-focus-ring: rgba(77, 166, 255, 0.5);
2807
+ --udoc-primary-focus-ring: rgba(255, 255, 255, 0.45);
2612
2808
  }
2613
2809
 
2614
2810
  .udoc-viewer-root :focus-visible {
@@ -2623,7 +2819,6 @@ export const inlineStyles = `.udoc-viewer-root {
2623
2819
  }
2624
2820
 
2625
2821
  .udoc-viewer-root .udoc-toolbar__btn,
2626
- .udoc-viewer-root .udoc-floating-toolbar__btn,
2627
2822
  .udoc-viewer-root .udoc-left-panel__tab {
2628
2823
  border: 1px solid ButtonText;
2629
2824
  }
@@ -2649,17 +2844,17 @@ export const inlineStyles = `.udoc-viewer-root {
2649
2844
  /* Touch target sizes for coarse pointers (panels and side UI only — toolbars handle their own sizing) */
2650
2845
  @media (pointer: coarse) {
2651
2846
  .udoc-viewer-root .udoc-left-panel__tab {
2652
- width: 44px;
2653
- height: 44px;
2847
+ width: 32px;
2848
+ height: 32px;
2654
2849
  }
2655
2850
 
2656
2851
  .udoc-viewer-root .udoc-left-panel__tabs {
2657
- width: 44px;
2852
+ width: 32px;
2658
2853
  }
2659
2854
 
2660
2855
  .udoc-viewer-root .udoc-outline-item__toggle {
2661
- min-width: 44px;
2662
- min-height: 44px;
2856
+ min-width: 32px;
2857
+ min-height: 32px;
2663
2858
  }
2664
2859
  }
2665
2860
  `;