@procaaso/alphinity-ui-components 1.0.10 → 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 +442 -385
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +3 -1
  4. package/dist/index.d.ts +3 -1
  5. package/dist/index.js +442 -385
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -906,6 +906,7 @@ function DeviceControlPanel({
906
906
  fontScale = 1,
907
907
  maxHeight,
908
908
  maxWidth,
909
+ toastDuration = 3e3,
909
910
  onModeChange,
910
911
  onParameterChange,
911
912
  onStart,
@@ -913,6 +914,7 @@ function DeviceControlPanel({
913
914
  onCustomAction
914
915
  }) {
915
916
  const [localParameterValues, setLocalParameterValues] = useState5({});
917
+ const [showToast, setShowToast] = useState5(true);
916
918
  useEffect2(() => {
917
919
  if (binding) {
918
920
  const currentParams2 = binding.parameters[binding.state.currentMode] || [];
@@ -923,6 +925,15 @@ function DeviceControlPanel({
923
925
  setLocalParameterValues(values);
924
926
  }
925
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]);
926
937
  if (!binding) return null;
927
938
  const currentMode = binding.state.currentMode;
928
939
  const currentParams = binding.parameters[currentMode] || [];
@@ -1001,442 +1012,488 @@ function DeviceControlPanel({
1001
1012
  ...binding.display?.style
1002
1013
  };
1003
1014
  const titleText = binding.display?.title || binding.deviceName || binding.tag || binding.nodeId;
1004
- return /* @__PURE__ */ jsx8(Fragment2, { children: /* @__PURE__ */ jsxs7("div", { style: panelStyle, className: binding.display?.className, children: [
1005
- /* @__PURE__ */ jsxs7(
1006
- "div",
1007
- {
1008
- style: {
1009
- display: "flex",
1010
- justifyContent: "space-between",
1011
- alignItems: "center",
1012
- marginBottom: "16px",
1013
- paddingBottom: "12px",
1014
- borderBottom: `2px solid ${borderColor}`
1015
- },
1016
- children: [
1017
- /* @__PURE__ */ jsxs7("div", { children: [
1018
- /* @__PURE__ */ jsx8(
1019
- "h3",
1020
- {
1021
- style: {
1022
- margin: 0,
1023
- fontSize: `${fontSize.title}px`,
1024
- fontWeight: 600,
1025
- fontFamily: "Arial, sans-serif",
1026
- letterSpacing: "0.5px",
1027
- textTransform: "uppercase",
1028
- color: textColor
1029
- },
1030
- children: titleText
1031
- }
1032
- ),
1033
- binding.deviceType && /* @__PURE__ */ jsx8(
1034
- "div",
1035
- {
1036
- style: {
1037
- fontSize: "11px",
1038
- color: mutedTextColor,
1039
- marginTop: "4px",
1040
- fontFamily: "Arial, sans-serif"
1041
- },
1042
- children: binding.deviceType
1043
- }
1044
- )
1045
- ] }),
1046
- /* @__PURE__ */ jsx8(
1047
- "button",
1048
- {
1049
- onClick: onClose,
1050
- style: {
1051
- width: touchSize * 0.7,
1052
- height: touchSize * 0.7,
1053
- backgroundColor: surfaceColor,
1054
- color: textColor,
1055
- border: `2px solid ${borderColor}`,
1056
- borderRadius: "2px",
1057
- fontSize: "18px",
1058
- cursor: "pointer",
1059
- fontWeight: "bold",
1060
- fontFamily: "Arial, sans-serif"
1061
- },
1062
- children: "\xD7"
1063
- }
1064
- )
1065
- ]
1066
- }
1067
- ),
1068
- binding.state.status && /* @__PURE__ */ jsxs7(
1069
- "div",
1070
- {
1071
- style: {
1072
- display: "flex",
1073
- alignItems: "center",
1074
- gap: "12px",
1075
- padding: spacing.itemPadding,
1076
- backgroundColor: surfaceColor,
1077
- border: `1px solid ${borderColor}`,
1078
- borderRadius: "6px",
1079
- marginBottom: spacing.marginBottom
1080
- },
1081
- children: [
1082
- /* @__PURE__ */ jsx8(
1083
- "div",
1084
- {
1085
- style: {
1086
- width: "10px",
1087
- height: "10px",
1088
- borderRadius: "50%",
1089
- backgroundColor: statusColor,
1090
- border: "1px solid #333"
1091
- }
1092
- }
1093
- ),
1094
- /* @__PURE__ */ jsxs7("div", { style: { flex: 1 }, 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
+ ] }),
1095
1058
  /* @__PURE__ */ jsx8(
1096
- "div",
1097
- {
1098
- style: {
1099
- fontWeight: 600,
1100
- textTransform: "uppercase",
1101
- fontSize: `${fontSize.label}px`,
1102
- fontFamily: "Arial, sans-serif",
1103
- letterSpacing: "0.5px",
1104
- color: textColor
1105
- },
1106
- children: binding.state.status
1107
- }
1108
- ),
1109
- binding.state.statusMessage && /* @__PURE__ */ jsx8(
1110
- "div",
1059
+ "button",
1111
1060
  {
1061
+ onClick: onClose,
1112
1062
  style: {
1113
- fontSize: "10px",
1114
- color: mutedTextColor,
1115
- marginTop: "2px",
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",
1116
1072
  fontFamily: "Arial, sans-serif"
1117
1073
  },
1118
- children: binding.state.statusMessage
1074
+ children: "\xD7"
1119
1075
  }
1120
1076
  )
1121
- ] }),
1122
- binding.state.isRunning !== void 0 && /* @__PURE__ */ jsx8(
1123
- "div",
1124
- {
1125
- style: {
1126
- padding: "4px 10px",
1127
- backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
1128
- border: `1px solid ${borderColor}`,
1129
- borderRadius: "2px",
1130
- fontSize: "10px",
1131
- fontWeight: 600,
1132
- fontFamily: "Arial, sans-serif",
1133
- letterSpacing: "0.5px",
1134
- color: textColor
1135
- },
1136
- children: binding.state.isRunning ? "RUNNING" : "STOPPED"
1137
- }
1138
- )
1139
- ]
1140
- }
1141
- ),
1142
- binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
1143
- /* @__PURE__ */ jsx8(
1144
- "label",
1145
- {
1146
- style: {
1147
- display: "block",
1148
- marginBottom: "8px",
1149
- fontSize: "11px",
1150
- fontWeight: 600,
1151
- textTransform: "uppercase",
1152
- letterSpacing: "0.5px",
1153
- fontFamily: "Arial, sans-serif",
1154
- color: mutedTextColor
1155
- },
1156
- children: "Mode"
1157
- }
1158
- ),
1159
- /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: spacing.gap, flexWrap: "wrap" }, children: binding.modes.map((mode) => {
1160
- const isSelected = mode.value === currentMode;
1161
- const isEnabled = mode.enabled !== false;
1162
- return /* @__PURE__ */ jsx8(
1163
- "button",
1164
- {
1165
- onClick: () => isEnabled && handleModeChange(mode.value),
1166
- disabled: !isEnabled,
1167
- style: {
1168
- flex: 1,
1169
- minWidth: "80px",
1170
- height: touchSize,
1171
- backgroundColor: isSelected ? selectedColor : surfaceColor,
1172
- color: isSelected ? "#000000" : textColor,
1173
- border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
1174
- borderRadius: "6px",
1175
- fontSize: `${fontSize.label}px`,
1176
- fontWeight: 600,
1177
- fontFamily: "Arial, sans-serif",
1178
- letterSpacing: "0.5px",
1179
- textTransform: "uppercase",
1180
- cursor: isEnabled ? "pointer" : "not-allowed",
1181
- opacity: isEnabled ? 1 : 0.4
1182
- },
1183
- children: mode.label
1184
- },
1185
- mode.value
1186
- );
1187
- }) })
1188
- ] }),
1189
- currentParams.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: spacing.marginBottom }, children: [
1190
- /* @__PURE__ */ jsx8(
1191
- "label",
1192
- {
1193
- style: {
1194
- display: "block",
1195
- marginBottom: spacing.gap,
1196
- fontSize: `${fontSize.label}px`,
1197
- fontWeight: 600,
1198
- textTransform: "uppercase",
1199
- letterSpacing: "0.5px",
1200
- fontFamily: "Arial, sans-serif",
1201
- color: mutedTextColor
1202
- },
1203
- children: "Parameters"
1077
+ ]
1204
1078
  }
1205
1079
  ),
