@procaaso/alphinity-ui-components 1.0.10 → 1.0.12

package/dist/index.js

@@ -906,13 +906,18 @@ function DeviceControlPanel({
   fontScale = 1,
   maxHeight,
   maxWidth,
+  toastDuration = 3e3,
   onModeChange,
   onParameterChange,
   onStart,
   onStop,
-  onCustomAction
+  onCustomAction,
+  onOpenConfig,
+  showConfigButton = true,
+  modeSelectionStyle = "buttons"
 }) {
   const [localParameterValues, setLocalParameterValues] = useState5({});
+  const [showToast, setShowToast] = useState5(true);
   useEffect2(() => {
     if (binding) {
       const currentParams2 = binding.parameters[binding.state.currentMode] || [];
@@ -923,6 +928,15 @@ function DeviceControlPanel({
       setLocalParameterValues(values);
     }
   }, [binding, binding?.state.currentMode]);
+  useEffect2(() => {
+    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] || [];
@@ -979,14 +993,13 @@ function DeviceControlPanel({
     position: "fixed",
     ...position === "bottom" ? {
       bottom: 0,
-      ...align === "left" ? { left: 0, right: "auto" } : align === "right" ? { right: 0, left: "auto" } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto" },
-      animation: "slideUp 0.3s ease-out",
-      maxWidth
+      ...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto", maxWidth },
+      animation: "slideUp 0.3s ease-out"
     } : {
       right: 0,
       top: 0,
       bottom: 0,
-      width: "400px",
+      width: maxWidth || "400px",
       animation: "slideIn 0.3s ease-out"
     },
     backgroundColor,
@@ -1001,442 +1014,534 @@ function DeviceControlPanel({
     ...binding.display?.style
   };
   const titleText = binding.display?.title || binding.deviceName || binding.tag || binding.nodeId;
-  return /* @__PURE__ */ jsx8(Fragment2, { children: /* @__PURE__ */ jsxs7("div", { style: panelStyle, className: binding.display?.className, children: [
-    /* @__PURE__ */ jsxs7(
-      "div",
-      {
-        style: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: "16px",
-          paddingBottom: "12px",
-          borderBottom: `2px solid ${borderColor}`
-        },
-        children: [
-          /* @__PURE__ */ jsxs7("div", { children: [
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsxs7("div", { style: panelStyle, className: binding.display?.className, children: [
+      /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+            paddingBottom: "12px",
+            borderBottom: `2px solid ${borderColor}`
+          },
+          children: [
+            /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx8(
+                "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__ */ jsx8(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: mutedTextColor,
+                    marginTop: "4px",
+                    fontFamily: "Arial, sans-serif"
+                  },
+                  children: binding.deviceType
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "8px" }, children: [
+              showConfigButton && onOpenConfig && /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  onClick: onOpenConfig,
+                  title: "Open Configuration",
+                  style: {
+                    width: touchSize * 0.7,
+                    height: touchSize * 0.7,
+                    backgroundColor: surfaceColor,
+                    color: textColor,
+                    border: `2px solid ${borderColor}`,
+                    borderRadius: "2px",
+                    fontSize: "16px",
+                    cursor: "pointer",
+                    fontWeight: 600,
+                    fontFamily: "Arial, sans-serif",
+                    padding: "0"
+                  },
+                  children: "\u2699"
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "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__ */ jsxs7(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            padding: spacing.itemPadding,
+            backgroundColor: surfaceColor,
+            border: `1px solid ${borderColor}`,
+            borderRadius: "6px",
+            marginBottom: spacing.marginBottom
+          },
+          children: [
             /* @__PURE__ */ jsx8(
-              "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__ */ jsx8(
               "div",
               {
                 style: {
-                  fontSize: "11px",
-                  color: mutedTextColor,
-                  marginTop: "4px",
-                  fontFamily: "Arial, sans-serif"
-                },
-                children: binding.deviceType
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx8(
-            "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__ */ jsxs7(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "12px",
-          padding: spacing.itemPadding,
-          backgroundColor: surfaceColor,
-          border: `1px solid ${borderColor}`,
-          borderRadius: "6px",
-          marginBottom: spacing.marginBottom
-        },
-        children: [
-          /* @__PURE__ */ jsx8(
-            "div",
-            {
-              style: {
-                width: "10px",
-                height: "10px",
-                borderRadius: "50%",
-                backgroundColor: statusColor,
-                border: "1px solid #333"
+                  width: "10px",
+                  height: "10px",
+                  borderRadius: "50%",
+                  backgroundColor: statusColor,
+                  border: "1px solid #333"
+                }
               }
-            }
-          ),
-          /* @__PURE__ */ jsxs7("div", { style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsx8(
+            ),
+            /* @__PURE__ */ jsxs7("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx8(
+                "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__ */ jsx8(
+                "div",
+                {
+                  style: {
+                    fontSize: "10px",
+                    color: mutedTextColor,
+                    marginTop: "2px",
+                    fontFamily: "Arial, sans-serif"
+                  },
+                  children: binding.state.statusMessage
+                }
+              )
+            ] }),
+            binding.state.isRunning !== void 0 && /* @__PURE__ */ jsx8(
               "div",
               {
                 style: {
+                  padding: "4px 10px",
+                  backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
+                  border: `1px solid ${borderColor}`,
+                  borderRadius: "2px",
+                  fontSize: "10px",
                   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__ */ jsx8(
-              "div",
-              {
-                style: {
-                  fontSize: "10px",
-                  color: mutedTextColor,
-                  marginTop: "2px",
-                  fontFamily: "Arial, sans-serif"
-                },
-                children: binding.state.statusMessage
+                children: binding.state.isRunning ? "RUNNING" : "STOPPED"
               }
             )
-          ] }),
-          binding.state.isRunning !== void 0 && /* @__PURE__ */ jsx8(
-            "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__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
-      /* @__PURE__ */ jsx8(
-        "label",
-        {
-          style: {
-            display: "block",
-            marginBottom: "8px",
-            fontSize: "11px",
-            fontWeight: 600,
-            textTransform: "uppercase",
-            letterSpacing: "0.5px",
-            fontFamily: "Arial, sans-serif",
-            color: mutedTextColor
-          },
-          children: "Mode"
+          ]
         }
       ),
-      /* @__PURE__ */ jsx8("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__ */ jsx8(
-          "button",
+      binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsx8(
+          "label",
           {
-            onClick: () => isEnabled && handleModeChange(mode.value),
-            disabled: !isEnabled,
             style: {
-              flex: 1,
-              minWidth: "80px",
+              display: "block",
+              marginBottom: "8px",
+              fontSize: "11px",
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.5px",
+              fontFamily: "Arial, sans-serif",
+              color: mutedTextColor
+            },
+            children: "Mode"
+          }
+        ),
+        modeSelectionStyle === "dropdown" ? /* @__PURE__ */ jsx8(
+          "select",
+          {
+            value: currentMode,
+            onChange: (e) => handleModeChange(e.target.value),
+            style: {
+              width: "100%",
               height: touchSize,
-              backgroundColor: isSelected ? selectedColor : surfaceColor,
-              color: isSelected ? "#000000" : textColor,
-              border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
+              backgroundColor: surfaceColor,
+              color: textColor,
+              border: `1px solid ${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
+              paddingLeft: "12px",
+              paddingRight: "12px",
+              cursor: "pointer"
+            },
+            children: binding.modes.map((mode) => /* @__PURE__ */ jsx8("option", { value: mode.value, disabled: mode.enabled === false, children: mode.label }, mode.value))
+          }
+        ) : /* @__PURE__ */ jsx8(
+          "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__ */ jsx8(
+                "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__ */ jsxs7("div", { style: { marginBottom: spacing.marginBottom }, children: [
+        /* @__PURE__ */ jsx8(
+          "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__ */ jsxs7(
+          "div",
+          {
+            style: {
+              marginBottom: spacing.gap,
+              padding: spacing.itemPadding,
+              backgroundColor: surfaceColor,
+              border: `1px solid ${borderColor}`,
+              borderRadius: "6px"
             },
-            children: mode.label
+            children: [
+              /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    marginBottom: spacing.gap
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      "span",
+                      {
+                        style: {
+                          fontSize: `${fontSize.label}px`,
+                          fontWeight: 600,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.5px",
+                          fontFamily: "Arial, sans-serif",
+                          color: mutedTextColor
+                        },
+                        children: param.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs7(
+                      "span",
+                      {
+                        style: {
+                          fontSize: `${fontSize.value}px`,
+                          fontWeight: 700,
+                          fontFamily: "Arial, sans-serif",
+                          color: textColor
+                        },
+                        children: [
+                          localParameterValues[param.id] ?? param.value,
+                          " ",
+                          param.unit && /* @__PURE__ */ jsx8("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              param.type === "boolean" ? /* @__PURE__ */ jsx8(
+                "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__ */ jsx8(
+                "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__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
+                }
+              ) : /* @__PURE__ */ jsx8(
+                "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
+                  }
+                }
+              )
+            ]
           },
-          mode.value
-        );
-      }) })
-    ] }),
-    currentParams.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: spacing.marginBottom }, children: [
-      /* @__PURE__ */ jsx8(
-        "label",
+          param.id
+        ))
+      ] }),
+      binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
+        activeCapabilities?.canStart && /* @__PURE__ */ jsx8(
+          "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__ */ jsx8(
+          "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__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ jsxs7(
+        "button",
         {
+          onClick: () => onCustomAction?.(action.id),
           style: {
-            display: "block",
-            marginBottom: spacing.gap,
-            fontSize: `${fontSize.label}px`,
+            flex: 1,
+            minWidth: "120px",
+            height: touchSize,
+            backgroundColor: surfaceColor,
+            color: textColor,
+            border: `1px solid ${borderColor}`,
+            borderRadius: "6px",
+            fontSize: "11px",
             fontWeight: 600,
-            textTransform: "uppercase",
+            fontFamily: "monospace",
             letterSpacing: "0.5px",
-            fontFamily: "Arial, sans-serif",
-            color: mutedTextColor
-          },
-          children: "Parameters"
-        }
-      ),
-      currentParams.map((param) => /* @__PURE__ */ jsxs7(
-        "div",
-        {
-          style: {
-            marginBottom: spacing.gap,
-            padding: spacing.itemPadding,
-            backgroundColor: surfaceColor,
-            border: `1px solid ${borderColor}`,
-            borderRadius: "6px"
+            textTransform: "uppercase",
+            cursor: "pointer",
+            transition: "all 0.15s"
           },
           children: [
-            /* @__PURE__ */ jsxs7(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  marginBottom: spacing.gap
-                },
-                children: [
-                  /* @__PURE__ */ jsx8(
-                    "span",
-                    {
-                      style: {
-                        fontSize: `${fontSize.label}px`,
-                        fontWeight: 600,
-                        textTransform: "uppercase",
-                        letterSpacing: "0.5px",
-                        fontFamily: "Arial, sans-serif",
-                        color: mutedTextColor
-                      },
-                      children: param.label
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs7(
-                    "span",
-                    {
-                      style: {
-                        fontSize: `${fontSize.value}px`,
-                        fontWeight: 700,
-                        fontFamily: "Arial, sans-serif",
-                        color: textColor
-                      },
-                      children: [
-                        localParameterValues[param.id] ?? param.value,
-                        " ",
-                        param.unit && /* @__PURE__ */ jsx8("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            param.type === "boolean" ? /* @__PURE__ */ jsx8(
-              "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__ */ jsx8(
-              "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__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
-              }
-            ) : /* @__PURE__ */ jsx8(
-              "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
-                }
-              }
-            )
+            action.icon && /* @__PURE__ */ jsx8("span", { style: { marginRight: "6px" }, children: action.icon }),
+            action.label
           ]
         },
-        param.id
-      ))
-    ] }),
-    binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
-      activeCapabilities?.canStart && /* @__PURE__ */ jsx8(
-        "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__ */ jsx8(
-        "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"
-        }
-      )
+        action.id
+      )) })
     ] }),
-    activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ jsxs7(
-      "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__ */ jsx8("span", { style: { marginRight: "6px" }, children: action.icon }),
-          action.label
-        ]
-      },
-      action.id
-    )) }),
-    binding.state.lastCommandResult && /* @__PURE__ */ jsx8(
+    binding.state.lastCommandResult && showToast && /* @__PURE__ */ jsx8(
       "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__ */ jsx8("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
@@ -7440,19 +7545,949 @@ function useDeviceControls(initialBindings) {
   };
 }
 
-// src/diagram/hooks/useSimulation.ts
-import { useEffect as useEffect12 } from "react";
-function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
-  const {
-    interval = 2e3,
-    enabled = true,
-    maxChange = 10,
-    minValue = 0,
-    maxValue = 100,
-    historyLength = 10,
-    generateValue
-  } = options;
-  useEffect12(() => {
+// src/diagram/schema/DeviceConfigBinding.ts
+function createConfigBinding(nodeId, tag, parameters, actions, options) {
+  return {
+    nodeId,
+    tag,
+    deviceName: options?.deviceName,
+    deviceType: options?.deviceType,
+    sections: options?.sections,
+    parameters,
+    state: {
+      isDirty: false,
+      isSaving: false,
+      errors: {}
+    },
+    actions,
+    display: options?.display,
+    theme: options?.theme,
+    metadata: options?.metadata
+  };
+}
+
+// src/hooks/useDeviceConfigs.ts
+import { useState as useState16, useCallback as useCallback9 } from "react";
+function useDeviceConfigs(initialConfigs) {
+  const [configs, setConfigs] = useState16(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (initialConfigs) {
+      initialConfigs.forEach((config) => {
+        map.set(config.nodeId, config);
+      });
+    }
+    return map;
+  });
+  const getConfig = useCallback9(
+    (nodeId) => {
+      return configs.get(nodeId);
+    },
+    [configs]
+  );
+  const updateConfig = useCallback9((nodeId, updates) => {
+    setConfigs((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(nodeId);
+      if (existing) {
+        newMap.set(nodeId, { ...existing, ...updates });
+      } else {
+        if ("tag" in updates && "parameters" in updates && "state" in updates && "actions" in updates) {
+          newMap.set(nodeId, { nodeId, ...updates });
+        }
+      }
+      return newMap;
+    });
+  }, []);
+  const updateConfigState = useCallback9((nodeId, stateUpdates) => {
+    setConfigs((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(nodeId);
+      if (existing) {
+        newMap.set(nodeId, {
+          ...existing,
+          state: { ...existing.state, ...stateUpdates }
+        });
+      }
+      return newMap;
+    });
+  }, []);
+  const updateConfigBatch = useCallback9((updates) => {
+    setConfigs((prev) => {
+      const newMap = new Map(prev);
+      Object.entries(updates).forEach(([nodeId, update]) => {
+        const existing = newMap.get(nodeId);
+        if (existing) {
+          newMap.set(nodeId, { ...existing, ...update });
+        }
+      });
+      return newMap;
+    });
+  }, []);
+  const updateParameterValue = useCallback9((nodeId, parameterId, value) => {
+    setConfigs((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(nodeId);
+      if (existing) {
+        const updatedParameters = existing.parameters.map(
+          (param) => param.id === parameterId ? { ...param, value } : param
+        );
+        newMap.set(nodeId, {
+          ...existing,
+          parameters: updatedParameters,
+          state: { ...existing.state, isDirty: true }
+        });
+      }
+      return newMap;
+    });
+  }, []);
+  const applyConfig = useCallback9(
+    async (nodeId) => {
+      const config = configs.get(nodeId);
+      if (!config || !config.actions.onApply) {
+        return { success: false, message: "No apply handler defined" };
+      }
+      updateConfigState(nodeId, { isSaving: true });
+      try {
+        const values = config.parameters.reduce(
+          (acc, param) => {
+            acc[param.id] = param.value;
+            return acc;
+          },
+          {}
+        );
+        const result = await config.actions.onApply(values);
+        updateConfigState(nodeId, {
+          isSaving: false,
+          lastSaveResult: result,
+          isDirty: result.success ? false : config.state.isDirty
+        });
+        return result;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Apply failed";
+        updateConfigState(nodeId, {
+          isSaving: false,
+          lastSaveResult: { success: false, message }
+        });
+        return { success: false, message };
+      }
+    },
+    [configs, updateConfigState]
+  );
+  const saveConfig = useCallback9(
+    async (nodeId) => {
+      const config = configs.get(nodeId);
+      if (!config || !config.actions.onSave) {
+        return { success: false, message: "No save handler defined" };
+      }
+      updateConfigState(nodeId, { isSaving: true });
+      try {
+        const values = config.parameters.reduce(
+          (acc, param) => {
+            acc[param.id] = param.value;
+            return acc;
+          },
+          {}
+        );
+        const result = await config.actions.onSave(values);
+        updateConfigState(nodeId, {
+          isSaving: false,
+          lastSaved: result.success ? Date.now() : config.state.lastSaved,
+          lastSaveResult: result,
+          isDirty: result.success ? false : config.state.isDirty
+        });
+        return result;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Save failed";
+        updateConfigState(nodeId, {
+          isSaving: false,
+          lastSaveResult: { success: false, message }
+        });
+        return { success: false, message };
+      }
+    },
+    [configs, updateConfigState]
+  );
+  const resetConfig = useCallback9(
+    async (nodeId) => {
+      const config = configs.get(nodeId);
+      if (!config) {
+        return { success: false, message: "Configuration not found" };
+      }
+      try {
+        const resetParameters = config.parameters.map((param) => ({
+          ...param,
+          value: param.defaultValue !== void 0 ? param.defaultValue : param.value
+        }));
+        updateConfig(nodeId, {
+          parameters: resetParameters,
+          state: { ...config.state, isDirty: true }
+        });
+        if (config.actions.onReset) {
+          const result = await config.actions.onReset();
+          updateConfigState(nodeId, {
+            lastSaveResult: result
+          });
+          return result;
+        }
+        return { success: true, message: "Reset to defaults" };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Reset failed";
+        return { success: false, message };
+      }
+    },
+    [configs, updateConfig, updateConfigState]
+  );
+  const cancelConfig = useCallback9(
+    (nodeId) => {
+      const config = configs.get(nodeId);
+      if (config?.actions.onCancel) {
+        config.actions.onCancel();
+      }
+    },
+    [configs]
+  );
+  const validateConfig = useCallback9(
+    (nodeId) => {
+      const config = configs.get(nodeId);
+      if (!config) {
+        return { valid: false, errors: { _general: "Configuration not found" } };
+      }
+      const errors = {};
+      const values = config.parameters.reduce(
+        (acc, param) => {
+          acc[param.id] = param.value;
+          return acc;
+        },
+        {}
+      );
+      config.parameters.forEach((param) => {
+        if (param.required && (param.value === void 0 || param.value === null || param.value === "")) {
+          errors[param.id] = `${param.label} is required`;
+          return;
+        }
+        if (param.type === "number" && typeof param.value === "number") {
+          if (param.min !== void 0 && param.value < param.min) {
+            errors[param.id] = `${param.label} must be at least ${param.min}`;
+          }
+          if (param.max !== void 0 && param.value > param.max) {
+            errors[param.id] = `${param.label} must be at most ${param.max}`;
+          }
+        }
+        if (param.validate) {
+          const result = param.validate(param.value);
+          if (result !== true) {
+            errors[param.id] = typeof result === "string" ? result : `${param.label} is invalid`;
+          }
+        }
+        if (param.visibleWhen && !param.visibleWhen(values)) {
+          delete errors[param.id];
+        }
+      });
+      updateConfigState(nodeId, { errors });
+      return { valid: Object.keys(errors).length === 0, errors };
+    },
+    [configs, updateConfigState]
+  );
+  const setConfig = useCallback9((config) => {
+    setConfigs((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(config.nodeId, config);
+      return newMap;
+    });
+  }, []);
+  const removeConfig = useCallback9((nodeId) => {
+    setConfigs((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(nodeId);
+      return newMap;
+    });
+  }, []);
+  const clearConfigs = useCallback9(() => {
+    setConfigs(/* @__PURE__ */ new Map());
+  }, []);
+  return {
+    configs,
+    getConfig,
+    setConfig,
+    removeConfig,
+    clearConfigs,
+    updateConfig,
+    updateConfigState,
+    updateConfigBatch,
+    updateParameterValue,
+    applyConfig,
+    saveConfig,
+    resetConfig,
+    cancelConfig,
+    validateConfig
+  };
+}
+
+// src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
+import { useState as useState17, useEffect as useEffect12, useMemo, useRef as useRef6 } from "react";
+import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+function DeviceConfigPanel({
+  binding,
+  onClose,
+  position = "bottom",
+  align = "center",
+  touchOptimized = true,
+  compact = false,
+  fontScale = 1,
+  maxHeight,
+  maxWidth,
+  toastDuration = 3e3,
+  onOpenControls,
+  showControlsButton = true
+}) {
+  const [localValues, setLocalValues] = useState17(() => {
+    if (binding) {
+      const values = {};
+      binding.parameters.forEach((param) => {
+        values[param.id] = param.value;
+      });
+      return values;
+    }
+    return {};
+  });
+  const [collapsedSections, setCollapsedSections] = useState17(() => {
+    const collapsed = /* @__PURE__ */ new Set();
+    if (binding?.sections) {
+      binding.sections.forEach((section) => {
+        if (section.collapsible && section.defaultCollapsed) {
+          collapsed.add(section.id);
+        }
+      });
+    }
+    return collapsed;
+  });
+  const [showToast, setShowToast] = useState17(true);
+  const [bindingId, setBindingId] = useState17(binding?.nodeId || null);
+  const lastResultTimestampRef = useRef6(0);
+  if (binding && binding.nodeId !== bindingId) {
+    const values = {};
+    binding.parameters.forEach((param) => {
+      values[param.id] = param.value;
+    });
+    setLocalValues(values);
+    const collapsed = /* @__PURE__ */ new Set();
+    binding.sections?.forEach((section) => {
+      if (section.collapsible && section.defaultCollapsed) {
+        collapsed.add(section.id);
+      }
+    });
+    setCollapsedSections(collapsed);
+    setBindingId(binding.nodeId);
+  }
+  useEffect12(() => {
+    const currentTimestamp = binding?.state.lastSaved || 0;
+    if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
+      lastResultTimestampRef.current = currentTimestamp;
+      const showTimer = setTimeout(() => {
+        setShowToast(true);
+        const hideTimer = setTimeout(() => {
+          setShowToast(false);
+        }, toastDuration);
+        return () => clearTimeout(hideTimer);
+      }, 0);
+      return () => clearTimeout(showTimer);
+    }
+  }, [binding?.state.lastSaveResult, binding?.state.lastSaved, toastDuration]);
+  const parametersBySection = useMemo(() => {
+    if (!binding) return { _unsectioned: [] };
+    const groups = { _unsectioned: [] };
+    binding.parameters.forEach((param) => {
+      const sectionId = param.section || "_unsectioned";
+      if (!groups[sectionId]) {
+        groups[sectionId] = [];
+      }
+      groups[sectionId].push(param);
+    });
+    Object.keys(groups).forEach((sectionId) => {
+      groups[sectionId].sort((a, b) => (a.order || 0) - (b.order || 0));
+    });
+    return groups;
+  }, [binding]);
+  const sortedSections = useMemo(() => {
+    if (!binding?.sections) return [];
+    return [...binding.sections].sort((a, b) => (a.order || 0) - (b.order || 0));
+  }, [binding]);
+  if (!binding) return null;
+  const touchSize = touchOptimized ? 56 : 40;
+  const spacing = {
+    padding: compact ? "12px" : "20px",
+    gap: compact ? "6px" : "8px",
+    marginBottom: compact ? "10px" : "16px",
+    itemPadding: compact ? "8px 10px" : "10px 12px"
+  };
+  const fontSize = {
+    title: Math.round(14 * fontScale),
+    label: Math.round(11 * fontScale),
+    value: Math.round(13 * fontScale),
+    input: Math.round(13 * fontScale),
+    button: Math.round(12 * fontScale),
+    section: Math.round(12 * fontScale),
+    description: Math.round(10 * fontScale)
+  };
+  const backgroundColor = binding.theme?.backgroundColor || "#edeeef";
+  const surfaceColor = binding.theme?.surfaceColor || "#f5f6f7";
+  const borderColor = binding.theme?.borderColor || "#d2d2d2";
+  const textColor = binding.theme?.textColor || "#000000";
+  const mutedTextColor = binding.theme?.mutedTextColor || "#666666";
+  const accentColor = binding.theme?.accentColor || "#b4d0fe";
+  const errorColor = binding.theme?.errorColor || "#ef4444";
+  const successColor = binding.theme?.successColor || "#10b981";
+  const handleValueChange = (parameterId, value) => {
+    setLocalValues((prev) => ({ ...prev, [parameterId]: value }));
+  };
+  const handleApply = async () => {
+    if (binding.actions.onApply) {
+      await binding.actions.onApply(localValues);
+    }
+  };
+  const handleSave = async () => {
+    if (binding.actions.onSave) {
+      await binding.actions.onSave(localValues);
+    }
+  };
+  const handleReset = async () => {
+    if (binding.display?.resetConfirmMessage) {
+      if (!confirm(binding.display.resetConfirmMessage)) {
+        return;
+      }
+    }
+    if (binding.actions.onReset) {
+      await binding.actions.onReset();
+    }
+  };
+  const handleCancel = () => {
+    if (binding.actions.onCancel) {
+      binding.actions.onCancel();
+    }
+    onClose();
+  };
+  const toggleSection = (sectionId) => {
+    setCollapsedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(sectionId)) {
+        next.delete(sectionId);
+      } else {
+        next.add(sectionId);
+      }
+      return next;
+    });
+  };
+  const renderParameter = (param) => {
+    if (param.visibleWhen && !param.visibleWhen(localValues)) {
+      return null;
+    }
+    const value = localValues[param.id];
+    const error = binding.state.errors?.[param.id];
+    const isDisabled = param.readOnly || param.enabled === false;
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        style: {
+          marginBottom: spacing.marginBottom
+        },
+        children: [
+          /* @__PURE__ */ jsxs18(
+            "label",
+            {
+              style: {
+                display: "block",
+                fontSize: `${fontSize.label}px`,
+                fontWeight: 600,
+                color: textColor,
+                marginBottom: "4px",
+                fontFamily: "Arial, sans-serif",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px"
+              },
+              children: [
+                param.label,
+                param.required && /* @__PURE__ */ jsx22("span", { style: { color: errorColor }, children: " *" }),
+                param.unit && /* @__PURE__ */ jsxs18("span", { style: { color: mutedTextColor, fontWeight: "normal" }, children: [
+                  " (",
+                  param.unit,
+                  ")"
+                ] })
+              ]
+            }
+          ),
+          param.description && /* @__PURE__ */ jsx22(
+            "div",
+            {
+              style: {
+                fontSize: `${fontSize.description}px`,
+                color: mutedTextColor,
+                marginBottom: "6px",
+                fontFamily: "Arial, sans-serif"
+              },
+              children: param.description
+            }
+          ),
+          param.type === "number" && /* @__PURE__ */ jsx22(
+            "input",
+            {
+              type: "number",
+              value: value ?? "",
+              onChange: (e) => handleValueChange(param.id, parseFloat(e.target.value)),
+              min: param.min,
+              max: param.max,
+              step: param.step,
+              disabled: isDisabled,
+              style: {
+                width: "100%",
+                height: `${touchSize * 0.8}px`,
+                padding: spacing.itemPadding,
+                fontSize: `${fontSize.input}px`,
+                fontFamily: "Arial, sans-serif",
+                backgroundColor: isDisabled ? "#e5e7eb" : surfaceColor,
+                color: textColor,
+                border: `1px solid ${error ? errorColor : borderColor}`,
+                borderRadius: "2px",
+                outline: "none"
+              }
+            }
+          ),
+          param.type === "string" && /* @__PURE__ */ jsx22(
+            "input",
+            {
+              type: "text",
+              value: value ?? "",
+              onChange: (e) => handleValueChange(param.id, e.target.value),
+              disabled: isDisabled,
+              style: {
+                width: "100%",
+                height: `${touchSize * 0.8}px`,
+                padding: spacing.itemPadding,
+                fontSize: `${fontSize.input}px`,
+                fontFamily: "Arial, sans-serif",
+                backgroundColor: isDisabled ? "#e5e7eb" : surfaceColor,
+                color: textColor,
+                border: `1px solid ${error ? errorColor : borderColor}`,
+                borderRadius: "2px",
+                outline: "none"
+              }
+            }
+          ),
+          param.type === "boolean" && /* @__PURE__ */ jsxs18(
+            "label",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: isDisabled ? "not-allowed" : "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx22(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: value ?? false,
+                    onChange: (e) => handleValueChange(param.id, e.target.checked),
+                    disabled: isDisabled,
+                    style: {
+                      width: "20px",
+                      height: "20px",
+                      cursor: isDisabled ? "not-allowed" : "pointer"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx22("span", { style: { fontSize: `${fontSize.value}px`, color: textColor }, children: value ? "Enabled" : "Disabled" })
+              ]
+            }
+          ),
+          param.type === "select" && /* @__PURE__ */ jsx22(
+            "select",
+            {
+              value: value ?? "",
+              onChange: (e) => handleValueChange(param.id, e.target.value),
+              disabled: isDisabled,
+              style: {
+                width: "100%",
+                height: `${touchSize * 0.8}px`,
+                padding: spacing.itemPadding,
+                fontSize: `${fontSize.input}px`,
+                fontFamily: "Arial, sans-serif",
+                backgroundColor: isDisabled ? "#e5e7eb" : surfaceColor,
+                color: textColor,
+                border: `1px solid ${error ? errorColor : borderColor}`,
+                borderRadius: "2px",
+                outline: "none"
+              },
+              children: param.options?.map((option) => /* @__PURE__ */ jsx22("option", { value: option.value, children: option.label }, option.value))
+            }
+          ),
+          error && /* @__PURE__ */ jsx22(
+            "div",
+            {
+              style: {
+                fontSize: `${fontSize.description}px`,
+                color: errorColor,
+                marginTop: "4px",
+                fontFamily: "Arial, sans-serif"
+              },
+              children: error
+            }
+          )
+        ]
+      },
+      param.id
+    );
+  };
+  const renderSection = (section) => {
+    const params = parametersBySection[section.id] || [];
+    const isCollapsed = collapsedSections.has(section.id);
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        style: {
+          marginBottom: spacing.marginBottom,
+          border: `1px solid ${borderColor}`,
+          borderRadius: "4px",
+          backgroundColor: surfaceColor
+        },
+        children: [
+          /* @__PURE__ */ jsxs18(
+            "div",
+            {
+              onClick: () => section.collapsible && toggleSection(section.id),
+              style: {
+                padding: spacing.itemPadding,
+                borderBottom: isCollapsed ? "none" : `1px solid ${borderColor}`,
+                cursor: section.collapsible ? "pointer" : "default",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsxs18("div", { children: [
+                  /* @__PURE__ */ jsxs18(
+                    "div",
+                    {
+                      style: {
+                        fontSize: `${fontSize.section}px`,
+                        fontWeight: 600,
+                        color: textColor,
+                        fontFamily: "Arial, sans-serif",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px"
+                      },
+                      children: [
+                        section.icon && /* @__PURE__ */ jsx22("span", { style: { marginRight: "8px" }, children: section.icon }),
+                        section.title
+                      ]
+                    }
+                  ),
+                  section.description && /* @__PURE__ */ jsx22(
+                    "div",
+                    {
+                      style: {
+                        fontSize: `${fontSize.description}px`,
+                        color: mutedTextColor,
+                        marginTop: "4px",
+                        fontFamily: "Arial, sans-serif"
+                      },
+                      children: section.description
+                    }
+                  )
+                ] }),
+                section.collapsible && /* @__PURE__ */ jsx22("span", { style: { fontSize: "16px", color: mutedTextColor }, children: isCollapsed ? "\u25BC" : "\u25B2" })
+              ]
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ jsx22("div", { style: { padding: spacing.padding }, children: params.map(renderParameter) })
+        ]
+      },
+      section.id
+    );
+  };
+  const panelStyle = {
+    position: "fixed",
+    ...position === "bottom" ? {
+      bottom: 0,
+      ...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto", maxWidth },
+      animation: "slideUp 0.3s ease-out"
+    } : {
+      right: 0,
+      top: 0,
+      bottom: 0,
+      width: maxWidth || "400px",
+      animation: "slideIn 0.3s ease-out"
+    },
+    backgroundColor,
+    color: textColor,
+    borderRadius: position === "bottom" ? "8px 8px 0 0" : "8px 0 0 8px",
+    boxShadow: "none",
+    border: `2px solid ${borderColor}`,
+    padding: spacing.padding,
+    zIndex: 1e4,
+    maxHeight: maxHeight || (position === "bottom" ? "70vh" : "100vh"),
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    ...binding.display?.style
+  };
+  const titleText = binding.display?.title || binding.deviceName || binding.tag || binding.nodeId;
+  const showApply = binding.display?.showApply !== false && binding.actions.onApply;
+  const showSave = binding.display?.showSave !== false && binding.actions.onSave;
+  const showReset = binding.display?.showReset !== false && binding.actions.onReset;
+  const showCancel = binding.display?.showCancel !== false;
+  return /* @__PURE__ */ jsxs18(Fragment9, { children: [
+    /* @__PURE__ */ jsxs18("div", { style: panelStyle, className: binding.display?.className, children: [
+      /* @__PURE__ */ jsxs18(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+            paddingBottom: "12px",
+            borderBottom: `2px solid ${borderColor}`
+          },
+          children: [
+            /* @__PURE__ */ jsxs18("div", { children: [
+              /* @__PURE__ */ jsx22(
+                "h3",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: `${fontSize.title}px`,
+                    fontWeight: 600,
+                    fontFamily: "Arial, sans-serif",
+                    letterSpacing: "0.5px",
+                    textTransform: "uppercase",
+                    color: textColor
+                  },
+                  children: titleText
+                }
+              ),
+              binding.display?.subtitle && /* @__PURE__ */ jsx22(
+                "div",
+                {
+                  style: {
+                    fontSize: `${fontSize.description}px`,
+                    color: mutedTextColor,
+                    marginTop: "4px",
+                    fontFamily: "Arial, sans-serif"
+                  },
+                  children: binding.display.subtitle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "8px" }, children: [
+              showControlsButton && onOpenControls && /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  onClick: onOpenControls,
+                  title: "Open Controls",
+                  style: {
+                    minWidth: `${touchSize * 1.2}px`,
+                    height: touchSize * 0.7,
+                    backgroundColor: surfaceColor,
+                    color: textColor,
+                    border: `2px solid ${borderColor}`,
+                    borderRadius: "2px",
+                    fontSize: `${fontSize.button}px`,
+                    cursor: "pointer",
+                    fontWeight: 600,
+                    fontFamily: "Arial, sans-serif",
+                    padding: "0 8px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.5px"
+                  },
+                  children: "CTRL"
+                }
+              ),
+              /* @__PURE__ */ jsx22(
+                "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.isDirty && /* @__PURE__ */ jsx22(
+        "div",
+        {
+          style: {
+            padding: spacing.itemPadding,
+            backgroundColor: "#fff3cd",
+            border: "1px solid #ffc107",
+            borderRadius: "4px",
+            marginBottom: spacing.marginBottom,
+            fontSize: `${fontSize.description}px`,
+            fontFamily: "Arial, sans-serif"
+          },
+          children: "Unsaved changes"
+        }
+      ),
+      /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflowY: "auto", marginBottom: spacing.marginBottom }, children: sortedSections.length > 0 ? sortedSections.map(renderSection) : (
+        /* Render unsectioned parameters */
+        /* @__PURE__ */ jsx22("div", { children: parametersBySection._unsectioned?.map(renderParameter) })
+      ) }),
+      /* @__PURE__ */ jsxs18(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: spacing.gap,
+            paddingTop: "12px",
+            borderTop: `2px solid ${borderColor}`,
+            flexWrap: "wrap"
+          },
+          children: [
+            showApply && /* @__PURE__ */ jsx22(
+              "button",
+              {
+                onClick: handleApply,
+                disabled: binding.state.isSaving,
+                style: {
+                  flex: 1,
+                  minWidth: "80px",
+                  height: `${touchSize}px`,
+                  backgroundColor: accentColor,
+                  color: "#000000",
+                  border: `2px solid ${borderColor}`,
+                  borderRadius: "2px",
+                  fontSize: `${fontSize.button}px`,
+                  fontWeight: 600,
+                  cursor: binding.state.isSaving ? "not-allowed" : "pointer",
+                  fontFamily: "Arial, sans-serif",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.5px"
+                },
+                children: binding.state.isSaving ? "Applying..." : "Apply"
+              }
+            ),
+            showSave && /* @__PURE__ */ jsx22(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: binding.state.isSaving,
+                style: {
+                  flex: 1,
+                  minWidth: "80px",
+                  height: `${touchSize}px`,
+                  backgroundColor: successColor,
+                  color: "#ffffff",
+                  border: `2px solid ${borderColor}`,
+                  borderRadius: "2px",
+                  fontSize: `${fontSize.button}px`,
+                  fontWeight: 600,
+                  cursor: binding.state.isSaving ? "not-allowed" : "pointer",
+                  fontFamily: "Arial, sans-serif",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.5px"
+                },
+                children: binding.state.isSaving ? "Saving..." : "Save"
+              }
+            ),
+            showReset && /* @__PURE__ */ jsx22(
+              "button",
+              {
+                onClick: handleReset,
+                disabled: binding.state.isSaving,
+                style: {
+                  flex: 1,
+                  minWidth: "80px",
+                  height: `${touchSize}px`,
+                  backgroundColor: surfaceColor,
+                  color: textColor,
+                  border: `2px solid ${borderColor}`,
+                  borderRadius: "2px",
+                  fontSize: `${fontSize.button}px`,
+                  fontWeight: 600,
+                  cursor: binding.state.isSaving ? "not-allowed" : "pointer",
+                  fontFamily: "Arial, sans-serif",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.5px"
+                },
+                children: "Reset"
+              }
+            ),
+            showCancel && /* @__PURE__ */ jsx22(
+              "button",
+              {
+                onClick: handleCancel,
+                disabled: binding.state.isSaving,
+                style: {
+                  flex: 1,
+                  minWidth: "80px",
+                  height: `${touchSize}px`,
+                  backgroundColor: surfaceColor,
+                  color: textColor,
+                  border: `2px solid ${borderColor}`,
+                  borderRadius: "2px",
+                  fontSize: `${fontSize.button}px`,
+                  fontWeight: 600,
+                  cursor: binding.state.isSaving ? "not-allowed" : "pointer",
+                  fontFamily: "Arial, sans-serif",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.5px"
+                },
+                children: "Cancel"
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    binding.state.lastSaveResult && showToast && /* @__PURE__ */ jsx22(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: "20px",
+          ...align === "right" ? { left: "20px" } : { right: "20px" },
+          backgroundColor: binding.state.lastSaveResult.success ? successColor : errorColor,
+          color: "#ffffff",
+          padding: "12px 20px",
+          borderRadius: "4px",
+          boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
+          zIndex: 1e4,
+          fontSize: `${fontSize.value}px`,
+          fontFamily: "Arial, sans-serif",
+          fontWeight: 600
+        },
+        children: binding.state.lastSaveResult.message || (binding.state.lastSaveResult.success ? "Success" : "Error")
+      }
+    )
+  ] });
+}
+
+// src/diagram/hooks/useSimulation.ts
+import { useEffect as useEffect13 } from "react";
+function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
+  const {
+    interval = 2e3,
+    enabled = true,
+    maxChange = 10,
+    minValue = 0,
+    maxValue = 100,
+    historyLength = 10,
+    generateValue
+  } = options;
+  useEffect13(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -7509,6 +8544,7 @@ export {
   ControlPanel,
   DEFAULT_THRESHOLDS,
   DashboardCard,
+  DeviceConfigPanel,
   DeviceControlPanel,
   DisplayModeToggle,
   EquipmentIndicator,
@@ -7541,6 +8577,7 @@ export {
   ZoomButton,
   ZoomControls,
   calculateThresholdStatus,
+  createConfigBinding,
   createControlBinding,
   exampleDiagram,
   exportDiagram,
@@ -7554,6 +8591,7 @@ export {
   overlayStyles,
   registerSymbol,
   registerSymbols,
+  useDeviceConfigs,
   useDeviceControls,
   useDrag,
   useKeyboardShortcuts,