@procaaso/alphinity-ui-components 1.0.10 → 1.0.11

package/dist/index.cjs

@@ -1004,6 +1004,7 @@ function DeviceControlPanel({
   fontScale = 1,
   maxHeight,
   maxWidth,
+  toastDuration = 3e3,
   onModeChange,
   onParameterChange,
   onStart,
@@ -1011,6 +1012,7 @@ function DeviceControlPanel({
   onCustomAction
 }) {
   const [localParameterValues, setLocalParameterValues] = (0, import_react5.useState)({});
+  const [showToast, setShowToast] = (0, import_react5.useState)(true);
   (0, import_react5.useEffect)(() => {
     if (binding) {
       const currentParams2 = binding.parameters[binding.state.currentMode] || [];
@@ -1021,6 +1023,15 @@ function DeviceControlPanel({
       setLocalParameterValues(values);
     }
   }, [binding, binding?.state.currentMode]);
+  (0, import_react5.useEffect)(() => {
+    if (binding?.state.lastCommandResult) {
+      setShowToast(true);
+      const timer = setTimeout(() => {
+        setShowToast(false);
+      }, toastDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [binding?.state.lastCommandResult, toastDuration]);
   if (!binding) return null;
   const currentMode = binding.state.currentMode;
   const currentParams = binding.parameters[currentMode] || [];
@@ -1099,442 +1110,488 @@ function DeviceControlPanel({
     ...binding.display?.style
   };
   const titleText = binding.display?.title || binding.deviceName || binding.tag || binding.nodeId;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: panelStyle, className: binding.display?.className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      "div",
-      {
-        style: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: "16px",
-          paddingBottom: "12px",
-          borderBottom: `2px solid ${borderColor}`
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "h3",
-              {
-                style: {
-                  margin: 0,
-                  fontSize: `${fontSize.title}px`,
-                  fontWeight: 600,
-                  fontFamily: "Arial, sans-serif",
-                  letterSpacing: "0.5px",
-                  textTransform: "uppercase",
-                  color: textColor
-                },
-                children: titleText
-              }
-            ),
-            binding.deviceType && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "div",
-              {
-                style: {
-                  fontSize: "11px",
-                  color: mutedTextColor,
-                  marginTop: "4px",
-                  fontFamily: "Arial, sans-serif"
-                },
-                children: binding.deviceType
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "button",
-            {
-              onClick: onClose,
-              style: {
-                width: touchSize * 0.7,
-                height: touchSize * 0.7,
-                backgroundColor: surfaceColor,
-                color: textColor,
-                border: `2px solid ${borderColor}`,
-                borderRadius: "2px",
-                fontSize: "18px",
-                cursor: "pointer",
-                fontWeight: "bold",
-                fontFamily: "Arial, sans-serif"
-              },
-              children: "\xD7"
-            }
-          )
-        ]
-      }
-    ),
-    binding.state.status && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "12px",
-          padding: spacing.itemPadding,
-          backgroundColor: surfaceColor,
-          border: `1px solid ${borderColor}`,
-          borderRadius: "6px",
-          marginBottom: spacing.marginBottom
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "div",
-            {
-              style: {
-                width: "10px",
-                height: "10px",
-                borderRadius: "50%",
-                backgroundColor: statusColor,
-                border: "1px solid #333"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: panelStyle, className: binding.display?.className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+            paddingBottom: "12px",
+            borderBottom: `2px solid ${borderColor}`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "h3",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: `${fontSize.title}px`,
+                    fontWeight: 600,
+                    fontFamily: "Arial, sans-serif",
+                    letterSpacing: "0.5px",
+                    textTransform: "uppercase",
+                    color: textColor
+                  },
+                  children: titleText
+                }
+              ),
+              binding.deviceType && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: mutedTextColor,
+                    marginTop: "4px",
+                    fontFamily: "Arial, sans-serif"
+                  },
+                  children: binding.deviceType
+                }
+              )
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "div",
-              {
-                style: {
-                  fontWeight: 600,
-                  textTransform: "uppercase",
-                  fontSize: `${fontSize.label}px`,
-                  fontFamily: "Arial, sans-serif",
-                  letterSpacing: "0.5px",
-                  color: textColor
-                },
-                children: binding.state.status
-              }
-            ),
-            binding.state.statusMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "div",
+              "button",
               {
+                onClick: onClose,
                 style: {
-                  fontSize: "10px",
-                  color: mutedTextColor,
-                  marginTop: "2px",
+                  width: touchSize * 0.7,
+                  height: touchSize * 0.7,
+                  backgroundColor: surfaceColor,
+                  color: textColor,
+                  border: `2px solid ${borderColor}`,
+                  borderRadius: "2px",
+                  fontSize: "18px",
+                  cursor: "pointer",
+                  fontWeight: "bold",
                   fontFamily: "Arial, sans-serif"
                 },
-                children: binding.state.statusMessage
+                children: "\xD7"
               }
             )
