@nice2dev/ui-printing 1.1.5 → 1.1.7

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 (26) hide show
  1. package/dist/index.cjs +2 -2
  2. package/dist/index.d.ts +5 -6
  3. package/dist/index.mjs +901 -901
  4. package/dist/print-button/NicePrintButton.d.ts +0 -1
  5. package/dist/print-button/index.d.ts +0 -1
  6. package/dist/print-preview/NicePrintPreview.d.ts +0 -1
  7. package/dist/print-preview/index.d.ts +0 -1
  8. package/dist/print-queue/NicePrintQueue.d.ts +0 -1
  9. package/dist/print-queue/index.d.ts +0 -1
  10. package/dist/template-browser/NiceTemplateBrowser.d.ts +0 -1
  11. package/dist/template-browser/index.d.ts +0 -1
  12. package/dist/template-editor/NiceTemplateEditor.d.ts +0 -1
  13. package/dist/template-editor/index.d.ts +0 -1
  14. package/dist/types/printingTypes.d.ts +0 -1
  15. package/dist/ui-printing.css +1 -1
  16. package/package.json +3 -3
  17. package/src/index.ts +5 -24
  18. package/src/print-button/NicePrintButton.tsx +5 -1
  19. package/src/print-button/PrintButton.module.css +147 -43
  20. package/src/print-preview/NicePrintPreview.tsx +10 -9
  21. package/src/print-preview/PrintPreview.module.css +60 -18
  22. package/src/print-queue/PrintQueue.module.css +207 -57
  23. package/src/template-browser/NiceTemplateBrowser.tsx +5 -1
  24. package/src/template-browser/TemplateBrowser.module.css +70 -25
  25. package/src/template-editor/NiceTemplateEditor.tsx +1 -3
  26. package/src/template-editor/TemplateEditor.module.css +96 -47
package/src/print-queue/PrintQueue.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .root {
2
2
  display: flex;
3
3
  flex-direction: column;
4
- background: var(--nice-bg, #FFF);
4
+ background: var(--nice-bg, #fff);
5
5
  border: 1px solid var(--nice-border, #e2e8f0);
6
6
  border-radius: var(--nice-radius-xl, 12px);
7
7
  overflow: hidden;
@@ -9,7 +9,11 @@
9
9
  font-size: 14px;
10
10
  color: var(--nice-text, #1e293b);
11
11
  }
12
- .dark { background: var(--nice-text, #1e293b); border-color: var(--nice-text, #334155); color: var(--nice-bg-secondary, #f1f5f9); }
12
+ .dark {
13
+ background: var(--nice-text, #1e293b);
14
+ border-color: var(--nice-text, #334155);
15
+ color: var(--nice-bg-secondary, #f1f5f9);
16
+ }
13
17
 
14
18
  /* Stats bar */
15
19
  .statsBar {
@@ -20,14 +24,35 @@
20
24
  background: var(--nice-bg-secondary, #f8fafc);
21
25
  border-bottom: 1px solid var(--nice-border, #e2e8f0);
22
26
  }
23
- .dark .statsBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }
27
+ .dark .statsBar {
28
+ background: var(--nice-text, #0f172a);
29
+ border-color: var(--nice-text, #334155);
30
+ }
24
31
 
25
- .stat { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); font-size: 13px; }
26
- .dot { width: 8px; height: 8px; border-radius: var(--nice-radius-full, 50%); display: inline-block; }
27
- .statPrinting .dot { background: var(--nice-primary-hover, #2563eb); }
28
- .statQueued .dot { background: var(--nice-text-secondary, #64748b); }
29
- .statDone .dot { background: var(--nice-success-dark, #16a34a); }
30
- .statError .dot { background: var(--nice-danger-dark, #dc2626); }
32
+ .stat {
33
+ display: flex;
34
+ align-items: center;
35
+ gap: var(--nice-space-1-5, 6px);
36
+ font-size: 13px;
37
+ }
38
+ .dot {
39
+ width: 8px;
40
+ height: 8px;
41
+ border-radius: var(--nice-radius-full, 50%);
42
+ display: inline-block;
43
+ }
44
+ .statPrinting .dot {
45
+ background: var(--nice-primary-hover, #2563eb);
46
+ }
47
+ .statQueued .dot {
48
+ background: var(--nice-text-secondary, #64748b);
49
+ }
50
+ .statDone .dot {
51
+ background: var(--nice-success-dark, #16a34a);
52
+ }
53
+ .statError .dot {
54
+ background: var(--nice-danger-dark, #dc2626);
55
+ }
31
56
 
32
57
  /* Toolbar */
33
58
  .toolbar {
@@ -38,11 +63,18 @@
38
63
  border-bottom: 1px solid var(--nice-border, #e2e8f0);
39
64
  flex-wrap: wrap;
40
65
  }
41
- .dark .toolbar { border-color: var(--nice-text, #334155); }
66
+ .dark .toolbar {
67
+ border-color: var(--nice-text, #334155);
68
+ }
42
69
 
43
- .filterTabs { display: flex; gap: var(--nice-space-1, 4px); }
70
+ .filterTabs {
71
+ display: flex;
72
+ gap: var(--nice-space-1, 4px);
73
+ }
44
74
  .filterTab {
45
- display: flex; align-items: center; gap: var(--nice-space-1-25, 5px);
75
+ display: flex;
76
+ align-items: center;
77
+ gap: var(--nice-space-1-25, 5px);
46
78
  padding: var(--nice-space-1, 4px) var(--nice-space-2-5, 10px);
47
79
  background: none;
48
80
  border: 1px solid var(--nice-border, #e2e8f0);
@@ -51,31 +83,60 @@
51
83
  font-size: 12px;
52
84
  color: var(--nice-text-secondary, #475569);
53
85
  }
54
- .filterTab:hover { background: var(--nice-bg-secondary, #f1f5f9); }
55
- .filterTabActive { background: var(--nice-primary-bg, #eff6ff); border-color: var(--nice-primary-hover, #2563eb); color: var(--nice-primary-hover, #2563eb); }
86
+ .filterTab:hover {
87
+ background: var(--nice-bg-secondary, #f1f5f9);
88
+ }
89
+ .filterTabActive {
90
+ background: var(--nice-primary-bg, #eff6ff);
91
+ border-color: var(--nice-primary-hover, #2563eb);
92
+ color: var(--nice-primary-hover, #2563eb);
93
+ }
56
94
  .filterCount {
57
- background: var(--nice-bg-secondary, #f1f5f9); padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px); border-radius: var(--nice-radius-lg, 8px);
58
- font-size: 11px; color: var(--nice-text-secondary, #64748b);
95
+ background: var(--nice-bg-secondary, #f1f5f9);
96
+ padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px);
97
+ border-radius: var(--nice-radius-lg, 8px);
98
+ font-size: 11px;
99
+ color: var(--nice-text-secondary, #64748b);
100
+ }
101
+ .filterTabActive .filterCount {
102
+ background: var(--nice-primary-bg, #dbeafe);
103
+ color: var(--nice-primary-hover, #2563eb);
59
104
  }
60
- .filterTabActive .filterCount { background: var(--nice-primary-bg, #dbeafe); color: var(--nice-primary-hover, #2563eb); }
61
105
 
62
- .bulkActions { display: flex; align-items: center; gap: var(--nice-space-2, 8px); margin-left: auto; }
63
- .bulkCount { font-size: 13px; color: var(--nice-text-secondary, #64748b); }
106
+ .bulkActions {
107
+ display: flex;
108
+ align-items: center;
109
+ gap: var(--nice-space-2, 8px);
110
+ margin-left: auto;
111
+ }
112
+ .bulkCount {
113
+ font-size: 13px;
114
+ color: var(--nice-text-secondary, #64748b);
115
+ }
64
116
  .bulkBtn {
65
117
  padding: var(--nice-space-1, 4px) var(--nice-space-2-5, 10px);
66
118
  border-radius: var(--nice-radius-md, 6px);
67
119
  border: 1px solid var(--nice-border, #e2e8f0);
68
120
  cursor: pointer;
69
121
  font-size: 12px;
70
- background: var(--nice-bg, #FFF);
122
+ background: var(--nice-bg, #fff);
71
123
  color: var(--nice-text, #1e293b);
72
124
  }
73
- .bulkBtn:hover { background: var(--nice-bg-secondary, #f1f5f9); }
74
- .bulkBtnRemove { color: var(--nice-danger-dark, #dc2626); border-color: var(--nice-danger-bg, #fecaca); }
75
- .bulkBtnRemove:hover { background: var(--nice-danger-bg, #fef2f2); }
125
+ .bulkBtn:hover {
126
+ background: var(--nice-bg-secondary, #f1f5f9);
127
+ }
128
+ .bulkBtnRemove {
129
+ color: var(--nice-danger-dark, #dc2626);
130
+ border-color: var(--nice-danger-bg, #fecaca);
131
+ }
132
+ .bulkBtnRemove:hover {
133
+ background: var(--nice-danger-bg, #fef2f2);
134
+ }
76
135
 
77
136
  /* Job list */
78
- .jobList { overflow-y: auto; }
137
+ .jobList {
138
+ overflow-y: auto;
139
+ }
79
140
 
80
141
  .listHeader {
81
142
  display: grid;
@@ -90,8 +151,12 @@
90
151
  letter-spacing: 0.05em;
91
152
  border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
92
153
  }
93
- .dark .listHeader { border-color: var(--nice-text, #1e293b); }
94
- .headerLabel { white-space: nowrap; }
154
+ .dark .listHeader {
155
+ border-color: var(--nice-text, #1e293b);
156
+ }
157
+ .headerLabel {
158
+ white-space: nowrap;
159
+ }
95
160
 
96
161
  /* Job row */
97
162
  .jobRow {
@@ -103,13 +168,27 @@
103
168
  border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
104
169
  transition: background 0.1s;
105
170
  }
106
- .dark .jobRow { border-color: var(--nice-text, #334155); }
107
- .jobRow:hover { background: var(--nice-bg-secondary, #f8fafc); }
108
- .dark .jobRow:hover { background: var(--nice-text, #0f172a); }
109
- .jobRowSelected { background: var(--nice-primary-bg, #eff6ff) !important; }
110
- .dark .jobRowSelected { background: #172554 !important; }
171
+ .dark .jobRow {
172
+ border-color: var(--nice-text, #334155);
173
+ }
174
+ .jobRow:hover {
175
+ background: var(--nice-bg-secondary, #f8fafc);
176
+ }
177
+ .dark .jobRow:hover {
178
+ background: var(--nice-text, #0f172a);
179
+ }
180
+ .jobRowSelected {
181
+ background: var(--nice-primary-bg, #eff6ff) !important;
182
+ }
183
+ .dark .jobRowSelected {
184
+ background: #172554 !important;
185
+ }
111
186
 
112
- .jobCheckbox { cursor: pointer; width: 16px; height: 16px; }
187
+ .jobCheckbox {
188
+ cursor: pointer;
189
+ width: 16px;
190
+ height: 16px;
191
+ }
113
192
 
114
193
  /* Status badges */
115
194
  .statusBadge {
@@ -121,26 +200,71 @@
121
200
  font-weight: 500;
122
201
  white-space: nowrap;
123
202
  }
124
- .badge-queued { background: var(--nice-bg-secondary, #f1f5f9); color: var(--nice-text-secondary, #64748b); }
125
- .badge-printing { background: var(--nice-primary-bg, #dbeafe); color: var(--nice-primary-dark, #1d4ed8); animation: pulse 1.5s ease-in-out infinite; }
126
- .badge-done { background: var(--nice-success-bg, #dcfce7); color: var(--nice-success-dark, #16a34a); }
127
- .badge-error { background: var(--nice-danger-bg, #fee2e2); color: var(--nice-danger-dark, #dc2626); }
128
- .badge-paused { background: var(--nice-warning-bg, #fef9c3); color: var(--nice-warning-dark, #854d0e); }
129
- .badge-cancelled { background: var(--nice-bg-secondary, #f1f5f9); color: var(--nice-text-muted, #94a3b8); }
203
+ .badge-queued {
204
+ background: var(--nice-bg-secondary, #f1f5f9);
205
+ color: var(--nice-text-secondary, #64748b);
206
+ }
207
+ .badge-printing {
208
+ background: var(--nice-primary-bg, #dbeafe);
209
+ color: var(--nice-primary-dark, #1d4ed8);
210
+ animation: pulse 1.5s ease-in-out infinite;
211
+ }
212
+ .badge-done {
213
+ background: var(--nice-success-bg, #dcfce7);
214
+ color: var(--nice-success-dark, #16a34a);
215
+ }
216
+ .badge-error {
217
+ background: var(--nice-danger-bg, #fee2e2);
218
+ color: var(--nice-danger-dark, #dc2626);
219
+ }
220
+ .badge-paused {
221
+ background: var(--nice-warning-bg, #fef9c3);
222
+ color: var(--nice-warning-dark, #854d0e);
223
+ }
224
+ .badge-cancelled {
225
+ background: var(--nice-bg-secondary, #f1f5f9);
226
+ color: var(--nice-text-muted, #94a3b8);
227
+ }
130
228
 
131
- @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
229
+ @keyframes pulse {
230
+ 0%,
231
+ 100% {
232
+ opacity: 1;
233
+ }
234
+ 50% {
235
+ opacity: 0.7;
236
+ }
237
+ }
132
238
 
133
239
  /* Job info */
134
- .jobInfo { min-width: 0; }
135
- .jobName { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
240
+ .jobInfo {
241
+ min-width: 0;
242
+ }
243
+ .jobName {
244
+ font-weight: 500;
245
+ white-space: nowrap;
246
+ overflow: hidden;
247
+ text-overflow: ellipsis;
248
+ }
136
249
  .jobMeta {
137
- display: flex; align-items: center; gap: var(--nice-space-2, 8px);
138
- font-size: 12px; color: var(--nice-text-muted, #94a3b8);
250
+ display: flex;
251
+ align-items: center;
252
+ gap: var(--nice-space-2, 8px);
253
+ font-size: 12px;
254
+ color: var(--nice-text-muted, #94a3b8);
139
255
  margin-top: var(--nice-space-0-5, 2px);
140
256
  }
141
- .jobTime { color: var(--nice-text-secondary, #64748b); }
142
- .jobDuration { color: var(--nice-warning, #f59e0b); }
143
- .jobError { font-size: 12px; color: var(--nice-danger-dark, #dc2626); margin-top: var(--nice-space-1, 4px); }
257
+ .jobTime {
258
+ color: var(--nice-text-secondary, #64748b);
259
+ }
260
+ .jobDuration {
261
+ color: var(--nice-warning, #f59e0b);
262
+ }
263
+ .jobError {
264
+ font-size: 12px;
265
+ color: var(--nice-danger-dark, #dc2626);
266
+ margin-top: var(--nice-space-1, 4px);
267
+ }
144
268
 
145
269
  /* Progress bar */
146
270
  .progressBar {
@@ -165,8 +289,11 @@
165
289
  white-space: nowrap;
166
290
  }
167
291
  .copiesBtn {
168
- width: 22px; height: 22px;
169
- display: flex; align-items: center; justify-content: center;
292
+ width: 22px;
293
+ height: 22px;
294
+ display: flex;
295
+ align-items: center;
296
+ justify-content: center;
170
297
  background: var(--nice-bg-secondary, #f8fafc);
171
298
  border: 1px solid var(--nice-border, #e2e8f0);
172
299
  border-radius: var(--nice-radius-sm, 4px);
@@ -174,15 +301,31 @@
174
301
  font-size: 14px;
175
302
  color: var(--nice-text-secondary, #475569);
176
303
  }
177
- .copiesBtn:disabled { opacity: 0.4; cursor: default; }
178
- .copiesBtn:not(:disabled):hover { background: var(--nice-border, #e2e8f0); }
179
- .copiesValue { min-width: 20px; text-align: center; font-size: 13px; }
304
+ .copiesBtn:disabled {
305
+ opacity: 0.4;
306
+ cursor: default;
307
+ }
308
+ .copiesBtn:not(:disabled):hover {
309
+ background: var(--nice-border, #e2e8f0);
310
+ }
311
+ .copiesValue {
312
+ min-width: 20px;
313
+ text-align: center;
314
+ font-size: 13px;
315
+ }
180
316
 
181
317
  /* Actions */
182
- .jobActions { display: flex; align-items: center; gap: var(--nice-space-1, 4px); }
318
+ .jobActions {
319
+ display: flex;
320
+ align-items: center;
321
+ gap: var(--nice-space-1, 4px);
322
+ }
183
323
  .actionBtn {
184
- width: 28px; height: 28px;
185
- display: flex; align-items: center; justify-content: center;
324
+ width: 28px;
325
+ height: 28px;
326
+ display: flex;
327
+ align-items: center;
328
+ justify-content: center;
186
329
  background: none;
187
330
  border: 1px solid var(--nice-border, #e2e8f0);
188
331
  border-radius: var(--nice-radius-md, 6px);
@@ -190,9 +333,16 @@
190
333
  font-size: 13px;
191
334
  color: var(--nice-text-secondary, #475569);
192
335
  }
193
- .actionBtn:hover { background: var(--nice-bg-secondary, #f1f5f9); }
194
- .removeBtn { color: var(--nice-danger, #ef4444); border-color: var(--nice-danger-bg, #fecaca); }
195
- .removeBtn:hover { background: var(--nice-danger-bg, #fef2f2); }
336
+ .actionBtn:hover {
337
+ background: var(--nice-bg-secondary, #f1f5f9);
338
+ }
339
+ .removeBtn {
340
+ color: var(--nice-danger, #ef4444);
341
+ border-color: var(--nice-danger-bg, #fecaca);
342
+ }
343
+ .removeBtn:hover {
344
+ background: var(--nice-danger-bg, #fef2f2);
345
+ }
196
346
 
197
347
  /* Empty state */
198
348
  .emptyState {
package/src/template-browser/NiceTemplateBrowser.tsx CHANGED
@@ -1,7 +1,11 @@
1
1
  /* eslint-disable jsx-a11y/click-events-have-key-events -- modal overlay backdrops (Esc-on-parent provides keyboard close), selection rows in .map() accompanied by visible cursor:pointer styling and sibling buttons; full keyboard migration via useAccessibleClick + extracted subcomponents tracked in TODO_1.0.10 A2.3 */
2
2
  import React, { useState } from 'react';
3
3
 
4
- import type { PrintTemplate, TemplateId as _TemplateId, NiceTemplateBrowserProps } from '../types/printingTypes';
4
+ import type {
5
+ PrintTemplate,
6
+ TemplateId as _TemplateId,
7
+ NiceTemplateBrowserProps,
8
+ } from '../types/printingTypes';
5
9
 
6
10
  import styles from './TemplateBrowser.module.css';
7
11
 
package/src/template-browser/TemplateBrowser.module.css CHANGED
@@ -10,7 +10,11 @@
10
10
  overflow: hidden;
11
11
  }
12
12
 
13
- .dark { background: var(--nice-text, #0f172a); color: var(--nice-border, #e2e8f0); border-color: var(--nice-text, #1e293b); }
13
+ .dark {
14
+ background: var(--nice-text, #0f172a);
15
+ color: var(--nice-border, #e2e8f0);
16
+ border-color: var(--nice-text, #1e293b);
17
+ }
14
18
 
15
19
  /* ── Top bar ── */
16
20
  .topBar {
@@ -18,12 +22,15 @@
18
22
  align-items: center;
19
23
  gap: var(--nice-space-2, 8px);
20
24
  padding: var(--nice-space-2-5, 10px) var(--nice-space-3, 12px);
21
- background: var(--nice-bg, #FFF);
25
+ background: var(--nice-bg, #fff);
22
26
  border-bottom: 1px solid var(--nice-border, #e2e8f0);
23
27
  flex-shrink: 0;
24
28
  }
25
29
 
26
- .dark .topBar { background: var(--nice-text, #1e293b); border-bottom-color: var(--nice-text, #334155); }
30
+ .dark .topBar {
31
+ background: var(--nice-text, #1e293b);
32
+ border-bottom-color: var(--nice-text, #334155);
33
+ }
27
34
 
28
35
  .searchInput {
29
36
  flex: 1;
@@ -36,14 +43,21 @@
36
43
  outline: none;
37
44
  }
38
45
 
39
- .searchInput:focus { border-color: var(--nice-primary-light, #93c5fd); background: var(--nice-bg, #FFF); }
40
- .dark .searchInput { background: var(--nice-text, #334155); border-color: var(--nice-text-secondary, #475569); color: var(--nice-border, #e2e8f0); }
46
+ .searchInput:focus {
47
+ border-color: var(--nice-primary-light, #93c5fd);
48
+ background: var(--nice-bg, #fff);
49
+ }
50
+ .dark .searchInput {
51
+ background: var(--nice-text, #334155);
52
+ border-color: var(--nice-text-secondary, #475569);
53
+ color: var(--nice-border, #e2e8f0);
54
+ }
41
55
 
42
56
  .actionBtn {
43
57
  padding: var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);
44
58
  border: 1px solid var(--nice-border, #e2e8f0);
45
59
  border-radius: var(--nice-radius-md, 6px);
46
- background: var(--nice-bg, #FFF);
60
+ background: var(--nice-bg, #fff);
47
61
  cursor: pointer;
48
62
  font-size: 12px;
49
63
  font-weight: 500;
@@ -52,8 +66,14 @@
52
66
  transition: all 0.1s;
53
67
  }
54
68
 
55
- .actionBtn:hover { background: var(--nice-bg-secondary, #f1f5f9); }
56
- .dark .actionBtn { background: var(--nice-text, #334155); border-color: var(--nice-text-secondary, #475569); color: var(--nice-border, #e2e8f0); }
69
+ .actionBtn:hover {
70
+ background: var(--nice-bg-secondary, #f1f5f9);
71
+ }
72
+ .dark .actionBtn {
73
+ background: var(--nice-text, #334155);
74
+ border-color: var(--nice-text-secondary, #475569);
75
+ color: var(--nice-border, #e2e8f0);
76
+ }
57
77
 
58
78
  /* ── Categories ── */
59
79
  .categoryRow {
@@ -63,28 +83,33 @@
63
83
  border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
64
84
  flex-wrap: wrap;
65
85
  flex-shrink: 0;
66
- background: var(--nice-bg, #FFF);
86
+ background: var(--nice-bg, #fff);
67
87
  }
68
88
 
69
- .dark .categoryRow { background: var(--nice-text, #1e293b); border-bottom-color: var(--nice-text, #334155); }
89
+ .dark .categoryRow {
90
+ background: var(--nice-text, #1e293b);
91
+ border-bottom-color: var(--nice-text, #334155);
92
+ }
70
93
 
71
94
  .catChip {
72
95
  padding: var(--nice-space-0-75, 3px) var(--nice-space-2-5, 10px);
73
96
  border: 1px solid var(--nice-border, #e2e8f0);
74
97
  border-radius: var(--nice-radius-xl, 14px);
75
- background: var(--nice-bg, #FFF);
98
+ background: var(--nice-bg, #fff);
76
99
  cursor: pointer;
77
100
  font-size: 12px;
78
101
  color: var(--nice-text-secondary, #64748b);
79
102
  transition: all 0.1s;
80
103
  }
81
104
 
82
- .catChip:hover { background: var(--nice-bg-secondary, #f1f5f9); }
105
+ .catChip:hover {
106
+ background: var(--nice-bg-secondary, #f1f5f9);
107
+ }
83
108
 
84
109
  .catChipActive {
85
110
  background: var(--nice-primary-hover, #2563eb);
86
111
  border-color: var(--nice-primary-hover, #2563eb);
87
- color: var(--nice-bg, #FFF);
112
+ color: var(--nice-bg, #fff);
88
113
  }
89
114
 
90
115
  /* ── Template grid ── */
@@ -102,7 +127,7 @@
102
127
  .card {
103
128
  flex: 0 0 auto;
104
129
  width: 180px;
105
- background: var(--nice-bg, #FFF);
130
+ background: var(--nice-bg, #fff);
106
131
  border: 2px solid var(--nice-border, #e2e8f0);
107
132
  border-radius: var(--nice-radius-lg, 8px);
108
133
  overflow: hidden;
@@ -120,7 +145,10 @@
120
145
  box-shadow: 0 0 0 3px var(--nice-primary-tint-15, rgba(37, 99, 235, 0.15));
121
146
  }
122
147
 
123
- .dark .card { background: var(--nice-text, #1e293b); border-color: var(--nice-text, #334155); }
148
+ .dark .card {
149
+ background: var(--nice-text, #1e293b);
150
+ border-color: var(--nice-text, #334155);
151
+ }
124
152
 
125
153
  /* Thumbnail */
126
154
  .thumbnail {
@@ -145,7 +173,7 @@
145
173
 
146
174
  .paperMini {
147
175
  width: 70px;
148
- background: var(--nice-bg, #FFF);
176
+ background: var(--nice-bg, #fff);
149
177
  border: 1px solid var(--nice-border, #e2e8f0);
150
178
  border-radius: var(--nice-radius-sm, 2px);
151
179
  padding: var(--nice-space-2, 8px) var(--nice-space-1-5, 6px);
@@ -175,7 +203,7 @@
175
203
  .overlayBtn {
176
204
  width: 32px;
177
205
  height: 32px;
178
- background: var(--nice-bg, #FFF);
206
+ background: var(--nice-bg, #fff);
179
207
  border: none;
180
208
  border-radius: var(--nice-radius-full, 50%);
181
209
  cursor: pointer;
@@ -186,11 +214,16 @@
186
214
  transition: all 0.1s;
187
215
  }
188
216
 
189
- .overlayBtn:hover { background: var(--nice-primary-bg, #e0f2fe); }
217
+ .overlayBtn:hover {
218
+ background: var(--nice-primary-bg, #e0f2fe);
219
+ }
190
220
 
191
221
  .overlayBtnDanger {
192
- width: 28px; height: 28px;
193
- display: flex; align-items: center; justify-content: center;
222
+ width: 28px;
223
+ height: 28px;
224
+ display: flex;
225
+ align-items: center;
226
+ justify-content: center;
194
227
  background: var(--nice-overlay-light-90, rgba(255, 255, 255, 0.9));
195
228
  border: 1px solid var(--nice-border, #e2e8f0);
196
229
  border-radius: var(--nice-radius-md, 6px);
@@ -200,10 +233,14 @@
200
233
  transition: all 0.1s;
201
234
  }
202
235
 
203
- .overlayBtnDanger:hover { background: var(--nice-danger-bg, #fee2e2) !important; }
236
+ .overlayBtnDanger:hover {
237
+ background: var(--nice-danger-bg, #fee2e2) !important;
238
+ }
204
239
 
205
240
  /* Card body */
206
- .cardBody { padding: var(--nice-space-2, 8px) var(--nice-space-2-5, 10px); }
241
+ .cardBody {
242
+ padding: var(--nice-space-2, 8px) var(--nice-space-2-5, 10px);
243
+ }
207
244
 
208
245
  .cardName {
209
246
  font-weight: 600;
@@ -215,7 +252,9 @@
215
252
  margin-bottom: var(--nice-space-0-5, 2px);
216
253
  }
217
254
 
218
- .dark .cardName { color: var(--nice-bg-secondary, #f1f5f9); }
255
+ .dark .cardName {
256
+ color: var(--nice-bg-secondary, #f1f5f9);
257
+ }
219
258
 
220
259
  .cardDesc {
221
260
  font-size: 11px;
@@ -251,7 +290,11 @@
251
290
  border-radius: var(--nice-radius-sm, 4px);
252
291
  }
253
292
 
254
- .cardTags { display: flex; gap: var(--nice-space-0-75, 3px); flex-wrap: wrap; }
293
+ .cardTags {
294
+ display: flex;
295
+ gap: var(--nice-space-0-75, 3px);
296
+ flex-wrap: wrap;
297
+ }
255
298
 
256
299
  .cardTag {
257
300
  font-size: 9px;
@@ -274,4 +317,6 @@
274
317
  font-size: 14px;
275
318
  }
276
319
 
277
- .emptyIcon { font-size: 40px; }
320
+ .emptyIcon {
321
+ font-size: 40px;
322
+ }
package/src/template-editor/NiceTemplateEditor.tsx CHANGED
@@ -98,9 +98,7 @@ const FIELD_TYPE_LABELS: Record<string, string> = {
98
98
  // ─── Undo/Redo history ───────────────────────────────────────────────────────
99
99
  type HistoryState = { past: PrintTemplate[]; present: PrintTemplate; future: PrintTemplate[] };
100
100
  type HistoryAction =
101
- | { type: 'UPDATE'; payload: PrintTemplate }
102
- | { type: 'UNDO' }
103
- | { type: 'REDO' };
101
+ { type: 'UPDATE'; payload: PrintTemplate } | { type: 'UNDO' } | { type: 'REDO' };
104
102
 
105
103
  const MAX_HISTORY = 50;
106
104