@procaaso/alphinity-ui-components 1.8.0 → 1.8.2

package/dist/index.cjs

@@ -3382,7 +3382,10 @@ var ThemeToggle = ({
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-var import_react17 = require("react");
+var import_react20 = __toESM(require("react"), 1);
+
+// src/components/PIDCanvas/NodeRenderer.tsx
+var import_react10 = __toESM(require("react"), 1);
 
 // src/diagram/symbols/mockSymbolLibrary.ts
 var mockSymbolLibrary = {
@@ -4604,7 +4607,7 @@ function getAvailableSymbols() {
 
 // src/components/PIDCanvas/NodeRenderer.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function NodeRenderer({
+function NodeRendererImpl({
   nodes: nodes2,
   selectedNodeIds,
   onNodeClick,
@@ -4750,10 +4753,12 @@ function NodeRenderer({
     );
   }) });
 }
+var NodeRenderer = import_react10.default.memo(NodeRendererImpl);
 
 // src/components/PIDCanvas/PipeRenderer.tsx
+var import_react11 = __toESM(require("react"), 1);
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function PipeRenderer({
+function PipeRendererImpl({
   pipes,
   selectedPipeIds,
   onPipeClick,
@@ -4930,10 +4935,36 @@ function PipeRenderer({
     );
   }) });
 }
+var PipeRenderer = import_react11.default.memo(PipeRendererImpl);
 
 // src/components/PIDCanvas/DataOverlay.tsx
+var import_react12 = __toESM(require("react"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function DataOverlay({
+var PULSE_KEYFRAME_ID = "pid-data-overlay-pulse-keyframes";
+var PULSE_ANIMATION = "pid-data-overlay-pulse 1.5s ease-in-out infinite";
+function ensurePulseKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(PULSE_KEYFRAME_ID)) return;
+  const style = document.createElement("style");
+  style.id = PULSE_KEYFRAME_ID;
+  style.textContent = "@keyframes pid-data-overlay-pulse{0%{opacity:.9}50%{opacity:.3}100%{opacity:.9}}";
+  document.head.appendChild(style);
+}
+function renderStatusDot(cx, cy, scale, fill) {
+  ensurePulseKeyframes();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "circle",
+    {
+      className: "pid-data-overlay-status-dot",
+      cx: cx + 35 * scale,
+      cy: cy - 18 * scale,
+      r: 3 * scale,
+      fill,
+      style: { animation: PULSE_ANIMATION }
+    }
+  );
+}
+function DataOverlayImpl({
   nodeId,
   x,
   y,
@@ -4953,6 +4984,24 @@ function DataOverlay({
   const backgroundColor = display?.backgroundColor;
   const offsetX = display?.offsetX ?? 0;
   const offsetY = display?.offsetY ?? 0;
+  const sparklinePath = import_react12.default.useMemo(() => {
+    if (!showSparkline || !history || history.length < 2) return "";
+    const width = 70 * scale;
+    const height = 20 * scale;
+    const padding = 5 * scale;
+    const effectiveWidth = width - padding * 2;
+    const effectiveHeight = height - padding * 2;
+    const hasEuRange = scaling?.euLow !== void 0 && scaling?.euHigh !== void 0 && scaling.euHigh !== scaling.euLow;
+    const min = hasEuRange ? scaling.euLow : Math.min(...history);
+    const max = hasEuRange ? scaling.euHigh : Math.max(...history);
+    const range = max - min || 1;
+    const points = history.map((val, i) => {
+      const xPos = i / (history.length - 1) * effectiveWidth + padding;
+      const yPos = height - padding - (val - min) / range * effectiveHeight;
+      return `${xPos.toFixed(2)},${yPos.toFixed(2)}`;
+    });
+    return `M ${points.join(" L ")}`;
+  }, [showSparkline, history, scaling, scale]);
   if (!showValue) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {});
   }
@@ -4972,24 +5021,6 @@ function DataOverlay({
   const finalTextColor = textColor || colors.text;
   const formattedValue = formatValue(value.value);
   const displayText = unit ? `${formattedValue} ${unit}` : formattedValue;
-  const sparklinePath = (() => {
-    if (!showSparkline || !history || history.length < 2) return "";
-    const width = 70 * scale;
-    const height = 20 * scale;
-    const padding = 5 * scale;
-    const effectiveWidth = width - padding * 2;
-    const effectiveHeight = height - padding * 2;
-    const hasEuRange = scaling?.euLow !== void 0 && scaling?.euHigh !== void 0 && scaling.euHigh !== scaling.euLow;
-    const min = hasEuRange ? scaling.euLow : Math.min(...history);
-    const max = hasEuRange ? scaling.euHigh : Math.max(...history);
-    const range = max - min || 1;
-    const points = history.map((val, i) => {
-      const xPos = i / (history.length - 1) * effectiveWidth + padding;
-      const yPos = height - padding - (val - min) / range * effectiveHeight;
-      return `${xPos.toFixed(2)},${yPos.toFixed(2)}`;
-    });
-    return `M ${points.join(" L ")}`;
-  })();
   const hasSparkline = showSparkline && sparklinePath;
   const overlayHeight = (label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22) * scale;
   const overlayWidth = 80 * scale;
@@ -5037,25 +5068,7 @@ function DataOverlay({
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      "circle",
-      {
-        cx: displayX + 35 * scale,
-        cy: displayY - 18 * scale,
-        r: 3 * scale,
-        fill: finalTextColor,
-        opacity: "0.9",
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            values: "0.9;0.3;0.9",
-            dur: "1.5s",
-            repeatCount: "indefinite"
-          }
-        )
-      }
-    ),
+    showStatus && value.status !== "normal" && renderStatusDot(displayX, displayY, scale, finalTextColor),
     value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "text",
       {
@@ -5087,9 +5100,10 @@ function DataOverlay({
     ) })
   ] });
 }
+var DataOverlay = import_react12.default.memo(DataOverlayImpl);
 
 // src/components/PIDCanvas/PositionPanel.tsx
-var import_react10 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function PositionPanel({
   selectedNode,
@@ -5098,9 +5112,9 @@ function PositionPanel({
   onWaypointPositionChange,
   position = "top-right"
 }) {
-  const [x, setX] = (0, import_react10.useState)("");
-  const [y, setY] = (0, import_react10.useState)("");
-  (0, import_react10.useEffect)(() => {
+  const [x, setX] = (0, import_react13.useState)("");
+  const [y, setY] = (0, import_react13.useState)("");
+  (0, import_react13.useEffect)(() => {
     if (selectedNode) {
       setX(selectedNode.transform.x.toFixed(2));
       setY(selectedNode.transform.y.toFixed(2));
@@ -5226,7 +5240,7 @@ function PositionPanel({
 }
 
 // src/diagram/hooks/useViewBox.ts
-var import_react11 = require("react");
+var import_react14 = require("react");
 function useViewBox(options) {
   const {
     initialViewBox,
@@ -5237,16 +5251,16 @@ function useViewBox(options) {
     zoomSensitivity = 1e-3,
     allowLeftClickPan = true
   } = options;
-  const [viewBox, setViewBox] = (0, import_react11.useState)(initialViewBox);
-  const svgRef = (0, import_react11.useRef)(null);
-  const isPanningRef = (0, import_react11.useRef)(false);
-  const lastMousePosRef = (0, import_react11.useRef)({ x: 0, y: 0 });
-  const spaceKeyDownRef = (0, import_react11.useRef)(false);
-  const lastTouchDistanceRef = (0, import_react11.useRef)(null);
-  const resetViewBox = (0, import_react11.useCallback)(() => {
+  const [viewBox, setViewBox] = (0, import_react14.useState)(initialViewBox);
+  const svgRef = (0, import_react14.useRef)(null);
+  const isPanningRef = (0, import_react14.useRef)(false);
+  const lastMousePosRef = (0, import_react14.useRef)({ x: 0, y: 0 });
+  const spaceKeyDownRef = (0, import_react14.useRef)(false);
+  const lastTouchDistanceRef = (0, import_react14.useRef)(null);
+  const resetViewBox = (0, import_react14.useCallback)(() => {
     setViewBox(initialViewBox);
   }, [initialViewBox]);
-  const zoomIn = (0, import_react11.useCallback)(() => {
+  const zoomIn = (0, import_react14.useCallback)(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.min(1 / minZoom, currentZoom * 1.25);
@@ -5263,7 +5277,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, minZoom]);
-  const zoomOut = (0, import_react11.useCallback)(() => {
+  const zoomOut = (0, import_react14.useCallback)(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.max(1 / maxZoom, currentZoom * 0.8);
@@ -5280,7 +5294,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, maxZoom]);
-  const fitToContent = (0, import_react11.useCallback)((bounds, padding = 50) => {
+  const fitToContent = (0, import_react14.useCallback)((bounds, padding = 50) => {
     const contentWidth = bounds.maxX - bounds.minX;
     const contentHeight = bounds.maxY - bounds.minY;
     if (contentWidth === 0 || contentHeight === 0) {
@@ -5308,7 +5322,7 @@ function useViewBox(options) {
       height: newHeight
     });
   }, [initialViewBox]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
     const handleWheel = (e) => {
@@ -5341,7 +5355,7 @@ function useViewBox(options) {
     svg.addEventListener("wheel", handleWheel, { passive: false });
     return () => svg.removeEventListener("wheel", handleWheel);
   }, [enableZoom, zoomSensitivity, minZoom, initialViewBox]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!enablePan || !svgRef.current) return;
     const svg = svgRef.current;
     const handleMouseDown = (e) => {
@@ -5417,7 +5431,7 @@ function useViewBox(options) {
       window.removeEventListener("keyup", handleKeyUp);
     };
   }, [enablePan, allowLeftClickPan]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!svgRef.current) return;
     if (!enablePan && !enableZoom) return;
     const svg = svgRef.current;
@@ -5508,7 +5522,7 @@ function useViewBox(options) {
       svg.removeEventListener("touchend", handleTouchEnd);
     };
   }, [enablePan, enableZoom, minZoom, initialViewBox]);
-  const screenToWorld = (0, import_react11.useCallback)(
+  const screenToWorld = (0, import_react14.useCallback)(
     (screenX, screenY) => {
       const svg = svgRef.current;
       if (!svg) return { x: screenX, y: screenY };
@@ -5547,15 +5561,15 @@ function useViewBox(options) {
 }
 
 // src/diagram/hooks/useSelection.ts
-var import_react12 = require("react");
+var import_react15 = require("react");
 function useSelection(options = {}) {
   const {
     multiSelect = true,
     initialSelection = { selectedNodeIds: /* @__PURE__ */ new Set(), selectedPipeIds: /* @__PURE__ */ new Set() },
     onSelectionChange
   } = options;
-  const [selection, setSelection] = (0, import_react12.useState)(initialSelection);
-  const notifyChange = (0, import_react12.useCallback)(
+  const [selection, setSelection] = (0, import_react15.useState)(initialSelection);
+  const notifyChange = (0, import_react15.useCallback)(
     (newSelection) => {
       if (onSelectionChange) {
         onSelectionChange(newSelection);
@@ -5563,15 +5577,15 @@ function useSelection(options = {}) {
     },
     [onSelectionChange]
   );
-  const isNodeSelected = (0, import_react12.useCallback)(
+  const isNodeSelected = (0, import_react15.useCallback)(
     (nodeId) => selection.selectedNodeIds.has(nodeId),
     [selection.selectedNodeIds]
   );
-  const isPipeSelected = (0, import_react12.useCallback)(
+  const isPipeSelected = (0, import_react15.useCallback)(
     (pipeId) => selection.selectedPipeIds.has(pipeId),
     [selection.selectedPipeIds]
   );
-  const selectNode = (0, import_react12.useCallback)(
+  const selectNode = (0, import_react15.useCallback)(
     (nodeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newNodeIds = new Set(isMultiSelect && multiSelect ? prev.selectedNodeIds : []);
@@ -5590,7 +5604,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const selectPipe = (0, import_react12.useCallback)(
+  const selectPipe = (0, import_react15.useCallback)(
     (pipeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newPipeIds = new Set(isMultiSelect && multiSelect ? prev.selectedPipeIds : []);
@@ -5609,7 +5623,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const clearSelection = (0, import_react12.useCallback)(() => {
+  const clearSelection = (0, import_react15.useCallback)(() => {
     const newSelection = {
       selectedNodeIds: /* @__PURE__ */ new Set(),
       selectedPipeIds: /* @__PURE__ */ new Set()
@@ -5617,7 +5631,7 @@ function useSelection(options = {}) {
     setSelection(newSelection);
     notifyChange(newSelection);
   }, [notifyChange]);
-  const selectNodes = (0, import_react12.useCallback)(
+  const selectNodes = (0, import_react15.useCallback)(
     (nodeIds) => {
       const newSelection = {
         selectedNodeIds: new Set(nodeIds),
@@ -5628,7 +5642,7 @@ function useSelection(options = {}) {
     },
     [notifyChange]
   );
-  const selectPipes = (0, import_react12.useCallback)(
+  const selectPipes = (0, import_react15.useCallback)(
     (pipeIds) => {
       const newSelection = {
         selectedNodeIds: /* @__PURE__ */ new Set(),
@@ -5652,23 +5666,23 @@ function useSelection(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetry.ts
-var import_react13 = require("react");
+var import_react16 = require("react");
 function useTelemetry(options = {}) {
   const {
     initialBindings = [],
     onTelemetryChange,
     refreshInterval = 0
   } = options;
-  const [telemetry, setTelemetry] = (0, import_react13.useState)(() => {
+  const [telemetry, setTelemetry] = (0, import_react16.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     initialBindings.forEach((binding) => {
       map.set(binding.nodeId, binding);
     });
     return map;
   });
-  const telemetryRef = (0, import_react13.useRef)(telemetry);
+  const telemetryRef = (0, import_react16.useRef)(telemetry);
   telemetryRef.current = telemetry;
-  const notifyChange = (0, import_react13.useCallback)(
+  const notifyChange = (0, import_react16.useCallback)(
     (newTelemetry) => {
       if (onTelemetryChange) {
         onTelemetryChange(newTelemetry);
@@ -5676,7 +5690,7 @@ function useTelemetry(options = {}) {
     },
     [onTelemetryChange]
   );
-  const updateTelemetry = (0, import_react13.useCallback)(
+  const updateTelemetry = (0, import_react16.useCallback)(
     (nodeId, value) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -5706,7 +5720,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const updateTelemetryBatch = (0, import_react13.useCallback)(
+  const updateTelemetryBatch = (0, import_react16.useCallback)(
     (updates) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -5760,16 +5774,16 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const getTelemetry = (0, import_react13.useCallback)(
+  const getTelemetry = (0, import_react16.useCallback)(
     (nodeId) => telemetryRef.current.get(nodeId),
     []
   );
-  const clearTelemetry = (0, import_react13.useCallback)(() => {
+  const clearTelemetry = (0, import_react16.useCallback)(() => {
     const newMap = /* @__PURE__ */ new Map();
     setTelemetry(newMap);
     notifyChange(newMap);
   }, [notifyChange]);
-  const setBindings = (0, import_react13.useCallback)(
+  const setBindings = (0, import_react16.useCallback)(
     (bindings) => {
       const newMap = /* @__PURE__ */ new Map();
       bindings.forEach((binding) => {
@@ -5780,7 +5794,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (refreshInterval <= 0) return;
     const intervalId = setInterval(() => {
       notifyChange(telemetryRef.current);
@@ -5798,10 +5812,10 @@ function useTelemetry(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetryStatus.ts
-var import_react14 = require("react");
+var import_react17 = require("react");
 function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
   const { enabled = true, mapStatus } = options;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!enabled) return;
     const defaultMapStatus = (telemetryStatus) => {
       switch (telemetryStatus) {
@@ -5840,7 +5854,7 @@ function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
 }
 
 // src/diagram/hooks/useDrag.ts
-var import_react15 = require("react");
+var import_react18 = require("react");
 function useDrag(options = {}) {
   const {
     onDragStart,
@@ -5850,23 +5864,23 @@ function useDrag(options = {}) {
     dragThreshold = 3,
     screenToWorld = (x, y) => ({ x, y })
   } = options;
-  const [dragState, setDragState] = (0, import_react15.useState)({
+  const [dragState, setDragState] = (0, import_react18.useState)({
     isDragging: false,
     startPosition: null,
     offset: { x: 0, y: 0 },
     draggedId: null
   });
-  const [isListening, setIsListening] = (0, import_react15.useState)(false);
-  const dragStartRef = (0, import_react15.useRef)(null);
-  const hasMovedRef = (0, import_react15.useRef)(false);
-  const applySnap = (0, import_react15.useCallback)(
+  const [isListening, setIsListening] = (0, import_react18.useState)(false);
+  const dragStartRef = (0, import_react18.useRef)(null);
+  const hasMovedRef = (0, import_react18.useRef)(false);
+  const applySnap = (0, import_react18.useCallback)(
     (value) => {
       if (snapToGrid <= 0) return value;
       return Math.round(value / snapToGrid) * snapToGrid;
     },
     [snapToGrid]
   );
-  const handleMouseMove = (0, import_react15.useCallback)(
+  const handleMouseMove = (0, import_react18.useCallback)(
     (event) => {
       if (!dragStartRef.current) return;
       const { id, screenStart: _screenStart, itemPosition, clickOffset } = dragStartRef.current;
@@ -5907,7 +5921,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleMouseUp = (0, import_react15.useCallback)(
+  const handleMouseUp = (0, import_react18.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -5944,7 +5958,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  const handleTouchMove = (0, import_react15.useCallback)(
+  const handleTouchMove = (0, import_react18.useCallback)(
     (event) => {
       if (!dragStartRef.current || event.touches.length !== 1) return;
       const touch = event.touches[0];
@@ -5987,7 +6001,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleTouchEnd = (0, import_react15.useCallback)(
+  const handleTouchEnd = (0, import_react18.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -6025,7 +6039,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isListening) return;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -6040,7 +6054,7 @@ function useDrag(options = {}) {
       document.removeEventListener("touchcancel", handleTouchEnd);
     };
   }, [isListening, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-  const startDrag = (0, import_react15.useCallback)(
+  const startDrag = (0, import_react18.useCallback)(
     (id, event, itemPosition) => {
       event.stopPropagation();
       let clientX;
@@ -6070,7 +6084,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld]
   );
-  const cancelDrag = (0, import_react15.useCallback)(() => {
+  const cancelDrag = (0, import_react18.useCallback)(() => {
     dragStartRef.current = null;
     hasMovedRef.current = false;
     setIsListening(false);
@@ -6081,7 +6095,7 @@ function useDrag(options = {}) {
       draggedId: null
     });
   }, []);
-  const isDraggingItem = (0, import_react15.useCallback)(
+  const isDraggingItem = (0, import_react18.useCallback)(
     (id) => dragState.isDragging && dragState.draggedId === id,
     [dragState.isDragging, dragState.draggedId]
   );
@@ -6094,7 +6108,7 @@ function useDrag(options = {}) {
 }
 
 // src/diagram/hooks/useKeyboardShortcuts.ts
-var import_react16 = require("react");
+var import_react19 = require("react");
 function useKeyboardShortcuts(options) {
   const {
     onDelete,
@@ -6105,7 +6119,7 @@ function useKeyboardShortcuts(options) {
     onSelectAll,
     enabled = true
   } = options;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -6215,18 +6229,19 @@ function nodeHasPort(node, portId) {
 
 // src/components/PIDCanvas/PIDCanvas.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function PIDCanvas({
+var DEFAULT_FEATURES = {
+  pan: true,
+  zoom: true,
+  selection: false,
+  multiSelect: true,
+  telemetry: false,
+  dragNodes: false
+};
+function PIDCanvasImpl({
   diagram,
   className = "",
   style,
-  features = {
-    pan: true,
-    zoom: true,
-    selection: false,
-    multiSelect: true,
-    telemetry: false,
-    dragNodes: false
-  },
+  features = DEFAULT_FEATURES,
   onSelectionChange,
   onNodeClick,
   onPipeClick,
@@ -6242,21 +6257,21 @@ function PIDCanvas({
   statusColorMap,
   ...props
 }) {
-  const [localDiagram, setLocalDiagram] = (0, import_react17.useState)(diagram);
-  const [dragOverPosition, setDragOverPosition] = (0, import_react17.useState)(null);
-  const [isConnecting, setIsConnecting] = (0, import_react17.useState)(false);
-  const [connectionSource, setConnectionSource] = (0, import_react17.useState)(null);
-  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react17.useState)(null);
-  const [connectionCursor, setConnectionCursor] = (0, import_react17.useState)(null);
-  const [hoveredNode, setHoveredNode] = (0, import_react17.useState)(null);
-  const [hoveredPort, setHoveredPort] = (0, import_react17.useState)(null);
-  const [selectedWaypoint, setSelectedWaypoint] = (0, import_react17.useState)(null);
-  const historyStack = (0, import_react17.useRef)([]);
-  const redoStack = (0, import_react17.useRef)([]);
-  const isUndoRedoAction = (0, import_react17.useRef)(false);
-  const isInternalChange = (0, import_react17.useRef)(false);
-  const lastInternalDiagram = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const [localDiagram, setLocalDiagram] = (0, import_react20.useState)(diagram);
+  const [dragOverPosition, setDragOverPosition] = (0, import_react20.useState)(null);
+  const [isConnecting, setIsConnecting] = (0, import_react20.useState)(false);
+  const [connectionSource, setConnectionSource] = (0, import_react20.useState)(null);
+  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react20.useState)(null);
+  const [connectionCursor, setConnectionCursor] = (0, import_react20.useState)(null);
+  const [hoveredNode, setHoveredNode] = (0, import_react20.useState)(null);
+  const [hoveredPort, setHoveredPort] = (0, import_react20.useState)(null);
+  const [selectedWaypoint, setSelectedWaypoint] = (0, import_react20.useState)(null);
+  const historyStack = (0, import_react20.useRef)([]);
+  const redoStack = (0, import_react20.useRef)([]);
+  const isUndoRedoAction = (0, import_react20.useRef)(false);
+  const isInternalChange = (0, import_react20.useRef)(false);
+  const lastInternalDiagram = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
     const isExternal = !isInternalChange.current && diagram !== lastInternalDiagram.current;
     if (isExternal) {
       setLocalDiagram(diagram);
@@ -6278,7 +6293,7 @@ function PIDCanvas({
     enablePan: features.pan ?? true,
     enableZoom: features.zoom ?? true
   });
-  const calculateContentBounds = (0, import_react17.useCallback)(() => {
+  const calculateContentBounds = (0, import_react20.useCallback)(() => {
     const nodes2 = localDiagram.nodes.filter((n) => n.visible !== false);
     if (nodes2.length === 0) {
       return null;
@@ -6301,7 +6316,7 @@ function PIDCanvas({
     });
     return { minX, minY, maxX, maxY };
   }, [localDiagram.nodes]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (onMounted) {
       const controls = {
         fitToContent: (padding = 50) => {
@@ -6342,8 +6357,8 @@ function PIDCanvas({
   });
   const dragEnabled = features.dragNodes ?? false;
   const selectionEnabled = features.selection ?? false;
-  const containerRef = (0, import_react17.useRef)(null);
-  const pushToHistory = (0, import_react17.useCallback)((currentDiagram) => {
+  const containerRef = (0, import_react20.useRef)(null);
+  const pushToHistory = (0, import_react20.useCallback)((currentDiagram) => {
     if (isUndoRedoAction.current) return;
     const snapshot = JSON.parse(JSON.stringify(currentDiagram));
     historyStack.current.push(snapshot);
@@ -6352,7 +6367,7 @@ function PIDCanvas({
     }
     redoStack.current = [];
   }, []);
-  const undo = (0, import_react17.useCallback)(() => {
+  const undo = (0, import_react20.useCallback)(() => {
     if (historyStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -6366,7 +6381,7 @@ function PIDCanvas({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  const redo = (0, import_react17.useCallback)(() => {
+  const redo = (0, import_react20.useCallback)(() => {
     if (redoStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -6380,7 +6395,7 @@ function PIDCanvas({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrCmd = e.ctrlKey || e.metaKey;
       if (isCtrlOrCmd && e.key === "z" && !e.shiftKey) {
@@ -6397,7 +6412,7 @@ function PIDCanvas({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!features.dragNodes) return;
     const handleKeyDown = (e) => {
       if (selection.selectedNodeIds.size === 0 && !selectedWaypoint) return;
@@ -6482,7 +6497,7 @@ function PIDCanvas({
     onNodeMove,
     pushToHistory
   ]);
-  const handlePositionChange = (0, import_react17.useCallback)(
+  const handlePositionChange = (0, import_react20.useCallback)(
     (nodeId, x, y) => {
       pushToHistory(localDiagram);
       const updatedNodes = localDiagram.nodes.map(
@@ -6504,7 +6519,7 @@ function PIDCanvas({
     },
     [localDiagram, onDiagramChange, onNodeMove, pushToHistory]
   );
-  const handleWaypointPositionChange = (0, import_react17.useCallback)(
+  const handleWaypointPositionChange = (0, import_react20.useCallback)(
     (pipeId, pointIndex, x, y) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -6522,7 +6537,7 @@ function PIDCanvas({
     },
     [localDiagram, onDiagramChange, pushToHistory]
   );
-  const handleDragEnd = (0, import_react17.useCallback)(
+  const handleDragEnd = (0, import_react20.useCallback)(
     (nodeId, offset, finalPosition) => {
       const dragDistance = Math.sqrt(offset.x ** 2 + offset.y ** 2);
       if (dragDistance < 2) {
@@ -6603,7 +6618,7 @@ function PIDCanvas({
       onDiagramChange?.(updatedDiagram);
     }
   });
-  const handleNodeDragStart = (0, import_react17.useCallback)(
+  const handleNodeDragStart = (0, import_react20.useCallback)(
     (nodeId, event) => {
       const node = localDiagram.nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -6611,7 +6626,7 @@ function PIDCanvas({
     },
     [localDiagram.nodes, startDrag]
   );
-  const handleWaypointClick = (0, import_react17.useCallback)(
+  const handleWaypointClick = (0, import_react20.useCallback)(
     (pipeId, pointIndex) => {
       setSelectedWaypoint({ pipeId, pointIndex });
       if (selectionEnabled) {
@@ -6620,7 +6635,7 @@ function PIDCanvas({
     },
     [selectionEnabled, clearSelection]
   );
-  const handleWaypointDragStart = (0, import_react17.useCallback)(
+  const handleWaypointDragStart = (0, import_react20.useCallback)(
     (pipeId, pointIndex, event) => {
       const pipe = localDiagram.pipes.find((p) => p.id === pipeId);
       if (!pipe || pointIndex >= pipe.routePoints.length) return;
@@ -6629,7 +6644,7 @@ function PIDCanvas({
     },
     [localDiagram.pipes, startWaypointDrag]
   );
-  const handlePipeSegmentClick = (0, import_react17.useCallback)(
+  const handlePipeSegmentClick = (0, import_react20.useCallback)(
     (pipeId, position, segmentIndex) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -6648,7 +6663,7 @@ function PIDCanvas({
     [localDiagram, onDiagramChange, pushToHistory]
   );
   const telemetryEnabled = features.telemetry ?? false;
-  const handleDelete = (0, import_react17.useCallback)(() => {
+  const handleDelete = (0, import_react20.useCallback)(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
@@ -6677,62 +6692,81 @@ function PIDCanvas({
     onDelete,
     pushToHistory
   ]);
-  const handleCopy = (0, import_react17.useCallback)(() => {
+  const handleCopy = (0, import_react20.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_react17.useCallback)(() => {
+  const handlePaste = (0, import_react20.useCallback)(() => {
     if (!selectionEnabled) return;
     onPaste?.();
   }, [selectionEnabled, onPaste]);
-  const handleNodeDoubleClick = (nodeId, event) => {
-    if (!selectionEnabled) return;
-    console.log("Node double-clicked:", nodeId);
-    selectNode(nodeId, event.ctrlKey || event.metaKey);
-  };
+  const handleNodeDoubleClick = (0, import_react20.useCallback)(
+    (nodeId, event) => {
+      if (!selectionEnabled) return;
+      console.log("Node double-clicked:", nodeId);
+      selectNode(nodeId, event.ctrlKey || event.metaKey);
+    },
+    [selectionEnabled, selectNode]
+  );
   useKeyboardShortcuts({
     enabled: features.keyboardShortcuts ?? false,
     onDelete: handleDelete,
     onCopy: handleCopy,
     onPaste: handlePaste
   });
-  const handleNodeClick = (nodeId, event) => {
-    const connectionModeEnabled = features.connectionMode ?? false;
-    if (connectionModeEnabled && isConnecting) {
-      if (connectionSource && connectionSource !== nodeId) {
-        onPipeCreated?.(
-          connectionSource,
-          nodeId,
-          connectionSourcePort || void 0,
-          hoveredPort || void 0
-        );
-        setIsConnecting(false);
-        setConnectionSource(null);
-        setConnectionSourcePort(null);
-        setConnectionCursor(null);
-        setHoveredPort(null);
+  const handleNodeClick = (0, import_react20.useCallback)(
+    (nodeId, event) => {
+      const connectionModeEnabled = features.connectionMode ?? false;
+      if (connectionModeEnabled && isConnecting) {
+        if (connectionSource && connectionSource !== nodeId) {
+          onPipeCreated?.(
+            connectionSource,
+            nodeId,
+            connectionSourcePort || void 0,
+            hoveredPort || void 0
+          );
+          setIsConnecting(false);
+          setConnectionSource(null);
+          setConnectionSourcePort(null);
+          setConnectionCursor(null);
+          setHoveredPort(null);
+        }
+        return;
       }
-      return;
-    }
-    if (connectionModeEnabled && !isConnecting) {
-      setIsConnecting(true);
-      setConnectionSource(nodeId);
-      setConnectionSourcePort(hoveredPort);
-      return;
-    }
-    if (selectionEnabled) {
-      selectNode(nodeId, event.ctrlKey || event.metaKey);
-    }
-    onNodeClick?.(nodeId);
-  };
-  const handlePipeClick = (pipeId, event) => {
-    if (selectionEnabled) {
-      selectPipe(pipeId, event.ctrlKey || event.metaKey);
-    }
-    onPipeClick?.(pipeId);
-  };
+      if (connectionModeEnabled && !isConnecting) {
+        setIsConnecting(true);
+        setConnectionSource(nodeId);
+        setConnectionSourcePort(hoveredPort);
+        return;
+      }
+      if (selectionEnabled) {
+        selectNode(nodeId, event.ctrlKey || event.metaKey);
+      }
+      onNodeClick?.(nodeId);
+    },
+    [
+      features.connectionMode,
+      isConnecting,
+      connectionSource,
+      connectionSourcePort,
+      hoveredPort,
+      onPipeCreated,
+      selectionEnabled,
+      selectNode,
+      onNodeClick
+    ]
+  );
+  const handlePipeClick = (0, import_react20.useCallback)(
+    (pipeId, event) => {
+      if (selectionEnabled) {
+        selectPipe(pipeId, event.ctrlKey || event.metaKey);
+      }
+      onPipeClick?.(pipeId);
+    },
+    [selectionEnabled, selectPipe, onPipeClick]
+  );
   const handleCanvasClick = (e) => {
     const target = e.target;
     if (target.closest(".pipe-route-point")) {
@@ -6743,7 +6777,7 @@ function PIDCanvas({
     }
     setSelectedWaypoint(null);
   };
-  const handleDragOver = (0, import_react17.useCallback)(
+  const handleDragOver = (0, import_react20.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -6754,7 +6788,7 @@ function PIDCanvas({
     },
     [features.allowSymbolDrop, screenToWorld, svgRef]
   );
-  const handleDrop = (0, import_react17.useCallback)(
+  const handleDrop = (0, import_react20.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -6767,10 +6801,10 @@ function PIDCanvas({
     },
     [features.allowSymbolDrop, screenToWorld, onSymbolDrop, svgRef]
   );
-  const handleDragLeave = (0, import_react17.useCallback)(() => {
+  const handleDragLeave = (0, import_react20.useCallback)(() => {
     setDragOverPosition(null);
   }, []);
-  const handleMouseMove = (0, import_react17.useCallback)(
+  const handleMouseMove = (0, import_react20.useCallback)(
     (event) => {
       const connectionModeEnabled = features.connectionMode ?? false;
       if (connectionModeEnabled) {
@@ -7080,9 +7114,10 @@ function PIDCanvas({
     }
   );
 }
+var PIDCanvas = import_react20.default.memo(PIDCanvasImpl);
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
-var import_react18 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function SymbolLibrary({
   className = "",
@@ -7090,8 +7125,8 @@ function SymbolLibrary({
   showCategories = true,
   categories = ["Valves", "Pumps", "Tanks", "Instruments", "Displays"]
 }) {
-  const [selectedCategory, setSelectedCategory] = (0, import_react18.useState)("all");
-  const [searchQuery, setSearchQuery] = (0, import_react18.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react21.useState)("all");
+  const [searchQuery, setSearchQuery] = (0, import_react21.useState)("");
   const symbolIds = getAvailableSymbols();
   const allSymbols = symbolIds.map((id) => getSymbolDefinition(id)).filter((symbol) => symbol !== void 0);
   const categoryMap = {
@@ -8142,13 +8177,13 @@ function createControlBinding(nodeId, deviceConfig, actions) {
 }
 
 // src/hooks/useDeviceControls.ts
-var import_react19 = require("react");
+var import_react22 = require("react");
 function commandKey(nodeId, kind, suffix) {
   return suffix ? `${nodeId}:${kind}:${suffix}` : `${nodeId}:${kind}`;
 }
 function useDeviceControls(initialBindings, options) {
   const { commandTimeoutMs } = options ?? {};
-  const [controls, setControls] = (0, import_react19.useState)(() => {
+  const [controls, setControls] = (0, import_react22.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialBindings) {
       initialBindings.forEach((binding) => {
@@ -8157,12 +8192,12 @@ function useDeviceControls(initialBindings, options) {
     }
     return map;
   });
-  const pendingRef = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
-  const [pendingCommands, setPendingCommands] = (0, import_react19.useState)(() => /* @__PURE__ */ new Set());
-  const syncPending = (0, import_react19.useCallback)(() => {
+  const pendingRef = (0, import_react22.useRef)(/* @__PURE__ */ new Map());
+  const [pendingCommands, setPendingCommands] = (0, import_react22.useState)(() => /* @__PURE__ */ new Set());
+  const syncPending = (0, import_react22.useCallback)(() => {
     setPendingCommands(new Set(pendingRef.current.keys()));
   }, []);
-  const updateControl = (0, import_react19.useCallback)((nodeId, updates) => {
+  const updateControl = (0, import_react22.useCallback)((nodeId, updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8176,7 +8211,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateControlBatch = (0, import_react19.useCallback)((updates) => {
+  const updateControlBatch = (0, import_react22.useCallback)((updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       Object.entries(updates).forEach(([nodeId, update]) => {
@@ -8188,7 +8223,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateDeviceState = (0, import_react19.useCallback)(
+  const updateDeviceState = (0, import_react22.useCallback)(
     (nodeId, stateUpdates) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -8204,7 +8239,7 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const updateParameter = (0, import_react19.useCallback)(
+  const updateParameter = (0, import_react22.useCallback)(
     (nodeId, parameterId, value) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -8231,27 +8266,27 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const setControlBinding = (0, import_react19.useCallback)((binding) => {
+  const setControlBinding = (0, import_react22.useCallback)((binding) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       newMap.set(binding.nodeId, binding);
       return newMap;
     });
   }, []);
-  const removeControlBinding = (0, import_react19.useCallback)((nodeId) => {
+  const removeControlBinding = (0, import_react22.useCallback)((nodeId) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       newMap.delete(nodeId);
       return newMap;
     });
   }, []);
-  const getControlBinding = (0, import_react19.useCallback)(
+  const getControlBinding = (0, import_react22.useCallback)(
     (nodeId) => {
       return controls.get(nodeId);
     },
     [controls]
   );
-  const isCommandPending = (0, import_react19.useCallback)(
+  const isCommandPending = (0, import_react22.useCallback)(
     (nodeId, kind) => {
       if (kind) {
         const prefix2 = `${nodeId}:${kind}`;
@@ -8268,7 +8303,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [pendingCommands]
   );
-  const markPending = (0, import_react19.useCallback)(
+  const markPending = (0, import_react22.useCallback)(
     (key, delta) => {
       const next = (pendingRef.current.get(key) ?? 0) + delta;
       if (next > 0) pendingRef.current.set(key, next);
@@ -8277,7 +8312,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [syncPending]
   );
-  const runCommand = (0, import_react19.useCallback)(
+  const runCommand = (0, import_react22.useCallback)(
     async (nodeId, key, invoke, messages) => {
       const binding = controls.get(nodeId);
       if (!binding) return;
@@ -8317,7 +8352,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [controls, updateDeviceState, markPending, commandTimeoutMs]
   );
-  const sendModeChange = (0, import_react19.useCallback)(
+  const sendModeChange = (0, import_react22.useCallback)(
     (nodeId, mode) => runCommand(
       nodeId,
       commandKey(nodeId, "mode"),
@@ -8326,7 +8361,7 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendParameterChange = (0, import_react19.useCallback)(
+  const sendParameterChange = (0, import_react22.useCallback)(
     (nodeId, parameterId, value) => runCommand(
       nodeId,
       commandKey(nodeId, "parameter", parameterId),
@@ -8335,21 +8370,21 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendStartCommand = (0, import_react19.useCallback)(
+  const sendStartCommand = (0, import_react22.useCallback)(
     (nodeId) => runCommand(nodeId, commandKey(nodeId, "start"), (binding) => binding.actions.onStart?.(), {
       success: "Start command sent",
       failure: "Start command failed"
     }),
     [runCommand]
   );
-  const sendStopCommand = (0, import_react19.useCallback)(
+  const sendStopCommand = (0, import_react22.useCallback)(
     (nodeId) => runCommand(nodeId, commandKey(nodeId, "stop"), (binding) => binding.actions.onStop?.(), {
       success: "Stop command sent",
       failure: "Stop command failed"
     }),
     [runCommand]
   );
-  const sendCustomAction = (0, import_react19.useCallback)(
+  const sendCustomAction = (0, import_react22.useCallback)(
     (nodeId, actionId) => runCommand(
       nodeId,
       commandKey(nodeId, "action", actionId),
@@ -8402,9 +8437,9 @@ function createConfigBinding(nodeId, tag, parameters, actions, options) {
 }
 
 // src/hooks/useDeviceConfigs.ts
-var import_react20 = require("react");
+var import_react23 = require("react");
 function useDeviceConfigs(initialConfigs) {
-  const [configs, setConfigs] = (0, import_react20.useState)(() => {
+  const [configs, setConfigs] = (0, import_react23.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialConfigs) {
       initialConfigs.forEach((config) => {
@@ -8413,13 +8448,13 @@ function useDeviceConfigs(initialConfigs) {
     }
     return map;
   });
-  const getConfig = (0, import_react20.useCallback)(
+  const getConfig = (0, import_react23.useCallback)(
     (nodeId) => {
       return configs.get(nodeId);
     },
     [configs]
   );
-  const updateConfig = (0, import_react20.useCallback)((nodeId, updates) => {
+  const updateConfig = (0, import_react23.useCallback)((nodeId, updates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8433,7 +8468,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateConfigState = (0, import_react20.useCallback)((nodeId, stateUpdates) => {
+  const updateConfigState = (0, import_react23.useCallback)((nodeId, stateUpdates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8446,7 +8481,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateConfigBatch = (0, import_react20.useCallback)((updates) => {
+  const updateConfigBatch = (0, import_react23.useCallback)((updates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       Object.entries(updates).forEach(([nodeId, update]) => {
@@ -8458,7 +8493,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateParameterValue = (0, import_react20.useCallback)((nodeId, parameterId, value) => {
+  const updateParameterValue = (0, import_react23.useCallback)((nodeId, parameterId, value) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8475,7 +8510,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const applyConfig = (0, import_react20.useCallback)(
+  const applyConfig = (0, import_react23.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config || !config.actions.onApply) {
@@ -8508,7 +8543,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const saveConfig = (0, import_react20.useCallback)(
+  const saveConfig = (0, import_react23.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config || !config.actions.onSave) {
@@ -8542,7 +8577,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const resetConfig = (0, import_react20.useCallback)(
+  const resetConfig = (0, import_react23.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -8572,7 +8607,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfig, updateConfigState]
   );
-  const cancelConfig = (0, import_react20.useCallback)(
+  const cancelConfig = (0, import_react23.useCallback)(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (config?.actions.onCancel) {
@@ -8581,7 +8616,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs]
   );
-  const validateConfig = (0, import_react20.useCallback)(
+  const validateConfig = (0, import_react23.useCallback)(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -8623,21 +8658,21 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const setConfig = (0, import_react20.useCallback)((config) => {
+  const setConfig = (0, import_react23.useCallback)((config) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       newMap.set(config.nodeId, config);
       return newMap;
     });
   }, []);
-  const removeConfig = (0, import_react20.useCallback)((nodeId) => {
+  const removeConfig = (0, import_react23.useCallback)((nodeId) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       newMap.delete(nodeId);
       return newMap;
     });
   }, []);
-  const clearConfigs = (0, import_react20.useCallback)(() => {
+  const clearConfigs = (0, import_react23.useCallback)(() => {
     setConfigs(/* @__PURE__ */ new Map());
   }, []);
   return {
@@ -8659,7 +8694,7 @@ function useDeviceConfigs(initialConfigs) {
 }
 
 // src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
-var import_react21 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function DeviceConfigPanel({
   binding,
@@ -8678,7 +8713,7 @@ function DeviceConfigPanel({
   showControlsButton = true,
   embedded = false
 }) {
-  const [localValues, setLocalValues] = (0, import_react21.useState)(() => {
+  const [localValues, setLocalValues] = (0, import_react24.useState)(() => {
     if (binding) {
       const values = {};
       binding.parameters.forEach((param) => {
@@ -8688,7 +8723,7 @@ function DeviceConfigPanel({
     }
     return {};
   });
-  const [collapsedSections, setCollapsedSections] = (0, import_react21.useState)(() => {
+  const [collapsedSections, setCollapsedSections] = (0, import_react24.useState)(() => {
     const collapsed = /* @__PURE__ */ new Set();
     if (binding?.sections) {
       binding.sections.forEach((section) => {
@@ -8699,9 +8734,9 @@ function DeviceConfigPanel({
     }
     return collapsed;
   });
-  const [showToast, setShowToast] = (0, import_react21.useState)(true);
-  const [bindingId, setBindingId] = (0, import_react21.useState)(binding?.nodeId || null);
-  const lastResultTimestampRef = (0, import_react21.useRef)(0);
+  const [showToast, setShowToast] = (0, import_react24.useState)(true);
+  const [bindingId, setBindingId] = (0, import_react24.useState)(binding?.nodeId || null);
+  const lastResultTimestampRef = (0, import_react24.useRef)(0);
   if (binding && binding.nodeId !== bindingId) {
     const values = {};
     binding.parameters.forEach((param) => {
@@ -8717,21 +8752,24 @@ function DeviceConfigPanel({
     setCollapsedSections(collapsed);
     setBindingId(binding.nodeId);
   }
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const currentTimestamp = binding?.state.lastSaved || 0;
     if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
       lastResultTimestampRef.current = currentTimestamp;
+      let hideTimer;
       const showTimer = setTimeout(() => {
         setShowToast(true);
-        const hideTimer = setTimeout(() => {
+        hideTimer = setTimeout(() => {
           setShowToast(false);
         }, toastDuration);
-        return () => clearTimeout(hideTimer);
       }, 0);
-      return () => clearTimeout(showTimer);
+      return () => {
+        clearTimeout(showTimer);
+        if (hideTimer) clearTimeout(hideTimer);
+      };
     }
   }, [binding?.state.lastSaveResult, binding?.state.lastSaved, toastDuration]);
-  const parametersBySection = (0, import_react21.useMemo)(() => {
+  const parametersBySection = (0, import_react24.useMemo)(() => {
     if (!binding) return { _unsectioned: [] };
     const groups = { _unsectioned: [] };
     binding.parameters.forEach((param) => {
@@ -8746,7 +8784,7 @@ function DeviceConfigPanel({
     });
     return groups;
   }, [binding]);
-  const sortedSections = (0, import_react21.useMemo)(() => {
+  const sortedSections = (0, import_react24.useMemo)(() => {
     if (!binding?.sections) return [];
     return [...binding.sections].sort((a, b) => (a.order || 0) - (b.order || 0));
   }, [binding]);
@@ -9362,7 +9400,7 @@ function DeviceConfigPanel({
 }
 
 // src/diagram/hooks/useSimulation.ts
-var import_react22 = require("react");
+var import_react25 = require("react");
 function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   const {
     interval = 2e3,
@@ -9373,7 +9411,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];