@nice2dev/ui-printing 1.1.6 → 1.1.9

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 (32) hide show
  1. package/dist/index.cjs +2 -2
  2. package/dist/index.d.ts +5 -5
  3. package/dist/index.mjs +1894 -1728
  4. package/dist/ui-printing.css +1 -1
  5. package/package.json +3 -2
  6. package/src/index.ts +5 -24
  7. package/src/print-button/NicePrintButton.tsx +44 -18
  8. package/src/print-button/PrintButton.module.css +147 -43
  9. package/src/print-preview/NicePrintPreview.tsx +19 -17
  10. package/src/print-preview/PrintPreview.module.css +60 -18
  11. package/src/print-queue/NicePrintQueue.tsx +76 -42
  12. package/src/print-queue/PrintQueue.module.css +207 -57
  13. package/src/template-browser/NiceTemplateBrowser.tsx +44 -19
  14. package/src/template-browser/TemplateBrowser.module.css +70 -25
  15. package/src/template-editor/NiceTemplateEditor.tsx +307 -182
  16. package/src/template-editor/TemplateEditor.module.css +184 -128
  17. package/src/types/printingTypes.ts +1 -1
  18. package/dist/index.d.ts.map +0 -1
  19. package/dist/print-button/NicePrintButton.d.ts.map +0 -1
  20. package/dist/print-button/index.d.ts.map +0 -1
  21. package/dist/print-preview/NicePrintPreview.d.ts.map +0 -1
  22. package/dist/print-preview/index.d.ts.map +0 -1
  23. package/dist/print-queue/NicePrintQueue.d.ts.map +0 -1
  24. package/dist/print-queue/index.d.ts.map +0 -1
  25. package/dist/style.css +0 -1
  26. package/dist/template-browser/NiceTemplateBrowser.d.ts.map +0 -1
  27. package/dist/template-browser/index.d.ts.map +0 -1
  28. package/dist/template-editor/NiceTemplateEditor.d.ts.map +0 -1
  29. package/dist/template-editor/index.d.ts.map +0 -1
  30. package/dist/types/printingTypes.d.ts.map +0 -1
  31. package/src/template-editor/NiceTemplateEditor.tsx.first +0 -1011
  32. package/src/template-editor/NiceTemplateEditor.tsx.tmp +0 -392
package/src/template-editor/TemplateEditor.module.css CHANGED
@@ -12,8 +12,8 @@
12
12
  }
13
13
 
14
14
  .dark {
15
- background: var(--nice-text, #0f172a);
16
- color: var(--nice-border, #e2e8f0);
15
+ background: var(--nice-bg-primary, #0f172a);
16
+ color: var(--nice-text-secondary, #e2e8f0);
17
17
  }
18
18
 
19
19
  /* ─── Toolbar ─────────────────────────────────────────────────────────────── */
@@ -23,7 +23,7 @@
23
23
  flex-wrap: wrap;
24
24
  gap: var(--nice-space-1-5, 6px);
25
25
  padding: var(--nice-space-1-5, 6px) var(--nice-space-2-5, 10px);
26
- background: var(--nice-bg, #FFFFFF);
26
+ background: var(--nice-bg, #ffffff);
27
27
  border-bottom: 1px solid var(--nice-border, #e2e8f0);
28
28
  box-shadow: 0 1px 3px var(--nice-overlay-6, rgba(0, 0, 0, 0.06));
29
29
  flex-shrink: 0;
@@ -31,8 +31,8 @@
31
31
  }
32
32
 
33
33
  .dark .toolbar {
34
- background: var(--nice-text, #1e293b);
35
- border-bottom-color: var(--nice-text, #334155);
34
+ background: var(--nice-bg-secondary, #1e293b);
35
+ border-bottom-color: var(--nice-border-color, #334155);
36
36
  }
37
37
 
38
38
  .toolbarGroup {
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  .dark .toolbarGroup {
47
- border-right-color: var(--nice-text, #334155);
47
+ border-right-color: var(--nice-border-color, #334155);
48
48
  }
49
49
 
50
50
  .toolbarGroup:last-child {
@@ -64,7 +64,9 @@
64
64
  font-size: 12px;
65
65
  min-width: 28px;
66
66
  white-space: nowrap;
67
- transition: background 0.15s, border-color 0.15s;
67
+ transition:
68
+ background 0.15s,
69
+ border-color 0.15s;
68
70
  }
69
71
 
70
72
  .toolbarBtn:hover:not(:disabled) {
@@ -73,7 +75,7 @@
73
75
  }
74
76
 
75
77
  .dark .toolbarBtn:hover:not(:disabled) {
76
- background: var(--nice-text, #334155);
78
+ background: var(--nice-bg-tertiary, #334155);
77
79
  }
78
80
 
79
81
  .toolbarBtn:disabled {
@@ -110,8 +112,8 @@
110
112
  }
111
113
 
112
114
  .dark .toolbarSelect {
113
- background: var(--nice-text, #1e293b);
114
- border-color: var(--nice-text-secondary, #475569);
115
+ background: var(--nice-bg-secondary, #1e293b);
116
+ border-color: var(--nice-border-color, #475569);
115
117
  }
116
118
 
117
119
  .toolbarSep {
@@ -123,7 +125,7 @@
123
125
  }
124
126
 
125
127
  .dark .toolbarSep {
126
- background: var(--nice-text, #334155);
128
+ background: var(--nice-bg-tertiary, #334155);
127
129
  }
128
130
 
129
131
  /* Insert dropdown */
@@ -146,7 +148,7 @@
146
148
  position: absolute;
147
149
  top: calc(100% + 4px);
148
150
  left: 0;
149
- background: var(--nice-bg, #FFFFFF);
151
+ background: var(--nice-bg, #ffffff);
150
152
  border: 1px solid var(--nice-border, #e2e8f0);
151
153
  border-radius: var(--nice-radius-lg, 8px);
152
154
  box-shadow: 0 8px 24px var(--nice-overlay-12, rgba(0, 0, 0, 0.12));
@@ -158,15 +160,15 @@
158
160
  }
159
161
 
160
162
  .dark .insertDropdown {
161
- background: var(--nice-text, #1e293b);
162
- border-color: var(--nice-text, #334155);
163
+ background: var(--nice-bg-secondary, #1e293b);
164
+ border-color: var(--nice-border-color, #334155);
163
165
  }
164
166
 
165
167
  .insertCategory {
166
168
  padding: var(--nice-space-1-5, 6px) var(--nice-space-2-5, 10px) var(--nice-space-0-5, 2px);
167
169
  font-size: 10px;
168
170
  font-weight: 600;
169
- letter-spacing: .06em;
171
+ letter-spacing: 0.06em;
170
172
  text-transform: uppercase;
171
173
  color: var(--nice-text-muted, #94a3b8);
172
174
  }
@@ -190,7 +192,7 @@
190
192
  }
191
193
 
192
194
  .dark .insertItem:hover {
193
- background: var(--nice-text, #334155);
195
+ background: var(--nice-bg-tertiary, #334155);
194
196
  }
195
197
 
196
198
  .insertIcon {
@@ -211,8 +213,8 @@
211
213
  }
212
214
 
213
215
  .dark .zoomSelect {
214
- background: var(--nice-text, #1e293b);
215
- border-color: var(--nice-text-secondary, #475569);
216
+ background: var(--nice-bg-secondary, #1e293b);
217
+ border-color: var(--nice-border-color, #475569);
216
218
  }
217
219
 
218
220
  /* Save button */
@@ -220,7 +222,7 @@
220
222
  margin-left: auto;
221
223
  padding: var(--nice-space-1-25, 5px) var(--nice-space-3-5, 14px);
222
224
  background: var(--nice-primary-hover, #2563eb);
223
- color: var(--nice-bg, #FFF);
225
+ color: var(--nice-text-on-primary, #fff);
224
226
  border: none;
225
227
  border-radius: var(--nice-radius-md, 6px);
226
228
  cursor: pointer;
@@ -248,13 +250,13 @@
248
250
  width: 220px;
249
251
  flex-shrink: 0;
250
252
  border-right: 1px solid var(--nice-border, #e2e8f0);
251
- background: var(--nice-bg, #FFFFFF);
253
+ background: var(--nice-bg, #ffffff);
252
254
  overflow: hidden;
253
255
  }
254
256
 
255
257
  .dark .leftPanel {
256
- background: var(--nice-text, #1e293b);
257
- border-right-color: var(--nice-text, #334155);
258
+ background: var(--nice-bg-secondary, #1e293b);
259
+ border-right-color: var(--nice-border-color, #334155);
258
260
  }
259
261
 
260
262
  .leftTabs {
@@ -264,7 +266,7 @@
264
266
  }
265
267
 
266
268
  .dark .leftTabs {
267
- border-bottom-color: var(--nice-text, #334155);
269
+ border-bottom-color: var(--nice-border-color, #334155);
268
270
  }
269
271
 
270
272
  .leftTab {
@@ -280,7 +282,10 @@
280
282
  cursor: pointer;
281
283
  font-size: 10px;
282
284
  border-bottom: 2px solid transparent;
283
- transition: color 0.15s, border-color 0.15s, background 0.15s;
285
+ transition:
286
+ color 0.15s,
287
+ border-color 0.15s,
288
+ background 0.15s;
284
289
  }
285
290
 
286
291
  .leftTab:hover {
@@ -289,8 +294,8 @@
289
294
  }
290
295
 
291
296
  .dark .leftTab:hover {
292
- background: var(--nice-text, #0f172a);
293
- color: var(--nice-border, #e2e8f0);
297
+ background: var(--nice-bg-primary, #0f172a);
298
+ color: var(--nice-text-secondary, #e2e8f0);
294
299
  }
295
300
 
296
301
  .leftTabActive {
@@ -325,7 +330,7 @@
325
330
  font-weight: 600;
326
331
  color: var(--nice-text-secondary, #475569);
327
332
  text-transform: uppercase;
328
- letter-spacing: .04em;
333
+ letter-spacing: 0.04em;
329
334
  display: flex;
330
335
  align-items: center;
331
336
  gap: var(--nice-space-1-5, 6px);
@@ -358,9 +363,9 @@
358
363
  }
359
364
 
360
365
  .dark .searchInput {
361
- background: var(--nice-text, #0f172a);
362
- border-color: var(--nice-text-secondary, #475569);
363
- color: var(--nice-border, #e2e8f0);
366
+ background: var(--nice-bg-primary, #0f172a);
367
+ border-color: var(--nice-border-color, #475569);
368
+ color: var(--nice-text-secondary, #e2e8f0);
364
369
  }
365
370
 
366
371
  .searchInput:focus {
@@ -389,7 +394,7 @@
389
394
  }
390
395
 
391
396
  .dark .fieldItem:hover {
392
- background: var(--nice-text, #334155);
397
+ background: var(--nice-bg-tertiary, #334155);
393
398
  }
394
399
 
395
400
  .fieldItem:active {
@@ -444,7 +449,8 @@
444
449
  display: flex;
445
450
  align-items: center;
446
451
  gap: var(--nice-space-2, 8px);
447
- padding: var(--nice-space-1-25, 5px) var(--nice-space-2-5, 10px) var(--nice-space-1-25, 5px) var(--nice-space-3, 12px);
452
+ padding: var(--nice-space-1-25, 5px) var(--nice-space-2-5, 10px) var(--nice-space-1-25, 5px)
453
+ var(--nice-space-3, 12px);
448
454
  cursor: pointer;
449
455
  transition: background 0.12s;
450
456
  }
@@ -454,7 +460,7 @@
454
460
  }
455
461
 
456
462
  .dark .layerItem:hover {
457
- background: var(--nice-text, #334155);
463
+ background: var(--nice-bg-tertiary, #334155);
458
464
  }
459
465
 
460
466
  .layerItemSelected {
@@ -520,8 +526,8 @@
520
526
  }
521
527
 
522
528
  .dark .wmItem {
523
- background: var(--nice-text, #0f172a);
524
- border-color: var(--nice-text, #334155);
529
+ background: var(--nice-bg-primary, #0f172a);
530
+ border-color: var(--nice-border-color, #334155);
525
531
  }
526
532
 
527
533
  .wmRow {
@@ -543,14 +549,14 @@
543
549
  border: 1px solid var(--nice-border, #e2e8f0);
544
550
  border-radius: var(--nice-radius-sm, 4px);
545
551
  font-size: 12px;
546
- background: var(--nice-bg, #FFF);
552
+ background: var(--nice-bg, #fff);
547
553
  color: inherit;
548
554
  }
549
555
 
550
556
  .dark .wmInput {
551
- background: var(--nice-text, #1e293b);
552
- border-color: var(--nice-text-secondary, #475569);
553
- color: var(--nice-border, #e2e8f0);
557
+ background: var(--nice-bg-secondary, #1e293b);
558
+ border-color: var(--nice-border-color, #475569);
559
+ color: var(--nice-text-secondary, #e2e8f0);
554
560
  }
555
561
 
556
562
  .wmInputNum {
@@ -559,7 +565,7 @@
559
565
  border: 1px solid var(--nice-border, #e2e8f0);
560
566
  border-radius: var(--nice-radius-sm, 4px);
561
567
  font-size: 12px;
562
- background: var(--nice-bg, #FFF);
568
+ background: var(--nice-bg, #fff);
563
569
  color: inherit;
564
570
  }
565
571
 
@@ -569,14 +575,14 @@
569
575
  border: 1px solid var(--nice-border, #e2e8f0);
570
576
  border-radius: var(--nice-radius-sm, 4px);
571
577
  font-size: 12px;
572
- background: var(--nice-bg, #FFF);
578
+ background: var(--nice-bg, #fff);
573
579
  color: inherit;
574
580
  }
575
581
 
576
582
  .dark .wmSelect {
577
- background: var(--nice-text, #1e293b);
578
- border-color: var(--nice-text-secondary, #475569);
579
- color: var(--nice-border, #e2e8f0);
583
+ background: var(--nice-bg-secondary, #1e293b);
584
+ border-color: var(--nice-border-color, #475569);
585
+ color: var(--nice-text-secondary, #e2e8f0);
580
586
  }
581
587
 
582
588
  .wmSlider {
@@ -602,7 +608,7 @@
602
608
  padding: var(--nice-space-1, 4px);
603
609
  border: 1px solid var(--nice-danger-bg, #fca5a5);
604
610
  border-radius: var(--nice-radius-md, 5px);
605
- background: var(--nice-bg, #FFF);
611
+ background: var(--nice-bg, #fff);
606
612
  color: var(--nice-danger, #ef4444);
607
613
  font-size: 11px;
608
614
  cursor: pointer;
@@ -653,14 +659,14 @@
653
659
  border: 1px solid var(--nice-border, #e2e8f0);
654
660
  border-radius: var(--nice-radius-md, 5px);
655
661
  font-size: 12px;
656
- background: var(--nice-bg, #FFF);
662
+ background: var(--nice-bg, #fff);
657
663
  color: inherit;
658
664
  }
659
665
 
660
666
  .dark .settingsInput {
661
- background: var(--nice-text, #0f172a);
662
- border-color: var(--nice-text-secondary, #475569);
663
- color: var(--nice-border, #e2e8f0);
667
+ background: var(--nice-bg-primary, #0f172a);
668
+ border-color: var(--nice-border-color, #475569);
669
+ color: var(--nice-text-secondary, #e2e8f0);
664
670
  }
665
671
 
666
672
  .settingsInputNum {
@@ -669,14 +675,14 @@
669
675
  border: 1px solid var(--nice-border, #e2e8f0);
670
676
  border-radius: var(--nice-radius-md, 5px);
671
677
  font-size: 12px;
672
- background: var(--nice-bg, #FFF);
678
+ background: var(--nice-bg, #fff);
673
679
  color: inherit;
674
680
  }
675
681
 
676
682
  .dark .settingsInputNum {
677
- background: var(--nice-text, #0f172a);
678
- border-color: var(--nice-text-secondary, #475569);
679
- color: var(--nice-border, #e2e8f0);
683
+ background: var(--nice-bg-primary, #0f172a);
684
+ border-color: var(--nice-border-color, #475569);
685
+ color: var(--nice-text-secondary, #e2e8f0);
680
686
  }
681
687
 
682
688
  .settingsTextarea {
@@ -685,15 +691,15 @@
685
691
  border: 1px solid var(--nice-border, #e2e8f0);
686
692
  border-radius: var(--nice-radius-md, 5px);
687
693
  font-size: 12px;
688
- background: var(--nice-bg, #FFF);
694
+ background: var(--nice-bg, #fff);
689
695
  color: inherit;
690
696
  resize: vertical;
691
697
  }
692
698
 
693
699
  .dark .settingsTextarea {
694
- background: var(--nice-text, #0f172a);
695
- border-color: var(--nice-text-secondary, #475569);
696
- color: var(--nice-border, #e2e8f0);
700
+ background: var(--nice-bg-primary, #0f172a);
701
+ border-color: var(--nice-border-color, #475569);
702
+ color: var(--nice-text-secondary, #e2e8f0);
697
703
  }
698
704
 
699
705
  .settingsDivider {
@@ -702,7 +708,7 @@
702
708
  font-size: 10px;
703
709
  font-weight: 600;
704
710
  text-transform: uppercase;
705
- letter-spacing: .06em;
711
+ letter-spacing: 0.06em;
706
712
  color: var(--nice-text-muted, #94a3b8);
707
713
  }
708
714
 
@@ -731,7 +737,7 @@
731
737
  }
732
738
 
733
739
  .dark .canvasArea {
734
- background: var(--nice-text, #0f172a);
740
+ background: var(--nice-bg-primary, #0f172a);
735
741
  }
736
742
 
737
743
  .testDataBar {
@@ -760,7 +766,7 @@
760
766
  border: 1px solid var(--nice-warning-light, #fcd34d);
761
767
  border-radius: var(--nice-radius-sm, 4px);
762
768
  font-size: 11px;
763
- background: var(--nice-bg, #FFF);
769
+ background: var(--nice-bg, #fff);
764
770
  color: inherit;
765
771
  }
766
772
 
@@ -786,8 +792,8 @@
786
792
  }
787
793
 
788
794
  .dark .rulerCorner {
789
- background: var(--nice-text, #334155);
790
- border-color: var(--nice-text-secondary, #475569);
795
+ background: var(--nice-bg-tertiary, #334155);
796
+ border-color: var(--nice-border-color, #475569);
791
797
  }
792
798
 
793
799
  .ruler {
@@ -798,8 +804,8 @@
798
804
  }
799
805
 
800
806
  .dark .ruler {
801
- background: var(--nice-text, #1e293b);
802
- border-bottom-color: var(--nice-text, #334155);
807
+ background: var(--nice-bg-secondary, #1e293b);
808
+ border-bottom-color: var(--nice-border-color, #334155);
803
809
  }
804
810
 
805
811
  .ruler_h {
@@ -823,7 +829,7 @@
823
829
  bottom: 0;
824
830
  width: 1px;
825
831
  height: 5px;
826
- background: var(--nice-text-muted, #94a3b8);
832
+ background: var(--nice-bg-tertiary, #94a3b8);
827
833
  transform: translateX(-50%);
828
834
  }
829
835
 
@@ -839,7 +845,7 @@
839
845
 
840
846
  .rulerTickMajor {
841
847
  height: 10px;
842
- background: var(--nice-text-secondary, #64748b);
848
+ background: var(--nice-bg-tertiary, #64748b);
843
849
  }
844
850
 
845
851
  .ruler_v .rulerTickMajor {
@@ -877,20 +883,26 @@
877
883
 
878
884
  .paperShadow {
879
885
  position: relative;
880
- background: var(--nice-bg, #FFFFFF);
881
- box-shadow: 0 4px 24px var(--nice-overlay-20, rgba(0, 0, 0, 0.18)), 0 1px 4px var(--nice-overlay-8, rgba(0, 0, 0, 0.08));
886
+ /* audit-allow: literal-color — the PAPER, i.e. document, not chrome: its ink is the literal
887
+ INK (#000) from the template data, so the sheet stays white in every theme (a themed
888
+ sheet put black fields on a near-black page in dark themes). */
889
+ background: #ffffff;
890
+ box-shadow:
891
+ 0 4px 24px var(--nice-overlay-20, rgba(0, 0, 0, 0.18)),
892
+ 0 1px 4px var(--nice-overlay-8, rgba(0, 0, 0, 0.08));
882
893
  flex-shrink: 0;
883
894
  }
884
895
 
885
896
  .dark .paperShadow {
886
- background: var(--nice-bg-secondary, #f8fafc);
897
+ /* audit-allow: literal-color — off-white paper in the dark editor, still document. */
898
+ background: #f8fafc;
887
899
  }
888
900
 
889
901
  /* Margin guide overlay */
890
902
  .marginGuide {
891
903
  position: absolute;
892
904
  pointer-events: none;
893
- border: 1px dashed rgba(59,130,246,.35);
905
+ border: 1px dashed rgba(59, 130, 246, 0.35);
894
906
  z-index: 0;
895
907
  }
896
908
 
@@ -903,7 +915,7 @@
903
915
  font-weight: 900;
904
916
  white-space: nowrap;
905
917
  user-select: none;
906
- letter-spacing: .1em;
918
+ letter-spacing: 0.1em;
907
919
  z-index: 0;
908
920
  }
909
921
 
@@ -926,10 +938,10 @@
926
938
  font-size: 9px;
927
939
  font-weight: 600;
928
940
  text-transform: uppercase;
929
- letter-spacing: .06em;
941
+ letter-spacing: 0.06em;
930
942
  padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px);
931
943
  border-radius: var(--nice-radius-sm, 3px);
932
- background: rgba(148,163,184,.25);
944
+ background: rgba(148, 163, 184, 0.25);
933
945
  color: var(--nice-text-secondary, #64748b);
934
946
  pointer-events: none;
935
947
  z-index: 50;
@@ -981,7 +993,7 @@
981
993
  color: var(--nice-text-secondary, #64748b);
982
994
  font-size: 10px;
983
995
  font-family: monospace;
984
- letter-spacing: .05em;
996
+ letter-spacing: 0.05em;
985
997
  border: 1px solid var(--nice-border, #e2e8f0);
986
998
  }
987
999
 
@@ -991,7 +1003,10 @@
991
1003
  display: flex;
992
1004
  align-items: flex-end;
993
1005
  padding: var(--nice-space-1, 4px);
994
- border-bottom: 1px solid var(--nice-text, #1e293b);
1006
+ /* audit-allow: token-role — the signature rule is INK on the document, and the paper it
1007
+ sits on is themed the same way (.paperShadow reads --nice-bg), so it has to track the
1008
+ text colour rather than become a neutral --nice-border-color. */
1009
+ border-bottom: 1px solid var(--nice-border-color, #1e293b);
995
1010
  color: var(--nice-text-muted, #94a3b8);
996
1011
  font-size: 10px;
997
1012
  box-sizing: border-box;
@@ -1003,19 +1018,55 @@
1003
1018
  width: 8px;
1004
1019
  height: 8px;
1005
1020
  background: var(--nice-primary-hover, #2563eb);
1006
- border: 1.5px solid var(--nice-bg, #FFF);
1021
+ border: 1.5px solid var(--nice-bg, #fff);
1007
1022
  border-radius: var(--nice-radius-sm, 2px);
1008
1023
  z-index: 100;
1009
1024
  }
1010
1025
 
1011
- .handle_n { top: -4px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
1012
- .handle_s { bottom: -4px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
1013
- .handle_e { right: -4px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
1014
- .handle_w { left: -4px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
1015
- .handle_ne { top: -4px; right: -4px; cursor: ne-resize; }
1016
- .handle_nw { top: -4px; left: -4px; cursor: nw-resize; }
1017
- .handle_se { bottom: -4px; right: -4px; cursor: se-resize; }
1018
- .handle_sw { bottom: -4px; left: -4px; cursor: sw-resize; }
1026
+ .handle_n {
1027
+ top: -4px;
1028
+ left: 50%;
1029
+ transform: translateX(-50%);
1030
+ cursor: n-resize;
1031
+ }
1032
+ .handle_s {
1033
+ bottom: -4px;
1034
+ left: 50%;
1035
+ transform: translateX(-50%);
1036
+ cursor: s-resize;
1037
+ }
1038
+ .handle_e {
1039
+ right: -4px;
1040
+ top: 50%;
1041
+ transform: translateY(-50%);
1042
+ cursor: e-resize;
1043
+ }
1044
+ .handle_w {
1045
+ left: -4px;
1046
+ top: 50%;
1047
+ transform: translateY(-50%);
1048
+ cursor: w-resize;
1049
+ }
1050
+ .handle_ne {
1051
+ top: -4px;
1052
+ right: -4px;
1053
+ cursor: ne-resize;
1054
+ }
1055
+ .handle_nw {
1056
+ top: -4px;
1057
+ left: -4px;
1058
+ cursor: nw-resize;
1059
+ }
1060
+ .handle_se {
1061
+ bottom: -4px;
1062
+ right: -4px;
1063
+ cursor: se-resize;
1064
+ }
1065
+ .handle_sw {
1066
+ bottom: -4px;
1067
+ left: -4px;
1068
+ cursor: sw-resize;
1069
+ }
1019
1070
 
1020
1071
  /* ─── Right properties panel ──────────────────────────────────────────────── */
1021
1072
  .rightPanel {
@@ -1024,13 +1075,13 @@
1024
1075
  display: flex;
1025
1076
  flex-direction: column;
1026
1077
  border-left: 1px solid var(--nice-border, #e2e8f0);
1027
- background: var(--nice-bg, #FFFFFF);
1078
+ background: var(--nice-bg, #ffffff);
1028
1079
  overflow: hidden;
1029
1080
  }
1030
1081
 
1031
1082
  .dark .rightPanel {
1032
- background: var(--nice-text, #1e293b);
1033
- border-left-color: var(--nice-text, #334155);
1083
+ background: var(--nice-bg-secondary, #1e293b);
1084
+ border-left-color: var(--nice-border-color, #334155);
1034
1085
  }
1035
1086
 
1036
1087
  .rightTabs {
@@ -1040,7 +1091,7 @@
1040
1091
  }
1041
1092
 
1042
1093
  .dark .rightTabs {
1043
- border-bottom-color: var(--nice-text, #334155);
1094
+ border-bottom-color: var(--nice-border-color, #334155);
1044
1095
  }
1045
1096
 
1046
1097
  .rightTab {
@@ -1052,7 +1103,10 @@
1052
1103
  cursor: pointer;
1053
1104
  font-size: 11px;
1054
1105
  border-bottom: 2px solid transparent;
1055
- transition: color 0.12s, border-color 0.12s, background 0.12s;
1106
+ transition:
1107
+ color 0.12s,
1108
+ border-color 0.12s,
1109
+ background 0.12s;
1056
1110
  }
1057
1111
 
1058
1112
  .rightTab:hover {
@@ -1061,8 +1115,8 @@
1061
1115
  }
1062
1116
 
1063
1117
  .dark .rightTab:hover {
1064
- background: var(--nice-text, #0f172a);
1065
- color: var(--nice-border, #e2e8f0);
1118
+ background: var(--nice-bg-primary, #0f172a);
1119
+ color: var(--nice-text-secondary, #e2e8f0);
1066
1120
  }
1067
1121
 
1068
1122
  .rightTabActive {
@@ -1124,14 +1178,14 @@
1124
1178
  border: 1px solid var(--nice-border, #e2e8f0);
1125
1179
  border-radius: var(--nice-radius-sm, 4px);
1126
1180
  font-size: 12px;
1127
- background: var(--nice-bg, #FFF);
1181
+ background: var(--nice-bg, #fff);
1128
1182
  color: inherit;
1129
1183
  }
1130
1184
 
1131
1185
  .dark .posInput {
1132
- background: var(--nice-text, #0f172a);
1133
- border-color: var(--nice-text-secondary, #475569);
1134
- color: var(--nice-border, #e2e8f0);
1186
+ background: var(--nice-bg-primary, #0f172a);
1187
+ border-color: var(--nice-border-color, #475569);
1188
+ color: var(--nice-text-secondary, #e2e8f0);
1135
1189
  }
1136
1190
 
1137
1191
  .posInput:focus {
@@ -1153,7 +1207,7 @@
1153
1207
  font-size: 10px;
1154
1208
  font-weight: 600;
1155
1209
  text-transform: uppercase;
1156
- letter-spacing: .06em;
1210
+ letter-spacing: 0.06em;
1157
1211
  color: var(--nice-text-muted, #94a3b8);
1158
1212
  margin-bottom: var(--nice-space-1-25, 5px);
1159
1213
  }
@@ -1188,7 +1242,7 @@
1188
1242
  font-size: 10px;
1189
1243
  font-weight: 600;
1190
1244
  text-transform: uppercase;
1191
- letter-spacing: .06em;
1245
+ letter-spacing: 0.06em;
1192
1246
  color: var(--nice-text-muted, #94a3b8);
1193
1247
  margin-bottom: var(--nice-space-1-5, 6px);
1194
1248
  padding-bottom: var(--nice-space-1, 4px);
@@ -1196,7 +1250,7 @@
1196
1250
  }
1197
1251
 
1198
1252
  .dark .styleGroupTitle {
1199
- border-bottom-color: var(--nice-text, #334155);
1253
+ border-bottom-color: var(--nice-border-color, #334155);
1200
1254
  }
1201
1255
 
1202
1256
  .styleRow {
@@ -1218,14 +1272,14 @@
1218
1272
  border: 1px solid var(--nice-border, #e2e8f0);
1219
1273
  border-radius: var(--nice-radius-sm, 4px);
1220
1274
  font-size: 12px;
1221
- background: var(--nice-bg, #FFF);
1275
+ background: var(--nice-bg, #fff);
1222
1276
  color: inherit;
1223
1277
  }
1224
1278
 
1225
1279
  .dark .styleSelect {
1226
- background: var(--nice-text, #0f172a);
1227
- border-color: var(--nice-text-secondary, #475569);
1228
- color: var(--nice-border, #e2e8f0);
1280
+ background: var(--nice-bg-primary, #0f172a);
1281
+ border-color: var(--nice-border-color, #475569);
1282
+ color: var(--nice-text-secondary, #e2e8f0);
1229
1283
  }
1230
1284
 
1231
1285
  .styleSelectFull {
@@ -1234,14 +1288,14 @@
1234
1288
  border: 1px solid var(--nice-border, #e2e8f0);
1235
1289
  border-radius: var(--nice-radius-sm, 4px);
1236
1290
  font-size: 12px;
1237
- background: var(--nice-bg, #FFF);
1291
+ background: var(--nice-bg, #fff);
1238
1292
  color: inherit;
1239
1293
  }
1240
1294
 
1241
1295
  .dark .styleSelectFull {
1242
- background: var(--nice-text, #0f172a);
1243
- border-color: var(--nice-text-secondary, #475569);
1244
- color: var(--nice-border, #e2e8f0);
1296
+ background: var(--nice-bg-primary, #0f172a);
1297
+ border-color: var(--nice-border-color, #475569);
1298
+ color: var(--nice-text-secondary, #e2e8f0);
1245
1299
  }
1246
1300
 
1247
1301
  .styleSelectSm {
@@ -1250,7 +1304,7 @@
1250
1304
  border: 1px solid var(--nice-border, #e2e8f0);
1251
1305
  border-radius: var(--nice-radius-sm, 4px);
1252
1306
  font-size: 12px;
1253
- background: var(--nice-bg, #FFF);
1307
+ background: var(--nice-bg, #fff);
1254
1308
  color: inherit;
1255
1309
  }
1256
1310
 
@@ -1260,14 +1314,14 @@
1260
1314
  border: 1px solid var(--nice-border, #e2e8f0);
1261
1315
  border-radius: var(--nice-radius-sm, 4px);
1262
1316
  font-size: 11px;
1263
- background: var(--nice-bg, #FFF);
1317
+ background: var(--nice-bg, #fff);
1264
1318
  color: inherit;
1265
1319
  }
1266
1320
 
1267
1321
  .dark .styleSelectXs {
1268
- background: var(--nice-text, #0f172a);
1269
- border-color: var(--nice-text-secondary, #475569);
1270
- color: var(--nice-border, #e2e8f0);
1322
+ background: var(--nice-bg-primary, #0f172a);
1323
+ border-color: var(--nice-border-color, #475569);
1324
+ color: var(--nice-text-secondary, #e2e8f0);
1271
1325
  }
1272
1326
 
1273
1327
  .styleInput {
@@ -1276,14 +1330,14 @@
1276
1330
  border: 1px solid var(--nice-border, #e2e8f0);
1277
1331
  border-radius: var(--nice-radius-sm, 4px);
1278
1332
  font-size: 12px;
1279
- background: var(--nice-bg, #FFF);
1333
+ background: var(--nice-bg, #fff);
1280
1334
  color: inherit;
1281
1335
  }
1282
1336
 
1283
1337
  .dark .styleInput {
1284
- background: var(--nice-text, #0f172a);
1285
- border-color: var(--nice-text-secondary, #475569);
1286
- color: var(--nice-border, #e2e8f0);
1338
+ background: var(--nice-bg-primary, #0f172a);
1339
+ border-color: var(--nice-border-color, #475569);
1340
+ color: var(--nice-text-secondary, #e2e8f0);
1287
1341
  }
1288
1342
 
1289
1343
  .styleInputFull {
@@ -1292,14 +1346,14 @@
1292
1346
  border: 1px solid var(--nice-border, #e2e8f0);
1293
1347
  border-radius: var(--nice-radius-sm, 4px);
1294
1348
  font-size: 12px;
1295
- background: var(--nice-bg, #FFF);
1349
+ background: var(--nice-bg, #fff);
1296
1350
  color: inherit;
1297
1351
  }
1298
1352
 
1299
1353
  .dark .styleInputFull {
1300
- background: var(--nice-text, #0f172a);
1301
- border-color: var(--nice-text-secondary, #475569);
1302
- color: var(--nice-border, #e2e8f0);
1354
+ background: var(--nice-bg-primary, #0f172a);
1355
+ border-color: var(--nice-border-color, #475569);
1356
+ color: var(--nice-text-secondary, #e2e8f0);
1303
1357
  }
1304
1358
 
1305
1359
  .styleUnit {
@@ -1328,7 +1382,9 @@
1328
1382
  color: inherit;
1329
1383
  font-size: 12px;
1330
1384
  cursor: pointer;
1331
- transition: background 0.12s, border-color 0.12s;
1385
+ transition:
1386
+ background 0.12s,
1387
+ border-color 0.12s;
1332
1388
  }
1333
1389
 
1334
1390
  .toggleBtn:hover {
@@ -1358,14 +1414,14 @@
1358
1414
  border-radius: var(--nice-radius-sm, 4px);
1359
1415
  font-size: 12px;
1360
1416
  font-family: monospace;
1361
- background: var(--nice-bg, #FFF);
1417
+ background: var(--nice-bg, #fff);
1362
1418
  color: inherit;
1363
1419
  }
1364
1420
 
1365
1421
  .dark .colorHex {
1366
- background: var(--nice-text, #0f172a);
1367
- border-color: var(--nice-text-secondary, #475569);
1368
- color: var(--nice-border, #e2e8f0);
1422
+ background: var(--nice-bg-primary, #0f172a);
1423
+ border-color: var(--nice-border-color, #475569);
1424
+ color: var(--nice-text-secondary, #e2e8f0);
1369
1425
  }
1370
1426
 
1371
1427
  .clearBtn {
@@ -1402,8 +1458,8 @@
1402
1458
  }
1403
1459
 
1404
1460
  .dark .conditionalHint {
1405
- background: var(--nice-text, #0f172a);
1406
- border-color: var(--nice-text, #334155);
1461
+ background: var(--nice-bg-primary, #0f172a);
1462
+ border-color: var(--nice-border-color, #334155);
1407
1463
  }
1408
1464
 
1409
1465
  .clearConditionalBtn {
@@ -1441,8 +1497,8 @@
1441
1497
  }
1442
1498
 
1443
1499
  .dark .shortcutChip {
1444
- background: var(--nice-text, #0f172a);
1445
- border-color: var(--nice-text, #334155);
1500
+ background: var(--nice-bg-primary, #0f172a);
1501
+ border-color: var(--nice-border-color, #334155);
1446
1502
  }
1447
1503
 
1448
1504
  .shortcutKeys {