-          ] }),
-          binding.state.isRunning !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "div",
-            {
-              style: {
-                padding: "4px 10px",
-                backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
-                border: `1px solid ${borderColor}`,
-                borderRadius: "2px",
-                fontSize: "10px",
-                fontWeight: 600,
-                fontFamily: "Arial, sans-serif",
-                letterSpacing: "0.5px",
-                color: textColor
-              },
-              children: binding.state.isRunning ? "RUNNING" : "STOPPED"
-            }
-          )
-        ]
-      }
-    ),
-    binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "16px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "label",
-        {
-          style: {
-            display: "block",
-            marginBottom: "8px",
-            fontSize: "11px",
-            fontWeight: 600,
-            textTransform: "uppercase",
-            letterSpacing: "0.5px",
-            fontFamily: "Arial, sans-serif",
-            color: mutedTextColor
-          },
-          children: "Mode"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", gap: spacing.gap, flexWrap: "wrap" }, children: binding.modes.map((mode) => {
-        const isSelected = mode.value === currentMode;
-        const isEnabled = mode.enabled !== false;
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "button",
-          {
-            onClick: () => isEnabled && handleModeChange(mode.value),
-            disabled: !isEnabled,
-            style: {
-              flex: 1,
-              minWidth: "80px",
-              height: touchSize,
-              backgroundColor: isSelected ? selectedColor : surfaceColor,
-              color: isSelected ? "#000000" : textColor,
-              border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
-              borderRadius: "6px",
-              fontSize: `${fontSize.label}px`,
-              fontWeight: 600,
-              fontFamily: "Arial, sans-serif",
-              letterSpacing: "0.5px",
-              textTransform: "uppercase",
-              cursor: isEnabled ? "pointer" : "not-allowed",
-              opacity: isEnabled ? 1 : 0.4
-            },
-            children: mode.label
-          },
-          mode.value
-        );
-      }) })
-    ] }),
-    currentParams.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: spacing.marginBottom }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "label",
-        {
-          style: {
-            display: "block",
-            marginBottom: spacing.gap,
-            fontSize: `${fontSize.label}px`,
-            fontWeight: 600,
-            textTransform: "uppercase",
-            letterSpacing: "0.5px",
-            fontFamily: "Arial, sans-serif",
-            color: mutedTextColor
-          },
-          children: "Parameters"
+          ]
         }
       ),
