@goplasmatic/dataflow-ui 2.0.14 → 2.0.16
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.
- package/dist/dataflow-ui.css +830 -2394
- package/dist/datalogic_wasm-RwP1VzMM-CRoSygcJ.cjs +375 -0
- package/dist/datalogic_wasm-RwP1VzMM-Tde_T26r.js +374 -0
- package/dist/index.cjs +5375 -721
- package/dist/index.d.ts +9 -0
- package/dist/index.js +5376 -722
- package/package.json +3 -3
- package/dist/datalogic_wasm-CrfXtaOs-Bn3jizlo.cjs +0 -375
- package/dist/datalogic_wasm-CrfXtaOs-CXAvQXKl.js +0 -374
package/dist/dataflow-ui.css
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
/*
|
|
2
|
+
* DataLogic UI - Scoped Theme Variables
|
|
3
|
+
*
|
|
4
|
+
* All variables are scoped to .logic-editor to avoid leaking into consumer apps.
|
|
5
|
+
* The library component applies this class to its root element.
|
|
6
|
+
*/
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
.logic-editor {
|
|
6
9
|
/* Light theme (default) */
|
|
7
10
|
--bg-primary: #f5f5f5;
|
|
8
11
|
--bg-secondary: #ffffff;
|
|
@@ -79,16 +82,24 @@
|
|
|
79
82
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
80
83
|
line-height: 1.5;
|
|
81
84
|
font-weight: 400;
|
|
82
|
-
color-scheme: light dark;
|
|
83
85
|
color: var(--text-primary);
|
|
84
|
-
background-color: var(--bg-primary);
|
|
85
86
|
font-synthesis: none;
|
|
86
87
|
text-rendering: optimizeLegibility;
|
|
87
88
|
-webkit-font-smoothing: antialiased;
|
|
88
89
|
-moz-osx-font-smoothing: grayscale;
|
|
89
90
|
}
|
|
90
91
|
|
|
91
|
-
|
|
92
|
+
.logic-editor *,
|
|
93
|
+
.logic-editor *::before,
|
|
94
|
+
.logic-editor *::after {
|
|
95
|
+
box-sizing: border-box;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.logic-editor button {
|
|
99
|
+
font-family: inherit;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.logic-editor[data-theme="dark"] {
|
|
92
103
|
--bg-primary: #1a1a1a;
|
|
93
104
|
--bg-secondary: #242424;
|
|
94
105
|
--bg-tertiary: #2a2a2a;
|
|
@@ -161,22 +172,12 @@
|
|
|
161
172
|
--debug-value-array: #d8b4fe;
|
|
162
173
|
--debug-value-null: #9ca3af;
|
|
163
174
|
}
|
|
175
|
+
/*
|
|
176
|
+
* ReactFlow base styles - bundled locally so they're included in the library's styles.css
|
|
177
|
+
* Source: @xyflow/react/dist/style.css
|
|
178
|
+
* This avoids requiring consumers to separately import ReactFlow CSS.
|
|
179
|
+
*/
|
|
164
180
|
|
|
165
|
-
body {
|
|
166
|
-
margin: 0;
|
|
167
|
-
min-width: 320px;
|
|
168
|
-
min-height: 100vh;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
#root {
|
|
172
|
-
width: 100%;
|
|
173
|
-
height: 100vh;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
button {
|
|
177
|
-
font-family: inherit;
|
|
178
|
-
}
|
|
179
|
-
/* this gets exported as style.css and can be used for the default theming */
|
|
180
181
|
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
|
|
181
182
|
.react-flow {
|
|
182
183
|
direction: ltr;
|
|
@@ -810,7 +811,7 @@ svg.react-flow__connectionline {
|
|
|
810
811
|
Operator Picker Popup (may be used by other components)
|
|
811
812
|
============================================================================ */
|
|
812
813
|
|
|
813
|
-
.edge-operator-picker {
|
|
814
|
+
.dl-edge-operator-picker {
|
|
814
815
|
position: absolute;
|
|
815
816
|
top: 100%;
|
|
816
817
|
left: 50%;
|
|
@@ -826,14 +827,14 @@ svg.react-flow__connectionline {
|
|
|
826
827
|
z-index: 1000;
|
|
827
828
|
}
|
|
828
829
|
|
|
829
|
-
[data-theme="dark"] .edge-operator-picker {
|
|
830
|
+
.logic-editor[data-theme="dark"] .dl-edge-operator-picker {
|
|
830
831
|
background: var(--bg-secondary, #1e1e1e);
|
|
831
832
|
border-color: var(--border-color, #3e3e3e);
|
|
832
833
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
833
834
|
}
|
|
834
835
|
|
|
835
836
|
/* Header */
|
|
836
|
-
.edge-picker-header {
|
|
837
|
+
.dl-edge-picker-header {
|
|
837
838
|
display: flex;
|
|
838
839
|
align-items: center;
|
|
839
840
|
justify-content: space-between;
|
|
@@ -841,21 +842,21 @@ svg.react-flow__connectionline {
|
|
|
841
842
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
|
842
843
|
}
|
|
843
844
|
|
|
844
|
-
[data-theme="dark"] .edge-picker-header {
|
|
845
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-header {
|
|
845
846
|
border-color: var(--border-color, #3e3e3e);
|
|
846
847
|
}
|
|
847
848
|
|
|
848
|
-
.edge-picker-title {
|
|
849
|
+
.dl-edge-picker-title {
|
|
849
850
|
font-size: 13px;
|
|
850
851
|
font-weight: 600;
|
|
851
852
|
color: var(--text-primary, #1a1a1a);
|
|
852
853
|
}
|
|
853
854
|
|
|
854
|
-
[data-theme="dark"] .edge-picker-title {
|
|
855
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-title {
|
|
855
856
|
color: var(--text-primary, #e0e0e0);
|
|
856
857
|
}
|
|
857
858
|
|
|
858
|
-
.edge-picker-close {
|
|
859
|
+
.dl-edge-picker-close {
|
|
859
860
|
display: flex;
|
|
860
861
|
align-items: center;
|
|
861
862
|
justify-content: center;
|
|
@@ -870,18 +871,18 @@ svg.react-flow__connectionline {
|
|
|
870
871
|
transition: background 0.15s, color 0.15s;
|
|
871
872
|
}
|
|
872
873
|
|
|
873
|
-
.edge-picker-close:hover {
|
|
874
|
+
.dl-edge-picker-close:hover {
|
|
874
875
|
background: var(--bg-hover, #f0f0f0);
|
|
875
876
|
color: var(--text-primary, #1a1a1a);
|
|
876
877
|
}
|
|
877
878
|
|
|
878
|
-
[data-theme="dark"] .edge-picker-close:hover {
|
|
879
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-close:hover {
|
|
879
880
|
background: var(--bg-hover, #3e3e3e);
|
|
880
881
|
color: var(--text-primary, #e0e0e0);
|
|
881
882
|
}
|
|
882
883
|
|
|
883
884
|
/* Search */
|
|
884
|
-
.edge-picker-search {
|
|
885
|
+
.dl-edge-picker-search {
|
|
885
886
|
display: flex;
|
|
886
887
|
align-items: center;
|
|
887
888
|
gap: 8px;
|
|
@@ -889,16 +890,16 @@ svg.react-flow__connectionline {
|
|
|
889
890
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
|
890
891
|
}
|
|
891
892
|
|
|
892
|
-
[data-theme="dark"] .edge-picker-search {
|
|
893
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-search {
|
|
893
894
|
border-color: var(--border-color, #3e3e3e);
|
|
894
895
|
}
|
|
895
896
|
|
|
896
|
-
.edge-picker-search-icon {
|
|
897
|
+
.dl-edge-picker-search-icon {
|
|
897
898
|
color: var(--text-tertiary, #888);
|
|
898
899
|
flex-shrink: 0;
|
|
899
900
|
}
|
|
900
901
|
|
|
901
|
-
.edge-picker-search-input {
|
|
902
|
+
.dl-edge-picker-search-input {
|
|
902
903
|
flex: 1;
|
|
903
904
|
padding: 4px 0;
|
|
904
905
|
font-size: 13px;
|
|
@@ -908,27 +909,27 @@ svg.react-flow__connectionline {
|
|
|
908
909
|
outline: none;
|
|
909
910
|
}
|
|
910
911
|
|
|
911
|
-
.edge-picker-search-input::placeholder {
|
|
912
|
+
.dl-edge-picker-search-input::placeholder {
|
|
912
913
|
color: var(--text-tertiary, #888);
|
|
913
914
|
}
|
|
914
915
|
|
|
915
|
-
[data-theme="dark"] .edge-picker-search-input {
|
|
916
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-search-input {
|
|
916
917
|
color: var(--text-primary, #e0e0e0);
|
|
917
918
|
}
|
|
918
919
|
|
|
919
920
|
/* Quick Add */
|
|
920
|
-
.edge-picker-quick {
|
|
921
|
+
.dl-edge-picker-quick {
|
|
921
922
|
display: flex;
|
|
922
923
|
gap: 8px;
|
|
923
924
|
padding: 8px 12px;
|
|
924
925
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
|
925
926
|
}
|
|
926
927
|
|
|
927
|
-
[data-theme="dark"] .edge-picker-quick {
|
|
928
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-quick {
|
|
928
929
|
border-color: var(--border-color, #3e3e3e);
|
|
929
930
|
}
|
|
930
931
|
|
|
931
|
-
.edge-picker-quick-btn {
|
|
932
|
+
.dl-edge-picker-quick-btn {
|
|
932
933
|
display: flex;
|
|
933
934
|
align-items: center;
|
|
934
935
|
gap: 6px;
|
|
@@ -943,37 +944,37 @@ svg.react-flow__connectionline {
|
|
|
943
944
|
transition: background 0.15s, border-color 0.15s;
|
|
944
945
|
}
|
|
945
946
|
|
|
946
|
-
.edge-picker-quick-btn:hover {
|
|
947
|
+
.dl-edge-picker-quick-btn:hover {
|
|
947
948
|
background: var(--bg-hover, #f0f0f0);
|
|
948
949
|
border-color: var(--color-primary, #2563eb);
|
|
949
950
|
color: var(--color-primary, #2563eb);
|
|
950
951
|
}
|
|
951
952
|
|
|
952
|
-
[data-theme="dark"] .edge-picker-quick-btn {
|
|
953
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-quick-btn {
|
|
953
954
|
background: var(--bg-tertiary, #252525);
|
|
954
955
|
border-color: var(--border-color, #3e3e3e);
|
|
955
956
|
color: var(--text-secondary, #aaa);
|
|
956
957
|
}
|
|
957
958
|
|
|
958
|
-
[data-theme="dark"] .edge-picker-quick-btn:hover {
|
|
959
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-quick-btn:hover {
|
|
959
960
|
background: var(--bg-hover, #3e3e3e);
|
|
960
961
|
border-color: var(--color-primary, #60a5fa);
|
|
961
962
|
color: var(--color-primary, #60a5fa);
|
|
962
963
|
}
|
|
963
964
|
|
|
964
965
|
/* Content */
|
|
965
|
-
.edge-picker-content {
|
|
966
|
+
.dl-edge-picker-content {
|
|
966
967
|
max-height: 220px;
|
|
967
968
|
overflow-y: auto;
|
|
968
969
|
}
|
|
969
970
|
|
|
970
971
|
/* Categories */
|
|
971
|
-
.edge-picker-categories {
|
|
972
|
+
.dl-edge-picker-categories {
|
|
972
973
|
display: flex;
|
|
973
974
|
flex-direction: column;
|
|
974
975
|
}
|
|
975
976
|
|
|
976
|
-
.edge-picker-category {
|
|
977
|
+
.dl-edge-picker-category {
|
|
977
978
|
display: flex;
|
|
978
979
|
align-items: center;
|
|
979
980
|
justify-content: space-between;
|
|
@@ -988,23 +989,23 @@ svg.react-flow__connectionline {
|
|
|
988
989
|
transition: background 0.15s;
|
|
989
990
|
}
|
|
990
991
|
|
|
991
|
-
.edge-picker-category:hover {
|
|
992
|
+
.dl-edge-picker-category:hover {
|
|
992
993
|
background: var(--bg-hover, #f0f0f0);
|
|
993
994
|
}
|
|
994
995
|
|
|
995
|
-
[data-theme="dark"] .edge-picker-category {
|
|
996
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-category {
|
|
996
997
|
color: var(--text-primary, #e0e0e0);
|
|
997
998
|
}
|
|
998
999
|
|
|
999
|
-
[data-theme="dark"] .edge-picker-category:hover {
|
|
1000
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-category:hover {
|
|
1000
1001
|
background: var(--bg-hover, #3e3e3e);
|
|
1001
1002
|
}
|
|
1002
1003
|
|
|
1003
|
-
.edge-picker-category-name {
|
|
1004
|
+
.dl-edge-picker-category-name {
|
|
1004
1005
|
font-weight: 500;
|
|
1005
1006
|
}
|
|
1006
1007
|
|
|
1007
|
-
.edge-picker-category-count {
|
|
1008
|
+
.dl-edge-picker-category-count {
|
|
1008
1009
|
font-size: 11px;
|
|
1009
1010
|
color: var(--text-tertiary, #888);
|
|
1010
1011
|
background: var(--bg-tertiary, #f0f0f0);
|
|
@@ -1012,17 +1013,17 @@ svg.react-flow__connectionline {
|
|
|
1012
1013
|
border-radius: 10px;
|
|
1013
1014
|
}
|
|
1014
1015
|
|
|
1015
|
-
[data-theme="dark"] .edge-picker-category-count {
|
|
1016
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-category-count {
|
|
1016
1017
|
background: var(--bg-tertiary, #2e2e2e);
|
|
1017
1018
|
}
|
|
1018
1019
|
|
|
1019
1020
|
/* Operators */
|
|
1020
|
-
.edge-picker-operators {
|
|
1021
|
+
.dl-edge-picker-operators {
|
|
1021
1022
|
display: flex;
|
|
1022
1023
|
flex-direction: column;
|
|
1023
1024
|
}
|
|
1024
1025
|
|
|
1025
|
-
.edge-picker-back {
|
|
1026
|
+
.dl-edge-picker-back {
|
|
1026
1027
|
padding: 8px 12px;
|
|
1027
1028
|
font-size: 12px;
|
|
1028
1029
|
color: var(--color-primary, #2563eb);
|
|
@@ -1034,20 +1035,20 @@ svg.react-flow__connectionline {
|
|
|
1034
1035
|
transition: background 0.15s;
|
|
1035
1036
|
}
|
|
1036
1037
|
|
|
1037
|
-
.edge-picker-back:hover {
|
|
1038
|
+
.dl-edge-picker-back:hover {
|
|
1038
1039
|
background: var(--bg-hover, #f0f0f0);
|
|
1039
1040
|
}
|
|
1040
1041
|
|
|
1041
|
-
[data-theme="dark"] .edge-picker-back {
|
|
1042
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-back {
|
|
1042
1043
|
color: var(--color-primary, #60a5fa);
|
|
1043
1044
|
border-color: var(--border-color, #3e3e3e);
|
|
1044
1045
|
}
|
|
1045
1046
|
|
|
1046
|
-
[data-theme="dark"] .edge-picker-back:hover {
|
|
1047
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-back:hover {
|
|
1047
1048
|
background: var(--bg-hover, #3e3e3e);
|
|
1048
1049
|
}
|
|
1049
1050
|
|
|
1050
|
-
.edge-picker-operator {
|
|
1051
|
+
.dl-edge-picker-operator {
|
|
1051
1052
|
display: flex;
|
|
1052
1053
|
align-items: center;
|
|
1053
1054
|
gap: 10px;
|
|
@@ -1061,47 +1062,47 @@ svg.react-flow__connectionline {
|
|
|
1061
1062
|
transition: background 0.15s;
|
|
1062
1063
|
}
|
|
1063
1064
|
|
|
1064
|
-
.edge-picker-operator:hover {
|
|
1065
|
+
.dl-edge-picker-operator:hover {
|
|
1065
1066
|
background: var(--bg-hover, #f0f0f0);
|
|
1066
1067
|
}
|
|
1067
1068
|
|
|
1068
|
-
[data-theme="dark"] .edge-picker-operator {
|
|
1069
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-operator {
|
|
1069
1070
|
color: var(--text-primary, #e0e0e0);
|
|
1070
1071
|
}
|
|
1071
1072
|
|
|
1072
|
-
[data-theme="dark"] .edge-picker-operator:hover {
|
|
1073
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-operator:hover {
|
|
1073
1074
|
background: var(--bg-hover, #3e3e3e);
|
|
1074
1075
|
}
|
|
1075
1076
|
|
|
1076
|
-
.edge-picker-operator-name {
|
|
1077
|
+
.dl-edge-picker-operator-name {
|
|
1077
1078
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
1078
1079
|
font-weight: 600;
|
|
1079
1080
|
min-width: 50px;
|
|
1080
1081
|
}
|
|
1081
1082
|
|
|
1082
|
-
.edge-picker-operator-label {
|
|
1083
|
+
.dl-edge-picker-operator-label {
|
|
1083
1084
|
font-size: 12px;
|
|
1084
1085
|
color: var(--text-secondary, #666);
|
|
1085
1086
|
}
|
|
1086
1087
|
|
|
1087
|
-
[data-theme="dark"] .edge-picker-operator-label {
|
|
1088
|
+
.logic-editor[data-theme="dark"] .dl-edge-picker-operator-label {
|
|
1088
1089
|
color: var(--text-secondary, #aaa);
|
|
1089
1090
|
}
|
|
1090
1091
|
|
|
1091
|
-
.edge-picker-empty {
|
|
1092
|
+
.dl-edge-picker-empty {
|
|
1092
1093
|
padding: 20px 12px;
|
|
1093
1094
|
font-size: 13px;
|
|
1094
1095
|
color: var(--text-tertiary, #888);
|
|
1095
1096
|
text-align: center;
|
|
1096
1097
|
}
|
|
1097
1098
|
/* Inline variant (used in toolbar) */
|
|
1098
|
-
.debugger-controls--inline {
|
|
1099
|
+
.dl-debugger-controls--inline {
|
|
1099
1100
|
display: flex;
|
|
1100
1101
|
align-items: center;
|
|
1101
1102
|
flex-shrink: 0;
|
|
1102
1103
|
}
|
|
1103
1104
|
|
|
1104
|
-
.debugger-controls--inline .debugger-controls-inner {
|
|
1105
|
+
.dl-debugger-controls--inline .dl-debugger-controls-inner {
|
|
1105
1106
|
display: flex;
|
|
1106
1107
|
align-items: center;
|
|
1107
1108
|
gap: 12px;
|
|
@@ -1115,7 +1116,7 @@ svg.react-flow__connectionline {
|
|
|
1115
1116
|
}
|
|
1116
1117
|
|
|
1117
1118
|
/* Floating overlay variant (legacy, used inside ReactFlow) */
|
|
1118
|
-
.debugger-controls--floating {
|
|
1119
|
+
.dl-debugger-controls--floating {
|
|
1119
1120
|
position: absolute;
|
|
1120
1121
|
top: 12px;
|
|
1121
1122
|
left: 50%;
|
|
@@ -1124,7 +1125,7 @@ svg.react-flow__connectionline {
|
|
|
1124
1125
|
pointer-events: auto;
|
|
1125
1126
|
}
|
|
1126
1127
|
|
|
1127
|
-
.debugger-controls--floating .debugger-controls-inner {
|
|
1128
|
+
.dl-debugger-controls--floating .dl-debugger-controls-inner {
|
|
1128
1129
|
display: flex;
|
|
1129
1130
|
align-items: center;
|
|
1130
1131
|
gap: 16px;
|
|
@@ -1137,7 +1138,7 @@ svg.react-flow__connectionline {
|
|
|
1137
1138
|
}
|
|
1138
1139
|
|
|
1139
1140
|
/* Bug icon indicator */
|
|
1140
|
-
.debugger-icon {
|
|
1141
|
+
.dl-debugger-icon {
|
|
1141
1142
|
display: flex;
|
|
1142
1143
|
align-items: center;
|
|
1143
1144
|
justify-content: center;
|
|
@@ -1145,14 +1146,14 @@ svg.react-flow__connectionline {
|
|
|
1145
1146
|
}
|
|
1146
1147
|
|
|
1147
1148
|
/* Navigation buttons */
|
|
1148
|
-
.debugger-buttons {
|
|
1149
|
+
.dl-debugger-buttons {
|
|
1149
1150
|
display: flex;
|
|
1150
1151
|
align-items: center;
|
|
1151
1152
|
gap: 4px;
|
|
1152
1153
|
flex-shrink: 0;
|
|
1153
1154
|
}
|
|
1154
1155
|
|
|
1155
|
-
.debugger-btn {
|
|
1156
|
+
.dl-debugger-btn {
|
|
1156
1157
|
display: flex;
|
|
1157
1158
|
align-items: center;
|
|
1158
1159
|
justify-content: center;
|
|
@@ -1167,34 +1168,34 @@ svg.react-flow__connectionline {
|
|
|
1167
1168
|
transition: background-color 0.15s, color 0.15s, transform 0.1s;
|
|
1168
1169
|
}
|
|
1169
1170
|
|
|
1170
|
-
.debugger-btn:hover:not(:disabled) {
|
|
1171
|
+
.dl-debugger-btn:hover:not(:disabled) {
|
|
1171
1172
|
background: var(--bg-tertiary);
|
|
1172
1173
|
color: var(--text-primary);
|
|
1173
1174
|
}
|
|
1174
1175
|
|
|
1175
|
-
.debugger-btn:active:not(:disabled) {
|
|
1176
|
+
.dl-debugger-btn:active:not(:disabled) {
|
|
1176
1177
|
transform: scale(0.95);
|
|
1177
1178
|
}
|
|
1178
1179
|
|
|
1179
|
-
.debugger-btn:disabled {
|
|
1180
|
+
.dl-debugger-btn:disabled {
|
|
1180
1181
|
opacity: 0.4;
|
|
1181
1182
|
cursor: not-allowed;
|
|
1182
1183
|
}
|
|
1183
1184
|
|
|
1184
|
-
.debugger-btn-primary {
|
|
1185
|
+
.dl-debugger-btn-primary {
|
|
1185
1186
|
width: 36px;
|
|
1186
1187
|
height: 36px;
|
|
1187
1188
|
background: var(--accent-blue);
|
|
1188
1189
|
color: white;
|
|
1189
1190
|
}
|
|
1190
1191
|
|
|
1191
|
-
.debugger-btn-primary:hover:not(:disabled) {
|
|
1192
|
+
.dl-debugger-btn-primary:hover:not(:disabled) {
|
|
1192
1193
|
background: var(--accent-blue-hover);
|
|
1193
1194
|
color: white;
|
|
1194
1195
|
}
|
|
1195
1196
|
|
|
1196
1197
|
/* Step counter */
|
|
1197
|
-
.debugger-step-counter {
|
|
1198
|
+
.dl-debugger-step-counter {
|
|
1198
1199
|
display: flex;
|
|
1199
1200
|
align-items: baseline;
|
|
1200
1201
|
gap: 2px;
|
|
@@ -1205,35 +1206,35 @@ svg.react-flow__connectionline {
|
|
|
1205
1206
|
flex-shrink: 0;
|
|
1206
1207
|
}
|
|
1207
1208
|
|
|
1208
|
-
.step-current {
|
|
1209
|
+
.dl-step-current {
|
|
1209
1210
|
color: var(--text-primary);
|
|
1210
1211
|
font-weight: 600;
|
|
1211
1212
|
}
|
|
1212
1213
|
|
|
1213
|
-
.step-separator {
|
|
1214
|
+
.dl-step-separator {
|
|
1214
1215
|
color: var(--text-muted);
|
|
1215
1216
|
margin: 0 2px;
|
|
1216
1217
|
}
|
|
1217
1218
|
|
|
1218
|
-
.step-total {
|
|
1219
|
+
.dl-step-total {
|
|
1219
1220
|
color: var(--text-secondary);
|
|
1220
1221
|
}
|
|
1221
1222
|
|
|
1222
1223
|
/* Speed control */
|
|
1223
|
-
.debugger-speed {
|
|
1224
|
+
.dl-debugger-speed {
|
|
1224
1225
|
display: flex;
|
|
1225
1226
|
align-items: center;
|
|
1226
1227
|
gap: 8px;
|
|
1227
1228
|
flex-shrink: 0;
|
|
1228
1229
|
}
|
|
1229
1230
|
|
|
1230
|
-
.speed-label {
|
|
1231
|
+
.dl-speed-label {
|
|
1231
1232
|
font-size: 12px;
|
|
1232
1233
|
color: var(--text-tertiary);
|
|
1233
1234
|
white-space: nowrap;
|
|
1234
1235
|
}
|
|
1235
1236
|
|
|
1236
|
-
.speed-slider {
|
|
1237
|
+
.dl-speed-slider {
|
|
1237
1238
|
width: 80px;
|
|
1238
1239
|
height: 4px;
|
|
1239
1240
|
-webkit-appearance: none;
|
|
@@ -1243,7 +1244,7 @@ svg.react-flow__connectionline {
|
|
|
1243
1244
|
cursor: pointer;
|
|
1244
1245
|
}
|
|
1245
1246
|
|
|
1246
|
-
.speed-slider::-webkit-slider-thumb {
|
|
1247
|
+
.dl-speed-slider::-webkit-slider-thumb {
|
|
1247
1248
|
-webkit-appearance: none;
|
|
1248
1249
|
appearance: none;
|
|
1249
1250
|
width: 14px;
|
|
@@ -1254,11 +1255,11 @@ svg.react-flow__connectionline {
|
|
|
1254
1255
|
transition: transform 0.1s;
|
|
1255
1256
|
}
|
|
1256
1257
|
|
|
1257
|
-
.speed-slider::-webkit-slider-thumb:hover {
|
|
1258
|
+
.dl-speed-slider::-webkit-slider-thumb:hover {
|
|
1258
1259
|
transform: scale(1.15);
|
|
1259
1260
|
}
|
|
1260
1261
|
|
|
1261
|
-
.speed-slider::-moz-range-thumb {
|
|
1262
|
+
.dl-speed-slider::-moz-range-thumb {
|
|
1262
1263
|
width: 14px;
|
|
1263
1264
|
height: 14px;
|
|
1264
1265
|
background: var(--accent-blue);
|
|
@@ -1268,1785 +1269,320 @@ svg.react-flow__connectionline {
|
|
|
1268
1269
|
}
|
|
1269
1270
|
|
|
1270
1271
|
/* Dark mode adjustments */
|
|
1271
|
-
[data-theme="dark"] .debugger-controls--floating .debugger-controls-inner {
|
|
1272
|
+
.logic-editor[data-theme="dark"] .dl-debugger-controls--floating .dl-debugger-controls-inner {
|
|
1272
1273
|
background: rgba(31, 41, 55, 0.95);
|
|
1273
1274
|
border-color: var(--border-light);
|
|
1274
1275
|
}
|
|
1275
1276
|
|
|
1276
|
-
[data-theme="dark"] .debugger-btn {
|
|
1277
|
+
.logic-editor[data-theme="dark"] .dl-debugger-btn {
|
|
1277
1278
|
background: rgba(55, 65, 81, 0.8);
|
|
1278
1279
|
}
|
|
1279
1280
|
|
|
1280
|
-
[data-theme="dark"] .debugger-btn:hover:not(:disabled) {
|
|
1281
|
+
.logic-editor[data-theme="dark"] .dl-debugger-btn:hover:not(:disabled) {
|
|
1281
1282
|
background: rgba(75, 85, 99, 0.9);
|
|
1282
1283
|
}
|
|
1283
1284
|
|
|
1284
|
-
[data-theme="dark"] .speed-slider {
|
|
1285
|
+
.logic-editor[data-theme="dark"] .dl-speed-slider {
|
|
1285
1286
|
background: rgba(75, 85, 99, 0.8);
|
|
1286
1287
|
}
|
|
1287
1288
|
|
|
1288
1289
|
/* Mobile adjustments */
|
|
1289
1290
|
@media (max-width: 1024px) {
|
|
1290
|
-
.debugger-controls--inline .debugger-controls-inner {
|
|
1291
|
+
.dl-debugger-controls--inline .dl-debugger-controls-inner {
|
|
1291
1292
|
gap: 8px;
|
|
1292
1293
|
}
|
|
1293
1294
|
|
|
1294
|
-
.debugger-btn {
|
|
1295
|
+
.dl-debugger-btn {
|
|
1295
1296
|
width: 36px;
|
|
1296
1297
|
height: 36px;
|
|
1297
1298
|
}
|
|
1298
1299
|
|
|
1299
|
-
.debugger-btn-primary {
|
|
1300
|
+
.dl-debugger-btn-primary {
|
|
1300
1301
|
width: 40px;
|
|
1301
1302
|
height: 40px;
|
|
1302
1303
|
}
|
|
1303
1304
|
|
|
1304
|
-
.debugger-step-counter {
|
|
1305
|
+
.dl-debugger-step-counter {
|
|
1305
1306
|
min-width: 50px;
|
|
1306
1307
|
font-size: 12px;
|
|
1307
1308
|
}
|
|
1308
1309
|
|
|
1309
|
-
.speed-slider {
|
|
1310
|
+
.dl-speed-slider {
|
|
1310
1311
|
width: 60px;
|
|
1311
1312
|
}
|
|
1312
1313
|
}
|
|
1313
|
-
/*
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
/* Field Container */
|
|
1318
|
-
.panel-field {
|
|
1319
|
-
display: flex;
|
|
1320
|
-
flex-direction: column;
|
|
1321
|
-
gap: 6px;
|
|
1322
|
-
margin-bottom: 12px;
|
|
1323
|
-
}
|
|
1324
|
-
|
|
1325
|
-
.panel-field-label {
|
|
1326
|
-
font-size: 12px;
|
|
1327
|
-
font-weight: 500;
|
|
1328
|
-
color: var(--dl-text-secondary, #666);
|
|
1329
|
-
}
|
|
1314
|
+
/* ============================================
|
|
1315
|
+
CSS Variables - Debug Colors
|
|
1316
|
+
============================================ */
|
|
1330
1317
|
|
|
1331
|
-
.
|
|
1332
|
-
color:
|
|
1333
|
-
|
|
1318
|
+
.logic-editor {
|
|
1319
|
+
--debug-current-color: #F59E0B;
|
|
1320
|
+
--debug-current-glow: rgba(245, 158, 11, 0.4);
|
|
1321
|
+
--debug-executed-color: #10B981;
|
|
1322
|
+
--debug-executed-border: rgba(16, 185, 129, 0.6);
|
|
1323
|
+
--debug-pending-opacity: 0.5;
|
|
1324
|
+
--debug-error-color: #EF4444;
|
|
1325
|
+
--debug-error-glow: rgba(239, 68, 68, 0.4);
|
|
1326
|
+
--debug-error-border: rgba(239, 68, 68, 0.6);
|
|
1334
1327
|
}
|
|
1335
1328
|
|
|
1336
|
-
.
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1329
|
+
.logic-editor[data-theme="dark"] {
|
|
1330
|
+
--debug-current-glow: rgba(245, 158, 11, 0.5);
|
|
1331
|
+
--debug-executed-border: rgba(16, 185, 129, 0.8);
|
|
1332
|
+
--debug-error-glow: rgba(239, 68, 68, 0.5);
|
|
1333
|
+
--debug-error-border: rgba(239, 68, 68, 0.8);
|
|
1340
1334
|
}
|
|
1341
1335
|
|
|
1342
|
-
/*
|
|
1343
|
-
|
|
1344
|
-
|
|
1336
|
+
/* ============================================
|
|
1337
|
+
.dl-node — Shared Visual Base
|
|
1338
|
+
============================================ */
|
|
1345
1339
|
|
|
1346
|
-
.
|
|
1347
|
-
|
|
1348
|
-
|
|
1340
|
+
.dl-node {
|
|
1341
|
+
border-radius: 8px;
|
|
1342
|
+
border: 2px solid;
|
|
1343
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
1349
1344
|
font-size: 13px;
|
|
1350
|
-
|
|
1351
|
-
color: var(--dl-text-primary, #1a1a1a);
|
|
1352
|
-
background: var(--dl-bg-input, #fff);
|
|
1353
|
-
border: 1px solid var(--dl-border, #e0e0e0);
|
|
1354
|
-
border-radius: 6px;
|
|
1355
|
-
outline: none;
|
|
1356
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
1345
|
+
width: 100%;
|
|
1357
1346
|
box-sizing: border-box;
|
|
1347
|
+
box-shadow: 0 2px 6px var(--node-shadow);
|
|
1348
|
+
transition: box-shadow 0.2s, transform 0.1s;
|
|
1349
|
+
background: var(--node-bg) !important;
|
|
1350
|
+
position: relative;
|
|
1358
1351
|
}
|
|
1359
1352
|
|
|
1360
|
-
.
|
|
1361
|
-
|
|
1362
|
-
box-shadow: 0 0 0 3px var(--dl-primary-alpha, rgba(59, 130, 246, 0.15));
|
|
1353
|
+
.dl-node:hover {
|
|
1354
|
+
box-shadow: 0 4px 12px var(--node-shadow-hover);
|
|
1363
1355
|
}
|
|
1364
1356
|
|
|
1365
|
-
.
|
|
1366
|
-
|
|
1367
|
-
color: var(--dl-text-disabled, #aaa);
|
|
1368
|
-
cursor: not-allowed;
|
|
1357
|
+
.dl-node.selected {
|
|
1358
|
+
box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
|
|
1369
1359
|
}
|
|
1370
1360
|
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1361
|
+
/* ============================================
|
|
1362
|
+
.dl-node Debug States
|
|
1363
|
+
States ONLY change: border-color, box-shadow, opacity, animation
|
|
1364
|
+
============================================ */
|
|
1374
1365
|
|
|
1375
|
-
|
|
1376
|
-
|
|
1366
|
+
/* Disable transitions on debug-active nodes to prevent animation-to-static handoff glitches */
|
|
1367
|
+
.dl-node[class*="debug-"] {
|
|
1368
|
+
transition: none !important;
|
|
1377
1369
|
}
|
|
1378
1370
|
|
|
1379
|
-
|
|
1380
|
-
|
|
1371
|
+
/* Contain overflow on all debug-state nodes except current (which needs the bubble visible) */
|
|
1372
|
+
.dl-node[class*="debug-"]:not(.debug-current) {
|
|
1373
|
+
overflow: hidden;
|
|
1381
1374
|
}
|
|
1382
1375
|
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1376
|
+
/* Current step - pulsing highlight */
|
|
1377
|
+
.dl-node.debug-current {
|
|
1378
|
+
box-shadow: 0 0 0 3px var(--debug-current-color),
|
|
1379
|
+
0 0 20px var(--debug-current-glow) !important;
|
|
1380
|
+
animation: debug-pulse 1.5s ease-in-out infinite;
|
|
1387
1381
|
}
|
|
1388
1382
|
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
color: var(--dl-warning, #f59e0b);
|
|
1393
|
-
background: var(--dl-warning-bg, #fffbeb);
|
|
1394
|
-
border-radius: 4px;
|
|
1383
|
+
/* Ensure debug-current node wrapper is above all other nodes */
|
|
1384
|
+
.react-flow__node:has(.debug-current) {
|
|
1385
|
+
z-index: 1000 !important;
|
|
1395
1386
|
}
|
|
1396
1387
|
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1388
|
+
@keyframes debug-pulse {
|
|
1389
|
+
0%, 100% {
|
|
1390
|
+
box-shadow: 0 0 0 3px var(--debug-current-color),
|
|
1391
|
+
0 0 15px var(--debug-current-glow);
|
|
1392
|
+
}
|
|
1393
|
+
50% {
|
|
1394
|
+
box-shadow: 0 0 0 5px var(--debug-current-color),
|
|
1395
|
+
0 0 25px var(--debug-current-glow);
|
|
1396
|
+
}
|
|
1405
1397
|
}
|
|
1406
1398
|
|
|
1407
|
-
/*
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
.panel-input-number {
|
|
1412
|
-
-moz-appearance: textfield;
|
|
1399
|
+
/* Executed nodes - path trail with green border */
|
|
1400
|
+
.dl-node.debug-executed {
|
|
1401
|
+
border-color: var(--debug-executed-color) !important;
|
|
1402
|
+
box-shadow: 0 0 0 1px var(--debug-executed-border);
|
|
1413
1403
|
}
|
|
1414
1404
|
|
|
1415
|
-
|
|
1416
|
-
.
|
|
1417
|
-
-
|
|
1418
|
-
margin: 0;
|
|
1405
|
+
/* Pending nodes - slightly faded */
|
|
1406
|
+
.dl-node.debug-pending {
|
|
1407
|
+
opacity: var(--debug-pending-opacity);
|
|
1419
1408
|
}
|
|
1420
1409
|
|
|
1421
|
-
/*
|
|
1422
|
-
|
|
1423
|
-
|
|
1410
|
+
/* On path - ancestors of current node (but not current itself) */
|
|
1411
|
+
.dl-node.debug-on-path {
|
|
1412
|
+
border-color: var(--debug-current-color) !important;
|
|
1413
|
+
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
|
|
1414
|
+
}
|
|
1424
1415
|
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1416
|
+
/* Error nodes - red border */
|
|
1417
|
+
.dl-node.debug-error {
|
|
1418
|
+
border-color: var(--debug-error-color) !important;
|
|
1419
|
+
box-shadow: 0 0 0 1px var(--debug-error-border),
|
|
1420
|
+
0 2px 6px var(--node-shadow);
|
|
1429
1421
|
}
|
|
1430
1422
|
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1423
|
+
/* Error + current: red pulsing glow */
|
|
1424
|
+
.dl-node.debug-error.debug-current {
|
|
1425
|
+
box-shadow: 0 0 0 3px var(--debug-error-color),
|
|
1426
|
+
0 0 15px var(--debug-error-glow) !important;
|
|
1427
|
+
animation: debug-error-pulse 1.5s ease-in-out infinite;
|
|
1436
1428
|
}
|
|
1437
1429
|
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
height: 20px;
|
|
1442
|
-
background: var(--dl-bg-toggle-off, #d1d5db);
|
|
1443
|
-
border-radius: 10px;
|
|
1444
|
-
transition: background 0.2s;
|
|
1430
|
+
@keyframes debug-error-pulse {
|
|
1431
|
+
0%, 100% { box-shadow: 0 0 0 3px var(--debug-error-color), 0 0 15px var(--debug-error-glow); }
|
|
1432
|
+
50% { box-shadow: 0 0 0 5px var(--debug-error-color), 0 0 25px var(--debug-error-glow); }
|
|
1445
1433
|
}
|
|
1446
1434
|
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1435
|
+
/* ============================================
|
|
1436
|
+
Vertical Cell Node — Layout
|
|
1437
|
+
============================================ */
|
|
1438
|
+
|
|
1439
|
+
.vertical-cell-header {
|
|
1440
|
+
padding: 4px 10px;
|
|
1441
|
+
border-radius: 6px 6px 0 0;
|
|
1442
|
+
color: white;
|
|
1443
|
+
display: flex;
|
|
1444
|
+
align-items: center;
|
|
1445
|
+
gap: 8px;
|
|
1458
1446
|
}
|
|
1459
1447
|
|
|
1460
|
-
.
|
|
1461
|
-
|
|
1448
|
+
.vertical-cell-header .vertical-cell-label {
|
|
1449
|
+
flex: 1;
|
|
1462
1450
|
}
|
|
1463
1451
|
|
|
1464
|
-
.
|
|
1465
|
-
|
|
1452
|
+
.vertical-cell-header .collapse-toggle {
|
|
1453
|
+
margin-left: auto;
|
|
1466
1454
|
}
|
|
1467
1455
|
|
|
1468
|
-
.
|
|
1469
|
-
|
|
1456
|
+
.vertical-cell-icon {
|
|
1457
|
+
font-size: 16px;
|
|
1470
1458
|
}
|
|
1471
1459
|
|
|
1472
|
-
.
|
|
1473
|
-
|
|
1474
|
-
|
|
1460
|
+
.vertical-cell-label {
|
|
1461
|
+
font-weight: 600;
|
|
1462
|
+
font-size: 16px;
|
|
1463
|
+
letter-spacing: 0.5px;
|
|
1464
|
+
white-space: nowrap;
|
|
1475
1465
|
}
|
|
1476
1466
|
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1467
|
+
.vertical-cell-body {
|
|
1468
|
+
padding: 4px 0;
|
|
1469
|
+
}
|
|
1480
1470
|
|
|
1481
|
-
.
|
|
1482
|
-
|
|
1471
|
+
.vertical-cell-row {
|
|
1472
|
+
padding: 6px 12px;
|
|
1473
|
+
border-bottom: 1px solid var(--border-light);
|
|
1483
1474
|
display: flex;
|
|
1484
1475
|
align-items: center;
|
|
1476
|
+
gap: 8px;
|
|
1477
|
+
position: relative;
|
|
1485
1478
|
}
|
|
1486
1479
|
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1480
|
+
/* Handle positioned inside cell row */
|
|
1481
|
+
.vertical-cell-row .cell-handle {
|
|
1482
|
+
position: absolute;
|
|
1483
|
+
right: -5px;
|
|
1484
|
+
top: 50%;
|
|
1485
|
+
transform: translateY(-50%);
|
|
1491
1486
|
}
|
|
1492
1487
|
|
|
1493
|
-
|
|
1494
|
-
|
|
1488
|
+
/* Condition handle - upper position for if/then cells */
|
|
1489
|
+
.vertical-cell-row .cell-handle.condition-handle {
|
|
1490
|
+
top: 30%;
|
|
1495
1491
|
}
|
|
1496
1492
|
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
font-size: 10px;
|
|
1501
|
-
color: var(--dl-text-tertiary, #999);
|
|
1502
|
-
pointer-events: none;
|
|
1493
|
+
/* Then/Yes handle - lower position for if/then cells */
|
|
1494
|
+
.vertical-cell-row .cell-handle.then-handle {
|
|
1495
|
+
top: 70%;
|
|
1503
1496
|
}
|
|
1504
1497
|
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
========================================================================== */
|
|
1508
|
-
|
|
1509
|
-
.panel-input-path-wrapper {
|
|
1510
|
-
display: flex;
|
|
1511
|
-
align-items: center;
|
|
1512
|
-
background: var(--dl-bg-input, #fff);
|
|
1513
|
-
border: 1px solid var(--dl-border, #e0e0e0);
|
|
1514
|
-
border-radius: 6px;
|
|
1515
|
-
overflow: hidden;
|
|
1516
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
1498
|
+
.vertical-cell-row:last-child {
|
|
1499
|
+
border-bottom: none;
|
|
1517
1500
|
}
|
|
1518
1501
|
|
|
1519
|
-
.
|
|
1520
|
-
|
|
1521
|
-
box-shadow: 0 0 0 3px var(--dl-primary-alpha, rgba(59, 130, 246, 0.15));
|
|
1502
|
+
.vertical-cell-row-then {
|
|
1503
|
+
padding-left: 24px;
|
|
1522
1504
|
}
|
|
1523
1505
|
|
|
1524
|
-
.
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
1528
|
-
color: var(--dl-text-tertiary, #999);
|
|
1529
|
-
user-select: none;
|
|
1506
|
+
.vertical-cell-row-icon {
|
|
1507
|
+
font-size: 14px;
|
|
1508
|
+
flex-shrink: 0;
|
|
1530
1509
|
}
|
|
1531
1510
|
|
|
1532
|
-
.
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1511
|
+
.vertical-cell-row-label {
|
|
1512
|
+
font-size: 12px;
|
|
1513
|
+
font-weight: 600;
|
|
1514
|
+
color: var(--text-tertiary);
|
|
1515
|
+
flex-shrink: 0;
|
|
1536
1516
|
}
|
|
1537
1517
|
|
|
1538
|
-
.
|
|
1539
|
-
|
|
1518
|
+
.vertical-cell-inline {
|
|
1519
|
+
font-family: 'SF Mono', 'Consolas', monospace;
|
|
1520
|
+
font-size: 12px;
|
|
1521
|
+
color: var(--text-primary);
|
|
1522
|
+
word-break: break-word;
|
|
1523
|
+
min-width: 0;
|
|
1524
|
+
overflow: hidden;
|
|
1540
1525
|
}
|
|
1541
1526
|
|
|
1542
|
-
/*
|
|
1543
|
-
|
|
1544
|
-
|
|
1527
|
+
/* Branch expression text in vertical cells */
|
|
1528
|
+
.branch-expression {
|
|
1529
|
+
flex: 1;
|
|
1530
|
+
min-width: 0;
|
|
1531
|
+
overflow: hidden;
|
|
1532
|
+
white-space: nowrap;
|
|
1533
|
+
text-overflow: ellipsis;
|
|
1534
|
+
background: var(--bg-tertiary);
|
|
1535
|
+
padding: 2px 6px;
|
|
1536
|
+
border-radius: 3px;
|
|
1537
|
+
border-left: 2px solid #94a3b8;
|
|
1538
|
+
}
|
|
1545
1539
|
|
|
1546
|
-
.
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
gap: 6px;
|
|
1540
|
+
.logic-editor[data-theme="dark"] .branch-expression {
|
|
1541
|
+
background: var(--bg-hover);
|
|
1542
|
+
border-left-color: #64748b;
|
|
1550
1543
|
}
|
|
1551
1544
|
|
|
1552
|
-
|
|
1545
|
+
/* Header right section for result badge and collapse toggle */
|
|
1546
|
+
.header-right {
|
|
1553
1547
|
display: flex;
|
|
1554
1548
|
align-items: center;
|
|
1555
1549
|
gap: 4px;
|
|
1550
|
+
margin-left: auto;
|
|
1556
1551
|
}
|
|
1557
1552
|
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
1561
|
-
}
|
|
1562
|
-
|
|
1563
|
-
.panel-input-segment-remove {
|
|
1564
|
-
display: flex;
|
|
1565
|
-
align-items: center;
|
|
1566
|
-
justify-content: center;
|
|
1567
|
-
width: 24px;
|
|
1568
|
-
height: 24px;
|
|
1569
|
-
padding: 0;
|
|
1553
|
+
/* Collapse toggle */
|
|
1554
|
+
.collapse-toggle {
|
|
1570
1555
|
background: transparent;
|
|
1571
1556
|
border: none;
|
|
1572
|
-
|
|
1573
|
-
|
|
1557
|
+
color: white;
|
|
1558
|
+
font-size: 10px;
|
|
1574
1559
|
cursor: pointer;
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
background: var(--dl-error-bg, #fef2f2);
|
|
1580
|
-
color: var(--dl-error, #ef4444);
|
|
1560
|
+
padding: 2px 6px;
|
|
1561
|
+
opacity: 0.8;
|
|
1562
|
+
transition: opacity 0.2s;
|
|
1563
|
+
flex-shrink: 0;
|
|
1581
1564
|
}
|
|
1582
1565
|
|
|
1583
|
-
.
|
|
1584
|
-
opacity:
|
|
1585
|
-
cursor: not-allowed;
|
|
1566
|
+
.collapse-toggle:hover {
|
|
1567
|
+
opacity: 1;
|
|
1586
1568
|
}
|
|
1587
1569
|
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
gap: 6px;
|
|
1592
|
-
padding: 6px 10px;
|
|
1570
|
+
/* Expression text for collapsed nodes */
|
|
1571
|
+
.expression-text {
|
|
1572
|
+
font-family: 'SF Mono', 'Consolas', monospace;
|
|
1593
1573
|
font-size: 12px;
|
|
1594
|
-
color: var(--
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
border-radius:
|
|
1598
|
-
|
|
1599
|
-
|
|
1574
|
+
color: var(--text-primary);
|
|
1575
|
+
padding: 4px 8px;
|
|
1576
|
+
background: var(--bg-tertiary);
|
|
1577
|
+
border-radius: 4px;
|
|
1578
|
+
word-break: break-word;
|
|
1579
|
+
line-height: 1.4;
|
|
1600
1580
|
}
|
|
1601
1581
|
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
.panel-input-add-segment:disabled {
|
|
1608
|
-
opacity: 0.5;
|
|
1609
|
-
cursor: not-allowed;
|
|
1610
|
-
}
|
|
1611
|
-
|
|
1612
|
-
.panel-input-path-preview {
|
|
1613
|
-
font-size: 11px;
|
|
1614
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
1615
|
-
color: var(--dl-text-tertiary, #999);
|
|
1616
|
-
padding: 4px 0;
|
|
1617
|
-
}
|
|
1618
|
-
|
|
1619
|
-
/* ==========================================================================
|
|
1620
|
-
Expression Input
|
|
1621
|
-
========================================================================== */
|
|
1622
|
-
|
|
1623
|
-
.panel-input-expression {
|
|
1624
|
-
padding: 10px 12px;
|
|
1625
|
-
background: var(--dl-bg-subtle, #f8f9fa);
|
|
1626
|
-
border: 1px dashed var(--dl-border, #e0e0e0);
|
|
1627
|
-
border-radius: 6px;
|
|
1628
|
-
}
|
|
1629
|
-
|
|
1630
|
-
.panel-input-expression.disabled {
|
|
1631
|
-
opacity: 0.6;
|
|
1632
|
-
}
|
|
1633
|
-
|
|
1634
|
-
.panel-input-expression-content {
|
|
1635
|
-
display: flex;
|
|
1636
|
-
align-items: center;
|
|
1637
|
-
gap: 8px;
|
|
1638
|
-
font-size: 13px;
|
|
1639
|
-
}
|
|
1640
|
-
|
|
1641
|
-
.panel-input-expression-icon {
|
|
1642
|
-
color: var(--dl-primary, #3b82f6);
|
|
1643
|
-
flex-shrink: 0;
|
|
1644
|
-
}
|
|
1645
|
-
|
|
1646
|
-
.panel-input-expression-summary {
|
|
1647
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
1648
|
-
color: var(--dl-text-primary, #1a1a1a);
|
|
1649
|
-
overflow: hidden;
|
|
1650
|
-
text-overflow: ellipsis;
|
|
1651
|
-
white-space: nowrap;
|
|
1652
|
-
}
|
|
1653
|
-
|
|
1654
|
-
.panel-input-expression-empty {
|
|
1655
|
-
color: var(--dl-text-placeholder, #bbb);
|
|
1656
|
-
font-style: italic;
|
|
1657
|
-
}
|
|
1658
|
-
|
|
1659
|
-
.panel-input-expression-hint {
|
|
1660
|
-
font-size: 10px;
|
|
1661
|
-
color: var(--dl-text-tertiary, #999);
|
|
1662
|
-
margin-top: 6px;
|
|
1663
|
-
}
|
|
1664
|
-
|
|
1665
|
-
/* ==========================================================================
|
|
1666
|
-
JSON Input
|
|
1667
|
-
========================================================================== */
|
|
1668
|
-
|
|
1669
|
-
.panel-input-json-wrapper {
|
|
1670
|
-
display: flex;
|
|
1671
|
-
flex-direction: column;
|
|
1672
|
-
}
|
|
1673
|
-
|
|
1674
|
-
.panel-input-json {
|
|
1675
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
1676
|
-
font-size: 12px;
|
|
1677
|
-
line-height: 1.5;
|
|
1678
|
-
resize: vertical;
|
|
1679
|
-
min-height: 80px;
|
|
1680
|
-
}
|
|
1681
|
-
|
|
1682
|
-
/* ==========================================================================
|
|
1683
|
-
Panel Renderer
|
|
1684
|
-
========================================================================== */
|
|
1685
|
-
|
|
1686
|
-
.panel-renderer {
|
|
1687
|
-
display: flex;
|
|
1688
|
-
flex-direction: column;
|
|
1689
|
-
gap: 16px;
|
|
1690
|
-
}
|
|
1691
|
-
|
|
1692
|
-
/* ==========================================================================
|
|
1693
|
-
Section Styles
|
|
1694
|
-
========================================================================== */
|
|
1695
|
-
|
|
1696
|
-
.panel-section {
|
|
1697
|
-
display: flex;
|
|
1698
|
-
flex-direction: column;
|
|
1699
|
-
}
|
|
1700
|
-
|
|
1701
|
-
.panel-section-header {
|
|
1702
|
-
display: flex;
|
|
1703
|
-
align-items: center;
|
|
1704
|
-
gap: 6px;
|
|
1705
|
-
padding: 8px 0;
|
|
1706
|
-
font-size: 12px;
|
|
1707
|
-
font-weight: 600;
|
|
1708
|
-
color: var(--dl-text-secondary, #666);
|
|
1709
|
-
text-transform: uppercase;
|
|
1710
|
-
letter-spacing: 0.5px;
|
|
1711
|
-
border-bottom: 1px solid var(--dl-border-light, #f0f0f0);
|
|
1712
|
-
margin-bottom: 12px;
|
|
1713
|
-
}
|
|
1714
|
-
|
|
1715
|
-
.panel-section-header.collapsible {
|
|
1716
|
-
cursor: pointer;
|
|
1717
|
-
user-select: none;
|
|
1718
|
-
transition: color 0.15s;
|
|
1719
|
-
}
|
|
1720
|
-
|
|
1721
|
-
.panel-section-header.collapsible:hover {
|
|
1722
|
-
color: var(--dl-text-primary, #1a1a1a);
|
|
1723
|
-
}
|
|
1724
|
-
|
|
1725
|
-
.panel-section-header.collapsible:focus {
|
|
1726
|
-
outline: none;
|
|
1727
|
-
color: var(--dl-primary, #3b82f6);
|
|
1728
|
-
}
|
|
1729
|
-
|
|
1730
|
-
.panel-section-toggle {
|
|
1731
|
-
display: flex;
|
|
1732
|
-
align-items: center;
|
|
1733
|
-
justify-content: center;
|
|
1734
|
-
color: var(--dl-text-tertiary, #999);
|
|
1735
|
-
}
|
|
1736
|
-
|
|
1737
|
-
.panel-section-title {
|
|
1738
|
-
flex: 1;
|
|
1739
|
-
}
|
|
1740
|
-
|
|
1741
|
-
.panel-section-content {
|
|
1742
|
-
display: flex;
|
|
1743
|
-
flex-direction: column;
|
|
1744
|
-
}
|
|
1745
|
-
|
|
1746
|
-
/* ==========================================================================
|
|
1747
|
-
Panel Hints
|
|
1748
|
-
========================================================================== */
|
|
1749
|
-
|
|
1750
|
-
.panel-hint {
|
|
1751
|
-
display: flex;
|
|
1752
|
-
gap: 10px;
|
|
1753
|
-
padding: 12px;
|
|
1754
|
-
background: var(--dl-bg-subtle, #f8f9fa);
|
|
1755
|
-
border-radius: 8px;
|
|
1756
|
-
border: 1px solid var(--dl-border-light, #f0f0f0);
|
|
1757
|
-
}
|
|
1758
|
-
|
|
1759
|
-
.panel-hint-icon {
|
|
1760
|
-
font-size: 16px;
|
|
1761
|
-
flex-shrink: 0;
|
|
1762
|
-
}
|
|
1763
|
-
|
|
1764
|
-
.panel-hint-content {
|
|
1765
|
-
flex: 1;
|
|
1766
|
-
min-width: 0;
|
|
1767
|
-
}
|
|
1768
|
-
|
|
1769
|
-
.panel-hint-title {
|
|
1770
|
-
font-size: 12px;
|
|
1771
|
-
font-weight: 600;
|
|
1772
|
-
color: var(--dl-text-secondary, #666);
|
|
1773
|
-
margin-bottom: 4px;
|
|
1774
|
-
}
|
|
1775
|
-
|
|
1776
|
-
.panel-hint-description {
|
|
1777
|
-
font-size: 12px;
|
|
1778
|
-
color: var(--dl-text-tertiary, #999);
|
|
1779
|
-
line-height: 1.4;
|
|
1780
|
-
}
|
|
1781
|
-
|
|
1782
|
-
.panel-hint-description code {
|
|
1783
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
1784
|
-
font-size: 11px;
|
|
1785
|
-
background: var(--dl-bg-code, #e8e8e8);
|
|
1786
|
-
padding: 1px 4px;
|
|
1787
|
-
border-radius: 3px;
|
|
1788
|
-
}
|
|
1789
|
-
|
|
1790
|
-
/* Chainable hint */
|
|
1791
|
-
.panel-hint-chainable {
|
|
1792
|
-
background: var(--dl-info-bg, #eff6ff);
|
|
1793
|
-
border-color: var(--dl-info-border, #bfdbfe);
|
|
1794
|
-
}
|
|
1795
|
-
|
|
1796
|
-
/* Context variables hint */
|
|
1797
|
-
.panel-hint-context {
|
|
1798
|
-
background: var(--dl-success-bg, #f0fdf4);
|
|
1799
|
-
border-color: var(--dl-success-border, #bbf7d0);
|
|
1800
|
-
}
|
|
1801
|
-
|
|
1802
|
-
.panel-context-list {
|
|
1803
|
-
list-style: none;
|
|
1804
|
-
margin: 0;
|
|
1805
|
-
padding: 0;
|
|
1806
|
-
display: flex;
|
|
1807
|
-
flex-direction: column;
|
|
1808
|
-
gap: 8px;
|
|
1809
|
-
}
|
|
1810
|
-
|
|
1811
|
-
.panel-context-item {
|
|
1812
|
-
display: flex;
|
|
1813
|
-
flex-direction: column;
|
|
1814
|
-
gap: 2px;
|
|
1815
|
-
}
|
|
1816
|
-
|
|
1817
|
-
.panel-context-example {
|
|
1818
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
1819
|
-
font-size: 11px;
|
|
1820
|
-
background: var(--dl-bg-code, rgba(0, 0, 0, 0.06));
|
|
1821
|
-
padding: 2px 6px;
|
|
1822
|
-
border-radius: 4px;
|
|
1823
|
-
color: var(--dl-text-primary, #1a1a1a);
|
|
1824
|
-
display: inline-block;
|
|
1825
|
-
width: fit-content;
|
|
1826
|
-
}
|
|
1827
|
-
|
|
1828
|
-
.panel-context-label {
|
|
1829
|
-
font-size: 12px;
|
|
1830
|
-
font-weight: 500;
|
|
1831
|
-
color: var(--dl-text-secondary, #666);
|
|
1832
|
-
}
|
|
1833
|
-
|
|
1834
|
-
.panel-context-description {
|
|
1835
|
-
font-size: 11px;
|
|
1836
|
-
color: var(--dl-text-tertiary, #999);
|
|
1837
|
-
}
|
|
1838
|
-
/* ==========================================================================
|
|
1839
|
-
Properties Panel Styles
|
|
1840
|
-
========================================================================== */
|
|
1841
|
-
|
|
1842
|
-
/* Floating properties panel - overlays on top of the diagram */
|
|
1843
|
-
.properties-panel {
|
|
1844
|
-
display: flex;
|
|
1845
|
-
flex-direction: column;
|
|
1846
|
-
position: absolute;
|
|
1847
|
-
top: 8px;
|
|
1848
|
-
right: 8px;
|
|
1849
|
-
bottom: 8px;
|
|
1850
|
-
width: 280px;
|
|
1851
|
-
z-index: 50;
|
|
1852
|
-
background: var(--bg-secondary, #ffffff);
|
|
1853
|
-
border: 1px solid var(--border-color, #e0e0e0);
|
|
1854
|
-
border-radius: 8px;
|
|
1855
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
1856
|
-
overflow: hidden;
|
|
1857
|
-
}
|
|
1858
|
-
|
|
1859
|
-
/* Dark mode */
|
|
1860
|
-
[data-theme="dark"] .properties-panel {
|
|
1861
|
-
background: var(--bg-secondary, #1e1e1e);
|
|
1862
|
-
border-color: var(--border-color, #3e3e3e);
|
|
1863
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
1864
|
-
}
|
|
1865
|
-
|
|
1866
|
-
.properties-panel-content {
|
|
1867
|
-
display: flex;
|
|
1868
|
-
flex-direction: column;
|
|
1869
|
-
height: 100%;
|
|
1870
|
-
overflow-y: auto;
|
|
1871
|
-
}
|
|
1872
|
-
|
|
1873
|
-
/* ==========================================================================
|
|
1874
|
-
Header
|
|
1875
|
-
========================================================================== */
|
|
1876
|
-
|
|
1877
|
-
.properties-panel-header {
|
|
1878
|
-
display: flex;
|
|
1879
|
-
align-items: flex-start;
|
|
1880
|
-
justify-content: space-between;
|
|
1881
|
-
gap: 12px;
|
|
1882
|
-
padding: 16px;
|
|
1883
|
-
border-bottom: 1px solid var(--border-light, #f0f0f0);
|
|
1884
|
-
background: var(--bg-tertiary, #f8f9fa);
|
|
1885
|
-
}
|
|
1886
|
-
|
|
1887
|
-
[data-theme="dark"] .properties-panel-header {
|
|
1888
|
-
border-bottom-color: var(--border-color, #3e3e3e);
|
|
1889
|
-
background: var(--bg-tertiary, #252525);
|
|
1890
|
-
}
|
|
1891
|
-
|
|
1892
|
-
.properties-panel-header-info {
|
|
1893
|
-
flex: 1;
|
|
1894
|
-
min-width: 0;
|
|
1895
|
-
}
|
|
1896
|
-
|
|
1897
|
-
.properties-panel-title {
|
|
1898
|
-
margin: 0;
|
|
1899
|
-
font-size: 16px;
|
|
1900
|
-
font-weight: 600;
|
|
1901
|
-
color: var(--text-primary, #1a1a1a);
|
|
1902
|
-
}
|
|
1903
|
-
|
|
1904
|
-
[data-theme="dark"] .properties-panel-title {
|
|
1905
|
-
color: var(--text-primary, #e0e0e0);
|
|
1906
|
-
}
|
|
1907
|
-
|
|
1908
|
-
.properties-panel-category {
|
|
1909
|
-
display: block;
|
|
1910
|
-
margin-top: 4px;
|
|
1911
|
-
font-size: 12px;
|
|
1912
|
-
color: var(--text-tertiary, #999);
|
|
1913
|
-
}
|
|
1914
|
-
|
|
1915
|
-
.properties-panel-close {
|
|
1916
|
-
display: flex;
|
|
1917
|
-
align-items: center;
|
|
1918
|
-
justify-content: center;
|
|
1919
|
-
width: 28px;
|
|
1920
|
-
height: 28px;
|
|
1921
|
-
padding: 0;
|
|
1922
|
-
background: transparent;
|
|
1923
|
-
border: none;
|
|
1924
|
-
border-radius: 6px;
|
|
1925
|
-
color: var(--text-tertiary, #999);
|
|
1926
|
-
cursor: pointer;
|
|
1927
|
-
transition: background 0.15s, color 0.15s;
|
|
1928
|
-
}
|
|
1929
|
-
|
|
1930
|
-
.properties-panel-close:hover {
|
|
1931
|
-
background: var(--bg-hover, #e8e8e8);
|
|
1932
|
-
color: var(--text-primary, #1a1a1a);
|
|
1933
|
-
}
|
|
1934
|
-
|
|
1935
|
-
[data-theme="dark"] .properties-panel-close:hover {
|
|
1936
|
-
background: var(--bg-hover, #3e3e3e);
|
|
1937
|
-
color: var(--text-primary, #e0e0e0);
|
|
1938
|
-
}
|
|
1939
|
-
|
|
1940
|
-
/* ==========================================================================
|
|
1941
|
-
Sections
|
|
1942
|
-
========================================================================== */
|
|
1943
|
-
|
|
1944
|
-
.properties-panel-section {
|
|
1945
|
-
padding: 16px;
|
|
1946
|
-
border-bottom: 1px solid var(--border-light, #f0f0f0);
|
|
1947
|
-
}
|
|
1948
|
-
|
|
1949
|
-
[data-theme="dark"] .properties-panel-section {
|
|
1950
|
-
border-bottom-color: var(--border-color, #3e3e3e);
|
|
1951
|
-
}
|
|
1952
|
-
|
|
1953
|
-
.properties-panel-section-header {
|
|
1954
|
-
display: flex;
|
|
1955
|
-
align-items: center;
|
|
1956
|
-
gap: 6px;
|
|
1957
|
-
margin-bottom: 12px;
|
|
1958
|
-
font-size: 11px;
|
|
1959
|
-
font-weight: 600;
|
|
1960
|
-
color: var(--text-tertiary, #999);
|
|
1961
|
-
text-transform: uppercase;
|
|
1962
|
-
letter-spacing: 0.5px;
|
|
1963
|
-
}
|
|
1964
|
-
|
|
1965
|
-
.properties-panel-section-icon {
|
|
1966
|
-
font-size: 14px;
|
|
1967
|
-
}
|
|
1968
|
-
|
|
1969
|
-
/* Collapsible section */
|
|
1970
|
-
.properties-panel-section--collapsible {
|
|
1971
|
-
padding: 0;
|
|
1972
|
-
}
|
|
1973
|
-
|
|
1974
|
-
.properties-panel-section-toggle {
|
|
1975
|
-
display: flex;
|
|
1976
|
-
align-items: center;
|
|
1977
|
-
gap: 6px;
|
|
1978
|
-
width: 100%;
|
|
1979
|
-
padding: 12px 16px;
|
|
1980
|
-
font-size: 11px;
|
|
1981
|
-
font-weight: 600;
|
|
1982
|
-
color: var(--text-tertiary, #999);
|
|
1983
|
-
text-transform: uppercase;
|
|
1984
|
-
letter-spacing: 0.5px;
|
|
1985
|
-
background: transparent;
|
|
1986
|
-
border: none;
|
|
1987
|
-
cursor: pointer;
|
|
1988
|
-
transition: background 0.15s, color 0.15s;
|
|
1989
|
-
}
|
|
1990
|
-
|
|
1991
|
-
.properties-panel-section-toggle:hover {
|
|
1992
|
-
background: var(--bg-hover, #f5f5f5);
|
|
1993
|
-
color: var(--text-secondary, #666);
|
|
1994
|
-
}
|
|
1995
|
-
|
|
1996
|
-
[data-theme="dark"] .properties-panel-section-toggle:hover {
|
|
1997
|
-
background: var(--bg-hover, #3e3e3e);
|
|
1998
|
-
color: var(--text-secondary, #aaa);
|
|
1999
|
-
}
|
|
2000
|
-
|
|
2001
|
-
.properties-panel-section-toggle svg {
|
|
2002
|
-
flex-shrink: 0;
|
|
2003
|
-
}
|
|
2004
|
-
|
|
2005
|
-
.properties-panel-section-content {
|
|
2006
|
-
padding: 0 16px 16px;
|
|
2007
|
-
}
|
|
2008
|
-
|
|
2009
|
-
/* ==========================================================================
|
|
2010
|
-
Help Section
|
|
2011
|
-
========================================================================== */
|
|
2012
|
-
|
|
2013
|
-
.help-section {
|
|
2014
|
-
display: flex;
|
|
2015
|
-
flex-direction: column;
|
|
2016
|
-
gap: 12px;
|
|
2017
|
-
}
|
|
2018
|
-
|
|
2019
|
-
.help-summary {
|
|
2020
|
-
margin: 0;
|
|
2021
|
-
font-size: 13px;
|
|
2022
|
-
color: var(--text-secondary, #666);
|
|
2023
|
-
line-height: 1.5;
|
|
2024
|
-
}
|
|
2025
|
-
|
|
2026
|
-
[data-theme="dark"] .help-summary {
|
|
2027
|
-
color: var(--text-secondary, #aaa);
|
|
2028
|
-
}
|
|
2029
|
-
|
|
2030
|
-
.help-badges {
|
|
2031
|
-
display: flex;
|
|
2032
|
-
flex-wrap: wrap;
|
|
2033
|
-
gap: 8px;
|
|
2034
|
-
}
|
|
2035
|
-
|
|
2036
|
-
.help-badge {
|
|
2037
|
-
display: inline-flex;
|
|
2038
|
-
align-items: center;
|
|
2039
|
-
gap: 4px;
|
|
2040
|
-
padding: 4px 8px;
|
|
2041
|
-
font-size: 11px;
|
|
2042
|
-
border-radius: 4px;
|
|
2043
|
-
}
|
|
2044
|
-
|
|
2045
|
-
.help-badge code {
|
|
2046
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
2047
|
-
}
|
|
2048
|
-
|
|
2049
|
-
.help-badge-arity {
|
|
2050
|
-
background: var(--dl-info-bg, #eff6ff);
|
|
2051
|
-
color: var(--dl-info, #3b82f6);
|
|
2052
|
-
}
|
|
2053
|
-
|
|
2054
|
-
[data-theme="dark"] .help-badge-arity {
|
|
2055
|
-
background: rgba(59, 130, 246, 0.15);
|
|
2056
|
-
color: #60a5fa;
|
|
2057
|
-
}
|
|
2058
|
-
|
|
2059
|
-
.help-badge-return {
|
|
2060
|
-
background: var(--dl-success-bg, #f0fdf4);
|
|
2061
|
-
color: var(--dl-success, #22c55e);
|
|
2062
|
-
}
|
|
2063
|
-
|
|
2064
|
-
[data-theme="dark"] .help-badge-return {
|
|
2065
|
-
background: rgba(34, 197, 94, 0.15);
|
|
2066
|
-
color: #4ade80;
|
|
2067
|
-
}
|
|
2068
|
-
|
|
2069
|
-
.help-examples-toggle {
|
|
2070
|
-
display: flex;
|
|
2071
|
-
align-items: center;
|
|
2072
|
-
gap: 6px;
|
|
2073
|
-
padding: 6px 0;
|
|
2074
|
-
font-size: 12px;
|
|
2075
|
-
color: var(--dl-primary, #3b82f6);
|
|
2076
|
-
background: transparent;
|
|
2077
|
-
border: none;
|
|
2078
|
-
cursor: pointer;
|
|
2079
|
-
transition: color 0.15s;
|
|
2080
|
-
}
|
|
2081
|
-
|
|
2082
|
-
.help-examples-toggle:hover {
|
|
2083
|
-
color: var(--dl-primary-dark, #2563eb);
|
|
2084
|
-
}
|
|
2085
|
-
|
|
2086
|
-
[data-theme="dark"] .help-examples-toggle {
|
|
2087
|
-
color: #60a5fa;
|
|
2088
|
-
}
|
|
2089
|
-
|
|
2090
|
-
[data-theme="dark"] .help-examples-toggle:hover {
|
|
2091
|
-
color: #93c5fd;
|
|
2092
|
-
}
|
|
2093
|
-
|
|
2094
|
-
.help-examples {
|
|
2095
|
-
display: flex;
|
|
2096
|
-
flex-direction: column;
|
|
2097
|
-
gap: 12px;
|
|
2098
|
-
}
|
|
2099
|
-
|
|
2100
|
-
.help-example {
|
|
2101
|
-
padding: 10px;
|
|
2102
|
-
background: var(--dl-bg-subtle, #f8f9fa);
|
|
2103
|
-
border: 1px solid var(--dl-border-light, #f0f0f0);
|
|
2104
|
-
border-radius: 6px;
|
|
2105
|
-
}
|
|
2106
|
-
|
|
2107
|
-
[data-theme="dark"] .help-example {
|
|
2108
|
-
background: #1e1e1e;
|
|
2109
|
-
border-color: #3e3e3e;
|
|
2110
|
-
}
|
|
2111
|
-
|
|
2112
|
-
.help-example-header {
|
|
2113
|
-
display: flex;
|
|
2114
|
-
align-items: center;
|
|
2115
|
-
justify-content: space-between;
|
|
2116
|
-
margin-bottom: 8px;
|
|
2117
|
-
}
|
|
2118
|
-
|
|
2119
|
-
.help-example-title {
|
|
2120
|
-
font-size: 12px;
|
|
2121
|
-
font-weight: 500;
|
|
2122
|
-
color: var(--dl-text-secondary, #666);
|
|
2123
|
-
}
|
|
2124
|
-
|
|
2125
|
-
[data-theme="dark"] .help-example-title {
|
|
2126
|
-
color: #aaa;
|
|
2127
|
-
}
|
|
2128
|
-
|
|
2129
|
-
.help-example-copy {
|
|
2130
|
-
display: flex;
|
|
2131
|
-
align-items: center;
|
|
2132
|
-
justify-content: center;
|
|
2133
|
-
width: 24px;
|
|
2134
|
-
height: 24px;
|
|
2135
|
-
padding: 0;
|
|
2136
|
-
background: transparent;
|
|
2137
|
-
border: none;
|
|
2138
|
-
border-radius: 4px;
|
|
2139
|
-
color: var(--dl-text-tertiary, #999);
|
|
2140
|
-
cursor: pointer;
|
|
2141
|
-
transition: background 0.15s, color 0.15s;
|
|
2142
|
-
}
|
|
2143
|
-
|
|
2144
|
-
.help-example-copy:hover {
|
|
2145
|
-
background: var(--dl-bg-hover, #e8e8e8);
|
|
2146
|
-
color: var(--dl-text-primary, #1a1a1a);
|
|
2147
|
-
}
|
|
2148
|
-
|
|
2149
|
-
[data-theme="dark"] .help-example-copy {
|
|
2150
|
-
color: #888;
|
|
2151
|
-
}
|
|
2152
|
-
|
|
2153
|
-
[data-theme="dark"] .help-example-copy:hover {
|
|
2154
|
-
background: #3e3e3e;
|
|
2155
|
-
color: #e0e0e0;
|
|
2156
|
-
}
|
|
2157
|
-
|
|
2158
|
-
.help-example-code {
|
|
2159
|
-
margin: 0;
|
|
2160
|
-
padding: 8px;
|
|
2161
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
2162
|
-
font-size: 11px;
|
|
2163
|
-
line-height: 1.5;
|
|
2164
|
-
background: var(--dl-bg-code, #fff);
|
|
2165
|
-
border: 1px solid var(--dl-border-light, #f0f0f0);
|
|
2166
|
-
border-radius: 4px;
|
|
2167
|
-
overflow-x: auto;
|
|
2168
|
-
color: var(--text-primary, #1a1a1a);
|
|
2169
|
-
}
|
|
2170
|
-
|
|
2171
|
-
[data-theme="dark"] .help-example-code {
|
|
2172
|
-
background: #121212;
|
|
2173
|
-
border-color: #3e3e3e;
|
|
2174
|
-
color: #e0e0e0;
|
|
2175
|
-
}
|
|
2176
|
-
|
|
2177
|
-
.help-example-code code {
|
|
2178
|
-
font-family: inherit;
|
|
2179
|
-
}
|
|
2180
|
-
|
|
2181
|
-
.help-example-data,
|
|
2182
|
-
.help-example-result,
|
|
2183
|
-
.help-example-error {
|
|
2184
|
-
display: flex;
|
|
2185
|
-
align-items: baseline;
|
|
2186
|
-
gap: 6px;
|
|
2187
|
-
margin-top: 6px;
|
|
2188
|
-
font-size: 11px;
|
|
2189
|
-
}
|
|
2190
|
-
|
|
2191
|
-
.help-example-label {
|
|
2192
|
-
color: var(--dl-text-tertiary, #999);
|
|
2193
|
-
flex-shrink: 0;
|
|
2194
|
-
}
|
|
2195
|
-
|
|
2196
|
-
.help-example-data code,
|
|
2197
|
-
.help-example-result code {
|
|
2198
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
2199
|
-
color: var(--dl-text-primary, #1a1a1a);
|
|
2200
|
-
}
|
|
2201
|
-
|
|
2202
|
-
[data-theme="dark"] .help-example-data code,
|
|
2203
|
-
[data-theme="dark"] .help-example-result code {
|
|
2204
|
-
color: #e0e0e0;
|
|
2205
|
-
}
|
|
2206
|
-
|
|
2207
|
-
.help-example-error code {
|
|
2208
|
-
font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
|
|
2209
|
-
color: var(--dl-error, #ef4444);
|
|
2210
|
-
}
|
|
2211
|
-
|
|
2212
|
-
[data-theme="dark"] .help-example-error code {
|
|
2213
|
-
color: #f87171;
|
|
2214
|
-
}
|
|
2215
|
-
|
|
2216
|
-
.help-example-note {
|
|
2217
|
-
margin-top: 6px;
|
|
2218
|
-
font-size: 11px;
|
|
2219
|
-
font-style: italic;
|
|
2220
|
-
color: var(--dl-text-tertiary, #999);
|
|
2221
|
-
}
|
|
2222
|
-
|
|
2223
|
-
.help-notes {
|
|
2224
|
-
padding-top: 8px;
|
|
2225
|
-
border-top: 1px solid var(--dl-border-light, #f0f0f0);
|
|
2226
|
-
}
|
|
2227
|
-
|
|
2228
|
-
[data-theme="dark"] .help-notes {
|
|
2229
|
-
border-top-color: #3e3e3e;
|
|
2230
|
-
}
|
|
2231
|
-
|
|
2232
|
-
.help-notes-title {
|
|
2233
|
-
font-size: 11px;
|
|
2234
|
-
font-weight: 600;
|
|
2235
|
-
color: var(--dl-text-tertiary, #999);
|
|
2236
|
-
text-transform: uppercase;
|
|
2237
|
-
letter-spacing: 0.5px;
|
|
2238
|
-
margin-bottom: 6px;
|
|
2239
|
-
}
|
|
2240
|
-
|
|
2241
|
-
.help-notes-list {
|
|
2242
|
-
margin: 0;
|
|
2243
|
-
padding-left: 16px;
|
|
2244
|
-
font-size: 12px;
|
|
2245
|
-
color: var(--dl-text-secondary, #666);
|
|
2246
|
-
line-height: 1.6;
|
|
2247
|
-
}
|
|
2248
|
-
|
|
2249
|
-
[data-theme="dark"] .help-notes-list {
|
|
2250
|
-
color: #aaa;
|
|
2251
|
-
}
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
/* ==========================================================================
|
|
2255
|
-
Footer
|
|
2256
|
-
========================================================================== */
|
|
2257
|
-
|
|
2258
|
-
.properties-panel-footer {
|
|
2259
|
-
margin-top: auto;
|
|
2260
|
-
padding: 16px;
|
|
2261
|
-
border-top: 1px solid var(--border-light, #f0f0f0);
|
|
2262
|
-
}
|
|
2263
|
-
|
|
2264
|
-
[data-theme="dark"] .properties-panel-footer {
|
|
2265
|
-
border-top-color: var(--border-color, #3e3e3e);
|
|
2266
|
-
}
|
|
2267
|
-
|
|
2268
|
-
.properties-panel-delete {
|
|
2269
|
-
width: 100%;
|
|
2270
|
-
padding: 10px 16px;
|
|
2271
|
-
font-size: 13px;
|
|
2272
|
-
font-weight: 500;
|
|
2273
|
-
color: #ef4444;
|
|
2274
|
-
background: #fef2f2;
|
|
2275
|
-
border: 1px solid #fecaca;
|
|
2276
|
-
border-radius: 6px;
|
|
2277
|
-
cursor: pointer;
|
|
2278
|
-
transition: background 0.15s, border-color 0.15s;
|
|
2279
|
-
}
|
|
2280
|
-
|
|
2281
|
-
[data-theme="dark"] .properties-panel-delete {
|
|
2282
|
-
background: #451a1a;
|
|
2283
|
-
border-color: #7f1d1d;
|
|
2284
|
-
}
|
|
2285
|
-
|
|
2286
|
-
.properties-panel-delete:hover {
|
|
2287
|
-
background: #fee2e2;
|
|
2288
|
-
border-color: #ef4444;
|
|
2289
|
-
}
|
|
2290
|
-
|
|
2291
|
-
[data-theme="dark"] .properties-panel-delete:hover {
|
|
2292
|
-
background: #5c2424;
|
|
2293
|
-
}
|
|
2294
|
-
|
|
2295
|
-
/* ==========================================================================
|
|
2296
|
-
Empty State
|
|
2297
|
-
========================================================================== */
|
|
2298
|
-
|
|
2299
|
-
.properties-panel-empty {
|
|
2300
|
-
display: flex;
|
|
2301
|
-
flex-direction: column;
|
|
2302
|
-
align-items: center;
|
|
2303
|
-
padding: 32px 16px;
|
|
2304
|
-
text-align: center;
|
|
2305
|
-
}
|
|
2306
|
-
|
|
2307
|
-
.properties-panel-empty-title {
|
|
2308
|
-
margin: 0 0 8px;
|
|
2309
|
-
font-size: 14px;
|
|
2310
|
-
font-weight: 500;
|
|
2311
|
-
color: var(--text-secondary, #666);
|
|
2312
|
-
}
|
|
2313
|
-
|
|
2314
|
-
.properties-panel-empty-hint {
|
|
2315
|
-
margin: 0;
|
|
2316
|
-
font-size: 12px;
|
|
2317
|
-
color: var(--text-tertiary, #999);
|
|
2318
|
-
line-height: 1.5;
|
|
2319
|
-
}
|
|
2320
|
-
|
|
2321
|
-
.properties-panel-empty-divider {
|
|
2322
|
-
width: 100%;
|
|
2323
|
-
height: 1px;
|
|
2324
|
-
margin: 24px 0;
|
|
2325
|
-
background: var(--border-light, #f0f0f0);
|
|
2326
|
-
}
|
|
2327
|
-
|
|
2328
|
-
[data-theme="dark"] .properties-panel-empty-divider {
|
|
2329
|
-
background: var(--border-color, #3e3e3e);
|
|
2330
|
-
}
|
|
2331
|
-
|
|
2332
|
-
.properties-panel-quick-add-title {
|
|
2333
|
-
margin: 0 0 12px;
|
|
2334
|
-
font-size: 12px;
|
|
2335
|
-
font-weight: 500;
|
|
2336
|
-
color: var(--text-secondary, #666);
|
|
2337
|
-
}
|
|
2338
|
-
|
|
2339
|
-
.properties-panel-quick-add {
|
|
2340
|
-
display: flex;
|
|
2341
|
-
flex-direction: column;
|
|
2342
|
-
gap: 8px;
|
|
2343
|
-
width: 100%;
|
|
2344
|
-
}
|
|
2345
|
-
|
|
2346
|
-
.properties-panel-quick-add-btn {
|
|
2347
|
-
display: flex;
|
|
2348
|
-
align-items: center;
|
|
2349
|
-
gap: 10px;
|
|
2350
|
-
width: 100%;
|
|
2351
|
-
padding: 10px 14px;
|
|
2352
|
-
font-size: 13px;
|
|
2353
|
-
color: var(--text-primary, #1a1a1a);
|
|
2354
|
-
background: var(--bg-tertiary, #f8f9fa);
|
|
2355
|
-
border: 1px solid var(--border-color, #e0e0e0);
|
|
2356
|
-
border-radius: 6px;
|
|
2357
|
-
cursor: pointer;
|
|
2358
|
-
transition: background 0.15s, border-color 0.15s;
|
|
2359
|
-
}
|
|
2360
|
-
|
|
2361
|
-
[data-theme="dark"] .properties-panel-quick-add-btn {
|
|
2362
|
-
color: var(--text-primary, #e0e0e0);
|
|
2363
|
-
background: var(--bg-tertiary, #252525);
|
|
2364
|
-
border-color: var(--border-color, #3e3e3e);
|
|
2365
|
-
}
|
|
2366
|
-
|
|
2367
|
-
.properties-panel-quick-add-btn:hover {
|
|
2368
|
-
background: var(--bg-hover, #f0f0f0);
|
|
2369
|
-
border-color: var(--border-color, #d0d0d0);
|
|
2370
|
-
}
|
|
2371
|
-
|
|
2372
|
-
[data-theme="dark"] .properties-panel-quick-add-btn:hover {
|
|
2373
|
-
background: var(--bg-hover, #3e3e3e);
|
|
2374
|
-
}
|
|
2375
|
-
|
|
2376
|
-
.properties-panel-quick-add-btn svg {
|
|
2377
|
-
color: var(--text-tertiary, #999);
|
|
2378
|
-
}
|
|
2379
|
-
|
|
2380
|
-
/* ============================================================================
|
|
2381
|
-
Arguments Section
|
|
2382
|
-
============================================================================ */
|
|
2383
|
-
|
|
2384
|
-
.arguments-list {
|
|
2385
|
-
display: flex;
|
|
2386
|
-
flex-direction: column;
|
|
2387
|
-
gap: 6px;
|
|
2388
|
-
margin-bottom: 12px;
|
|
2389
|
-
}
|
|
2390
|
-
|
|
2391
|
-
.argument-item {
|
|
2392
|
-
display: flex;
|
|
2393
|
-
align-items: center;
|
|
2394
|
-
gap: 8px;
|
|
2395
|
-
padding: 6px 8px;
|
|
2396
|
-
background: var(--bg-tertiary, #f8f9fa);
|
|
2397
|
-
border: 1px solid var(--border-color, #e0e0e0);
|
|
2398
|
-
border-radius: 6px;
|
|
2399
|
-
}
|
|
2400
|
-
|
|
2401
|
-
[data-theme="dark"] .argument-item {
|
|
2402
|
-
background: var(--bg-tertiary, #252525);
|
|
2403
|
-
border-color: var(--border-color, #3e3e3e);
|
|
2404
|
-
}
|
|
2405
|
-
|
|
2406
|
-
.argument-index {
|
|
2407
|
-
display: flex;
|
|
2408
|
-
align-items: center;
|
|
2409
|
-
justify-content: center;
|
|
2410
|
-
width: 20px;
|
|
2411
|
-
height: 20px;
|
|
2412
|
-
font-size: 11px;
|
|
2413
|
-
font-weight: 600;
|
|
2414
|
-
color: var(--text-tertiary, #888);
|
|
2415
|
-
background: var(--bg-secondary, #f0f0f0);
|
|
2416
|
-
border-radius: 4px;
|
|
2417
|
-
flex-shrink: 0;
|
|
2418
|
-
}
|
|
2419
|
-
|
|
2420
|
-
[data-theme="dark"] .argument-index {
|
|
2421
|
-
background: var(--bg-secondary, #1e1e1e);
|
|
2422
|
-
color: var(--text-tertiary, #888);
|
|
2423
|
-
}
|
|
2424
|
-
|
|
2425
|
-
.argument-value {
|
|
2426
|
-
flex: 1;
|
|
2427
|
-
padding: 4px 8px;
|
|
2428
|
-
font-size: 12px;
|
|
2429
|
-
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
2430
|
-
color: var(--text-primary, #1a1a1a);
|
|
2431
|
-
background: transparent;
|
|
2432
|
-
border: none;
|
|
2433
|
-
border-radius: 4px;
|
|
2434
|
-
cursor: pointer;
|
|
2435
|
-
text-align: left;
|
|
2436
|
-
overflow: hidden;
|
|
2437
|
-
text-overflow: ellipsis;
|
|
2438
|
-
white-space: nowrap;
|
|
2439
|
-
}
|
|
2440
|
-
|
|
2441
|
-
.argument-value:hover {
|
|
2442
|
-
background: var(--bg-hover, #e8e8e8);
|
|
2443
|
-
}
|
|
2444
|
-
|
|
2445
|
-
[data-theme="dark"] .argument-value {
|
|
2446
|
-
color: var(--text-primary, #e0e0e0);
|
|
2447
|
-
}
|
|
2448
|
-
|
|
2449
|
-
[data-theme="dark"] .argument-value:hover {
|
|
2450
|
-
background: var(--bg-hover, #3e3e3e);
|
|
2451
|
-
}
|
|
2452
|
-
|
|
2453
|
-
.argument-remove {
|
|
2454
|
-
display: flex;
|
|
2455
|
-
align-items: center;
|
|
2456
|
-
justify-content: center;
|
|
2457
|
-
width: 24px;
|
|
2458
|
-
height: 24px;
|
|
2459
|
-
padding: 0;
|
|
2460
|
-
color: var(--text-tertiary, #888);
|
|
2461
|
-
background: transparent;
|
|
2462
|
-
border: none;
|
|
2463
|
-
border-radius: 4px;
|
|
2464
|
-
cursor: pointer;
|
|
2465
|
-
flex-shrink: 0;
|
|
2466
|
-
transition: color 0.15s, background 0.15s;
|
|
2467
|
-
}
|
|
2468
|
-
|
|
2469
|
-
.argument-remove:hover {
|
|
2470
|
-
color: var(--color-error, #dc3545);
|
|
2471
|
-
background: var(--bg-hover, #e8e8e8);
|
|
2472
|
-
}
|
|
2473
|
-
|
|
2474
|
-
[data-theme="dark"] .argument-remove:hover {
|
|
2475
|
-
background: var(--bg-hover, #3e3e3e);
|
|
2476
|
-
}
|
|
2477
|
-
|
|
2478
|
-
.arguments-empty {
|
|
2479
|
-
padding: 12px;
|
|
2480
|
-
font-size: 12px;
|
|
2481
|
-
color: var(--text-tertiary, #888);
|
|
2482
|
-
text-align: center;
|
|
2483
|
-
background: var(--bg-tertiary, #f8f9fa);
|
|
2484
|
-
border: 1px dashed var(--border-color, #e0e0e0);
|
|
2485
|
-
border-radius: 6px;
|
|
2486
|
-
}
|
|
2487
|
-
|
|
2488
|
-
[data-theme="dark"] .arguments-empty {
|
|
2489
|
-
background: var(--bg-tertiary, #252525);
|
|
2490
|
-
border-color: var(--border-color, #3e3e3e);
|
|
2491
|
-
}
|
|
2492
|
-
|
|
2493
|
-
.arguments-add-btn {
|
|
2494
|
-
display: flex;
|
|
2495
|
-
align-items: center;
|
|
2496
|
-
justify-content: center;
|
|
2497
|
-
gap: 6px;
|
|
2498
|
-
width: 100%;
|
|
2499
|
-
padding: 8px 12px;
|
|
2500
|
-
font-size: 12px;
|
|
2501
|
-
font-weight: 500;
|
|
2502
|
-
color: var(--color-primary, #2563eb);
|
|
2503
|
-
background: transparent;
|
|
2504
|
-
border: 1px dashed var(--color-primary, #2563eb);
|
|
2505
|
-
border-radius: 6px;
|
|
2506
|
-
cursor: pointer;
|
|
2507
|
-
transition: background 0.15s, border-style 0.15s;
|
|
2508
|
-
}
|
|
2509
|
-
|
|
2510
|
-
.arguments-add-btn:hover {
|
|
2511
|
-
background: var(--color-primary-light, rgba(37, 99, 235, 0.08));
|
|
2512
|
-
border-style: solid;
|
|
2513
|
-
}
|
|
2514
|
-
|
|
2515
|
-
[data-theme="dark"] .arguments-add-btn {
|
|
2516
|
-
color: var(--color-primary, #60a5fa);
|
|
2517
|
-
border-color: var(--color-primary, #60a5fa);
|
|
2518
|
-
}
|
|
2519
|
-
|
|
2520
|
-
[data-theme="dark"] .arguments-add-btn:hover {
|
|
2521
|
-
background: var(--color-primary-light, rgba(96, 165, 250, 0.1));
|
|
2522
|
-
}
|
|
2523
|
-
|
|
2524
|
-
.arguments-hint {
|
|
2525
|
-
margin-top: 8px;
|
|
2526
|
-
padding: 6px 8px;
|
|
2527
|
-
font-size: 11px;
|
|
2528
|
-
color: var(--text-tertiary, #888);
|
|
2529
|
-
background: var(--bg-tertiary, #f8f9fa);
|
|
2530
|
-
border-radius: 4px;
|
|
2531
|
-
}
|
|
2532
|
-
|
|
2533
|
-
[data-theme="dark"] .arguments-hint {
|
|
2534
|
-
background: var(--bg-tertiary, #252525);
|
|
2535
|
-
}
|
|
2536
|
-
|
|
2537
|
-
/* Inline literal inputs */
|
|
2538
|
-
.argument-literal-input {
|
|
2539
|
-
flex: 1;
|
|
2540
|
-
min-width: 0;
|
|
2541
|
-
}
|
|
2542
|
-
|
|
2543
|
-
.argument-input {
|
|
2544
|
-
width: 100%;
|
|
2545
|
-
padding: 6px 8px;
|
|
2546
|
-
font-size: 12px;
|
|
2547
|
-
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
2548
|
-
color: var(--text-primary, #1a1a1a);
|
|
2549
|
-
background: var(--bg-primary, #ffffff);
|
|
2550
|
-
border: 1px solid var(--border-color, #d0d0d0);
|
|
2551
|
-
border-radius: 4px;
|
|
2552
|
-
outline: none;
|
|
2553
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
2554
|
-
}
|
|
2555
|
-
|
|
2556
|
-
.argument-input:focus {
|
|
2557
|
-
border-color: var(--color-primary, #2563eb);
|
|
2558
|
-
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
|
|
2559
|
-
}
|
|
2560
|
-
|
|
2561
|
-
.argument-input:hover:not(:focus) {
|
|
2562
|
-
border-color: var(--border-color-dark, #c0c0c0);
|
|
2563
|
-
}
|
|
2564
|
-
|
|
2565
|
-
[data-theme="dark"] .argument-input {
|
|
2566
|
-
color: var(--text-primary, #e0e0e0);
|
|
2567
|
-
background: var(--bg-primary, #121212);
|
|
2568
|
-
border-color: var(--border-color, #4e4e4e);
|
|
2569
|
-
}
|
|
2570
|
-
|
|
2571
|
-
[data-theme="dark"] .argument-input:focus {
|
|
2572
|
-
border-color: var(--color-primary, #60a5fa);
|
|
2573
|
-
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
|
|
2574
|
-
}
|
|
2575
|
-
|
|
2576
|
-
[data-theme="dark"] .argument-input:hover:not(:focus) {
|
|
2577
|
-
border-color: var(--border-color-dark, #5e5e5e);
|
|
2578
|
-
}
|
|
2579
|
-
|
|
2580
|
-
/* Number input specific */
|
|
2581
|
-
.argument-input--number {
|
|
2582
|
-
-moz-appearance: textfield;
|
|
2583
|
-
}
|
|
2584
|
-
|
|
2585
|
-
.argument-input--number::-webkit-outer-spin-button,
|
|
2586
|
-
.argument-input--number::-webkit-inner-spin-button {
|
|
2587
|
-
-webkit-appearance: none;
|
|
2588
|
-
margin: 0;
|
|
2589
|
-
}
|
|
2590
|
-
|
|
2591
|
-
/* String input specific */
|
|
2592
|
-
.argument-input--string::placeholder {
|
|
2593
|
-
color: var(--text-muted, #aaa);
|
|
2594
|
-
font-style: italic;
|
|
2595
|
-
}
|
|
2596
|
-
|
|
2597
|
-
/* Boolean and null select */
|
|
2598
|
-
.argument-input--boolean,
|
|
2599
|
-
.argument-input--null {
|
|
2600
|
-
cursor: pointer;
|
|
2601
|
-
/* Remove all native select styling */
|
|
2602
|
-
-webkit-appearance: none;
|
|
2603
|
-
-moz-appearance: none;
|
|
2604
|
-
appearance: none;
|
|
2605
|
-
/* Custom dropdown arrow - use shorthand to override base class */
|
|
2606
|
-
background: var(--bg-primary, #ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
|
|
2607
|
-
padding-right: 28px;
|
|
2608
|
-
}
|
|
2609
|
-
|
|
2610
|
-
/* Remove IE dropdown arrow */
|
|
2611
|
-
.argument-input--boolean::-ms-expand,
|
|
2612
|
-
.argument-input--null::-ms-expand {
|
|
2613
|
-
display: none;
|
|
2614
|
-
}
|
|
2615
|
-
|
|
2616
|
-
[data-theme="dark"] .argument-input--boolean,
|
|
2617
|
-
[data-theme="dark"] .argument-input--null {
|
|
2618
|
-
background: var(--bg-primary, #121212) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
|
|
2619
|
-
}
|
|
2620
|
-
|
|
2621
|
-
/* Complex value link button */
|
|
2622
|
-
.argument-value--complex {
|
|
2623
|
-
display: flex;
|
|
2624
|
-
align-items: center;
|
|
2625
|
-
gap: 6px;
|
|
2626
|
-
flex: 1;
|
|
2627
|
-
padding: 6px 8px;
|
|
2628
|
-
font-size: 12px;
|
|
2629
|
-
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
2630
|
-
color: var(--color-primary, #2563eb);
|
|
2631
|
-
background: var(--bg-primary, #ffffff);
|
|
2632
|
-
border: 1px solid var(--border-color, #d0d0d0);
|
|
2633
|
-
border-radius: 4px;
|
|
2634
|
-
cursor: pointer;
|
|
2635
|
-
text-align: left;
|
|
2636
|
-
overflow: hidden;
|
|
2637
|
-
text-overflow: ellipsis;
|
|
2638
|
-
white-space: nowrap;
|
|
2639
|
-
transition: background 0.15s, border-color 0.15s;
|
|
2640
|
-
}
|
|
2641
|
-
|
|
2642
|
-
.argument-value--complex:hover {
|
|
2643
|
-
background: var(--bg-hover, #f5f5f5);
|
|
2644
|
-
border-color: var(--color-primary, #2563eb);
|
|
2645
|
-
}
|
|
2646
|
-
|
|
2647
|
-
.argument-value--complex svg {
|
|
2648
|
-
flex-shrink: 0;
|
|
2649
|
-
opacity: 0.6;
|
|
2650
|
-
}
|
|
2651
|
-
|
|
2652
|
-
[data-theme="dark"] .argument-value--complex {
|
|
2653
|
-
color: var(--color-primary, #60a5fa);
|
|
2654
|
-
background: var(--bg-primary, #121212);
|
|
2655
|
-
border-color: var(--border-color, #4e4e4e);
|
|
2656
|
-
}
|
|
2657
|
-
|
|
2658
|
-
[data-theme="dark"] .argument-value--complex:hover {
|
|
2659
|
-
background: var(--bg-hover, #2a2a2a);
|
|
2660
|
-
border-color: var(--color-primary, #60a5fa);
|
|
2661
|
-
}
|
|
2662
|
-
|
|
2663
|
-
/* Readonly literal display */
|
|
2664
|
-
.argument-input--readonly {
|
|
2665
|
-
display: block;
|
|
2666
|
-
width: 100%;
|
|
2667
|
-
padding: 6px 8px;
|
|
2668
|
-
font-size: 12px;
|
|
2669
|
-
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
2670
|
-
color: var(--text-secondary, #666);
|
|
2671
|
-
background: var(--bg-tertiary, #f5f5f5);
|
|
2672
|
-
border: 1px solid var(--border-color, #e0e0e0);
|
|
2673
|
-
border-radius: 4px;
|
|
2674
|
-
}
|
|
2675
|
-
|
|
2676
|
-
[data-theme="dark"] .argument-input--readonly {
|
|
2677
|
-
color: var(--text-secondary, #aaa);
|
|
2678
|
-
background: var(--bg-tertiary, #252525);
|
|
2679
|
-
border-color: var(--border-color, #3e3e3e);
|
|
2680
|
-
}
|
|
2681
|
-
|
|
2682
|
-
/* ==========================================================================
|
|
2683
|
-
Operator List (Empty State with Full Operator Selection)
|
|
2684
|
-
========================================================================== */
|
|
2685
|
-
|
|
2686
|
-
.properties-panel-search {
|
|
2687
|
-
position: relative;
|
|
2688
|
-
padding: 12px 16px;
|
|
2689
|
-
border-bottom: 1px solid var(--border-light, #f0f0f0);
|
|
2690
|
-
}
|
|
2691
|
-
|
|
2692
|
-
[data-theme="dark"] .properties-panel-search {
|
|
2693
|
-
border-bottom-color: var(--border-color, #3e3e3e);
|
|
2694
|
-
}
|
|
2695
|
-
|
|
2696
|
-
.properties-panel-search-icon {
|
|
2697
|
-
position: absolute;
|
|
2698
|
-
left: 28px;
|
|
2699
|
-
top: 50%;
|
|
2700
|
-
transform: translateY(-50%);
|
|
2701
|
-
color: var(--text-tertiary, #999);
|
|
2702
|
-
pointer-events: none;
|
|
2703
|
-
}
|
|
2704
|
-
|
|
2705
|
-
.properties-panel-search-input {
|
|
2706
|
-
width: 100%;
|
|
2707
|
-
padding: 8px 12px 8px 32px;
|
|
2708
|
-
font-size: 13px;
|
|
2709
|
-
color: var(--text-primary, #1a1a1a);
|
|
2710
|
-
background: var(--bg-tertiary, #f8f9fa);
|
|
2711
|
-
border: 1px solid var(--border-color, #e0e0e0);
|
|
2712
|
-
border-radius: 6px;
|
|
2713
|
-
outline: none;
|
|
2714
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
2715
|
-
}
|
|
2716
|
-
|
|
2717
|
-
.properties-panel-search-input:focus {
|
|
2718
|
-
border-color: var(--color-primary, #2563eb);
|
|
2719
|
-
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
|
|
2720
|
-
}
|
|
2721
|
-
|
|
2722
|
-
.properties-panel-search-input::placeholder {
|
|
2723
|
-
color: var(--text-tertiary, #999);
|
|
2724
|
-
}
|
|
2725
|
-
|
|
2726
|
-
[data-theme="dark"] .properties-panel-search-input {
|
|
2727
|
-
color: var(--text-primary, #e0e0e0);
|
|
2728
|
-
background: var(--bg-tertiary, #252525);
|
|
2729
|
-
border-color: var(--border-color, #3e3e3e);
|
|
2730
|
-
}
|
|
2731
|
-
|
|
2732
|
-
[data-theme="dark"] .properties-panel-search-input:focus {
|
|
2733
|
-
border-color: var(--color-primary, #60a5fa);
|
|
2734
|
-
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
|
|
2735
|
-
}
|
|
2736
|
-
|
|
2737
|
-
.properties-panel-operators-list {
|
|
2738
|
-
flex: 1;
|
|
2739
|
-
overflow-y: auto;
|
|
2740
|
-
padding: 8px 0;
|
|
2741
|
-
}
|
|
2742
|
-
|
|
2743
|
-
/* Category styling - reset the block display from header category */
|
|
2744
|
-
.properties-panel-operators-list .properties-panel-category {
|
|
2745
|
-
display: block;
|
|
2746
|
-
margin-top: 0;
|
|
2747
|
-
font-size: inherit;
|
|
2748
|
-
color: inherit;
|
|
2749
|
-
}
|
|
2750
|
-
|
|
2751
|
-
.properties-panel-category-header {
|
|
2752
|
-
display: flex;
|
|
2753
|
-
align-items: center;
|
|
2754
|
-
gap: 8px;
|
|
2755
|
-
width: 100%;
|
|
2756
|
-
padding: 8px 16px;
|
|
2757
|
-
font-size: 12px;
|
|
2758
|
-
font-weight: 600;
|
|
2759
|
-
color: var(--text-secondary, #666);
|
|
2760
|
-
background: transparent;
|
|
2761
|
-
border: none;
|
|
2762
|
-
cursor: pointer;
|
|
2763
|
-
transition: background 0.15s;
|
|
2764
|
-
}
|
|
2765
|
-
|
|
2766
|
-
.properties-panel-category-header:hover {
|
|
2767
|
-
background: var(--bg-hover, #f5f5f5);
|
|
2768
|
-
}
|
|
2769
|
-
|
|
2770
|
-
[data-theme="dark"] .properties-panel-category-header:hover {
|
|
2771
|
-
background: var(--bg-hover, #3e3e3e);
|
|
2772
|
-
}
|
|
2773
|
-
|
|
2774
|
-
.properties-panel-category-header svg {
|
|
2775
|
-
flex-shrink: 0;
|
|
2776
|
-
color: var(--text-tertiary, #999);
|
|
2777
|
-
}
|
|
2778
|
-
|
|
2779
|
-
.properties-panel-category-dot {
|
|
2780
|
-
width: 8px;
|
|
2781
|
-
height: 8px;
|
|
2782
|
-
border-radius: 50%;
|
|
2783
|
-
flex-shrink: 0;
|
|
2784
|
-
}
|
|
2785
|
-
|
|
2786
|
-
.properties-panel-category-label {
|
|
2787
|
-
flex: 1;
|
|
2788
|
-
text-align: left;
|
|
2789
|
-
}
|
|
2790
|
-
|
|
2791
|
-
.properties-panel-category-count {
|
|
2792
|
-
font-size: 11px;
|
|
2793
|
-
font-weight: 400;
|
|
2794
|
-
color: var(--text-tertiary, #999);
|
|
2795
|
-
padding: 2px 6px;
|
|
2796
|
-
background: var(--bg-tertiary, #f0f0f0);
|
|
2797
|
-
border-radius: 10px;
|
|
2798
|
-
}
|
|
2799
|
-
|
|
2800
|
-
[data-theme="dark"] .properties-panel-category-count {
|
|
2801
|
-
background: var(--bg-tertiary, #2e2e2e);
|
|
2802
|
-
}
|
|
2803
|
-
|
|
2804
|
-
.properties-panel-category-items {
|
|
2805
|
-
padding: 4px 8px 8px 24px;
|
|
2806
|
-
}
|
|
2807
|
-
|
|
2808
|
-
.properties-panel-operator-item {
|
|
2809
|
-
display: flex;
|
|
2810
|
-
align-items: center;
|
|
2811
|
-
justify-content: space-between;
|
|
2812
|
-
gap: 8px;
|
|
2813
|
-
width: 100%;
|
|
2814
|
-
padding: 6px 12px;
|
|
2815
|
-
font-size: 12px;
|
|
2816
|
-
color: var(--text-primary, #1a1a1a);
|
|
2817
|
-
background: transparent;
|
|
2818
|
-
border: none;
|
|
2819
|
-
border-radius: 4px;
|
|
2820
|
-
cursor: pointer;
|
|
2821
|
-
transition: background 0.15s;
|
|
2822
|
-
}
|
|
2823
|
-
|
|
2824
|
-
.properties-panel-operator-item:hover {
|
|
2825
|
-
background: var(--bg-hover, #f0f0f0);
|
|
2826
|
-
}
|
|
2827
|
-
|
|
2828
|
-
[data-theme="dark"] .properties-panel-operator-item {
|
|
2829
|
-
color: var(--text-primary, #e0e0e0);
|
|
2830
|
-
}
|
|
2831
|
-
|
|
2832
|
-
[data-theme="dark"] .properties-panel-operator-item:hover {
|
|
2833
|
-
background: var(--bg-hover, #3e3e3e);
|
|
2834
|
-
}
|
|
2835
|
-
|
|
2836
|
-
.properties-panel-operator-name {
|
|
2837
|
-
flex: 1;
|
|
2838
|
-
text-align: left;
|
|
2839
|
-
font-weight: 500;
|
|
2840
|
-
}
|
|
2841
|
-
|
|
2842
|
-
.properties-panel-operator-symbol {
|
|
2843
|
-
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
2844
|
-
font-size: 11px;
|
|
2845
|
-
color: var(--text-tertiary, #999);
|
|
2846
|
-
padding: 2px 6px;
|
|
2847
|
-
background: var(--bg-tertiary, #f5f5f5);
|
|
2848
|
-
border-radius: 4px;
|
|
2849
|
-
}
|
|
2850
|
-
|
|
2851
|
-
[data-theme="dark"] .properties-panel-operator-symbol {
|
|
2852
|
-
background: var(--bg-tertiary, #2e2e2e);
|
|
2853
|
-
}
|
|
2854
|
-
|
|
2855
|
-
/* ==========================================================================
|
|
2856
|
-
Mobile Bottom Sheet
|
|
2857
|
-
========================================================================== */
|
|
2858
|
-
|
|
2859
|
-
@media (max-width: 1024px) {
|
|
2860
|
-
.properties-panel {
|
|
2861
|
-
position: fixed;
|
|
2862
|
-
top: auto;
|
|
2863
|
-
left: 0;
|
|
2864
|
-
right: 0;
|
|
2865
|
-
bottom: 52px; /* above mobile nav tab bar */
|
|
2866
|
-
width: 100%;
|
|
2867
|
-
height: 45%;
|
|
2868
|
-
max-height: 340px;
|
|
2869
|
-
border-radius: 12px 12px 0 0;
|
|
2870
|
-
border: none;
|
|
2871
|
-
border-top: 1px solid var(--border-color, #e0e0e0);
|
|
2872
|
-
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
|
|
2873
|
-
z-index: 200;
|
|
2874
|
-
}
|
|
2875
|
-
|
|
2876
|
-
[data-theme="dark"] .properties-panel {
|
|
2877
|
-
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
|
|
2878
|
-
}
|
|
2879
|
-
|
|
2880
|
-
.properties-panel-close {
|
|
2881
|
-
width: 44px;
|
|
2882
|
-
height: 44px;
|
|
2883
|
-
}
|
|
2884
|
-
|
|
2885
|
-
.properties-panel-section-toggle {
|
|
2886
|
-
min-height: 44px;
|
|
2887
|
-
}
|
|
2888
|
-
|
|
2889
|
-
.properties-panel-operator-item {
|
|
2890
|
-
min-height: 44px;
|
|
2891
|
-
padding: 8px 12px;
|
|
2892
|
-
}
|
|
2893
|
-
|
|
2894
|
-
.properties-panel-category-header {
|
|
2895
|
-
min-height: 44px;
|
|
2896
|
-
}
|
|
2897
|
-
|
|
2898
|
-
.properties-panel-quick-add-btn {
|
|
2899
|
-
min-height: 44px;
|
|
2900
|
-
}
|
|
2901
|
-
|
|
2902
|
-
.properties-panel-delete {
|
|
2903
|
-
min-height: 44px;
|
|
2904
|
-
}
|
|
2905
|
-
|
|
2906
|
-
.arguments-add-btn {
|
|
2907
|
-
min-height: 44px;
|
|
2908
|
-
}
|
|
2909
|
-
|
|
2910
|
-
.argument-remove {
|
|
2911
|
-
width: 44px;
|
|
2912
|
-
height: 44px;
|
|
2913
|
-
}
|
|
2914
|
-
}
|
|
2915
|
-
|
|
2916
|
-
/* Landscape mobile: panel on the right side instead of bottom sheet */
|
|
2917
|
-
@media (max-width: 1024px) and (orientation: landscape) {
|
|
2918
|
-
.properties-panel {
|
|
2919
|
-
position: fixed;
|
|
2920
|
-
top: 44px; /* below the header */
|
|
2921
|
-
left: auto;
|
|
2922
|
-
right: 0;
|
|
2923
|
-
bottom: 40px; /* above landscape mobile nav tab bar (40px in landscape) */
|
|
2924
|
-
width: 280px;
|
|
2925
|
-
height: auto;
|
|
2926
|
-
max-height: none;
|
|
2927
|
-
border-radius: 0;
|
|
2928
|
-
border: none;
|
|
2929
|
-
border-left: 1px solid var(--border-color, #e0e0e0);
|
|
2930
|
-
border-top: none;
|
|
2931
|
-
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
|
|
2932
|
-
}
|
|
2933
|
-
|
|
2934
|
-
[data-theme="dark"] .properties-panel {
|
|
2935
|
-
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.35);
|
|
2936
|
-
}
|
|
2937
|
-
}
|
|
2938
|
-
/* Base node styles - shared across all node types */
|
|
2939
|
-
.logic-node {
|
|
2940
|
-
border-radius: 8px;
|
|
2941
|
-
border: 2px solid;
|
|
2942
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
2943
|
-
font-size: 13px;
|
|
2944
|
-
/* Width is set via inline style from layout calculations */
|
|
2945
|
-
width: 100%;
|
|
2946
|
-
box-sizing: border-box;
|
|
2947
|
-
box-shadow: 0 2px 6px var(--node-shadow);
|
|
2948
|
-
transition: box-shadow 0.2s, transform 0.1s;
|
|
2949
|
-
}
|
|
2950
|
-
|
|
2951
|
-
.logic-node:hover {
|
|
2952
|
-
box-shadow: 0 4px 12px var(--node-shadow-hover);
|
|
2953
|
-
}
|
|
2954
|
-
|
|
2955
|
-
.logic-node.selected {
|
|
2956
|
-
box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
|
|
2957
|
-
}
|
|
2958
|
-
|
|
2959
|
-
/* Legacy class support - these now use .logic-node */
|
|
2960
|
-
.operator-node,
|
|
2961
|
-
.variable-node,
|
|
2962
|
-
.literal-node {
|
|
2963
|
-
border-radius: 8px;
|
|
2964
|
-
border: 2px solid;
|
|
2965
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
2966
|
-
font-size: 13px;
|
|
2967
|
-
/* Width is set via inline style from layout calculations */
|
|
2968
|
-
width: 100%;
|
|
2969
|
-
box-sizing: border-box;
|
|
2970
|
-
box-shadow: 0 2px 6px var(--node-shadow);
|
|
2971
|
-
transition: box-shadow 0.2s, transform 0.1s;
|
|
2972
|
-
}
|
|
2973
|
-
|
|
2974
|
-
.operator-node:hover,
|
|
2975
|
-
.variable-node:hover,
|
|
2976
|
-
.literal-node:hover {
|
|
2977
|
-
box-shadow: 0 4px 12px var(--node-shadow-hover);
|
|
2978
|
-
}
|
|
2979
|
-
|
|
2980
|
-
.operator-node.selected,
|
|
2981
|
-
.variable-node.selected,
|
|
2982
|
-
.literal-node.selected {
|
|
2983
|
-
box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
|
|
2984
|
-
}
|
|
2985
|
-
|
|
2986
|
-
/* Operator Node */
|
|
2987
|
-
.operator-node {
|
|
2988
|
-
background: var(--node-bg) !important;
|
|
2989
|
-
}
|
|
2990
|
-
|
|
2991
|
-
.operator-node-header {
|
|
2992
|
-
padding: 6px 12px;
|
|
2993
|
-
border-radius: 6px 6px 0 0;
|
|
2994
|
-
color: white;
|
|
2995
|
-
font-weight: 600;
|
|
2996
|
-
text-align: center;
|
|
2997
|
-
}
|
|
2998
|
-
|
|
2999
|
-
.operator-label {
|
|
3000
|
-
font-size: 16px;
|
|
3001
|
-
letter-spacing: 0.5px;
|
|
3002
|
-
white-space: nowrap;
|
|
3003
|
-
}
|
|
3004
|
-
|
|
3005
|
-
/* Header content with collapse toggle */
|
|
3006
|
-
.operator-header-content {
|
|
3007
|
-
display: flex;
|
|
3008
|
-
align-items: center;
|
|
3009
|
-
justify-content: space-between;
|
|
3010
|
-
width: 100%;
|
|
3011
|
-
}
|
|
3012
|
-
|
|
3013
|
-
.operator-header-content .operator-label {
|
|
3014
|
-
flex: 1;
|
|
3015
|
-
text-align: center;
|
|
3016
|
-
}
|
|
3017
|
-
|
|
3018
|
-
.collapse-toggle {
|
|
3019
|
-
background: transparent;
|
|
3020
|
-
border: none;
|
|
3021
|
-
color: white;
|
|
3022
|
-
font-size: 10px;
|
|
3023
|
-
cursor: pointer;
|
|
3024
|
-
padding: 2px 6px;
|
|
3025
|
-
opacity: 0.8;
|
|
3026
|
-
transition: opacity 0.2s;
|
|
3027
|
-
flex-shrink: 0;
|
|
3028
|
-
}
|
|
3029
|
-
|
|
3030
|
-
.collapse-toggle:hover {
|
|
3031
|
-
opacity: 1;
|
|
3032
|
-
}
|
|
3033
|
-
|
|
3034
|
-
/* Expression text for collapsed nodes */
|
|
3035
|
-
.expression-text {
|
|
3036
|
-
font-family: 'SF Mono', 'Consolas', monospace;
|
|
3037
|
-
font-size: 12px;
|
|
3038
|
-
color: var(--text-primary);
|
|
3039
|
-
padding: 4px 8px;
|
|
3040
|
-
background: var(--bg-tertiary);
|
|
3041
|
-
border-radius: 4px;
|
|
3042
|
-
word-break: break-word;
|
|
3043
|
-
line-height: 1.4;
|
|
3044
|
-
}
|
|
3045
|
-
|
|
3046
|
-
/* Inline expression for unary operators with simple args */
|
|
3047
|
-
.expression-text.inline-expression {
|
|
3048
|
-
font-size: 13px;
|
|
3049
|
-
font-weight: 500;
|
|
1582
|
+
/* Inline expression for unary operators with simple args */
|
|
1583
|
+
.expression-text.inline-expression {
|
|
1584
|
+
font-size: 13px;
|
|
1585
|
+
font-weight: 500;
|
|
3050
1586
|
}
|
|
3051
1587
|
|
|
3052
1588
|
.collapsed-body {
|
|
@@ -3072,94 +1608,24 @@ svg.react-flow__connectionline {
|
|
|
3072
1608
|
}
|
|
3073
1609
|
|
|
3074
1610
|
.arg-icon {
|
|
3075
|
-
flex-shrink: 0;
|
|
3076
|
-
font-size: 12px;
|
|
3077
|
-
}
|
|
3078
|
-
|
|
3079
|
-
.arg-label {
|
|
3080
|
-
font-family: 'SF Mono', 'Consolas', monospace;
|
|
3081
|
-
color: var(--text-primary);
|
|
3082
|
-
white-space: nowrap;
|
|
3083
|
-
overflow: hidden;
|
|
3084
|
-
text-overflow: ellipsis;
|
|
3085
|
-
}
|
|
3086
|
-
|
|
3087
|
-
/* Collapsed operator node */
|
|
3088
|
-
.operator-node.collapsed {
|
|
3089
|
-
min-height: auto;
|
|
3090
|
-
}
|
|
3091
|
-
|
|
3092
|
-
.operator-node.collapsed .operator-node-body {
|
|
3093
|
-
padding: 8px;
|
|
3094
|
-
}
|
|
3095
|
-
|
|
3096
|
-
.operator-node-body {
|
|
3097
|
-
padding: 8px 12px;
|
|
3098
|
-
display: flex;
|
|
3099
|
-
justify-content: space-between;
|
|
3100
|
-
align-items: center;
|
|
3101
|
-
gap: 8px;
|
|
3102
|
-
}
|
|
3103
|
-
|
|
3104
|
-
.operator-category {
|
|
3105
|
-
font-size: 11px;
|
|
3106
|
-
color: var(--text-tertiary);
|
|
3107
|
-
text-transform: uppercase;
|
|
3108
|
-
letter-spacing: 0.5px;
|
|
3109
|
-
}
|
|
3110
|
-
|
|
3111
|
-
.operator-children-count {
|
|
3112
|
-
font-size: 11px;
|
|
3113
|
-
color: var(--text-muted);
|
|
3114
|
-
}
|
|
3115
|
-
|
|
3116
|
-
/* Variable Node */
|
|
3117
|
-
.variable-node {
|
|
3118
|
-
background: var(--node-bg) !important;
|
|
3119
|
-
padding: 8px 12px;
|
|
3120
|
-
position: relative;
|
|
3121
|
-
}
|
|
3122
|
-
|
|
3123
|
-
.variable-node-content {
|
|
3124
|
-
display: flex;
|
|
3125
|
-
align-items: center;
|
|
3126
|
-
gap: 8px;
|
|
3127
|
-
}
|
|
3128
|
-
|
|
3129
|
-
.variable-operator {
|
|
3130
|
-
font-weight: 700;
|
|
3131
|
-
font-size: 12px;
|
|
3132
|
-
}
|
|
3133
|
-
|
|
3134
|
-
.variable-path {
|
|
3135
|
-
font-family: 'SF Mono', 'Consolas', monospace;
|
|
3136
|
-
font-size: 13px;
|
|
3137
|
-
color: var(--text-primary);
|
|
3138
|
-
}
|
|
3139
|
-
|
|
3140
|
-
.variable-default {
|
|
3141
|
-
margin-top: 6px;
|
|
3142
|
-
padding-top: 6px;
|
|
3143
|
-
border-top: 1px solid var(--border-light);
|
|
3144
|
-
font-size: 11px;
|
|
3145
|
-
display: flex;
|
|
3146
|
-
gap: 4px;
|
|
3147
|
-
}
|
|
3148
|
-
|
|
3149
|
-
.variable-default-label {
|
|
3150
|
-
color: var(--text-muted);
|
|
1611
|
+
flex-shrink: 0;
|
|
1612
|
+
font-size: 12px;
|
|
3151
1613
|
}
|
|
3152
1614
|
|
|
3153
|
-
.
|
|
1615
|
+
.arg-label {
|
|
3154
1616
|
font-family: 'SF Mono', 'Consolas', monospace;
|
|
3155
|
-
color: var(--text-
|
|
1617
|
+
color: var(--text-primary);
|
|
1618
|
+
white-space: nowrap;
|
|
1619
|
+
overflow: hidden;
|
|
1620
|
+
text-overflow: ellipsis;
|
|
3156
1621
|
}
|
|
3157
1622
|
|
|
3158
|
-
/*
|
|
1623
|
+
/* ============================================
|
|
1624
|
+
Literal Node — Layout
|
|
1625
|
+
============================================ */
|
|
1626
|
+
|
|
3159
1627
|
.literal-node {
|
|
3160
|
-
background: var(--node-bg) !important;
|
|
3161
1628
|
padding: 8px 12px;
|
|
3162
|
-
position: relative;
|
|
3163
1629
|
}
|
|
3164
1630
|
|
|
3165
1631
|
.literal-node-content {
|
|
@@ -3182,282 +1648,160 @@ svg.react-flow__connectionline {
|
|
|
3182
1648
|
word-break: break-all;
|
|
3183
1649
|
}
|
|
3184
1650
|
|
|
3185
|
-
/*
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
height: 10px;
|
|
3189
|
-
border: 2px solid white;
|
|
3190
|
-
}
|
|
3191
|
-
|
|
3192
|
-
[data-theme="dark"] .react-flow__handle {
|
|
3193
|
-
border-color: var(--bg-primary);
|
|
3194
|
-
}
|
|
3195
|
-
|
|
3196
|
-
.react-flow__handle-top {
|
|
3197
|
-
top: -6px;
|
|
3198
|
-
}
|
|
3199
|
-
|
|
3200
|
-
.react-flow__handle-bottom {
|
|
3201
|
-
bottom: -6px;
|
|
3202
|
-
}
|
|
3203
|
-
|
|
3204
|
-
.react-flow__handle-right {
|
|
3205
|
-
right: -6px;
|
|
3206
|
-
}
|
|
3207
|
-
|
|
3208
|
-
.react-flow__handle-left {
|
|
3209
|
-
left: -6px;
|
|
3210
|
-
top: 50% !important;
|
|
3211
|
-
transform: translateY(-50%) !important;
|
|
3212
|
-
}
|
|
3213
|
-
|
|
3214
|
-
/* Ensure left handles are centered on simple nodes */
|
|
3215
|
-
.literal-node .react-flow__handle-left,
|
|
3216
|
-
.variable-node .react-flow__handle-left {
|
|
3217
|
-
top: 50% !important;
|
|
3218
|
-
transform: translateY(-50%) !important;
|
|
3219
|
-
}
|
|
3220
|
-
|
|
3221
|
-
/* Decision Node */
|
|
3222
|
-
.decision-node {
|
|
3223
|
-
background: var(--node-bg) !important;
|
|
3224
|
-
border-radius: 8px;
|
|
3225
|
-
border: 2px solid;
|
|
3226
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
3227
|
-
font-size: 13px;
|
|
3228
|
-
/* Width is set via inline style from layout calculations */
|
|
3229
|
-
width: 100%;
|
|
3230
|
-
box-sizing: border-box;
|
|
3231
|
-
box-shadow: 0 2px 6px var(--node-shadow);
|
|
3232
|
-
transition: box-shadow 0.2s, transform 0.1s;
|
|
3233
|
-
position: relative;
|
|
3234
|
-
}
|
|
3235
|
-
|
|
3236
|
-
.decision-node:hover {
|
|
3237
|
-
box-shadow: 0 4px 12px var(--node-shadow-hover);
|
|
3238
|
-
}
|
|
1651
|
+
/* ============================================
|
|
1652
|
+
Structure Node — Layout
|
|
1653
|
+
============================================ */
|
|
3239
1654
|
|
|
3240
|
-
.
|
|
3241
|
-
|
|
1655
|
+
.structure-node {
|
|
1656
|
+
width: fit-content;
|
|
1657
|
+
min-width: 150px;
|
|
1658
|
+
max-width: 350px;
|
|
3242
1659
|
}
|
|
3243
1660
|
|
|
3244
|
-
.
|
|
1661
|
+
.structure-node-header {
|
|
3245
1662
|
padding: 6px 12px;
|
|
3246
1663
|
border-radius: 6px 6px 0 0;
|
|
3247
1664
|
color: white;
|
|
3248
|
-
font-weight: 600;
|
|
3249
1665
|
display: flex;
|
|
3250
1666
|
align-items: center;
|
|
3251
1667
|
gap: 8px;
|
|
1668
|
+
height: 32px;
|
|
1669
|
+
box-sizing: border-box;
|
|
3252
1670
|
}
|
|
3253
1671
|
|
|
3254
|
-
.
|
|
3255
|
-
font-size:
|
|
3256
|
-
letter-spacing: 0.5px;
|
|
3257
|
-
}
|
|
3258
|
-
|
|
3259
|
-
.decision-node-body {
|
|
3260
|
-
padding: 0;
|
|
3261
|
-
}
|
|
3262
|
-
|
|
3263
|
-
/* Decision rows - each row is 32px height */
|
|
3264
|
-
.decision-row {
|
|
1672
|
+
.structure-node-icon {
|
|
1673
|
+
font-size: 14px;
|
|
3265
1674
|
display: flex;
|
|
3266
1675
|
align-items: center;
|
|
3267
|
-
padding: 0 12px;
|
|
3268
|
-
height: 32px;
|
|
3269
|
-
gap: 6px;
|
|
3270
|
-
border-bottom: 1px solid var(--border-light);
|
|
3271
|
-
position: relative;
|
|
3272
|
-
}
|
|
3273
|
-
|
|
3274
|
-
.decision-row:last-child {
|
|
3275
|
-
border-bottom: none;
|
|
3276
|
-
}
|
|
3277
|
-
|
|
3278
|
-
.decision-row-branch {
|
|
3279
|
-
padding-left: 20px;
|
|
3280
1676
|
}
|
|
3281
1677
|
|
|
3282
|
-
.
|
|
3283
|
-
font-size: 13px;
|
|
1678
|
+
.structure-node-label {
|
|
3284
1679
|
font-weight: 600;
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
gap: 4px;
|
|
3289
|
-
color: var(--text-tertiary);
|
|
3290
|
-
flex-shrink: 0;
|
|
1680
|
+
font-size: 14px;
|
|
1681
|
+
letter-spacing: 0.5px;
|
|
1682
|
+
flex: 1;
|
|
3291
1683
|
}
|
|
3292
1684
|
|
|
3293
|
-
.
|
|
3294
|
-
|
|
1685
|
+
.structure-node-body {
|
|
1686
|
+
padding: 8px 12px;
|
|
1687
|
+
padding-right: 24px;
|
|
3295
1688
|
font-family: 'SF Mono', 'Consolas', monospace;
|
|
3296
1689
|
font-size: 12px;
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
word-break: break-word;
|
|
3302
|
-
line-height: 1.3;
|
|
3303
|
-
overflow: hidden;
|
|
3304
|
-
text-overflow: ellipsis;
|
|
3305
|
-
white-space: nowrap;
|
|
3306
|
-
}
|
|
3307
|
-
|
|
3308
|
-
/* Decision node handles are positioned at node level via inline styles */
|
|
3309
|
-
|
|
3310
|
-
/* Decision node input handle */
|
|
3311
|
-
.decision-node .react-flow__handle[data-handleid="left"] {
|
|
3312
|
-
left: -6px;
|
|
3313
|
-
top: 50%;
|
|
3314
|
-
}
|
|
3315
|
-
|
|
3316
|
-
/* Edge styles */
|
|
3317
|
-
.react-flow__edge-path {
|
|
3318
|
-
stroke-width: 2;
|
|
3319
|
-
}
|
|
3320
|
-
|
|
3321
|
-
/* Custom edge styles for decision branches */
|
|
3322
|
-
.react-flow__edge.yes-edge .react-flow__edge-path {
|
|
3323
|
-
stroke: #22C55E;
|
|
3324
|
-
}
|
|
3325
|
-
|
|
3326
|
-
.react-flow__edge.no-edge .react-flow__edge-path {
|
|
3327
|
-
stroke: #EF4444;
|
|
3328
|
-
}
|
|
3329
|
-
|
|
3330
|
-
/* Vertical Cell Node */
|
|
3331
|
-
.vertical-cell-node {
|
|
3332
|
-
background: var(--node-bg) !important;
|
|
3333
|
-
border-radius: 8px;
|
|
3334
|
-
border: 2px solid;
|
|
3335
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
3336
|
-
font-size: 13px;
|
|
3337
|
-
/* Width is set via inline style from layout calculations */
|
|
3338
|
-
width: 100%;
|
|
3339
|
-
box-sizing: border-box;
|
|
3340
|
-
box-shadow: 0 2px 6px var(--node-shadow);
|
|
3341
|
-
transition: box-shadow 0.2s, transform 0.1s;
|
|
3342
|
-
}
|
|
3343
|
-
|
|
3344
|
-
.vertical-cell-node:hover {
|
|
3345
|
-
box-shadow: 0 4px 12px var(--node-shadow-hover);
|
|
1690
|
+
white-space: pre;
|
|
1691
|
+
line-height: 18px;
|
|
1692
|
+
overflow-x: auto;
|
|
1693
|
+
max-width: 100%;
|
|
3346
1694
|
}
|
|
3347
1695
|
|
|
3348
|
-
.
|
|
3349
|
-
|
|
1696
|
+
.structure-node.collapsed .structure-node-body {
|
|
1697
|
+
white-space: normal;
|
|
3350
1698
|
}
|
|
3351
1699
|
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
color: white;
|
|
3356
|
-
display: flex;
|
|
1700
|
+
/* Expression marker - clickable link to expression node */
|
|
1701
|
+
.structure-expression-marker {
|
|
1702
|
+
display: inline-flex;
|
|
3357
1703
|
align-items: center;
|
|
3358
|
-
|
|
1704
|
+
background: var(--accent-blue-light);
|
|
1705
|
+
color: var(--accent-blue);
|
|
1706
|
+
padding: 1px 6px;
|
|
1707
|
+
border-radius: 3px;
|
|
1708
|
+
font-size: 11px;
|
|
1709
|
+
font-weight: 500;
|
|
1710
|
+
position: relative;
|
|
3359
1711
|
}
|
|
3360
1712
|
|
|
3361
|
-
.
|
|
3362
|
-
|
|
1713
|
+
.structure-expression-marker:hover {
|
|
1714
|
+
background: var(--accent-blue);
|
|
1715
|
+
color: white;
|
|
3363
1716
|
}
|
|
3364
1717
|
|
|
3365
|
-
.
|
|
3366
|
-
margin-
|
|
1718
|
+
.structure-expression-label {
|
|
1719
|
+
margin-right: 4px;
|
|
3367
1720
|
}
|
|
3368
1721
|
|
|
3369
|
-
.
|
|
3370
|
-
|
|
1722
|
+
.structure-expression-handle {
|
|
1723
|
+
width: 8px !important;
|
|
1724
|
+
height: 8px !important;
|
|
1725
|
+
border: 2px solid white !important;
|
|
1726
|
+
min-width: 8px;
|
|
1727
|
+
min-height: 8px;
|
|
3371
1728
|
}
|
|
3372
1729
|
|
|
3373
|
-
.
|
|
3374
|
-
|
|
3375
|
-
font-size: 16px;
|
|
3376
|
-
letter-spacing: 0.5px;
|
|
3377
|
-
white-space: nowrap;
|
|
1730
|
+
.logic-editor[data-theme="dark"] .structure-expression-handle {
|
|
1731
|
+
border-color: var(--bg-primary) !important;
|
|
3378
1732
|
}
|
|
3379
1733
|
|
|
3380
|
-
|
|
3381
|
-
|
|
1734
|
+
/* Branch handles positioned at node level */
|
|
1735
|
+
.structure-branch-handle {
|
|
1736
|
+
width: 10px !important;
|
|
1737
|
+
height: 10px !important;
|
|
1738
|
+
border: 2px solid white !important;
|
|
1739
|
+
min-width: 10px;
|
|
1740
|
+
min-height: 10px;
|
|
1741
|
+
position: absolute !important;
|
|
1742
|
+
transform: translateY(-50%) !important;
|
|
3382
1743
|
}
|
|
3383
1744
|
|
|
3384
|
-
.
|
|
3385
|
-
|
|
3386
|
-
border-bottom: 1px solid var(--border-light);
|
|
3387
|
-
display: flex;
|
|
3388
|
-
align-items: center;
|
|
3389
|
-
gap: 8px;
|
|
3390
|
-
position: relative;
|
|
1745
|
+
.logic-editor[data-theme="dark"] .structure-branch-handle {
|
|
1746
|
+
border-color: var(--bg-primary) !important;
|
|
3391
1747
|
}
|
|
3392
1748
|
|
|
3393
|
-
/*
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
right: -5px;
|
|
3397
|
-
top: 50%;
|
|
3398
|
-
transform: translateY(-50%);
|
|
3399
|
-
}
|
|
1749
|
+
/* ============================================
|
|
1750
|
+
ReactFlow Handle Styles
|
|
1751
|
+
============================================ */
|
|
3400
1752
|
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
1753
|
+
.react-flow__handle {
|
|
1754
|
+
width: 10px;
|
|
1755
|
+
height: 10px;
|
|
1756
|
+
border: 2px solid white;
|
|
3404
1757
|
}
|
|
3405
1758
|
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
top: 70%;
|
|
1759
|
+
.logic-editor[data-theme="dark"] .react-flow__handle {
|
|
1760
|
+
border-color: var(--bg-primary);
|
|
3409
1761
|
}
|
|
3410
1762
|
|
|
3411
|
-
.
|
|
3412
|
-
|
|
1763
|
+
.react-flow__handle-top {
|
|
1764
|
+
top: -6px;
|
|
3413
1765
|
}
|
|
3414
1766
|
|
|
3415
|
-
.
|
|
3416
|
-
|
|
1767
|
+
.react-flow__handle-bottom {
|
|
1768
|
+
bottom: -6px;
|
|
3417
1769
|
}
|
|
3418
1770
|
|
|
3419
|
-
.
|
|
3420
|
-
|
|
3421
|
-
flex-shrink: 0;
|
|
1771
|
+
.react-flow__handle-right {
|
|
1772
|
+
right: -6px;
|
|
3422
1773
|
}
|
|
3423
1774
|
|
|
3424
|
-
.
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
flex-shrink: 0;
|
|
1775
|
+
.react-flow__handle-left {
|
|
1776
|
+
left: -6px;
|
|
1777
|
+
top: 50% !important;
|
|
1778
|
+
transform: translateY(-50%) !important;
|
|
3429
1779
|
}
|
|
3430
1780
|
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
word-break: break-word;
|
|
1781
|
+
/* Ensure left handles are centered on simple nodes */
|
|
1782
|
+
.literal-node .react-flow__handle-left {
|
|
1783
|
+
top: 50% !important;
|
|
1784
|
+
transform: translateY(-50%) !important;
|
|
3436
1785
|
}
|
|
3437
1786
|
|
|
3438
|
-
/*
|
|
3439
|
-
.
|
|
3440
|
-
|
|
3441
|
-
background: var(--bg-tertiary);
|
|
3442
|
-
padding: 2px 6px;
|
|
3443
|
-
border-radius: 3px;
|
|
3444
|
-
border-left: 2px solid #94a3b8;
|
|
1787
|
+
/* Edge styles */
|
|
1788
|
+
.react-flow__edge-path {
|
|
1789
|
+
stroke-width: 2;
|
|
3445
1790
|
}
|
|
3446
1791
|
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
1792
|
+
/* Custom edge styles for decision branches */
|
|
1793
|
+
.react-flow__edge.yes-edge .react-flow__edge-path {
|
|
1794
|
+
stroke: #22C55E;
|
|
3450
1795
|
}
|
|
3451
1796
|
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
display: flex;
|
|
3455
|
-
align-items: center;
|
|
3456
|
-
gap: 4px;
|
|
3457
|
-
margin-left: auto;
|
|
1797
|
+
.react-flow__edge.no-edge .react-flow__edge-path {
|
|
1798
|
+
stroke: #EF4444;
|
|
3458
1799
|
}
|
|
3459
1800
|
|
|
3460
|
-
/*
|
|
1801
|
+
/* ============================================
|
|
1802
|
+
Result Badge Styles
|
|
1803
|
+
============================================ */
|
|
1804
|
+
|
|
3461
1805
|
.result-badge {
|
|
3462
1806
|
display: inline-flex;
|
|
3463
1807
|
align-items: center;
|
|
@@ -3564,8 +1908,8 @@ svg.react-flow__connectionline {
|
|
|
3564
1908
|
border: 1px solid #c7d2fe;
|
|
3565
1909
|
}
|
|
3566
1910
|
|
|
3567
|
-
[data-theme="dark"] .result-badge.array,
|
|
3568
|
-
[data-theme="dark"] .result-badge.object {
|
|
1911
|
+
.logic-editor[data-theme="dark"] .result-badge.array,
|
|
1912
|
+
.logic-editor[data-theme="dark"] .result-badge.object {
|
|
3569
1913
|
background: #312e81;
|
|
3570
1914
|
color: #a5b4fc;
|
|
3571
1915
|
border-color: #4338ca;
|
|
@@ -3607,7 +1951,10 @@ svg.react-flow__connectionline {
|
|
|
3607
1951
|
flex-shrink: 0;
|
|
3608
1952
|
}
|
|
3609
1953
|
|
|
3610
|
-
/*
|
|
1954
|
+
/* ============================================
|
|
1955
|
+
Expression Syntax Highlighting
|
|
1956
|
+
============================================ */
|
|
1957
|
+
|
|
3611
1958
|
.expr-operator {
|
|
3612
1959
|
color: #cf222e;
|
|
3613
1960
|
font-weight: 600;
|
|
@@ -3666,136 +2013,58 @@ svg.react-flow__connectionline {
|
|
|
3666
2013
|
}
|
|
3667
2014
|
|
|
3668
2015
|
/* Dark mode expression syntax */
|
|
3669
|
-
[data-theme="dark"] .expr-operator {
|
|
2016
|
+
.logic-editor[data-theme="dark"] .expr-operator {
|
|
3670
2017
|
color: #ff7b72;
|
|
3671
2018
|
}
|
|
3672
2019
|
|
|
3673
|
-
[data-theme="dark"] .expr-keyword {
|
|
2020
|
+
.logic-editor[data-theme="dark"] .expr-keyword {
|
|
3674
2021
|
color: #d2a8ff;
|
|
3675
2022
|
}
|
|
3676
2023
|
|
|
3677
|
-
[data-theme="dark"] .expr-comparison {
|
|
2024
|
+
.logic-editor[data-theme="dark"] .expr-comparison {
|
|
3678
2025
|
color: #79c0ff;
|
|
3679
2026
|
}
|
|
3680
2027
|
|
|
3681
|
-
[data-theme="dark"] .expr-arithmetic {
|
|
2028
|
+
.logic-editor[data-theme="dark"] .expr-arithmetic {
|
|
3682
2029
|
color: #79c0ff;
|
|
3683
2030
|
}
|
|
3684
2031
|
|
|
3685
|
-
[data-theme="dark"] .expr-unary {
|
|
2032
|
+
.logic-editor[data-theme="dark"] .expr-unary {
|
|
3686
2033
|
color: #ff7b72;
|
|
3687
2034
|
}
|
|
3688
2035
|
|
|
3689
|
-
[data-theme="dark"] .expr-function {
|
|
2036
|
+
.logic-editor[data-theme="dark"] .expr-function {
|
|
3690
2037
|
color: #d2a8ff;
|
|
3691
2038
|
}
|
|
3692
2039
|
|
|
3693
|
-
[data-theme="dark"] .expr-string {
|
|
2040
|
+
.logic-editor[data-theme="dark"] .expr-string {
|
|
3694
2041
|
color: #a5d6ff;
|
|
3695
2042
|
}
|
|
3696
2043
|
|
|
3697
|
-
[data-theme="dark"] .expr-number {
|
|
2044
|
+
.logic-editor[data-theme="dark"] .expr-number {
|
|
3698
2045
|
color: #79c0ff;
|
|
3699
2046
|
}
|
|
3700
2047
|
|
|
3701
|
-
[data-theme="dark"] .expr-boolean {
|
|
2048
|
+
.logic-editor[data-theme="dark"] .expr-boolean {
|
|
3702
2049
|
color: #ff7b72;
|
|
3703
2050
|
}
|
|
3704
2051
|
|
|
3705
|
-
[data-theme="dark"] .expr-null {
|
|
2052
|
+
.logic-editor[data-theme="dark"] .expr-null {
|
|
3706
2053
|
color: #8b949e;
|
|
3707
2054
|
}
|
|
3708
2055
|
|
|
3709
|
-
[data-theme="dark"] .expr-variable {
|
|
2056
|
+
.logic-editor[data-theme="dark"] .expr-variable {
|
|
3710
2057
|
color: #ffa657;
|
|
3711
2058
|
}
|
|
3712
2059
|
|
|
3713
|
-
[data-theme="dark"] .expr-bracket {
|
|
2060
|
+
.logic-editor[data-theme="dark"] .expr-bracket {
|
|
3714
2061
|
color: #c9d1d9;
|
|
3715
2062
|
}
|
|
3716
2063
|
|
|
3717
|
-
[data-theme="dark"] .expr-punctuation {
|
|
2064
|
+
.logic-editor[data-theme="dark"] .expr-punctuation {
|
|
3718
2065
|
color: #c9d1d9;
|
|
3719
2066
|
}
|
|
3720
2067
|
|
|
3721
|
-
/* ============================================
|
|
3722
|
-
Debugger State Styles
|
|
3723
|
-
============================================ */
|
|
3724
|
-
|
|
3725
|
-
/* CSS Variables for debug colors */
|
|
3726
|
-
:root {
|
|
3727
|
-
--debug-current-color: #F59E0B;
|
|
3728
|
-
--debug-current-glow: rgba(245, 158, 11, 0.4);
|
|
3729
|
-
--debug-executed-color: #10B981;
|
|
3730
|
-
--debug-executed-border: rgba(16, 185, 129, 0.6);
|
|
3731
|
-
--debug-pending-opacity: 0.5;
|
|
3732
|
-
}
|
|
3733
|
-
|
|
3734
|
-
[data-theme="dark"] {
|
|
3735
|
-
--debug-current-glow: rgba(245, 158, 11, 0.5);
|
|
3736
|
-
--debug-executed-border: rgba(16, 185, 129, 0.8);
|
|
3737
|
-
}
|
|
3738
|
-
|
|
3739
|
-
/* Current step - pulsing highlight */
|
|
3740
|
-
.logic-node.debug-current,
|
|
3741
|
-
.operator-node.debug-current,
|
|
3742
|
-
.variable-node.debug-current,
|
|
3743
|
-
.literal-node.debug-current,
|
|
3744
|
-
.vertical-cell-node.debug-current,
|
|
3745
|
-
.decision-node.debug-current {
|
|
3746
|
-
box-shadow: 0 0 0 3px var(--debug-current-color),
|
|
3747
|
-
0 0 20px var(--debug-current-glow) !important;
|
|
3748
|
-
animation: debug-pulse 1.5s ease-in-out infinite;
|
|
3749
|
-
}
|
|
3750
|
-
|
|
3751
|
-
/* Ensure debug-current node wrapper is above all other nodes */
|
|
3752
|
-
.react-flow__node:has(.debug-current) {
|
|
3753
|
-
z-index: 1000 !important;
|
|
3754
|
-
}
|
|
3755
|
-
|
|
3756
|
-
@keyframes debug-pulse {
|
|
3757
|
-
0%, 100% {
|
|
3758
|
-
box-shadow: 0 0 0 3px var(--debug-current-color),
|
|
3759
|
-
0 0 15px var(--debug-current-glow);
|
|
3760
|
-
}
|
|
3761
|
-
50% {
|
|
3762
|
-
box-shadow: 0 0 0 5px var(--debug-current-color),
|
|
3763
|
-
0 0 25px var(--debug-current-glow);
|
|
3764
|
-
}
|
|
3765
|
-
}
|
|
3766
|
-
|
|
3767
|
-
/* Executed nodes - path trail with green border */
|
|
3768
|
-
.logic-node.debug-executed,
|
|
3769
|
-
.operator-node.debug-executed,
|
|
3770
|
-
.variable-node.debug-executed,
|
|
3771
|
-
.literal-node.debug-executed,
|
|
3772
|
-
.vertical-cell-node.debug-executed,
|
|
3773
|
-
.decision-node.debug-executed {
|
|
3774
|
-
border-color: var(--debug-executed-color) !important;
|
|
3775
|
-
box-shadow: 0 0 0 1px var(--debug-executed-border);
|
|
3776
|
-
}
|
|
3777
|
-
|
|
3778
|
-
/* Pending nodes - slightly faded */
|
|
3779
|
-
.logic-node.debug-pending,
|
|
3780
|
-
.operator-node.debug-pending,
|
|
3781
|
-
.variable-node.debug-pending,
|
|
3782
|
-
.literal-node.debug-pending,
|
|
3783
|
-
.vertical-cell-node.debug-pending,
|
|
3784
|
-
.decision-node.debug-pending {
|
|
3785
|
-
opacity: var(--debug-pending-opacity);
|
|
3786
|
-
}
|
|
3787
|
-
|
|
3788
|
-
/* On path - ancestors of current node (but not current itself) */
|
|
3789
|
-
.logic-node.debug-on-path,
|
|
3790
|
-
.operator-node.debug-on-path,
|
|
3791
|
-
.variable-node.debug-on-path,
|
|
3792
|
-
.literal-node.debug-on-path,
|
|
3793
|
-
.vertical-cell-node.debug-on-path,
|
|
3794
|
-
.decision-node.debug-on-path {
|
|
3795
|
-
border-color: var(--debug-current-color) !important;
|
|
3796
|
-
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
|
|
3797
|
-
}
|
|
3798
|
-
|
|
3799
2068
|
/* ============================================
|
|
3800
2069
|
Debug Info Bubble Styles
|
|
3801
2070
|
============================================ */
|
|
@@ -3835,7 +2104,7 @@ svg.react-flow__connectionline {
|
|
|
3835
2104
|
margin-top: 8px;
|
|
3836
2105
|
}
|
|
3837
2106
|
|
|
3838
|
-
/* Arrow indicator
|
|
2107
|
+
/* Arrow indicator */
|
|
3839
2108
|
.debug-info-bubble.debug-info-top::after {
|
|
3840
2109
|
content: '';
|
|
3841
2110
|
position: absolute;
|
|
@@ -3871,12 +2140,30 @@ svg.react-flow__connectionline {
|
|
|
3871
2140
|
|
|
3872
2141
|
.debug-info-bubble.error {
|
|
3873
2142
|
background: var(--debug-popover-error-bg);
|
|
2143
|
+
border: 1px solid var(--debug-error-color);
|
|
3874
2144
|
}
|
|
3875
2145
|
|
|
3876
|
-
.debug-info-bubble.error::after {
|
|
2146
|
+
.debug-info-bubble.error.debug-info-top::after {
|
|
3877
2147
|
border-top-color: var(--debug-popover-error-bg);
|
|
3878
2148
|
}
|
|
3879
2149
|
|
|
2150
|
+
.debug-info-bubble.error.debug-info-right::after {
|
|
2151
|
+
border-right-color: var(--debug-popover-error-bg);
|
|
2152
|
+
}
|
|
2153
|
+
|
|
2154
|
+
.debug-info-bubble.error.debug-info-bottom::after {
|
|
2155
|
+
border-bottom-color: var(--debug-popover-error-bg);
|
|
2156
|
+
}
|
|
2157
|
+
|
|
2158
|
+
.debug-info-bubble.error .debug-info-label {
|
|
2159
|
+
color: var(--debug-error-color);
|
|
2160
|
+
}
|
|
2161
|
+
|
|
2162
|
+
.debug-info-bubble.error .debug-info-value.debug-info-error {
|
|
2163
|
+
background: rgba(239, 68, 68, 0.1);
|
|
2164
|
+
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
2165
|
+
}
|
|
2166
|
+
|
|
3880
2167
|
.debug-info-iteration {
|
|
3881
2168
|
font-size: 10px;
|
|
3882
2169
|
font-weight: 600;
|
|
@@ -3948,7 +2235,7 @@ svg.react-flow__connectionline {
|
|
|
3948
2235
|
gap: 4px;
|
|
3949
2236
|
}
|
|
3950
2237
|
|
|
3951
|
-
/* Color-coded value classes
|
|
2238
|
+
/* Color-coded value classes */
|
|
3952
2239
|
.debug-value-boolean-true {
|
|
3953
2240
|
color: var(--debug-value-true);
|
|
3954
2241
|
}
|
|
@@ -4009,142 +2296,6 @@ svg.react-flow__connectionline {
|
|
|
4009
2296
|
.json-syntax-punctuation {
|
|
4010
2297
|
color: var(--syntax-punctuation);
|
|
4011
2298
|
}
|
|
4012
|
-
|
|
4013
|
-
/* ============================================
|
|
4014
|
-
Structure Node Styles
|
|
4015
|
-
============================================ */
|
|
4016
|
-
|
|
4017
|
-
.structure-node {
|
|
4018
|
-
background: var(--node-bg) !important;
|
|
4019
|
-
border-radius: 8px;
|
|
4020
|
-
border: 2px solid;
|
|
4021
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
4022
|
-
font-size: 13px;
|
|
4023
|
-
width: fit-content;
|
|
4024
|
-
box-sizing: border-box;
|
|
4025
|
-
box-shadow: 0 2px 6px var(--node-shadow);
|
|
4026
|
-
transition: box-shadow 0.2s, transform 0.1s;
|
|
4027
|
-
min-width: 150px;
|
|
4028
|
-
max-width: 350px;
|
|
4029
|
-
position: relative;
|
|
4030
|
-
}
|
|
4031
|
-
|
|
4032
|
-
.structure-node:hover {
|
|
4033
|
-
box-shadow: 0 4px 12px var(--node-shadow-hover);
|
|
4034
|
-
}
|
|
4035
|
-
|
|
4036
|
-
.structure-node.selected {
|
|
4037
|
-
box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
|
|
4038
|
-
}
|
|
4039
|
-
|
|
4040
|
-
.structure-node-header {
|
|
4041
|
-
padding: 6px 12px;
|
|
4042
|
-
border-radius: 6px 6px 0 0;
|
|
4043
|
-
color: white;
|
|
4044
|
-
display: flex;
|
|
4045
|
-
align-items: center;
|
|
4046
|
-
gap: 8px;
|
|
4047
|
-
height: 32px;
|
|
4048
|
-
box-sizing: border-box;
|
|
4049
|
-
}
|
|
4050
|
-
|
|
4051
|
-
.structure-node-icon {
|
|
4052
|
-
font-size: 14px;
|
|
4053
|
-
display: flex;
|
|
4054
|
-
align-items: center;
|
|
4055
|
-
}
|
|
4056
|
-
|
|
4057
|
-
.structure-node-label {
|
|
4058
|
-
font-weight: 600;
|
|
4059
|
-
font-size: 14px;
|
|
4060
|
-
letter-spacing: 0.5px;
|
|
4061
|
-
flex: 1;
|
|
4062
|
-
}
|
|
4063
|
-
|
|
4064
|
-
.structure-node-body {
|
|
4065
|
-
padding: 8px 12px;
|
|
4066
|
-
padding-right: 24px;
|
|
4067
|
-
font-family: 'SF Mono', 'Consolas', monospace;
|
|
4068
|
-
font-size: 12px;
|
|
4069
|
-
white-space: pre;
|
|
4070
|
-
line-height: 18px;
|
|
4071
|
-
overflow-x: auto;
|
|
4072
|
-
max-width: 100%;
|
|
4073
|
-
}
|
|
4074
|
-
|
|
4075
|
-
.structure-node.collapsed .structure-node-body {
|
|
4076
|
-
white-space: normal;
|
|
4077
|
-
}
|
|
4078
|
-
|
|
4079
|
-
/* Expression marker - clickable link to expression node */
|
|
4080
|
-
.structure-expression-marker {
|
|
4081
|
-
display: inline-flex;
|
|
4082
|
-
align-items: center;
|
|
4083
|
-
background: var(--accent-blue-light);
|
|
4084
|
-
color: var(--accent-blue);
|
|
4085
|
-
padding: 1px 6px;
|
|
4086
|
-
border-radius: 3px;
|
|
4087
|
-
font-size: 11px;
|
|
4088
|
-
font-weight: 500;
|
|
4089
|
-
position: relative;
|
|
4090
|
-
}
|
|
4091
|
-
|
|
4092
|
-
.structure-expression-marker:hover {
|
|
4093
|
-
background: var(--accent-blue);
|
|
4094
|
-
color: white;
|
|
4095
|
-
}
|
|
4096
|
-
|
|
4097
|
-
.structure-expression-label {
|
|
4098
|
-
margin-right: 4px;
|
|
4099
|
-
}
|
|
4100
|
-
|
|
4101
|
-
.structure-expression-handle {
|
|
4102
|
-
width: 8px !important;
|
|
4103
|
-
height: 8px !important;
|
|
4104
|
-
border: 2px solid white !important;
|
|
4105
|
-
min-width: 8px;
|
|
4106
|
-
min-height: 8px;
|
|
4107
|
-
}
|
|
4108
|
-
|
|
4109
|
-
[data-theme="dark"] .structure-expression-handle {
|
|
4110
|
-
border-color: var(--bg-primary) !important;
|
|
4111
|
-
}
|
|
4112
|
-
|
|
4113
|
-
/* Branch handles positioned at node level */
|
|
4114
|
-
.structure-branch-handle {
|
|
4115
|
-
width: 10px !important;
|
|
4116
|
-
height: 10px !important;
|
|
4117
|
-
border: 2px solid white !important;
|
|
4118
|
-
min-width: 10px;
|
|
4119
|
-
min-height: 10px;
|
|
4120
|
-
position: absolute !important;
|
|
4121
|
-
transform: translateY(-50%) !important;
|
|
4122
|
-
}
|
|
4123
|
-
|
|
4124
|
-
[data-theme="dark"] .structure-branch-handle {
|
|
4125
|
-
border-color: var(--bg-primary) !important;
|
|
4126
|
-
}
|
|
4127
|
-
|
|
4128
|
-
/* Debug states for structure node */
|
|
4129
|
-
.structure-node.debug-current {
|
|
4130
|
-
box-shadow: 0 0 0 3px var(--debug-current-color),
|
|
4131
|
-
0 0 20px var(--debug-current-glow) !important;
|
|
4132
|
-
animation: debug-pulse 1.5s ease-in-out infinite;
|
|
4133
|
-
}
|
|
4134
|
-
|
|
4135
|
-
.structure-node.debug-executed {
|
|
4136
|
-
border-color: var(--debug-executed-color) !important;
|
|
4137
|
-
box-shadow: 0 0 0 1px var(--debug-executed-border);
|
|
4138
|
-
}
|
|
4139
|
-
|
|
4140
|
-
.structure-node.debug-pending {
|
|
4141
|
-
opacity: var(--debug-pending-opacity);
|
|
4142
|
-
}
|
|
4143
|
-
|
|
4144
|
-
.structure-node.debug-on-path {
|
|
4145
|
-
border-color: var(--debug-current-color) !important;
|
|
4146
|
-
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
|
|
4147
|
-
}
|
|
4148
2299
|
.logic-editor {
|
|
4149
2300
|
width: 100%;
|
|
4150
2301
|
height: 100%;
|
|
@@ -4190,7 +2341,7 @@ svg.react-flow__connectionline {
|
|
|
4190
2341
|
display: none;
|
|
4191
2342
|
}
|
|
4192
2343
|
|
|
4193
|
-
[data-theme="dark"] .logic-editor-toolbar {
|
|
2344
|
+
.logic-editor[data-theme="dark"] .logic-editor-toolbar {
|
|
4194
2345
|
background: var(--bg-secondary, #1e1e1e);
|
|
4195
2346
|
border-bottom-color: var(--border-color, #3e3e3e);
|
|
4196
2347
|
}
|
|
@@ -4199,7 +2350,7 @@ svg.react-flow__connectionline {
|
|
|
4199
2350
|
flex: 1;
|
|
4200
2351
|
}
|
|
4201
2352
|
|
|
4202
|
-
.logic-editor-toolbar .preserve-structure-toggle {
|
|
2353
|
+
.logic-editor-toolbar .dl-preserve-structure-toggle {
|
|
4203
2354
|
display: flex;
|
|
4204
2355
|
align-items: center;
|
|
4205
2356
|
gap: 6px;
|
|
@@ -4211,13 +2362,13 @@ svg.react-flow__connectionline {
|
|
|
4211
2362
|
flex-shrink: 0;
|
|
4212
2363
|
}
|
|
4213
2364
|
|
|
4214
|
-
.logic-editor-toolbar .preserve-structure-toggle input[type="checkbox"] {
|
|
2365
|
+
.logic-editor-toolbar .dl-preserve-structure-toggle input[type="checkbox"] {
|
|
4215
2366
|
margin: 0;
|
|
4216
2367
|
cursor: pointer;
|
|
4217
2368
|
}
|
|
4218
2369
|
|
|
4219
2370
|
/* Shared toolbar button style (undo/redo, etc.) */
|
|
4220
|
-
.toolbar-btn {
|
|
2371
|
+
.dl-toolbar-btn {
|
|
4221
2372
|
display: flex;
|
|
4222
2373
|
align-items: center;
|
|
4223
2374
|
justify-content: center;
|
|
@@ -4233,21 +2384,21 @@ svg.react-flow__connectionline {
|
|
|
4233
2384
|
flex-shrink: 0;
|
|
4234
2385
|
}
|
|
4235
2386
|
|
|
4236
|
-
.toolbar-btn:hover:not(:disabled) {
|
|
2387
|
+
.dl-toolbar-btn:hover:not(:disabled) {
|
|
4237
2388
|
background: var(--bg-hover, #f0f0f0);
|
|
4238
2389
|
color: var(--text-primary, #1a1a1a);
|
|
4239
2390
|
}
|
|
4240
2391
|
|
|
4241
|
-
.toolbar-btn:disabled {
|
|
2392
|
+
.dl-toolbar-btn:disabled {
|
|
4242
2393
|
opacity: 0.35;
|
|
4243
2394
|
cursor: not-allowed;
|
|
4244
2395
|
}
|
|
4245
2396
|
|
|
4246
|
-
[data-theme="dark"] .toolbar-btn {
|
|
2397
|
+
.logic-editor[data-theme="dark"] .dl-toolbar-btn {
|
|
4247
2398
|
color: var(--text-secondary, #aaa);
|
|
4248
2399
|
}
|
|
4249
2400
|
|
|
4250
|
-
[data-theme="dark"] .toolbar-btn:hover:not(:disabled) {
|
|
2401
|
+
.logic-editor[data-theme="dark"] .dl-toolbar-btn:hover:not(:disabled) {
|
|
4251
2402
|
background: var(--bg-hover, #3e3e3e);
|
|
4252
2403
|
color: var(--text-primary, #e0e0e0);
|
|
4253
2404
|
}
|
|
@@ -4317,12 +2468,12 @@ svg.react-flow__connectionline {
|
|
|
4317
2468
|
}
|
|
4318
2469
|
|
|
4319
2470
|
/* Dark mode edge colors */
|
|
4320
|
-
[data-theme="dark"] .logic-editor .react-flow__edge-path {
|
|
2471
|
+
.logic-editor[data-theme="dark"] .logic-editor .react-flow__edge-path {
|
|
4321
2472
|
stroke: #6b7280;
|
|
4322
2473
|
}
|
|
4323
2474
|
|
|
4324
2475
|
/* Background pattern for dark mode */
|
|
4325
|
-
[data-theme="dark"] .logic-editor .react-flow__background {
|
|
2476
|
+
.logic-editor[data-theme="dark"] .logic-editor .react-flow__background {
|
|
4326
2477
|
background: var(--bg-tertiary);
|
|
4327
2478
|
}
|
|
4328
2479
|
|
|
@@ -4342,28 +2493,28 @@ svg.react-flow__connectionline {
|
|
|
4342
2493
|
flex: 0 0 4px;
|
|
4343
2494
|
}
|
|
4344
2495
|
|
|
4345
|
-
.toolbar-btn {
|
|
2496
|
+
.dl-toolbar-btn {
|
|
4346
2497
|
width: 40px;
|
|
4347
2498
|
height: 40px;
|
|
4348
2499
|
}
|
|
4349
2500
|
|
|
4350
|
-
.preserve-structure-toggle span {
|
|
2501
|
+
.dl-preserve-structure-toggle span {
|
|
4351
2502
|
font-size: 11px;
|
|
4352
2503
|
}
|
|
4353
2504
|
|
|
4354
|
-
.context-menu-item {
|
|
2505
|
+
.dl-context-menu-item {
|
|
4355
2506
|
min-height: 44px;
|
|
4356
2507
|
padding: 10px 12px;
|
|
4357
2508
|
}
|
|
4358
2509
|
}
|
|
4359
2510
|
|
|
4360
|
-
/* (Undo/Redo now uses .toolbar-btn inline in toolbar) */
|
|
2511
|
+
/* (Undo/Redo now uses .dl-toolbar-btn inline in toolbar) */
|
|
4361
2512
|
|
|
4362
2513
|
/* ============================================================================
|
|
4363
2514
|
Add Argument Button (shared by OperatorNode and VerticalCellNode)
|
|
4364
2515
|
============================================================================ */
|
|
4365
2516
|
|
|
4366
|
-
.add-arg-button {
|
|
2517
|
+
.dl-add-arg-button {
|
|
4367
2518
|
display: flex;
|
|
4368
2519
|
align-items: center;
|
|
4369
2520
|
justify-content: center;
|
|
@@ -4381,71 +2532,30 @@ svg.react-flow__connectionline {
|
|
|
4381
2532
|
transition: all 0.15s ease;
|
|
4382
2533
|
}
|
|
4383
2534
|
|
|
4384
|
-
.add-arg-button:hover {
|
|
2535
|
+
.dl-add-arg-button:hover {
|
|
4385
2536
|
background: var(--color-primary, #2563eb);
|
|
4386
2537
|
color: white;
|
|
4387
2538
|
border-style: solid;
|
|
4388
2539
|
opacity: 1;
|
|
4389
2540
|
}
|
|
4390
2541
|
|
|
4391
|
-
.add-arg-button-label {
|
|
2542
|
+
.dl-add-arg-button-label {
|
|
4392
2543
|
font-weight: 500;
|
|
4393
2544
|
white-space: nowrap;
|
|
4394
2545
|
}
|
|
4395
2546
|
|
|
4396
2547
|
/* Vertical cell variant - full width */
|
|
4397
|
-
.add-arg-button--vertical {
|
|
2548
|
+
.dl-add-arg-button--vertical {
|
|
4398
2549
|
width: calc(100% - 16px);
|
|
4399
2550
|
}
|
|
4400
2551
|
|
|
4401
2552
|
/* Dark mode */
|
|
4402
|
-
[data-theme="dark"] .add-arg-button {
|
|
4403
|
-
border-color: var(--color-primary, #60a5fa);
|
|
4404
|
-
color: var(--color-primary, #60a5fa);
|
|
4405
|
-
}
|
|
4406
|
-
|
|
4407
|
-
[data-theme="dark"] .add-arg-button:hover {
|
|
4408
|
-
background: var(--color-primary, #60a5fa);
|
|
4409
|
-
color: var(--bg-primary, #121212);
|
|
4410
|
-
}
|
|
4411
|
-
|
|
4412
|
-
/* Legacy placeholder - kept for compatibility but using new .add-arg-button is preferred */
|
|
4413
|
-
.operator-arg-placeholder {
|
|
4414
|
-
position: absolute;
|
|
4415
|
-
right: -4px;
|
|
4416
|
-
transform: translateY(-50%);
|
|
4417
|
-
width: 16px;
|
|
4418
|
-
height: 16px;
|
|
4419
|
-
padding: 0;
|
|
4420
|
-
display: flex;
|
|
4421
|
-
align-items: center;
|
|
4422
|
-
justify-content: center;
|
|
4423
|
-
border: 1.5px dashed var(--color-primary, #2563eb);
|
|
4424
|
-
border-radius: 50%;
|
|
4425
|
-
background: var(--bg-primary, #fff);
|
|
4426
|
-
color: var(--color-primary, #2563eb);
|
|
4427
|
-
cursor: pointer;
|
|
4428
|
-
opacity: 0.7;
|
|
4429
|
-
transition: all 0.15s ease;
|
|
4430
|
-
z-index: 10;
|
|
4431
|
-
}
|
|
4432
|
-
|
|
4433
|
-
.operator-arg-placeholder:hover {
|
|
4434
|
-
opacity: 1;
|
|
4435
|
-
background: var(--color-primary, #2563eb);
|
|
4436
|
-
color: white;
|
|
4437
|
-
border-style: solid;
|
|
4438
|
-
transform: translateY(-50%) scale(1.1);
|
|
4439
|
-
}
|
|
4440
|
-
|
|
4441
|
-
/* Dark mode */
|
|
4442
|
-
[data-theme="dark"] .operator-arg-placeholder {
|
|
4443
|
-
background: var(--bg-secondary, #1e1e1e);
|
|
2553
|
+
.logic-editor[data-theme="dark"] .dl-add-arg-button {
|
|
4444
2554
|
border-color: var(--color-primary, #60a5fa);
|
|
4445
2555
|
color: var(--color-primary, #60a5fa);
|
|
4446
2556
|
}
|
|
4447
2557
|
|
|
4448
|
-
[data-theme="dark"] .
|
|
2558
|
+
.logic-editor[data-theme="dark"] .dl-add-arg-button:hover {
|
|
4449
2559
|
background: var(--color-primary, #60a5fa);
|
|
4450
2560
|
color: var(--bg-primary, #121212);
|
|
4451
2561
|
}
|
|
@@ -4454,7 +2564,7 @@ svg.react-flow__connectionline {
|
|
|
4454
2564
|
Context Menu
|
|
4455
2565
|
============================================================================ */
|
|
4456
2566
|
|
|
4457
|
-
.context-menu {
|
|
2567
|
+
.dl-context-menu {
|
|
4458
2568
|
position: fixed;
|
|
4459
2569
|
z-index: 1000;
|
|
4460
2570
|
min-width: 180px;
|
|
@@ -4468,13 +2578,13 @@ svg.react-flow__connectionline {
|
|
|
4468
2578
|
outline: none;
|
|
4469
2579
|
}
|
|
4470
2580
|
|
|
4471
|
-
[data-theme="dark"] .context-menu {
|
|
2581
|
+
.logic-editor[data-theme="dark"] .dl-context-menu {
|
|
4472
2582
|
background: var(--bg-secondary, #1e1e1e);
|
|
4473
2583
|
border-color: var(--border-color, #3e3e3e);
|
|
4474
2584
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
4475
2585
|
}
|
|
4476
2586
|
|
|
4477
|
-
.context-menu-item {
|
|
2587
|
+
.dl-context-menu-item {
|
|
4478
2588
|
display: flex;
|
|
4479
2589
|
align-items: center;
|
|
4480
2590
|
gap: 8px;
|
|
@@ -4490,31 +2600,31 @@ svg.react-flow__connectionline {
|
|
|
4490
2600
|
transition: background 0.1s;
|
|
4491
2601
|
}
|
|
4492
2602
|
|
|
4493
|
-
.context-menu-item:hover,
|
|
4494
|
-
.context-menu-item:focus {
|
|
2603
|
+
.dl-context-menu-item:hover,
|
|
2604
|
+
.dl-context-menu-item:focus {
|
|
4495
2605
|
background: var(--bg-hover, #f0f0f0);
|
|
4496
2606
|
outline: none;
|
|
4497
2607
|
}
|
|
4498
2608
|
|
|
4499
|
-
.context-menu-item:disabled {
|
|
2609
|
+
.dl-context-menu-item:disabled {
|
|
4500
2610
|
color: var(--text-muted, #999);
|
|
4501
2611
|
cursor: not-allowed;
|
|
4502
2612
|
}
|
|
4503
2613
|
|
|
4504
|
-
.context-menu-item:disabled:hover {
|
|
2614
|
+
.dl-context-menu-item:disabled:hover {
|
|
4505
2615
|
background: none;
|
|
4506
2616
|
}
|
|
4507
2617
|
|
|
4508
|
-
[data-theme="dark"] .context-menu-item {
|
|
2618
|
+
.logic-editor[data-theme="dark"] .dl-context-menu-item {
|
|
4509
2619
|
color: var(--text-primary, #e0e0e0);
|
|
4510
2620
|
}
|
|
4511
2621
|
|
|
4512
|
-
[data-theme="dark"] .context-menu-item:hover,
|
|
4513
|
-
[data-theme="dark"] .context-menu-item:focus {
|
|
2622
|
+
.logic-editor[data-theme="dark"] .dl-context-menu-item:hover,
|
|
2623
|
+
.logic-editor[data-theme="dark"] .dl-context-menu-item:focus {
|
|
4514
2624
|
background: var(--bg-hover, #3e3e3e);
|
|
4515
2625
|
}
|
|
4516
2626
|
|
|
4517
|
-
.context-menu-item-icon {
|
|
2627
|
+
.dl-context-menu-item-icon {
|
|
4518
2628
|
display: flex;
|
|
4519
2629
|
align-items: center;
|
|
4520
2630
|
justify-content: center;
|
|
@@ -4524,41 +2634,41 @@ svg.react-flow__connectionline {
|
|
|
4524
2634
|
color: var(--text-secondary, #666);
|
|
4525
2635
|
}
|
|
4526
2636
|
|
|
4527
|
-
[data-theme="dark"] .context-menu-item-icon {
|
|
2637
|
+
.logic-editor[data-theme="dark"] .dl-context-menu-item-icon {
|
|
4528
2638
|
color: var(--text-secondary, #aaa);
|
|
4529
2639
|
}
|
|
4530
2640
|
|
|
4531
|
-
.context-menu-item-label {
|
|
2641
|
+
.dl-context-menu-item-label {
|
|
4532
2642
|
flex: 1;
|
|
4533
2643
|
}
|
|
4534
2644
|
|
|
4535
|
-
.context-menu-item-shortcut {
|
|
2645
|
+
.dl-context-menu-item-shortcut {
|
|
4536
2646
|
font-size: 11px;
|
|
4537
2647
|
color: var(--text-muted, #999);
|
|
4538
2648
|
margin-left: auto;
|
|
4539
2649
|
padding-left: 16px;
|
|
4540
2650
|
}
|
|
4541
2651
|
|
|
4542
|
-
.context-menu-item-arrow {
|
|
2652
|
+
.dl-context-menu-item-arrow {
|
|
4543
2653
|
color: var(--text-muted, #999);
|
|
4544
2654
|
margin-left: auto;
|
|
4545
2655
|
}
|
|
4546
2656
|
|
|
4547
|
-
.context-menu-divider {
|
|
2657
|
+
.dl-context-menu-divider {
|
|
4548
2658
|
height: 1px;
|
|
4549
2659
|
background: var(--border-light, #e8e8e8);
|
|
4550
2660
|
margin: 4px 8px;
|
|
4551
2661
|
}
|
|
4552
2662
|
|
|
4553
|
-
[data-theme="dark"] .context-menu-divider {
|
|
2663
|
+
.logic-editor[data-theme="dark"] .dl-context-menu-divider {
|
|
4554
2664
|
background: var(--border-color, #3e3e3e);
|
|
4555
2665
|
}
|
|
4556
2666
|
|
|
4557
|
-
.context-menu-submenu {
|
|
2667
|
+
.dl-context-menu-submenu {
|
|
4558
2668
|
position: relative;
|
|
4559
2669
|
}
|
|
4560
2670
|
|
|
4561
|
-
.context-menu-submenu-content {
|
|
2671
|
+
.dl-context-menu-submenu-content {
|
|
4562
2672
|
position: absolute;
|
|
4563
2673
|
left: 100%;
|
|
4564
2674
|
top: -4px;
|
|
@@ -4566,19 +2676,19 @@ svg.react-flow__connectionline {
|
|
|
4566
2676
|
}
|
|
4567
2677
|
|
|
4568
2678
|
/* Danger variant for destructive actions */
|
|
4569
|
-
.context-menu-item--danger {
|
|
2679
|
+
.dl-context-menu-item--danger {
|
|
4570
2680
|
color: var(--color-error, #dc2626);
|
|
4571
2681
|
}
|
|
4572
2682
|
|
|
4573
|
-
.context-menu-item--danger .context-menu-item-icon {
|
|
2683
|
+
.dl-context-menu-item--danger .dl-context-menu-item-icon {
|
|
4574
2684
|
color: var(--color-error, #dc2626);
|
|
4575
2685
|
}
|
|
4576
2686
|
|
|
4577
|
-
.context-menu-item--danger:hover:not(:disabled) {
|
|
2687
|
+
.dl-context-menu-item--danger:hover:not(:disabled) {
|
|
4578
2688
|
background: rgba(220, 38, 38, 0.1);
|
|
4579
2689
|
}
|
|
4580
2690
|
|
|
4581
|
-
[data-theme="dark"] .context-menu-item--danger:hover:not(:disabled) {
|
|
2691
|
+
.logic-editor[data-theme="dark"] .dl-context-menu-item--danger:hover:not(:disabled) {
|
|
4582
2692
|
background: rgba(239, 68, 68, 0.15);
|
|
4583
2693
|
}
|
|
4584
2694
|
/* this gets exported as style.css and can be used for the default theming */
|
|
@@ -5252,23 +3362,23 @@ svg.react-flow__connectionline {
|
|
|
5252
3362
|
--df-function-validation: #bf8803;
|
|
5253
3363
|
--df-function-custom: #6e6e6e;
|
|
5254
3364
|
|
|
5255
|
-
/* DataLogic UI theme variables (for diagram visualizer) */
|
|
5256
|
-
--bg-primary: #
|
|
5257
|
-
--bg-secondary: #
|
|
5258
|
-
--bg-tertiary: #
|
|
5259
|
-
--bg-hover: #
|
|
5260
|
-
--text-primary: #
|
|
5261
|
-
--text-secondary: #
|
|
5262
|
-
--text-tertiary: #
|
|
5263
|
-
--text-muted: #
|
|
5264
|
-
--border-primary: #
|
|
5265
|
-
--border-light: #
|
|
3365
|
+
/* DataLogic UI theme variables (for diagram visualizer) - must match @goplasmatic/datalogic-ui :root */
|
|
3366
|
+
--bg-primary: #f5f5f5;
|
|
3367
|
+
--bg-secondary: #ffffff;
|
|
3368
|
+
--bg-tertiary: #fafafa;
|
|
3369
|
+
--bg-hover: #f0f0f0;
|
|
3370
|
+
--text-primary: #333333;
|
|
3371
|
+
--text-secondary: #555555;
|
|
3372
|
+
--text-tertiary: #666666;
|
|
3373
|
+
--text-muted: #999999;
|
|
3374
|
+
--border-primary: #e0e0e0;
|
|
3375
|
+
--border-light: #eeeeee;
|
|
5266
3376
|
--accent-blue: #3b82f6;
|
|
5267
3377
|
--accent-blue-hover: #2563eb;
|
|
5268
|
-
--accent-blue-light:
|
|
3378
|
+
--accent-blue-light: #dbeafe;
|
|
5269
3379
|
--accent-amber: #f59e0b;
|
|
5270
|
-
--node-shadow: rgba(0, 0, 0, 0.
|
|
5271
|
-
--node-shadow-hover: rgba(0, 0, 0, 0.
|
|
3380
|
+
--node-shadow: rgba(0, 0, 0, 0.1);
|
|
3381
|
+
--node-shadow-hover: rgba(0, 0, 0, 0.15);
|
|
5272
3382
|
--node-bg: #ffffff;
|
|
5273
3383
|
}
|
|
5274
3384
|
|
|
@@ -5309,24 +3419,24 @@ svg.react-flow__connectionline {
|
|
|
5309
3419
|
--df-function-validation: #dcdcaa;
|
|
5310
3420
|
--df-function-custom: #9d9d9d;
|
|
5311
3421
|
|
|
5312
|
-
/* DataLogic UI theme variables (for diagram visualizer) */
|
|
5313
|
-
--bg-primary: #
|
|
5314
|
-
--bg-secondary: #
|
|
5315
|
-
--bg-tertiary: #
|
|
5316
|
-
--bg-hover: #
|
|
5317
|
-
--text-primary: #
|
|
5318
|
-
--text-secondary: #
|
|
5319
|
-
--text-tertiary: #
|
|
5320
|
-
--text-muted: #
|
|
5321
|
-
--border-primary: #
|
|
5322
|
-
--border-light: #
|
|
5323
|
-
--accent-blue: #
|
|
5324
|
-
--accent-blue-hover: #
|
|
5325
|
-
--accent-blue-light:
|
|
5326
|
-
--accent-amber: #
|
|
5327
|
-
--node-shadow: rgba(0, 0, 0, 0.
|
|
5328
|
-
--node-shadow-hover: rgba(0, 0, 0, 0.
|
|
5329
|
-
--node-bg: #
|
|
3422
|
+
/* DataLogic UI theme variables (for diagram visualizer) - must match @goplasmatic/datalogic-ui [data-theme="dark"] */
|
|
3423
|
+
--bg-primary: #1a1a1a;
|
|
3424
|
+
--bg-secondary: #242424;
|
|
3425
|
+
--bg-tertiary: #2a2a2a;
|
|
3426
|
+
--bg-hover: #333333;
|
|
3427
|
+
--text-primary: #e5e5e5;
|
|
3428
|
+
--text-secondary: #cccccc;
|
|
3429
|
+
--text-tertiary: #b3b3b3;
|
|
3430
|
+
--text-muted: #888888;
|
|
3431
|
+
--border-primary: #404040;
|
|
3432
|
+
--border-light: #333333;
|
|
3433
|
+
--accent-blue: #60a5fa;
|
|
3434
|
+
--accent-blue-hover: #3b82f6;
|
|
3435
|
+
--accent-blue-light: #1e3a5f;
|
|
3436
|
+
--accent-amber: #fbbf24;
|
|
3437
|
+
--node-shadow: rgba(0, 0, 0, 0.3);
|
|
3438
|
+
--node-shadow-hover: rgba(0, 0, 0, 0.4);
|
|
3439
|
+
--node-bg: #2d2d2d;
|
|
5330
3440
|
}
|
|
5331
3441
|
|
|
5332
3442
|
/* Layout and core components */
|
|
@@ -8459,3 +6569,329 @@ svg.react-flow__connectionline {
|
|
|
8459
6569
|
.df-header-with-debug .df-visualizer-left-title {
|
|
8460
6570
|
flex-shrink: 0;
|
|
8461
6571
|
}
|
|
6572
|
+
|
|
6573
|
+
/* Flow diagram styles */
|
|
6574
|
+
|
|
6575
|
+
/* ============================================
|
|
6576
|
+
Flow Diagram Styles
|
|
6577
|
+
Aligned with DataLogic UI ReactFlow styling
|
|
6578
|
+
============================================ */
|
|
6579
|
+
|
|
6580
|
+
.df-flow-diagram {
|
|
6581
|
+
width: 100%;
|
|
6582
|
+
height: 100%;
|
|
6583
|
+
min-height: 300px;
|
|
6584
|
+
background: var(--bg-tertiary);
|
|
6585
|
+
border-radius: 8px;
|
|
6586
|
+
overflow: hidden;
|
|
6587
|
+
position: absolute;
|
|
6588
|
+
top: 0;
|
|
6589
|
+
left: 0;
|
|
6590
|
+
right: 0;
|
|
6591
|
+
bottom: 0;
|
|
6592
|
+
}
|
|
6593
|
+
|
|
6594
|
+
/* ---- ReactFlow Controls ---- */
|
|
6595
|
+
|
|
6596
|
+
.df-flow-diagram .react-flow__controls {
|
|
6597
|
+
box-shadow: 0 2px 8px var(--node-shadow);
|
|
6598
|
+
border-radius: 8px;
|
|
6599
|
+
overflow: hidden;
|
|
6600
|
+
}
|
|
6601
|
+
|
|
6602
|
+
.df-flow-diagram .react-flow__controls-button {
|
|
6603
|
+
background: var(--bg-secondary);
|
|
6604
|
+
border-bottom: 1px solid var(--border-light);
|
|
6605
|
+
fill: var(--text-secondary);
|
|
6606
|
+
color: var(--text-secondary);
|
|
6607
|
+
}
|
|
6608
|
+
|
|
6609
|
+
.df-flow-diagram .react-flow__controls-button:last-child {
|
|
6610
|
+
border-bottom: none;
|
|
6611
|
+
}
|
|
6612
|
+
|
|
6613
|
+
.df-flow-diagram .react-flow__controls-button:hover {
|
|
6614
|
+
background: var(--bg-hover);
|
|
6615
|
+
}
|
|
6616
|
+
|
|
6617
|
+
/* ---- Edges ---- */
|
|
6618
|
+
|
|
6619
|
+
.df-flow-diagram .react-flow__edge-path {
|
|
6620
|
+
stroke-width: 2;
|
|
6621
|
+
}
|
|
6622
|
+
|
|
6623
|
+
.df-flow-diagram .react-flow__edge.selected .react-flow__edge-path {
|
|
6624
|
+
stroke: var(--accent-blue);
|
|
6625
|
+
stroke-width: 3;
|
|
6626
|
+
}
|
|
6627
|
+
|
|
6628
|
+
.df-flow-diagram .react-flow__edge.df-flow-edge-true .react-flow__edge-path {
|
|
6629
|
+
stroke: #22C55E;
|
|
6630
|
+
stroke-width: 2;
|
|
6631
|
+
}
|
|
6632
|
+
|
|
6633
|
+
.df-flow-diagram .react-flow__edge.df-flow-edge-false .react-flow__edge-path {
|
|
6634
|
+
stroke: #EF4444;
|
|
6635
|
+
stroke-width: 2;
|
|
6636
|
+
stroke-dasharray: 6 3;
|
|
6637
|
+
}
|
|
6638
|
+
|
|
6639
|
+
.df-flow-diagram .react-flow__edge-text {
|
|
6640
|
+
font-size: 11px;
|
|
6641
|
+
fill: var(--text-secondary);
|
|
6642
|
+
}
|
|
6643
|
+
|
|
6644
|
+
.df-flow-diagram .react-flow__edge-textbg {
|
|
6645
|
+
fill: var(--bg-secondary);
|
|
6646
|
+
}
|
|
6647
|
+
|
|
6648
|
+
/* ---- Attribution ---- */
|
|
6649
|
+
|
|
6650
|
+
.df-flow-diagram .react-flow__attribution {
|
|
6651
|
+
display: none;
|
|
6652
|
+
}
|
|
6653
|
+
|
|
6654
|
+
/* ---- Handles - hidden but functional ---- */
|
|
6655
|
+
|
|
6656
|
+
.df-flow-handle {
|
|
6657
|
+
width: 10px !important;
|
|
6658
|
+
height: 10px !important;
|
|
6659
|
+
background: var(--border-primary) !important;
|
|
6660
|
+
border: 2px solid white !important;
|
|
6661
|
+
opacity: 1;
|
|
6662
|
+
}
|
|
6663
|
+
|
|
6664
|
+
[data-theme="dark"] .df-flow-handle {
|
|
6665
|
+
border-color: var(--bg-primary) !important;
|
|
6666
|
+
}
|
|
6667
|
+
|
|
6668
|
+
/* ---- Start/End Pill Node ---- */
|
|
6669
|
+
|
|
6670
|
+
.df-flow-pill {
|
|
6671
|
+
display: flex;
|
|
6672
|
+
align-items: center;
|
|
6673
|
+
justify-content: center;
|
|
6674
|
+
padding: 8px 20px;
|
|
6675
|
+
border-radius: 20px;
|
|
6676
|
+
font-size: 13px;
|
|
6677
|
+
font-weight: 500;
|
|
6678
|
+
cursor: default;
|
|
6679
|
+
user-select: none;
|
|
6680
|
+
min-width: 100px;
|
|
6681
|
+
}
|
|
6682
|
+
|
|
6683
|
+
.df-flow-pill-content {
|
|
6684
|
+
display: flex;
|
|
6685
|
+
align-items: center;
|
|
6686
|
+
gap: 6px;
|
|
6687
|
+
}
|
|
6688
|
+
|
|
6689
|
+
.df-flow-pill-start {
|
|
6690
|
+
background: var(--node-bg);
|
|
6691
|
+
border: 2px solid var(--accent-blue);
|
|
6692
|
+
color: var(--accent-blue);
|
|
6693
|
+
}
|
|
6694
|
+
|
|
6695
|
+
.df-flow-pill-end {
|
|
6696
|
+
background: var(--node-bg);
|
|
6697
|
+
border: 2px solid var(--df-success);
|
|
6698
|
+
color: var(--df-success);
|
|
6699
|
+
}
|
|
6700
|
+
|
|
6701
|
+
/* ---- Condition Diamond Node ---- */
|
|
6702
|
+
|
|
6703
|
+
.df-flow-diamond-wrapper {
|
|
6704
|
+
display: flex;
|
|
6705
|
+
align-items: center;
|
|
6706
|
+
justify-content: center;
|
|
6707
|
+
width: 80px;
|
|
6708
|
+
height: 80px;
|
|
6709
|
+
position: relative;
|
|
6710
|
+
}
|
|
6711
|
+
|
|
6712
|
+
.df-flow-diamond {
|
|
6713
|
+
width: 64px;
|
|
6714
|
+
height: 64px;
|
|
6715
|
+
background: var(--node-bg);
|
|
6716
|
+
border: 2px solid var(--accent-amber);
|
|
6717
|
+
transform: rotate(45deg);
|
|
6718
|
+
display: flex;
|
|
6719
|
+
align-items: center;
|
|
6720
|
+
justify-content: center;
|
|
6721
|
+
cursor: pointer;
|
|
6722
|
+
box-shadow: 0 2px 6px var(--node-shadow);
|
|
6723
|
+
}
|
|
6724
|
+
|
|
6725
|
+
.df-flow-diamond:hover {
|
|
6726
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-amber) 25%, transparent);
|
|
6727
|
+
}
|
|
6728
|
+
|
|
6729
|
+
.df-flow-diamond-content {
|
|
6730
|
+
transform: rotate(-45deg);
|
|
6731
|
+
display: flex;
|
|
6732
|
+
flex-direction: column;
|
|
6733
|
+
align-items: center;
|
|
6734
|
+
gap: 2px;
|
|
6735
|
+
color: var(--accent-amber);
|
|
6736
|
+
}
|
|
6737
|
+
|
|
6738
|
+
.df-flow-diamond-label {
|
|
6739
|
+
font-size: 9px;
|
|
6740
|
+
font-weight: 500;
|
|
6741
|
+
text-align: center;
|
|
6742
|
+
line-height: 1.2;
|
|
6743
|
+
white-space: pre-line;
|
|
6744
|
+
max-width: 56px;
|
|
6745
|
+
overflow: hidden;
|
|
6746
|
+
text-overflow: ellipsis;
|
|
6747
|
+
}
|
|
6748
|
+
|
|
6749
|
+
/* Diamond handles positioned at bottom-left and bottom-right */
|
|
6750
|
+
|
|
6751
|
+
.df-flow-diamond-wrapper .df-flow-handle-true {
|
|
6752
|
+
left: 15% !important;
|
|
6753
|
+
}
|
|
6754
|
+
|
|
6755
|
+
.df-flow-diamond-wrapper .df-flow-handle-false {
|
|
6756
|
+
left: 85% !important;
|
|
6757
|
+
}
|
|
6758
|
+
|
|
6759
|
+
/* ---- Task Node ---- */
|
|
6760
|
+
|
|
6761
|
+
.df-flow-task-node {
|
|
6762
|
+
background: var(--node-bg);
|
|
6763
|
+
border: 2px solid var(--border-primary);
|
|
6764
|
+
border-radius: 8px;
|
|
6765
|
+
padding: 10px 14px;
|
|
6766
|
+
min-width: 160px;
|
|
6767
|
+
max-width: 220px;
|
|
6768
|
+
cursor: pointer;
|
|
6769
|
+
transition: box-shadow 0.15s ease, border-color 0.15s ease;
|
|
6770
|
+
box-shadow: 0 2px 6px var(--node-shadow);
|
|
6771
|
+
}
|
|
6772
|
+
|
|
6773
|
+
.df-flow-task-node:hover {
|
|
6774
|
+
border-color: var(--accent-blue);
|
|
6775
|
+
box-shadow: 0 4px 12px var(--node-shadow-hover);
|
|
6776
|
+
}
|
|
6777
|
+
|
|
6778
|
+
.df-flow-task-node-header {
|
|
6779
|
+
display: flex;
|
|
6780
|
+
align-items: center;
|
|
6781
|
+
gap: 6px;
|
|
6782
|
+
margin-bottom: 6px;
|
|
6783
|
+
}
|
|
6784
|
+
|
|
6785
|
+
.df-flow-task-node-name {
|
|
6786
|
+
font-size: 12px;
|
|
6787
|
+
font-weight: 600;
|
|
6788
|
+
color: var(--text-primary);
|
|
6789
|
+
flex: 1;
|
|
6790
|
+
white-space: nowrap;
|
|
6791
|
+
overflow: hidden;
|
|
6792
|
+
text-overflow: ellipsis;
|
|
6793
|
+
}
|
|
6794
|
+
|
|
6795
|
+
.df-flow-task-node-coe {
|
|
6796
|
+
color: var(--accent-amber);
|
|
6797
|
+
display: flex;
|
|
6798
|
+
align-items: center;
|
|
6799
|
+
flex-shrink: 0;
|
|
6800
|
+
}
|
|
6801
|
+
|
|
6802
|
+
.df-flow-task-node-badge {
|
|
6803
|
+
margin-bottom: 4px;
|
|
6804
|
+
}
|
|
6805
|
+
|
|
6806
|
+
.df-flow-task-node-desc {
|
|
6807
|
+
font-size: 10px;
|
|
6808
|
+
color: var(--text-secondary);
|
|
6809
|
+
line-height: 1.3;
|
|
6810
|
+
white-space: nowrap;
|
|
6811
|
+
overflow: hidden;
|
|
6812
|
+
text-overflow: ellipsis;
|
|
6813
|
+
}
|
|
6814
|
+
|
|
6815
|
+
/* ---- Skip Node ---- */
|
|
6816
|
+
|
|
6817
|
+
.df-flow-skip-node {
|
|
6818
|
+
display: flex;
|
|
6819
|
+
align-items: center;
|
|
6820
|
+
gap: 4px;
|
|
6821
|
+
padding: 6px 14px;
|
|
6822
|
+
border-radius: 12px;
|
|
6823
|
+
background: var(--bg-tertiary);
|
|
6824
|
+
border: 1px dashed var(--border-primary);
|
|
6825
|
+
color: var(--text-tertiary);
|
|
6826
|
+
font-size: 11px;
|
|
6827
|
+
cursor: default;
|
|
6828
|
+
user-select: none;
|
|
6829
|
+
}
|
|
6830
|
+
|
|
6831
|
+
/* ---- Workflow Group Node (for group diagrams) ---- */
|
|
6832
|
+
|
|
6833
|
+
.df-flow-wf-group-node {
|
|
6834
|
+
background: var(--node-bg);
|
|
6835
|
+
border: 2px solid var(--border-primary);
|
|
6836
|
+
border-radius: 10px;
|
|
6837
|
+
padding: 12px 16px;
|
|
6838
|
+
min-width: 200px;
|
|
6839
|
+
max-width: 280px;
|
|
6840
|
+
cursor: pointer;
|
|
6841
|
+
transition: box-shadow 0.15s ease, border-color 0.15s ease;
|
|
6842
|
+
box-shadow: 0 2px 6px var(--node-shadow);
|
|
6843
|
+
}
|
|
6844
|
+
|
|
6845
|
+
.df-flow-wf-group-node:hover {
|
|
6846
|
+
border-color: var(--accent-blue);
|
|
6847
|
+
box-shadow: 0 4px 12px var(--node-shadow-hover);
|
|
6848
|
+
}
|
|
6849
|
+
|
|
6850
|
+
.df-flow-wf-group-node-header {
|
|
6851
|
+
display: flex;
|
|
6852
|
+
align-items: center;
|
|
6853
|
+
gap: 8px;
|
|
6854
|
+
margin-bottom: 6px;
|
|
6855
|
+
}
|
|
6856
|
+
|
|
6857
|
+
.df-flow-wf-group-node-name {
|
|
6858
|
+
font-size: 13px;
|
|
6859
|
+
font-weight: 600;
|
|
6860
|
+
color: var(--text-primary);
|
|
6861
|
+
flex: 1;
|
|
6862
|
+
white-space: nowrap;
|
|
6863
|
+
overflow: hidden;
|
|
6864
|
+
text-overflow: ellipsis;
|
|
6865
|
+
}
|
|
6866
|
+
|
|
6867
|
+
.df-flow-wf-group-node-priority {
|
|
6868
|
+
font-size: 10px;
|
|
6869
|
+
font-weight: 600;
|
|
6870
|
+
padding: 1px 6px;
|
|
6871
|
+
border-radius: 4px;
|
|
6872
|
+
background: var(--accent-blue-light);
|
|
6873
|
+
color: var(--accent-blue);
|
|
6874
|
+
flex-shrink: 0;
|
|
6875
|
+
}
|
|
6876
|
+
|
|
6877
|
+
.df-flow-wf-group-node-meta {
|
|
6878
|
+
display: flex;
|
|
6879
|
+
align-items: center;
|
|
6880
|
+
gap: 10px;
|
|
6881
|
+
font-size: 11px;
|
|
6882
|
+
color: var(--text-secondary);
|
|
6883
|
+
}
|
|
6884
|
+
|
|
6885
|
+
.df-flow-wf-group-node-meta-item {
|
|
6886
|
+
display: flex;
|
|
6887
|
+
align-items: center;
|
|
6888
|
+
gap: 4px;
|
|
6889
|
+
}
|
|
6890
|
+
|
|
6891
|
+
.df-flow-wf-group-node-condition {
|
|
6892
|
+
color: var(--accent-amber);
|
|
6893
|
+
}
|
|
6894
|
+
|
|
6895
|
+
.df-flow-wf-group-node-always {
|
|
6896
|
+
color: var(--df-success);
|
|
6897
|
+
}
|