@procaaso/alphinity-ui-components 1.4.0 → 1.7.0

package/dist/index.js

@@ -1840,14 +1840,457 @@ function DeviceControlPanel({
   ] });
 }
 
+// src/components/NumpadDialog/NumpadDialog.tsx
+import { useState as useState6, useEffect as useEffect3, useCallback as useCallback3, useRef as useRef2, useId } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var NumpadDialog = ({
+  isOpen,
+  onClose,
+  onApply,
+  deviceName = "",
+  parameterLabel = "Setpoint",
+  unit = "",
+  min = 0,
+  max = 100,
+  precision,
+  currentValue = 0,
+  touchOptimized = true
+}) => {
+  const [inputValue, setInputValue] = useState6("");
+  const [pristine, setPristine] = useState6(true);
+  const dialogRef = useRef2(null);
+  const titleId = useId();
+  const decimals = precision ?? 1;
+  useEffect3(() => {
+    if (isOpen) {
+      setInputValue(Number(currentValue).toFixed(decimals));
+      setPristine(true);
+    }
+  }, [isOpen, currentValue, decimals]);
+  useEffect3(() => {
+    if (!isOpen) return;
+    const previouslyFocused = document.activeElement;
+    dialogRef.current?.focus();
+    return () => previouslyFocused?.focus?.();
+  }, [isOpen]);
+  useEffect3(() => {
+    if (!isOpen) return;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [isOpen]);
+  const handleApply = useCallback3(() => {
+    const n = Number(inputValue);
+    if (inputValue === "" || inputValue === "-" || inputValue === "." || inputValue === "-.") return;
+    if (isNaN(n) || n < min || n > max) return;
+    onApply(Number(n.toFixed(decimals)));
+  }, [inputValue, min, max, onApply, decimals]);
+  const appendDigit = useCallback3(
+    (digit) => {
+      setInputValue((prev) => {
+        const base = pristine ? "" : prev;
+        if (digit === ".") {
+          if (decimals === 0) return base;
+          if (base.includes(".")) return base;
+          if (base === "" || base === "-") return base + "0.";
+          return base + ".";
+        }
+        const dot = base.indexOf(".");
+        if (dot !== -1 && base.length - dot - 1 >= decimals) return base;
+        if (base === "0") return digit;
+        if (base === "-0") return "-" + digit;
+        return base + digit;
+      });
+      if (pristine) setPristine(false);
+    },
+    [pristine, decimals]
+  );
+  const handleBackspace = useCallback3(() => {
+    setPristine(false);
+    setInputValue((prev) => prev.slice(0, -1));
+  }, []);
+  const handleClear = useCallback3(() => {
+    setPristine(false);
+    setInputValue("");
+  }, []);
+  const handleToggleSign = useCallback3(() => {
+    if (min >= 0) return;
+    setPristine(false);
+    setInputValue((prev) => {
+      if (prev.startsWith("-")) return prev.slice(1);
+      if (prev === "" || prev === "0") return "-";
+      return "-" + prev;
+    });
+  }, [min]);
+  const bsTimer = useRef2(null);
+  const bsLongFired = useRef2(false);
+  const clearBsTimer = () => {
+    if (bsTimer.current !== null) {
+      clearTimeout(bsTimer.current);
+      bsTimer.current = null;
+    }
+  };
+  const handleBackspacePointerDown = () => {
+    bsLongFired.current = false;
+    bsTimer.current = window.setTimeout(() => {
+      bsLongFired.current = true;
+      handleClear();
+    }, 500);
+  };
+  const handleBackspaceClick = () => {
+    clearBsTimer();
+    if (bsLongFired.current) {
+      bsLongFired.current = false;
+      return;
+    }
+    handleBackspace();
+  };
+  useEffect3(() => () => clearBsTimer(), []);
+  useEffect3(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (e.key === "Tab") {
+        const root = dialogRef.current;
+        if (!root) return;
+        const focusable = Array.from(
+          root.querySelectorAll("button:not([disabled])")
+        ).filter((el) => el.tabIndex !== -1);
+        if (focusable.length === 0) {
+          e.preventDefault();
+          root.focus();
+          return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        if (e.shiftKey) {
+          if (active === first || !root.contains(active)) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else if (active === last || !root.contains(active)) {
+          e.preventDefault();
+          first.focus();
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        const active = document.activeElement;
+        if (active && active.tagName === "BUTTON" && dialogRef.current?.contains(active)) return;
+        e.preventDefault();
+        handleApply();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      } else if (e.key === "Backspace") {
+        e.preventDefault();
+        handleBackspace();
+      } else if (/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+        appendDigit(e.key);
+      } else if (e.key === ".") {
+        e.preventDefault();
+        appendDigit(".");
+      } else if (e.key === "-") {
+        e.preventDefault();
+        handleToggleSign();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, handleApply, onClose, handleBackspace, appendDigit, handleToggleSign]);
+  if (!isOpen) return null;
+  const parsed = Number(inputValue);
+  const hasNumber = inputValue !== "" && inputValue !== "-" && inputValue !== "." && inputValue !== "-." && !isNaN(parsed);
+  const belowMin = hasNumber && parsed < min;
+  const aboveMax = hasNumber && parsed > max;
+  const outOfRange = belowMin || aboveMax;
+  const isValid = hasNumber && !outOfRange;
+  const alarmColor = "#dc2626";
+  const limitStyle = (violated) => violated ? { color: alarmColor, fontWeight: 700, background: "#fee2e2", borderRadius: 3, padding: "0 3px" } : {};
+  const keySize = touchOptimized ? 60 : 46;
+  const keyFont = touchOptimized ? 22 : 18;
+  const actionSize = touchOptimized ? 52 : 42;
+  const keyStyle = {
+    minWidth: 52,
+    minHeight: keySize,
+    fontSize: keyFont,
+    fontWeight: 600,
+    borderRadius: 8,
+    border: "1px solid #e2e8f0",
+    background: "#ffffff",
+    color: "#0f172a",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    userSelect: "none",
+    boxShadow: "0 1px 2px rgba(15, 23, 42, 0.06)"
+  };
+  const utilKeyStyle = {
+    flex: 1,
+    minHeight: touchOptimized ? 44 : 38,
+    fontSize: 13,
+    fontWeight: 600,
+    borderRadius: 8,
+    border: "1px solid #e2e8f0",
+    background: "#f8fafc",
+    color: "#64748b",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    userSelect: "none"
+  };
+  const reason = belowMin ? `Below minimum of ${min} ${unit}` : aboveMax ? `Above maximum of ${max} ${unit}` : "Type or tap to change the value";
+  const backspaceInGrid = min >= 0;
+  const BackspaceButton = ({ style, label }) => /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      className: "np-key",
+      tabIndex: -1,
+      "aria-label": "Backspace",
+      style,
+      onPointerDown: handleBackspacePointerDown,
+      onPointerUp: clearBsTimer,
+      onPointerLeave: clearBsTimer,
+      onClick: handleBackspaceClick,
+      children: label
+    }
+  );
+  return (
+    // Backdrop
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(15, 23, 42, 0.4)",
+          zIndex: 1e4,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        onClick: onClose,
+        children: [
+          /* @__PURE__ */ jsx9("style", { children: `
+        .np-key { transition: background .1s, transform .05s; touch-action: manipulation; }
+        .np-key:active:not(:disabled) { background:#e2e8f0; transform: translateY(1px); }
+        .np-key:focus-visible, .np-action:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
+        @keyframes np-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
+        .np-caret { display:inline-block; width:2px; height:1.1em; background:#2563eb; animation: np-blink 1s step-end infinite; }
+      ` }),
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              ref: dialogRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": titleId,
+              tabIndex: -1,
+              style: {
+                width: touchOptimized ? "340px" : "300px",
+                maxHeight: "90vh",
+                overflow: "auto",
+                background: "#ffffff",
+                borderRadius: 12,
+                border: "1px solid #e2e8f0",
+                boxShadow: "0 10px 40px rgba(15, 23, 42, 0.2)",
+                fontFamily: "'Inter', system-ui, sans-serif",
+                outline: "none"
+              },
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx9("div", { style: { padding: "14px 16px 0 16px" }, children: /* @__PURE__ */ jsx9("h3", { id: titleId, style: { margin: 0, fontSize: 15, fontWeight: 700, color: "#0f172a" }, children: deviceName ? `${deviceName} - ${parameterLabel}` : parameterLabel }) }),
+                /* @__PURE__ */ jsxs8("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 10 }, children: [
+                  /* @__PURE__ */ jsxs8(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        fontSize: 12,
+                        color: "#64748b"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs8("span", { children: [
+                          "Current: ",
+                          currentValue,
+                          " ",
+                          unit
+                        ] }),
+                        /* @__PURE__ */ jsxs8("span", { children: [
+                          "Range: ",
+                          /* @__PURE__ */ jsx9("span", { style: limitStyle(belowMin), children: min }),
+                          "-",
+                          /* @__PURE__ */ jsx9("span", { style: limitStyle(aboveMax), children: max }),
+                          " ",
+                          unit
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs8(
+                    "div",
+                    {
+                      "aria-live": "polite",
+                      "aria-atomic": "true",
+                      "aria-label": `Entered value ${inputValue || "0"} ${unit}`,
+                      style: {
+                        background: outOfRange ? "#fef2f2" : "#f8fafc",
+                        borderRadius: 8,
+                        padding: "10px 14px",
+                        fontSize: 28,
+                        fontWeight: 700,
+                        textAlign: "right",
+                        color: outOfRange ? alarmColor : "#0f172a",
+                        minHeight: 48,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "flex-end",
+                        gap: 6,
+                        border: outOfRange ? "1.5px solid #fca5a5" : "1.5px solid #e2e8f0"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx9("span", { children: inputValue || "0" }),
+                        /* @__PURE__ */ jsx9("span", { className: "np-caret", "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx9("span", { style: { fontSize: 14, color: "#94a3b8", fontWeight: 500 }, children: unit })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(
+                    "div",
+                    {
+                      role: "status",
+                      "aria-live": "polite",
+                      style: {
+                        fontSize: 12,
+                        color: outOfRange ? alarmColor : "#94a3b8",
+                        fontWeight: outOfRange ? 600 : 400,
+                        textAlign: "right",
+                        minHeight: 16
+                      },
+                      children: reason
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs8("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 5 }, children: [
+                    ["7", "8", "9", "4", "5", "6", "1", "2", "3"].map((digit) => /* @__PURE__ */ jsx9(
+                      "button",
+                      {
+                        type: "button",
+                        className: "np-key",
+                        tabIndex: -1,
+                        style: keyStyle,
+                        onClick: () => appendDigit(digit),
+                        children: digit
+                      },
+                      digit
+                    )),
+                    min < 0 ? /* @__PURE__ */ jsx9(
+                      "button",
+                      {
+                        type: "button",
+                        className: "np-key",
+                        tabIndex: -1,
+                        "aria-label": "Toggle sign",
+                        style: { ...keyStyle, fontSize: 16, background: "#f8fafc", color: "#64748b" },
+                        onClick: handleToggleSign,
+                        children: "+/\u2212"
+                      }
+                    ) : /* @__PURE__ */ jsx9(BackspaceButton, { style: { ...keyStyle, fontSize: 20, background: "#f8fafc", color: "#64748b" }, label: "\u232B" }),
+                    /* @__PURE__ */ jsx9("button", { type: "button", className: "np-key", tabIndex: -1, style: keyStyle, onClick: () => appendDigit("0"), children: "0" }),
+                    /* @__PURE__ */ jsx9(
+                      "button",
+                      {
+                        type: "button",
+                        className: "np-key",
+                        tabIndex: -1,
+                        "aria-label": "Decimal point",
+                        style: {
+                          ...keyStyle,
+                          cursor: decimals === 0 ? "not-allowed" : "pointer",
+                          opacity: decimals === 0 ? 0.4 : 1
+                        },
+                        disabled: decimals === 0,
+                        onClick: () => appendDigit("."),
+                        children: "."
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 5 }, children: [
+                    /* @__PURE__ */ jsx9("button", { type: "button", className: "np-key", tabIndex: -1, style: utilKeyStyle, onClick: handleClear, children: "Clear" }),
+                    !backspaceInGrid && /* @__PURE__ */ jsx9(BackspaceButton, { style: utilKeyStyle, label: "Backspace" })
+                  ] }),
+                  /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 8, marginTop: 2 }, children: [
+                    /* @__PURE__ */ jsx9(
+                      "button",
+                      {
+                        type: "button",
+                        className: "np-action",
+                        onClick: onClose,
+                        style: {
+                          flex: 1,
+                          minHeight: actionSize,
+                          borderRadius: 8,
+                          border: "1px solid #e2e8f0",
+                          background: "#ffffff",
+                          color: "#0f172a",
+                          fontSize: 14,
+                          fontWeight: 600,
+                          cursor: "pointer"
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx9(
+                      "button",
+                      {
+                        type: "button",
+                        className: "np-action",
+                        onClick: handleApply,
+                        disabled: !isValid,
+                        "aria-label": isValid ? `Apply ${inputValue} ${unit}` : "Apply (enter a valid value)",
+                        style: {
+                          flex: 1,
+                          minHeight: actionSize,
+                          borderRadius: 8,
+                          border: "none",
+                          background: "#2563eb",
+                          color: "#ffffff",
+                          fontSize: 14,
+                          fontWeight: 600,
+                          cursor: isValid ? "pointer" : "not-allowed",
+                          opacity: isValid ? 1 : 0.4
+                        },
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  );
+};
+
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
-import React6 from "react";
+import React7 from "react";
 import { Tab } from "@mui/material";
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.styles.tsx
 import { Box, IconButton, Tabs } from "@mui/material";
 import styled from "@emotion/styled";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var FullscreenContainer = styled(Box)(
   ({ leftCollapsed, rightCollapsed }) => {
     const getGridTemplateAreas = () => {
@@ -1972,7 +2415,7 @@ var DisplayModeToggle = styled(IconButton)(({ mode }) => ({
     transform: "translateX(-50%) scale(1.05)"
   }
 }));
-var ChevronLeft = () => /* @__PURE__ */ jsx9(
+var ChevronLeft = () => /* @__PURE__ */ jsx10(
   "div",
   {
     style: {
@@ -1984,7 +2427,7 @@ var ChevronLeft = () => /* @__PURE__ */ jsx9(
     }
   }
 );
-var ChevronRight = () => /* @__PURE__ */ jsx9(
+var ChevronRight = () => /* @__PURE__ */ jsx10(
   "div",
   {
     style: {
@@ -2095,10 +2538,10 @@ var ScrollableSVGWrapper = styled("div")({
 });
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.overlays.tsx
-import { useEffect as useEffect3, useState as useState6 } from "react";
+import { useEffect as useEffect4, useState as useState7 } from "react";
 import { Box as Box2 } from "@mui/material";
 import styled2 from "@emotion/styled";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var baseOverlayStyles = {
   tank: {
     background: "linear-gradient(135deg, rgba(69, 90, 120, 0.95) 0%, rgba(52, 73, 94, 0.95) 100%)",
@@ -2160,8 +2603,8 @@ var SVGLockedOverlay = ({
   onClick,
   containerSelector = ".tff-svg-container"
 }) => {
-  const [svgOffset, setSvgOffset] = useState6({ x: 0, y: 0 });
-  useEffect3(() => {
+  const [svgOffset, setSvgOffset] = useState7({ x: 0, y: 0 });
+  useEffect4(() => {
     const updateSvgOffset = () => {
       const containerElement = document.querySelector(containerSelector);
       const svgElement = containerElement?.querySelector("svg");
@@ -2181,7 +2624,7 @@ var SVGLockedOverlay = ({
   const pixelX = svgX + svgOffset.x;
   const pixelY = svgY + svgOffset.y;
   const appliedStyle = theme ? { ...overlayStyles[theme], ...style } : style;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Box2,
     {
       className: `svg-locked-overlay ${className}`.trim(),
@@ -2245,7 +2688,7 @@ var CardUnit = styled2("div")({
 });
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.visuals.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var TrendLine = ({
   values,
   width = 60,
@@ -2255,7 +2698,7 @@ var TrendLine = ({
   backgroundColor = "rgba(255, 255, 255, 0.1)"
 }) => {
   if (!values || values.length < 2) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         style: {
@@ -2267,7 +2710,7 @@ var TrendLine = ({
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ jsx11("span", { style: { fontSize: "8px", color: "#ccc" }, children: "No data" })
+        children: /* @__PURE__ */ jsx12("span", { style: { fontSize: "8px", color: "#ccc" }, children: "No data" })
       }
     );
   }
@@ -2279,7 +2722,7 @@ var TrendLine = ({
     const x = 4 + i / (values.length - 1) * (width - 8);
     return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
   }).join(" ");
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -2290,8 +2733,8 @@ var TrendLine = ({
         position: "relative",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsxs8("svg", { width, height, style: { position: "absolute", top: 0, left: 0 }, children: [
-        /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsxs9("svg", { width, height, style: { position: "absolute", top: 0, left: 0 }, children: [
+        /* @__PURE__ */ jsx12(
           "path",
           {
             d: pathData,
@@ -2302,7 +2745,7 @@ var TrendLine = ({
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "circle",
           {
             cx: 4 + (width - 8),
@@ -2340,7 +2783,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__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       style: {
@@ -2349,7 +2792,7 @@ var CircularGauge = ({
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -2361,8 +2804,8 @@ var CircularGauge = ({
               border: `1px solid ${borderStrokeColor}`
             },
             children: [
-              /* @__PURE__ */ jsxs8("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
-                /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsxs9("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
+                /* @__PURE__ */ jsx12(
                   "circle",
                   {
                     cx: size / 2,
@@ -2373,7 +2816,7 @@ var CircularGauge = ({
                     strokeWidth: 1
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "circle",
                   {
                     cx: size / 2,
@@ -2384,7 +2827,7 @@ var CircularGauge = ({
                     fill: "transparent"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "circle",
                   {
                     cx: size / 2,
@@ -2400,7 +2843,7 @@ var CircularGauge = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   style: {
@@ -2416,14 +2859,14 @@ var CircularGauge = ({
                   },
                   children: [
                     value.toFixed(1),
-                    /* @__PURE__ */ jsx11("div", { style: { fontSize: "8px", opacity: 0.9, color: "white" }, children: unit })
+                    /* @__PURE__ */ jsx12("div", { style: { fontSize: "8px", opacity: 0.9, color: "white" }, children: unit })
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -2454,7 +2897,7 @@ var Sparkline = ({ data, width, height, color }) => {
     const y = height - 8 - (value - min) / range * (height - 8);
     return `${x + 4},${y + 4}`;
   }).join(" ");
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -2468,7 +2911,7 @@ var Sparkline = ({ data, width, height, color }) => {
         justifyContent: "center",
         boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
       },
-      children: /* @__PURE__ */ jsx11("svg", { width, height, children: /* @__PURE__ */ jsx11("polyline", { points, fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }) })
+      children: /* @__PURE__ */ jsx12("svg", { width, height, children: /* @__PURE__ */ jsx12("polyline", { points, fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }) })
     }
   );
 };
@@ -2482,8 +2925,8 @@ var EquipmentIndicatorWithSparkline = ({
   sparklineOffset = { x: 40, y: 0 }
 }) => {
   const hasSparkline = sparklineData && sparklineData.length > 1 && Math.max(...sparklineData) !== Math.min(...sparklineData);
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx11(SVGLockedOverlay, { svgX, svgY, style: { transform: "translate(-50%, -50%)" }, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx12(SVGLockedOverlay, { svgX, svgY, style: { transform: "translate(-50%, -50%)" }, children: /* @__PURE__ */ jsx12(
       "div",
       {
         style: {
@@ -2504,7 +2947,7 @@ var EquipmentIndicatorWithSparkline = ({
         children: label
       }
     ) }),
-    hasSparkline && /* @__PURE__ */ jsx11(SVGLockedOverlay, { svgX: svgX + sparklineOffset.x, svgY: svgY + sparklineOffset.y, children: /* @__PURE__ */ jsx11(Sparkline, { data: sparklineData, width: 60, height: 20, color }) })
+    hasSparkline && /* @__PURE__ */ jsx12(SVGLockedOverlay, { svgX: svgX + sparklineOffset.x, svgY: svgY + sparklineOffset.y, children: /* @__PURE__ */ jsx12(Sparkline, { data: sparklineData, width: 60, height: 20, color }) })
   ] });
 };
 var EquipmentIndicator = ({
@@ -2517,7 +2960,7 @@ var EquipmentIndicator = ({
   className
 }) => {
   const overlayStyle = style !== void 0 ? { transform: "translate(-50%, -50%)", ...style } : { transform: "translate(-50%, -50%)" };
-  return /* @__PURE__ */ jsx11(SVGLockedOverlay, { svgX, svgY, style: overlayStyle, className, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(SVGLockedOverlay, { svgX, svgY, style: overlayStyle, className, children: /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -2541,7 +2984,7 @@ var EquipmentIndicator = ({
 };
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function FullscreenWorkspace({
   svgContent,
   overlays,
@@ -2569,10 +3012,10 @@ function FullscreenWorkspace({
   className = "",
   ...rest
 }) {
-  const [leftCollapsedState, setLeftCollapsedState] = React6.useState(defaultLeftCollapsed);
-  const [rightCollapsedState, setRightCollapsedState] = React6.useState(defaultRightCollapsed);
-  const [internalDisplayMode, setInternalDisplayMode] = React6.useState(displayMode ?? defaultDisplayMode);
-  const [internalTab, setInternalTab] = React6.useState(
+  const [leftCollapsedState, setLeftCollapsedState] = React7.useState(defaultLeftCollapsed);
+  const [rightCollapsedState, setRightCollapsedState] = React7.useState(defaultRightCollapsed);
+  const [internalDisplayMode, setInternalDisplayMode] = React7.useState(displayMode ?? defaultDisplayMode);
+  const [internalTab, setInternalTab] = React7.useState(
     tabs && tabs.length > 0 ? tabs[0].value : ""
   );
   const leftCollapsed = leftCollapsedProp ?? leftCollapsedState;
@@ -2580,10 +3023,10 @@ function FullscreenWorkspace({
   const isDisplayModeControlled = displayMode !== void 0;
   const currentDisplayMode = isDisplayModeControlled ? displayMode : internalDisplayMode;
   const isTabControlled = activeTab !== void 0 && activeTab !== null;
-  const resolvedTabs = React6.useMemo(() => tabs ?? [], [tabs]);
+  const resolvedTabs = React7.useMemo(() => tabs ?? [], [tabs]);
   const defaultTabValue = resolvedTabs.length > 0 ? resolvedTabs[0].value : "";
   const currentTab = isTabControlled ? activeTab : internalTab || defaultTabValue;
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (resolvedTabs.length > 0) {
       const values = resolvedTabs.map((tab) => tab.value);
       if (!values.includes(currentTab)) {
@@ -2592,7 +3035,7 @@ function FullscreenWorkspace({
       }
     }
   }, [resolvedTabs, activeTab, currentTab, defaultTabValue]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (displayMode !== void 0) {
       setInternalDisplayMode(displayMode);
     }
@@ -2627,7 +3070,7 @@ function FullscreenWorkspace({
   const currentTabContent = resolvedTabs.find((tab) => tab.value === currentTab)?.content ?? null;
   const showLeftToggle = Boolean(leftPanel);
   const showRightToggle = Boolean(rightPanel);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     FullscreenContainer,
     {
       leftCollapsed,
@@ -2635,25 +3078,25 @@ function FullscreenWorkspace({
       className: `tff-svg-container ${className}`.trim(),
       ...rest,
       children: [
-        showLeftToggle && /* @__PURE__ */ jsx12(
+        showLeftToggle && /* @__PURE__ */ jsx13(
           LeftToggleButton,
           {
             collapsed: leftCollapsed,
             onClick: handleLeftToggle,
             "aria-label": leftCollapsed ? "Expand left panel" : "Collapse left panel",
-            children: leftCollapsed ? /* @__PURE__ */ jsx12(ChevronRight, {}) : /* @__PURE__ */ jsx12(ChevronLeft, {})
+            children: leftCollapsed ? /* @__PURE__ */ jsx13(ChevronRight, {}) : /* @__PURE__ */ jsx13(ChevronLeft, {})
           }
         ),
-        showRightToggle && /* @__PURE__ */ jsx12(
+        showRightToggle && /* @__PURE__ */ jsx13(
           RightToggleButton,
           {
             collapsed: rightCollapsed,
             onClick: handleRightToggle,
             "aria-label": rightCollapsed ? "Expand right panel" : "Collapse right panel",
-            children: rightCollapsed ? /* @__PURE__ */ jsx12(ChevronLeft, {}) : /* @__PURE__ */ jsx12(ChevronRight, {})
+            children: rightCollapsed ? /* @__PURE__ */ jsx13(ChevronLeft, {}) : /* @__PURE__ */ jsx13(ChevronRight, {})
           }
         ),
-        showDisplayModeToggle && /* @__PURE__ */ jsx12(
+        showDisplayModeToggle && /* @__PURE__ */ jsx13(
           DisplayModeToggle,
           {
             mode: currentDisplayMode,
@@ -2662,9 +3105,9 @@ function FullscreenWorkspace({
             children: currentDisplayMode === "dashboard" ? "Dashboard Mode" : "Standard Mode"
           }
         ),
-        /* @__PURE__ */ jsxs9(SVGArea, { children: [
-          showZoomControls && /* @__PURE__ */ jsxs9(ZoomControls, { children: [
-            /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs10(SVGArea, { children: [
+          showZoomControls && /* @__PURE__ */ jsxs10(ZoomControls, { children: [
+            /* @__PURE__ */ jsx13(
               ZoomButton,
               {
                 onClick: onZoomIn,
@@ -2674,7 +3117,7 @@ function FullscreenWorkspace({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               ZoomButton,
               {
                 onClick: onZoomOut,
@@ -2684,7 +3127,7 @@ function FullscreenWorkspace({
                 children: "-"
               }
             ),
-            onResetZoom && /* @__PURE__ */ jsx12(
+            onResetZoom && /* @__PURE__ */ jsx13(
               ZoomButton,
               {
                 onClick: onResetZoom,
@@ -2695,33 +3138,33 @@ function FullscreenWorkspace({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx12(ScrollableSVGWrapper, { className: "svg-scroll-wrapper", children: /* @__PURE__ */ jsxs9(FixedSVGContainer, { className: "svg-container", children: [
+          /* @__PURE__ */ jsx13(ScrollableSVGWrapper, { className: "svg-scroll-wrapper", children: /* @__PURE__ */ jsxs10(FixedSVGContainer, { className: "svg-container", children: [
             svgContent,
             overlays
           ] }) })
         ] }),
-        /* @__PURE__ */ jsx12(LeftPanel, { collapsed: leftCollapsed, children: resolvedTabs.length > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-          /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(LeftPanel, { collapsed: leftCollapsed, children: resolvedTabs.length > 0 ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+          /* @__PURE__ */ jsx13(
             PanelTabs,
             {
               value: currentTab,
               onChange: handleTabChangeInternal,
               "aria-label": "Left panel tabs",
-              children: resolvedTabs.map((tab) => /* @__PURE__ */ jsx12(Tab, { label: tab.label, value: tab.value }, tab.value))
+              children: resolvedTabs.map((tab) => /* @__PURE__ */ jsx13(Tab, { label: tab.label, value: tab.value }, tab.value))
             }
           ),
-          /* @__PURE__ */ jsx12(PanelContent, { children: currentTabContent })
+          /* @__PURE__ */ jsx13(PanelContent, { children: currentTabContent })
         ] }) : leftPanel }),
-        /* @__PURE__ */ jsx12(RightPanel, { collapsed: rightCollapsed, children: rightPanel }),
-        /* @__PURE__ */ jsx12(FooterPanel, { children: footer })
+        /* @__PURE__ */ jsx13(RightPanel, { collapsed: rightCollapsed, children: rightPanel }),
+        /* @__PURE__ */ jsx13(FooterPanel, { children: footer })
       ]
     }
   );
 }
 
 // src/theme/ThemeContext.tsx
-import { createContext, useContext, useState as useState7, useEffect as useEffect4 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { createContext, useContext, useState as useState8, useEffect as useEffect5 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ThemeContext = createContext(void 0);
 var useTheme = () => {
   const context = useContext(ThemeContext);
@@ -2731,8 +3174,8 @@ var useTheme = () => {
   return context;
 };
 var ThemeProvider = ({ children }) => {
-  const [theme, setThemeState] = useState7("modern");
-  useEffect4(() => {
+  const [theme, setThemeState] = useState8("modern");
+  useEffect5(() => {
     document.body.className = "";
     document.body.classList.add(`theme-${theme}`);
     document.documentElement.className = "";
@@ -2744,11 +3187,11 @@ var ThemeProvider = ({ children }) => {
   const setTheme = (newTheme) => {
     setThemeState(newTheme);
   };
-  return /* @__PURE__ */ jsx13(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+  return /* @__PURE__ */ jsx14(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
 };
 
 // src/theme/ThemeToggle.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var ThemeToggle = ({
   size = "medium",
   position = "top-right",
@@ -2819,15 +3262,15 @@ var ThemeToggle = ({
     transition: "all 0.2s ease",
     boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
   };
-  return /* @__PURE__ */ jsxs10("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
-    /* @__PURE__ */ jsx14("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
-    /* @__PURE__ */ jsx14("div", { style: toggleStyle, children: /* @__PURE__ */ jsx14("div", { style: thumbStyle }) }),
-    /* @__PURE__ */ jsx14("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
+  return /* @__PURE__ */ jsxs11("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
+    /* @__PURE__ */ jsx15("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
+    /* @__PURE__ */ jsx15("div", { style: toggleStyle, children: /* @__PURE__ */ jsx15("div", { style: thumbStyle }) }),
+    /* @__PURE__ */ jsx15("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
   ] });
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-import { useCallback as useCallback7, useState as useState13, useEffect as useEffect11, useRef as useRef5 } from "react";
+import { useCallback as useCallback8, useState as useState14, useEffect as useEffect12, useRef as useRef6 } from "react";
 
 // src/diagram/symbols/mockSymbolLibrary.ts
 var mockSymbolLibrary = {
@@ -4048,7 +4491,7 @@ function getAvailableSymbols() {
 }
 
 // src/components/PIDCanvas/NodeRenderer.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function NodeRenderer({
   nodes: nodes2,
   selectedNodeIds,
@@ -4060,13 +4503,13 @@ function NodeRenderer({
   enableDrag = false,
   statusColorMap
 }) {
-  return /* @__PURE__ */ jsx15("g", { id: "layer-nodes", children: nodes2.filter((node) => node.visible !== false).map((node) => {
+  return /* @__PURE__ */ jsx16("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__ */ jsxs11("g", { children: [
-        /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsxs12("g", { children: [
+        /* @__PURE__ */ jsx16(
           "circle",
           {
             cx: node.transform.x,
@@ -4078,7 +4521,7 @@ function NodeRenderer({
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "text",
           {
             x: node.transform.x,
@@ -4120,7 +4563,7 @@ function NodeRenderer({
     const statusEntry = resolveStatusColor(node.status, statusColorMap);
     const fillColor = node.customColors?.fill ?? statusEntry.fill;
     const strokeColor = node.customColors?.stroke ?? statusEntry.stroke;
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       "g",
       {
         "data-node-id": node.id,
@@ -4153,7 +4596,7 @@ function NodeRenderer({
           }
         },
         children: [
-          isSelected && /* @__PURE__ */ jsx15(
+          isSelected && /* @__PURE__ */ jsx16(
             "rect",
             {
               x: "-5",
@@ -4168,7 +4611,7 @@ function NodeRenderer({
               pointerEvents: "none"
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "g",
             {
               dangerouslySetInnerHTML: { __html: symbol.svgContent },
@@ -4176,7 +4619,7 @@ function NodeRenderer({
               style: { pointerEvents: "auto" }
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "text",
             {
               x: symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0),
@@ -4197,7 +4640,7 @@ function NodeRenderer({
 }
 
 // src/components/PIDCanvas/PipeRenderer.tsx
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function PipeRenderer({
   pipes,
   selectedPipeIds,
@@ -4212,7 +4655,7 @@ function PipeRenderer({
   waypointDragOffset,
   onPipeSegmentClick
 }) {
-  return /* @__PURE__ */ jsx16("g", { id: "layer-pipes", children: pipes.filter((pipe) => pipe.visible !== false).map((pipe) => {
+  return /* @__PURE__ */ jsx17("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;
@@ -4231,7 +4674,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__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "g",
       {
         "data-pipe-id": pipe.id,
@@ -4244,8 +4687,8 @@ function PipeRenderer({
           cursor: onPipeClick ? "pointer" : "default"
         },
         children: [
-          !enableWaypointEditing && /* @__PURE__ */ jsxs12(Fragment5, { children: [
-            onPipeClick && /* @__PURE__ */ jsx16(
+          !enableWaypointEditing && /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            onPipeClick && /* @__PURE__ */ jsx17(
               "polyline",
               {
                 points: pointsString,
@@ -4257,7 +4700,7 @@ function PipeRenderer({
                 pointerEvents: "stroke"
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               "polyline",
               {
                 points: pointsString,
@@ -4281,7 +4724,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__ */ jsx16(
+            return /* @__PURE__ */ jsx17(
               "circle",
               {
                 cx: point.x,
@@ -4318,12 +4761,12 @@ function PipeRenderer({
               `${pipe.id}-point-${idx}`
             );
           }),
-          showEditingControls && onPipeSegmentClick && displayPoints.length >= 2 && /* @__PURE__ */ jsx16(Fragment5, { children: displayPoints.slice(0, -1).map((point, idx) => {
+          showEditingControls && onPipeSegmentClick && displayPoints.length >= 2 && /* @__PURE__ */ jsx17(Fragment5, { 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__ */ jsxs12("g", { children: [
-              /* @__PURE__ */ jsx16(
+            return /* @__PURE__ */ jsxs13("g", { children: [
+              /* @__PURE__ */ jsx17(
                 "circle",
                 {
                   cx: midX,
@@ -4339,7 +4782,7 @@ function PipeRenderer({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "circle",
                 {
                   cx: midX,
@@ -4355,7 +4798,7 @@ function PipeRenderer({
               )
             ] }, `${pipe.id}-segment-${idx}`);
           }) }),
-          pipe.showLabel !== false && pipe.label && pipe.routePoints.length >= 2 && /* @__PURE__ */ jsx16(
+          pipe.showLabel !== false && pipe.label && pipe.routePoints.length >= 2 && /* @__PURE__ */ jsx17(
             "text",
             {
               x: pipe.routePoints[Math.floor(pipe.routePoints.length / 2)].x + (pipe.labelOffset?.x ?? 0),
@@ -4377,7 +4820,7 @@ function PipeRenderer({
 }
 
 // src/components/PIDCanvas/DataOverlay.tsx
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function DataOverlay({
   nodeId,
   x,
@@ -4399,7 +4842,7 @@ function DataOverlay({
   const offsetX = display?.offsetX ?? 0;
   const offsetY = display?.offsetY ?? 0;
   if (!showValue) {
-    return /* @__PURE__ */ jsx17(Fragment6, {});
+    return /* @__PURE__ */ jsx18(Fragment6, {});
   }
   const formatValue = (val) => {
     if (typeof val === "number") {
@@ -4440,8 +4883,8 @@ function DataOverlay({
   const overlayWidth = 80 * scale;
   const displayX = x + offsetX;
   const displayY = y + offsetY;
-  return /* @__PURE__ */ jsxs13("g", { "data-overlay-node": nodeId, "data-status": value.status, children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs14("g", { "data-overlay-node": nodeId, "data-status": value.status, children: [
+    /* @__PURE__ */ jsx18(
       "rect",
       {
         x: displayX - overlayWidth / 2,
@@ -4456,7 +4899,7 @@ function DataOverlay({
         filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
       }
     ),
-    label && /* @__PURE__ */ jsx17(
+    label && /* @__PURE__ */ jsx18(
       "text",
       {
         x: displayX,
@@ -4469,7 +4912,7 @@ function DataOverlay({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "text",
       {
         x: displayX,
@@ -4482,7 +4925,7 @@ function DataOverlay({
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && /* @__PURE__ */ jsx17(
+    showStatus && value.status !== "normal" && /* @__PURE__ */ jsx18(
       "circle",
       {
         cx: displayX + 35 * scale,
@@ -4490,7 +4933,7 @@ function DataOverlay({
         r: 3 * scale,
         fill: finalTextColor,
         opacity: "0.9",
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           "animate",
           {
             attributeName: "opacity",
@@ -4501,7 +4944,7 @@ function DataOverlay({
         )
       }
     ),
-    value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ jsxs13(
+    value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ jsxs14(
       "text",
       {
         x: displayX,
@@ -4518,7 +4961,7 @@ function DataOverlay({
         ]
       }
     ),
-    hasSparkline && /* @__PURE__ */ jsx17("g", { transform: `translate(${displayX - 35 * scale}, ${displayY + (label ? 5 : 0) * scale})`, children: /* @__PURE__ */ jsx17(
+    hasSparkline && /* @__PURE__ */ jsx18("g", { transform: `translate(${displayX - 35 * scale}, ${displayY + (label ? 5 : 0) * scale})`, children: /* @__PURE__ */ jsx18(
       "path",
       {
         d: sparklinePath,
@@ -4534,8 +4977,8 @@ function DataOverlay({
 }
 
 // src/components/PIDCanvas/PositionPanel.tsx
-import { useState as useState8, useEffect as useEffect5 } from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState9, useEffect as useEffect6 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function PositionPanel({
   selectedNode,
   selectedWaypoint,
@@ -4543,9 +4986,9 @@ function PositionPanel({
   onWaypointPositionChange,
   position = "top-right"
 }) {
-  const [x, setX] = useState8("");
-  const [y, setY] = useState8("");
-  useEffect5(() => {
+  const [x, setX] = useState9("");
+  const [y, setY] = useState9("");
+  useEffect6(() => {
     if (selectedNode) {
       setX(selectedNode.transform.x.toFixed(2));
       setY(selectedNode.transform.y.toFixed(2));
@@ -4604,7 +5047,7 @@ function PositionPanel({
     "bottom-left": { bottom: 10, left: 10 },
     "bottom-right": { bottom: 10, right: 10 }
   };
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       style: {
@@ -4621,11 +5064,11 @@ function PositionPanel({
         fontSize: "13px"
       },
       children: [
-        /* @__PURE__ */ jsx18("div", { style: { marginBottom: "8px", fontWeight: 600, color: "#333" }, children: "Position" }),
-        /* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-          /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ jsx18("label", { style: { width: "16px", color: "#666" }, children: "X:" }),
-            /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("div", { style: { marginBottom: "8px", fontWeight: 600, color: "#333" }, children: "Position" }),
+        /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx19("label", { style: { width: "16px", color: "#666" }, children: "X:" }),
+            /* @__PURE__ */ jsx19(
               "input",
               {
                 type: "number",
@@ -4643,9 +5086,9 @@ function PositionPanel({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ jsx18("label", { style: { width: "16px", color: "#666" }, children: "Y:" }),
-            /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx19("label", { style: { width: "16px", color: "#666" }, children: "Y:" }),
+            /* @__PURE__ */ jsx19(
               "input",
               {
                 type: "number",
@@ -4664,14 +5107,14 @@ function PositionPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx18("div", { style: { marginTop: "8px", fontSize: "11px", color: "#888" }, children: "Use arrow keys to nudge (\xB11px)" })
+        /* @__PURE__ */ jsx19("div", { style: { marginTop: "8px", fontSize: "11px", color: "#888" }, children: "Use arrow keys to nudge (\xB11px)" })
       ]
     }
   );
 }
 
 // src/diagram/hooks/useViewBox.ts
-import { useState as useState9, useCallback as useCallback3, useRef as useRef2, useEffect as useEffect6 } from "react";
+import { useState as useState10, useCallback as useCallback4, useRef as useRef3, useEffect as useEffect7 } from "react";
 function useViewBox(options) {
   const {
     initialViewBox,
@@ -4682,16 +5125,16 @@ function useViewBox(options) {
     zoomSensitivity = 1e-3,
     allowLeftClickPan = true
   } = options;
-  const [viewBox, setViewBox] = useState9(initialViewBox);
-  const svgRef = useRef2(null);
-  const isPanningRef = useRef2(false);
-  const lastMousePosRef = useRef2({ x: 0, y: 0 });
-  const spaceKeyDownRef = useRef2(false);
-  const lastTouchDistanceRef = useRef2(null);
-  const resetViewBox = useCallback3(() => {
+  const [viewBox, setViewBox] = useState10(initialViewBox);
+  const svgRef = useRef3(null);
+  const isPanningRef = useRef3(false);
+  const lastMousePosRef = useRef3({ x: 0, y: 0 });
+  const spaceKeyDownRef = useRef3(false);
+  const lastTouchDistanceRef = useRef3(null);
+  const resetViewBox = useCallback4(() => {
     setViewBox(initialViewBox);
   }, [initialViewBox]);
-  const zoomIn = useCallback3(() => {
+  const zoomIn = useCallback4(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.min(1 / minZoom, currentZoom * 1.25);
@@ -4708,7 +5151,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, minZoom]);
-  const zoomOut = useCallback3(() => {
+  const zoomOut = useCallback4(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.max(1 / maxZoom, currentZoom * 0.8);
@@ -4725,7 +5168,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, maxZoom]);
-  const fitToContent = useCallback3((bounds, padding = 50) => {
+  const fitToContent = useCallback4((bounds, padding = 50) => {
     const contentWidth = bounds.maxX - bounds.minX;
     const contentHeight = bounds.maxY - bounds.minY;
     if (contentWidth === 0 || contentHeight === 0) {
@@ -4753,7 +5196,7 @@ function useViewBox(options) {
       height: newHeight
     });
   }, [initialViewBox]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
     const handleWheel = (e) => {
@@ -4786,7 +5229,7 @@ function useViewBox(options) {
     svg.addEventListener("wheel", handleWheel, { passive: false });
     return () => svg.removeEventListener("wheel", handleWheel);
   }, [enableZoom, zoomSensitivity, minZoom, initialViewBox]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!enablePan || !svgRef.current) return;
     const svg = svgRef.current;
     const handleMouseDown = (e) => {
@@ -4862,7 +5305,7 @@ function useViewBox(options) {
       window.removeEventListener("keyup", handleKeyUp);
     };
   }, [enablePan, allowLeftClickPan]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!svgRef.current) return;
     if (!enablePan && !enableZoom) return;
     const svg = svgRef.current;
@@ -4953,7 +5396,7 @@ function useViewBox(options) {
       svg.removeEventListener("touchend", handleTouchEnd);
     };
   }, [enablePan, enableZoom, minZoom, initialViewBox]);
-  const screenToWorld = useCallback3(
+  const screenToWorld = useCallback4(
     (screenX, screenY) => {
       const svg = svgRef.current;
       if (!svg) return { x: screenX, y: screenY };
@@ -4992,15 +5435,15 @@ function useViewBox(options) {
 }
 
 // src/diagram/hooks/useSelection.ts
-import { useState as useState10, useCallback as useCallback4 } from "react";
+import { useState as useState11, useCallback as useCallback5 } from "react";
 function useSelection(options = {}) {
   const {
     multiSelect = true,
     initialSelection = { selectedNodeIds: /* @__PURE__ */ new Set(), selectedPipeIds: /* @__PURE__ */ new Set() },
     onSelectionChange
   } = options;
-  const [selection, setSelection] = useState10(initialSelection);
-  const notifyChange = useCallback4(
+  const [selection, setSelection] = useState11(initialSelection);
+  const notifyChange = useCallback5(
     (newSelection) => {
       if (onSelectionChange) {
         onSelectionChange(newSelection);
@@ -5008,15 +5451,15 @@ function useSelection(options = {}) {
     },
     [onSelectionChange]
   );
-  const isNodeSelected = useCallback4(
+  const isNodeSelected = useCallback5(
     (nodeId) => selection.selectedNodeIds.has(nodeId),
     [selection.selectedNodeIds]
   );
-  const isPipeSelected = useCallback4(
+  const isPipeSelected = useCallback5(
     (pipeId) => selection.selectedPipeIds.has(pipeId),
     [selection.selectedPipeIds]
   );
-  const selectNode = useCallback4(
+  const selectNode = useCallback5(
     (nodeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newNodeIds = new Set(isMultiSelect && multiSelect ? prev.selectedNodeIds : []);
@@ -5035,7 +5478,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const selectPipe = useCallback4(
+  const selectPipe = useCallback5(
     (pipeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newPipeIds = new Set(isMultiSelect && multiSelect ? prev.selectedPipeIds : []);
@@ -5054,7 +5497,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const clearSelection = useCallback4(() => {
+  const clearSelection = useCallback5(() => {
     const newSelection = {
       selectedNodeIds: /* @__PURE__ */ new Set(),
       selectedPipeIds: /* @__PURE__ */ new Set()
@@ -5062,7 +5505,7 @@ function useSelection(options = {}) {
     setSelection(newSelection);
     notifyChange(newSelection);
   }, [notifyChange]);
-  const selectNodes = useCallback4(
+  const selectNodes = useCallback5(
     (nodeIds) => {
       const newSelection = {
         selectedNodeIds: new Set(nodeIds),
@@ -5073,7 +5516,7 @@ function useSelection(options = {}) {
     },
     [notifyChange]
   );
-  const selectPipes = useCallback4(
+  const selectPipes = useCallback5(
     (pipeIds) => {
       const newSelection = {
         selectedNodeIds: /* @__PURE__ */ new Set(),
@@ -5097,23 +5540,23 @@ function useSelection(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetry.ts
-import { useState as useState11, useCallback as useCallback5, useEffect as useEffect7, useRef as useRef3 } from "react";
+import { useState as useState12, useCallback as useCallback6, useEffect as useEffect8, useRef as useRef4 } from "react";
 function useTelemetry(options = {}) {
   const {
     initialBindings = [],
     onTelemetryChange,
     refreshInterval = 0
   } = options;
-  const [telemetry, setTelemetry] = useState11(() => {
+  const [telemetry, setTelemetry] = useState12(() => {
     const map = /* @__PURE__ */ new Map();
     initialBindings.forEach((binding) => {
       map.set(binding.nodeId, binding);
     });
     return map;
   });
-  const telemetryRef = useRef3(telemetry);
+  const telemetryRef = useRef4(telemetry);
   telemetryRef.current = telemetry;
-  const notifyChange = useCallback5(
+  const notifyChange = useCallback6(
     (newTelemetry) => {
       if (onTelemetryChange) {
         onTelemetryChange(newTelemetry);
@@ -5121,7 +5564,7 @@ function useTelemetry(options = {}) {
     },
     [onTelemetryChange]
   );
-  const updateTelemetry = useCallback5(
+  const updateTelemetry = useCallback6(
     (nodeId, value) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -5151,7 +5594,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const updateTelemetryBatch = useCallback5(
+  const updateTelemetryBatch = useCallback6(
     (updates) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -5205,16 +5648,16 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const getTelemetry = useCallback5(
+  const getTelemetry = useCallback6(
     (nodeId) => telemetryRef.current.get(nodeId),
     []
   );
-  const clearTelemetry = useCallback5(() => {
+  const clearTelemetry = useCallback6(() => {
     const newMap = /* @__PURE__ */ new Map();
     setTelemetry(newMap);
     notifyChange(newMap);
   }, [notifyChange]);
-  const setBindings = useCallback5(
+  const setBindings = useCallback6(
     (bindings) => {
       const newMap = /* @__PURE__ */ new Map();
       bindings.forEach((binding) => {
@@ -5225,7 +5668,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (refreshInterval <= 0) return;
     const intervalId = setInterval(() => {
       notifyChange(telemetryRef.current);
@@ -5243,10 +5686,10 @@ function useTelemetry(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetryStatus.ts
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
   const { enabled = true, mapStatus } = options;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!enabled) return;
     const defaultMapStatus = (telemetryStatus) => {
       switch (telemetryStatus) {
@@ -5285,7 +5728,7 @@ function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
 }
 
 // src/diagram/hooks/useDrag.ts
-import { useState as useState12, useCallback as useCallback6, useRef as useRef4, useEffect as useEffect9 } from "react";
+import { useState as useState13, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect10 } from "react";
 function useDrag(options = {}) {
   const {
     onDragStart,
@@ -5295,23 +5738,23 @@ function useDrag(options = {}) {
     dragThreshold = 3,
     screenToWorld = (x, y) => ({ x, y })
   } = options;
-  const [dragState, setDragState] = useState12({
+  const [dragState, setDragState] = useState13({
     isDragging: false,
     startPosition: null,
     offset: { x: 0, y: 0 },
     draggedId: null
   });
-  const [isListening, setIsListening] = useState12(false);
-  const dragStartRef = useRef4(null);
-  const hasMovedRef = useRef4(false);
-  const applySnap = useCallback6(
+  const [isListening, setIsListening] = useState13(false);
+  const dragStartRef = useRef5(null);
+  const hasMovedRef = useRef5(false);
+  const applySnap = useCallback7(
     (value) => {
       if (snapToGrid <= 0) return value;
       return Math.round(value / snapToGrid) * snapToGrid;
     },
     [snapToGrid]
   );
-  const handleMouseMove = useCallback6(
+  const handleMouseMove = useCallback7(
     (event) => {
       if (!dragStartRef.current) return;
       const { id, screenStart: _screenStart, itemPosition, clickOffset } = dragStartRef.current;
@@ -5352,7 +5795,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleMouseUp = useCallback6(
+  const handleMouseUp = useCallback7(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -5389,7 +5832,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  const handleTouchMove = useCallback6(
+  const handleTouchMove = useCallback7(
     (event) => {
       if (!dragStartRef.current || event.touches.length !== 1) return;
       const touch = event.touches[0];
@@ -5432,7 +5875,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleTouchEnd = useCallback6(
+  const handleTouchEnd = useCallback7(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -5470,7 +5913,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isListening) return;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -5485,7 +5928,7 @@ function useDrag(options = {}) {
       document.removeEventListener("touchcancel", handleTouchEnd);
     };
   }, [isListening, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-  const startDrag = useCallback6(
+  const startDrag = useCallback7(
     (id, event, itemPosition) => {
       event.stopPropagation();
       let clientX;
@@ -5515,7 +5958,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld]
   );
-  const cancelDrag = useCallback6(() => {
+  const cancelDrag = useCallback7(() => {
     dragStartRef.current = null;
     hasMovedRef.current = false;
     setIsListening(false);
@@ -5526,7 +5969,7 @@ function useDrag(options = {}) {
       draggedId: null
     });
   }, []);
-  const isDraggingItem = useCallback6(
+  const isDraggingItem = useCallback7(
     (id) => dragState.isDragging && dragState.draggedId === id,
     [dragState.isDragging, dragState.draggedId]
   );
@@ -5539,7 +5982,7 @@ function useDrag(options = {}) {
 }
 
 // src/diagram/hooks/useKeyboardShortcuts.ts
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 function useKeyboardShortcuts(options) {
   const {
     onDelete,
@@ -5550,7 +5993,7 @@ function useKeyboardShortcuts(options) {
     onSelectAll,
     enabled = true
   } = options;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -5659,7 +6102,7 @@ function nodeHasPort(node, portId) {
 }
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function PIDCanvas({
   diagram,
   className = "",
@@ -5687,21 +6130,21 @@ function PIDCanvas({
   statusColorMap,
   ...props
 }) {
-  const [localDiagram, setLocalDiagram] = useState13(diagram);
-  const [dragOverPosition, setDragOverPosition] = useState13(null);
-  const [isConnecting, setIsConnecting] = useState13(false);
-  const [connectionSource, setConnectionSource] = useState13(null);
-  const [connectionSourcePort, setConnectionSourcePort] = useState13(null);
-  const [connectionCursor, setConnectionCursor] = useState13(null);
-  const [hoveredNode, setHoveredNode] = useState13(null);
-  const [hoveredPort, setHoveredPort] = useState13(null);
-  const [selectedWaypoint, setSelectedWaypoint] = useState13(null);
-  const historyStack = useRef5([]);
-  const redoStack = useRef5([]);
-  const isUndoRedoAction = useRef5(false);
-  const isInternalChange = useRef5(false);
-  const lastInternalDiagram = useRef5(null);
-  useEffect11(() => {
+  const [localDiagram, setLocalDiagram] = useState14(diagram);
+  const [dragOverPosition, setDragOverPosition] = useState14(null);
+  const [isConnecting, setIsConnecting] = useState14(false);
+  const [connectionSource, setConnectionSource] = useState14(null);
+  const [connectionSourcePort, setConnectionSourcePort] = useState14(null);
+  const [connectionCursor, setConnectionCursor] = useState14(null);
+  const [hoveredNode, setHoveredNode] = useState14(null);
+  const [hoveredPort, setHoveredPort] = useState14(null);
+  const [selectedWaypoint, setSelectedWaypoint] = useState14(null);
+  const historyStack = useRef6([]);
+  const redoStack = useRef6([]);
+  const isUndoRedoAction = useRef6(false);
+  const isInternalChange = useRef6(false);
+  const lastInternalDiagram = useRef6(null);
+  useEffect12(() => {
     const isExternal = !isInternalChange.current && diagram !== lastInternalDiagram.current;
     if (isExternal) {
       setLocalDiagram(diagram);
@@ -5723,7 +6166,7 @@ function PIDCanvas({
     enablePan: features.pan ?? true,
     enableZoom: features.zoom ?? true
   });
-  const calculateContentBounds = useCallback7(() => {
+  const calculateContentBounds = useCallback8(() => {
     const nodes2 = localDiagram.nodes.filter((n) => n.visible !== false);
     if (nodes2.length === 0) {
       return null;
@@ -5746,7 +6189,7 @@ function PIDCanvas({
     });
     return { minX, minY, maxX, maxY };
   }, [localDiagram.nodes]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (onMounted) {
       const controls = {
         fitToContent: (padding = 50) => {
@@ -5787,8 +6230,8 @@ function PIDCanvas({
   });
   const dragEnabled = features.dragNodes ?? false;
   const selectionEnabled = features.selection ?? false;
-  const containerRef = useRef5(null);
-  const pushToHistory = useCallback7((currentDiagram) => {
+  const containerRef = useRef6(null);
+  const pushToHistory = useCallback8((currentDiagram) => {
     if (isUndoRedoAction.current) return;
     const snapshot = JSON.parse(JSON.stringify(currentDiagram));
     historyStack.current.push(snapshot);
@@ -5797,7 +6240,7 @@ function PIDCanvas({
     }
     redoStack.current = [];
   }, []);
-  const undo = useCallback7(() => {
+  const undo = useCallback8(() => {
     if (historyStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -5811,7 +6254,7 @@ function PIDCanvas({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  const redo = useCallback7(() => {
+  const redo = useCallback8(() => {
     if (redoStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -5825,7 +6268,7 @@ function PIDCanvas({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  useEffect11(() => {
+  useEffect12(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrCmd = e.ctrlKey || e.metaKey;
       if (isCtrlOrCmd && e.key === "z" && !e.shiftKey) {
@@ -5842,7 +6285,7 @@ function PIDCanvas({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!features.dragNodes) return;
     const handleKeyDown = (e) => {
       if (selection.selectedNodeIds.size === 0 && !selectedWaypoint) return;
@@ -5927,7 +6370,7 @@ function PIDCanvas({
     onNodeMove,
     pushToHistory
   ]);
-  const handlePositionChange = useCallback7(
+  const handlePositionChange = useCallback8(
     (nodeId, x, y) => {
       pushToHistory(localDiagram);
       const updatedNodes = localDiagram.nodes.map(
@@ -5949,7 +6392,7 @@ function PIDCanvas({
     },
     [localDiagram, onDiagramChange, onNodeMove, pushToHistory]
   );
-  const handleWaypointPositionChange = useCallback7(
+  const handleWaypointPositionChange = useCallback8(
     (pipeId, pointIndex, x, y) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -5967,7 +6410,7 @@ function PIDCanvas({
     },
     [localDiagram, onDiagramChange, pushToHistory]
   );
-  const handleDragEnd = useCallback7(
+  const handleDragEnd = useCallback8(
     (nodeId, offset, finalPosition) => {
       const dragDistance = Math.sqrt(offset.x ** 2 + offset.y ** 2);
       if (dragDistance < 2) {
@@ -6048,7 +6491,7 @@ function PIDCanvas({
       onDiagramChange?.(updatedDiagram);
     }
   });
-  const handleNodeDragStart = useCallback7(
+  const handleNodeDragStart = useCallback8(
     (nodeId, event) => {
       const node = localDiagram.nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -6056,7 +6499,7 @@ function PIDCanvas({
     },
     [localDiagram.nodes, startDrag]
   );
-  const handleWaypointClick = useCallback7(
+  const handleWaypointClick = useCallback8(
     (pipeId, pointIndex) => {
       setSelectedWaypoint({ pipeId, pointIndex });
       if (selectionEnabled) {
@@ -6065,7 +6508,7 @@ function PIDCanvas({
     },
     [selectionEnabled, clearSelection]
   );
-  const handleWaypointDragStart = useCallback7(
+  const handleWaypointDragStart = useCallback8(
     (pipeId, pointIndex, event) => {
       const pipe = localDiagram.pipes.find((p) => p.id === pipeId);
       if (!pipe || pointIndex >= pipe.routePoints.length) return;
@@ -6074,7 +6517,7 @@ function PIDCanvas({
     },
     [localDiagram.pipes, startWaypointDrag]
   );
-  const handlePipeSegmentClick = useCallback7(
+  const handlePipeSegmentClick = useCallback8(
     (pipeId, position, segmentIndex) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -6093,7 +6536,7 @@ function PIDCanvas({
     [localDiagram, onDiagramChange, pushToHistory]
   );
   const telemetryEnabled = features.telemetry ?? false;
-  const handleDelete = useCallback7(() => {
+  const handleDelete = useCallback8(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
@@ -6122,13 +6565,13 @@ function PIDCanvas({
     onDelete,
     pushToHistory
   ]);
-  const handleCopy = useCallback7(() => {
+  const handleCopy = useCallback8(() => {
     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 = useCallback7(() => {
+  const handlePaste = useCallback8(() => {
     if (!selectionEnabled) return;
     onPaste?.();
   }, [selectionEnabled, onPaste]);
@@ -6188,7 +6631,7 @@ function PIDCanvas({
     }
     setSelectedWaypoint(null);
   };
-  const handleDragOver = useCallback7(
+  const handleDragOver = useCallback8(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -6199,7 +6642,7 @@ function PIDCanvas({
     },
     [features.allowSymbolDrop, screenToWorld, svgRef]
   );
-  const handleDrop = useCallback7(
+  const handleDrop = useCallback8(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -6212,10 +6655,10 @@ function PIDCanvas({
     },
     [features.allowSymbolDrop, screenToWorld, onSymbolDrop, svgRef]
   );
-  const handleDragLeave = useCallback7(() => {
+  const handleDragLeave = useCallback8(() => {
     setDragOverPosition(null);
   }, []);
-  const handleMouseMove = useCallback7(
+  const handleMouseMove = useCallback8(
     (event) => {
       const connectionModeEnabled = features.connectionMode ?? false;
       if (connectionModeEnabled) {
@@ -6252,7 +6695,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__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: containerRef,
@@ -6267,7 +6710,7 @@ function PIDCanvas({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "svg",
           {
             ref: svgRef,
@@ -6286,15 +6729,15 @@ function PIDCanvas({
             onDrop: handleDrop,
             onDragLeave: handleDragLeave,
             children: [
-              features.showGrid !== false ? /* @__PURE__ */ jsxs15(Fragment7, { children: [
-                /* @__PURE__ */ jsxs15("defs", { children: [
-                  /* @__PURE__ */ jsx19("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx19("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
-                  /* @__PURE__ */ jsxs15("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
-                    /* @__PURE__ */ jsx19("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
-                    /* @__PURE__ */ jsx19("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
+              features.showGrid !== false ? /* @__PURE__ */ jsxs16(Fragment7, { children: [
+                /* @__PURE__ */ jsxs16("defs", { children: [
+                  /* @__PURE__ */ jsx20("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx20("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
+                  /* @__PURE__ */ jsxs16("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
+                    /* @__PURE__ */ jsx20("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
+                    /* @__PURE__ */ jsx20("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx20(
                   "rect",
                   {
                     x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
@@ -6304,7 +6747,7 @@ function PIDCanvas({
                     fill: "url(#grid-major)"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsx19(
+              ] }) : /* @__PURE__ */ jsx20(
                 "rect",
                 {
                   x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
@@ -6314,7 +6757,7 @@ function PIDCanvas({
                   fill: features.backgroundColor ?? "#ffffff"
                 }
               ),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx20(
                 PipeRenderer,
                 {
                   pipes: displayDiagram.pipes,
@@ -6328,7 +6771,7 @@ function PIDCanvas({
                   onPipeSegmentClick: void 0
                 }
               ),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx20(
                 NodeRenderer,
                 {
                   nodes: displayDiagram.nodes,
@@ -6342,7 +6785,7 @@ function PIDCanvas({
                   statusColorMap
                 }
               ),
-              (features.editPipeRoutes ?? false) && /* @__PURE__ */ jsx19(
+              (features.editPipeRoutes ?? false) && /* @__PURE__ */ jsx20(
                 PipeRenderer,
                 {
                   pipes: displayDiagram.pipes,
@@ -6359,14 +6802,14 @@ function PIDCanvas({
                   onPipeSegmentClick: handlePipeSegmentClick
                 }
               ),
-              telemetryEnabled && telemetry && /* @__PURE__ */ jsx19("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
+              telemetryEnabled && telemetry && /* @__PURE__ */ jsx20("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__ */ jsx19(
+                return /* @__PURE__ */ jsx20(
                   DataOverlay,
                   {
                     nodeId: node.id,
@@ -6379,7 +6822,7 @@ function PIDCanvas({
                   `telemetry-${node.id}`
                 );
               }) }),
-              dragOverPosition && /* @__PURE__ */ jsx19(
+              dragOverPosition && /* @__PURE__ */ jsx20(
                 "circle",
                 {
                   cx: dragOverPosition.x,
@@ -6392,7 +6835,7 @@ function PIDCanvas({
                   pointerEvents: "none"
                 }
               ),
-              isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ jsx19("g", { id: "connection-preview", pointerEvents: "none", children: (() => {
+              isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ jsx20("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);
@@ -6408,8 +6851,8 @@ function PIDCanvas({
                     }
                   }
                 }
-                return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-                  /* @__PURE__ */ jsx19(
+                return /* @__PURE__ */ jsxs16(Fragment7, { children: [
+                  /* @__PURE__ */ jsx20(
                     "circle",
                     {
                       cx: lineStartX,
@@ -6421,7 +6864,7 @@ function PIDCanvas({
                       opacity: 0.6
                     }
                   ),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20(
                     "line",
                     {
                       x1: lineStartX,
@@ -6434,7 +6877,7 @@ function PIDCanvas({
                       opacity: 0.8
                     }
                   ),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20(
                     "circle",
                     {
                       cx: connectionCursor.x,
@@ -6446,7 +6889,7 @@ function PIDCanvas({
                   )
                 ] });
               })() }),
-              features.connectionMode && /* @__PURE__ */ jsx19("g", { id: "port-indicators", children: displayDiagram.nodes.map((node) => {
+              features.connectionMode && /* @__PURE__ */ jsx20("g", { id: "port-indicators", children: displayDiagram.nodes.map((node) => {
                 const symbol = getSymbolDefinition(node.symbolId);
                 if (!symbol?.ports) return null;
                 return symbol.ports.map((port) => {
@@ -6454,8 +6897,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__ */ jsxs15("g", { children: [
-                    /* @__PURE__ */ jsx19(
+                  return /* @__PURE__ */ jsxs16("g", { children: [
+                    /* @__PURE__ */ jsx20(
                       "circle",
                       {
                         cx: portPos.x,
@@ -6488,7 +6931,7 @@ function PIDCanvas({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx19(
+                    /* @__PURE__ */ jsx20(
                       "circle",
                       {
                         cx: portPos.x,
@@ -6507,7 +6950,7 @@ function PIDCanvas({
             ]
           }
         ),
-        features.dragNodes && /* @__PURE__ */ jsx19(
+        features.dragNodes && /* @__PURE__ */ jsx20(
           PositionPanel,
           {
             selectedNode,
@@ -6527,16 +6970,16 @@ function PIDCanvas({
 }
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
-import { useState as useState14 } from "react";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function SymbolLibrary({
   className = "",
   onSymbolDragStart,
   showCategories = true,
   categories = ["Valves", "Pumps", "Tanks", "Instruments", "Displays"]
 }) {
-  const [selectedCategory, setSelectedCategory] = useState14("all");
-  const [searchQuery, setSearchQuery] = useState14("");
+  const [selectedCategory, setSelectedCategory] = useState15("all");
+  const [searchQuery, setSearchQuery] = useState15("");
   const symbolIds = getAvailableSymbols();
   const allSymbols = symbolIds.map((id) => getSymbolDefinition(id)).filter((symbol) => symbol !== void 0);
   const categoryMap = {
@@ -6557,9 +7000,9 @@ function SymbolLibrary({
     event.dataTransfer.effectAllowed = "copy";
     onSymbolDragStart?.(symbol.id, event);
   };
-  return /* @__PURE__ */ jsxs16("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
-    /* @__PURE__ */ jsx20("div", { style: styles.header, children: /* @__PURE__ */ jsx20("h3", { style: styles.title, children: "Symbol Library" }) }),
-    /* @__PURE__ */ jsx20("div", { style: styles.searchContainer, children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs17("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
+    /* @__PURE__ */ jsx21("div", { style: styles.header, children: /* @__PURE__ */ jsx21("h3", { style: styles.title, children: "Symbol Library" }) }),
+    /* @__PURE__ */ jsx21("div", { style: styles.searchContainer, children: /* @__PURE__ */ jsx21(
       "input",
       {
         type: "text",
@@ -6569,8 +7012,8 @@ function SymbolLibrary({
         style: styles.searchInput
       }
     ) }),
-    showCategories && /* @__PURE__ */ jsxs16("div", { style: styles.categories, children: [
-      /* @__PURE__ */ jsx20(
+    showCategories && /* @__PURE__ */ jsxs17("div", { style: styles.categories, children: [
+      /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => setSelectedCategory("all"),
@@ -6581,7 +7024,7 @@ function SymbolLibrary({
           children: "All"
         }
       ),
-      categories.map((category) => /* @__PURE__ */ jsx20(
+      categories.map((category) => /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => setSelectedCategory(category),
@@ -6594,7 +7037,7 @@ function SymbolLibrary({
         category
       ))
     ] }),
-    /* @__PURE__ */ jsx20("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ jsx20("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsx21("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ jsx21("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ jsxs17(
       "div",
       {
         draggable: true,
@@ -6602,15 +7045,15 @@ function SymbolLibrary({
         style: styles.symbolCard,
         title: symbol.metadata?.description || symbol.name,
         children: [
-          /* @__PURE__ */ jsx20("div", { style: styles.symbolPreview, children: /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21("div", { style: styles.symbolPreview, children: /* @__PURE__ */ jsx21(
             "svg",
             {
               viewBox: `${symbol.viewBox.x} ${symbol.viewBox.y} ${symbol.viewBox.width} ${symbol.viewBox.height}`,
               style: styles.symbolSvg,
-              children: /* @__PURE__ */ jsx20("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
+              children: /* @__PURE__ */ jsx21("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
             }
           ) }),
-          /* @__PURE__ */ jsx20("div", { style: styles.symbolName, children: symbol.name })
+          /* @__PURE__ */ jsx21("div", { style: styles.symbolName, children: symbol.name })
         ]
       },
       symbol.id
@@ -6719,7 +7162,7 @@ var styles = {
 };
 
 // src/components/NodeConfigPanel/NodeConfigPanel.tsx
-import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function NodeConfigPanel({
   node,
   binding,
@@ -6738,15 +7181,15 @@ function NodeConfigPanel({
     padding: "20px",
     ...style
   };
-  return /* @__PURE__ */ jsxs17("div", { className, style: defaultStyle, children: [
-    /* @__PURE__ */ jsxs17("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
+  return /* @__PURE__ */ jsxs18("div", { className, style: defaultStyle, children: [
+    /* @__PURE__ */ jsxs18("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
       "Configure: ",
       node.id
     ] }),
-    /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsx21("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
-      /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
-      /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx22("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
+      /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
+      /* @__PURE__ */ jsx22(
         "input",
         {
           type: "text",
@@ -6762,10 +7205,10 @@ function NodeConfigPanel({
           }
         }
       ),
-      /* @__PURE__ */ jsxs17("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-        /* @__PURE__ */ jsxs17("div", { children: [
-          /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
-          /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs18("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxs18("div", { children: [
+          /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
+          /* @__PURE__ */ jsx22(
             "input",
             {
               type: "number",
@@ -6786,9 +7229,9 @@ function NodeConfigPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs17("div", { children: [
-          /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
-          /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsxs18("div", { children: [
+          /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
+          /* @__PURE__ */ jsx22(
             "input",
             {
               type: "number",
@@ -6810,9 +7253,9 @@ function NodeConfigPanel({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
-        /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs18("div", { children: [
+        /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
+        /* @__PURE__ */ jsx22(
           "input",
           {
             type: "number",
@@ -6832,9 +7275,9 @@ function NodeConfigPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
-        /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs18("div", { children: [
+        /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
+        /* @__PURE__ */ jsx22(
           "input",
           {
             type: "number",
@@ -6859,9 +7302,9 @@ function NodeConfigPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsx21("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
-      !binding ? /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx22("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
+      !binding ? /* @__PURE__ */ jsx22(
         "button",
         {
           onClick: () => {
@@ -6904,9 +7347,9 @@ function NodeConfigPanel({
           },
           children: "+ Add Telemetry"
         }
-      ) : /* @__PURE__ */ jsxs17(Fragment8, { children: [
-        /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
-        /* @__PURE__ */ jsx21(
+      ) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
+        /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
+        /* @__PURE__ */ jsx22(
           "input",
           {
             type: "number",
@@ -6928,8 +7371,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
+        /* @__PURE__ */ jsx22(
           "input",
           {
             type: "text",
@@ -6951,8 +7394,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsxs17("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
-          /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsxs18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ jsx22(
             "input",
             {
               type: "checkbox",
@@ -6974,8 +7417,8 @@ function NodeConfigPanel({
           ),
           "Show Sparkline"
         ] }),
-        /* @__PURE__ */ jsxs17("div", { style: { marginTop: "12px" }, children: [
-          /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsxs18("div", { style: { marginTop: "12px" }, children: [
+          /* @__PURE__ */ jsx22(
             "label",
             {
               style: {
@@ -6987,10 +7430,10 @@ function NodeConfigPanel({
               children: "Telemetry Position Offset:"
             }
           ),
-          /* @__PURE__ */ jsxs17("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-            /* @__PURE__ */ jsxs17("div", { children: [
-              /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
-              /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsxs18("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+            /* @__PURE__ */ jsxs18("div", { children: [
+              /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
+              /* @__PURE__ */ jsx22(
                 "input",
                 {
                   type: "number",
@@ -7017,9 +7460,9 @@ function NodeConfigPanel({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs17("div", { children: [
-              /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
-              /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsxs18("div", { children: [
+              /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
+              /* @__PURE__ */ jsx22(
                 "input",
                 {
                   type: "number",
@@ -7047,8 +7490,8 @@ function NodeConfigPanel({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { style: { marginTop: "16px" }, children: [
-            /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsxs18("div", { style: { marginTop: "16px" }, children: [
+            /* @__PURE__ */ jsx22(
               "label",
               {
                 style: {
@@ -7060,10 +7503,10 @@ function NodeConfigPanel({
                 children: "Display Colors:"
               }
             ),
-            /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
-              /* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
+              /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx22(
                   "input",
                   {
                     type: "color",
@@ -7089,7 +7532,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   "input",
                   {
                     type: "text",
@@ -7119,10 +7562,10 @@ function NodeConfigPanel({
                 )
               ] })
             ] }),
-            binding.display?.showSparkline && /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
-              /* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsx21(
+            binding.display?.showSparkline && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
+              /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx22(
                   "input",
                   {
                     type: "color",
@@ -7148,7 +7591,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   "input",
                   {
                     type: "text",
@@ -7178,9 +7621,9 @@ function NodeConfigPanel({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
-              /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
+              /* @__PURE__ */ jsx22(
                 "input",
                 {
                   type: "text",
@@ -7208,20 +7651,20 @@ function NodeConfigPanel({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx21("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
+              /* @__PURE__ */ jsx22("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
             ] })
           ] }),
           " "
         ] })
       ] })
     ] }),
-    binding && /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsx21("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Thresholds" }),
+    binding && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx22("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__ */ jsxs17("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ jsx21("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
-          /* @__PURE__ */ jsx21(
+        return /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
+          /* @__PURE__ */ jsx22(
             "input",
             {
               type: "number",
@@ -7245,8 +7688,8 @@ function NodeConfigPanel({
         ] }, key);
       })
     ] }),
-    binding && /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsx21("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
+    binding && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx22("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
       ["normal", "warning", "alarm", "fault", "off"].map((status) => {
         const defaultColors = {
           normal: "#10b981",
@@ -7256,13 +7699,13 @@ function NodeConfigPanel({
           off: "#6b7280"
         };
         const label = status === "normal" ? "Normal" : status === "warning" ? "Warning" : status === "alarm" ? "Alarm" : status === "fault" ? "Fault" : "Off";
-        return /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ jsxs17("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+        return /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsxs18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
             label,
             ":"
           ] }),
-          /* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx22(
               "input",
               {
                 type: "color",
@@ -7283,7 +7726,7 @@ function NodeConfigPanel({
                 }
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               "input",
               {
                 type: "text",
@@ -7310,7 +7753,7 @@ function NodeConfigPanel({
         ] }, status);
       })
     ] }),
-    /* @__PURE__ */ jsx21("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ jsx22(
       "button",
       {
         onClick: onRemove,
@@ -7587,13 +8030,13 @@ function createControlBinding(nodeId, deviceConfig, actions) {
 }
 
 // src/hooks/useDeviceControls.ts
-import { useState as useState15, useCallback as useCallback8, useRef as useRef6 } from "react";
+import { useState as useState16, useCallback as useCallback9, useRef as useRef7 } from "react";
 function commandKey(nodeId, kind, suffix) {
   return suffix ? `${nodeId}:${kind}:${suffix}` : `${nodeId}:${kind}`;
 }
 function useDeviceControls(initialBindings, options) {
   const { commandTimeoutMs } = options ?? {};
-  const [controls, setControls] = useState15(() => {
+  const [controls, setControls] = useState16(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialBindings) {
       initialBindings.forEach((binding) => {
@@ -7602,12 +8045,12 @@ function useDeviceControls(initialBindings, options) {
     }
     return map;
   });
-  const pendingRef = useRef6(/* @__PURE__ */ new Map());
-  const [pendingCommands, setPendingCommands] = useState15(() => /* @__PURE__ */ new Set());
-  const syncPending = useCallback8(() => {
+  const pendingRef = useRef7(/* @__PURE__ */ new Map());
+  const [pendingCommands, setPendingCommands] = useState16(() => /* @__PURE__ */ new Set());
+  const syncPending = useCallback9(() => {
     setPendingCommands(new Set(pendingRef.current.keys()));
   }, []);
-  const updateControl = useCallback8((nodeId, updates) => {
+  const updateControl = useCallback9((nodeId, updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -7621,7 +8064,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateControlBatch = useCallback8((updates) => {
+  const updateControlBatch = useCallback9((updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       Object.entries(updates).forEach(([nodeId, update]) => {
@@ -7633,7 +8076,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateDeviceState = useCallback8(
+  const updateDeviceState = useCallback9(
     (nodeId, stateUpdates) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -7649,7 +8092,7 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const updateParameter = useCallback8(
+  const updateParameter = useCallback9(
     (nodeId, parameterId, value) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -7676,27 +8119,27 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const setControlBinding = useCallback8((binding) => {
+  const setControlBinding = useCallback9((binding) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       newMap.set(binding.nodeId, binding);
       return newMap;
     });
   }, []);
-  const removeControlBinding = useCallback8((nodeId) => {
+  const removeControlBinding = useCallback9((nodeId) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       newMap.delete(nodeId);
       return newMap;
     });
   }, []);
-  const getControlBinding = useCallback8(
+  const getControlBinding = useCallback9(
     (nodeId) => {
       return controls.get(nodeId);
     },
     [controls]
   );
-  const isCommandPending = useCallback8(
+  const isCommandPending = useCallback9(
     (nodeId, kind) => {
       if (kind) {
         const prefix2 = `${nodeId}:${kind}`;
@@ -7713,7 +8156,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [pendingCommands]
   );
-  const markPending = useCallback8(
+  const markPending = useCallback9(
     (key, delta) => {
       const next = (pendingRef.current.get(key) ?? 0) + delta;
       if (next > 0) pendingRef.current.set(key, next);
@@ -7722,7 +8165,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [syncPending]
   );
-  const runCommand = useCallback8(
+  const runCommand = useCallback9(
     async (nodeId, key, invoke, messages) => {
       const binding = controls.get(nodeId);
       if (!binding) return;
@@ -7762,7 +8205,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [controls, updateDeviceState, markPending, commandTimeoutMs]
   );
-  const sendModeChange = useCallback8(
+  const sendModeChange = useCallback9(
     (nodeId, mode) => runCommand(
       nodeId,
       commandKey(nodeId, "mode"),
@@ -7771,7 +8214,7 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendParameterChange = useCallback8(
+  const sendParameterChange = useCallback9(
     (nodeId, parameterId, value) => runCommand(
       nodeId,
       commandKey(nodeId, "parameter", parameterId),
@@ -7780,21 +8223,21 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendStartCommand = useCallback8(
+  const sendStartCommand = useCallback9(
     (nodeId) => runCommand(nodeId, commandKey(nodeId, "start"), (binding) => binding.actions.onStart?.(), {
       success: "Start command sent",
       failure: "Start command failed"
     }),
     [runCommand]
   );
-  const sendStopCommand = useCallback8(
+  const sendStopCommand = useCallback9(
     (nodeId) => runCommand(nodeId, commandKey(nodeId, "stop"), (binding) => binding.actions.onStop?.(), {
       success: "Stop command sent",
       failure: "Stop command failed"
     }),
     [runCommand]
   );
-  const sendCustomAction = useCallback8(
+  const sendCustomAction = useCallback9(
     (nodeId, actionId) => runCommand(
       nodeId,
       commandKey(nodeId, "action", actionId),
@@ -7847,9 +8290,9 @@ function createConfigBinding(nodeId, tag, parameters, actions, options) {
 }
 
 // src/hooks/useDeviceConfigs.ts
-import { useState as useState16, useCallback as useCallback9 } from "react";
+import { useState as useState17, useCallback as useCallback10 } from "react";
 function useDeviceConfigs(initialConfigs) {
-  const [configs, setConfigs] = useState16(() => {
+  const [configs, setConfigs] = useState17(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialConfigs) {
       initialConfigs.forEach((config) => {
@@ -7858,13 +8301,13 @@ function useDeviceConfigs(initialConfigs) {
     }
     return map;
   });
-  const getConfig = useCallback9(
+  const getConfig = useCallback10(
     (nodeId) => {
       return configs.get(nodeId);
     },
     [configs]
   );
-  const updateConfig = useCallback9((nodeId, updates) => {
+  const updateConfig = useCallback10((nodeId, updates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -7878,7 +8321,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateConfigState = useCallback9((nodeId, stateUpdates) => {
+  const updateConfigState = useCallback10((nodeId, stateUpdates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -7891,7 +8334,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateConfigBatch = useCallback9((updates) => {
+  const updateConfigBatch = useCallback10((updates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       Object.entries(updates).forEach(([nodeId, update]) => {
@@ -7903,7 +8346,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateParameterValue = useCallback9((nodeId, parameterId, value) => {
+  const updateParameterValue = useCallback10((nodeId, parameterId, value) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -7920,7 +8363,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const applyConfig = useCallback9(
+  const applyConfig = useCallback10(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config || !config.actions.onApply) {
@@ -7953,7 +8396,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const saveConfig = useCallback9(
+  const saveConfig = useCallback10(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config || !config.actions.onSave) {
@@ -7987,7 +8430,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const resetConfig = useCallback9(
+  const resetConfig = useCallback10(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -8017,7 +8460,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfig, updateConfigState]
   );
-  const cancelConfig = useCallback9(
+  const cancelConfig = useCallback10(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (config?.actions.onCancel) {
@@ -8026,7 +8469,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs]
   );
-  const validateConfig = useCallback9(
+  const validateConfig = useCallback10(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -8068,21 +8511,21 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const setConfig = useCallback9((config) => {
+  const setConfig = useCallback10((config) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       newMap.set(config.nodeId, config);
       return newMap;
     });
   }, []);
-  const removeConfig = useCallback9((nodeId) => {
+  const removeConfig = useCallback10((nodeId) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       newMap.delete(nodeId);
       return newMap;
     });
   }, []);
-  const clearConfigs = useCallback9(() => {
+  const clearConfigs = useCallback10(() => {
     setConfigs(/* @__PURE__ */ new Map());
   }, []);
   return {
@@ -8104,8 +8547,8 @@ function useDeviceConfigs(initialConfigs) {
 }
 
 // src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
-import { useState as useState17, useEffect as useEffect12, useMemo, useRef as useRef7 } from "react";
-import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState18, useEffect as useEffect13, useMemo, useRef as useRef8 } from "react";
+import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function DeviceConfigPanel({
   binding,
   onClose,
@@ -8123,7 +8566,7 @@ function DeviceConfigPanel({
   showControlsButton = true,
   embedded = false
 }) {
-  const [localValues, setLocalValues] = useState17(() => {
+  const [localValues, setLocalValues] = useState18(() => {
     if (binding) {
       const values = {};
       binding.parameters.forEach((param) => {
@@ -8133,7 +8576,7 @@ function DeviceConfigPanel({
     }
     return {};
   });
-  const [collapsedSections, setCollapsedSections] = useState17(() => {
+  const [collapsedSections, setCollapsedSections] = useState18(() => {
     const collapsed = /* @__PURE__ */ new Set();
     if (binding?.sections) {
       binding.sections.forEach((section) => {
@@ -8144,9 +8587,9 @@ function DeviceConfigPanel({
     }
     return collapsed;
   });
-  const [showToast, setShowToast] = useState17(true);
-  const [bindingId, setBindingId] = useState17(binding?.nodeId || null);
-  const lastResultTimestampRef = useRef7(0);
+  const [showToast, setShowToast] = useState18(true);
+  const [bindingId, setBindingId] = useState18(binding?.nodeId || null);
+  const lastResultTimestampRef = useRef8(0);
   if (binding && binding.nodeId !== bindingId) {
     const values = {};
     binding.parameters.forEach((param) => {
@@ -8162,7 +8605,7 @@ function DeviceConfigPanel({
     setCollapsedSections(collapsed);
     setBindingId(binding.nodeId);
   }
-  useEffect12(() => {
+  useEffect13(() => {
     const currentTimestamp = binding?.state.lastSaved || 0;
     if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
       lastResultTimestampRef.current = currentTimestamp;
@@ -8267,14 +8710,14 @@ function DeviceConfigPanel({
     const value = localValues[param.id];
     const error = binding.state.errors?.[param.id];
     const isDisabled = param.readOnly || param.enabled === false;
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         style: {
           marginBottom: spacing.marginBottom
         },
         children: [
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "label",
             {
               style: {
@@ -8289,8 +8732,8 @@ function DeviceConfigPanel({
               },
               children: [
                 param.label,
-                param.required && /* @__PURE__ */ jsx22("span", { style: { color: errorColor }, children: " *" }),
-                param.unit && /* @__PURE__ */ jsxs18("span", { style: { color: mutedTextColor, fontWeight: "normal" }, children: [
+                param.required && /* @__PURE__ */ jsx23("span", { style: { color: errorColor }, children: " *" }),
+                param.unit && /* @__PURE__ */ jsxs19("span", { style: { color: mutedTextColor, fontWeight: "normal" }, children: [
                   " (",
                   param.unit,
                   ")"
@@ -8298,7 +8741,7 @@ function DeviceConfigPanel({
               ]
             }
           ),
-          param.description && /* @__PURE__ */ jsx22(
+          param.description && /* @__PURE__ */ jsx23(
             "div",
             {
               style: {
@@ -8310,7 +8753,7 @@ function DeviceConfigPanel({
               children: param.description
             }
           ),
-          param.type === "number" && /* @__PURE__ */ jsx22(
+          param.type === "number" && /* @__PURE__ */ jsx23(
             "input",
             {
               type: "number",
@@ -8334,7 +8777,7 @@ function DeviceConfigPanel({
               }
             }
           ),
-          param.type === "string" && /* @__PURE__ */ jsx22(
+          param.type === "string" && /* @__PURE__ */ jsx23(
             "input",
             {
               type: "text",
@@ -8355,7 +8798,7 @@ function DeviceConfigPanel({
               }
             }
           ),
-          param.type === "boolean" && /* @__PURE__ */ jsxs18(
+          param.type === "boolean" && /* @__PURE__ */ jsxs19(
             "label",
             {
               style: {
@@ -8365,7 +8808,7 @@ function DeviceConfigPanel({
                 cursor: isDisabled ? "not-allowed" : "pointer"
               },
               children: [
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "input",
                   {
                     type: "checkbox",
@@ -8379,11 +8822,11 @@ function DeviceConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx22("span", { style: { fontSize: `${fontSize.value}px`, color: textColor }, children: value ? "Enabled" : "Disabled" })
+                /* @__PURE__ */ jsx23("span", { style: { fontSize: `${fontSize.value}px`, color: textColor }, children: value ? "Enabled" : "Disabled" })
               ]
             }
           ),
-          param.type === "select" && /* @__PURE__ */ jsx22(
+          param.type === "select" && /* @__PURE__ */ jsx23(
             "select",
             {
               value: value ?? "",
@@ -8401,10 +8844,10 @@ function DeviceConfigPanel({
                 borderRadius: "2px",
                 outline: "none"
               },
-              children: param.options?.map((option) => /* @__PURE__ */ jsx22("option", { value: option.value, children: option.label }, option.value))
+              children: param.options?.map((option) => /* @__PURE__ */ jsx23("option", { value: option.value, children: option.label }, option.value))
             }
           ),
-          error && /* @__PURE__ */ jsx22(
+          error && /* @__PURE__ */ jsx23(
             "div",
             {
               style: {
@@ -8424,7 +8867,7 @@ function DeviceConfigPanel({
   const renderSection = (section) => {
     const params = parametersBySection[section.id] || [];
     const isCollapsed = collapsedSections.has(section.id);
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         style: {
@@ -8434,7 +8877,7 @@ function DeviceConfigPanel({
           backgroundColor: surfaceColor
         },
         children: [
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "div",
             {
               onClick: () => section.collapsible && toggleSection(section.id),
@@ -8447,8 +8890,8 @@ function DeviceConfigPanel({
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ jsxs18("div", { children: [
-                  /* @__PURE__ */ jsxs18(
+                /* @__PURE__ */ jsxs19("div", { children: [
+                  /* @__PURE__ */ jsxs19(
                     "div",
                     {
                       style: {
@@ -8460,12 +8903,12 @@ function DeviceConfigPanel({
                         letterSpacing: "0.5px"
                       },
                       children: [
-                        section.icon && /* @__PURE__ */ jsx22("span", { style: { marginRight: "8px" }, children: section.icon }),
+                        section.icon && /* @__PURE__ */ jsx23("span", { style: { marginRight: "8px" }, children: section.icon }),
                         section.title
                       ]
                     }
                   ),
-                  section.description && /* @__PURE__ */ jsx22(
+                  section.description && /* @__PURE__ */ jsx23(
                     "div",
                     {
                       style: {
@@ -8478,11 +8921,11 @@ function DeviceConfigPanel({
                     }
                   )
                 ] }),
-                section.collapsible && /* @__PURE__ */ jsx22("span", { style: { fontSize: "16px", color: mutedTextColor }, children: isCollapsed ? "\u25BC" : "\u25B2" })
+                section.collapsible && /* @__PURE__ */ jsx23("span", { style: { fontSize: "16px", color: mutedTextColor }, children: isCollapsed ? "\u25BC" : "\u25B2" })
               ]
             }
           ),
-          !isCollapsed && /* @__PURE__ */ jsx22("div", { style: { padding: spacing.padding }, children: params.map(renderParameter) })
+          !isCollapsed && /* @__PURE__ */ jsx23("div", { style: { padding: spacing.padding }, children: params.map(renderParameter) })
         ]
       },
       section.id
@@ -8541,9 +8984,9 @@ function DeviceConfigPanel({
   const showSave = binding.display?.showSave !== false && binding.actions.onSave;
   const showReset = binding.display?.showReset !== false && binding.actions.onReset;
   const showCancel = binding.display?.showCancel !== false;
-  return /* @__PURE__ */ jsxs18(Fragment9, { children: [
-    /* @__PURE__ */ jsxs18("div", { style: panelStyle, className: binding.display?.className, children: [
-      /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(Fragment9, { children: [
+    /* @__PURE__ */ jsxs19("div", { style: panelStyle, className: binding.display?.className, children: [
+      /* @__PURE__ */ jsxs19(
         "div",
         {
           style: {
@@ -8555,8 +8998,8 @@ function DeviceConfigPanel({
             borderBottom: `2px solid ${borderColor}`
           },
           children: [
-            /* @__PURE__ */ jsxs18("div", { children: [
-              /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsxs19("div", { children: [
+              /* @__PURE__ */ jsx23(
                 "h3",
                 {
                   style: {
@@ -8576,7 +9019,7 @@ function DeviceConfigPanel({
                   children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
                 }
               ),
-              binding.display?.subtitle && /* @__PURE__ */ jsx22(
+              binding.display?.subtitle && /* @__PURE__ */ jsx23(
                 "div",
                 {
                   style: {
@@ -8589,8 +9032,8 @@ function DeviceConfigPanel({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "8px" }, children: [
-              showControlsButton && onOpenControls && /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "8px" }, children: [
+              showControlsButton && onOpenControls && /* @__PURE__ */ jsx23(
                 "button",
                 {
                   onClick: onOpenControls,
@@ -8613,7 +9056,7 @@ function DeviceConfigPanel({
                   children: "CTRL"
                 }
               ),
-              onUndock && /* @__PURE__ */ jsx22(
+              onUndock && /* @__PURE__ */ jsx23(
                 "button",
                 {
                   onClick: onUndock,
@@ -8634,7 +9077,7 @@ function DeviceConfigPanel({
                   children: undockIcon
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 "button",
                 {
                   onClick: onClose,
@@ -8657,7 +9100,7 @@ function DeviceConfigPanel({
           ]
         }
       ),
-      binding.state.isDirty && /* @__PURE__ */ jsx22(
+      binding.state.isDirty && /* @__PURE__ */ jsx23(
         "div",
         {
           style: {
@@ -8672,11 +9115,11 @@ function DeviceConfigPanel({
           children: "Unsaved changes"
         }
       ),
-      /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflowY: "auto", marginBottom: spacing.marginBottom }, children: sortedSections.length > 0 ? sortedSections.map(renderSection) : (
+      /* @__PURE__ */ jsx23("div", { style: { flex: 1, overflowY: "auto", marginBottom: spacing.marginBottom }, children: sortedSections.length > 0 ? sortedSections.map(renderSection) : (
         /* Render unsectioned parameters */
-        /* @__PURE__ */ jsx22("div", { children: parametersBySection._unsectioned?.map(renderParameter) })
+        /* @__PURE__ */ jsx23("div", { children: parametersBySection._unsectioned?.map(renderParameter) })
       ) }),
-      /* @__PURE__ */ jsxs18(
+      /* @__PURE__ */ jsxs19(
         "div",
         {
           style: {
@@ -8687,7 +9130,7 @@ function DeviceConfigPanel({
             flexWrap: "wrap"
           },
           children: [
-            showApply && /* @__PURE__ */ jsx22(
+            showApply && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: handleApply,
@@ -8710,7 +9153,7 @@ function DeviceConfigPanel({
                 children: binding.state.isSaving ? "Applying..." : "Apply"
               }
             ),
-            showSave && /* @__PURE__ */ jsx22(
+            showSave && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: handleSave,
@@ -8733,7 +9176,7 @@ function DeviceConfigPanel({
                 children: binding.state.isSaving ? "Saving..." : "Save"
               }
             ),
-            showReset && /* @__PURE__ */ jsx22(
+            showReset && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: handleReset,
@@ -8756,7 +9199,7 @@ function DeviceConfigPanel({
                 children: "Reset"
               }
             ),
-            showCancel && /* @__PURE__ */ jsx22(
+            showCancel && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: handleCancel,
@@ -8783,7 +9226,7 @@ function DeviceConfigPanel({
         }
       )
     ] }),
-    binding.state.lastSaveResult && showToast && /* @__PURE__ */ jsx22(
+    binding.state.lastSaveResult && showToast && /* @__PURE__ */ jsx23(
       "div",
       {
         style: {
@@ -8807,7 +9250,7 @@ function DeviceConfigPanel({
 }
 
 // src/diagram/hooks/useSimulation.ts
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   const {
     interval = 2e3,
@@ -8818,7 +9261,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  useEffect13(() => {
+  useEffect14(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -8890,6 +9333,7 @@ export {
   LegacyValueEntry,
   NodeConfigPanel,
   NodeControlsPanel,
+  NumpadDialog,
   PIDCanvas,
   PanelContent,
   PanelTabs,