-      currentParams.map((param) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      binding.state.status && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           style: {
-            marginBottom: spacing.gap,
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
             padding: spacing.itemPadding,
             backgroundColor: surfaceColor,
             border: `1px solid ${borderColor}`,
-            borderRadius: "6px"
+            borderRadius: "6px",
+            marginBottom: spacing.marginBottom
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
                 style: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  marginBottom: spacing.gap
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    "span",
-                    {
-                      style: {
-                        fontSize: `${fontSize.label}px`,
-                        fontWeight: 600,
-                        textTransform: "uppercase",
-                        letterSpacing: "0.5px",
-                        fontFamily: "Arial, sans-serif",
-                        color: mutedTextColor
-                      },
-                      children: param.label
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                    "span",
-                    {
-                      style: {
-                        fontSize: `${fontSize.value}px`,
-                        fontWeight: 700,
-                        fontFamily: "Arial, sans-serif",
-                        color: textColor
-                      },
-                      children: [
-                        localParameterValues[param.id] ?? param.value,
-                        " ",
-                        param.unit && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
-                      ]
-                    }
-                  )
-                ]
+                  width: "10px",
+                  height: "10px",
+                  borderRadius: "50%",
+                  backgroundColor: statusColor,
+                  border: "1px solid #333"
+                }
               }
             ),
-            param.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "button",
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  style: {
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    fontSize: `${fontSize.label}px`,
+                    fontFamily: "Arial, sans-serif",
+                    letterSpacing: "0.5px",
+                    color: textColor
+                  },
+                  children: binding.state.status
+                }
+              ),
+              binding.state.statusMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  style: {
+                    fontSize: "10px",
+                    color: mutedTextColor,
+                    marginTop: "2px",
+                    fontFamily: "Arial, sans-serif"
+                  },
+                  children: binding.state.statusMessage
+                }
+              )
+            ] }),
+            binding.state.isRunning !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
               {
-                onClick: () => {
-                  const newValue = !localParameterValues[param.id];
-                  handleParameterInput(param.id, newValue);
-                  handleParameterCommit(param.id, newValue);
-                },
-                disabled: param.readOnly,
                 style: {
-                  width: "100%",
-                  height: touchSize,
-                  backgroundColor: localParameterValues[param.id] ? "#3f3f46" : surfaceColor,
-                  color: localParameterValues[param.id] ? textColor : mutedTextColor,
-                  border: `1px solid ${localParameterValues[param.id] ? "#52525b" : borderColor}`,
-                  borderRadius: "4px",
-                  fontSize: "12px",
+                  padding: "4px 10px",
+                  backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
+                  border: `1px solid ${borderColor}`,
+                  borderRadius: "2px",
+                  fontSize: "10px",
                   fontWeight: 600,
-                  fontFamily: "monospace",
+                  fontFamily: "Arial, sans-serif",
                   letterSpacing: "0.5px",
-                  cursor: param.readOnly ? "not-allowed" : "pointer",
-                  transition: "all 0.15s"
-                },
-                children: localParameterValues[param.id] ? "ON" : "OFF"
-              }
-            ) : param.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "select",
-              {
-                value: localParameterValues[param.id] || param.value,
-                onChange: (e) => {
-                  handleParameterInput(param.id, e.target.value);
-                  handleParameterCommit(param.id, e.target.value);
-                },
-                disabled: param.readOnly,
-                style: {
-                  width: "100%",
-                  height: touchSize,
-                  backgroundColor: surfaceColor,
-                  color: textColor,
-                  border: `1px solid ${borderColor}`,
-                  borderRadius: "4px",
-                  padding: "0 12px",
-                  fontSize: "12px",
-                  fontFamily: "monospace",
-                  cursor: "pointer"
+                  color: textColor
                 },
-                children: param.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "input",
-              {
-                type: param.type === "number" ? "number" : "text",
-                value: localParameterValues[param.id] ?? param.value,
-                onChange: (e) => handleParameterInput(
-                  param.id,
-                  param.type === "number" ? +e.target.value : e.target.value
-                ),
-                onBlur: () => handleParameterCommit(param.id, localParameterValues[param.id]),
-                disabled: param.readOnly,
-                min: param.min,
-                max: param.max,
-                step: param.step,
-                style: {
-                  width: "100%",
-                  height: touchSize,
-                  backgroundColor: "#ffffff",
-                  color: textColor,
-                  border: `1px solid ${borderColor}`,
-                  borderRadius: "6px",
-                  padding: "0 12px",
-                  fontSize: `${fontSize.input}px`,
-                  fontFamily: "Arial, sans-serif",
-                  fontWeight: 600
-                }
+                children: binding.state.isRunning ? "RUNNING" : "STOPPED"
               }
             )
           ]
-        },
-        param.id
-      ))
-    ] }),
-    binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
-      activeCapabilities?.canStart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "button",
-        {
-          onClick: onStart,
-          disabled: binding.state.isRunning,
-          style: {
-            flex: 1,
-            height: touchSize,
-            backgroundColor: binding.state.isRunning ? "#a3a3a3" : "#10b981",
-            color: "#ffffff",
-            border: "none",
-            borderRadius: "6px",
-            fontSize: "12px",
-            fontWeight: 700,
-            fontFamily: "Arial, sans-serif",
-            letterSpacing: "0.5px",
-            cursor: binding.state.isRunning ? "not-allowed" : "pointer",
-            opacity: binding.state.isRunning ? 0.5 : 1
-          },
-          children: "START"
         }
       ),
-      activeCapabilities?.canStop && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "label",
+          {
+            style: {
+              display: "block",
+              marginBottom: "8px",
+              fontSize: "11px",
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.5px",
+              fontFamily: "Arial, sans-serif",
+              color: mutedTextColor
+            },
+            children: "Mode"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: spacing.gap,
+              overflowX: "auto",
+              overflowY: "hidden",
+              scrollbarWidth: "thin",
+              scrollbarColor: `${borderColor} transparent`,
+              paddingBottom: "4px",
+              marginBottom: "-4px"
+            },
+            children: binding.modes.map((mode) => {
+              const isSelected = mode.value === currentMode;
+              const isEnabled = mode.enabled !== false;
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "button",
+                {
+                  onClick: () => isEnabled && handleModeChange(mode.value),
+                  disabled: !isEnabled,
+                  style: {
+                    flex: "0 0 auto",
+                    minWidth: "90px",
+                    height: touchSize,
+                    backgroundColor: isSelected ? selectedColor : surfaceColor,
+                    color: isSelected ? "#000000" : textColor,
+                    border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
+                    borderRadius: "6px",
+                    fontSize: `${fontSize.label}px`,
+                    fontWeight: 600,
+                    fontFamily: "Arial, sans-serif",
+                    letterSpacing: "0.5px",
+                    textTransform: "uppercase",
+                    cursor: isEnabled ? "pointer" : "not-allowed",
+                    opacity: isEnabled ? 1 : 0.4,
+                    whiteSpace: "nowrap"
+                  },
+                  children: mode.label
+                },
+                mode.value
+              );
+            })
+          }
+        )
+      ] }),
+      currentParams.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: spacing.marginBottom }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "label",
+          {
+            style: {
+              display: "block",
+              marginBottom: spacing.gap,
+              fontSize: `${fontSize.label}px`,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.5px",
+              fontFamily: "Arial, sans-serif",
+              color: mutedTextColor
+            },
+            children: "Parameters"
+          }
+        ),
+        currentParams.map((param) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            style: {
+              marginBottom: spacing.gap,
+              padding: spacing.itemPadding,
+              backgroundColor: surfaceColor,
+              border: `1px solid ${borderColor}`,
+              borderRadius: "6px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    marginBottom: spacing.gap
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: `${fontSize.label}px`,
+                          fontWeight: 600,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.5px",
+                          fontFamily: "Arial, sans-serif",
+                          color: mutedTextColor
+                        },
+                        children: param.label
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: `${fontSize.value}px`,
+                          fontWeight: 700,
+                          fontFamily: "Arial, sans-serif",
+                          color: textColor
+                        },
+                        children: [
+                          localParameterValues[param.id] ?? param.value,
+                          " ",
+                          param.unit && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              param.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "button",
+                {
+                  onClick: () => {
+                    const newValue = !localParameterValues[param.id];
+                    handleParameterInput(param.id, newValue);
+                    handleParameterCommit(param.id, newValue);
+                  },
+                  disabled: param.readOnly,
+                  style: {
+                    width: "100%",
+                    height: touchSize,
+                    backgroundColor: localParameterValues[param.id] ? "#3f3f46" : surfaceColor,
+                    color: localParameterValues[param.id] ? textColor : mutedTextColor,
+                    border: `1px solid ${localParameterValues[param.id] ? "#52525b" : borderColor}`,
+                    borderRadius: "4px",
+                    fontSize: "12px",
+                    fontWeight: 600,
+                    fontFamily: "monospace",
+                    letterSpacing: "0.5px",
+                    cursor: param.readOnly ? "not-allowed" : "pointer",
+                    transition: "all 0.15s"
+                  },
+                  children: localParameterValues[param.id] ? "ON" : "OFF"
+                }
+              ) : param.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "select",
+                {
+                  value: localParameterValues[param.id] || param.value,
+                  onChange: (e) => {
+                    handleParameterInput(param.id, e.target.value);
+                    handleParameterCommit(param.id, e.target.value);
+                  },
+                  disabled: param.readOnly,
+                  style: {
+                    width: "100%",
+                    height: touchSize,
+                    backgroundColor: surfaceColor,
+                    color: textColor,
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: "4px",
+                    padding: "0 12px",
+                    fontSize: "12px",
+                    fontFamily: "monospace",
+                    cursor: "pointer"
+                  },
+                  children: param.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "input",
+                {
+                  type: param.type === "number" ? "number" : "text",
+                  value: localParameterValues[param.id] ?? param.value,
+                  onChange: (e) => handleParameterInput(
+                    param.id,
+                    param.type === "number" ? +e.target.value : e.target.value
+                  ),
+                  onBlur: () => handleParameterCommit(param.id, localParameterValues[param.id]),
+                  disabled: param.readOnly,
+                  min: param.min,
+                  max: param.max,
+                  step: param.step,
+                  style: {
+                    width: "100%",
+                    height: touchSize,
+                    backgroundColor: "#ffffff",
+                    color: textColor,
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: "6px",
+                    padding: "0 12px",
+                    fontSize: `${fontSize.input}px`,
+                    fontFamily: "Arial, sans-serif",
+                    fontWeight: 600
+                  }
+                }
+              )
+            ]
+          },
+          param.id
+        ))
+      ] }),
+      binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
+        activeCapabilities?.canStart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            onClick: onStart,
+            disabled: binding.state.isRunning,
+            style: {
+              flex: 1,
+              height: touchSize,
+              backgroundColor: binding.state.isRunning ? "#a3a3a3" : "#10b981",
+              color: "#ffffff",
+              border: "none",
+              borderRadius: "6px",
+              fontSize: "12px",
+              fontWeight: 700,
+              fontFamily: "Arial, sans-serif",
+              letterSpacing: "0.5px",
+              cursor: binding.state.isRunning ? "not-allowed" : "pointer",
+              opacity: binding.state.isRunning ? 0.5 : 1
+            },
+            children: "START"
+          }
+        ),
+        activeCapabilities?.canStop && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            onClick: onStop,
+            disabled: !binding.state.isRunning,
+            style: {
+              flex: 1,
+              height: touchSize,
+              backgroundColor: !binding.state.isRunning ? "#a3a3a3" : "#ef4444",
+              color: "#ffffff",
+              border: "none",
+              borderRadius: "6px",
+              fontSize: "12px",
+              fontWeight: 700,
+              fontFamily: "Arial, sans-serif",
+              letterSpacing: "0.5px",
+              cursor: !binding.state.isRunning ? "not-allowed" : "pointer",
+              opacity: !binding.state.isRunning ? 0.5 : 1
+            },
+            children: "STOP"
+          }
+        )
+      ] }),
+      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "button",
         {
-          onClick: onStop,
-          disabled: !binding.state.isRunning,
+          onClick: () => onCustomAction?.(action.id),
           style: {
             flex: 1,
+            minWidth: "120px",
             height: touchSize,
-            backgroundColor: !binding.state.isRunning ? "#a3a3a3" : "#ef4444",
-            color: "#ffffff",
-            border: "none",
+            backgroundColor: surfaceColor,
+            color: textColor,
+            border: `1px solid ${borderColor}`,
             borderRadius: "6px",
-            fontSize: "12px",
-            fontWeight: 700,
-            fontFamily: "Arial, sans-serif",
+            fontSize: "11px",
+            fontWeight: 600,
+            fontFamily: "monospace",
             letterSpacing: "0.5px",
-            cursor: !binding.state.isRunning ? "not-allowed" : "pointer",
-            opacity: !binding.state.isRunning ? 0.5 : 1
+            textTransform: "uppercase",
+            cursor: "pointer",
+            transition: "all 0.15s"
           },
-          children: "STOP"
-        }
-      )
-    ] }),
-    activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      "button",
-      {
-        onClick: () => onCustomAction?.(action.id),
-        style: {
-          flex: 1,
-          minWidth: "120px",
-          height: touchSize,
-          backgroundColor: surfaceColor,
-          color: textColor,
-          border: `1px solid ${borderColor}`,
-          borderRadius: "6px",
-          fontSize: "11px",
-          fontWeight: 600,
-          fontFamily: "monospace",
-          letterSpacing: "0.5px",
-          textTransform: "uppercase",
-          cursor: "pointer",
-          transition: "all 0.15s"
+          children: [
+            action.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
+            action.label
+          ]
         },
-        children: [
-          action.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
-          action.label
-        ]
-      },
-      action.id
-    )) }),
-    binding.state.lastCommandResult && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        action.id
+      )) })
+    ] }),
+    binding.state.lastCommandResult && showToast && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
-          marginTop: "16px",
-          padding: "10px 12px",
-          backgroundColor: surfaceColor,
-          border: `1px solid ${binding.state.lastCommandResult.success ? "#52525b" : borderColor}`,
-          borderRadius: "4px",
-          fontSize: "11px",
-          fontFamily: "monospace",
-          color: binding.state.lastCommandResult.success ? textColor : mutedTextColor
+          position: "fixed",
+          bottom: "20px",
+          ...position === "bottom" && align === "right" ? { left: "20px", right: "auto" } : { right: "20px", left: "auto" },
+          // Default to right
+          maxWidth: "400px",
+          padding: "12px 16px",
+          backgroundColor: binding.state.lastCommandResult.success ? "#10b981" : "#ef4444",
+          color: "#ffffff",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: `${fontSize.label}px`,
+          fontFamily: "Arial, sans-serif",
+          fontWeight: 600,
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          zIndex: 1e4,
+          animation: position === "bottom" && align === "right" ? "slideInToastLeft 0.3s ease-out" : "slideInToast 0.3s ease-out"
         },
         children: binding.state.lastCommandResult.message
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
-          @keyframes slideUp {
-            from { transform: translateY(100%); }
-            to { transform: translateY(0); }
+        @keyframes slideInToast {
+          from { 
+            opacity: 0;
+            transform: translateX(20px);
+          }
+          to { 
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes slideInToastLeft {
+          from { 
+            opacity: 0;
+            transform: translateX(-20px);
           }
-          @keyframes slideIn {
-            from { transform: translateX(100%); }
-            to { transform: translateX(0); }
+          to { 
+            opacity: 1;
+            transform: translateX(0);
           }
-        ` })
-  ] }) });
+        }
+        @keyframes slideUp {
+          from { transform: translateY(100%); }
+          to { transform: translateY(0); }
+        }
+        @keyframes slideIn {
+          from { transform: translateX(100%); }
+          to { transform: translateX(0); }
+        }
+      ` })
+  ] });
 }
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx