@nice2dev/ui-printing 1.1.6 → 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 (15) hide show
  1. package/dist/index.cjs +2 -2
  2. package/dist/index.d.ts +5 -5
  3. package/dist/index.mjs +901 -901
  4. package/dist/ui-printing.css +1 -1
  5. package/package.json +2 -2
  6. package/src/index.ts +5 -24
  7. package/src/print-button/NicePrintButton.tsx +5 -1
  8. package/src/print-button/PrintButton.module.css +147 -43
  9. package/src/print-preview/NicePrintPreview.tsx +10 -9
  10. package/src/print-preview/PrintPreview.module.css +60 -18
  11. package/src/print-queue/PrintQueue.module.css +207 -57
  12. package/src/template-browser/NiceTemplateBrowser.tsx +5 -1
  13. package/src/template-browser/TemplateBrowser.module.css +70 -25
  14. package/src/template-editor/NiceTemplateEditor.tsx +1 -3
  15. package/src/template-editor/TemplateEditor.module.css +96 -47
package/src/print-preview/NicePrintPreview.tsx CHANGED
@@ -89,7 +89,7 @@ const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
89
89
  fontSize: (field.style.fontSize ?? 10) * zoom,
90
90
  fontWeight: field.style.fontWeight ?? 'normal',
91
91
  fontStyle: field.style.fontStyle ?? 'normal',
92
- color: field.style.color ?? 'var(--text-primary, #0f172a)',
92
+ color: field.style.color ?? 'var(--nice-text-primary, #0f172a)',
93
93
  textAlign: field.style.textAlign ?? 'left',
94
94
  backgroundColor: field.style.backgroundColor,
95
95
  transform: field.style.rotation ? `rotate(${field.style.rotation}deg)` : undefined,
@@ -127,8 +127,8 @@ const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
127
127
  <div
128
128
  style={{
129
129
  ...baseStyle,
130
- background: 'var(--bg-secondary, #f8fafc)',
131
- border: '1px dashed var(--border-color, #e2e8f0)',
130
+ background: 'var(--nice-bg-secondary, #f8fafc)',
131
+ border: '1px dashed var(--nice-border-color, #e2e8f0)',
132
132
  alignItems: 'center',
133
133
  justifyContent: 'center',
134
134
  fontSize: 10 * zoom,
@@ -143,11 +143,11 @@ const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
143
143
  <div
144
144
  style={{
145
145
  ...baseStyle,
146
- borderBottom: '1px solid var(--text-primary, #0f172a)',
146
+ borderBottom: '1px solid var(--nice-text-primary, #0f172a)',
147
147
  alignItems: 'flex-end',
148
148
  }}
149
149
  >
150
- <span style={{ fontSize: 8 * zoom, color: 'var(--text-muted, #94a3b8)' }}>
150
+ <span style={{ fontSize: 8 * zoom, color: 'var(--nice-text-muted, #94a3b8)' }}>
151
151
  {field.label}
152
152
  </span>
153
153
  </div>
@@ -158,7 +158,7 @@ const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
158
158
  <div
159
159
  style={{
160
160
  ...baseStyle,
161
- borderBottom: `${field.style.borderWidth ?? 1}px ${field.style.borderStyle ?? 'solid'} ${field.style.borderColor ?? 'var(--text-primary, #0f172a)'}`,
161
+ borderBottom: `${field.style.borderWidth ?? 1}px ${field.style.borderStyle ?? 'solid'} ${field.style.borderColor ?? 'var(--nice-text-primary, #0f172a)'}`,
162
162
  }}
163
163
  />
164
164
  );
@@ -382,7 +382,7 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
382
382
  style={{
383
383
  position: 'fixed',
384
384
  inset: 0,
385
- background: 'color-mix(in srgb, var(--text-primary, #000) 50%, transparent)',
385
+ background: 'color-mix(in srgb, var(--nice-text-primary, #000) 50%, transparent)',
386
386
  display: 'flex',
387
387
  alignItems: 'center',
388
388
  justifyContent: 'center',
@@ -400,9 +400,10 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
400
400
  role="dialog"
401
401
  aria-modal="true"
402
402
  style={{
403
- background: 'var(--bg-elevated, var(--bg-primary, #ffffff))',
403
+ background: 'var(--nice-bg-elevated, var(--nice-bg-primary, #ffffff))',
404
404
  borderRadius: 12,
405
- boxShadow: '0 20px 60px color-mix(in srgb, var(--text-primary, #000) 30%, transparent)',
405
+ boxShadow:
406
+ '0 20px 60px color-mix(in srgb, var(--nice-text-primary, #000) 30%, transparent)',
406
407
  maxWidth: '90vw',
407
408
  maxHeight: '90vh',
408
409
  overflow: 'auto',
package/src/print-preview/PrintPreview.module.css CHANGED
@@ -7,7 +7,10 @@
7
7
  font-size: 14px;
8
8
  color: var(--nice-text, #1e293b);
9
9
  }
10
- .dark { background: var(--nice-text, #1e293b); color: var(--nice-bg-secondary, #f1f5f9); }
10
+ .dark {
11
+ background: var(--nice-text, #1e293b);
12
+ color: var(--nice-bg-secondary, #f1f5f9);
13
+ }
11
14
 
12
15
  /* Header bar */
13
16
  .headerBar {
@@ -15,13 +18,20 @@
15
18
  align-items: center;
16
19
  gap: var(--nice-space-3, 12px);
17
20
  padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
18
- background: var(--nice-bg, #FFF);
21
+ background: var(--nice-bg, #fff);
19
22
  border-bottom: 1px solid var(--nice-border, #e2e8f0);
20
23
  flex-shrink: 0;
21
24
  }
22
- .dark .headerBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }
25
+ .dark .headerBar {
26
+ background: var(--nice-text, #0f172a);
27
+ border-color: var(--nice-text, #334155);
28
+ }
23
29
 
24
- .entityNav { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); }
30
+ .entityNav {
31
+ display: flex;
32
+ align-items: center;
33
+ gap: var(--nice-space-1-5, 6px);
34
+ }
25
35
  .navBtn {
26
36
  padding: var(--nice-space-1, 4px) var(--nice-space-2, 8px);
27
37
  background: var(--nice-bg-secondary, #f8fafc);
@@ -32,9 +42,19 @@
32
42
  line-height: 1;
33
43
  color: var(--nice-text-secondary, #475569);
34
44
  }
35
- .navBtn:disabled { opacity: 0.4; cursor: default; }
36
- .navBtn:not(:disabled):hover { background: var(--nice-border, #e2e8f0); }
37
- .navLabel { color: var(--nice-text-secondary, #64748b); font-size: 13px; min-width: 48px; text-align: center; }
45
+ .navBtn:disabled {
46
+ opacity: 0.4;
47
+ cursor: default;
48
+ }
49
+ .navBtn:not(:disabled):hover {
50
+ background: var(--nice-border, #e2e8f0);
51
+ }
52
+ .navLabel {
53
+ color: var(--nice-text-secondary, #64748b);
54
+ font-size: 13px;
55
+ min-width: 48px;
56
+ text-align: center;
57
+ }
38
58
 
39
59
  .sampleBadge {
40
60
  padding: var(--nice-space-0-75, 3px) var(--nice-space-2-5, 10px);
@@ -45,10 +65,18 @@
45
65
  color: var(--nice-warning-dark, #854d0e);
46
66
  }
47
67
 
48
- .zoomBar { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); margin-left: auto; }
68
+ .zoomBar {
69
+ display: flex;
70
+ align-items: center;
71
+ gap: var(--nice-space-1-5, 6px);
72
+ margin-left: auto;
73
+ }
49
74
  .zoomBtn {
50
- width: 28px; height: 28px;
51
- display: flex; align-items: center; justify-content: center;
75
+ width: 28px;
76
+ height: 28px;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
52
80
  background: var(--nice-bg-secondary, #f8fafc);
53
81
  border: 1px solid var(--nice-border, #e2e8f0);
54
82
  border-radius: var(--nice-radius-sm, 4px);
@@ -56,20 +84,29 @@
56
84
  font-size: 15px;
57
85
  color: var(--nice-text-secondary, #475569);
58
86
  }
59
- .zoomBtn:hover { background: var(--nice-border, #e2e8f0); }
60
- .zoomLabel { font-size: 13px; min-width: 42px; text-align: center; color: var(--nice-text-secondary, #64748b); }
87
+ .zoomBtn:hover {
88
+ background: var(--nice-border, #e2e8f0);
89
+ }
90
+ .zoomLabel {
91
+ font-size: 13px;
92
+ min-width: 42px;
93
+ text-align: center;
94
+ color: var(--nice-text-secondary, #64748b);
95
+ }
61
96
 
62
97
  .printBtn {
63
98
  padding: var(--nice-space-1-5, 6px) var(--nice-space-4, 16px);
64
99
  background: var(--nice-primary-hover, #2563eb);
65
- color: var(--nice-bg, #FFF);
100
+ color: var(--nice-bg, #fff);
66
101
  border: none;
67
102
  border-radius: var(--nice-radius-md, 6px);
68
103
  cursor: pointer;
69
104
  font-size: 13px;
70
105
  font-weight: 500;
71
106
  }
72
- .printBtn:hover { background: var(--nice-primary-dark, #1d4ed8); }
107
+ .printBtn:hover {
108
+ background: var(--nice-primary-dark, #1d4ed8);
109
+ }
73
110
 
74
111
  /* Canvas area */
75
112
  .canvas {
@@ -84,13 +121,15 @@
84
121
  /* Page paper */
85
122
  .page {
86
123
  position: relative;
87
- background: var(--nice-bg, #FFF);
124
+ background: var(--nice-bg, #fff);
88
125
  box-shadow: 0 4px 32px var(--nice-overlay-20, rgba(0, 0, 0, 0.18));
89
126
  border-radius: var(--nice-radius-sm, 2px);
90
127
  overflow: hidden;
91
128
  flex-shrink: 0;
92
129
  }
93
- .dark .page { box-shadow: 0 4px 32px var(--nice-overlay-60, rgba(0, 0, 0, 0.6)); }
130
+ .dark .page {
131
+ box-shadow: 0 4px 32px var(--nice-overlay-60, rgba(0, 0, 0, 0.6));
132
+ }
94
133
 
95
134
  /* Watermark */
96
135
  .watermark {
@@ -113,10 +152,13 @@
113
152
  align-items: center;
114
153
  gap: var(--nice-space-4, 16px);
115
154
  padding: var(--nice-space-1-5, 6px) var(--nice-space-4, 16px);
116
- background: var(--nice-bg, #FFF);
155
+ background: var(--nice-bg, #fff);
117
156
  border-top: 1px solid var(--nice-border, #e2e8f0);
118
157
  font-size: 12px;
119
158
  color: var(--nice-text-muted, #94a3b8);
120
159
  flex-shrink: 0;
121
160
  }
122
- .dark .footerBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }
161
+ .dark .footerBar {
162
+ background: var(--nice-text, #0f172a);
163
+ border-color: var(--nice-text, #334155);
164
+ }
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