@procaaso/alphinity-ui-components 1.0.11 → 1.0.12

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(index_exports, {
   ControlPanel: () => ControlPanel,
   DEFAULT_THRESHOLDS: () => DEFAULT_THRESHOLDS,
   DashboardCard: () => DashboardCard,
+  DeviceConfigPanel: () => DeviceConfigPanel,
   DeviceControlPanel: () => DeviceControlPanel,
   DisplayModeToggle: () => DisplayModeToggle,
   EquipmentIndicator: () => EquipmentIndicator,
@@ -70,6 +71,7 @@ __export(index_exports, {
   ZoomButton: () => ZoomButton,
   ZoomControls: () => ZoomControls,
   calculateThresholdStatus: () => calculateThresholdStatus,
+  createConfigBinding: () => createConfigBinding,
   createControlBinding: () => createControlBinding,
   exampleDiagram: () => exampleDiagram,
   exportDiagram: () => exportDiagram,
@@ -83,6 +85,7 @@ __export(index_exports, {
   overlayStyles: () => overlayStyles,
   registerSymbol: () => registerSymbol,
   registerSymbols: () => registerSymbols,
+  useDeviceConfigs: () => useDeviceConfigs,
   useDeviceControls: () => useDeviceControls,
   useDrag: () => useDrag,
   useKeyboardShortcuts: () => useKeyboardShortcuts,
@@ -1009,7 +1012,10 @@ function DeviceControlPanel({
   onParameterChange,
   onStart,
   onStop,
-  onCustomAction
+  onCustomAction,
+  onOpenConfig,
+  showConfigButton = true,
+  modeSelectionStyle = "buttons"
 }) {
   const [localParameterValues, setLocalParameterValues] = (0, import_react5.useState)({});
   const [showToast, setShowToast] = (0, import_react5.useState)(true);
@@ -1088,14 +1094,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,
@@ -1153,25 +1158,48 @@ function DeviceControlPanel({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "button",
-              {
-                onClick: onClose,
-                style: {
-                  width: touchSize * 0.7,
-                  height: touchSize * 0.7,
-                  backgroundColor: surfaceColor,
-                  color: textColor,
-                  border: `2px solid ${borderColor}`,
-                  borderRadius: "2px",
-                  fontSize: "18px",
-                  cursor: "pointer",
-                  fontWeight: "bold",
-                  fontFamily: "Arial, sans-serif"
-                },
-                children: "\xD7"
-              }
-            )
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+              showConfigButton && onOpenConfig && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "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__ */ (0, import_jsx_runtime8.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    width: touchSize * 0.7,
+                    height: touchSize * 0.7,
+                    backgroundColor: surfaceColor,
+                    color: textColor,
+                    border: `2px solid ${borderColor}`,
+                    borderRadius: "2px",
+                    fontSize: "18px",
+                    cursor: "pointer",
+                    fontWeight: "bold",
+                    fontFamily: "Arial, sans-serif"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ] })
           ]
         }
       ),
@@ -1266,7 +1294,30 @@ function DeviceControlPanel({
             children: "Mode"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        modeSelectionStyle === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "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__ */ (0, import_jsx_runtime8.jsx)("option", { value: mode.value, disabled: mode.enabled === false, children: mode.label }, mode.value))
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             style: {
@@ -7595,8 +7646,938 @@ function useDeviceControls(initialBindings) {
   };
 }
 
-// src/diagram/hooks/useSimulation.ts
+// 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
 var import_react19 = require("react");
+function useDeviceConfigs(initialConfigs) {
+  const [configs, setConfigs] = (0, import_react19.useState)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (initialConfigs) {
+      initialConfigs.forEach((config) => {
+        map.set(config.nodeId, config);
+      });
+    }
+    return map;
+  });
+  const getConfig = (0, import_react19.useCallback)(
+    (nodeId) => {
+      return configs.get(nodeId);
+    },
+    [configs]
+  );
+  const updateConfig = (0, import_react19.useCallback)((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 = (0, import_react19.useCallback)((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 = (0, import_react19.useCallback)((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 = (0, import_react19.useCallback)((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 = (0, import_react19.useCallback)(
+    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 = (0, import_react19.useCallback)(
+    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 = (0, import_react19.useCallback)(
+    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 = (0, import_react19.useCallback)(
+    (nodeId) => {
+      const config = configs.get(nodeId);
+      if (config?.actions.onCancel) {
+        config.actions.onCancel();
+      }
+    },
+    [configs]
+  );
+  const validateConfig = (0, import_react19.useCallback)(
+    (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 = (0, import_react19.useCallback)((config) => {
+    setConfigs((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(config.nodeId, config);
+      return newMap;
+    });
+  }, []);
+  const removeConfig = (0, import_react19.useCallback)((nodeId) => {
+    setConfigs((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(nodeId);
+      return newMap;
+    });
+  }, []);
+  const clearConfigs = (0, import_react19.useCallback)(() => {
+    setConfigs(/* @__PURE__ */ new Map());
+  }, []);
+  return {
+    configs,
+    getConfig,
+    setConfig,
+    removeConfig,
+    clearConfigs,
+    updateConfig,
+    updateConfigState,
+    updateConfigBatch,
+    updateParameterValue,
+    applyConfig,
+    saveConfig,
+    resetConfig,
+    cancelConfig,
+    validateConfig
+  };
+}
+
+// src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
+var import_react20 = require("react");
+var import_jsx_runtime22 = require("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] = (0, import_react20.useState)(() => {
+    if (binding) {
+      const values = {};
+      binding.parameters.forEach((param) => {
+        values[param.id] = param.value;
+      });
+      return values;
+    }
+    return {};
+  });
+  const [collapsedSections, setCollapsedSections] = (0, import_react20.useState)(() => {
+    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] = (0, import_react20.useState)(true);
+  const [bindingId, setBindingId] = (0, import_react20.useState)(binding?.nodeId || null);
+  const lastResultTimestampRef = (0, import_react20.useRef)(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);
+  }
+  (0, import_react20.useEffect)(() => {
+    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 = (0, import_react20.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 = (0, import_react20.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__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        style: {
+          marginBottom: spacing.marginBottom
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            "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__ */ (0, import_jsx_runtime22.jsx)("span", { style: { color: errorColor }, children: " *" }),
+                param.unit && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { style: { color: mutedTextColor, fontWeight: "normal" }, children: [
+                  " (",
+                  param.unit,
+                  ")"
+                ] })
+              ]
+            }
+          ),
+          param.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: `${fontSize.description}px`,
+                color: mutedTextColor,
+                marginBottom: "6px",
+                fontFamily: "Arial, sans-serif"
+              },
+              children: param.description
+            }
+          ),
+          param.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "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__ */ (0, import_jsx_runtime22.jsx)(
+            "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__ */ (0, import_jsx_runtime22.jsxs)(
+            "label",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: isDisabled ? "not-allowed" : "pointer"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "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__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: `${fontSize.value}px`, color: textColor }, children: value ? "Enabled" : "Disabled" })
+              ]
+            }
+          ),
+          param.type === "select" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "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__ */ (0, import_jsx_runtime22.jsx)("option", { value: option.value, children: option.label }, option.value))
+            }
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "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__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        style: {
+          marginBottom: spacing.marginBottom,
+          border: `1px solid ${borderColor}`,
+          borderRadius: "4px",
+          backgroundColor: surfaceColor
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            "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__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        fontSize: `${fontSize.section}px`,
+                        fontWeight: 600,
+                        color: textColor,
+                        fontFamily: "Arial, sans-serif",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px"
+                      },
+                      children: [
+                        section.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { marginRight: "8px" }, children: section.icon }),
+                        section.title
+                      ]
+                    }
+                  ),
+                  section.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "div",
+                    {
+                      style: {
+                        fontSize: `${fontSize.description}px`,
+                        color: mutedTextColor,
+                        marginTop: "4px",
+                        fontFamily: "Arial, sans-serif"
+                      },
+                      children: section.description
+                    }
+                  )
+                ] }),
+                section.collapsible && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: "16px", color: mutedTextColor }, children: isCollapsed ? "\u25BC" : "\u25B2" })
+              ]
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: panelStyle, className: binding.display?.className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+            paddingBottom: "12px",
+            borderBottom: `2px solid ${borderColor}`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "h3",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: `${fontSize.title}px`,
+                    fontWeight: 600,
+                    fontFamily: "Arial, sans-serif",
+                    letterSpacing: "0.5px",
+                    textTransform: "uppercase",
+                    color: textColor
+                  },
+                  children: titleText
+                }
+              ),
+              binding.display?.subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "div",
+                {
+                  style: {
+                    fontSize: `${fontSize.description}px`,
+                    color: mutedTextColor,
+                    marginTop: "4px",
+                    fontFamily: "Arial, sans-serif"
+                  },
+                  children: binding.display.subtitle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+              showControlsButton && onOpenControls && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "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__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    width: touchSize * 0.7,
+                    height: touchSize * 0.7,
+                    backgroundColor: surfaceColor,
+                    color: textColor,
+                    border: `2px solid ${borderColor}`,
+                    borderRadius: "2px",
+                    fontSize: "18px",
+                    cursor: "pointer",
+                    fontWeight: "bold",
+                    fontFamily: "Arial, sans-serif"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      binding.state.isDirty && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "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__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, overflowY: "auto", marginBottom: spacing.marginBottom }, children: sortedSections.length > 0 ? sortedSections.map(renderSection) : (
+        /* Render unsectioned parameters */
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: parametersBySection._unsectioned?.map(renderParameter) })
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: spacing.gap,
+            paddingTop: "12px",
+            borderTop: `2px solid ${borderColor}`,
+            flexWrap: "wrap"
+          },
+          children: [
+            showApply && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "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__ */ (0, import_jsx_runtime22.jsx)(
+              "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__ */ (0, import_jsx_runtime22.jsx)(
+              "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__ */ (0, import_jsx_runtime22.jsx)(
+              "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__ */ (0, import_jsx_runtime22.jsx)(
+      "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
+var import_react21 = require("react");
 function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   const {
     interval = 2e3,
@@ -7607,7 +8588,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -7665,6 +8646,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   ControlPanel,
   DEFAULT_THRESHOLDS,
   DashboardCard,
+  DeviceConfigPanel,
   DeviceControlPanel,
   DisplayModeToggle,
   EquipmentIndicator,
@@ -7697,6 +8679,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   ZoomButton,
   ZoomControls,
   calculateThresholdStatus,
+  createConfigBinding,
   createControlBinding,
   exampleDiagram,
   exportDiagram,
@@ -7710,6 +8693,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   overlayStyles,
   registerSymbol,
   registerSymbols,
+  useDeviceConfigs,
   useDeviceControls,
   useDrag,
   useKeyboardShortcuts,