@procaaso/alphinity-ui-components 1.0.5 → 1.0.7

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(index_exports, {
   ControlPanel: () => ControlPanel,
   DEFAULT_THRESHOLDS: () => DEFAULT_THRESHOLDS,
   DashboardCard: () => DashboardCard,
+  DeviceControlPanel: () => DeviceControlPanel,
   DisplayModeToggle: () => DisplayModeToggle,
   EquipmentIndicator: () => EquipmentIndicator,
   EquipmentIndicatorWithSparkline: () => EquipmentIndicatorWithSparkline,
@@ -49,6 +50,7 @@ __export(index_exports, {
   LeftToggleButton: () => LeftToggleButton,
   LegacyValueEntry: () => LegacyValueEntry,
   NodeConfigPanel: () => NodeConfigPanel,
+  NodeControlsPanel: () => NodeControlsPanel,
   PIDCanvas: () => PIDCanvas,
   PanelContent: () => PanelContent,
   PanelTabs: () => PanelTabs,
@@ -68,6 +70,7 @@ __export(index_exports, {
   ZoomButton: () => ZoomButton,
   ZoomControls: () => ZoomControls,
   calculateThresholdStatus: () => calculateThresholdStatus,
+  createControlBinding: () => createControlBinding,
   exampleDiagram: () => exampleDiagram,
   exportDiagram: () => exportDiagram,
   generateRoutePoints: () => generateRoutePoints,
@@ -78,6 +81,9 @@ __export(index_exports, {
   mockSymbolLibrary: () => mockSymbolLibrary,
   nodeHasPort: () => nodeHasPort,
   overlayStyles: () => overlayStyles,
+  registerSymbol: () => registerSymbol,
+  registerSymbols: () => registerSymbols,
+  useDeviceControls: () => useDeviceControls,
   useDrag: () => useDrag,
   useKeyboardShortcuts: () => useKeyboardShortcuts,
   useSelection: () => useSelection,
@@ -799,14 +805,721 @@ var StatusIndicator = ({
   ] });
 };
 
+// src/components/NodeControlsPanel/NodeControlsPanel.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var NodeControlsPanel = ({
+  config,
+  onClose,
+  position = "bottom",
+  touchOptimized = true,
+  className = "",
+  style,
+  ...props
+}) => {
+  if (!config) return null;
+  const isBottom = position === "bottom";
+  const touchClass = touchOptimized ? "touch-optimized" : "";
+  const containerStyle = {
+    position: "fixed",
+    zIndex: 9999,
+    background: "white",
+    boxShadow: "0 -4px 16px rgba(0, 0, 0, 0.15)",
+    borderRadius: isBottom ? "16px 16px 0 0" : "0",
+    animation: isBottom ? "slideUp 0.3s ease-out" : "slideInRight 0.3s ease-out",
+    display: "flex",
+    flexDirection: "column",
+    ...isBottom ? {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      maxHeight: "70vh",
+      borderTop: "1px solid #e5e7eb"
+    } : {
+      right: 0,
+      top: 0,
+      bottom: 0,
+      width: touchOptimized ? "400px" : "320px",
+      borderLeft: "1px solid #e5e7eb"
+    },
+    ...style
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: touchOptimized ? "1.25rem 1.5rem" : "1rem",
+    borderBottom: "2px solid #e5e7eb",
+    background: "#f9fafb",
+    flexShrink: 0
+  };
+  const titleStyle = {
+    margin: 0,
+    fontSize: touchOptimized ? "1.5rem" : "1.25rem",
+    fontWeight: 600,
+    color: "#111827"
+  };
+  const closeButtonStyle = {
+    background: "#ef4444",
+    color: "white",
+    border: "none",
+    borderRadius: "8px",
+    width: touchOptimized ? "56px" : "44px",
+    height: touchOptimized ? "56px" : "44px",
+    fontSize: touchOptimized ? "1.75rem" : "1.5rem",
+    fontWeight: "bold",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.2s ease",
+    flexShrink: 0
+  };
+  const contentStyle = {
+    padding: touchOptimized ? "1.5rem" : "1rem",
+    overflowY: "auto",
+    flex: 1
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0, 0, 0, 0.3)",
+          zIndex: 9998,
+          animation: "fadeIn 0.3s ease-out"
+        },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: `node-controls-panel ${touchClass} ${className}`.trim(),
+        style: containerStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: headerStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style: titleStyle, children: config.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                style: closeButtonStyle,
+                onClick: onClose,
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = "#dc2626";
+                  e.currentTarget.style.transform = "scale(1.05)";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "#ef4444";
+                  e.currentTarget.style.transform = "scale(1)";
+                },
+                "aria-label": "Close",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: contentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ControlPanel,
+            {
+              title: config.nodeId,
+              selectedMode: config.currentMode,
+              modeOptions: config.modes,
+              onModeChange: config.onModeChange,
+              setpointValue: config.setpoint,
+              onSetpointChange: config.onSetpointChange,
+              secondSetpointValue: config.secondSetpoint,
+              onSecondSetpointChange: config.onSecondSetpointChange,
+              modeConfigs: config.modeConfigs,
+              status: config.status,
+              setpointReadOnly: config.readOnly,
+              showStartStopButtons: !!(config.onStart || config.onStop),
+              isRunning: config.isRunning,
+              onStart: config.onStart,
+              onStop: config.onStop,
+              startButtonText: config.startButtonText,
+              stopButtonText: config.stopButtonText,
+              size: touchOptimized ? "large" : "medium"
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
+        @keyframes slideUp {
+          from {
+            transform: translateY(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }
+
+        @keyframes slideInRight {
+          from {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+        .node-controls-panel.touch-optimized button {
+          min-height: 56px;
+          font-size: 1.125rem;
+        }
+
+        .node-controls-panel.touch-optimized input {
+          min-height: 56px;
+          font-size: 1.125rem;
+        }
+      ` })
+  ] });
+};
+
+// src/components/DeviceControlPanel/DeviceControlPanel.tsx
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DeviceControlPanel({
+  binding,
+  onClose,
+  position = "bottom",
+  touchOptimized = true,
+  onModeChange,
+  onParameterChange,
+  onStart,
+  onStop,
+  onCustomAction
+}) {
+  const [localParameterValues, setLocalParameterValues] = (0, import_react5.useState)({});
+  (0, import_react5.useEffect)(() => {
+    if (binding) {
+      const currentParams2 = binding.parameters[binding.state.currentMode] || [];
+      const values = {};
+      currentParams2.forEach((param) => {
+        values[param.id] = param.value;
+      });
+      setLocalParameterValues(values);
+    }
+  }, [binding, binding?.state.currentMode]);
+  if (!binding) return null;
+  const currentMode = binding.state.currentMode;
+  const currentParams = binding.parameters[currentMode] || [];
+  const touchSize = touchOptimized ? 56 : 40;
+  const backgroundColor = binding.theme?.backgroundColor || "#edeeef";
+  const surfaceColor = "#f5f6f7";
+  const borderColor = "#d2d2d2";
+  const textColor = binding.theme?.textColor || "#000000";
+  const mutedTextColor = "#666666";
+  const selectedColor = "#b4d0fe";
+  const statusColors = {
+    normal: binding.theme?.statusColors?.normal || "#888888",
+    // Gray (no alarm)
+    warning: binding.theme?.statusColors?.warning || "#FFD700",
+    // Yellow
+    alarm: binding.theme?.statusColors?.alarm || "#FF0000",
+    // Red
+    fault: binding.theme?.statusColors?.fault || "#FF0000",
+    // Red
+    off: binding.theme?.statusColors?.off || "#666666",
+    // Dark gray
+    starting: binding.theme?.statusColors?.starting || "#90EE90",
+    // Light green
+    stopping: binding.theme?.statusColors?.stopping || "#FFD700"
+    // Yellow
+  };
+  const statusColor = statusColors[binding.state.status || "normal"];
+  const handleModeChange = (mode) => {
+    onModeChange?.(mode);
+  };
+  const handleParameterCommit = (parameterId, value) => {
+    onParameterChange?.(parameterId, value);
+  };
+  const handleParameterInput = (parameterId, value) => {
+    setLocalParameterValues((prev) => ({ ...prev, [parameterId]: value }));
+  };
+  const panelStyle = {
+    position: "fixed",
+    ...position === "bottom" ? {
+      bottom: 0,
+      left: 0,
+      right: 0,
+      animation: "slideUp 0.3s ease-out"
+    } : {
+      right: 0,
+      top: 0,
+      bottom: 0,
+      width: "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: "20px",
+    zIndex: 9999,
+    maxHeight: position === "bottom" ? "70vh" : "100vh",
+    overflowY: "auto",
+    ...binding.display?.style
+  };
+  const titleText = binding.display?.title || binding.deviceName || binding.tag || binding.nodeId;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: panelStyle, className: binding.display?.className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "16px",
+          paddingBottom: "12px",
+          borderBottom: `2px solid ${borderColor}`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "h3",
+              {
+                style: {
+                  margin: 0,
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  fontFamily: "Arial, sans-serif",
+                  letterSpacing: "0.5px",
+                  textTransform: "uppercase",
+                  color: textColor
+                },
+                children: titleText
+              }
+            ),
+            binding.deviceType && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
+              {
+                style: {
+                  fontSize: "11px",
+                  color: mutedTextColor,
+                  marginTop: "4px",
+                  fontFamily: "Arial, sans-serif"
+                },
+                children: binding.deviceType
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              style: {
+                width: touchSize * 0.7,
+                height: touchSize * 0.7,
+                backgroundColor: surfaceColor,
+                color: textColor,
+                border: `2px solid ${borderColor}`,
+                borderRadius: "2px",
+                fontSize: "18px",
+                cursor: "pointer",
+                fontWeight: "bold",
+                fontFamily: "Arial, sans-serif"
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    ),
+    binding.state.status && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          padding: "10px 12px",
+          backgroundColor: surfaceColor,
+          border: `1px solid ${borderColor}`,
+          borderRadius: "6px",
+          marginBottom: "16px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              style: {
+                width: "10px",
+                height: "10px",
+                borderRadius: "50%",
+                backgroundColor: statusColor,
+                border: "1px solid #333"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
+              {
+                style: {
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  fontSize: "11px",
+                  fontFamily: "Arial, sans-serif",
+                  letterSpacing: "0.5px",
+                  color: textColor
+                },
+                children: binding.state.status
+              }
+            ),
+            binding.state.statusMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
+              {
+                style: {
+                  fontSize: "10px",
+                  color: mutedTextColor,
+                  marginTop: "2px",
+                  fontFamily: "Arial, sans-serif"
+                },
+                children: binding.state.statusMessage
+              }
+            )
+          ] }),
+          binding.state.isRunning !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              style: {
+                padding: "4px 10px",
+                backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
+                border: `1px solid ${borderColor}`,
+                borderRadius: "2px",
+                fontSize: "10px",
+                fontWeight: 600,
+                fontFamily: "Arial, sans-serif",
+                letterSpacing: "0.5px",
+                color: textColor
+              },
+              children: binding.state.isRunning ? "RUNNING" : "STOPPED"
+            }
+          )
+        ]
+      }
+    ),
+    binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "label",
+        {
+          style: {
+            display: "block",
+            marginBottom: "8px",
+            fontSize: "11px",
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            fontFamily: "Arial, sans-serif",
+            color: mutedTextColor
+          },
+          children: "Mode"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: binding.modes.map((mode) => {
+        const isSelected = mode.value === currentMode;
+        const isEnabled = mode.enabled !== false;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            onClick: () => isEnabled && handleModeChange(mode.value),
+            disabled: !isEnabled,
+            style: {
+              flex: 1,
+              minWidth: "80px",
+              height: touchSize,
+              backgroundColor: isSelected ? selectedColor : surfaceColor,
+              color: isSelected ? "#000000" : textColor,
+              border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
+              borderRadius: "6px",
+              fontSize: "11px",
+              fontWeight: 600,
+              fontFamily: "Arial, sans-serif",
+              letterSpacing: "0.5px",
+              textTransform: "uppercase",
+              cursor: isEnabled ? "pointer" : "not-allowed",
+              opacity: isEnabled ? 1 : 0.4
+            },
+            children: mode.label
+          },
+          mode.value
+        );
+      }) })
+    ] }),
+    currentParams.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "label",
+        {
+          style: {
+            display: "block",
+            marginBottom: "8px",
+            fontSize: "11px",
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            fontFamily: "Arial, sans-serif",
+            color: mutedTextColor
+          },
+          children: "Parameters"
+        }
+      ),
+      currentParams.map((param) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          style: {
+            marginBottom: "10px",
+            padding: "10px",
+            backgroundColor: surfaceColor,
+            border: `1px solid ${borderColor}`,
+            borderRadius: "6px"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "div",
+              {
+                style: { display: "flex", justifyContent: "space-between", marginBottom: "8px" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        fontWeight: 600,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px",
+                        fontFamily: "Arial, sans-serif",
+                        color: mutedTextColor
+                      },
+                      children: param.label
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "13px",
+                        fontWeight: 700,
+                        fontFamily: "Arial, sans-serif",
+                        color: textColor
+                      },
+                      children: [
+                        localParameterValues[param.id] ?? param.value,
+                        " ",
+                        param.unit && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            param.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                onClick: () => {
+                  const newValue = !localParameterValues[param.id];
+                  handleParameterInput(param.id, newValue);
+                  handleParameterCommit(param.id, newValue);
+                },
+                disabled: param.readOnly,
+                style: {
+                  width: "100%",
+                  height: touchSize,
+                  backgroundColor: localParameterValues[param.id] ? "#3f3f46" : surfaceColor,
+                  color: localParameterValues[param.id] ? textColor : mutedTextColor,
+                  border: `1px solid ${localParameterValues[param.id] ? "#52525b" : borderColor}`,
+                  borderRadius: "4px",
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  fontFamily: "monospace",
+                  letterSpacing: "0.5px",
+                  cursor: param.readOnly ? "not-allowed" : "pointer",
+                  transition: "all 0.15s"
+                },
+                children: localParameterValues[param.id] ? "ON" : "OFF"
+              }
+            ) : param.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "select",
+              {
+                value: localParameterValues[param.id] || param.value,
+                onChange: (e) => {
+                  handleParameterInput(param.id, e.target.value);
+                  handleParameterCommit(param.id, e.target.value);
+                },
+                disabled: param.readOnly,
+                style: {
+                  width: "100%",
+                  height: touchSize,
+                  backgroundColor: surfaceColor,
+                  color: textColor,
+                  border: `1px solid ${borderColor}`,
+                  borderRadius: "4px",
+                  padding: "0 12px",
+                  fontSize: "12px",
+                  fontFamily: "monospace",
+                  cursor: "pointer"
+                },
+                children: param.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "input",
+              {
+                type: param.type === "number" ? "number" : "text",
+                value: localParameterValues[param.id] ?? param.value,
+                onChange: (e) => handleParameterInput(
+                  param.id,
+                  param.type === "number" ? +e.target.value : e.target.value
+                ),
+                onBlur: () => handleParameterCommit(param.id, localParameterValues[param.id]),
+                disabled: param.readOnly,
+                min: param.min,
+                max: param.max,
+                step: param.step,
+                style: {
+                  width: "100%",
+                  height: touchSize,
+                  backgroundColor: "#ffffff",
+                  color: textColor,
+                  border: `1px solid ${borderColor}`,
+                  borderRadius: "6px",
+                  padding: "0 12px",
+                  fontSize: "14px",
+                  fontFamily: "Arial, sans-serif",
+                  fontWeight: 600
+                }
+              }
+            )
+          ]
+        },
+        param.id
+      ))
+    ] }),
+    binding.display?.showStartStop !== false && (binding.capabilities?.canStart || binding.capabilities?.canStop) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: [
+      binding.capabilities?.canStart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          onClick: onStart,
+          disabled: binding.state.isRunning,
+          style: {
+            flex: 1,
+            height: touchSize,
+            backgroundColor: binding.state.isRunning ? "#a3a3a3" : "#10b981",
+            color: "#ffffff",
+            border: "none",
+            borderRadius: "6px",
+            fontSize: "12px",
+            fontWeight: 700,
+            fontFamily: "Arial, sans-serif",
+            letterSpacing: "0.5px",
+            cursor: binding.state.isRunning ? "not-allowed" : "pointer",
+            opacity: binding.state.isRunning ? 0.5 : 1
+          },
+          children: "START"
+        }
+      ),
+      binding.capabilities?.canStop && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          onClick: onStop,
+          disabled: !binding.state.isRunning,
+          style: {
+            flex: 1,
+            height: touchSize,
+            backgroundColor: !binding.state.isRunning ? "#a3a3a3" : "#ef4444",
+            color: "#ffffff",
+            border: "none",
+            borderRadius: "6px",
+            fontSize: "12px",
+            fontWeight: 700,
+            fontFamily: "Arial, sans-serif",
+            letterSpacing: "0.5px",
+            cursor: !binding.state.isRunning ? "not-allowed" : "pointer",
+            opacity: !binding.state.isRunning ? 0.5 : 1
+          },
+          children: "STOP"
+        }
+      )
+    ] }),
+    binding.capabilities?.customActions && binding.capabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: binding.capabilities.customActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        onClick: () => onCustomAction?.(action.id),
+        style: {
+          flex: 1,
+          minWidth: "120px",
+          height: touchSize,
+          backgroundColor: surfaceColor,
+          color: textColor,
+          border: `1px solid ${borderColor}`,
+          borderRadius: "6px",
+          fontSize: "11px",
+          fontWeight: 600,
+          fontFamily: "monospace",
+          letterSpacing: "0.5px",
+          textTransform: "uppercase",
+          cursor: "pointer",
+          transition: "all 0.15s"
+        },
+        children: [
+          action.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
+          action.label
+        ]
+      },
+      action.id
+    )) }),
+    binding.state.lastCommandResult && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        style: {
+          marginTop: "16px",
+          padding: "10px 12px",
+          backgroundColor: surfaceColor,
+          border: `1px solid ${binding.state.lastCommandResult.success ? "#52525b" : borderColor}`,
+          borderRadius: "4px",
+          fontSize: "11px",
+          fontFamily: "monospace",
+          color: binding.state.lastCommandResult.success ? textColor : mutedTextColor
+        },
+        children: binding.state.lastCommandResult.message
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
+          @keyframes slideUp {
+            from { transform: translateY(100%); }
+            to { transform: translateY(0); }
+          }
+          @keyframes slideIn {
+            from { transform: translateX(100%); }
+            to { transform: translateX(0); }
+          }
+        ` })
+  ] }) });
+}
+
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var import_material3 = require("@mui/material");
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.styles.tsx
 var import_material = require("@mui/material");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FullscreenContainer = (0, import_styled.default)(import_material.Box)(
   ({ leftCollapsed, rightCollapsed }) => {
     const getGridTemplateAreas = () => {
@@ -931,7 +1644,7 @@ var DisplayModeToggle = (0, import_styled.default)(import_material.IconButton)((
     transform: "translateX(-50%) scale(1.05)"
   }
 }));
-var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "div",
   {
     style: {
@@ -943,7 +1656,7 @@ var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     }
   }
 );
-var ChevronRight = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var ChevronRight = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "div",
   {
     style: {
@@ -1054,10 +1767,10 @@ var ScrollableSVGWrapper = (0, import_styled.default)("div")({
 });
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.overlays.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_material2 = require("@mui/material");
 var import_styled2 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var baseOverlayStyles = {
   tank: {
     background: "linear-gradient(135deg, rgba(69, 90, 120, 0.95) 0%, rgba(52, 73, 94, 0.95) 100%)",
@@ -1119,8 +1832,8 @@ var SVGLockedOverlay = ({
   onClick,
   containerSelector = ".tff-svg-container"
 }) => {
-  const [svgOffset, setSvgOffset] = (0, import_react5.useState)({ x: 0, y: 0 });
-  (0, import_react5.useEffect)(() => {
+  const [svgOffset, setSvgOffset] = (0, import_react6.useState)({ x: 0, y: 0 });
+  (0, import_react6.useEffect)(() => {
     const updateSvgOffset = () => {
       const containerElement = document.querySelector(containerSelector);
       const svgElement = containerElement?.querySelector("svg");
@@ -1140,7 +1853,7 @@ var SVGLockedOverlay = ({
   const pixelX = svgX + svgOffset.x;
   const pixelY = svgY + svgOffset.y;
   const appliedStyle = theme ? { ...overlayStyles[theme], ...style } : style;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_material2.Box,
     {
       className: `svg-locked-overlay ${className}`.trim(),
@@ -1204,7 +1917,7 @@ var CardUnit = (0, import_styled2.default)("div")({
 });
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.visuals.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var TrendLine = ({
   values,
   width = 60,
@@ -1214,7 +1927,7 @@ var TrendLine = ({
   backgroundColor = "rgba(255, 255, 255, 0.1)"
 }) => {
   if (!values || values.length < 2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         style: {
@@ -1226,7 +1939,7 @@ var TrendLine = ({
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "8px", color: "#ccc" }, children: "No data" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: "8px", color: "#ccc" }, children: "No data" })
       }
     );
   }
@@ -1238,7 +1951,7 @@ var TrendLine = ({
     const x = 4 + i / (values.length - 1) * (width - 8);
     return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       style: {
@@ -1249,8 +1962,8 @@ var TrendLine = ({
         position: "relative",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width, height, style: { position: "absolute", top: 0, left: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width, height, style: { position: "absolute", top: 0, left: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "path",
           {
             d: pathData,
@@ -1261,7 +1974,7 @@ var TrendLine = ({
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "circle",
           {
             cx: 4 + (width - 8),
@@ -1299,7 +2012,7 @@ var CircularGauge = ({
   const borderColor = isHex ? hexToRgba(color, 0.9) : color;
   const backgroundColor = isHex ? hexToRgba(color, 0.15) : color;
   const borderStrokeColor = isHex ? hexToRgba(color, 0.4) : color;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       style: {
@@ -1308,7 +2021,7 @@ var CircularGauge = ({
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
             style: {
@@ -1320,8 +2033,8 @@ var CircularGauge = ({
               border: `1px solid ${borderStrokeColor}`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "circle",
                   {
                     cx: size / 2,
@@ -1332,7 +2045,7 @@ var CircularGauge = ({
                     strokeWidth: 1
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "circle",
                   {
                     cx: size / 2,
@@ -1343,7 +2056,7 @@ var CircularGauge = ({
                     fill: "transparent"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "circle",
                   {
                     cx: size / 2,
@@ -1359,7 +2072,7 @@ var CircularGauge = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 "div",
                 {
                   style: {
@@ -1375,14 +2088,14 @@ var CircularGauge = ({
                   },
                   children: [
                     value.toFixed(1),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "8px", opacity: 0.9, color: "white" }, children: unit })
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: "8px", opacity: 0.9, color: "white" }, children: unit })
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             style: {
@@ -1413,7 +2126,7 @@ var Sparkline = ({ data, width, height, color }) => {
     const y = height - 8 - (value - min) / range * (height - 8);
     return `${x + 4},${y + 4}`;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       style: {
@@ -1427,7 +2140,7 @@ var Sparkline = ({ data, width, height, color }) => {
         justifyContent: "center",
         boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points, fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points, fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }) })
     }
   );
 };
@@ -1441,8 +2154,8 @@ var EquipmentIndicatorWithSparkline = ({
   sparklineOffset = { x: 40, y: 0 }
 }) => {
   const hasSparkline = sparklineData && sparklineData.length > 1 && Math.max(...sparklineData) !== Math.min(...sparklineData);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SVGLockedOverlay, { svgX, svgY, style: { transform: "translate(-50%, -50%)" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SVGLockedOverlay, { svgX, svgY, style: { transform: "translate(-50%, -50%)" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         style: {
@@ -1463,7 +2176,7 @@ var EquipmentIndicatorWithSparkline = ({
         children: label
       }
     ) }),
-    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SVGLockedOverlay, { svgX: svgX + sparklineOffset.x, svgY: svgY + sparklineOffset.y, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Sparkline, { data: sparklineData, width: 60, height: 20, color }) })
+    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SVGLockedOverlay, { svgX: svgX + sparklineOffset.x, svgY: svgY + sparklineOffset.y, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Sparkline, { data: sparklineData, width: 60, height: 20, color }) })
   ] });
 };
 var EquipmentIndicator = ({
@@ -1476,7 +2189,7 @@ var EquipmentIndicator = ({
   className
 }) => {
   const overlayStyle = style !== void 0 ? { transform: "translate(-50%, -50%)", ...style } : { transform: "translate(-50%, -50%)" };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SVGLockedOverlay, { svgX, svgY, style: overlayStyle, className, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SVGLockedOverlay, { svgX, svgY, style: overlayStyle, className, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       style: {
@@ -1500,7 +2213,7 @@ var EquipmentIndicator = ({
 };
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function FullscreenWorkspace({
   svgContent,
   overlays,
@@ -1528,10 +2241,10 @@ function FullscreenWorkspace({
   className = "",
   ...rest
 }) {
-  const [leftCollapsedState, setLeftCollapsedState] = import_react6.default.useState(defaultLeftCollapsed);
-  const [rightCollapsedState, setRightCollapsedState] = import_react6.default.useState(defaultRightCollapsed);
-  const [internalDisplayMode, setInternalDisplayMode] = import_react6.default.useState(displayMode ?? defaultDisplayMode);
-  const [internalTab, setInternalTab] = import_react6.default.useState(
+  const [leftCollapsedState, setLeftCollapsedState] = import_react7.default.useState(defaultLeftCollapsed);
+  const [rightCollapsedState, setRightCollapsedState] = import_react7.default.useState(defaultRightCollapsed);
+  const [internalDisplayMode, setInternalDisplayMode] = import_react7.default.useState(displayMode ?? defaultDisplayMode);
+  const [internalTab, setInternalTab] = import_react7.default.useState(
     tabs && tabs.length > 0 ? tabs[0].value : ""
   );
   const leftCollapsed = leftCollapsedProp ?? leftCollapsedState;
@@ -1539,10 +2252,10 @@ function FullscreenWorkspace({
   const isDisplayModeControlled = displayMode !== void 0;
   const currentDisplayMode = isDisplayModeControlled ? displayMode : internalDisplayMode;
   const isTabControlled = activeTab !== void 0 && activeTab !== null;
-  const resolvedTabs = import_react6.default.useMemo(() => tabs ?? [], [tabs]);
+  const resolvedTabs = import_react7.default.useMemo(() => tabs ?? [], [tabs]);
   const defaultTabValue = resolvedTabs.length > 0 ? resolvedTabs[0].value : "";
   const currentTab = isTabControlled ? activeTab : internalTab || defaultTabValue;
-  import_react6.default.useEffect(() => {
+  import_react7.default.useEffect(() => {
     if (resolvedTabs.length > 0) {
       const values = resolvedTabs.map((tab) => tab.value);
       if (!values.includes(currentTab)) {
@@ -1551,7 +2264,7 @@ function FullscreenWorkspace({
       }
     }
   }, [resolvedTabs, activeTab, currentTab, defaultTabValue]);
-  import_react6.default.useEffect(() => {
+  import_react7.default.useEffect(() => {
     if (displayMode !== void 0) {
       setInternalDisplayMode(displayMode);
     }
@@ -1586,7 +2299,7 @@ function FullscreenWorkspace({
   const currentTabContent = resolvedTabs.find((tab) => tab.value === currentTab)?.content ?? null;
   const showLeftToggle = Boolean(leftPanel);
   const showRightToggle = Boolean(rightPanel);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     FullscreenContainer,
     {
       leftCollapsed,
@@ -1594,25 +2307,25 @@ function FullscreenWorkspace({
       className: `tff-svg-container ${className}`.trim(),
       ...rest,
       children: [
-        showLeftToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        showLeftToggle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           LeftToggleButton,
           {
             collapsed: leftCollapsed,
             onClick: handleLeftToggle,
             "aria-label": leftCollapsed ? "Expand left panel" : "Collapse left panel",
-            children: leftCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronRight, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronLeft, {})
+            children: leftCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronRight, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronLeft, {})
           }
         ),
-        showRightToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        showRightToggle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           RightToggleButton,
           {
             collapsed: rightCollapsed,
             onClick: handleRightToggle,
             "aria-label": rightCollapsed ? "Expand right panel" : "Collapse right panel",
-            children: rightCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronRight, {})
+            children: rightCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronRight, {})
           }
         ),
-        showDisplayModeToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        showDisplayModeToggle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           DisplayModeToggle,
           {
             mode: currentDisplayMode,
@@ -1621,9 +2334,9 @@ function FullscreenWorkspace({
             children: currentDisplayMode === "dashboard" ? "Dashboard Mode" : "Standard Mode"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SVGArea, { children: [
-          showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ZoomControls, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SVGArea, { children: [
+          showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ZoomControls, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               ZoomButton,
               {
                 onClick: onZoomIn,
@@ -1633,7 +2346,7 @@ function FullscreenWorkspace({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               ZoomButton,
               {
                 onClick: onZoomOut,
@@ -1643,7 +2356,7 @@ function FullscreenWorkspace({
                 children: "-"
               }
             ),
-            onResetZoom && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            onResetZoom && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               ZoomButton,
               {
                 onClick: onResetZoom,
@@ -1654,44 +2367,44 @@ function FullscreenWorkspace({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollableSVGWrapper, { className: "svg-scroll-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FixedSVGContainer, { className: "svg-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollableSVGWrapper, { className: "svg-scroll-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(FixedSVGContainer, { className: "svg-container", children: [
             svgContent,
             overlays
           ] }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LeftPanel, { collapsed: leftCollapsed, children: resolvedTabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LeftPanel, { collapsed: leftCollapsed, children: resolvedTabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             PanelTabs,
             {
               value: currentTab,
               onChange: handleTabChangeInternal,
               "aria-label": "Left panel tabs",
-              children: resolvedTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material3.Tab, { label: tab.label, value: tab.value }, tab.value))
+              children: resolvedTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material3.Tab, { label: tab.label, value: tab.value }, tab.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PanelContent, { children: currentTabContent })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanelContent, { children: currentTabContent })
         ] }) : leftPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RightPanel, { collapsed: rightCollapsed, children: rightPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FooterPanel, { children: footer })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RightPanel, { collapsed: rightCollapsed, children: rightPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FooterPanel, { children: footer })
       ]
     }
   );
 }
 
 // src/theme/ThemeContext.tsx
-var import_react7 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react7.createContext)(void 0);
+var import_react8 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react8.createContext)(void 0);
 var useTheme = () => {
-  const context = (0, import_react7.useContext)(ThemeContext);
+  const context = (0, import_react8.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 };
 var ThemeProvider = ({ children }) => {
-  const [theme, setThemeState] = (0, import_react7.useState)("modern");
-  (0, import_react7.useEffect)(() => {
+  const [theme, setThemeState] = (0, import_react8.useState)("modern");
+  (0, import_react8.useEffect)(() => {
     document.body.className = "";
     document.body.classList.add(`theme-${theme}`);
     document.documentElement.className = "";
@@ -1703,11 +2416,11 @@ var ThemeProvider = ({ children }) => {
   const setTheme = (newTheme) => {
     setThemeState(newTheme);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
 };
 
 // src/theme/ThemeToggle.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ThemeToggle = ({
   size = "medium",
   position = "top-right",
@@ -1778,15 +2491,15 @@ var ThemeToggle = ({
     transition: "all 0.2s ease",
     boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: thumbStyle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: thumbStyle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
   ] });
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/diagram/symbols/mockSymbolLibrary.ts
 var mockSymbolLibrary = {
@@ -1794,13 +2507,13 @@ var mockSymbolLibrary = {
     id: "valve-gate",
     name: "Gate Valve (Powered)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 52, height: 52 },
+    viewBox: { x: 0, y: 0, width: 26, height: 26 },
     ports: [
-      { id: "inlet", x: 0, y: 36, type: "inlet", direction: "in" },
-      { id: "outlet", x: 52, y: 36, type: "outlet", direction: "out" }
+      { id: "inlet", x: 0, y: 18, type: "inlet", direction: "in" },
+      { id: "outlet", x: 26, y: 18, type: "outlet", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Actuator box -->
         <rect x="16.74" y="0" width="18.02" height="18.02" fill="var(--symbol-fill, #edeeef)" stroke="var(--symbol-stroke, #666666)" pointer-events="all"/>
         <!-- Actuator stem -->
@@ -1818,13 +2531,13 @@ var mockSymbolLibrary = {
     id: "pump-positive-displacement",
     name: "Positive Displacement Pump",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 56.25, height: 56.25 },
+    viewBox: { x: 0, y: 0, width: 28.125, height: 28.125 },
     ports: [
-      { id: "inlet", x: 0, y: 28.125, type: "inlet", direction: "in" },
-      { id: "outlet", x: 56.25, y: 28.125, type: "outlet", direction: "out" }
+      { id: "inlet", x: 0, y: 14.0625, type: "inlet", direction: "in" },
+      { id: "outlet", x: 28.125, y: 14.0625, type: "outlet", direction: "out" }
     ],
     svgContent: `
-      <g transform="scale(0.5625)">
+      <g transform="scale(0.28125)">
         <!-- Outer circle -->
         <ellipse 
           cx="50" 
@@ -1866,13 +2579,13 @@ var mockSymbolLibrary = {
     id: "vannefold-bottom",
     name: "Vannefold Block (Bottom)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 88, height: 67.785156 },
+    viewBox: { x: -0.25, y: -0.25, width: 44, height: 33.892578 },
     ports: [
-      { id: "bottom-inlet", x: 0, y: 25, type: "control", direction: "in" },
-      { id: "top-outlet", x: 48, y: 65, type: "control", direction: "out" }
+      { id: "bottom-inlet", x: 0, y: 12.5, type: "control", direction: "in" },
+      { id: "top-outlet", x: 24, y: 32.5, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Bottom inlet pipe -->
         <path 
           d="M 3,29.785156 H 0 v -10 h 3 m 14,10 h 3 v -10 h -3 m -15,8 h 16 m -16,-6 h 16"
@@ -1930,13 +2643,13 @@ var mockSymbolLibrary = {
     id: "vannefold-middle",
     name: "Vannefold Block (Middle)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 95, height: 53.097656 },
+    viewBox: { x: -0.25, y: -0.25, width: 47.5, height: 26.548828 },
     ports: [
-      { id: "left-inlet", x: 0, y: 27.3125, type: "control", direction: "in" },
-      { id: "right-outlet", x: 95, y: 27.3125, type: "control", direction: "out" }
+      { id: "left-inlet", x: 0, y: 13.65625, type: "control", direction: "in" },
+      { id: "right-outlet", x: 47.5, y: 13.65625, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Left inlet pipe -->
         <path 
           d="M 3,22.3125 H 0 v 10 H 3 m 14,-10 h 3 v 10 h -3 m -15,-8 h 16 m -16,6 h 16"
@@ -1985,13 +2698,13 @@ var mockSymbolLibrary = {
     id: "vannefold-top",
     name: "Vannefold Block (Top)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 95, height: 60.785156 },
+    viewBox: { x: -0.25, y: -0.25, width: 47.5, height: 30.392578 },
     ports: [
-      { id: "bottom-inlet", x: 0, y: 35, type: "control", direction: "in" },
-      { id: "top-outlet", x: 48, y: 0, type: "control", direction: "out" }
+      { id: "bottom-inlet", x: 0, y: 17.5, type: "control", direction: "in" },
+      { id: "top-outlet", x: 24, y: 0, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Bottom inlet pipe -->
         <path 
           d="M 3,30 H 0 V 40 H 3 M 17,30 h 3 V 40 H 17 M 2,32 H 18 M 2,38 H 18"
@@ -2041,13 +2754,13 @@ var mockSymbolLibrary = {
     id: "vannefold-top-top-inlet",
     name: "Vannefold Block (Top, Top Inlet)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 88, height: 67.576004 },
+    viewBox: { x: 0, y: 0, width: 44, height: 33.788002 },
     ports: [
-      { id: "top-inlet", x: 47, y: 0, type: "control", direction: "in" },
-      { id: "bottom-outlet", x: 0, y: 42, type: "control", direction: "out" }
+      { id: "top-inlet", x: 23.5, y: 0, type: "control", direction: "in" },
+      { id: "bottom-outlet", x: 0, y: 21, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Top inlet pipe flange -->
         <path 
           d="M 52,3 V 1.3598666e-8 H 42 V 3 m 10,14 v 3 H 42 V 17 M 50,2 V 18 M 44,2 v 16" 
@@ -2105,13 +2818,13 @@ var mockSymbolLibrary = {
     id: "vannefold-left",
     name: "Vannefold Block (Left)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 67.785156, height: 88.5 },
+    viewBox: { x: 0, y: 0, width: 33.892578, height: 44.25 },
     ports: [
-      { id: "left-inlet", x: 0, y: 41.5, type: "control", direction: "in" },
-      { id: "right-outlet", x: 42, y: 87, type: "control", direction: "out" }
+      { id: "left-inlet", x: 0, y: 20.75, type: "control", direction: "in" },
+      { id: "right-outlet", x: 21, y: 43.5, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Left inlet pipe flange -->
         <path 
           d="M 3,46.5 H 2.8789924e-8 v -10 H 3 m 14,10 h 3 v -10 h -3 m -15,8 h 16 m -16,-6 h 16" 
@@ -2168,13 +2881,13 @@ var mockSymbolLibrary = {
     id: "vannefold-right",
     name: "Vannefold Block (Right)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 67.785156, height: 88.5 },
+    viewBox: { x: 0, y: 0, width: 33.892578, height: 44.25 },
     ports: [
-      { id: "right-inlet", x: 67.785156, y: 41.5, type: "control", direction: "in" },
-      { id: "left-outlet", x: 24.785156, y: 87.5, type: "control", direction: "out" }
+      { id: "right-inlet", x: 33.892578, y: 20.75, type: "control", direction: "in" },
+      { id: "left-outlet", x: 12.392578, y: 43.75, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Right inlet pipe flange -->
         <path 
           d="m 63.785156,46.5 h 3 v -10 h -3 m -14,10 h -3 v -10 h 3 m 15,8 h -16 m 16,-6 h -16" 
@@ -2231,16 +2944,16 @@ var mockSymbolLibrary = {
     id: "pixer",
     name: "Pixer",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 46.6875 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 23.34375 },
     ports: [
-      { id: "right-outlet", x: 50.625, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-outlet", x: 0, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-inlet", x: 50.625, y: 19.6875, type: "control", direction: "in" },
-      { id: "right-inlet", x: 0, y: 19.6875, type: "control", direction: "in" },
-      { id: "top-inlet", x: 25.3125, y: 0, type: "control", direction: "in" }
+      { id: "right-outlet", x: 25.3125, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-outlet", x: 0, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-inlet", x: 25.3125, y: 9.84375, type: "control", direction: "in" },
+      { id: "right-inlet", x: 0, y: 9.84375, type: "control", direction: "in" },
+      { id: "top-inlet", x: 12.65625, y: 0, type: "control", direction: "in" }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -186)">
+      <g transform="scale(0.0984375) translate(-195, -186)">
         <!-- Top mounting flange -->
         <rect 
           width="141.313" 
@@ -2505,16 +3218,16 @@ var mockSymbolLibrary = {
     id: "pixer-barb",
     name: "Pixer (Hose Barb)",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 46.6875 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 23.34375 },
     ports: [
-      { id: "right-outlet", x: 50.625, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-outlet", x: 0, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-inlet", x: 50.625, y: 19.6875, type: "control", direction: "in" },
-      { id: "right-inlet", x: 0, y: 19.6875, type: "control", direction: "in" },
-      { id: "top-inlet", x: 25.3125, y: 0, type: "control", direction: "in" }
+      { id: "right-outlet", x: 25.3125, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-outlet", x: 0, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-inlet", x: 25.3125, y: 9.84375, type: "control", direction: "in" },
+      { id: "right-inlet", x: 0, y: 9.84375, type: "control", direction: "in" },
+      { id: "top-inlet", x: 12.65625, y: 0, type: "control", direction: "in" }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -186)">
+      <g transform="scale(0.0984375) translate(-195, -186)">
         <!-- Hose barb ridges at top -->
         <rect 
           width="20" 
@@ -2796,15 +3509,15 @@ var mockSymbolLibrary = {
     id: "vessel-balloon",
     name: "Vessel",
     category: "vessel",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 91 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 45.5 },
     ports: [
-      { id: "top", type: "inlet", x: 25.3125, y: 0 },
-      { id: "left", type: "inlet", x: 5, y: 39 },
-      { id: "right", type: "outlet", x: 45.625, y: 39 },
-      { id: "bottom", type: "outlet", x: 25.3125, y: 91 }
+      { id: "top", type: "inlet", x: 12.65625, y: 0 },
+      { id: "left", type: "inlet", x: 2.5, y: 19.5 },
+      { id: "right", type: "outlet", x: 22.8125, y: 19.5 },
+      { id: "bottom", type: "outlet", x: 12.65625, y: 45.5 }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -100)">
+      <g transform="scale(0.0984375) translate(-195, -100)">
         <!-- Top opening nozzle -->
         <rect 
           width="65" 
@@ -2869,19 +3582,53 @@ var mockSymbolLibrary = {
       tags: ["vessel", "storage", "tank", "balloon"]
     }
   },
+  "hollow-fiber": {
+    id: "hollow-fiber",
+    name: "Hollow Fiber",
+    category: "other",
+    viewBox: { x: 0, y: 0, width: 30, height: 109 },
+    ports: [
+      { id: "top-left", type: "outlet", x: 10, y: 2.75 },
+      { id: "top-right", type: "outlet", x: 24.5, y: 22.25 },
+      { id: "bottom-left", type: "inlet", x: 10, y: 106.25 },
+      { id: "bottom-right", type: "inlet", x: 24.5, y: 87.25 }
+    ],
+    svgContent: `
+      <g transform="scale(0.5)">
+        <!-- Top left flange -->
+        <rect x="10.5" y="0.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Top right flange -->
+        <rect x="39.5" y="39.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Bottom left flange -->
+        <rect x="10.5" y="207.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Bottom right flange -->
+        <rect x="39.5" y="169.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Main vessel body -->
+        <rect x="0.5" y="9.5" width="40" height="199.5" rx="6" ry="6" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+      </g>
+    `,
+    metadata: {
+      description: "Hollow fiber filter module with multiple inlet/outlet connections",
+      tags: ["filter", "hollow-fiber", "filtration", "separation", "membrane"]
+    }
+  },
   "psr-f": {
     id: "psr-f",
     name: "PSR F",
     category: "instrument",
-    viewBox: { x: 0, y: 0, width: 57, height: 57 },
+    viewBox: { x: 0, y: 0, width: 28.5, height: 28.5 },
     ports: [
-      { id: "top", type: "signal", x: 28.5, y: 14.25 },
-      { id: "right", type: "signal", x: 42.75, y: 28.5 },
-      { id: "bottom", type: "signal", x: 28.5, y: 42.75 },
-      { id: "left", type: "signal", x: 14.25, y: 28.5 }
+      { id: "top", type: "signal", x: 14.25, y: 7.125 },
+      { id: "right", type: "signal", x: 21.375, y: 14.25 },
+      { id: "bottom", type: "signal", x: 14.25, y: 21.375 },
+      { id: "left", type: "signal", x: 7.125, y: 14.25 }
     ],
     svgContent: `
-      <g transform="scale(0.5) translate(28.5, 28.5)">
+      <g transform="scale(0.25) translate(28.5, 28.5)">
         <!-- Circle background -->
         <ellipse 
           cx="28.5" 
@@ -2915,15 +3662,15 @@ var mockSymbolLibrary = {
     id: "psr-p",
     name: "PSR P",
     category: "instrument",
-    viewBox: { x: 0, y: 0, width: 57, height: 57 },
+    viewBox: { x: 0, y: 0, width: 28.5, height: 28.5 },
     ports: [
-      { id: "top", type: "signal", x: 28.5, y: 14.25 },
-      { id: "right", type: "signal", x: 42.75, y: 28.5 },
-      { id: "bottom", type: "signal", x: 28.5, y: 42.75 },
-      { id: "left", type: "signal", x: 14.25, y: 28.5 }
+      { id: "top", type: "signal", x: 14.25, y: 7.125 },
+      { id: "right", type: "signal", x: 21.375, y: 14.25 },
+      { id: "bottom", type: "signal", x: 14.25, y: 21.375 },
+      { id: "left", type: "signal", x: 7.125, y: 14.25 }
     ],
     svgContent: `
-      <g transform="scale(0.5) translate(28.5, 28.5)">
+      <g transform="scale(0.25) translate(28.5, 28.5)">
         <!-- Circle background -->
         <ellipse 
           cx="28.5" 
@@ -2954,15 +3701,26 @@ var mockSymbolLibrary = {
     }
   }
 };
+var customSymbols = {};
+function registerSymbol(symbol) {
+  customSymbols[symbol.id] = symbol;
+}
+function registerSymbols(symbols) {
+  if (Array.isArray(symbols)) {
+    symbols.forEach((symbol) => registerSymbol(symbol));
+  } else {
+    Object.values(symbols).forEach((symbol) => registerSymbol(symbol));
+  }
+}
 function getSymbolDefinition(symbolId) {
-  return mockSymbolLibrary[symbolId];
+  return customSymbols[symbolId] ?? mockSymbolLibrary[symbolId];
 }
 function getAvailableSymbols() {
-  return Object.keys(mockSymbolLibrary);
+  return [...Object.keys(customSymbols), ...Object.keys(mockSymbolLibrary)];
 }
 
 // src/components/PIDCanvas/NodeRenderer.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function NodeRenderer({
   nodes: nodes2,
   selectedNodeIds,
@@ -2973,13 +3731,13 @@ function NodeRenderer({
   dragOffset = { x: 0, y: 0 },
   enableDrag = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("g", { id: "layer-nodes", children: nodes2.filter((node) => node.visible !== false).map((node) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { id: "layer-nodes", children: nodes2.filter((node) => node.visible !== false).map((node) => {
     const symbol = getSymbolDefinition(node.symbolId);
     const isSelected = selectedNodeIds?.has(node.id) ?? false;
     const isDragging = draggingNodeId === node.id;
     if (!symbol) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "circle",
           {
             cx: node.transform.x,
@@ -2991,7 +3749,7 @@ function NodeRenderer({
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "text",
           {
             x: node.transform.x,
@@ -3048,7 +3806,7 @@ function NodeRenderer({
     };
     const fillColor = node.customColors?.fill ?? getStatusColor(node.status);
     const strokeColor = node.customColors?.stroke ?? "rgb(0, 0, 0)";
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "g",
       {
         "data-node-id": node.id,
@@ -3081,7 +3839,7 @@ function NodeRenderer({
           }
         },
         children: [
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "rect",
             {
               x: "-5",
@@ -3096,7 +3854,7 @@ function NodeRenderer({
               pointerEvents: "none"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "g",
             {
               dangerouslySetInnerHTML: { __html: symbol.svgContent },
@@ -3104,7 +3862,7 @@ function NodeRenderer({
               style: { pointerEvents: "auto" }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "text",
             {
               x: symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0),
@@ -3125,7 +3883,7 @@ function NodeRenderer({
 }
 
 // src/components/PIDCanvas/PipeRenderer.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function PipeRenderer({
   pipes,
   selectedPipeIds,
@@ -3140,7 +3898,7 @@ function PipeRenderer({
   waypointDragOffset,
   onPipeSegmentClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "layer-pipes", children: pipes.filter((pipe) => pipe.visible !== false).map((pipe) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { id: "layer-pipes", children: pipes.filter((pipe) => pipe.visible !== false).map((pipe) => {
     const isSelected = selectedPipeIds?.has(pipe.id) ?? false;
     const isEditing = enableWaypointEditing && editingPipeId === pipe.id;
     const showEditingControls = enableWaypointEditing && isSelected;
@@ -3159,7 +3917,7 @@ function PipeRenderer({
     const strokeWidth = isSelected ? (pipeStyle.strokeWidth || 3) + 2 : pipeStyle.strokeWidth || 3;
     const strokeDasharray = pipeStyle.strokeDasharray;
     const opacity = pipeStyle.opacity !== void 0 ? pipeStyle.opacity : 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "g",
       {
         "data-pipe-id": pipe.id,
@@ -3172,8 +3930,8 @@ function PipeRenderer({
           cursor: onPipeClick ? "pointer" : "default"
         },
         children: [
-          !enableWaypointEditing && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-            onPipeClick && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          !enableWaypointEditing && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+            onPipeClick && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "polyline",
               {
                 points: pointsString,
@@ -3185,7 +3943,7 @@ function PipeRenderer({
                 pointerEvents: "stroke"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "polyline",
               {
                 points: pointsString,
@@ -3209,7 +3967,7 @@ function PipeRenderer({
             const waypointSize = isSelectedWaypoint ? 8 : isDragging ? 8 : showEditingControls ? 6 : isSelected ? 3 : 2;
             const waypointOpacity = isSelectedWaypoint ? 1 : isDragging ? 1 : showEditingControls ? 0.9 : isSelected ? 0.8 : 0.5;
             const waypointColor = isSelectedWaypoint ? "#3b82f6" : isEndpoint && showEditingControls ? "#f59e0b" : isDragging ? "#10b981" : stroke;
-            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "circle",
               {
                 cx: point.x,
@@ -3246,12 +4004,12 @@ function PipeRenderer({
               `${pipe.id}-point-${idx}`
             );
           }),
-          showEditingControls && onPipeSegmentClick && displayPoints.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: displayPoints.slice(0, -1).map((point, idx) => {
+          showEditingControls && onPipeSegmentClick && displayPoints.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: displayPoints.slice(0, -1).map((point, idx) => {
             const nextPoint = displayPoints[idx + 1];
             const midX = (point.x + nextPoint.x) / 2;
             const midY = (point.y + nextPoint.y) / 2;
-            return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "circle",
                 {
                   cx: midX,
@@ -3267,7 +4025,7 @@ function PipeRenderer({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "circle",
                 {
                   cx: midX,
@@ -3283,7 +4041,7 @@ function PipeRenderer({
               )
             ] }, `${pipe.id}-segment-${idx}`);
           }) }),
-          pipe.showLabel !== false && pipe.label && pipe.routePoints.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          pipe.showLabel !== false && pipe.label && pipe.routePoints.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "text",
             {
               x: pipe.routePoints[Math.floor(pipe.routePoints.length / 2)].x + (pipe.labelOffset?.x ?? 0),
@@ -3305,7 +4063,7 @@ function PipeRenderer({
 }
 
 // src/components/PIDCanvas/DataOverlay.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DataOverlay({
   nodeId,
   x,
@@ -3325,7 +4083,7 @@ function DataOverlay({
   const offsetX = display?.offsetX ?? 0;
   const offsetY = display?.offsetY ?? 0;
   if (!showValue) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
   }
   const formatValue = (val) => {
     if (typeof val === "number") {
@@ -3343,9 +4101,14 @@ function DataOverlay({
     fault: { bg: "#dc2626", text: "#ffffff", border: "#b91c1c" },
     off: { bg: "#6b7280", text: "#ffffff", border: "#4b5563" }
   };
-  const customColor = telemetry.statusColors?.[value.status];
-  const defaultColorSet = defaultStatusColors[value.status] || defaultStatusColors.normal;
-  const statusColors = customColor ? { bg: customColor, text: "#ffffff", border: customColor } : defaultColorSet;
+  const getStatusColors = () => {
+    const customColor = telemetry.statusColors?.[value.status];
+    if (customColor) {
+      return { bg: customColor, text: "#ffffff", border: customColor };
+    }
+    return defaultStatusColors[value.status] || defaultStatusColors.normal;
+  };
+  const statusColors = getStatusColors();
   const colors = backgroundColor && backgroundColor !== "status" ? { bg: backgroundColor, text: textColor || "#ffffff", border: backgroundColor } : statusColors;
   const finalTextColor = textColor || colors.text;
   const formattedValue = formatValue(value.value);
@@ -3372,8 +4135,8 @@ function DataOverlay({
   const overlayWidth = 80 * scale;
   const displayX = x + offsetX;
   const displayY = y + offsetY;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { "data-overlay-node": nodeId, "data-status": value.status, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { "data-overlay-node": nodeId, "data-status": value.status, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "rect",
       {
         x: displayX - overlayWidth / 2,
@@ -3388,7 +4151,7 @@ function DataOverlay({
         filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "text",
       {
         x: displayX,
@@ -3401,7 +4164,7 @@ function DataOverlay({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "text",
       {
         x: displayX,
@@ -3414,7 +4177,7 @@ function DataOverlay({
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    showStatus && value.status !== "normal" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "circle",
       {
         cx: displayX + 35 * scale,
@@ -3422,7 +4185,7 @@ function DataOverlay({
         r: 3 * scale,
         fill: finalTextColor,
         opacity: "0.9",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -3433,7 +4196,7 @@ function DataOverlay({
         )
       }
     ),
-    value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "text",
       {
         x: displayX,
@@ -3450,7 +4213,7 @@ function DataOverlay({
         ]
       }
     ),
-    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { transform: `translate(${displayX - 35 * scale}, ${displayY + (label ? 5 : 0) * scale})`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { transform: `translate(${displayX - 35 * scale}, ${displayY + (label ? 5 : 0) * scale})`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "path",
       {
         d: sparklinePath,
@@ -3466,8 +4229,8 @@ function DataOverlay({
 }
 
 // src/components/PIDCanvas/PositionPanel.tsx
-var import_react8 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function PositionPanel({
   selectedNode,
   selectedWaypoint,
@@ -3475,9 +4238,9 @@ function PositionPanel({
   onWaypointPositionChange,
   position = "top-right"
 }) {
-  const [x, setX] = (0, import_react8.useState)("");
-  const [y, setY] = (0, import_react8.useState)("");
-  (0, import_react8.useEffect)(() => {
+  const [x, setX] = (0, import_react9.useState)("");
+  const [y, setY] = (0, import_react9.useState)("");
+  (0, import_react9.useEffect)(() => {
     if (selectedNode) {
       setX(selectedNode.transform.x.toFixed(2));
       setY(selectedNode.transform.y.toFixed(2));
@@ -3536,7 +4299,7 @@ function PositionPanel({
     "bottom-left": { bottom: 10, left: 10 },
     "bottom-right": { bottom: 10, right: 10 }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       style: {
@@ -3553,11 +4316,11 @@ function PositionPanel({
         fontSize: "13px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginBottom: "8px", fontWeight: 600, color: "#333" }, children: "Position" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: { width: "16px", color: "#666" }, children: "X:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginBottom: "8px", fontWeight: 600, color: "#333" }, children: "Position" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { width: "16px", color: "#666" }, children: "X:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "input",
               {
                 type: "number",
@@ -3575,9 +4338,9 @@ function PositionPanel({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: { width: "16px", color: "#666" }, children: "Y:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { width: "16px", color: "#666" }, children: "Y:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "input",
               {
                 type: "number",
@@ -3596,14 +4359,14 @@ function PositionPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginTop: "8px", fontSize: "11px", color: "#888" }, children: "Use arrow keys to nudge (\xB11px)" })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginTop: "8px", fontSize: "11px", color: "#888" }, children: "Use arrow keys to nudge (\xB11px)" })
       ]
     }
   );
 }
 
 // src/diagram/hooks/useViewBox.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useViewBox(options) {
   const {
     initialViewBox,
@@ -3614,16 +4377,16 @@ function useViewBox(options) {
     zoomSensitivity = 1e-3,
     allowLeftClickPan = true
   } = options;
-  const [viewBox, setViewBox] = (0, import_react9.useState)(initialViewBox);
-  const svgRef = (0, import_react9.useRef)(null);
-  const isPanningRef = (0, import_react9.useRef)(false);
-  const lastMousePosRef = (0, import_react9.useRef)({ x: 0, y: 0 });
-  const spaceKeyDownRef = (0, import_react9.useRef)(false);
-  const lastTouchDistanceRef = (0, import_react9.useRef)(null);
-  const resetViewBox = (0, import_react9.useCallback)(() => {
+  const [viewBox, setViewBox] = (0, import_react10.useState)(initialViewBox);
+  const svgRef = (0, import_react10.useRef)(null);
+  const isPanningRef = (0, import_react10.useRef)(false);
+  const lastMousePosRef = (0, import_react10.useRef)({ x: 0, y: 0 });
+  const spaceKeyDownRef = (0, import_react10.useRef)(false);
+  const lastTouchDistanceRef = (0, import_react10.useRef)(null);
+  const resetViewBox = (0, import_react10.useCallback)(() => {
     setViewBox(initialViewBox);
   }, [initialViewBox]);
-  const zoomIn = (0, import_react9.useCallback)(() => {
+  const zoomIn = (0, import_react10.useCallback)(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.min(1 / minZoom, currentZoom * 1.25);
@@ -3640,7 +4403,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, minZoom]);
-  const zoomOut = (0, import_react9.useCallback)(() => {
+  const zoomOut = (0, import_react10.useCallback)(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.max(1 / maxZoom, currentZoom * 0.8);
@@ -3657,7 +4420,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, maxZoom]);
-  const fitToContent = (0, import_react9.useCallback)((bounds, padding = 50) => {
+  const fitToContent = (0, import_react10.useCallback)((bounds, padding = 50) => {
     const contentWidth = bounds.maxX - bounds.minX;
     const contentHeight = bounds.maxY - bounds.minY;
     if (contentWidth === 0 || contentHeight === 0) {
@@ -3685,7 +4448,7 @@ function useViewBox(options) {
       height: newHeight
     });
   }, [initialViewBox]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
     const handleWheel = (e) => {
@@ -3718,7 +4481,7 @@ function useViewBox(options) {
     svg.addEventListener("wheel", handleWheel, { passive: false });
     return () => svg.removeEventListener("wheel", handleWheel);
   }, [enableZoom, zoomSensitivity, minZoom, initialViewBox]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!enablePan || !svgRef.current) return;
     const svg = svgRef.current;
     const handleMouseDown = (e) => {
@@ -3794,7 +4557,7 @@ function useViewBox(options) {
       window.removeEventListener("keyup", handleKeyUp);
     };
   }, [enablePan, allowLeftClickPan]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!svgRef.current) return;
     if (!enablePan && !enableZoom) return;
     const svg = svgRef.current;
@@ -3885,7 +4648,7 @@ function useViewBox(options) {
       svg.removeEventListener("touchend", handleTouchEnd);
     };
   }, [enablePan, enableZoom, minZoom, initialViewBox]);
-  const screenToWorld = (0, import_react9.useCallback)(
+  const screenToWorld = (0, import_react10.useCallback)(
     (screenX, screenY) => {
       const svg = svgRef.current;
       if (!svg) return { x: screenX, y: screenY };
@@ -3924,15 +4687,15 @@ function useViewBox(options) {
 }
 
 // src/diagram/hooks/useSelection.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useSelection(options = {}) {
   const {
     multiSelect = true,
     initialSelection = { selectedNodeIds: /* @__PURE__ */ new Set(), selectedPipeIds: /* @__PURE__ */ new Set() },
     onSelectionChange
   } = options;
-  const [selection, setSelection] = (0, import_react10.useState)(initialSelection);
-  const notifyChange = (0, import_react10.useCallback)(
+  const [selection, setSelection] = (0, import_react11.useState)(initialSelection);
+  const notifyChange = (0, import_react11.useCallback)(
     (newSelection) => {
       if (onSelectionChange) {
         onSelectionChange(newSelection);
@@ -3940,15 +4703,15 @@ function useSelection(options = {}) {
     },
     [onSelectionChange]
   );
-  const isNodeSelected = (0, import_react10.useCallback)(
+  const isNodeSelected = (0, import_react11.useCallback)(
     (nodeId) => selection.selectedNodeIds.has(nodeId),
     [selection.selectedNodeIds]
   );
-  const isPipeSelected = (0, import_react10.useCallback)(
+  const isPipeSelected = (0, import_react11.useCallback)(
     (pipeId) => selection.selectedPipeIds.has(pipeId),
     [selection.selectedPipeIds]
   );
-  const selectNode = (0, import_react10.useCallback)(
+  const selectNode = (0, import_react11.useCallback)(
     (nodeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newNodeIds = new Set(isMultiSelect && multiSelect ? prev.selectedNodeIds : []);
@@ -3967,7 +4730,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const selectPipe = (0, import_react10.useCallback)(
+  const selectPipe = (0, import_react11.useCallback)(
     (pipeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newPipeIds = new Set(isMultiSelect && multiSelect ? prev.selectedPipeIds : []);
@@ -3986,7 +4749,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const clearSelection = (0, import_react10.useCallback)(() => {
+  const clearSelection = (0, import_react11.useCallback)(() => {
     const newSelection = {
       selectedNodeIds: /* @__PURE__ */ new Set(),
       selectedPipeIds: /* @__PURE__ */ new Set()
@@ -3994,7 +4757,7 @@ function useSelection(options = {}) {
     setSelection(newSelection);
     notifyChange(newSelection);
   }, [notifyChange]);
-  const selectNodes = (0, import_react10.useCallback)(
+  const selectNodes = (0, import_react11.useCallback)(
     (nodeIds) => {
       const newSelection = {
         selectedNodeIds: new Set(nodeIds),
@@ -4005,7 +4768,7 @@ function useSelection(options = {}) {
     },
     [notifyChange]
   );
-  const selectPipes = (0, import_react10.useCallback)(
+  const selectPipes = (0, import_react11.useCallback)(
     (pipeIds) => {
       const newSelection = {
         selectedNodeIds: /* @__PURE__ */ new Set(),
@@ -4029,23 +4792,23 @@ function useSelection(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetry.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useTelemetry(options = {}) {
   const {
     initialBindings = [],
     onTelemetryChange,
     refreshInterval = 0
   } = options;
-  const [telemetry, setTelemetry] = (0, import_react11.useState)(() => {
+  const [telemetry, setTelemetry] = (0, import_react12.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     initialBindings.forEach((binding) => {
       map.set(binding.nodeId, binding);
     });
     return map;
   });
-  const telemetryRef = (0, import_react11.useRef)(telemetry);
+  const telemetryRef = (0, import_react12.useRef)(telemetry);
   telemetryRef.current = telemetry;
-  const notifyChange = (0, import_react11.useCallback)(
+  const notifyChange = (0, import_react12.useCallback)(
     (newTelemetry) => {
       if (onTelemetryChange) {
         onTelemetryChange(newTelemetry);
@@ -4053,7 +4816,7 @@ function useTelemetry(options = {}) {
     },
     [onTelemetryChange]
   );
-  const updateTelemetry = (0, import_react11.useCallback)(
+  const updateTelemetry = (0, import_react12.useCallback)(
     (nodeId, value) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -4083,7 +4846,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const updateTelemetryBatch = (0, import_react11.useCallback)(
+  const updateTelemetryBatch = (0, import_react12.useCallback)(
     (updates) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -4137,16 +4900,16 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const getTelemetry = (0, import_react11.useCallback)(
+  const getTelemetry = (0, import_react12.useCallback)(
     (nodeId) => telemetryRef.current.get(nodeId),
     []
   );
-  const clearTelemetry = (0, import_react11.useCallback)(() => {
+  const clearTelemetry = (0, import_react12.useCallback)(() => {
     const newMap = /* @__PURE__ */ new Map();
     setTelemetry(newMap);
     notifyChange(newMap);
   }, [notifyChange]);
-  const setBindings = (0, import_react11.useCallback)(
+  const setBindings = (0, import_react12.useCallback)(
     (bindings) => {
       const newMap = /* @__PURE__ */ new Map();
       bindings.forEach((binding) => {
@@ -4157,7 +4920,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (refreshInterval <= 0) return;
     const intervalId = setInterval(() => {
       notifyChange(telemetryRef.current);
@@ -4175,10 +4938,10 @@ function useTelemetry(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetryStatus.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
   const { enabled = true, mapStatus } = options;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!enabled) return;
     const defaultMapStatus = (telemetryStatus) => {
       switch (telemetryStatus) {
@@ -4217,7 +4980,7 @@ function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
 }
 
 // src/diagram/hooks/useDrag.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useDrag(options = {}) {
   const {
     onDragStart,
@@ -4227,23 +4990,23 @@ function useDrag(options = {}) {
     dragThreshold = 3,
     screenToWorld = (x, y) => ({ x, y })
   } = options;
-  const [dragState, setDragState] = (0, import_react13.useState)({
+  const [dragState, setDragState] = (0, import_react14.useState)({
     isDragging: false,
     startPosition: null,
     offset: { x: 0, y: 0 },
     draggedId: null
   });
-  const [isListening, setIsListening] = (0, import_react13.useState)(false);
-  const dragStartRef = (0, import_react13.useRef)(null);
-  const hasMovedRef = (0, import_react13.useRef)(false);
-  const applySnap = (0, import_react13.useCallback)(
+  const [isListening, setIsListening] = (0, import_react14.useState)(false);
+  const dragStartRef = (0, import_react14.useRef)(null);
+  const hasMovedRef = (0, import_react14.useRef)(false);
+  const applySnap = (0, import_react14.useCallback)(
     (value) => {
       if (snapToGrid <= 0) return value;
       return Math.round(value / snapToGrid) * snapToGrid;
     },
     [snapToGrid]
   );
-  const handleMouseMove = (0, import_react13.useCallback)(
+  const handleMouseMove = (0, import_react14.useCallback)(
     (event) => {
       if (!dragStartRef.current) return;
       const { id, screenStart: _screenStart, itemPosition, clickOffset } = dragStartRef.current;
@@ -4284,7 +5047,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleMouseUp = (0, import_react13.useCallback)(
+  const handleMouseUp = (0, import_react14.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -4321,7 +5084,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  const handleTouchMove = (0, import_react13.useCallback)(
+  const handleTouchMove = (0, import_react14.useCallback)(
     (event) => {
       if (!dragStartRef.current || event.touches.length !== 1) return;
       const touch = event.touches[0];
@@ -4364,7 +5127,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleTouchEnd = (0, import_react13.useCallback)(
+  const handleTouchEnd = (0, import_react14.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -4402,7 +5165,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!isListening) return;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -4417,7 +5180,7 @@ function useDrag(options = {}) {
       document.removeEventListener("touchcancel", handleTouchEnd);
     };
   }, [isListening, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-  const startDrag = (0, import_react13.useCallback)(
+  const startDrag = (0, import_react14.useCallback)(
     (id, event, itemPosition) => {
       event.stopPropagation();
       let clientX;
@@ -4447,7 +5210,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld]
   );
-  const cancelDrag = (0, import_react13.useCallback)(() => {
+  const cancelDrag = (0, import_react14.useCallback)(() => {
     dragStartRef.current = null;
     hasMovedRef.current = false;
     setIsListening(false);
@@ -4458,7 +5221,7 @@ function useDrag(options = {}) {
       draggedId: null
     });
   }, []);
-  const isDraggingItem = (0, import_react13.useCallback)(
+  const isDraggingItem = (0, import_react14.useCallback)(
     (id) => dragState.isDragging && dragState.draggedId === id,
     [dragState.isDragging, dragState.draggedId]
   );
@@ -4471,7 +5234,7 @@ function useDrag(options = {}) {
 }
 
 // src/diagram/hooks/useKeyboardShortcuts.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useKeyboardShortcuts(options) {
   const {
     onDelete,
@@ -4482,7 +5245,7 @@ function useKeyboardShortcuts(options) {
     onSelectAll,
     enabled = true
   } = options;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -4591,7 +5354,7 @@ function nodeHasPort(node, portId) {
 }
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function PIDCanvas({
   diagram,
   className = "",
@@ -4618,21 +5381,21 @@ function PIDCanvas({
   telemetry,
   ...props
 }) {
-  const [localDiagram, setLocalDiagram] = (0, import_react15.useState)(diagram);
-  const [dragOverPosition, setDragOverPosition] = (0, import_react15.useState)(null);
-  const [isConnecting, setIsConnecting] = (0, import_react15.useState)(false);
-  const [connectionSource, setConnectionSource] = (0, import_react15.useState)(null);
-  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react15.useState)(null);
-  const [connectionCursor, setConnectionCursor] = (0, import_react15.useState)(null);
-  const [hoveredNode, setHoveredNode] = (0, import_react15.useState)(null);
-  const [hoveredPort, setHoveredPort] = (0, import_react15.useState)(null);
-  const [selectedWaypoint, setSelectedWaypoint] = (0, import_react15.useState)(null);
-  const historyStack = (0, import_react15.useRef)([]);
-  const redoStack = (0, import_react15.useRef)([]);
-  const isUndoRedoAction = (0, import_react15.useRef)(false);
-  const isInternalChange = (0, import_react15.useRef)(false);
-  const lastInternalDiagram = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const [localDiagram, setLocalDiagram] = (0, import_react16.useState)(diagram);
+  const [dragOverPosition, setDragOverPosition] = (0, import_react16.useState)(null);
+  const [isConnecting, setIsConnecting] = (0, import_react16.useState)(false);
+  const [connectionSource, setConnectionSource] = (0, import_react16.useState)(null);
+  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react16.useState)(null);
+  const [connectionCursor, setConnectionCursor] = (0, import_react16.useState)(null);
+  const [hoveredNode, setHoveredNode] = (0, import_react16.useState)(null);
+  const [hoveredPort, setHoveredPort] = (0, import_react16.useState)(null);
+  const [selectedWaypoint, setSelectedWaypoint] = (0, import_react16.useState)(null);
+  const historyStack = (0, import_react16.useRef)([]);
+  const redoStack = (0, import_react16.useRef)([]);
+  const isUndoRedoAction = (0, import_react16.useRef)(false);
+  const isInternalChange = (0, import_react16.useRef)(false);
+  const lastInternalDiagram = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     const isExternal = !isInternalChange.current && diagram !== lastInternalDiagram.current;
     if (isExternal) {
       setLocalDiagram(diagram);
@@ -4654,7 +5417,7 @@ function PIDCanvas({
     enablePan: features.pan ?? true,
     enableZoom: features.zoom ?? true
   });
-  const calculateContentBounds = (0, import_react15.useCallback)(() => {
+  const calculateContentBounds = (0, import_react16.useCallback)(() => {
     const nodes2 = localDiagram.nodes.filter((n) => n.visible !== false);
     if (nodes2.length === 0) {
       return null;
@@ -4677,7 +5440,7 @@ function PIDCanvas({
     });
     return { minX, minY, maxX, maxY };
   }, [localDiagram.nodes]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (onMounted) {
       const controls = {
         fitToContent: (padding = 50) => {
@@ -4718,8 +5481,8 @@ function PIDCanvas({
   });
   const dragEnabled = features.dragNodes ?? false;
   const selectionEnabled = features.selection ?? false;
-  const containerRef = (0, import_react15.useRef)(null);
-  const pushToHistory = (0, import_react15.useCallback)((currentDiagram) => {
+  const containerRef = (0, import_react16.useRef)(null);
+  const pushToHistory = (0, import_react16.useCallback)((currentDiagram) => {
     if (isUndoRedoAction.current) return;
     const snapshot = JSON.parse(JSON.stringify(currentDiagram));
     historyStack.current.push(snapshot);
@@ -4728,7 +5491,7 @@ function PIDCanvas({
     }
     redoStack.current = [];
   }, []);
-  const undo = (0, import_react15.useCallback)(() => {
+  const undo = (0, import_react16.useCallback)(() => {
     if (historyStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -4742,7 +5505,7 @@ function PIDCanvas({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  const redo = (0, import_react15.useCallback)(() => {
+  const redo = (0, import_react16.useCallback)(() => {
     if (redoStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -4756,7 +5519,7 @@ function PIDCanvas({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrCmd = e.ctrlKey || e.metaKey;
       if (isCtrlOrCmd && e.key === "z" && !e.shiftKey) {
@@ -4773,7 +5536,7 @@ function PIDCanvas({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!features.dragNodes) return;
     const handleKeyDown = (e) => {
       if (selection.selectedNodeIds.size === 0 && !selectedWaypoint) return;
@@ -4858,7 +5621,7 @@ function PIDCanvas({
     onNodeMove,
     pushToHistory
   ]);
-  const handlePositionChange = (0, import_react15.useCallback)(
+  const handlePositionChange = (0, import_react16.useCallback)(
     (nodeId, x, y) => {
       pushToHistory(localDiagram);
       const updatedNodes = localDiagram.nodes.map(
@@ -4880,7 +5643,7 @@ function PIDCanvas({
     },
     [localDiagram, onDiagramChange, onNodeMove, pushToHistory]
   );
-  const handleWaypointPositionChange = (0, import_react15.useCallback)(
+  const handleWaypointPositionChange = (0, import_react16.useCallback)(
     (pipeId, pointIndex, x, y) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -4898,7 +5661,7 @@ function PIDCanvas({
     },
     [localDiagram, onDiagramChange, pushToHistory]
   );
-  const handleDragEnd = (0, import_react15.useCallback)(
+  const handleDragEnd = (0, import_react16.useCallback)(
     (nodeId, offset, finalPosition) => {
       const dragDistance = Math.sqrt(offset.x ** 2 + offset.y ** 2);
       if (dragDistance < 2) {
@@ -4979,7 +5742,7 @@ function PIDCanvas({
       onDiagramChange?.(updatedDiagram);
     }
   });
-  const handleNodeDragStart = (0, import_react15.useCallback)(
+  const handleNodeDragStart = (0, import_react16.useCallback)(
     (nodeId, event) => {
       const node = localDiagram.nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -4987,7 +5750,7 @@ function PIDCanvas({
     },
     [localDiagram.nodes, startDrag]
   );
-  const handleWaypointClick = (0, import_react15.useCallback)(
+  const handleWaypointClick = (0, import_react16.useCallback)(
     (pipeId, pointIndex) => {
       setSelectedWaypoint({ pipeId, pointIndex });
       if (selectionEnabled) {
@@ -4996,7 +5759,7 @@ function PIDCanvas({
     },
     [selectionEnabled, clearSelection]
   );
-  const handleWaypointDragStart = (0, import_react15.useCallback)(
+  const handleWaypointDragStart = (0, import_react16.useCallback)(
     (pipeId, pointIndex, event) => {
       const pipe = localDiagram.pipes.find((p) => p.id === pipeId);
       if (!pipe || pointIndex >= pipe.routePoints.length) return;
@@ -5005,7 +5768,7 @@ function PIDCanvas({
     },
     [localDiagram.pipes, startWaypointDrag]
   );
-  const handlePipeSegmentClick = (0, import_react15.useCallback)(
+  const handlePipeSegmentClick = (0, import_react16.useCallback)(
     (pipeId, position, segmentIndex) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -5024,7 +5787,7 @@ function PIDCanvas({
     [localDiagram, onDiagramChange, pushToHistory]
   );
   const telemetryEnabled = features.telemetry ?? false;
-  const handleDelete = (0, import_react15.useCallback)(() => {
+  const handleDelete = (0, import_react16.useCallback)(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
@@ -5053,13 +5816,13 @@ function PIDCanvas({
     onDelete,
     pushToHistory
   ]);
-  const handleCopy = (0, import_react15.useCallback)(() => {
+  const handleCopy = (0, import_react16.useCallback)(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
     onItemsCopied?.(Array.from(selectedNodeIds), Array.from(selectedPipeIds));
   }, [selection, selectionEnabled, onItemsCopied]);
-  const handlePaste = (0, import_react15.useCallback)(() => {
+  const handlePaste = (0, import_react16.useCallback)(() => {
     if (!selectionEnabled) return;
     onPaste?.();
   }, [selectionEnabled, onPaste]);
@@ -5119,7 +5882,7 @@ function PIDCanvas({
     }
     setSelectedWaypoint(null);
   };
-  const handleDragOver = (0, import_react15.useCallback)(
+  const handleDragOver = (0, import_react16.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -5130,7 +5893,7 @@ function PIDCanvas({
     },
     [features.allowSymbolDrop, screenToWorld, svgRef]
   );
-  const handleDrop = (0, import_react15.useCallback)(
+  const handleDrop = (0, import_react16.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -5143,10 +5906,10 @@ function PIDCanvas({
     },
     [features.allowSymbolDrop, screenToWorld, onSymbolDrop, svgRef]
   );
-  const handleDragLeave = (0, import_react15.useCallback)(() => {
+  const handleDragLeave = (0, import_react16.useCallback)(() => {
     setDragOverPosition(null);
   }, []);
-  const handleMouseMove = (0, import_react15.useCallback)(
+  const handleMouseMove = (0, import_react16.useCallback)(
     (event) => {
       const connectionModeEnabled = features.connectionMode ?? false;
       if (connectionModeEnabled) {
@@ -5183,7 +5946,7 @@ function PIDCanvas({
   const viewBox = controlledViewBox;
   const displayDiagram = localDiagram;
   const selectedNode = selectionEnabled && selection.selectedNodeIds.size === 1 ? localDiagram.nodes.find((n) => selection.selectedNodeIds.has(n.id)) || null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -5198,7 +5961,7 @@ function PIDCanvas({
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "svg",
           {
             ref: svgRef,
@@ -5217,15 +5980,15 @@ function PIDCanvas({
             onDrop: handleDrop,
             onDragLeave: handleDragLeave,
             children: [
-              features.showGrid !== false ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("defs", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
+              features.showGrid !== false ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("defs", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "rect",
                   {
                     x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
@@ -5235,7 +5998,7 @@ function PIDCanvas({
                     fill: "url(#grid-major)"
                   }
                 )
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "rect",
                 {
                   x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
@@ -5245,7 +6008,7 @@ function PIDCanvas({
                   fill: features.backgroundColor ?? "#ffffff"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 PipeRenderer,
                 {
                   pipes: displayDiagram.pipes,
@@ -5259,12 +6022,12 @@ function PIDCanvas({
                   onPipeSegmentClick: void 0
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 NodeRenderer,
                 {
                   nodes: displayDiagram.nodes,
                   selectedNodeIds: selectionEnabled ? selection.selectedNodeIds : void 0,
-                  onNodeClick: selectionEnabled || features.connectionMode ? handleNodeClick : void 0,
+                  onNodeClick: onNodeClick ? handleNodeClick : selectionEnabled || features.connectionMode ? handleNodeClick : void 0,
                   onNodeDoubleClick: selectionEnabled ? handleNodeDoubleClick : void 0,
                   enableDrag: dragEnabled && !isConnecting,
                   onNodeDragStart: dragEnabled && !isConnecting ? handleNodeDragStart : void 0,
@@ -5272,7 +6035,7 @@ function PIDCanvas({
                   dragOffset: dragState.offset
                 }
               ),
-              (features.editPipeRoutes ?? false) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              (features.editPipeRoutes ?? false) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 PipeRenderer,
                 {
                   pipes: displayDiagram.pipes,
@@ -5289,14 +6052,14 @@ function PIDCanvas({
                   onPipeSegmentClick: handlePipeSegmentClick
                 }
               ),
-              telemetryEnabled && telemetry && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
+              telemetryEnabled && telemetry && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
                 const binding = telemetry.get(node.id);
                 if (!binding) return null;
                 const symbol = getSymbolDefinition(node.symbolId);
                 if (!symbol) return null;
                 const overlayX = node.transform.x + symbol.viewBox.width / 2;
                 const overlayY = node.transform.y + symbol.viewBox.height + 50;
-                return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   DataOverlay,
                   {
                     nodeId: node.id,
@@ -5308,7 +6071,7 @@ function PIDCanvas({
                   `telemetry-${node.id}`
                 );
               }) }),
-              dragOverPosition && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              dragOverPosition && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "circle",
                 {
                   cx: dragOverPosition.x,
@@ -5321,7 +6084,7 @@ function PIDCanvas({
                   pointerEvents: "none"
                 }
               ),
-              isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "connection-preview", pointerEvents: "none", children: (() => {
+              isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "connection-preview", pointerEvents: "none", children: (() => {
                 const sourceNode = displayDiagram.nodes.find((n) => n.id === connectionSource);
                 if (!sourceNode) return null;
                 const symbol = getSymbolDefinition(sourceNode.symbolId);
@@ -5337,8 +6100,8 @@ function PIDCanvas({
                     }
                   }
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "circle",
                     {
                       cx: lineStartX,
@@ -5350,7 +6113,7 @@ function PIDCanvas({
                       opacity: 0.6
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "line",
                     {
                       x1: lineStartX,
@@ -5363,7 +6126,7 @@ function PIDCanvas({
                       opacity: 0.8
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "circle",
                     {
                       cx: connectionCursor.x,
@@ -5375,7 +6138,7 @@ function PIDCanvas({
                   )
                 ] });
               })() }),
-              features.connectionMode && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "port-indicators", children: displayDiagram.nodes.map((node) => {
+              features.connectionMode && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "port-indicators", children: displayDiagram.nodes.map((node) => {
                 const symbol = getSymbolDefinition(node.symbolId);
                 if (!symbol?.ports) return null;
                 return symbol.ports.map((port) => {
@@ -5383,8 +6146,8 @@ function PIDCanvas({
                   if (!portPos) return null;
                   const isHovered = hoveredPort === port.id && hoveredNode === node.id;
                   const isSourcePort = node.id === connectionSource && port.id === connectionSourcePort;
-                  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "circle",
                       {
                         cx: portPos.x,
@@ -5417,7 +6180,7 @@ function PIDCanvas({
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "circle",
                       {
                         cx: portPos.x,
@@ -5436,7 +6199,7 @@ function PIDCanvas({
             ]
           }
         ),
-        features.dragNodes && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        features.dragNodes && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           PositionPanel,
           {
             selectedNode,
@@ -5456,16 +6219,16 @@ function PIDCanvas({
 }
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
-var import_react16 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function SymbolLibrary({
   className = "",
   onSymbolDragStart,
   showCategories = true,
   categories = ["Valves", "Pumps", "Tanks", "Instruments", "Displays"]
 }) {
-  const [selectedCategory, setSelectedCategory] = (0, import_react16.useState)("all");
-  const [searchQuery, setSearchQuery] = (0, import_react16.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react17.useState)("all");
+  const [searchQuery, setSearchQuery] = (0, import_react17.useState)("");
   const symbolIds = getAvailableSymbols();
   const allSymbols = symbolIds.map((id) => getSymbolDefinition(id)).filter((symbol) => symbol !== void 0);
   const categoryMap = {
@@ -5486,9 +6249,9 @@ function SymbolLibrary({
     event.dataTransfer.effectAllowed = "copy";
     onSymbolDragStart?.(symbol.id, event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { style: styles.title, children: "Symbol Library" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.searchContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { style: styles.title, children: "Symbol Library" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: styles.searchContainer, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "input",
       {
         type: "text",
@@ -5498,8 +6261,8 @@ function SymbolLibrary({
         style: styles.searchInput
       }
     ) }),
-    showCategories && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: styles.categories, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    showCategories && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: styles.categories, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "button",
         {
           onClick: () => setSelectedCategory("all"),
@@ -5510,7 +6273,7 @@ function SymbolLibrary({
           children: "All"
         }
       ),
-      categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "button",
         {
           onClick: () => setSelectedCategory(category),
@@ -5523,7 +6286,7 @@ function SymbolLibrary({
         category
       ))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         draggable: true,
@@ -5531,15 +6294,15 @@ function SymbolLibrary({
         style: styles.symbolCard,
         title: symbol.metadata?.description || symbol.name,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.symbolPreview, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: styles.symbolPreview, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "svg",
             {
               viewBox: `${symbol.viewBox.x} ${symbol.viewBox.y} ${symbol.viewBox.width} ${symbol.viewBox.height}`,
               style: styles.symbolSvg,
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.symbolName, children: symbol.name })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: styles.symbolName, children: symbol.name })
         ]
       },
       symbol.id
@@ -5648,7 +6411,7 @@ var styles = {
 };
 
 // src/components/NodeConfigPanel/NodeConfigPanel.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function NodeConfigPanel({
   node,
   binding,
@@ -5667,15 +6430,15 @@ function NodeConfigPanel({
     padding: "20px",
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className, style: defaultStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className, style: defaultStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
       "Configure: ",
       node.id
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         {
           type: "text",
@@ -5691,10 +6454,10 @@ function NodeConfigPanel({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "input",
             {
               type: "number",
@@ -5715,9 +6478,9 @@ function NodeConfigPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "input",
             {
               type: "number",
@@ -5739,9 +6502,9 @@ function NodeConfigPanel({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             type: "number",
@@ -5761,9 +6524,9 @@ function NodeConfigPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             type: "number",
@@ -5788,9 +6551,9 @@ function NodeConfigPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
-      !binding ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
+      !binding ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "button",
         {
           onClick: () => {
@@ -5833,9 +6596,9 @@ function NodeConfigPanel({
           },
           children: "+ Add Telemetry"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             type: "number",
@@ -5857,8 +6620,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             type: "text",
@@ -5880,8 +6643,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "input",
             {
               type: "checkbox",
@@ -5903,8 +6666,8 @@ function NodeConfigPanel({
           ),
           "Show Sparkline"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginTop: "12px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginTop: "12px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "label",
             {
               style: {
@@ -5916,10 +6679,10 @@ function NodeConfigPanel({
               children: "Telemetry Position Offset:"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "input",
                 {
                   type: "number",
@@ -5946,9 +6709,9 @@ function NodeConfigPanel({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "input",
                 {
                   type: "number",
@@ -5976,8 +6739,8 @@ function NodeConfigPanel({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginTop: "16px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginTop: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "label",
               {
                 style: {
@@ -5989,10 +6752,10 @@ function NodeConfigPanel({
                 children: "Display Colors:"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "color",
@@ -6018,7 +6781,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "text",
@@ -6048,10 +6811,10 @@ function NodeConfigPanel({
                 )
               ] })
             ] }),
-            binding.display?.showSparkline && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            binding.display?.showSparkline && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "color",
@@ -6077,7 +6840,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "text",
@@ -6107,9 +6870,9 @@ function NodeConfigPanel({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "input",
                 {
                   type: "text",
@@ -6137,20 +6900,20 @@ function NodeConfigPanel({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
             ] })
           ] }),
           " "
         ] })
       ] })
     ] }),
-    binding && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Thresholds" }),
+    binding && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Thresholds" }),
       ["highHigh", "high", "low", "lowLow"].map((key) => {
         const label = key === "highHigh" ? "High-High (\u2265)" : key === "high" ? "High (\u2265)" : key === "low" ? "Low (\u2264)" : "Low-Low (\u2264)";
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "input",
             {
               type: "number",
@@ -6174,8 +6937,8 @@ function NodeConfigPanel({
         ] }, key);
       })
     ] }),
-    binding && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
+    binding && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
       ["normal", "warning", "alarm", "fault", "off"].map((status) => {
         const defaultColors = {
           normal: "#10b981",
@@ -6185,13 +6948,13 @@ function NodeConfigPanel({
           off: "#6b7280"
         };
         const label = status === "normal" ? "Normal" : status === "warning" ? "Warning" : status === "alarm" ? "Alarm" : status === "fault" ? "Fault" : "Off";
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
             label,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "input",
               {
                 type: "color",
@@ -6212,7 +6975,7 @@ function NodeConfigPanel({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "input",
               {
                 type: "text",
@@ -6239,7 +7002,7 @@ function NodeConfigPanel({
         ] }, status);
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       {
         onClick: onRemove,
@@ -6478,8 +7241,280 @@ var DEFAULT_THRESHOLDS = {
   lowLow: 15
 };
 
+// src/diagram/schema/DeviceControlBinding.ts
+function createControlBinding(nodeId, deviceConfig, actions) {
+  const parametersByMode = {};
+  deviceConfig.parameters.forEach((param) => {
+    const modes = param.modes || deviceConfig.modes.map((m) => m.value);
+    modes.forEach((mode) => {
+      if (!parametersByMode[mode]) {
+        parametersByMode[mode] = [];
+      }
+      parametersByMode[mode].push({
+        id: param.id,
+        label: param.label,
+        unit: param.unit,
+        min: param.min,
+        max: param.max,
+        value: param.value,
+        type: typeof param.value === "number" ? "number" : "string"
+      });
+    });
+  });
+  return {
+    nodeId,
+    tag: deviceConfig.tag,
+    deviceName: deviceConfig.name,
+    deviceType: deviceConfig.type,
+    modes: deviceConfig.modes,
+    state: {
+      currentMode: deviceConfig.currentMode,
+      isRunning: deviceConfig.isRunning,
+      status: deviceConfig.status
+    },
+    parameters: parametersByMode,
+    capabilities: deviceConfig.capabilities,
+    actions
+  };
+}
+
+// src/hooks/useDeviceControls.ts
+var import_react18 = require("react");
+function useDeviceControls(initialBindings) {
+  const [controls, setControls] = (0, import_react18.useState)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (initialBindings) {
+      initialBindings.forEach((binding) => {
+        map.set(binding.nodeId, binding);
+      });
+    }
+    return map;
+  });
+  const updateControl = (0, import_react18.useCallback)((nodeId, updates) => {
+    setControls((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(nodeId);
+      if (existing) {
+        newMap.set(nodeId, { ...existing, ...updates });
+      } else {
+        if ("tag" in updates && "modes" in updates && "state" in updates && "parameters" in updates && "actions" in updates) {
+          newMap.set(nodeId, { nodeId, ...updates });
+        }
+      }
+      return newMap;
+    });
+  }, []);
+  const updateControlBatch = (0, import_react18.useCallback)((updates) => {
+    setControls((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 updateDeviceState = (0, import_react18.useCallback)(
+    (nodeId, stateUpdates) => {
+      setControls((prev) => {
+        const newMap = new Map(prev);
+        const existing = newMap.get(nodeId);
+        if (existing) {
+          newMap.set(nodeId, {
+            ...existing,
+            state: { ...existing.state, ...stateUpdates }
+          });
+        }
+        return newMap;
+      });
+    },
+    []
+  );
+  const updateParameter = (0, import_react18.useCallback)(
+    (nodeId, parameterId, value) => {
+      setControls((prev) => {
+        const newMap = new Map(prev);
+        const existing = newMap.get(nodeId);
+        if (existing) {
+          const updatedParameters = { ...existing.parameters };
+          Object.keys(updatedParameters).forEach((mode) => {
+            const paramIndex = updatedParameters[mode].findIndex((p) => p.id === parameterId);
+            if (paramIndex !== -1) {
+              updatedParameters[mode] = [...updatedParameters[mode]];
+              updatedParameters[mode][paramIndex] = {
+                ...updatedParameters[mode][paramIndex],
+                value
+              };
+            }
+          });
+          newMap.set(nodeId, {
+            ...existing,
+            parameters: updatedParameters
+          });
+        }
+        return newMap;
+      });
+    },
+    []
+  );
+  const setControlBinding = (0, import_react18.useCallback)((binding) => {
+    setControls((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(binding.nodeId, binding);
+      return newMap;
+    });
+  }, []);
+  const removeControlBinding = (0, import_react18.useCallback)((nodeId) => {
+    setControls((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(nodeId);
+      return newMap;
+    });
+  }, []);
+  const getControlBinding = (0, import_react18.useCallback)(
+    (nodeId) => {
+      return controls.get(nodeId);
+    },
+    [controls]
+  );
+  const sendModeChange = (0, import_react18.useCallback)(
+    async (nodeId, mode) => {
+      const binding = controls.get(nodeId);
+      if (!binding) return;
+      updateDeviceState(nodeId, { currentMode: mode });
+      try {
+        await binding.actions.onModeChange?.(mode);
+        updateDeviceState(nodeId, {
+          lastCommandTime: Date.now(),
+          lastCommandResult: { success: true, message: `Mode changed to ${mode}` }
+        });
+      } catch (error) {
+        updateDeviceState(nodeId, {
+          currentMode: binding.state.currentMode,
+          lastCommandResult: {
+            success: false,
+            message: error instanceof Error ? error.message : "Mode change failed"
+          }
+        });
+      }
+    },
+    [controls, updateDeviceState]
+  );
+  const sendParameterChange = (0, import_react18.useCallback)(
+    async (nodeId, parameterId, value) => {
+      const binding = controls.get(nodeId);
+      if (!binding) return;
+      updateParameter(nodeId, parameterId, value);
+      try {
+        await binding.actions.onParameterChange?.(parameterId, value);
+        updateDeviceState(nodeId, {
+          lastCommandTime: Date.now(),
+          lastCommandResult: { success: true, message: `Parameter ${parameterId} updated` }
+        });
+      } catch (error) {
+        updateDeviceState(nodeId, {
+          lastCommandResult: {
+            success: false,
+            message: error instanceof Error ? error.message : "Parameter change failed"
+          }
+        });
+      }
+    },
+    [controls, updateParameter, updateDeviceState]
+  );
+  const sendStartCommand = (0, import_react18.useCallback)(
+    async (nodeId) => {
+      const binding = controls.get(nodeId);
+      if (!binding) return;
+      updateDeviceState(nodeId, { isRunning: true, status: "starting" });
+      try {
+        await binding.actions.onStart?.();
+        updateDeviceState(nodeId, {
+          status: "normal",
+          lastCommandTime: Date.now(),
+          lastCommandResult: { success: true, message: "Device started" }
+        });
+      } catch (error) {
+        updateDeviceState(nodeId, {
+          isRunning: false,
+          status: "fault",
+          lastCommandResult: {
+            success: false,
+            message: error instanceof Error ? error.message : "Start failed"
+          }
+        });
+      }
+    },
+    [controls, updateDeviceState]
+  );
+  const sendStopCommand = (0, import_react18.useCallback)(
+    async (nodeId) => {
+      const binding = controls.get(nodeId);
+      if (!binding) return;
+      updateDeviceState(nodeId, { isRunning: false, status: "stopping" });
+      try {
+        await binding.actions.onStop?.();
+        updateDeviceState(nodeId, {
+          status: "off",
+          lastCommandTime: Date.now(),
+          lastCommandResult: { success: true, message: "Device stopped" }
+        });
+      } catch (error) {
+        updateDeviceState(nodeId, {
+          isRunning: true,
+          status: "fault",
+          lastCommandResult: {
+            success: false,
+            message: error instanceof Error ? error.message : "Stop failed"
+          }
+        });
+      }
+    },
+    [controls, updateDeviceState]
+  );
+  const sendCustomAction = (0, import_react18.useCallback)(
+    async (nodeId, actionId) => {
+      const binding = controls.get(nodeId);
+      if (!binding) return;
+      try {
+        await binding.actions.onCustomAction?.(actionId);
+        updateDeviceState(nodeId, {
+          lastCommandTime: Date.now(),
+          lastCommandResult: { success: true, message: `Action ${actionId} executed` }
+        });
+      } catch (error) {
+        updateDeviceState(nodeId, {
+          lastCommandResult: {
+            success: false,
+            message: error instanceof Error ? error.message : "Action failed"
+          }
+        });
+      }
+    },
+    [controls, updateDeviceState]
+  );
+  return {
+    controls,
+    updateControl,
+    updateControlBatch,
+    updateDeviceState,
+    updateParameter,
+    setControlBinding,
+    removeControlBinding,
+    getControlBinding,
+    // Command helpers
+    sendModeChange,
+    sendParameterChange,
+    sendStartCommand,
+    sendStopCommand,
+    sendCustomAction
+  };
+}
+
 // src/diagram/hooks/useSimulation.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   const {
     interval = 2e3,
@@ -6490,7 +7525,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -6548,6 +7583,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   ControlPanel,
   DEFAULT_THRESHOLDS,
   DashboardCard,
+  DeviceControlPanel,
   DisplayModeToggle,
   EquipmentIndicator,
   EquipmentIndicatorWithSparkline,
@@ -6559,6 +7595,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   LeftToggleButton,
   LegacyValueEntry,
   NodeConfigPanel,
+  NodeControlsPanel,
   PIDCanvas,
   PanelContent,
   PanelTabs,
@@ -6578,6 +7615,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   ZoomButton,
   ZoomControls,
   calculateThresholdStatus,
+  createControlBinding,
   exampleDiagram,
   exportDiagram,
   generateRoutePoints,
@@ -6588,6 +7626,9 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   mockSymbolLibrary,
   nodeHasPort,
   overlayStyles,
+  registerSymbol,
+  registerSymbols,
+  useDeviceControls,
   useDrag,
   useKeyboardShortcuts,
   useSelection,