@procaaso/alphinity-ui-components 1.0.9 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +462 -387
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +9 -1
  4. package/dist/index.d.ts +9 -1
  5. package/dist/index.js +462 -387
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -900,9 +900,13 @@ function DeviceControlPanel({
900
900
  binding,
901
901
  onClose,
902
902
  position = "bottom",
903
+ align = "center",
903
904
  touchOptimized = true,
905
+ compact = false,
906
+ fontScale = 1,
904
907
  maxHeight,
905
908
  maxWidth,
909
+ toastDuration = 3e3,
906
910
  onModeChange,
907
911
  onParameterChange,
908
912
  onStart,
@@ -910,6 +914,7 @@ function DeviceControlPanel({
910
914
  onCustomAction
911
915
  }) {
912
916
  const [localParameterValues, setLocalParameterValues] = useState5({});
917
+ const [showToast, setShowToast] = useState5(true);
913
918
  useEffect2(() => {
914
919
  if (binding) {
915
920
  const currentParams2 = binding.parameters[binding.state.currentMode] || [];
@@ -920,10 +925,33 @@ function DeviceControlPanel({
920
925
  setLocalParameterValues(values);
921
926
  }
922
927
  }, [binding, binding?.state.currentMode]);
928
+ useEffect2(() => {
929
+ if (binding?.state.lastCommandResult) {
930
+ setShowToast(true);
931
+ const timer = setTimeout(() => {
932
+ setShowToast(false);
933
+ }, toastDuration);
934
+ return () => clearTimeout(timer);
935
+ }
936
+ }, [binding?.state.lastCommandResult, toastDuration]);
923
937
  if (!binding) return null;
924
938
  const currentMode = binding.state.currentMode;
925
939
  const currentParams = binding.parameters[currentMode] || [];
926
940
  const touchSize = touchOptimized ? 56 : 40;
941
+ const spacing = {
942
+ padding: compact ? "12px" : "20px",
943
+ gap: compact ? "6px" : "8px",
944
+ marginBottom: compact ? "10px" : "16px",
945
+ itemPadding: compact ? "8px 10px" : "10px 12px"
946
+ };
947
+ const fontSize = {
948
+ title: Math.round(14 * fontScale),
949
+ label: Math.round(11 * fontScale),
950
+ value: Math.round(13 * fontScale),
951
+ input: Math.round(14 * fontScale),
952
+ button: Math.round(12 * fontScale),
953
+ status: Math.round(10 * fontScale)
954
+ };
927
955
  const currentModeObj = binding.modes.find((m) => m.value === currentMode);
928
956
  const activeCapabilities = currentModeObj?.capabilities ?? binding.capabilities ?? {};
929
957
  const backgroundColor = binding.theme?.backgroundColor || "#edeeef";
@@ -962,12 +990,9 @@ function DeviceControlPanel({
962
990
  position: "fixed",
963
991
  ...position === "bottom" ? {
964
992
  bottom: 0,
965
- left: 0,
966
- right: 0,
993
+ ...align === "left" ? { left: 0, right: "auto" } : align === "right" ? { right: 0, left: "auto" } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto" },
967
994
  animation: "slideUp 0.3s ease-out",
968
- maxWidth,
969
- marginLeft: "auto",
970
- marginRight: "auto"
995
+ maxWidth
971
996
  } : {
972
997
  right: 0,
973
998
  top: 0,
@@ -980,445 +1005,495 @@ function DeviceControlPanel({
980
1005
  borderRadius: position === "bottom" ? "8px 8px 0 0" : "8px 0 0 8px",
981
1006
  boxShadow: "none",
982
1007
  border: `2px solid ${borderColor}`,
983
- padding: "20px",
1008
+ padding: spacing.padding,
984
1009
  zIndex: 9999,
985
1010
  maxHeight: maxHeight || (position === "bottom" ? "70vh" : "100vh"),
986
1011
  overflowY: "auto",
987
1012
  ...binding.display?.style
988
1013
  };
989
1014
  const titleText = binding.display?.title || binding.deviceName || binding.tag || binding.nodeId;
990
- return /* @__PURE__ */ jsx8(Fragment2, { children: /* @__PURE__ */ jsxs7("div", { style: panelStyle, className: binding.display?.className, children: [
991
- /* @__PURE__ */ jsxs7(
992
- "div",
993
- {
994
- style: {
995
- display: "flex",
996
- justifyContent: "space-between",
997
- alignItems: "center",
998
- marginBottom: "16px",
999
- paddingBottom: "12px",
1000
- borderBottom: `2px solid ${borderColor}`
1001
- },
1002
- children: [
1003
- /* @__PURE__ */ jsxs7("div", { children: [
1015
+ return /* @__PURE__ */ jsxs7(Fragment2, { children: [
1016
+ /* @__PURE__ */ jsxs7("div", { style: panelStyle, className: binding.display?.className, children: [
1017
+ /* @__PURE__ */ jsxs7(
1018
+ "div",
1019
+ {
1020
+ style: {
1021
+ display: "flex",
1022
+ justifyContent: "space-between",
1023
+ alignItems: "center",
1024
+ marginBottom: "16px",
1025
+ paddingBottom: "12px",
1026
+ borderBottom: `2px solid ${borderColor}`
1027
+ },
1028
+ children: [
1029
+ /* @__PURE__ */ jsxs7("div", { children: [
1030
+ /* @__PURE__ */ jsx8(
1031
+ "h3",
1032
+ {
1033
+ style: {
1034
+ margin: 0,
1035
+ fontSize: `${fontSize.title}px`,
1036
+ fontWeight: 600,
1037
+ fontFamily: "Arial, sans-serif",
1038
+ letterSpacing: "0.5px",
1039
+ textTransform: "uppercase",
1040
+ color: textColor
1041
+ },
1042
+ children: titleText
1043
+ }
1044
+ ),
1045
+ binding.deviceType && /* @__PURE__ */ jsx8(
1046
+ "div",
1047
+ {
1048
+ style: {
1049
+ fontSize: "11px",
1050
+ color: mutedTextColor,
1051
+ marginTop: "4px",
1052
+ fontFamily: "Arial, sans-serif"
1053
+ },
1054
+ children: binding.deviceType
1055
+ }
1056
+ )
1057
+ ] }),
1004
1058
  /* @__PURE__ */ jsx8(
1005
- "h3",
1006
- {
1007
- style: {
1008
- margin: 0,
1009
- fontSize: "14px",
1010
- fontWeight: 600,
1011
- fontFamily: "Arial, sans-serif",
1012
- letterSpacing: "0.5px",
1013
- textTransform: "uppercase",
1014
- color: textColor
1015
- },
1016
- children: titleText
1017
- }
1018
- ),
1019
- binding.deviceType && /* @__PURE__ */ jsx8(
1020
- "div",
1059
+ "button",
1021
1060
  {
1061
+ onClick: onClose,
1022
1062
  style: {
1023
- fontSize: "11px",
1024
- color: mutedTextColor,
1025
- marginTop: "4px",
1063
+ width: touchSize * 0.7,
1064
+ height: touchSize * 0.7,
1065
+ backgroundColor: surfaceColor,
1066
+ color: textColor,
1067
+ border: `2px solid ${borderColor}`,
1068
+ borderRadius: "2px",
1069
+ fontSize: "18px",
1070
+ cursor: "pointer",
1071
+ fontWeight: "bold",
1026
1072
  fontFamily: "Arial, sans-serif"
1027
1073
  },
1028
- children: binding.deviceType
1074
+ children: "\xD7"
1029
1075
  }
1030
1076
  )
1031
- ] }),
1032
- /* @__PURE__ */ jsx8(
1033
- "button",
1034
- {
1035
- onClick: onClose,
1036
- style: {
1037
- width: touchSize * 0.7,
1038
- height: touchSize * 0.7,
1039
- backgroundColor: surfaceColor,
1040
- color: textColor,
1041
- border: `2px solid ${borderColor}`,
1042
- borderRadius: "2px",
1043
- fontSize: "18px",
1044
- cursor: "pointer",
1045
- fontWeight: "bold",
1046
- fontFamily: "Arial, sans-serif"
1047
- },
1048
- children: "\xD7"
1049
- }
1050
- )
1051
- ]
1052
- }
1053
- ),
1054
- binding.state.status && /* @__PURE__ */ jsxs7(
1055
- "div",
1056
- {
1057
- style: {
1058
- display: "flex",
1059
- alignItems: "center",
1060
- gap: "12px",
1061
- padding: "10px 12px",
1062
- backgroundColor: surfaceColor,
1063
- border: `1px solid ${borderColor}`,
1064
- borderRadius: "6px",
1065
- marginBottom: "16px"
1066
- },
1067
- children: [
1068
- /* @__PURE__ */ jsx8(
1069
- "div",
1070
- {
1071
- style: {
1072
- width: "10px",
1073
- height: "10px",
1074
- borderRadius: "50%",
1075
- backgroundColor: statusColor,
1076
- border: "1px solid #333"
1077
- }
1078
- }
1079
- ),
1080
- /* @__PURE__ */ jsxs7("div", { style: { flex: 1 }, children: [
1077
+ ]
1078
+ }
1079
+ ),
1080
+ binding.state.status && /* @__PURE__ */ jsxs7(
1081
+ "div",
1082
+ {
1083
+ style: {
1084
+ display: "flex",
1085
+ alignItems: "center",
1086
+ gap: "12px",
1087
+ padding: spacing.itemPadding,
1088
+ backgroundColor: surfaceColor,
1089
+ border: `1px solid ${borderColor}`,
1090
+ borderRadius: "6px",
1091
+ marginBottom: spacing.marginBottom
1092
+ },
1093
+ children: [
1081
1094
  /* @__PURE__ */ jsx8(
1082
1095
  "div",
1083
1096
  {
1084
1097
  style: {
1085
- fontWeight: 600,
1086
- textTransform: "uppercase",
1087
- fontSize: "11px",
1088
- fontFamily: "Arial, sans-serif",
1089
- letterSpacing: "0.5px",
1090
- color: textColor
1091
- },
1092
- children: binding.state.status
1098
+ width: "10px",
1099
+ height: "10px",
1100
+ borderRadius: "50%",
1101
+ backgroundColor: statusColor,
1102
+ border: "1px solid #333"
1103
+ }
1093
1104
  }
1094
1105
  ),
1095
- binding.state.statusMessage && /* @__PURE__ */ jsx8(
1106
+ /* @__PURE__ */ jsxs7("div", { style: { flex: 1 }, children: [
1107
+ /* @__PURE__ */ jsx8(
1108
+ "div",
1109
+ {
1110
+ style: {
1111
+ fontWeight: 600,
1112
+ textTransform: "uppercase",
1113
+ fontSize: `${fontSize.label}px`,
1114
+ fontFamily: "Arial, sans-serif",
1115
+ letterSpacing: "0.5px",
1116
+ color: textColor
1117
+ },
1118
+ children: binding.state.status
1119
+ }
1120
+ ),
1121
+ binding.state.statusMessage && /* @__PURE__ */ jsx8(
1122
+ "div",
1123
+ {
1124
+ style: {
1125
+ fontSize: "10px",
1126
+ color: mutedTextColor,
1127
+ marginTop: "2px",
1128
+ fontFamily: "Arial, sans-serif"
1129
+ },
1130
+ children: binding.state.statusMessage
1131
+ }
1132
+ )
1133
+ ] }),
1134
+ binding.state.isRunning !== void 0 && /* @__PURE__ */ jsx8(
1096
1135
  "div",
1097
1136
  {
1098
1137
  style: {
1138
+ padding: "4px 10px",
1139
+ backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
1140
+ border: `1px solid ${borderColor}`,
1141
+ borderRadius: "2px",
1099
1142
  fontSize: "10px",
1100
- color: mutedTextColor,
1101
- marginTop: "2px",
1102
- fontFamily: "Arial, sans-serif"
1143
+ fontWeight: 600,
1144
+ fontFamily: "Arial, sans-serif",
1145
+ letterSpacing: "0.5px",
1146
+ color: textColor
1103
1147
  },
1104
- children: binding.state.statusMessage
1148
+ children: binding.state.isRunning ? "RUNNING" : "STOPPED"
1105
1149
  }
1106
1150
  )
1107
- ] }),
1108
- binding.state.isRunning !== void 0 && /* @__PURE__ */ jsx8(
1109
- "div",
1110
- {
1111
- style: {
1112
- padding: "4px 10px",
1113
- backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
1114
- border: `1px solid ${borderColor}`,
1115
- borderRadius: "2px",
1116
- fontSize: "10px",
1117
- fontWeight: 600,
1118
- fontFamily: "Arial, sans-serif",
1119
- letterSpacing: "0.5px",
1120
- color: textColor
1121
- },
1122
- children: binding.state.isRunning ? "RUNNING" : "STOPPED"
1123
- }
1124
- )
1125
- ]
1126
- }
1127
- ),
1128
- binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
1129
- /* @__PURE__ */ jsx8(
1130
- "label",
1131
- {
1132
- style: {
1133
- display: "block",
1134
- marginBottom: "8px",
1135
- fontSize: "11px",
1136
- fontWeight: 600,
1137
- textTransform: "uppercase",
1138
- letterSpacing: "0.5px",
1139
- fontFamily: "Arial, sans-serif",
1140
- color: mutedTextColor
1141
- },
1142
- children: "Mode"
1151
+ ]
1143
1152
  }
1144
1153
  ),
1145
- /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: binding.modes.map((mode) => {
1146
- const isSelected = mode.value === currentMode;
1147
- const isEnabled = mode.enabled !== false;
1148
- return /* @__PURE__ */ jsx8(
1149
- "button",
1154
+ binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
1155
+ /* @__PURE__ */ jsx8(
1156
+ "label",
1150
1157
  {
1151
- onClick: () => isEnabled && handleModeChange(mode.value),
1152
- disabled: !isEnabled,
1153
1158
  style: {
1154
- flex: 1,
1155
- minWidth: "80px",
1156
- height: touchSize,
1157
- backgroundColor: isSelected ? selectedColor : surfaceColor,
1158
- color: isSelected ? "#000000" : textColor,
1159
- border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
1160
- borderRadius: "6px",
1159
+ display: "block",
1160
+ marginBottom: "8px",
1161
1161
  fontSize: "11px",
1162
1162
  fontWeight: 600,
1163
- fontFamily: "Arial, sans-serif",
1163
+ textTransform: "uppercase",
1164
1164
  letterSpacing: "0.5px",
1165
+ fontFamily: "Arial, sans-serif",
1166
+ color: mutedTextColor
1167
+ },
1168
+ children: "Mode"
1169
+ }
1170
+ ),
1171
+ /* @__PURE__ */ jsx8(
1172
+ "div",
1173
+ {
1174
+ style: {
1175
+ display: "flex",
1176
+ gap: spacing.gap,
1177
+ overflowX: "auto",
1178
+ overflowY: "hidden",
1179
+ scrollbarWidth: "thin",
1180
+ scrollbarColor: `${borderColor} transparent`,
1181
+ paddingBottom: "4px",
1182
+ marginBottom: "-4px"
1183
+ },
1184
+ children: binding.modes.map((mode) => {
1185
+ const isSelected = mode.value === currentMode;
1186
+ const isEnabled = mode.enabled !== false;
1187
+ return /* @__PURE__ */ jsx8(
1188
+ "button",
1189
+ {
1190
+ onClick: () => isEnabled && handleModeChange(mode.value),
1191
+ disabled: !isEnabled,
1192
+ style: {
1193
+ flex: "0 0 auto",
1194
+ minWidth: "90px",
1195
+ height: touchSize,
1196
+ backgroundColor: isSelected ? selectedColor : surfaceColor,
1197
+ color: isSelected ? "#000000" : textColor,
1198
+ border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
1199
+ borderRadius: "6px",
1200
+ fontSize: `${fontSize.label}px`,
1201
+ fontWeight: 600,
1202
+ fontFamily: "Arial, sans-serif",
1203
+ letterSpacing: "0.5px",
1204
+ textTransform: "uppercase",
1205
+ cursor: isEnabled ? "pointer" : "not-allowed",
1206
+ opacity: isEnabled ? 1 : 0.4,
1207
+ whiteSpace: "nowrap"
1208
+ },
1209
+ children: mode.label
1210
+ },
1211
+ mode.value
1212
+ );
1213
+ })
1214
+ }
1215
+ )
1216
+ ] }),
1217
+ currentParams.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: spacing.marginBottom }, children: [
1218
+ /* @__PURE__ */ jsx8(
1219
+ "label",
1220
+ {
1221
+ style: {
1222
+ display: "block",
1223
+ marginBottom: spacing.gap,
1224
+ fontSize: `${fontSize.label}px`,
1225
+ fontWeight: 600,
1165
1226
  textTransform: "uppercase",
1166
- cursor: isEnabled ? "pointer" : "not-allowed",
1167
- opacity: isEnabled ? 1 : 0.4
1227
+ letterSpacing: "0.5px",
1228
+ fontFamily: "Arial, sans-serif",
1229
+ color: mutedTextColor
1168
1230
  },
1169
- children: mode.label
1170
- },
1171
- mode.value
1172
- );
1173
- }) })
1174
- ] }),
1175
- currentParams.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
1176
- /* @__PURE__ */ jsx8(
1177
- "label",
1178
- {
1179
- style: {
1180
- display: "block",
1181
- marginBottom: "8px",
1182
- fontSize: "11px",
1183
- fontWeight: 600,
1184
- textTransform: "uppercase",
1185
- letterSpacing: "0.5px",
1186
- fontFamily: "Arial, sans-serif",
1187
- color: mutedTextColor
1188
- },
1189
- children: "Parameters"
1190
- }
1191
- ),
1192
- currentParams.map((param) => /* @__PURE__ */ jsxs7(
1193
- "div",
1194
- {
1195
- style: {
1196
- marginBottom: "10px",
1197
- padding: "10px",
1198
- backgroundColor: surfaceColor,
1199
- border: `1px solid ${borderColor}`,
1200
- borderRadius: "6px"
1201
- },
1202
- children: [
1203
- /* @__PURE__ */ jsxs7(
1204
- "div",
1205
- {
1206
- style: { display: "flex", justifyContent: "space-between", marginBottom: "8px" },
1207
- children: [
1208
- /* @__PURE__ */ jsx8(
1209
- "span",
1210
- {
1211
- style: {
1212
- fontSize: "11px",
1213
- fontWeight: 600,
1214
- textTransform: "uppercase",
1215
- letterSpacing: "0.5px",
1216
- fontFamily: "Arial, sans-serif",
1217
- color: mutedTextColor
1218
- },
1219
- children: param.label
1220
- }
1231
+ children: "Parameters"
1232
+ }
1233
+ ),
1234
+ currentParams.map((param) => /* @__PURE__ */ jsxs7(
1235
+ "div",
1236
+ {
1237
+ style: {
1238
+ marginBottom: spacing.gap,
1239
+ padding: spacing.itemPadding,
1240
+ backgroundColor: surfaceColor,
1241
+ border: `1px solid ${borderColor}`,
1242
+ borderRadius: "6px"
1243
+ },
1244
+ children: [
1245
+ /* @__PURE__ */ jsxs7(
1246
+ "div",
1247
+ {
1248
+ style: {
1249
+ display: "flex",
1250
+ justifyContent: "space-between",
1251
+ marginBottom: spacing.gap
1252
+ },
1253
+ children: [
1254
+ /* @__PURE__ */ jsx8(
1255
+ "span",
1256
+ {
1257
+ style: {
1258
+ fontSize: `${fontSize.label}px`,
1259
+ fontWeight: 600,
1260
+ textTransform: "uppercase",
1261
+ letterSpacing: "0.5px",
1262
+ fontFamily: "Arial, sans-serif",
1263
+ color: mutedTextColor
1264
+ },
1265
+ children: param.label
1266
+ }
1267
+ ),
1268
+ /* @__PURE__ */ jsxs7(
1269
+ "span",
1270
+ {
1271
+ style: {
1272
+ fontSize: `${fontSize.value}px`,
1273
+ fontWeight: 700,
1274
+ fontFamily: "Arial, sans-serif",
1275
+ color: textColor
1276
+ },
1277
+ children: [
1278
+ localParameterValues[param.id] ?? param.value,
1279
+ " ",
1280
+ param.unit && /* @__PURE__ */ jsx8("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
1281
+ ]
1282
+ }
1283
+ )
1284
+ ]
1285
+ }
1286
+ ),
1287
+ param.type === "boolean" ? /* @__PURE__ */ jsx8(
1288
+ "button",
1289
+ {
1290
+ onClick: () => {
1291
+ const newValue = !localParameterValues[param.id];
1292
+ handleParameterInput(param.id, newValue);
1293
+ handleParameterCommit(param.id, newValue);
1294
+ },
1295
+ disabled: param.readOnly,
1296
+ style: {
1297
+ width: "100%",
1298
+ height: touchSize,
1299
+ backgroundColor: localParameterValues[param.id] ? "#3f3f46" : surfaceColor,
1300
+ color: localParameterValues[param.id] ? textColor : mutedTextColor,
1301
+ border: `1px solid ${localParameterValues[param.id] ? "#52525b" : borderColor}`,
1302
+ borderRadius: "4px",
1303
+ fontSize: "12px",
1304
+ fontWeight: 600,
1305
+ fontFamily: "monospace",
1306
+ letterSpacing: "0.5px",
1307
+ cursor: param.readOnly ? "not-allowed" : "pointer",
1308
+ transition: "all 0.15s"
1309
+ },
1310
+ children: localParameterValues[param.id] ? "ON" : "OFF"
1311
+ }
1312
+ ) : param.type === "select" ? /* @__PURE__ */ jsx8(
1313
+ "select",
1314
+ {
1315
+ value: localParameterValues[param.id] || param.value,
1316
+ onChange: (e) => {
1317
+ handleParameterInput(param.id, e.target.value);
1318
+ handleParameterCommit(param.id, e.target.value);
1319
+ },
1320
+ disabled: param.readOnly,
1321
+ style: {
1322
+ width: "100%",
1323
+ height: touchSize,
1324
+ backgroundColor: surfaceColor,
1325
+ color: textColor,
1326
+ border: `1px solid ${borderColor}`,
1327
+ borderRadius: "4px",
1328
+ padding: "0 12px",
1329
+ fontSize: "12px",
1330
+ fontFamily: "monospace",
1331
+ cursor: "pointer"
1332
+ },
1333
+ children: param.options?.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
1334
+ }
1335
+ ) : /* @__PURE__ */ jsx8(
1336
+ "input",
1337
+ {
1338
+ type: param.type === "number" ? "number" : "text",
1339
+ value: localParameterValues[param.id] ?? param.value,
1340
+ onChange: (e) => handleParameterInput(
1341
+ param.id,
1342
+ param.type === "number" ? +e.target.value : e.target.value
1221
1343
  ),
1222
- /* @__PURE__ */ jsxs7(
1223
- "span",
1224
- {
1225
- style: {
1226
- fontSize: "13px",
1227
- fontWeight: 700,
1228
- fontFamily: "Arial, sans-serif",
1229
- color: textColor
1230
- },
1231
- children: [
1232
- localParameterValues[param.id] ?? param.value,
1233
- " ",
1234
- param.unit && /* @__PURE__ */ jsx8("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
1235
- ]
1236
- }
1237
- )
1238
- ]
1239
- }
1240
- ),
1241
- param.type === "boolean" ? /* @__PURE__ */ jsx8(
1242
- "button",
1243
- {
1244
- onClick: () => {
1245
- const newValue = !localParameterValues[param.id];
1246
- handleParameterInput(param.id, newValue);
1247
- handleParameterCommit(param.id, newValue);
1248
- },
1249
- disabled: param.readOnly,
1250
- style: {
1251
- width: "100%",
1252
- height: touchSize,
1253
- backgroundColor: localParameterValues[param.id] ? "#3f3f46" : surfaceColor,
1254
- color: localParameterValues[param.id] ? textColor : mutedTextColor,
1255
- border: `1px solid ${localParameterValues[param.id] ? "#52525b" : borderColor}`,
1256
- borderRadius: "4px",
1257
- fontSize: "12px",
1258
- fontWeight: 600,
1259
- fontFamily: "monospace",
1260
- letterSpacing: "0.5px",
1261
- cursor: param.readOnly ? "not-allowed" : "pointer",
1262
- transition: "all 0.15s"
1263
- },
1264
- children: localParameterValues[param.id] ? "ON" : "OFF"
1265
- }
1266
- ) : param.type === "select" ? /* @__PURE__ */ jsx8(
1267
- "select",
1268
- {
1269
- value: localParameterValues[param.id] || param.value,
1270
- onChange: (e) => {
1271
- handleParameterInput(param.id, e.target.value);
1272
- handleParameterCommit(param.id, e.target.value);
1273
- },
1274
- disabled: param.readOnly,
1275
- style: {
1276
- width: "100%",
1277
- height: touchSize,
1278
- backgroundColor: surfaceColor,
1279
- color: textColor,
1280
- border: `1px solid ${borderColor}`,
1281
- borderRadius: "4px",
1282
- padding: "0 12px",
1283
- fontSize: "12px",
1284
- fontFamily: "monospace",
1285
- cursor: "pointer"
1286
- },
1287
- children: param.options?.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
1288
- }
1289
- ) : /* @__PURE__ */ jsx8(
1290
- "input",
1291
- {
1292
- type: param.type === "number" ? "number" : "text",
1293
- value: localParameterValues[param.id] ?? param.value,
1294
- onChange: (e) => handleParameterInput(
1295
- param.id,
1296
- param.type === "number" ? +e.target.value : e.target.value
1297
- ),
1298
- onBlur: () => handleParameterCommit(param.id, localParameterValues[param.id]),
1299
- disabled: param.readOnly,
1300
- min: param.min,
1301
- max: param.max,
1302
- step: param.step,
1303
- style: {
1304
- width: "100%",
1305
- height: touchSize,
1306
- backgroundColor: "#ffffff",
1307
- color: textColor,
1308
- border: `1px solid ${borderColor}`,
1309
- borderRadius: "6px",
1310
- padding: "0 12px",
1311
- fontSize: "14px",
1312
- fontFamily: "Arial, sans-serif",
1313
- fontWeight: 600
1344
+ onBlur: () => handleParameterCommit(param.id, localParameterValues[param.id]),
1345
+ disabled: param.readOnly,
1346
+ min: param.min,
1347
+ max: param.max,
1348
+ step: param.step,
1349
+ style: {
1350
+ width: "100%",
1351
+ height: touchSize,
1352
+ backgroundColor: "#ffffff",
1353
+ color: textColor,
1354
+ border: `1px solid ${borderColor}`,
1355
+ borderRadius: "6px",
1356
+ padding: "0 12px",
1357
+ fontSize: `${fontSize.input}px`,
1358
+ fontFamily: "Arial, sans-serif",
1359
+ fontWeight: 600
1360
+ }
1314
1361
  }
1315
- }
1316
- )
1317
- ]
1318
- },
1319
- param.id
1320
- ))
1321
- ] }),
1322
- binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: [
1323
- activeCapabilities?.canStart && /* @__PURE__ */ jsx8(
1324
- "button",
1325
- {
1326
- onClick: onStart,
1327
- disabled: binding.state.isRunning,
1328
- style: {
1329
- flex: 1,
1330
- height: touchSize,
1331
- backgroundColor: binding.state.isRunning ? "#a3a3a3" : "#10b981",
1332
- color: "#ffffff",
1333
- border: "none",
1334
- borderRadius: "6px",
1335
- fontSize: "12px",
1336
- fontWeight: 700,
1337
- fontFamily: "Arial, sans-serif",
1338
- letterSpacing: "0.5px",
1339
- cursor: binding.state.isRunning ? "not-allowed" : "pointer",
1340
- opacity: binding.state.isRunning ? 0.5 : 1
1362
+ )
1363
+ ]
1341
1364
  },
1342
- children: "START"
1343
- }
1344
- ),
1345
- activeCapabilities?.canStop && /* @__PURE__ */ jsx8(
1365
+ param.id
1366
+ ))
1367
+ ] }),
1368
+ binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
1369
+ activeCapabilities?.canStart && /* @__PURE__ */ jsx8(
1370
+ "button",
1371
+ {
1372
+ onClick: onStart,
1373
+ disabled: binding.state.isRunning,
1374
+ style: {
1375
+ flex: 1,
1376
+ height: touchSize,
1377
+ backgroundColor: binding.state.isRunning ? "#a3a3a3" : "#10b981",
1378
+ color: "#ffffff",
1379
+ border: "none",
1380
+ borderRadius: "6px",
1381
+ fontSize: "12px",
1382
+ fontWeight: 700,
1383
+ fontFamily: "Arial, sans-serif",
1384
+ letterSpacing: "0.5px",
1385
+ cursor: binding.state.isRunning ? "not-allowed" : "pointer",
1386
+ opacity: binding.state.isRunning ? 0.5 : 1
1387
+ },
1388
+ children: "START"
1389
+ }
1390
+ ),
1391
+ activeCapabilities?.canStop && /* @__PURE__ */ jsx8(
1392
+ "button",
1393
+ {
1394
+ onClick: onStop,
1395
+ disabled: !binding.state.isRunning,
1396
+ style: {
1397
+ flex: 1,
1398
+ height: touchSize,
1399
+ backgroundColor: !binding.state.isRunning ? "#a3a3a3" : "#ef4444",
1400
+ color: "#ffffff",
1401
+ border: "none",
1402
+ borderRadius: "6px",
1403
+ fontSize: "12px",
1404
+ fontWeight: 700,
1405
+ fontFamily: "Arial, sans-serif",
1406
+ letterSpacing: "0.5px",
1407
+ cursor: !binding.state.isRunning ? "not-allowed" : "pointer",
1408
+ opacity: !binding.state.isRunning ? 0.5 : 1
1409
+ },
1410
+ children: "STOP"
1411
+ }
1412
+ )
1413
+ ] }),
1414
+ activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ jsxs7(
1346
1415
  "button",
1347
1416
  {
1348
- onClick: onStop,
1349
- disabled: !binding.state.isRunning,
1417
+ onClick: () => onCustomAction?.(action.id),
1350
1418
  style: {
1351
1419
  flex: 1,
1420
+ minWidth: "120px",
1352
1421
  height: touchSize,
1353
- backgroundColor: !binding.state.isRunning ? "#a3a3a3" : "#ef4444",
1354
- color: "#ffffff",
1355
- border: "none",
1422
+ backgroundColor: surfaceColor,
1423
+ color: textColor,
1424
+ border: `1px solid ${borderColor}`,
1356
1425
  borderRadius: "6px",
1357
- fontSize: "12px",
1358
- fontWeight: 700,
1359
- fontFamily: "Arial, sans-serif",
1426
+ fontSize: "11px",
1427
+ fontWeight: 600,
1428
+ fontFamily: "monospace",
1360
1429
  letterSpacing: "0.5px",
1361
- cursor: !binding.state.isRunning ? "not-allowed" : "pointer",
1362
- opacity: !binding.state.isRunning ? 0.5 : 1
1430
+ textTransform: "uppercase",
1431
+ cursor: "pointer",
1432
+ transition: "all 0.15s"
1363
1433
  },
1364
- children: "STOP"
1365
- }
1366
- )
1367
- ] }),
1368
- activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ jsxs7(
1369
- "button",
1370
- {
1371
- onClick: () => onCustomAction?.(action.id),
1372
- style: {
1373
- flex: 1,
1374
- minWidth: "120px",
1375
- height: touchSize,
1376
- backgroundColor: surfaceColor,
1377
- color: textColor,
1378
- border: `1px solid ${borderColor}`,
1379
- borderRadius: "6px",
1380
- fontSize: "11px",
1381
- fontWeight: 600,
1382
- fontFamily: "monospace",
1383
- letterSpacing: "0.5px",
1384
- textTransform: "uppercase",
1385
- cursor: "pointer",
1386
- transition: "all 0.15s"
1434
+ children: [
1435
+ action.icon && /* @__PURE__ */ jsx8("span", { style: { marginRight: "6px" }, children: action.icon }),
1436
+ action.label
1437
+ ]
1387
1438
  },
1388
- children: [
1389
- action.icon && /* @__PURE__ */ jsx8("span", { style: { marginRight: "6px" }, children: action.icon }),
1390
- action.label
1391
- ]
1392
- },
1393
- action.id
1394
- )) }),
1395
- binding.state.lastCommandResult && /* @__PURE__ */ jsx8(
1439
+ action.id
1440
+ )) })
1441
+ ] }),
1442
+ binding.state.lastCommandResult && showToast && /* @__PURE__ */ jsx8(
1396
1443
  "div",
1397
1444
  {
1398
1445
  style: {
1399
- marginTop: "16px",
1400
- padding: "10px 12px",
1401
- backgroundColor: surfaceColor,
1402
- border: `1px solid ${binding.state.lastCommandResult.success ? "#52525b" : borderColor}`,
1403
- borderRadius: "4px",
1404
- fontSize: "11px",
1405
- fontFamily: "monospace",
1406
- color: binding.state.lastCommandResult.success ? textColor : mutedTextColor
1446
+ position: "fixed",
1447
+ bottom: "20px",
1448
+ ...position === "bottom" && align === "right" ? { left: "20px", right: "auto" } : { right: "20px", left: "auto" },
1449
+ // Default to right
1450
+ maxWidth: "400px",
1451
+ padding: "12px 16px",
1452
+ backgroundColor: binding.state.lastCommandResult.success ? "#10b981" : "#ef4444",
1453
+ color: "#ffffff",
1454
+ border: "none",
1455
+ borderRadius: "8px",
1456
+ fontSize: `${fontSize.label}px`,
1457
+ fontFamily: "Arial, sans-serif",
1458
+ fontWeight: 600,
1459
+ boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
1460
+ zIndex: 1e4,
1461
+ animation: position === "bottom" && align === "right" ? "slideInToastLeft 0.3s ease-out" : "slideInToast 0.3s ease-out"
1407
1462
  },
1408
1463
  children: binding.state.lastCommandResult.message
1409
1464
  }
1410
1465
  ),
1411
1466
  /* @__PURE__ */ jsx8("style", { children: `
1412
- @keyframes slideUp {
1413
- from { transform: translateY(100%); }
1414
- to { transform: translateY(0); }
1467
+ @keyframes slideInToast {
1468
+ from {
1469
+ opacity: 0;
1470
+ transform: translateX(20px);
1471
+ }
1472
+ to {
1473
+ opacity: 1;
1474
+ transform: translateX(0);
1475
+ }
1476
+ }
1477
+ @keyframes slideInToastLeft {
1478
+ from {
1479
+ opacity: 0;
1480
+ transform: translateX(-20px);
1415
1481
  }
1416
- @keyframes slideIn {
1417
- from { transform: translateX(100%); }
1418
- to { transform: translateX(0); }
1482
+ to {
1483
+ opacity: 1;
1484
+ transform: translateX(0);
1419
1485
  }
1420
- ` })
1421
- ] }) });
1486
+ }
1487
+ @keyframes slideUp {
1488
+ from { transform: translateY(100%); }
1489
+ to { transform: translateY(0); }
1490
+ }
1491
+ @keyframes slideIn {
1492
+ from { transform: translateX(100%); }
1493
+ to { transform: translateX(0); }
1494
+ }
1495
+ ` })
1496
+ ] });
1422
1497
  }
1423
1498
 
1424
1499
  // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx