@procaaso/alphinity-ui-components 1.0.11 → 1.1.0

package/dist/index.js

@@ -911,9 +911,17 @@ function DeviceControlPanel({
   onParameterChange,
   onStart,
   onStop,
-  onCustomAction
+  onCustomAction,
+  onOpenConfig,
+  showConfigButton = true,
+  onUndock,
+  undockIcon = "\u21F1",
+  modeSelectionStyle = "buttons",
+  embedded = false
 }) {
   const [localParameterValues, setLocalParameterValues] = useState5({});
+  const [showModeModal, setShowModeModal] = useState5(false);
+  const [pendingMode, setPendingMode] = useState5(null);
   const [showToast, setShowToast] = useState5(true);
   useEffect2(() => {
     if (binding) {
@@ -950,7 +958,8 @@ function DeviceControlPanel({
     value: Math.round(13 * fontScale),
     input: Math.round(14 * fontScale),
     button: Math.round(12 * fontScale),
-    status: Math.round(10 * fontScale)
+    status: Math.round(10 * fontScale),
+    description: Math.round(13 * fontScale)
   };
   const currentModeObj = binding.modes.find((m) => m.value === currentMode);
   const activeCapabilities = currentModeObj?.capabilities ?? binding.capabilities ?? {};
@@ -986,18 +995,37 @@ function DeviceControlPanel({
   const handleParameterInput = (parameterId, value) => {
     setLocalParameterValues((prev) => ({ ...prev, [parameterId]: value }));
   };
-  const panelStyle = {
+  const panelStyle = embedded ? {
+    // Embedded mode: static positioning for container layouts
+    position: "static",
+    width: "100%",
+    backgroundColor,
+    color: textColor,
+    borderRadius: "8px 8px 0 0",
+    boxShadow: "none",
+    border: `2px solid ${borderColor}`,
+    padding: spacing.padding,
+    maxHeight: maxHeight || "70vh",
+    overflowY: "auto",
+    ...binding.display?.style
+  } : {
+    // Fixed mode: traditional overlay positioning
     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,
@@ -1037,9 +1065,14 @@ function DeviceControlPanel({
                     fontFamily: "Arial, sans-serif",
                     letterSpacing: "0.5px",
                     textTransform: "uppercase",
-                    color: textColor
+                    color: textColor,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    maxWidth: "200px"
                   },
-                  children: titleText
+                  title: titleText.length > 25 ? titleText : void 0,
+                  children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
                 }
               ),
               binding.deviceType && /* @__PURE__ */ jsx8(
@@ -1055,25 +1088,69 @@ function DeviceControlPanel({
                 }
               )
             ] }),
-            /* @__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"
-              }
-            )
+            /* @__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"
+                }
+              ),
+              onUndock && /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  onClick: onUndock,
+                  title: "Undock panel",
+                  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: undockIcon
+                }
+              ),
+              /* @__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"
+                }
+              )
+            ] })
           ]
         }
       ),
@@ -1168,7 +1245,228 @@ function DeviceControlPanel({
             children: "Mode"
           }
         ),
-        /* @__PURE__ */ jsx8(
+        modeSelectionStyle === "dropdown" ? /* @__PURE__ */ jsx8(
+          "select",
+          {
+            value: currentMode,
+            onChange: (e) => handleModeChange(e.target.value),
+            style: {
+              width: "100%",
+              height: touchSize,
+              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",
+              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))
+          }
+        ) : modeSelectionStyle === "modal" ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+          /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              onClick: () => setShowModeModal(true),
+              style: {
+                padding: "12px",
+                backgroundColor: surfaceColor,
+                border: `2px solid ${borderColor}`,
+                borderRadius: "6px",
+                fontSize: `${fontSize.label}px`,
+                fontWeight: 600,
+                fontFamily: "Arial, sans-serif",
+                letterSpacing: "0.5px",
+                textTransform: "uppercase",
+                cursor: "pointer",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx8("span", { children: binding.modes.find((m) => m.value === currentMode)?.label || currentMode }),
+                /* @__PURE__ */ jsx8("span", { style: { fontSize: "20px", marginLeft: "8px" }, children: "\u25BC" })
+              ]
+            }
+          ),
+          showModeModal && /* @__PURE__ */ jsx8(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                zIndex: 2e4
+              },
+              onClick: () => {
+                setShowModeModal(false);
+                setPendingMode(null);
+              },
+              children: /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  onClick: (e) => e.stopPropagation(),
+                  style: {
+                    backgroundColor,
+                    borderRadius: "8px",
+                    padding: "24px",
+                    minWidth: "300px",
+                    maxWidth: "400px",
+                    border: `2px solid ${borderColor}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      "h3",
+                      {
+                        style: {
+                          margin: "0 0 4px 0",
+                          fontSize: `${fontSize.title}px`,
+                          fontWeight: 600,
+                          fontFamily: "Arial, sans-serif",
+                          color: textColor
+                        },
+                        children: "Select Mode"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      "div",
+                      {
+                        style: {
+                          marginBottom: "16px",
+                          fontSize: `${fontSize.label}px`,
+                          fontWeight: 600,
+                          fontFamily: "Arial, sans-serif",
+                          color: mutedTextColor,
+                          textTransform: "uppercase"
+                        },
+                        children: binding.display?.title || binding.deviceName || binding.tag || binding.nodeId
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      "select",
+                      {
+                        value: pendingMode || currentMode,
+                        onChange: (e) => setPendingMode(e.target.value),
+                        style: {
+                          width: "100%",
+                          height: `${touchSize}px`,
+                          marginBottom: "8px",
+                          backgroundColor: surfaceColor,
+                          color: textColor,
+                          border: `2px solid ${borderColor}`,
+                          borderRadius: "6px",
+                          fontSize: `${fontSize.label}px`,
+                          fontWeight: 600,
+                          fontFamily: "Arial, sans-serif",
+                          letterSpacing: "0.5px",
+                          textTransform: "uppercase",
+                          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
+                        ))
+                      }
+                    ),
+                    (() => {
+                      const selectedMode = binding.modes.find(
+                        (m) => m.value === (pendingMode || currentMode)
+                      );
+                      return selectedMode?.description ? /* @__PURE__ */ jsx8(
+                        "div",
+                        {
+                          style: {
+                            marginBottom: "16px",
+                            padding: "12px",
+                            backgroundColor: surfaceColor,
+                            border: `1px solid ${borderColor}`,
+                            borderRadius: "6px",
+                            fontSize: `${fontSize.description}px`,
+                            color: mutedTextColor,
+                            fontFamily: "Arial, sans-serif",
+                            lineHeight: "1.4"
+                          },
+                          children: selectedMode.description
+                        }
+                      ) : null;
+                    })(),
+                    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "12px" }, children: [
+                      /* @__PURE__ */ jsx8(
+                        "button",
+                        {
+                          onClick: () => {
+                            if (pendingMode && pendingMode !== currentMode) {
+                              handleModeChange(pendingMode);
+                            }
+                            setShowModeModal(false);
+                            setPendingMode(null);
+                          },
+                          style: {
+                            flex: 1,
+                            height: `${touchSize}px`,
+                            backgroundColor: "#4ade80",
+                            color: "#000000",
+                            border: "2px solid #22c55e",
+                            borderRadius: "6px",
+                            fontSize: `${fontSize.button}px`,
+                            fontWeight: 600,
+                            fontFamily: "Arial, sans-serif",
+                            letterSpacing: "0.5px",
+                            textTransform: "uppercase",
+                            cursor: "pointer"
+                          },
+                          children: "Confirm"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx8(
+                        "button",
+                        {
+                          onClick: () => {
+                            setShowModeModal(false);
+                            setPendingMode(null);
+                          },
+                          style: {
+                            flex: 1,
+                            height: `${touchSize}px`,
+                            backgroundColor: surfaceColor,
+                            color: textColor,
+                            border: `2px solid ${borderColor}`,
+                            borderRadius: "6px",
+                            fontSize: `${fontSize.button}px`,
+                            fontWeight: 600,
+                            fontFamily: "Arial, sans-serif",
+                            letterSpacing: "0.5px",
+                            textTransform: "uppercase",
+                            cursor: "pointer"
+                          },
+                          children: "Cancel"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -7497,19 +7795,1000 @@ 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,
+  onUndock,
+  undockIcon = "\u21F1",
+  position = "bottom",
+  align = "center",
+  touchOptimized = true,
+  compact = false,
+  fontScale = 1,
+  maxHeight,
+  maxWidth,
+  toastDuration = 3e3,
+  onOpenControls,
+  showControlsButton = true,
+  embedded = false
+}) {
+  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 = embedded ? {
+    // Embedded mode: static positioning for container layouts
+    position: "static",
+    width: "100%",
+    backgroundColor,
+    color: textColor,
+    borderRadius: "8px 8px 0 0",
+    boxShadow: "none",
+    border: `2px solid ${borderColor}`,
+    padding: spacing.padding,
+    maxHeight: maxHeight || "70vh",
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    ...binding.display?.style
+  } : {
+    // Fixed mode: traditional overlay positioning
+    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,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    maxWidth: "200px"
+                  },
+                  title: titleText.length > 25 ? titleText : void 0,
+                  children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : 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"
+                }
+              ),
+              onUndock && /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  onClick: onUndock,
+                  title: "Undock panel",
+                  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: undockIcon
+                }
+              ),
+              /* @__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 = [];
@@ -7566,6 +8845,7 @@ export {
   ControlPanel,
   DEFAULT_THRESHOLDS,
   DashboardCard,
+  DeviceConfigPanel,
   DeviceControlPanel,
   DisplayModeToggle,
   EquipmentIndicator,
@@ -7598,6 +8878,7 @@ export {
   ZoomButton,
   ZoomControls,
   calculateThresholdStatus,
+  createConfigBinding,
   createControlBinding,
   exampleDiagram,
   exportDiagram,
@@ -7611,6 +8892,7 @@ export {
   overlayStyles,
   registerSymbol,
   registerSymbols,
+  useDeviceConfigs,
   useDeviceControls,
   useDrag,
   useKeyboardShortcuts,