1206
- currentParams.map((param) => /* @__PURE__ */ jsxs7(
1080
+ binding.state.status && /* @__PURE__ */ jsxs7(
1207
1081
  "div",
1208
1082
  {
1209
1083
  style: {
1210
- marginBottom: spacing.gap,
1084
+ display: "flex",
1085
+ alignItems: "center",
1086
+ gap: "12px",
1211
1087
  padding: spacing.itemPadding,
1212
1088
  backgroundColor: surfaceColor,
1213
1089
  border: `1px solid ${borderColor}`,
1214
- borderRadius: "6px"
1090
+ borderRadius: "6px",
1091
+ marginBottom: spacing.marginBottom
1215
1092
  },
1216
1093
  children: [
1217
- /* @__PURE__ */ jsxs7(
1094
+ /* @__PURE__ */ jsx8(
1218
1095
  "div",
1219
1096
  {
1220
1097
  style: {
1221
- display: "flex",
1222
- justifyContent: "space-between",
1223
- marginBottom: spacing.gap
1224
- },
1225
- children: [
1226
- /* @__PURE__ */ jsx8(
1227
- "span",
1228
- {
1229
- style: {
1230
- fontSize: `${fontSize.label}px`,
1231
- fontWeight: 600,
1232
- textTransform: "uppercase",
1233
- letterSpacing: "0.5px",
1234
- fontFamily: "Arial, sans-serif",
1235
- color: mutedTextColor
1236
- },
1237
- children: param.label
1238
- }
1239
- ),
1240
- /* @__PURE__ */ jsxs7(
1241
- "span",
1242
- {
1243
- style: {
1244
- fontSize: `${fontSize.value}px`,
1245
- fontWeight: 700,
1246
- fontFamily: "Arial, sans-serif",
1247
- color: textColor
1248
- },
1249
- children: [
1250
- localParameterValues[param.id] ?? param.value,
1251
- " ",
1252
- param.unit && /* @__PURE__ */ jsx8("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
1253
- ]
1254
- }
1255
- )
1256
- ]
1098
+ width: "10px",
1099
+ height: "10px",
1100
+ borderRadius: "50%",
1101
+ backgroundColor: statusColor,
1102
+ border: "1px solid #333"
1103
+ }
1257
1104
  }
1258
1105
  ),
1259
- param.type === "boolean" ? /* @__PURE__ */ jsx8(
1260
- "button",
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(
1135
+ "div",
1261
1136
  {
1262
- onClick: () => {
1263
- const newValue = !localParameterValues[param.id];
1264
- handleParameterInput(param.id, newValue);
1265
- handleParameterCommit(param.id, newValue);
1266
- },
1267
- disabled: param.readOnly,
1268
1137
  style: {
1269
- width: "100%",
1270
- height: touchSize,
1271
- backgroundColor: localParameterValues[param.id] ? "#3f3f46" : surfaceColor,
1272
- color: localParameterValues[param.id] ? textColor : mutedTextColor,
1273
- border: `1px solid ${localParameterValues[param.id] ? "#52525b" : borderColor}`,
1274
- borderRadius: "4px",
1275
- fontSize: "12px",
1138
+ padding: "4px 10px",
1139
+ backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
1140
+ border: `1px solid ${borderColor}`,
1141
+ borderRadius: "2px",
1142
+ fontSize: "10px",
1276
1143
  fontWeight: 600,
1277
- fontFamily: "monospace",
1144
+ fontFamily: "Arial, sans-serif",
1278
1145
  letterSpacing: "0.5px",
1279
- cursor: param.readOnly ? "not-allowed" : "pointer",
1280
- transition: "all 0.15s"
1281
- },
1282
- children: localParameterValues[param.id] ? "ON" : "OFF"
1283
- }
1284
- ) : param.type === "select" ? /* @__PURE__ */ jsx8(
1285
- "select",
1286
- {
1287
- value: localParameterValues[param.id] || param.value,
1288
- onChange: (e) => {
1289
- handleParameterInput(param.id, e.target.value);
1290
- handleParameterCommit(param.id, e.target.value);
1291
- },
1292
- disabled: param.readOnly,
1293
- style: {
1294
- width: "100%",
1295
- height: touchSize,
1296
- backgroundColor: surfaceColor,
1297
- color: textColor,
1298
- border: `1px solid ${borderColor}`,
1299
- borderRadius: "4px",
1300
- padding: "0 12px",
1301
- fontSize: "12px",
1302
- fontFamily: "monospace",
1303
- cursor: "pointer"
1146
+ color: textColor
1304
1147
  },
1305
- children: param.options?.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
1306
- }
1307
- ) : /* @__PURE__ */ jsx8(
1308
- "input",
1309
- {
1310
- type: param.type === "number" ? "number" : "text",
1311
- value: localParameterValues[param.id] ?? param.value,
1312
- onChange: (e) => handleParameterInput(
1313
- param.id,
1314
- param.type === "number" ? +e.target.value : e.target.value
1315
- ),
1316
- onBlur: () => handleParameterCommit(param.id, localParameterValues[param.id]),
1317
- disabled: param.readOnly,
1318
- min: param.min,
1319
- max: param.max,
1320
- step: param.step,
1321
- style: {
1322
- width: "100%",
1323
- height: touchSize,
1324
- backgroundColor: "#ffffff",
1325
- color: textColor,
1326
- border: `1px solid ${borderColor}`,
1327
- borderRadius: "6px",
1328
- padding: "0 12px",
1329
- fontSize: `${fontSize.input}px`,
1330
- fontFamily: "Arial, sans-serif",
1331
- fontWeight: 600
1332
- }
1148
+ children: binding.state.isRunning ? "RUNNING" : "STOPPED"
1333
1149
  }
1334
1150
  )
1335
1151
  ]
1336
- },
1337
- param.id
1338
- ))
1339
- ] }),
1340
- binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
1341
- activeCapabilities?.canStart && /* @__PURE__ */ jsx8(
1342
- "button",
1343
- {
1344
- onClick: onStart,
1345
- disabled: binding.state.isRunning,
1346
- style: {
1347
- flex: 1,
1348
- height: touchSize,
1349
- backgroundColor: binding.state.isRunning ? "#a3a3a3" : "#10b981",
1350
- color: "#ffffff",
1351
- border: "none",
1352
- borderRadius: "6px",
1353
- fontSize: "12px",
1354
- fontWeight: 700,
1355
- fontFamily: "Arial, sans-serif",
1356
- letterSpacing: "0.5px",
1357
- cursor: binding.state.isRunning ? "not-allowed" : "pointer",
1358
- opacity: binding.state.isRunning ? 0.5 : 1
1359
- },
1360
- children: "START"
1361
1152
  }
1362
1153
  ),
