@arronqzy/react-view 1.0.5 → 1.0.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 (36) hide show
  1. package/dist/styles.css +519 -9
  2. package/package.json +12 -4
  3. package/src/core/template.tsx +12 -2
  4. package/src/panel/ReactViewOnlinePreview.tsx +18 -8
  5. package/src/panel/ReactViewPanel.tsx +386 -170
  6. package/src/panel/ai/AssistantChatPanel.tsx +895 -0
  7. package/src/panel/ai/AssistantMarkdown.tsx +256 -0
  8. package/src/panel/ai/applyAssistantAction.ts +652 -0
  9. package/src/panel/ai/revealConfigField.ts +137 -0
  10. package/src/panel/components/ConfigHintIcon.tsx +6 -2
  11. package/src/panel/components/ElementsLayer.tsx +37 -18
  12. package/src/panel/components/MaterialSidebar.tsx +157 -109
  13. package/src/panel/components/MoveableLayer.tsx +7 -6
  14. package/src/panel/components/PanelConfigSidebar.tsx +434 -389
  15. package/src/panel/components/ViewElementScopePanel.tsx +9 -5
  16. package/src/panel/components/WorkspaceConfigSidebar.tsx +5 -2
  17. package/src/panel/components/WorkspaceProjectNav.tsx +25 -14
  18. package/src/panel/components/WorkspaceStageSplit.tsx +3 -1
  19. package/src/panel/components/scope-config/ScopeTemplatePreviewHost.tsx +11 -7
  20. package/src/panel/components/scope-config/ScopeTemplateUsageHint.tsx +6 -18
  21. package/src/panel/components/scope-config/ScopeTemplateWarningsPanel.tsx +5 -2
  22. package/src/panel/components/table/ConditionEditor.tsx +205 -0
  23. package/src/panel/components/table/JsonCodeEditor.tsx +115 -0
  24. package/src/panel/components/table/PanelConfigTableSection.tsx +2192 -0
  25. package/src/panel/components/table/TableNodeContent.tsx +544 -0
  26. package/src/panel/constants/messages.ts +76 -34
  27. package/src/panel/hooks/usePanelElements.ts +64 -52
  28. package/src/panel/hooks/useWorkspaceProjects.ts +11 -8
  29. package/src/panel/types.ts +4 -0
  30. package/src/panel/utils/panelElementDefaults.ts +69 -39
  31. package/src/panel/utils/scope-field-labels.ts +51 -38
  32. package/src/panel/utils/scope-template-preview.ts +10 -6
  33. package/src/panel/utils/scope-template-spread.ts +44 -21
  34. package/src/panel/utils/scope-template-warnings.ts +28 -16
  35. package/src/panel/utils/scope-template.ts +82 -2
  36. package/src/tailwind.css +17 -9
package/dist/styles.css CHANGED
@@ -584,6 +584,10 @@ video {
584
584
  pointer-events: none;
585
585
  }
586
586
 
587
+ .pointer-events-auto {
588
+ pointer-events: auto;
589
+ }
590
+
587
591
  .collapse {
588
592
  visibility: collapse;
589
593
  }
@@ -616,6 +620,11 @@ video {
616
620
  inset: 0.5rem;
617
621
  }
618
622
 
623
+ .inset-x-0 {
624
+ left: 0px;
625
+ right: 0px;
626
+ }
627
+
619
628
  .bottom-0 {
620
629
  bottom: 0px;
621
630
  }
@@ -735,6 +744,10 @@ video {
735
744
  margin-bottom: 0.25rem;
736
745
  }
737
746
 
747
+ .mb-1\.5 {
748
+ margin-bottom: 0.375rem;
749
+ }
750
+
738
751
  .mb-2 {
739
752
  margin-bottom: 0.5rem;
740
753
  }
@@ -759,14 +772,33 @@ video {
759
772
  margin-top: 0px;
760
773
  }
761
774
 
775
+ .mt-0\.5 {
776
+ margin-top: 0.125rem;
777
+ }
778
+
762
779
  .mt-1 {
763
780
  margin-top: 0.25rem;
764
781
  }
765
782
 
783
+ .mt-1\.5 {
784
+ margin-top: 0.375rem;
785
+ }
786
+
766
787
  .mt-2 {
767
788
  margin-top: 0.5rem;
768
789
  }
769
790
 
791
+ .mt-4 {
792
+ margin-top: 1rem;
793
+ }
794
+
795
+ .line-clamp-1 {
796
+ overflow: hidden;
797
+ display: -webkit-box;
798
+ -webkit-box-orient: vertical;
799
+ -webkit-line-clamp: 1;
800
+ }
801
+
770
802
  .line-clamp-3 {
771
803
  overflow: hidden;
772
804
  display: -webkit-box;
@@ -778,6 +810,14 @@ video {
778
810
  display: block;
779
811
  }
780
812
 
813
+ .inline-block {
814
+ display: inline-block;
815
+ }
816
+
817
+ .\!flex {
818
+ display: flex !important;
819
+ }
820
+
781
821
  .flex {
782
822
  display: flex;
783
823
  }
@@ -786,6 +826,14 @@ video {
786
826
  display: inline-flex;
787
827
  }
788
828
 
829
+ .\!table {
830
+ display: table !important;
831
+ }
832
+
833
+ .table {
834
+ display: table;
835
+ }
836
+
789
837
  .\!grid {
790
838
  display: grid !important;
791
839
  }
@@ -806,10 +854,22 @@ video {
806
854
  height: 0px;
807
855
  }
808
856
 
857
+ .h-0\.5 {
858
+ height: 0.125rem;
859
+ }
860
+
809
861
  .h-1\.5 {
810
862
  height: 0.375rem;
811
863
  }
812
864
 
865
+ .h-10 {
866
+ height: 2.5rem;
867
+ }
868
+
869
+ .h-12 {
870
+ height: 3rem;
871
+ }
872
+
813
873
  .h-16 {
814
874
  height: 4rem;
815
875
  }
@@ -866,10 +926,22 @@ video {
866
926
  height: 2rem;
867
927
  }
868
928
 
929
+ .h-9 {
930
+ height: 2.25rem;
931
+ }
932
+
869
933
  .h-\[180px\] {
870
934
  height: 180px;
871
935
  }
872
936
 
937
+ .h-\[min\(72vh\2c 580px\)\] {
938
+ height: min(72vh, 580px);
939
+ }
940
+
941
+ .h-\[min\(78vh\2c 560px\)\] {
942
+ height: min(78vh, 560px);
943
+ }
944
+
873
945
  .h-\[var\(--rv-ruler-size\)\] {
874
946
  height: var(--rv-ruler-size);
875
947
  }
@@ -894,6 +966,10 @@ video {
894
966
  max-height: 13rem;
895
967
  }
896
968
 
969
+ .max-h-\[160px\] {
970
+ max-height: 160px;
971
+ }
972
+
897
973
  .max-h-\[200px\] {
898
974
  max-height: 200px;
899
975
  }
@@ -902,6 +978,14 @@ video {
902
978
  max-height: 78vh;
903
979
  }
904
980
 
981
+ .max-h-\[min\(78vh\2c 560px\)\] {
982
+ max-height: min(78vh, 560px);
983
+ }
984
+
985
+ .max-h-full {
986
+ max-height: 100%;
987
+ }
988
+
905
989
  .min-h-0 {
906
990
  min-height: 0px;
907
991
  }
@@ -914,6 +998,18 @@ video {
914
998
  min-height: 120px;
915
999
  }
916
1000
 
1001
+ .min-h-\[140px\] {
1002
+ min-height: 140px;
1003
+ }
1004
+
1005
+ .min-h-\[68px\] {
1006
+ min-height: 68px;
1007
+ }
1008
+
1009
+ .min-h-full {
1010
+ min-height: 100%;
1011
+ }
1012
+
917
1013
  .w-0 {
918
1014
  width: 0px;
919
1015
  }
@@ -930,6 +1026,10 @@ video {
930
1026
  width: 91.666667%;
931
1027
  }
932
1028
 
1029
+ .w-12 {
1030
+ width: 3rem;
1031
+ }
1032
+
933
1033
  .w-14 {
934
1034
  width: 3.5rem;
935
1035
  }
@@ -986,6 +1086,10 @@ video {
986
1086
  width: 66.666667%;
987
1087
  }
988
1088
 
1089
+ .w-9 {
1090
+ width: 2.25rem;
1091
+ }
1092
+
989
1093
  .w-\[220px\] {
990
1094
  width: 220px;
991
1095
  }
@@ -994,6 +1098,18 @@ video {
994
1098
  width: 280px;
995
1099
  }
996
1100
 
1101
+ .w-\[96px\] {
1102
+ width: 96px;
1103
+ }
1104
+
1105
+ .w-\[min\(92vw\2c 720px\)\] {
1106
+ width: min(92vw, 720px);
1107
+ }
1108
+
1109
+ .w-\[min\(94vw\2c 680px\)\] {
1110
+ width: min(94vw, 680px);
1111
+ }
1112
+
997
1113
  .w-\[var\(--rv-ruler-size\)\] {
998
1114
  width: var(--rv-ruler-size);
999
1115
  }
@@ -1038,10 +1154,42 @@ video {
1038
1154
  max-width: 420px;
1039
1155
  }
1040
1156
 
1157
+ .max-w-\[520px\] {
1158
+ max-width: 520px;
1159
+ }
1160
+
1161
+ .max-w-\[680px\] {
1162
+ max-width: 680px;
1163
+ }
1164
+
1165
+ .max-w-\[720px\] {
1166
+ max-width: 720px;
1167
+ }
1168
+
1169
+ .max-w-\[85\%\] {
1170
+ max-width: 85%;
1171
+ }
1172
+
1173
+ .max-w-\[90\%\] {
1174
+ max-width: 90%;
1175
+ }
1176
+
1177
+ .max-w-lg {
1178
+ max-width: 32rem;
1179
+ }
1180
+
1181
+ .max-w-xs {
1182
+ max-width: 20rem;
1183
+ }
1184
+
1041
1185
  .flex-1 {
1042
1186
  flex: 1 1 0%;
1043
1187
  }
1044
1188
 
1189
+ .flex-none {
1190
+ flex: none;
1191
+ }
1192
+
1045
1193
  .shrink-0 {
1046
1194
  flex-shrink: 0;
1047
1195
  }
@@ -1108,10 +1256,22 @@ video {
1108
1256
  user-select: none;
1109
1257
  }
1110
1258
 
1259
+ .resize-none {
1260
+ resize: none;
1261
+ }
1262
+
1111
1263
  .resize {
1112
1264
  resize: both;
1113
1265
  }
1114
1266
 
1267
+ .list-decimal {
1268
+ list-style-type: decimal;
1269
+ }
1270
+
1271
+ .list-disc {
1272
+ list-style-type: disc;
1273
+ }
1274
+
1115
1275
  .grid-cols-1 {
1116
1276
  grid-template-columns: repeat(1, minmax(0, 1fr));
1117
1277
  }
@@ -1132,6 +1292,10 @@ video {
1132
1292
  grid-template-columns: 110px 1fr;
1133
1293
  }
1134
1294
 
1295
+ .grid-cols-\[1fr_1fr_auto\] {
1296
+ grid-template-columns: 1fr 1fr auto;
1297
+ }
1298
+
1135
1299
  .grid-rows-2 {
1136
1300
  grid-template-rows: repeat(2, minmax(0, 1fr));
1137
1301
  }
@@ -1140,6 +1304,10 @@ video {
1140
1304
  flex-direction: row;
1141
1305
  }
1142
1306
 
1307
+ .\!flex-col {
1308
+ flex-direction: column !important;
1309
+ }
1310
+
1143
1311
  .flex-col {
1144
1312
  flex-direction: column;
1145
1313
  }
@@ -1180,6 +1348,10 @@ video {
1180
1348
  justify-content: space-between;
1181
1349
  }
1182
1350
 
1351
+ .gap-0 {
1352
+ gap: 0px;
1353
+ }
1354
+
1183
1355
  .gap-0\.5 {
1184
1356
  gap: 0.125rem;
1185
1357
  }
@@ -1200,6 +1372,19 @@ video {
1200
1372
  gap: 0.75rem;
1201
1373
  }
1202
1374
 
1375
+ .gap-5 {
1376
+ gap: 1.25rem;
1377
+ }
1378
+
1379
+ .gap-x-4 {
1380
+ -moz-column-gap: 1rem;
1381
+ column-gap: 1rem;
1382
+ }
1383
+
1384
+ .gap-y-2 {
1385
+ row-gap: 0.5rem;
1386
+ }
1387
+
1203
1388
  .space-y-0 > :not([hidden]) ~ :not([hidden]) {
1204
1389
  --tw-space-y-reverse: 0;
1205
1390
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -1248,6 +1433,10 @@ video {
1248
1433
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
1249
1434
  }
1250
1435
 
1436
+ .self-start {
1437
+ align-self: flex-start;
1438
+ }
1439
+
1251
1440
  .overflow-auto {
1252
1441
  overflow: auto;
1253
1442
  }
@@ -1264,6 +1453,14 @@ video {
1264
1453
  overflow-x: auto;
1265
1454
  }
1266
1455
 
1456
+ .overflow-y-auto {
1457
+ overflow-y: auto;
1458
+ }
1459
+
1460
+ .overflow-x-hidden {
1461
+ overflow-x: hidden;
1462
+ }
1463
+
1267
1464
  .truncate {
1268
1465
  overflow: hidden;
1269
1466
  text-overflow: ellipsis;
@@ -1290,6 +1487,10 @@ video {
1290
1487
  border-radius: 0.25rem;
1291
1488
  }
1292
1489
 
1490
+ .rounded-2xl {
1491
+ border-radius: 1rem;
1492
+ }
1493
+
1293
1494
  .rounded-full {
1294
1495
  border-radius: 9999px;
1295
1496
  }
@@ -1334,6 +1535,10 @@ video {
1334
1535
  border-left-width: 1px;
1335
1536
  }
1336
1537
 
1538
+ .border-l-2 {
1539
+ border-left-width: 2px;
1540
+ }
1541
+
1337
1542
  .border-l-\[11px\] {
1338
1543
  border-left-width: 11px;
1339
1544
  }
@@ -1354,6 +1559,10 @@ video {
1354
1559
  border-style: dashed;
1355
1560
  }
1356
1561
 
1562
+ .border-amber-300\/70 {
1563
+ border-color: rgb(252 211 77 / 0.7);
1564
+ }
1565
+
1357
1566
  .border-amber-500\/30 {
1358
1567
  border-color: rgb(245 158 11 / 0.3);
1359
1568
  }
@@ -1390,6 +1599,10 @@ video {
1390
1599
  border-color: hsl(var(--border) / 0.8);
1391
1600
  }
1392
1601
 
1602
+ .border-destructive\/20 {
1603
+ border-color: hsl(var(--destructive) / 0.2);
1604
+ }
1605
+
1393
1606
  .border-destructive\/40 {
1394
1607
  border-color: hsl(var(--destructive) / 0.4);
1395
1608
  }
@@ -1410,6 +1623,10 @@ video {
1410
1623
  border-color: hsl(var(--foreground) / 0.8);
1411
1624
  }
1412
1625
 
1626
+ .border-primary\/25 {
1627
+ border-color: hsl(var(--primary) / 0.25);
1628
+ }
1629
+
1413
1630
  .border-primary\/40 {
1414
1631
  border-color: hsl(var(--primary) / 0.4);
1415
1632
  }
@@ -1434,6 +1651,10 @@ video {
1434
1651
  border-color: rgb(14 165 233 / 0.4);
1435
1652
  }
1436
1653
 
1654
+ .border-slate-700\/60 {
1655
+ border-color: rgb(51 65 85 / 0.6);
1656
+ }
1657
+
1437
1658
  .border-violet-500\/50 {
1438
1659
  border-color: rgb(139 92 246 / 0.5);
1439
1660
  }
@@ -1447,6 +1668,10 @@ video {
1447
1668
  border-color: rgb(124 58 237 / var(--tw-border-opacity, 1));
1448
1669
  }
1449
1670
 
1671
+ .border-white\/5 {
1672
+ border-color: rgb(255 255 255 / 0.05);
1673
+ }
1674
+
1450
1675
  .border-b-transparent {
1451
1676
  border-bottom-color: transparent;
1452
1677
  }
@@ -1459,6 +1684,11 @@ video {
1459
1684
  border-top-color: transparent;
1460
1685
  }
1461
1686
 
1687
+ .bg-\[\#0c1220\] {
1688
+ --tw-bg-opacity: 1;
1689
+ background-color: rgb(12 18 32 / var(--tw-bg-opacity, 1));
1690
+ }
1691
+
1462
1692
  .bg-accent {
1463
1693
  background-color: hsl(var(--accent));
1464
1694
  }
@@ -1467,6 +1697,21 @@ video {
1467
1697
  background-color: hsl(var(--accent) / 0.6);
1468
1698
  }
1469
1699
 
1700
+ .bg-amber-400 {
1701
+ --tw-bg-opacity: 1;
1702
+ background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
1703
+ }
1704
+
1705
+ .bg-amber-50 {
1706
+ --tw-bg-opacity: 1;
1707
+ background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
1708
+ }
1709
+
1710
+ .bg-amber-500 {
1711
+ --tw-bg-opacity: 1;
1712
+ background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
1713
+ }
1714
+
1470
1715
  .bg-amber-500\/10 {
1471
1716
  background-color: rgb(245 158 11 / 0.1);
1472
1717
  }
@@ -1531,6 +1776,11 @@ video {
1531
1776
  background-color: hsl(var(--destructive) / 0.15);
1532
1777
  }
1533
1778
 
1779
+ .bg-emerald-500 {
1780
+ --tw-bg-opacity: 1;
1781
+ background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
1782
+ }
1783
+
1534
1784
  .bg-emerald-500\/10 {
1535
1785
  background-color: rgb(16 185 129 / 0.1);
1536
1786
  }
@@ -1539,6 +1789,10 @@ video {
1539
1789
  background-color: hsl(var(--muted));
1540
1790
  }
1541
1791
 
1792
+ .bg-muted-foreground\/40 {
1793
+ background-color: hsl(var(--muted-foreground) / 0.4);
1794
+ }
1795
+
1542
1796
  .bg-muted-foreground\/45 {
1543
1797
  background-color: hsl(var(--muted-foreground) / 0.45);
1544
1798
  }
@@ -1563,6 +1817,10 @@ video {
1563
1817
  background-color: hsl(var(--muted) / 0.4);
1564
1818
  }
1565
1819
 
1820
+ .bg-muted\/60 {
1821
+ background-color: hsl(var(--muted) / 0.6);
1822
+ }
1823
+
1566
1824
  .bg-muted\/\[0\.14\] {
1567
1825
  background-color: hsl(var(--muted) / 0.14);
1568
1826
  }
@@ -1595,6 +1853,10 @@ video {
1595
1853
  background-color: hsl(var(--primary) / 0.35);
1596
1854
  }
1597
1855
 
1856
+ .bg-primary\/5 {
1857
+ background-color: hsl(var(--primary) / 0.05);
1858
+ }
1859
+
1598
1860
  .bg-primary\/50 {
1599
1861
  background-color: hsl(var(--primary) / 0.5);
1600
1862
  }
@@ -1788,6 +2050,11 @@ video {
1788
2050
  padding: 1rem;
1789
2051
  }
1790
2052
 
2053
+ .px-0 {
2054
+ padding-left: 0px;
2055
+ padding-right: 0px;
2056
+ }
2057
+
1791
2058
  .px-1 {
1792
2059
  padding-left: 0.25rem;
1793
2060
  padding-right: 0.25rem;
@@ -1813,6 +2080,16 @@ video {
1813
2080
  padding-right: 0.75rem;
1814
2081
  }
1815
2082
 
2083
+ .px-3\.5 {
2084
+ padding-left: 0.875rem;
2085
+ padding-right: 0.875rem;
2086
+ }
2087
+
2088
+ .px-4 {
2089
+ padding-left: 1rem;
2090
+ padding-right: 1rem;
2091
+ }
2092
+
1816
2093
  .px-6 {
1817
2094
  padding-left: 1.5rem;
1818
2095
  padding-right: 1.5rem;
@@ -1863,6 +2140,11 @@ video {
1863
2140
  padding-bottom: 1.25rem;
1864
2141
  }
1865
2142
 
2143
+ .py-6 {
2144
+ padding-top: 1.5rem;
2145
+ padding-bottom: 1.5rem;
2146
+ }
2147
+
1866
2148
  .py-7 {
1867
2149
  padding-top: 1.75rem;
1868
2150
  padding-bottom: 1.75rem;
@@ -1872,30 +2154,58 @@ video {
1872
2154
  padding-bottom: 0.375rem;
1873
2155
  }
1874
2156
 
2157
+ .pb-12 {
2158
+ padding-bottom: 3rem;
2159
+ }
2160
+
1875
2161
  .pb-2 {
1876
2162
  padding-bottom: 0.5rem;
1877
2163
  }
1878
2164
 
2165
+ .pb-2\.5 {
2166
+ padding-bottom: 0.625rem;
2167
+ }
2168
+
1879
2169
  .pb-3 {
1880
2170
  padding-bottom: 0.75rem;
1881
2171
  }
1882
2172
 
2173
+ .pl-1 {
2174
+ padding-left: 0.25rem;
2175
+ }
2176
+
1883
2177
  .pl-2 {
1884
2178
  padding-left: 0.5rem;
1885
2179
  }
1886
2180
 
2181
+ .pl-2\.5 {
2182
+ padding-left: 0.625rem;
2183
+ }
2184
+
1887
2185
  .pl-3 {
1888
2186
  padding-left: 0.75rem;
1889
2187
  }
1890
2188
 
2189
+ .pl-5 {
2190
+ padding-left: 1.25rem;
2191
+ }
2192
+
1891
2193
  .pr-1 {
1892
2194
  padding-right: 0.25rem;
1893
2195
  }
1894
2196
 
2197
+ .pr-12 {
2198
+ padding-right: 3rem;
2199
+ }
2200
+
1895
2201
  .pt-0 {
1896
2202
  padding-top: 0px;
1897
2203
  }
1898
2204
 
2205
+ .pt-1 {
2206
+ padding-top: 0.25rem;
2207
+ }
2208
+
1899
2209
  .pt-1\.5 {
1900
2210
  padding-top: 0.375rem;
1901
2211
  }
@@ -1908,6 +2218,10 @@ video {
1908
2218
  padding-top: 0.625rem;
1909
2219
  }
1910
2220
 
2221
+ .pt-3 {
2222
+ padding-top: 0.75rem;
2223
+ }
2224
+
1911
2225
  .text-left {
1912
2226
  text-align: left;
1913
2227
  }
@@ -1928,6 +2242,30 @@ video {
1928
2242
  font-size: 11px;
1929
2243
  }
1930
2244
 
2245
+ .text-\[12px\] {
2246
+ font-size: 12px;
2247
+ }
2248
+
2249
+ .text-\[13px\] {
2250
+ font-size: 13px;
2251
+ }
2252
+
2253
+ .text-\[14px\] {
2254
+ font-size: 14px;
2255
+ }
2256
+
2257
+ .text-\[15px\] {
2258
+ font-size: 15px;
2259
+ }
2260
+
2261
+ .text-\[16px\] {
2262
+ font-size: 16px;
2263
+ }
2264
+
2265
+ .text-\[20px\] {
2266
+ font-size: 20px;
2267
+ }
2268
+
1931
2269
  .text-sm {
1932
2270
  font-size: 0.875rem;
1933
2271
  line-height: 1.25rem;
@@ -1954,6 +2292,10 @@ video {
1954
2292
  font-style: italic;
1955
2293
  }
1956
2294
 
2295
+ .leading-4 {
2296
+ line-height: 1rem;
2297
+ }
2298
+
1957
2299
  .leading-5 {
1958
2300
  line-height: 1.25rem;
1959
2301
  }
@@ -1970,6 +2312,10 @@ video {
1970
2312
  line-height: 1.625;
1971
2313
  }
1972
2314
 
2315
+ .tracking-tight {
2316
+ letter-spacing: -0.025em;
2317
+ }
2318
+
1973
2319
  .tracking-wide {
1974
2320
  letter-spacing: 0.025em;
1975
2321
  }
@@ -2079,6 +2425,16 @@ video {
2079
2425
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
2080
2426
  }
2081
2427
 
2428
+ .text-slate-300 {
2429
+ --tw-text-opacity: 1;
2430
+ color: rgb(203 213 225 / var(--tw-text-opacity, 1));
2431
+ }
2432
+
2433
+ .text-slate-400 {
2434
+ --tw-text-opacity: 1;
2435
+ color: rgb(148 163 184 / var(--tw-text-opacity, 1));
2436
+ }
2437
+
2082
2438
  .text-violet-300 {
2083
2439
  --tw-text-opacity: 1;
2084
2440
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
@@ -2098,14 +2454,30 @@ video {
2098
2454
  text-decoration-line: underline;
2099
2455
  }
2100
2456
 
2457
+ .line-through {
2458
+ text-decoration-line: line-through;
2459
+ }
2460
+
2461
+ .underline-offset-2 {
2462
+ text-underline-offset: 2px;
2463
+ }
2464
+
2101
2465
  .opacity-0 {
2102
2466
  opacity: 0;
2103
2467
  }
2104
2468
 
2469
+ .opacity-100 {
2470
+ opacity: 1;
2471
+ }
2472
+
2105
2473
  .opacity-40 {
2106
2474
  opacity: 0.4;
2107
2475
  }
2108
2476
 
2477
+ .opacity-45 {
2478
+ opacity: 0.45;
2479
+ }
2480
+
2109
2481
  .opacity-60 {
2110
2482
  opacity: 0.6;
2111
2483
  }
@@ -2116,12 +2488,24 @@ video {
2116
2488
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2117
2489
  }
2118
2490
 
2491
+ .shadow-2xl {
2492
+ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
2493
+ --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
2494
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2495
+ }
2496
+
2119
2497
  .shadow-\[inset_0_1px_0_0_rgba\(139\2c 92\2c 246\2c 0\.22\)\] {
2120
2498
  --tw-shadow: inset 0 1px 0 0 rgba(139,92,246,0.22);
2121
2499
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
2122
2500
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2123
2501
  }
2124
2502
 
2503
+ .shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.04\)\] {
2504
+ --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
2505
+ --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
2506
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2507
+ }
2508
+
2125
2509
  .shadow-lg {
2126
2510
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2127
2511
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2191,6 +2575,10 @@ video {
2191
2575
  --tw-ring-color: hsl(var(--foreground) / 0.4);
2192
2576
  }
2193
2577
 
2578
+ .ring-primary\/20 {
2579
+ --tw-ring-color: hsl(var(--primary) / 0.2);
2580
+ }
2581
+
2194
2582
  .ring-primary\/45 {
2195
2583
  --tw-ring-color: hsl(var(--primary) / 0.45);
2196
2584
  }
@@ -2234,6 +2622,18 @@ video {
2234
2622
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
2235
2623
  }
2236
2624
 
2625
+ .transition {
2626
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2627
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2628
+ transition-duration: 150ms;
2629
+ }
2630
+
2631
+ .transition-all {
2632
+ transition-property: all;
2633
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2634
+ transition-duration: 150ms;
2635
+ }
2636
+
2237
2637
  .transition-colors {
2238
2638
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2239
2639
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2315,7 +2715,11 @@ video {
2315
2715
  background: hsl(var(--foreground) / 0.45);
2316
2716
  }
2317
2717
 
2318
- /* Moveable:仅角点控制柄固定屏幕像素;勿作用于 moveable-direction 边线 */
2718
+ /*
2719
+ * Moveable 控制框:
2720
+ * - 根节点必须高于画布元素 zIndex(节点默认 ≥1),否则多选组框线会被节点盖住,只剩锚点可见
2721
+ * - 勿把 .moveable-group 压到 z-index:1(会覆盖根节点的 9999)
2722
+ */
2319
2723
 
2320
2724
  .rv-moveable-layer {
2321
2725
  --moveable-color: #1990ff;
@@ -2323,10 +2727,14 @@ video {
2323
2727
  }
2324
2728
 
2325
2729
  .rv-moveable-layer.moveable-group,
2326
- .rv-moveable-layer .moveable-group,
2327
- .rv-moveable-layer.moveable-control-box,
2328
- .rv-moveable-layer .moveable-control-box {
2329
- z-index: 1 !important;
2730
+ .rv-moveable-layer.moveable-control-box {
2731
+ z-index: 9999 !important;
2732
+ }
2733
+
2734
+ /* Moveable 默认 .group { z-index: -1 },必须覆盖,避免整组掉到节点下方 */
2735
+
2736
+ .rv-moveable-layer.moveable-group {
2737
+ z-index: 9999 !important;
2330
2738
  }
2331
2739
 
2332
2740
  .rv-moveable-layer .moveable-line {
@@ -2334,14 +2742,15 @@ video {
2334
2742
  background: var(--moveable-color) !important;
2335
2743
  }
2336
2744
 
2337
- /* 组选/单边控制线:厚度由 moveable zoom 补偿,保持屏幕 1px */
2745
+ /* 组选/边线:保持颜色;厚度仍由 moveable zoom 的 scaleY 补偿 */
2338
2746
 
2339
- .rv-moveable-layer .moveable-line.moveable-direction {
2747
+ .rv-moveable-layer .moveable-line.moveable-direction:not(.moveable-edge) {
2340
2748
  background: var(--moveable-color) !important;
2341
2749
  }
2342
2750
 
2343
- .rv-moveable-layer .moveable-group .moveable-control-box,
2344
- .rv-moveable-layer.moveable-group .moveable-control-box {
2751
+ /* 子 control-box 相对组内层叠,勿压低根节点 */
2752
+
2753
+ .rv-moveable-layer.moveable-group > .moveable-control-box {
2345
2754
  z-index: 2 !important;
2346
2755
  }
2347
2756
 
@@ -2359,6 +2768,23 @@ video {
2359
2768
  border: 2px solid hsl(var(--background)) !important;
2360
2769
  background: #1990ff !important;
2361
2770
  background: var(--moveable-color) !important;
2771
+ z-index: 10 !important;
2772
+ }
2773
+
2774
+ .placeholder\:text-muted-foreground::-moz-placeholder {
2775
+ color: hsl(var(--muted-foreground));
2776
+ }
2777
+
2778
+ .placeholder\:text-muted-foreground::placeholder {
2779
+ color: hsl(var(--muted-foreground));
2780
+ }
2781
+
2782
+ .focus-within\:border-sky-500\/40:focus-within {
2783
+ border-color: rgb(14 165 233 / 0.4);
2784
+ }
2785
+
2786
+ .focus-within\:bg-background:focus-within {
2787
+ background-color: hsl(var(--background));
2362
2788
  }
2363
2789
 
2364
2790
  .hover\:border-border:hover {
@@ -2389,6 +2815,14 @@ video {
2389
2815
  background-color: hsl(var(--destructive) / 0.9);
2390
2816
  }
2391
2817
 
2818
+ .hover\:bg-muted:hover {
2819
+ background-color: hsl(var(--muted));
2820
+ }
2821
+
2822
+ .hover\:bg-muted\/30:hover {
2823
+ background-color: hsl(var(--muted) / 0.3);
2824
+ }
2825
+
2392
2826
  .hover\:bg-muted\/35:hover {
2393
2827
  background-color: hsl(var(--muted) / 0.35);
2394
2828
  }
@@ -2401,6 +2835,10 @@ video {
2401
2835
  background-color: hsl(var(--secondary) / 0.8);
2402
2836
  }
2403
2837
 
2838
+ .hover\:bg-white\/10:hover {
2839
+ background-color: rgb(255 255 255 / 0.1);
2840
+ }
2841
+
2404
2842
  .hover\:text-accent-foreground:hover {
2405
2843
  color: hsl(var(--accent-foreground));
2406
2844
  }
@@ -2413,6 +2851,15 @@ video {
2413
2851
  color: hsl(var(--foreground));
2414
2852
  }
2415
2853
 
2854
+ .hover\:text-white:hover {
2855
+ --tw-text-opacity: 1;
2856
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2857
+ }
2858
+
2859
+ .hover\:underline:hover {
2860
+ text-decoration-line: underline;
2861
+ }
2862
+
2416
2863
  .focus\:border-border\/60:focus {
2417
2864
  border-color: hsl(var(--border) / 0.6);
2418
2865
  }
@@ -2488,6 +2935,10 @@ video {
2488
2935
  }
2489
2936
  }
2490
2937
 
2938
+ .dark\:border-amber-500\/40:is(.dark *) {
2939
+ border-color: rgb(245 158 11 / 0.4);
2940
+ }
2941
+
2491
2942
  .dark\:border-violet-400:is(.dark *) {
2492
2943
  --tw-border-opacity: 1;
2493
2944
  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
@@ -2497,6 +2948,10 @@ video {
2497
2948
  border-color: rgb(167 139 250 / 0.65);
2498
2949
  }
2499
2950
 
2951
+ .dark\:bg-amber-950\/40:is(.dark *) {
2952
+ background-color: rgb(69 26 3 / 0.4);
2953
+ }
2954
+
2500
2955
  .dark\:bg-violet-500\/35:is(.dark *) {
2501
2956
  background-color: rgb(139 92 246 / 0.35);
2502
2957
  }
@@ -2560,6 +3015,10 @@ video {
2560
3015
  }
2561
3016
 
2562
3017
  @media (min-width: 640px) {
3018
+ .sm\:flex {
3019
+ display: flex;
3020
+ }
3021
+
2563
3022
  .sm\:max-w-\[520px\] {
2564
3023
  max-width: 520px;
2565
3024
  }
@@ -2567,6 +3026,30 @@ video {
2567
3026
  .sm\:max-w-\[860px\] {
2568
3027
  max-width: 860px;
2569
3028
  }
3029
+
3030
+ .sm\:grid-cols-2 {
3031
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3032
+ }
3033
+
3034
+ .sm\:grid-cols-3 {
3035
+ grid-template-columns: repeat(3, minmax(0, 1fr));
3036
+ }
3037
+
3038
+ .sm\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
3039
+ --tw-space-x-reverse: 0;
3040
+ margin-right: calc(0px * var(--tw-space-x-reverse));
3041
+ margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
3042
+ }
3043
+
3044
+ .sm\:rounded-xl {
3045
+ border-radius: 0.75rem;
3046
+ }
3047
+ }
3048
+
3049
+ @media (min-width: 768px) {
3050
+ .md\:text-\[14px\] {
3051
+ font-size: 14px;
3052
+ }
2570
3053
  }
2571
3054
 
2572
3055
  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
@@ -2597,6 +3080,33 @@ video {
2597
3080
  width: 0.5rem;
2598
3081
  }
2599
3082
 
3083
+ .\[\&_\.cm-editor\]\:h-full .cm-editor {
3084
+ height: 100%;
3085
+ }
3086
+
3087
+ .\[\&_\.cm-editor\]\:max-h-full .cm-editor {
3088
+ max-height: 100%;
3089
+ }
3090
+
3091
+ .\[\&_\.cm-editor\]\:outline-none .cm-editor {
3092
+ outline: 2px solid transparent;
3093
+ outline-offset: 2px;
3094
+ }
3095
+
3096
+ .\[\&_\.config-field--highlight\]\:rounded-md .config-field--highlight {
3097
+ border-radius: calc(var(--radius) - 2px);
3098
+ }
3099
+
3100
+ .\[\&_\.config-field--highlight\]\:ring-2 .config-field--highlight {
3101
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3102
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3103
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3104
+ }
3105
+
3106
+ .\[\&_\.config-field--highlight\]\:ring-sky-400\/80 .config-field--highlight {
3107
+ --tw-ring-color: rgb(56 189 248 / 0.8);
3108
+ }
3109
+
2600
3110
  .\[\&_\.moveable-area\]\:pointer-events-auto .moveable-area {
2601
3111
  pointer-events: auto;
2602
3112
  }