npm - @procaaso/alphinity-ui-components - Versions diffs - 1.3.0 → 1.5.0 - Mend

@procaaso/alphinity-ui-components 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.js CHANGED Viewed

@@ -935,6 +935,7 @@ function DeviceControlPanel({
   toastDuration = 3e3,
   onModeChange,
   onParameterChange,
+  onParameterActivate,
   onStart,
   onStop,
   startPending = false,
@@ -1647,6 +1648,36 @@ function DeviceControlPanel({
                   },
                   children: param.options?.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
                 }
+              ) : onParameterActivate && !param.readOnly ? (
+                // Tappable value: defer editing to the consumer's editor (e.g. a
+                // numpad dialog). Commit happens via onParameterChange.
+                /* @__PURE__ */ jsxs7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onParameterActivate(param.id, localParameterValues[param.id] ?? param.value),
+                    style: {
+                      width: "100%",
+                      height: touchSize,
+                      display: "flex",
+                      alignItems: "center",
+                      backgroundColor: "#ffffff",
+                      color: textColor,
+                      border: `1px solid ${borderColor}`,
+                      borderRadius: "6px",
+                      padding: "0 12px",
+                      fontSize: `${fontSize.input}px`,
+                      fontFamily: "Arial, sans-serif",
+                      fontWeight: 600,
+                      textAlign: "left",
+                      cursor: "pointer"
+                    },
+                    children: [
+                      localParameterValues[param.id] ?? param.value,
+                      param.unit ? ` ${param.unit}` : ""
+                    ]
+                  }
+                )
               ) : /* @__PURE__ */ jsx8(
                 "input",
                 {
@@ -1809,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 = () => {
@@ -1941,7 +2415,7 @@ var DisplayModeToggle = styled(IconButton)(({ mode }) => ({
     transform: "translateX(-50%) scale(1.05)"
   }
 }));
-var ChevronLeft = () => /* @__PURE__ */ jsx9(
+var ChevronLeft = () => /* @__PURE__ */ jsx10(
   "div",
   {
     style: {
@@ -1953,7 +2427,7 @@ var ChevronLeft = () => /* @__PURE__ */ jsx9(
     }
   }
 );
-var ChevronRight = () => /* @__PURE__ */ jsx9(
+var ChevronRight = () => /* @__PURE__ */ jsx10(
   "div",
   {
     style: {
@@ -2064,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%)",
@@ -2129,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");
@@ -2150,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(),
@@ -2214,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,
@@ -2224,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: {
@@ -2236,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" })
       }
     );
   }
@@ -2248,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: {
@@ -2259,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,
@@ -2271,7 +2745,7 @@ var TrendLine = ({
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "circle",
           {
             cx: 4 + (width - 8),
@@ -2309,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: {
@@ -2318,7 +2792,7 @@ var CircularGauge = ({
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -2330,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,
@@ -2342,7 +2816,7 @@ var CircularGauge = ({
                     strokeWidth: 1
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "circle",
                   {
                     cx: size / 2,
@@ -2353,7 +2827,7 @@ var CircularGauge = ({
                     fill: "transparent"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "circle",
                   {
                     cx: size / 2,
@@ -2369,7 +2843,7 @@ var CircularGauge = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   style: {
@@ -2385,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: {
@@ -2423,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: {
@@ -2437,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" }) })
     }
   );
 };
@@ -2451,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: {
@@ -2473,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 = ({
@@ -2486,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: {
@@ -2510,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,
@@ -2538,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;
@@ -2549,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)) {
@@ -2561,7 +3035,7 @@ function FullscreenWorkspace({
       }
     }
   }, [resolvedTabs, activeTab, currentTab, defaultTabValue]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (displayMode !== void 0) {
       setInternalDisplayMode(displayMode);
     }
@@ -2596,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,
@@ -2604,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,
@@ -2631,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,
@@ -2643,7 +3117,7 @@ function FullscreenWorkspace({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               ZoomButton,
               {
                 onClick: onZoomOut,
@@ -2653,7 +3127,7 @@ function FullscreenWorkspace({
                 children: "-"
               }
             ),
-            onResetZoom && /* @__PURE__ */ jsx12(
+            onResetZoom && /* @__PURE__ */ jsx13(
               ZoomButton,
               {
                 onClick: onResetZoom,
@@ -2664,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);
@@ -2700,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 = "";
@@ -2713,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",
@@ -2788,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 = {
@@ -4017,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,
@@ -4029,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,
@@ -4047,7 +4521,7 @@ function NodeRenderer({
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "text",
           {
             x: node.transform.x,
@@ -4089,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,
@@ -4122,7 +4596,7 @@ function NodeRenderer({
           }
         },
         children: [
-          isSelected && /* @__PURE__ */ jsx15(
+          isSelected && /* @__PURE__ */ jsx16(
             "rect",
             {
               x: "-5",
@@ -4137,7 +4611,7 @@ function NodeRenderer({
               pointerEvents: "none"
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "g",
             {
               dangerouslySetInnerHTML: { __html: symbol.svgContent },
@@ -4145,7 +4619,7 @@ function NodeRenderer({
               style: { pointerEvents: "auto" }
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "text",
             {
               x: symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0),
@@ -4166,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,
@@ -4181,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;
@@ -4200,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,
@@ -4213,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,
@@ -4226,7 +4700,7 @@ function PipeRenderer({
                 pointerEvents: "stroke"
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               "polyline",
               {
                 points: pointsString,
@@ -4250,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,
@@ -4287,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,
@@ -4308,7 +4782,7 @@ function PipeRenderer({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "circle",
                 {
                   cx: midX,
@@ -4324,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),
@@ -4346,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,
@@ -4368,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") {
@@ -4409,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,
@@ -4425,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,
@@ -4438,7 +4912,7 @@ function DataOverlay({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "text",
       {
         x: displayX,
@@ -4451,7 +4925,7 @@ function DataOverlay({
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && /* @__PURE__ */ jsx17(
+    showStatus && value.status !== "normal" && /* @__PURE__ */ jsx18(
       "circle",
       {
         cx: displayX + 35 * scale,
@@ -4459,7 +4933,7 @@ function DataOverlay({
         r: 3 * scale,
         fill: finalTextColor,
         opacity: "0.9",
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           "animate",
           {
             attributeName: "opacity",
@@ -4470,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,
@@ -4487,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,
@@ -4503,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,
@@ -4512,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));
@@ -4573,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: {
@@ -4590,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",
@@ -4612,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",
@@ -4633,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,
@@ -4651,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);
@@ -4677,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);
@@ -4694,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) {
@@ -4722,7 +5196,7 @@ function useViewBox(options) {
       height: newHeight
     });
   }, [initialViewBox]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
     const handleWheel = (e) => {
@@ -4755,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) => {
@@ -4831,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;
@@ -4922,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 };
@@ -4961,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);
@@ -4977,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 : []);
@@ -5004,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 : []);
@@ -5023,7 +5497,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const clearSelection = useCallback4(() => {
+  const clearSelection = useCallback5(() => {
     const newSelection = {
       selectedNodeIds: /* @__PURE__ */ new Set(),
       selectedPipeIds: /* @__PURE__ */ new Set()
@@ -5031,7 +5505,7 @@ function useSelection(options = {}) {
     setSelection(newSelection);
     notifyChange(newSelection);
   }, [notifyChange]);
-  const selectNodes = useCallback4(
+  const selectNodes = useCallback5(
     (nodeIds) => {
       const newSelection = {
         selectedNodeIds: new Set(nodeIds),
@@ -5042,7 +5516,7 @@ function useSelection(options = {}) {
     },
     [notifyChange]
   );
-  const selectPipes = useCallback4(
+  const selectPipes = useCallback5(
     (pipeIds) => {
       const newSelection = {
         selectedNodeIds: /* @__PURE__ */ new Set(),
@@ -5066,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);
@@ -5090,7 +5564,7 @@ function useTelemetry(options = {}) {
     },
     [onTelemetryChange]
   );
-  const updateTelemetry = useCallback5(
+  const updateTelemetry = useCallback6(
     (nodeId, value) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -5120,7 +5594,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const updateTelemetryBatch = useCallback5(
+  const updateTelemetryBatch = useCallback6(
     (updates) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -5174,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) => {
@@ -5194,7 +5668,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (refreshInterval <= 0) return;
     const intervalId = setInterval(() => {
       notifyChange(telemetryRef.current);
@@ -5212,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) {
@@ -5254,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,
@@ -5264,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;
@@ -5321,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;
@@ -5358,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];
@@ -5401,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;
@@ -5439,7 +5913,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isListening) return;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -5454,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;
@@ -5484,7 +5958,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld]
   );
-  const cancelDrag = useCallback6(() => {
+  const cancelDrag = useCallback7(() => {
     dragStartRef.current = null;
     hasMovedRef.current = false;
     setIsListening(false);
@@ -5495,7 +5969,7 @@ function useDrag(options = {}) {
       draggedId: null
     });
   }, []);
-  const isDraggingItem = useCallback6(
+  const isDraggingItem = useCallback7(
     (id) => dragState.isDragging && dragState.draggedId === id,
     [dragState.isDragging, dragState.draggedId]
   );
@@ -5508,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,
@@ -5519,7 +5993,7 @@ function useKeyboardShortcuts(options) {
     onSelectAll,
     enabled = true
   } = options;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -5628,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 = "",
@@ -5656,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);
@@ -5692,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;
@@ -5715,7 +6189,7 @@ function PIDCanvas({
     });
     return { minX, minY, maxX, maxY };
   }, [localDiagram.nodes]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (onMounted) {
       const controls = {
         fitToContent: (padding = 50) => {
@@ -5756,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);
@@ -5766,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));
@@ -5780,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));
@@ -5794,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) {
@@ -5811,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;
@@ -5896,7 +6370,7 @@ function PIDCanvas({
     onNodeMove,
     pushToHistory
   ]);
-  const handlePositionChange = useCallback7(
+  const handlePositionChange = useCallback8(
     (nodeId, x, y) => {
       pushToHistory(localDiagram);
       const updatedNodes = localDiagram.nodes.map(
@@ -5918,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) => {
@@ -5936,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) {
@@ -6017,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;
@@ -6025,7 +6499,7 @@ function PIDCanvas({
     },
     [localDiagram.nodes, startDrag]
   );
-  const handleWaypointClick = useCallback7(
+  const handleWaypointClick = useCallback8(
     (pipeId, pointIndex) => {
       setSelectedWaypoint({ pipeId, pointIndex });
       if (selectionEnabled) {
@@ -6034,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;
@@ -6043,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) => {
@@ -6062,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;
@@ -6091,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]);
@@ -6157,7 +6631,7 @@ function PIDCanvas({
     }
     setSelectedWaypoint(null);
   };
-  const handleDragOver = useCallback7(
+  const handleDragOver = useCallback8(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -6168,7 +6642,7 @@ function PIDCanvas({
     },
     [features.allowSymbolDrop, screenToWorld, svgRef]
   );
-  const handleDrop = useCallback7(
+  const handleDrop = useCallback8(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -6181,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) {
@@ -6221,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,
@@ -6236,7 +6710,7 @@ function PIDCanvas({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "svg",
           {
             ref: svgRef,
@@ -6255,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,
@@ -6273,7 +6747,7 @@ function PIDCanvas({
                     fill: "url(#grid-major)"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsx19(
+              ] }) : /* @__PURE__ */ jsx20(
                 "rect",
                 {
                   x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
@@ -6283,7 +6757,7 @@ function PIDCanvas({
                   fill: features.backgroundColor ?? "#ffffff"
                 }
               ),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx20(
                 PipeRenderer,
                 {
                   pipes: displayDiagram.pipes,
@@ -6297,7 +6771,7 @@ function PIDCanvas({
                   onPipeSegmentClick: void 0
                 }
               ),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx20(
                 NodeRenderer,
                 {
                   nodes: displayDiagram.nodes,
@@ -6311,7 +6785,7 @@ function PIDCanvas({
                   statusColorMap
                 }
               ),
-              (features.editPipeRoutes ?? false) && /* @__PURE__ */ jsx19(
+              (features.editPipeRoutes ?? false) && /* @__PURE__ */ jsx20(
                 PipeRenderer,
                 {
                   pipes: displayDiagram.pipes,
@@ -6328,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,
@@ -6348,7 +6822,7 @@ function PIDCanvas({
                   `telemetry-${node.id}`
                 );
               }) }),
-              dragOverPosition && /* @__PURE__ */ jsx19(
+              dragOverPosition && /* @__PURE__ */ jsx20(
                 "circle",
                 {
                   cx: dragOverPosition.x,
@@ -6361,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);
@@ -6377,8 +6851,8 @@ function PIDCanvas({
                     }
                   }
                 }
-                return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-                  /* @__PURE__ */ jsx19(
+                return /* @__PURE__ */ jsxs16(Fragment7, { children: [
+                  /* @__PURE__ */ jsx20(
                     "circle",
                     {
                       cx: lineStartX,
@@ -6390,7 +6864,7 @@ function PIDCanvas({
                       opacity: 0.6
                     }
                   ),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20(
                     "line",
                     {
                       x1: lineStartX,
@@ -6403,7 +6877,7 @@ function PIDCanvas({
                       opacity: 0.8
                     }
                   ),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20(
                     "circle",
                     {
                       cx: connectionCursor.x,
@@ -6415,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) => {
@@ -6423,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,
@@ -6457,7 +6931,7 @@ function PIDCanvas({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx19(
+                    /* @__PURE__ */ jsx20(
                       "circle",
                       {
                         cx: portPos.x,
@@ -6476,7 +6950,7 @@ function PIDCanvas({
             ]
           }
         ),
-        features.dragNodes && /* @__PURE__ */ jsx19(
+        features.dragNodes && /* @__PURE__ */ jsx20(
           PositionPanel,
           {
             selectedNode,
@@ -6496,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 = {
@@ -6526,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",
@@ -6538,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"),
@@ -6550,7 +7024,7 @@ function SymbolLibrary({
           children: "All"
         }
       ),
-      categories.map((category) => /* @__PURE__ */ jsx20(
+      categories.map((category) => /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => setSelectedCategory(category),
@@ -6563,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,
@@ -6571,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
@@ -6688,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,
@@ -6707,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",
@@ -6731,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",
@@ -6755,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",
@@ -6779,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",
@@ -6801,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",
@@ -6828,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: () => {
@@ -6873,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",
@@ -6897,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",
@@ -6920,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",
@@ -6943,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: {
@@ -6956,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",
@@ -6986,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",
@@ -7016,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: {
@@ -7029,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",
@@ -7058,7 +7532,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   "input",
                   {
                     type: "text",
@@ -7088,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",
@@ -7117,7 +7591,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   "input",
                   {
                     type: "text",
@@ -7147,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",
@@ -7177,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",
@@ -7214,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",
@@ -7225,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",
@@ -7252,7 +7726,7 @@ function NodeConfigPanel({
                 }
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               "input",
               {
                 type: "text",
@@ -7279,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,
@@ -7556,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) => {
@@ -7571,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);
@@ -7590,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]) => {
@@ -7602,7 +8076,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateDeviceState = useCallback8(
+  const updateDeviceState = useCallback9(
     (nodeId, stateUpdates) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -7618,7 +8092,7 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const updateParameter = useCallback8(
+  const updateParameter = useCallback9(
     (nodeId, parameterId, value) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -7645,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}`;
@@ -7682,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);
@@ -7691,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;
@@ -7731,7 +8205,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [controls, updateDeviceState, markPending, commandTimeoutMs]
   );
-  const sendModeChange = useCallback8(
+  const sendModeChange = useCallback9(
     (nodeId, mode) => runCommand(
       nodeId,
       commandKey(nodeId, "mode"),
@@ -7740,7 +8214,7 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendParameterChange = useCallback8(
+  const sendParameterChange = useCallback9(
     (nodeId, parameterId, value) => runCommand(
       nodeId,
       commandKey(nodeId, "parameter", parameterId),
@@ -7749,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),
@@ -7816,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) => {
@@ -7827,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);
@@ -7847,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);
@@ -7860,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]) => {
@@ -7872,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);
@@ -7889,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) {
@@ -7922,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) {
@@ -7956,7 +8430,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const resetConfig = useCallback9(
+  const resetConfig = useCallback10(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -7986,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) {
@@ -7995,7 +8469,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs]
   );
-  const validateConfig = useCallback9(
+  const validateConfig = useCallback10(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -8037,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 {
@@ -8073,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,
@@ -8092,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) => {
@@ -8102,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) => {
@@ -8113,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) => {
@@ -8131,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;
@@ -8236,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: {
@@ -8258,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,
                   ")"
@@ -8267,7 +8741,7 @@ function DeviceConfigPanel({
               ]
             }
           ),
-          param.description && /* @__PURE__ */ jsx22(
+          param.description && /* @__PURE__ */ jsx23(
             "div",
             {
               style: {
@@ -8279,7 +8753,7 @@ function DeviceConfigPanel({
               children: param.description
             }
           ),
-          param.type === "number" && /* @__PURE__ */ jsx22(
+          param.type === "number" && /* @__PURE__ */ jsx23(
             "input",
             {
               type: "number",
@@ -8303,7 +8777,7 @@ function DeviceConfigPanel({
               }
             }
           ),
-          param.type === "string" && /* @__PURE__ */ jsx22(
+          param.type === "string" && /* @__PURE__ */ jsx23(
             "input",
             {
               type: "text",
@@ -8324,7 +8798,7 @@ function DeviceConfigPanel({
               }
             }
           ),
-          param.type === "boolean" && /* @__PURE__ */ jsxs18(
+          param.type === "boolean" && /* @__PURE__ */ jsxs19(
             "label",
             {
               style: {
@@ -8334,7 +8808,7 @@ function DeviceConfigPanel({
                 cursor: isDisabled ? "not-allowed" : "pointer"
               },
               children: [
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "input",
                   {
                     type: "checkbox",
@@ -8348,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 ?? "",
@@ -8370,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: {
@@ -8393,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: {
@@ -8403,7 +8877,7 @@ function DeviceConfigPanel({
           backgroundColor: surfaceColor
         },
         children: [
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "div",
             {
               onClick: () => section.collapsible && toggleSection(section.id),
@@ -8416,8 +8890,8 @@ function DeviceConfigPanel({
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ jsxs18("div", { children: [
-                  /* @__PURE__ */ jsxs18(
+                /* @__PURE__ */ jsxs19("div", { children: [
+                  /* @__PURE__ */ jsxs19(
                     "div",
                     {
                       style: {
@@ -8429,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: {
@@ -8447,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
@@ -8510,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: {
@@ -8524,8 +8998,8 @@ function DeviceConfigPanel({
             borderBottom: `2px solid ${borderColor}`
           },
           children: [
-            /* @__PURE__ */ jsxs18("div", { children: [
-              /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsxs19("div", { children: [
+              /* @__PURE__ */ jsx23(
                 "h3",
                 {
                   style: {
@@ -8545,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: {
@@ -8558,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,
@@ -8582,7 +9056,7 @@ function DeviceConfigPanel({
                   children: "CTRL"
                 }
               ),
-              onUndock && /* @__PURE__ */ jsx22(
+              onUndock && /* @__PURE__ */ jsx23(
                 "button",
                 {
                   onClick: onUndock,
@@ -8603,7 +9077,7 @@ function DeviceConfigPanel({
                   children: undockIcon
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 "button",
                 {
                   onClick: onClose,
@@ -8626,7 +9100,7 @@ function DeviceConfigPanel({
           ]
         }
       ),
-      binding.state.isDirty && /* @__PURE__ */ jsx22(
+      binding.state.isDirty && /* @__PURE__ */ jsx23(
         "div",
         {
           style: {
@@ -8641,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: {
@@ -8656,7 +9130,7 @@ function DeviceConfigPanel({
             flexWrap: "wrap"
           },
           children: [
-            showApply && /* @__PURE__ */ jsx22(
+            showApply && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: handleApply,
@@ -8679,7 +9153,7 @@ function DeviceConfigPanel({
                 children: binding.state.isSaving ? "Applying..." : "Apply"
               }
             ),
-            showSave && /* @__PURE__ */ jsx22(
+            showSave && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: handleSave,
@@ -8702,7 +9176,7 @@ function DeviceConfigPanel({
                 children: binding.state.isSaving ? "Saving..." : "Save"
               }
             ),
-            showReset && /* @__PURE__ */ jsx22(
+            showReset && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: handleReset,
@@ -8725,7 +9199,7 @@ function DeviceConfigPanel({
                 children: "Reset"
               }
             ),
-            showCancel && /* @__PURE__ */ jsx22(
+            showCancel && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: handleCancel,
@@ -8752,7 +9226,7 @@ function DeviceConfigPanel({
         }
       )
     ] }),
-    binding.state.lastSaveResult && showToast && /* @__PURE__ */ jsx22(
+    binding.state.lastSaveResult && showToast && /* @__PURE__ */ jsx23(
       "div",
       {
         style: {
@@ -8776,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,
@@ -8787,7 +9261,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  useEffect13(() => {
+  useEffect14(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -8859,6 +9333,7 @@ export {
   LegacyValueEntry,
   NodeConfigPanel,
   NodeControlsPanel,
+  NumpadDialog,
   PIDCanvas,
   PanelContent,
   PanelTabs,