1363
- activeCapabilities?.canStop && /* @__PURE__ */ jsx8(
1154
+ binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
1155
+ /* @__PURE__ */ jsx8(
1156
+ "label",
1157
+ {
1158
+ style: {
1159
+ display: "block",
1160
+ marginBottom: "8px",
1161
+ fontSize: "11px",
1162
+ fontWeight: 600,
1163
+ textTransform: "uppercase",
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,
1226
+ textTransform: "uppercase",
1227
+ letterSpacing: "0.5px",
1228
+ fontFamily: "Arial, sans-serif",
1229
+ color: mutedTextColor
1230
+ },
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
1343
+ ),
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
+ }
1361
+ }
1362
+ )
1363
+ ]
1364
+ },
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(
1364
1415
  "button",
1365
1416
  {
1366
- onClick: onStop,
1367
- disabled: !binding.state.isRunning,
1417
+ onClick: () => onCustomAction?.(action.id),
1368
1418
  style: {
1369
1419
  flex: 1,
1420
+ minWidth: "120px",
1370
1421
  height: touchSize,
1371
- backgroundColor: !binding.state.isRunning ? "#a3a3a3" : "#ef4444",
1372
- color: "#ffffff",
1373
- border: "none",
1422
+ backgroundColor: surfaceColor,
1423
+ color: textColor,
1424
+ border: `1px solid ${borderColor}`,
1374
1425
  borderRadius: "6px",
1375
- fontSize: "12px",
1376
- fontWeight: 700,
1377
- fontFamily: "Arial, sans-serif",
1426
+ fontSize: "11px",
1427
+ fontWeight: 600,
1428
+ fontFamily: "monospace",
1378
1429
  letterSpacing: "0.5px",
1379
- cursor: !binding.state.isRunning ? "not-allowed" : "pointer",
1380
- opacity: !binding.state.isRunning ? 0.5 : 1
1430
+ textTransform: "uppercase",
1431
+ cursor: "pointer",
1432
+ transition: "all 0.15s"
1381
1433
  },
1382
- children: "STOP"
1383
- }
1384
- )
1385
- ] }),
1386
- activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ jsxs7(
1387
- "button",
1388
- {
1389
- onClick: () => onCustomAction?.(action.id),
1390
- style: {
1391
- flex: 1,
1392
- minWidth: "120px",
1393
- height: touchSize,
1394
- backgroundColor: surfaceColor,
1395
- color: textColor,
1396
- border: `1px solid ${borderColor}`,
1397
- borderRadius: "6px",
1398
- fontSize: "11px",
1399
- fontWeight: 600,
1400
- fontFamily: "monospace",
1401
- letterSpacing: "0.5px",
1402
- textTransform: "uppercase",
1403
- cursor: "pointer",
1404
- transition: "all 0.15s"
1434
+ children: [
1435
+ action.icon && /* @__PURE__ */ jsx8("span", { style: { marginRight: "6px" }, children: action.icon }),
1436
+ action.label
1437
+ ]
1405
1438
  },
1406
- children: [
1407
- action.icon && /* @__PURE__ */ jsx8("span", { style: { marginRight: "6px" }, children: action.icon }),
1408
- action.label
1409
- ]
1410
- },
1411
- action.id
1412
- )) }),
1413
- binding.state.lastCommandResult && /* @__PURE__ */ jsx8(
1439
+ action.id
1440
+ )) })
1441
+ ] }),
1442
+ binding.state.lastCommandResult && showToast && /* @__PURE__ */ jsx8(
1414
1443
  "div",
1415
1444
  {
1416
1445
  style: {
1417
- marginTop: "16px",
1418
- padding: "10px 12px",
1419
- backgroundColor: surfaceColor,
1420
- border: `1px solid ${binding.state.lastCommandResult.success ? "#52525b" : borderColor}`,
1421
- borderRadius: "4px",
1422
- fontSize: "11px",
1423
- fontFamily: "monospace",
1424
- 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"
1425
1462
  },
1426
1463
  children: binding.state.lastCommandResult.message
1427
1464
  }
1428
1465
  ),
1429
1466
  /* @__PURE__ */ jsx8("style", { children: `
1430
- @keyframes slideUp {
1431
- from { transform: translateY(100%); }
1432
- 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);
1433
1481
  }
1434
- @keyframes slideIn {
1435
- from { transform: translateX(100%); }
1436
- to { transform: translateX(0); }
1482
+ to {
1483
+ opacity: 1;
1484
+ transform: translateX(0);
1437
1485
  }
1438
- ` })
1439
- ] }) });
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
+ ] });
1440
1497
  }
1441
1498
 
1442
1499
  // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx